/* - - - - - - - - - - - - - - - 
CSS principal
Desarrollado por: Upgrade Diseño Interactivo
Para: Nomina Plus
Fecha: 21/10/2015
Ultima modificación por: Natsumi Franco
Fecha: 21/10/2015
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */

/* ====== F O N T S ====== */
@font-face {
    font-family: 'avant_garde_pro_bk';
    src: url('../../_fonts/itcavantgardepro-bk-webfont.eot');
    src: url('../../_fonts/itcavantgardepro-bk-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../_fonts/itcavantgardepro-bk-webfont.woff') format('woff'),
         url('../../_fonts/itcavantgardepro-bk-webfont.ttf') format('truetype'),
         url('../../_fonts/itcavantgardepro-bk-webfont.svg#itcavantgardepro-bk') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avant_garde_pro_bold';
    src: url('../../_fonts/itcavantgardepro-bold-webfont.eot');
    src: url('../../_fonts/itcavantgardepro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../_fonts/itcavantgardepro-bold-webfont.woff') format('woff'),
         url('../../_fonts/itcavantgardepro-bold-webfont.ttf') format('truetype'),
         url('../../_fonts/itcavantgardepro-bold-webfont.svg#itcavantgardepro-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}	

@font-face {
    font-family: 'avant_garde_pro_xlt';
    src: url('../../_fonts/itcavantgardepro-xlt-webfont.eot');
    src: url('../../_fonts/itcavantgardepro-xlt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../_fonts/itcavantgardepro-xlt-webfont.woff') format('woff'),
         url('../../_fonts/itcavantgardepro-xlt-webfont.ttf') format('truetype'),
         url('../../_fonts/itcavantgardepro-xlt-webfont.svg#itcavantgardepro-xlt') format('svg');
    font-weight: normal;
    font-style: normal;
}	

@font-face {
	font-family: ITCAvantGardePro_demi;
	src:url(../../_fonts/ITCAvantGardePro-Demi.otf) format('woff'); 
} 	

/* ====== F O N T S (end) ====== */

/*Eliminamos márgenes del "body" */
html, body{ margin:0px; padding:0px; height:100%; }

#big-container /* Div que va a manterner el "footer" siempre al fondo */
{
	background-image:url(../../_images/general/fondo.png);
	min-height:100% !important;
    background-repeat: repeat;
	height: auto !important;
	position: relative;
	text-align: center;
}

/* [ ----- G E N E R A L ----- ] */

.transition {
		-webkit-transition: all 2s ease;
		-moz-transition: all 2s ease;
		-o-transition: all 2s ease;
		transition: all 2s ease;
	}
	
.transform {
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		left: 50%;
	}
	
.titles {
		font-family: 'avant_garde_pro_bold';
		text-transform: uppercase;
		text-align: center;
		padding-top: 100px;
		color: #b91a2a;
		font-size: 3em;
		margin: 0px;
		width: 100%;
	}
	.titles span { font-family: 'avant_garde_pro_xlt'; }
	
.subtitles {
		font-family: 'avant_garde_pro_bold';
		text-transform: uppercase;
		text-align: center;
		color: #b91a2a;
		width: 100%;
	}
	.subtitles span { font-family: 'avant_garde_pro_xlt'; }

.arrow_down {
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 20px solid #b91a2a;
	}

.arrow_right { font-size: .5em; color: #b91a2a; }
	
.space_100 { padding-top: 100px; }
.space_40 { padding-top: 40px; }
.space_20 { padding-top: 20px; }

main {
		position: relative;
		margin: 0px auto;
		display: block;
		height: auto;
		width: 90%;
	}

p {
	font-family: 'avant_garde_pro_bk';
	text-align: left;
	color: #3e3e3e;
}

/* [ ----- M E N U ----- ] */

header {
		position: absolute;
    	right: 30px;
		z-index: 2;
    	top: 40px;
	}
	#btn_menu {
			display: inline-block;
			vertical-align: top;
			margin-right: 20px;
			margin-top: 10px;
			cursor: pointer;
			width: 40px;
		}
		#btn_menu p {
				-webkit-transition: all .5s ease;
				-moz-transition: all .5s ease;
				border-top: 2px #b91a2a solid;
				-o-transition: all .5s ease;
				transition: all .5s ease; 
				margin-bottom: 0px;
				margin-top: 10px;
				width: 100%;
			}
			#btn_menu:hover p { border-color: #ed7338; }
			#btn_menu p:first-child { margin-top: 15px; }
		
	nav {
			display: inline-block;
			text-align: left;
			overflow: hidden;
			margin-top: 10px;
			height: 0px;
			width: 0px;
		} 
		.menu { height: 200px !important; width: 220px !important; }
		nav a {
				-webkit-transition: all .5s ease;
				-moz-transition: all .5s ease;
				-o-transition: all .5s ease;
				transition: all .5s ease;
				font-family: 'avant_garde_pro_bk';
				text-transform: uppercase;	
				text-decoration: none;
				line-height: 2.5;
				display: block;
				color: #b91a2a;
			}
			nav a:hover { color: #ed7338; }
			
		#submenu_nomina {
				/*overflow: hidden;*/
				margin: 0px;
				/*height: 0px;
				width: 0px;*/
			}
			/*.menu_nomia {
					height: 250px !important;
					width: 100% !important;	
				}*/
			#menu_plus_sub { height: 350px !important; }

/* [ ----- I N I C I O ----- ] */

#menu_index #btn_menu p { border-color: #FFFFFF; }
#menu_index nav a { color: #FFFFFF; } 

#fondo_index {
		position: absolute;
		overflow: hidden;
		height: 100%;
		width: 100%;
		z-index: 0;
		top: 0px;
	}
	#fondo_index #img_left { display: none; }
	#fondo_index #img_right {
			margin-right: -50px;
			margin-top: -168px;
			float: right;	
		}

