/* Fuente tipografica */

@font-face {
    font-family: "Univers-Black";
    src: url("fonts/Univers-Black.otf");
}

@font-face {
    font-family: "Univers-bold";
    src: url("fonts/univers-bold.ttf");
}

@font-face {
    font-family: "Univers-medium";
    src: url("fonts/univers-medium.ttf");
}


/*@font-face {
  font-family:"univers-condensed-bold-ttf";
  src: url("fonts/univers-condensed-bold.ttf");
}*/

@font-face {
    font-family: "univers-condensed-bold-otf";
    src: url("fonts/univers-condensed-bold.otf");
}

@font-face {
    font-family: "univers-condensed-bold-woff";
    src: url("fonts/univers-condensed-bold.woff");
}

body {
    font-family: "Univers-Condensed", sans-serif;
}

img {
    width: 100%;
}

a {
    color: white;
}

a:hover {
    color: white;
}

.textcenter a {
    color: #4c148c;
}


/* Header */

header {
    font-family: "Univers-bold", sans-serif;
}

main {
    width: 100%;
    background: white;
}

#Img-Logo {
    width: 110px;
    margin-left: 5%;
    margin-right: 3%;
}

#NavFedex {
    background: #4c148c;
}

.text-white {
    color: white;
}

#icon-cuenta {
    width: 40px;
    margin-left: 1%;
    margin-right: 5%;
}

.navbar-light .navbar-toggler {
    border-color: white;
}


/* MAIN */

#cont {
    height: 100%;
}

#absolute-2 {
    padding-top: 15%;
    padding-bottom: 10%;
    height: 100%;
    text-align: center;
}

#absolute h1 {
    font-size: 42pt;
    color: white;
    text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    font-family: "univers-condensed-bold-otf", "univers-condensed-bold-woff", sans-serif;
}

#absolute h2 {
    font-size: 18pt;
    color: white;
    text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
}

#absolute {
    width: 60%;
    position: absolute;
    margin-top: -34%;
    margin-left: 10%;
}

#absolute h1 {
    font-size: 4vw;
    color: white;
    text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    line-height: 1;
}

#absolute h2 {
    font-size: 1.6vw;
    color: white;
    text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    line-height: 1.3;
}

h1 {
    font-size: 46pt;
}

h2 {
    font-size: 16pt;
}

h3 {
    font-size: 22pt;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    font-family: "Univers-bold", sans-serif;
}

.size-premios {
    font-size: 36pt !important;
}

.fontFedex {
    font-family: "univers-condensed-bold-otf", "univers-condensed-bold-woff", sans-serif;
}

.bigtext {
    font-size: 16pt;
    color: #4c148c;
    font-family: "Univers-bold", sans-serif;
}

#segundaSeccion h3 a {
    color: black;
    font-size: 18pt;
    font-family: "Univers-Condensed", sans-serif;
    text-decoration: underline;
}

#segundaSeccion h3 {
    color: #4c148c;
}

#segundaSeccion h3 a:hover {
    text-decoration: underline;
}

.Vigencia {
    font-size: 1vw;
    margin-bottom: 0%;
    text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    text-align: left;
    color: white;
}

.TituloDestacado {
    font-size: 28pt;
    font-weight: bold;
    font-family: "univers-condensed-bold-otf", "univers-condensed-bold-woff", sans-serif;
    color: #4c148c;
    margin-top: 10%;
}

.text-especial {
    color: black;
    font-size: 18pt;
}

.btn {
    margin-top: 2%;
}

.btn-shadow {
    -webkit-box-shadow: 5px 9px 12px -1px rgba(0, 0, 0, 0.42);
    -moz-box-shadow: 5px 9px 12px -1px rgba(0, 0, 0, 0.42);
    box-shadow: 5px 9px 12px -1px rgba(0, 0, 0, 0.42);
}

.btn-primary {
    background: #ff6600;
    border: none;
    font-size: 14pt;
}

.btn-primary:hover {
    background: #ff6600;
}

#SectionMecanica {
    text-align: center;
    margin-bottom: 3%;
}

