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

body {
	margin:0;
	padding: 0;
	font-family:Helvetica, sans-serif;
	position:relative;
}

#sec1 {
	background:url(img/home-background.jpg) no-repeat fixed;
	background-position:50% 0%;
	min-height:700px;
	height:700px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	background-color:#1D8ECE;
}

#sec1 article {
	color:#FFF;
	font-size:18px;
	height:540px;
	position:absolute;
	top:-30px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	text-align:center;
	width:900px;
}

/*-----------------------------STARTS NAV-----------------------------*/
.menu-logo {
	margin-left:10px;
	float:left;
	position:absolute;
	left:25px;
	top:5px;
	
}

.about-us {
	position:absolute;
	top:20px;
	right:30px;
}
.pub {
	position:absolute;
	top:60px;
	right:17px;
}

#english {
	position:absolute;
	top:7px;
	right:36px;
	font-weight:bold;
	font-size:12px;
	text-decoration:none;
	color:#FFF;
}
#publi {
	position:absolute;
	top:6px;
	right:17px;
	font-weight:bold;
	font-size:12px;
	text-decoration:none;
	color:#243E7B;
}


nav {
	height:60px;
	width:100%;
	font-size:16px;
	background-color:#F2F2F2;
	position:fixed;
	z-index:15;
}

nav ul {
	list-style-type:none;
	margin:20px auto;
	text-align:center;
	width:830px;
}

#sec1 nav ul li {
	display:inline-block;
	margin-left:12px;
	margin-right:12px;
}

nav ul li a {
	text-decoration:none;
	color:#243E7B;
}

nav ul li a:hover {
	color:#6EBD46;
	text-decoration:underline;
}

#top-menu li.active a {
    color:#6EBD46;
	text-decoration:underline;
}

/*-----------------------------ENDS NAV-----------------------------*/

.home-logo {
	position:absolute;
	top:-20px;
	right:90px;
}


#sec1 p {
	width:540px;
	position:absolute;
	top:260px;
	left:290px;
}

#registro {
	font-style:italic;
	font-size:14px;
	margin-top:120px;
}

/*---------------------------------------INICIA DEFINICIÓN---------------------------------------*/

#sec2 {
	min-height:620px;
	height:620px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	background-color:#21B291;
}

#sec2 article {
	color:#FFF;
	font-size:36px;
	height:540px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	text-align:center;
	width:900px;
	font-weight:lighter;
}

#sec2 article .title {
	position:absolute;
	left:20px;
	top:125px;
}
#nombresin{
	color:#FFF;
	font-size:16px;
	font-weight:bold;
}

#greenbox {
	width:295px;
	height:100px;
	background-color:#243E7B;
	text-align:center;
	border-radius:7px;
	margin:auto;
	position:relative;
	top:15px;
}

#greenbox p {
	width:260px;
	margin:auto;
	position:relative;
	top:15px;
}

#artxt {
	color:#243E7B;
	font-size:12px;
	position:relative;
	top:0px;
	left:230px;
}

.def-box1 {
	width:380px;
	height:400px;
	position:absolute;
	top:70px;
	left:120px;
	font-size:15px;
	text-align:justify;
}

.def-box1 p {
	margin-top:20px;
	margin-bottom:30px;
}

.def-box1 span {
	color:#243E7B;
}

.def-box2 {
	width:400px;
	height:400px;
	position:absolute;
	top:0px;
	right:-30px;
}

.def-box2 span {
	color:#243E7B;
}

#redef {
	font-weight:600;
	font-size:30px;
	position:relative;
	top:20px;
}

#def-img {
	position:absolute;
	top:60px;
	right:-40px;
}

#txt-sin {
	font-size:14px;
	margin-top:0px;
	text-align:right;
	position:absolute;
	top:350px;
	width:150px;
	right:0px;
}

#txt-sin span {
	font-weight:bold;
}

/*---------------------------------------INICIA FUNCIONES---------------------------------------*/

