@import "http://varnoff-studio.ru/landing/sozdanie-prezentatsii/fonts/opensans/opensans.css";
@import "http://varnoff-studio.ru/landing/sozdanie-prezentatsii/fonts/font-awesome/css/font-awesome.css";

/* Template */
body {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size:   18px;
    color:       #333;
}

* {
    -webkit-transition: all .5s;
    transition:         all .5s;
}

h1 {
    font-size:   58px;
    font-weight: 700;
    text-align:  center;
    color:       #fff;
    text-shadow: 2px 4px 6px rgba(0, 0, 0, .8);
}

h2 {
    font-size:      30px;
    font-weight:    700;
    margin:         0 0 40px;
    text-align:     center;
    text-transform: uppercase;
}

h3 {
    font-size:      25px;
    font-weight:    700;
    margin:         0 0 34px;
    text-align:     center;
    text-transform: uppercase;
}

/* Header */
.header_wrap {
    min-height:          726px;
    padding:             15px 0;
    background-color:    #000;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/header_wrap_bg.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto 100%;
}

.header_top {
    font-size: 14px;
    color:     #fff;
}

.logo {
    width:               194px;
    height:              106px;
    margin-bottom:       15px;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/logo.png);
    background-repeat:   no-repeat;
    background-position: left top;
    background-size:     auto 100%;
}

.logo a {
    display: block;
    width:   100%;
    height:  100%;
}

.header_main_site {
    font-size: 12px;
}

.header_main_site a {
    display:         inline-block;
    padding:         5px 14px;
    text-decoration: none;
    color:           #000;
    border-radius:   5px;
    background:      rgba(255, 255, 255, .8);
}

.header_main_site a:hover {
    background: rgba(255, 255, 255, 1);
}

.header_phone {
    font-size:   28px;
    font-weight: 600;
    font-style:  normal;
    margin-top:  -10px;
}

.nav > li > a, .navbar-toggle {
    padding:       5px 12px;
    cursor:        pointer;
    color:         #fff;
    border:        1px solid #fff;
    border-radius: 5px;
    background:    rgba(0, 0, 0, .8);
}

.nav > li > a {
    margin-right: 20px;
}

.nav > li > a:hover, .nav > li > a:visited, .navbar-toggle:hover {
    background: rgba(0, 0, 0, .4);
}

.navigation_wrap .navbar-toggle {
    float:   none;
    width:   48px;
    height:  30px;
    margin:  0 auto 20px;
    padding: 7px 12px 0;
}

.navigation_wrap .navbar-toggle .icon-bar {
    background: #fff;
}

.navigation_hidden_wrap {
    position:   fixed;
    z-index:    999;
    top:        0;
    display:    none;
    width:      100%;
    margin:     0;
    padding:    8px 0;
    background: rgba(0, 0, 0, .7);
}

.navigation_hidden_wrap .logo {
    max-width:     95px;
    height:        50px;
    margin-top:    5px;
    margin-bottom: 0;
}

.navigation_hidden_wrap .nav > li > a, .navigation_hidden_wrap .navbar-toggle {
    font-size:      15px;
    padding:        18px 15px;
    text-transform: uppercase;
    opacity:        1;
    color:          #fff;
    border:         none;
    background:     none;
}

.navigation_hidden_wrap .nav > li > a:hover, .navigation_hidden_wrap .navbar-toggle:hover {
    opacity: .8;
}

.navigation_hidden_wrap .nav > li > a {
    margin-right: 0;
}

.navigation_hidden_wrap .navbar-toggle {
    float:   none;
    width:   48px;
    height:  30px;
    margin:  0 auto;
    padding: 7px 12px 0;
}

.navigation_hidden_wrap .navbar-toggle .icon-bar {
    background: #fff;
}

.header_middle {
    margin: 0 0 35px;
}

.header_middle h1 {
    text-align: left;
}

.header_middle h1 span {
    text-transform: uppercase;
}

.timer_wrap {
    height:                            182px;
    padding-top:                       10px;
    background-image:                  url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/timer_wrap_bg.png);
    background-repeat:                 no-repeat;
    background-position:               center top;
    background-size:                   auto 100%;
    -webkit-animation-delay:           1.5s;
    -webkit-animation-iteration-count: 2;
}

.timer_content {
    font-size:   16px;
    font-weight: 600;
    text-align:  center;
    color:       #fff;
}

.timer_title {
    font-size:     14px;
    line-height:   25px;
    margin-bottom: 18px;
    color:         #000;
}

.timer_title span {
    font-weight:    700;
}

.timer_title .green {
    color: #75ae10;
}

