html { width:100%; height:100%; font-size: 100.01%; overflow-y: scroll; } body { font: 14px/1.41 Helvetica, Arial, sans-serif; width:100%; height:100%; } @import "mixins.less"; /* Secondary section */ .container { .clearfix; width: 1000px; margin: 0 auto; &.mb { margin-bottom: 70px; } } .wrapper { position: relative; min-height: 100%; height: auto !important; height: 100%; font-family: 'Roboto', sans-serif; } strong { font-weight: bold; } h2 { clear: both; text-transform: uppercase; font-size: 48px; font-weight: lighter; color: #3b3b3b; margin: 40px 0px; padding-bottom: 10px; border-bottom: 1px solid #ececec; } h3 { font-size: 18px; font-weight: bold; text-transform: uppercase; color: #029acc; text-align: center; margin: 10px; } h4 { font-size: 26px; text-transform: uppercase; text-align: center; margin-bottom: 30px; } a { color: #484848; &:hover { text-decoration: none; } } section { margin-top: -155px; padding-top: 155px; } ol { li { list-style-type: decimal; list-style-position: inside; font-weight: bold; color: #029acc; margin-bottom: 6px; span { font-weight: normal; color: #000; text-decoration: none; } } } ul { &.disc_u { margin-bottom: 10px; li { margin-bottom: 0px; margin-left: 20px; list-style-type: disc; } } &.faq { margin-bottom: 50px; > li { margin-bottom: 20px; } p { margin-bottom: 10px; } > span { text-decoration: underline;} } } form { input[type="text"], textarea { width: 74%; padding: 0px 3%; margin-bottom: 8px; height: 30px; border: none; font-family: 'Roboto', sans-serif; -webkit-box-shadow: inset 0px 1px 1px 0px rgba(179,179,179,1); -moz-box-shadow: inset 0px 1px 1px 0px rgba(179,179,179,1); box-shadow: inset 0px 1px 1px 0px rgba(179,179,179,1); } textarea { resize: none; padding-top: 2%; height: 60px; overflow-y: auto; } input[type="submit"], input[type="button"] { margin-top: 5px; margin-bottom: 20px; } &.phone_f { text-align: center; input[type="text"] { width: 35%; margin: 0px 15px; margin-bottom: 35px; } } &.sales_f { position: relative; top: 455px; p { font-family: 'Roboto', sans-serif; font-size: 26px; text-transform: none; } input[type="text"] { width: 27%; margin: 0 1.5em; margin-bottom: 1.5em; border: 2px solid #585858; } } } header { position: fixed; top: 0px; left: 0px; width: 100%; text-align: center; background: #fff; z-index: 500; .col { vertical-align: middle; font-size: 18px; font-weight: bold; text-transform: uppercase; a { display: inline-block; vertical-align: middle; img { margin-left: 15px; vertical-align: middle; } } p { font-size: 14px; margin-left: 20px; &.haddr { text-transform: none; font-weight: normal; font-size: 13px; color: #484848; cursor: pointer; border-bottom: 1px dashed #484848; } } span { font-size: 28px; line-height: 30px; font-weight: bold; color: #029acc; display: flex; margin-left: 20px; } &:hover .hmap {display: block;} } p.murm { text-transform: uppercase; font-weight: bold; color: #484848; } .hmap { display: none; text-transform: none; font-size: 14px; margin-left: 20px; position: absolute; border: 2px solid rgba(187, 190, 191, 0.65); &:hover {display: block;} } } .empty { height: 180px; } nav { text-align: center; margin-bottom: 30px; ul li { .inlineblock; padding-left: 8px; padding-right: 11px; line-height: 14px; border-right: 1px solid #3b3b3b; &:last-child { border-right: none; } a { text-transform: uppercase; text-decoration: none; font-size: 14px; color: #3b3b3b; &:hover { color: #029acc; } } } } .but { display: block; margin: 0 auto; width: 260px; height: 46px; line-height: 46px; text-align: center; text-transform: uppercase; text-decoration: none; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; color: #fff; cursor: pointer; border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; border: 0px solid #000000; &:hover { opacity: 0.9; } &.green { background: rgba(19,163,158,1); background: -moz-linear-gradient(top, rgba(19,163,158,1) 0%, rgba(5,99,91,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,163,158,1)), color-stop(100%, rgba(5,99,91,1))); background: -webkit-linear-gradient(top, rgba(19,163,158,1) 0%, rgba(5,99,91,1) 100%); background: -o-linear-gradient(top, rgba(19,163,158,1) 0%, rgba(5,99,91,1) 100%); background: -ms-linear-gradient(top, rgba(19,163,158,1) 0%, rgba(5,99,91,1) 100%); background: linear-gradient(to bottom, rgba(19,163,158,1) 0%, rgba(5,99,91,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13a39e', endColorstr='#05635b', GradientType=0 ); width: 240px; } &.red { background: rgba(189,31,68,1); background: -moz-linear-gradient(top, rgba(189,31,68,1) 0%, rgba(154,25,55,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(189,31,68,1)), color-stop(100%, rgba(154,25,55,1))); background: -webkit-linear-gradient(top, rgba(189,31,68,1) 0%, rgba(154,25,55,1) 100%); background: -o-linear-gradient(top, rgba(189,31,68,1) 0%, rgba(154,25,55,1) 100%); background: -ms-linear-gradient(top, rgba(189,31,68,1) 0%, rgba(154,25,55,1) 100%); background: linear-gradient(to bottom, rgba(189,31,68,1) 0%, rgba(154,25,55,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd1f44', endColorstr='#9a1937', GradientType=0 ); } &.price { width: 300px; margin-top: 40px; img { margin-top: -5px; margin-right: 10px; vertical-align: middle; } } } .col { .inlineblock; vertical-align: top; width: 33%; text-align: center; p { text-align: left; width: 80%; margin: 0 auto; } } .col_five { float: left; width: 80%/5.1; height: 320px; padding: 2%; margin-bottom: 40px; &:nth-child(2) { background: #fafffd; } &:nth-child(3) { background: #f5fffc; } &:nth-child(4) { background: #f0fffa; } &:nth-child(5) { background: #e8fff7; } &:nth-child(6) { background: #e3fff6; } } .toilet { float: left; width: 600px; height: 300px; background: url(../images/toilet.png) right top no-repeat; p { margin-left: 40px; font-size: 36px; font-weight: lighter; text-transform: uppercase; color: #3b3b3b; } } .water { position: relative; margin-top: -155px; width: 100%; height: 340px; background: url(../images/water.png) center no-repeat; } .form_b { float: right; position: relative; z-index: 100; margin-right: 60px; padding-top: 20px; width: 340px; text-align: center; background: rgba(226,241,255,1); background: -moz-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,241,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f1ff', endColorstr='#ffffff', GradientType=0 ); p { font-size: 26px; font-weight: lighter; text-transform: uppercase; line-height: 32px; span { font-size: 33px; font-weight: normal; color: #029acc; } } form { margin-top: 20px; } } .sheme { height: 711px; background: url(../images/sheme.jpg) left top no-repeat; .text_b { float: right; width: 260px; height: 400px; overflow-y: scroll; background: #fff; padding: 20px; p { margin-bottom: 10px; } } } .turtle { height: 603px; background: #056a62 url(../images/turtle.jpg) center no-repeat; color: #fefefe; h2 { color: #fefefe; } p { width: 50%; margin-bottom: 25px; } ul { width: 50%; margin-top: -25px; margin-left: 15px; margin-bottom: 25px; li { list-style-image: url(../images/li.png); } } } .grey { padding-bottom: 50px; background: #f4f8fc; img { float: left; vertical-align: middle; margin-right: 50px; } } .spoiler_link { font-size: 18px; color: #760c24; text-decoration: none; img { margin-right: 10px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } &.active { img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } } } .spoiler { display: none; font-size: 14px; margin-left: 30px; margin-top: 10px; } .contacts { background: #f9fbfd; .contacts_b { float: left; width: 560px; h2 { border: none; } p { margin-bottom: 20px; } } } footer { position: relative; height: 80px; line-height: 80px; width: 100%; text-align: center; background: #f9fbfd; a { text-decoration: none; font-size: 12px; span { border-bottom: 1px solid #484848; } } } .jcarousel-wrapper { position: relative; margin: 0 auto; margin-bottom: 30px; width: 100%; height: 270px; .jcarousel { position: relative; overflow: hidden; ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; li { float: left; img { height: 270px; &:last-child { display: none; } } a:hover img { &:first-child { display: none; } &:last-child { display: block; } } } } } .jcarousel-control-prev { display: block; position: absolute; top: 50%; margin-top: -125px/2; left: 50%; margin-left: -500px; width: 23px; height: 125px; background: url(../images/but_prev.png) no-repeat; text-indent: -9999px; z-index: 1000; } .jcarousel-control-next { display: block; position: absolute; top: 50%; margin-top: -125px/2; right: 50%; margin-right: -500px; width: 23px; height: 125px; background: url(../images/but_next.png) no-repeat; text-indent: -9999px; z-index: 1000; } } .popup { display: none; position: fixed; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1000; &.sales { display: block; } .overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: 0.7; } .popup_b { position: absolute; top: 50%; margin-top: -135px; left: 50%; margin-left: -400px; width: 720px; height: 190px; padding: 40px; background: #fff; text-align: center; -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.75); box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.75); background: rgba(226,241,255,1); background: -moz-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,241,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(226,241,255,1) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f1ff', endColorstr='#ffffff', GradientType=0 ); a.close { display: block; position: absolute; top: 15px; right: 15px; width: 41px; height: 41px; background: url(../images/but_close.png) no-repeat; &:hover { opacity: 0.9; } } p { font-size: 22px; font-weight: lighter; text-transform: uppercase; } &.sales_b { width: 718px; height: 568px; margin-top: -324px; background: #fff url(../images/sales_pic.jpg) center top no-repeat; > p { position: relative; top: 55px; font-weight: bold; font-size: 26px; text-transform: none; } .red_circle { position: absolute; top: 300px; left: 420px; width: 133px; height: 133px; line-height: 133px; color: #fff; text-align: center; font-size: 43px; font-weight: bold; background: url(../images/red_circle.png) center no-repeat; } .blue_b { position: absolute; top: 370px; left: -13px; width: 361px; height: 61px; color: #fff; font-weight: bold; font-size: 30px; text-align: center; line-height: 53px; background: url(../images/blue_b.png) center no-repeat; } } } } .map_b { margin-top: 40px; } .video_b { margin: 0 auto; margin-bottom: 60px; text-align: center; } .form_b .err { border: 1px solid red; }