body{
    background: #740924;  
  }
  
.letraMenu{
    font-family: 'Comfortaa', cursive;
    color: white;
    text-align: justify;
  }
.encabezado h2{
    margin-left: 8vw;
    font-size: 1.8rem;
    color: white;
}

.encabezado p{
    margin-top: -1rem;
    margin-left: 8.2vw;
    font-size: 1.1rem;
    color: white;
}

.divFormulario{
    margin-left: 7vw;
    margin-right: auto;
}

.textoFormulario{
    font-family: 'Comfortaa', cursive;
    color: white;
    text-align: justify;
    font-size: .9rem;
    margin-left: 0vw;
}

.form-group label{
    font-size: .8rem;
    color: white;
    margin-bottom: 1px;
    margin-bottom: 1px;
}

.formulario{
    margin-left: 1vw;
}

option{
    font-size: .8rem;
}

.invalid-feedback{
    margin-top: -.1vw;
    font-size: .7rem;
}

::placeholder{
    font-size: .8rem;
    color: rgba(0, 0, 0, .1);
}
 
/*tamaño de la barra, ancho*/
.form-group{
    width: 50vw;
}

.form-control:focus {
    border-color: rgba(191,47,95,.5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(191,47,95,.5);
}

.custom-select{
    height: 2rem;
    font-size: small;
}

option:focus {
    border-color: rgba(191,47,95,.5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(191,47,95,.5);
}

.btnEnviar{
    background: gray;
    color: whitesmoke;   
}

.btn:focus{
    border-color: rgba(191,47,95,.5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(191,47,95,.5);
}

.swal-button {
    padding: 7px 19px;
    border-radius: 2px;
    background-color: brown;
    font-size: 12px;
    border: 1px solid rgb(139, 32, 32);
    text-shadow: 0px -1px 0px rgb(139, 32, 32);
}   
 
.datosPlantel1{
    background: #740924;
    grid-column: 1/2;       
}
.mapaPlantel1{
    background: peru;
    grid-column: 2/3;

}.datosPlantel2{
    background: #740924; 
}.mapaPlantel2{
    background:orangered; 
}
.bannerLateral{
    background: blue; 
}


.container{
    width: 95%;
    
	max-width: 1100px; /*cambia el ancho del contenido completo*/
	/*border: 5px solid #000; es el borde negro, ancho y color*/
	margin: auto;

	line-height: 50px;
	
	display: grid;
	grid-gap: 20px;	
	grid-template-columns: .7fr .5fr; /*cambia el ancho de la columna 1 y 2*/    
	grid-template-rows: 330px 330px;/*cambia la altura del renglón 1 y 2*/

 
}
.container > div /*Accede a los div que estan adentro de Princial1*/
{ 
	display: block;
	padding: 0px;
	color: #fff;
	
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
	border-radius: 20px;
}
.bannerLateral{
    grid-row: span 2;
}
.datosPlantel1 p{
    text-align: center;
    font-size: 1rem;   
    line-height: 150%;  /*el espacio entre cada renglon*/

    margin: auto;
    width:50%;
    height: 100%;
    padding: 60px 0px;
}
.datosPlantel2 p{
    text-align: center;
    font-size: 1rem; 
    line-height: 150%; 
    
    margin: auto;
    width: 70%;
    height: 100%;
    padding: 50px 0px;
}
.bannerLateral img{
    width: 400px;
    height: 800px;
}

.box{
    background: #740924;
       overflow: hidden;
  }
  .box img{
    width: 100%;
    height: auto;
  }
  @supports(object-fit: cover){
  .box img{
    height: 100%;
                
    object-position: center center;
    }
  }

@media (min-width: 768px) and (max-width: 1024px) {


    .container{
        width: 95%;
        
        max-width: 1100px; /*cambia el ancho del contenido completo*/
        /*border: 5px solid #000; es el borde negro, ancho y color*/
        margin: auto;
    
        line-height: 50px;
        
        display: grid;
        grid-gap: 20px;	
        grid-template-columns: 1fr 1fr; /*cambia el ancho de la columna 1 y 2*/    
        grid-template-rows: 290px 290px;/*cambia la altura del renglón 1 y 2*/

    }
    .datosPlantel1 p{
        text-align: center;
        font-size: 1rem;   
        line-height: 150%;  /*el espacio entre cada renglon*/
    
        margin-top:0px;
        width:60%;
        height: 100%;
        padding: 60px 0px;
    }
   
}
@media (min-width: 320px) and (max-width: 480px) {
   
    .divFormulario{
        margin-left: 20px;
        margin-right: 20px;
    }
/*tamaño de la barra, ancho*/
.form-group{
    width: 100%;
}

.btnEnviar{
    margin-left: 35%;
}

    .container{
        grid-template-rows: minmax(20px,auto);
    }
    .datosPlantel1{
        grid-column: span 3;        
    }
    .mapaPlantel1{
        grid-column: span 3;
    }
    .datosPlantel2{
        grid-column: span 3;
    }
    .mapaPlantel2{
        grid-column: span 3;
    }
    .bannerLateral{
        grid-row: 5/6 ;
        grid-column: span 3;
    }

    .datosPlantel1 p{
        text-align: center;
        
        line-height: 150%;  /*el espacio entre cada renglon*/
    
        margin: auto;
        width:70%;
        height: 100%;
        padding: 10px 0px;
    }
    .datosPlantel2 p{
        text-align: center;
        
        line-height: 150%; 

        margin: auto;
        width:90%;
        height: 100%;
        padding: 10px 0px;

    }
    
}