/* CSS Document */

*, html {margin:0; padding:0;}
html, body {height: 100%;}

.clear {clear:both;}
body { 
	font:17px sans-serif; 
    font:18px "Myriad Pro", Arial, Geneva, sans-serif;
	font-weight: 500;
	color: #444;
	background: #FFF url('../images/eggs/bg-img1.jpg') no-repeat left bottom fixed;
    background-size: cover;
}
#wrap {
	min-height: 100%;
	margin: 0 auto;
	background: rgba(255,255,255,.8);
	max-width: 1200px;
}
#buffer {height: 120px;}
.container { 
    max-width:1200px; 
	margin:0 auto; 
	width:100%; 
	clear:both;
}
#mainpage .container { 
    background: rgba(255,255,255,.8);
}
article {
    /*max-width:1140px; */
    padding: 0px 30px;
    clear: both;
    margin:0 auto;
}
/*.contntainer:after, .content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}*/
img, embed, object, video, iframe {max-width: 100%;}

H1, H2, H3 {
	color: #ee7b04;
    text-shadow: 2px 2px 2px #BBB;
    font:300 40px "Myriad Pro", Arial, Geneva, sans-serif; 
}
H1 {
	padding: 20px 0 25px;
	/*letter-spacing: 0.05em;*/
	color: #D09;
	font: 400 54px "Myriad Pro", Arial, Geneva, sans-serif;
}
H2 {color:#555;}
#mainpage H2 {
    letter-spacing: 0.05em;
    font-size: 54px;
    padding:30px 0; 
}
H3 {
    font: 400 30px "Myriad Pro", Arial, Geneva, sans-serif;
    color:#EE7B04;
}
H4 {
	color: #FFF;
	font-size: 25px;
	font-weight: 100;
	border-bottom: 1px solid #FFF;
	margin-bottom: 10px;
}
p {font:17px sans-serif;}
a {color: inherit; color: #D09;}
a:hover {text-decoration: none;}
.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;    
}
.grey {background: #E9E9E9;}

														/* HEADER */
HEADER {
    padding: 0;
    background: rgba(255,255,255, .85);
}
#logo { 
    width: 100%;
	max-width:430px;
	height:120px;
	display: block;
	background: url('../images/eggs/logo.png') no-repeat left bottom;
    margin: 30px 0 0 30px;
	float: left;
}
.tel {
	width:270px; 
	padding: 30px 30px 0 0px;
	font-size:36px;
    font-weight: 300;
    color: #D09;
    text-shadow: 2px 2px 3px #BBB;
	text-align: right;
	float:right;
}
.tel a {
    display: block;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
    line-height: 3em;
    color: #777;
    text-shadow: none;
}
														/* MAIN NAV */
#menu-icon {display: none;}
#mainpage #main-nav {height: 500px;}
#main-nav {
    clear: both; 
    text-align: center;
    position: relative;
    z-index: 15;
	background: url(../images/eggs/main_img.jpg) no-repeat center center;
}
#main-nav ul {
	margin: 0 auto; 
	width: 100%;
    background: rgba(0,0,0,.5); 
	list-style: none;
    display: table;
    table-layout: fixed;
}
#main-nav li {
    display: table-cell;
    position: relative;
    border-left: 1px solid #DDD;
	vertical-align: middle;
    overflow: hidden;
}
#main-nav li:first-child {border-left: none;}
#main-nav a {
	display: block; 
	color: #EEE; 
	padding: 20px 15px; 
	text-decoration: none; 
    text-transform: uppercase;
    font:300 20px "Myriad Pro", Arial, Geneva, sans-serif; 
	/*font-size: 1.2em;*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#main-nav li:hover a {
    background: rgba(0,0,0,.7); 
    color: #D09;    
}
#main-nav li:hover {overflow:visible;}
#main-nav li:hover a, #main-nav a:hover {color:#D09; color: #FFF;}

											                 /* main-nav submenu */
#main-nav li ul {
	position:absolute;
	top:0px;
	left:0px;
	width:300px;
	z-index:10;
	border-top: 1px solid #AAA;
	opacity:0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#main-nav li ul li {
	display:block;
	border-left: none;
	width:100%;
}
#main-nav li ul li a {
	display:block;
	padding: 10px 10px 10px 10px;
	margin:0;
    font-size: 0.9em;
    font-weight: 400;
	text-align:left;
	text-transform: none;
	background-color:#FFF;
	border-bottom: 1px solid #AAA;
	color:#AAA !important;
}
#main-nav li ul a:hover {
	background-color: #333;
	color:#EEE !important;
}
#main-nav li:hover ul, .nav li.over ul {
	display: block;
	opacity:1;
	top:64px;
}

														/* SPECIAL */
