:root {
    /* Global */
    /* --------------------------------------------------------------------- */
    --color-primary: #6e8699;
    /*--color-secondary: rgba(254, 87, 1, 1);*/
    --color-secondary: rgba(242, 100, 38, 1);

    --color-title: #0f172a;
    --color-text: #334155;

    --color-info: #2563eb;
    --color-success: #16a34a;
    --color-danger: #dc2626;

    /* Popper */
    --popper-theme-background-color: #334155;
    --popper-theme-background-color-hover: #333333;
    --popper-theme-text-color: #ffffff;
    --popper-theme-border-width: 0px;
    --popper-theme-border-style: solid;
    --popper-theme-border-radius: 24px;
    --popper-theme-padding: 4px 8px;
}
@font-face {
    font-family: "Gotham Medium";
    src: url('/fonts/gotham/Gotham/Gotham-Medium.otf');
}
@font-face {
    font-family: "Gotham Book";
    src: url('/fonts/gotham/Gotham/Gotham-Bold.otf');
    font-weight: bold;
}
@font-face {
    font-family: "Gotham Book";
    src: url('/fonts/gotham/Gotham/Gotham-Book.otf');
}

::after,
::before{
    box-sizing: border-box;
}
::-moz-selection,
::selection {
    color: #fff;
    background-color: var(--color-primary);
}
:focus-visible{
    outline: none;
}
:disabled,
.disabled{
    pointer-events: none;
    opacity: .4;
}
body{
    background-color: #f3f4f6;
    color: var(--color-text);
    position: relative;
    overflow-x: hidden;
}

#web h1, #web h2, #web h3, #web h4, #web h5, #web h6,
#web .title{
    font-family: "Gotham Medium";
    font-weight: normal;
}
/* Color */
/* --------------------------------------------------------------------- */
.text-primary{
    color: var(--color-primary);
}
.text-secondary{
    color: var(--color-secondary);
}
/* Background */
/* --------------------------------------------------------------------- */
.bg-primary{
    background-color: var(--color-primary);
}
.bg-secondary{
    background-color: var(--color-secondary);
}
.bg-secondary-light{
    background-color: rgba(254, 87, 1, .05);
}
.bg-red-50{
    background-color: #fef2f2;
}

