/*** main elements ***/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, div, img, input {margin: 0; padding: 0; border: 0;}
html {background: #ffffff; font-family: 'Lato', Verdana, Arial, Helvetica, sans-serif; font-size: 100.0%;}
body {font-size: 1.1em; color: #48441f; -webkit-text-size-adjust: none;}

a {color: #48441f; text-decoration: none; font-weight: bold;}
a:hover {color: #990000; text-decoration: underline;}
p {line-height: 1.6; padding: 0 0 15px 0;}
ul, ol {line-height: 1.6; padding: 0 0 15px 30px;}
h2, h3, h4, h5, h6 {font-size: 2.2em; padding: 0 0 5px 25px; margin: 0 0 20px 0; line-height: 1.0;}
h2, h3 {background: url(../images/header_back.gif) repeat-y left center;}
h3 {font-size: 1.4em;}
h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: normal;}

.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.center {text-align: center;}

/*** grid containers ***/
.container_12 {width: 1200px; margin: 0 auto;}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
.container_12 .grid_1 {width: 80px;}
.container_12 .grid_2 {width: 180px;}
.container_12 .grid_3 {width: 280px;}
.container_12 .grid_4 {width: 380px;}
.container_12 .grid_5 {width: 480px;}
.container_12 .grid_6 {width: 580px;}
.container_12 .grid_7 {width: 680px;}
.container_12 .grid_8 {width: 780px;}
.container_12 .grid_9 {width: 880px;}
.container_12 .grid_10 {width: 980px;}
.container_12 .grid_11 {width: 1080px;}
.container_12 .grid_12 {width: 1180px;}

/*** main containers ***/
#top, #topbaner, #container, #bottom {width: 100%;}

/*** top ***/
#top {border-top: 5px solid #b8b5a4;}
#top p {font-size: 1.4em; padding: 15px 0 10px 0;}

/*** main nav ***/
.mainnav {z-index: 100;}
.mainnav ul {float: left;}
.mainnav ul ul {display: none;}
.mainnav ul li:hover > ul {display: block;}
.mainnav ul {list-style: none; position: relative; display: inline-table;}
.mainnav ul:after {content: ""; clear: both; display: block;}
.mainnav ul li {float: left; margin: 10px 5px 0 5px;}
.mainnav ul li:hover {background: #e4e3dc;}
.mainnav ul li:hover a {}
.mainnav ul li a {display: block; font-size: 0.9em; color: #47441f; padding: 10px 15px; text-decoration: none; text-transform: uppercase; font-weight: bold;}

.mainnav ul ul {background: #cc0000; padding: 0; position: absolute; top: 70; z-index: 100;}
.mainnav ul ul li {float: none; position: relative; border-bottom: 1px solid #990000;}
.mainnav ul ul li a {padding: 7px 20px; text-align: left;}
.mainnav ul ul li a:hover {background: #990000; color: #ffffff;}

.mainnav ul ul ul {position: absolute; left: 100%; top: 0; z-index: 100;}
.mainnav ul ul ul li {float: none; position: relative; border-bottom: 1px solid #990000;}

/*** baner ***/
#topbaner {background-color: #b8b5a4; border-top: 3px solid #706e60; border-bottom: 3px solid #706e60; overflow: hidden; margin-bottom: 30px;}
h1 {text-align: center; padding-top: 130px;}
.baner img {border: 2px solid #ffffff; margin: 20px 0;}
.baner p {padding: 0;}

/*** main container ***/

/*** bottom ***/
#bottom {background: url(../images/footer_back.png) repeat-x left top; margin-top: 20px; border-top: 2px solid #706e60; overflow: hidden; height: 100px;}
#bottom img {margin: 10px 0 10px 0; float: right;}

/*** priv nav ***/
.privnav ul {list-style: none; margin: 0; padding: 0;}
.privnav li {}
.privnav li a {display: inline; margin: 0; padding: 30px 15px 10px 15px; float: left; text-decoration: none; font-size: 0.8em;}
.privnav li a:hover {text-decoration: underline;}

/*** tablet 769-1200 ***/
@media only screen and (min-width: 769px) and (max-width: 1200px) {
p {padding: 0 10px 15px 10px;}
ul, ol {padding: 0 10px 15px 40px;}
h2, h3, h4, h5, h6 {padding: 0 10px 5px 25px; margin: 0 0 10px 10px;}
.container_12 {width: 100%; margin: 0 auto;}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {display: inline; float: left; position: relative; margin: 0 0.8% 0 0.8%;}
.container_12 .grid_1 {width: 6.6%;}
.container_12 .grid_2 {width: 15%;}
.container_12 .grid_3 {width: 23.3%;}
.container_12 .grid_4 {width: 31.6%;}
.container_12 .grid_5 {width: 40%;}
.container_12 .grid_6 {width: 48.3%;}
.container_12 .grid_7 {width: 56.6%;}
.container_12 .grid_8 {width: 65%;}
.container_12 .grid_9 {width: 73.3%;}
.container_12 .grid_10 {width: 81.6%;}
.container_12 .grid_11 {width: 90%;}
.container_12 .grid_12 {width: 98.3%;}
.baner img {max-width: 100%;}
#container .main_foto {max-width: 48%;}
}

/***************** smartphone 481-769 ********************/
@media only screen and (min-width: 481px) and (max-width: 769px) {
p {padding: 0 20px 15px 20px;}
ul, ol {padding: 0 20px 15px 50px;}
h2, h3, h4, h5, h6 {font-size: 1.8em; padding: 0 10px 5px 25px; margin: 0 0 10px 20px;}
.container_12 {width: 100%; margin: 0 auto;}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {float: none; position: relative; width: 98%; margin: 0 0 0 2%;}
#top .phone {display: none;}
h1 {padding: 10px 10px 2px 10px;}
.baner img {max-width: 50%; margin: 0 20px 5px 20px;}
.baner p {text-align: center;}
#container .main_foto {max-width: 48%;}
#bottom {height: 70px;}
#bottom .grid_4 {width: 23.3%;}
#bottom .grid_8 {width: 73.3%;}
#bottom .grid_4, #bottom .grid_8 {display: inline; float: left; position: relative; margin: 0 0.8% 0 0.8%;}
#bottom img {margin: 10px 0 10px 0;}
.privnav li a {padding: 20px 15px 10px 15px;}
}


/***************** phone 0-480 ********************/
@media only screen and (max-width: 480px) {
p {padding: 0 20px 15px 20px;}
ul, ol {padding: 0 20px 15px 50px;}
h2, h3, h4, h5, h6 {font-size: 1.6em; padding: 0 10px 5px 25px; margin: 0 0 10px 20px;}
.container_12 {width: 100%; margin: 0 auto;}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {float: none; position: relative; width: 98%; margin: 0 0 0 2%;}
#top .phone {display: none;}
.mainnav ul {padding: 3px 0 7px 20px;}
.mainnav ul li {margin: 5px 5px 0 5px;}
.mainnav ul li a {font-size: 0.8em; padding: 10px 7px;}
#topbaner {margin-bottom: 10px;}
h1 {padding: 1px 10px 1px 10px;}
.logo img {width: 190px;}
.baner {display: none;}
.baner p {text-align: center;}
#container .main_foto, #container img {max-width: 98%;}
#bottom {height: 130px;}
.privnav li a {padding: 2px 15px 2px 15px;}
}