@import 'fonts/pfdintextcondpro.css';

.no-padding{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
body{ color: #3a3a3a;}
body img{ max-width: 100%; height: auto;}

#header{ position: relative; min-height: 130px;}
#header .logo{padding-top: 25px; max-width: 320px;}
#header .logo img{ max-width: 100%;}
#header .contact{ position: relative; padding-top: 60px; font-size: 2rem; text-align: right;}
#header .contact .email{ display: inline-block; vertical-align: top; text-align: left;}
#header .contact .email span[class*=icon]{ display: inline-block; vertical-align: middle; width: 31px; height: 31px; vertical-align: top;
background: url("/assets/images/icon_mail_green.png") no-repeat center; margin-right: 6px;}
#header .contact .email a{ color: #585a5a; font-size: 2rem; line-height: 2.5rem; font-weight: 500; display: inline-block; vertical-align: top; text-decoration: none;}
#header .contact .phone{ display: inline-block; vertical-align: top; text-align: left; margin: 0px 25px;}
#header .contact .phone span[class*=icon]{ display: inline-block; vertical-align: middle; width: 31px; height: 31px; vertical-align: top;
    background: url("/assets/images/icon_phone_green.png") no-repeat center; margin-right: 6px;}
#header .contact .phone a{ color: #585a5a; font-size: 2rem; line-height: 2.2rem; font-weight: 500; display: inline-block; vertical-align: top; text-decoration: none;}
#header .contact .phone .comment{ color: #585a5a; font-size: 1.6rem; padding-left: 68px; margin-top: -10px;}
#header .contact .feedback{ display: inline-block; vertical-align: top;}
#header .contact .feedback a{ display: block; width: 176px; height: 35px; background: #0e9114; border-radius: 5px; text-decoration: none; color: #fff;
text-align: center; font-weight: 500; font-size: 2rem; line-height: 3.5rem;}

@media (max-width: 992px) {
    #header .logo{ text-align: center; padding-top: 10px; margin: 0px auto;}
    #header .contact{ text-align: center; padding-top: 0px; padding-bottom: 20px;}
    #header .contact > div{ padding-top: 10px;}
}


