body{font-family: Arial, Helvetica, sans-serif;

}




header{
margin: none;
padding: none;
}
h1 p {color: black;
    font-size: 2rem;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 0px;}
    
   

.fondo
    { background-color: aliceblue;

    
}



.centro

{text-align:center;
   
}

a

{text-decoration: none;
    color: rgb(70 130 141);
}

.columna-0{background: #308A8B; width: 100%;}
.user{
    width: 96%;
    margin:0 auto;
margin-right: auto}


.app {
    width: 50%;
    margin:0 auto;}

.pop {
    width: 50%;
    margin:0 auto;
margin-right: auto;}






@media (max-width: 700px){
.nodisplay
    
    

    
    {
display: none}}




@media (max-width: 700px){
.mobile
    
    

    
    {
width:50%;
}}




@media (max-width: 700px){
.mobilecolumna
    
    

    
    {
width:200px;
        margin-right: 25px;
       
}}



@media (max-width: 700px){
.mobilecolumna1
    
    

    
    {
width:250px;
       
}}





@media (max-width: 700px){
.mobilecolumna2
    
    

    
    {
width:260px;
        margin-right: 50px;
        margin-left: -80px;
       
}}






@media (max-width: 700px){
.textomobile
    
    

    
    {
font-size: 1rem;
    width:100%;}}



@media (max-width: 700px){
.parrafomobile
    
    

    
    {
font-size: 0.8rem;
    }}





.columna-5{background: lightslategray; width: 100%;}

.columna-1{width: 15%;}

.columna-2{width: 25%;}
.columna-3{width: 25%;}

.columna-4{ width: 50%; background-color: aliceblue; justify-content: center}

.columna-6{ width: 40%;align-items: center; background-color:cadetblue}

.columna-9{ width: 35%; 
    
}

.columna-10{ width: 35%; 
   
}


.columna-7{ width: 40%;align-items: center;padding: 2rem;background-color: #308A8B;}
.columna-7b{ width: 50%;}

.columna-7c{ width: 40%;}


.columna-8{ width: 100%;align-items: center;padding: 2rem;background-color: #308A8B;}

.columna-11{ width: 50%; margin-right: 20%;}
.columna-12{ width: 50%; margin-right: 30%;}



.inicio{
    background-color: #22BABB;
}



.descripcion{
    font-size: 1.5rem;
}




@media (max-width: 700px){
.titulobanda
    
    

    
    {
font-size: 1rem}}



.banda   
   

{
width: 30%;

}




@media (max-width: 700px){
.banda
    
    

    
   
width: 50%}}






.letras{
    color: white;
    font-size: 1rem;
    text-align: center;
}



@media (max-width: 700px){
.letras
    
    

    
    {
font-size:0.9rem;
}}


.user{
    width:100%;
}





.inicio {display:flex; justify-content:flex-start;}

.inicio2 {display:flex; justify-content:space-around;}

.tabla{
    display:flex; justify-content:center;

}



.inicio3 {display:flex; justify-content:center;}
.inicio4 {display:flex; justify-content:space-around;background-color:aliceblue;}

.inicio5 {display:flex; justify-content:center;background-color: dimgray;
}

.inicio6 {display:flex; justify-content:center;background-color: white;
}



    

a:hover {
   color: slategray;
}

.celeste

{color: darkslategray;
    
    
    
}

@media (max-width: 700px){
.celeste
    
    

    
    {
           font-size: 1.3em;




}}






.integrantes {border-radius: 8rem;
    width: 10.5rem;
    opacity: 0.6;
    width: 70%;
}

.integrantes:hover {
   border-color: seagreen;
       opacity: 1.5;

}

.nombres

{
    width: 100%;
    font-size: 1.5rem;
    color: white;
    text-align: center;
}


@media (max-width: 700px){
.nombres
    
    

    
    {
font-size:12px;
}}



h1{
    background-color:#22BABB ;
}

h2{

font-size: 3rem;
    color:white;
}

.titulofinal{



font-size: 2rem;
    color:cadetblue;
    font-weight: lighter;
}


@media (max-width: 700px){
.titulofinal
    
    

    
    {
font-size:1rem;
}}



.titulos{




    color:orangered;
}



.negro{
color: black;
}

@media (max-width: 700px){
h2
    
    

    
    {
font-size:2rem;
}}
 
h3{
    font-size: 2rem;
    color: white;
    font-family: sans-serif;
}


footer p {color:black; font-size: 0.7rem;}
footer{
    width: 100%;
    margin-top: 5em;
    text-align: center;
    color: #f1f1f1;
   
}
.piedepagina{
	font-size: 0.8em;
    width: 100%;
        color:white;
    text-align: center;
}

@media (max-width: 700px){
.piedepagina
    
    

    
    {
font-size:0.6em;
        text-align: left;
}}



.menu{
    display: none;
}
.docentes{
    text-align: center;
	font-size: 0.9em;
    color:white;
    width:100%;
        justify-content: center;



}

@media (max-width: 700px){
.docentes
    
    

    
    {
font-size:0.8em;
        margin-right: 2rem;
        text-align: left;

}}


.menu{
    font-size: 1rem;
    padding: 2px;
    margin: 1px;
    display: flex;
    justify-content: center;

}




.box3{
    display: flex;
    justify-content: space-evenly;
    text-align: start;
    
}
.columna-1{
    text-align: start;


}
.ocampo{
    font-size: 2rem;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
}
.logo{
   border-radius: 50%;
}

.logouba{
   width: 70%;
}




.box2{
    background: white;
 
}



ul,ol{list-style: none;}
a{
  padding:10px 15px;

  color: white;
  text-decoration: none;
  display: inline;
  font-size: 1.5em;
  
}

.nav li a{

 background-color: #9EF8EE;
 color: rgb(0, 0, 0);
 text-decoration: none;
 display: block;
 position: relative;
 border-radius: 1rem;
    text-align: center;
    margin-right: 6%;



}


nav{
    display: flex;
    justify-content: space-around;
    align-items:center;
    font-size: 1rem;
}


@media (max-width: 700px){
.nav
    

    
    {
font-size:0.4rem;
}}

.nav>li{float: left;}
.nav li a:hover{
    background-color:orange;
}
.nav li ul{
    display: none;
    position: absolute;
    min-width: 140px;
}
.nav li:hover > ul{
    display: block;}


.sub-content {
   display: none;
   left: 0;
   background-color: black;
   width: 100%;
   z-index: 1;
}
.sub-content a {
   float: left;
   color: white;
   text-decoration: none;
}
.sub-content a:hover {
   background-color: black;
   color: white;
}
.subnav:hover .sub-content {
   display: block;
}


.foja a:hover {
  color: orangered;
}


.izquierda{

  display: flex;
    justify-content: space-evenly;
    text-align: start;

}


@media (max-width: 700px){
.izquierda
    
    

    
    {
          width: 100%;
        height:100%;



}}





@media (max-width: 700px){
.benchmark
    
    

    
    {
          width: 100%;
        height:20%;



}}

.boton_personalizado {
    text-decoration: none;
    padding: 3%;
    font-size: 1.2em;
 background-color: steelblue;
    border-radius: 1em;
    border: 2px steelblue;
    color: white;
    margin-right: 1em;
    }

@media (max-width: 700px){
.boton_personalizado
    
    

    
    {
           font-size: 0.5rem;
            border-radius: 0.3em;





}}

@media (max-width: 700px){.titulosplan
    
    

    
    {
font-size: 1.2em;



}}


.textolanding

 {
           color:#e8413c;
     font-size:2em;
            



}

.titulobanda

{

    
    color:black;

    
    {













    
.contenedor{
position:relative;
margin:auto;
width:100%;
height:auto;
}
.fila{
position:relative;
margin:auto;
width:100%;
height:auto;
}
.col-12{
width:100%;
;
}
.col-6{
  width:49%;
;
  float: left;
  padding:1px;
 
}