*{
  background: #white;
  }
 
  .navbar-nav-scroll {
    max-height: fit-content!important;
    
}
ul{margin:auto;}
#img{
  width: 300px;
}
.container-fluid{
  background-color: #333333;
}

.h4{
font-family: 'Roboto', sans-serif;
  margin-right: 5%;
}
.h1{
font-family: 'Roboto', sans-serif;
  justify-content: center;
}
.navbar {
  background-color: #333333;
  color: white;
  margin-right: 10%;
}
.container{
  background-color: #D7D1D2;
}
.buttom{
  border-color: white;
  border: 30%;
  margin-right: 50%;
}
.nav-item{
    margin-left: 10%;
    color: white;
}

.nav-link{
    text-align: center;
    margin-right: 8%;
    color: white;
    font-family: 'Roboto', sans-serif;
  }
  #rocioo{
    font-family: 'Nanum Gothic', sans-serif;
    margin-left: 5%;
    color: white;
  }
  #wa{
    margin-left: 0%;
  }
.form-control{
  margin-left: 1.5%;
}
.container-fluid{
  width: 155%;
}
.nav-link{
  color: white;
  margin-right: 90%;
}
.navbar.navbar-light{
  color: white;
  position: static;
}

#inicio{
  color: white;
font-family: 'Roboto', sans-serif;
}
#about{
  color: white;
font-family: 'Roboto', sans-serif;
}
#cir{
  color: white;
font-family: 'Roboto', sans-serif;

}
a{
  color: white;
font-family: 'Roboto', sans-serif;
}
#cir2{
  color: white;
font-family: 'Roboto', sans-serif;
}
#pro{
  color: white;
  font-family: 'Roboto', sans-serif;
}
#pro1{
  color: white;
font-family: 'Roboto', sans-serif;
    justify-content: center;
}
#pro2{
  color: white;
font-family: 'Roboto', sans-serif;
    justify-content: center;
}
#pro3{
  color: white;
font-family: 'Roboto', sans-serif;
    justify-content: center;
}
#con{
  color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-light{
  width: 99.9%;
}
.navbar-toggler{
  margin-right: 10%;
  border-color: white;
}
#box{
  background-color: #333333;
  position: relative;
  margin-top: 3%;
}
#box1{
  background-color: white;
  position: relative;
  margin-top: 3%;
}
#rocioo{
  font-family: 'Nanum Gothic', sans-serif;
  margin-left: 1%;
margin-right: 20%;
  color: white;

}
p{
font-family: 'Roboto', sans-serif;
  font-size: 68%;
 margin-top:1em;
  color: #333333;
  padding-right: 3%;
    padding-left: 3%;
}
#em1,#em2,#em3,#em4{
  width: 300px;
  margin-top:1em;
}

#log{
  margin-left: 42%;
  margin-top: 2%;
  width: 15%;
}

#r1{
  width: 7%;
  height: 7%;
  margin-left: 17%;
  width: 3%;
  margin-top: 3%;
  margin-bottom: 3%;
}
#r2{
  width: 5%;
  height: 5%;
  margin-left: 17%;
  width: 3%;
    margin-top: 3%;
  margin-bottom: 3%;
}
#r3{
  width: 7%;
  height: 7%;
  margin-left: 17%;
  width: 3%;
    margin-top: 3%;
  margin-bottom: 3%;
}
#r4{
  width: 10%;
  height: 10%;
  margin-left: 17%;
  width: 3%;
    margin-top: 3%;
  margin-bottom: 3%;
}


@media screen and (min-width: 700px) {
  .cover{
    background-position: center;
    background-image: url(imagenes/portada.png);
    background-size: cover;
    width: 500%;

  }
  .bg-img {
    /* The image used */
    background-image: url("imagenes/portada.png");
    min-height: 850px;
    /* Needed to position the navbar */
    position: relative;
  }
  #bandera{
    margin-top: 10%;
    margin-bottom: 10%;
  }

  #foto1{
    width: 80%;
    height: 80%;
    margin-top: 8%;
    float: left;
    margin-left: 10%;
  }


  .container-fluid{
    width: 1000%;
    height: 1000%;
  }
  #container{
    margin-top: 5%;
    width: 2000%;
    height: 2000%;
  }

 
  h2{
font-family: 'Roboto', sans-serif;
    font-size: 100%;
    margin-top: 5%;
    color: #333333;
    margin-left: 45%;
    font-size: 150%;
  }
  .container{
    background-color: #white;
  }
  h1{
    color: #333333;
    margin-top: 10%;
  }
  h4{
    color: #333333;
      margin-top: 3%;
  }
inframe{
  width: 100%;
  height: 100%;
}
img{
  width: 20%;
  height: 20%,
}
.box{
  position: relative;
  margin-top: 5%;
  }
  #s1{
    width: 27%;
    margin-left: 20%;
  }

  #s4{
    width:27%;
    margin-left: 10%;

  }


  #box{
    position: relative;
    margin-top: 10%;
    background-color: #333333;
    }
    #s1{
      margin-left: 1%;

    }
    #s2{
      margin-left: 1%;

    }
    #s{
      margin-left: 1%;

    }
    #i{
      margin-left: 1%;

    }


      #r1{
        width: 7%;
        height: 7%;
        margin-left: 17%;
        width: 3%;
        margin-top: 3%;
        margin-bottom: 3%;
      }
      #r2{
        width: 5%;
        height: 5%;
        margin-left: 17%;
        width: 3%;
          margin-top: 3%;
        margin-bottom: 3%;
      }
      #r3{
        width: 7%;
        height: 7%;
        margin-left: 17%;
        width: 3%;
          margin-top: 3%;
        margin-bottom: 3%;
      }
      #r4{
        width: 10%;
        height: 10%;
        margin-left: 17%;
        width: 3%;
          margin-top: 3%;
        margin-bottom: 3%;
      }
      #log{
        margin-left: 37%;
        margin-top: 2%;
        width: 23%;
      }