.menuline{ background: #e54e2a; position: relative; z-index: 800;}
.menuline .toggle{ display: none;}
.menuline .outer_nav{
    height: 40px;
    padding: 0px;
    margin: 0px;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    display: flex;
    flex-direction: row;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;}
.menuline .outer_nav > li{ display: block; height: 20px; position: relative;border-left: 1px solid #f5bcae;
    text-align: center; flex-grow:1;}
.menuline .outer_nav > li.first{border-left: 0px;}
.menuline .outer_nav > li.last{}
.menuline .outer_nav > li > a,
.menuline .outer_nav > li > div{ color: #fff; line-height: 20px; font-size: 2rem; font-weight: 500; text-transform: uppercase; display: inline;}
.menuline .outer_nav > li.current > a,
.menuline .outer_nav > li > div{ text-decoration: underline;}
.menuline .outer_nav > li .inner_nav{ display: block; position: absolute; top: 100%; left: 0px; padding: 0px;
    min-width: 100%;padding: 8px 0px; display: none;}
.menuline .outer_nav  li:hover > .inner_nav{ display: block;}
.menuline .outer_nav > li .inner_nav li{ word-wrap: normal; white-space: nowrap; display: block;
    border-bottom: 1px solid #e2e2e2; text-align: left; background: #fff; }
.menuline .outer_nav > li .inner_nav li a,
.menuline .outer_nav > li .inner_nav li div{ display: block; padding: 0px 20px; line-height: 36px; font-size: 1.8rem; color: #666;
    text-decoration: none;}
.menuline .outer_nav > li .inner_nav li a:hover,
.menuline .outer_nav > li .inner_nav li div{ background: #f9f9f9;}
.menuline .outer_nav > li .inner_nav li.first{ padding-top: 10px;}
.menuline .outer_nav > li .inner_nav li.last{ padding-bottom: 10px; border-bottom: none;}
.menuline .navbar_toggle{ display: none;}

@media (max-width: 768px) {
    .menuline{ min-height: 60px;}
    .menuline .menu.collapsed{ max-height: 0px; overflow: hidden;}
    .menuline .menu{ max-height: 600px;
        -webkit-transition: max-height 1s linear;
        -moz-transition: max-height 1s linear;
        -o-transition: max-height 1s linear;
        transition: max-height 1s linear;}
    .menuline .navbar_toggle{ display: block; width: 40px; height: 40px; background: #fff; border:none; padding: 0px 5px;
    position: absolute; right: 10px; top: 10px; outline: none;}
    .menuline .navbar_toggle span.icon-bar{ display: block; height: 4px; background: #e54e2a; margin: 4px;}
    .menuline .outer_nav{flex-direction: column; text-align: left; height: auto; margin-right: 40px;
        -webkit-justify-content: flex-start;
        justify-content:  flex-start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .menuline .toggle{ display: inline-block; margin-left: 10px; color: #fff; cursor: pointer; font-size: 1.6rem;}
    .menuline .outer_nav > li{text-align: left; border-left:0px; height: auto; min-height: 35px; padding: 5px 0px; display: block; flex: 0 0 100%; width: 100%}
    .menuline .outer_nav > li > a,
    .menuline .outer_nav > li > div{line-height: 35px; font-size: 2.3rem;}
    .menuline .outer_nav > li > .inner_nav{ display: block; position: relative; left: auto; top: auto; padding: 0px 0px 0px 10px; overflow: hidden;
    max-height: 200px;
        -webkit-transition: max-height 500ms linear;
        -moz-transition: max-height 500ms linear;
        -o-transition: max-height 500ms linear;
        transition: max-height 500ms linear;}
    .menuline .outer_nav > li > .inner_nav.collapsed{max-height: 0px;}
    .menuline .outer_nav > li > .inner_nav li{ border: 0px; padding: 0px; background: none;}
    .menuline .outer_nav > li > .inner_nav li a,
    .menuline .outer_nav > li > .inner_nav li div{color: #fff; display: inline; line-height: 20px;}
    .menuline .outer_nav > li .inner_nav li a:hover,
    .menuline .outer_nav > li .inner_nav li div{ background: none; text-decoration: underline; font-weight: 500;}
}


#mainslider{ background: #dc9369; position: relative;}
#mainslider .slide{background-position: center top; background-repeat: no-repeat; background-size:auto 100% ; height: 495px; }

#maintext{ padding: 50px 0px; background: #fff;}
#maintext h1{ line-height: 30px; margin: 0px 0px 48px; text-align: center;}
@media (max-width: 768px) {
    #maintext h1{ line-height: 1; font-size: 3.6rem;}
    #maintext .container img{ float: none !important; display: block; margin:0px auto 20px;}
}

#advantage{ text-align: center; padding: 30px 0px; background: url(/assets/images/bg1.png) repeat-x center; background-size: 30vmin;}
#advantage .flex{
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    display: flex;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
}
#advantage .flex .el{ width: 270px; position: relative; flex-basis: 270px; color: #ff3226; font-size: 1.8rem; line-height: 2;
    font-weight: 500; text-transform: uppercase; text-align: left; padding: 20px;}
#advantage .flex .el .number{ font-size: 6rem; line-height: 0.6;}
#advantage .flex .el:before{ content: ''; display: block; position: absolute; width: 14px; height: 14px;
    border-radius: 14px; background: #ff3226; top:-7px; left: -7px;}
#advantage .flex .el .line{content: ''; display: block; position: absolute; width: 2px; height: 0%;
    top: 0px; left: -1px; background: #ff3226; }

@media (max-width: 768px) {
    #advantage .flex{flex-direction: column; }
    #advantage .flex .el{ width: 300px; flex-basis: auto; margin: 0px auto;}
}
#services h2 {font-size: 4rem;line-height: 30px;margin-bottom: 48px;text-align: center; }
#services {position: relative;}
@media (min-width: 820px) {
    #services ul {
        display: block;
        padding: 0px;
        margin: 0px;
        position: relative;
        background: url("/assets/images/srv_bg_main.png") no-repeat center top;
        height: 425px;
        zoom: 0; /* IE */
        -moz-transform: scale(0); /* Firefox */
        -moz-transform-origin: 50% 50%;
        -o-transform: scale(0); /* Opera */
        -o-transform-origin: 50% 50%;
        -webkit-transform: scale(0); /* Safari And Chrome */
        -webkit-transform-origin: 50% 50%;
        transform: scale(0); /* Standard Property */
        transform-origin: 50% 50%; /* Standard Property */
        -webkit-transition-duration: 1.2s;
        -o-transition-duration: 1.2s;
        -moz-transition-duration: 1.2s;
        transition-duration: 1.2s;
    }

    #services ul.active {
        zoom: 1; /* IE */
        -moz-transform: scale(1); /* Firefox */
        -o-transform: scale(1); /* Opera */
        -webkit-transform: scale(1); /* Safari And Chrome */
        transform: scale(1); /* Standard Property */
    }

    #services ul li {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-bottom: 40px;
    }

    #services ul li a {
        display: table-cell;
        width: 160px;
        height: 160px;
        border-radius: 80px;
        color: #fff;
        font-size: 2.4rem;
        vertical-align: middle;
        line-height: 25px;
        font-weight: 500;
        text-align: center;
    }

    #services ul li#res12 {
        margin-top: -40px;
        margin-left: -392px;
    }

    #services ul li#res13 {
        margin-top: -126px;
        margin-left: -238px;
    }

    #services ul li#res14 {
        margin-top: -40px;
        margin-left: -85px;
    }

    #services ul li#res15 {
        margin-top: -126px;
        margin-left: 75px;
    }

    #services ul li#res16 {
        margin-top: -40px;
        margin-left: 230px;
    }
}
@media (max-width: 820px) {
    #services ul{ display: block; width: 320px; margin: 0px auto; padding: 0px;}
    #services ul li{ display: block; position: relative; margin-bottom:15px; padding-left: 35px; }
    #services ul li a{display: table-cell; color: #3a3a3a; font-size: 2.4rem; line-height: 1;  padding-left: 35px;
        height: 48px; width: 320px; vertical-align: middle; color: #fff;}
    #services ul li:before{content: ''; display: inline-block; width: 65px; height: 65px; vertical-align: middle;
    position: absolute; left: 0px; top: 50%; margin-top: -32px; background-repeat: no-repeat;
        background-position:  center; background-size: 100%;}
    #services ul li#res12:before{background-image: url("/assets/images/icon1.png");}
    #services ul li#res12 a {background:#ff3226;}
    #services ul li#res13:before{background-image: url("/assets/images/icon2.png");}
    #services ul li#res13 a {background:#71aa00;}
    #services ul li#res14:before{background-image: url("/assets/images/icon3.png");}
    #services ul li#res14 a {background:#fda037;}
    #services ul li#res15:before{background-image: url("/assets/images/icon4.png");}
    #services ul li#res15 a {background:#00a6f3;}
    #services ul li#res16:before{background-image: url("/assets/images/icon5.png");}
    #services ul li#res16 a {background:#fe483e;}
}