/* Border */
/* --------------------------------------------------------------------- */
.border-primary{
    border-color: var(--color-primary);
}
.focus\:border-secondary:focus,
.border-secondary{
    border-color: var(--color-secondary);
}
.border-red-400{
    border-color: #f87171;
}
/* Ring */
/* --------------------------------------------------------------------- */
.focus\:ring-secondary:focus{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(254 87 1 / var(--tw-ring-opacity));
}
/* Buttons */
/* --------------------------------------------------------------------- */
.button{
    font-weight: 500;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    transition: .2s background-color, .2s border-color, .2s color;
    padding: .5rem 1.25rem;
}
.button:focus{
    --tw-ring-offset-color: #f8fafc;
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.button.button-xs{
    font-size: 0.75rem;
    line-height: 1rem;
    padding: .5rem 1rem;
}
.button.button-lg{
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .75rem 1.5rem;
}
.button.button-secondary{
    background-color: var(--color-secondary);
    color: #fff;
    --tw-ring-color: var(--color-secondary);
}
.button.button-secondary:hover{
    background-color: #CB4500;
    --tw-ring-color: #CB4500;
}
.button.button-secondary:focus{
    background-color: #983400;
    --tw-ring-color: #983400;
}
.button.button-gray{
    background-color: #475569;
    color: #fff;
    --tw-ring-color: #475569;
}
.button.button-gray:hover{
    background-color: #334155;
    --tw-ring-color: #334155;
}
.button.button-gray:focus{
    background-color: #1e293b;
    --tw-ring-color: #1e293b;
}
.button.button-transparent{
    background-color: transparent;
    box-shadow: none;
    color: #334155;
}
.button.button-danger{
    background-color: #dc2626;
    color: #fff;
    --tw-ring-color: #dc2626;
}
.button.button-danger:hover{
    background-color: #b91c1c;
    --tw-ring-color: #b91c1c;
}
.button.button-danger:focus{
    background-color: #991b1b;
    --tw-ring-color: #991b1b;
}
.button.button-transparent:hover{
    background-color: #e2e8f0;
}

h1{
    font-size: 42px;
}
h2{
    font-size: 32px;
}
p{
    font-size: 18px;
}
.boxed{
    width: 1240px;
    margin: 0 auto;
}
.fullwidth{
    width: 100%;
}
.bg-mrc{
    background-color: var(--color-secondary);
}
.bg-mrc h2,
.bg-mrc p{
    color: #fff;
}
.hero-landing{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.bg-hero{
    background-image: url("/img/frontend/index/fondo_mrc.jpg");
}
.bg-quienes{
    background-image: url("/img/frontend/index/fondo_2.jpg");
}
.bg-quienes-alt{
    background-image: url("/img/frontend/index/fondo-quienes.jpg");
}
.bg-quienes-alt-2{
    background-image: url("/img/frontend/index/fondo-quienes-v2.jpg");
}
.bg-que{
    background-image: url("/img/frontend/index/fondo_3.jpg");
}
.bg-quehacemos{
    background-image: url("/img/frontend/index/quehacemos.jpg");
    min-height: 100%;
}

.bg-quehacemos-alt{
    background-image: url("/img/frontend/index/fondo-quehacemos.jpg");
}
.bg-quehacemos-alt-2{
    background-image: url("/img/frontend/index/fondo-quehacemos-v2.jpg");
}
.bg-repartidor{
    background-image: url("/img/frontend/index/repartidor1.jpg");
    background-color: white;
}

.bg-como{
    background-image: url("/img/frontend/index/fondo_4.jpg");
}
.bg-b2b{
    background-image: url("/img/frontend/index/fondo_5.jpg");
}
.bg-gc{
    background-image: url("/img/frontend/index/fondo-gc.png");

}
.bg-tf{
    background-image: url("/img/frontend/index/fondo-tf.png");

}
@media screen and (max-width: 960px) {
    .bg-hero{
        background-image: url("/img/frontend/index/fondo_mrc_mv.jpg");
    }
    .bg-repartidor{
        background-position: center ;
    }
}
@media screen and (max-width: 650px) {
    .bg-repartidor {
        background-position: 0 0;
    }
}
/* Políticas */
/* --------------------------------------------------------------------- */
.policies p{
    margin-bottom: 1rem;
    text-align: justify;
}
.policies .title{
    font-weight: bold;
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}

img{
    border-radius: 0.5rem;
}
.bg-alt{
    background-color: #1e293b;
}

#mobile-menu a:hover{
    color: #f26427;
}

.hero-parallax{
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}
.text-mrc{
    color: var(--color-secondary);
}
/*.open{*/
/*    position: absolute;*/
/*    width: 100%;*/
/*}*/

.hd{
    width: auto;
    max-width: 1920px;
}

.policies li{
    font-size: 18px;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
    0% { opacity: .8; }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}
@keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
}

@media only screen
and (min-width: 280px)
and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
        width: 100%;
    }
}


/**
**  animaciones hero inicio:
**  --motos entrada izquierda y derecha
**  --logotipo
 **/
.bici{
    animation: asomarIzquierda 1.5s ease-in-out;
}
@keyframes asomarIzquierda {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

.moto{
    animation: asomarDerecha 1.5s ease-in-out;
}
@keyframes asomarDerecha {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

.rellenoNaranja{
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rellenoNaranja 1.8s linear;
    animation-fill-mode: both;
}
@keyframes rellenoNaranja {
    0% {
        stroke-dashoffset: 1;
        fill-opacity: 0;
        fill:none;
    }
    50%{
        stroke-dashoffset: 0;
        fill-opacity: 0;
        fill:none;
}
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        fill: #f26427;
        stroke: #f26427;
    }
}


.rellenoBlanco{
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: rellenoBlanco 1.8s linear;
    animation-fill-mode: forwards;
}
@keyframes rellenoBlanco {
    0%{
        stroke-dashoffset: 1;
        fill-opacity: 0;
        fill: none;

    }
    50%{
        stroke-dashoffset: 0;
        fill-opacity: 0;
        fill:none;
    }
    75%{
        fill-opacity: 0;
    }
    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        fill: #ffffff ;

    }
}

/* Vue - DatePicker */
/* --------------------------------------------------------------------- */
.dp__input_wrap input {
    font-size: .875rem;
    line-height: 1.25rem;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    padding: .5rem 1rem .5rem 2rem;
    border: 1px solid rgb(203, 213, 225);
    border-radius: .375rem;
    transition: none;
}
.dp__input_wrap input:hover {
    border: 1px solid rgb(203, 213, 225);
}
.dp__input_wrap input:focus,
.dp__input_wrap input.dp__input_focus {
    border-color: var(--color-secondary);
    --tw-ring-color: var(--color-secondary);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty, );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}