/*
Gris metálico: 	#4F4F4F
Azul oscuro: 	#003366
Naranja:    	#E74C00
Rojo: 			#C5240E
Negro: 			#000000
*/


.draft-colors {
    --logo-primary: #fffec9;

    amarillito: #fff8e9; /* la perla */

    /* entrada */
    marron-oscuro: #2b1d13;
    marron-medio: #28201a;
    marron-claro: #463f36;

    gris: #2c2722;
    gris2: #221e18;
    gris3: #4e4e47;
    gris3: #9d9a8c;

    bordo: #16060b;
    bordo: #1f0509;
    bordo: #311319;
    bordo: #470f18;
    bordo: #630c1b;
    bordo: #860e23;
}





:root {
    --theme-background: #fff8e9;
    --theme-white: #FFFFFF;
    --theme-red: #470f18;
    --theme-red-over: #860e23;

    --theme-blue-secondary: #470f18;
    --theme-blue-secondary-alt: #860e23;


    --theme-links-dark: #311319;
    --theme-links: #470f18;
    --theme-links-light: #630c1b;
    --theme-links-over: #860e23;
    --theme-links-over-dark: #311319;

    --theme-button: #470f18;
    --theme-button-over: #860e23;


    --theme-button-alt: #311319;
    --theme-button-alt-over: #470f18;


    --theme-grey-light: #eee;
    --theme-grey: #999;
    --theme-grey-2: #666;
    --theme-grey-dark: #444;

    --theme-social-links: #470f18;


    --theme-logo-text-color: #FFFFFF;



    --theme-mobile-nav-background: #1f0509;
    --theme-mobile-nav-background-alpha: rgba(31, 5, 9, 0.7);

    --theme-error-red: #ed3c0d;
    --theme-ok-green: #18d26e;

    /*--theme-footer-background: #003366;*/
    /*--theme-footer-top-background: #002851;*/
    --theme-footer-background: #1f0509;
    --theme-footer-top-background: #311319;
    --theme-footer-border-top: #630c1b;
    --theme-footer-border-bottom: #1f0509;


    --logo-primary: #fffec9;
    --logo-secondary: #fff8e9;

    --primary:#630c1b;
    --secondary:#fff8e9;
}



















/*


body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
body .wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 450px;
}
body .wrap a {
    text-decoration: none;
    color: #222;
    padding: 20px;
    background: #efefef;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    font-family: "Oswald";
    margin: 20px;
    flex-grow: 1;
    cursor: pointer;
}

body .wrap a:nth-of-type(2) {
    position: relative;
}
body .wrap a:nth-of-type(2):before {
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    top: calc(4px/-1);
    left: calc(4px/-1);
    background:
            linear-gradient(to right, #222 0%, #222 100%),
            linear-gradient(to top, #222 50%, transparent 50%),
            linear-gradient(to top, #222 50%, transparent 50%),
            linear-gradient(to right, #222 0%, #222 100%),
            linear-gradient(to left, #222 0%, #222 100%);
    background-size: 100% 4px, 4px 200%, 4px 200%, 0% 4px, 0% 4px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    transition: transform 0.2s ease-in-out, background-position 0.2s ease-in-out, background-size 0.2s ease-in-out;
    transform: scaleX(0) rotate(180deg);
    transition-delay: 0.4s, 0.2s, 0s;
}
body .wrap a:nth-of-type(2):hover:before {
    background-size: 200% 4px, 4px 400%, 4px 400%, 55% 4px, 55% 4px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    transform: scaleX(1) rotate(180deg);
    transition-delay: 0s, 0.2s, 0.4s;
}
*/