#special {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
    padding: 0 30px;
}
#special div {
	/*flex-basis: 30.7%;*/
    max-width: 350px;
	position: relative;
	background: #000;
    margin-top: -100px;
	/*cursor: pointer;*/
}
#special H3 {
	padding: 5%;
	width: 90%;
	background-color: rgba(0, 0, 0, .75);
	color: #FFF;
    text-shadow: none;
    font-weight: 300;
	z-index: 10;
	position: absolute;
	bottom: 0;
	left: 0;
}
#special img {
	display: block; 
	opacity: .8;
	/*-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;*/
}
#special a:hover img {opacity: 1;}
#special p {margin: 0;}
#special p:after {
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
}
#special a {display:block;}


															/* CONTENT */
.content {
    padding-bottom: 30px;
}
													       /* SIDEBLOCK */
#SIDEBLOCK { /*330px*/
	width:300px;
    padding-left: 30px;
	min-height:350px;
	float:left;
	margin: 0;
}
#SIDEBLOCK H2 {display: none;}
#sidenav {
    margin:0px 0 30px;
    list-style:none;
    border-top:1px dotted #AAA;
}
#sidenav li {position: relative;}
#sidenav li:before {
	position: absolute;
	left: 2px;
    top: 7px;
	content: '\f2fb';
	color: #555;
	font: 23px/1em 'Material-Design-iconic-font';
    padding: 0px 8px 0px 9px;
    border: 1px solid #555;
    border-radius: 50%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#sidenav li a {
    display:block;
    color:#777;
    text-decoration:none;
    padding:9px 20px 9px 34px;
    border-bottom:1px dotted #AAA;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#sidenav li:hover:before {
    color: #FFF;
    background-color:#D09;
    border-color: #D09;
}
#sidenav a:hover {
    color: #D09;
    border-bottom:1px solid #D09;
}

                                                            /* side subnav */
#sidenav li ul {margin-left: 20px;}
#sidenav li li a {
    padding:5px 20px 7px 25px;
	text-transform: none;
}

													       /* CENTER */
#CENTER {
    max-width: calc(100% - 330px);
    /*padding-top: 0;*/
    float: left;
}
#CENTER ol, #CENTER ul {
    margin: 20px 0 20px 30px;
}
table {width: 100%; border-collapse: collapse;}
td, th {text-align: center;}
tr td:first-child, tr th:first-child {text-align: left;}
td {border: 1px solid #CCC; padding: 5px;}

a.more {
    display: block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    font-size: 27px;
    background: #FFF;
    position: relative;
    margin-left: calc(100% - 230px);
    padding: 15px;
    outline: 2px solid #691;
    outline-offset: -2px;
	color: #691;
	/*-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;*/
}
a.more:hover {
    background: #691;
    /*outline: 13px solid #FFF;
    outline-offset: -13px;*/
    color: #FFF;
}

#diet {
    padding-top: 50px;
    margin: -30px -30px 0;
    margin-top: 0;
    outline: 2px solid #D09;
    outline-offset: -45px;
    min-height: 275px;
	background: #FFF url('../images/eggs/eggs-d1.jpg') no-repeat 7em 34px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
#diet H2 {
    /*margin-left: 7.5em;*/
	color: #D09;
	font: 400 70px "Myriad Pro", Arial, Geneva, sans-serif;
    letter-spacing: 0em;
	margin-right: 70px;
}
#diet H2 span {display: block;}
#diet a {
    color: #D09;
    outline: 2px solid #D09;
    outline-offset: -15px;
    background: #FFF;
    padding: 30px;
	margin-right: 70px;
	clear: both;
}
#diet a:hover {
    outline: 13px solid #FFF;
    outline-offset: -13px;
    background: #D09;
    color: #FFF;
}

.categ-list {
    padding:0 30px 30px;
    margin: 0 -30px;
	background: #FFF url('../images/eggs/eggs-basket.jpg') no-repeat right 25px;
    background-color: #F5F4EB;
}

