/* Cyber Monday Banner Styles */
@font-face {
    font-family: 'proxima-semibold';
    src: url('font/proximanova-semibold.woff2') format('woff2'),
        url('font/proximanova-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proximanova-bold';
    src: url('font/proximanova-bold.woff2') format('woff2'),
        url('font/proximanova-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.banner-top {
    height: 90px;
    background: #fc8f5b;
    background: -moz-linear-gradient(left, #fc8f5b 0%, #ed6e4c 50%, #fc4f5b 100%); 
    background: -webkit-linear-gradient(left, #fc8f5b 0%,#ed6e4c 50%,#fc4f5b 100%); 
    background: linear-gradient(to right, #fc8f5b 0%,#ed6e4c 50%,#fc4f5b 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8f5b', endColorstr='#fc4f5b',GradientType=1 ); 
}
.banner-top a{
    text-decoration: none;
}

.banner-top .container {
    display: grid;
    grid-template-columns: 4fr 1fr;
    color: white;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
    line-height: 26px;
}
.banner-top .container > div:nth-child(1) .text {
    background: url(img/bg-banner-cyberm.svg) center 25px no-repeat;
    display: inline-block;
    padding: 19px 90px;
    background-size: contain;
}
.banner-top .container div:nth-child(1) .text span {
    font-size: 18px;
    text-align: center;
    font-weight: 400;
}
.banner-top .container div:nth-child(2) .banner-discount {
    font-size: 64px;
    font-weight: 600;
    line-height: 60px;
    text-transform: uppercase;
    display: inline-block;
    padding-top: 15px;
}
.banner-top .container div:nth-child(2) .banner-discount div {
    font-size: 32px;
    line-height: 25px;
    padding-left: 8px;
    display: inline-block;
    position: inherit !important;
}
.banner-top .container div:nth-child(2) > div:not(.banner-discount) {
    display: inline-block;
    position: relative;
    top: -13px;
    left: -5px;
}
.banner-top .container div:nth-child(2) .banner-discount div span {
    font-size: 16px;
    font-weight: 400;
}
/* aniversario2020 Landing Styles */


#fechaDiv {
    color: #ffffff;
    background-color:#292828;
    padding: 5px 10px;
    font-family: 'proxima-nova';
    font-weight: 600;
    font-size: 17px;
    margin: 30px 0px 0px 0px;}

 #textoDiv {
    color: #292828;
    margin: 16px 0px;
     width: 400px;}

#wrapper {
    min-height: 480px;
}
#wrapper-landing {
    font-family: 'proxima-nova';
}
.header-wrapper {
  background: #f6f7fb;
  min-height: 700px;
}
.header-wrapper .container,
.discounts-wrapper .container, 
.banner-top .container {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height:250px;
}
.logo {
    padding-top: 40px;
    width: 170px;
    height: 60px;
    padding-bottom: 20px;
}
.logo > a > img {
    width: 85%;
}
section.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background-image: url(img/fondo.png);
    background-position: center;
}
section.header {
    display: inline-block;
}
.hero-text {
    color: white;
    font-family: 'proxima-nova';
}
.hero-text h1{
    font-size: 38px;
    font-family: 'proximanova-bold';
    margin: 40px 0px 3px 0px;
    color:#292828;
    line-height: 50px;
}
.hero-text h1 span {
    font-size: 35px;
}
.hero-text div:first-child {
    font-size: 18px;
}

.hero-text div:nth-child(3) {
    font-size: 17px;
}
.aniversario2020-logo {
    text-align: center;
}
.aniversario2020-logo img {
    width: 120%;
}
.discounts-wrapper {
    background-color: white;
}
section.discounts {
    position: relative;
    top: -148px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    grid-row-gap: 35px;
    margin-bottom: -115px;
}
.discounts > a {
    font-size: 17px;
    color: #363635;
    font-weight: 600;
    margin: 0 auto;
    display: inline-block;
    -webkit-transition: color 250ms ease-out;
    -moz-transition: color 250ms ease-out;
    -o-transition: color 250ms ease-out;
    transition: color 250ms ease-out; 
    text-decoration: none;
}
.discounts > a:hover {
    text-decoration: underline;
}
.box {
    width: 85%;
    text-align: center;
    padding: 45px 0;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 3px rgba(23,28,33,.08);
    color: #292828;
    font-size: 20px;
    display: inline-block;
    justify-self: center;
    padding-bottom: 50px;
}

