:root {
  --bg-color: #202021;/*33,32,32 or 2b2d30*/
  --bg-rgb-color: 33,32,32;
  --off-white: #EAEBED;/*237,235,234*/
  --lt-gray: 189,187,185;/*#B9BBBD*/
  --orig-gray: #a0a0a1;/*161,160,160*/
  --norm-gray: #797B7D;/*125,123,121*/
  --drk-gray: #525354;/*84,83,82*/
  --md-gray: #48494A;/*74,73,72*/
  --dk-gray: #404142;/*66,65,64*/
  --blk-gray: #303031;/*49,48,48*/
  --padding: 15px;
  --orange: #f5541f;/*245,84,31*/
  --lt-orange: #FF7219;/*255,114,25*/
  --md-orange: #b6451f;/*182,69,31*/
  --dk-orange: #843a0c;/*132,58,12*/
  --brown: #58321E;
  --dull-peach: #d4c0b1;
  --headline-text: 'Oswald', sans-serif;/*Staatliches*/
  --body-text: 'Libre Franklin', sans-serif;
  --small-text: 'Archivo', sans-serif;
  --serif-text: 'Merriweather', serif;
  --condensed-text: 'Archivo Narrow', 'Open Sans', 'Oswald', sans-serif;
}
body, input, select, textarea {
    color: var(--orig-gray);
    font-family: var(--body-text), -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen", Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {background: var(--bg-color);}
::selection {
    background: var(--lt-orange);/* WebKit/Blink Browsers */
    color: var(--off-white);
}
::-moz-selection {
    background: var(--lt-orange); /* Gecko Browsers */
    color: var(--off-white);
}
::-webkit-input-placeholder { color: var(--norm-gray) !important; opacity: .9; }

:-moz-placeholder { color: var(--norm-gray) !important; opacity: .9; }

::-moz-placeholder { color: var(--norm-gray) !important; opacity: .9; }

:-ms-input-placeholder { color: var(--norm-gray) !important; opacity: .9; }

.formerize-placeholder { color: var(--norm-gray) !important; opacity: .9; }

/*input:active,input:focus,.button:active,.button:focus {outline: var(--md-orange);}*/
a {
    -moz-transition: color 0.15s ease-in-out, border-bottom-color 0.15s ease-in-out;
    -webkit-transition: color 0.15s ease-in-out, border-bottom-color 0.15s ease-in-out;
    -ms-transition: color 0.15s ease-in-out, border-bottom-color 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, border-bottom-color 0.15s ease-in-out;
    border-bottom: dotted 1px #fff;
    color: var(--orange);
    outline: none;
}
a:hover {
    outline: none;
    cursor: pointer;
    /*text-shadow: 0 0 5px #fff;*/
    color: var(--lt-orange) !important;
    border-bottom: none;
     -webkit-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
a:active, a.active{outline: none; color: var(--md-orange);}
/*a:visited {color: var(--orig-gray);}*/
p {margin-bottom: 1em;}
p a {font-weight: 600; color: var(--orange)}
p a:hover {color: var(--md-orange) !important;}
strong {color: var(--orig-gray); font-weight: 600;}
b {color: var(--orig-gray); font-weight: 400;}
#header {
    background-color: var(--bg-color);
    bottom: 0;
    height: auto;
}
#header nav > ul > li a.icon i:before {
    color: var(--bg-color);
    float: left;
    margin-right: 0.5em;
}
#header nav > ul > li a {
    background-color: rgba(var(--lt-gray),.1);
    color: var(--norm-gray);
    font-family: var(--headline-text);
}
#header nav > ul > li a:hover  {
    background-color: var(--md-orange); text-shadow: none;
    color: var(--orig-gray);
}
#header nav > ul > li a i.active {
    background-color: rgba(var(--lt-gray),.04);
    text-shadow: none;
    color: var(--blk-gray);
}
#header nav > ul > li a i.active:hover {
    background-color: var(--orange); text-shadow: none;
    color: var(--lt-gray);
}
#header h1 {
    color: var(--norm-gray);
    font-size: .9em;
    white-space: nowrap;
    letter-spacing: 0.125em;
    min-width: 0;
    flex: 1;
    line-height: 4em;
}
#header a {border-bottom: none}
#header a b {
    color: var(--dk-orange);
    font-size: .66em;
    font-weight: 600;
    margin-right: 30px;
    letter-spacing: 0;
    white-space: normal;
    font-family: var(--small-text);
    line-height: 1.05em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    flex: 1;
}
#header a:hover b {color: var(--norm-gray);}
#header h1 i {
    margin-left: 6px;
    margin-right: 6px;
    font-style: normal;
    color: var(--drk-gray);
}
#header h1 a:hover span {color: var(--orange)}
#header .logo {
    height: 3.5em;
    width: auto;
    vertical-align: middle;
    opacity: 1;
     -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    margin-right: 30px;
    flex: 1;
}
#header .logo:hover {
    opacity: .6;
    -webkit-transition: all 180ms ease-in-out;
    -ms-transition: all 180ms ease-in-out;
    -moz-transition: all 180ms ease-in-out;
    transition: all 180ms ease-in-out;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.panel {
    padding-top: 1.5em;
    /*opacity: .96;*/
}
form .field {margin-bottom: 1em;}
form > .actions {margin-top: 1.1em !important;}
input {font-weight: 400}
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected {
    /*box-shadow: inset 0 0 0 2px var(--dk-gray);*/
    box-shadow: inset 1px 1px 3px var(--blk-gray);
    font-weight: 300;
    color: var(--blk-gray) !important;
}
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
    box-shadow: inset 0 0 0 2px var(--dk-gray);
    font-size: 16px;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover {
    box-shadow: inset 0 0 0 2px var(--orange);
    color: var(--orange) !important;
}
input[type="reset"] {color: var(--norm-gray) !important}
input[type="reset"]:hover {
    box-shadow: inset 0 0 0 2px var(--norm-gray);
    color: var(--orig-gray) !important;
}
input[type="submit"].special, input[type="reset"].special, input[type="button"].special, button.special, .button.special {
    background-color: var(--dk-gray);
    color: var(--norm-gray) !important;
    font-size: 16px;
}
input[type="submit"].special:hover {background-color: var(--orange); color: #fff;}
input[type="reset"].special:hover {box-shadow: inset 0 0 0 2px var(--md-gray); color: var(--norm-gray);}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
    background: var(--dk-gray);
    color: var(--orange);
    font-weight: 400;
    font-size: 16px;
    box-shadow: inset 1px 1px 3px var(--bg-color);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    box-shadow: inset 0 0 0 2px var(--md-orange); outline: none;
    color: var(--orange); font-weight: 400;
}
input[type="text"], input[type="password"], input[type="email"], select {
    height: 2.75em;

}
textarea {height: 7.25em;}
#homepage .thumb,#homepage .thumb picture {
    text-align: center;
    /*margin: 5px 25px 15px -25px; */
    margin: auto;
    /*padding: 10px 5px 75px;*/
    width: calc(100% - 25px);
}
#homepage .thumb,#homepage .thumb picture img {
    height: auto;
    max-width: 100vw;
    margin: 10px 0 0 -15px;
}
#homepage .thumb.active, #homepage .thumb:active {opacity: 1;}
#homepage a.image {border-bottom: none;}
#main .thumb {
    /*background-color: var(--main-md-gray);*/
}
#main .thumb > a.image, #main .thumb > a:hover, #main .thumb a img {
    cursor: pointer;
}
#main .thumb > h2 {
    bottom: .5em;
    left: .7em;
    font-size: 0.8em;
    text-transform: capitalize;
    letter-spacing: 0;
    color: var(--off-white);
    -webkit-filter: 0;
    opacity: 0;
    font-weight: 400;
    font-family: var(--small-font);
}
#main .thumb:hover > h2 {
    color: #E5E7EB;
    opacity: 1;
     -webkit-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