.timer span {
    text-shadow: 2px 4px 6px rgba(0, 0, 0, .8);
}

.timer > span {
    font-size:   52px;
    font-weight: 700;
    line-height: 40px;
    display:     inline-block;
}

.timer .colon {
    font-size:      40px;
    padding:        0 6px;
    vertical-align: top;
}

.timer .minute + .colon, .timer .second {
    opacity: .3;
}

.timer > span > span {
    font-size:  12px;
    display:    block;
    clear:      both;
    margin-top: -8px;
}

.arrow_button_wrap {
    height:              200px;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/arrow_button_wrap_bg.png);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     auto 100%;
}

.arrow_button_wrap a {
    display: block;
    width:   100%;
    height:  100%;
}

.arrow_down {
    width:               50px;
    height:              50px;
    margin:              20px auto 0;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/arrow_down_bg.png);
    background-repeat:   no-repeat;
    background-position: center top;
}

/* (end) Header */

/* Advantages */
.advantages_wrap {
    z-index:    99;
    min-height: 100px;
    padding:    60px 0 0;
    text-align: center;
}

.you_get {
    margin-bottom: 40px;
}

.advantages {
    display:           block;
    background-image:  url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/advantages_sprite.png);
    background-repeat: no-repeat;
}

.advantages-conversion {
    width:               142px;
    height:              142px;
    background-position: -5px -5px;
}

.advantages-design {
    width:               142px;
    height:              141px;
    background-position: -157px -5px;
}

.advantages-hosting {
    width:               142px;
    height:              143px;
    background-position: -309px -5px;
}

.advantages-training {
    width:               143px;
    height:              143px;
    background-position: -461px -5px;
}

.you_get i {
    margin: 0 auto 20px;
}

.you_get p {
    line-height:   18px;
    margin-bottom: 20px;
}

.about_us div {
    height:  230px;
    padding: 40px 25px;
}

.about_us > div:first-of-type {
    border-radius: 5px 0 0 5px;
    background:    #ff8f3c;
}

.about_us > div:nth-of-type(2) {
    background: #ffc232;
}

.about_us > div:nth-of-type(3) {
    background: #9bdb2b;
}

.about_us > div:last-of-type {
    border-radius: 0 5px 5px 0;
    background:    #5fdcab;
}

.about_us p {
    font-size:          26px;
    font-weight:        700;
    line-height:        35px;
    color:              #fff;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition:    all 0.3s ease-in-out 0s;
    -ms-transition:     all 0.3s ease-in-out 0s;
    -o-transition:      all 0.3s ease-in-out 0s;
    transition:         all 0.3s ease-in-out 0s;
}

.about_us > div:hover p {
    transform: scale(1.05);
}

.about_us strong {
    font-size: 80px;
}

.about_us span {
    font-size: 45px;
}

.about_us span.small {
    font-size: 20px;
}

/* (end) Advantages */

/* About_site */
.about_site_wrap {
    min-height:          695px;
    margin-top:          -110px;
    padding:             190px 0;
    background-color:    #000;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/about_site_wrap_bg.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto 100%;
    position: relative;
}
.about_site_wrap:after {
    width: 100%;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .7);
    height: 100%;
    z-index: 0;
}
.about_site {
    z-index: 1;
    position: relative;
}
.about_site p {
    line-height: 30px;
    color:       #fff;
}

.about_site span {
    font-weight:    600;
    text-transform: uppercase;
}

.button {
    display:       inline-block;
    margin-top:    15px;
    text-align:    center;
    border-radius: 5px;
    background:    #0593bc;
    border:        2px solid #0593bc;
}

.button:hover {
    background: none;
}

.button a {
    font-weight:     600;
    display:         block;
    width:           100%;
    height:          100%;
    padding:         10px 20px;
    text-decoration: none;
    color:           #fff;
}

.button:hover a {
    color: #0593bc;
}

.about_site .button:hover {
    background: #ffffff;
    border:     2px solid #ffffff;
}

/* (end) About_site */

/* Work scheme */
.work_scheme_wrap {
    min-height: 100px;
    padding:    60px 0 50px;
    text-align: left;
}

.work_scheme_content_wrap {
    padding: 0 40px;
}

.work_scheme_content i {
    position: absolute;
    top:      -10px;
    left:     60px;
}

.work_scheme_content p {
    font-size:   16px;
    line-height: 18px;
    min-height:  75px;
    margin:      40px 0 15px 110px;
}

.work_scheme_content span {
    font-weight: 700;
    color:       #ffc232;
}

.work_scheme_content .green {
    color: #9bdb2b;
}