#works{ padding: 40px 0px 60px;}
#works h2{ text-align: center; font-size: 4rem; line-height: 30px; margin-bottom: 50px;}
#works .works_list{ text-align: center;}
#works .el{ display: inline-block; width: 280px; margin: 0px 0.516% 50px; vertical-align: top;border: 1px solid #ececec;}
#works .el a{ text-decoration: none;}
#works .el .image{ height: 200px; margin-bottom: 10px; }
/* #works .el .ttl{ text-align: center; line-height: 50px; color: #fff; background: #e54e2a; font-size: 2.4rem; font-weight: 500;} */
#works .el .ttl{ display: table;  width: 100%; height: 50px; color: #fff; background: #e54e2a; font-size: 2.4rem; font-weight: 500;}
#works .el .ttl span{ display: table-cell; width: 100%; padding: 0 2px; text-align: center; line-height: 20px; color: #fff; background: #e54e2a; font-size: 2.4rem; font-weight: 500; vertical-align: middle;}
#works .more{ text-align: center; }
#works .more a{ display: inline-block; width: 280px; height: 45px; background: #0e9114; color: #fff; font-weight: 500;
    font-size:2.4rem; text-decoration: none; border-radius: 5px; line-height: 45px; }
#works .el.feedback .ttl{ line-height: 20px; padding: 5px 0px;}
#works .el.feedback:hover{
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

#news{ padding: 65px 0px; background: url("/assets/images/news_bg.jpg") no-repeat center top; background-size: cover;}
#news h2{ text-align: center; font-size: 4rem; line-height: 30px; color: #fff; margin-bottom: 45px;}
#news .news_list{ position: relative; display: inline-block; width: 45%; vertical-align: top; margin-right: 2%;}
#news .news_list .el{ margin-bottom: 10px; border: 1px solid #fff; border-radius: 5px; font-size: 2.5rem; font-weight: 300; color: #fff;}
#news .news_list .el a{color: #fff; line-height: 20px; padding: 10px 20px; display: block; text-decoration: none;}
#news .news_list .el.active a,
#news .news_list .el a:hover{color: #3a3a3a; background: #fff;}
#news .news_list .el .news_content{ display: none; }
#news .news_preview{ position: relative; display: inline-block; width: 52%; vertical-align: top; background: #fff; padding: 20px;}
#news .news_preview .image{ float: left; width: 42%; margin-right: 20px;}
#news .news_preview .image img{ display: block;}
#news .news_preview .prev{ float: left;
    width: 57%;
    width: -webkit-calc(58% - 20px);
    width: -moz-calc(58% - 20px);
    width: calc(58% - 20px);
}
#news .news_preview .prev .title{ font-size: 2.5rem; margin: 15px 0px; line-height: 1; font-weight: 500}
#news .news_preview .prev .intro{ font-size: 1.8rem; line-height: 1.38;}
#news .news_preview .more{ text-align: right; clear: both;}
#news .news_preview .more a{color: #3a3a3a; text-decoration: underline;font-size: 1.8rem; line-height: 1.38; font-weight: 300;}

@media (max-width: 820px) {
    #news .news_list{ display: block; width: 100%;}
    #news .news_preview{ display: block; width: 100%;}
}
@media (max-width: 500px) {
    #news .news_preview .image{float: none; width: 100%; }
    #news .news_preview .prev{float: none; width: 100%; }
}