.TextoMecanica {
    padding: 0% 20% 0% 20%;
    color: #4c148c;
    font-weight: 700;
    font-family: "Univers-bold", sans-serif;
    line-height: 1.3;
}

.linkMecanica {
    text-align: center;
    font-size: 14pt;
    color: #4c148c;
    font-family: "Univers-bold", sans-serif;
    font-weight: 700;
    margin-bottom: -25px;
    margin-top: 1.5%;
}

.linkMecanica:hover {
    color: #4c148c;
}

.icono {
    width: 40%;
    margin-bottom: 20px;
}


/* Form Section */

.Form {
    background: #4c148c;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 3%;
    padding-bottom: 3%;
}

.Formulario {
    width: 60%;
}

.underline {
    text-decoration: underline;
}

input {
    width: 100%;
    height: 45px;
    padding: 2%;
    margin-top: 8px;
    margin-bottom: 8px;
}

select {
    width: 100%;
    height: 45px;
    padding: 2%;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #757575;
}

.TituloForm {
    display: flex;
    justify-content: center;
    color: white;
    margin-bottom: 3%;
    margin-top: 2%;
}

.Vertical {
    height: 30px;
    margin-left: 15px;
    margin-right: 15px;
    border-left: 2px solid white;
}

footer .Vertical {
    height: 20px;
}

.TituloForm h2 {
    font-size: 18pt;
    font-family: "Univers-bold", sans-serif;
}

.TituloForm h2:last-child {
    font-family: "Univers-Condensed", sans-serif;
    font-weight: 100;
    text-decoration: underline;
}

.align {
    display: flex;
    align-items: center;
}

.check {
    margin: 0px;
    height: auto;
}

.checkboxesSection {
    margin-top: 3%;
}

.col-2 {
    padding-right: 0%;
    display: flex;
}

.col-10 {
    padding-left: 0%;
}

label {
    color: white;
}

.Links {
    text-decoration: underline;
}

.center {
    display: flex;
    justify-content: center;
}

.centerWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.marginTop {
    margin-top: 3%;
    margin-bottom: 2%;
}

.EndPage {
    margin-bottom: 10%;
}

h4 {
    font-size: 36pt;
    margin-top: 3%;
    margin-bottom: -1.8%;
    color: #ff6600;
    font-family: "Univers-bold", sans-serif;
    text-align: center;
}

h5 {
    font-size: 36pt;
    margin-top: 3%;
    margin-bottom: 5%;
    color: #ff6600;
    font-family: "Univers-bold", sans-serif;
    text-align: center;
}


/*LogIn*/

#LogIn {
    display: none;
}

.smallInput {
    width: 50%;
}

.smalltext {
    font-size: 12pt;
}

.ValidationLogIn {
    width: 50%;
    background: #c50029;
    color: white;
    padding: 0.1% 3% 0.1% 3%;
    text-align: center;
}

.ValidationRegistro {
    width: 100%;
    background: #c50029;
    color: white;
    padding: 0.1% 3% 0.1% 3%;
    text-align: center;
}

.ValidationCorrecta {
    width: 100%;
    background: green;
    color: white;
    padding: 0.1% 3% 0.1% 3%;
    text-align: center;
}

.img-premios {
    width: 60%;
    height: auto;
}

.naranja {
    background: #ff6600;
}

.align-right {
    text-align: right;
}


/* Formulario de Recuperacion de ID y Contraseña */

.linea {
    height: 100%;
    border-left: 1px solid white;
}

#Recuperacion {
    display: none;
}

#alertaNombre {
    display: none;
}

.Close {
    font-size: 20pt;
    color: white;
    font-weight: 400;
}

.Close:hover {
    text-decoration: none;
}

.right {
    display: flex;
    justify-content: flex-end;
}

#Recuperacion h2 {
    font-size: 24pt;
    text-align: center;
    text-decoration: none;
}

.textWhite {
    color: white;
    font-size: 14pt;
}


/* Seción lista para los ganadores */

#SectionGanadores {
    display: none;
}

#Proximamente {
    display: block;
}

.ganadores {
    background: #f8f6fb;
}

