*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.body{
    color: white;
    /* background-color: indigo;  */
    background-image:url(/imagenes/abstract.jpg)
}
.titulo-principal{
    padding-left: 30px;
    text-shadow: 0 0 .7em rgb(0, 0, 0);
}

.banner{
    width: 70%;
    height: 80%;
    border-radius: .5em;
    box-shadow: 0 0 1em black;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
}

.banner1{
    width: 90%;
    height: 20em;
    border-radius: .5em;
    /* border-style: solid; */
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    box-shadow: 0 0 1em black;
}

.principal{
    width: 90%;
    margin: 2em;
    /* border-style: solid; */
    border-radius: .5em;
    padding: 20px;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    background-color:rgba(139, 0, 139, 0.49);
    box-shadow: 0 0 2em rgb(0, 0, 0);
}

.titulo-centralizado{
    text-align: center;
}

p{
    text-align: center;
}

em strong{
    color:bisque;
}

#mision{
    font-size: 20px;
}

.diferenciales{
    /* border-style: solid; */
    width: 90%;
    padding: 30px;
    border-radius: .5em;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 2em rgb(0, 0, 0);
    
}




.diferenciales .neo{
   /* border-style: solid; */
   border-radius: .5em;
   padding: 2em;
   width: 15em;
   height: 15em;
   margin: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   -webkit-border-radius: .5em;
   -moz-border-radius: .5em;
   -ms-border-radius: .5em;
   -o-border-radius: .5em;
   /* background-color:rgba(139, 0, 139, 0); */
   box-shadow: 0 0 2em rgb(0, 0, 0);
}

.imagenDiferenciales{
  width: 60%;
  border-radius: .5em;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  -ms-border-radius: .5em;
  -o-border-radius: .5em;
  box-shadow: 0 0 1em rgb(0, 0, 0);
  transition:.4s ;
  -webkit-transition:.4s ;
  -moz-transition:.4s ;
  -ms-transition:.4s ;
  -o-transition:.4s ;
}



.imagenDiferenciales:hover{
    opacity: 95%;
    cursor: pointer;
    box-shadow:0 0 3em .5em blue;
}

nav {
    width: 80%;
    height: 15%;
    margin-left: 3%;
    background-color: indigo;
    color: #fff;
    padding: 10px;
    border-radius: .5em;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    box-shadow: 0 0 1.5em rgb(5, 0, 0);
}
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  nav ul li {
    display: block;
    flex-basis: 100%;
    text-align: center;
  }
  
  nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
  }
  
  @media (min-width: 640px) {
    nav ul li {
      flex-basis: auto;
    }
  }


header{
    width: 90%;
    height: 20em;
    display: flex;
    align-content: center;
    justify-content: center;
    margin-bottom: 2em;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

header {
    background-color: rgba(255, 228, 196, 0.689);
    border-radius: .5em;
    padding: 20px 0;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    box-shadow: 0 0 2em rgb(0, 0, 0);
    

}

.logo{
    width: 100%;
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
   
    
}

.logo:hover{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    filter: drop-shadow(.1em .1em .1em rgb(161, 85, 215));
    -webkit-filter: drop-shadow(.1em .1em .1em rgb(149, 73, 203));
   
}

.caja{
    width: 100%;
    margin:auto;
    display:inline-flex;
    align-items: center;
}


li > .a{
    display: flex;
    align-items: center;
    justify-content: center;
}

a{
    width: 65%;
    height: 20%;
    text-shadow: 0 0 .7em white;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    text-align: center;
    /* border-style: solid; */
      
    
}

a:hover{
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
}
li{
    width: 15%;
    height: 100%;
    cursor: pointer;
    margin-left: 3em;
    
}

ul{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

nav{
    margin-right: 1em;
}

.titulo-principal{
    margin: .5em;
}

.titulo-centralizado{
    margin: .5em;
}

.items{
    list-style-type: none;
    /* border-style: solid; */
    border-radius: .5em;
    text-align: center;
    min-width: 12em;
    margin: .5em;
    font-size: .8em;
    padding: .5em;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    background-color: darkblue;
}

.video1{
    border-radius: .5em;
    box-shadow: 0 0 2em rgb(0, 0, 0);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
   
}

.video{
    width: 90%;
    box-shadow: 0 0 2em rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
    border-radius: .5em;
    padding: 1em;
}

.mapa{
    text-align: center;
    width: 90%;
    box-shadow: 0 0 2em rgb(0, 0, 0);
    border-radius: .5em;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    margin: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3em 0;
}

.titulo-principal,
.mapa,
p,
iframe{
    margin: .7em;
}

.items:nth-child(n){
    text-shadow:0 0 .6em white;
}
.items::before{
    content:"💠" ;
}

/* .mapa{
    background: linear-gradient(45deg,#1e0233,#342d50,#895575);
} */

.titulo-principal::first-letter{
    font-size: 1.5em;
}

.titulo-centralizado::first-letter{
    font-size: 1.5em;
}

.a::first-letter{
    font-size: 1.2em;
}

.principal > p{
    font-style:italic;
}

.mapa h3 ~ p{
    font-style:italic;
}

.principal p:not(#mision){
    font-style:normal;
}

@media screen and (max-width:480px) {
    .body{
        background-image: url(./imagenes/abstract.jpg);
       
        
    }

    .imagenDiferenciales{
        width: 100%;
    }

    .banner{
        width: 90%;
    }

    .mapa{
        width: 90%;
    }

}