/*@font-face {font-family:myFirstFont; src:url(sansation_light.woff);}*/
/*@font-face {font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}*/
/** {font-family:myFirstFont;}*/


html {background:url('np8.jpg') center no-repeat fixed; background-size:cover; box-shadow:inset 0px 0px 0px 9999px rgba(255,255,255,0.5);}
html, body {height:100%; font-family:Verdana,sans-serif; scroll-behavior:smooth; background:transparent; background-color:#000;}
a:link, a:visited, a:hover, a:active {color:#50A8EF; color:dodgerblue; text-decoration:none;}

div#container {/*background-color:rgba(0,100,200,1);*/ /*background-color:rgba(30,144,255,0.75);*/ background-color:rgb(52,58,64); transition:.25s; z-index:1; min-height:100%; max-width:1600px; margin:auto;}

div#container div#theArchive {display:none;}
div#container div#theArchive h2 {}
div#container div#theArchive h2 img {height:100%; height:34px; position:relative; bottom:4px;}

div#container div.body-row {padding-top:20px; padding-bottom:20px; text-align:center;}

div#container div#thePreviewer {position:relative; /*display:none;*/}
div#container div#thePreviewer div#displayBox {position:relative; transition:.4s; padding-top:15px; padding-bottom:15px; /*min-height:500px;*/}
div#container div#thePreviewer div#displayBox iframe#pageDisplay {position:relative; /*border-radius:8px;*/ border:2px solid rgb(52,58,64); background-color:rgba(0,0,0,0.5); cursor:pointer; width:100%; height:100%; transition:.25s; animation:go .5s;} 
@keyframes go {from {transform:scale(0); opacity:0; top:100px;} to {transform:scale(1); opacity:1; top:0;} }
/*#container div#thePreviewer div#displayBox iframe#pageDisplay {box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);}*/
/*#container div#thePreviewer div#displayBox iframe#pageDisplay:hover {box-shadow: 0px 2px 8px 4px rgba(0,0,0,0.5);}*/
div#container div#thePreviewer div#displayBox button#resetBtn {position:absolute; top:12px; right:12px;}
div#container div#thePreviewer div#displayBox button#resetBtn {background:transparent; border-radius:50%; border:0; color:rgba(238,238,238,0.5); font-size:32px; padding:0px 15px 3px; cursor:pointer; transition:.5s;}
div#container div#thePreviewer div#displayBox button#resetBtn:hover {color:#EEE;}
div#container div#thePreviewer div#form {/*background-color:rgba(0,0,0,0.05);*/ border-radius:10px; transition:.4s; position:absolute; top:40px; left:0; opacity:0.75;}
div#container div#thePreviewer div#form .input-row {/*margin-bottom:4px;*/}
div#container div#thePreviewer div#form .input-row .autocompleteBox {position:relative; display:inline-block; width:100%; margin:12px 0 6px;}	/*the container must be positioned relative:*/
div.autocomplete-items {position:absolute; border:1px solid #d4d4d4; border-bottom:none; border-top:none; z-index:99; text-align:left;
/*position the autocomplete items to be the same width as the container:*/ top:100%; left:0; right:0; border-radius:10px;}
div.autocomplete-items div {padding:5px 10px; cursor:pointer; background-color:#fff; border-bottom:1px solid #d4d4d4;}
div.autocomplete-items div:hover {background-color:#e9e9e9;}						/*when hovering an item:*/
div.autocomplete-active {background-color:dodgerblue !important; color:#ffffff;}	/*when navigating through the items using the arrow keys:*/
div#container div#thePreviewer div#form .input-row input#pageName {background-color:#f1f1f1; border:1px solid #DDD; border-right:0; border-radius:10px; padding:5px 10px; font-size:16px; width:100%; transition:1s;}
div#container div#thePreviewer div#form .input-row div#clearBtn {border-radius:50%; background-color:rgba(0,0,0,0.25); cursor:pointer; margin:0; padding:9px; position:absolute; right:7px; top:50%; transform:translateY(-50%);}
div#container div#thePreviewer div#form .input-row div#clearBtn label {color:#EEE; cursor:pointer; padding-bottom:2px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
div#container div#thePreviewer div#form .button-row div.l {padding-right:4px;}
div#container div#thePreviewer div#form .button-row div.r {padding-left:4px;}
div#container div#thePreviewer div#form .button-row button {background-color:#DDD; border:1px solid #CCC; border-radius:5px; background-color:#EEE; border:1px solid #CCC; border-radius:10px; color:rgb(52,58,64); cursor:pointer; padding:5px 10px; margin:6px 0 12px; width:100%; /*transition:1s;*/}
div#container div#thePreviewer div#form .button-row button:hover {background-color:#CCC;}
div#container div#thePreviewer div#form .button-row button#exportBtn img {height:20px; position:relative; top:-3px;}

div#container div#theBrand {display:block;}
div#container div#theBrand div#brandStory {font-size:1em; line-height:2em; padding:24px; border-radius:12px; background-color:rgb(52,58,64,0.75); color:#EEE; transition:.5s; text-align:left;}
/*div#container div#theBrand div#brandStory:hover {background-color:rgba(255,255,255,0.5); color:rgb(52,58,64);}*/
div#container div#theBrand div#brandStory h3 {text-align:center;}
div#container div#theBrand div#brandStory img {float:left; border-radius:4px; width:100%; max-width:500px; margin-right:24px; margin-bottom:16px; transition:1s;}
div#container div#theBrand div.viewLibrary {border:2px solid rgb(52,58,64); border-radius:12px; padding:16px 80px; margin:24px auto 0px; display:inline-block; max-width:100%; transition:.5s;}
div#container div#theBrand div.viewLibrary {background:rgba(255,255,255,0.5); color:rgb(52,58,64);}
div#container div#theBrand div.viewLibrary:hover {/*background:rgb(52,58,64);*/ color:#EEE;}
.addShadow {box-shadow:0 4px 2px 0 rgba(0,0,0,0.15), 0 4px 4px 0 rgba(0,0,0,0.12);}


div#foot {background-color:#AAA; background-color:rgb(52,58,64); color:#FFF; color:#AAA; padding-top:40px; padding-bottom:40px; position:relative; text-align:center; width:100%; max-width:1600px; margin:auto;}
div#foot .deviceSize {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:right; font-size:160px; opacity:.1;}
div#foot .logoBox {margin-bottom:12px;}
div#foot .logoBox img.logo {height:34px; /*position:relative; bottom:3px;*/ transition:1s;}
div#foot .socialBox {margin:12px 0; text-align:center;}
div#foot .socialBox a.socialMediaButton {display:inline-block; background-color:rgb(52,58,64); background-color:dodgerblue; border-radius:12px; color:#FFF; padding:15px; position:relative; /*top:50%; transform:translateY(-50%);*/ transition:.5s; /*opacity:.25;*/}
div#foot .socialBox a.socialMediaButton:hover {}
div#foot .socialBox a.socialMediaButton .fa {font-size:18px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:.5s; opacity:.75;}
div#foot .socialBox a.socialMediaButton:hover .fa {opacity:1;}
div#foot .linkOut {font-size:12px; font-weight:100; color:#999;}
div#foot .copy {font-size:12px; font-weight:100; color:#999;}
div#foot .links {font-size:12px; font-weight:100; color:#DDD;}
div#foot .country {position:relative; /*position:absolute; bottom:0; left:24px;*/ text-align:left;}
div#foot .country img {background-color:#999; border-radius:50%; height:18px;}
div#foot .country span {/*position:absolute; top:55%; transform:translateY(-50%);*/ padding:6px; font-size:12px;}


/* mobile(xs) */
@media screen and (max-width:575px) {
	div#container div#theBrand {background-attachment:scroll;}
	div#foot {position:relative;}
}
/* mobile(sm), tablet(md), desktop(lg,xl) */
@media screen and (min-width:576px) {
	div#container div#thePreviewer div#form {/*position:absolute; top:40px; left:0; opacity:0.75;*/}
	div#foot {position:fixed; bottom:0; left:0; right:0; z-index:-1;}
}