/*Страница Гибка листового металла + Кровля под ключ*/
.block-icons{
    display: flex;justify-content: space-between;align-items: center;text-align: center;width: 100%;padding: 20px 0;flex-wrap:wrap;
}
.gibka-col-50{display:flex;width: 50%;}
.block-3{display: flex;flex-wrap:wrap;justify-content: center;align-items: center;}
.block-3 > div:nth-child(2){width:65%;}

.krovlya-1{display:flex;position:relative;}
.krovlya-2{display:flex;justify-content:center;align-items: center;text-align: center;flex-wrap: wrap;}
.kr-btn{margin: 20px;}
.kr-btn span{display: flex;align-items: center;justify-content: center;width: 220px;height:80px;border-radius:0;border:1px solid #323079; color:#323079;background: #ffffff;}
.kr-btn span:hover{color:#ffffff;background: #323079;-webkit-transition: background 400ms linear;-ms-transition: background 400ms linear;transition: background 400ms linear;}
@media screen and (max-width: 760px){
    .block-icons{justify-content: center;}
    .gibka-col-50{width: 100%;padding:20px 0;}
    .block-3 > div:nth-child(2){width:100%;}

}
/* /END Страница Гибка листового металла + Кровля под ключ*/

/* Кровля под ключ */
.krovlya-1{
    display:flex;
    position:relative;
}
.krovlya-1 h1{
    position:absolute;
    top:15px;
    left:40px;
    color:#ffc000;
    font-size:60px;
    font-weight:700;
    line-height: 1.5;
    margin: 0;
}
.krovlya-2{
    display:flex;
    justify-content:center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}

.kr-btn{
    margin: 20px;
}
.kr-btn span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height:80px;
    border-radius:0;
    border:1px solid #323079;
    color:#323079;
    background: #ffffff;
}
.kr-btn span:hover{
    color:#ffffff;
    background: #323079;
    -webkit-transition: background 400ms linear;
    -ms-transition: background 400ms linear;
    transition: background 400ms linear;
}

/* Табы ======
===================================*/
.tabs {
    text-align: center;
    max-width: 90%;
    float: none;
    list-style: none;
    padding: 0;
    margin: 25px auto;
    border:0;
}
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
.tabs .jq-radio {
    display:none !important;
}
.tabs label p {
    padding: 5px;
    margin: 0;
}
.tabs label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height:80px;
    border-radius:0;
    border:1px solid #323079;
    color:#323079;
    background: #ffffff;
    margin: 0 10px;
}
.tabs label span {
    display: none;
}
.tabs label:hover {
    color:#ffffff;
    background: #323079;
    -webkit-transition: background 400ms linear;
    -ms-transition: background 400ms linear;
    transition: background 400ms linear;
}
.tab-content {
    text-align: left;
    display: none;
    width: 100%;
    float: left;
    padding: 15px;
    box-sizing: border-box;
    background-color:#ffffff;
}

.tabs .jq-radio.checked + label {
    color:#ffffff;
    background: #323079;
    -webkit-transition: background 400ms linear;
    -ms-transition: background 400ms linear;
    transition: background 400ms linear;
}

#tab-first-styler.checked ~ #tab-content-1,
#tab-second-styler.checked ~ #tab-content-2,
#tab-cost-first-styler.checked ~ #tab-cost-content-1,
#tab-cost-second-styler.checked ~ #tab-cost-content-2,
#tab-cost-third-styler.checked ~ #tab-cost-content-3,
#tab-cost-forth-styler.checked ~ #tab-cost-content-4,
#tab-cost-fifth-styler.checked ~ #tab-cost-content-5
{
    display: block;
}

.block-roof-img{
    position: relative;
    display: flex;
}
.block-roof-img img{
    width: 100%;
    height: 100%
}
.roof-img-caption{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#ffffff;
    top: 0;
    text-align: center;
    left: 0;
}
.roof-img-caption span{
    width: 80%;
    display:block;
}
.roof-img-caption span:nth-child(2){
    display: none;
}
.roof-img-caption.default-view-caption span:nth-child(2){
    display:block;
}
.roof-img-caption.default-view-caption span:nth-child(1){
    display:none;
}

.block-roof-left{
    display: inline-block;
    width: 40%;
    margin-right: 5px;
}
.roof-right-first-line .block-roof-img{
    padding: 0 5px 5px 5px;
}
.roof-right-second-line .block-roof-img{
    padding: 5px 5px 0px 5px;
}
.block-roof-right{
    display: inline-block;
    width: 60%;
}
.roof-right-first-line{
    display: flex;
    width: 100%;
}
.roof-right-first-line > div{
    width: 33.3333333333%;
}
.roof-right-second-line{
    margin-top: 5px;
    display: flex;
    width: 100%;
}
.roof-right-second-line > div:nth-child(1){
    display: flex;
    width: 32.77777777%;
}
.roof-right-second-line > div:nth-child(2){
    display: flex;
    width: 67%;
}



