@import url("deco/bxstyle.css");

/*
===============================================
****************	PAGE PREP 	***************
===============================================
*/
#cart input[type=checkbox]:checked ~ #cart { background: #757678;}
/*#cart { width: 300px; height: 300px; z-index: 23233232323; background: #757678; }*/

/*
===============================================
****************   	CUSTOM 		***************
===============================================
*/

body 			{ font-family: avenir;   font-size: 13px; background-color: #fefefe; color: #222; overflow-x: hidden;   }

/*
===============================================
****************   	HAIR / CART		***************
===============================================
*/
button 						{ cursor: pointer; }
#hair, #hair .logo			{ height: 80px; min-width: 260px; z-index: 400; }
#hair .cart 				{ position: fixed; right: 0px; }
#cart>span 					{ padding: 0px 20px; color:#fff; height: 50px; line-height: 50px; }
#hair .logo 				{ height: 120px; }
#youtubevideo { padding: 0px 0px;  }
.btnclean 			{ color: #333; border: 2px solid #333; padding: 10px 30px; margin: 30px auto 0px; display: block; width: 150px;  }
header 				{ font-family: 'headfont'; }

.paginate 			{ background: #111; color: #fff; border: 0px; padding: 10px 15px;}
.paginate3 			{ margin: auto; }

.pull 				{ margin: auto; width: 90vw; }
.product 			{ position: relative; display: inline-block;  width: 25vw; text-align: center; margin: 20px 9px; overflow: hidden; line-height: 25px; border-bottom: 2px solid rgba(255,255,255,1);/* box-shadow: 2px 3px 10px rgba(10,10,10,0.2); border-radius: 3px;*/ }
.product:hover 		{ /*border-bottom: 2px solid rgba(220,162,250,1); */border-radius: 4px;}
.product header 	{ font-weight: lighter; font-size: 1vw; height: 4vw; padding: 0px 10px; line-height: 4vw; overflow: hidden; background-color: #fff;   }
.product main 		{ height: 30px; overflow: hidden; /*color: rgb(116, 209, 227);*/ color: #777; background-color: #fff; padding: 0px 10px; }
.product figure 	{ height: 30vw; width: 25vw; overflow: hidden; background-color: #e3e3e3; background-size: cover; background-repeat: no-repeat;}
.product img 		{ height: 30vw; margin: auto; }
.product footer 	{ position: absolute; top: 12vw; left: 0px; right: 0px; margin: auto; display: none; text-align: center;}
.product:hover footer {  }
.product:hover figure { filter: brightness(80%); }
.slide 					{ height: 37vw; overflow: hidden; }

.entice 			{ min-height: 20vw; background-color: #fff; color: rgb(16, 19, 17);}
.entice .message 	{ padding: 30px; width: 40vw; position: relative; right: 0px; left: 0px; margin: auto; background-color: rgba(2555,255,255,0.8); outline-offset: 15px;   outline: #fff solid thick;  min-height: 15vw; }
.entice p 			{ line-height: 50px; font-size: 20px;  }
/*
===============================================
****************   	HEADER		***************
===============================================
*/

#head 			{   }
/*#logo 			{ overflow: hidden; z-index: 20; height: 250px; width: 450px; color: #ccc; background: url('logo.png') no-repeat center; background-size: contain; position: absolute; left: -40px; top: -100px;	}*/
#eyes 			{ }
#eyes li		{ padding: 0px 20px;  } 
#eyes ul a 		{ text-transform: uppercase; /*color: rgb(116, 229, 247);*/ }	
#eyes a:hover 	{ /*color: rgb(116, 229, 247);*/	} /*.nav a:hover::before { content: "[ "; } .nav a:hover::after { content: " ]"; }*/
.nav li ul  	{ background: rgba(250,250,250,1); color: #333; width: 200px;}
.nav li li 		{ display: block; text-align: left; border-bottom: 2px transparent solid; width: 180px;  } 
.nav li li:hover { border-bottom: 2px rgba(0,0,0,0.3) solid;  }
.nav>li:hover ul { visibility: visible; }
.sticky 		{ position: absolute; top: 80px; left: 0px; right: 0px; } .sticky #logo2 { visibility: hidden; }  .sticky a { color: rgb(255,192,203); text-shadow: 2px 2px 4px #000080;  }
.fix-head 		{ position: fixed;  top: 0px; left: 0px; right: 0px; text-align: left; background: rgba(0,0,0,0.5); } .fix-head #logo2 { visibility: visible; }
.fix-head #logo { height: 110px; width: 260px; margin:0px; position: fixed; left: 20px; top: -28px;  } .fix-head #centrelogo { height: 50px; margin:0px; overflow: hidden; }
.fix-head>.nav 	{ position: fixed;  } 	.fix-head ul li a { /*color: #333; *//*width: 228px; */ }
.layer-1 		{ z-index: -1; }
.bear h1 {
    width: 900px;
    font-size: 40px;

}

/*
===============================================
****************   	MAIN 		***************
===============================================
*/
#body 			{ 	}
/*#body>section 	{ padding: 50px 20px; }
*/
#landing 		{ width: 100vw; padding-top: 50vh; height: 50vh; position: relative; z-index: 8; color: #fff; text-shadow: 1px 2px 3px rgba(0,0,0,0.3);}
#landing header { font-size: 75px; }
#landing p 		{ max-width: 800px; padding: 20px; margin: auto; text-transform: uppercase; font-size: 28px; line-height: 25px; color:rgb(255,105,180); }

#entice  		{   }
#entice header, #contact header 	{ font-size: 60px; line-height: 90px;  }
#entice main 	{ color: #555; line-height: 30px; font-size: 20px; }

#contactform 	{ text-align: center; padding: 20px 30px; max-width: 760px; display: block; margin: 0px auto; display: -webkit-flex; display: flex;  flex-flow:row wrap; -webkit-flex-flow: row wrap; justify-content: space-between; 	align-items: flex-start; align-content: flex-start; }
#contactform textarea { border: 1px solid #333; margin: 30px 0px;  }
#contact main { padding-top: 60px;  }
#contact main .container {height: auto;}
/*
===============================================
****************   	FOOTER 		***************
===============================================
*/
#feet 		{ position: relative; padding: 20px; 	} #feet a { color: #333; }
#copyright { max-width:750px; text-align: center; font-size: 12px; margin: 20px auto; line-height: 20px; }

.no-webp .cover1 {     background: url('../gallery/cover1.jpg') center; background-repeat: no-repeat; background-size: cover; }  
.webp .cover1 {     background: url('../gallery/cover1.webp') center; background-repeat: no-repeat; background-size: cover; }
.no-webp .cover2 {     background: url('../gallery/cover2.jpg') center; background-repeat: no-repeat; background-size: cover; }  
.webp .cover2 {     background: url('../gallery/cover2.webp') center; background-repeat: no-repeat; background-size: cover; }
.no-webp .cover3 {     background: url('../gallery/cover3.jpg') center; background-repeat: no-repeat; background-size: cover; }  
.webp .cover3 {     background: url('../gallery/cover3.webp') center; background-repeat: no-repeat; background-size: cover; }
.no-webp .cover3 {     background: url('../gallery/cover3.jpg') center; background-repeat: no-repeat; background-size: cover; }  
.webp .cover3 {     background: url('../gallery/cover3.webp') center; background-repeat: no-repeat; background-size: cover; }


/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}








@media screen and (max-width:950px) {

/*
===============================================
****************   	HEADER		***************
===============================================
*/

/*#eyes input[type=checkbox]		{    display: none;    -webkit-appearance: none;  -webkit-appearance: none;  -moz-appearance:    none;   appearance:         none;} 
#nav { display: none; }
#eyes input[type=checkbox]:checked  #nav   {    display: block; } 
#smartcart 		{ width: 100vw; }
#head 			{  z-index: 300;  }

#head 			{ padding: 0px; position: fixed; top: 0px;  margin: 0px; left:0px; right: 0px;  display: block; width: 100%; overflow: auto; z-index: 300; background: rgb(250,250,250,0.0); border: 0; font-size: 100%; font: inherit; vertical-align: baseline; line-height: 50px;  }
.nav-icon 		{ display: inline-block;  z-index: 400;   position: fixed;    left: 5px;    top: 0;    width: 60px; height: 50px; font-size: 60px; line-height: 50px;  visibility: visible;   }
#logo 			{ position: fixed; top: 0px; left: 20px; max-height: 50px; right: 50px; font-size: 40px; padding: 0px; margin: 0px; text-align: left; line-height: 50px; background-position: 20px 0px;  }
#eyes 			{  background-color: rgb(255,192,203); color: #333;   position: fixed; top: 0px;  left: 0px; right: 0px; height: 50px;  text-align: left;  }
#eyes li, #eyes li a {width: 100%; text-align: left;	}
#nav 			{  background-color: rgba(255,192,203,1); color: #222;  position: static; padding-top: 50px;left: 0px; right: 0px;	z-index: 300; }
.nav a			{ display: block; color: #333;   text-align: left; height: 50px; padding-left: 0px; line-height: 50px; margin: 0;   }
.nav a:hover 	{  height: 50px; line-height: 50px; }
.fix-head #logo { top:0px; } 
*/

#head 			{  z-index: 300;  padding: 0px; margin: 0px; position: fixed; top: 0px; margin: 0px; left: 0px; right: 0px; height: auto; display: block; width: 100%;  overflow: auto;  }
.nav-icon 		{ display: inline-block;    position: fixed; color: #fff;    left: 20px;    top: 0;    width: 60px; height: 50px; font-size: 60px; line-height: 50px;  visibility: visible;  z-index: 400; }
#logo 			{  position: fixed; top: 0px; left: 20px;height: 40px; width: 100px; margin: 0px; background-size: contain;   }
#eyes 			{ min-height: 50px; height: auto; text-align: left;   background-color: #000;   position: relative; top: 0px;  left: 0px; right: 0px;  display: block;  }   
#eyes ul 		{ position: static;		display: none;	}
#eyes li, #eyes li a, #eyes a span {		width: 100%; text-align: left; color: #fff; line-height: 50px;  display: block; margin: 0px;	}
#nav {    position: fixed; padding-top: 50px;  left: 0px; right: 0px; background-color: rgb(0, 0, 0); color: #fff;  }

/*
===============================================
****************   	MAIN 		***************
===============================================
*/
.intro 			{ background: rgba(48, 0, 53,0.7); height: 110px; line-height: 25px; font-size: 15px; font-weight: lighter; color: #999; position: absolute; bottom: 50px; left: 50px; right: 50px; padding: 20px; text-align: center; }
#body>section 	{ width: 100%;  height: auto; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;  }
#about2  		{ height: auto; display: block; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; margin-top: 0px; padding-top: 50px;  } #about2 .leftgallery, #about2 .rightgallery { visibility: hidden; display: none; height: 0px; width: 0px;  }
#snippet, #swiperslide 		{ height: auto; height: 180px; margin: 0 5%; } #about2 .centergallery{ width: 90%; height: auto; float: none; padding: 20px 0px; }
.form1 { width: 80%;  } .form1 input, .form1 textarea, .form1 .submission { width: 90%;  }

.t1 			{ width: 80%;  }
.job 			{ width: 90%; height: auto; margin: 50px auto; position: relative; display: block; }
 .job>main, .job>div, .job>footer, .job>a, .job nav { width: 100%; height: auto; margin: 0px auto; position: relative; display: block; overflow: hidden; top: 0px; left: auto; right: auto;    }
 .job footer { text-align: left; }


#services tr td 		{ text-align: center; line-height: 100%; vertical-align: middle; }
#services tr td:nth-of-type(1) { text-align: left; line-height: 100%; vertical-align: top;}
.cover11f			{ background: url('../gallery/cover11.jpg') no-repeat center fixed; background-size: cover; background-position: 70% 30%;  }
/*
===============================================
****************   	FOOTER 		***************
===============================================
*/


}


@media screen and (max-width:500px) {
#smartcart 					{ width: 100vw; }
#landing article			{ left: 0px;  }
#landing header, #contact  header				{ font-size: 30px;  }
.bear h1 {width: 400px;}
#landing article p {top: 150px !important;}
#landing main 	p			{ font-size: 18px;  }
#about article   		{ width: 90vw; padding-bottom: 14vw; }
#about .cover3 			{ display: none; }
#youtubevideo article  { width: 90vw; padding: 12vw 5vw;  align-self: flex-start; }
.two { width: 100vw;  }
iframe.three-H { height: 66.6vw;  }
#about .stretchfull, #youtubevideo .stretchfull { display: block; }
#contact p { padding: 0px 5vw;  }
.form-dark input[type=text], .form-dark input[type=email], .form-dark input[type=number] { width: 300px; min-width: 300px; }




}