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


textarea, input {-webkit-appearance: none; border-radius: 0;}

.group {
	position: relative;
	margin-bottom: 15px;
	margin-top:10px;
	width: 100%;
}
.inputMaterial {
	font-size: 16px;
	padding: 25px 3% 15px 3%;
	display: block;
	width: 94%;
	border: none;
	border-bottom: 1px solid #757575;
}
input[type=email] { width:80%; }


.boxLogin .group {
	position: relative;
	width: 30%;
	float: left;
	margin-right: 2%;	
	margin-bottom: 15px;
    margin-top: 15px;
}
.boxLogin button { height: 61px; }


.formMailing .inputMaterial { background-color: #1c1f24; color:#FFFFFF; } 
.inputMaterial:focus {
	outline: none;
}

.inputMaterial ~ label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:3%;
  top:20px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  }

.inputMaterial:focus {
	outline: none;
}
.inputMaterial:required:valid {
  border-color: #14c0de;
}
	
.inputMaterial:required:valid ~ label,
.inputMaterial:required:invalid:not(:placeholder-shown) ~ label{
  top:5px;
 font-size:11px;
 color: #14c0de;
}

.inputMaterial:required:invalid:not(:placeholder-shown){
  border-color: crimson;
}

.inputMaterial:required:invalid:not(:placeholder-shown) ~ label {color: crimson;}
	
.inputMaterial:required:invalid:not(:placeholder-shown) + .validation {
  opacity: 1;
}


button { position: absolute; height: 63px; width: 15%; top:0; right: 0; background-size: 30px auto; background-color: #5D5D5D; background-repeat: no-repeat; background-position: center center;
/*background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTEuNzYzIDUxMS43NjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMS43NjMgNTExLjc2MzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNTZweCIgaGVpZ2h0PSIyNTZweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTUxMS43MTYsOS44MDJjLTAuMTA3LTAuODUzLTAuMjEzLTEuNzA3LTAuNTMzLTIuNTZjLTAuMTA3LTAuMzItMC4yMTMtMC43NDctMC4zMi0xLjA2NyAgICBjLTAuNTMzLTEuMTczLTEuMjgtMi4yNC0yLjEzMy0zLjJjLTAuOTYtMC44NTMtMi4wMjctMS42LTMuMi0yLjEzM2MtMC4zMi0wLjEwNy0wLjc0Ny0wLjMyLTEuMDY3LTAuMzIgICAgYy0wLjg1My0wLjIxMy0xLjcwNy0wLjQyNy0yLjU2LTAuNDI3Yy0wLjQyNywwLTAuNzQ3LDAtMS4xNzMsMGMtMC45NiwwLTIuMDI3LDAuMjEzLTIuOTg3LDAuNTMzICAgIGMtMC4yMTMsMC4xMDctMC40MjcsMC4xMDctMC42NCwwLjIxM2gtMC4xMDdMNi40MzYsMjEzLjk2MmMtNS40NCwyLjM0Ny03Ljg5Myw4LjY0LTUuNTQ3LDE0LjA4YzAuOTYsMi4yNCwyLjY2Nyw0LjA1Myw0LjgsNS4xMiAgICBsMTc4LjM0Nyw5NC40bDk0LjUwNywxNzguMzQ3YzEuODEzLDMuNTIsNS40NCw1LjY1Myw5LjM4Nyw1Ljc2aDAuNDI3YzQuMDUzLTAuMTA3LDcuNjgtMi42NjcsOS4zODctNi40TDUxMC45NjksMTQuODE1di0wLjEwNyAgICBjMC4xMDctMC4yMTMsMC4xMDctMC40MjcsMC4yMTMtMC42NGMwLjMyLTAuOTYsMC41MzMtMS45MiwwLjUzMy0yLjk4N0M1MTEuNzE2LDEwLjY1NSw1MTEuODIyLDEwLjIyOCw1MTEuNzE2LDkuODAyeiAgICAgTTM1LjM0MiwyMjQuNTIybDQxOC44OC0xODIuMDhsLTI2NC4xMDcsMjY0TDM1LjM0MiwyMjQuNTIyeiBNMjg3LjE4Miw0NzYuMzYybC04MS45Mi0xNTQuNzczbDI2NC0yNjQuMTA3TDI4Ny4xODIsNDc2LjM2MnoiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)*/
}


.boxLogin button {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNDc5Ljc1NCA0NzkuNzU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzkuNzU0IDQ3OS43NTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDY4LjE0NiwyNS4wOTJIMTI5LjYzOGMtNi40MTEsMC0xMS42MDgsNS4xOTgtMTEuNjA4LDExLjYwOGMwLDYuNDEzLDUuMTk3LDExLjYxLDExLjYwOCwxMS42MWgzMjYuODk5djM4My4xMzNIMTI5LjYzOCAgICBjLTYuNDExLDAtMTEuNjA4LDUuMTk2LTExLjYwOCwxMS42MTFjMCw2LjQwOCw1LjE5NywxMS42MDYsMTEuNjA4LDExLjYwNmgzMzguNTA4YzYuNDEsMCwxMS42MDctNS4xOTgsMTEuNjA3LTExLjYwNlYzNi43MDEgICAgQzQ3OS43NTQsMzAuMjkxLDQ3NC41NTcsMjUuMDkyLDQ2OC4xNDYsMjUuMDkyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNzYuNzkzLDMxMC40MWMtNC41MzUsNC41MzYtNC41MzUsMTEuODgzLDAsMTYuNDE5YzIuMjY4LDIuMjY3LDUuMjQsMy40LDguMjExLDMuNGMyLjk2OSwwLDUuOTM4LTEuMTM1LDguMjA2LTMuNCAgICBsNzEuNTg5LTcxLjU4OGM0LjUzNi00LjUzNSw0LjUzNi0xMS44ODUsMC0xNi40MTdsLTcxLjU4OS03MS41OThjLTQuNTM0LTQuNTM4LTExLjg4Mi00LjUzOC0xNi40MTcsMCAgICBjLTQuNTM1LDQuNTI4LTQuNTM1LDExLjg4MSwwLDE2LjQxNGw1MS43NzEsNTEuNzgxSDExLjYxQzUuMTk5LDIzNS40MiwwLDI0MC42MiwwLDI0Ny4wM2MwLDYuNDEyLDUuMTk5LDExLjYxMSwxMS42MSwxMS42MTEgICAgaDIxNi45NTRMMTc2Ljc5MywzMTAuNDF6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)
}







.inputMaterial:required:valid ~ button {
	background-color: #14c0de;
}



/* BOTTOM BARS ================================= */
.bar {
	position: relative;
	display: block;
	width: 100%;
}
.bar:before, .bar:after {
	content: '';
	height: 3px;
	width: 0;
	bottom: 0px;
	position: absolute;
	background: #14c0de;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}
.bar:before {
	left: 50%;
}
.bar:after {
	right: 50%;
}
/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
	width: 50%;
}


@media (max-width: 968px) {
.inputMaterial {
	font-size: 16px;
	padding: 22px 3% 12px 3%;}
	
button { height: 57px;}	
	
	
.boxLogin {position: relative; padding-left: 2%; padding-right: 2%;}
	
.boxLogin .group {	width: 95%; margin-bottom: 0px;
	margin-top:10px;}
.boxLogin button { height: 55px; }	
	
	
	
	
	
	
	
	
	
}