@charset "utf-8";

/* CSS Document */

/*
    font-family: 'big_john_proregular';
    font-family: 'big_john_probold';
    font-family: 'big_john_prolight';

font-family: "tangier", sans-serif;
font-weight: 700;
font-style: normal;

*/

html {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family:'big_john_proregular', sans-serif; font-weight:400; font-size:15px;}
*, *:before, *:after {-webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit;}

body, html {min-height:100%; width:100%; margin:0; -webkit-font-smoothing:antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;}
body {background:#020202; font-family:'big_john_proregular', sans-serif; font-weight:400; position:relative; min-height:100vh; color:#fff;}
body, p, h1, h2, h3 {margin:0; padding:0;}

strong {
font-family:'big_john_probold', sans-serif;
font-weight:400;
}


body:before {display:block; content:" "; width:100%; height:1px; background:#fff6f6; position:absolute; left:0; right:0; top:30px; z-index:2;}
#page {position:relative; z-index:1; overflow:hidden; width:100%; margin:0 auto; 
min-height: 100vh; 
min-height: calc(var(--vh, 1vh) * 100);
background:url("../images/windowshopping.webp") center top no-repeat; background-size:auto 832px; padding:0;}
.no-webp #page {background-image: url("../images/windowshopping.jpg");}

#content {position:relative; z-index:1; width:100%; min-width:320px; max-width:990px; margin:0 auto; min-height:400px; 
height: 100vh; 
height: calc(var(--vh, 1vh) * 100);
max-height:830px;}

#moreTriggerHolder {position:absolute; top:0; right:20px; font-family:'big_john_proregular', sans-serif; font-size:16px; color:#fff; height:30px; line-height:30px;}
#moreTriggerHolder button {border:none; padding:0; margin:0; font-family:'big_john_proregular', sans-serif; font-size:16px; color:#fff; background-color:transparent; text-align:left; position:relative; height:30px; line-height:30px;}
#moreTriggerHolder span {text-decoration: underline solid #fff 1px; text-underline-offset:2px;
 -webkit-text-decoration: underline solid #fff;
}

#headerHolder {position:absolute; top:50px; left:0; right:0; padding:0 20px;}
#headerHolder h1 {font-family:'big_john_probold', sans-serif; margin:0; padding:0; text-transform:uppercase;
text-shadow: 0 1.6px 1.6px rgba(0, 0, 0, 0.25);
font-size: 25.6px;
font-weight:400;
line-height:28px;
letter-spacing: normal;
text-align: left;
color: #70bae4;
}
#headerHolder h1 span {display: block;}
#headerHolder h1 em {text-transform:none;
font-family: "tangier", sans-serif;
font-style: normal;
font-size: 26.8px;
font-weight: 500;
line-height:22.2px;
color: #fff;
}
#headerHolder h1 br {display:none;}

#headerHolder h2 {font-family:'big_john_proregular', sans-serif; font-weight:400; margin:6px 0 0 0; padding:5px 0 0 0; text-shadow:0 2px 2px rgba(0, 0, 0, 0.25); font-size:14.8px; color:#fff;}

#byHolder {position:absolute; bottom:190px; right:20px; font-family:'big_john_proregular', sans-serif; font-size:19px; color:#fff; font-weight:400; margin:0; padding:0; text-align:right;}
#byHolder a {font-family:'big_john_proregular', sans-serif; font-size:19px; color:#fff; text-decoration:none; position:relative;}
#byHolder a:hover {color:#fff; text-decoration:none;}
#byHolder a span {text-decoration: underline solid #fff 1px; text-underline-offset:2px; -webkit-text-decoration: underline solid #fff; }

#aboutTriggerHolder {position:absolute; bottom:140px; right:20px; font-family:'big_john_proregular', sans-serif; font-size:18px; color:#fff; text-align:right;}
#aboutTriggerHolder button {border:none; padding:0; margin:0; font-family:'big_john_proregular', sans-serif; font-size:18px; color:#fff; background-color:transparent; text-align:right; position:relative;}
#aboutTriggerHolder button span {text-decoration: underline solid #fff 1px; -webkit-text-decoration: underline solid #fff; text-underline-offset:2px;}

#comingSoon {font-family:'big_john_probold', sans-serif; font-weight:400; font-size:14px; color:#70bae4; position:absolute; right:20px; bottom:70px; text-align:right;}
#comingSoon p {margin:0; padding:0;}
#comingSoon p a {display:block; color:#70bae4; text-decoration:none;}
#comingSoon p a:hover {color:#70bae4; text-decoration:none;}
#comingSoon p a span {text-decoration: underline solid #70bae4 1px; -webkit-text-decoration: underline solid #70bae4; text-underline-offset:2px;}


