/*********************************************
 * Application Section
**********************************************/
.twc-application-section {
    --as-spacing-bottom:40px;
    --as-height-title:79px;
}

/* Item */
.twc-application-section__items {overflow:hidden;}
.twc-application-section__item {width:25%;}
@media only screen and (min-width:1025px) {
    .twc-application-section__item:not(:nth-child(4n + 1)) .twc-application-section__item-title:before {opacity:1;}
}
@media only screen and (min-width:769px) {
    .twc-application-section__item:not(:nth-child(3n + 1)) .twc-application-section__item-title:before {opacity:1;}
}
@media only screen and (min-width:481px) {
    .twc-application-section__item:not(:nth-child(2n + 1)) .twc-application-section__item-title:before {opacity:1;}
}
.twc-application-section__item-inner {display:block; height:100%;}

/* Title */
.twc-application-section__item-title {
    background:var(--twc-color-primary); display:flex;
    padding:5px 20px; min-height:var(--as-height-title); width:100%; position:relative;
}
.twc-application-section__item-title:before {
    content:""; display:block;
    width:1px; height:100%; background:rgba(112, 112, 112, .2);
    position:absolute; top:0; left:-.5px;
    transition:var(--twc-transition); opacity:1;
}

/* Thumbnail */
.twc-application-section__item-thumbnail {
    position:relative; overflow:hidden;
    min-height:500px; height:calc(100% - var(--as-height-title)); padding:40px 20px calc(var(--as-spacing-bottom) + 50px + 20px);
}
.twc-application-section__item-thumbnail-bg:before {
    background:rgba(0, 0, 0, .8); z-index:1; opacity:0;
    transition:var(--twc-transition);
}
.twc-application-section__item-thumbnail img {transition:var(--twc-transition);}

/* Excerpt */
.twc-application-section__item-excerpt {position:relative; z-index:2; opacity:0; transition:var(--twc-transition);}

/* Button */
.twc-application-section__item-buttons {
    position:absolute; bottom:var(--as-spacing-bottom); left:0;
    z-index:2; width:100%; text-align:center;
}
.twc-application-section__button-mobile > span {transition:var(--twc-transition);}
@media only screen and (min-width:769px) {
    .twc-application-section__button {
        --as-width-text:100px;
        position:relative;
        transition:var(--twc-transition);
    }
    .twc-application-section__button-icon {
        width:50px; height:50px; background:#fff; color:var(--twc-color-primary);
        position:relative;z-index:3;
    }
    .twc-application-section__button-text {
        overflow:hidden; transform:translate(1px, 0) translateZ(0); width:0; transition:var(--twc-transition);
    }
    .twc-application-section__button-text-inner {
        height:100%; background:#fff;
        white-space:nowrap; line-height:50px; color:#1d1b1b; font-weight:600; font-size:var(--twc-size-16);
        transition:var(--twc-transition);
    }
    .twc-application-section__item-inner:hover .twc-application-section__button-text {width:calc(var(--as-width-text) + 20px);}
    .twc-application-section__item-inner:hover .twc-application-section__button-text-inner {padding-left:20px;}
}

/* hover */
a:hover .twc-application-section__item-thumbnail-bg:before {opacity:1;}
a:hover .twc-application-section__item-thumbnail-bg img {transform:scale(1.05);}
a:hover .twc-application-section__item-excerpt {opacity:1;}

/*********************************************
 * Application Section Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .twc-application-section__item {width:33.33%;}
}
@media only screen and (max-width:920px) {
    .twc-application-section__item {width:50%;}
}
@media only screen and (max-width:768px) {
    .twc-application-section {--as-height-title:60px;}
    .twc-application-section__button {display:none;}
    .twc-application-section__item-excerpt {opacity:1}
    .twc-application-section__item-thumbnail-bg:before {opacity:1; background:rgba(0, 0, 0, .5);}
    .twc-application-section__item-thumbnail {min-height:400px;}
}
@media only screen and (max-width:540px) {
    .twc-application-section__item {width:100%;}

    /* Intro */
    .twc-application-section__intro {text-align:center;}
}