#BannerFedEx {
    display: none;
}

.Trofeo {
    margin-top: 3%;
    width: 15%;
}

.table {
    width: 100%;
}

.scrollTable {
    border: 1px solid grey;
    width: 60%;
    margin: 3%;
    margin-bottom: 5%;
    height: 298px;
    overflow: scroll;
}

.scrollTable::-webkit-scrollbar {
    width: 10px;
    /* Tamaño del scroll en vertical */
    height: 0px;
    /* Tamaño del scroll en horizontal */
    background: #cdcdcd;
}

.scrollTable::-webkit-scrollbar-thumb {
    background: #626262;
}

.headerTable {
    width: 100%;
    background: #4c148c;
    color: white;
}

.none {
    display: none;
}

tbody {
    text-align: center;
    color: #4c148c;
}

.centertable {
    text-align: center;
}

.fireworks {
    width: 100%;
    position: absolute;
}


/* CALCULA & GANA | PAGINA */

.margen {
    margin-top: 6%;
    margin-bottom: 5%;
}

.margen-img {
    margin-top: 6%;
    margin-bottom: 5%;
}

.margen h2 {
    font-size: 30pt;
    font-family: "Univers-bold", sans-serif;
}

.MiCuenta {
    min-height: 650px;
}

.CalculaPage {
    min-height: 650px;
}

h6 {
    margin-top: 5%;
    font-size: 26pt;
    font-family: "Univers-bold", sans-serif;
    margin-bottom: 5px;
    text-align: center;
}

.text {
    font-size: 14pt;
    margin-bottom: 2%;
}

.table {
    margin-bottom: 4%;
}

.btn-large {
    width: 100%;
    background: #ff6600;
    color: white;
    font-family: "Univers-bold", sans-serif;
    padding: 2% 0% 2% 0%;
    margin-bottom: 3%;
}

.modal-backdrop {
    opacity: 1;
    background: #4c148c;
    z-index: -1;
}

.modal-backdrop.in {
    opacity: 1;
}

.textcenter {
    text-align: center;
}


/* ThankYou Page */

.background-grey {
    min-height: 650px;
    background: #f8f6fb;
}

.thanksBox {
    margin-top: 4%;
    border: 1px solid #f8f6fb;
    background: white;
    padding: 10% !important;
    padding-bottom: 10% !important;
}


/* Footer */

footer {
    display: flex;
    padding-top: 2%;
    padding-bottom: 2%;
    justify-content: center;
    background: #4c148c;
    font-weight: 100;
}

.bottom {
    width: 100%;
    /*position: absolute;*/
    bottom: 0;
}

.bottom-max {
    width: 100%;
    /*position: absolute;*/
    bottom: 0;
}

@media only screen and (max-height: 800px) {
    .bottom {
        width: 100%;
        position: static;
        bottom: auto;
    }
}

@media only screen and (max-height: 900px) {
    .bottom-max {
        width: 100%;
        position: static;
        bottom: auto;
    }
}

.textFooter {
    color: white;
    text-align: center;
    margin-top: 3%;
    font-size: 8pt;
}

footer h4 {
    font-size: 10pt;
    text-align: center;
}

.linea {
    border-left: 1px solid white;
    height: 20px;
}

.linea:first-child {
    border-left: none;
}

.timer {
    text-align: center;
    font-size: 18pt;
    font-family: "Univers-bold", sans-serif;
    color: #4c148c;
}

.iconothanks {
    width: 15%;
    height: 100%;
}

.maxwidth {
    width: 100%;
    height: auto;
}

#CountDown {
    display: none;
    background: #4c148c !important;
}

#countdown {
    font-family: "Univers-bold", sans-serif;
    width: 100%;
    ;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 5em;
    text-align: center;
    font-weight: bold;
}

#LoadModal .modal-content {
    border: none !important;
}

#error {
    display: none;
    color: #4c148c;
}

.error {
    color: #4c148c;
}

.ImgModal {
    width: 100%;
    height: 80%;
    margin: 0%;
    margin-bottom: 6%;
}

