@font-face {

    font-family: 'ProximaNovaBold';

    src: url(../fonts/ProximaNova-Bold.ttf);

}

@font-face {

    font-family: 'ProximaNova';

    src: url(../fonts/ProximaNova-Regular.ttf);

}

@font-face {

    font-family: 'MyriadPro';

    src: url(../fonts/MyriadPro-Regular.otf);

}

@font-face {

    font-family: 'UniNeueBold';

    src: url(../fonts/UniNeueBold.ttf);

}


@font-face {
    font-family: "Kelson Sans Regular RU";
    src: url("../fonts/Kelson_Sans_Regular_RU.eot");
    src: url("../fonts/Kelson_Sans_Regular_RU.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Kelson_Sans_Regular_RU.woff") format("woff"),
    url("../fonts/Kelson_Sans_Regular_RU.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "KelsonSansLight"; */
@font-face {
    font-family: "Kelson Sans Light RU";
    src: url("../fonts/Kelson_Sans_Light_RU.eot");
    src: url("../fonts/Kelson_Sans_Light_RU.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Kelson_Sans_Light_RU.woff") format("woff"),
    url("../fonts/Kelson_Sans_Light_RU.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "KelsonSansBold"; */
@font-face {
    font-family: "Kelson Sans Bold RU";
    src: url("../fonts/Kelson_Sans_Bold_RU.eot");
    src: url("../fonts/Kelson_Sans_Bold_RU.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Kelson_Sans_Bold_RU.woff") format("woff"),
    url("../fonts/Kelson_Sans_Bold_RU.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
.content{
    width: 100vw;
    overflow-x: hidden;

}

h2{
    font-family: ProximaNovaBold, Calibri, Arial, serif;
}

.head{
    /*font: 28px "Kelson Sans Bold RU";*/
    font-family: ProximaNovaBold, Calibri, Arial, serif;
    font-size: 2rem;
    text-align:center;
}

* {
    color:#050505;
    font-family: MyriadPro, Calibri, Arial, serif;
    font-size: 16px;


}

img {
    max-width: 100%;
    height: auto;
}
.clear
{
    clear:both;
}
.container{
    max-width: 1280px !important;
}

.but {
    display: block;
    width:150px;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    border: 2px solid #fff;
    color: #fff;

}
.but:hover{
    text-decoration: none;
    color: #fff;
    /*border: 2px solid #f57c57;*/
}

.break {
    flex-basis: 100%;
    height: 0;
}
/*center {*/
/*    display: none !important;*/
/*}*/

#head {
    height: 93px;
    margin-left: auto;
    margin-right: auto;

}
#head .row{
    margin-left: auto;
    margin-right: auto;
}
#head  .logo{
    background-color: #3886AB;
    /*margin-left: 10px;*/
    /*margin-right: 10px;*/
}
#head  .logo > * {
    float:right;
}
#head  .logo > .align-items-center{
    max-width:300px;
    width: 100%;
    display: flex;
}

#head .logo img{
    max-width:150px;
    width: 100%;
    height: auto;
    margin-right:10px;
}
#head  .logo  .name_com{

    color:#fff;
    margin-top:-12px;
}
#head  .logo  .name_com p {
   margin: 0;
    font-size: 11px;
    line-height: 15px;
    color: #fff;
}


#head  .menu{
    background-color: #E0E3E4;
    color: #373E46;
    justify-content:space-between !important;
    /*padding: 0 30px;*/
}
#head .nav-item {
    min-width: 150px;
    font-size: 18px;
    text-align: center;
}
#head  .menu a{
    color: #373E46;
}
#head  .menu a.active, #head  .nav a:hover{
    color:#F35B4D;
}


#head  .phone{
    background-color: #F35B4D;
    display: block;
    padding-top:10px;

}
#head  .phone  .nav-item{
    text-align: left;
}

#head  .phone a,  #head  .phone a:hover{
    color:#fff;
    font-size: 16px;
    display: block;
    font-weight: bold;
}
#head  .phone a img {
    width: 20px;
    margin-right:7px;

    height: auto;
}



@media (max-width: 1227px){
    #head .nav-item {
        min-width: auto;
    }
}

@media (max-width: 1000px) and (min-width:935px) {

    #head  .logo  .name_com{
        display: none;
    }

    #head .logo > .align-items-center{
        width: 133px;
    }

    #head .logo img{
        min-width:150px;

    }

}

