/* Основное */

html, body {padding: 0; margin: 0} 
body {font-family: 'Exo 2', sans-serf; font-size: 14px;}

a {color: #cb7f00; text-decoration: none}

.wrapper {width: 1003px; margin: 0 auto}

h1 { color: #fe9f00; font-size: 28px; text-transform: uppercase; font-weight: bold}
h2 {}
h3 {}

/* Верх */

.top { background: url("/images/background_main.jpg") no-repeat center bottom; background-size: cover; height: 667px; position: relative}
.inside .top { background: url("/images/background_main.jpg") no-repeat center center; background-size: cover; height:auto; position: relative}
.top .logos {background: url("/images/background_main_blur.jpg") no-repeat center bottom -35px; background-size: cover; padding: 20px 0 20px 0; position: absolute; bottom: 35px; left: 0; right: 0; text-align: center }
.top .logos img {vertical-align: middle;}
.top .logos .wrapper {text-align: justify; text-align-last: justify}
.top .logos img:last-of-type {padding-right: 0;}
.top .line {background: rgba(255,255,255,0.25); height: 5px;}
.top .menu {padding: 20px 0 20px 0; text-align: center}
.top .menu ul {list-style: none; padding: 0; margin: 0; white-space: nowrap}
.top .menu ul li {display: inline-block; margin-right: 97px }
.top .menu ul li:last-of-type { margin-right: 0px }
.top .menu ul li a {color: #FFF; font-size: 16px; text-decoration: none; font-weight: bold; text-transform: uppercase; text-shadow: 0px 0px 2px rgba(0,0,0,1); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.top .menu ul li a:hover {color: #baff00;  text-shadow: 0px 0px 20px rgba(0,0,0,1)}
.top .menu ul li.active a {color: #000000; background: rgba(255,255,255,0.50); padding: 10px 20px 10px 20px; text-shadow: none; margin-left: -20px; margin-right: -20px; border-radius: 50px}
.top .mobMenu {display: none}
.top .logo {margin-top: 20px}

.logo-big {background: url(/images/logo.png) left top no-repeat; width: 600px ; height: 400px; background-size:contain; position: absolute; top: 40px; filter:opacity(40%) grayscale(80%) sepia(100%) blur(2px);  margin-left: -40px }

.inside .logo-big {display: none}

/* Подкатегории */

.cat-children {}
.cat-children div {display: inline-block; width: calc(30% - 20px); vertical-align: top; text-align: left; text-align-last: left; background: rgba(0,0,0,0.02); border-radius: 5px; padding: 10px; margin-bottom: 20px; margin-right: 45px}
.cat-children div:nth-of-type(3n) {margin-right: 0;}

.cat-children div h3 {margin-bottom: 0px; margin-top: 0}
.cat-children div div {display: block; width: auto; vertical-align: top; background: none; padding: 0px;  margin-bottom: 0px;}
.cat-children h3 {display: block; width: auto; vertical-align: top;font-weight: normal; }
.cat-children h3.item-title {font-size: 20px; text-transform: uppercase; }
.cat-children .fade a {color: #5B5B5B; text-transform:none; padding: 0; margin: 0;  font-size: 18px}
.cat-children .fade h3 {padding: 0; margin: 0}

/* Хлебные крошки */

.hleb {padding: 10px 0 10px 0; background: #fe9f00; color:#FFFFFF }
.hleb ul {list-style-type: none; padding: 0; margin: 0}
.hleb ul li {display: inline-block}
.hleb ul li a {color: #FFFFFF}

/* Тени */

.shadowR {background: url("/images/shadow_right.png") no-repeat; width:461px; height:57px;display: inline-block; margin-right: 20px; position: absolute; right:0}
.shadowL {background: url("/images/shdow_left.png") no-repeat;width:461px; height:57px;  display: inline-block; margin-left: 20px;position: absolute; left:0 }

/* Контакты */

.contacts {padding: 10px 0 10px 0; border-bottom: 5px solid #f7f7f7;  text-align: right; width: 100%;}
.contacts .phone {display: inline-block; color: #b2b2b2; font-size: 12px; background: url("/images/phone.png") no-repeat left center; padding: 10px 0px 10px 30px}
.contacts .mail {display: inline-block;color: #b2b2b2; font-size: 12px; background: url("/images/mail.png") no-repeat left center; padding: 10px 0px 10px 40px; margin-right: 100px}

/* Контент */

.content { min-height: 400px}
    
/* Категории */

ul.onMain { list-style: none; padding: 0; margin: 0; text-align: justify; text-align-last: justify}
ul.onMain li {display: inline-block; width:312px; height: 196px; border-radius: 10px; text-align: left; text-align-last: left; position: relative; overflow: hidden; margin-top: 85px; -moz-transition: all 2.5s ease-out; -o-transition: all 2.5s ease-out; -webkit-transition: all 2.5s ease-out; transition: all 2.5s ease-out;  }
ul.onMain li:hover {background-position: center center !important }
ul.onMain li:hover .icon {margin-left: -95px;  }
ul.onMain li .icon {display: inline-block; vertical-align: top; margin-left: 15px; margin-top: 20px; z-index: +1; position: relative; width: 80px; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
ul.onMain li .svet {position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.70); left: 0; top: 0;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
ul.onMain li:hover .svet {background: rgba(255,255,255,0.40);}
ul.onMain li:hover .zagolovok a {color:#000000;  }
ul.onMain li .zagolovok {display: inline-block; width: 200px; margin-left: 10px; margin-top: 20px; z-index: +1; position: relative; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
ul.onMain li:hover .zagolovok {margin-left: 30px}
ul.onMain li .zagolovok a {color: #cf6400; font-size: 22px; font-weight: bold; text-decoration: none; text-transform: uppercase; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
ul.onMain li .readmore {background: url("/images/strelka.png") no-repeat right 10px center #fe9f00; padding: 10px 0 10px 0;  z-index: +1; position:absolute; bottom: 0; left: 0; display: block; width: 100%;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;  }
ul.onMain li:hover .readmore {background:url("/images/strelka.png") no-repeat right 5px center #fe0000 }
ul.onMain li .readmore a {color:#FFFFFF; font-size:12px; text-decoration: none; margin-left: 110px }  

/* Подвал */

.footer {background: #efefef; padding: 40px 0 100px 0; margin-top: 100px; text-align: justify; text-align-last: justify}
.footer .column {display: inline-block; width: 30%; vertical-align: top; text-align: left; text-align-last: left}
.footer .column .zaglovok {color:#cf6400; font-size: 14px; font-weight: bold; text-transform: uppercase; margin-bottom: 30px}
.footer .column .menu ul { padding: 0; margin: 0; list-style: none}
.footer .column .menu ul li {display: inline-block; width: 125px; margin-bottom: 10px}
.footer .column .menu ul li a {color: #6a6a6a; font-size:14px; text-decoration: none }
.footer .column .menuPravo ul { padding: 0; margin: 0; list-style: none}
.footer .column .menuPravo ul li {display: block; margin-bottom: 10px}
.footer .column .menuPravo ul li a {color: #6a6a6a; font-size:12px; text-decoration: underline}
.copyright {padding: 40px 0 40px 0}
.copyright .copy { color:#fe9f00; font-size: 12px; display: inline-block}
.copyright .merbal {float: right; color: #fe9f00; font-size: 12px; display: inline-block}
.footer .logos {text-align: center; margin-top: 60px; filter: opacity(20%) grayscale(100%) ;}
.footer .column:nth-of-type(3) img { filter:opacity(60%); height: 100px}
.footer .column:nth-of-type(3) {text-align: right; text-align-last: right}

@media screen and (max-width: 1200px) {
    
    .top .logos {background: rgba(255,255,255,0.35); background-size: cover; padding: 20px 0 20px 0; position: absolute; bottom: 35px; left: 0; right: 0; text-align: center }

    
}

@media screen and (max-width: 1010px) {
    ul.onMain li {display: inline-block; width:45%; height: 196px; background-size: cover !important; border-radius: 10px; text-align: left; text-align-last: left; position: relative; overflow: hidden; margin-top: 15px; -moz-transition: all 2.5s ease-out; -o-transition: all 2.5s ease-out; -webkit-transition: all 2.5s ease-out; transition: all 2.5s ease-out;  }
    
    .wrapper {width: calc(100% - 20px); margin: 0 auto; padding: 10px 0 10px 0} 
    
    /* Верх */

    .top { background: url("/images/background_main.jpg") no-repeat center center; background-size: cover; height:auto; position: relative; text-align: right}
    .top .logos {background: rgba(255,255,255,0.4); background-size: cover; padding: 20px 0 20px 0; position:relative; bottom: 0; left: 0; right: 0; text-align: center; text-align: center }
    .top .logos img {vertical-align: middle; display:block; margin: auto; margin-bottom: 20px}
    .top .logos .wrapper {text-align: justify; text-align-last: justify}
    .top .logos img:last-of-type {padding-right: 0;}
    .top .line {background: rgba(255,255,255,0.25); height: 5px;}
    .top .menu .wrapper .menu {display: block; position: relative; background: none; box-shadow:none}
    .top .menu {padding: 20px 0 20px 0; text-align: left; display: none; background: rgba(255,255,255,0.95); position: absolute; width: calc(100% - 60px); z-index: +10; box-shadow: 0px 0px 10px rgba(0,0,0,0.7) }
    .top .menu ul {list-style: none; padding: 0; margin: 0; white-space:normal }
    .top .menu ul li {display: block; margin-right: 0; margin-bottom: 10px }
    .top .menu ul li:last-of-type { margin-right: 0px }
    .top .menu ul li a {color: #000; font-size: 16px; text-decoration: none; font-weight: bold; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0,0,0,1); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    .top .menu ul li a:hover {color: #baff00;  text-shadow: 0px 0px 20px rgba(0,0,0,1)}
    .top .menu ul li.active a {color: #FE0000; background: none; padding: 10px 20px 10px 20px; text-shadow: none; margin-left: -20px; margin-right: -20px; border-radius: 50px}
    .top .mobMenu {display: inline-block; background: url("/images/mobMenu.png") no-repeat center center rgba(255,255,255,0.80);  padding: 5px; border-radius: 5px; width: 27px; height: 25px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px}
    .top .logo {margin-top: 0px; position: absolute; left: 10px; top: 2px}
    .top .logo img { height: 40px}
    .logo-big {display: none}
    
    /* Хлебные крошки */

    .hleb {padding: 10px 0 10px 0; background: #fe9f00; color:#FFFFFF; text-align: center; font-size: 10px }
    .hleb ul {list-style-type: none; padding: 0; margin: 0}
    .hleb ul li {display: inline-block}
    .hleb ul li a {color: #FFFFFF}
    
    /* Тени */

    .shadowR {background: url("/images/shadow_right.png") no-repeat; width:461px; height:57px;display: none; margin-right: 20px; position: absolute; right:0}
    .shadowL {background: url("/images/shdow_left.png") no-repeat;width:461px; height:57px;  display: none; margin-left: 20px;position: absolute; left:0 }
    
    /* Подкатегории */

    .cat-children {}
    .cat-children div {display: block; width: calc(100% - 20px); vertical-align: top; text-align: left; text-align-last: left; background: rgba(0,0,0,0.02); border-radius: 5px; padding: 10px; margin-bottom: 20px; margin-right: 45px}
    .cat-children div:nth-of-type(3n) {margin-right: 0;}

    .cat-children div h3 {margin-bottom: 0px; margin-top: 0}
    .cat-children div div {display: block; width: auto; vertical-align: top; background: none; padding: 0px;  margin-bottom: 0px;}
    .cat-children h3 {display: block; width: auto; vertical-align: top;font-weight: normal; }
    .cat-children h3.item-title {font-size: 20px; text-transform: uppercase; }
    .cat-children .fade a {color: #5B5B5B; text-transform:none; padding: 0; margin: 0;  font-size: 18px}
    .cat-children .fade h3 {padding: 0; margin: 0}

    /* Контакты */

    .contacts {padding: 10px 0 10px 0; border-bottom: 5px solid #f7f7f7;  text-align: right; width: 100%; text-align: center}
    .contacts .phone {display: inline-block; color: #b2b2b2; font-size: 12px; background: url("/images/phone.png") no-repeat left center; padding: 10px 0px 10px 30px}
    .contacts .mail {display: inline-block;color: #b2b2b2; font-size: 12px; background: url("/images/mail.png") no-repeat left center; padding: 10px 0px 10px 40px; margin-right: 10px}

    /* Категории */

    ul.onMain { list-style: none; padding: 0; margin: 0; text-align: justify; text-align-last: justify}
    ul.onMain li:hover {background-position: center center !important }
    ul.onMain li:hover .icon {margin-left: -95px;  }
    ul.onMain li .icon {display: inline-block; vertical-align: top; margin-left: 15px; margin-top: 20px; z-index: +1; position: relative; width: 80px; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li .svet {position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.70); left: 0; top: 0;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li:hover .svet {background: rgba(255,255,255,0.40);}
    ul.onMain li:hover .zagolovok a {color:#000000;  }
    ul.onMain li .zagolovok {display: inline-block; width: 200px; margin-left: 10px; margin-top: 20px; z-index: +1; position: relative; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li:hover .zagolovok {margin-left: 30px}
    ul.onMain li .zagolovok a {color: #cf6400; font-size: 22px; font-weight: bold; text-decoration: none; text-transform: uppercase; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li .readmore {background: url("/images/strelka.png") no-repeat right 10px center #fe9f00; padding: 10px 0 10px 0;  z-index: +1; position:absolute; bottom: 0; left: 0; display: block; width: 100%;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;  }
    ul.onMain li:hover .readmore {background:url("/images/strelka.png") no-repeat right 5px center #fe0000 }
    ul.onMain li .readmore a {color:#FFFFFF; font-size:12px; text-decoration: none; margin-left: 110px }  

    /* Подвал */

    .footer {background: #efefef; padding: 40px 0 150px 0; margin-top: 100px; text-align: center; text-align-last: center}
    .footer .column {display: block; width: 100%; vertical-align: top; text-align: center; text-align-last: center; margin-top: 30px}
    .footer .column .zaglovok {color:#cf6400; font-size: 14px; font-weight: bold; text-transform: uppercase; margin-bottom: 30px}
    .footer .column .menu ul { padding: 0; margin: 0; list-style: none}
    .footer .column .menu ul li {display: inline-block; width: 125px; margin-bottom: 10px}
    .footer .column .menu ul li a {color: #6a6a6a; font-size:14px; text-decoration: none }
    .footer .column .menuPravo ul { padding: 0; margin: 0; list-style: none}
    .footer .column .menuPravo ul li {display: block; margin-bottom: 10px}
    .footer .column .menuPravo ul li a {color: #6a6a6a; font-size:12px; text-decoration: underline}
    .footer .logos img { display: block; margin: auto; margin-bottom: 20px;  }
    
    .copyright {padding: 40px 0 40px 0; text-align: center}
    .copyright .copy { color:#fe9f00; font-size: 12px; display: block}
    .copyright .merbal {float: none; color: #fe9f00; font-size: 12px; display: block; margin-top: 20px}
    
}


@media screen and (max-width: 800px) {
    
    .wrapper {width: calc(100% - 20px); margin: 0 auto; padding: 10px 0 10px 0} 
    
    /* Верх */

    .top { background: url("/images/background_main.jpg") no-repeat center center; background-size: cover; height:auto; position: relative; text-align: right}
    .top .logos {background: rgba(255,255,255,0.4); background-size: cover; padding: 20px 0 20px 0; position:relative; bottom: 0; left: 0; right: 0; text-align: center; text-align: center }
    .top .logos img {vertical-align: middle; display:block; margin: auto; margin-bottom: 20px}
    .top .logos .wrapper {text-align: justify; text-align-last: justify}
    .top .logos img:last-of-type {padding-right: 0;}
    .top .line {background: rgba(255,255,255,0.25); height: 5px;}
    .top .menu .wrapper .menu {display: block; position: relative; background: none; box-shadow:none}
    .top .menu {padding: 20px 0 20px 0; text-align: left; display: none; background: rgba(255,255,255,0.95); position: absolute; width: calc(100% - 60px); z-index: +10; box-shadow: 0px 0px 10px rgba(0,0,0,0.7) }
    .top .menu ul {list-style: none; padding: 0; margin: 0; white-space:normal }
    .top .menu ul li {display: block; margin-right: 0; margin-bottom: 10px }
    .top .menu ul li:last-of-type { margin-right: 0px }
    .top .menu ul li a {color: #000; font-size: 16px; text-decoration: none; font-weight: bold; text-transform: uppercase; text-shadow: 0px 0px 0px rgba(0,0,0,1); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    .top .menu ul li a:hover {color: #baff00;  text-shadow: 0px 0px 0px rgba(0,0,0,1)}
    .top .menu ul li.active a {color: #fe0000; background: none; padding: 10px 20px 10px 20px; text-shadow: none; margin-left: -20px; margin-right: -20px; border-radius: 50px}
    .top .mobMenu {display: inline-block; background: url("/images/mobMenu.png") no-repeat center center rgba(255,255,255,0.80);  padding: 5px; border-radius: 5px; width: 27px; height: 25px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px}
    
    /* Тени */

    .shadowR {background: url("/images/shadow_right.png") no-repeat; width:461px; height:57px;display: none; margin-right: 20px; position: absolute; right:0}
    .shadowL {background: url("/images/shdow_left.png") no-repeat;width:461px; height:57px;  display: none; margin-left: 20px;position: absolute; left:0 }

    /* Контакты */

    .contacts {padding: 10px 0 10px 0; border-bottom: 5px solid #f7f7f7;  text-align: right; width: 100%; text-align: center}
    .contacts .phone {display: inline-block; color: #b2b2b2; font-size: 12px; background: url("/images/phone.png") no-repeat left center; padding: 10px 0px 10px 30px}
    .contacts .mail {display: inline-block;color: #b2b2b2; font-size: 12px; background: url("/images/mail.png") no-repeat left center; padding: 10px 0px 10px 40px; margin-right: 10px}

    /* Категории */

    ul.onMain { list-style: none; padding: 0; margin: 0; text-align: justify; text-align-last: justify}
    ul.onMain li {display: block; width:100%; height: 196px; background-size: cover !important; border-radius: 10px; text-align: left; text-align-last: left; position: relative; overflow: hidden; margin-top: 15px; -moz-transition: all 2.5s ease-out; -o-transition: all 2.5s ease-out; -webkit-transition: all 2.5s ease-out; transition: all 2.5s ease-out;  }
    ul.onMain li:hover {background-position: center center !important }
    ul.onMain li:hover .icon {margin-left: -95px;  }
    ul.onMain li .icon {display: inline-block; vertical-align: top; margin-left: 15px; margin-top: 20px; z-index: +1; position: relative; width: 80px; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li .svet {position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.70); left: 0; top: 0;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li:hover .svet {background: rgba(255,255,255,0.40);}
    ul.onMain li:hover .zagolovok a {color:#000000;  }
    ul.onMain li .zagolovok {display: inline-block; width: 200px; margin-left: 10px; margin-top: 20px; z-index: +1; position: relative; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li:hover .zagolovok {margin-left: 30px}
    ul.onMain li .zagolovok a {color: #cf6400; font-size: 22px; font-weight: bold; text-decoration: none; text-transform: uppercase; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
    ul.onMain li .readmore {background: url("/images/strelka.png") no-repeat right 10px center #fe9f00; padding: 10px 0 10px 0;  z-index: +1; position:absolute; bottom: 0; left: 0; display: block; width: 100%;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;  }
    ul.onMain li:hover .readmore {background:url("/images/strelka.png") no-repeat right 5px center #fe0000 }
    ul.onMain li .readmore a {color:#FFFFFF; font-size:12px; text-decoration: none; margin-left: 110px }  

    /* Подвал */

    .footer {background: #efefef; padding: 40px 0 150px 0; margin-top: 100px; text-align: center; text-align-last: center}
    .footer .column {display: block; width: 100%; vertical-align: top; text-align: center; text-align-last: center; margin-top: 30px}
    .footer .column .zaglovok {color:#cf6400; font-size: 14px; font-weight: bold; text-transform: uppercase; margin-bottom: 30px}
    .footer .column .menu ul { padding: 0; margin: 0; list-style: none}
    .footer .column .menu ul li {display: inline-block; width: 125px; margin-bottom: 10px}
    .footer .column .menu ul li a {color: #6a6a6a; font-size:14px; text-decoration: none }
    .footer .column .menuPravo ul { padding: 0; margin: 0; list-style: none}
    .footer .column .menuPravo ul li {display: block; margin-bottom: 10px}
    .footer .column .menuPravo ul li a {color: #6a6a6a; font-size:12px; text-decoration: underline}

    .copyright {padding: 40px 0 40px 0; text-align: center}
    .copyright .copy { color:#fe9f00; font-size: 12px; display: block}
    .copyright .merbal {float: none; color: #fe9f00; font-size: 12px; display: block; margin-top: 20px}

    
}