﻿
.layers {
    position: absolute;
    width: auto;
    height: auto;
    z-index: 1;
    top: 50%;
    margin-top: -80px;
    left:0;
    right:0;
}
.layers:after{
    float:none;
    clear:both;
}

.layer {
    display: block;
    height: 200px;
    text-align: left;
    position: absolute;
    left: 50px;
    right: 0;
    opacity: 0;
    visibility: hidden;
}

    .layer.active {
        opacity: 1;
        visibility: visible;
    }
 

.layer-text {
    color: #fff;
    letter-spacing: -0.2px;
    display: inline-block;
    overflow: hidden;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
}

    .layer-text.active {
        -webkit-transition-duration: 0.01s;
        transition-duration: 0.01s;
    }

    .layer-text span {
        display: block;
        /*border-bottom: 1px solid #fff;*/ 
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
        font-weight: bold;
    }

.layer-text-big {
    color: #fff;    
    letter-spacing: -0.1px;
    display: block;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
    z-index: 6; white-space: nowrap; text-align: left; margin-left:30px; width:70%; color:#c3c3c3 !important;
}

.layer-btn {
    padding-bottom: 6px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

    .layer-btn div {
        -webkit-transition-property: -webkit-transform;
        transition-property: transform;
        -webkit-transform: translateY(200%);
        transform: translateY(200%);
        opacity: 0;
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-delay: 1.2s;
        transition-delay: 1.2s;
    }

.layer.active .layer-text span,
.layer.active .layer-text-big,
.layer.active .layer-btn div {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.layer-btn .btn {
    color: #fff;
    background: #97835d;
    border-radius: 0;
    display: block;
    border: 1px solid #fff;
    -webkit-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;  
}

    .layer-btn .btn:hover {
        background: #b07d1e;
    }

    .layer-btn .btn span {
        position: absolute;
        display: block;
        background: #fff;
        top: 6px;
        right: 0px;
        color: #0b4a85;
        z-index: 3;
        text-align: center;
    }

        .layer-btn .btn span:after {
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 52px 35px;
            border-color: transparent transparent #ffffff transparent;
            content: '';
            left: -35px;
            top: 0;
        }


@media screen and (min-width:320px) {
    .layer-text span{
        font-size: 27px !important;
               padding: 0 30px;
    }

    .layer-text-big {
        font-size: 20px !important;
       line-height: 40px;
        white-space: normal !important;
    }

    .layer-btn .btn {
        font-size: 18px !important;
        padding: 10px 22px 8px 22px !important;
        margin : 20px 0 0 30px;
    }

        .layer-btn .btn:hover {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }

        .layer-btn .btn span {
            padding-top: 10px !important;
            padding-left: 6px !important;
            width: 27px;
            height: 33px;
        }

            .layer-btn .btn span i {
                font-size: 10px !important;
            }

            .layer-btn .btn span:after {
                border-width: 0 0 33px 23px;
                left: -23px;
            }
}

@media screen and (min-width:768px) {
    .layer-text span {
        font-size: 41px !important;
    }

    .layer-text-big {
        font-size: 30px !important;
        white-space: normal !important;
        line-height: 40px;
    }
    .layer-btn 
    .layer-btn .btn {
        font-size: 18px !important;
        margin : 20px 0 0 30px;

    }
        .layer-btn .btn:hover {
            padding-left: 47px !important;
            padding-right: 47px !important;
        }

    .layer-btn .btn span {
        padding-top: 17px !important;
        padding-left: 9px !important;
        width: 36px;
        height: 52px;
    }

        .layer-btn .btn span i {
            font-size: 13px !important;
        }

        .layer-btn .btn span:after {
            border-width: 0 0 52px 35px;
            left: -35px;
        }
}

@media screen and (max-height:736px) {
    .layer-text span{
        font-size: 38px !important;
    }

    .layer-text-big {
        font-size: 17px !important;
        white-space: normal !important;
        line-height: 32px;
    }

    .layer-btn .btn {
        margin-top:20px;
        font-size: 14px !important;
        padding: 10px 22px 8px 22px !important;
    }

        .layer-btn .btn:hover {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }

        .layer-btn .btn span {
            padding-top: 10px !important;
            padding-left: 6px !important;
            width: 27px;
            height: 38px;
        }

            .layer-btn .btn span i {
                font-size: 10px !important;
            }

            .layer-btn .btn span:after {
                border-width: 0 0 38px 23px;
                left: -23px;
            }
}

@media screen and (min-width:1370px) {
       .layer-text span{
       padding: 0 250px;
    }
         .layer-text-big {
      margin-left : 250px;
      width:65%;
    }

    .layer-btn .btn {
        font-size: 18px !important;
        padding: 10px 22px 8px 22px !important;
        margin : 20px 0 0 250px;
    }
}
