/* 0. Fonts */



@font-face {
	font-family: Robo;
	src: url('Fonts/RobotoSlab-Regular.ttf') format('truetype');
}

@font-face {
	font-family: fff;
	src: url('Fonts/FFF Tusj.ttf') format('truetype');
}

@font-face {
	font-family: chawp;
	src: url('Fonts/chawp.otf') format('truetype');
}



a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}


/* 1. Main Body Structure */


body {
width:100%; height:100%; 
overflow-y:hidden;
font-size: calc(var(--content-height)*0.1);
color:#43424d; 
background-color:#4e5f71;
text-transform: uppercase;
-webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
			-webkit-tap-highlight-color: transparent;
}

#loadcover {
position:fixed;
left:0%; top:0%;
width:100%; height:100%;
background-color:#2f3f4f;
z-index: 3;
transition: opacity 0.75s;
transition-delay:0s;
}


.welcomeanimationon #loadcover {
opacity:0;
pointer-events:none;
}


.fillparent {
position:absolute;
left:0; top:0;
width:100%; height:100%;
background-size: cover;
}

#fullbody {
overflow:hidden;
width:calc(var(--content-height)*2*4);
font-size: 0;
min-width:calc(var(--content-height)*2);
transition: filter 0.25s;
}


.vcenter {
display:table;
}

.vcenter p {
display:table-cell;
vertical-align:middle;
}



/* 2. Wall Segment Structure */



.wallseg {
float:left;
position:relative;
width: calc(var(--content-height)*2); height: 100%;
font-size: calc(var(--content-height)*0.1);
}

.wallbg {
background-image:url('Imgs/RoomSingleCropNoCeilSizeL.jpg');
}

.wallfg {
position:absolute;
left:0; right:0; margin:auto; top:0;
width:52%; height:77.28%;
background-image:url('Imgs/RoomCoverMinSizeL.png');
background-size: cover;
pointer-events:none;
}

.wallseg:nth-of-type(even) .wallbg, .wallseg:nth-of-type(even) .wallfg {
transform:scaleX(-1);
}




/* 3. Intro */


.walllogo {
position:absolute;
top: 1%;
width: calc(var(--content-height)*0.4); height:40%;  
background-image:url('Imgs/EnhancedSpecialsLogo5w4SquareSizeL.png');
background-size: auto 90%;
background-repeat:no-repeat;
background-position: center bottom;
opacity: 0.85;
}

#intrologo {
left: calc(var(--content-height)*0.05);
}
#outrologo {
right: calc(var(--content-height)*0.05);
cursor:pointer;
}


.wallarrow {
position:absolute;
left:0; right:0; margin:auto; top: 100%;
width:60%; height: 5.27%;
background-image:url('Imgs/WallArrowDistressed2SizeL.png');
background-size:auto 100%;
opacity: 0.85;
}

#outroarrow {
transform: scaleX(-1);
}

.walltag {
position:absolute;
left:0; right:0; margin:auto; top: 112.5%;
width:66%; height: 47.21%;
background-size:auto 100%;
opacity: 0.85;
}


#introtag {
background-image:url('Imgs/TagLineDistressedSizeL.png');
}


#outrotag {
background-image:url('Imgs/TagLineOutDistressedSizeL.png');
}

/* 4. Frame */



.framecon {
position:absolute;
top: 6%; 
width: 22.5%; height: 60%; 
background-image:url('Imgs/FrameShadow3SizeL.png');
background-size: auto 100%;
transition: filter 0.5s;
cursor:pointer;
}


.framecon0 {
left: 2.5%;
}

.framecon1 {
left: 27.5%;
}

.framecon2 {
left: 52.5%;
}

.framecon3 {
left: 77.5%;
}



/* 5. UI */


#affiliate {
position:fixed;
right: calc(var(--content-height)*0.005); top: 0.5%; 
width: 80%; height: 1%;
text-align:right;
font-size: calc(var(--content-height)*0.013);
opacity:0.8;
letter-spacing:0.25em;
font-family: Robo;
color:white;
pointer-events:none;
}


#responsible {
position:fixed;
right: calc(var(--content-height)*0.005); bottom: 1%; 
width: 80%; height: 1%;
text-align:right;
font-size: calc(var(--content-height)*0.013);
opacity:0.8;
letter-spacing:0.25em;
font-family: Robo;
color:white;
cursor:pointer;
}

#agerest {
position:fixed;
right: calc(var(--content-height)*0.005); bottom: 2.5%; 
width: calc(var(--content-height)*0.06519); height: 5%;
background-image: url('Imgs/18+cropSizeL.png');
background-size: auto 100%;
opacity:0.75;
filter:grayscale(25%);
cursor:pointer;
}

