*{ margin:0; padding: 0;}
body {  font-family: 'Quicksand', sans-serif; }
header{ 
    width: 100%;
    height: 130px;
    text-align: left;
    background-color: #211e43;
    justify-content:center;             
    display: flex;
    flex-direction: row;    
    align-items: center;        
  }
.headdiv{ position: sticky; width: 100%; top: 0;z-index: 10; }
.logo{ display: block; padding-left: 3%; padding-right: 2%; max-height: 100px; }
.logo3{ display: none; }
nav{ width: 80%; max-width: 930px; }
header a:hover{ text-decoration: underline; }   
nav>ul{  display: block; max-width: 1000px; width: 80%; }
nav>ul li{ display: inline-block; }
nav>ul li a{ /*color: #957D74; */  color: white; font-size: 20px; font-weight: 600; text-decoration: none; margin-left: 10px; }
nav>ul li a:hover{ color: #267275; }
.mainimg{ background-color: #CCC; background-image: url('../images/fondocnner24.png'); background-repeat: no-repeat; width: 100%; background-size: 100%; padding-top: 50px; padding-bottom: 50px; }
.inicio{  height: 600px; }
.mainimg h1{ font-size: 4em; color: white; width: 60%; margin: 0 auto; text-align: center;}
.mainimg p{ font-size: 2.6em; color: white; width: 60%; margin: 0 auto;  text-align: center;}
.mini{ font-size: 15px; }
.miniazul{ font-size: 20px; color: #2B80A1; }
h4{ color: #154051; font-size: 1.2em; }
h5{ color: #2B80A1; font-size: 1em; }
.mainimgcomite{ background-image: url('../images/fondo_cnner2.png'); opacity: 0.8; background-repeat: no-repeat; width: 100%; background-size: 100% 100%; }
.mainimgcomite div { padding-top: 50px; padding-bottom: 50px; }
.mainimgcomite h1{ font-size: 2.1em; color: white; width: 60%; margin: 0 auto; text-align: center;}
.mainimgcomite p{ font-size: 1.2em; color: white; text-align: center; line-height: 1.5em; padding-top: 20px; opacity: 1; }
.mainimgcomite article{  width: 50%; margin: 0 auto; text-align: justify; color: black; }
.mainimgcomite article p{  color: black; text-align: justify; }
.mainimgcomite article h1{  width: 100%; color: black; text-align: left; }
.mainimgcomite article h4{  font-size: 1.5em; color: black; text-align: left; padding-top: 20px; }
.mainimg2{ background-image: url('../images/fondo.png'); opacity: 0.8; background-repeat: no-repeat; width: 100%; background-size: 100% 100%; }
.mainimg2 div { padding-top: 50px; padding-bottom: 50px; }
.mainimg2 h1{ font-size: 2.1em; color: white; width: 60%; margin: 0 auto; text-align: center;}
.mainimg2 p{ font-size: 1.2em; color: white; text-align: center; line-height: 1.5em; padding-top: 20px; opacity: 1; }
.mainimg2 article{  width: 50%; margin: 0 auto; text-align: justify; color: black; }
.mainimg2 article p{  color: black; text-align: justify; }
.mainimg2 article h1{  width: 100%; color: black; text-align: left; }
.mainimg2 article h4{  font-size: 1.5em; color: black; text-align: left; padding-top: 20px; }
.mainimg3{ background:#00867B;  width: 100%; min-height: 800px; background-size: 100% 100%; }
.sombra{   text-shadow: 1px 1px 1px black, 0 0 1em rgb(95, 95, 96), 0 0 0.2em rgb(78, 78, 78); }
.sombra2{     text-shadow: 1px 1px rgb(49, 67, 121)}
.sedes{ background-color: rgba(208, 247, 224, 1); width: 80%; margin: 0 auto; }
.sedes h1{ color: #957D74; padding-left: 10%; padding-top: 1%; padding-bottom: 1%;}
.mapa{ padding: 30px 30px 30px 30px; width: 60%; margin: 0 auto;  }
.concursos{ width: 100%;}
.concursos h1{ color: #154051; font-size: 2.8em; }
.concursos h2{ color: #154051; width: 80%; text-align: center; margin: 0 auto; }
.new{ font-size: 2em;}
.resumenes{ display: inline-block; margin-left: 10px; width: 230px; height: 50px; background-color: #CCC;font-size: 2em; border-radius: 10px; text-align: center; padding-top: 8px; background-color: #86a5d3; color: #181d2d; font-weight: bold; }
.resumenes:hover{ color: white; }
.vermas{ display: block; width: 45%; height: 50px; background-color: #0B2F5B; color:white; text-decoration: none; padding-top: 20px; margin: 0 auto; text-align: center; }
.vermas:hover{ background-color: #556B8D; }
.linea{ display: block; width: 99%; border-top:  solid 2px black; }
.cc{ display: grid; width: 100%; grid-template-columns: 50% 50%; grid-gap: 10px; }
.concursos article{ display: block; width: 100%; margin-top: 10%;  color: #154051; }
article span{ display: block; border-left: solid 2px black; }
.cc p{ width: 98%; text-align: left; padding: 2% 1%; color: #154051;  }
.active{ color: #68a499; font-weight: bold; }
.ajedrez{ width: 40%; text-align: center; margin: 0 auto; }
.ajedrez th{ background-color: #AAA;  }
.ajedrez td{ background-color: #DDD;   }
.programa{ display: inline-block; font-size: 1.5em; color: #2B80A1; font-weight: bolder; border: solid 2px #2B80A1; height: 30px; width: 100px; padding: 15px; }
#vt1 a:visited { color: #2B80A1;}
#vt2 a:visited { color: #2B80A1;}
#vt3 a:visited { color: #2B80A1;}
.dia{ display: inline-block; font-size: 1.5em; color: #626262; font-weight: bolder; border-top: solid 2px #2B80A1; border-right: solid 2px #2B80A1;  border-bottom: solid 2px #2B80A1;   height: 30px; width: 70px; padding: 15px; }
.grid3 p{ color: #2B80A1; }
#gridsedes{ 
    width: 70%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;     
    grid-gap: 50px;
    }
#gridsedes img{ display: block; width: 100%; height: 400px; object-fit: cover; } 
#gridsedes div{ background-color: white;  }
#gridsedes div h4{ color: #2B80A1; padding: 15px 20px 0 20px; }
#gridsedes div p{ color: #2B80A1; padding-left: 20px; padding-bottom: 30px; }
.blanco{ background-color: white; }
.grid2{  
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;  
}
.grid2 div{  
    width: 100%;    
    text-align: center;
    min-height: 250px;
    padding-top: 50px;
}
.blanco h1{ font-size: 3em; }
.blanco h4{ font-size: 1.5em; color: #2B80A1; font-weight: 500; width: 50%; margin: 0 auto; text-align: left; padding-bottom: 2%; }
.registradiv1{ width: 50%; margin: 0 auto; font-size: 1.4em; padding: 2%;  }
.registradiv2{  width: 50%; margin: 0 auto; color: white; font-size: 1.2em; }
.registradiv2 ul{ list-style-position: inside; }
.grid3{  
    display: grid;
    grid-template-columns: 33% 33% 33%;      
}
.grid3 h3{  
    color: #777;
}

.gridregistro{  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gridregistro div{ width: 100%; background-color: white; color: #2B80A1; min-height: 180px; padding-top: 110px; border: solid 1px black; }
.gridregistro h3{ text-align: center; }
.gridregistro h5{ text-align: center; }
.grid2x{  
    width: 50%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50% 50%;      
}
.grid2x div{  
    width: 100%;    
    text-align: center;    
    background-color: white;    
    padding-top: 30px;
    min-height: 80px;
}
.grid2x img{  
    display: inline-block;
    width: 12%;            
    margin-top: 10px;
    margin-left: 2%;
}
.abstract{ width: 65%; margin: 0 auto; background-color: white; min-height: 100px; color: #2B80A1; padding: 50px 50px; }
.abstract h1{  text-align: center; font-size: 2.5em; }
.abstract p{  text-align: center; font-size: 1.2em; }
.flecha{ color: white; font-size: 2.5em; padding-left: 10%; }
.nombre{ color: #2B80A1; font-size: 1.2em; font-weight: bolder;}
.grid4{  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}
.grid4 div{ width: 100%; height: 300px; }
.grid4 div h3 { color: white; font-size: 2em; padding-top: 100px; padding-left: 10%; }
.grid4 div h3:hover { color: black; }
.grid4 a {text-decoration: none; }
.grid4 a:hover { color: black; }
.flecha:hover{ color: black; }
.grid4 img{ width: 100%; height: auto;  }
.gridconfe{  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-gap: 30px;
    background-color: #cecece;
    padding: 30px 50px;
}
#imgprogram{  background-color: #2F157A; width: 100%;  }
#imgconfe{  background-color: #2B80A1; width: 100%;  }
#imgregistrate{  background-color: #00867B; width: 100%;  }
#imgcomite{  background-color: #154051; width: 100%;  }
.comite{ background-color: #2B80A1; height: 200px; }
.comite h1{ color: white; text-align: center; padding-top: 2%; }
.gridconfe div{ width: 100%; height: auto; background-color: white; }
.gridconfe img{ width: 100%; height: 250px; object-fit: cover; }
.ponentesajuste{ display: block; padding: 20px 15px;  }
main{ width: 70%; margin: 0 auto;  }
main h2{color: #957D74; font-size: 2.5em; padding-top: 20px;}
main p{ font-size: 1.2em;}
.mainprograma{ background-color: #00867B; padding-top: 50px; padding-bottom: 50px; }
.mainponente{ background-color: #2B80A1; padding-top: 50px; padding-bottom: 50px; }
.hponente{ color: #2B80A1; padding-top: 50px; padding-bottom: 50px; text-align: center; width: 60%; margin: 0 auto; }
.mainponente h2{ color: #AFF0CA; text-align: center; font-size: 4.5em; }
.programahead{ display: block; text-align: center; font-size: 4em; font-weight: 900; color: #2F157A; }
.mainconcursos{ background-color: #2B80A1; padding-top: 50px; padding-bottom: 50px; }
.concursoshead{ display: block; text-align: center; font-size: 4em; font-weight: 900; color: #180B3D; }
.registrohead{ display: block; width: 50%; margin: 0 auto; text-align: left; font-size: 2em; font-weight: 900; color: white; }
.registroh1{ display: block; width: 50%; margin: 0 auto; text-align: left; font-size: 6em; font-weight: 400; color: white; }
#pull{ display: none; }
footer{
    width: 100%;
    height: 200px;    
    /*border-top: solid 2px #a0138e;    */
    border-top: solid 2px #267275;
    display:flex;     
}
footer div{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr 1fr 1fr; 
    justify-items: center;    
    margin: 0 auto;           
}
footer span{
    display: inline-block;
    color: #2B80A1; 
    width: 45%;
    padding-top: 50px;
    line-height: 2em;
}
footer img{ display: inline-block; width: 100%; background-size: 100%; margin-left: 2%; margin-top: 20px; height: 100px; object-fit: contain;  }
footer p{ margin-top: 2%; color: #2B80A1; font-size: 0.9em; }

/* AQUI EMPIEZA EL DISEÑO RESPONSIVO */
/* ********************************* */
@media screen and (min-width: 1024px) and (max-width: 1920px){
.mainimg{  background-image: url('../images/fondocnner24.png'); background-repeat: no-repeat; width: 100%; background-size: 100% 100%; height: auto; }
.mainimg h1{ font-size: 4em; color: white; width: 60%; margin: 0 auto; text-align: center;}
.mainimg p{ font-size: 2.6em; color: white; width: 60%; margin: 0 auto;  text-align: center;}
    nav{ width: 90%; }   
    nav>ul {
    display: block;
    max-width: auto;
    width: 100%;
}
nav>ul li a{ font-size: 17px; margin-left: 8px; }
    footer div{
        width: 70%;
        margin: 0 auto;
    }
    main{ width: 80%; }
    #gridsedes{ grid-gap: 40px; }
}

@media screen and (min-width: 988px) and (max-width: 1023px){
    main { width: 95%;  }	
    nav{ width: 100%; }
    nav ul{ width: 100%; }
    nav>ul li a{ font-size: 16px; margin-left: 6px; }
    .mainimg{  background-image: url('../images/fondocnner24.png'); background-repeat: no-repeat; width: 100%; background-size: 100% 100%; height: auto; }
    .grid4{  
        grid-template-columns: 1fr 1fr; 
    }
    #gridsedes{ grid-gap: 30px; }
    #gridsedes img{ height: 300px;}
    .grid4 div{ width: 100%; height: 300px; }
    .grid4 div h3 { color: white; font-size: 2em; padding-top: 100px; padding-left: 10%; }
    .grid4 div h3:hover { color: black; }
    .grid4 a {text-decoration: none; }
    .grid4 a:hover { color: black; }
    .flecha:hover{ color: black; }
    .grid4 img{ width: 100%; height: auto;  }
}

@media screen and (max-width:987px){
    .gridconfe{  
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr; 
        grid-gap: 10px;
        background-color: #cecece;
        padding: 30px 30px;
        margin: 0 auto;
    }
    .gridconfe div{ height: auto; }    
    #gridsedes{ 
        width: 80%;
        grid-template-columns: 1fr 1fr;  
        }
    .cc{ display: grid; width: 100%; grid-template-columns: 100%; grid-gap: 10px; }
    .cc p{ width: 100%; text-justify: left; }
    article span{ border-left: none; border-top: solid 2px black; }   
    .mainimg{  background-image: url('../images/fondocnner24.png'); background-repeat: no-repeat; width: 100%; background-size: 100% 100%; height: auto;  }    
    .mainimg h1{ font-size: 4em; color: white; width: 80%; margin: 0 auto; text-align: center;}
    .mainimg p{ font-size: 2.6em; color: white; width: 80%; margin: 0 auto;  text-align: center;}
    .inicio{  height: 400px; }
    .grid4{  grid-template-columns: 1fr 1fr;  }
    .mapa{ padding: 30px 30px 30px 30px; width: 90%; margin: 0 auto;  }
    .grid2{ grid-template-columns: 100%; }
    .grid2 div{  
       min-height: auto;    
    }
    .grid2 img{  
        width: 80%; 
        max-height: 230px;
        object-fit: contain;
    }
    header{ 
        width: 100%;
        height: auto;
        text-align: left;
        justify-content:center;         
        color: #957D74;
        display: flex;
        flex-direction: column;    
        align-items: center;        
      }
      .logo { display: none; }
      .logo2 { display: none; }    
      .logo3 { display: inline-block; margin-top: 20px; height: 100px; }    
nav{  width: 100%;  height: auto; top: 0; max-width: 100%; }
nav>ul{ display: none; width: 100%; height: 300px; background-color: #181d2d; }
nav>ul li{ background-color: #181d2d; width: 100%; display: block; }
nav>ul li a{  text-decoration: none; margin-left: 10px; line-height: 2.3em; }
nav>ul li a:hover{ color: #68a499; }
.vermas{ margin-bottom: 20px; text-align: center; }
.cc article{ margin-top: 1%;  }
.cc p{ width: 90%; text-align: center;}
#pull{
    display: block;
    width: 10%;
    height: 30px;	
    padding-top: 10px;
    text-decoration: none;
    font-size: 17px;
    color: #68a499;
    font-weight: bolder;
    padding-left: 90%;
    cursor: pointer;
 }   
 #menubar {
    width: 40px;
    height: 40px;
  }
 .bar {
    height: 5px;
    width: 100%;
    background-color: #68a499;;
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
  }
  #bar1 { transform: translateY(-4px); }
  #bar3 { transform: translateY(4px); }
  .change { display: block; }
  .change #bar1 { transform: translateY(4px) rotateZ(-45deg); }
  .change #bar2 { opacity: 0; }
  .change #bar3 { transform: translateY(-6px) rotateZ(45deg); }
  footer div{
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    margin: 0 auto;       
    }
}

@media screen and (max-width:768px){
    .gridconfe{  
        display: grid;
        grid-template-columns: 1fr 1fr; 
        padding: 30px 30px;
    }
    .grid4{  grid-template-columns: 1fr;  }
    .mainimg h1{ font-size: 3em; width: 90%;}
    .mainimg p{ font-size: 2.3em; width: 100%; }
    .inicio{  height: 300px; }
    .gridconfe div{ height: auto; }
    .patrocinadores{ font-size: 3em; }
    .cc{ flex-direction: column; }
    .cc img{ border-right: none; }
    .linea{ margin-top: 50px; }
    .concursos img{ width: 100%; height: auto; }
    .concursos article{ width: 100%; margin-top: 10%; }
    #gridsedes{ 
        width: 90%;
        grid-template-columns: 1fr 1fr;     
        grid-gap: 20px;
    }
#gridsedes img{ display: block; width: 100%; height: 300px; object-fit: cover; }
#gridsedes p{ font-size: 1em; padding-top: 5px; padding-bottom: 5px; }
.cc article{ margin-top: 0;  }
    .grid3{  
        display: grid;
        grid-template-columns: 100%;      
    }
    footer div{ width: 80%; }
    footer span{ width: 100%; }
    footer img{ display: inline-block; width: 100%; background-size: 100%; margin: 0 auto; }
}

@media screen and (max-width:480px){
    .gridconfe{  
        grid-template-columns: 1fr; 
    }
    .patrocinadores{ font-size: 2.5em; }
    .mainimg h1{ font-size: 2.3em; }
    .gridconfe div{  height: auto; }
    #gridsedes{ 
    width: 80%;
    grid-template-columns: 1fr;     
    }
    footer div{
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr;     
    }
}