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

header {
                grid-area: head;  }
        .centro1 {
                grid-area: lineas; }
        .centro2 {
                grid-area: main1; 
				margin-left: 2.8em;}
        .centro3 {
                grid-area: main2;
				margin-left: 2.8em; }


        .container {
        	display: grid;
            grid-template-columns: 350px  auto;
            grid-template-rows: 100px auto auto;
            grid-template-areas:
                "head lineas"
                "head main1"
                "head main2";
				
        }

    body{
        margin: 0;
	    background-color: #77CFDD;
	    font-family: 'Abel', sans-serif;
        }
    header{
        background-color: white; 
 		min-height: 200%;
		border-right: 5px solid #0A8FB0; 
        }
    img { 
		max-width: 350px; 
		margin-top: 1em;}
    h1{
        position: absolute; 	
        text-align:center;
        background-color: #77CFDD /**/;
        color: white; 
        padding: 1em;
        font-weight:700;
        text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
        margin: 1em auto;
        border-top: 5px solid #0A8FB0;
        border-bottom: 5px solid #0A8FB0;
		border-left:  5px solid #0A8FB0;
        width: 271px;
    	border-radius: 20px 0 0 20px;
   		left: 10px; }
    .espectro{
		font-size: 1.3em; 
		text-transform: uppercase;}

    .footer{
        background-color: white; 
 		margin: 1em auto;
 		color: #6F6F6F;
		font-size: 1.2em;
		margin-top: 250px;
		text-align: center;
		width: 90%;}
		
    address{ font-style: normal;} 

    h2{
        margin: 0.5em auto;
        display: flex;
        justify-content: flex-start;
        font-size: 2.3em;
        color: white; 
        border-bottom: 1px solid white; 
        padding-bottom: 0.05em;
        width: 90%;
        text-transform: uppercase;
        text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);	 }
     h3{font-size: 2.1em; 
        color: #565656;
		font-variant:small-caps;}
     h3:hover{
		 color: white; 
	 	display: block; 
		height:190px; 
		width: auto;}
       
    .linea{
        border: 10px solid #0A8FB0;  
		display: inline-flex;
 		flex-direction: row; 
		flex-basis: 32%;
		max-width: 250px;
		margin: 2em 1em;
		height:200px;
		border-radius: 20px;
		text-align: center;
		padding: 0.9em;
		color: blue;
		background: white url(external-link.png) no-repeat center 180px;}
    a{text-decoration: none;}
    .linea a{color: blue;}
    .linea:hover{
        background: #0A8FB0 url(external-link2.png) no-repeat center 150px;
		color: #0A8FB0;}
	.distancia{margin-bottom: 25%;}
/*.icono{
		background: #0A8FB0 url(microscope.png) no-repeat center top;
		}*/
@media only screen and (max-width: 500px) {
    	.container {
        	display: grid;
            grid-template-columns: 100%;
            grid-template-rows: auto;
            grid-template-areas:
                "head"
                "lineas"
                "main1"
				;
        }
		header {text-align: center;
				 border-right: none;}
		h2{justify-content: center;}
		img {max-width: 300px;}
		h1{
	 		background-color: #77CFDD;
        	border: 5px solid #0A8FB0;
        	width: 75%;
    		border-radius: 20px;
   			margin: 20px auto;}
		footer{
			margin-top: 10px;}
		.linea{
				display: flex;
				justify-content: center;
				}
}