html{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
body{
    font-family: 'Open Sans Condensed', sans-serif;
    color:#444444;
    background:#ffffff;
    display: flex;
    flex-direction: column;
    flex: auto;
}
a{
    color:#000000;
}
a:hover,
.pic:hover +.name a
{
    color:#ff5500;
}

.pages{
    clear: left;
    font-size: 18px;
    font-family: Arial, sans-serif;
    margin: 30px 0;
}
.pages a, .pages span{
    margin-right: 1px;
    display: inline-block;
    line-height: 40px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #FFFFFF;
}
.pages .active{
    font-weight: bold;
    background: #000000;
    color: #FFFFFF;
}
.pages a:hover{
    background: #FFFFFF;
}


/*  base structure  */
header{
    height: 60px;
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: space-between;*/
    box-sizing: border-box;
    position: relative;
}
.content{
    flex-grow: 1;
    box-sizing: border-box;
    position: relative;
}

footer{
    height: 60px;
    position: relative;
}

/* HEADER */

header .logo{
    position: absolute;
    top: 0;
    left: 13%;
    line-height: 60px;
}
header .logo a{
    line-height: 60px;
    display: inline-block;
}
header .logo img{
    vertical-align: middle;
    width: 250px;
}

header .phone{
    position: absolute;
    top: 0;
    right: 45%;
    line-height: 60px;
    font-size: 22px;
}
header .phone a{
    text-decoration: none;
}
header .email{
    position: absolute;
    top: 0;
    right: 27%;
    line-height: 60px;
    font-size: 22px;
}
header .email a{
    text-decoration: none;
}

header .social{
    position: absolute;
    right: 13%;
    height: 60px;
    font-size: 24px;
}

header .social a{
    display: inline-block;
    width: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    color: #959493;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    transition: background 0.2s;
}
header .social a:hover{
    color: #ffffff;
    background: #959493;
}

.bar-menu{
    display: none;
}
.button-aside{
    display: none;
}

/* FOOTER */
footer{
    border-top: 1px solid #f0f0f0;
}
footer .logo{
    position: absolute;
    top: 0;
    left: 13%;
    line-height: 60px;
}
footer .logo a{
    line-height: 60px;
    display: inline-block;
}
footer .logo img{
    vertical-align: middle;
    width: 250px;
}

footer .phone{
    position: absolute;
    top: 0;
    right: 45%;
    line-height: 60px;
    font-size: 22px;
}
footer .phone a{
    text-decoration: none;
}
footer .email{
    position: absolute;
    top: 0;
    right: 27%;
    line-height: 60px;
    font-size: 22px;
}
footer .email a{
    text-decoration: none;
}

footer .social{
    position: absolute;
    right: 13%;
    height: 60px;
    font-size: 24px;
}

footer .social a{
    display: inline-block;
    width: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    color: #959493;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    transition: background 0.2s;
}
footer .social a:hover{
    color: #ffffff;
    background: #959493;
}

.content ul,
.content ol{
    padding: 0 0 0 20px;
}
.content ul li,
.content ol li{
    margin: 4px 0;
}

.main-menu{
    position: relative;
}
.main-menu ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 0 0 13%;
    box-sizing: border-box;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.main-menu ul li{
    display: inline-block;
    margin: 0;
    padding: 0;
}
.main-menu ul li a{
    display: inline-block;
    line-height: 30px;
    color: #ffffff;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
}
.main-menu ul li a:hover{
    text-decoration: underline;
}
.main-menu ul li:before{
    content: "\2022";
    display: inline-block;
    line-height: 30px;
    color: #ffffff;
    padding: 0 8px 0 8px;
}
.main-menu ul li:first-child:before {
    display: none;
}
.main-menu a.active{
    color: #bbbbbb;
}

.portfolio{
    position: relative;
    margin: 0;
}

.content .slider ul, .content .slider li{
    list-style: none;
    margin: 0;
    padding: 0;
}

.content .slider li{
    display: block;
    width: 100%;
    text-align: center;
}

.slider img{
    display: none;
    margin: auto;
}

.portfolio .description{
    position: absolute;
    top: 50px;
    left: 15%;
    width: 20%;
    min-width: 400px;
    background: rgba(255, 255, 255, 0.9);
    padding-bottom: 3px;
    z-index: 10;
}
.portfolio .description .h{
    padding: 15px 15px 15px 15px;
    text-align: center;
    font-size: 22px;
    text-transform: uppercase;
}
.portfolio .description .cont{
    padding: 15px 15px 15px 15px;
    color: #000000;
}
.portfolio .animated-cont{
    display: none;
}
.portfolio .description .cont p:first-child{
    margin-top: 0;
}

.portfolio .description .descr-toggle{
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 0;
    left: 50%;
    margin-left: -25px;
    margin-bottom: -25px;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    color: #000000;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.portfolio .description .descr-toggle:hover{
    opacity: 1;
}
.portfolio .description .descr-toggle.up:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background: url("/img/arrows.png") 0 -50px no-repeat;

}
.portfolio .description .descr-toggle.down{
    opacity: 1;
}
.portfolio .description .descr-toggle.down:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background: url("/img/arrows.png") -50px -50px no-repeat;
}