/* Modals */
#moreModal {background-color: rgba(2, 29, 45, 0.9);}
#moreModal #moreModalclose {position:absolute; top:14px; right:20px; background:none; color:#fffafa; font-family:'big_john_probold', sans-serif; font-size:30px; line-height:30px; font-weight:400; padding:0; margin:0; border:none;}
#moreModal .modal-content {background-color:transparent; text-align:center;}
#moreModal .more-section {padding:0 0 10px 0;}
#moreModal .modal-content h2 {margin:0 0 14px 0; padding:0;
font-family: "tangier", sans-serif;
font-size:30.2px;
line-height:31.4px; 
font-weight: 500;
font-style: normal;
color:#70bae4;
letter-spacing: 1px;
}
#moreModal .modal-content p {
font-family:'big_john_proregular', sans-serif;
font-size:24.2px;
line-height:26px;
color: #fff;
margin:0 0 20px 0;
}
#moreModal .modal-content p a {
display:inline-block;
position:relative;
text-decoration:none;
color: #fff;
}
#moreModal .modal-content p a span {text-decoration: underline solid #fff 1px; -webkit-text-decoration: underline solid #fff; text-underline-offset:3px;}
#moreModal .modal-content p a:hover {
text-decoration:none;
color: #fff;
}



#aboutModal {background-color: rgba(0, 0, 0, 1);}
#aboutModal #aboutModalclose  {position:absolute; top:14px; right:20px; background:none; color:#fffafa; font-family:'big_john_probold', sans-serif; font-size:30px; line-height:30px; font-weight:400; padding:0; margin:0; border:none;}
#aboutModal .modal-dialog {max-width:350px; margin-left:auto; margin-right:auto;}
#aboutModal .modal-content {background-color:transparent; padding:0 20px; text-align:left;}
#aboutModal .modal-body {padding:0;}
#aboutModal .modal-content p {
font-family:'big_john_proregular', sans-serif;
font-size:14px;
line-height:normal;
color: #fff;
margin:0 0 20px 0;
}
#aboutModal .modal-content p strong {
font-family:'big_john_probold', sans-serif;
font-weight:400;
}


#aboutModal .modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width:10px;
}

#aboutModal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);


}
#aboutModal .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {  
    background-color:#999;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;

}

/* Media Queries */
@media only screen and (min-width: 380px) {

body:before {top:40px;}
#page {background-size:auto 1000px; background-position:center -20px;}
#content {min-height:500px; max-height:1000px;}

#moreTriggerHolder {right:20px; font-size:18px; height:40px; line-height:40px;}
#moreTriggerHolder button {font-size:18px; height:40px; line-height:40px;}

#headerHolder {top:60px;}
#headerHolder h1 {font-size:32px; line-height:35px;}
#headerHolder h1 em {font-size:33.5px; line-height:27.7px;}
#headerHolder h2 {font-size:20px; margin:0;}

#byHolder {bottom:240px; right:20px; font-size:24px;}
#byHolder a {font-size:24px;}

#aboutTriggerHolder {bottom:170px; right:20px; font-size:20px;}
#aboutTriggerHolder button {font-size:20px;}

#comingSoon {font-size:15px; right:20px; bottom:78px;}

/* Modals */
#moreModal #moreModalclose {top:14px; right:30px; font-size:38px; line-height:38px;}
#moreModal .more-section {padding:0 0 10px 0;}
#moreModal .modal-content h2 {margin:0 0 24px 0; font-size:38.4px; line-height:39.9px;}
#moreModal .modal-content p {font-size:30.7px; line-height:32px; margin:0 0 30px 0;}

#aboutModal #aboutModalclose  {top:14px; right:30px; font-size:38px; line-height:38px;}
#aboutModal .modal-content p {font-size:18px; margin:0 0 20px 0;}

}

@media only screen and (min-width: 720px) {

body:before {top:48px;}
#page {background-size:auto 1250px; background-position:center -30px;}
#content {min-height:800px; max-height:1250px;}

#moreTriggerHolder {right:40px; font-size:28px; height:48px; line-height:48px;}
#moreTriggerHolder button {font-size:28px; height:48px; line-height:48px;}

#headerHolder {top:96px; padding:0 30px;}
#headerHolder h1 {font-size:60px; line-height:65px;}
#headerHolder h1 em {font-size:62.5px; line-height:55px; display:inline-block; margin:0 0 10px 0;}
#headerHolder h1 br {display:inline-block;}
#headerHolder h2 {font-size:32.9px; max-width:220px; margin:0;}

#byHolder {bottom:auto; right:auto; font-size:32.9px; text-align:left; left:30px; top:515px;}
#byHolder a {font-size:32.9px;}

#aboutTriggerHolder {bottom:auto; right:auto; font-size:34.5px; text-align:left; top:610px; left:30px;}
#aboutTriggerHolder button {font-size:34.5px;}

#comingSoon {font-size:19.7px; right:30px; bottom:110px;}
#comingSoon p a {display:inline-block;}

/* Modals */
#moreModal #moreModalclose {top:14px; right:30px; font-size:48px; line-height:48px;}
#moreModal .more-section {padding:0 0 10px 0;}
#moreModal .modal-content h2 {margin:0 0 24px 0; font-size:48px; line-height:49.9px;}
#moreModal .modal-content p {font-size:38.4px; line-height:42px; margin:0 0 40px 0;}

#aboutModal #aboutModalclose  {top:14px; right:30px; font-size:48px; line-height:48px;}
#aboutModal .modal-dialog {max-width:640px;}
#aboutModal .modal-content p {font-size:24px; margin:0 0 20px 0;}

}