#LoadModal .modal-body {
    padding-top: 0%;
}

.TitulosModal {
    font-size: 26pt;
    font-weight: 500;
    margin-bottom: 4%;
}

.TitulosGame {
    font-size: 32pt;
    font-weight: 700;
    margin-bottom: 6%;
    margin-top: 0%;
    text-align: center;
}

.ModalText {
    padding: 0% 15% 4% 15%;
}

.modal-game {
    -webkit-box-shadow: 5px 10px 13px 3px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 5px 10px 13px 3px rgba(0, 0, 0, 0.43);
    box-shadow: 5px 10px 13px 3px rgba(0, 0, 0, 0.43);
}

.container-game {
    width: 100%;
    display: flex;
    margin-top: 10%;
    align-content: center;
    flex-wrap: wrap;
}

.space {
    margin-bottom: 4%;
}

#LoadModal {
    display: block;
}


/* Mi cuenta */

.MiCuenta {
    background: #f8f6fb;
}


/* Id's de validación de Campos */

#alertaLogIn {
    display: block;
}

#alertaRegistro {
    display: block;
}


/* Animación de Animate.css - en la seccion del formulario */

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    animation-name: bounceOutUp;
}

@keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    90% {
        transform: translate3d(-5px, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.bounceInRight {
    animation-name: bounceInRight;
}


/* Countdown */

.CountDown ul {
    display: flex;
    color: white;
    margin-top: 2%;
    padding: 1%;
    border: 2px solid white;
    text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
}

.CountDown li {
    list-style: none;
    padding: 3%;
    font-size: 18pt;
}

#footerDown {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.img-fluid-height {
    height: 100%;
}

#heightFull {
    height: 100%;
}

.img-height {
    height: 100% !important;
}

#teaster {
    height: 100%;
    position: absolute;
    bottom: 0;
    background-image: url('http://promofedex.com.mx/Fondo.png');
    background-repeat: repeat-y;
    background-position: center;
    background-size: cover;
}

#headerTeaster {
    position: absolute;
    width: 100%;
    z-index: 1;
}

@media only screen and (max-width: 991px) {
    /*Desaparece el icono de ingresa en la version Mobile*/
    #absolute-2 {
        padding-top: 20%;
    }
    #icon-cuenta {
        display: none;
    }
    #absolute {
        margin-top: -42%;
    }
    #absolute h1 {
        font-size: 4.2vw;
    }
    #absolute h2 {
        font-size: 14pt;
    }
    h1 {
        font-size: 38pt;
    }
    h2 {
        font-size: 13pt;
    }
    .icono {
        width: 60%;
    }
    footer h4 {
        height: 20px;
        border-left: none;
        font-size: 14pt;
        padding-left: 0%;
    }
    .margen-img {
        margin-top: 20%;
        margin-bottom: 2%;
    }
    .TitulosGame {
        font-size: 28pt;
        font-weight: 700;
        margin-bottom: 6%;
        text-align: center;
    }
    .smalltext {
        font-size: 10pt;
    }
    .TituloDestacado {
        font-size: 20pt;
        font-weight: 400;
        font-family: "Univers-bold", sans-serif;
        color: #4c148c;
        margin-top: 10%;
        margin-bottom: 10%;
        text-align: left;
    }
    .text-especial {
        color: black;
        font-size: 12pt;
    }
    .Vigencia {
        font-size: 1.5vw;
        margin-bottom: 0%;
        text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    }
    footer h4 {
        height: 20px;
        border-left: none;
        font-size: 10pt;
        padding-left: 0%;
    }
    .linkMecanica {
        margin-top: 3%;
    }
    .bottom {
        width: 100%;
        position: static;
        bottom: auto;
    }
    .bigtext {
        font-size: 12pt;
    }
    .size-premios {
        font-size: 18pt !important;
    }
    .cont-boton {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .inverse {
        display: flex;
        flex-wrap: wrap-reverse !important;
    }
    .align-right {
        text-align: right;
    }
}

