/* 
Subplat Styles Stylesheet
version 1.0
Last Updated: 2021-12-14
Author: Sean-Patrick Lewis 
*/

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap');

*{
	font-family: 'Ubuntu', sans-serif;
}	

html, body{
	width: 100%;
	height: 100%;
}

body{
	background: url("../img/bg/absurdidad.png") repeat;
}


.body{
	position: relative;
	width: 100%;
	height: 100%;
}

.perks{
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(0%,-70%);
	width: 40%;
	padding: 0 60px 0 50px;
}

.perksrl{
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translate(0%,-70%);
	width: 40%;
	padding: 0 50px 0 60px;
}

.body footer{
	position: absolute;
	bottom: 20px;
	left:10%;
	padding-left: 50px;
}

.body footer p{
	font-size: 13px;
}

.perks h1, .perks h2, .perksrl h1, .perksrl h2{
	color: #546E7A;
	font-weight: 500;
	line-height: 25px;
	font-size: 16px;
	margin-bottom: 4px;
}

.perks h1 i, .perks h2 i, .perksrl h1 i, .perksrl h2 i{
	display: inline-block;
	width: 30px;
	color: #1976D2;
}

.perks img, .perksrl img{
	display: block;
	width: 55%;
}

.perks a.logo, .perksrl a.logo{
	margin-bottom: 30px;
	display: block;
}

.perks p, .perksrl p{
	padding-left: 30px;
	color: #455A64;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	margin-bottom: 45px;
}

.perks p:last-child, .perksrl p:last-child{
	margin-bottom: 0;
}

.form{
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translate(0%,-50%);
	width: 40%;
	background: #f5f5f5;
	padding: 30px;
	border-radius: 15px;
	border: 1px solid #d6d6d6;
	-webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.18); 
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.18);
}

.lr{
	left: 10% !important;
}


.logolog{
	position: absolute;
	top: 50px;
	left: 10%;
	padding-left: 50px;
	width: 250px;
	display: block;
}

.logolog img{
	display: block;
	width: 100%;
}

.login{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 40%;
	background: #f5f5f5;
	padding: 30px;
	border-radius: 15px;
	border: 1px solid #d6d6d6;
	-webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.18); 
	box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.18);
}


span.error{
	display: block;
	line-height: 10px;
	margin: 7px 0 5px;
	height: 10px;
	font-size: 11px;
	font-weight: 500;
	color: #E57373;
	text-transform: uppercase;
}

span.error a{
	color: inherit;
}

.pwdBox{
	padding-left: 20px;
	line-height: 30px;
}

.pwdBox i{
	font-size: 20px;
	line-height: 30px;
	float: left;
}

.strong{
	color: #00796B;
}

.med{
	color: #1E88E5;
}

.weak{
	color: #EF5350;
}



.form input[type=text], .form input[type="email"],  .form input[type="password"], .login input[type=text], .form .select{
	background: white;
	line-height: 40px;
	height: 40px;
	border: 2px solid #DDD;
	width: 100%;
	padding: 5px 10px;
	border-radius: 5px;
	  color: #90A4AE;
	  font-size: 15px;
	  font-weight: 300;
}



.cusInput{
	background: white;
	line-height: 40px;
	height: 40px;
	border: 2px solid #DDD;
	width: 100%;
	padding: 5px 10px;
	border-radius: 5px;
}

.cusInput img{
	position: absolute;
	right: 10px;
	top: 0;
	width: 35px;
	height: 35px;
	display: block;
	z-index: 3;
	transition: all 0.3s ease;
	opacity: 0;
}

.show {
	opacity: 1  !important;
}

.parsley-error, .has-error{
	border-color: #FFCDD2 !important;
}



.form input[type=checkbox], .login input[type=checkbox]{
	width:20px;
	height: 20px;
}

.form .select{
	height: 40px;
	position: relative;
}

.form .select i{
	display: inline-block;
	height: 36px;
	line-height: 36px;
	position: absolute;
	right: 10px;
	color: #CCC;
	top: 0;
	z-index: 0;
}

.form .select select{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 36px;
	line-height: 36px;
	padding-left: 10px;
	  color: #90A4AE;
	  font-size: 15px;
	  font-weight: 300;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  width: 100%;
	  z-index: 1;
}
.form label, .login label{
	padding-right: 20px;
	text-align: left;
	display: inline-block;
	font-weight: 500;
	font-size: 15px;
	color: #555;
	line-height: 30px;
	padding-top: 5px;
}

.marketing{
	width: 100%;
	height: 40px;
	position: relative;
	margin-top:30px;
	margin-bottom:20px;
}

.remember{
	height: 20px;
	position: relative;
	margin-top:10px;
	margin-bottom:20px;
}

.remember a{
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 0;
}



.marketing input{
	position: absolute;
	left: 0;
	top: 10px;
}

.marketing p{
	position: absolute;
	left: 30px;
	top: 0px;
	line-height: 20px;
	font-size: 13px !important;
}


.remember input{
	position: absolute;
	left: 0;
	top: 10px;
}

