/*
===============================================
****************   	PAINT LOOK	***************
===============================================
*/

.bodytone, body 
{ background-color: #fafafa; color: #323232; text-align: center; }

/* ====== DARK TONE =====*/
.darktone, .btn-dark, .form-dark option
/*changers*/ , .navy2, #services article:hover,#head , #eyes a
{ color: #f8f0dd; border-color: #f8f0dd; background-color:#4b2a01;   }
.darktone, .darktone-color, .form-dark input,.form-dark select, .form-dark textarea	
/*changers*/ 
{ color: #f8f0dd; border-color: #f8f0dd; }

/* ====== MID TONE =====*/
.midtone, .btn-mid, .form-mid option
/*changers*/ ,.badge, .mystatus , #team main		
{ color: #fff; border-color: #fff;  background-color: #f78802;  }
.midtone, .midtone-color, .form-mid input, .form-mid select, .form-mid textarea, #services h2
/*changers*/, #logo 
{ color: #fff; border-color: #fff;   }

/* ======= LIGHT TONE =====*/
.lighttone, .btn-light, .form-light option
/*changers*/	 , .social a
{ color: #070d0b; border-color:#070d0b;  background: #74964a; }
.lighttone, .lighttone-color, .form-light input, .form-light select
/*changers*/ , p a, #designed a	, #contactform		
{ color:#070d0b; border-color: #070d0b; }


/* ====== BLACK GLASS =====*/
.blackglass, .btn-black, .form-black option	
/*changers*/ ,#alert	, #services article 		
{ color: #fff; border-color: #222;  background-color: rgba(0,0,0,0.7); }
.blackglass-color, .form-black input, .form-black select, .form-black textarea				
{ color: #fff; border-color: #222222;   }

/* ====== WHITE GLASS =====*/
.whiteglass, .btn-white, .form-white option	
/*changers*/ ,#hair	
{ color: #222; border-color: #222;  background-color: rgba(255,255,255,0.7); }
.whiteglass-color, .form-white input, .form-white select, .form-white textarea	, .socials a				
{ color: #222; border-color: #222222;   }

/* ====== EXTRA TONE =====*/
.extratone, .btn-extra, .form-extra option	
/*changers*/
{ color: #fff; border-color: #f14902;  background-color: #9f8085; }
.extratone, .extratone-color, .form-extra input, .form-extra select, .form-extra textarea	, #eyes a:hover   			
{ color: #fff; border-color: #888;   }



.form-dark ::-webkit-input-placeholder { color: #fff; } 	.form-dark::-moz-placeholder{ color: #fff;}  	.form-dark:-ms-input-placeholder{ color: #fff; } 	.form-dark:-moz-placeholder { color: #fff; }
.form-mid ::-webkit-input-placeholder { color: #fff; }  .form-mid::-moz-placeholder{ color: #fff;}     .form-mid:-ms-input-placeholder{ color: #fff; }   .form-mid:-moz-placeholder { color: #fff; }
.form-black ::-webkit-input-placeholder { color: #fff; } 	.form-black::-moz-placeholder{ color: #fff;}  	.form-black:-ms-input-placeholder{ color: #fff; } 	.form-black:-moz-placeholder { color: #fff; }
.form-white ::-webkit-input-placeholder { color: #fff; } 	.form-white::-moz-placeholder{ color: #fff;}  	.form-white:-ms-input-placeholder{ color: #fff; } 	.form-white:-moz-placeholder { color: #fff; }
/*
===============================================
*********   POSITIONING & DISPLAY     *********
===============================================
*/

/* ====== RELATIVE =====*/
.relative, #body>section
{ position: relative;  }

/* ====== ABSOLUTE =====*/
.fullbottom, #alert 	
{ position: absolute; left: 0px; right: 0px; bottom: 0px;  overflow: hidden; }
.fulltop, #hair, .sticky	
{ position: absolute; left: 0px; right: 0px; top: 0px;   }
.fullleft, #alert 	
{ position: absolute; left: 0px; top: 0px; bottom: 0px;  overflow: hidden; }
.fullright	
{ position: absolute; right: 0px; top: 0px; bottom: 0px;  overflow: hidden; }



.fixbottom, #alert 	
{ position: fixed; left: 0px; right: 0px; bottom: 0px;  overflow: hidden; }
.fixtop, .fix-head 	
{ position: fixed; left: 0px; right: 0px; top: 0px;  }


.inline, .by_words, .small_logo 
{ display: inline-block; }

.lone-center, #contact article,  #subscribeform, #contactform, .entice article
{ display: block; margin: 0px auto; }


.hidden, nav ul ul, nav ul ul ul, input.toggle,label.toggle
{  display: none; } 
.nolist, nav ul, #services ul, #products ul			
{ list-style: none; padding: 0px; margin: 0px;  } 
nav ul ul li { float: none;}  nav li:hover ul {  display: inline-block;  position: absolute; }

/*
===============================================
****************   	FLOW 		***************
===============================================
*/

/*HORIZONTAL --list all classes*/
/* ======= STRETCH FULL =====*/
.stretchfull ,.navy, #about 			
{ display: -webkit-flex; display: flex;  flex-flow:row wrap;  -webkit-flex-flow: row wrap;  justify-content: center;      align-items: stretch;    align-content: stretch; }
.stretchfull div { flex: 1 0px; align-self: stretch; }
/* ======= SPEAD TO EDGES =====*/
.spreadfull, .cards-fill, #hair, #head, #contactform		
{ 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; }
/* ======= SPREAD EQUALLY =====*/
.spreadequal, .cards-spread
{ display: -webkit-flex; display: flex;  flex-flow:row wrap; -webkit-flex-flow: row wrap; justify-content: space-around; 	align-items: flex-start; align-content: flex-start; }
/* ======= GROUP TO CENTER =====*/
.spreadcenter, .cards-center, #products ul	
{ display: -webkit-flex; display: flex;  flex-flow:row wrap; -webkit-flex-flow: row wrap; justify-content: center; 			align-items: flex-start; align-content: flex-start; }
/* ======= START LEFT =====*/
.spreadleft, .cards-left
{ display: -webkit-flex; display: flex;  flex-flow:row wrap; -webkit-flex-flow: row wrap; justify-content: flex-start; 		align-items: flex-start; align-content: flex-start; }
/* ======= START RIGHT =====*/
.spreadright, .cards-right	
{ display: -webkit-flex; display: flex;  flex-flow:row wrap; -webkit-flex-flow: row wrap; justify-content: flex-end; 		align-items: flex-start; align-content: flex-start; }

/*VERTICAL*/
/* ======= STACKTO EDGES =====*/
.stackfull, .stacks-fill			
{ display: -webkit-flex; display: flex;  flex-flow:column wrap; -webkit-flex-flow: column wrap; justify-content: space-between; 	align-items: flex-start; align-content: flex-start; }
/* ======= STACK EQUALLY =====*/
.stackequal, .stack-spread
{ display: -webkit-flex; display: flex;  flex-flow:column wrap; -webkit-flex-flow: column wrap; justify-content: space-around; 	align-items: flex-start; align-content: flex-start; }
/* ======= STACK TO CENTER =====*/
.stackcenter, .stacks-center	
{ display: -webkit-flex; display: flex;  flex-flow:column wrap; -webkit-flex-flow: column wrap; justify-content: center; 			align-items: flex-start; align-content: flex-start; }
/* ======= START LEFT =====*/
.stacktop, .stacks-top, #team article
{ display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch; }
/* ======= START RIGHT =====*/
.stackbottom, .stacks-bottom	
{ display: -webkit-flex; display: flex;  flex-flow:column wrap; -webkit-flex-flow: column wrap; justify-content: flex-end; 		align-items: flex-start; align-content: flex-start; }


/*
===============================================
****************    TYPOGRAPHY	***************
===============================================
*/
body 			{ font-family: bodyfont;   font-size: 15px;    }
h1, h2, h3, h4 	{ font-family: headfont;  }
.btn-dark span, .btn-mid span, .btn-light span, .btn-extra span	{ font-family: 'icons';  }
.bold, article header, input.sendme	,#head , #eyes a
{ font-weight: bold; }
ul { text-align: left; }
#vision header,#head , #eyes a, #vision h2
{ text-transform: uppercase; }
#vision main, #team main 
{ text-align: justify; }
#services ul, #products 
{ text-align: center; }
/*
===============================================
****************    HEGIGHT FIT	***************
===============================================
*/
/* ====== FONT SIZE =====*/
.font-mammoth, h1 				
{ font-size: 60px; }
.font-bear, h2 				
{ font-size: 40px; }
.font-lion, h3, #some header, #team header, #vision header, #outcomes header			
{ font-size: 28px; }
.font-chicken, h4, .mystatus, #welcome main	
{ font-size: 16px; }
.font-ant, h5, #designed
{ font-size: 12px; }
.font40, label.toggle
{ font-size: 40px; }

/* ====== FONT FIT =====*/
.line-baby, p, ul, li				
{ line-height: 25px;  }
.line-toddler, .mystatus, #services ul			
{ line-height: 35px;  }
.line-kid, #hair  , #head, #eyes a 
{ line-height: 50px;  }
.line-teen	, #vision header, #services header		
{ line-height: 60px;  }
.line-adult		  		
{ line-height: 80px;  }
.line-elder				
{ line-height: 125px;  }


/* ====== FIXED HEIGHT =====*/
.squahed, #alert
{ height: 0px; }
.high-worm, .box-tiny
{ height: 30px; }
.high-chiken, .box-small
,#hair, #head, #logo   			
{ height: 50px; }
.high-cat, .box-medium	 		
{ height: 80px;  }
.high-goat, .box-normal	, #products figure			
{ height: 180px;  }
.high-horse, .box-big				
{ height: 250px;  }
.high-cow, .box-huge				
{ height: 350px;  }

/* ====== START HEIGHT =====*/
.floor-tiny				
{ min-height: 60px;  }
.floor-short				
{ min-height: 150px;  }
.floor-tall, #about div, #gallery figure, #purpose article 		
{ min-height: 320px;  }
.floor-sky, #welcome				
{ min-height: 100vh;  }

/* ====== RESTRICT HEIGHT =====*/
.roof-tiny			
{ max-height: 60px;  }
.roof-short			
{ max-height: 150px;  }
.roof-tall				
{ max-height: 250px;  }
.roof-sky				
{ max-height: 350px;  }


/*
===============================================
*********    CUSHION & AIR PAD/MARGIN	*******
===============================================
*/
.hard 			{ padding: 0px; margin: 0px;  }
label.toggle, #hair 	
{ padding: 0px 20px; }
#eyes a, #vision article 		
{ padding: 0px 30px; 	}
.mystatus, .smallpad article, #vision>p
{ padding:30px 15px;  }
#vision header, #team aside, #team header, #team h2, #outcomes article
{ padding: 10px; }

#purpose article, #team article, #products article
{ padding: 30px; }

.entice, #purpose h2
{margin: 0px;}

.airy, .mystatus, #team aside, #team header, #team h2, #products article
{ margin: 10px auto 30px; }
#services div
{ padding: 40px 0px;  }
#contact, #gallery, #team, #vision, #services, #outcomes
{ padding: 60px 0px; }



/*
===============================================
****************    WIDTH FIT	***************
===============================================
*/
/* ====== FIXED WIDTH =====*/
.squeezed
{ width: 0px; }
.fat-toddler, .box-tiny
{ width: 30px; }
.fat-kid, .box-small			
{ width: 50px; }
.fat-teen, .box-medium					
{ width: 60px;  }
.fat-adult, .box-normal	, #products article  			
{ width: 140px;  }
.fat-goat, .box-big		
{ width: 250px;  }
.fat-horse, .box-huge, .landscape-huge-horse, .landscape-huge-goat			
{ width: 450px;  }

/* ====== START width =====*/
.wide-stump				
{ min-width: 60px;  }
.wide-log, #gallery figure				
{ min-width: 250px;  }

/* ====== RESTRICT width =====*/
.wall-tiny			
{ max-width: 60px;  }
.wall-short	, #products figure
{ max-width: 140px;  }
.wall-wide		
{ max-width:1200px;  }
.wall-long, .mystatus				
{ max-width:550px;  }


/*
===============================================
**********     FORMS & BUTTONS      ***********
===============================================
*/

/**/
.form-dark input[type=text],.form-dark input[type=number],.form-dark input[type=email],.form-dark input[type=url], .form-dark input[type=password], .form-dark select
,.form-mid input[type=text]	 ,.form-mid input[type=number],.form-mid input[type=email],.form-mid input[type=url], .form-mid input[type=password] .form-mid select
,.form-light input[type=text],.form-light input[type=number],.form-light input[type=email],.form-light input[type=url], .form-light input[type=password] .form-light select
,.form-extra input[type=text],.form-extra input[type=number],.form-extra input[type=email],.form-extra input[type=url], .form-extra input[type=password].form-extra select
{ min-width: 350px; height: 38px; line-height: 38px; margin:15px 0px; text-indent: 10px; border-width: 1px; border-style: solid;  background-color: transparent;  }
textarea     { width: 100%; height: 150px; line-height: 25px; margin: 20px 0px; text-indent: 10px; background-color: transparent; border-width: 1px; border-style: solid;  }

.btn-dark, .btn-mid, .btn-light, .btn-extra		{ border: 0px; height: 40px; line-height: 40px;  padding: 0px 30px; margin: 10px 0px 20px; } 
.btn-skeleton, .btn-dark 						{ background-color: transparent; border-width: 2px; border-style: solid; }



/*
===============================================
****************     SIZES      ***************
===============================================
*/





.center-nappies, .social, #contact article, #products
{  text-align: center; padding: 10px; }
.center-sheet,  #subscribeform, #contactform
{  text-align: center; padding: 20px 30px; } 


.max-mobile
{ max-width: 300px; }
.max-tablet, #subscribeform, #contactform 
{  max-width: 760px;   }
.max-pc, #contact article 
{ max-width: 1200px; }

.min-mobile, #logo
{ min-width: 250px; }
.min-tablet
{  min-width: 760px;   }
.min-pc
{ min-width: 1200px; }

.limit-height-mobile
{ max-height: 150px; }
.limit-height-tablet, .seemore
{  max-height: 400px;  overflow: hidden; }
.limit-height-pc
{ max-height: 600px; }

.open-fill, #welcome 		
{ min-height: 100vh;  }


/* ====== LINE =====*/

.line-pencil, .toolbar, .toolbar .search		
{ border-width: 0px; border-style: solid; height: 30px; line-height: 30px; margin: 0px;  }
.chip, .chips article	
{ border-width: 0px; border-style: solid; max-width: 600px; min-height: 50px; line-height: 50px; margin: 0px;  }
.card, .cards article		
{ border-width: 0px; border-style: solid; max-width: 320px; min-height: 420px; }
.board, .boards article 
{ border-width: 0px; border-style: solid; max-width: 450px; min-height: 320px; }
.panel, .panels  article 
{ border-width: 0px; border-style: solid; max-width: 600px; min-height: 500px; }


/* ====== CIRCULAR =====*/
.disc-small, .disc-small figure, .social a
{ width: 40px; height: 40px; line-height: 40px; font-size: 18px; border:0px; padding: 0px; border-radius: 100px; margin: 10px 20px; overflow: hidden; text-align: center; display: inline-block; }
.disc-mid, .disc-mid figure , #services article, #whatwedo figure
{ width:260px; height: 180px;  border:0px; padding:100px 30px 50px; border-radius: 160px; margin: 0px auto; overflow: hidden; text-align: center; }
.disc-large, .disc-large figure
{ width: 300px; height: 240px; line-height: 40px; font-size: 18px; border-width:10px; border-style: solid; padding: 100px 20px 10px; border-radius: 235px; margin: 0px auto; overflow: hidden; text-align: center; }

/*
===============================================
****************     FINISHES  ***************
===============================================
*/
.shadow, .addmoreclasses, .disc-small
/*changers*/, .social a, #team main
{ box-shadow: 0px 2px 5px rgba(0,0,0,0.5); }

.edged, input, textarea, button
/*changers*/ , .sendme
{ border-radius: 5px;  }
.rounding, #contactform,  #gallery figure,#team aside
{ border-radius: 12px;  }



/*flex specifics*/
.stretch				
{ align-self: stretch;  }
 #about article
{ flex: 1 20px; align-self: stretch; }
.drop 					{ align-self: flex-end; }
.grow 					{ flex: 2 0px; 	}
.grow2 					{ flex: 3 0px; 	}
.grow3 					{ flex: 3 0px; 	}
#head main { align-self: flex-end; }


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

.sticky 		{  top: 50px;   } 	.fix-head { top: 0px; }
#head 			{  z-index: 20;	 }
#logo 			{ overflow: hidden; margin: 0px 20px;  	}
.socials 		{ letter-spacing: 30px; }
			
#purpose article, #outcomes p { text-align: justify; }
/*
===============================================
****************   	MAIN 		***************
===============================================
*/
#welcome 			{ padding: 20vh  0px 0px; min-height: 80vh; overflow: hidden;}
#welcome article 	{  text-align: center; margin: 0px auto; padding: 0px 0px 20px; width: 500px;  }
#welcome figure   { width: 500px; height: 340px; }
#welcome header h2  { font-size: 18px; color: #222;  }

#about div,  .entice	{ padding: 60px 40px; }
.entice 				{  text-align: center; background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); }
#vision  				{  }
#team main				{ max-width: 800px;}

#whatwedo            {   max-width: 1200px; margin: auto; padding: 60px 0px; }
#whatwedo header     { font-size: 30px; line-height: 60px; padding: 10px 0px 0px; }
#whatwedo figure     { background-color: #eee; float: left; margin: 20px 20px 40px;}
#whatwedo main       { padding: 0px; text-align: justify; max-width:  980px; }
#whatwedo article    { float: none; display: inline-block; min-height: 400px; text-align: center; padding: 20px 0px; margin: 15px;}
#whatwedo div article:nth-child(odd) figure { /*float: right;*/ }
#whatwedo div article:nth-child(odd) { /*text-align: right;*/ }

button.accordion {   cursor: pointer;    transition: 0.4s; }
button.accordion.active, button.accordion:hover {    background-color: #ddd; }
.panel {   display: none;}

.entice header 			{ font-size: 22px; padding: 20px; color: #777; letter-spacing: 3px;  }
.entice aside 			{ font-style: italic; letter-spacing: 2px; }
#about 			{  }
#services article 	{ margin:0px 30px;  }
#services header	{ font-size:  22px;  }
#products 		{ margin: 0px auto; display: block;}
#contacts 		{  }
#products article { text-align: center; }
#products li { padding: 20px; }

/*
===============================================
****************   	FOOTER 		***************
===============================================
*/
#designed               {  width: 110px; line-height: 30px; padding: 10px 20px; margin: auto; font-family: casa, Courier, monospace;  } 
.by_words, .small_logo  { height: 30px; overflow: hidden;  } .by_words { width: 70px; }  .small_logo { width: 30px; background: url('us.png') no-repeat center; background-size: 30px; }

/*
===============================================
****************    IMAGES    ***************
===============================================
*/

.logo         	{ background: url('logo.png') no-repeat center; background-size: contain; }
figure, .cover1, .cover2, .cover3, .cover4, .cover5, .cover6, .cover7, .cover8, .cover9 
,.pic000,.pic001,.pic002,.pic003,.pic004,.pic005,.pic006,.pic007,.pic008,.pic009
,.pic010,.pic011,.pic012,.pic013,.pic014,.pic015,.pic016,.pic017,.pic018,.pic019
{ background-repeat: no-repeat; background-position: center; background-size: cover; }

.cover1			{ background-image: url('../gallery/cover1.jpg'); background-attachment: fixed;  }
.cover2			{ background-image: url('../gallery/cover2.jpeg');  }
.cover3			{ background-image: url('../gallery/cover3.jpg'); background-attachment: fixed; }
.cover4			{ background-image: url('../gallery/cover4.jpg');  }

.pic001       	{ background-image: url('../gallery/pic001.jpg');  }
.pic002       	{ background-image: url('../gallery/pic002.jpg');  }
.pic003       	{ background-image: url('../gallery/pic003.jpeg');  }
.pic004       	{ background-image: url('../gallery/pic004.jpeg');  }
.pic005       	{ background-image: url('../gallery/pic005.jpeg');  }
.pic006       	{ background-image: url('../gallery/pic006.jpg');  }
.pic007       	{ background-image: url('../gallery/pic007.jpg');  }
.pic008       	{ background-image: url('../gallery/pic008.jpg');  }
.pic009       	{ background-image: url('../gallery/pic009.jpg');  }
.pic010       	{ background-image: url('../gallery/pic010.png');  }
.pic011       	{ background-image: url('../gallery/pic011.jpg');  }
.pic012       	{ background-image: url('../gallery/pic012.jpg');  }
.pic013       	{ background-image: url('../gallery/pic013.jpg');  }
.pic014       	{ background-image: url('../gallery/pic014.jpg');  }
.pic015       	{ background-image: url('../gallery/pic015.jpeg');  }
.pic016       	{ background-image: url('../gallery/pic016.jpg');  }
.pic017       	{ background-image: url('../gallery/pic017.jpg');  }
.pic018       	{ background-image: url('../gallery/pic018.jpg');  }
.pic019       	{ background-image: url('../gallery/pic019.jpg');  }
.pic020       	{ background-image: url('../gallery/pic020.jpg');  }
.pic021       	{ background-image: url('../gallery/pic021.jpg');  }
.pic022       	{ background-image: url('../gallery/pic022.jpg');  }
.pic023       	{ background-image: url('../gallery/pic023.jpg');  }
.pic024       	{ background-image: url('../gallery/pic024.jpg');  }
.pic025       	{ background-image: url('../gallery/pic025.jpg');  }
.pic026       	{ background-image: url('../gallery/pic026.jpg');  }
.pic027       	{ background-image: url('../gallery/pic027.jpg');  }
.pic028       	{ background-image: url('../gallery/pic028.jpg');  }
.pic029       	{ background-image: url('../gallery/pic029.jpg');  }
/*
===============================================
****************    TABLET/MOBILE    ***************
===============================================
*/

/*NAVIGATION*/

@media (max-width: 820px) {

 .navy, .spreadfull, .stretchfull 			{ display: -webkit-flex; display: flex;  flex-flow:column wrap;  -webkit-flex-flow: column wrap;  justify-content: center;      align-items: stretch;    align-content: stretch; }
  nav { display: none; }
  nav ul { list-style: none; padding: 0px; margin: 0px; }
  input.toggle, .toggle span {    display: none;  }
  input[type=checkbox]:checked ~ nav, label.toggle {  display: block;    cursor: pointer;  }
  nav li {    float: none;  }
  nav li:hover ul {  display: block;   position: relative;  }
  nav li ul { display: block;  }
  nav li ul li {   margin-left: 20px;  }
  nav li a {    display: block;    padding-left: 20px;  }
  .nav-icon { position: absolute; top: 0px; right: 0px; line-height: 50px;  margin: 0px;}
  #eyes { position: absolute; top: 50px; width: 100%; }
  #eyes a { padding: 0px 15px;  }

#hair { line-height: 25px; padding: 0px 5px; height: 75px; }
.sticky { top: 75px; } .fix-head { top: 0px; }
  .inputme, .selectme, .msgme { width: 100%; height: 75px;}

}





/*
===============================================
*******  PRESETS --GOES TO NORMALISE	*******
===============================================
*/



/*
===============================================
****************   	LIBRARY		***************
===============================================
*/
.cards1 article 		{ position: relative; }
.cards1 article header 	{ order:1; font-weight: bold; font-size: 20px; }
.cards1 article figure  { order:2; width: 100%; height: 200px; }  .cards1 article img 	{ order: 2;  }
.cards1 article main 	{ order:3;  }
.cards1 article footer 	{ order:4;  }
.cards1 article aside  	{ order:5;  }