@charset "utf-8";

body {width: 100%;  padding:0; margin: 0; 
	font-weight: normal;font-family: Ubuntu; font-size: 16px; line-height: 23px;}



h1 {font: normal 34px/40px Ubuntu;color: #3c3c3c;}
h2 {  font-size: 25px;line-height: 1.2em;overflow: visible;margin: 0 0 11px 0;  color: inherit; font-weight: normal;  font-family: 'Ubuntu Condensed';}
h3 {font: normal 26px/32px Ubuntu;color: #3c3c3c;}
h4 {font: normal 15px/20px Ubuntu;color: #333333;}
h5 {font: normal 15px/26px Ubuntu;color: #31c1e4;}
h6 {font: normal 12px/18px Ubuntu;color: #333333;}

a {color: inherit; transition: color 100ms ease;}
a:HOVER{color: #31c1e4;}


.lay-container-inner{width: 940px;	margin: 0 auto;	background: transparent;	padding: 0 0 0 15px;}
.lay-wrapper{	width: 940px;	margin: 0 auto;	background: transparent;	min-height: 100%;}
.lay-footer-placeholder{	height: 175px;	background: transparent;	margin: 16px 0 0 0;	padding: 0;}
.footer{margin: -175px auto 0 auto;	width: 940px;	height: 175px;	overflow: hidden;}
.anchor{display: block; height: 40px; margin-top: -40px;   visibility: hidden;}

.row-1{background-color: #f2f2f2;   padding: 7px 0 8px 0;    color: #999999;letter-spacing: 0.2em;position: fixed;top: 0;left: 0;right: 0;height: 24px;z-index: 20;}
.row-1 a{text-decoration: none;} 
.row-1 .fa{color: #31c1e4;font-size: 22px;vertical-align: middle;}
.row-1 .fa-at{margin: 0 3px;padding-bottom: 1px;}
.row-1 .fa-skype{margin-right:3px;padding-bottom: 1px;}
.row-1 .phone{}
.row-1 .phone .code{font-size: 0.8em;}
.row-1 .phone .num{}
.row-1 .skype{}
.row-1 .email{margin-right: 55px;}
.row-1.fixed{-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.15);-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.15); box-shadow: 0 0px 11px rgba(0,0,0,0.16);}

.row-1 .logo {width: 0px; opacity: 0;}
.row-1 .logo.showed {width: 230px;opacity: 1;}
.row-1 .logo.transition {transition: width 500ms ease, opacity 500ms ease}
.row-1 .logo .logo-1 {font-family: 'vdubregular'; font-size: 18px;text-transform: uppercase;line-height: 27px;color: #3C3C3C;letter-spacing: 1.18px;width: 229px;}
.row-1 .logo .logo-2 {color: #31c1e4; /* font-weight: bold; */}



header{background-color:#ffffff;height: 139px;margin-top: 39px;}
header .logo{margin-top: 36px;  margin-left: -1px;text-decoration: none;}
header .slogan {font-size: 17px;margin: 0;}
header .logo .logo-1 {font-family: 'vdubregular'; font-size: 31px;text-transform: uppercase;line-height: 37px;color: #3C3C3C;letter-spacing: 1.18px; }
header .logo .logo-2 {color: #31c1e4; /* font-weight: bold; */}
header .logo h1{font-size: 16px; margin: 0;line-height: 30px;font-weight: normal;}

.topnav { padding: 0; color: #888888; margin-top: 47px; font-size: 18px;}
.topnav > li {background:none;margin-left:29px; float: left;}
.topnav > li:first-child { margin-left:0; color:#31c1e4;}
.topnav > li > a {padding:0;border:none;text-transform:uppercase;font-weight:300 !important;text-decoration: none;}
.topnav > li > a:hover{background:none;color:#31c1e4;}

#servicesSection {background: #31C1E4;color: white;padding: 26px 0 58px 0; }
#servicesSection .block{width: 273px; float: left; padding: 0 30px; height: 450px;}
#servicesSection .block:FIRST-CHILD{padding-left: 0;}
#servicesSection .block.last{padding-right: 0;}
#servicesSection .block h2{  color: white; text-align: center;  margin-bottom: 26px;  font-family: 'Ubuntu Condensed';}
#servicesSection .block svg{width: 150px; height: 150px; display: block; margin: 22px auto;}
#servicesSection .block li {margin-bottom: 5px;margin-left: 25px;}
#servicesSection .block li:BEFORE{content: '\f0a9'; font-family: FontAwesome;  color: white;  padding: 0 10px 0 0;margin-left: -23px;} 
    
#servicesSection .block a { text-decoration: none; border: 2px solid white; padding: 2px 9px; border-radius: 4px;
	transition: color 200ms ease,background-color 200ms ease;margin: 17px auto 0 auto; float: right;
	font-family: 'Ubuntu condensed'}
#servicesSection .block a:HOVER {background-color: white; color: #675F58;}

.section-header{text-align: center; color:#31c1e4; font-size: 25px;   line-height: 1.2em;    overflow: visible;    margin: 0 0 11px 0;
     font-weight: normal;    font-family: 'Ubuntu Condensed'; }

#portfolioSection {margin: 40px 0;}
#portfolioSection  .block {margin: 74px 0 0 0; height: 140px;clear: both;}
#portfolioSection  .block img{float: left;margin-right: 40px;box-shadow: 2px 1px 8px rgba(0,0,0,0.3);background: #ffecf069;}
#portfolioSection  .block h2{ float: left; width: 560px;}

#portfolioSection  .info{float: right; width: 549px;}
#portfolioSection  ul{margin-top: 19px;/* margin-left: -38px; */}
#portfolioSection  ul li {    margin-left: 38px;   position: relative;    margin-bottom: 12px;}
#portfolioSection  ul li .fa{margin: -32px;    font-size: 20px;    vertical-align: middle;    width: 20px;    text-align: center;    position: absolute;    top: 50%;    margin-top: -9px;color: #31C1E4;}

#portfolioSection  a.more{margin-bottom: 4px; border: 2px #31C1E4 solid;padding: 7px 20px;text-decoration: none;color: #31C1E4;border-radius:  4px;font-size: 18px;line-height: 21px;margin-left: 100px;float: right;}
#portfolioSection  a.more:HOVER {background-color: #31C1E4; color: white;}

#reviewsSection {
    margin-bottom: 28px;
    background-color: #f5f5f5;
    padding: 36px 0 25px 0;
}
#reviewsSection .block {width: 440px; float: left; margin-left: 60px;margin-top: 20px;}
#reviewsSection .block:FIRST-CHILD{margin-left: 0;}
#reviewsSection .block blockquote{padding: 26px 32px 26px 28px;  background: #31c1e4; border-radius: 5px; color: white;line-height: 28px;position: relative;}
#reviewsSection .block blockquote:after{ top: auto;    bottom: -15px;    left: 28px;    background: none;    width: 0;    height: 0;    border-style: solid;    border-width: 16px 16px 0 0;    border-color: #31c0e4 transparent transparent transparent; content: ''; position: absolute;}

#reviewsSection .block .person {margin-bottom: 21px; text-transform: uppercase; padding-top: 25px;}
#reviewsSection .block .person .date{color: gray; float: right;}

#pricesSection{}
#pricesSection h2.section-header{margin-bottom: 24px;}
#pricesSection .block {margin-top: 26px;width: 650px;position: relative; float: left;}
#pricesSection .block.block-1{width: 440px; min-height: 360px;}
#pricesSection .block.block-2{float: right;width: 630px;margin-bottom: 35px;}
#pricesSection .block.block-3{width: 710px;}
#pricesSection .block h2{text-align: center;}
#pricesSection .block p{margin-bottom: 17px;margin-left: 38px;position: relative;}
#pricesSection .block .fa{margin: -32px;   font-size: 20px;    vertical-align: middle;
    width: 20px;      text-align: center;   position: absolute;   top: 50%;   margin-top: -9px;}
#pricesSection .block .fa-plus{ color: #298807;}
#pricesSection .block .fa-minus{color: #FD5F54;}
#pricesSection .block .fa-info{color: #31C1E4;}
#pricesSection .block .price {/* font-style: italic; */}
#pricesSection .block .fa-rouble{position: static;font-size: inherit; vertical-align: inherit; top: inherit;margin: 0;}
#pricesSection .price-stamp{width: 120px;  position: absolute; top: 100px;  right: -158px;}
#pricesSection .price-stamp span{    margin: 0;    position: absolute;    top: 20px;    bottom: 20px;    font-size: 40px;
    color: #000000;    transform: rotateZ(15deg);    left: -60px;    right: -60px;    line-height: 40px;    text-align: center;    font-family: Ubuntu Condensed;
    transition: all 400ms ease;;}
#pricesSection .price-stamp:HOVER{cursor: pointer;}
#pricesSection .price-stamp:HOVER span{transform: rotateZ(7deg);font-size: 43px;line-height: 43px; margin-top: -4px;}
    
#pricesSection .block-1 .price-stamp-1{right: -170px; top: 10px;}
#pricesSection .block-1 .price-stamp-2{right: -440px; top: 50px;}
#pricesSection .block-1 .price-stamp-3{right: -271px; top: 193px; }
#pricesSection .block-2 .price-stamp{left: -220px;} 
#pricesSection .block-3 .price-stamp{top: 34px;  right: -100px;}

#pricesSection .fa-check{   margin-right: 15px;      font-size: 20px;      vertical-align: middle;      
    color: #31C1E4;    width: 20px;    text-align: center;}
#pricesSection .block-3 {width: 280px; }
#pricesSection .block-3:FIRST-CHILD {padding-left: 0px}
#pricesSection .block-3 h3{text-align: center;}
#pricesSection .block-3 p{}
#pricesSection .block-3 .fa-rouble{}

#aboutSection {padding-top: 20px;margin-top: 50px;}
#aboutSection h2 {text-align: center; color:#31c1e4 } 
#aboutSection p {text-align: justify; margin: 20px 0 60px 0;text-indent: 60px;line-height: 31px;}
#aboutSection ol{text-align: justify;margin: 20px 0 60px 0;text-indent: 60px;line-height: 31px;list-style-type: decimal;list-style-position: initial;}
#aboutSection ol li{margin-left: 60px;text-indent: 0;margin-bottom: 40px;list-style-type: decimal;list-style-position: outside;display: list-item;}
#aboutSection a{margin-bottom: 34px; border: 2px #31C1E4 solid;padding: 7px 20px;text-decoration: none;color: #31C1E4;border-radius:  4px;font-size: 18px;line-height: 21px;margin-left: 100px;}
#aboutSection a:HOVER {background-color: #31C1E4; color: white;}


#contactsSection {padding: 35px 0 65px 0;     background: #f5f5f5;} 
#contactsSection .section-header{color: black;text-align: left;}
#contactsSection .form {float: right; width: 660px;}
#contactsSection .info {float: left; width: 233px;}
#contactsSection .info .strong {    font: normal 16px/26px Ubuntu;   color: #31c1e4;    text-transform: uppercase;}
#contactsSection .info p {margin: 15px 0;}
#contactsSection form{}
#contactsSection label{display: flex;margin: 20px 0 5px 0;}
#contactsSection label small{color: #5B5B5B;margin-right: 0;font-size: 0.8em;display: inline-block;margin-left: auto;vertical-align: baseline;}
#contactsSection label .fa-asterisk{color: #FD5F54;font-size: 9px;    vertical-align: top;  margin-left: 5px;}

#contactsSection label.checkbox {cursor: pointer;}
#contactsSection label.checkbox input[type=checkbox]{position: fixed; top: -100px; left: -100px; opacity: 0; width: 0; height: 0}
#contactsSection label.checkbox span:before{
    content: '\00a0';
    font-family: fontawesome;
    background: white;
    border: 1px solid #dcdcdc;
    display: inline-block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    vertical-align: 1px;
    margin-right: 5px;
    text-align: center;
    color: #54cce9;
}
#contactsSection label.checkbox input[type=checkbox]:focus+span:before{
    background-color: transparent;
    border-color: #31c1e4;
}
#contactsSection label.checkbox input[type=checkbox]:checked+span:before{
    content: '\f00c';
}
#contactsSection label.checkbox input[type=checkbox]:active+span:before{
    transform:translate(-0.5px, 0.5px);
}
#contactsSection input[type=text],
#contactsSection textarea{
    display: block;
    background-color: #FFFFFF;
    width: 100%;
    border: 1px solid #eaeaea;
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    padding: 7px 11px;
    line-height: 22px;
    font-size: inherit;
    }
#contactsSection textarea{ min-height: 100px;resize: none; padding: 10px;}
	
#contactsSection input[type=text]:FOCUS,
#contactsSection textarea:FOCUS{background-color: transparent;  border-color: #31c1e4;}

#contactsSection input[type=text].error,
#contactsSection textarea.error {border-color: #FD5F54;}

#contactsSection input[type=checkbox].error+span:before{border-color: #FD5F54}

#contactsSection input[type=submit]{    /* margin-bottom: 34px; */   border: 2px #31C1E4 solid;    padding: 7px 20px;
    text-decoration: none;    color: #31C1E4;    border-radius: 4px;    font-size: 18px;    line-height: 21px; background-color: white;
    /* margin-left: 100px; */ transition: color 200ms ease, background-color 200ms ease; cursor: pointer; }
#contactsSection input[type=submit]:HOVER{    background-color: #31C1E4; color: white;}
#contactsSection input[type=submit]:ACTIVE{}
#contactsSection input[type=submit]:active{
    transform:translate(-0.5px, 0.5px);
}
#contactsSection .btn-wrp{text-align: right;margin: 32px 0 0 0;}
#contactsSection .btn-wrp.loading{background: transparent url(../i/loading.gif) center center no-repeat;}
#contactsSection .done {text-align: center;display: none;}
#contactsSection .done p{color: #31C1E4; text-align: left; padding: 111px 100px; font-size: 1.2em;line-height: 46px;}
#contactsSection .done a{color: gray; }

.dropzone{    padding: 10px;    border: 2px dashed #31C1E4;    margin-right: 2px;}
.dropzone .dz-preview .dz-image img {transition:transform 200ms easy; }
.dropzone .dz-preview:hover .dz-image img {
    transform: scale(1.05, 1.05); -webkit-filter: none;     filter: none;}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {display: none;}
.dropzone .dz-message{color: #5B5B5B;font-size: 13px;margin: 7px 0;}
.dropzone.dz-started .dz-message {display: none}


.back-top {	width: 51px;	height: 45px;	position: fixed; 	bottom: -85px;	margin-left: -115px;	background-color:#31c1e4;	-webkit-border-radius:4px;	-moz-border-radius:4px;	border-radius:4px;
	background: #31c1e4 url(../i/up-arrow.png) no-repeat center center; 	transition: bottom 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}
.back-top.showed{bottom:25px;}
.back-top:hover { background-color:#505050; }


footer{background: #363636; color: #7D7C7C; padding: 20px 0 15px 0}
footer .block-1 {float: left; width: 280px; border-right: 1px dashed #585858;}

footer p {margin-bottom: 6px;}
footer a {text-decoration: none;}

footer .logo{margin-top: 10px;  margin-left: -1px;text-decoration: none;margin-bottom: 25px;}
footer .logo .logo-1 {font-family: 'vdubregular'; font-size: 23px;text-transform: uppercase;line-height: 37px;/* color: #999; */letter-spacing: 1.18px; }
footer .logo .logo-2 {color: #67E1FF; /* font-weight: bold; */}

footer .block-2 {float: left; }
footer .block-2 ul{margin: 11px 0 0 55px;}

#articleSection {padding-top: 20px;margin-top: 50px;}
#articleSection h2 {text-align: center; color:#31c1e4 }
#articleSection h3 {font-size: 22px;margin-left: 60px;} 
#articleSection p {text-align: justify;margin: 20px 0 20px 0;text-indent: 60px;line-height: 31px;}
#articleSection ol{text-align: justify;margin: 20px 0 20px 0;text-indent: 60px;line-height: 31px;list-style-type: decimal;list-style-position: initial;}
#articleSection ol li{margin-left: 60px;text-indent: 0;margin-bottom: 10px;list-style-type: decimal;list-style-position: inside;display: list-item;}
#articleSection ul{text-align: justify;margin: 20px 0 20px 0;text-indent: 60px;line-height: 31px;}
#articleSection ul li{margin-left: 60px;text-indent: 0;margin-bottom: 10px;isplay: list-item;}
#articleSection ul li .fa{margin-right: 15px;}
#articleSection h3 a{margin-bottom: 34px; border: 2px #31C1E4 solid;padding: 7px 20px;text-decoration: none;color: #31C1E4;border-radius:  4px;font-size: 18px;line-height: 21px;margin-left: 100px;}
#articleSection h3 a:HOVER {background-color: #31C1E4; color: white;}


#hypercomments_widget{margin-bottom: 80px; margin-top: 60px;}



#briefSection .field{margin: 40px 0;}
#briefSection h3{margin-top: 25px;}
#briefSection p{margin: 0 0 10px 0;color: #6e6e6e;font-size: 17px;}
#briefSection label small{margin: 0 0 10px 0;color: #6e6e6e;font-size: 17px;margin-left: 20px;}
#briefSection form{width: 590px;margin: 0 auto 50px auto;}
#briefSection label{display: block;margin: 20px 0 5px 0;font-size: 1.3em;line-height: 30px;}
#briefSection label.checkbox {font-size: 1em;margin: 20px 0 20px 31px;position: relative;cursor: pointer;line-height: 30px;}
#briefSection label.checkbox strong {
    margin-right: 10px;
}

#briefSection input[type=checkbox]{
    width: 22px;
    height: 22px;
    position: absolute;
    left: -30px;
    top: 4px;
}
#briefSection input[type=radio]{
    width: 22px;
    height: 22px;
    position: absolute;
    left: -30px;
    top: 4px;
}

#briefSection input[type=text],
#briefSection textarea{   display: block;    background-color: #FFFFFF;    width: 100%;    border: 1px solid #eaeaea;
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    padding: 7px 11px;    line-height: 22px;    font-size: inherit; }
#briefSection textarea{min-height: 100px;width: 100%;resize: none;padding: 10px;}	
#briefSection input[type=text]:FOCUS,
#briefSection textarea:FOCUS{background-color: transparent;  border-color: #31c1e4;}

#briefSection input[type=text].error,
#briefSection textarea.error {border-color: #FD5F54;}

#briefSection input[type=submit]{    /* margin-bottom: 34px; */   border: 2px #31C1E4 solid;    padding: 7px 20px;
    text-decoration: none;    color: #31C1E4;    border-radius: 4px;    font-size: 18px;    line-height: 21px; background-color: white;
    /* margin-left: 100px; */ transition: color 200ms ease, background-color 200ms ease; cursor: pointer; }
#briefSection input[type=submit]:HOVER{    background-color: #31C1E4; color: white;}
#briefSection input[type=submit]:ACTIVE{}

#briefSection label.checkbox+textarea {
	margin-top: -15px;
}

#briefSection .done {text-align: center;display: none;}
#briefSection .done p{color: #31C1E4;/* text-align: left; */padding: 111px 100px;font-size: 1.2em;line-height: 46px;}
#briefSection .done a{color: gray; }

.g-recaptcha{
	float: left;
    margin-top: 15px;	
}