/* /End Табы */
.roof-advantages{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.roof-advantages > div{
    display: flex;
    flex-direction: column;
}
.roof-advantages > div span{
    width: 70%;
    margin: 0 auto;
}
.roof-advantages img {
    display: flex;
    justify-content: center;
    width: 100%;
}
@media screen and (max-width: 768px){
    .krovlya-1 {
        justify-content: center;
        text-align: center;
    }
    .krovlya-1 h1{
        font-size: 40px;
        left: unset;
        bottom: unset;
        top: unset;
    }

    .tabs p {
        padding: 5px;
        margin-right: 10px;
    }
    .tabs {
        max-width: 750px;
        margin: 50px auto;
    }

    .tabs label{
        display: flex;
        width: 80%;
        margin: 10px auto;
    }
    .tab-content > div{
        flex-direction: column;
    }
    .block-roof-left,
    .block-roof-right{
        display: flex;
        width: 100%;
        flex-direction: column;
        margin-bottom: 10px;
    }
    .roof-right-first-line{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .roof-right-first-line .block-roof-img:nth-child(1) .roof-img-caption,
    .roof-right-first-line .block-roof-img:nth-child(2) .roof-img-caption{
        display:none;
    }
    .roof-right-first-line .block-roof-img{
        width: 48%;
        padding: 0;
    }
    .roof-right-first-line .block-roof-img:nth-child(3){
        width: 100%;
        padding: 10px 0;
    }
    .roof-right-first-line .block-roof-img img{
        padding: 0;
    }
    .roof-right-second-line{
        flex-direction: column;
        margin-top: 0;
    }
    .roof-right-second-line > div:nth-child(1) {
        width: 100%;
    }
    .roof-right-second-line .block-roof-img {
        padding: 0;
    }
    .roof-right-second-line > div:nth-child(2) {
        width: 100%;
        padding-top:10px;
    }
    .roof-advantages{
        flex-direction: column;
    }
    .roof-advantages img{
        width: 100%;
        height: auto;
    }
}

.roof-cost .tab-content{
    padding: 0;
}
.acor-container{
    margin: 0;
}
.acor-container {
    margin: 20px 0;
}
.acor-container .acor-body {
    margin: 0 auto;
    height: 0;
    color: rgba(0, 0, 0, 0);
    line-height: 18px;
    padding: 0 30px;
    box-sizing: border-box;
    transition: color 0.5s, padding 0.5s;
    overflow: hidden;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    border-bottom: 1px solid #eeeeee;
}
.acor-container .acor-body p {
    margin: 0 0 10px;
}
.acor-container label {
    cursor: pointer;
    display: block;
    padding: 15px 20px;
    width: 100%;
    font-weight: 300;
    box-sizing: border-box;
    z-index: 100;
    font-family: Verdana, sans-serif;
    font-size: 18px;
    margin: 0 0 5px;
    transition: color .35s;
    height: auto;
}
.acor-container label:hover {
    color: #323079;
    background: none;
}

.acor-container .jq-checkbox{
    display: none !important;
}
.acor-container label:before {
    content: '\276F';
    float: right;
}
.acor-container .jq-checkbox.checked + label {
    /*box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);*/
}
.acor-container .jq-checkbox.checked + label:before {
    transition: transform .35s;
    transform: rotate(90deg);
}
.acor-container .jq-checkbox.checked + label + .acor-body {
    height: auto;
    margin-top: -5px;
    color: #000;
    padding: 10px;
}
.roof-cost.tabs .tab-content label{
    height: auto;
    border:0;
    font-weight: 400;
    color: #b33;
    font-size: 16px;
    padding: 10px;
}
.roof-cost.tabs > label{
    height: auto;
}
.roof-cost.tabs label p{
    padding: 0;
}
.acor-container label.first-label:before{
    content:"";
}
.acor-body thead td{
    font-weight: 600;
    color: #b33;
    padding-bottom: 20px;
}
.acor-body table td{
    text-align: left;
    border: 0;
}
.hidden-lg{
    display: none;
}
.hidden-sm{
    display: table;
}
.acor-body table tbody tr td:first-child{
    width: 50%;
}

.acor-body table tbody tr > td{
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}
.acor-body table tbody > tr:last-child td{
    border:0;
}
@media screen and (max-width: 768px){
    .acor-body{
        padding: 0;
    }
    .hidden-lg{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        padding: 10px 0;
    }
    .acor-body > .hidden-lg:last-child{
        border:0;
    }
    .hidden-sm{
        display: none;
    }
}
/* /End Кровля под ключ */

.breadcrumbs li:last-child{
    float: right;
    padding-top: 5px;
}
.breadcrumbs li:last-child a{
    font-size: 20px;
}
.gibka-2{display: flex;flex-direction: column;align-items: center;width: 100%;}
.gibka-2 span.button{
    border:1px solid  #323079; color:#ffffff;background: #CA287D;
    width: 220px;
    height: 87px;
    line-height: 87px;
    font-size: 14px;
    text-transform: uppercase;
}
.gibka-2 span.button:hover{
    color:#ffffff;
    background: #323079;
    -webkit-transition: background 400ms linear;
    -ms-transition: background 400ms linear;
    transition: background 400ms linear;}
.btn-banner{
    position: absolute;
    bottom: 87px;
}

@media screen and (max-width: 768px){
    .breadcrumbs li:last-child a{
        font-size: 16px;
    }
    .btn-banner {
        bottom: 5px;
    }
    .gibka-2.btn-banner span{
        height: 40px;
        line-height: 40px;
    }
}
@media screen and (max-width: 479px) {
    .krovlya-1 h1 {
        font-size: 24px;
    }
}