* {margin: 0; padding: 0; font-family: 'Open Sans', sans-serif;}
h1,h2,h3,h4,h5,h6,p {margin: 0;}
ul {list-style-type: none;}
table {border-collapse: collapse; }
.clear {clear: both; width: 100%; height: 0; }
#menu { position:  fixed; height: 16%; width: 100%; background: #fefefe; top: 0; z-index:999999;}
#menu:hover {opacity:1;}
img {border: none;}

.section {background: url(../image/back.png) repeat;}
.fp-scrollable {height: 100%;}
.top-part-left {width: 12.5%; float: left; height: 100%; background: url(../image/top-left.png) repeat-x 0 100%; }
.top-part-right {width: 12.5%; float: left;height: 100%; background: url(../image/top-right.png) repeat-x 0 100%; }
.top-part {width: 75%; float: left; font-size: 1em; vertical-align:bottom; height: 100%; position: relative;}
.logo {display: block; width: 20%;height: 100%;position: absolute; bottom: 0; left: 0; background: url(../image/top-left.png) repeat-x 0 100%;}
.logo a {display: block; bottom: 0; position: absolute;}
.logo a img {width: 100%; margin: 0 0 16px;}
.mainmenu {display:block;position: absolute; bottom: 0; left: 20%; width: 55%;padding: 0 0 16px;background:url(../image/top-mid.png) no-repeat 100% 100%, url(../image/top-left.png) repeat-x 0 100%, rgba(255,255,255,0.5);}
.mainmenu ul {overflow: hidden; }
.mainmenu ul li {float: left;}
.mainmenu ul li a {display: block; padding: 5px 10px; text-align: center; color: #333; font: normal 1em 'Open Sans';
text-decoration:  none;border-bottom: 2px solid #fff}
.mainmenu ul li a:hover {color: #389c34; border-bottom: 2px solid #389c34}
.info {display: block; position: absolute; bottom: 0; left: 75%; width: 25%; vertical-align: bottom;padding: 0 0 16px;background:  url(../image/top-right.png) repeat-x 0 100%; }
.phone {display: block;}
.phone span {font-size: 2em;}
.mail {display: inline-block; }
.mail a {color: #389c34}
.city {display: block; float: right; border-bottom: 1px dotted #555; position: relative;}
.city:hover .choose {display: block;}
.choose {display: none; position: absolute; top: 25px; width: 100px; left:0; background: #ddd; padding: 10px; z-index: 101; border: 3px solid #ccc; border-radius: 6px; }
.choose:after {content:'';position: absolute; border: 12px solid transparent; border-bottom: 12px solid #ccc; top:-24px; left: 50px; }

.main {position: relative; }
.slick-dots {position: absolute; bottom: 4%; left: 50%; margin-left: -62px; overflow: hidden;}
.slick-dots li {float: left; list-style-type: none; margin: 0 20px 0 0;  padding: 1px;}
.slick-dots li button {width: 16px; height: 16px; background: gray; border-radius: 8px; font-size: 0; padding:0; margin:0; border:none; outline: none; box-shadow: 0 0 1px 1px #fff;}
.slick-dots .slick-active button {background: green; }

.slides {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 80%; background-color:#E2E2E2;}
.slide1 {background-image:url(../image/main.png); background-size: auto auto;}
.slide2 {background-image:url(../image/slide1.png);}
.slide3 {background-image:url(../image/slide2.png);}
.slide4 {background-image:url(../image/slide3.png);}
.slide5 {background-image:url(../image/slide4.png);}

.arrowleft,
.arrowright {position: absolute; top: 50%; margin-bottom: -25px; width: 30px; opacity: 0.25; cursor: pointer; }
.arrowleft img,
.arrowright img {width: 30px;}
.arrowleft {left: 10%;}
.arrowright {right: 10%;}

.arrow-port { border-radius: 34px; height: 68px; width: 68px; text-align: center; line-height: 68px; 	background: #808080;opacity: 0.5;}
.arrow-port img {vertical-align: middle;}

.services-wrap {width: 75%; margin: 0 auto; height: 80%;}
.services-wrap h2 {padding: 0 0 0 8%; height: 20%; background:url(../image/service.png) no-repeat 0 50%; font-size: 2em; color:#6f6f6f;}
.services {padding: 0 0 0 8%; height: 30%; float: left; width: 42%;}
.services2 p {font-size:1em;}
.services p {width: 90%; font-size:1em;}
.services-green {color:#389c34;}
.services-green a {color:#389c34;}
.services-buttons {overflow: hidden; height: 40%; }
.services-buttons a {float: left; width: 40%; margin: 0 5%; color: #389c34; height: 80%; box-sizing: border-box;
border-bottom: 2px solid #fff; box-shadow: 0 10px 15px rgba(0,0,0,0.2); background: ;}
.services-button-wrap {display: inline-block;vertical-align: middle; padding: 0 0 0 20%;font-size: 1.4em;}
.green-border {display: inline-block; width:3%; height: 100%; background: fff; vertical-align: middle;}
.services-buttons a:hover .green-border {background: #389c34;}
.services-buttons a:first-child {background: url(../image/service1.png) no-repeat 6% 50%, url(../image/service-arrow.png) no-repeat 90% 50%, linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%);}
.services-buttons a:last-child {background: url(../image/service2.png) no-repeat 5% 50%, url(../image/service-arrow.png) no-repeat 90% 50%, linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%);}

.services2-wrapper {overflow: hidden; height: 50%; }
.services-wrap h2 {float: left; width: 42%;}
.services-wrap h2.services2-h2 {text-align: right; background:url(../image/service3.png) no-repeat 100% 50%; padding: 0 8% 0 0; background-size: 36px;}
.services2 {float: left; width: 42%; padding: 0 8% 0 0; height: 30%; text-align: right;}


.portfolio {width: 100%; height: 70%; padding: 10% 0 0 0; }
.portfolio ul {position: relative; height: 80%;background: #bbb; }
.portfolio ul li {}
.portfolio ul li:hover {box-shadow: 0 0 5px #fff;}
.portfolio ul li a {display: block; width: 100%; height: 100%;text-decoration: none;}
.portfolio ul li a img {display: block; width: 100%; height: 70%;} 
.portfolio ul li a .port-logo {display: block; width: 100%; height: 70%;background-color: #9e9e9e;background-position: 50% 50%; background-repeat: no-repeat;}
.portfolio ul li:hover a .port-logo {background-color: #ddd;}
.portfolio ul li a span {display: block; position: absolute; bottom:0; width: 100%; height: 30%; background:#f5f5f5; font-family: 'Open Sans', sans-serif; box-sizing: border-box; border-left: 0.5em solid green; font-size: 0.7em; text-decoration: none; padding: 0.5em 0.3em 0.3em 1em;  color: #6f6f6f;}
.p1 {width: 12%; height: 30%; margin: 0 1% 1% 0; position: absolute; top:0; left: 0;  }
.p2 {width: 22%; height: 30%; margin: 0 1% 1% 0; position: absolute; top:0; left: 13%;}
.p3 {width: 12%; height: 30%; margin: 0 1% 1% 0; position: absolute; top:0; left: 36%;}
.p4 {width: 12%; height: 30%; margin: 0 1% 1% 0; position: absolute; top:0; left: 49%;}
.p5 {width: 12%; height: 30%; margin: 0 1% 1% 0; position: absolute; top:0; left: 62%;}
.p6 {width: 12%; height: 30%; margin: 0 1% 1% 0; position: absolute; top:0; left: 75%;}
.p7 {width: 12%; height: 30%; margin: 0 0 1% 0; position: absolute; top:0; left: 88%;}
.p8 {width: 12%; height: 67%; margin: 0 0 1% 0; position: absolute; top:33%; left: 0%;}
.p9 {width: 22%; height: 30%; margin: 0 0 1% 0; position: absolute; top:33%; left: 13%;}
.p10 {width: 12%; height: 30%; margin: 0 0 1% 0; position: absolute; top:33%; left: 36%;}
.p11 {width: 12%; height: 30%; margin: 0 0 1% 0; position: absolute; top:33%; left: 49%;}
.p12 {width: 12%; height: 30%; margin: 0 0 1% 0; position: absolute; top:33%; left: 62%;}
.p13 {width: 12%; height: 30%; margin: 0 0 1% 0; position: absolute; top:33%; left: 75%;}
.p14 {width: 12%; height: 67%; margin: 0 0 1% 0; position: absolute; top:33%; left: 88%;}
.p15 {width: 22%; height: 34%; margin: 0 0 1% 0; position: absolute; top:66%; left: 13%;}
.p16 {width: 25%; height: 34%; margin: 0 0 1% 0; position: absolute; top:66%; left: 36%;}
.p17 {width: 25%; height: 34%; margin: 0 0 1% 0; position: absolute; top:66%; left: 62%;}

.portf1 {background-image: url(../portfolio/1/main.jpg); }
.portf2 {}
.portf3 {background-image: url(../portfolio/2/main.jpg);}
.portf4 {background-image: url(../portfolio/3/main.jpg);}
.portf5 {background-image: url(../portfolio/4/main.jpg);}
.portf6 {background-image: url(../portfolio/5/main.jpg);}
.portf7 {background-image: url(../portfolio/6/main.jpg);}
.portf8 {background-image: url(../portfolio/7/main.jpg);}
.portf9 {background-image: url(../portfolio/8/main.jpg);}
.portf10 {background-image: url(../portfolio/9/main.jpg);}
.portf11 {background-image: url(../portfolio/10/main.jpg);}
.portf12 {background-image: url(../portfolio/11/main.jpg);}
.portf13 {background-image: url(../portfolio/12/main.jpg);}
.portf14 {background-image: url(../portfolio/13/main.jpg);}
.portf15 {background-image: url(../portfolio/14/main.jpg);}
.portf16 {background-image: url(../portfolio/15/main.jpg);}
.portf17 {background-image: url(../portfolio/16/main.jpg);}

.portf1o {background-image: url(../portfolio/izhstroysnab/main.jpg); }
.portf2o {}
.portf3o {background-image: url(../portfolio/g-set/main.jpg);}
.portf4o {background-image: url(../portfolio/centeroboi/main.jpg);}
.portf5o {background-image: url(../portfolio/sever018/main.jpg);}
.portf6o {background-image: url(../portfolio/mirshin/main.jpg);}
.portf7o {background-image: url(../portfolio/kimt/main.jpg);}
.portf8o {background-image: url(../portfolio/express/main.jpg);}
.portf9o {background-image: url(../portfolio/ntvpkedr/main.jpg);}
.portf10o {background-image: url(../portfolio/restodent/main.jpg);}
.portf11o {background-image: url(../portfolio/barhat/main.jpg);}
.portf12o {background-image: url(../portfolio/nutribio/main.jpg);}
.portf13o {background-image: url(../portfolio/deckam/main.jpg);}
.portf14o {background-image: url(../portfolio/astory/main.jpg);}
.portf15o {background-image: url(../portfolio/rezino/main.jpg);}
.portf16o {background-image: url(../portfolio/dubrava/main.jpg);}
.portf17o {background-image: url(../portfolio/storotor/main.jpg);}

.port-index {width: 50%; float: left; margin: 0 3em 0 0;}

.port-all {height: 100%;}
.port1 {display: block; color: #fff; font-size: 2em; text-align: center; height: 30%;  box-sizing: border-box;
  padding: 7% 0 0 0;}
.port2 {display: block; color: #fff; font-size: 1.5em; text-align: center; height: 25%;}
.port-hr {display: block; width: 80%; margin: 0 auto 5%; background: #fff; height: 1px; }
.portfolio ul li.p2 {background: url(../image/port.png) no-repeat 5% 2%, #aaa; -webkit-filter: brightness(100%);box-shadow: 0 0 3px rgba(255,255,255,0.5);}
.portfolio ul li.p2 a {display: block; width: 70%; margin: 0 auto; background:#399c34; color: #fff; border: 2px solid #fff;text-align: center; height: 22%; font-size: 1.1em;}

.start-wrapper {width: 75%; margin: 0 auto; height: 75%;}
.start-wrapper h2 {color: #6f6f6f; height: 10%; background: url(../image/start.png) no-repeat 0 50%; padding: 0 0 0 6%; font-size: 2em;}
.start {height: 90%; position: relative;background: url(../image/start1.png) no-repeat 0 0%, url(../image/start2.png) no-repeat 0 33%, url(../image/start3.png) no-repeat 0 66%, url(../image/start4.png) no-repeat 0 90%; margin: 0 0 0 7%;}
.start-block {height: 20%; position: absolute;border-left: 5px solid #389c34; border-bottom: 2px solid #fff; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); left: 8%; width: 80%; padding: 0 0 0 5%; background: linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%); font-size: 0.9em;}
.start-block h3 {color: #444; margin: 0.4em 0 0.3em; }
.start1 {top: 0; }
.start2 {top: 25%;}
.start3 {top: 50%;}
.start4 {top: 75%;}
.start-link {display: inline-block; position: absolute; font-size: 1.2em; left: 104%; text-decoration: none; color: #389c34; border-bottom: 1px dotted #389c34;}


.main-about-wrap {width: 75%; margin: 0 auto; height: 75%;}
.main-about-wrap h2 {color: #6f6f6f; height: 10%; background: url(../image/main-about.png) no-repeat 0 50%; padding: 0 0 0 6%; font-size: 2em;}
.main-about {padding: 0 0 0 6%; }
.main-about-ul li{margin: 0 0; font-size: 1.1em;}
.main-about-photo {}
.main-about-photo ul {overflow: hidden; margin: 1% 0 0 0; height: 95%;}
.main-about-photo ul li {float: left; width: 14.1%; margin: 0 2.5% 15px 0;}
.main-about-photo ul li:last-child {margin: 0 0 1%;}
.main-about-photo ul li img {max-width: 100%; display: block; margin: 0 auto;}
.main-about-photo ul li span {display: block; text-align: center; font: normal 1em 'Open Sans'; color: #389c34; }
.main-about-photo ul li span.main-about-description {font-size: 0.7em; color:#6f6f6f;} 

.main-contacts-wrap {width: 75%; margin: 0 auto; height: 75%; }
.main-contacts-wrap h2 {color: #6f6f6f; height: 10%; padding: 0 0 0.5em 6%; font-size: 2em;}
.main-contacts {width: 100%; height: 100%; overflow: hidden;}
.contacts-left {float: left; width: 65%; height: 100%; }
.contacts-right {float: left; width: 35%; box-sizing: border-box; padding: 0 0 0 5%; color: #3f4242; }
.contacts-izh {height: 50%; overflow: hidden; }
.contacts-city-left {float: left; width: 30%;  height: 70%; box-sizing: border-box; padding: 0 10px 0 0; border-right: 1px solid #C2C2C2;}
.city-name {display: block; text-align: right; font-size: 1em;color: #3f4242; }
.city-resp {display: block; text-align: right; font-size: 0.7em; }
.city-goto {display: block; text-align: right; }
.city-goto a {color: #444; font-size: 1em; }
.contacts-city-right {float: left; width: 70%; box-sizing: border-box; padding: 0 0 0 10%; }
.contacts-izh .contacts-city-right {background: url(../image/izh-flag.png) no-repeat 5% 0; }
.contacts-kaz .contacts-city-right {background: url(../image/kaz-flag.png) no-repeat 5% 0; }

.contacts-phone {padding: 0 0 0 60px; margin: 0 0 4%; color:#6f6f6f; background: url(../image/contact-phone.png) no-repeat 20px 50%;}
.contacts-address {padding: 0 0 0 60px; margin: 0 0 4%; color:#6f6f6f;background: url(../image/contact-address.png) no-repeat 20px 50%;}
.contacts-mail{padding: 0 0 0 60px; margin: 0 0 4%; color:#6f6f6f;background: url(../image/contact-mail.png) no-repeat 20px 50%;}
.time-line {overflow: hidden; }
.contacts-time {float: right; text-align: center;width: 50%;color: #3f4242;font-weight: bold;}
.work-time {float: left; color: #666; font-size: 0.9em; width: 50%; color:#6f6f6f;}
.now-text {float: right; width: 50%; text-align: center; font-size: 0.9em; color: #3f4242; text-align: center; font-weight: bold;}

.contacts-right-text {display: block; }
.contacts-right-phone {display: block;  color: #3f4242; margin: 0.5em 0 0.7em;}
.contacts-right-phone input {border: 1px solid #999; width: 90%; height: 2em;box-sizing: border-box; padding: 0.1em 0.5em}
.contacts-right-city {display: block; margin: 0 0 10px; color: #3f4242;}
.contacts-right-city input {border: 1px solid #999; width: 90%; height: 2em; box-sizing: border-box; padding: 0.1em 0.5em;}
.contacts-right-text {display: block;  color: #3f4242;}
.contacts-right textarea {width: 90%; height: 130px; border: 1px solid #999; box-shadow: 1px 1px 1px rgba(0,0,0,0.9);resize: none; margin: 10px 0; box-sizing: border-box; padding: 0.1em 0.5em;}
.contacts-right input[type=submit] {display: block; width: 100px; text-align: center; padding: 10px 0; background:#eef; border:1px solid #ccccd8; margin: 0 0 10px;}
.contacts-news {display: inline-block; border-bottom: 1px dotted #777; color: #777; font-size: 0.9em;}
.contacts-social {display: block; margin: 15px 0;}
.contacts-social ul {overflow: hidden;}
.contacts-social ul li {float: left; margin: 0 20px 0 0; list-style-type: none;}

.footer-wrapper {width: 100%; background: #3f4242;position: fixed;bottom:0; height: 8%;}
.footer {  width: 75%; margin: 0 auto; overflow: hidden; font-size: 0.9em; }
.footer-left {width: 50%; float: left; color: #fff; font-weight: bold; }
.footer-left a {color: #898989; text-transform: uppercase; text-decoration: none; }
.footer-right {width: 50%; float: left; color :#fff; text-align: center; } 
.footer-right a {color :#fff; text-decoration: none; display: block; float: right; border-bottom: 1px dotted #fff; font-weight: bold;}

.page-wrapper {position: absolute; top: 17%; width: 100%;}
.page-create {width: 75%; margin: 0 auto; background: url(../image/create.png) no-repeat 90% 20%; padding: 0 0 10% 0;}
.page-create h2 {padding: 0.5em 0 0.5em 50px; background: url(../image/service1.png) no-repeat 0 50%; color: #898989; font-size: 2em;}
.page-seo {width: 75%; margin: 0 auto; background: url(../image/seo.png) no-repeat 100% 5%; padding: 0 0 10% 0;}
.page-seo h2 {padding: 0.5em 0 0.5em 80px; background: url(../image/service2.png) no-repeat 0 50%; color: #898989; font-size: 2em;}
.create {}
.create-text {width: 50%; margin: 0 0 0 12%;}
.create-text p {}
.create-green {color: #399c34;}

.create-buttons {margin: 2em 0 0;}
.create-button {display: inline-block;box-sizing: border-box; border-left: 5px solid #fff; vertical-align: top; }
.create-button:hover {border-left: 5px solid #389c34;}	
.create-button span {color: #6f6f6f; font-weight: bold; font-size: 1.1em; text-decoration: none; display: block; padding: 20px 20px 10px 50px;}
.create-button p {padding: 0 20px 20px 50px; color: #6f6f6f; text-decoration: none; font-size: 0.9em; min-height:190px; }
.page-seo .create-button p {min-height: 147px;}
.create-button a {text-decoration: none; background: url(../image/service1.png) no-repeat 6% 50%, url(../image/service-arrow.png) no-repeat 90% 50%, linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%);}
.create-buttons-1 { width: 40%; margin: 0 4% 0 0; background: url(../image/corporate.png) no-repeat 10px 10px, linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%); }
.create-buttons-2 {width: 30%; margin: 0 4% 0 0; background: url(../image/cart.png) no-repeat 10px 10px, linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%);}
.create-buttons-3 { width: 22%; margin: 0 0 0 0; background: url(../image/landing.png) no-repeat 10px 10px, linear-gradient(to bottom, rgba(234,246,255,1) 50%,rgba(234,246,255,1) 50%,rgba(204,204,204,1) 100%);}

.simple-page {width: 75%;  margin: 0 auto;  padding: 0 0 10% 0; overflow: hidden;}
.simple-page h2 {margin: 10px 0 20px; }
.simple-page p {margin: 10px 0; text-indent: 16px;}
.simple-page ul li,
.simple-page ol li {margin: 10px 0 10px 33px; list-style-type: disc;}

p.blockquote {margin: 10px 80px;text-indent: 0;}

.popup-yes {display: none;}

.main-contacts-wrap {}
.main-contacts-wrap h2 {color: #6f6f6f; background: url(../image/main-contacts.png) no-repeat 0 50%; padding: 0 0 0 6%; font-size: 2em; height: 9%; }
.main-contact {overflow: hidden; margin: 0 0 2em;}
.main-contact {text-align: justify;}
.main-contacts-text {float: left; width: 60%; box-sizing: border-box; padding: 0 4%; border-right: 1px solid #ddd; min-height: 300px; height: 300px;}
.main-contacts-text p {font-size:0.9em; }
.main-contacts-right {width: 40%; float: right;  padding: 1% 1% 1% 5%; box-sizing: border-box; }
.main-contacts-phone {display: block; width: 100%; padding:0.4em 0 1em 13%; background: url(../image/contact-phone.png) no-repeat 0 0;}
.main-contacts-address {display: block; width: 100%; padding:0.4em 0 1em 13%; background: url(../image/contact-address.png) no-repeat 0 0; }
.main-contacts-mail {display: block; width: 100%; padding:0.4em 0 1em 13%; background: url(../image/contact-mail.png) no-repeat 0 0;}
.main-contacts-time {display: block; width: 100%; padding:0.4em 0 1em 2%;}

.main-contacts-map {}

.simple-page-port img {margin: 30px 3em 0 0;}
.simple-page-port h2 {margin:30px 0 5px;}
.simple-page-port p.s-descr {color:#858585; margin: 5px 0 30px;}
.simple-page-port p {text-indent: 0;}
.simple-page-port a {display: block; font-size: 18px; color:#389c34}
.green-text {color: green;}