body {
    font-family: Arial, sans-serif;
    padding: 0;    
    margin: 0; /* Elimina el margen por defecto del body */    
       
}

.imgFondo{
	  position:fixed;
      height: 70%; /* Toda la altura de la ventana */
      width: 100%;	
      top: 0; /* Elimina el margen por defecto del body */
      left: 0;
      z-index: 0;
}


    .grid-container {
      margin: 0;
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      display: grid;
      grid-template-areas:
        'header header'
        'img-curso widget-descripcion'
        'widget-nota widget-nota'
        'widget-carrusel widget-carrusel'
        'logo  contacto'
        'footer footer'
        ;
        
      grid-template-rows: auto; /* Alturas de las filas */
      grid-template-columns: auto; /* Anchos de las columnas */

}

   	.grid-container > div,
	.grid-container .header,
	.grid-container .footer {
		padding: 0px;
	
	}

	    .grid-container .header {
	    grid-area: header;
	    height: 400px;
        display: flex;
        border: none;
        overflow: hidden;
        background-color: none;
        justify-content: space-between;
        z-index: 1;
    } 
  .grid-container .header .img{
			width: 170px; 
			height:170px;	
      } 
    
  .grid-container .img-curso{
            grid-area: img-curso;
            padding: 140px 50px 250px 50px;
            z-index: 2;
            background-color: white;
			
      }
      
  .grid-container .img-curso img{
			width: 600px; 
			height:400px;	
            box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.4);   
      } 
      
      
             
  .grid-container .widget-descripcion{
            grid-area: widget-descripcion;
            z-index: 2;
            background-color: white;
      }
      
       
  .grid-container .widget-descripcion h1{
            color: #6194b7 ;
            text-decoration: underline;
      }
      
      
  .grid-container .widget-nota{
            grid-area: widget-nota;
            padding: 0 50px 0 50px;
            border-top: 1px solid grey;
            border-bottom: 1px solid grey;
            background-color: white;
            z-index: 2;
      }
      
  .grid-container .widget-carrusel {
		    grid-area: widget-carrusel;
	        border: none;
	        overflow: hidden;
	        background-color: white;
	        text-align: center;
	        color: #6194b7 ;
	        z-index: 2;
	        height: 250px;                
	    } 
      

    .grid-container .logo{
        grid-area: logo;
        padding-top: 60px;
        text-align: center;
        z-index: 2;
        background-color: white;
        border-top: 1px solid grey;
    }
    
  .grid-container .logo .img{
			width: 170px; 
			height:170px;	
      }    
    
    .grid-container .contacto{
        grid-area: contacto;
        display: flex;
        padding-right:130px;
        justify-content: space-between;
    	z-index: 2;       
        background-color: white;
        border-top: 1px solid grey;        

    }
    
    .grid-container .contacto ul{
            list-style: none;    	 
}    



    .grid-container .footer{
		grid-area: footer;
		bottom: 0;
		height: 150px;
	    z-index: 2;
	    background-color: #6194b7 ;
	    text-align: center;   
	}              
	
.imgFace, .imgInsta{
	cursor: pointer;
   } 
.imgWhats{
	
	position: fixed;
	background-color: none;
	z-index: 3;
    width: 70px;
	height: 70px;
	bottom: 30px;
	right: 30px;
	border-radius: 20px;
	cursor: pointer;
}    
      
      
      
  @media(max-width: 768px){

	
  
 	  .grid-container {
      margin: 0;
      height: 100%; /* Toda la altura de la ventana */
      width: 100%;
      display: grid;
      grid-template-areas:
        'header'
        'widget-descripcion'
        'img-curso'
        'widget-nota' 
        'widget-carrusel'
        'logo'  
        'contacto'
        'footer'
        ;
        
      grid-template-rows: auto; /* Alturas de las filas */
      grid-template-columns: auto; /* Anchos de las columnas */

}


  .grid-container .header {
   		display: flex;
   		flex-direction: column;
	    align-items: center;
  	    height: 530px;
     	z-index: 3;
  	
   } 

  .grid-container .header .img{
			width: 270px; 
			height:270px;	
      } 

  .grid-container .header .navbar{
       top: 0px;
	
   } 


  .grid-container .img-curso img{
            
	        width: 250px;
	        height: 300px;  
      } 

    .grid-container .img-curso{
    
  	    text-align: center;

	}

    .grid-container .widget-descripcion{
  	    text-align: center;

	}
	
    .grid-container .logo{
     width: 100%;
     height: 300px;		    
     text-align: center;
}	
    .grid-container .contacto{
        padding: 0;
  	    text-align: center;
        display: block;
        justify-content: none;
        border-top: none;        

    }


 }