@media (max-width:935px) {
    #head > * {
        width: 100%;
        display: block;
        max-width: 100%;

    }
    #head {
        height: auto;
        display: block;
    }
    #head .logo  {
        height:90px;
        display: flex;
    }
    #head .logo.justify-content-sm-center{
        justify-content: center !important;
    }
    #head  .phone  .nav-item a{
        text-align: center;
    }
}

@media (max-width:350px) {
    #head  .menu{
        height: auto !important;
    }
    #head .nav-item {
        min-width: 100%;
    }
}



/* Растягиваем контейнер на 100% по ширине */
.sliber-main .jcarousel-container-horizontal { width: 100%;  }
.sliber-main .jcarousel-clip-horizontal { width: 100%; }


/* Задаем размер одного блока */
.sliber-main .jcarousel-item, .sliber-main .jcarousel-list LI { width: 703px; height: 370px; }


/* Задаем внешний вид и расположение кнопок управления */
.sliber-main .jcarousel-next-horizontal {
    position: absolute;

    top: 180px;
    right: 35px;
    width: 32px;
    height: 22px;
    cursor: pointer;
    background-size: cover !important;
    background: transparent url(../images/arrow_right.svg) no-repeat 0 0;
}
.sliber-main .jcarousel-next-disabled-horizontal,
.sliber-main .jcarousel-next-disabled-horizontal:hover,
.sliber-main .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: 0px 0; }
.sliber-main .jcarousel-prev-horizontal {
    position: absolute;
    top: 180px;
    left: 35px;
    width: 32px;
    height: 22px;
    cursor: pointer;
    background-size: cover !important;
    background: transparent url(../images/arrow_left.svg) no-repeat 0 0;
    z-index: 20;
}
.sliber-main .jcarousel-prev-disabled-horizontal,
.sliber-main .jcarousel-prev-disabled-horizontal:hover,
.sliber-main .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: 0px 0; }

.sliber-main .picture img{

}

.sliber-main a::before{
    content: '';
    width: 703px; height: 370px;
    position: absolute;
    top: 0;
    z-index: 20;
    display: block;

    background-color: rgba(50, 67, 83, .7);
    transition: transform 1s, opacity 2s;
}
.sliber-main{
    position: relative;
}
.sliber-main .big-logo {
    position: absolute;
    top: 50%;
    left:50%;
    margin-left:  calc(0px - 350px / 2 - 50px);
    margin-top:  calc(0px - 180px / 2);
    z-index: 30;
    width: 400px;
    height: 180px;
    -webkit-filter: drop-shadow(  0px 2px 0px rgba(34, 60, 80, 0.2) );
    filter: drop-shadow(  0px 2px 0px rgba(34, 60, 80, 0.2) );

}

.sliber-main:hover a::before{

    animation: sliber-main  1s infinite ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.sliber-main:hover .big-logo {
    /*display: none;*/
    /*opacity: 0;*/
    animation: sliber-main  1s infinite ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes sliber-main {
    from {opacity: 1;}
    to {opacity: 0; visibility: hidden }
}

@media (max-width:768px) {
    .sliber-main .big-logo {

        margin-left:  calc(0px - 250px / 2 - 30px);
        margin-top:  calc(0px - 150px / 2);

        width: 300px;
        height: auto;

    }

    .sliber-main .jcarousel-prev-horizontal, .sliber-main .jcarousel-next-horizontal{
        display: none !important;
    }


}


#job {
    min-height:550px;
    background-color: #F0F0F0;
    text-align: center;
    padding-top: 100px;
}

#job h2{
    margin-bottom:20px;
}

#job p{
    color:#4C4C4C;
    font-size: 20px;
}

#job .list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

#job .list > div {
    position: relative;
    width: 130px;
    margin: 40px 30px;
    font-weight: bold;
    padding-top: 135px;
    /*border: 1px solid red;*/
}

#job .list > div:hover  img{
    position: absolute;
    top: 0;
    /*left:calc((110px - 96px)  / 2 *-1);*/
    left:calc((130px - 110px)  / 2);
    max-width: 110px !important;
    width: 110px !important;
    /*transition: max-width 0.3s;*/

}




#job .list img {
    /*margin: 20px;*/
    max-width: 96px;
    width: 100%;


    position: absolute;

    top: 0;
    left:calc((130px - 96px)  / 2);

}

