@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


body{
  padding-top: 5rem;
}

h1,h2,h3,h4{
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
}
h5{
  font-family: "Open Sans", sans-serif
}
p{
  font-family: "Open Sans", sans-serif;
}

 #navbar .logoNav {
  width:40px;
  height: 40px;
}

#navbar .nav-item:hover{
  border-bottom: solid;
  border-color: #663E18; 
}

#navbar .navRedes:hover{
  border: 0px;
}

.nav-item{
  font-size: larger;
}

.nav-link{color: black;}

.nav-link:hover{
  color: #008D36;
  font-weight: 600; 
}

#Experimentacion img{
  margin-top: 2rem;
}

#Experimentacion img:hover{
  cursor: pointer;
}

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}


/* ---------------------EXTRA SMALL----------------------- */
@media only screen and (max-width: 576px){

  #navbar .nav-item i{
    font-size: 1.75rem;
    margin-right: 10px;
  }
  /* FOOTER*/
  #Contacto {
    height: auto;
  }

  #Contacto .row{
    margin-top: 2rem;
  }

  #Contacto .infoAdicional{
    padding: 1rem;
  }

  #Contacto .linksInfo{
    flex-direction: column;
  }

  #Contacto .escribinos{
    padding: 1rem;
  }

  #Contacto .escribinos ul li{
    margin-right: 0.5rem;
  }

  #Contacto i{
    font-size: 2rem;
  }

  #Contacto .escribinos i{
    margin-right: 10px;
  }
  /* END FOOTER*/  

  .imgAliado{
    width: 100%;
    height: auto;
    margin-top: 1rem;
  }

}

/* --------------------- SMALL----------------------- */
@media only screen and (min-width: 576px){

  #navbar .nav-item i{
    font-size: 1.75rem;
    margin-right: 10px;
  }

/* FOOTER*/
#Contacto {
  height: auto;
}
#Contacto .row{
  margin-top: 2rem;
}
#Contacto .infoAdicional{
  padding: 1rem;
}
#Contacto .linksInfo{
  flex-direction: column;
}
#Contacto .escribinos{
  padding: 1rem;
}
#Contacto .escribinos ul li{
  margin-right: 0.5rem;
}
#Contacto i{
  font-size: 2rem;
}
#Contacto .escribinos i{
  margin-right: 10px;
}
/* END FOOTER*/
.imgAliado{
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
}


/* --------------------- MEDIUM----------------------- */
@media only screen and (min-width: 768px){
  /* ------------FOOTER------------------ */

  #Contacto .infoAdicional ul{
    margin-right: 40px;
  }
  
  #Contacto .linksInfo{
    flex-direction: row;
  }

  .imgAliado{
    width: 40%;
    height: auto;
    margin-top: 1rem;
  }

}


  

/* --------------------- LARGE----------------------- */
@media only screen and (min-width: 900px){
   
   #navbar {
   background-color: rgb(255, 255, 255, 0);
    height: 65px;   

  }

   #navbar:hover {
    background-color: rgb(255, 255, 255, 1);
    transition: 0.5s;
  }
 

  #navbar .nav-item i{
    font-size: 20px;
    margin-right: 10px;
  }

  
   #Experimentacion{
    padding-top: 30px;
   }

   #Experimentacion h1{
    margin-bottom: 25px;
   }
  
    /* FOOTER*/
     
    #Contacto .escribinos {
      width: auto;
      float: right;
    }
    /* END FOOTER*/

    .imgAliado{
      width: 20%;   
    }
   
}

/* -----------------The Modal (background) ---------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* The Close Button */
.close {
  position: absolute;
  top: 40px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Add Animation */
.modal-content {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from { transform: scale(0) }
  to { transform: scale(1) }
}
/* -----------------END The Modal (background) ---------------------*/