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

html {
    font-size: 62.5%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
	margin: 0;
	padding: 0;}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
    line-height: 1.6rem;
	overflow-x: hidden !important;
}

a {color: #000; display: block; margin-top: 4rem; text-decoration: none;}

hr {margin: 2rem 0;}

p {font-size: 2.4rem; line-height: 2.2rem;}
h1 { margin-top: 3rem; color:#666;}
h6 {font-size: 2rem; font-weight: normal; margin: 3rem 0 2rem;}

.contenedor { max-width: 1480px;
              margin: 0 auto;
			  width: 100%;
			  }
			  
.header { 
		  background-color: #000;
		  width: 100%;
		  height: 24rem;
		  color: #FFF;
		  text-align: center;
		  padding: 3rem;
		  position: relative;
}
.header h1 {font-size: 2rem;}
.header h2 {font-size: 1.6rem; margin-top: 2rem;}

.contenido {
		    position: absolute;
			margin-left: auto;
			margin-right: auto;
			left: 0;
			right: 0;
			margin-top: 5rem;
			margin-bottom: 5rem;
			text-align: center;
			width: 90%;
			background-color: #FFF;
			color: #000;
			padding: 3rem;
			box-shadow: 2px 2px 2px 2px #000;
	}

.menus {display: grid;
	    grid-template-columns: 1fr 5fr;}

.directorios {margin:0;}
	
@media (min-width: 768px) {
	.contenido {width: 50%;}
	.directorios {display: grid;
				  grid-template-columns: 1fr 1fr;}
	}

.chico {font-size: 1.6rem;}

.boton {display: block; 
		background-color:#000; 
		padding: 1.5rem 2rem; 
		width: 90%; 
		margin: 2rem auto 0; 
		color: #FFF;
		border: 1px solid #333;
		transition: background-color .5s ease-in-out;}
.boton:hover {background-color:#000;}

.boton i {font-size: 2.5rem; margin-right: 1rem;}
.menu {align-self: center;}
.menu i {font-size: 3.5rem;}
.menu p:nth-child(2n) {margin-top: 1rem;}
.menu i {font-size: 1.8rem;}

/* TELEFONOS */
.telefonos p {font-size: 1.6rem; margin-bottom: 1rem;}
.telefonos a {color: #00F; margin-top: 0;}