.categ-list ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: 0 !important;
}
.categ-list li {
    /*font-family: 'robotoregular';
    font-family: 'roboto_ltregular';*/
	font-size: 1.1em;
    margin-bottom: 25px;
	color: #555;
	flex-basis: calc(35% - 50px);
	padding-left: 50px;
	position: relative;
	list-style: none;
}
/*.categ-list li:nth-child(even) {float: right;}*/
.categ-list li:before {
	position: absolute;
	left: 0;
	top: -7px;
	content: '\f2fb';
	color: #691;
	font: 29px/1em 'Material-Design-iconic-font';
    padding: 3px 13px 2px 14px;
    border: 3px solid #691;
    border-radius: 50%;
    background: #691;
    color: #FFF;
}
/*.categ-list a.more {margin-top: -30px;}*/

																/* FARMS */
#farms ul {
    list-style: none;
}
#farms ul li {
    flex-basis: 32%;
    margin-bottom: 2%;
    text-align: center;
}
#farms ul li img {
    outline: 1px solid #CCC;
    outline-offset: -1px;
}
#farms ul li:hover {
}
.bw img {
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.bw img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    box-shadow: 4px 4px 10px #DDD;
}


													       /* FOTOGAL */
#fotogal {
    clear: both;
	padding-top:20px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	/*background:#EEE;*/
}
#fotogal H2 {
	flex-basis: 100%;
}
#fotogal li {
    flex-basis: 24%;
	align-self: flex-start;
	text-align:left;
	margin-bottom:20px;
    list-style: none;
    overflow: hidden;
}
#fotogal div {
    background-color: black;
    outline:1px solid #AAA;
    outline-offset: -1px;

}
#fotogal img {
	/*padding:5px;
	background:#FFF;*/
    display: block;
    opacity: 0.9;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;

}
#fotogal li:hover img {
    opacity: 1;
    transform: scale(1.05);
}
																/* NEWS */
#news {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;    
}
#news div {
    flex-basis: 32%;
    text-align: justify;
    padding-bottom: 30px;
}
#news span {
    font-size: 27px;
    font-weight: 100;
    display: inline-block;
    color: #D09;
    padding: 3px 0px;
    margin-bottom: 3px;
}
#news H2 {width: 100%;}
#news H2 a {text-decoration: none;}
#news H3 a {
    font-size: 18px;
    font-weight: normal;
    color: #333;
}

                                                            /* FOOTER */
#mainpage .FOOTER {margin: 0 auto;}
.FOOTER {
	font-weight: 100;
	margin-top: -120px;
}
.FOOTER article:first-child {
	background: url('../images/eggs/footer.jpg') no-repeat top center, rgba(0, 0, 0, .1);
	background-size: cover;
	background-blend-mode: color;
	color: #777;
}
#mainpage .FOOTER article:first-child {padding-bottom: 140px;}
#mainpage .FOOTER article:last-child {
    background-color: rgba(0,0,0,.7);
    /*height: 50px;*/
    margin-top: -120px;
}
.FOOTER article:last-child {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
	height: 100px;
    padding-top: 20px;
}
.FOOTER H2 {
    color: #FFF;
    text-shadow: none;
}
.FOOTER p {
    color: #EEE;
}
.FOOTER a {color: #FFF;}
footer-L, footer-R {flex-basis: 40%;}
#footer-L a {
    width: 96px;
    color: #999;
    height: 50px;
    display: inline-block;
    background: url(http://pi-arts.ru/pix/pi-arts.png) no-repeat left bottom;
    text-align: center;
    font: 12px Tahoma, Geneva, sans-serif;
    display: none;
}

													/* FEEDBACK FORM */
.myform {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.myform p {
    width: 100%;
    margin-bottom: 10px; 
}
input, textarea {
	padding: 10px 15px;
    font-family:"HelveticaNeue-Light";
	font-size: 18px;
	width: calc(32% - 30px);
	display: inline-block;
	margin-bottom: 20px;
	border-width: 0px;
    outline: 1px solid #999;
    outline-offset: -1px;
}
.FOOTER input, .FOOTER textarea {
	background: rgba(0, 0, 0, .5);
	color: #EEE;
}
textarea {width: calc(100% - 30px);}

::-webkit-input-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}
::-moz-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}/* Firefox 19+ */
:-moz-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}/* Firefox 18- */
:-ms-input-placeholder {color:#999;opacity:1;font-family:"HelveticaNeue-Thin";transition: opacity 0.3s ease;}

:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

#buttn {
	width: 32%;
	padding:15px 0px;
	border: 1px solid #EEE;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
}
.FOOTER #buttn {background: rgba(0, 0, 0, .7);}
#buttn:hover {border-color: #AAA; background:  rgba(255, 255, 255, .7); color: #222;}