#main .thumb > .image {
    opacity: .75;
    -webkit-filter: grayscale(25%);
    filter: grayscale(25%);
    -ms-transition: all 350ms ease-in;
    -moz-transition: all 350ms ease-in;
    -webkit-transition: all 350ms ease-in;
    transition: all 350ms ease-in;
    /*filter: blur(2px);
    -webkit-filter: blur(2px);*/
    background-blend-mode: multiply;

   /* -webkit-transform: translateZ(0);
    transform: translateZ(0);*/
}
#main .thumb > .image:hover {
    opacity: 1;
    backface-visibility: hidden;
    -webkit-filter: grayscale(0);
    filter:  grayscale(0);
    -ms-transition: all 150ms ease-out;
    -ms-transform: scale(1.1);
    -moz-transition: all 150ms ease-out;
    -moz-transform: scale(1.1);
    -webkit-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;

    /*filter: blur(0);
    -webkit-filter: blur(0);*/
    /*image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;*/
}
footer h2 {
    font-family: var(--headline-text);
    letter-spacing: .33px;
    color: var(--orange);
    /*margin-bottom: 10px;*/
    font-weight: 400;
    margin: 1.5em 0 .7em;
    font-size: 1.15em;
}
footer p {
    color: var(--orig-gray);
    /*font-size: 1.1em;*/
    letter-spacing: 0.1px;
    line-height: 1.45em;
    /*font-weight: 400;*/
    /*-webkit-text-stroke: 0.25px rgba(125,123,121,.3);*/
}
footer .scrollable {
    max-height: 290px;
    overflow: auto;
}
footer small {font-size: .8em; letter-spacing: 0; color: var(--norm-gray);}
ul {margin-bottom: 1.25em}
#footer .copyright {
    font-size: 0.6em;
    text-transform: none;
    letter-spacing: .25px;
    color: var(--norm-gray);
    margin-top: 25px;
}
ul.icons li .icon {color: var(--md-gray);}
ul.icons li .icon:hover {color: var(--orange) !important;
    text-shadow: 0 0 7px var(--md-orange) !important;}
