* {
	margin:0px;
	padding: 0px;
}

body {
  //font-family: Helvetica, Arial, Sans-Serif;
  font-family: 'Roboto Condensed', sans-serif;
}

main {
    display:grid;
    grid-gap:10px;
    font-family: 'Roboto Condensed', sans-serif;
    background-color:#f3f3f3;
    width:100%;
    max-width:1645px;
    grid-template-areas:
    "header"
    "izquierda"
    "derecha"
    "seccion2"
    "titulo-cursos"
    "seccion1"
    "titulo-beneficios"
    "seccion3"
    "footer"
}

//section {border:red solid;}

header {grid-area: header; margin:1em;margin-top:0px;margin-bottom:0px; } 
footer {grid-area: footer; margin:1em;}
#seccion1 {grid-area: seccion1;margin:1em;}
#seccion2 {grid-area: seccion2; margin:1em;margin-top:0px;}
#seccion3 {grid-area: seccion3;margin:1em;background:#ffffff;}
#seccion4 {grid-area: titulo-cursos;margin:1em;}
#seccion5 {grid-area: titulo-beneficios;margin:1em;}
#izquierda {grid-area: izquierda;}
#derecha {grid-area: derecha; }


/*Header*/
    #barra_azul {width:100%;height:40px; background-color:#0055b7;}
    #barra_azul span {color:white;vertical-align:middle;margin-left:6%;line-height:40px;}
    #cabecera {
        display:flex;
        flex-wrap:wrap;
        margin-left:5%;
        margin-right:5%;
        align-items:center;
        justify-content:center; }
    #cabecera ul {
        with:auto;
        margin-top:10px; }
    #cabecera li {
        display:inline-block;
        padding:15px 30px; }
    #cabecera a {
        text-align:center;
        text-decoration:none;
        //font-size:3.5vw;  }
    #cabecera a:hover { color: #f0c330; transition:0.5s;}
    
    .logo { max-width:250px;}
    
    a{text-decoration:none}

    .button {
      background-color: #2f69dc; 
      border: none;
      border-radius:15px;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor:pointer;
    }
.titulo-cursos {text-align:center}
.titulo-beneficios {text-align:center}
/*Grid de anuncio de cursos*/

    .anuncio-grid {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;    
     }
    .anuncio-grid div { //border:solid }
    .anuncio-grid img {max-width:100%; }

/*items*/
.item-flex-container {
  display: flex;
  flex-direction: column;
  min-height: 450px;
  max-height: 450px;
  background-color:#ffffff;
  border-radius: 15px;
  margin-top:10px;
}
.item-img {
    display:flex;
    justify-content:center;
    align-items:center; }
.item-img img {border-radius:15px;}
.item-nombre {margin-top:5px; text-align:center;  color:#00418b; font-weight:bold; 
              padding-bottom: 5px;  } 
.item-nombre span {border-bottom:solid orange}
.item-desc  {margin:10px 25px 10px 25px;text-align:justify;color:black;} 
.item-fecha {margin:10px 25px 10px 25px;text-align:left;color:black;} 
.item-masinfo {margin:10px 25px 10px 25px;text-align:center;} 


/*Seccion ventajas*/
    .ventajas-grid {
       display:grid;
       grid-gap:10px;
       grid-template-columns: 1fr;   
     }
     .ventajas-grid div {padding:0.5em 0em 0.5em 0em ;}

    .item-ventajas {
       display: flex;
       flex-direction: row;
       padding:0.3em 0.5em 0.3em 0.5em;
     }
    .item-ventajas p {line-height:25px;}
    .item-ventajas img {width:40px;height:40px;}
    .item-ventajas h1 {padding:0.1em 0.5em 0.1em 0.5em;} //top right bottom left
    .ventajas-msg { margin-right:30px;}
/*Seccion slider*/
.slider {
    display:flex;
    justify-content:space-between;
   /* align-items:center;*/
}
.slider div {border:none;flex-basis:100%;}
#split-image {
    display:flex;
    flex-direction:column;
    flex-basis:40%;
}
#split-image img { width:100%;
                   object-fit:cover;
                   border:none;}
    
#split-image a { flex-basis:100%;}

#full-image {margin-right:10px; position:relative;}
#full-image img {max-width:100%;
                 height:100%;
                 object-fit:cover; }
