@import "rese.css";
@import "font.css";
@import "icon_awes.css";

/**** GENE ****/
html,
body {
	height:100%;
	padding:0;
	margin:0;
}

a {	text-decoration:none; }

/**** SCRO ****/
::-webkit-scrollbar { width:10px; }
::-moz-scrollbar { width:10px; }
::-o-scrollbar { width:10px; }

::-webkit-scrollbar-track { background:#FFF; }
::-moz-scrollbar-track { background:#FFF; }
::-o-scrollbar-track { background:#FFF; }

::-webkit-scrollbar-thumb { background:#D71D1D; }
::-moz-scrollbar-thumb { background:#D71D1D; }
::-o-scrollbar-thumb { background:#D71D1D; }

/**** WRAP ****/
.wrap {
	width:100%;
	min-width:960px;
	min-height:100%;
	background:url('https://www.systemsperu.com/img/dh25_sype_inde_inic_wrap_back.jpg') no-repeat center bottom;
	background-size:cover;
	position:relative;
}

/**** HEAD ****/
.head_wrap {
	width:100%;
	padding:0% 2%;
	float:left;
}

.head_logo {
	width:30%;
	margin-top:20px;
	float:left;
}

.head_logo img {
    width:100%;
}

.head_info {
	width:auto;
	float:right;
}

/**** LOGI ****/
.info_wrap {
	width:100%;
	margin-bottom:10%; 
	display:inline-block;
	position:relative;
}

.info_logi {
	width:40%;
	padding:3% 3% 2% 3%;
	margin-top:10%;
	margin-right:5%;
	background:rgba(255,255,255,1);
    border:8px solid rgba(222,222,222,1);
    box-shadow:0 12px 21px -10px #000;
	float:right;
}

.info_logi_form {
	width:80%;
	float:left;
}

.info_logi_form_item {
	width:100%;
	margin-bottom:2%;	
	float:left;
}

.info_logi_form_item_icon {
	width:15%;
	height:40px;
    font-size:16px;
    font-weight:400;
	color:#303747;
    text-align:center;
    padding:2.5%;
    background:none;
	border:0;
    border-bottom:1px solid #CCC;
	float:left;
	
	-ms-display:flex;
	display:flex;
	align-items:center;
	justify-content:center;	
}

.info_logi_form_item_inpu {
    width:85%;
	height:40px;
	font-family:'Open Sans', sans-serif;
    font-size:13px;
    color:#303747;
    padding:0 15px;
    background:none;
	border:0;
    border-bottom:1px solid #CCC;
	float:left;
    display:block;
	outline:none;
    transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
}

.info_logi_form_sumb {
	width:100%;
	font-family:'Open Sans', sans-serif;
    font-size:14px;
	color:#FFF;
    text-align:center;
    font-weight:700;
	text-transform:uppercase;
    padding:2%;
	margin-top:10px;
    background:#02539D;
    border:1px solid #CCC;
	float:left;
	cursor:pointer;
    transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
}

.info_logi_form_sumb:hover {
    background:#00B5ED;
}

.info_logi_mens {
	width:20%;
	padding:6% 2%;
	float:right;
}

.info_logi_mens_corr {
	width:35px;
	height:35px;	
	background:url('../img/info_logi_mens_corr.jpg') no-repeat center center;
	background-size:contain;
	float:left;
}

.info_logi_mens_erro {
	width:35px;
	height:35px;	
	background:url('../img/info_logi_mens_erro.jpg') no-repeat center center;
	background-size:contain;
	float:left;
}

.info_logi_opci {
	width:100%;
	margin-top:5%;
	float:left;
}

.info_logi_opci ul {
	width:100%;
	padding:0;
	margin:0;
	list-style:none;
	float:left;
}

.info_logi_opci li {
	width:100%;
	font-family:'Open Sans', sans-serif;
	font-size:13px;
	color:#FFF;
	text-align:left;
    line-height:150%;
	margin-bottom:8px;
	float:left;
}

.info_logi_opci a {
	color:#303747;	
}

.info_logi_opci a:hover, a:focus {
	color:#00B5ED !important;
	text-decoration:none !important;
	outline:none !important;
}

/**** PASS RECU ****/
.recu_moda_titu {
    font-family:'Open Sans', sans-serif;
    font-size:14px;
    color:#FFF;
    font-weight:600;
    text-transform:uppercase;
    padding:8px 10px;
    background:#02539D;
}

.recu_moda_cerr {
    color:#FFF !important;
	margin-top:-30px;
	margin-right:10px;
	opacity:1 !important;
}

.recu_moda_deta {
    width:100%;
    font-family:'Open Sans', sans-serif;
    font-size:13px;
    color:#555;
    text-align:left;
    line-height:150%;
}

.recu_moda_form {
    width:100%;
    padding:20px;
    margin-top:10px;
    margin-bottom:30px;
}

.recu_moda_form_item {
	width:70%;
	height:35px;
	margin-left:0.5%;	
	float:left;
}

.recu_moda_form_item_icon {
	width:40px;
	height:inherit;
	font-size:16px;
	font-weight:400;
	color:#555;
	text-align:center;
	line-height:34px;
	background:#EEE;
	border:1px solid #CCC;
	float:left;
}

.recu_moda_form_item_inpu {
    width:81%;
	height:inherit;
	font-family:'Open Sans', sans-serif;
    font-size:13px;
    color:#555;
    padding:0 15px;
    background:#FFF;
    border:1px solid #CCC;
	border-left:0;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	float:left;
    display:block;
    transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
}

.recu_moda_form_item_inpu:focus { color:#515151; background:#EEE }

.recu_moda_form_item_inpu:focus::-webkit-input-placeholder { color:#515151; }
.recu_moda_form_item_inpu:focus:-moz-placeholder { color:#515151; }
.recu_moda_form_item_inpu:focus:-ms-input-placeholder { color:#515151; }

.recu_moda_form_subm {
	width:28%;
	height:35px;
	font-family:'Open Sans', sans-serif;
    font-size:15px;
	color:#515151;
    text-align:center;
    font-weight:bold;
	text-transform:uppercase;
	margin-left:1%;
    background:#EDECEC;
    border:0;
	float:right;
	cursor:pointer;
}

.recu_moda_form_subm:hover {
	color:#FFF;
    background:#02539D;
}

.recu_moda_mens {
    width:100%;
    margin-top:40px;
    margin-bottom:60px;
}

.recu_moda_mens_icon {
    width:30px;
    height:30px;
    font-size:18px;
    color:#FFF;
    text-align:center;
    line-height:26px;
    background:#27AE61;
    border:2px solid #169D50;
    float:left;
}

.recu_moda_mens_icon_erro {
    background:#EC3131;
    border:2px solid #DF3434;
    border-left:0;
}

.recu_moda_mens_titu {
    width:94.5%;
    height:30px;
    font-family:'Open Sans', sans-serif;
    font-size:13px;
    color:#FFF;
    line-height:26px;
    padding-left:6px;
    background:#27AE61;
    border:2px solid #169D50;
    border-left:0;
    float:left;
}

.recu_moda_mens_titu_erro {
    background:#EC3131;
    border:2px solid #DF3434;
    border-left:0;
}

/**** LAST ****/
.last_wrap {
	width:100%;
	font-family:'Open Sans', sans-serif;
	font-size:14px;
	color:#FFF;	
	text-align:center;
	font-weight:normal;
	padding:1.3% 3%;
	background:rgba(2,83,157,1);
	bottom:0;
	position:absolute;
}

.last_wrap a {
	color:#FFF;	
}

.last_wrap a:hover {
	color:#00B5ED;	
}

/**** MENS ****/
#mens_floa_wrap {
	width:18%;
	text-align:center;
	margin-left:-9%;
	top:20%;
	left:50%;
	position:fixed;
	z-index:9998;
	cursor:pointer;
    transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;

	-webkit-animation-name:move_mens_floa_wrap;
	-webkit-animation-duration:0.3s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:linear;	
}

@-webkit-keyframes move_mens_floa_wrap
{
	0% { top:-60%; }
	5% { top:-50%; }
	15% { top:-40%; }
	25% { top:-30%; }
	35% { top:-20%; }
	45% { top:-10%; }
	55% { top:-0%; }
	65% { top:5%; }
	75% { top:10%; }
	85% { top:15%; }
	100% { top:20%; }

}
 
.mens_floa {
	width:100%;
	padding:7% 5%;
	background:rgba(39,174,97,1);
	border:2px solid #169D50;
	float:left;
}

.mens_floa_erro {
	background:rgba(236,49,49,1);
	border:2px solid #DF3434;
}

.mens_floa_icon {
	width:100%;
	font-size:52px;
	color:#FFF;
	text-align:center;
	float:left;
}

.mens_floa_titu {
	width:100%;
	font-family:'Open Sans', sans-serif;
    font-size:23px;
    color:#FFF;
	text-align:center;
	font-weight:600;
	text-transform:uppercase;
	margin-top:10px;
	line-height:110%;
	float:left;
}

.mens_floa_hr {
	width:30%;
	height:2px;
	background:#FFF;
	margin:15px 35%;
	float:left;
}

.mens_floa_desc {
	width:100%;
	font-family:'Open Sans', sans-serif;
    font-size:14px;
    color:#FFF;
	text-align:center;
	text-transform:uppercase;
	line-height:130%;
	float:left;
}

.mens_floa_cerr {
	width:100%;
	font-size:26px;
	color:#FFF;
	text-align:center;
	font-weight:100;
	float:left;
}

/* ---- MEDIA QUERIES ---- */

@media (min-width:240px) and (max-width:639px) {
	
	/**** WRAP ****/
	.wrap {
		min-width:100%;
	}
	
	/**** HEAD ****/
	.head_wrap {
		padding:3% 2%;
	}
	
	.head_logo {
		width:90%;
		margin:0 5%;
		margin-top:10px;
	}

	/**** LOGI ****/
	.info_logi {
		width:98%;
		margin:0 1%;
		margin-top:28%;
	}

	.info_logi_form {
		width:85%;
	}
	
	.info_logi_mens {
		width:15%;
	}

	.info_logi_form_item_icon {
	    font-size:17px;
	}
	
	.info_logi_form_item_inpu {
		font-size:14px;
	    padding:0 10px;
	}
		
	.info_logi_form_sumb {
		font-size:15px;
		padding:3%;
	}
	
	.info_logi_opci li {
		font-size:14px;
	}

	/**** PASS RECU ****/
	.recu_moda_form {
		width:100%;
		padding:10px 0 10px 0;
	}
	
	.recu_moda_form_item_inpu {
		width:77.5%;
	    padding:0 10px;
	}
	
	.recu_moda_mens_titu {
		width:89.93%;
	}

	/**** MENS ****/
	#mens_floa_wrap {
		width:70%;
		margin-left:-35%;
	}
	
	/**** LAST ****/
	.last_wrap {
		padding:3%;
	}

}

@media (min-width:640px) and (max-width:959px) {
	
	/**** WRAP ****/
	.wrap {
		min-width:100%;
	}
	
	/**** HEAD ****/
	.head_logo {
		width:45%;
	}
	
	/**** LOGI ****/
	.info_logi {
		width:50%;
		padding:2% 3% 2% 2%;
		margin-top:0%;
		margin-right:5%;
	}
	
	.info_logi_form_item_inpu {
	    padding:0 10px;
	}

	/**** PASS RECU ****/
	.recu_moda_form_item_inpu {
	    padding:0 10px;
	}
	
	/**** MENS ****/
	#mens_floa_wrap {
		width:38%;
		margin-left:-16%;
	}

}

@media (min-width: 1792px) {

	/**** SCRO ****/
	::-webkit-scrollbar { width:13px; }
	::-moz-scrollbar { width:13px; }
	::-o-scrollbar { width:13px; }
	
	/**** WRAP ****/

	/**** HEAD ****/
	.head_logo {
		margin-top:27px;
	}

	/**** LOGI ****/
	.info_logi {
		box-shadow:0 16px 28px -13px #000;
	}
	
	.info_logi_form_item_icon {
		height:53px;
		font-size:21px;
	}
	
	.info_logi_form_item_inpu {
		height:53px;
		font-size:17px;
		padding:0 20px;
	}
	
	.info_logi_form_sumb {
		font-size:19px;
		margin-top:13px;
	}
	
	.info_logi_mens_corr {
		width:47px;
		height:47px;
	}
	
	.info_logi_mens_erro {
		width:47px;
		height:47px;
	}
	
	.info_logi_opci li {
		font-size:17px;
		margin-bottom:11px;
	}

	/**** PASS RECU ****/
	.recu_moda_titu {
		font-size:19px;
		padding:11px 13px;
	}
	
	.recu_moda_cerr {
		margin-top:-40px;
		margin-right:13px;
	}
	
	.recu_moda_deta {
		font-size:17px;
	}
	
	.recu_moda_form {
		padding:27px;
		margin-top:13px;
		margin-bottom:40px;
	}
	
	.recu_moda_form_item {
		height:47px;
	}
	
	.recu_moda_form_item_icon {
		width:53px;
		font-size:21px;
		line-height:45px;
	}
	
	.recu_moda_form_item_inpu {
		font-size:17px;
		padding:0 20px;
	}
	
	.recu_moda_form_subm {
		height:47px;
		font-size:20px;
	}
	
	.recu_moda_mens {
		margin-top:53px;
		margin-bottom:80px;
	}
	
	.recu_moda_mens_icon {
		width:40px;
		height:40px;
		font-size:24px;
		line-height:35px;
		border:3px solid #169D50;
	}
	
	.recu_moda_mens_icon_erro {
		border:3px solid #DF3434;
	}
	
	.recu_moda_mens_titu {
		height:40px;
		font-size:17px;
		line-height:37px;
		padding-left:8px;
		border:3px solid #169D50;
	}
	
	.recu_moda_mens_titu_erro {
		border:3px solid #DF3434;
	}
	
	/**** LAST ****/
	.last_wrap {
		font-size:19px;
	}
	
	/**** MENS ****/
	.mens_floa {
		border:3px solid #169D50;
	}
	
	.mens_floa_erro {
		border:3px solid #DF3434;
	}
	
	.mens_floa_icon {
		font-size:69px;
	}
	
	.mens_floa_titu {
		font-size:31px;
		margin-top:13px;
	}
	
	.mens_floa_hr {
		height:3px;
		margin:20px 35%;
	}
	
	.mens_floa_desc {
		font-size:19px;
	}
	
	.mens_floa_cerr {
		font-size:35px;
	}
	
}