@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto',sans-serif;}

.flex{display:flex;}
.center-center{justify-content:center;align-items:center;}
.center-end{justify-content:flex-end;align-items:center;}

.white a, .white p, .white span, .white div {color:#fff;transition:all 1s ease;}
.black a, .black p, .black span, .black div {color:#000;transition:all 1s ease;}

.navbar{width:100%;height:100px;position:absolute;top:0;left:0;z-index: 2;}
.navbar .logo{width: 50%;height:100%;}
.navbar .logo svg {height:100%; width:auto; overflow:visible;}
#letras{opacity:0;transform:scale(0.8) translateY(10%);}
.navbar .menu{width:50%;height:100%;text-align: right;}
.navbar .menu .link{text-decoration:none;font-size:1.2rem;padding:0px 10px;}
.navbar .menu .link:last-child{padding-right:0px;}

.container{width:100%;display:flex;justify-content:center;align-items:center;}
.content1400{max-width:1400px;}
.footer_container{background-color:#fff;width:100%;position:relative;z-index:2;color:#999;}
.footer_container__social a {text-decoration:none;color:#999;}
:root{--rojo:#f52f3e;}

@media screen and (max-width: 499px) {
    .navbar{padding:25px;}
    .logo{overflow:hidden;}
    .navbar .menu{flex-direction:column;justify-content:flex-start;align-items:flex-end;}
    .navbar .menu .link{padding:3px 0px;}
    .navbar .menu .link:first-child{padding-top:0px;}
    .footer_container{padding:20px;flex-direction:column;}
    .footer_container__copy{margin-bottom: 10px;}
    .footer_container__social{justify-content:center;}
    .footer_container__social a {padding:5px;}
}

@media screen and (min-width: 500px) {
    .footer_container__copy, .footer_container__social{width:50%;}
    .footer_container__social{justify-content:flex-end;}
    .footer_container{padding:0 40px 40px 40px;font-size:1.2rem;}
    .footer_container__social a {padding:8px;}
    .footer_container__social a:last-child{padding-right:0;}
}

@media screen and (max-width: 799px) and (min-width: 500px) {
    .navbar{padding:25px;}
}

@media screen and (min-width: 800px) {
    .navbar{padding:25px 50px;}
}

@media screen and (max-width: 1399px) and (min-width: 1040px) {
    .navbar{height:120px;padding:30px 60px;}
    .navbar .menu .link {font-size: 1.3rem;}
}

@media screen and (min-width: 1400px) {
    .navbar{height:130px;padding:35px 80px;}
    .navbar .menu .link {font-size: 1.5rem;}
}