@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
body{font-family: 'Play', sans-serif;}
*{margin: 0; padding: 0;}
#main{width: 100%; height: 100vh; position: relative; }
.menu{list-style: none; padding: 0;width: 100%; height: auto;  position: relative;  box-shadow: 2px 2px 5px #999;background-color:#cececd;  display: inline-block; }

.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: #00206b; top: 150%}
.derechosdeci{  height: 100%; width: auto; float: left;}
.creadopor{ height: 100%; width: auto; float: right;}



.datos{height:100%; width: 100%; display: flex; flex-direction: row;  flex-wrap: nowrap; }
.datos:first-child{flex: 2;  }

.mapa{width: 50%; height: 100%; float: left; }
.texto{width: 50%; height: 100%; float: right; }

.texto li{  margin-left: 5%;  height: 100px; text-align: right; font-size: 20px;}

.texto ul{list-style-type: none;  margin-top: 10%; margin-right: 4%;}


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); }
.banderita h2{font-size:80%;}
.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%; }


.banderita{width: 25%; height: 30%; float: right; left: 5px; top: 60vh; margin-left: 0;}


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



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

.datos{flex-direction: column;}


.mapa{width: 100%;  }
.texto{width: 100%; }
.texto li{font-size: 14px;}


}










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

	.derechos p{font-size: 12px}
	







}