/* ipernity colors: Dark #6790bc, Light #a2c3e2 */

body {
 overflow:hidden !important;
 width:94% !important;
 min-width:900px !important;
 margin-left:2% !important;
 background-color:#6790bc !important}

#body, #head {
 background-color:#6790bc !important;
 border:none !important}

#head {height:35px !important}

#topright {width:auto !important}

#head > #logo {display:none !important} /* logo on the top */

#hero {
 position:relative;
 float:right !important}

#hero > .logo { /* logo on the image */
 position:absolute;
 top:22px;
 left:50px;
 width:498px;
 max-width:41%;
 content:''}

.heroimg {display:inherit; max-width:100%; background:transparent; opacity:0; transition:opacity,3s}

.button { /* explore, join, login */
 width:155px !important;
 background:#6790bc !important;
 box-shadow:none !important;
 border:2px solid #a2c3e2 !important;
 border-radius:8px !important;
 padding-top:5px !important;
 margin-left:12px !important;
 margin-right:5px !important}

.button:hover {border-color:#369 !important}

.clearfix {
 display:flex !important;
 flex-direction:row-reverse !important}

.variWidth {
 width:auto;
 padding:0px 0px 15px 0px}

.variWidth > p { /* more specified in header.html for en|de|nl vs. fr|es|it|pt */
 width:auto;
 margin:0 auto;
 text-align:left;
 position:relative;
 right:-6px;
 color:#bbe0fb;
 line-height:16px !important; /* still need important even without freshstyle entry */
 border-bottom:1px solid #a2c3e2;
 padding-bottom:8px;
 padding-right:0px !important}

.variWidth > p > span {
 position:relative;
 color:#2a5a8c;
 font-weight:bold}

.variWidth > p > span:first-child {
 display:block;
 color:#bbe0fb;
 font-family:'Alex Brush';
 text-shadow:-2px 2px 2px #369}

#hero > .copyright { /* image copyright */
 background-color:#a2c3e2;
 position:absolute;
 right:5px;
 bottom:125px;
 padding:3px 6px 4px 6px;
 opacity:0.7;
 transition:opacity,3s;
 border-radius:.25em}

#hero > .copyright > span {color:#369} /* image copyright text */

#hero > .imgButton { /* on-image button */
 position:absolute;
 top:1.5%;
 cursor:pointer;
 color:#369;
 background:#a2c3e2;
 border:2px solid #369;
 opacity:0.7;
 text-align:center;
 font-size:1.2em}

#foot {
 float:right !important;
 width:700px !important;
 padding-top:6px !important;
 padding-right:0px !important;
 margin-top:-18px !important;
 margin-right:-8px !important;
 color:#2a5a8c !important;
 left:0px !important;
 bottom:8px !important;
 border-top:0px !important}

.lg {margin-right:3px !important} /* language parent */

#lgitem0 { /* language button */
 display:inline-block !important;
 padding-left:16px !important;
 border:1px solid #2a5a8c !important;
 border-radius:5px !important}

#lgitem0 > span {
 color:#369 !important;
 font-weight:bold !important}

#lgitem1 ul {min-width:80px !important;}

.heroouter {width:1220px; height:686px; border:5px solid #a2c3e2}
.imgfit {width:1220px; height:686px}
.imgcrop {width:1220px}

.herocrop {
 display:block;
 position:relative;
 overflow:hidden;
 left:10px}

.herocrop .wide {object-fit:cover}

.flipped {-moz-transform:scaleX(-1);
 -o-transform:scaleX(-1);
 -webkit-transform:scaleX(-1);
 transform:scaleX(-1)}

.btn_down {background:#369 !important}

@media (min-height:648px) and (min-aspect-ratio:16/9) {
 #hloguedout {position:absolute; top:33px; width:100px}
 #hloguedout .button {margin-left:-36px !important; margin-bottom:24px}
 #body {position:relative; left:-60px; top:-25px}
 .lg {position:relative; left:124px !important; top:-80px}
 #lgitem0 {padding:4px 0px !important; text-align:center; width:100px !important}
 #lgitem1 {text-align:left; position:absolute !important; top:37px !important}
 #copydate {position:relative; left:262px; top:-32px}
}

@media (min-height:853px) and (min-aspect-ratio:16/9) {
 #lgitem0 {padding:4px 6px !important}
 #lgitem1 ul {min-width:100px !important}
}

@media (min-height:890px) and (min-aspect-ratio:16/9) {
 body {margin-top:30px !important}
 #hloguedout {position:absolute; top:63px}
}

@media (min-height:920px) and (min-aspect-ratio:16/9) {
 body {margin-top:50px !important}
 #hloguedout {position:absolute; top:83px}
}

@media (min-height:920px) and (max-aspect-ratio:16/9) {
 body {margin-top:20px !important}
}

@media (max-height:853px) {
 .heroouter {width:978px; height:550px}
 .imgfit {width:978px; height:550px}
 .imgcrop {width:978px}
 body {margin-top:-10px !important}
 #hloguedout {top:15px}
}

@media (max-height:686px) {
 .heroouter {width:900px; height:505px}
 .imgfit {width:900px; height:505px}
 .imgcrop {width:900px}
 body {margin-top:-10px !important}
}

@media (max-height:646px) {
 .heroouter {width:868px; height:486px}
 .imgfit {width:868px; height:486px}
 .imgcrop {width:868px}
 body {margin-top:-20px !important}
}