*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family:sans-serif

}

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0 4px 25px -22px black;
  z-index: 2;
}

.header-content{
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;

}

.logo{
 height: 70px;
 display: flex;
 justify-content: center;
 align-items: center;
 
}

.logo img{
height: 70px;
width: 250px;




}





.menu{
 height: 70px;
}

.menu nav{
 height: 100%;
}

.menu ul{
  height: 100%;
  display: flex;
  list-style: none;
}

.menu nav ul li{
 height: 100%;
 margin: 0px 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;

}

.menu-select:before{
 content:'' ;
 width: 100%;
 height: 4px;
 background-color: #40FF00;
 position: absolute;
 top: 0;
 left: 0;



}

.menu nav ul li a{
 color: grey;
 transition: color 300ms;

}

.menu nav ul li a:hover{
  color: #40FF00;
}

.menu .text-menu-selected{
  color: #40FF00;



}

.menu nav ul li a i{

display: none;


}


#icon-menu{

width: 50px;
height: 50px;
padding: 10px;
position: absolute;
right: 20px;
top: 16px;
font-size: 20px;
background: #f1f1f1fa;
border-radius: 100%;
color: #7c7c7c;
display: none;
justify-content: center;
align-items: center;
cursor: pointer;







}


#icon-menu:hover{

background-color: #f3f1f1;
opacity: 0.8;



}

/*portada*/

.container-cover{
  width: 100%;
  height: 500px;
  position: relative;
  margin-top: 70px;
  background-image: url(../img/Portada.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;


}
.container-cover:before{
 content: '';
 width: 100%;
 height: 100%;
 background-color:rgba(0, 0, 0, 0.815);
 position: absolute;
 top: 0;
 left: 0;

}

.container-info-cover{
 max-width: 800px;
height: 500px;
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;


}

.container-info-cover h1{

font-size: 60px;
font-weight: 500;
color: #fff;
margin-bottom: 20px;


}

.container-info-cover p{
font-size: 20px;
color: #fff;
font-weight: 300;


}

/*contenido del articulo*/

.container-content{
  width: 1200px;
  margin: auto;
  margin-top: 40px;
  display: flex;
  justify-content: center;

  
}

.container-content h1{

justify-content: center;
text-align: center;



}



article{
   width: 100%;
   padding: 20px;
   padding-bottom: 40px;
   box-shadow: -10px 0 20px -30px black;
   position: relative;
   border-radius: 6px;
   overflow:hidden
   
}


article:before{
content: '';
width: 100%;
height: 6px;
position: absolute;
top: 0 ;
left: 0;
background-color: #40FF00;


}

article h1{
 margin-top: 20px;
 font-weight: 500;
 font-size: 40px;
 font-family: sans-serif;




}

article p{
margin-top: 20px;
font-size: 18px;
color: rgb(43, 42, 42);
border-radius: 6px;
background: #fffdfd;



}

article img{
  
  border-radius: 6px;
  width: 100%;
  margin-top: 20px;
}
.fb-page{
  margin-left: 150px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
 
  
  }
/*aside de los articulos r*/

.container-aside aside{
  margin-bottom: 40px;
  margin-top: 20px;
margin-left: 40px;
 width: 320px;
 border-radius: 6px;
 border-right: 6px;
 box-shadow: 0 0 20px -20px black;
 overflow:hidden
 



}

.container-aside aside img{

width: 100%;



}

.container-aside aside h2,
.container-aside aside p{

 margin-top: 20px;
 padding: 0px 20px;


}

.container-aside aside button{

margin-top: 20px;
margin-left: 20px;
padding: 10px 50px;
font-size: 16px;
background-color: #40FF00;
border: none;
color: #fff;
cursor: pointer;
border-radius: 6px;




}
  
.container-aside aside button:hover{

opacity: 0.9;



}

/*footer-pie de pagina*/

.container-footer{

width: 100%;
padding: 40px 0;
background: #f7f7f7;
margin-top: 40px;



}

.container-footer footer{

max-width: 1200px;
margin: auto;




}

.container-footer footer .logo-footer{

 text-align: center;
 



}


.container-footer footer .logo-footer img{

width: 100px;
border-radius: 100%;


}

.container-footer footer .redes-footer{

display: flex;
justify-content: center;
margin-top: 20px;


}

.container-footer footer .redes-footer .icon-redes-footer{

 font-size: 20px;
 margin: 20px;
 background: #efefef;
 width: 50px;
 height: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 100%;
 color: #a2a2a2;


}


.container-footer footer .redes-footer .fa-facebook:hover{

background: #41579A;
transition: 600ms;
color: #fff;



}

.container-footer footer .redes-footer .fa-google:hover{

background: #de4c34;
transition: 600ms;
color: #fff;



}

.container-footer footer .redes-footer .fa-instagram:hover{

background: linear-gradient(to top right,#fcde30, #e9712a,#d2313b,#ae4198, #7540a1,#5443a8);
color:#fff;
transition: 600ms;

}


.container-footer footer hr{

margin-top: 20px;
border:none;
height: 2px;
background: #dbdbdb;


}

.container-footer h4{

  text-align: center;
  margin-top: 40px;
  color: #b9b7b7;




}

/*responsive design*/

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

  .header-content,.container-content,.container-footer footer{

    max-width: 1000px;
    padding: 0 20px;
    transition: 300ms;


  }
  
}


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

  .container-content{
   width: 100%;
   flex-direction: column;
   transition: 300ms;

  }

 article{

  box-shadow: 0 0 0 0;

 }

 .container-aside{

 display: flex;
 justify-content: center;




 }


 .container-aside aside{


  max-width: 300px;
  margin: 10px;


 }
}


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

 body{

 overflow-x: hidden;

 }

  .container-all{

    transition: all 300ms cubic-bezier(1,0,0,1);
  }
  
  
  .move-container-all{

   transform: translateX(300px);




  }
  .menu{
   width: 300px;
   height: 100vh;
   position:fixed;
   top:68px;
   left: 0 ;
   background: #fff;
   overflow: hidden;
   box-shadow: 10px 0 20px -25px black; 
   transform: translateX(-350px);




  }

.show-lateral{

  width: 300px;
  transform:translateX(0px);
  transition: all 300ms cubic-bezier(1,0,0,1);



  }
   
  .menu nav ul{

  flex-direction: column;



  }

  .menu nav ul li{

  max-width: 200px;
  height: 50px;
  justify-content: flex-start;


  }

  .menu-select:before{

   width: 0;




  }

 .menu nav ul li a{

   margin-top: 40px;
   color: #858585;
 }
 .menu nav ul li a i{

  width: 20px;
  display: inline-block;
  margin-right: 10px;
  color: #40FF00;


  

 }


 #icon-menu{

 display: flex;



 }

 .container-aside{

  flex-wrap: wrap;

  




 }



 .fb-page{

 margin-left: 90px;
 width: 500px;



 }
}

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

.fb-page{

margin-left: 60px;

}




}

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

.fb-page{

margin-left: 50px;


}




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

  .fb-page{

 margin-left: 5px;
 width: 300px;


  }





}