@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
body{font-family: 'Play', sans-serif;}
*{margin: 0; padding: 0}

#main1{width: 100%; height:90vh; display: flex; flex-wrap: wrap; }

.texto2{height:auto; background-color:rgba(248, 248, 248, .8);  box-sizing: border-box;}
.texto2:first-child{flex: 2; padding: 40px; margin: auto;  margin-bottom: 10%; margin-top: 4%;  }


.texto{ height: auto;   flex: 1; display: flex;  background:url(../img/quienessomos.jpeg) no-repeat center center ; background-size: cover;}

.texto2 p{font-size: 18px;}


.menu{list-style: none; padding: 0;width: 100%; height: auto;  position: relative;  box-shadow: 2px 2px 5px #999;background-color:#cececd;  display: inline-block; z-index: 5; }

.menu li a{text-decoration: none; color: black; padding: 25px; display: block; font-size: 22px;}
.menu li a:hover{background: grey;}
.menu li{display: inline-block; text-align: center;  width: auto; }
.logotipo{height: 70px; width: 15%;   float: right;   box-sizing: border-box;  }
.logotipo img{height: 100%; width: auto;}

.cim{width: 100%; height: auto; background-color: darkred;}
.cim a{text-decoration: none;}
.cim :hover {background-color: indianred;}
.cim h2{color: white;}


.derechos p{color: white}
.derechos{width: 100%; height: 3vh; background-color: #108041; position: relative; z-index: 5; }
.derechosdeci{  height: 100%; width: auto; float: left;}
.creadopor{ height: 100%; width: auto; float: right;}


a:link{text-decoration: none;}
a{color: black}
a:hover {
  color: #1717FF;
  cursor: pointer;
}

.menuresponsive{display: none;}

.tache{display: none;}

@media screen and (max-width: 1325px)
{
.menu { display: none;}
.menu{  top: 9vh; background-color:rgba(248, 248, 248, 1) }
.menu li a{font-size: 15px;}
.menuresponsive{display: inline-block; width: 100%; height: 8vh; background-color:rgba(248, 248, 248, .8); }

.cim h2{font-size: 10px;}
.logotipo{float: left; margin-left: 4px;  height: 80%; margin-top: 5px;}

.menulogo{width:70px; height: 80%; background:url(../img/menulogo.png) no-repeat center center; background-size: cover; float: right; margin-right: 3%; }

.tache{width:70px; height: 80%; background:url(../img/tache.png) no-repeat center center; background-size: cover; float: right; margin-right: 3%; display: none; }

.texto2{flex-direction: column;}

texto{height: auto;}


}

@media screen and (max-width: 1024px)

{




.logotipo{height: 80%; width: 40%;  top: 15%;}


.menulogo{width:70px; height: 80%; background:url(../img/menulogo.png) no-repeat center center; background-size: cover; float: right; margin-right: 3%;  z-index: 500}
.tache{width:70px; height: 80%; background:url(../img/tache.png) no-repeat center center; background-size: cover; float: right; margin-right: 3%; display: none;}

.texto2 h1 {font-size:18px;}
.texto2 p {font-size: 15px;}

}







@media screen and (max-width: 414px)
{

.logotipo{ height: 70%; }

.menulogo{width: 20%; height: 90%;  }




.derechos p{font-size: 10px;}

}