/* Section 0 - Fonts & Animations */		

@font-face {
	font-family: Pirate;
	src: url('Treamd.ttf') format('truetype');
}

#masterbodycontent {
font-family: Pirate;	
}

/* Section 1 - Building Structure */		

#wall {
position:absolute;
left:0;
width: 100%;
background-image:url('SBIWallTexture6sm.png');
background-size: auto 10%;
}

#wallfilter {
position:absolute;
left:0; bottom:0;
width:100%; height: 11.11%; 
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.65));
}

#floor {
position:absolute;
left:0; top:90%;
width: 100%; height: 10%;
background-image:url('SBIWallTexture6sm.png');
background-size: calc(var(--content-height)*0.8265) 17%;
}

#floorfilter {
background: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0));
}

/* Section 2 - Lantern */		

.bclantern {
pointer-events:none;
}

.lantern {
position:absolute;
width: 300%;
background-image:url('SBILanternOutside3sm.png');
background-size: auto 100%;
}

/* Section 3 - Barrel */		

.barrelcon {
position:absolute;
left:0%;
cursor:pointer;
}

.barrel {
background-image:url('SBIBarrel8sm.png');
}

.barreltext {
position:absolute;
left: 11.25%; top: 3%;
width: 22.5%; height: 24%;  
text-align:center;
opacity:0.8;
transform:rotate(-2.5deg);
color:black;
line-height:80%;
display:table;
overflow:hidden;
white-space:normal;
word-wrap:break-word;
max-width: 22.5%;
}

.barreltext p {
display:table-cell;
vertical-align:middle;
overflow:hidden;
width:100%; height:100%;
margin:0;
margin-block-start:0;
margin-block-end:0;
}

.feather {
background-image:url('SBIBarrelFeathersm.png');
}

/* Section 4 - Mobile & Small Screens */


@media screen and (max-height: 650px) {
#wall {background-image:url('SBIWallTexture6smM.png');}
#floor {background-image:url('SBIWallTexture6smM.png');}
.lantern {background-image:url('SBILanternOutside3smM.png');}
.barrel {background-image:url('SBIBarrel8smM.png');}
.feather {background-image:url('SBIBarrelFeathersmM.png');}
}

/* Section Z - Barrel Search Area */		


#searchcon {
position:fixed;
left:0; top:0;
width:100%; height:100%;
z-index:3;
display:none;
font-family: Pirate;
}

#searchfloor {
background-image:url('SBIWallTexture6sm.png');
background-size: auto 25%;
filter:brightness(0.5);
}

#searchbarrel {
position:absolute;
left:calc(var(--content-height)*-1.333); right:calc(var(--content-height)*-1.333); top:-83.33%; margin:auto;
width: calc(var(--content-height)*2.667); height: 266.67%; 
background-size: contain;
background-position:center;
background-repeat:no-repeat;
}

.searchbarrelimg {
background-image:url('SBIBarrelAbove14sm.png');
}



#searchbarrelinnercon {
position:absolute;
left: 0; right:0; top:0; bottom:0; margin:auto;
width: 50%; height:50%;
}

#searchtext {
position:absolute;
left:26.68%; top:32.88%;
width:45.64%; height: 35.64%;
font-size: calc(var(--content-height)*0.1);
text-align:center;
opacity:0.8;
overflow:hidden;
display:table;
white-space:normal;
line-height:80%;
max-width:45.64%;
}


#searchtext p {
display:table-cell;
vertical-align:middle;
overflow:hidden;
width:100%; height:100%;
max-width:100%; max-height:100%;
margin:0;
margin-block-start:0;
margin-block-end:0;
}

#searchtext p:focus {
border:none;
outline:none;
}

#searchbutton {
position:absolute;
left:21.53%; top: 71.27%;
width: 57.31%; height: 15.77%;
cursor:pointer;
}

#searchclear {
position:absolute;
left: 69.32%; top:32.88%;
width:3%; height: 3%;
opacity:0.8;
display:table;
text-align:center;
font-size: calc(var(--content-height)*0.05);
cursor:pointer;
}

#searchclear p {
display:table-cell;
vertical-align:middle;
}

@media (orientation: portrait) {
#searchbarrel {left:-83.33%; right:auto; top:-133.33vw; bottom:-133.33vw; width: 266.67%; height: 266.67vw;}
#searchtext {font-size:10vw;}
}

@media screen and (max-height: 650px) {
#searchfloor {background-image:url('SBIWallTexture6smM.png');}
.searchbarrelimg {background-image:url('SBIBarrelAbove14smM.png');}
}