@charset "utf-8";
@font-face {
	    font-family: golos_text_regular; /* имя шрифта для CSS правил */
	    src: local("Golos Text Regular"), /* проверяем наличие шрифта в ОС пользователя */
        url(../fonts/golos/golos_text_regular.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }

@font-face {
	    font-family: golos_text_bold; /* имя шрифта для CSS правил */
	    src: local("Golos Text Bold"), /* проверяем наличие шрифта в ОС пользователя */
        url(../fonts/golos/golos_text_bold.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
  }


/***** КНОПКА ДЛЯ ПРОКРУТКИ ВВЕРХ *****/
#toTop {width:50px; height:50px; position:fixed; bottom:50px; right:20px; cursor:pointer; display:none; opacity:0.4;}
#toTop img {width:50px;}
#toTop:active { background:none;}


/***** БАЗОВЫЕ СТИЛИ *****/
:focus {outline:none;}
* {margin: 0px; padding: 0px; }
html, body {min-height: 100%; min-width: 100%; /* overflow-x: hidden; */}
body {font-family: golos_text_regular, Arial; font-size: 12px; color:#333; background-color:#fff;}
.wrapper {width:1000px; margin:0px auto; padding: 0px 20px; position: relative; overflow: hidden;}
hr.clear {display:block; clear:both; visibility:hidden; }
hr.after-header {width: 98px; display: block; margin: 20px 0px 20px 0px; border: none; border-bottom: 3px solid #ec5e18;}
a {text-decoration:none; color:#000; cursor: pointer;}
h1, h2, h3 {font-family:  golos_text_bold, Arial;}
.brands-frame h2, .services-frame h2, .portfolio-frame h2, .about-frame h2 {color: #808080; text-transform: uppercase; font-weight:lighter; margin: 0px 30px; letter-spacing: 5px; font-size: 18px; } 
.block-show {display: block; overflow: hidden;}
.block-hide {display: none; overflow: hidden;} 


/******* ШАПКА **************/
.header {width: 100%; min-width: 1040px; /* height: 499px;*/  background-image:url(/data/image/design/background_header.jpg); background-position: top center; background-repeat:no-repeat; z-index: 200; position: relative; overflow: hidden; height: 620px;}
.header__navi {width: 100%; height: 60px; font-size: 15px; text-transform: uppercase; font-weight: bold; overflow: hidden; z-index: 220; position: relative;}
.header__navi a {color: #fff;}
.header__navi a:hover {color: #ec5e18;}
.header__logo {display: block; width: 325px; float: left; margin-top: 15px;}
.header__logo img {max-width: 325px;}
.header__menu {display: block; width: 470px; float: left; overflow: hidden; margin: 21px 0px 0px 10px; }
.header__menu ul li {list-style: none; display: inline-block; padding: 0px 15px 0px 0px;}
.header__menu ul li:first-child {padding-left: 10px;}
.header__phone {display: block; float: left; margin: 20px 0px 0px 10px; }
.header__phone span {display: block; float: left;}
.header__phone span:first-child{margin-right: 5px;}

.header h1 {color: #fff; font-size: 40px; font-weight: normal; margin: 50px 500px 20px 30px;}
.header p {margin: 30px 500px 20px 30px; color: #fff; font-size: 16px;}

.header .link-button {margin: 40px 0px 0px 30px;}
.header .link-button span {color: #fff;}
.header .link-button img { border-color: #fff;}

/******* ДЕКОРАТИВНЫЙ КРУГ *******/
.header .wrapper {overflow: visible;}
.circle-1 {width: 640px; height: 640px; border-radius: 320px; background-color: #477555; position: absolute; left: calc(900px - 320px); top: calc(270px - 320px); z-index: 250px;} 
.circle-2 {width: 500px; height: 500px; border-radius: 250px; background-color: #73af5e; position: absolute; top: 100px; left: 40px; z-index: 260px;}
.circle-3 {width: 560px; height: 560px; border-radius: 280px; background-color: none; position: absolute; top: 100px; left: 60px; z-index: 270px; border: 1px dashed #fff;} 
.circle-for-image  {width: 500px; height: 500px; border-radius: 250px; background-color: #73af5e; position: absolute; top: 100px; left: 100px; z-index: 270px; overflow: hidden;}


/******* ДОПОЛНИТЕЛЬНАЯ ШАПКА **************/
.extra-header {width: 100%; min-width: 1040px; background-color: #508e50; /* box-shadow: 0px 10px 20px 0px rgba(150,150,150,0.5);*/  z-index:1000; position: static; position:sticky; top:0px; overflow: hidden; border-bottom: 4px solid #3d5946; }

/********* ФРЭЙМ ТЕКСТОВЫЙ **************/
.main-body {width: 100%; min-width: 1040px; min-height: 300px; margin-top: -100px; padding: 50px 0px; font-size: 16px;}
.main-body .wrapper {width: 940px; padding: 0px 30px;} 
.main-body h1 {font-size: 30px;}
.main-body h3 {margin: 30px 0px 10px 0px; font-size: 20px;}
.main-body p {margin: 10px 0px}

/********* ФРЭЙМ С БАНЕРАМИ **************/
.adverts-frame {width: 100%; min-width: 1040px; min-height: 300px; margin-top: -100px; padding: 50px 0px;}
.adverts-frame a {color: inherit;}
.advert {display: block; float: left; width: 240px; min-height: 300px; border-bottom: 5px solid #477555;  padding: 0px 30px; margin: 0px 50px 30px 0px; background-image:url(/data/image/design/background_advert.jpg); background-position:0px 400px; background-repeat:no-repeat; transition: background-position 0.2s; z-index: 150; }
.advert:hover {background-position: top center; transition: background-position 0.6s, color 0.5s 0.3s; color: #fff; border-bottom: 5px solid #ec5e18;}
.advert:last-of-type{margin-right: 0px;}
.advert__text { font-size: 27px; margin:30px 0px; font-weight: bold;}
.advert:hover .link-button span {color: #fff; transition: color 0.5s;}
.advert:hover .link-button img{background-color: #ec5e18; border-color:rgba(255,255,255,0.9); transition: all 0.5s; cursor: pointer;  }



/********* ФРЭЙМ С ПРОИЗВОДИТЕЛЯМИ **************/
.brands-frame {width: 100%; min-width: 1040px; min-height: 500px; padding: 50px 0px; }

.brands-frame__brand-list {list-style: none; }
.brands-frame__brand-list li {display: inline-block; width: 195px; height: 100px; line-height: 100px; text-align: center; margin: 5px 0px;}



/********* ФРЭЙМ С УСЛУНАМИ **************/
.services-frame {width: 100%; min-width: 1040px; min-height: 500px; padding: 40px 0px;}
.services-frame-list {display: block; float:left; width: 390px; margin-right: 20px;}
.services-frame-list ul {list-style: none; font-size: 30px; margin-left: 30px; line-height: 40px; }
.services-frame-list__item:hover {cursor:pointer; color: #ec5e18;}
.services-frame-list__item_active {color: #ec5e18;}

.services-frame-text {height: 500px; width: 590px; float: left; background-color: #3d5946; color: #fff; font-size: 16px; line-height: 24px; overflow: hidden;}
.services-frame-text h3 {margin-bottom: 20px;}
.services-frame-text ul {list-style: none;}
.services-frame-text ul ul {list-style:disc; margin:10px 0px 10px 40px;}
.services-frame-text__item {position:absolute; height: 460px; width: 370px; padding: 20px 30px 20px 190px; background-position: top left; background-repeat: repeat-y; opacity: 0; transition: opacity 0.5s;}
.services-frame-text__item_active {opacity: 1; transition: opacity 0.5s;}

.services-frame-text__item-background-1 {background-image: url(/data/image/design/background_services_1.jpg); }
.services-frame-text__item-background-2 {background-image: url(/data/image/design/background_services_2.jpg); }
.services-frame-text__item-background-3 {background-image: url(/data/image/design/background_services_3.jpg); }
.services-frame-text__item-background-4 {background-image: url(/data/image/design/background_services_4.jpg); }
.services-frame-text__item-background-5 {background-image: url(/data/image/design/background_services_5.jpg); }
.services-frame-text__item-background-6 {background-image: url(/data/image/design/background_services_6.jpg); }
.services-frame-text__item-background-7 {background-image: url(/data/image/design/background_services_7.jpg); }


/********* ФРЭЙМ ПОРТФОЛИО **************/
.portfolio-frame {width: 100%; min-width: 1040px; min-height: 500px; padding: 50px 0px; background-image:url(/data/image/design/background_portfolio.jpg); background-position: top center; background-repeat: repeat-y; }
.portfolio-frame__slogan {margin: 35px 0px 35px 30px; font-size: 30px; font-family: golos_text_bold; }
.portfolio-frame .link-button {margin-left: 25px;}


.portfolio-item {width: 330px; overflow: hidden; float: left;}
.portfolio-item__image {width: 100%; height: 200px;  text-align: center;}
.portfolio-item__text {width: 100%;}
.portfolio-item__text h3 {margin: 5px 35px; font-size: 14px;text-transform: uppercase; color: #808080; font-family: golos_text_regular; }
.portfolio-item__text p {margin: 5px 35px; font-size: 24px; font-weight: bold; }


/********* ФРЭЙМ О КОМПАНИИ **************/

.about-frame {width: 100%; min-width: 1040px; min-height: 500px; padding: 50px 0px; background-image:url(/data/image/design/background_about.jpg); background-position: top center; background-repeat: repeat-y; }

.about-frame__left-side {display: block; width: 500px; height: 450px; float: left; background-image:url(/data/image/design/hand.jpg); background-position: bottom right; background-repeat:no-repeat;}
.about-frame__right-side {display: block; width: 460px; float: left; height: 450px; background-color: #3d5946; color: #fff; padding: 0px 20px; }

.about-frame p {font-size: 30px; font-family: golos_text_bold; margin: 20px 10px 20px 30px;}
.about-frame .link-button {margin: 20px 10px 20px 30px;}

.about-frame__footer-1 {display:block; float: left; height: 145px; width: 145px; margin-top: 195px; background-color: #b1b1b1; }
.about-frame__footer-2 {display:block; float: left; height: 340px; width: 483px; background-color: #73af5e; color: #fff; padding: 0px 20px;}
.about-frame__footer-3 {display:block; float: left; height: 340px; width: 332px; background-image:url(/data/image/design/woman.jpg); background-position: top center; background-repeat:no-repeat;}

/********* ФРЭЙМ PROJECTIVE **************/
.projective-frame{width: 100%; min-width: 1040px; min-height: 320px; padding: 50px 0px; background-image:url(/data/image/design/background_projective.jpg); background-position: top center; background-repeat:no-repeat; background-color: #ededed;}
.projective-frame__logo {margin-left: 30px;}
.projective-frame__slogan {font-size: 30px; font-family:golos_text_bold; margin: 30px;}
.projective-frame p {margin: 20px 200px 20px 30px; font-size: 18px;}
.projective-frame .link-button {margin: 30px;}

/********* ПОДВАЛ **************/
footer {width: 100%; min-width: 1040px; height: 360px; color: #fff; background-color: #3d5946; background-image:url(/data/image/design/background_footer.jpg); background-position: top center; background-repeat: repeat-y;}
.footer__contacts {display: block; float: left; width: 30%; height: 240px; margin: 0% 2%; margin-top: 45px;}
.footer__contacts:first-child {margin-left: 0%;}
.footer__contacts h3 {font-size: 26px;}
.footer__contacts p {font-size: 16px; margin: 20px 0px;}
.footer__contacts a:hover {color: #e7371d;}
.footer__contacts_address {}
.footer__contacts_timetable {}
.footer__contacts_timetable span {color: #61b15c;}
.footer__contacts_phone {}
.footer__contacts_phone a {color:#fff;}


/*********** КРУГЛАЯ КНОПКА ССЫЛКИ *****************/
.link-button {font-size: 16px; display: inline-block; }
.link-button span {display: inline-block; float: left; height: 40px; line-height: 40px; margin-right: 20px; font-weight: bold; color: #73af5e; transition: color 0.2s;}
.link-button:hover span {color: #ec5e18; transition: color 0.5s;}
.link-button img {display: inline-block; border: 5px solid #73af5e; height: 30px; width: 30px; border-radius: 20px; background-color: #73af5e; transition: all 0.2s;}
.link-button:hover img{background-color: #ec5e18; border-color:rgba(255,255,255,0.9); transition: all 0.5s; cursor: pointer;  }