.work_scheme {
    background-image:  url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/work_scheme_sprite.png);
    background-repeat: no-repeat;
    display:           block;
}

.work_scheme-1 {
    width:               92px;
    height:              87px;
    background-position: -5px -5px;
}

.work_scheme-2 {
    width:               95px;
    height:              87px;
    background-position: -107px -5px;
}

.work_scheme-3 {
    width:               94px;
    height:              87px;
    background-position: -212px -5px;
}

.work_scheme-4 {
    width:               92px;
    height:              86px;
    background-position: -316px -5px;
}

.work_scheme-5 {
    width:               95px;
    height:              87px;
    background-position: -418px -5px;
}

.work_scheme-6 {
    width:               94px;
    height:              87px;
    background-position: -523px -5px;
}

.work_scheme-7 {
    width:               92px;
    height:              88px;
    background-position: -627px -5px;
}

.work_scheme-8 {
    width:               103px;
    height:              87px;
    background-position: -729px -5px;
}

.work_scheme-9 {
    width:               94px;
    height:              128px;
    background-position: -842px -5px;
}

.work_scheme_wrap .button {
    display: block;
    width:   210px;
    margin:  40px auto 0;
}

/* (end) Work scheme */

/* kinds */
.kinds_wrap {
    min-height:          698px;
    background-color:    #000;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/kinds_wrap_bg.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto 100%;
    position: relative;
}

.kinds_wrap:after {
    width: 100%;
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .85);
    height: 100%;
    z-index: 0;
}

.kinds_content_wrap {
    margin: 0;
}
.kinds_content {
    padding:    30px 0 20px;
    color:      #fff;
    position: relative;
    z-index: 1;
}

.kinds_content h3 {
    text-align: left;
    margin-bottom: 15px;
}

.kinds {
    width:  90%;
    margin: 0 auto;
}
.kinds p {
    margin-top: 17px;
    margin-bottom: 0;
    font-size: 90%;
}
.kinds span {
    color: #00bdf4;
    text-transform: uppercase;
}


/* (end) kinds */

/* Portfolio */
.portfolio_wrap {
    padding:             50px 0;
    background-color:    #0593bc;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio_wrap_bg.png);
    background-repeat:   repeat;
    background-position: left top;
}

.portfolio_content h2 {
    text-align: center;
    color:      #fff;
}

.portfolio {
    width:  94%;
    margin: 0 auto;
}

.portfolio > div {
    float:              left;
    width:              39%;
    height:             280px;
    margin-right:       15px;
    margin-bottom:      15px;
    -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow:    2px 2px 3px 0 rgba(0, 0, 0, .3);
    box-shadow:         2px 2px 3px 0 rgba(0, 0, 0, .3);
}

.portfolio > div.portfolio_sites {
    width:              16%;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
}

.portfolio > div.portfolio_sites > div {
    width:              100%;
    height:             132px;
    margin-bottom:      15px;
    -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow:    2px 2px 3px 0 rgba(0, 0, 0, .3);
    box-shadow:         2px 2px 3px 0 rgba(0, 0, 0, .3);
}

.portfolio > div:nth-of-type(3n) {
    margin-right: 0;
}

.portfolio > div a {
    display: block;
    width:   100%;
    height:  100%;
}

.portfolio .portfolio_1 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_1.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_2 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_2.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_3 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_3.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_4 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_4.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_5 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_5.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_6 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_6.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_7 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_7.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

.portfolio .portfolio_8 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/portfolio/portfolio_8.jpg);
    background-repeat:   no-repeat;
    background-position: center top;
    background-size:     cover;
}

/* (end) Portfolio */

/* Rucenter */
.rucenter_wrap {
    padding:             50px 0;
    background-color:    #fff;
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/rucenter_wrap_bg.png);
    background-repeat:   repeat-x;
    background-position: center bottom;
}

.rucenter {
    font-size: 20px;
}

.rucenter img {
    float:        left;
    margin-right: 50px;
}

/* (end) Rucenter */

/* Clients */
.clients_wrap {
    padding: 50px 0;
}

.clients h2 {
    text-align: center;
}

.clients .row div {
    min-height: 120px;
    overflow:   hidden;
}

.clients .clients_1 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/clients/clients_1.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto;
}

.clients .clients_2 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/clients/clients_2.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto;
}

.clients .clients_3 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/clients/clients_3.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto;
}

.clients .clients_4 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/clients/clients_4.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto;
}

.clients .clients_5 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/clients/clients_5.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto;
}

.clients .clients_6 {
    background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/clients/clients_6.jpg);
    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     auto;
}