#tv{
    background-color: #F57C57;
    position: relative;
    min-height: 235px;
    padding-top:70px;
    padding-bottom:20px;
}
#tv .container {
    max-width: 1100px !important;
}
#tv p {
    margin-left: 200px;
    color:#fff;
    font-size: 20px;
}
#tv img{
    position: absolute;
    bottom: -70px;
    width:160px;
    z-index: 2;
}
@media screen and (max-width: 1024px)
{
    #tv {
        padding-top: 50px;
    }
    #tv img{
        display: none;
    }
    #tv p {
        margin-left: 0;
    }
}


#map
{

    height:852px;
    background-image: url(../images/map.png) ;
    background-color: #c3d9e2;
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-top:20px;
}

#map .quote
{
    max-width:550px;
    width: 90%;
    height:100px;
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-63px;
    margin-left:calc(550px / 2 * -1);
    font-size: 40px;
    border:2px solid #fff;
    background-color: rgba(0,0,0, 0.3);
    font-family: ProximaNovaBold, Calibri, Arial, serif;
    text-transform: uppercase;

    text-align:center;
    color:#fff;
    padding-top:20px;

}
#map h2{
    text-align: center;
    color: #fff;
    font-family: UniNeueBold, Calibri, Arial, serif;
    letter-spacing: 13px;
    font-size: 18px;

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

    #map
    {
        height:460px;

        background-size: cover;


    }

    #map .quote
    {
        width:508px;
        height:96px;

        margin-top:-48px;
        margin-left:-254px;
        padding-top:20px;
        font-size: 30px;
    }
}


#about{
    background-color: #2094c0;
    height: 758px;
    min-height: 758px;
    position: relative;

    background-repeat: no-repeat;
    transition: transform 1s, background-position 0.1s;


/*    background-image: url(../images/skiba_man_ab.png),*/
/*    url(../images/skiba_man_c.png)*/
/*;*/

}

#about .row{
    min-height: 661px;
}
#about h2 {
    margin-bottom: 30px;
}
#about h2, #about p {
    color: #fff;
}
#about .image{
    position: relative;
}
#about .about {
    padding-top: 100px;
    padding-bottom: 100px;
}
#about  #parallax{

}
#about .but{
    background-color: rgba(0,0,0, 0.3);
    margin-top: 30px;
}

@media screen and (max-width: 1200px)
{
    #about{
        background-size: 700px;
    }
}
@media screen and (max-width: 991px)
{
    #about{
        background-color: #2094c0;
        min-height: 561px;
        background-image: none;
        height: auto;
    }
    #about .row{
        min-height: 461px;
    }
}


#command {
    min-height:550px;
    background-color: #F0F0F0;
    text-align: center;
    padding: 100px 0;

}

#command h2, #command p {
    color:#121212;
}



#command .list {
    display: flex;
    max-width:1100px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

#command .list > div {
    padding-top:20px;
    width: 150px;
    height:200px;
    margin: 20px 20px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;

}

#command .list img{
    max-width: 130px;
    height: 130px;
}


#how-do-we-work {
    min-height:550px;
    background-color: #fff;
    text-align: center;
    padding: 100px 0;
}
#how-do-we-work .how-do-we-work{
    margin-top: 100px;

}
#how-do-we-work .how-do-we-work > div{
    display: flex;
    justify-content: center;
    /*width:523px;*/
}
#how-do-we-work .how-do-we-work > div > div{
    /*border: 1px solid red;*/
    height: 90px;
    align-items: center;
    justify-content: center;
    display: flex;
}

#how-do-we-work .how-do-we-work .text-left,  #how-do-we-work .how-do-we-work .text-right {
    width: 280px;
    display: block;
    padding-top: 20px;
    color:#4C4C4C;

}

#how-do-we-work .how-do-we-work .text-left a,  #how-do-we-work .how-do-we-work .text-right a{
    color:#4C4C4C;
    text-decoration: underline;
}

#how-do-we-work .how-do-we-work .text-right{
    text-align: left !important;
}
#how-do-we-work .how-do-we-work .text-left{
    text-align: right !important;
}

#how-do-we-work .how-do-we-work .arrow-left, #how-do-we-work .how-do-we-work .arrow-right{
    width:44px;
}

#how-do-we-work .how-do-we-work .arrow-left img, #how-do-we-work .how-do-we-work .arrow-right img{
    width: 11px;
    height: 17px;
}

