@import url('owl.carousel.css');

@import url('owl.theme.css');

@import url('owl.transitions.css');



@font-face {

    font-family: 'open_sans_light';

    src: url('../fonts/opensans-light-webfont.eot');

    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),

    url('../fonts/opensans-light-webfont.woff') format('woff'),

    url('../fonts/opensans-light-webfont.ttf') format('truetype'),

    url('../fonts/opensans-light-webfont.svg#open_sans_condensedbold') format('svg');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'latobold';

    src: url('../fonts/lato-bold-webfont.eot');

    src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),

    url('../fonts/lato-bold-webfont.woff2') format('woff2'),

    url('../fonts/lato-bold-webfont.woff') format('woff'),

    url('../fonts/lato-bold-webfont.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;



}

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    font: 14px/18px 'open_sans_light';

    color: #414042;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

*{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

strong,

h1,

h2,

h3,

h4,

h5,

h6{

    font-family: 'latobold';

}

a{

    color: #4bcaff;

    text-decoration: none;

    -webkit-transition: all 0.35s;

    -moz-transition: all 0.35s;

    -ms-transition: all 0.35s;

    -o-transition: all 0.35s;

    transition: all 0.35s;

}

a:hover{

    color: #414042;

    text-decoration: none;

}

.container{

    max-width: 1170px;

    margin: 0 auto;

}

.container:after{

    content: '';

    clear: both;

    display: block;

}

#wrapper{

    width: 100%;

    position: relative;

    overflow: hidden;

}

#header{

    position: fixed;

    background: rgba(7,7,7,0.65);

    top: 0;

    left: 0;

    width: 100%;

    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

    padding: 0 0 10px;

    z-index: 20;

}

.logo{

    float: left;

    margin: 11px 20px 0 0;

    overflow: hidden;

    text-indent: -9999px;

    background: url("../images/logo.png") no-repeat;

    width: 94px;

    height: 39px;

}

.logo a{

    display: block;

    height: 100%;

}

#header .order{

    float: right;

    border: 1px solid #4bcaff;

    padding: 10px 20px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    color: #fff;

    margin: 17px 0 0 20px;

    background: #4bcaff;

    font-family: 'latobold';

}

#header .order:hover{

    background-color: transparent;

}

#nav{

    overflow: hidden;

    font-size: 12px;

    line-height: 15px;

    text-transform: uppercase;

    margin: 0 0 20px;

    font-family: 'latobold';

}

#nav ul{

    float: right;

}

#nav ul li{

    float: left;

    margin: 0 0 0 37px;

}

#nav ul li:first-child{

    margin: 0;

}

#nav a{

    display: block;

    position: relative;

    padding: 30px 0 0;

    color: #fff;

    -webkit-transition: all 0.35s;

    -moz-transition: all 0.35s;

    -ms-transition: all 0.35s;

    -o-transition: all 0.35s;

    transition: all 0.35s;

}

#nav a:hover,

#nav li.active a{

    color: #4bcaff;

}

#nav a:before{

    content: '';

    background: #4bcaff;

    position: absolute;

    top: 0;

    left: 0;

    height: 2px;

    width: 100%;

    -webkit-transition: all 0.35s;

    -moz-transition: all 0.35s;

    -ms-transition: all 0.35s;

    -o-transition: all 0.35s;

    transition: all 0.35s;

    opacity: 0;

}

#nav a:hover:before,

#nav li.active a:before{

    opacity: 1;

}

#main{

    overflow: hidden;

}

.carousel{

    display: block;

    position: relative;

    border-bottom: 3px solid #4bcaff;

}

.carousel img{

    display: block;

    width: 100%;

    height: auto;

}

.carousel .owl-wrapper-outer{

    z-index: 15;

}

.carousel .owl-controls{

    margin: 0;

    position: static;

}

.carousel .owl-pagination{

    position: absolute;

    bottom: 10px;

    text-align: center;

    left: 0;

    right: 0;

    margin: 0;

    z-index: 20;

}

.carousel .owl-controls .owl-page span{

    border: 2px solid #4bcaff;

    background-color: transparent;

    width: 20px;

    height: 20px;

}

.carousel .owl-controls .owl-page.active span,

.carousel .owl-controls.clickable .owl-page:hover span{

    background: #4bcaff;

}

.carousel .owl-buttons{

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    margin-top: -25px;

}

.carousel .owl-controls .owl-buttons div{

    float: right;

    position: relative;

    z-index: 20;

    -webkit-border-radius: 50% !important;

    -moz-border-radius: 50% !important;

    border-radius: 50% !important;

    padding: 0 !important;

    width: 50px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    background: #4bcaff;

    font-size: 25px;

    -webkit-transition: all 0.35s;

    -moz-transition: all 0.35s;

    -ms-transition: all 0.35s;

    -o-transition: all 0.35s;

    transition: all 0.35s;

}

.carousel .owl-controls .owl-buttons div:first-child{

    float: left;

}

#price{

    background: #f9f9f9;

}

.main-block{

    padding: 90px 0;

    position: relative;

}

.main-block.tariffs {
    padding-top: 120px;
}

#main h1{

    font-size: 36px;

    line-height: 40px;

    margin: 0 0 10px;

    text-align: center;

    text-transform: uppercase;

}

#main h2{

    font-size: 20px;

    line-height: 24px;

    margin: 0 0 20px;

    text-align: center;

    text-transform: uppercase;

}

.box-holder .box{

    border-top: 1px solid #4bcaff;

    padding: 50px 20px;

    overflow: hidden;

    display: table;

    width: 100%;

}

.box-holder .box > *{

    display: table-cell;

    width: 60%;

    vertical-align: middle;

}