.clients a {
    display:  block;
    width:    100%;
    height:   100%;
    position: absolute;
}

/* (end) Clients */

/* Footer */
.footer_wrap {
    min-height: 580px;
}

.footer {
    margin: 0 auto;
}

.footer_wrap .ymaps-2-1-31-controls__toolbar, .ymaps-2-1-31-controls__control {
    display: none !important;
}

.footer_contacts {
    position:   absolute;
    top:        0;
    height:     100%;
    padding:    85px 0;
    color:      #fff;
    background: rgba(0, 0, 0, .7);
}

.footer_contacts > div {
    float:        right;
    width:        60%;
    margin-right: 60px;
    text-align:   left;
}

.footer_contacts .logo {
    width:         150px;
    height:        85px;
    margin-bottom: 20px;
}

.footer_contacts p {
    font-size:   20px;
    font-weight: 600;
    line-height: 30px;
    margin:      20px 0;
    text-shadow: 2px 4px 6px rgba(0, 0, 0, .8);
}

.footer_contacts span {
    font-size:   30px;
    font-weight: 700;
}

.footer_contacts .email a {
    text-decoration: underline;
    color:           #fff;
}

.footer_contacts .button:hover {
    border: 2px solid #ffffff;
}

.footer_contacts .button:hover a {
    color: #ffffff;
}

/* (end) Footer */

/* @Media */
@media (min-width: 1199px) {
    .about_site_wrap:after {
        width: 50%;
    }

    .kinds_wrap:after {
        width: 50%;
    }

    .timer_wrap {
        margin-left: -100px;
    }

    .arrow_button_wrap {
        margin-top: -97px;
        margin-left: 289px;
    }

    .work_scheme_content {
        background-image:    url(http://varnoff-studio.ru/landing/sozdanie-prezentatsii/img/work_scheme_content_bg.png);
        background-repeat:   no-repeat;
        background-position: center top;
        background-size:     100% auto;
    }
}

@media (max-width: 1199px) {

}

@media (min-width: 992px) {
    .about_site_wrap:after {
        width: 50%;
    }

    .kinds_wrap:after {
        width: 50%;
    }

    .navigation {
        float:        right;
        margin-top:   -70px;
        margin-right: -20px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .location {
        margin-left: -150px;
    }

    .location p {
        float: right;
    }

    .nav > li > a {
        font-size:    12px;
        margin-right: 10px;
    }

    .arrow_button_wrap {
        height: 170px;
    }

    .about_us p {
        font-size: 20px;
    }

    .about_us strong {
        font-size: 60px;
    }

    .about_us span {
        font-size: 30px;
    }

    .kinds {
        font-size: 16px;
    }

    .footer_contacts > div {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .header_top p {
        text-align: right;
    }

    .header_bottom {
        margin-top: 20px;
    }

    .navigation_hidden_wrap .nav > li > a {
        font-size: 12px;
        padding:   15px;
    }

    .about_us > div:first-of-type, .about_us > div:last-of-type {
        border-radius: 0;
    }

    .kinds_content {
        padding: 50px 0;
    }

    .kinds_form .button {
        float: left;
    }

    .portfolio > div {
        height: 160px;
    }

    .portfolio > div.portfolio_sites > div {
        height: 72px;
    }

    .footer_contacts > div {
        font-size: 18px;
        width:     80%;
    }
}

@media (max-width: 991px) and (min-width: 767px) {
    .nav > li > a {
        font-size:    12px;
        margin-right: 12px;
        padding:      5px 8px;
    }

    .header_bottom {
        margin-top: 20px;
    }

}

@media (max-width: 767px) {

    .header_wrap .logo {
        margin: 0 auto 20px;
    }

    .header_wrap p {
        text-align: center;
    }

    .nav > li > a {
        margin-right: 0;
    }

    .timer_title {
        font-size: 12px;
    }

    .timer > span {
        font-size: 35px;
    }

    .about_us div {
        min-height: 230px;
    }

    .about_site_wrap {
        min-height: 450px;
        padding:    150px 0 50px;
    }

    .rucenter img {
        margin-right: 25px;
    }
}

@media (max-width: 549px) {
    .about_us p {
        font-size:   20px;
        line-height: 25px;
    }

    .about_us strong {
        font-size: 40px;
    }

    .about_us span {
        font-size: 30px;
    }

    .portfolio > div, .portfolio > div.portfolio_sites {
        clear:        both;
        width:        100%;
        margin-right: 0;
    }
}

@media (max-width: 350px) {
    .work_scheme_content p {
        margin: 90px 0 20px;
    }
}

/* (end) @Media */