Your IP : 172.28.240.42
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic);
@clr-main: #0c0c0c;
@clr-light: #fff;
@clr-red: #ef4141;
@clr-blue: #165887;
@fnt-main: "Roboto", sans-serif;
@fnt-narrow: "Roboto Condensed", sans-serif;
body {
font-family: @fnt-main;
color: @clr-main;
line-height: 1.3;
}
a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
h1, h2, h3, h4, .narrow {
font-family: @fnt-narrow;
font-weight: 400;
}
section {
padding: 35px 0;
}
/*HEADER*/
.header,
.footer {
padding: 10px 0;
font-family: @fnt-narrow;
.slogan {
margin-top: 40px;
margin-left: 20px;
font-style: italic;
font-size: 20px;
line-height: 1.2;
}
.phone-box {
text-align: right;
font-size: 16px;
line-height: 1.2;
}
a {
color: @clr-main;
}
}
.header__phone {
font-size: 22px;
strong {
color: @clr-red;
font-size: 46px;
line-height: 1;
}
}
/*/HEADER*/
/*MAIN*/
.main {
position: relative;
height: 358px;
background: url('../img/img_main.jpg') no-repeat center;
}
.main__text {
background-color: fade(@clr-main, 80%);
color: @clr-light;
text-transform: uppercase;
font-family: @fnt-narrow;
font-size: 40px;
text-align: center;
padding: 30px 0;
}
.main__form__box {
position: relative;
color: @clr-light;
width: 600px;
height: 575px;
margin: 30px auto 0;
padding: 30px 100px;
text-align: center;
font-family: @fnt-narrow;
z-index: 2;
&::before {
position: absolute;
content: '';
width: 100%;
border-top: 575px solid fade(@clr-blue, 80%);
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0;
top: 0;
left: 0;
z-index: -1;
}
h3 {
font-size: 40px;
text-transform: uppercase;
}
.subtitle {
font-size: 22px;
text-transform: uppercase;
}
.btn {
width: 80%;
margin: 0 auto;
}
.action {
margin: 20px 0 0px;
text-transform: uppercase;
font-size: 18px;
}
}
.btn-red {
padding: 0 40px;
outline: none;
background: @clr-red;
color: @clr-light;
border: none;
border-radius: 6px;
font-family: @fnt-narrow;
font-size: 28px;
line-height: 56px;
text-transform: uppercase;
text-decoration: none;
box-shadow: none;
border: none;
box-shadow: 0 4px 0 darken(@clr-red, 20%);
&:hover {
outline: none;
color: @clr-light;
background: darken(@clr-red, 10%);
}
&:focus,
&:active {
outline: none;
color: @clr-light;
}
}
.form-control {
width: 80%;
margin: 10px auto;
height: 40px;
&.ui-state-error {
background: lighten(@clr-red, 30%);
}
}
/*/MAIN*/
/*PRODUCTS*/
.title {
overflow: hidden;
text-align: center;
text-transform: uppercase;
color: @clr-blue;
font-size: 46px;
font-weight: 400;
line-height: 1;
margin: 20px 0 40px;
span {
position: relative;
padding: 0 20px;
display: inline-block;
&::before,
&::after {
position: absolute;
content: '';
width: 100%;
height: 4px;
background-color: @clr-blue;
top: 50%;
margin-top: -2px;
}
&::before {
right: 100%;
}
&::after {
left: 100%;
}
}
}
.products {
background: url('../img/bg_products.jpg');
}
.products__box {
margin-bottom: 40px;
p {
margin: 15px 0;
font-size: 16px;
}
}
/*/PRODUCTS*/
/*ADVANTAGES*/
.advantages {
p {
text-align: center;
text-transform: uppercase;
color: @clr-blue;
font-size: 20px;
font-family: @fnt-narrow;
margin: 20px 0;
}
}
/*/ADVANTAGES*/
/*STEPS*/
.steps {
height: 420px;
background: url('../img/bg_steps.jpg') no-repeat center;
color: @clr-light;
.title {
color: @clr-light;
span {
&::before,
&::after {
background-color: @clr-light;
}
}
}
}
.steps__box {
display: table;
background-color: fade(@clr-main, 50%);
text-align: center;
width: 200px;
height: 200px;
margin: 0 auto;
padding: 15px 25px;
p {
display: table-cell;
vertical-align: middle;
font-family: @fnt-narrow;
font-size: 16px;
}
}
.pointer {
position: relative;
&::after {
position: absolute;
content: '';
width: 16px;
height: 36px;
background: url('../img/pointer.png') no-repeat center;
top: 50%;
margin-top: -18px;
right: -30px;
}
}
/*/STEPS*/
/*PORTFOLIO*/
.portfolio p {
margin: 10px 0 20px;
font-size: 16px;
font-family: @fnt-narrow;
color: @clr-blue;
}
/*/PORTFOLIO*/
/*REVIEWS*/
.reviews {
background: url('../img/bg_reviews.jpg');
color: @clr-light;
.title {
color: @clr-light;
span {
&::before,
&::after {
background-color: @clr-light;
}
}
}
}
.reviews__box {
position: relative;
font-family: @fnt-narrow;
margin-bottom: 40px;
&::before,
&::after {
position: absolute;
content: '';
width: 47px;
height: 38px;
background-image: url('../img/quotes.png');
background-repeat: no-repeat;
}
&::before {
background-position: 0 0;
top: 0;
left: -70px;
}
&::after {
background-position: 0 -38px;
bottom: 0;
right: -70px;
}
}
.reviews__photo {
width: 218px;
float: left;
}
.reviews__text {
width: 560px;
float: left;
.profile {
color: @clr-red;
font-style: italic;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 10px;
strong {
font-size: 28px;
font-weight: 400;
text-transform: none;
}
span {
color: @clr-light;
}
}
p {
margin: 0;
font-size: 18px;
}
}
/*/REVIEWS*/
/*SECOND*/
.second {
height: 740px;
background: url('../img/bg_form.jpg') no-repeat center;
color: @clr-light;
}
/*/SECOND*/
/*MAP*/
.map {
height: 570px;
.container {
padding: 0;
position: relative;
z-index: 2;
}
}
.contact-box {
position: absolute;
width: 480px;
height: 340px;
top: 100px;
left: 50%;
margin-left: -240px;
text-align: center;
text-transform: uppercase;
color: @clr-light;
h2 {
font-size: 58px;
margin: 40px 0;
}
p {
font-family: @fnt-narrow;
font-size: 28px;
span {
font-size: 20px;
}
}
&::before {
position: absolute;
content: '';
width: 100%;
border-top: 340px solid fade(@clr-blue, 80%);
border-left: 60px solid transparent;
border-right: 60px solid transparent;
height: 0;
top: 0;
left: 0;
z-index: -1;
}
}
/*/MAP*/
/*QUESTION*/
.question {
padding: 20px 0;
background-color: @clr-blue;
color: @clr-light;
text-align: center;
font-family: @fnt-narrow;
h2 {
font-size: 34px;
margin: 0;
text-transform: uppercase;
}
a {
color: @clr-light;
font-size: 18px;
outline: 0;
}
}
.cinar {
font-family: @fnt-main;
display: block;
margin-top: 40px;
float: right;
width: 200px;
color: @clr-main;
line-height: 1.2;
padding-left: 100px;
background: url('../img/cinar.png') no-repeat left center;
text-decoration: underline;
}
/*/QUESTION*/
/*POPUP*/
.white-popup {
position: relative;
width: 400px;
margin: 0 auto;
padding: 20px 40px 40px;
background: @clr-light;
.btn,
.form-control {
width: 100%;
}
}
/*/POPUP*/