#logosm {
position:fixed;
left: calc(var(--content-height)*0.005); top: 0%; 
width: calc(var(--content-height)*0.08); height: 8%;
pointer-events:none;
background-image: url('Imgs/EnhancedSpecialsLogo10SquareSizeL.png');
background-size: auto 100%;
opacity:1;
}

#menucon {
position:fixed;
left: calc(var(--content-height)*0.005); bottom: 0%; 
width: calc(var(--content-height)*0.06); height: 12.5%;
cursor:pointer;
opacity:0.8;
transition: opacity 0.5s;
}

#menucon:hover {
opacity:1;
}

#menuimg {
position:absolute;
left:0; top:8.5%;
width: 100%; height:70%;
background-image: url('Imgs/MenuIsolatedWhite2SizeL.png');
background-size: contain;
background-repeat:no-repeat;
background-position:center;
transition: transform 0.5s;
transform-origin: 50% 100%;
}

#menucon:hover #menuimg {
transform:scale(1.15);
}

#menutxt {
position:absolute;
left:2.5%; bottom:0;
width: 100%; height:20%;
font-size: calc(var(--content-height)*0.011);
letter-spacing:0.25em;
font-family: Robo;
color:white;
text-align:center;
}



/* 6. Chalk Description  */

.chalkcon {
position:absolute;
left: 11.44%; top: 6.57%;
width: 77.27%; height: 84.91%; 
color:white;
text-align:center;
}

.chalkbkie {
position:absolute;
left:0; top:2%;
width: 100%; height: 7%;
font-family: fff;
font-size: 25%;
opacity:0.8;
letter-spacing: 0.05em;
}

.chalkline {
position:absolute;
left:0; top: 9.5%; 
width: 100%; height:1.5%;
background-image: url('Imgs/ChalkLineSizeL.png');
background-position:center;
background-repeat:no-repeat;
background-size: contain;
}


.chalklineb {
bottom: 7.5%; top:auto;
}

.chalkfooter {
position:absolute;
left:0; bottom:0.5%;
width: 100%; height: 5%;
font-family: fff;
font-size: 15%;
opacity:0.8;
letter-spacing: 0.05em;
}

.chalkdesc {
position:absolute;
left:0; right:0; margin: auto; top:17%;
width: 85%; height: 52%;
font-family: chawp;
font-size: 30%;
opacity:0.67;
letter-spacing: 0.05em;
line-height:110%;
transform:rotate(2deg);
}


.chalkoldprice {
position:absolute;
left:0; right:0; margin: auto; bottom:19%;
width: 85%; height: 10%;
font-family: chawp;
font-size: 30%;
opacity:0.45;
letter-spacing: 0.05em;
}


.chalknewprice {
position:absolute;
left:0; right:0; margin: auto; bottom:12%;
width: 85%; height: 10%;
font-family: chawp;
font-size: 45%;
opacity:0.67;
letter-spacing: 0.05em;
}

.chalklabel {
position:absolute;
left:0%; top: 12%;
width: 100%; height: 10%;
font-size:15%;
font-family: chawp;
opacity:0.5;
}

.chalkcon:hover .chalklabel, .chalkcon:hover .chalknewprice, .chalkcon:hover .chalkdesc, .chalkcon:hover .chalkbkie, .chalkcon:hover .chalkfooter {
opacity:1;
}

.chalklabel, .chalknewprice, .chalkdesc, .chalkbkie, .chalkfooter {
transition: opacity 0.5s;
}

.framecon:hover {
filter:brightness(1.25);
}





/* 7. Menu  */

/* 7.0 Containers  */


#menucover {
position:fixed;
background-color:black;
opacity:0;
transition: opacity 0.75s;
pointer-events:none;
}

.menuon #menucover {
opacity: 0.5;
}


#menuconbig {
position:fixed;
left:0; top:100%;
width:100%; height:100%;
transition: transform 0.75s;
font-family:Robo;
letter-spacing: 0.05em;
}

.menuon #menuconbig {
transform:translateY(-100%);
}


#menuconsm {
position:absolute;
left:50%; margin: auto; top:0; bottom: 0;
width: calc(var(--content-height)*0.475); height: 95%;
background-color:Cornsilk;
transition: transform 0.75s;
}

.scene {
perspective: calc(var(--content-height)*2);
}

#menuleftshadow {
display:none;
}

@media (orientation: portrait) {
#menuconsm {left:0; right:0;}
.menuleft #menuconsm {transform:translateX(100%);}
#menuleftshadow {position:absolute; left:-100%; top:0; width:105%; height:100%; display:inline-block; cursor:pointer;}
.menuleft #menuleftshadow {transform: translateX(90%);}
}

@media (max-aspect-ratio: 1/2) {
#menuconbig {font-size: 94.74%}
#menuconsm {width: calc(var(--content-height)*0.45); height: 90%;}
}