ul.icons li .icon:active {color: var(--lt-gray);}
.contactinfo ul.icons li i {
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    line-height: 1.5em;
}
.contactinfo ul.icons li .label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 8px;
    font-weight: 300;
    font-family: var(--small-text);
    font-size: 1em;
    color: var(--norm-gray);
    line-height: 1.5em;
    letter-spacing: .15px
}
.contactinfo .icon .label:hover {color: var(--orange);}
.socialmedia ul.icons li i:before {
    font-size: 1.25em;
    margin: 0 2px;
    line-height: 1.5;
}
.poptrox-popup .caption {
    padding: .5em .5em 0em 1em;
    background-color: : linear-gradient(to bottom,transparent,rgba(var(--bg-rgb-color),.85));
    background-blend-mode: multiply;
}
.poptrox-popup .caption h2 {
    font-family: var(--headline-font);
    font-size: .9em;
    /* text-shadow: 1px 1px 1px rgba(20,18,16,.3), 0px 1px 3px rgba(20,18,16,.2); */
    font-weight: 700;
    letter-spacing: -.125px;
    text-transform: capitalize;
    margin-bottom: -1px;
    margin-left: -5px;
    mix-blend-mode: screen;
    max-width: 300px;
}
.poptrox-popup .caption h2 span {
    background: var(--lt-orange);
    opacity: .9;
    color: var(--bg-color);
    padding: 1px 3px;
    line-height: 1.1;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.poptrox-popup .caption p {
    font-size: .9em;
    /*color: var(--orig-gray);
    mix-blend-mode: lighten;*/
    opacity: .75;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1;
    width: 75%;
    letter-spacing: 0;
    font-family: var(--small-text);
}
/*.poptrox-popup .caption h6 {
    font-size: 10px;
    margin: 0;
    font-family: var(--small-font);
    line-height: 1.1em;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}*/
.poptrox-popup .caption h6 a {
    color: var(--orange);
}
@media screen and (min-width: 1681px) {
    #main .thumb {
        width: calc(25% - 2px);
        margin: 1px;}

}
@media screen and (max-width: 1680px) {
    .socialmedia ul.icons li i:before {font-size: 1.5em;}
    #main .thumb {width: calc(33.33% - 2px); min-height: 30em;}
}
@media screen and (max-width: 1280px) {
    #main .thumb {width: calc(50% - 2px); min-height: 25em;}
    #header h1 {display: inline-block;}
}
@media screen and (max-width: 980px) {
    #header h1 {display: none;}
    /*#main .thumb > img {max-width: 600px;}*/
    h2 {font-size: 1.25em;}
    /*p {font-size: .9em;}*/
    .contactinfo ul.icons li {width:48%;}
    .contactinfo ul.icons li .icon:before {font-size: 1.5em;}
    .contactinfo .icon > .label {font-size: 1.1em;}
    .poptrox-popup .caption p {margin-bottom: 6px;}
    .socialmedia ul.icons li i:before {font-size: 1.4em;}
}
@media screen and (max-width: 736px) {
    #header h1 {letter-spacing: 0.01em; font-size: inherit;}
    /*#header .logo {margin-top: 5px;}*/
}
@media screen and (max-width: 680px) {
    #main .thumb {width: calc(100% - 2px); min-height: 20em;}
    #header h1 > span {visibility: hidden;}
    #main .thumb > .image {
        opacity: 1;
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);}
}
@media screen and (max-width: 501px) {
    /*#main .thumb {width: calc(100% - 2px);}*/
    #header b {visibility: hidden;}
}
@media screen and (max-width: 480px) {
    #main .thumb {min-height: 15em}
    #header {height: 3em;}
    #header nav > ul {line-height: 3em;}
    #header .logo {height: 2.1em; margin-top: -10px;}
    #header nav i {display: none;}
    #main {margin-top: -15px}
}

@media screen and (max-width: 360px) {
    /*#main .thumb > img {max-width: 360px;}*/


}