#footer{ padding: 30px 0px 60px;  border-top: 2px solid #dbdbdb; background: url("/assets/images/bg1.png") repeat center; margin-top: 40px;}
#footer .flex{
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    display: flex;
    flex-direction: row;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-basis: 240px;
}
#footer .flex .col{}
#footer .flex .col > .first{ margin-bottom: 35px;}
#footer .col.col_last > .first{ margin-bottom: 0px;}
#footer .flex .col .start_item{ font-size: 2rem; font-weight: 500; text-decoration: none; color: #585a5a; line-height: 1.25;
    border-bottom: 2px solid #e54e2a; display: inline-block; margin-bottom: 10px;}
#footer .flex .col ul{ padding: 0px; margin: 0px;}
#footer .flex .col ul li{ display: block;}
#footer .flex .col ul li .toggle{ display: none;}
#footer .flex .col ul li a{ color: #7a7d7a; font-size: 1.8rem; line-height: 1.38;}
#footer .flex .col ul li ul li:before{ content: '-'; display: inline-block; padding-left: 10px;}
#footer .col.col_last{ width: 210px;}
#footer .col.col_last .feedback a{ color: #7a7d7a; font-size: 1.8rem; line-height: 1.38;}
#footer .col.col_last .feedback a.go{ color: #fff; display: inline-block; width: 100%; height: 35px; line-height: 35px;
    border-radius: 5px; background: #0e9114; text-align: center; text-decoration: none; font-weight: 500;}
#footer .col.col_last .address{ color: #7a7d7a; font-size: 2rem; line-height: 1.25; margin-bottom: 35px;}
#footer .col.col_last .contact{}
#footer .col.col_last .contact .rss{ margin-bottom: 15px;}
#footer .col.col_last .contact .rss a{color: #585a5a; font-size: 2rem; line-height: 1.25;}
#footer .col.col_last .contact .rss .icon-rss{display: inline-block; width: 29px; height: 23px; vertical-align: middle;
    background: url("/assets/images/icon_rss_grn.png") no-repeat center; margin-right: 6px; background-size: 29px 23px;}
#footer .col.col_last .contact .email{ margin-bottom: 15px;}
#footer .col.col_last .contact .email a{color: #585a5a; font-size: 2rem; line-height: 1.25;}
#footer .col.col_last .contact .email .icon-email{display: inline-block; width: 29px; height: 23px; vertical-align: middle;
    background: url("/assets/images/icon_mail_green.png") no-repeat center; margin-right: 6px; background-size: 29px 23px;}
#footer .col.col_last .contact .phone{ margin-bottom: 10px;}
#footer .col.col_last .contact .phone a{color: #585a5a; font-size: 2rem; line-height: 1.25;}
#footer .col.col_last .contact .phone .icon-phone{display: inline-block; width: 31px; height: 31px; vertical-align: middle;
    background: url("/assets/images/icon_phone_green.png") no-repeat center; margin-right: 6px; background-size: 31px 31px;}

@media (max-width: 768px) {
    #footer .flex{ flex-flow: row wrap;}
}

#footer_line{ background: #e54e2a; color: #fff; font-size: 2rem; min-height: 40px; border-top: 1px solid #3a3a3a; line-height: 2;}


/*#portfolio_head{ background-color: #dc9369; background-image: url("/assets/images/slide1.jpg"); background-repeat: no-repeat;
    background-position: center top; position: relative;}*/
#portfolio_head{ background-image: url("/assets/images/bg1.png"); background-position: left 70%; background-size: auto 96%;
position: relative;}
#portfolio_head .container{ min-height: 150px;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    display: flex;
    flex-direction: row;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
}
#portfolio_head .col{ width: 50%;}
#portfolio_head a{ display: block; max-width: 355px; min-width: 300px; width: 100%; height: 51px; border: 3px solid #0e9114; border-radius: 5px; text-align: center;
font-size: 3rem; line-height: 46px; font-weight: 500; color: #fff; text-decoration: none; background: #0e9114; margin: 0px auto; }
#portfolio_head a.active,
#portfolio_head a:hover{ background: #fff; color: #0e9114; }
@media (max-width: 768px) {
    #portfolio_head .container{
        flex-direction: column;
    }
    #portfolio_head .col{ width: 100%;}
}

