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


.menu{list-style: none; padding: 0;width: 100%; height: auto;  position: relative;  box-shadow: 2px 2px 5px #999;background-color:rgba(248, 248, 248, .8); display: inline-block; }

.menu li a{text-decoration: none; color: black; padding: 25px; display: block; font-size: 30px;}
.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;}

#main{width: 100%; height: 100vh; position: static;}


.banderita{width: 15%; height: 40%; left: 95%; position: absolute; margin-left: -15%; top: 110px; background:url(../img/banderita.svg) no-repeat center center; background-size: cover; z-index: 1;}
.banderita h2{color: white; top: 20%; position: absolute; margin: 10px; flex-wrap: wrap;}


.slider{width: 100%; height: 90%; background-color: blue; overflow: hidden;  padding: 0; margin: 0; position: absolute;}
.slider ul{padding: 0%; display: flex; width: 400%; animation: cambio 20s infinite; animation-direction: alternate; animation-timing-function: ease-in-out;}
.slider li{list-style: none; width: 100%}
@keyframes cambio {0%{margin-left: 0;} 20%{margin-left: 0;}    25%{margin-left: -100%;}45%{margin-left: -100%}  50%{margin-left: -200%} 70%{margin-left: -200%} 75%{margin-left:-300%} 100%{margin-left: -300%}}

.derechos p{color: white}
.derechos{width: 100%; height: 3vh; background-color: #00206b; position: absolute;}
.derechosdeci{  height: 100%; width: auto; float: left;}
.creadopor{ height: 100%; width: auto; float: right;}

.creadopor a: hover{text-decoration: none; }

.fondo{display: none;}
.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%; }

.slider{display: none; }

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

.derechos{ height: auto; position: absolute; margin-top: 4vh; }

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

.fondo{width: 100%; height: 95vh; background:url(../img/portada3.JPG) no-repeat center center fixed; background-size: cover; display: inline-block; }

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


}

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

.banderita h2{font-size:50%;}

.logotipo{ height: 70%; }

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


.banderita{width: 30%; height: 20%; top: 76vh; }




}