/* ESTRUCTURA GENERAL */

*{
    margin: auto;
    padding: 0;
    box-sizing: border-box;
}

body, html {
  margin: auto;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
}


/* ESTRUCTURA GENERAL */


/* *************** CONTENIDO ************** */

main{
    padding: 0;
    margin: 0;
    /*position: relative;*/
    z-index: -4;
}

.contenido{
    display: flex;
    flex-direction: row;
    align-content:space-between;
    padding: 10px;
}

/*.form_email{
    width: 50%;
    margin-top: 30px;
    padding: 10px;
    background-color: azure;
    border-radius: 10px;
    border: 0.5px ;
    border-color: deepskyblue;
    border-style: solid;
}*/

.form_email h4{
    width: 100%;
    text-align:justify;    
    /*padding-bottom: 15px;*/
    color: royalblue;
}

.form_email label{
    font-weight: bold;
    color: royalblue;
}

.form_email input{
    width: 100%;
    height: 35px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px;
    border-radius: 5px;
    border-style:solid;
    border-color:dodgerblue;
}

.form_email textarea{
    width: 100%;
    resize: none;
    border: 1px;
    border-radius: 5px;
    border-style: solid;
    border-color:dodgerblue;
}

.form_email button{
    width: 100%;
    height: 40px;
    background-color: cornflowerblue;
    color: white;
    border-radius: 5px;
}

.info_contacto{
    margin-top: 10px;
    background-color: azure;
    border-radius: 10px;
    border: 0.5px;
    border-color: deepskyblue;
    border-style: solid;
}

.mapa1{
    display: block;
    border-radius: 10px;
}

.mapa2{
    display: none;
    border-radius: 5px;
}

.mapa2 iframe{
    width: 100%;
    height: auto;    
    border-radius: 10px;
}


/*.mapa{
    align-items: center;
}*/


/* *** FORMULARIO *** */




/* *** FORMULARIO *** */

/* *** MAPA *** */



/* *** MAPA *** */


/* *************** CONTENIDO ************** */





/*** PIE ***/


/* RESPONSIVE DESIGN -- media screen and (max-width: 520px) and (min-width: 480px) */

@media only screen and (min-width : 250px) and (max-width : 480px)
	{
    
     
/*** CONTENIDO ***/
        
        /*.mapa iframe{
            width: 100%;
            height: auto;
        }*/
        .contenido{
            flex-direction: column;
        }
        
        .form_email{
            width: 100%;
        }
        
        .mapa1{
            display: none;
        }
        
        .mapa2{
            display: block;
            border-radius: 5px; 
        }
/*** CONTENIDO ***/        
        
        
        