#sec3 {
	min-height:620px;
	height:620px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	-moz-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	background-color:#DAD5D1;
	background-position:center;
}

#sec3 article {
	color:#FFF;
	height:540px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	width:900px;
}

#sec3 article .title {
	position:absolute;
	left:20px;
	top:130px;
}

.grid {
	width:712px;
	height:455px;
	position:relative;
	left:130px;
	top:45px;
}

.gridbox {
	width:302px;
	height:93px;
	color:#333;
	font-style:normal;
	background-color:#FCFAFB;
	float:left;
	margin-left:27px;
	margin-right:27px;
	margin-top:10px;
	margin-bottom:10px;
	-webkit-box-shadow:4px 4px 8px #333;
	-moz-box-shadow:4px 4px 8px #333;
	box-shadow:4px 4px 8px #333;
}

.frame {
	width:6px;
	height:93px;
	background-color:#F00;
	position:absolute;
	right:-7px;
	top:9px;
}

#color1 {
	background-color:#F2CC4F;
}

#color2 {
	background-color:#C90;
}

#color3 {
	background-color:#66CCCC;
}

#color4 {
	background-color:#A3CF54;
}

#color5 {
	background-color:#F56F66;
}

#color6 {
	background-color:#378FCC;
}

#color7 {
	background-color:#666699;
}

#color8 {
	background-color:#808000;
}

.gridtext {
	width:225px;
	height:90px;
	position:relative;
	top:-73px;
	left:70px;
}


.gridbox div img {
	position:relative;
	top:15px;
	left:7px;
}

.gridtext span {
	font-size:15px;
	font-weight:400;
	position:relative;
	left:0px;
	top:20px;
	text-align:left;
	color:#000;
}

.gridtext p {
	font-size:12px;
	text-align:left;
	position:absolute;
	top:30px;
}



/*---------------------------------------INICIA PROCESO SINDICAL---------------------------------------*/

#sec4 {
	background:url(img/proceso-bg.jpg) no-repeat fixed;
	background-position:center;
	min-height:620px;
	height:620px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	background-color:#263E79;
}

#sec4 article {
	color:#FFF;
	font-size:36px;
	height:540px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	text-align:center;
	width:900px;
}

#sec4 article .title {
	position:absolute;
	left:20px;
	top:25px;
}

#diagrama {
	position:absolute;
	top:55px;
	left:120px;
}

/*-----------------------------STARTS DIAGRAMA-----------------------------*/

#diagrama-box {
	width:700px;
	height:430px;
	background-color:#00F;
	position:absolute;
	top:40px;
	right:0px;
}

.tail-right {
	background-color:#E64B39;
	width:58px;
	height:22px;
	float:left;
	position:relative;
	top:22px;
}

.head-right {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #E64B39;
	float:left;
	position:relative;
	right:-55px;
	top:-9px;
}

.tail-down {
	background-color:#E64B39;
	width:22px;
	height:58px;
	position:relative;
	top:60px;
	left:55px;
}

.head-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #E64B39;
	position:relative;
	top:60px;
	left:46px;
}

.tail-left {
	background-color:#E64B39;
	width:58px;
	height:22px;
	float:left;
	position:relative;
	top:22px;
}

.head-left {
	width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent; 
	border-right:20px solid #E64B39;
	float:left;
	position:relative;
	right:-55px;
	top:-9px;
}

#d1 {
	width:200px;
	height:70px;
	background-color:#6C6;
	float:left;
}

#red-box1 {
	background-color:#E64B39;
	width:128px;
	height:65px;
	float:left;
}

#arrow1 {
	position:relative;
	top:0px;
	right:5px;
}

#d2 {
	width:200px;
	height:70px;
	background-color:#6C6;
	float:left;
}

#red-box2 {
	background-color:#E64B39;
	width:128px;
	height:65px;
	float:left;
}

#arrow2 {
	position:relative;
	top:0px;
	right:5px;
}

#d3 {
	width:200px;
	height:70px;
	background-color:#6C6;
	float:left;
}