.h2{  margin-bottom: 30px; text-align: center; position: relative; color: #3a3a3a;}
.h2 span{font-size: 4rem; line-height: 0.75; display: inline-block; padding: 0px 20px; margin: 0px auto 0px; position: relative; bottom: 18px; background: #fff;}
.h2:before{ content: ''; display: block; height: 2px; width: 561px; max-width: 90%; background: #3a3a3a; margin: 0px auto; }
#portfolio_gallery{ position: relative; padding: 60px 0px 0px;}
#portfolio_gallery .gallery{ position: relative; max-height: 635px;}
#portfolio_gallery .gallery .mainImage{ height: 630px; width: 100%; overflow: hidden; background: #ccc; position: relative;}
#portfolio_gallery .gallery .mainImage:hover:before{ display: block; content: ''; width: 100%; height: 100%;
    background: url("/assets/images/zoom_icon.png") no-repeat center; position: absolute; left: 0px; top: 0px; opacity: .6; cursor: pointer;
background-size: 15% auto;}
#portfolio_gallery .gallery .mainImage img{ display: block; height: 100%; width: auto; max-width: none; cursor: pointer;}
#portfolio_gallery .gallery .description{ position: absolute; width: 375px; background: rgba(0, 0, 0, 0.61); color: #fff;
    overflow: hidden; top: 0px; right: 0px; bottom: 0px; padding: 100px 20px 40px 50px; font-size: 1.8rem; line-height: 1.27;
font-weight: 300;}
#portfolio_gallery .gallery .description h2{ font-size: 2.5rem; line-height: 0.8; margin-bottom: 15px; font-weight: 500;}
#portfolio_gallery .gallery .description .underline{ text-decoration: underline;}
#portfolio_gallery .gallery .description .price{font-size: 2rem; line-height: 1.15; font-weight: 500;}
#portfolio_gallery .gallery .description .squer{font-size: 2rem; line-height: 1.15; font-weight: 500;}
#portfolio_gallery .gallery .thumbnails { position: absolute; bottom: 20px; left: 20px; right: 395px; overflow: hidden; height: 115px;}
#portfolio_gallery .gallery .thumbnails .thumbnails_line{ width: 5000px; padding-bottom: 5px;}
#portfolio_gallery .gallery .thumbnails .thumbnails_line .thumb{ display: block; width: 104px; height: 104px;
border: 2px solid #fff; float: left; margin-right: 10px;}
#portfolio_gallery .gallery .thumbnails .thumbnails_line .thumb.active{ border: 2px solid #fda037;}
#portfolio_gallery .gallery .thumbnails .thumbnails_line .thumb a{ display: block; width: 100%; height: 100%;}
#portfolio_gallery .gallery .thumbnails .thumbnails_line .thumb img{ display: block; width: 100%; height: 100%;}
#portfolio_gallery .gallery .thumbnails .thumbnails_line:after{content: ''; display: block; clear: both;}

@media (max-width: 660px) {
    #portfolio_gallery .gallery{ max-height: none;}
    #portfolio_gallery .gallery .mainImage{ height: auto; margin-bottom: 10px; max-height: 600px;}
    #portfolio_gallery .gallery .mainImage img{ display: block; height: auto; width: 100%; max-width: 100%;}
    #portfolio_gallery .gallery .thumbnails{ position: relative; bottom: auto; left: auto; right: auto; width: 100%; margin-bottom: 10px; }
    #portfolio_gallery .gallery .description{ position: relative;bottom: auto; left: auto; right: auto; top: auto; width: 100%; padding: 20px;}
}

.bubblingG {text-align: center; width:78px; height:49px; margin: auto; position: absolute; top: 50%; margin-top: -25px; left: 50%; margin-left: -240px; display: none;}
.bubblingG span { display: inline-block; vertical-align: middle; width: 10px; height: 10px;  margin: 24px auto; background: rgb(0,0,0);
    border-radius: 49px; -o-border-radius: 49px; -ms-border-radius: 49px; -webkit-border-radius: 49px; -moz-border-radius: 49px;
    animation: bubblingG 1.5s infinite alternate; -o-animation: bubblingG 1.5s infinite alternate; -ms-animation: bubblingG 1.5s infinite alternate;
    -webkit-animation: bubblingG 1.5s infinite alternate;-moz-animation: bubblingG 1.5s infinite alternate;
}
#bubblingG_1 {animation-delay: 0s;-o-animation-delay: 0s;-ms-animation-delay: 0s;-webkit-animation-delay: 0s;-moz-animation-delay: 0s;}
#bubblingG_2 {animation-delay: 0.45s;-o-animation-delay: 0.45s;-ms-animation-delay: 0.45s;-webkit-animation-delay: 0.45s;-moz-animation-delay: 0.45s;}
#bubblingG_3 {animation-delay: 0.9s;-o-animation-delay: 0.9s;-ms-animation-delay: 0.9s;-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;}
@keyframes bubblingG {
    0% {width: 10px;height: 10px;background-color:rgb(0,0,0);transform: translateY(0);}
    100% {width: 23px;height: 23px;background-color:rgb(255,255,255);transform: translateY(-20px);}
}
@-o-keyframes bubblingG {
    0% {width: 10px;height: 10px;background-color:rgb(0,0,0);-o-transform: translateY(0);}
    100% {width: 23px;height: 23px; background-color:rgb(255,255,255); -o-transform: translateY(-20px);}
}
@-ms-keyframes bubblingG {
    0% {width: 10px;height: 10px;background-color:rgb(0,0,0); -ms-transform: translateY(0);}
    100% {width: 23px;height: 23px;background-color:rgb(255,255,255);-ms-transform: translateY(-20px);    }
}
@-webkit-keyframes bubblingG {
    0% {width: 10px; height: 10px; background-color:rgb(0,0,0);-webkit-transform: translateY(0);}
    100% {width: 23px; height: 23px; background-color:rgb(255,255,255);-webkit-transform: translateY(-20px);}
}
@-moz-keyframes bubblingG {
    0% {width: 10px; height: 10px; background-color:rgb(0,0,0); -moz-transform: translateY(0);}
    100% {width: 23px;height: 23px; background-color:rgb(255,255,255); -moz-transform: translateY(-20px);}
}

#pageBlock{ padding: 60px 0px;}

#infoBanner{ height: 485px; background: url(/assets/images/information.png) no-repeat center top; background-size: cover;
margin-bottom: 35px;}