.boxRecomendado {
    width: 85%;
    text-align: center;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 3px rgba(23,28,33,.08);
    color: #292828;
    font-size: 20px;
    display: inline-block;
    justify-self: center;
}

.recomendado {background-color: #292828;
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
    padding: 10px;}

 .aniversario2020-logo {
    display: block; 
    }
    
    .aniversario2020-logo-mobile {
    display: none;
    }
.discount {
    font-size: 55px;
    font-weight: 600;
    line-height: 100px;
    font-family: 'proximanova-bold';
}
.discount div {
    font-size: 50px;
    line-height: 33px;
    padding-left: 8px;
    display: inline-block;
}
.discount div span {
    font-size: 20px;
    font-weight: 400;
}
.bt-gradient {  
    position:relative;
    font-size: 18px;
    color: white;
    text-decoration: none;
    padding: 5px 25px;
    border-radius: 13px;
    display: inline-block;
    margin-top: 25px;
    line-height: 30px;
    box-sizing: border-box;
    background-color: #008aff;
    background-size: 400%;
    z-index: 1;
}  
.bt-gradient:hover{  
    animation: animateGradient 5s linear infinite;
}
.bt-gradient:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 13px;
    opacity: 0;
    transition: 0.5s; 
}
.bt-gradient:hover:before { 
    filter: blur(8px);
    opacity:.5;
    animation: animateGradient 5s linear infinite;
}
@keyframes animateGradient {
    0% { background-position: 0%; }
    
    100%{ background-position: 400%;}
}


@media (max-width: 768px) {
    section.hero {background-image:none;}
    .header-wrapper {
        padding: 0 25px;
        background-position: center;
    background-repeat: no-repeat;
    background-image: url(landings/aniversario2020/img/fondo.png);
    }

.header-wrapper .container,
.discounts-wrapper .container, 
.banner-top .container {
    height:900px;
}
    
    .logo {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .logo > a > img {
        width: 80%;
    }
    .hero-text {
        padding: 0px 20px 20px 20px;
        float: inherit;
        text-align: center;
        justify-self: center;
    }
    .hero-text h1 {
        font-size: 24px;
        margin: 40px 0px 9px 0px;
    }
    
    #fechaDiv {font-size:22px;}
    #textoDiv {font-size:22px;width:auto;}
    
    .hero-text h1 span {
    font-size: 30px;
    }
    .hero-text div:first-child {
        font-size: 18px;
    }
    .hero-text div:nth-child(3) {
        font-size: 20px;
    }
    .cyber-monday-logo img {
        width: 100%;
    }
    section.hero,
    section.discounts {
        display: grid;
        grid-template-columns: 1fr;
        padding-bottom: 160px;
    }
    section.discounts {
        padding: 0 30px;
    }
    .box {
        font-size: 18px;
        padding: 30px 0px;
        border-radius: 5px;
        max-width: 360px;
        justify-self: center;
        width:85%;
        
        
    }
    
    .boxRecomendado {font-size: 18px;
        border-radius: 5px;
        max-width: 360px;
        justify-self: center;
        width:85%;
    padding-bottom:30px;}

    .discount {
        font-size: 60px;
    }
    .discount div {
        font-size: 40px;
        line-height: 28px;
    }
    .bt-gradient {
        margin-top: 30px;
        font-size: 16px;
    }
    .separador {
        display: none;
    }
    
    .aniversario2020-logo {
        display: none;
    }
    
    .aniversario2020-logo-mobile {
        display: block;
        text-align: center;
        padding-bottom: 60px;
    }
    
    
}