@media only screen and (max-width: 576px) {
    #absolute {
        margin-top: -100%;
    }
    #absolute h1 {
        font-size: 9vw;
    }
    #absolute h2 {
        font-size: 5vw;
    }
    .Vigencia {
        font-size: 3vw;
        margin-bottom: 0%;
        text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    }
    .bottom {
        width: 100%;
        /*position: absolute;*/
        bottom: 0;
    }
    .cont-boton {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .inverse {
        display: flex;
        flex-wrap: wrap-reverse !important;
    }
    .align-right {
        text-align: center;
    }
}

@media only screen and (max-width: 426px) {
    /*Desaparece el icono de ingresa en la version Mobile*/
    .CountDown ul {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .CountDown li {
        font-size: 12pt;
    }
    #absolute-2 {
        padding-top: 35%;
    }
    #icon-cuenta {
        display: none;
    }
    h1 {
        font-size: 26pt !important;
        padding: 0% 5% 0% 5%;
    }
    h2 {
        font-size: 14pt;
        padding: 0% 8% 0% 8%;
    }
    .Formulario {
        width: 100%;
    }
    .TituloForm {
        display: flex;
        flex-wrap: wrap;
    }
    .Vertical {
        width: 50px;
        height: 0px;
        margin-top: 5px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
        border-left: 0px;
        border-bottom: 2px solid white;
    }
    footer .Vertical {
        display: none;
    }
    .TituloForm h2 {
        width: 100%;
        font-size: 16pt;
        text-align: center;
    }
    .TituloForm h2:last-child {
        font-family: "Univers-Condensed", sans-serif;
        font-weight: 100;
    }
    .smallInput {
        width: 100%;
    }
    footer {
        display: flex;
        flex-wrap: wrap;
    }
    .copyright {
        margin-top: 5%;
    }
    footer h4 {
        height: 20px;
        border-left: none;
        font-size: 14pt;
        padding-left: 0%;
    }
    .margen-img {
        margin-top: 5%;
        margin-bottom: 2%;
    }
    .margen h2 {
        padding: 0%;
    }
    .textmobile {
        font-size: 24pt;
        margin-bottom: 20%;
    }
    .marginBottom {
        margin-bottom: 10%;
    }
    .centerMobile {
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
    }
    .TitulosGame {
        font-size: 26pt;
        font-weight: 700;
        margin-bottom: 6%;
        margin-top: 3%;
        text-align: center;
    }
    .ValidationBox {
        width: 100%;
    }
    .TituloDestacado {
        font-size: 25pt;
        font-weight: 400;
        font-family: "Univers-bold", sans-serif;
        color: #4c148c;
        margin-top: 0%;
        margin-bottom: 10%;
        text-align: center;
    }
    .text-especial {
        color: black;
        font-size: 14pt;
    }
    .Vigencia {
        margin-bottom: 0%;
        padding-left: 20%;
        padding-right: 20%;
        text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    }
    .linkMecanica {
        margin-top: 10%;
    }
    .bottom {
        width: 100%;
        position: static;
        bottom: auto;
    }
    #absolute {
        width: 80%;
        margin-top: -100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    #absolute h1 {
        font-size: 9vw;
    }
    #absolute h2 {
        font-size: 5vw;
    }
    .Vigencia {
        text-align: center;
        font-size: 4vw;
        margin-bottom: 5%;
        text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.46);
    }
    .cont-boton {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .inverse {
        display: flex;
        flex-wrap: wrap-reverse !important;
    }
}

.ganador {
    font-size: 16pt;
    font-weight: 400;
    font-family: "Univers-bold", sans-serif;
    color: #4c148c;
    text-align: center;
    ;
}

.color404 {
    background: #cdcdcd;
    background-image: url(https://promofedex.com.mx/images/404-01.png);
    background-size: cover;
    /* Resize the background image to cover the entire container */
    background-color: #2A246D;
}

.fondo-404 {
    display: flex;
    justify-content: center;
    align-content: center;
}

.box404 {
    max-width: 600px;
    border: 3px solid white;
    color: white;
    margin-top: 4%;
    padding: 3%;
    text-align: center;
}

.text-404 {
    font-size: 24pt;
}