/* CSS Document */ 

                                                            /* MAX-WIDTH: 1250 */
@media only screen and (max-width: 1250px) {
}

                                                            /* MAX-WIDTH: 1100 */
@media only screen and (max-width: 1100px) {
}

                                                            /* MAX-WIDTH: 992 */
@media only screen and (max-width: 992px) {
	.tel {
		width: 260px;
		padding-right: 15px;
		font-size: 34px;
	}
    #main-nav {
		height: 43px !important;
		background-size: cover;
	}
    #main-nav li {
        display: block;
        text-align: right;
        border-bottom: 1px solid #EEE;
		border-left: none;
    }
    #main-nav a {
        padding: 10px 10px;
        text-align: right;
    }
    
    #main-nav ul {
        display: none;
        width: 200px;
        background-color: rgba(0,0,0,.7);
    }
    #main-nav2 {width: 100%;}

	/* Иконка меню */
	#menu-icon {
		color: #FFF;
		width: 42px;
		background: url(/images/topnav_m.gif) no-repeat 10px center;
		padding: 8px 36px 5px 50px;
		cursor: pointer;
		float: right !important;
		display: block; /* Выводим иконку меню */
	}
	/*#menu-icon:hover {background-color:;}
	#menu-icon.active {background-color:;}*/
	
	/* Навигация */
	#nav {
		display: none; /* Видимость включается jQuery */
		width: 160px;
        border-top: 1px solid #FFF;
		clear: both;
		position: absolute;
		top: 43px;
		right: 0;
		z-index: 10000;
	}
	#nav li {
	}
	#nav a, #nav ul a {
	}
	#nav a:hover, 
	#nav ul a:hover {
	}
	
	/* Выпадающий список */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {margin: 3px 0 3px 15px;}
	
	#diet {
	    background-position: 50px;
	}
    #diet H2 {
		text-align: right;
		font-weight: 300;
	    line-height: 1em;
	    padding-top: 15px;
		margin-bottom: 40px;
	}
}

                                                            /* MAX-WIDTH: 768 */
@media only screen and (max-width: 768px) {
	.tel {padding-top: 0;}
	#CENTER p, #CENTER p span, #CENTER li span {font-size: 1.05em !important;}
	.categ-list {
		background-position-y: bottom;
	    background-position-x: left;
	    background-size: 55%;
	}
	.categ-list a.more {
		margin-top: 40px;
	}
	.categ-list li {flex-basis: calc(50% - 50px);}
}

                                                            /* MAX-WIDTH: 640 */
@media only screen and (max-width: 640px) {
	#diet {
	    padding-top: 15px;
	    outline: none;
		background-position: left;
		}
	#diet H2 {
	    font: 300 40px/1em "Myriad Pro", Arial, Geneva, sans-serif;
		float: none;
		margin: 10px 15px;
		padding-top: 0;
		text-align: right;
	}
	#diet a {
		padding: 15px;
		outline-offset: -2px;
	}
	#mainpage H2 {
		font-size: 11vw;
		padding: 10px 0;
	}
	.categ-list H2 {padding-bottom: 200px;}
	.categ-list li {
		flex-basis: 100%;
		font-size: 4vw;
	}
	#farms ul li {flex-basis: 48%;}
	input, textarea, #buttn {width: 100%;}
	.FOOTER H2 {
		font-size: 10vw;
	}
}

                                                            /* MAX-WIDTH: 480 */
@media only screen and (max-width: 480px) {
    article {padding: 0 10px;}
	#logo {
		width: 430px;
		max-width: 100%;
		margin: 0;
		background-size: 90%;
		background-position: center;
	}
	#diet {
		background-size: 65%;
		background-position-y: top;
	}
	.categ-list {
		background-position-x: right;
		background-size: 70%;
	}
	.categ-list li {font-size: 5vw;}
	.categ-list a.more, #diet a {
		margin: 30px -10px 0;
		padding: 15px;
		width: calc(100% - 10px);
		color: #FFF;
		outline: none;
		background-color: #691;
	}
	#diet a {background-color: #D09;}
	#diet, .categ-list {
		margin: 0 -10px;
		padding: 0 10px;
		}
}

                                                            /* MAX-WIDTH: 360 */
@media only screen and (max-width: 360px) {
    #logo {
        width: 100%;
        max-width: 430px;
    }
    #CENTER p, #CENTER p span {font-size: 16px !important;}
    H1 {font-size: 45px;}
	#diet {
		
	}
}

                                                            /* MIN-WIDTH: 640 AND MAX-WIDTH 768 */
@media only screen and (min-width: 480px) and (max-width: 768px) {
	.tel {width: auto;}
}

                                                            /* MIN-WIDTH: 480 */
@media only screen and (min-width: 480px) {					
}

                                                            /* MIN-WIDTH: 768 */
@media only screen and (min-width: 768px) {					
}

                                                            /* MIN-WIDTH: 992 */
@media only screen and (min-width: 992px) {
}

                                                            /* MIN-WIDTH: 1100 */
@media only screen and (min-width: 1100px) {				
}

                                                            /* MIN-WIDTH: 1250 */
@media only screen and (min-width: 1250px) {				
}