@media only screen and (min-width: 1024px) {

#page {background-size:auto 932px; background-position:center top;}
#content {min-height:650px; max-height:932px;}

#moreTriggerHolder {right:30px;}

#headerHolder {top:75px;}
#headerHolder h1 {font-size:69.8px; line-height:72.9px;}
#headerHolder h1 em {font-size:62.5px; line-height:55px; display:inline-block; margin:0 0 10px 0;}
#headerHolder h1 br {display:inline-block;}
#headerHolder h2 {font-size:32.9px; max-width:220px;}

#byHolder {bottom:auto; right:auto; font-size:36px; text-align:left; left:30px; top:512px;}
#byHolder a {font-size:36px;}

#aboutTriggerHolder {bottom:71px; top:auto; right:auto; font-size:36px; text-align:left; left:30px;}
#aboutTriggerHolder button {font-size:36px;}

#comingSoon {right:30px; bottom:75px;}

/* Modals */
#moreModal #moreModalclose {top:14px; right:30px; font-size:48px; line-height:48px;}
#moreModal .more-section {padding:0 0 10px 0;}
#moreModal .modal-content h2 {margin:0 0 24px 0; font-size:40px; line-height:42px;}
#moreModal .modal-content p {font-size:32px; line-height:34px; margin:0 0 40px 0;}

#aboutModal #aboutModalclose  {top:14px; right:30px; font-size:48px; line-height:48px;}
#aboutModal .modal-dialog {max-width:1000px;}
#aboutModal .modal-content p {font-size:34px; margin:0 0 40px 0;}

}

@media only screen and (min-width: 1280px) {  

#moreTriggerHolder {right:-100px;}
#comingSoon {right:-100px;}

#aboutModal .modal-dialog {max-width:1060px;}

}




@media only screen and (min-width: 1400px) and (min-height: 900px) {  

body:before {top:60px;}
#page {background-size:auto 1024px; background-position:center top;}
#content {min-height:800px; max-height:1024px; max-width:1110px;}

#moreTriggerHolder {right:-130px; height:60px; line-height:60px;}
#moreTriggerHolder button {height:60px; line-height:60px;}

#headerHolder {top:105px;}
#headerHolder h1 {font-size:85px; line-height:88.7px;}
#headerHolder h1 em {font-size:72px; line-height:59px; display:inline-block; margin:0 0 14px 8px;}
#headerHolder h2 {font-size:40px; max-width:270px;}

#byHolder {bottom:auto; right:auto; font-size:42px; text-align:left; left:30px; top:638px;}
#byHolder a {font-size:42px;}

#aboutTriggerHolder {bottom:95px; font-size:30px; text-align:left; left:30px;}
#aboutTriggerHolder button {font-size:38px;}

#comingSoon {right:-130px; bottom:100px; font-size:24px;}


/* Modals */
#moreModal #moreModalclose {top:14px; right:30px; font-size:48px; line-height:48px;}
#moreModal .more-section {padding:0 0 10px 0;}
#moreModal .modal-content h2 {margin:0 0 20px 0; font-size:50px; line-height:52px;}
#moreModal .modal-content p {font-size:40px; line-height:42px; margin:0 0 40px 0;}

#aboutModal #aboutModalclose  {top:14px; right:30px; font-size:48px; line-height:48px;}
#aboutModal .modal-content {padding:0 20px;}
#aboutModal .modal-content p {font-size:34px; margin:0 0 40px 0;}
  
}

@media only screen and (min-width: 1920px) and (min-height: 900px) {  


#page {background-size:auto 1380px; background-position:center top;}
#content {min-height:1000px; max-height:100vh; max-width:1280px;}

}

@media only screen and (min-width: 2560px) and (min-height: 900px) {  


#page {background-size:auto 1440px; background-position:center top; max-width:100%}
#content {min-height:1000px; max-height:100vh; max-width:1670px;}

}