@charset "utf-8";
/* CSS Document */

/*------------START :: FONT STYLE---------------*/
@font-face{font-family:'mm';font-style:normal;font-weight:900;src:local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'mm';font-style:normal;font-weight:bold;src:local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'mm';font-style:normal;font-weight:500;src:local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v5/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'mm';font-style:normal;font-weight: 400;src:local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v5/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'mm';font-style:normal;font-weight: 300;src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
body {font-family:'mm';}
@media all and (-ms-high-contrast:none) { *::-ms-backdrop, body{font-family: 'Poppins', sans-serif;} }
/*------------END :: FONT STYLE---------------*/

 /*------------START :: COMMAN STYLE ---------------*/
.YH.YH_40 a { text-decoration: none; }
.YH.YH_40 .alert_msg { min-height: 60px; padding: 16px; text-align: center; font-size: 14px; }
.YH.YH_40 .alert-dismissible .close { padding: 14px 16px; font-size: 28px; }
.YH.YH_40 .alert-dismissible p { margin-bottom: 0; }
.YH.YH_40 .help-inline { color: #f00; font-size: 14px; margin-bottom: 15px; float: left; }
.YH.YH_40 .signin .help-inline { color: #f00; margin-bottom: 0; }
.YH.YH_40 .signin .accept_div .help-inline { margin-left: -20px; }
.YH.YH_40 .signin .youth_dob label { font-size: 14px; line-height: 12px;}
.YH.YH_40 .signin .accept_div a, .YH.YH_40 .signin .text_highlight { color: #0ac6ff;}
.YH.YH_40 .form-control:focus { border-color: inherit;box-shadow: 0px 10px 25px -8px rgb(0 42 255 / 31%); }
.YH.YH_40 .form_textarea{ resize: none; border-radius: 0; border: 3px solid #000000; }
.YH.YH_40 .alert-danger { background-color: #ffd6da; }
.YH.YH_40 .signup_form_div .form-group .fas.fa-times{position: absolute;top: 27%;right: 20px;color: #cc0000;font-size: 14px;}
.YH.YH_40 .signup_form_div .custom_msg_check_validate i{color: #F00;float: left;margin-top: 5px; font-size: 14px;}
.YH.YH_40 .signup_form_div .custom_msg_check_validate .fas.fa-times.fa.fa-check.ok.valid {display: none!important; }
.YH.YH_40 .form-control:disabled, .YH.YH_40 .form-control[readonly] { background-color: transparent; opacity: 1; }
.YH.YH_40 .signin h3 { color: #000; font-size: 26px; font-weight: 900; line-height: 32px; margin-bottom: 15px; padding: 0 50px; }
.YH.YH_40 .signin .fas.fa-times.fa.fa-check.ok.valid:before{content: "\f00c";}
.YH.YH_40 .signin .form-group .fas.fa-times.fa.fa-check.ok.valid{color:#05c5ff;}
.YH.YH_40 .signin .form-group .fa-check.valid.ok{color:#05c5ff;}
.YH.YH_40 .signin .form-group .fas.fa-times.fa.fa-check.ok{color:#cc0000;}
.YH.YH_40 .signin .form-group .fas.fa-times{position: absolute;top: 27%;right: 8px;color: #cc0000;}
.YH.YH_40 .signin .form-group select{ background-repeat: no-repeat; -webkit-appearance: none; -moz-appearance: none; background-position: 93% 53%; height: auto; background-image: url(../img/downarrow.png); -webkit-appearance: none; }
.YH.YH_40 .signin .col-12.form-group select{ background-position: 98% 53%; }
.YH.YH_40 .signin .custom_msg_check_validate>span { float: left; margin-left: -20px; }
.YH.YH_40 .signin .custom_msg_check_validate i{color: #F00;float: left;margin-top: 5px;font-family: mm;font-weight: 500;font-size: 14px;}
.YH.YH_40 .signin .custom_msg_check_validate i::before{content: ""}
.YH.YH_40 .signin .btn_signin { background: transparent; font-size: 16px; font-weight: 900; color: #09c6ff; width: 174px; height: 60px; border-radius: 100px; cursor: pointer; padding: 15px 0; text-align: center; border: 4px solid #09c6ff; display: inline-block; margin-right: 26px; }		
.YH.YH_40 .signin .btn_join { background: linear-gradient(90deg, rgba(9,130,233,1) 0%, rgba(0,241,255,1) 100%); font-size: 16px; font-weight: 900; color: #fff; width: 174px; height: 60px; border-radius: 100px; cursor: pointer; padding: 18px 0; text-align: center; display: inline-block; border: transparent; } 
.YH.YH_40 .signin .form-group { padding: 0; text-align: center; }
.YH.YH_40 .signin form .row .col-6:nth-child(2) { padding-right: 15px; }
.YH.YH_40 .signin form .row .col-6:nth-child(3) { padding-left: 15px; }
.YH.YH_40 .signin form .row .col-4:nth-child(1) { padding-right: 15px; }
.YH.YH_40 .signin form .row .col-4:nth-child(2) { padding: 0 15px; }
.YH.YH_40 .signin form .row .col-4:nth-child(3) { padding-left: 15px; }
.YH.YH_40 .signin form .email_teacher .row .col-3 { padding-right: 15px; }
.YH.YH_40 .signin form .email_teacher .row .col-4:nth-child(3) { padding: 0 7px 0 15px; }
.YH.YH_40 .signin form .email_teacher .row .col-4:nth-child(4) { padding-left: 8px; }
.YH.YH_40 .signin .form-group input, .YH.YH_40 .signin .form-group select { font-size: 14px; }
.YH.YH_40 .signin .col-6:nth-child(2) .fas.fa-times { right: 22px; }
.YH.YH_40 .signin .col-4:nth-child(1) .fas.fa-times { right: 23px; }
.YH.YH_40 .signin .col-4:nth-child(2) .fas.fa-times { right: 22px; }
.YH.YH_40 .signin .email_teacher .col-3 .fas.fa-times { top: 18%; right: 22px; }
.YH.YH_40 .signin .email_teacher .col-4:nth-child(3) .fas.fa-times { top: 18%; right: 15px; }
.YH.YH_40 .signin form .email_teacher .row .col-1 p { padding: 5px 0px!important; }
.YH.YH_40 .logo_small_div { display: none; }
.YH.YH_40 .terms_conditions_div p { float: right; }
.YH.YH_40 .modal .custom_msg_check_validate .form_check_box { margin-left: 15px; }
.YH.YH_40 .modal .custom_msg_check_validate .form_check_box .form-check-input { margin-top: .1rem; margin-left: -2.25rem; }
 /*------------END :: COMMAN STYLE ---------------*/

 /*------------START :: MENU STYLE ---------------*/
.YH_header .header_toggle {float: left;display: block;width: 32px;height: 32px;cursor: pointer;-webkit-transform: rotate(0deg);transform: rotate(0deg);}
.YH_header .header_toggle span {background-color: black;width: 100%;height: 2px;border-radius: 1px;display: block;position: absolute;left: 0;content: '';-webkit-transition: .5s ease-in-out;transition: .5s ease-in-out;}
.YH_header .header_toggle span:nth-child(1) {top: 4px;-webkit-transform-origin: left center;transform-origin: left center;}
.YH_header .header_toggle span:nth-child(2) {top: 14px;-webkit-transform-origin: left center;transform-origin: left center;}
.YH_header .header_toggle span:nth-child(3) {top: 24px;-webkit-transform-origin: left center;transform-origin: left center;}
.YH_header .header_toggle.open span:nth-child(1) {-webkit-transform: rotate(45deg);transform: rotate(45deg);top: 3px;left: 4px;}
.YH_header .header_toggle.open span:nth-child(2) {width: 0%;opacity: 0;}
.YH_header .header_toggle.open span:nth-child(3) {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);top: 25px;left: 4px;}
.YH_header .header_overlay {position: absolute;top: 16px;left: 16px;z-index: -1;background: rgba(0, 0, 0, 0.8);border-radius: 50%;-webkit-transition: 1s;transition: 1s;-webkit-transform: scale3d(0, 0, 0);transform: scale3d(0, 0, 0);}
.YH_header .header_overlay.open {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
.YH_header .header_fullscreen {width: 100%;position: fixed;/*left: 0;top: 80px*/;-webkit-transition: ease-in-out 0.25s;transition: ease-in-out 0.25s;-webkit-transition-delay: 0s;transition-delay: 0s;visibility: hidden;opacity: 0;}
.YH_header .header_fullscreen ul {list-style: none;}
.YH_header .header_fullscreen a {color: white;text-decoration: none;}
.YH_header .header_fullscreen li a{font-size: 5vh;font-weight: 300;}
.YH_header .header_fullscreen.open {visibility: visible;opacity: 1;-webkit-transition: ease-in-out 0.5s;transition: ease-in-out 0.5s;-webkit-transition-delay: 0.25s;transition-delay: 0.25s;}
.YH_header .header_overlay {background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #FF512F), color-stop(50%, #FF512F), color-stop(90%, #DD2476));background: linear-gradient(180deg, #0c2245 10%, #11264d 50%, #09c6ff 90%);}
.YH_header .header_toggle span { background-color: white;}
.YH_header .header_fullscreen {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;color: white;}
.YH_header .header_fullscreen a:hover,.activemenu {color: #05c5ff;}
.YH_header .modal-content{border-radius: 15px;}
.YH.YH_40 .header_login_forget_password { font-size: 12px; padding-top: 20px; }
.YH_header .header_logo img { vertical-align: sub; }
.YH_header .accept_div .control-group {  margin-left: 20px;  }
.YH_header .accept_div .font_size_14 { font-size: 14px; }
.YH_header .join_btn_div ul { list-style: none; color: #fff; }
.YH_header .join_btn_div .password_div { border-radius: 8px; margin-right: 5px; height: 40px; font-size: 14px; margin-bottom: 15px; }
.YH_header .join_btn_div .email_identity { border-radius:8px;margin-right:5px;height:40px;font-size:14px; margin-bottom: 15px; } 
.YH_header .already_member { font-size: 12px; }	
.YH_header .hubloader{margin:10px auto; display:table;} .hubloader img, .YH_header .hubloaderimg{width:35px;height:35px;}
.YH.YH_40 .close{float: right;font-size: 33px;font-weight: 100;line-height: 1;color: #fff;text-shadow: none; opacity:1;padding:0;margin: 0;}
.YH.YH_40 .close:hover {color: #fff;text-decoration: none;opacity:1;transform: scale(1.4);}
.YH.YH_40 .inputform{border-radius:18px;border:none;}
.YH.YH_40 .modal_logi{overflow:visible;}
@keyframes btn_pop {  0%, 20% { transform: scale(1.0); -webkit-transform: scale(1.0);  }  60% { transform: scale(1.2);  -webkit-transform: scale(1.2); }  0% { transform: scale(1.0);  -webkit-transform: scale(1.0); }  }
.YH.YH_40 .select_box{background-repeat: no-repeat;-webkit-appearance: none; -moz-appearance: none;background-position: 93% 53%;height: auto;background-image:url('../img/downarrow.png');-webkit-appearance: none;}
 /*------------END :: MENU STYLE ---------------*/

 /*------------START :: HEADER STYLE - LOGIN SCREENS ---------------*/
.YH_header .d_menu { display: inline-block; margin: 8px; }
.YH_header .m_menu { display: none; }	
.YH_header .d_menu a { color: #fff; font-size: 15px; font-weight: 700; line-height: 24px; }
.YH_header .d_menu a:hover, .YH_header .d_menu a.active { padding-bottom: 3px; border-bottom: 3px solid #010AD0; }	
.YH_header { background: #fff; background-image: none; }
.YH_header .header_bg { background-image: url(../img/mobile_header_bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; height: 250px; border-bottom: 16px solid transparent; border-image: linear-gradient(to right, #0DA7FF 0%, #1EF1F9 100%); border-image-slice: 1; }
.YH_header .logo_small { padding-left: 20px; margin-left: 0; border-left: none; }
.YH_header .login_popup_bg{background-color: transparent;}
.YH.YH_40 .login_form input, .YH.YH_40 .login_form input::placeholder { width: 200px; margin-bottom: 15px; }
.YH.YH_40 .login_form input, .YH.YH_40 .login_form input::placeholder { height: 40px;  border-radius: 5px; font-size: 14px; font-weight: 700; line-height: 24px; color: #000; margin-right: 15px; }
.YH.YH_40 .login_form .login_btn { background: linear-gradient(90deg, rgba(9,130,233,1) 0%, rgba(0,241,255,1) 100%); font-size: 16px; font-weight: 900; color: #fff; width: 123px; height: 40px; border-radius: 136px; cursor: pointer; padding: 4px 0; text-align: center; display: inline-block; border: transparent; margin-right: 12px; margin-bottom: 15px; }	
.YH_header .jointoday_btn { background: transparent; font-size: 16px; font-weight: 900; color: #fff; width: 92px; height: 40px; border-radius: 136px; cursor: pointer; padding: 4px 0; text-align: center; border: 4px solid #fff; display: inline-block; margin-bottom: 15px; }
.YH_header .forget_password { color: #fff; text-decoration: none; float: right; margin: 10px 0 0 15px; font-size: 13px; font-weight: 300; }	
.YH_header .header_loggedout { background: transparent; padding: 15px; height: 70px; }
.YH_header .header_loggedout.bg_menu_color { background: rgb(15, 32, 68); padding: 15px; height: 70px; }	
.YH_header .signup_form_div .form-group { text-align: left; }	
.YH_header label.help-inline { color: #fff; font-size: 14px; }
.YH_header button:focus { outline: none; }
/*------------END :: HEADER STYLE - LOGIN SCREENS ---------------*/

/*------------START :: FOOTER - LOGIN SCREENS---------------*/
.YH.YH_40 .footer_bg { background-image: url(../img/footer_bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; height: 421px; }
.YH.YH_40 .footer_menu_div { padding: 80px 145px 0; }
.YH.YH_40 .footer_menu_div .footer_logo { display: block; margin-bottom: 21px; }
.YH.YH_40 .footer_menu_div .content { width: 387px; color: #fff; font-size: 12px; line-height: 24px; }
.YH.YH_40 .footer_menu_div .copy_rights, .YH.YH_40 .footer_menu_div .footer_menu { display: inline-block; color: #fff; font-size: 10px; line-height: 16px; margin-top: 75px;}
.YH.YH_40 .footer_menu_div .footer_menu { margin-right: 40px; text-decoration: none; }
.YH.YH_40 .footer_menu_div .menu_category { color: #010AD0; font-size: 16px; line-height: 24px; margin-bottom: 31px;  }	
.YH.YH_40 .footer_menu_div .footer_main_menu { display: block; color: #fff; font-size: 14px; line-height: 24px; text-decoration: none; margin-bottom: 13px;  }
/*------------END :: FOOTER - LOGIN SCREENS---------------*/ 

/*------------START :: tooltip style---------------*/
.YH .tooltip > .tooltip-inner {background-color:#0066ff;color:#fff;max-width:400px;}
.YH .bs-tooltip-auto[x-placement^=top] > .arrow::before,.YH .tooltip.fade.show.bs-tooltip-top > .arrow::before{border-top-color:#0066ff;}
.YH .bs-tooltip-auto[x-placement^=right] > .arrow::before,.YH .tooltip.fade.show.bs-tooltip-right > .arrow::before{border-right-color:#0066ff;}
.YH .bs-tooltip-auto[x-placement^=left] > .arrow::before,.YH .tooltip.fade.show.bs-tooltip-left > .arrow::before{border-left-color:#0066ff;}
.YH .bs-tooltip-auto[x-placement^=bottom] > .arrow::before,.YH .tooltip.fade.show.bs-tooltip-bottom > .arrow::before{border-bottom-color:#0066ff;}
.YH .tooltip.fade.bs-tooltip-top.show.fade{transition:none;}
.YH .tooltip.fade.bs-tooltip-top{transition:none;}
.YH .tooltip.bs-tooltip-top.show.fade{top:-10px;}
.YH .tooltip-arrow { border-bottom-color:#fff;}
/*------------END :: tooltip style---------------*/

.YH.YH_40 .signup_form_div .form_field .fa-eye, .YH.YH_40 .signup_form_div .form_field .fa-eye-slash { position: absolute; right: 18px; }
.YH.YH_40 .password_message {background-color: #3345f0;color:#fff;width:46.5%;padding: 15px; text-align: center; border-radius: 6px; position: relative; z-index: 1; top: -60px; left: 9%; margin-left: -60px; }
.YH.YH_40 .password_message::after { content: " "; position: absolute; bottom: 100%; left: 25%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #3345f0 transparent; }


.load {width: 100%;height: 100vh;position: fixed;top: 0;left: 0;z-index: 19999;overflow: hidden;background-color: #05C5FF;}
.load:before, .load:after,.load .dot,.load .outline {position: absolute;top: 50%;left: 50%;-o-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border-radius: 50%;}
.load .dot {width: 118.8px;height: 118.8px;background: #0d1c3c;-o-animation: in 4s linear infinite;-moz-animation: in 4s linear infinite;-ms-animation: in 4s linear infinite;-webkit-animation: in 4s linear infinite;animation: in 4s linear infinite;z-index: 2;}
.load:before {content: "";width: 0px;height: 0px;background: #05c5ff;-o-animation: out1 4s linear infinite;-moz-animation: out1 4s linear infinite;-ms-animation: out1 4s linear infinite;-webkit-animation: out1 4s linear infinite;animation: out1 4s linear infinite;}
.load:after {content: "";width: 0px;height: 0px;background: #0d1c3c;-o-animation: out2 4s linear infinite;-moz-animation: out2 4s linear infinite;-ms-animation: out2 4s linear infinite;-webkit-animation: out2 4s linear infinite;animation: out2 4s linear infinite;}
.load .outline {width: 120px;height: 120px;z-index: 2;}
.load .outline span {width: 68px;height: 68px;-o-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-webkit-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;transform-origin: 100% 100%;-o-transform: rotate(45deg) skewX(80deg);-moz-transform: rotate(45deg) skewX(80deg);-webkit-transform: rotate(45deg) skewX(80deg);-ms-transform: rotate(45deg) skewX(80deg);transform: rotate(45deg) skewX(80deg);overflow: hidden;position: absolute;bottom: 50%;right: 50%;-o-animation: outline 4s linear infinite;-moz-animation: outline 4s linear infinite;-ms-animation: outline 4s linear infinite;-webkit-animation: outline 4s linear infinite;animation: outline 4s linear infinite;}
.load .outline span:before {content: "";display: block;border: solid 5px #fff;width: 200%;height: 200%;border-radius: 50%;-o-transform: skewX(-80deg);-moz-transform: skewX(-80deg);-webkit-transform: skewX(-80deg);-ms-transform: skewX(-80deg);transform: skewX(-80deg);-o-animation: outlineBefore 4s linear infinite;-moz-animation: outlineBefore 4s linear infinite;-ms-animation: outlineBefore 4s linear infinite;-webkit-animation: outlineBefore 4s linear infinite;animation: outlineBefore 4s linear infinite;}
@-o-keyframes outline { 0% { -o-transform: rotate(0deg) skewX(80deg); -moz-transform: rotate(0deg) skewX(80deg); -webkit-transform: rotate(0deg) skewX(80deg); -ms-transform: rotate(0deg) skewX(80deg); transform: rotate(0deg) skewX(80deg); } 25% { -o-transform: rotate(500deg) skewX(15deg); -moz-transform: rotate(500deg) skewX(15deg); -webkit-transform: rotate(500deg) skewX(15deg); -ms-transform: rotate(500deg) skewX(15deg); transform: rotate(500deg) skewX(15deg); } 50% { -o-transform: rotate(1000deg) skewX(40deg); -moz-transform: rotate(1000deg) skewX(40deg); -webkit-transform: rotate(1000deg) skewX(40deg); -ms-transform: rotate(1000deg) skewX(40deg); transform: rotate(1000deg) skewX(40deg); } 75% { -o-transform: rotate(1500deg) skewX(60deg); -moz-transform: rotate(1500deg) skewX(60deg); -webkit-transform: rotate(1500deg) skewX(60deg); -ms-transform: rotate(1500deg) skewX(60deg); transform: rotate(1500deg) skewX(60deg); } 100% { -o-transform: rotate(2160deg) skewX(80deg); -moz-transform: rotate(2160deg) skewX(80deg); -webkit-transform: rotate(2160deg) skewX(80deg); -ms-transform: rotate(2160deg) skewX(80deg); transform: rotate(2160deg) skewX(80deg); } } @-moz-keyframes outline { 0% { -o-transform: rotate(0deg) skewX(80deg); -moz-transform: rotate(0deg) skewX(80deg); -webkit-transform: rotate(0deg) skewX(80deg); -ms-transform: rotate(0deg) skewX(80deg); transform: rotate(0deg) skewX(80deg); } 25% { -o-transform: rotate(500deg) skewX(15deg); -moz-transform: rotate(500deg) skewX(15deg); -webkit-transform: rotate(500deg) skewX(15deg); -ms-transform: rotate(500deg) skewX(15deg); transform: rotate(500deg) skewX(15deg); } 50% { -o-transform: rotate(1000deg) skewX(40deg); -moz-transform: rotate(1000deg) skewX(40deg); -webkit-transform: rotate(1000deg) skewX(40deg); -ms-transform: rotate(1000deg) skewX(40deg); transform: rotate(1000deg) skewX(40deg); } 75% { -o-transform: rotate(1500deg) skewX(60deg); -moz-transform: rotate(1500deg) skewX(60deg); -webkit-transform: rotate(1500deg) skewX(60deg); -ms-transform: rotate(1500deg) skewX(60deg); transform: rotate(1500deg) skewX(60deg); } 100% { -o-transform: rotate(2160deg) skewX(80deg); -moz-transform: rotate(2160deg) skewX(80deg); -webkit-transform: rotate(2160deg) skewX(80deg); -ms-transform: rotate(2160deg) skewX(80deg); transform: rotate(2160deg) skewX(80deg); } } @-webkit-keyframes outline { 0% { -o-transform: rotate(0deg) skewX(80deg); -moz-transform: rotate(0deg) skewX(80deg); -webkit-transform: rotate(0deg) skewX(80deg); -ms-transform: rotate(0deg) skewX(80deg); transform: rotate(0deg) skewX(80deg); } 25% { -o-transform: rotate(500deg) skewX(15deg); -moz-transform: rotate(500deg) skewX(15deg); -webkit-transform: rotate(500deg) skewX(15deg); -ms-transform: rotate(500deg) skewX(15deg); transform: rotate(500deg) skewX(15deg); } 50% { -o-transform: rotate(1000deg) skewX(40deg); -moz-transform: rotate(1000deg) skewX(40deg); -webkit-transform: rotate(1000deg) skewX(40deg); -ms-transform: rotate(1000deg) skewX(40deg); transform: rotate(1000deg) skewX(40deg); } 75% { -o-transform: rotate(1500deg) skewX(60deg); -moz-transform: rotate(1500deg) skewX(60deg); -webkit-transform: rotate(1500deg) skewX(60deg); -ms-transform: rotate(1500deg) skewX(60deg); transform: rotate(1500deg) skewX(60deg); } 100% { -o-transform: rotate(2160deg) skewX(80deg); -moz-transform: rotate(2160deg) skewX(80deg); -webkit-transform: rotate(2160deg) skewX(80deg); -ms-transform: rotate(2160deg) skewX(80deg); transform: rotate(2160deg) skewX(80deg); } } @keyframes outline { 0% { -o-transform: rotate(0deg) skewX(80deg); -moz-transform: rotate(0deg) skewX(80deg); -webkit-transform: rotate(0deg) skewX(80deg); -ms-transform: rotate(0deg) skewX(80deg); transform: rotate(0deg) skewX(80deg); } 25% { -o-transform: rotate(500deg) skewX(15deg); -moz-transform: rotate(500deg) skewX(15deg); -webkit-transform: rotate(500deg) skewX(15deg); -ms-transform: rotate(500deg) skewX(15deg); transform: rotate(500deg) skewX(15deg); } 50% { -o-transform: rotate(1000deg) skewX(40deg); -moz-transform: rotate(1000deg) skewX(40deg); -webkit-transform: rotate(1000deg) skewX(40deg); -ms-transform: rotate(1000deg) skewX(40deg); transform: rotate(1000deg) skewX(40deg); } 75% { -o-transform: rotate(1500deg) skewX(60deg); -moz-transform: rotate(1500deg) skewX(60deg); -webkit-transform: rotate(1500deg) skewX(60deg); -ms-transform: rotate(1500deg) skewX(60deg); transform: rotate(1500deg) skewX(60deg); } 100% { -o-transform: rotate(2160deg) skewX(80deg); -moz-transform: rotate(2160deg) skewX(80deg); -webkit-transform: rotate(2160deg) skewX(80deg); -ms-transform: rotate(2160deg) skewX(80deg); transform: rotate(2160deg) skewX(80deg); } } @-o-keyframes outlineBefore { 0% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #ffffff; } 25% { -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); border: solid 5px #ffffff; } 49% { border: solid 5px #ffffff; } 50% { -o-transform: skewX(-40deg); -moz-transform: skewX(-40deg); -webkit-transform: skewX(-40deg); -ms-transform: skewX(-40deg); transform: skewX(-40deg); border: solid 5px #3463EB; } 75% { -o-transform: skewX(-60deg); -moz-transform: skewX(-60deg); -webkit-transform: skewX(-60deg); -ms-transform: skewX(-60deg); transform: skewX(-60deg); border: solid 5px #3463EB; } 100% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #3463EB; } } @-moz-keyframes outlineBefore { 0% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #ffffff; } 25% { -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); border: solid 5px #ffffff; } 49% { border: solid 5px #ffffff; } 50% { -o-transform: skewX(-40deg); -moz-transform: skewX(-40deg); -webkit-transform: skewX(-40deg); -ms-transform: skewX(-40deg); transform: skewX(-40deg); border: solid 5px #3463EB; } 75% { -o-transform: skewX(-60deg); -moz-transform: skewX(-60deg); -webkit-transform: skewX(-60deg); -ms-transform: skewX(-60deg); transform: skewX(-60deg); border: solid 5px #3463EB; } 100% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #3463EB; } } @-webkit-keyframes outlineBefore { 0% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #ffffff; } 25% { -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); border: solid 5px #ffffff; } 49% { border: solid 5px #ffffff; } 50% { -o-transform: skewX(-40deg); -moz-transform: skewX(-40deg); -webkit-transform: skewX(-40deg); -ms-transform: skewX(-40deg); transform: skewX(-40deg); border: solid 5px #3463EB; } 75% { -o-transform: skewX(-60deg); -moz-transform: skewX(-60deg); -webkit-transform: skewX(-60deg); -ms-transform: skewX(-60deg); transform: skewX(-60deg); border: solid 5px #3463EB; } 100% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #3463EB; } } @keyframes outlineBefore { 0% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #ffffff; } 25% { -o-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); border: solid 5px #ffffff; } 49% { border: solid 5px #ffffff; } 50% { -o-transform: skewX(-40deg); -moz-transform: skewX(-40deg); -webkit-transform: skewX(-40deg); -ms-transform: skewX(-40deg); transform: skewX(-40deg); border: solid 5px #3463EB; } 75% { -o-transform: skewX(-60deg); -moz-transform: skewX(-60deg); -webkit-transform: skewX(-60deg); -ms-transform: skewX(-60deg); transform: skewX(-60deg); border: solid 5px #3463EB; } 100% { -o-transform: skewX(-80deg); -moz-transform: skewX(-80deg); -webkit-transform: skewX(-80deg); -ms-transform: skewX(-80deg); transform: skewX(-80deg); border: solid 5px #3463EB; } } @-o-keyframes in { 0% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } 40% { width: 0px; height: 0px; background: #0d1c3c; } 41% { width: 0px; height: 0px; background: #05c5ff; } 50% { width: 121.2px 20; height: 121.2px 20; background: #05c5ff; } 90% { width: 0px; height: 0px; background: #05c5ff; } 91% { width: 0px; height: 0px; background: #0d1c3c; } 100% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } } @-moz-keyframes in { 0% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } 40% { width: 0px; height: 0px; background: #0d1c3c; } 41% { width: 0px; height: 0px; background: #05c5ff; } 50% { width: 121.2px 20; height: 121.2px 20; background: #05c5ff; } 90% { width: 0px; height: 0px; background: #05c5ff; } 91% { width: 0px; height: 0px; background: #0d1c3c; } 100% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } } @-webkit-keyframes in { 0% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } 40% { width: 0px; height: 0px; background: #0d1c3c; } 41% { width: 0px; height: 0px; background: #05c5ff; } 50% { width: 121.2px 20; height: 121.2px 20; background: #05c5ff; } 90% { width: 0px; height: 0px; background: #05c5ff; } 91% { width: 0px; height: 0px; background: #0d1c3c; } 100% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } } @keyframes in { 0% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } 40% { width: 0px; height: 0px; background: #0d1c3c; } 41% { width: 0px; height: 0px; background: #05c5ff; } 50% { width: 121.2px 20; height: 121.2px 20; background: #05c5ff; } 90% { width: 0px; height: 0px; background: #05c5ff; } 91% { width: 0px; height: 0px; background: #0d1c3c; } 100% { width: 121.2px 20; height: 121.2px 20; background: #0d1c3c; } } @-o-keyframes out1 { 0% { width: 0px; height: 0px; } 30% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @-moz-keyframes out1 { 0% { width: 0px; height: 0px; } 30% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @-webkit-keyframes out1 { 0% { width: 0px; height: 0px; } 30% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @keyframes out1 { 0% { width: 0px; height: 0px; } 30% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @-o-keyframes out2 { 0% { width: 0px; height: 0px; } 30% { width: 0px; height: 0px; } 60% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @-moz-keyframes out2 { 0% { width: 0px; height: 0px; } 30% { width: 0px; height: 0px; } 60% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @-webkit-keyframes out2 { 0% { width: 0px; height: 0px; } 30% { width: 0px; height: 0px; } 60% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } } @keyframes out2 { 0% { width: 0px; height: 0px; } 30% { width: 0px; height: 0px; } 60% { width: 120vw; height: 120vw;transform:scale(10); } 100% { width: 120vw; height: 120vw;transform:scale(10); } }