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


.wrapper {
	max-width: 1280px;
	margin: auto;
	position:relative;
	overflow:hidden;
}

hgroup {
	padding: 15px;
	display: block;
	width:100%;
	position: relative;
}

hgroup h1 {
	font-size:22px;
	font-weight:300;
	border-bottom: 1px solid var(--s);
}

.main {
	width:100%;
	padding: 0 0 40px 100px;
	display: block;
}

.main a {
	text-decoration: none;
	color: #000000;
}

.main .principal {
	display: block;
	width: 28%;
	height: 40px;
	margin-top: 20px;
	font-family: 'Assistant', sans-serif;
	font-size: 24px;
	line-height: 40px;
	font-weight: 300;
	text-decoration: none;
	padding-left: 10px;
}

.nivelUno .principal {
	background: #70d4fe;
}

.main .secundario {
	display: block;
	width: 28%;
	height: 32px;
	margin: 5px 0 5px 290px;
	font-family: 'Assistant', sans-serif;
	font-size: 20px;
	line-height: 32px;
	font-weight: 300;
	text-decoration: none;
	padding-left: 10px;
}

.main .plantas {
	background: #b1efff;
}

.main .trabajos {
	background: #63eaf6;
}

.main .trabajos:nth-child(3), .main .trabajos:nth-child(5), .main .trabajos:nth-child(7) {
	margin-top: 15px;
}

.main .terciario {
	display: block;
	width: 28%;
	height: 32px;
	margin: 5px 0 5px 580px;
	font-family: 'Assistant', sans-serif;
	font-size: 20px;
	line-height: 32px;
	font-weight: 300;
	text-decoration: none;
	padding-left: 10px;
	background: #aff8fd;
}

.main span {
	float: right;
	margin-right: 10px;
	color: #000000;
	display: none;
}

.principal span {
	line-height: 40px;
}

.secundario span, .terciario span {
	line-height: 32px;
}

.principal:hover, .plantas:hover, .terciario:hover {
	background: #01959e;
	color: #ffffff;
}

.main li:hover span {
	display: inline;
}

	

/*-----------------------------------------------Responsive Design-------------------------------------------------------*/



@media screen and (max-width: 1024px) { /*----------------1024-----------------*/


	hgroup h1 {
		font-size:24px;
		}

	.main {
		padding: 0 20px 40px 30px;
	}

	.main .principal, .main .secundario, .main .terciario {
		width: 35%;
	}
}

@media screen and (max-width: 960px) { /*-----------------960------------------*/

	.main .principal {
		width: 35%;
	}

	.main .secundario {
		width: 35%;
		margin: 5px 0 5px 250px;
	}

	.main .terciario {
		width: 35%;
		margin: 5px 0 5px 495px;
	}
}


@media screen and (max-width: 887px) { /*-----------------887------------------*/

	hgroup {
		padding-bottom: 0;
	}		

	.main .principal {
		width: 40%;
	}

	.main .secundario {
		width: 40%;
		margin: 5px 0 5px 220px;
	}

	.main .terciario {
		width: 40%;
		margin: 5px 0 5px 440px;
	}	

}

@media screen and (max-width: 800px) { /*-----------------800------------------*/

	.main {
		padding: 0 10px 40px 20px;
	}
}

@media screen and (max-width: 735px) { /*-----------------735------------------*/

	.main .principal {
		width: 45%;
		font-size: 24px;
	}

	.main .secundario {
		width: 41%;
		margin: 5px 0 5px 200px;
	}

	.main .terciario {
		width: 41%;
		margin: 5px 0 5px 400px;
	}
}

@media screen and (max-width: 640px) { /*-----------------640------------------*/

	.main .principal {
		width: 52%;
		font-size: 24px;
	}	

	.main .secundario {
		width: 38%;
		margin: 5px 0 5px 180px;
	}

	.main .terciario {
		width: 38%;
		margin: 5px 0 5px 360px;
	}	

	

}

@media screen and (max-width: 600px) { /*-----------------600------------------*/

	.main .principal {
		width: 55%;
	}		

	.main .secundario {
		width: 40%;
		margin: 5px 0 5px 160px;
	}

	.main .terciario {
		width: 40%;
		margin: 5px 0 5px 320px;
	}	
}

@media screen and (max-width: 533px) { /*-----------------533------------------*/

	.main .principal {
		width: 63%;
	}		

	.main .secundario {
		width: 45%;
		margin: 5px 0 5px 120px;
	}

	.main .terciario {
		width: 45%;
		margin: 5px 0 5px 240px;
	}
}

@media screen and (max-width: 480px) { /*-----------------480------------------*/

	.main .principal {
		width: 70%;
	}		

	.main .secundario {
		width: 48%;
		margin: 5px 0 5px 100px;
	}

	.main .terciario {
		width: 48%;
		margin: 5px 0 5px 200px;
	}
}

@media screen and (max-width: 425px) { /*-----------------425------------------*/

	.main .principal {
		font-size: 22px;
		width: 80%;
	}		

	.main .secundario {
		width: 55%;
		margin: 5px 0 5px 99px;
	}

	.main .terciario {
		width: 58%;
		margin: 5px 0 5px 150px;
	}
}

@media screen and (max-width: 375px) { /*-----------------375------------------*/

	.main .principal {
		width: 85%;
	}		

	.main .secundario {
		width: 55%;
		margin: 5px 0 5px 70px;
	}

	.main .terciario {
		width: 65%;
		margin: 5px 0 5px 110px;
	}	

}

@media screen and (max-width: 360px) { /*-----------------360------------------*/

	hgroup .icon-tree {
		font-size: 25px;
	}

	hgroup h1 {
		font-size:21px;
}		

	.main .principal {
		width: 85%;
	}		

	.main .secundario {
		width: 55%;
		margin: 5px 0 5px 60px;
	}

	.main .terciario {
		width: 68%;
		margin: 5px 0 5px 90px;
	}	
}

@media screen and (max-width: 320px) { /*-----------------320------------------*/


	.main {
		padding: 0 10px 40px 10px;
	}	

	.main .principal {
		width: 100%;
		font-size: 20px;
	}		

	.main .secundario {
		width: 60%;
		margin: 5px 0 5px 30px;
	}

	.main .terciario {
		width: 75%;
		margin: 5px 0 5px 72px;
	}	
}