IMG.imgcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

body {
    background-color: #F6F7F7;
    color: #003399;
    }

    H1 {
        font-family: 'Trebuchet MS';
        text-align: left;
    }
    
H2 {
    font-family: 'Comic Sans MS';
    text-align: left
}

H3 {
    font-family: 'Century Gothic';
    text-align: left;
    font-style: oblique;
}

p {
    font-family: 'Trebuchet MS';
    text-align: justify;
    font-size: medium;
    margin: 20px;
    }

div.ex {
width:220px;
padding:10px;
border:5px solid gray;
margin:auto;
background-color:#FFC0CB;
color:#9400D3;
font-size:15px;
}

div.navega {
width:100%;
float:left;
clear: both;
height: 40px;
background-color: black;
}

div.principal {
    font-size: large;
    font-family: 'Comic Sans Ms';
    font-weight: bolder;
    color: azure;
    text-align: center;
    margin: auto;

} 
div.carrusel{
    float: left;
    width: 100%;
    height: 700px;
    background-color: rgb(8, 8, 8);
    border: 1px solid rgb(0, 0, 0);
    padding: 1px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    clear: both;
} 

div.pres {
    float: center;
    display: inside;
    flex-direction: column;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border: none;
    padding: 10px;
    border-spacing: 2px;
    margin-top: 20px;
    clear: both;
  }

div.fila {
  float: center;
  display: inside;
  flex-direction: column;
  width: 94%;
  height: 320px;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(36, 75, 107);
  padding: 10px;
  border-spacing: 2px;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 20%;
  padding-left: 4%;
  margin-right: 2%;
  clear: both;
  margin-left: 15px;
  
}

div.caja {
    float: left;
    width: 14%;
    height: 275px;
    flex-direction: column;
    justify-content: safe;
    background-color: rgb(186, 223, 245);
    border: 1px solid rgb(127, 3, 165);
    padding: 11px;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 5px;
    margin-left: 1%;
    margin-right: 1%;
}
div.cajilla {
    float: left;
    width: 30%;
    height: 275px;
    flex-direction: column;
    justify-content: safe;
    background-color: rgb(186, 223, 245);
    border: 1px solid rgb(127, 3, 165);
    padding: 11px;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 5px;
    margin-left: 1%;
    margin-right: 1%;
}

div.filita {
    float: center;
    display: inside;
    flex-direction: column;
    width: 94%;
    height: 580px;
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(36, 75, 107);
    padding: 10px;
    border-spacing: 2px;
    justify-content: space-between;
    margin-top: 20px;
    margin-left: 3%;
    padding-left: 4%;
    margin-right: 3%;
    clear: both;
        
  }

div.cajota {
    float: left;
    width: 95%;
    height: 500px;
    flex-direction: column;
    justify-content: safe;
    background-color: rgb(130, 3, 189);
    border: 2px groove rgb(127, 3, 165);
    padding: 11px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 5px;
    margin-left: 1%;
    margin-right: 1%;
}

#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:50px;
    width:100%;
    background:#999;
    font-family: 'Trebuchet Ms';
    font-size: medium;
    font-weight: bold;
    background-color:#778899 ;
    clear:both;
    text-align:center;
 }

ul.menu {
    clear: both;
    float: left;
    width: 100%;
     background-color: black;
     list-style: none;
     margin: 0;
     padding: 0;
     position: absolute;
     background: #000000;
     height: 27px;
     border: none;
  }


  ul.menu li {
    float: left;
   width: 14%;
    text-align: center;
 }

 
ul.menu li a {
  padding: .3em;
  margin-top: 3px;
  display: block;
  text-decoration: none;
  color: rgb(189, 133, 241);
  background: rgb(0, 0, 0);
  font-size: large;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

img.imag1 {
    display:inside;
    margin: 5px;
    justify-content: center;
    background-color: rgb(114, 168, 231);
    border: none;
  }
span.texto1 {
  font-family: 'Trebuchet Ms';
  font-style: normal;
  font-weight: bolder;
  font-size: medium;
  color: darkblue;
  text-align: center;
  }
span.texto2 {
font-family: 'Comic Sans';
font-style: normal;
font-weight: bold;
font-size: small;
color: rgb(146, 4, 212);
text-align: center;
}
span.texto3 {
font-family: 'Bradley Hand ITC';
font-style: normal;
font-weight: bolder;
font-size: medium;
color: rgb(0, 0, 0);
text-align: center;
}
span.texto4 {
    font-family: 'Trebuchet Ms';
    font-style: normal;
    font-weight: bolder;
    font-size: larger;
    color: rgb(179, 214, 247);
    text-align: center;
    }

span.texto5 {
    font-family: 'Bradley Hand ITC';
    font-style: normal;
    font-weight: bolder;
    font-size: xx-large;
    color: rgb(0, 0, 0);
    text-align: center;
    }

img.img1 {
max-height: 110px;
max-width: 100%;
}
img.img2 {
    max-height: 400px;
    max-width: 100%;
    }
p.c1{
text-align: center;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

section.banner {
    padding: 0;
    margin-top: 1%;
    margin-left: 2%;
    margin-right: 2%;
    width: 95%;
    height: 800px;
    overflow:hidden;
    float: left;
    clear: both;
}

ul, li {
    
    height:25px;
    padding: 0;
    margin: 0;
    list-style: none inside;
    box-sizing: border-box;
    float:center;

}
ul.slider {
    position:relative; /*Necesitamos que el ul sea relativo*/
    padding: 1px;
    }

ul.slider li {
    width: 94vw;
    height: 380px;
    padding: 0;
    border: 0;
    background-color: gray;
    opacity: 0; 
    transition: opacity .5s;
    padding-top: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: calc( 1.5rem + 1vw );
    text-align: center;
    position: absolute; /*Posicionamos en absoluto los <li>*/
    left: 0px;
    top: 0px;
    border:none;
    background:#fff;
}
ul.slider li:first-child {
    opacity: 1; /*Mostramos el primer <li>*/
}
ul.slider li:target {
    opacity: 1; /*Mostramos el <li> al que apunta el enlace*/
}

nav {
    position: absolute;
    top: 600px;
    right: 34%;
    bottom: 0;
    left: 34%;
    background: #000000;
    height: 14px;
    border: none;
    }

#slide1 {
    background-color: #00324b;
    color: #fff;
}

#slide2 {
    background-color: #65bce8;
    color: #00324b;
}

#slide3 {
    background-color: #f90;
    color: #00324b;
}

#slide4 {
    background-color: #00324b;
    color: #65bce8;
}

#slide5 {
    background-color: #65bce8;
    color: #00324b;
}

nav ul {
    float: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    clear: both;
}

nav ul li {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    box-sizing: 30px;
    
}

nav a {
    font-size: calc( 1.2rem + 1vw );
    text-decoration: none;
    font-weight: bold;
    color:none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: .6;
    flex-grow: 1;
    text-align: center;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    flex-wrap: wrap;
    position: relative;
}

nav li:last-child a {
    border-right: 0;
}

nav a:hover {
     color: #fff;
 }

nav a:active {
    color: #00324b;
}



/*@media only screen and (max-width: 500px) {
    div.caja {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    div.caja {
        width: 100%;
    }
}

@media only screen and (max-width: 1000px) {
    div.caja {
        width: 25%;
    }
}*/