@charset "utf-8";
/*JOIN THE INVASION*/
.joininvasion-sec { position: relative; width: 100%; z-index: 9; padding: 70px 0; } 
.joininvasion-sec:before { content: ''; width: 100%; height: 380px; position: absolute; top: 0; left: 0; right: 0; background: transparent linear-gradient(180deg, #00010100 0%, #00010129 16%, #000101 100%) 0% 0% no-repeat padding-box; transform: matrix(-1, 0, 0, -1, 0, 0); z-index: -1; }
.joininvasioncol { width: 100%; box-shadow: 0px 0px 25px #FFFFFF; border: 3px solid #FFFFFF; position: relative; margin: 10px 0 20px; display: inline-block; transition: all 0.5s; }
.invasionimgbox { width:100%; display:block;  }
.invasionimgbox:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 15px solid #44F6F8; filter: blur(28px); opacity: 0; transition: all .5s; }
.invasionimgbox .img-fluid { width: 100%; height: 100%; object-fit: cover; }
.invasiondatabox { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 15px 15px; }
.invasiondatabox h3 { font-size: 52px; color: #ffffff; margin: 0; line-height: 1; font-family: 'Maqin Larisa Display';}
.invasiondatabox h3 span { font-family: 'Oswald'; font-size: 20px; font-weight: 300; display: block; margin: 0 0 5px; letter-spacing: 11px;  }
.joininvasion-sec .col-lg-4:first-child .joininvasioncol { box-shadow: 0px 0px 25px #48FDFF; }
.joininvasion-sec .col-lg-4:first-child .invasionimgbox:before { border: 15px solid #44F6F8; }
.joininvasion-sec .col-lg-4:nth-child(2) .joininvasioncol { box-shadow: 0px 0px 25px #F86B15; }
.joininvasion-sec .col-lg-4:nth-child(2) .invasionimgbox:before { border: 15px solid #F86B15; }
.joininvasion-sec .col-lg-4:last-child .joininvasioncol { box-shadow: 0px 0px 25px #FFFFFF; }
.joininvasion-sec .col-lg-4:last-child .invasionimgbox:before { border: 15px solid #FFFFFF; }
.joininvasioncol:hover .invasionimgbox:before { opacity:1; }





/*-------------------------------- Responsive Media Query --------------------------------*/
@media (min-width: 1200px){
.joininvasion-sec .row { max-width: 1100px; margin: 0 auto; }


}


@media (max-width: 991px){
.joininvasion-sec { padding: 50px 0; }
.invasiondatabox h3 { font-size: 38px; line-height: 1.3; }
.invasiondatabox h3 span { font-size: 18px; letter-spacing: 6px; }


}


@media (max-width: 767px){
.invasiondatabox { padding: 10px 5px; }
.invasiondatabox h3 { font-size: 17px; }
.invasiondatabox h3 span { font-size: 10px; letter-spacing: 4px; }
/*.invasiondatabox h3 { font-size: 46px; }
.invasiondatabox h3 span { font-size: 20px; letter-spacing: 11px; }*/

}