@media (max-aspect-ratio: 9/20) {
#menuconbig {font-size: 89.47%}
#menuconsm {width: calc(var(--content-height)*0.425); height: 85%;}
}

@media (max-aspect-ratio: 17/40) {
#menuconbig {font-size: 84.21%}
#menuconsm {width: calc(var(--content-height)*0.4); height: 80%;}
}

@media (max-aspect-ratio: 8/20) {
#menuconbig {font-size: 78.95%}
#menuconsm {width: calc(var(--content-height)*0.375); height: 75%;}
}

/* 7.1 Left Page Animation  */


.menupage { 
position:absolute;
left:0; top:0;
width: 100%; height:100%;
transform-style: preserve-3d;
transform-origin: center left;
transition: transform 1s;
}

.menupage.is-flipped {
transform: translateX(0%) rotateY(-180deg);
}

.menupage__face {
backface-visibility: hidden;
}

.menupage__face--front {
background-color:#6b0000;
}

.menupage__face--back {
background-color:Cornsilk;
transform: rotateY(180deg);
}



/* 7.2 Menu Cover Content  */



#menucoverlogo {
position:absolute;
left:0; right:0; margin:auto; top:15%;
width: 70%; height: 35%;
background-image:url('Imgs/EnhancedSpecialsLogo5w4SquareSizeL.png');
background-size: auto 100%;
}

#menucovermenu {
position:absolute;
left:0; bottom: 10%;
width:100%; height:10%;
font-size:27.5%;
color:white;
text-align:center;
opacity:0.8;
}

#menucovertrim {
position:absolute;
left:0; right:0; top:0; bottom:0; margin: auto;
width: 92%; height: 96%;
border:0.04em solid Cornsilk;
box-sizing:border-box;
}


/* 7.3 Inner Page Shadows  */


#pageshadow {
position:absolute;
top:0;
width: 7.5%; height:100%;
opacity:0.25;
}

.pageshadowr {
right:0;
background-image:linear-gradient(to left,rgba(0,0,0,0.25),transparent);
}

.pageshadowl {
left:0;
background-image:linear-gradient(to right,rgba(0,0,0,0.25),transparent);
}




/* 7.4 Right Page  */


#menupager {
background-color:Cornsilk;
}

.pagegap {
width:100%; height:2%;
}

#pagerheader {
width:100%; height:3.5%;
font-size:25%;
color:#9d0000;
text-align:center;
}

.pageselcon {
position:relative;
width:100%; height: 3.5%;
font-size: 15%;
cursor:pointer;
letter-spacing: 0.2em;
transition: color 0.5s;
}

.pageselitem {
position:absolute;
left: 10%; top:0;
width: 70%; height: 100%;
}

.pageselnum {
position:absolute;
right: 10%; top:0;
width: 10%; height: 100%;
text-align:right;
}


.pageselcon:hover {
color: #9d0000; 
}

#cookiedisclaimer {
position:relative;
width:67%; height:10%;
font-style:italic;
opacity:0.5;
font-size:9%;
left:10%;
letter-spacing: 0.2em;
}

.cornerborder {
position:absolute;
width:10%; height: 5%;
box-sizing:border-box;
pointer-events:none;
}

#cornerbordertl {
left:5%; top:2.5%;
border-top: 0.04em solid #9d0000;
border-left: 0.04em solid #9d0000;
}

#cornerborderbr {
right:5%; bottom:2.5%;
border-bottom: 0.04em solid #9d0000;
border-right: 0.04em solid #9d0000;
}

#pagesubheadercon {
position:relative;
width: 100%; height: 3.5%;
font-size: 17.5%;
text-align:center;
}

.pagesubheader {
width:27.75%; height:100%;
transition: 0.5s;
cursor:pointer;
display:inline-block;
}


.pagesubheader:hover {
color: #9d0000; 
}

.pagesubheaderoff {
opacity: 0.25;
pointer-events:none;
}


.pageselsel {
font-weight:600;
color: #9d0000; 
opacity:1;
}

.pageselselnoclick {
font-weight:600;
color: #9d0000; 
opacity:1;
pointer-events:none;
}



/* 8. Safety Leaflet  */

/* 8.0 Containers  */


.leafleton #menucover {
opacity: 0.75;
}


#leafletconbig {
position:fixed;
left:0; top:100%;
width:100%; height:100%;
transition: transform 0.75s;
font-family:Robo;
letter-spacing: 0.05em;
}

.leafleton #leafletconbig {
transform:translateY(-100%);
}

#leaflet {
position:absolute;
left:0; right:0; top:0; bottom:0; margin:auto;
width: calc(var(--content-height)*0.45); height: 90%;
background-color: #fdf200;
}


#stopleaflet {
background-image:url('Imgs/StopLeaflet2SizeM.jpg');
}