@font-face {
  font-family: "OpenSans";
  src: url(OpenSans.ttf); 
}
*{
  font-family: "OpenSans", sans-serif;
}
body{
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}
.header {
  background-color: #444;
  display: flex;
  position: fixed;
  top: 0;
  width: 100%;
  height: 75px;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.btn-menu{
  position: absolute;
  right: 0;
  margin-right: 30px;
}
.btn-menu label{
  color: #ffffff;
  font-size: 25px;
  cursor: pointer;
}
#btn-menu{
  display: none;
}
.directorio-menu {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;right: 0;
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
#btn-menu:checked ~ .directorio-menu{
  opacity: 1;
  visibility: visible;
}
.dire-menu {
  width: 100%;
  max-width: 400px;
  background: #222;
  height: 100vh;
  position: fixed; 
  top: 75px;
  right: 0;
  transition: all 500ms ease;
}
#btn-menu:checked ~ .container-menu .dire-menu{
  transform: translateX(0%);
}
.dire-menu nav{
  transform: translateY(15%);
}
.dire-menu a{
  display: block;
  text-decoration: none;
  padding: 20px;
  color: white;
  border-left: 5px solid transparent;
  transition: all 400ms ease;
  font-weight: 500;
}
.dire-menu label{
  position: absolute;
  right: 5px;
  top: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
}
#redes{
  position: relative;
  display: flex;
  flex-direction: row;
}
#redes a{
  text-decoration: none;
}
.grupored{
  margin: 12px;
}
.grupored:hover{
  cursor: pointer;
}
.grupored img{
    height: 75px;
    width: 75px;
}
.grupored h3{
  color: white;
}
  
footer{
  text-align: center;
}
#documentos{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
}
.docs{
  display: flex;
  flex-direction: row;
}
.docs a{
  margin-right: 20px;
  text-decoration: none;
  color: black;
}
.seccionpoliticas{
  background-color: white;
}
.politicadeprivacidad h1{
  color: #222;
  text-align: center;
}
.politicadeprivacidad p{
  color: #222;
  text-align: start;
  padding: 20px;
  margin-top: 50px;
  }

#politics{
  text-decoration: none;
  color: gray;
}

@media (max-width: 600px){

.navweb{
  display: none;
}
ul.linkcontacto{
  width: 300px;
}
.contacto{
  margin-bottom: 30px;
  margin-top: 12px;
  }
#redes {
  overflow-x: scroll;
}
.grupored{
  position: relative;
  height: 120px;
  width: 80px;
  display: flex;
  flex-direction: column;
}
.docs{
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: start;
}
}