/**********************************header*/
.header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.header__col{
    width: 25%;
    padding: 175px 0 75px 0;
    height: 100%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    height: 50px;
}

/**********************************information*/

.information{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.information__col{
    width: 25%;
    min-height: 350px;
    padding: 30px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.information__col--bottom{
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
.paragraph__span{
    font-weight: 600;
    color: #3C3C3C;
}

.information__link{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    text-decoration: none;
    color: #6c6c6c;
}

.information__link:hover{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    color: #3C3C3C;
}

/**********************************map*/
.map-section{
    position: absolute;
    width: 75%;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.map-section__btn{
    width: 33.33%;
    background-color: #3C3C3C;
    height: 60px;
    display: inline-block;
    color: #fff;
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    right: 0;
    position: absolute;
    top: -60px;
}

.map-section__btn-text{
    overflow: hidden;
    height: 20px;
}

.map-section__btn-span{
    display: inline-block;
    -webkit-transition: all 0.5s 0.5s;
    -o-transition: all 0.5s 0.5s;
    transition: all 0.5s 0.5s;
}

.map-section__btn-span--hide{
    -webkit-transform: translate(0,-20px);
        -ms-transform: translate(0,-20px);
            transform: translate(0,-20px);
    -webkit-transition: all 0.5s 0.5s;
    -o-transition: all 0.5s 0.5s;
    transition: all 0.5s 0.5s;
}

.map-section .borderTrig-LT,.map-section .borderTrig-RB{
    z-index: 0;
}

.map-wrap{
    height: 0px;
    background-color: #3C3C3C;
    width: 100%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.map-wrap--hover{
    height: 20px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.map-wrap--open{
    height: 410px;
    -webkit-transition: all 0.5s cubic-bezier(.08, .61, .25, 1);
    -o-transition: all 0.5s cubic-bezier(.08, .61, .25, 1);
    transition: all 0.5s cubic-bezier(.08, .61, .25, 1);
}

#map{
    height: 100%;
    width: 0%;
     -webkit-transition: all 0.5s 0.5s;
     -o-transition: all 0.5s 0.5s;
     transition: all 0.5s 0.5s;
}

#map.map--open{
    width: 100%;
     -webkit-transition: all 0.5s cubic-bezier(.08, .61, .25, 1) 0.5s;
     -o-transition: all 0.5s cubic-bezier(.08, .61, .25, 1) 0.5s;
     transition: all 0.5s cubic-bezier(.08, .61, .25, 1) 0.5s;
}

@media all and (max-width: 850px){
    .header__col{
        width: 50%;
    }
    .header__tablet--off{
        display: none
    }
    .information{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .information__col{
        width: 50%;
    }
    .map-section{
        width: 100%;
    }
    .map-section__btn{
        width: 50%;
    }
}

@media all and (max-width: 700px){
    .header__col{
        width: 100%;
    }
    .header__mobile--off{
        display: none
    }
    .information__col{
        width: 100%;
        min-height: 250px;
    }
    .map-section{
        width: 100%;
    }
    .map-section__btn{
        width: 100%;
    }
}