* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62,5%;
}

body {
  background-attachment: sticky;
  overflow-x: hidden;
  
  
}
h1 {

  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  color: white;
  text-align: center;
  font-weight: 500;
  background-color:#1e90b0 ;
  border: transparent;
  border-style: none;
  border-radius: 10px;
  border-width: 0px;
  @media(min-width:768px){
  
    font-size: 2rem;
    font-weight: 800;
  }
}

h2 {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  color: blue;
  text-align: center;
}

h3 {
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  color: rgb(248, 72, 8);
  text-align: center;
}


#botonera {
  width: 100vw;
  z-index: 1;
  background-color: rgba(32, 64, 64, 0.2);
  position: -webkit-sticky;
  position: sticky;
  font-size: 1.5rem;
  top: 0;
  left: 0;
  padding: 2px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#botonera ul li {
  list-style:none;
  text-align: end;
  
}
#botonera ul li a {
  
  color:  #ff9900;
  font-size: 1 rem;
  font-family: "Roboto", sans-serif;
  -webkit-text-decoration: double;
          text-decoration: double;
}

#botonera ul li a:hover {
  color: white;
  font-weight: 400;
}


#landing{
  /* grid mobile */
  display: grid;
    grid-template-columns:repeat(4,20vw);
    grid-template-rows: repeat(24, auto);
    grid-template-areas:

    /* "robyYGari robyYGari robyYGari robyYGari" */
    "carousel carousel carousel carousel"
    /* "pub25 pub25 pub25 pu25" */
    "pub3 pub3 pub2 pub2"
    "pub1 pub1 pub4 pub4"
    "videoTecnico videoTecnico videoTecnico videoTecnico"
    "textoVTecnico textoVTecnico textoVTecnico textoVTecnico"
    "pub9 pub9 pub6 pub6"
    "pub7 pub7 pub8 pub8"
    "pub5 pub5 pub11 pub11"
    "noticias noticias noticias noticias"
    "aqui aqui aqui aqui"
    "pub10 pub10 pub12 pub12"
    "pub13 pub13 pub14 pub14"
    "lanzamientos lanzamientos lanzamientos lanzamientos"
    "pub15 pub15 pub16 pub16"
    "charlasTecnicas charlasTecnicas charlasTecnicas charlasTecnicas"
    "textoCharlasTecnicas textoCharlasTecnicas textoCharlasTecnicas textoCharlasTecnicas"
    "pub17 pub17 pub18 pub18"
    "gariResp gariResp membresia membresia"
    "pub24 pub24 comunidad comunidad"
    "pub19 pub19 pub20 pub20"
    /* "pub21 pub21 pub22 pub22" */
    "pub23 pub23 resp resp"
    "mira mira mira mira"; 
    
}
.p {
  font-family: "Roboto", sans-serif;
}
.alignCenter{
  display: flex;
  justify-content:center;
}
.aqui{
  grid-area: aqui;
}

.banner {
  width: 90vw;
  height: auto;
  margin:2vh 5vw;
}

.blanco{
  grid-area: blanco;
}

.cajaS{
  padding: 0;
  margin-left: 15px;
  width: 50px;
  height: auto;
}
.cajaS:hover{
  transform: rotate(360deg);
  transition: 1s;
}

.cartelAzul{
  margin-top: 2vh;
  background-color: #1e90b0;
  color: white;
  font-size: 1 rem;
  text-align: center;
  border: transparent;
  border-style: none;
  border-radius: 10px;
  border-width: opx;
  
}
.cartelBlanco{
  background-color: white;
  color: white;
  font-size: 2rem;
  
  
}
.cartelNaranja{
  background-color: #ff9900;
  color:white;
  font-size: 1 rem;
  text-align: center;
}
.comunidad{
  grid-area: comunidad;
}

.contacto{
  width: 130px;
  align-items: center;
}

.carousel{
  grid-area: carousel;
}