#logo {
		padding-top: 80px;
		display: block;
		height: auto;
		width: 500px;
	}
	#logo img { width: 100%; }
	
.slogan {
		font-family: 'avant_garde_pro_bk';
		margin-bottom: 5px;
		margin-left: 100px;
		margin-top: -100px;
		font-size: 2em;
		color: #b91a2a; 
	}
	.slogan span {
		font-family: 'avant_garde_pro_bold';
	}
	.slogan#first_slogan { margin-left: 150px; }

#footer_index { display: none; }

/* [ ----- N O M I N A  ----- ] */

#fondo_nomina {
		background-image: url(../../_images/general/fondo_left.png);
		background-repeat: no-repeat;
		background-position: right -420px;
		position: absolute;
		height: 420px;
		width: 210px;
		left: 0px;
		top: 0px;
	}

#nomina_container {
		position: relative; 
		margin-top: -38px;
		overflow: hidden;
		display: block; 
		width: 100%; 
	}
	#nomina_fondo {
			-webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			-ms-transition: all .5s ease;
			-o-transition: all .5s ease;
			transition: all .5s ease;
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
			position: absolute;
			height: 100%;
			width: 100%;
			opacity: .2;
			top: 0px;
		}
		.height_reponsive {
				height: -webkit-calc(100% - 370px) !important;
				height: -moz-calc(100% - 370px) !important;
				height: -ms-calc(100% - 370px) !important;
				height: -o-calc(100% - 370px) !important;
				height: calc(100% - 370px) !important;
				margin-top: 370px;
			}
		.service_1 { background-image: url(../../_images/general/nomina_1.jpg); }
		.service_2 { background-image: url(../../_images/general/nomina_2.jpg); }
		.service_3 { background-image: url(../../_images/general/nomina_3.jpg); }
		.service_4 { background-image: url(../../_images/general/nomina_2.jpg); } 
		
	.nomina_services {
			position: absolute;
			text-align: center;
			margin: 0px auto;
			display: block;
			height: auto;
			top: 5000px;
			width: 80%;
			opacity: 0;
		}
		.services { top: 0px !important; opacity: 1 !important; }
		
	.mas_info {
			font-family: 'avant_garde_pro_bk';
			cursor: pointer;
			color: #b91a2a; 
		}
	
	.arrow_benefist { 
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			transform: rotate(-90deg);
			margin: 0px auto; 
			cursor: pointer;
			display: block;
			height: 60px;
			width: 60px;
		}
	
	.nomina_p {
			display: inline-block;
			vertical-align: top;
			width: 80%;
		}
		
	.nomina_arrow {
			display: inline-block;
			vertical-align: top;
			margin-right: 10px;
			margin-top: 20px;
		}

