* {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #fff;
}
html {
    width: 100%;
    height: 100%;
}
body {
    font-size: 18px;
    font-family: "PTSansNarrow", Arial;
    color: #4d4d4d;
    width: 100%;
    height: 100%;
    margin: 0;
    min-width: 1000px;
}
@font-face {
    font-family: "PTSansNarrow";
    src:  url(fonts/PTSansNarrow.ttf);
    font-weight: normal;
}
@font-face {
    font-family: "PTSansNarrow";
    src:  url(fonts/PTSansNarrowBold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: "PTSans";
    src:  url(fonts/PTSans.ttf);
    font-weight: normal;
}
@font-face {
    font-family: "PTSans";
    src:  url(fonts/PTSansBold.ttf);
    font-weight: bold;
}
/***************HEAD****************/
.head {
    width: 100%;
    height: 680px;
    position: relative;
    background: url(images/fon1.jpg);
    background-size: cover;
    z-index: 8;
    box-shadow: 0px 10px 30px rgba(0,0,0,.6);
}
.zagol-inner {
    width: 100%;
    height: 310px;
    background: rgba(255,255,255,.7);
    position: absolute;
    top: 50px;
}
.center {
    width: 1000px;
    height: inherit;
    position: relative;
    margin: auto;
}
.logo {
    width: 190px;
    height: 140px;
    background: url(images/logo.png);
    position: absolute;
    top: 40px;
}
.zagol {
    font-size: 72px;
    font-family: "PTSans";
    left: 0px;
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 74px;
    top: 30px;
    color: #323232;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
}
.zagol span {
    font-size: 58px;
    font-weight: normal;
    color: #d6456d;
    }
.podzagol {
    font-size: 35px;
    text-transform: uppercase;
    font-family: "PTSans";
    color: #323232;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
    font-weight: bold;
    position: absolute;
    bottom: 30px;
    top: 200px;
}
.podzagol span {
    font-weight: normal;
}
.number {
    font-size: 52px;
    position: absolute;
    right: 0;
    top: 30px;
    color: #d6456d;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
}
.number a {
    color: #d6456d;
}
.number span {
    color: #323232;
}
.number2 {
    font-size: 52px;
    position: absolute;
    right: 0;
    top: 90px;
    color: #d6456d;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
}
.number2 a {
    color: #d6456d;
}
.number2 span {
    color: #323232;
}
.number3 {
    font-size: 62px;
    top: 0px;
    color: #d6456d;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
    line-height: 80%;
    
}
.number3 a {
    color: #d6456d;
}
.number3 span {
    color: #323232;
}
.zvonok {
    width: 350px;
    height: 60px;
    background: #b33557;
    display: block;
    position: absolute;
    right: 0;
    top: 140px;
    font-size: 27px;
    text-align: center;
    line-height: 60px;
    font-weight: normal;
    text-transform: uppercase;
    border-radius: 10px;
    box-shadow: 0px 0px 40px rgba(0,0,0,.5) inset, 0px 4px 7px rgba(0,0,0,.7);
    text-shadow: 0px 1px 1px rgba(0,0,0,.8);
}
.action-inner {
    width: 100%;
    height: 250px;
    position: absolute;
    background: linear-gradient(rgba(123,123,123,.5),rgba(66,66,66,.5));
    bottom: 20px;
}
.action-box {
    width: 470px;
    height: 360px;
    background: linear-gradient(#0b6a8a,#8cc4f3);
    position: absolute;
    top: -30px;
    box-shadow: 0px 8px 16px rgba(0,0,0,.5);
    border-radius: 10px;
    border: solid 3px rgba(140,196,243,.5);
}
.action-box h2 {
    font-size: 48px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    text-shadow: 0px 1px 1px rgba(0,0,0,.9);
}
.action-box h3 {
    font-size: 36px;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    margin: 0;
    text-shadow: 0px 1px 1px rgba(0,0,0,.9);
}
.action-box h3 span {
    color: #d6456d;
}
.action-box h4 {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
    margin: 0;
    text-shadow: 0px 1px 1px rgba(0,0,0,.9);
}
.form-con {
    width: 360px;
    height: 310px;
    background: #e8e8e8;
    position: absolute;
    right: 0;
    top: -20px;
    border-radius: 10px;
    box-shadow: 0px 8px 16px rgba(0,0,0,.5);
}
.form-con h4 {
    text-align: center;
    font-size: 36px;
    text-transform: uppercase;
    margin: 0;
}
.form-con h5 {
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    margin: 0;
    font-weight: normal;
}
.form-con h5 span {
    color: #d6456d;
}
form {
    text-align: center;
}
.form {
    width: 240px;
    height: 40px;
    border-radius: 10px;
    border: none;
    box-shadow: 0px 0px 10px rgba(0,0,0,.6) inset;
    margin: 3px;
    font-size: 20px;
    padding-left: 10px;
}
.submit {
    width: 240px;
    height: 50px;
    border: none;
    margin: 5px;
    border-radius: 10px;
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "PTSansNarrow";
    background: linear-gradient(#0b6a8a,#8cc4f3);
    box-shadow: 0px 0px 40px rgba(0,0,0,.6) inset, 0px 4px 7px rgba(0,0,0,.4);
    text-shadow: 0px 1px 1px rgba(0,0,0,.9);
}
.form-con h6 {
    text-align: center;
    margin: 0;
    margin-top: 10px;
}
/*********************POCH************************/
.poch {
    width: 100%;
    height: 40px;
    position: relative;
    background: url(images/fon2.png);
    z-index: 7;
    padding-top: 90px;
    box-shadow: 0px 10px 40px rgba(0,0,0,.5);
}
.poch .center {
    text-align: center;
}
.poch h2 {
    margin: 0;
    font-size: 72px;
    text-transform: uppercase;
    font-weight: normal;
    text-align: center;
}
.poch h2 span {
    color: #d6456d;
}
.line {
    width: 1000px;
    height: 20px;
    position: absolute;
    background: url(images/line1.png);
    top: 35px;
    display: block;
}
.po {
    width: 300px;
    height: 250px;
    position: relative;
    display: inline-block;
    margin: 10px;
    text-align: center;
}
.po-pic {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    position: absolute;
    margin: auto;
    left: 70px;
    box-shadow: 0px 5px 20px rgba(0,0,0,.6);
}
.poch .center .po:nth-of-type(1) .po-pic {
    background: url(images/po1.png);
    background-position: center;
}
.poch .center .po:nth-of-type(2) .po-pic {
    background: url(images/po2.png);
    background-position: center;
}
.poch .center .po:nth-of-type(3) .po-pic {
    background: url(images/po3.png);
    background-position: center;
}
.poch .center .po:nth-of-type(4) .po-pic {
    background: url(images/po4.png);
    background-position: center;
}
.poch .center .po:nth-of-type(5) .po-pic {
    background: url(images/po5.png);
    background-position: center;
}
.poch .center .po:nth-of-type(6) .po-pic {
    background: url(images/po6.png);
    background-position: center;
}
.po-txt {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 180px;
    text-align: center;
    width: inherit;
    line-height: 30px;
}
.act2 {
    padding-top: 40px;
}
/******************WALL*******************/
.wall {
    width: 100%;
    height: 410px;
    position: relative;
    background: url(images/fon3.png);
    z-index: 6;
}
.wall .action-box {
    top: 30px;
}
.wall .form-con {
    top: 50px;
}
/****************PROBLEMS********************/
.problems {
    width: 100%;
    height: auto;
    background: url(images/fon2.png);
    position: relative;
    z-index: 7;
    min-height: 300px;
    box-shadow: 0px 10px 80px rgba(0,0,0,.7);
}
.problems .center {
    padding-top: 40px;
    padding-bottom: 30px;
}
.problems h2 {
    margin: 0;
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 40px;
}
.problems h2 span {
    color: #d6456d;
}
.problems h2 .mini {
    color: #4d4d4d;
    font-size: 30px;
}
.problems .line {
    top: 50px;
}
.prob {
    width: 790px;
    height: 170px;
    position: relative;
    margin: 30px auto;
}
.prob-pic {
    position: absolute;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-shadow: 0px 5px 20px rgba(0,0,0,.6);
}
.problems .center .prob:nth-of-type(1) .prob-pic {
    background: url(images/group5.png);
    background-position: center;
}
.problems .center .prob:nth-of-type(2) .prob-pic {
    background: url(images/group2.png);
    background-position: center;
}
.problems .center .prob:nth-of-type(3) .prob-pic {
    background: url(images/group7.png);
    background-position: center;
}
.problems .center .prob:nth-of-type(4) .prob-pic {
    background: url(images/group6.png);
    background-position: center;
}
.problems .center .prob:nth-of-type(5) .prob-pic {
    background: url(images/group3.png);
    background-position: center;
}
.problems .center .prob:nth-of-type(6) .prob-pic {
    background: url(images/group4.png);
    background-position: center;
}
.problems .center .prob:nth-of-type(7) .prob-pic {
    background: url(images/group1.png);
    background-position: center;
}
.prob-txt {
    height: 170px;
    font-size: 36px;
    text-transform: uppercase;
    padding-left: 220px;
    padding-top: 60px;
}
.prob-txt span {
    color: #d6456d;
    font-weight: bold;
}
/*******************VYB***********************/
.vyb {
    width: 100%;
    height: 640px;
    position: relative;
    background: linear-gradient(#9c445c,#ca5d7b);
    z-index: 6;
}
.vyb .center {
    padding-top: 50px;
}
.vyb h2 {
    margin: 0;
    color: #e8e8e8;
    font-size: 72px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
}
.vyb h2 span {
    font-size: 30px;
    color: #f99cb6;
}
.vyb .line {
    background: url(images/line1f.png);
    top: 60px;
}
.vy {
    color: #e8e8e8;
    font-size: 36px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 40px;
    text-shadow: 0px 1px 1px rgba(0,0,0,.5);
    margin-top: 30px;
    margin-left: 100px;
    position: relative;
}
.vy:before {
    content: '';
    width: 46px;
    height: 46px;
    background: url(images/gal.png);
    position: absolute;
    left: -60px;
}
.vy span {
    font-weight: bold;
    font-size: 20px;
    color: #f99cb6;
}
.n2 {
    box-shadow: 0px 0px 80px rgba(0,0,0,.5);
}
/********************OFFER*******************/
.offer {
    width: 100%;
    height: auto;
    min-height: 300px;
    background: url(images/fon2.png);
    position: relative;
    z-index: 5;
    box-shadow: 0px 0px 80px rgba(0,0,0,.5);
}
.offer .center {
    padding-top: 40px;
    padding-bottom: 30px;
}
.offer h2 {
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 40px;
}
.offer h2 span {
    color: #d6456d;
}
.offer .line {
    background: url(images/line2.png);
    top: 50px;
}
.off {
    width: 1000px;
    height: 280px;
    position: relative;
    margin: 40px auto;
    display: block;
}
.off-pic {
    width: 500px;
    height: 280px;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0px 5px 30px rgba(0,0,0,.6);
    z-index: 1;
}
.offer .center .off:nth-of-type(1) .off-pic {
    background: url(images/off1.jpg);
    background-size: cover;
    background-position: 0% 70%;
}
.offer .center .off:nth-of-type(2) .off-pic {
    background: url(images/off2.jpg);
    background-size: cover;
    background-position: 0% 70%;
}
.offer .center .off:nth-of-type(3) .off-pic {
    background: url(images/off3.jpg);
    background-size: cover;
    background-position: 0% 70%;
}
.offer .center .off:nth-of-type(4) .off-pic {
    background: url(images/off4.jpg);
    background-size: cover;
    background-position: 0% 70%;
}
.off-txt {
    width: 550px;
    height: 280px;
    background: url(images/lenta.png);
    background-repeat: no-repeat;
    background-position: 0% 40%;
    position: absolute;
    right: -10px;
    z-index: 0;
    padding-left: 60px;
    font-size: 48px;
    text-transform: uppercase;
    padding-top: 85px;
    line-height: 50px;
    color: #383838;
    text-shadow: 0px 1px 1px rgba(0,0,0,.7);
}
.off-txt span {
    color: #e4e4e4;
    font-weight: bold;
}
.off-txt1 {
    width: 550px;
    height: 280px;
    background: url(images/lenta.png);
    background-repeat: no-repeat;
    background-position: 0% 40%;
    position: absolute;
    right: -10px;
    z-index: 0;
    padding-left: 60px;
    font-size: 42px;
    text-transform: uppercase;
    padding-top: 85px;
    line-height: 50px;
    color: #383838;
    text-shadow: 0px 1px 1px rgba(0,0,0,.7);
}
.off-txt1 span {
    color: #e4e4e4;
    font-weight: bold;
}
.n3 {
    z-index: 4;
}
.n3 .action-box {
    padding-top: 40px;
}
.n3 h2:nth-of-type(2) {
    font-size: 40px;
}
/**********************HOW************************/
.how {
    width: 100%;
    height: 960px;
    position: relative;
    background: linear-gradient(#3c9bba,#4cabc7);
    z-index: 5;
    box-shadow: 0px 0px 80px rgba(0,0,0,.5), 0px 0px 80px rgba(0,0,0,.8) inset;
    color: #ebebeb;
}
.how .center {
    padding-top: 40px;
    text-align: center;
}
.how h2 {
    margin: 0;
    margin-bottom: 100px;
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 40px;
    text-shadow: 0px 1px 1px rgba(0,0,0,.8);
}
.how h2 span {
    color: #9cd2e6;
    font-size: 30px;
}
.how .line {
    background: url(images/line1f.png);
    top: 50px;
}
.ho {
    width: 270px;
    height: 250px;
    display: inline-block;
    position: relative;
    margin: 30px;
}
.how .center .ho:nth-of-type(2) {
    top: -100px;
}
.how .center .ho:nth-of-type(5) {
    bottom: -100px;
}
.ho-pic {
    position: absolute;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    top: 0;
    left: 50px;
    box-shadow: 0px 7px 20px rgba(0,0,0,.4);
}
.how .center .ho:nth-of-type(1) .ho-pic {
    background: url(images/ho1.png);
    background-position: center;
}
.how .center .ho:nth-of-type(2) .ho-pic {
    background: url(images/ho2.png);
    background-position: center;
}
.how .center .ho:nth-of-type(3) .ho-pic {
    background: url(images/ho3.png);
    background-position: center;
}
.how .center .ho:nth-of-type(4) .ho-pic {
    background: url(images/ho4.png);
    background-position: center;
}
.how .center .ho:nth-of-type(5) .ho-pic {
    background: url(images/ho5.png);
    background-position: center;
}
.how .center .ho:nth-of-type(6) .ho-pic {
    background: url(images/ho6.png);
    background-position: center;
}
.ho-txt {
    position: absolute;
    width: inherit;
    top: 180px;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(0,0,0,.8);
}
.how .center .ho:nth-of-type(2) .ho-txt {
    font-size: 24px;
}
.how .center .ho:nth-of-type(3) .ho-txt {
    font-size: 20px;
}
.strel {
    width: 430px;
    height: 70px;
    position: absolute;
    background: url(images/strel.png);
    top: 240px;
    left: 285px;
}
.strel2 {
    width: 430px;
    height: 70px;
    position: absolute;
    background: url(images/strel2.png);
    top: 700px;
    left: 285px;
}
/********************KOMMENTS*****************/
.komments {
    width: 100%;
    height: 550px;
    background: url(images/fon2.png);
}
.komments .center {
    padding-top: 40px;
    text-align: center;
}
.komments h2 {
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 50px;
}
.komments h2 span {
    color: #d6456d;
    font-size: 48px;
}
.komments .line {
    background: url(images/line2.png);
    top: 50px;
}
.komments2 {
    width: 100%;
    height: 530px;
    background: url(images/fon2.png);
}
.komments2 .center {
    padding-top: 40px;
    text-align: center;
}
.komments2 h2 {
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    font-size: 72px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 50px;
}
.komments2 h2 span {
    color: #d6456d;
    font-size: 48px;
}
.komments2 .line {
    background: url(images/line2.png);
    top: 50px;
}
.kom {
    width: 290px;
    height: 260px;
    display: inline-block;
    position: relative;
    margin: 20px;
}
.kom-pic {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    background: #68cef8;
}
.kom-pic img {
    width: 80px;
}
.kom-name {
    width: 210px;
    height: 80px;
    right: 0;
    top: 0;
    position: absolute;
    padding-left: 10px;
    text-align: left;
    text-transform: uppercase;
    font-size: 20px;
}
.kom-txt {
    width: inherit;
    height: 180px;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 18px;
    text-align: left;
    padding-top: 10px;
}
/***********************POPUP**********************/
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 50;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup img{
    display: inline;
    border: none;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffff;    
}
.popup {
    background-color: rgba(0,0,0,.7);
    border: 2px solid #d6456d;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: center;
    font: 14px Calibri;
    top: 40%;
    visibility: hidden;
    z-index: 60;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
#zvonok-inner {
    width: 600px;
    height: 300px;
}
.popup h4 {
    font-size: 30px;
    margin: 0;
    color: #fff;
    font-family: "PTSansNarrow";
    font-weight: normal;
}
.popup h5 {
    font-size: 20px;
    margin: 0;
    color: #fff;
    font-family: "PTSansNarrow";
    font-weight: normal;
    margin-bottom: 20px;
}
.popup .zvonok {
    position: relative;
    margin: auto;
    top: 0;
    width: 250px;
    margin-top: 20px;
    color: #fff;
    font-size: 20px;
}
.otpr {
    width: 600px;
    position: relative;
    margin: auto;
    top: 20%;
    padding: 20px;
    text-align: center;
}
.otpr h2, h3 {
    margin: 0;
    margin-bottom: 20px;
}
.otpr h2 {
    font-size: 40px;
}
.otpr .zvonok {
    position: relative;
    top: 0;
    margin: auto;
}
.contact {
	font-size: 14px;
	text-align: center;
	color: #4d4d4d;
	font-family: Arial;
}

.contact a {
	font-size: 14px;
	text-align: center;
	color: #4d4d4d;
	font-family: Arial;
}
.contact a:hover {
	font-size: 14px;
	text-align: center;
	color: #7c7c7c;
	font-family: Arial;
}