#how-do-we-work .how-do-we-work .icon{
    width:116px;
}
/*#how-do-we-work .how-do-we-work .icon > div{*/
/*    width: 90px;*/
/*    height: 90px;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    display: flex;*/
/*    background-color: #f0f0f0;*/
/*    border-radius: 45px;*/
/*}*/

#how-do-we-work .how-do-we-work .icon >  img{
    width: 90px;
    height: 90px;
}


#how-do-we-work .how-do-we-work .line .icon >  img{
    width: 2px;
    height: 86px;
}

@media screen and (max-width: 720px)
{
    #how-do-we-work .how-do-we-work .arrow-left,
    #how-do-we-work .how-do-we-work .arrow-right,
    #how-do-we-work .how-do-we-work .empty
    {
        display: none;
    }
    #how-do-we-work .how-do-we-work .line{
        display: none;
    }

    #how-do-we-work .how-do-we-work .text-right,
    #how-do-we-work .how-do-we-work .text-left{
        order:1;
        text-align: left !important;
    }

    #how-do-we-work .how-do-we-work .icon{
        margin-right: 20px;
    }

    #how-do-we-work .how-do-we-work > div{
        margin-bottom: 20px;
    }

}


#buttons{
    height:128px;
    margin-left: auto;
    margin-right: auto;
}
#buttons .but{
    height: 60px;
    width:280px;
    font-size: 23px;
    line-height: 55px;
}

#buttons > div{
    padding:33px;
}

#buttons div:first-child{
    background-color: #f7693d;
}
#buttons div:first-child .but{
    float: right;
}
#buttons div:last-child{
    background-color: #2094c0;

}

@media (max-width:768px) {
    #buttons.row {
        display: block !important;
        height:auto;
    }
    #buttons.row > div {
        height: 128px;
        display: flex;
        justify-content: center;

    }
}

#partners{

    min-height:550px;
    background-color: #F0F0F0;
    text-align: center;
    padding: 100px 0;
}

#partners .partners{
    margin-top: 100px;
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

}
#partners .partner{
    max-width: 250px;
    width: 100%;
    height: 150px;
    background-color: #fff;
    border:1px solid #dfdfdf;
    margin: 15px;
    display: flex;

    justify-content: center;
    align-items: center;
}

#partners .partner img{
    filter: grayscale(100%);
    max-width:95%;
    height: auto;
    max-height: 95%;
}
#partners .partner img:hover{
    filter: grayscale(0);
}

#partners h2, #partners p {
    color:#121212;
}


#footer{
    height:120px;
    margin-left: auto;
    margin-right: auto;
    background-color: #e0e3e4;
    width: 100%;
}

#footer .soc{
    display: flex;

    justify-content: center;
    align-items: center;

}
#footer .soc a{
    width:44px;
    height:44px;
    line-height: 50px;
    text-align: center;

    border-radius: 25px;
    background-color: #3886ab;

    font-size: 25px;
}
#footer .soc a:hover{
    background-color: #f35b4d;
}
#footer .soc a .fa{
    color:#fff;
}
#footer .soc > * {
    margin:10px;
}

#footer .copy{
     line-height :120px;
    position: relative;
}

#footer .copy .line{
    width: 60px;
    height: 5px;
    background-color: #f35b4d;
    position: absolute;
    top:75px;
    left:30px;
}

@media screen and (max-width: 740px)
{
    #footer{
        display: block;
        height:auto;
    }
    #footer .copy{
text-align: center;
    }
    #footer .copy .line{
        display: none;
    }
    #footer .soc > div {
        display: none;
    }
}



/* Наши услуги */
#service
{
    background-color: #1D8FB1;
    color:#fff;
    padding:20px 0;
}
#service p
{

    margin:0 auto;
    color: #fff;
}



#service .head
{

    color:#fff;
    text-align: center;
    margin:0 0 10px 0;
}

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

}



div.work
{
    /*height:315px;*/
    margin-bottom: 50px;

    margin:20px auto;
    display: flex;
}

div.work > div {
    width: 100%;
}
div.work .images
{
    max-width:360px;


}
div.work .images img
{
    width:170px;
    margin:1px;
    float:left;
}
div.work .images img.first
{
    width:346px;
}
div.work .info
{
    max-width:683px;
    float:right;
    border:2px solid #E4E7E8;


}
div.work .info p
{
    /*font-family: "Kelson Sans Light RU";*/
    /*font-size: 17px;*/
    padding:10px;
    color:#4E5354;
}
div.work .info .head2
{
    padding:10px;
    color:#1D8FB1;
    font-size: 15px;
}