.box-holder .box .img-holder{

    width: 25%;

}

.box-holder .box img{

    display: block;

    height: auto;

    max-width: 100%;

}

.box-holder .left{

    padding: 0 50px 0 0;

}

.box-holder .right{

    padding: 0 0 0 50px;

}

.box-holder .text{

    overflow: hidden;

}

.price-holder{

    text-align: center;

    margin: 0 0 20px;

}

.price-block{

    width: 30%;

    display: inline-block;

    vertical-align: middle;

    margin: 0 -4px 0 0;

    padding: 0 15px;

    font-size: 18px;

    line-height: 24px;

}

.price-block.big{

    width: 40%;

}

.price-block .holder{

    border: 1px solid #dad7d7;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    background: #f9f9f9;

    padding: 0 0 24px;

}

.container > p{

    margin: 0 0 20px;

}

.price-block header{

     font: 17px/70px 'latobold';

     color: #d7d7d7;

}

.price-block.big header{

    font: 20px/70px 'latobold';

}

.price-block .price{

    font: 35px/115px 'latobold';

    background: #91c46b;

    display: block;

    color: #fff;

    text-shadow: 0 2px 2px #000;

    margin: 0 0 20px;

}

.price-block.big .price{

    padding: 20px 0;

}

.price-block p{

    margin: 0 0 20px;

}

.price-block .btn{

    display: block;

    max-width: 171px;

    margin: 0 auto;

    font: 15px/49px 'latobold';

    color: #fff;

    background: #91c46b;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    border: 2px solid #91c46b;

}

.price-block.blue .price,

.price-block.blue .btn{

    background: #4bcaff;

    border-color: #4bcaff;

}

.price-block.orange .price,

.price-block.orange .btn{

    background: #fd7c00;

    border-color: #fd7c00;

}

.price-block .btn:hover{

    background-color: transparent;

    color: #91c46b;

}

.price-block.blue .btn:hover{

    background-color: transparent;

    color: #4bcaff;

}

.price-block.orange .btn:hover{

    background-color: transparent;

    color: #fd7c00;

}

.map-block{

    position: relative;

    background: url("../images/map_kk.jpg") no-repeat 50% 50%;

    -webkit-background-size: cover;

    background-size: cover;

    height: 698px;

}

.order-form{

    position: absolute;

    height: 500px;

    width: 324px;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    background: rgba(75, 202, 255, 0.8);

    padding: 16px 27px;

    top: 50%;

    left: 50%;

    margin: -250px 0 0 -162px;

    text-align: center;

}

.order-form legend{

    display: block;

    font: 36px/40px "latobold";

    color: #fff;

    padding: 0 0 10px;

}

.order-form textarea,

.order-form input[type="text"]{

    display: block;

    width: 100%;

    margin: 0 0 15px;

    background: #fff;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    border: none;

    height: 34px;

    line-height: 34px;

    font-size: 14px;

    text-align: center;

}

.order-form textarea{

    height: 145px;

    resize: none;

}

.order-form input[type="submit"]{

    display: block;

    width: 190px;

    margin: 0 auto;

    background: #414042;

    border: none;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    height: 45px;

    color: #72b3cc;

    font: 20px "latobold";

    cursor: pointer;

    -webkit-transition: all 0.35s;

    -moz-transition: all 0.35s;

    -ms-transition: all 0.35s;

    -o-transition: all 0.35s;

    transition: all 0.35s;

    -webkit-box-shadow: 0 3px 0 1px #313032;

    -moz-box-shadow: 0 3px 0 1px #313032;

    box-shadow: 0 3px 0 1px #313032;

}

.order-form input[type="submit"]:hover{

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}

.order-form p{

    margin: 0 0 15px;

}

.payments-holder{

    text-align: center;

}

.payments{

    padding: 20px 0;

    overflow: hidden;

    display: inline-block;

    vertical-align: top;

    text-align: left;

}

.payments > .col{

    padding: 0 36px 0 40px;

    float: left;

}

.payments .liqpay{

    background: url("../images/liqpay.png") no-repeat;

    width: 153px;

    height: 138px;

    float: right;

}

.payments .bank:before{

    float: left;

    background: url("../images/bank.png") no-repeat;

    width: 153px;

    height: 138px;

    -webkit-background-size: contain;

    background-size: contain;

    margin: 0 20px 0 0;

    content: '';

}

.payments .bank dl{

    float: left;

}

.payments .bank dl dt{

    float: left;

    width: 150px;

    margin: 0 20px 10px 0;

    font-weight: bold;

}

.payments .bank dl dd{

    overflow: hidden;

    margin: 0 0 10px;

}

address{

    font-weight: bold;

    display: block;

    margin: 0 0 20px;

}

.phones-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.phones li {
    font-size: 20px;
}

.phones li:before{

    display: inline-block;

    vertical-align: middle;

    content: '';

    width: 50px;

    height: 35px;

    margin: 0 20px 0 0;

}

.phones li.life:before{

    background: url("../images/lifecell.png") no-repeat center;

    -webkit-background-size: contain;

    background-size: contain;

}

.phones li.ks:before{

    background: url("../images/kyivstar.png") no-repeat center;

    -webkit-background-size: contain;

    background-size: contain;

}

.phones li.vodafone:before{

    background: url("../images/vodafone.png") no-repeat center;

    -webkit-background-size: contain;

    background-size: contain;

}

#footer{

    background: #414042;

    padding: 20px;

    color: #fff;

}

#footer p{

    margin: 0;

}

@media screen and (max-width: 1300px) {

    #header{

        padding: 0 20px;

    }

}

@media screen and (max-width: 1024px) {



}