article{
   display: flex;
   flex-direction: column;
   
   align-content: center;
   align-items: center;
}

.parte{
   border-bottom: 2px solid rgba(66, 66, 66, 0.96);
}

.pagrecomendada{
   margin-bottom: 20px;
   
   display: flex;
   flex-direction: column;
   align-items: center;
}

.pagrecomendada img{
   width: 200px;
   border: 2px solid black;
   padding: 10px;
   
   filter:grayscale(100%);
   transition: 1.5s;
}

.pagrecomendada img:hover{
   filter: none;
   transition: 0.5s;
}

aside{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 10px;
}

.popular{
   max-width: 700px;
}

.popular .borde{
   border: 8px solid #000;
   padding: 1%
}

.gal{
   padding: 3%
}

/*Perfil*/

.profile-main {
    background: #fff;
    width: 100%;
    margin: 0em auto;
    padding: 0em 0em;
    border-radius: 4px;
	 -webkit-box-shadow: 0 52px 64px rgba(0,0,0,0.5);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.profile-pic {
    padding: 2.5em 2em 2em;
    text-align: center;
}
.profile-pic img {
    border: 4px solid #777;
    border-radius: 50%;
    display: inline-block;
    width: 39%;
   
   
   object-fit: cover;
}
.profile-pic h2 {
    font-size: 1.4em;
    color: #0952b9;
    margin-bottom: 0.5em;
    font-weight: 600;
	letter-spacing: 1px;
}

 .profile-pic p {
    font-size: 0.9em;
    color: #4E4E4E;
    margin-top: 1em;
    letter-spacing: 7px;
}
.profile-ser {
    padding: 1em 1em 2em;
}
.profile-ser-grids {
    float: left;
    width: 33%;
    text-align: center;
    border-right: 1px solid #000;
}
.profile-ser-grids.no-border {
    border: none;
}
.profile-ser-grids h3 {
    color: #000;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 6px;
	font-weight: 700;
}

.profile-ser-grids a {
    text-decoration: none;
}

.profile-ser-grids h4 {
    font-size: 16px;
    color: #0952b9;
    font-weight: 400;
    letter-spacing: 1px;
}

.follow-btn a {
    font-size: 1em;
    color: #fff;
    background:#11B771;
    padding: 0.5em 2.5em;
    display: inline-block;
    margin-top: 2em;
    border-radius: 3px 3px;
}
.follow-btn a:hover {
	background:#3B3A3A;
}
.w3l_social_icons {
    margin-top: 1em;
    text-align: center;
}
.w3l_social_icons li a i {
    color: #000!important;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    margin: 13px 0px 0 0;
    text-align: center;
    font-size: 19px;
}
.w3l_social_icons li {
    display: inline-block;
    list-style: none;
    width: 45px;
    height: 45px;
    margin: 6px 9px;
}
.two li{
	margin: 6px 10px;
}
.w3l_social_icons li {
    background: transparent;
    border: 2px solid #f1ecec;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    border-radius: 50%;
	 -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
}
.w3l_social_icons li:hover a i {
    color: #777!important;
}
.w3l_social_icons li:nth-child(3):hover {
	border: 2px solid #dd4b39;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l_social_icons li:nth-child(2):hover {
	border: 2px solid #1da1f2;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l_social_icons li:nth-child(1):hover {
	border: 2px solid #3b5998;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l_social_icons li:nth-child(4):hover {
	border: 2px solid #e68523;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l_social_icons li:nth-child(5):hover {
	border: 2px solid #1ab7ea;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l_social_icons li:nth-child(6):hover {
	border: 2px solid #3b5998;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
/*//perfil*/

/*Contacto*/
.contacto{
   width: 60%;
}

.espacio{
   margin-top: 4%;
   margin-bottom: 4%;
   padding: 25px 25px;
   color: #fff;
   background: url(../img/cfondo.jpeg);
   background-size: cover;
   border-radius: 18px;
   
   
   
   max-width: 1000px;
}

.espacio h2{
    font-size: 26px;
    padding-bottom: 8px;
   text-align: center;
}

.espacio p{
   text-align: center;
   padding-top: 9px;
   letter-spacing: 1px;
}

.form{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    text-align: center;
}

input{
   background: rgba(33, 33, 33, 0.65);
   width: 100%;
   margin-bottom: 2%;
   border-radius: 8px;
}

textarea{
   background: rgba(33, 33, 33, 0.65);
   width: 80%;
   height: 80px;
}

.form input[type="submit"]{
       background: #8c2a8d;
       color: #fff;
       text-transform: capitalize;
       border: 2px solid #8c2a8d;
       width: 100%;
       box-sizing: border-box;
       border-radius: 24px;
       outline: none;
       cursor: pointer;
       padding: 10px 0;
       letter-spacing: 1px;
       margin-top: 15px;
       transition: 0.5s all;
       font-family: 'Montserrat', sans-serif;
}

.form input[type="submit"]:hover{
   background: 0;
}


/*//Contacto*/

/*Footer*/
footer{
   display: flex;
   flex-direction: column;
   align-content: center;
   align-items: center;
   
}

footer p{
   color:#fff;
   text-align: center;
   margin-top: 2%;
}

.creativec{
   text-align: center;
}
/*//Footer*/

@media(max-width: 740px){
   
   .pagrecomendada img{
      width: 150px;
   }
   
   aside{
      padding: 0px;
   }
   
   
}

@media(min-width: 481px) and (max-width:620px){
   
   .pagrecomendada img{
      width: 100px;
   }
   
   aside h3{
      font-size: 1.2em;
   }
}

@media(min-width: 1024px){
   .parte p{
      max-width: 1000px;
   }
}