@media (max-width: 485px) {
    #infoBanner{ height: 100vw;}
}

.bread{ clear: both; margin-bottom: 20px;}
.bread ul{ margin: 0px; padding: 0px; display: block;}
.bread ul li{ margin: 0px; padding: 0px; display: inline-block; font-size: 1.6rem; line-height: 0.7; color: #777777;}
.bread ul li a{color: #000;}

#informationBlock{}
#informationBlock .submenu{width: 280px; float: left; margin-right: 4%; border: 1px solid #dbdbdb; border-radius: 5px; overflow: hidden;}
#informationBlock .submenu .ttl{color: #fff; background: #e54e2a; padding: 15px 20px; font-size: 2.4rem; line-height: 0.7;
text-transform: uppercase;}
#informationBlock .submenu ul{ margin: 0px; padding: 15px 8px;}
#informationBlock .submenu ul li{ display: block; border: 1px solid #dbdbdb; margin-bottom: 8px;}
#informationBlock .submenu ul li a,
#informationBlock .submenu ul li div{ display: block; height: 48px; font-size: 2rem; text-transform: uppercase;
text-decoration: none; line-height: 0.7; padding: 15px 15px 0px; color: #585a5a;}
#informationBlock .submenu ul li.current a span,
#informationBlock .submenu ul li:hover a span,
#informationBlock .submenu ul li div span{ display: inline-block;}
#informationBlock .submenu ul li a span:after,
#informationBlock .submenu ul li div span:after{ display: block; content: ''; height: 2px; background: #e54e2a;
    margin-top: 5px; width: 0px;
    -webkit-transition: width 500ms ease-out 1s;
    -moz-transition: width 500ms ease-out 1s;
    -o-transition: width 500ms ease-out 1s;
    transition: width 500ms ease-out 1s;
}
#informationBlock .submenu ul li.current a span:after,
#informationBlock .submenu ul li:hover a span:after,
#informationBlock .submenu ul li div span:after{ width: 100%;}
#informationBlock .article_list, #informationBlock .certificates_list{ float: left;
    width: 70%;
    width: -webkit-calc(96% - 280px);
    width: -moz-calc(96% - 280px);
    width: calc(96% - 280px);}
#informationBlock .article_list article{ margin-bottom: 25px;}
#informationBlock .article_list article .ttl{ font-size: 2.4rem; color: #3a3a3a; line-height: 0.9; margin-bottom: 20px; font-weight: 500;}
#informationBlock .article_list article .ttl a{color: #3a3a3a;}
#informationBlock .article_list article .preview{ float: left; margin-right: 20px; margin-bottom: 20px;}
#informationBlock .article_list article .preview a{position: relative; display: block; border: 1px solid #dbdbdb; padding: 5px;}
dl.publish-date { margin-bottom: 20px;}
dl.publish-date { margin-bottom: 25px; padding: 8px 15px; color: #ffffff; background: #b1b1b0; display: inline-block; text-transform: uppercase;}
#informationBlock .article_list .paging{ text-align: center;}
#informationBlock .article_list .paging ul{ padding: 0px; margin: 0px; display: block;}
#informationBlock .article_list .paging ul li{ display: inline-block;}
#informationBlock .article_list .paging ul li a{ display: block; width: 25px; height: 25px; border-radius: 5px; color: #2d2a2d;
text-align: center; line-height: 1.78; font-size: 1.4rem; text-decoration: none;}
#informationBlock .article_list .paging ul li a.active{ background: #f1eff1; font-weight: 500;}

#informationBlock .certificates_list .thumb {
	display: inline-block;
	margin: 0 1.5% 30px;
	padding: 10px;
	border: 1px solid rgb(230, 230, 230);
	-webkit-transition: border .5s ease-out;
    -moz-transition: border .5s ease-out;
    -o-transition: border .5s ease-out;
    transition: border .5s ease-out;
	cursor: zoom-in;
}
#informationBlock .certificates_list .thumb:hover {
	border-color: rgb(100, 100, 100);
}
#informationBlock .certificates_list .thumb a {
	cursor: zoom-in;
}

