@import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap');

body {font-size: 14px; color: #222;   font-family: 'Karla', sans-serif; margin:0; overflow-x:hidden;
 -webkit-backface-visibility: hidden;
background-size:100% auto; background-position:bottom;}
 *{ outline:none !important;}
 ul{ list-style:none; margin:0; padding:0;}
 h1,h2,h3,h4,h5,h6{ font-family: 'Karla', sans-serif;}

body  {/* background:url('../img/bg_main.png') no-repeat;  background-size:100%; */ height:100vh;}
.cartonet_bg  {background:url('../img/bg-desktop.png') no-repeat;  background-size:100%; height:100vh;}
.cartonet_main_sec {max-width: 700px;margin: auto;height: 100vh;display: table;width: 100%; }
.cartonet_inner_bx {width: 100%;display: inline-block;margin: auto;border-radius: 20px;vertical-align: middle;display: table-cell;position:relative;  right:0;
-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  }
.card_top_sec{padding: 20px 50px;background: #fff;border-top-left-radius: 20px;border-top-right-radius: 20px;z-index: 99; position:relative}
.logo_sec {width: 100%;display: inline-block;}
.logo_sec img {max-width: 300px;}
.cartonet_blue_sec {padding: 30px 50px; background:linear-gradient(to right, #153bda, #5172fd);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;z-index: 99;position:relative; min-height: 212px;}
.cartonet_blue_sec h2{font-size:25px; color:#fff; margin:0;line-height:30px;padding: 40px 0; left: 14%; position:fixed;}
.cartonet_card {box-shadow: 0 0 13px -6px #222;border-radius: 20px;position: relative;z-index: 99;}
.copyright_sec {display: inline-block;width: 100%;position: absolute;left: 0;right: 0;margin: auto;bottom: 20px;text-align: center;}
.copyright_sec span{font-size:18px; color:#fff;} 
.copyright_sec img {max-width: 15px;}
.logo_right_sec  h2{font-size:29px; color:#C8C6C6; margin:0;}
.logo_right_sec  span{font-size:60px; color:#5172FD; margin:0;}
.cartonet_card_upper {position: relative;}

/* .card_no_sec{display:none;}  */
.card_num {margin-bottom: 30px;}
.card_num h3{font-size:50px; color:#fff; margin:0;}
.card_name_sec h3{margin:0;font-size:22px; color:#fff; letter-spacing:1.1px;}
.card_name_sec span{margin:0;font-size:30px; color:#fff;}
.return_icn img {max-width: 40px;margin-top: 30px;}

.card_form li{position:relative;}
.card_form li input {border:none;border-bottom:1px solid #d6d4d4; border-radius:0; min-height:45px;  font-size:18px; background:none;box-shadow:none; }
.card_form li input:focus{box-shadow:none; border-color:#505be1;}
.card_form li:nth-child(1)::before {position: absolute;content: "";right: 0;top: 0;background: url('../img/card_icn.png') no-repeat;height: 30px;width: 30px;background-size: 100%;
bottom: 0;margin: auto;}

.card_frm_sec {position: absolute;top: 0;height: 80%;bottom: 0;background: #fff;width: 100%;border-top-right-radius: 20px;left:0%;max-width: 80%;padding: 60px 50px;margin: auto;border-bottom-right-radius: 20px;z-index: 9;
-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  }
.form_btn{text-align:center;margin-top: 40px;}
.form_btn a {background: #5172FD;box-shadow: 0px 3px 10px #5172FD33;font-size: 20px;color: #fff;font-weight: 600;letter-spacing: 2px;min-width: 196px;display: inline-block;border-radius: 2em;text-align: center;height: 50px;line-height: 50px; text-decoration:none;}




.cartonet_blue_sec h2 {display:block;}
.card_no_sec {display: none;}
/* .cartonet_inner_bx.accedi_click .cartonet_blue_sec {padding: 76px 50px;} */
.cartonet_inner_bx.accedi_click.accedi_vibrate{right:-1%; left:auto;
-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  }

  
  
.cartonet_inner_bx.vibratOut{right:-10%;
-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  }
 .cartonet_inner_bx.vibratOut.accedi_click{
right:40%;
-webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  } 
.cartonet_inner_bx.accedi_click .card_frm_sec{left: 100%;} 
.cartonet_inner_bx.vibrateInBefore .card_frm_sec{left: 115%;}
.cartonet_inner_bx.vibrateIn .card_frm_sec::before {position: absolute;content: "";left: -100px;height: 100%;background: #fff;width: 110px;top: 0;}
.cartonet_inner_bx.vibrateInBefore{right: 50% !important;}



/* mobile_layout */
.main_mobile_bg{background:url('../img/bg_main.png') no-repeat;  background-size:cover; height:100vh;}
.mobile_layout{background:url('../img/bg-mobile.png') no-repeat;  background-size:cover; height:100vh;} 
.mobile_layout .cartonet_main_sec {max-width: 600px;}
.cartonet_mobile_main {max-width: 90%;margin: auto;background: #fff;border-radius: 10px;box-shadow: 0 0 13px -6px #222;}
.mobile_logo_sec img {max-width: 200px;}
.mobile_logo_sec {padding: 20px;}
.text_sec { background:linear-gradient(to right, #153bda, #5172fd); padding: 30px 20px;}
.text_sec h2 {margin: 0;font-size: 18px;color: #fff;}
.mobile_form_sec {padding: 30px 20px;}
.mobile_form_sec  .card_form li input {font-size: 15px;}
.mobile_form_sec .card_form li:nth-child(1)::before {height: 20px;width: 20px;}
.mobile_form_sec .form_btn a {font-size: 16px;min-width: 160px;height: 40px;line-height: 40px;}

.cartonet_mobile_card {max-width: 90%;margin: auto;}
.cartonet_mobile_card .card_no_sec {display: inline-block;width: 100%;}
.cartonet_mobile_card .return_icn {text-align: right;}
.cartonet_mobile_card .return_icn img {max-width: 30px;margin-top: 0;margin-bottom: 20px;}
.cartonet_mobile_card .card_top_sec {padding: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
.cartonet_mobile_card .cartonet_card {border-radius: 10px;}
.cartonet_mobile_card .logo_sec img {max-width: 150px;}
.cartonet_mobile_card .logo_right_sec h2 {font-size: 19px;}
.cartonet_mobile_card .logo_right_sec span {font-size: 28px;letter-spacing: 3px;}
.cartonet_mobile_card .cartonet_blue_sec {padding: 20px 20px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.cartonet_mobile_card .card_num h3 {font-size: 30px;}
.cartonet_mobile_card .card_name_sec h3 {font-size: 16px;}
.card_name_sec span {margin: 5px 0 0 0;font-size: 22px;}
/* Extra Small Devices, Phones */ 

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.cartonet_main_sec {max-width: 400px;}
.logo_sec img {max-width: 120px;}
.logo_right_sec h2 {font-size: 19px;}
.logo_right_sec span {font-size: 26px;line-height: 30px;}
.cartonet_blue_sec h2 {font-size: 19px;padding: 10px 0;left: 9%;}
.cartonet_blue_sec {padding: 30px 30px;min-height: 154px;}
.card_top_sec {padding: 20px 30px;}
.card_num h3 {font-size: 20px;}
.card_name_sec span {font-size: 15px;}
.card_name_sec h3 {font-size: 11px;}
.return_icn img {max-width: 20px;margin-top: 15px;}
.card_frm_sec {padding: 10px 20px;}
.form_btn a {font-size: 15px;min-width: 170px;height: 40px;line-height: 40px;}
.card_form li:nth-child(1)::before {height: 20px;	width: 20px;}
.cartonet_blue_sec h2 {position: static;}
body {background-size: cover;}
.cartonet_bg {background-size: cover;background-position: center;}
.logo_right_sec{display:none;}
.main_mobile_bg,.mobile_layout{display:none;}

}

@media only screen and (min-width : 991px) {
.cartonet_main_sec {max-width: 450px;}
.logo_sec img {max-width: 150px;}
.logo_right_sec h2 {font-size: 20px;line-height: 40px;}
.logo_right_sec span {font-size: 31px;}
.cartonet_blue_sec h2 {padding: 10px 0;}
.card_num h3 {font-size: 25px;}
.card_name_sec h3 {font-size: 11px;}
.card_name_sec span {font-size: 18px;}
.return_icn img {max-width: 30px;margin-top: 10px;}
.cartonet_blue_sec {min-height: 172px;}
.card_frm_sec {padding: 20px 30px;}
.form_btn a {font-size: 19px;min-width: 160px;height: 40px;line-height: 40px;}
.card_form li:nth-child(1)::before {height: 20px;width: 20px;}
}

@media only screen and (min-width : 1199px) {
.cartonet_main_sec {max-width: 650px;}
.card_name_sec h3 {font-size: 17px;}
.card_name_sec span {font-size: 24px;}
.cartonet_blue_sec h2 {left: 6%;}
.return_icn img {margin-top: 18px;}
.logo_sec img {max-width: 300px;}
.logo_right_sec h2 {font-size: 29px;}
.logo_right_sec span {font-size: 50px;line-height: 55px;}
.cartonet_blue_sec h2 {padding: 30px 0;}
.card_num h3 {font-size: 50px;}
.card_name_sec h3 {font-size: 22px;}
.card_name_sec span {font-size: 30px;}
.return_icn img {max-width: 40px;margin-top: 30px;}
.cartonet_blue_sec {min-height: 212px;}
.card_frm_sec {padding: 60px 50px;}
.form_btn a {font-size: 20px;min-width: 196px;height: 50px;line-height: 50px;}
.card_form li:nth-child(1)::before {height: 30px;width: 30px;}
.cartonet_blue_sec h2 {position: fixed;}
body {background-size: 100%;}
.cartonet_bg {background-size: cover;background-position: unset;}
.cartonet_blue_sec h2 {font-size: 32px;}

}
@media only screen and (min-width : 1300px) {
.cartonet_blue_sec h2{left: 11%;}
}

@media only screen and (min-width : 1600px) {
.cartonet_blue_sec h2 {left: 20%;}
.cartonet_main_sec {max-width: 700px;}
.card_name_sec h3 {font-size:22px;}
.card_name_sec span {font-size: 30px;}
.return_icn img {margin-top: 30px;}
}

@media only screen and (min-width : 2200px) {
.cartonet_blue_sec h2 {
	left: 27%;
}
}

@media only screen and (max-width : 767px) {

.cartonet_bg{display:none;}
body {background: none;}

 .mobile_layout {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
} 
.mobile_layout.mobile_right_card{left:auto;right:-100%} 
.mobile_layout.mobile_right_card.mobile_layout_active{right:0;
-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;}
  
/* .mobile_layout_inactive{opacity:0; height:0;}
.mobile_layout_active{opacity:1; height:100%;} */
/* .copyright_sec {position: static;} */

}

.mobile_layout.mobile_left_card.mobile_layout_inactive{right:auto; left:-100%; }
.mobile_layout.mobile_left_card.mobile_layout_active{ left:0;
-webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;}
  


@media only screen and (max-width : 480px) {
.mobile_logo_sec img, .cartonet_mobile_card .logo_sec img {max-width: 100px;}
.cartonet_mobile_card .logo_right_sec span {font-size: 15px;letter-spacing: unset;}
.cartonet_mobile_card .mobile_form_sec {padding: 20px;}
.cartonet_mobile_main .form_btn {margin-top: 20px;}
.cartonet_mobile_card .logo_right_sec h2 {font-size: 15px;}
.cartonet_mobile_card .card_num h3 {font-size: 25px;}
.card_name_sec span {font-size: 15px;}
.cartonet_mobile_card .card_name_sec h3 {font-size: 9px;}
.cartonet_mobile_card .cartonet_blue_sec {min-height: auto;}
.cartonet_mobile_card .mobile_form_sec {padding: 20px 20px;}
.mobile_form_sec .card_form li input {font-size: 12px;}
.cartonet_mobile_main .mobile_form_sec {padding: 10px 20px;}

}


.card_frm_sec .card_error_span::before, .mobile_form_sec .card_error_span::before,.card_frm_sec .date_error_span::before, .mobile_form_sec .date_error_span::before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	background: /* #FD5193 */ url('../img/error_arrow.png') no-repeat;
	/* background-size:100%;
	transform: rotate(225deg); */
	margin: auto; 
	left: 0;   
	right: 0;
	top: -6px;
}
.card_frm_sec .card_error_span, .card_frm_sec .date_error_span, .mobile_form_sec .card_error_span,.mobile_form_sec .date_error_span{
	padding: 5px 15px;
	background: #FD5193;
	position: absolute;
	top: 120%;
	color: #fff;
	font-size: 13px;
	z-index: -9;
	height: 0;
	opacity: 0;
	transition: ease-out 0.4s;
}
.card_frm_sec .card_error_span.active, .card_frm_sec .date_error_span.active, .mobile_form_sec .card_error_span.active, .mobile_form_sec .date_error_span.active{
	height: 30px;
	opacity: 1;
	z-index: 9;
	transition: ease-out 0.4s;
}