/*  dark blue #0A145D
	light blue #64B5F6
	primary #133685 091A9C
    purple #880E4F
    pink #cc3363
	#212121
	#757575
	backgorund pink #EDBDBD
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import "focus.css";
* {
    font-family: 'Roboto', sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.lock-scroll {
    overflow-y: hidden;
}
body, h1 {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #212121;
}
ul {list-style-type: none;}

body {padding-top: 3em;}

#topbar {
    height: 3em;
    width: 100%;
    background-color: #21473C;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 7;
    box-sizing: border-box;
    box-shadow: inset 0px -4px 4px 0px rgba(0,0,20,0.2);
}

.social-networks {
    height: 24px;
    display: flex;
    justify-content: space-around;
    padding: 0;
}

svg {fill: #fff;}
.argentina {height: 3em;}

.address {
    color: #fff;
    font-weight: 300;
    text-align: center;
}

.social-networks, .address {width: 39%;}
#wsapp-num {position: relative;}

.tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #212121;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text*/
    position: absolute;
    bottom: -3.2em;
    left: 0;
    z-index: 1;
}

#wsapp-num:hover .tooltiptext {visibility: visible;}

.dropbtn {
    background-color: #ffffff00;
    color: #212121;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: #212121;
    margin: 0;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #A8C7BE;
    color: white;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #ffffff00;
}

#nav-bar {
    display: flex;
    justify-content: space-between;
    height: 4em;
    position: fixed;
    width: 100%;
    z-index: 6;
    box-sizing: border-box;
    padding: 0 1em;
    background-color: white;
}

#nav-bar.navbg {
    background-color: white;
}

.nav-logo {
    width: 35%;
}

.skewed-logo {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 1em;
}

.skewed-logo img {
    height: 100%;
}
.hamburger svg, .close {
    height: 100%;
    width: 2em;
    fill: #CC3363;
}
.hamburger svg:active, .close:active {
    background-color: transparent;
}

nav {
    width: 60%;
    font-weight: 400;
    background-color: #EBDBDB;
    box-sizing: border-box;
    position: fixed;
    height: 100vh;
    top: 3em;
    right: 0px;
    padding-top: 1em;
    transform: translate(100%);
    transition: all 0.3s;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li:not(:first-child):not(:last-child) {
    /* display: block; */
    width: 100%;
    padding: 1em 2em;
}
.pedido {
    display: block;
    width: 100%;
    padding: 1em 2em;
}

nav ul li:not(:first-child):hover {
    background-color: #EBDBDB;
}

.exit-btn {
    text-align: right;
    padding-right: 1em;
}

.exit-btn svg, .hamburger svg {
    cursor: pointer;
}

.hide-mobile {
    transform: translate(0%);
}
.hide #nav-logo {
    visibility: hidden;
}
.desktop-only {
    display: none; 
}

footer {
    background-color: #212121;
}

footer a, footer p, footer h2, footer h3, footer address {
    color: white;
    font-weight: 300;
}

#navbar {
    margin: 0 auto;
    padding: 0.5em 0;
    font-weight: 300;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}

#navbar li {
    margin: 0.4em;
}

#datos {
    text-align: center;
}

#redes {
    width: 90%;
    margin: 2em auto;
}

#redes li {
    margin: 0.5em 0;
}

#facebook {
	list-style-image: url(/images/SoNetIcons/facebook.png);
}

#instagram {
	list-style-image: url(/images/SoNetIcons/instagram.png);
}

#whatsapp {
	list-style-image: url(/images/SoNetIcons/whatsapp.png);
}

#copyright{
    color: white;
    font-weight: 300;
    text-align: center;
}
#copyright a {
    color: white;
    font-weight: 500;
    text-decoration: underline;
}

@media only screen and (min-width: 563px) {
    #topbar, #topbar img {
        height: 2em;
    }
    .social-networks {
        justify-content: center;
    }
    svg {
        margin: 0 1em;
    }
    body {
        padding-top: 2em;
    }
    .tooltiptext {
        bottom: -2.2em;
        left: 50%;
        transform: translateX(-50%);
    }
    nav {
        top: 2em;
    }
}

@media only screen and (min-width: 768px) {
    .mobile-only {
        display: none; 
    }
    .hamburger, .exit-btn{
        display: none;
    }
    .hide-mobile {
        display: block;
    }
    .hide #nav-logo {
        visibility: visible;
    }
    #nav-bar {
        height: 6em;
        background-color: #A8C7BE;
    }
    nav {
        padding-top: 0;
        padding-right: 7%;
        position: static;
        height: 100%;
        background-color: transparent;
        transform: translate(0%);
        align-content: center;
    }
    nav ul {        
        display: flex;
        justify-content: space-around;
        text-align: center;
        align-items: center;
    }
    nav ul a, .dropbtn {
        color: #21473C;
        font-size: 14px;
    }
    nav ul li:not(:first-child):not(:last-child) {
        width: max-content;
        padding: 1em 0.25em;
    }
    nav ul li:not(:first-child):not(:last-child):hover {
        background-color: transparent;
    }
    .pedido {
        width: max-content;
        height: max-content;
        background-color: #cc3363;
        border-radius: 5px;
        padding: 0.5em 0.7em;
    }
    .pedido a {
        color: white;
    }
    .skewed-logo {
        background-color: white;
        transform: skew(-7deg);
        text-align: center;
    }
    .nav-logo::before {
        content: "";
        width: 2em;
        height: 100%;
        background-color: white;
        position: absolute;
        left: 0;
    }
    .skewed-logo img {
        transform: skew(7deg);
    }
    #pagefoot {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #navbar, #redes {
        width: 20%;
        box-sizing: border-box;
    }
    #navbar {
        box-sizing: border-box;
        display: block;
        text-align: left;
    }
    #navbar li {
        margin: 1em;
    }
    #navbar, #redes {
        padding-left: 3%;
    }
    .desktop-only {
        display: block; 
    }
    
}

@media only screen and (min-width: 900px) {
    svg {
        margin: 0 2em;
    }
    
    #navbar, #redes {
        padding-left: 6%;
    }
    nav ul a, .dropbtn {
        font-size: 16px;
    }
}
@media only screen and (min-width: 976px) {
    nav {
        width: 50%;
    }
}
body.blur > *:not(my-header) {
    filter: blur(5px);
}