#red-box3 {
	background-color:#E64B39;
	width:128px;
	height:65px;
	float:left;
}

#arrow3 {
	position:relative;
	top:0px;
	right:5px;
}

#d4 {
	width:200px;
	height:70px;
	background-color:#6C6;
	float:left;
	position:relative;
	left:400px;
	top:90px;
}

#red-box4 {
	background-color:#E64B39;
	width:128px;
	height:65px;
	float:left;
}

#arrow4 {
	position:relative;
	top:0px;
	right:5px;
}

#d5 {
	width:200px;
	height:70px;
	background-color:#6C6;
	float:left;
	position:relative;
	left:300px;
	top:250px;
}

#red-box5 {
	background-color:#E64B39;
	width:128px;
	height:65px;
	float:left;
}

#arrow5 {
	position:relative;
	top:0px;
	right:5px;
}

/*---------------------------------------INICIA IDEOLOGÍA---------------------------------------*/

#sec5 {
	background:url(img/ideologia-bg-2.jpg) no-repeat fixed;
	min-height:620px;
	height:620px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	font-style:normal;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	background-color:#A95260;
}

#sec5 article {
	color:#FFF;
	font-size:14px;
	height:540px;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	text-align:center;
	width:900px;
}

#sec5 article .title {
	position:absolute;
	left:20px;
	top:129px;
}

.sec5content {
	width:600px;
	height:400px;
	position:absolute;
	left:140px;
	top:40px;
}

.mision {
	width:125px;
	height:65px;
	background-color:#339999;
	-webkit-box-shadow:4px 4px 8px #333;
	-moz-box-shadow:4px 4px 8px #333;
	box-shadow:4px 4px 8px #333;
}

.mision p {
	font-size:24px;
	position:relative;
	top:17px;
}

.misiontxt {
	width:260px;
	height:65px;
	text-align:left;
	position:relative;
	top:-90px;
	left:140px;
	font-weight:lighter;
}

.vision {
	width:175px;
	height:65px;
	background-color:#666699;
	-webkit-box-shadow:4px 4px 8px #333;
	-moz-box-shadow:4px 4px 8px #333;
	box-shadow:4px 4px 8px #333;
}

.vision p {
	font-size:24px;
	position:relative;
	top:17px;
}

.visiontxt {
	width:260px;
	height:65px;
	text-align:left;
	position:relative;
	top:-85px;
	left:190px;
	font-weight:lighter;
}

.valores {
	width:215px;
	height:65px;
	background-color:#669966;
	-webkit-box-shadow:4px 4px 8px #333;
	-moz-box-shadow:4px 4px 8px #333;
	box-shadow:4px 4px 8px #333;
}

.valores p {
	font-size:24px;
	position:relative;
	top:17px;
}

.valorestxt {
	width:260px;
	height:65px;
	text-align:left;
	position:relative;
	top:-87px;
	left:210px;
	font-weight:lighter;
}
	

/*---------------------------------------INICIA A QUIEN NOS DIRIGIMOS---------------------------------------*/

#sec6 {
	background:url(img/quien-bg.png) no-repeat fixed;
	min-height:620px;
	height:620px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	background-color:#005494;
	z-index:11;
}

#white {
	width:100%;
	height:320px;
	position:absolute;
	top:300px;
	background-color:#FFF;
}

#sec6 article {
	color:#666;
	font-size:.8em;
	height:540px;
	position:absolute;
	top:60px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	text-align:center;
	width:900px;
}

#sec6 span {
	color:#42963C;
	font-weight:bold;
}

#sec6 article .title {
	position:relative;
	top:-20px;
}

