/*---------------------------------
	IMPORTS
-----------------------------------*/
@font-face { font-family: anton-regular; src: url('./fonts/anton-regular.ttf'); }  
@font-face { font-family: pacifico-regular; src: url('./fonts/pacifico-regular.ttf'); }  
@font-face { font-family: lilitaone-regular; src: url('./fonts/lilitaone-regular.ttf'); }  
@font-face { font-family: pragatinarrow-regular; src: url('./fonts/pragatinarrow-regular.ttf'); }  
@font-face { font-family: pragatinarrow-bold; src: url('./fonts/pragatinarrow-bold.ttf'); }  
@font-face { font-family: NoirLullabyStamp-ywgYZ; src: url('./fonts/NoirLullabyStamp-ywgYZ.otf'); }  


/*---------------------------------
font-family: 'anton-regular', sans-serif;
font-family: 'pacifico-regular', sans-serif;
font-family: 'lilitaone-regular', sans-serif;
font-family: 'pragatinarrow-regular', sans-serif;
font-family: 'NoirLullabyStamp-ywgYZ', sans-serif;

-----------------------------------*/


/*---------------------------------
	OVERRIDES
-----------------------------------*/



/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0,0,0,0;
padding:0 0 0 0;
color:#364228;
background:#faf6f5;
font-family:'pacifica-regular', arial, verdana, sans-serif;
font-size:clamp(1.2rem,1.5vw, 1.76rem);
text-shadow: 0 0 1px transparent; /* google font pixelation fix */
}


h1{
font-family: 'pacifico-regular', cursive, sans-serif;
font-weight:bold;
color:#9d9262;
font-size:clamp(3.0rem,5vw,4.5rem);
line-height:98%;
}

h2{
font-family: 'pacifico-regular', cursive, sans-serif;
font-weight:normal;
color:#d5502f;
font-size:clamp(2.1rem,3.8vw,3.6rem);
line-height:98%;
}

h3{
font-family: 'pacifico-regular', cursive, sans-serif;
font-weight:bold;
color:#4a5e33;
font-size:clamp(1.9rem,3.6vw,3.4rem);
line-height:98%;
}

h4{
font-family: 'lilitaone-regular', arial, verdana, sans-serif;
font-weight:normal;
color:#364228;
font-size:clamp(1.7rem,3.4vw,3.2rem);
line-height:97%;
}

h5{
font-family: 'lilitaone-regular', arial, verdana, sans-serif;
font-weight:normal;
color:#d5502f;
font-size:clamp(1.5rem,3.0vw,3.0rem);
line-height:97%;
letter-spacing:1px;
}
h6{
font-family: 'lilitaone-regular', arial, verdana, sans-serif;
font-weight:normal;
color:#4a5e33;
font-size:clamp(1.3rem,2.6vw,2.6rem);
line-height:97%;
letter-spacing:1.0px;
}

.clear { clear:both; }

a {
text-decoration:none;
color:#A8C686;
}


a:link {
    color:#A8C686;
}

a:visited {
    color:#A8C686;
}


a:hover {
    color:#9D9C62;
}

a:active {
    color:#A8C686;
}



strong, b {
color:#7d2f1b;
}

thead th,
tbody th{
font-family: "anton-regular", arial, verdana, sans-serif;
}

button,
a.btn,
input[type="submit"],
input[type="reset"],
input[type="button"]{
font-family: "anton-regular", arial, verdana, sans-serif;
}

blockquote{
font-family: "anton-regular", arial, verdana, sans-serif;
}

.closeX  {
z-index:10000;
position:absolute;
display:block;
color:#9d9c62;
top:0px;
right:25px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight:600;
font-size:clamp(2.0rem, 3.5vw, 3.5rem);
cursor:pointer;
}

.closeX:hover { color:#a8c686; }



/*---------------------------------
	RESPONSIVE
-----------------------------------*/


	#link-top{
	display:none;
	}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}






/* YouTube */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
        margin-bottom:30px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



.closeMenuBoxButton {
width:100%;
float:right;
padding-right:5%;
text-align:right;
font-size:2em;
}



#veryTopBandContainer {
 z-index:100;
 position:absolute;
 margin:0 0 0 0;
 padding:0 3% 0 0;
 top:0;
 left:0;
 right:0;
 width:97%;
 height:41px;
 background-color:#a8c686;
}


#veryTopBandContainerPhone {
position:relative;
 width:100%;
  margin:15px 0 15px 0;
 background-color:#a8c686;
 border-radius:8px;
}


#veryTopBandInnerContainer{
z-index:400;
position:absolute;
margin-top: 3px;
 width:68%;
 margin-left:clamp(260px, 25%,500px);
 height:24px;
 color:#fff;
}



#veryTopBandInnerContainerPhone{
z-index:300;
position:relative;
margin-top: 12px;
 width:100%;
 color:#fff;
 text-align:center;
}


#mainLogoBox {
z-index:300;
 position:relative;
 top:5px;
 left:5px;
 width:clamp(235px, 23%, 370px);
}


#mainLogoBoxPhone {
z-index:300;
position:relative;
 text-align:center;
 top:5px;

 width:100%;);
}


#footer{ 
float:left;
margin:30px 0 0 0;
width:80%;
padding: 10px 10% 70px 10%;
border-top:15px solid #a8c686;
background-color:#d5502f;
color:#dfdfdf;
}

#subPage{
  position:absolute;
  display:none;
  z-index:20000;
  top:205px;
  width:90%;
  min-height:700px;
  background-color:#f0f8ea;
  margin:0 0 0 0;
  padding: 60px 5% 30px 4%;
}


#subPagePhone{
  position:absolute;
  display:none;
  z-index:200000;
  top:265px;
  width:88%;
  min-height:400px;
  background-color:#f0f8ea;
  margin:0 0 0 0;
  padding: 40px 2% 20px 2%;
  border: 10px solid #9d9c62;

}




/*---------------------------------
	RESPONSIVE
-----------------------------------*/

  /* Desktop */

        @media screen and (min-width: 580px) and (max-width: 3840px){

	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
       }

  /* Tablet */        
 /* disable for now */
/*
        @media screen and (min-width: 580px) and (max-width: 896px) {

	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:none;}	
        }     
*/  

  /* Phone */        

        @media all and (min-width: 300px) and (max-width: 580px) {


	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}
        }