@media (max-width: 600px) {
    #informationBlock .submenu{ float: none; width: 80%; min-width: 280px; margin: 0px auto; margin-bottom: 30px;}
    #informationBlock .article_list, #informationBlock .certificates_list{float: none; width: 80%; min-width: 280px; margin: 0px auto;}
	#informationBlock .certificates_list { text-align: center; }
}

#services{ height: 480px; margin-bottom: -40px;}
#services .services_slider{ height: 100%; width: 100%;
    display: -ms-Flexbox;
    -ms-box-orient: horizontal;

    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;

    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;

    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    background: #e54e2a;
}
/*#services .services_slider:after{content: ''; display: block; flex: 1 1 1000px;
    -webkit-transition: all 800ms ease-out 0s;
    -moz-transition: all 800ms ease-out 0s;
    -o-transition: all 800ms ease-out 0s;
    transition: all 800ms ease-out 0s;
}*/



#services .services_slider .el{ position: relative; overflow: hidden;
    color: #fff; border: 1px solid #fff; border-right: 0px; cursor: pointer;
    -webkit-flex: 1 1 170px;
    -moz-flex: 1 1 170px;
    -ms-flex: 1 1 170px;
    flex: 1 1 170px;
    -webkit-transition: all 800ms ease-out 0s;
    -moz-transition: all 800ms ease-out 0s;
    -o-transition: all 800ms ease-out 0s;
    transition: all 800ms ease-out 0s;
    min-width: 170px;
}
#services .services_slider .el.active{
    -webkit-flex-basis: 80%;
    -moz-flex-basis: 80%;
    -ms-flex-basis: 80%;
    flex-basis: 80%;
}
#services .services_slider .el .inner{width: 100vw; min-width: 570px; display: table; height: 100%;}
#services .services_slider .el .title{ width: 170px; font-size: 2.2rem; line-height: 1.18; display:table-cell;
text-align: center; padding-top: 85px; text-transform: uppercase; font-weight: 500; margin: 0px -2px;}
#services .services_slider .el .title a{color: #fff; text-decoration: none;}
#services .services_slider .el.active .title a{color: #3a3a3a;}
#services .services_slider .el .description{ display:table-cell; position: relative; background: #636363;}
#services .services_slider .el .description .image{ position: absolute;top: 0px; right: 0px; bottom: 0px; left: 0px;
    z-index: 0; opacity: .5;
}
#services .services_slider .el .description .text{ position: relative; z-index: 10;width: 100%; max-width: 420px;
    padding:85px 35px; }
#services .services_slider .el .description .text .ttl{ font-size: 3.8rem; line-height: 0.9; margin-bottom: 25px; font-weight: 500;}
#services .services_slider .el .description .text .intro{ font-size: 1.6rem; line-height: 1.4375; margin-bottom: 25px;}
#services .services_slider .el .description .text .link a{ font-size: 1.6rem; line-height: 1.4375; color: #fff; text-decoration: underline;}

@media (max-width: 890px) {
    #services{ height: auto;}
    #services .services_slider{
        display: block;
    }
    #services .services_slider:after{
        display: none;
    }
    #services .services_slider .el{ min-width: 100%;  max-height: 60px; }
    #services .services_slider .el.active{ max-height: 760px; }
    #services .services_slider .el .inner{ display: block; min-width: 280px;}
    #services .services_slider .el .title{ display: block; width: 100%; text-align: center; height: 60px; padding: 0px;
        line-height: 60px;}
    #services .services_slider .el .description{ display: block; width: 100%;}
    #services .services_slider .el .description .text{padding: 20px 10px;}

}

#serviceBlock{}
#serviceBlock .bread{ margin: 40px 0px 70px;}

