/*  home.css   para mi pagina Principal*/ 
/* este es universal  para toda la aplicación */  

*{
       margin: 0; 
}
/* de tipo que es a al nombre de la etiqueta en particular
 h1{
	color:black;
 }  
  
  clases   Esta es la mas recomendadad. 
.nombre{  apributo } 
 
 
   id no es recomendado por la especificidad  */

/* ------------------   Pseudo clases en los Parrafos    --------    
.Parrafos p:first-child{
	color: yellow;
}

.Parrafos p:last-child{
	color: blue; 
  } 
 
.Parrafos p:nth-child(2n){
	color: red;
} 
.Parrafos  p:first-letter{
	color: blue;
	font-size: 20px;
}
*/
/* first example of box in the css*/

/*  my header */
.Myheader{
   width: 100%;
   height: 100px;
   padding: 0px 0px 0px 0px;
   background-color: #ffb6b6; 
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-around;   
} 
 
.myheader__title{ 
  /* background: linear-gradient(#21C08B, #AB88FF); */ 
  font-family: Arial;
  color: #679b9b;  
} 
.Myheader img{
	width: 6em;
	height: 6em;
	margin-left: 20px; 
  /* object-fit: cover;  */ 
} 
.myheader__text{
  background-color: rgba(255, 255, 255, 0.3); 
  padding: 10px 10px 10px 10px;
  border: 2px solid white;;
  border-radius: 15px;
  border-color: #679b9b; 
}
.myNav{ 
  padding-top: 5px;
  background-color: #ffb6b6;   
  /* 
   position: relative;
  align-items: center; 
  display: grid;
  
  grid-template-columns: repeat(8,12.5%);*/

}
.myNav .row{
  padding: 0px 40px 0px 40px; 
}

.boxOne{ 
    background-color: #ffb6b6;  
    border: 1px solid  #679b9b ; 
    border-radius: 10px; 
    /* box-sizing: border-box; */
    text-align: center;
    padding: 5px; 
    /*margin: 1px 1px 1px 1px;
    margin:  es para los elementos al rededor  se configura en cero de forma universal*/
     -webkit-transition: background-color 2s ease-out;
     -moz-transition: background-color 2s ease-out;
     -o-transition: background-color 2s ease-out;
     transition: background-color 2s ease-out; 
} 
.boxOne:hover{
  background-color: #679b9b;
  cursor:pointer;
}
.boxTwo{ 
    background-color: #fdef96;
   /* border: 2px solid blue;  */
   /* box-sizing: border-box; */
   /* padding: 20px; */
  width: 25px;
  height: 25px; 
  /*margin:  es para los elementos al rededor  se configura en cero de forma universal*/
     -webkit-transition: background-color 1s ease-out;
     -moz-transition: background-color 1s ease-out;
     -o-transition: background-color 1s ease-out;
     transition: background-color 1s ease-out;
} 
.boxTwo:hover{
   background-color: green;
   cursor: pointer;
}

.myNav img{
  background-color: #ffb6b6;
  width: 40px;
  height: 40px; 
}
.myNav p{
  color: #2c003e; 
  font-size: 12px;
  text-align: right;
}

.myNav a{
  text-decoration: none;
  color: #222831;
}


/* ---------------  for the carousel    
.carousel{
	width: 100%;
	/* overflow: scroll;  
	padding: 0px 0px 0px 0px;
	position: relative; 
}

.carousel__conteiner{
	white-space: nowrap;
	margin: 70px 0px 0px 50px;
	padding-bottom: 40px; /* permite que cuando se agrande la imagen no se corte  

} 
.carousel-item{
  background-color: red;
  width: 200px;
  height: 250px;
  border-radius: 20px; 
  overflow: hidden;
  margin-right: 10px;
  display: inline-block;
  cursor: pointer;
  transition:  450ms all;
  transform-origin: center left;
  position: relative;
}

.carousel-item:hover  ~  .carousel-item{
  transform: translate3d(100px, 0, 0); 
 } 
.carousel__conteiner:hover .carousel-item{
  opacity: 0.3;
  }

.carousel__conteiner:hover .carousel-item:hover{
  transform: scale(1.5);
  opacity: 1;
  }

  .carousel-item__img{
    width: 100%;
    height: 100%;   
    /* object-fit: cover;      

  }

.carousel-item__details img{
  width: 40px;
  height: 40px;
 } 
  .carousel-item__details{
    background: linear-gradient(to top, rgba(0,0,0,0,9) 0%,rgba(0,0,0,0) 100%);
    font-size: 10px;
    opacity: 1;
    transition: 450ms opacity;
    padding: 10px;
    position: absolute; 
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    /* display: flex;
    justify-content: flex-end;
  }

 */  
 .carousel{
  align: center; 
  padding: 0px 10px 0px 10px;
	position: relative;
 }
.carousel-item{
  background-color: rgb(196, 113, 113);
  align-items: center;
  width: 100%;
  height: 290px;
  border-radius: 20px; 
}
 
.myfooter{
  width: 100%;
  /* height: 100px;*/
  padding: 40px 0px 0px 0px;
  background-color: #ffb6b6; 
  position: relative;
  display: flex;
  /* align-items: center;*/
  justify-content: space-around;   
} 

.iconoH{
  font-size: 2em; 
  color: rgb(162, 162, 207);
}

.iconoUbica{
  font-size: 2em;
  color: rgb(238, 132, 34); 
}

.iconoShowEstu{
  font-size: 3em;
  color: rgb(238, 132, 34); 
}
.imageShowEstu{
  width: 100%;
  height:80%;
}

.iconoIE{ 
  font-size: 1.5em;
  color: rgb(151, 65, 65); 
}

.iconoHome{
  font-size: 4em;
  color: blue;
}

.iconoHomeCovi{
  font-size: 4em;
  color: red;
}
.iconoMatri{ 
  font-size: 4em; 
  color: blue;
}

.imageQS{
  width: 300px;
  height:300px; 
  border-radius: 30px; 
  padding: 0px 20px 0px 0px;
  /*	margin-left: 20px; 
   object-fit: cover;  */ 
} 

.imageCarrusel{
  width: 230px;
  height:230px; 
  border-radius: 20px; 
  /*	margin-left: 20px; 
   object-fit: cover;  */ 
}