/* Servicios 1 */ 
.col_b {
		display: inline-block;
		vertical-align: top;
		margin-right: 20px;
		margin-top: 50px;
		height: auto;
		width: 30%;
	}
	.col_b .icon_title { font-size: 4em; color: #ed7338; }
	
/* Servicios 2 */ 
.fil_b {
		margin: 50px auto;
		display: block;
		height: auto;
		width: 100%;
	}
	.fil_col {
			display: inline-block;
			vertical-align: top;
			margin-right: 40px;
			height: auto;
			width: 40%;	
		}
		.fil_col h2 { text-align: right; width: 90%; }
		.fil_col p { position: relative; }
			.fil_col p i {
					position: absolute;
					font-size: .8em;
					left: -60px;
					top: 10px;	
				}

/* Servicios 3 */ 
#block {
		margin: 0px auto;
		display: block;
		height: auto;
		width: 100%;
	}
	
	#block #nomina_logo {
			vertical-align: middle;
			display: inline-block;
			margin-top: -20px;
			width: 200px;
		}
	
	#block hr {
			background-color: #ed7338;
			border: none;
			width: 200px; 
			height: 2px; 
		}
	#block p { 
			display: inline-block;
			vertical-align: top;
			text-align: center;
			margin: 30px 10px;
			width: 20%;
		}
		#block p i { margin-right: 20px; }
	
	 #block .logos {
			vertical-align: middle;
			display: inline-block;
			margin: 100px 40px;
			width: 200px;	
		}

/* [ ----- N O S O T R O S ----- ] */

#nos_intro {
		margin: 100px auto;
		display: block; 
		line-height: 2; 
		width: 80%; 
	}

#nos_cotent {
		border-bottom: 1px #d71727 solid;
		border-top: 1px #d71727 solid;
		background-color: #dddddd;
		letter-spacing: -4px;
		margin: 50px auto;
		display: block;
		width: 80%;
	}
	.nos_col {
			padding-bottom: 20px;
			letter-spacing: 0px;
			vertical-align: top;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			height: inherit;
			display: block;
			width:  100%;
		}
		
		.nos_col_fondo {
				-webkit-transition: all 1s ease;
				-moz-transition: all 1s ease;
				-ms-transition: all 1s ease;
				-0-transition: all 1s ease;
				transition: all 1s ease;
				
				background-color: rgba(0, 0, 0, 0.6);
				background-blend-mode: darken;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
    			position: absolute;
				overflow: hidden;
				height: 100%;
				width: 100%;
				opacity: 1;
				top: 0px;
			}
			.nos_col_fondo:hover { /*height: 0px;*/ opacity: 0; }
			
			.nos_col_title {
					-webkit-transform: translate(-50%,-50%);
					-moz-transform: translate(-50%,-50%);
					-ms-transform: translate(-50%,-50%);
					-o-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);
					
					font-family: 'avant_garde_pro_bold';
					text-transform: uppercase;
					position: absolute;
					text-align: center;
					color: #ffffff;
					margin: 0px;
					left: 50%;
					top: 40%;
				}
				.nos_col_title span { font-family: 'avant_garde_pro_bk'; font-weight: 100; }
					
			.arrow_down_withe {
					width: 0;
					height: 0;
					border-left: 10px solid transparent;
					border-right: 10px solid transparent;
					border-top: 20px solid #ffffff;
					
					-webkit-transform: translate(-50%,-50%);
					-moz-transform: translate(-50%,-50%);
					-o-transform: translate(-50%,-50%);
					transform: translate(-50%,-50%);
					position: absolute;	
					left: 50%;
					top: 60%;
				}
			
			.nos_col_fondo#historia {
					background-image: url(../../_images/general/nosotros_1.jpg);
				}
			.nos_col_fondo#mision {
					background-image: url(../../_images/general/nomina_1.jpg);
				}
			.nos_col_fondo#vision {
					background-image: url(../../_images/general/nosotros_3.jpg);
				}
		
		.nos_col p { 
				text-align: justify;
				margin: 0px auto;
				width: 90%; 
			}
		
		.clear { clear: both; }
		
		#right { margin-right: 70px; float: right; }
		#left { margin-left: 50px; float: left; }
		
			.nos_arrow {
					display: inline-block;
					vertical-align: top;
					margin-right: 10px;
					margin-top: 5px;
				}
			.nos_col .sucursales {
					font-family: 'avant_garde_pro_bk';
					display: inline-block;
					vertical-align: top;	
					text-align: left;
					color: #b91a2a;
				}

/* [ ----- R H ----- ] */

#bk_rh {
		background-image: url(../../_images/general/rh_ezquina.png);
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		height: 400px;
		width: 400px;
		top: 0px;
	}