.dir-cont {
	width:720px;
	height:380px;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	background-color:#FFF;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.8);
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.dir-cont1 {
	width:200px;
	height:320px;
	float:left;
	margin:20px;
	word-spacing:2px;
	letter-spacing:0px;
	white-space:normal;
}

.dir-cont1 p {
	text-align:left;
}

.dir-cont2 {
	width:200px;
	height:320px;
	float:left;
	margin:20px;
	word-spacing:2px;
	letter-spacing:0px;
	white-space:normal;
}

.dir-cont2 p {
	text-align:left;
}


.dir-cont3 {
	width:200px;
	height:320px;
	float:left;
	margin:20px;
	word-spacing:2px;
	letter-spacing:0px;
	white-space:normal;
}

.dir-cont3 p {
	text-align:left;
}

.contrato-btn, .reglamento-btn {
	margin:10px;
	position:relative;
	top:410px;
	left:222px;
}


/*---------------------------------------INICIA CONTACTO---------------------------------------*/

#sec7 {
	min-height:1100px;
	height:1100px;
	margin:0 auto;
	width:100%;
	max-width:1920px;
	position:relative;
	background-color:#28649B;
	/*background: -webkit-radial-gradient(#039, #C33);*/
}

#sec7 article {
	color:#28649E;
	font-size:14px;
	height:438px;
	position:relative;
	top:-340px;
	left:0%;
	right:0%;
	bottom:0%;
	margin:auto;
	text-align:center;;
	width:900px;
}

#contacto {
	position:absolute;
	top:380px;
}

.contact {
	width:815px;
	height:290px;
	position:relative;
	top:50px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
}

.contact1 {
	width:415px;
	height:290px;
	position:absolute;
	z-index:5;
	top:60px;
	background-color:#FFF;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#title-contact {
	z-index:5;
	position:absolute;
	top:420px;
	left:330px;
}

#office {
	position:relative;
	top:340px;
	left:0px;
	z-index:1;
}

/*---------------------Inicia Formulario---------------------*/

form {
	position:absolute;
	top:-25px;
}

.contact_form p {
    color: #42963C;
	font-size:14px;
	font-style:normal;
	text-align:left;
	width:300px;
	position:relative;
	left:62px;
	top:0px;
}

.contact_form ul {
    width:750px;
    list-style-type:none;
	position:relative;
	left:0px;
	top:25px;
}

.contact_form input {
    height:24px;
    width:280px;
	background-color:#E6E6E6;
	border:none;
	margin:5px 5px;
	position:relative;
	left:-175px;
}

.contact_form label {
	font-weight:700;
	font-style:normal;
	position:absolute;
	left:20px;
	margin-top:5px;
}

.contact_form textarea {
    width:280px;
	border:none;
	position:relative;
	left:-175px;
	margin-top:5px;
}

.contact_form button {
	border:none;
	cursor:pointer;
	position:absolute;
	bottom:-30px;
	left:325px;
}

.contact_form input, .contact_form textarea {
	background-color:#E6E6E6;
    color: #888;
    font-size: 12px;
}

.submit {
	background:url(img/boton-enviar.jpg);
	width:58px;
	height:25px;
}

/*---------------------Termina Formulario---------------------*/

.contact2 {
	width:335px;
	height:290px;
	position:absolute;
	z-index:5;
	top:60px;
	right:0px;
	background-color:#FFF;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.contact2 p {
	color: #42963C;
	font-size:14px;
	font-style:normal;
	text-align:left;
	width:280px;
	position:relative;
	left:35px;
	top:15px;
}
	

.contactbox {
	width:280px;
	height:135px;
	background-color:#E6E6E6;
	position:relative;
	top:30px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;
}

.c1 {
	position:relative;
	top:15px;
	left:-90px;
}

.c2 {
	position:relative;
	top:-15px;
	left:-90px;
}
	

.contactbox p {
	color:#222;
}

.txt1 {
	position:relative;
	top:-50px;
	left:50px;
}

.txt2 {
	position:relative;
	top:-80px;
	left:50px;
}

footer {
	height:20px;
	background-color:#CCC;
	font-size:11px;
	width:100%;
	text-align:right;
	font-weight:bold;
	color:#333;
	position:fixed;
	bottom:0px;
	z-index:50;
}

footer span {
	position:relative;
	top:4px;
	right:10px;
}

#exito {
	position:absolute;
	top:260px;
	left:100px;
	color:#C00;
}