@font-face    { font-family: casa;        src: url(css/Casa.ttf);}
@font-face    { font-family: bodyfont;    src: url(css/body.otf);}
@font-face    { font-family: headfont;    src: url(css/head.ttf);}
@font-face    { font-family: 'icons';  src: url('css/webfront.eot?46013441');      src: url('css/webfront.eot?46013441#iefix') format('embedded-opentype'),           url('css/webfront.woff?46013441') format('woff'),           url('css/webfront.ttf?46013441') format('truetype'),           url('css/webfront.svg?46013441#webfront') format('svg'); font-weight: normal;     font-style: normal; speak: none;       -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; }
.icons        { font-family: 'icons'; }

table {	border-collapse: collapse;	border-spacing: 0; } a {text-decoration: none; }  /*remove if needed*/

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

body 			      { font-family: bodyfont;   font-size: 15px; background-color: #fff; color: #333;    }
h1, h2, h3, h4 	{ font-family: headfont;  }
h1 				{ font-size: 60px; }
h2 				{ font-size: 40px; }
h3 				{ font-size: 20px;  }
p 				      { line-height: 20px; }
input 		      { border:0px; }

/*color scheme*/
.bc1 		   	{ background-color: rgba(255, 102, 0, 1); } 										 
.bc2 	  		{ background-color: rgba(255, 255, 102, 1); } 										
.bc3   			{ background-color: rgba(0, 153, 51, 1); color: rgba(255, 255, 102, 1);  } 			.fc3  { color: rgba(0, 153, 51, 1); }
.btn1 			{ background: rgba(0, 0, 0, 1); border: 0px; height: 70px; width: 70px; border-radius: 35px;  color: #fff; padding: 0px; display: block; margin: auto; text-align: center; line-height: 70px;} .btn1 span, .btn2 span { font-family: 'icons';  }
.btn2 			{ background: transparent; border: 2px solid #111;  color: #111; padding: 20px 50px; font-weight: bold; font-size: 17px; display: block; margin: auto; }
#toolbar 		{ display: inline-block; overflow: hidden; } #toolbar .search { height: 30px; margin: 10px;  }
/*
===============================================
****************   	HEADER		***************
===============================================
*/
nav input[type=checkbox], .nav-icon   { display: none; -webkit-appearance: none; } /*Hide checkbox*/
nav input[type=checkbox]:checked ~ #nav, nav input[type=checkbox]:checked ~ #nav2,  nav input[type=checkbox]:checked ~ #nav3,  nav input[type=checkbox]:checked ~ #nav4  {    display: block; } /*Show menu when invisible checkbox is checked*/
ul.nav                  { list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden; } ul.nav li, ul.nav li a  { display: inline-block; }

#head 			{  z-index: 10;	}
.sticky 		{ position: absolute; top: 100px; left: 0px; right: 0px; color: #111; height: 50px; line-height: 50px; }
.fix-head 		{ position: fixed; top: 0px;  background: rgba(255,255,255,0.5);  }
.sticky #logo 			{ display: inline-block; overflow: hidden; margin: 0px 30px; z-index: 20; color: #000; line-height: 20px; width: 440px; text-align: center;	} 
.fix-head #logo 	{ text-align: left; width: 150px; }
.sticky #logo div { height: 40px; line-height: 40px; } 
.sticky .biggy 	{ font-size: 40px; letter-spacing: 5px; } .sticky .smally { letter-spacing: 9px; font-size: 20px; }
.fix-head #logo div { height: 25px; line-height: 25px; } 
.fix-head .biggy { font-size: 20px; letter-spacing: 3px; } .fix-head .smally { letter-spacing: 2px; font-size: 15px; }
#eyes 			{ display: inline-block; float: right;	}
#eyes a 		{ padding: 0px 20px; color: #111;	}	#eyes a:hover 	{ color: #999;	}


/*
===============================================
****************   	MAIN 		***************
===============================================
*/
#body>section 	 { position: relative;	padding: 50px 0px;} 

#welcome 		{ min-height: 100vh; }
#welcome .intro { color: #555; max-width: 440px; margin-right: 30px; padding: 40vh 30px 10px; line-height: 28px; font-size: 17px; text-align: center; }
.intro hr 		{ max-width: 300px; color: #111; margin: 20px auto; }

#agency 		{ display: flex; align-items: stretch; justify-content: center; }
#agency>div		{ width: 450px; min-height: 300px; } #agency p { text-align: justify; }
#agency .backcircle { width: 320px; height: 320px; border: 2px solid #eee; border-radius: 182px; background: #111; margin: 50px 30px;  }
#agency .pic 	{ width: 300px; height: 300px; border: 10px solid #fff;  border-radius: 155px; padding: 0px; margin: 0px;  }
#agency .description { color: #999;  }
#agency p 		{ color: #888; }


#models 		{ text-align: center; background: #faf6f1; }
#models>main { display: flex; justify-content: center; flex-wrap: wrap; } 
.cd1            { width: 240px; position: relative;  margin: 10px 20px 60px; display: inline-block;  vertical-align: top;}
.cd1 .name 			{ width: 100px; height: 100px; line-height: 100px; text-align: center; color: #fff; border: 10px solid #fff; border-radius: 60px; background-color: #fe7676; box-shadow: 0px 0px 1px #eee; z-index: 2; margin: auto; position: absolute; left: 0px; right: 0px; top: 0px; }
.cd1 .pic 		{ width: 210px; height: 210px; background-color: #eee; border: 10px solid #fff;  border-radius: 115px;  box-shadow: #ccc 0px 0px 1px; margin: 0px auto 10px;  position: relative; top: 80px;  }
.cd1 .description { min-height: 50px; line-height: 25px; text-align: center; color: #999; margin: 20px auto; position: relative; top: 80px;}
.cd1 .btn1 		{ position: relative; top: 80px; }
.cd1:hover .name { background-color: #111; }
.cd1:hover .pic  { border: 10px solid #fe7676;  }
.cd1 a:hover  	{ background-color: #fe7676; }


#work 			{ color: #fff; text-align: center; }
#work h2 		{ font-size: 80px; }
#work div 		{ font-size: 40px; letter-spacing: 8px; }
#work p         {max-width: 600px; margin: auto;}

#appointment 	{ background: #faf6f1; text-align: center; }
#contactform            { padding: 0px 70px; margin-right: 0px; width: 760px; display: inline-block; position: relative; font-size: 13px; }
#contactform .inputme   { margin:15px 10px;  height: 40px; line-height: 40px; width: 350px; text-indent: 10px; border: 1px #111 solid; border-radius: 5px; background: transparent; color: #111;}
#contactform textarea   { width: 720px; height: 150px; margin: 20px 10px; line-height: 25px; text-indent: 10px; background: transparent; border: 1px #111 solid; border-radius: 5px;  }
#contactform ::-webkit-input-placeholder  { /* Chrome/Opera/Safari */  color: #111;}
#contactform ::-moz-placeholder       { /* Firefox 19+ */  color: #111; }
#contactform :-ms-input-placeholder     { /* IE 10+ */  color: #111;}
#contactform :-moz-placeholder        { /* Firefox 18- */  color: #111; }
.sendme         { height: 80px; width: 80px;  line-height: 80px; padding: 0px; background: #fe7676; color: #fff; font-weight: bold; border-radius: 40px; }



#contact                {  }
/*
===============================================
****************   	FOOTER 		***************
===============================================
*/
#feet 		              {  padding: 0px ;	}
#feet .contacts 		{ padding: 50px 0px 0px; background-color: rgba(0,0,0,0.3); color: #fff; margin: auto; line-height: 40px; text-align: center; font-size: 20px;}
#feet .icons 			{ color: #fff; padding: 0px 10px; }
#designed               { background-color: rgba(0,0,0,0.3); font-size: 12px; text-align: center; height: 30px; line-height: 30px; padding: 10px 20px; margin: auto; font-family: casa, Courier, monospace;  font-size: 12px; } 
.by_words, .small_logo  { display: inline-block;   height: 30px; overflow: hidden;  } .by_words { width: 70px; }  .small_logo { width: 30px; background: url('us.png') no-repeat center; background-size: 30px; }
#designed a             { color: #ddd; }



/*
===============================================
****************    FOOTER    ***************
===============================================
*/

.logo         { background: url('logo.png') no-repeat center; background-size: contain; }
.cover1				{ background: url('../gallery/cover1.jpeg') no-repeat center fixed; background-size: cover;  }
.cover2				{ background: url('../gallery/cover2.jpg') no-repeat ; background-size: cover;  }
.cover3				{ background: url('../gallery/cover3.jpg') no-repeat center fixed; background-size: cover;  }


.pic1       { background: url('../gallery/pic1.jpg') no-repeat center; background-size: cover;  }
.pic2       { background: url('../gallery/pic2.jpg') no-repeat center; background-size: cover;  }
.pic3       { background: url('../gallery/pic3.jpg') no-repeat center; background-size: cover;  }
.pic4       { background: url('../gallery/pic4.jpg') no-repeat center; background-size: cover;  }
.pic5       { background: url('../gallery/pic5.jpg') no-repeat center; background-size: cover;  }
.pic6       { background: url('../gallery/pic6.jpg') no-repeat center; background-size: cover;  }
.pic7       { background: url('../gallery/pic7.jpg') no-repeat center; background-size: cover;  }
.pic8       { background: url('../gallery/pic8.jpg') no-repeat center; background-size: cover;  }
.pic9       { background: url('../gallery/pic9.jpg') no-repeat center; background-size: cover;  }

/*
===============================================
****************    TABLET/MOBILE    ***************
===============================================
*/
@media screen and (max-width:820px) {


#head         { overflow: auto; z-index: 300;  }
.nav-icon     { display: inline-block;    position: fixed;    right: 0;    top: 0;    width: 60px; height: 50px; font-size: 60px; line-height: 50px;  visibility: visible;  z-index: 200; }
#eyes         {  background: url('../gallery/cover1.jpeg') no-repeat center fixed; background-size: cover; position: fixed; top: 0px;  left: 0px; right: 0px;  }
#nav          { background: url('../gallery/cover1.jpeg') no-repeat center fixed; background-size: cover;  padding-top: 50px;  left: 0px; right: 0px;  }

#logo         { position: relative; top: 0px; left: 20px; height: 50px; right: 50px; font-size: 40px; padding: 0px; margin: 0px; text-align: left; line-height: 50px; background-position: 20px 0px;  }
.sticky, .sticky #logo { height: 120px; width: 100%; margin: 0px;}
#logo img { margin: auto;}
#eyes         { height: 50px;  }   
.nav a        { display: block; color: #fff;   text-align: left; height: 50px; padding-left: 20px; line-height: 50px;    }
.nav a:hover  { background-color: #333; }
#eyes ul      { position: static;   display: none;  } /*Make dropdown links appear inline*/ 
#eyes  li, #eyes li a {   width: 100%;  }
#body>section { width: 95%;  padding: 2.5%; }

#agency { display: grid;}
#agency>div  {  width: 90%;} 
#contactform { width: 95%; padding: 2%;}
#contactform textarea, #contactform .inputme { width: 96%;}
}