@font-face {
    font-family: 'Roboto Condensed';
    src: url('./fonts/robotocondensed-regular-webfont.eot');
    src: url('./fonts/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/robotocondensed-regular-webfont.woff') format('woff'),
    url('./fonts/robotocondensed-regular-webfont.ttf') format('truetype'),
    url('./fonts/robotocondensed-regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{margin: 0; padding: 0; border: 0; outline: none;}
html, body {height: 100%; font-family: Arial,Helvetica,sans-serif;/*font-family:  Tahoma,Verdana,Arial,Helvetica,sans-serif;*/ font-size: 12px; line-height: 17px; color: #BDBDBD;}
.inl{display: inline-block; vertical-align: top; *display: inline; *zoom:1}
.block{display: block;}
a{color: #fff;}
.no-select{-webkit-user-select: none;  -moz-user-select: none; -ms-user-select: none; }
body{background-color: #000;}
#wrapper{min-height: 100%;}
#content{padding-bottom: 136px;}

/*--Футер--*/
#footer{
    z-index: 0;
    height: 136px;
    margin-top: -136px;
    position: relative;
    background-size: cover;
    /* background: url(../images/footer.gif) repeat-x; */
    background: rgb(68,68,68); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(68,68,68,1) 0%, rgba(41,41,41,1) 1%, rgba(41,41,41,1) 27%, rgba(37,37,37,1) 40%, rgba(7,7,7,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(1%,rgba(41,41,41,1)), color-stop(27%,rgba(41,41,41,1)), color-stop(40%,rgba(37,37,37,1)), color-stop(100%,rgba(7,7,7,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(41,41,41,1) 1%,rgba(41,41,41,1) 27%,rgba(37,37,37,1) 40%,rgba(7,7,7,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(41,41,41,1) 1%,rgba(41,41,41,1) 27%,rgba(37,37,37,1) 40%,rgba(7,7,7,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(41,41,41,1) 1%,rgba(41,41,41,1) 27%,rgba(37,37,37,1) 40%,rgba(7,7,7,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(68,68,68,1) 0%,rgba(41,41,41,1) 1%,rgba(41,41,41,1) 27%,rgba(37,37,37,1) 40%,rgba(7,7,7,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#070707',GradientType=0 ); /* IE6-9 */
}

#footer .line{width: 100%; height: 7px; background: url(../images/line5.gif) center top no-repeat; position: absolute; left: 0; top: -3px;}
/*--Хеадер--*/
#header{ margin-bottom: 70px; }
#header .top_line{background-color: #292929;border-bottom: 1px solid #343434;min-height: 31px;position: relative;}
#header .top_line .line{bottom: -4px; left: 0; width: 100%; height: 7px; position: absolute; background: url(../images/line.png) center center no-repeat;}
#header .header_bottom{background: url(../images/header.jpg) 0 bottom repeat-x;border-bottom: 1px solid #444444;height: 152px;position: relative;}
#header .header_content{width: 942px;margin: 0 auto;max-width: 90%;position: relative;}
#header #logo{top: 34px;position: absolute;z-index: 1;right: 0;max-width: 100%;}
#header #logo img{max-width: 100%;display: inline-block;vertical-align: top;}
#header #header_menu {width: 540px;}
.header_content,#header #header_menu, #header #header_menu ul, #header #header_menu ul li{height: 100%;}
#header #header_menu ul li{width: 100px; text-align: center; position: relative; margin-right: 5px;}
#header #header_menu ul li a{margin-top: 98px;  height: 38px; line-height: 38px; font-family: 'Roboto Condensed',sans-serif;
    position: relative; z-index: 2; font-size: 18px; text-decoration: none; color: #808080;
    text-rendering: optimizelegibility;letter-spacing: 0.5px;
    transition: 0.3s ease-out;}
#header #header_menu ul li.active a{color: #FDF7F7;}
#header #header_menu ul li a .line_top, #header #header_menu ul li a .line_bottom{display: block; position: absolute;    /* -webkit-transition:  0.2s ease-out;  -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out ;*/}
#header #header_menu ul li a .line_top{width: 100%; height: 1px; background-color: #7D7D7D; top: 0; left: 0; transition:  0.1s ease-out 0.1s;}
#header #header_menu ul li a:hover{color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.7);}
#header #header_menu ul li a:hover .line_top{width: 0px; left: 50%; transition:  0.1s ease-out;}
#header #header_menu ul li a .line_bottom{width: 0px; left: 50%; height: 1px; background-color: #FFFFFF; bottom: 0;transition:  0.1s ease-out;}
#header #header_menu ul li a:hover .line_bottom{width: 100%; left: 0; transition:  0.1s ease-out 0.1s; }
#header #header_menu ul li .active{display: none;position: absolute;z-index: 1;top: -32px;left: 0;}
#header #header_menu ul li.active .line_top{background: #fff;}
#header #header_menu ul li.active .active{display: block; width: 98px; height: 228px; background: url(../images/menu.png);}
#header #header_menu ul li.active a:hover .line_top{width: 100%; left: 0;}
#header #header_menu ul li.active a:hover .line_bottom{width: 0; left: 0;}
#header #header_menu ul li.active a:hover{text-shadow: none; cursor: default;}
#header #header_menu .lang {display: none;}
#header .close_menu, #header .open_menu{display:none}  



#header #line_menu {width: 942px; margin: 0 auto; max-width: 90%; position: relative;padding: 7px 0 0;}
#header #line_menu{text-align: right;}
#header #line_menu ul {display: none;}
#header #line_menu ul li{padding: 0 2%; border-left: 1px solid #444444;}
#header #line_menu ul li:first-child{border: none;}
#header #line_menu ul{padding: 7px 0;}
#header #line_menu ul li a{text-decoration: none;}
#header #line_menu ul li.active a{color: #616161;}
#header #line_menu  a{color: #FF0000;}
#header .line2{width: 100%; height: 7px; background: url(../images/line2.png) no-repeat center center; position: absolute; left: 0; bottom: -4px;}


/*--Портфоліо--*/
.category{margin-bottom: 15px;}
.category .article{max-width: 636px; min-height: 125px; margin: 0 auto; background-color: #292929; border-bottom: 1px dashed #000000; position: relative;}
.category .article .inner{padding: 15px 15px 42px 15px;}
.category .article .line{top: -4px; width: 100%; height: 8px; position: absolute; background: url(../images/line2.gif) center top no-repeat;}
.category .article .label{position: absolute; height: 100%; width: 57px; right: -57px; background: url(../images/label.gif) left center no-repeat;}
.category .article:first-child .line{background: url(../images/line.gif) center top no-repeat; top: -3px;}
.category .article .description{overflow: hidden;}
.category .article .description .left{border-left: 3px solid #FF0000; color: #FFFFFF; padding-left: 10px; float: left;}
.category .article .description .left h1{color: #FF0000; font-weight: bold; font-size: 14px;}
.category .article .description .left p{font-size: 11px; margin-bottom: 0;}
.category .article .description .right{float: right; border-right: 3px solid #7F7F7F; padding-right: 10px; height: 30px; line-height: 30px;}
.category .article .description .right a{font-size: 14px;}
.category .article .image{/*border: 1px solid #000;*/ margin-bottom: 15px;}
.category .article .image>div{/*border: 5px solid #fff;*/}
.category .article .image img{display: block; max-width: 100%;}


/*Paginator*/
.paginator{width: 100%; text-align: center; margin-top: 15px;}
.paginator a,.paginator span{padding: 0 6px 0 11px; text-decoration: none; font-size: 14px; height: 21px; line-height: 21px; background: url(../images/line3.gif) left center no-repeat #292929;}
.paginator a.active{color: #FF0000; font-size: 16px;}
.paginator a:first-child{background:#292929; padding-left: 10px;}
.paginator a:last-child{padding-right: 10px;}


.content{background:url("../images/a_line_top.jpg") no-repeat center top #292929; max-width: 962px; margin: 0 auto; margin-bottom: 20px; position: relative;}
.content .inner{padding: 30px 7.5% 0 7.5%; }
.content.clients-content .inner {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.content .client{width: 33.3%; text-align: center; margin-bottom: 25px; padding: 0 1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.content .client.high {}
.content .client.medium {width: 25%;}
.content .client.low {width: 16%;}
.content .client img{max-width: 100%;}
.content .line_bottom{width: 100%; height: 8px; background:url("../images/a_line_down.jpg") no-repeat center top; position: absolute; bottom: -4px; left: 0;}


.article .title{text-align: center; margin-bottom: 50px;}
.article h1 {color: #fff;font-family: arial;font-size: 24px;font-weight: 700;}
.article h3{font-weight: bold; font-size: 18px; color: #fff; margin: 0 0 11px 0;}
.article ul{padding-left: 5%;}
.article p, .article ul{
    margin: 0 0 11px 0;
    font-size: 14px;
}
.article ul {
    margin: 17px 0 18px 0;
}
.article ul  li {
    padding: 0px 0;
}
.article .inner{padding-bottom: 20px;}


.content .contacts {padding: 20px 2%;}
.content .contacts .left{width: 25%;}
.content .contacts .right{width: 75%;}
.content .contacts .left, .content .contacts .right{margin-bottom: 25px;}
.content .contacts .address{padding-left: 2%;}
.content .contacts h2{font-weight: normal; font-family: Arial; font-size: 17px; line-height: 20px; margin-bottom: 10px;}
.content .contacts a{color: #D90000;}
.content .contacts .table{background-color: #1B1B1B;padding: 14px 5%;margin-top: 60px;}
.content .contacts .table ul{list-style: none;}
.content .contacts .table ul li{margin-top: 50px;}
.content .contacts .table ul li:first-child{margin-top: 0px;}
.content .contacts .table h1{color: #FFFFFF; font: bold 12px Arial; border-bottom: 1px solid #5F5F5F; padding-bottom: 5px; margin-bottom: 16px;}
.content .contacts .table p{margin-bottom: 12px;}
.content .contacts .bottom p{margin-bottom: 3px;}

.fildarea {
    padding: 8.5px 0 8.5px 5px;
    border: 1px solid #5D5D5D;
    background: #363636;
    width: calc(100% - 5px);
    margin-bottom: 10px;
}
::-webkit-input-placeholder { /* Chrome */
     color: #777777;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #777777;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #777777;
    opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
    color: #777777;
    opacity: 1;
}
input[type='text'],input[type='file'],textarea{background:#363636; border: 1px solid #5D5D5D; color: #777777; font: 14px Arial; margin-bottom: 10px;}
input[type='text'] {height: 39px; line-height: 39px; text-indent: 3%;}
input[type='file'] {border-style: none;padding: 0; margin: 0;
}
textarea{resize: none; height: 220px; padding: 10px 3%;}

.right_content{padding-left: 7%; padding-right: 7%;}
.feedback .form_col div{position: relative;}
.feedback .form_col div label{position: absolute; top: 11px; left: 3%; color: #777777; font: 14px Arial; }
.feedback .form_col div input[type='text'],input[type='file']{width: 100%;}
.feedback .form_col div textarea{width: 94%;}

.form_left{width: 55%; margin-right: 2%;}
.form_right{width: 41%;}
#captcha_content{margin-top: 10px;  white-space: nowrap;}
.capch #captcha_content>div{width: 50%;}
#captcha_content .for_capch{height: 41px;}
#captcha_content .for_capch>img{height: 100%; width: 100%;}
input[type="submit"]{background: url("../images/button.jpg") repeat-x; cursor: pointer; color: #272727; font-size: 12px; height: 37px; text-shadow: 1px 1px 0 #939393; text-transform: uppercase; width: 100%;}
.feedback_msg{margin-bottom: 10px;}
.red{color: #D90000;}
.red input[type='text'],.red .fildarea,.red textarea{border-color: #D90000;border-style: solid}

.map{margin-top: 25px; width: 100%;}
.map img{max-width: 100%;}

.footer_cont{width: 100%; max-width: 962px; margin: 0 auto; }
.footer_cont .inner{padding: 0 2%;}
.footer_cont{color: #fff;}
.footer_cont a{text-decoration: none;}
.footer_cont .col_left, .footer_cont .col_right{width: 50%;padding-top: 30px;}
.footer_cont .col_right{text-align: right;}



#main_menu ul li{margin-left: 10px;}

.presentation-item {
    position: fixed;
    bottom: -5px;
    z-index: 5;
    right: 250px;
    background: #000;
    padding: 2px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.presentation-item a {
    text-decoration: none;
    color: #CCCCCC;
    font-size: 12px;
    font-weight: 600;
    padding-left: 38px;
    padding-right: 10px;
    display: inline-block;
    height: 32px;
    line-height: 31px;
    white-space: nowrap;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.presentation-item a:before {
    content: '';
    display: block;
    position: absolute;
    width: 38px;
    height: 32px;
    top: 0;
    left: 0;
    background: url(../images/offline-presentation.png) no-repeat center center transparent;
}

/* page 404 */
.content.page404{background: none}
.img_404{
    text-align: center;
    padding: 40px 0 35px;
}
.img_404 img{
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}
.text_404{
    text-align: center;
    padding: 10px 0;
}
.text_404 *{
    line-height: 1.5em;
    font-family: 'Open Sans', sans-serif;
}
.text_404 a{
    position:relative;
    color: #cb1212;
    text-decoration:none;
    padding-bottom: 2px;
}
.text_404 a:after{
    content: '';
    position:absolute;
    bottom: 0;
    left: -5px;
    width: 100%;
    background-repeat: repeat;
    height: 1px;
    display: block;
    background-image: -ms-linear-gradient(left, transparent 50%, #cb1212 10%);
    background-image: -webkit-linear-gradient(left, transparent 50%, #cb1212 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #cb1212 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #cb1212 50%);
    background-image: linear-gradient(left, transparent 50%, #cb1212 50%);
    background-size: 12px 1px;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
}
.text_404 a:hover:after{opacity: 0}

@media screen and (max-width: 1780px) {
    #footer{
        padding: 0 0 25px;
    }
}


@media screen and (max-width: 964px) {
    .map iframe{width:100%}
    #footer .footer_cont .inner{padding: 0 25px;}
}


@media screen and (max-width: 830px) {
    #header .header_content{
        width: 100%;
        height: auto;
    }
    #header .header_bottom{
        height: auto;
        padding: 15px 0;
    }
    #header .close_menu {
        display: block;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        right: 20px;
        top: 25px;
        width: 25px;
        height: 25px;
        background-image: url(../images/cross.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
	#header .open_menu {
        display: block;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        right: 20px;
        top: 25px;
        width: 45px;
        height: 45px;
        background-image: url(../images/menu-button.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    #header #header_menu .lang{display:none}
    #header{position:relative;z-index:2;}
    #content{position: relative;z-index: 1;}
    #header #header_menu{
        display: block;
        width: 96%;
        height: 93%;
        position: fixed;
        z-index: 5;
        right: -100%;
        top: 0;
        padding: 20px 0px;
        background-color: #000000;
        -webkit-transition: right .3s ease-out .1s;
        -moz-transition: right .3s ease-out .1s;
        -o-transition: right .3s ease-out .1s;
        -ms-transition: right .3s ease-out .1s;
        transition: right .3s ease-out .1s;
    }
     #header:before{
         content: '';
         position: absolute;
         top:0;
         left: 0;
         width:100%;
         height:100%;
         background-color: rgba(0, 0, 0, 0.74);
         z-index: -10;
         visibility: hidden;
         opacity: 0;
        -webkit-transition: opacity .3s ease-out .1s;
        -moz-transition: opacity .3s ease-out .1s;
        -o-transition: opacity .3s ease-out .1s;
        -ms-transition: opacity .3s ease-out .1s;
        transition: opacity .3s ease-out .1s;
     }
    /* wheh header menu is open*/
    #header.opened:before{
        position: fixed;
        visibility:visible;
        opacity:1;
        z-index: 1;
    }
    #header #header_menu.open{right: 0;}
    #header.opened .open_menu{z-index: -1; visibility: hidden; opacity: 0;}


    #header #header_menu ul{height: auto;z-index: 1;position: relative;text-align: right;padding: 20px 30px;max-width: 100%;width: 85%;display: block;}    
    #header #header_menu ul li{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin: 0 0 0;
        text-align: left;
    }
    #header #header_menu ul li a{margin: 0 0 0;display: block;line-height: 1.3em;font-size: 24px;font-weight: 300;height: auto;padding: 10px 0 5px;}
    #header #header_menu ul li.active .active{background:none;height: auto;width: auto;}
    #header #line_menu{display: block;}
    #header #logo{position: relative;width: 100%;text-align: center;top: auto;right: auto;}
    

    #footer{z-index:3;height: auto;padding: 0 0 55px;}
    .presentation-item{right: 250px}
}



@media screen and (max-width: 751px) {
    .category .article .label{display:none;}
}

@media screen and (max-width: 700px) {
    .content .client{width: 50%;}
    .content .contacts .left, .content .contacts .right{width: 100%;}
    .content .contacts .table{margin-top: 0;}

    #header #header_menu ul{width: 80%}
}

@media screen and (max-width: 640px) {
    /*btns fixed in footer*/
    .presentation-item{right: 120px; bottom: 6px;}

}

@media screen and (max-width: 500px) {
    
    #header #logo{width: 70%;}
    #header .open_menu{top: 15px}
    #header #logo img{max-width: 210px;}
     #header #header_menu{}
     #header #header_menu ul{width: 77%;}
     #header #header_menu ul li a{font-weight: 300;}

    .form_left, .form_right{width: 100%; margin-right:0}
    .footer_cont .col_left, .footer_cont .col_right{width: 100%; text-align: left;}
    
    #footer{}
    
    #content{/* padding-bottom: 260px; */}
    .map iframe{height:320px}
}

@media screen and (max-width: 400px) {
    .content .client{width: 100%;}
    #header #header_menu ul{max-width: 80%;}
    #header #header_menu ul{width: 73%;}
}

@media screen and (max-width: 375px) {
    #header #header_menu ul{max-width: 70%}
    .map iframe{height:290px}
}

@media screen and (max-width: 320px) {
    #header #logo img{max-width:190px}
    #header .open_menu{right: 0;  top: 12px}
    #header #header_menu{width:100%}
}