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;
}