#rh_title {
		font-family: 'avant_garde_pro_bold';
		padding-bottom: 100px;
		padding-top: 100px;
		color: #4c6cb0;
		margin: 0px;
	}

#rh_text {
		font-family: 'avant_garde_pro_bk';
		text-align: center;
		margin-top: 50px;
		font-size: 1.5em;
		color: #4c6cb0;
	}
	
.rh_service {
		display: inline-block;
		vertical-align: top;
		margin: 100px 10px;
		width: 20%;
	}
	.rh_service img { height: 80px; width: 80px;	}
	.rh_service h2 {
			font-family: 'avant_garde_pro_bold';
			text-transform: uppercase;
			color: #4c6cb0;
		}	
		.rh_service h2 span { font-family: 'avant_garde_pro_xlt'; }
		
/* [ ----- C O N T A C T O ----- ] */	

#fondo_contacto {
		-webkit-transform: scaleY(-1);
		-moz-transform: scaleY(-1);
		-o-transform: scaleY(-1);
		transform: scaleY(-1);
		position: absolute;
		overflow: hidden;
		height: 100%;
		width: 30%;
		z-index: 0;
		right: 0px;
		top: 0px;
	}
	#fondo_contacto #img_left {
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			-o-transform: rotate(180deg);
			transform: rotate(180deg);
			margin-right: -360px;
			margin-top: -200px;	
			float: right;
		}

#bk_contact {
		background-image: url(../../_images/general/fondo_left.png);
		background-position: right -140px;
		-webkit-transform: scaleY(-1);
		background-repeat: no-repeat;
		-moz-transform: scaleY(-1);
		-o-transform: scaleY(-1);
		transform: scaleY(-1);
		position: absolute;
		height: 100%;
		bottom: 0px;
		width: 19%;
	}		
				
#contac_p {
		text-align: center;
		margin: 50px auto;
		display: block;
		width: 90%;
	}
	
#contac_form {
		margin: 50px auto;
		text-align: left;
		width: 80%;
	}
	
	.labels {
			display: inline-block;
			vertical-align: top;
			width: 30%;	
		}
		.labels p {
				font-family: 'avant_garde_pro_bk';
				text-align: right;
				margin-top:28px;
				color: #b91a2a;
			}
		
	.inputs {
			display: inline-block;
			text-align: center;
			width: 50%;	
		}
		
		.inputs input[type=text] {
					font-family: ITCAvantGardePro_demi;
					background-color: #dfdfdf;
					padding-left: 10px;
					margin-top: 20px;
					border: none;
					height: 30px;
					width: 90%;
				}
			
		.inputs textarea {
				font-family: 'ITCAvantGardePro_demi';
				background-color: #dfdfdf;
				padding-left: 10px;
				padding-top: 10px;
				margin-top: 20px;
				border: none;
				resize: none;
				width: 90%;
			}
		
		.inputs .errorMessage {
				font-family: 'avant_garde_pro_bk';
				color: #b91a2a;
			}
		
		.inputs input[type=submit] {
				font-family: 'avant_garde_pro_bold';
				background-color: #b91a2a;
				margin-right: 30px;
				margin-top: 20px;
				color: #ffffff;
				font-size: 1em;
				border: none;
				height: 40px;
				width: 200px;
				float: right;
			}
		
	#contacto_img {
			background-image:url(../../_images/general/contacto.png);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			position: absolute;
			height: 300px;
			width: 400px; 
			left: 0px;
			top: 0px;
		}
		
/* [ ----- A S O C I A D O S ----- ] */	
	
#fondo_asociados {
		position: absolute;
		overflow: hidden;
		height: 100%;
		width: 30%;
		z-index: 0;
		top: 0px;
	}
	#fondo_asociados #img_left {
			margin-left: -491px;
			margin-top: -58px;	
			float: left;
		}
	
	.duo {
			display: inline-block;
			vertical-align: top;
			height: auto;
			width: 40%;	
		}

/* [ ----- F O O T E R ----- ] */

#footer_cut { padding-top: 40px; clear: both; }
footer { 
		background-color: #b91a2a;
		text-align: center; 
		padding: 10px 0px;
		margin-top: 0px; 
	}
	footer a {
			font-family: 'avant_garde_pro_bk';
			border-left: 1px #fff solid;
			text-decoration: none;
			padding-left: 20px; 
			margin-left: 20px;
			font-size: .8em; 
			color: #fff; 
		}
		footer a:first-child { 
				border-left: none;
				padding-left: 0px; 
				margin-left: 0px; 
			}