/* Booth Animation */

.booth-animation {
    width            : 100%;
    height           : 100vh;
    display          : flex;
    justify-content  : center;
    align-items      : center;
    position         : fixed;
    z-index          : 100000;
    transition       : transform 600ms;
    background-color : var(--button-color);
}

.booth-animation .circle {
    width         : 5em;
    height        : 5em;
    border-radius : 50%;
    border-top    : solid white 1em;
    border-bottom : solid white 1em;
    border-left   : solid white 1em;
    animation     : booth_animation 1s linear infinite;
}

@keyframes booth_animation {
    0% {
        border-top    : solid white 1em;
        border-bottom : solid white 1em;
        border-left   : solid white 1em;
    }
    25% {
        border-top    : solid white 1em;
        border-right  : solid white 1em;
        border-left   : solid white 1em;
        border-bottom : none;
    }
    50% {
        border-top    : solid white 1em;
        border-right  : solid white 1em;
        border-bottom : solid white 1em;
        border-left   : none;
    }
    75% {
        border-left   : solid white 1em;
        border-right  : solid white 1em;
        border-bottom : solid white 1em;
        border-top    : none;
    }
    100% {
        border-top    : solid white 1em;
        border-bottom : solid white 1em;
        border-left   : solid white 1em;
        border-right  : none;
    }
}

/* Navegation */

.navigation {
    width            : 100%;
    display          : flex;
    justify-content  : space-between;
    align-items      : center;
    padding          : 1em;
    color            : white;
    box-shadow       : 0px 0px 15px 0px rgba(94,94,94,1);
    position         : sticky;
    top              : 0;
    z-index          : 10000;
    background-color : var(--button-color);
}

.navigation h2 {
    color : #fff !important;
}

/* Navigation */

.header-main {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 4em;
}

.header-main article {
    display       : flex;
    flex-wrap     : wrap;
    align-content : center;
}

.header-main article h1,
.contact h2,
.products h2 {
    margin-bottom : 0.313em;
}

.header-main h1::after,
.contact h2::after,
.products h2::after {
    content          : '';
    display          : block;
    width            : 3em;
    height           : 0.156em;
    background-color : var(--secondary-color);
}

.header-main article p {
    margin-bottom : .625em;
}

.header-main article a i {
    transform  : translateX(-10px);
    opacity    : 0;
    transition : transform var(--transition), opacity var(--transition);
}

.header-main article a:hover .fas {
    transform : translateX(0);
    opacity   : 1;
}

/* Products */

.product-list {
    display               : grid;
    grid-template-columns : repeat(5, 1fr);
    gap                   : 1em;
}

/* Contact */

.contact nav {
    margin-bottom : .25em;
}

.contact nav div {
    display  : inline-block;
    cursor   : pointer;
    position : relative;
}

.contact nav .map-selected {
    cursor : default;
}

.contact nav .map-selected::after {
    content          : '';
    display          : block;
    width            : 100%;
    left             : 0;
    top              : 0;
    z-index          : -10;
    position         : absolute;
    height           : calc(100% + .4em);
    background-color : var(--button-color);
}

.contact nav .map-selected:hover {
    background-color : var(--button-color);
}

.contact .information {
    display               : grid;
    grid-template-columns : 70% 30%;
    gap                   : 2em;
    padding               : 1em;
    color                 : #fff;
    background-color      : var(--button-color);
}

.contact .information .map iframe {
    height : 450px;
}

.contact .information address p {
    margin-bottom : .625em;
}

.contact .information address a {
    display       : block;
    margin-bottom : .625em;
}

/* Footer */

.footer-header,
.footer-end {
    color      : #fff;
    padding    : 1em .625em;
    text-align : center;
}

.footer-header {
    font-size        : 1.6em;
    background-color : var(--button-color);
}

.footer-body {
    background-color : rgb(150, 150, 150);
    padding-top      : 4em;
    padding-bottom   : 4em;
}

.footer-body-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    gap                   : 1em;
}

.footer-body-grid a {
    font-size      : 1.6em;
    padding-top    : .625em;
    padding-bottom : .625em;
    display        : block;
    transition     : color var(--transition);
}

.footer-body-grid a:hover {
    color : #fff;
}

.footer-body-grid section:nth-child(2) a::before {
    content      : '\f30b';
    font-family  : 'FontAwesome';
    margin-right : 5px;
}

.footer-body-grid form {
    display               : grid;
    grid-template-columns : 80% 20%;
    margin-top            : .625em;
}

.footer-body-grid input[type="text"] {
    background-color : rgb(190, 190, 190);
}

.footer-body-grid input[type="submit"] {
    color            : white;
    cursor           : pointer;
    background-color : var(--button-color);
}

.footer-body-grid div {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    column-gap            : 5px;
}

.footer-end {
    font-size        : 1.2em;
    background-color : rgb(10, 10, 10);
}