@charset "utf-8";
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite ancho máximo, por lo que el ancho predeterminado es 100%. */
.ie6 img {
	width:100%;
}
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* Diseño Mobile: 480px y menos. */
footer{
    width: 100%;
    background-color: #222;
    padding: 20px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    border-top: 5px solid rgb(167,204,0); 
}
#contenedor_footer{
    width: 100%;
} 
/*-- Redes sociales --*/
.footer_rs{
    color: rgb(15,15,15);
    margin-bottom: 20px;
}
.footer_rs p{
    padding: 20px;
    font-size: 20px;
    text-align: center;
    color: #fff;
}
.footer_rs ul{
    display: flex;
    text-align: center;
    padding: 0 20px;
}
.footer_rs ul a{
    flex: 1;
    color: #fff;
}
.footer_rs ul li{
    flex: 1;
    font-size: 30px;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}
/*-- Segunda parte --*/
.footer_mp1{
    flex: 1;
    text-align: center;
    padding: 20px;
}
.footer_mp1 ul li{
    font-size: 20px;
    padding: 3px;
}
.footer_mp1 ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}
.footer_mp2{
    flex: 1;
    text-align: center;
    padding: 20px;
}
.footer_mp2 ul li{
    font-size: 20px;
    padding: 3px;
}
.footer_mp2 ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}
.the_last_of_us{
    text-align: center;
   padding-top: 35px;
    font-size: 12px;
}

/* Diseño Tablet: 481px a 768px. Hereda estilos de diseño mobile. */
@media only screen and (min-width: 481px) {
    /*-- Footer --*/
    footer{
        width: 100%;
        padding: 40px 8% 20px 8%;
        font-family: 'Poppins', sans-serif;
    }
    #contenedor_footer{
        width: 100%;
        display: flex;
    } 
    /*-- Redes sociales --*/
    .footer_rs{
        flex: 1;
        color: #fff;
    }
    .footer_rs p{
        padding: 20px;
        font-size: 20px;
        text-align: center;
    }
    .footer_rs ul{
        display: flex;
        text-align: center;
    }
    .footer_rs ul li{
        flex: 1;
        font-size: 20px;
        margin: 5% 10%;
        border: 1px solid rgba(0,0,0,0);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }
    /*#face:hover{
        background-color: #3b5998;
        transition: all 0.3s;
        color: #fff;
    }
    #inst:hover{
        background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
        color: #fff;
        transition: all 0.3s;
    }
    #what:hover{
        background-color: #00bb2d;
        color: #fff;
        transition: all 0.3s;
    }
    #mail:hover{
        background-color: darkorange;
        color: #fff;
        transition: all 0.3s;
    }
    /*-- Segunda parte --*/
    .footer_mp1{
        flex: 1;
        text-align: center;
    }
    .footer_mp1 ul li a{
        text-decoration: none;
        color: #fff;
    }
    .footer_mp2{
        flex: 1;
        text-align: center;
    }
    .footer_mp2 ul li a{
        text-decoration: none;
        color: #fff;
    }
    .the_last_of_us{
        text-align: center;
       padding-top: 35px;
        font-size: 12px;
    }
}


/* Diseño Desktop: 769px a un maximo de 1600px. Hereda estilos de: Diseño mobile y tablet */
@media only screen and (min-width: 900px) {
    /*-- Footer --*/
    footer{
        width: 100%;
        padding: 40px 8% 20px 8%;
        font-family: 'Poppins', sans-serif;
    }
    #contenedor_footer{
        width: 100%;
        display: flex;
    } 
    /*-- Redes sociales --*/
    .footer_rs{
        flex: 1;
        color: rgb(15,15,15);
    }
    .footer_rs p{
        padding: 20px;
        font-size: 20px;
        text-align: center;
    }
    .footer_rs ul{
        display: flex;
        text-align: center;
        padding: 0 30px;
    }
    .footer_rs ul a{
        flex: 1;
        color: #fff;
    }
    .footer_rs ul li{
        font-size: 35px;
        margin: 5% 2%;
        border: 1px solid rgba(0,0,0,0);
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }

    /*-- Segunda parte --*/
    .footer_mp1{
        flex: 1;
        text-align: center;
    }
    .footer_mp1 ul li a{
        text-decoration: none;
        color: #fff;
    }
    .footer_mp2{
        flex: 1;
        text-align: center;
    }
    .footer_mp2 ul li a{
        text-decoration: none;
        color: #fff;
    }
    .the_last_of_us{
        text-align: center;
       padding-top: 35px;
        font-size: 12px;
    }
}