div.work .price
{
    width:140px;
    display:block;
    font: 17px/30px "Kelson Sans Regular RU";
    color:#fff;
    text-align:center;
    background-color: #E45A39;
    float:right;
    vertical-align: middle;
    margin:10px;
}

div.work .head
{
    background-color: #E4E7E8;
    font: 20px/60px "Kelson Sans Bold RU";
    color:#4E5354;
    text-align:left;
    padding-left:20px;
}




div.work .order
{
    width:140px;
    display:block;
    font: 17px/28px "Kelson Sans Regular RU";
    color:#1D8FB1;
    text-align:center;
    border:1px solid #1D8FB1;
    float:right;
    vertical-align: middle;
    text-decoration: none;
    margin:10px 20px 20px 10px;
}

div.work .order:hover
{
    background-color: #1D8FB1;
    color:#fff !important;
}

@media screen and (max-width: 1024px)
{
    div.work {
        display: block;

    }
    div.work .info{
        float: none;
    }

    div.work .images{
        display: none;
    }
    .order {
        margin: 10px 10px 10px 10px;
    }
}



#faq
{
    background-color: #CCCED0;
    padding:20px 0;
    margin-top:20px
}
#faq .head
{
    color:#1D8FB1;
}
#faq p, .quest
{

    margin:10px auto;
    color:#4E5354;


}
#faq p.otvet
{


}

.quest .otvet
{
    display:none;

}

#faq .quests a
{
    color:#4E5354;
}
#faq .phone
{
    color:#1D8FB1;

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

        margin-top:20px
    }

    #faq p, .quest
    {

        margin:10px auto;



    }
    #faq p.otvet
    {


    }

}

#payment p
{

    margin:10px auto;

}
#payment
{
    color:#4E5354;
    padding:20px 0;
    overflow:auto
}
#payment .grid-4{
    display: flex;
    justify-content: center;


}
#payment .items
{

    margin:30px auto;

}
#payment .items .row
{

    text-align:center;
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
#payment .items p
{
    width:100%;
    text-align:center;
    font-size:14px;
}

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



    }

    #payment .items
    {


    }

}

#winbox2
{
    background: #030000;



    display:none;
    position: absolute;
    box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);

    z-index: 900000000000;
    font-size:20px;
    color:#000;
    padding:15px;
    font-weight:bold !important;
}



#portfolio .top
{
    background-color: #1D8FB1;
    padding:10px;
}
#portfolio .top .head
{
    color:#fff;
}
#portfolio .top .sections
{

    margin:30px auto;
    text-align: left;

}
#portfolio .top a
{
    color:#fff;
    padding: 5px;
    display: inline-block;
}

#portfolio .top a.selwork
{
    background-color: #E45B39;

}
#portfolio .works
{


    margin:30px auto;
}

#portfolio .work
{
    width:150px;
    height:150px;
    display:block;
    float:left;
    margin:5px;
    overflow: hidden;

}
#portfolio .work div
{
    width:150px;
    height:150px;
    position:relative;
}

#portfolio .work div .title
{
    position: absolute;
    bottom:-50px;
    background-color: #1D8FB1;
    height:50px;
    padding:5px;
    color:#fff;
    transition-property: bottom;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    opacity: 0.9;

}
#portfolio .work:hover .title
{
    bottom:0;
}
#portfolio_work
{

    margin:30px auto;
}
#portfolio_work .text
{
    margin:20px 0;
    background-color: #CCCED0;
    padding:10px;
}
@media screen and (max-width: 1024px)
{



}

#contakts
{
    background-color: #1D8FB1;
    padding:100px 0;

    min-height:400px;


}
#contakts * {
    color:#fff;
}
#contakts h1{
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
#contakts p
{


    color: #fff;
}
#contakts .items {

    margin: 30px auto;
}
#contakts b
{
    color: #f8ba95;
}

@media screen and (max-width: 1024px)
{
    #contakts .row {
        display: block;
    }
    #contakts .row > div {
        margin-top: 20px;
    }
}

#mbnr4web {display: none}

MCMSwindow{
    width: 100% !important;
}


.soc  {
    font-size: 21px;
    line-height: 40px;

}

.soc i {
    color:#fff !important;
}


.soc_contacts {
    background-color: #fe7e71;
    width: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 935px) {
    .soc_contacts {
        width: 100%;
        flex-direction: row;

    }
    .soc {
        margin: 10px;
    }
}