#div-txt-slide1 {
    position:absolute;
    right:2%;
    top:10%;
    color:white;
    font-size:30px;
    border:red solid; }
#div-txt-slide1 div {
    border:1px solid;
    padding-bottom:1em;
    opacity:0%;
}

#txt-slide-0 {
    //background:#44727c;
    //border:1px solid;
    text-align:center;
    color:white;
    font-size:1.5em;
    width:72%;
    position:absolute;
    left:0%;
    bottom:29%;
    opacity:0%;  
    animation: texto-slide-animation 2s linear 0s 1 forwards; }
#txt-slide-0 span {display:block;}

#txt-slide0-sup {
    //background:#44727c;
    //border:1px solid;
    text-align:right;
    color:white;
    font-size:1.5em;
    width:10%;
    position:absolute;
    right:8%;
    top:2%;
    opacity:0%;  
    animation: texto-slide-animation 1s linear 2s 1 forwards; }
#txt-slide0-sup span {display:block;margin-bottom:7px;}

#txt-slide0-inf {
    //background:#44727c;
    //border:1px solid;
    text-align:right;
    color:white;
    font-size:1.5em;
    position:absolute;
    right:8%;
    bottom:6%;
    opacity:0%;  
    animation: texto-slide-animation 1s linear 2s 1 forwards; }
#txt-slide0-inf span {display:block;}

#txt-slide-1 {
    animation: texto-slide-animation 1s linear 2s 1 forwards; }

#txt-slide-2 {
    animation: texto-slide-animation 1s linear 4s 1 forwards; }

#txt-slide-3 {
    animation: texto-slide-animation 1s linear 5s 1 forwards; }

@keyframes texto-slide-animation { 100%{opacity:100%;} }


.sjicon {
    display: inline-block;
    width: 16.3px;
    height: 13.45px;
    overflow: hidden;
    padding: 0em 1em 1em 1em;
}
             
/* Grid de footer */

    .grid-footer {
        display:grid;
        grid-template-columns:1fr;
        background: #f4f4f4f4
        font-size:16px;
        /* text-align:center; */
        
    }
    
    .grid-footer div {
        margin: 1em;
        max-height:80vh;
    }
    
    .grid-footer img {width:70%;}
    
    .footer_maps {
        display:flex;
        flex-direction:column;
         align-items:center;
         justify-content:space-evenly;
    }
    
/*Columna de logo en footer*/
.footer_logo_div {
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   /* width: 60%;*/
}

.footer_logo_imagen{
  width: 60%;
}

.footer_logo_texto{
color: black;
display:block;
line-height:1.2em;
}

.footer_titulo_col2 {
    text-align:left;
    padding-left:10%;
    margin-top:10%;
}

.footer_titulo_col3 {
    text-align:left;
    padding-left:10%;
    margin-top:10%;
}

.footer_titulo_col4 {
    text-align:center;
    margin-top:10%;
}

/*titulo del medio*/
.titulos {
		text-align: center;
		margin-bottom: 1%;
		margin-top: 1%;
	    font-size: 1.5em;
	    font-weight: bold;
}

.footer_col4div{
  margin-left: 1px;
  margin-right: 1px;
}
.footerul{ list-style: none; padding-left: 10%;margin-top:5%}

.footerli{
	font-size:medium;
	padding-top:0.5em;
    display: list-item;
    line-height:1.2em;
}

@media (min-width: 600px) {


main {
grid-template-areas:
"header header header"
"izquierda seccion2 derecha"
"izquierda titulo-cursos derecha"
"izquierda seccion1 derecha"
"izquierda titulo-beneficios derecha"
"izquierda seccion3 derecha"
"izquierda footer derecha";
grid-template-columns:5% auto 5%;
}

    #cabecera {
        align-items:center;
        justify-content:space-between; }
    #cabecera a {
        text-align:center;
        text-decoration:none;
        font-size:1.5vw;    }

.item-flex-container {flex-basis:30%;}

    .anuncio-grid {
        justify-content:space-between;    
     }
    .ventajas-grid {
       display:grid;
       grid-gap:10px;
       grid-template-columns: 1fr 1fr;   
     }
.slider {
    display:flex;
    justify-content:space-between;
/*    align-items:center;*/
}
.slider div {border:none;}
  .ventajas-msg { margin-right:30px;}
.grid-footer {
        grid-template-columns:1fr 1fr 1fr 1fr;
        
    }
}