.remember label{
	position: absolute;
	left: 0px;
	top: 10px;
	line-height: 20px;
	cursor: pointer;
	display: inline-block;
	
	
	padding-right: 0px;
	padding-left: 30px;
	text-align: left;
	width: auto !important;
	font-weight: 400;
	font-size: 16px;
	color: #555;
	padding-top: 0px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #B0BEC5;
  font-size: 15px;
  font-weight: 300;
}
::-moz-placeholder { 
	  color: #B0BEC5;
	  font-size: 15px;
	  font-weight: 300;
}
:-ms-input-placeholder { 
	  color: #B0BEC5;
	  font-size: 15px;
	  font-weight: 300;
}
:-moz-placeholder { 
	  color: #B0BEC5;
	  font-size: 15px;
	  font-weight: 300;
}

.sort{
	width: 50% !important;
	padding: 0 !important;
}

.cusInput{
	position: relative;
	padding: 5px 0 !important;
}

.select input, .cusInput input{
	background: transparent;
	border: none;
}

.cusInput input{
	position: absolute;
	top: 5px;
	left: 0;
	z-index: 1;
	line-height: 26px !important;
	height: 26px !important;
	border: none !important;
	padding:0px 60px 0 10px !important;
	border-radius: 0px !important;
	display: block;
}

.sort .inv{
	float: left;
	width: 30% !important;
	padding: 1px 10px !important;
	text-align: center;
}

.sort .stroke{
	width:5% !important;
	float: left;
}

.select input.month{
	line-height: 26px;
	height: 26px;
	padding: 0px;
	border-radius: 0px;
	width: 35px;
	position: absolute;
	top: 5px;
	left: 10px;
}

.select span.stroke{
	text-align: center;
	line-height: 36px;
	height: 36px;
	padding: 0px;
}

.cl3 li{
	float: left;
}


.cl3 label{
	display: block !important;
}

.cl3 li:first-child{
	padding-right: 20px;
	width: 36%;
}

ul.exp {
	display: block;
	width: 100%;
	height: 36px;
	line-height: 36px;
}

.cl3 li:last-child{
	padding-left: 20px;
	width: 64%;
}

.cl3 li .select li{
	height: 36px;
	text-align: center;
}


.cl3 li .select li:first-child {
	padding-right: 0px;
	width: 29%;
	padding-left: 10px;
}

.cl3 li .select li:nth-child(2){
	width:11%;
	padding: 0 2px;
}

.cl3 li .select li:last-child {
	padding-right: 0px;
	width: 60%;
	padding-left: 5px;
}

.cl3 li .select li:last-child select{
	padding: 0;
}

.form .cl3 li .select{
	padding: 0 !important;
}


.form .cl3 li .select select {
	position: static;
	left: 0px;
	top: 0px;
}

.cl3 li .select li:first-child select{
	padding-left: 5px;
}

.parsley-errors-list li{
	padding-left: 0 !important;
}

.cl3 li:last-child input{
	width: 120px;
}

.cl3 li:first-child .select{
	width: 100%;
}

.minimenu li{
	float: left;
	margin: 20px  20px 17px 0;
}

.minimenu li a, .anime{
	transition: all 0.3s ease;
}

.minimenu li a{
	opacity: 0.6;
	font-weight: 300 !important;
	color: #546E7A;
}

.minimenu li a:hover{
	opacity: 1
}

.minimenu li a.active{
	opacity: 1 !important;
}

.select input.year{
	line-height: 26px;
	height: 26px;
	padding: 0px;
	border-radius: 0px;
	width: 75px;
	position: absolute;
	top: 5px;
	left: 63px;
}

form.tab{
	background: white;
	padding: 20px 25px 5px;
	border-radius: 10px;
	border: 1px solid #DDD;
}

.form form button, .login form button{
	cursor: pointer;
	background: #1976D2;
	line-height: 40px;
	padding: 0 20px;
	color: #FFF;
	font-weight: 500;
	font-size: 16px;
	border: 1px solid #1565C0;
	border-radius: 5px;
	margin-top: 15px;
	width: 250px;
	margin-bottom: 20px;
}

.form form button i, .login form button i{
	margin-left: 30px;
	line-height: 43px;
}

.form p:last-child a, .login p:last-child a{
	margin-left: 10px;
}

p a{
	color: #039BE5;
	font-weight: 500;
	font-size: 12px;
	line-height: inherit;
	display: inline-block;
}

.form label a{
	color: #039BE5;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	margin-left: 5px;
}

.form p:last-child, .login p:last-child{
	font-weight: 300;
	font-size: 15px;
}

.form h2, .form h1{
	font-size: 25px;
	line-height: 40px;
	color: #455A64;
	padding-bottom: 15px;
}


/* Customize the label (the container) */
label.container {
	padding-right: 0px;
	text-align: left;
	display: inline-block;
	font-weight: 500;
	font-size: 15px;
	color: #555;
	line-height: 25px;
	padding-top: 0px;
	
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label.container .price{
	font-size: 17px;
	font-weight: 300;
}

/* Hide the browser's default radio button */
label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
label.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
label.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
label.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

span.saving{
	padding-left: 15px;
	color: #00C853;
	font-weight: 300;
	text-transform: uppercase;
}

label.container em{
	font-size: 12px;
	padding-right: 5px;
}

p.backLink{
	float:right;
	line-height: 30px;
}

p.backLink i{
	font-size: 19px;
	margin-right: 5px;
	float: left;
	line-height: 30px;
}