.flexRow{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* inicia galeria Roby */
.container{
  width: 50vw;
  margin-left: 0%;
}
.fotoGaleria{
  
  display: flex;
  flex-direction: row;
  
}

/* fin galeria Roby */

.gariResp{
  grid-area: gariResp;
}
.imageTGI{
  grid-area: imageTGI;
}
.imageV51{
  grid-area: imageV51;
}

.info{
  grid-area: info;
}

.lanzamientos{
  grid-area: lanzamientos;
}


.membresia{
  grid-area: membresia;
}

.mira{
  grid-area: mira;
  
}
.navbar {
  box-shadow: 0 6px 5px rgba(0, 0, 0, 0.2);
  
}


/* botón hamburguesa */


.navbar-toggler-icon {
  width: 30px;
  height: 30px;
   
}

.custom-toggler{
 
  border-radius: 15%;
  margin-top: 5px;
  border-width: 0px;
}



/* fin botón hamburguesa */

.noticias{
  grid-area: noticias;
}

.pie {
  padding-top: 0px;
    text-decoration: none;
  
}
.pieIcon{
   width: 25px;
   margin-left: 10px;
   
}
.pieIconyt{
  width: 60px;
}
.pieIcon:hover {
  transform: rotateZ(360deg);
  transition: 1s;
}
.pieIconyt:hover {
  transform: rotateZ(360deg);
  transition: 1s;
}

.pieItems{
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pr{
  padding-right: 20px;
}

.pub1{
  grid-area: pub1;
}
.pub2{
  grid-area: pub2;
}
.pub3{
  grid-area: pub3;
}
.pub4{
  grid-area: pub4;
}
.pub5{
  grid-area: pub5;
}
.pub6{
  grid-area: pub6;
}
.pub7{
  grid-area: pub7;
}
.pub8{
  grid-area: pub8;
}
.pub9{
  grid-area: pub9;
}
.pub10{
  grid-area: pub10;
}
.pub11{
  grid-area: pub11;
}
.pub12{
  grid-area: pub12;
}
.pub13{
  grid-area: pub13;
}
.pub14{
  grid-area: pub14;
}
.pub15{
  grid-area: pub15;
}
.pub16{
  grid-area: pub16;
}
.pub17{
  grid-area: pub17;
}
.pub18{
  grid-area: pub18;
}
.pub19{
  grid-area: pub19;
}
.pub20{
  grid-area: pub20;
}
.pub21{
  grid-area: pub21;
}
.pub22{
  grid-area: pub22;
}
.pub23{
  grid-area: pub23;
}
.pub24{
  grid-area: pub24;
}

.radio{
  grid-area: radio;
}
.resp{
  grid-area: resp;
}
.robyYGari{
  grid-area: robyYGari;
}
.textoCharlasTecnicas{
  grid-area: textoCharlasTecnicas;
}

.textoCopyright{
   text-align: center;
   margin-top: 20px;
   font-size: 0.95 rem;
}

.textoNormal {
  margin-left: 15px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 1 rem;
  font-style: normal;
  font-weight: 200;
  color: black;
}

.textoNormalMd {
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  color: #0d5471;
  text-align: left;
  padding: 50px;
}

.textoResaltado, .textoResaltadoCentro {
  font-size: 1.5rem;
  font-style: oblique;
  font-weight: 200;
  color: black;
  text-align: left;
}

.textoResaltadoCentro {
  text-align: center;
}

.textoVTecnico{
  grid-area: textoVTecnico;
}

.texto25Anos{
  width: 85vw;
  margin-left: 7.5vw;
}

.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s both;
}
.tv{
  grid-area: tv;
}

.videoTecnico{
   grid-area: videoTecnico;
}

.charlasTecnicas{
  grid-area: charlasTecnicas;
}
.w-90{
  display: flex;
  justify-content: center;
}
.w-100{
  padding: 5px;
  border-radius: 7%;
}
.web{
  grid-area: web;
}

/* pantallas a partir de 768 px  */

@media (min-width:768px) {
  
  .banner{
    
    padding-left: 3vw;
    padding-right: 4vw;
   }

  .cea{
    width: 92vw;
    margin-left: 0vw;
    margin-right: 0vw;
    margin-right: 0vw;
    padding-left: 0vw;
    padding-right: 0vw;
    margin-bottom: 2vh;
  }
  #botonera ul li a {
    color: white;
    
  }
  #botonera ul li a:hover {
    color:  #ff9900;
  } 
    

  .textoNormal{
    font-size: 1.3rem;
    line-height: normal;
    line-height: 1.5 ;
    margin-right: 50px;
    
  }
  .cartelAzul, .cartelNaranja{
    margin-top: 2vh;
    font-size: 1.5rem;
  }
  
  .tv, .radio, .web, .info{
    align-self: center;
    
  }

  .pieIcon{
    width: 50px;
    margin-left: 10px;
    
 }
 .pieIconyt{
   width: 120px;
 }

 .contacto{
  width: 170px;
}
 
  #carouselExample{
    width: 25vw;
  }
  
  #landing{
    grid-template-columns:repeat(4, 23vw);
    grid-template-rows: repeat(17, auto);
    grid-template-areas:
        /* "pub3 pub3 robyYGari robyYGari robyYGari robyYGari  pub2 pub2"
        "pub1 pub1 robyYGari robyYGari robyYGari robyYGari  pub4 pub4" */

        "pub3  carousel carousel pub2"
        "pub1 carousel carousel pub4"
        "pub25 pub25 pub25 pub25"
        "videoTecnico videoTecnico  videoTecnico videoTecnico"
        "textoVTecnico textoVTecnico textoVTecnico textoVTecnico"
        "pub5 pub6 pub7 pub8"
        "pub9 pub10 pub11 pub12"
        "noticias noticias noticias noticias"
        "aqui aqui aqui aqui"
        "pub13 pub14 pub15 pub16"
        "lanzamientos lanzamientos lanzamientos lanzamientos"
        "pub17 pub18 pub19 pub20"
        "charlasTecnicas charlasTecnicas charlasTecnicas charlasTecnicas"
        "textoCharlasTecnicas textoCharlasTecnicas textoCharlasTecnicas textoCharlasTecnicas"
        /* "pub21 pub22 pub23 pub24" */
        "gariResp blanco blanco membresia"
        "pub24 blanco blanco comunidad"
        
        "mira mira mira mira"

  }
}
@media (min-width:1024px){
  .cartelAzul, .cartelNaranja{
    font-size: 2rem;
    height: 50px
  } 
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}