/*------------------------------------------------------------------
Project:  ComingSoon
Version:  
Last change:  
Assigned to:  Bach Le
Primary use:  
-------------------------------------------------------------------*/

/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face { font-family: Poppins-Regular; src: url('../fonts/Poppins/Poppins-Regular.ttf'); }

@font-face { font-family: Poppins-Bold; src: url('../fonts/Poppins/Poppins-Bold.ttf'); }

@font-face { font-family: Aldrich-Regular; src: url('../fonts/Aldrich/Aldrich-Regular.ttf'); }

/*//////////////////////////////////////////////////////////////////
[ RS PLUGIN ]*/
/*---------------------------------------------*/
.container { max-width: 1200px; }

/*//////////////////////////////////////////////////////////////////
[ Form ]*/

/*---------------------------------------------*/
.wrap-input100 { position: relative; width: 100%; height: 50px; z-index: 1; }
.input100 { display: block; width: 100%; background: #f5f5f5; height: 100%; border-radius: 25px; padding: 0 20px; text-align: center; }
.focus-input100 { content: ''; display: block; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: 35px; box-shadow: 0px 0px 0px 0px; color: rgba(0,178,111, 0.5); }
.input100:focus + .focus-input100 { -webkit-animation: anim-shadow 0.5s ease-in-out forwards; animation: anim-shadow 0.5s ease-in-out forwards; }

@-webkit-keyframes anim-shadow {
    to { box-shadow: 0px 0px 80px 30px; opacity: 0; }
}

@keyframes anim-shadow {
    to { box-shadow: 0px 0px 80px 30px; opacity: 0; }
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input { position: relative; }
.alert-validate::before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 16px; padding: 5px 30px 6px 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 12px; pointer-events: none; font-family: Poppins-Bold; color: #c80000; font-size: 12px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; }
.alert-validate::after { content: "\f06a"; font-family: FontAwesome; display: block; position: absolute; color: #c80000; font-size: 16px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 18px; }
.alert-validate:hover:before { visibility: visible; opacity: 1; }

@media (max-width: 992px) {
    .alert-validate::before { visibility: visible; opacity: 1; }
}

/*//////////////////////////////////////////////////////////////////
[ RS Flip Clock ]*/
.flip-clock-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; position: relative; max-width: 100%; margin: 0; margin-bottom: 20px; }
    .flip-clock-wrapper .flip { box-shadow: none; margin-bottom: 50px; }
    .flip-clock-wrapper ul { position: relative; float: unset; margin: 2px; width: 41px; height: 54px; font-size: 36px; font-weight: unset; line-height: unset; border-radius: 3px; background: #0d1629; }
        .flip-clock-wrapper ul li { line-height: unset; }
            .flip-clock-wrapper ul li a div { outline: none; }
                .flip-clock-wrapper ul li a div div.inn { font-family: Aldrich-Regular; color: #fff; font-size: 35px; font-weight: unset; text-align: unset; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; z-index: 1; width: 100%; height: 200%; text-shadow: 0 0px 0px #000; background-color: #0d1629; border-radius: 3px; }
                .flip-clock-wrapper ul li a div .shadow { border-radius: 3px; }
                .flip-clock-wrapper ul li a div.up:after { display: none; }
/*---------------------------------------------*/
.flip-clock-divider { display: block; float: unset; position: relative; width: 26px; height: 54px; }
    .flip-clock-divider span { display: none; }
    .flip-clock-divider::before { content: ":"; font-family: Aldrich-Regular; color: #fff; font-size: 30px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
    .flip-clock-divider.days::before { display: none; }
    .flip-clock-divider::after { font-family: Poppins-Regular; color: #fff; font-size: 12px; text-transform: uppercase; display: block; text-align: center; width: 90px; position: absolute; left: 100%; top: 100%; padding-top: 16px; }
    .flip-clock-divider.days::after { content: "days"; }
    .flip-clock-divider.hours::after { content: "hrs"; }
    .flip-clock-divider.minutes::after { content: "min"; }
    .flip-clock-divider.seconds::after { content: "sec"; }

@media (max-width: 1200px) {
    .flip-clock-wrapper { justify-content: center; }
}

@media (max-width: 576px) {
    .flip-clock-wrapper { max-width: 240px; margin-right: 26px; }
    .flip-clock-divider.days { width: 26px; }
    .flip-clock-divider.minutes::before { display: none; }
}


/*==================================================================
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
==================================================================*/

/*==================================================================
[ Color ]*/
.cl0 { color: #fff; }




/*//////////////////////////////////////////////////////////////////
[ S-Text 0 - 15 ]*/
.s1-txt1 { font-family: Poppins-Bold; font-size: 15px; color: #555; line-height: 1.2; }
.s1-txt2 { font-family: Poppins-Bold; font-size: 15px; color: #fff; line-height: 1.2; }
.s1-txt3 { font-family: Poppins-Regular; font-size: 13px; color: #999; line-height: 1.5; }
/*//////////////////////////////////////////////////////////////////
[ M-Text 16 - 25 ]*/




/*//////////////////////////////////////////////////////////////////
[ L-Text >= 26 ]*/
.l1-txt1 { font-family: Poppins-Regular; font-size: 30px; color: #fff; line-height: 1.2; text-transform: uppercase; }
.l1-txt2 { font-family: Poppins-Bold; font-size: 70px; color: #fff; line-height: 1.1; text-transform: uppercase; }
.l1-txt3 { font-family: Poppins-Bold; font-size: 30px; color: #333; line-height: 1.2; text-transform: uppercase; }
/*==================================================================
   SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE SHAPE
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ Size ]*/
.size1 { width: 100%; min-height: 100vh; }
.size2 { width: 100%; height: 50px; }
.size3 { width: 36px; height: 36px; }

/*//////////////////////////////////////////////////////////////////
[ Width ]*/
.wsize1 { width: 390px; max-width: 100%; }

/*//////////////////////////////////////////////////////////////////
[ Height ]*/




/*//////////////////////////////////////////////////////////////////
[ Background ]*/
.bg0 { background-color: #fff; }

.bg-img1 { background-position: center; background-repeat: no-repeat; background-size: cover; }




/*//////////////////////////////////////////////////////////////////
[ Border ]*/
.bor1 { border-radius: 10px; }




/*==================================================================
   WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE WHERE  
==================================================================*/




/*==================================================================
 HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW 
==================================================================*/
.placeholder0::-webkit-input-placeholder { color: #999999; }
.placeholder0:-moz-placeholder { color: #999999; }
.placeholder0::-moz-placeholder { color: #999999; }
.placeholder0:-ms-input-placeholder { color: #999999; }

/*---------------------------------------------*/
.overlay1 { position: relative; z-index: 1; }
    .overlay1::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background: #00639e; background: -webkit-linear-gradient(top, #00639e, #008bff); background: -o-linear-gradient(top, #00639e, #008bff); background: -moz-linear-gradient(top, #00639e, #008bff); background: linear-gradient(top, #00639e, #008bff); opacity: 0.8; }

/*---------------------------------------------*/
.how-btn1 { /*border-radius: 25px;*/ background-color: #f6a421; padding-right: 20px; padding-left: 20px; }

    .how-btn1:hover { background-color: #333333; }

/*---------------------------------------------*/
.wrappic1 { display: block; flex-grow: 1; }

    .wrappic1 img { max-width: 100%; }

/*---------------------------------------------*/
.how-social { color: #fff; font-size: 22px; background-color: transparent; border: 2px solid #fff; border-radius: 2px; }

    .how-social:hover { background-color: #00b26f; color: #fff; }

/*//////////////////////////////////////////////////////////////////
[ Pseudo ]*/

/*------------------------------------------------------------------
[ Focus ]*/
.focus-in0:focus::-webkit-input-placeholder { color: transparent; }
.focus-in0:focus:-moz-placeholder { color: transparent; }
.focus-in0:focus::-moz-placeholder { color: transparent; }
.focus-in0:focus:-ms-input-placeholder { color: transparent; }


/*------------------------------------------------------------------
[ Hover ]*/
.hov-cl0:hover { color: #fff; }
.hov-bg0:hover { background-color: #fff; }

/*---------------------------------------------*/



/*==================================================================
  RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ XXL ]*/
@media (max-width: 1400px) {
    .respon1 { padding: 15px; }
}

/*//////////////////////////////////////////////////////////////////
[ XL ]*/
@media (max-width: 1200px) {
    .m-0-xl { margin: 0; }
    .m-lr-0-xl { margin-left: 0; margin-right: 0; }
    .m-lr-15-xl { margin-left: 15px; margin-right: 15px; }
    .m-l-0-xl { margin-left: 0; }
    .m-r-0-xl { margin-right: 0; }
    .m-l-15-xl { margin-left: 15px; }
    .m-r-15-xl { margin-right: 15px; }

    .p-0-xl { padding: 0; }
    .p-lr-0-xl { padding-left: 0; padding-right: 0; }
    .p-lr-15-xl { padding-left: 15px; padding-right: 15px; }
    .p-l-0-xl { padding-left: 0; }
    .p-r-0-xl { padding-right: 0; }
    .p-l-15-xl { padding-left: 15px; }
    .p-r-15-xl { padding-right: 15px; }

    .w-full-xl { width: 100%; }

    /*---------------------------------------------*/
    .respon1 { flex-direction: column; align-items: center; }

    /*---------------------------------------------*/
    .respon2 { text-align: center; }

    /*---------------------------------------------*/
    .respon3 { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; }
}


/*//////////////////////////////////////////////////////////////////
[ LG ]*/
@media (max-width: 992px) {
    .m-0-lg { margin: 0; }
    .m-lr-0-lg { margin-left: 0; margin-right: 0; }
    .m-lr-15-lg { margin-left: 15px; margin-right: 15px; }
    .m-l-0-lg { margin-left: 0; }
    .m-r-0-lg { margin-right: 0; }
    .m-l-15-lg { margin-left: 15px; }
    .m-r-15-lg { margin-right: 15px; }

    .p-0-lg { padding: 0; }
    .p-lr-0-lg { padding-left: 0; padding-right: 0; }
    .p-lr-15-lg { padding-left: 15px; padding-right: 15px; }
    .p-l-0-lg { padding-left: 0; }
    .p-r-0-lg { padding-right: 0; }
    .p-l-15-lg { padding-left: 15px; }
    .p-r-15-lg { padding-right: 15px; }

    .w-full-lg { width: 100%; }

    /*---------------------------------------------*/


}


/*//////////////////////////////////////////////////////////////////
[ MD ]*/
@media (max-width: 768px) {
    .m-0-md { margin: 0; }
    .m-lr-0-md { margin-left: 0; margin-right: 0; }
    .m-lr-15-md { margin-left: 15px; margin-right: 15px; }
    .m-l-0-md { margin-left: 0; }
    .m-r-0-md { margin-right: 0; }
    .m-l-15-md { margin-left: 15px; }
    .m-r-15-md { margin-right: 15px; }

    .p-0-md { padding: 0; }
    .p-lr-0-md { padding-left: 0; padding-right: 0; }
    .p-lr-15-md { padding-left: 15px; padding-right: 15px; }
    .p-l-0-md { padding-left: 0; }
    .p-r-0-md { padding-right: 0; }
    .p-l-15-md { padding-left: 15px; }
    .p-r-15-md { padding-right: 15px; }

    .w-full-md { width: 100%; }
    /*---------------------------------------------*/
}


/*//////////////////////////////////////////////////////////////////
[ SM ]*/
@media (max-width: 576px) {
    .m-0-sm { margin: 0; }
    .m-lr-0-sm { margin-left: 0; margin-right: 0; }
    .m-lr-15-sm { margin-left: 15px; margin-right: 15px; }
    .m-l-0-sm { margin-left: 0; }
    .m-r-0-sm { margin-right: 0; }
    .m-l-15-sm { margin-left: 15px; }
    .m-r-15-sm { margin-right: 15px; }

    .p-0-sm { padding: 0; }
    .p-lr-0-sm { padding-left: 0; padding-right: 0; }
    .p-lr-15-sm { padding-left: 15px; padding-right: 15px; }
    .p-l-0-sm { padding-left: 0; }
    .p-r-0-sm { padding-right: 0; }
    .p-l-15-sm { padding-left: 15px; }
    .p-r-15-sm { padding-right: 15px; }

    .w-full-sm { width: 100%; }

    /*---------------------------------------------*/
    .respon4 { font-size: 50px; }

    /*---------------------------------------------*/
    .respon5 { padding-left: 20px; padding-right: 14px; padding-bottom: 50px; }
}


/*//////////////////////////////////////////////////////////////////
[ SSM ]*/
@media (max-width: 480px) {
    .m-0-ssm { margin: 0; }
    .m-lr-0-ssm { margin-left: 0; margin-right: 0; }
    .m-lr-15-ssm { margin-left: 15px; margin-right: 15px; }
    .m-l-0-ssm { margin-left: 0; }
    .m-r-0-ssm { margin-right: 0; }
    .m-l-15-ssm { margin-left: 15px; }
    .m-r-15-ssm { margin-right: 15px; }

    .p-0-ssm { padding: 0; }
    .p-lr-0-ssm { padding-left: 0; padding-right: 0; }
    .p-lr-15-ssm { padding-left: 15px; padding-right: 15px; }
    .p-l-0-ssm { padding-left: 0; }
    .p-r-0-ssm { padding-right: 0; }
    .p-l-15-ssm { padding-left: 15px; }
    .p-r-15-ssm { padding-right: 15px; }

    .w-full-ssm { width: 100%; }
    /*---------------------------------------------*/

}

.respon2 img { max-width: 80%; }
.boxIcone { background: url(../images/iconsMundaLeft.png) center bottom no-repeat; }
.customTextLeft { text-align: center; font-size: 1.5em; }