.grayBG{display: none; position: fixed; width: 100%; height: 100%; background: #000; opacity: .5; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 9999;}
.popup{display: none; position: absolute; max-width: 430px; min-width: 280px; width: 100%; background: #fff; top: 0%; left: 50%; z-index: 9999;}
.popup .close{ position: absolute; right: 0px; top: 0px; display: block; height: 70px; width: 70px; text-align: center; line-height: 70px;}
.popup .title{ border-bottom: 1px solid #e0e0e0; padding: 35px 30px 15px; font-size: 2.6rem; color: #3a3a3a; line-height: 0.76;}
.popup .feedback_form{ padding: 25px; position: relative;}
.feedback_form .select{position: relative; margin-bottom: 12px;}
.feedback_form .select .input{ border: 1px solid #e0e0e0; cursor: pointer; padding: 8px 15px; font-size: 1.8rem; line-height:0.8; color: #888888; }
.feedback_form .select .arrow{ position: absolute; width: 30px; height: 30px; text-align: center; color: #888; line-height: 30px;
    font-size: 14px; right: 1px; top: 1px; cursor: pointer;}
.feedback_form .select .list{display: none;  position: absolute; z-index: 20; top: 100%; left: 0px; width: 100%; margin: 0px;
    padding: 0px; background: #e0e0e0; border: 1px solid #e0e0e0;}
.feedback_form .select .list li{ display: block; padding: 5px 15px; font-size: 1.6rem; color: #000; cursor: default;}
.feedback_form .select .list li:hover{background: #9E9E9E;}
.feedback_form textarea{ display: block; width: 100%; height: 102px; border: 1px solid #e0e0e0; padding: 10px 15px; font-size: 1.8rem;
    font-family: 'PF Din Text Cond Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #888; resize: none; margin-bottom: 12px; outline: none;}
.feedback_form .subtitle{ text-align: center; font-size: 1.8rem; text-transform: uppercase; line-height: 0.78; color: #3a3a3a; position: relative; margin: 30px 0px;}
.feedback_form .subtitle span{ display: inline-block; padding: 0px 15px; position: relative; z-index: 20; background: #fff;}
.feedback_form .subtitle:after{content: ''; display: block; border-bottom: 1px solid #e0e0e0; position: absolute; top:50%; left: 0px; right: 0px;}
.feedback_form input[type='text'], 
.form.subscribe input[type='text']
{ display: block; width: 100%; height: 32px; padding: 0px 15px; font-size: 1.8rem; outline: none;
    border: 1px solid #e0e0e0;
    font-family: 'PF Din Text Cond Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #888; margin-bottom: 12px;}
.feedback_form .go{ display: inline-block; width: 48%; height: 42px;  border: 1px solid #9f9f9f; text-align: center; text-transform: uppercase;
text-decoration: none; font-size: 1.8rem; color: #3a3a3a; line-height: 2.5; margin-right: 2%;}
.feedback_form .req{ display: inline-block; vertical-align: top; width: 48%; font-size: 1.4rem; line-height: 1 ; color: #3a3a3a; padding-top: 5px;
 margin-bottom: 20px;}
.feedback_form .success{ font-size: 1.8rem; color: #71aa00; display: none;}
.feedback_form .fail{ font-size: 1.8rem; color: #ff3226; display: none;}
.feedback_form .error{ border: 1px solid #ff0000 !important; color: #ff0000;}

.contacts{ }
.contacts .map{ position: relative; width: 100%; height: 400px; border: 2px solid #e0e0e0; margin-bottom: 30px;}
.contacts .map:after{ content:''; position: absolute; z-index: -1; left: 0px; top: 0px; right: 0px; bottom: 0px;
    opacity: 0.5; filter: alpha(opacity=50);
    background-image: url("/assets/images/logo.svg"); background-repeat: no-repeat; background-size: 60% auto; background-position: center;
}
.contacts .map #garantTeplaMap{ width: 100%; height: 400px; }
/*.contacts .map ymaps{ position: absolute!important; top:0; }*/
.contacts .text{ width: 40%; margin-right: 5%; float: left;}
.contacts .mailblock{width: 55%; float: left; border: 2px solid #e0e0e0; padding: 20px;}
.contacts .mailblock .ttl{ text-align: center; font-size: 2.5rem; margin-bottom: 20px; text-transform: uppercase; font-weight: 500;}
@media (max-width: 600px) {
    .contacts .text{ float: none; width: 100%; margin-bottom: 30px; margin-right: 0px;}
    .contacts .mailblock{ float: none; width: 100%;}
}

.mailblock.in_content{ width: 543px; max-width: 100%; border: 2px solid #e0e0e0; padding: 20px; margin-top:30px;}
.mailblock.in_content .ttl{ text-align: center; font-size: 2.5rem; margin-bottom: 20px; text-transform: uppercase; font-weight: 500;}

.tid10 #informationBlock .submenu{
    border:none;
    border-radius: 0px;
}
.workemail{ display: none !important; }

.tid10 #informationBlock .submenu .categories, 
.tid10 #informationBlock .submenu .subscribe{
    margin-bottom: 15px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
}

.tid10 #informationBlock .submenu .subscribe form{
    padding: 15px 8px;
}
.subscribe input{ display: block; width: 100%; height: 32px; padding: 0px 15px; font-size: 1.8rem; outline: none;
    border: 1px solid #e0e0e0;
    font-family: 'PF Din Text Cond Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #888; margin-bottom: 12px;}

.subscribe .submit {  display: block; height: 48px; padding: 0; font-size: 2rem; text-transform: uppercase; text-decoration: none; line-height: 0.7; color: #fff; background-color: #0e9114; border: none; border-radius: 5px; font-weight: 500;}

.subscribe .spasibo{ display: none; }