.portfolio .back{
    position: absolute;
    display: inline-block;
    top: 0;
    left: 120%;
    z-index: 1000;

    color: #ffffff;
    opacity: 0.7;
    font-size: 30px;
    line-height: 50px;
    text-decoration: none;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.portfolio .back span{
    font-family: "Open Sans Condensed", sans-serif;
    white-space: nowrap;
    font-size: 18px;
    line-height: 50px;
    padding-left: 10px;
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
}
.portfolio .back:hover{
    opacity: 1;
}


.owl-controls .owl-prev,
.owl-controls .owl-next
{
    position: absolute;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    opacity: 0.7;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.owl-controls .owl-prev:hover,
.owl-controls .owl-next:hover
{
    opacity: 1;
}

.owl-controls .owl-prev{
    left: 0;
    background: url("/img/arrows.png") 0 0 no-repeat;
}
.owl-controls .owl-next{
    right: 0;
    background: url("/img/arrows.png") -50px 0 no-repeat;
}


.contacts{
    background: url("/img/contacts.jpg") center 0 no-repeat;
    background-size: contain;
    padding-top: 30px;
    margin: 0;
}

.contacts .contacts-content{
    position: relative;
    left: 24%;
    width: 17%;
    min-width: 230px;
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    text-align: center;
    font-size: 22px;
    z-index: 1000;
}

.contacts .contacts-content .cont .fa{
    display: block;
    height: 30px;
    width: 30px;
    margin: auto;
    line-height: 30px;
    font-size: 18px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #444444;
    color: #ffffff;
    text-align: center;
}
.contacts .contacts-content .cont{
    display: block;
    text-decoration: none;
    padding: 15px;
}

.contacts .social{
    height: 60px;
    font-size: 24px;
}

.contacts .social a{
    display: inline-block;
    width: 40px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    color: #959493;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    transition: background 0.2s;
}
.contacts .social a:hover{
    color: #ffffff;
    background: #959493;
}

.contacts-gmap{
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 1;
    display: none;
}


/* SERVICES */
.content-page{
    margin: 0;
    padding: 50px 0 0 0;
}
.services{
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.services-items{
    position: relative;
    display: table-cell;
    padding-left: 10%;
    padding-right: 4%;
}

.services-items .cont{
}

.services-img{
    display: table-cell;
    width: 50%;
}

.services-items .item h3{
    cursor: pointer;
    color: #000000;
    font-weight: normal;
    margin: 5px;
}
.services-items .item h3:before{
    content: "\2014";
    margin-right: 10px;
}
.services-items .item h3 span{
    /*border-bottom: 1px dashed #000000;*/
}
.services-items .item h3.active span{
    border: 0;
    color: #888888;
}


.services-items .screen-items .screen-item{
    display: none;
}

.services-img{
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 70% auto;
}

.mobile-cont{
    display: none;
}


/* GALLERY */

.gallery{
    background: url("/img/gallery.jpg");
    padding-top: 70px;
    padding-bottom: 20px;
}
.gallery .container{
    margin: 0 13%;
}

.gallery .item{
    display: inline-block;
    width: 31%;
    margin: 2px 0;
    padding: 1% 1% 3px 1%;

    background: #ffffff;
    text-align: center;
}
.gallery .item .pic img{
    width: 100%;
    vertical-align: top;
}
.gallery .item .name{
    height: 23px;
    overflow: hidden;
}
.gallery .item .name a{
    white-space: nowrap;
    text-decoration: none;
}

.about{
    margin: 0 10%;
}
.about-img{
    float: right;
    margin: 0 0 0 40px;
    width: 50%;
}
.about-img img{
    width: 100%;
}

.about-content{
    overflow: hidden;
}
@media all and (max-width: 1280px) and (min-width: 970px) {
    header .logo, footer .logo{
        left: 40px;
    }
    .main-menu ul{
        padding-left: 50px;
    }
    .gallery .container {
        margin: 0 40px;
    }
}
@media all and (max-width: 970px) and (min-width: 761px) {
    header .logo, footer .logo{
        left: 5px;
    }
    header .social, footer .social{
        right: 5px;
    }
    header .phone, footer .phone{
        right: 48%;
    }
    header .email, footer .email{
        right: 20%;
    }
    .contacts{
        margin: 0;
    }
    .portfolio .description{
        left: 50px;
    }
    .main-menu ul{
        padding-left: 10px;
    }
    .gallery .container {
        margin: 0 10px;
    }
}
/*  Mobile */
@media screen and (max-width: 760px) {
    header {
        height: 100px;
    }

    header .logo,
    header .phone,
    header .email{
        position: static;
        top: auto;
        text-align: center;
        height: 40px;
        margin: 0;
    }
    header .logo a,
    header .phone a,
    header .email a{
        line-height: 40px;
        display: block;
    }
    header .logo{
        margin-top: 10px;
    }
    header .logo img{
        vertical-align: middle;
        width: 230px;
    }
    header .logo a{
        padding-left: 0;
    }
    header .phone,
    header .email{
        float: left;
        width: 45%;
        font-size: 18px;
    }
    header .phone{
        margin-right: 0;
    }
    header .email{
        margin-left: 0;
        box-sizing: border-box;
    }
    header .social{
        position: absolute;
        top: 15px;
        right: 0;
        height: 90px;
        width: 40px;
        background: #ffffff;
    }

    header .social a{
        display: block;
        margin: 0;
        width: 40px;
        height: 23px;
        font-size: 16px;
        line-height: 23px;
    }

    header .button-aside{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }
    header .button-aside:after{
        display: block;
        height: 60px;
        width: 40px;
        line-height: 60px;
        text-align: center;
        font-family: FontAwesome;
        font-size: 30px;
        content: "\f0c9 ";
    }

    .bar-menu{
        position: absolute;
        display: block;
        top: 0;
        left: -102%;
        width: 100%;
        height: 100%;
        z-index: 2000;
        background: #888888;
        padding: 60px 0 0 0;
    }
    .bar-menu ul,
    .bar-menu ul li{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .bar-menu ul li a{
        display: block;
        color: #ffffff;
        font-weight: bold;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid #999999;
        line-height: 50px;
    }

    .bar-menu .button-aside{
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        color: #ffffff;
        z-index: 2002;
    }
    .bar-menu .button-aside:after{
        display: block;
        height: 60px;
        width: 40px;
        line-height: 60px;
        text-align: center;
        font-family: FontAwesome;
        font-size: 30px;
        content: "\f0c9 ";
    }
/*
    header.mhidden{
        height: 60px;
        border-bottom: 1px solid #f0f0f0;
    }

    header.mhidden .phone,
    header.mhidden .email,
    header.mhidden .social,
    nav.mhidden{
       display: none;
    }
*/
    footer {
        background: #dededc;
    }
    footer .logo{
        display: none;
    }

    footer .phone,
    footer .email,
    footer .social{
        font-size: 14px;
    }
    footer .phone{
        left: 10px;
    }
    footer .email{
        left: 30%;
    }
    footer .social{
        right: 10px;
    }
    footer .social a{
        right: 10px;
        width: 16px;
        line-height: 20px;
        text-decoration: none;
        margin: 20px 4px;
    }

    .main-menu ul{
        position: static;
        padding: 0;
        display: table;
        background: #dedfda;
    }
    .main-menu ul li:before{
        display: none;
    }
    .main-menu ul li{
        display: table-cell;
        width: 25%;
    }
    .main-menu ul li a{
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 40px;
        color: #000000;
    }
    .main-menu ul li:first-child a{
        border: 0;
    }
    .main-menu ul li a:hover{
        text-decoration: none;
    }

    .portfolio{
        margin: 0;
    }
    .portfolio .description{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-width: 0;
        background: #ffffff;
        padding-bottom: 0;
    }
    .portfolio .description .descr-toggle{
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        margin: 20px 10px;
        height: 2px;
        background: #bbbbbb;
    }
    .portfolio .description .descr-toggle:after {
        position: absolute;
        left: 50%;
        top: -23px;
        margin-left: -25px;
        ;
    }
    .portfolio .bottom-description{
        padding-bottom: 40px;
    }
    .portfolio .bottom-description .descr-toggle{
        margin-bottom: 0;
    }
    .portfolio .description .descr-toggle.down:after {
        background: url("/img/arrows.png") -100px -50px no-repeat;
    }

    .owl-controls .owl-prev,
    .owl-controls .owl-next
    {
        opacity: 0.3;
    }
    .owl-controls .owl-prev:hover,
    .owl-controls .owl-next:hover
    {
        opacity: 0.3;
    }



    .contacts{
        background-image: none;/*url("/img/contacts_mobile.jpg");*/
        padding-top: 0;
        margin: 0;
    }

    .contacts .contacts-content{
        position: static;
        width: 100%;
        background: rgb(255, 255, 255);
        padding: 0;
        text-align: center;
        font-size: 22px;
        box-sizing: border-box;
    }
    .contacts .contacts-content .contacts-params{
        display: table;
        width: 100%;
    }
    .contacts .contacts-content .cont{
        display: table-row;
        clear: left;
        text-align: left;
    }
    .contacts .contacts-content .cont .icon{
        display: table-cell;
        vertical-align: middle;
        min-height: 50px;
        padding: 20px 10px 20px 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .contacts .contacts-content .cont .text{
        display: table-cell;
        vertical-align: middle;
        padding: 20px 10px;
        border-bottom: 1px solid #f0f0f0;
    }
    .contacts-gmap{
        position: static;
    }



    .content-page{
        padding-top: 0;
    }
    .services-items{
        position: relative;
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    .services-items .screen-items{
        display: none;
    }

    .mobile-cont{
        display: block;
    }

    .services-img{
        display: none;
    }

    .services-items .item h3{
        font-weight: normal;
        line-height: 50px;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
        padding: 0 15px;
        position: relative;
    }
    .services-items .item h3:before{
        content: "";
        margin-right: 0;
    }
    .services-items .item h3 span{
        border: 0;
    }
    .services-items .item h3.active span{
        color: #000000;
    }
    .services-items .item .cont{
        display: none;
        padding: 0 15px;
    }
    .services-items .item .cont .pic img{
        width: 100%;
    }
    .services-items .item h3:before{
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        content: "\f107";
        font-family: FontAwesome;
        box-sizing: border-box;
    }
    .services-items .item h3.active:before {
        content: "\f106";
    }


    /* GALLERY */

    .gallery{
        background: #ffffff;
        padding-top: 0;
        padding-bottom: 0;
    }
    .gallery .container{
        margin: 0;
    }

    .gallery .item{
        display: inline-block;
        float: left;
        width: 47%;
        margin: 0 0 0 0;
        padding: 0 1% 0 1%;

        background: #ffffff;
        text-align: center;
    }
    .gallery .item .pic img{
        width: 100%;
    }
    .gallery .item .name{
        font-size: 16px;
        line-height: 1;
        height: 38px;
        overflow: hidden;
    }
    .gallery .item .name a{
        white-space: normal;
        line-height: 1;
    }

    .portfolio .back{
        top: 100%;
        left: 0;
        color: #ffffff;
        opacity: 0.8;
        padding-left: 10px;
    }
    .portfolio .back span{
        font-size: 16px;
        font-weight:normal;
        padding-left: 3px;
        line-height: 50px;
    }


    .about{
        margin: 0;
    }
    .about-img{
        float: none;
        margin: 0;
        width: 100%;
    }
    .about-img img{
        width: 100%;
    }
    .about-content{
        margin: 10px;
    }

}

@media screen and (max-width: 970px) and (orientation:landscape){
    .portfolio{
        /*margin: 0 10%;*/
    }
}