/* CONVERSION BUTTONS */
div.conversion-buttons {}
div.conversion-buttons > ul {
    display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
    margin:0; list-style:none;
}
div.conversion-buttons > ul > li.item {padding:0; width:25%;}

/* CONVERSION BUTTONS: inner */
div.conversion-buttons li.item .inner {position:relative; height:100%;}

/* CONVERSION BUTTONS: inner > background */
div.conversion-buttons .inner .conversion-bg {
    background-size:cover; background-position:center; background-repeat:no-repeat;
    position:relative; height:100%;
}
div.conversion-buttons .inner .conversion-bg:before {
    content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(21, 21, 21, .6);
    -webkit-transition:all .6s ease;-o-transition:all .6s ease;transition:all .6s ease;
}
div.conversion-buttons .inner .conversion-bg img {visibility:hidden;height:auto;}

/* CONVERSION BUTTONS: inner > content */
div.conversion-buttons .inner .conversion-content {
    position:absolute; top:0; left:0; right:0; bottom:0; padding:60px;
    display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
    -webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;
    -ms-flex-direction:column;flex-direction:column;
    -webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;
    -webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;
}
/*top*/
div.conversion-buttons .conversion-content .top,
div.conversion-buttons .conversion-content .bottom {
    -webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
div.conversion-buttons .conversion-content .top h3,
div.conversion-buttons .conversion-title {
    font-family:"Montserrat", sans-serif; font-size:22px; font-weight:700; color:#fff;
    text-transform:uppercase; overflow:hidden;
}
div.conversion-buttons .conversion-content .top h3 span {position:relative; padding-right:15px;}
div.conversion-buttons .conversion-content .top h3 span:before {
    content:""; position:absolute; top:50%; left:100%;
    -webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);
    width:1000px; height:2px; background:#fff;
}
/*middle*/
div.conversion-buttons .conversion-content .middle {
    text-align:center; visibility:hidden; opacity:0;
    -webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;
}
div.conversion-buttons .conversion-title {
    background:rgba(21, 21, 21, .6); padding:20px 20px; position:relative;
}
div.conversion-buttons .conversion-title:before {
    content:""; position:absolute; bottom:0; left:50%;
    -webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);
    height:5px; width:80px; background:#fff;
}
/*bottom*/
div.conversion-buttons .conversion-content .bottom {}
div.conversion-buttons .conversion-content .bottom h4 {
    font-family:"Montserrat", sans-serif; font-size:18px; color:#fff;
    text-transform:uppercase; letter-spacing:3px;
    -webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);
    -webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;
}

/* CONVERSION BUTTONS: hover */
div.conversion-buttons .inner:hover .conversion-content {padding:10px;}
div.conversion-buttons .inner:hover .conversion-bg:before {right:100%;}
div.conversion-buttons li.item .inner:hover .conversion-content .middle {opacity:1; visibility:visible;}
div.conversion-buttons .inner:hover .conversion-content .top,
div.conversion-buttons .inner:hover .conversion-content .bottom {visibility:hidden; opacity:0;}

@media only screen and (max-width:1370px) {
    /*=============================================================================
    =========================================HOME========================================
    =======================================================================================*/
    /*banner*/
    div.conversion-buttons .inner .conversion-content { padding:40px 30px;}
    div.conversion-buttons .conversion-content .top h3 {font-size:20px; }
    div.conversion-buttons .conversion-title {font-size:24px}
}

@media only screen and (max-width:1200px) {
    /*=============================================================================
       =========================================HOME========================================
       =======================================================================================*/
    /*banner*/
    div.conversion-buttons .inner .conversion-content { padding:20px}
    div.conversion-buttons .conversion-content .top h3 {font-size:16px; }
    div.conversion-buttons .conversion-title {font-size:20px; padding:20px 0;}
    div.conversion-buttons .inner:hover .conversion-content {
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:center;
        -webkit-justify-content:center;
        -ms-flex-pack:center;
        justify-content:center;
    }
}

@media only screen and (max-width:1023px) {
    /*=============================================================================
    =========================================HOME========================================
    =======================================================================================*/
    /*banner*/
    div.conversion-buttons > ul {-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
    div.conversion-buttons > ul li { width:100% !important; height:250px;}
    div.conversion-buttons .conversion-content .bottom { display:none;}
    div.conversion-buttons .inner .conversion-content {padding:30px;}
    div.conversion-buttons .conversion-content .top h3 {font-size:25px; }
    div.conversion-buttons .conversion-title {font-size:25px; padding:20px 0;}
}

@media only screen and (max-width:460px) {
    /*banner*/
    div.conversion-buttons .conversion-content .top h3 {font-size:16px; }
    div.conversion-buttons .conversion-title {font-size:20px; padding:15px 0;}
}