@font-face {
    font-family: 'Cera Stencil';
    src: url('../fonts/Cera-Stencil-Bold.eot');
    src: url('../fonts/Cera-Stencil-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Cera-Stencil-Bold.woff2') format('woff2'),
        url('../fonts/Cera-Stencil-Bold.woff') format('woff'),
        url('../fonts/Cera-Stencil-Bold.ttf')  format('truetype'),
        url('../fonts/Cera-Stencil-Bold.svg#Cera Stencil') format('svg');
}
@font-face {
font-family: 'Cera Stencil Medium';
src: url('../fonts/Cera-Stencil-Medium.eot');
src: url('../fonts/Cera-Stencil-Medium.eot?#iefix') format('embedded-opentype'),
     url('../fonts/Cera-Stencil-Medium.woff2') format('woff2'),
     url('../fonts/Cera-Stencil-Medium.woff') format('woff'),
     url('../fonts/Cera-Stencil-Medium.ttf')  format('truetype'),
     url('../fonts/Cera-Stencil-Medium.svg#Cera Stencil') format('svg');
}
iframe {
    width: 100%!important;
    min-height:60em!important;
}
::-webkit-scrollbar { 
    width: 0;
    background: transparent;
}
#progressBarContainer {
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
}
#progressBar {
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    background: linear-gradient(to top, #FFCC03, rgb(58, 54, 54),  black);
    height: 0;
    opacity: 0;
}
body {
    margin: 0 auto;
    padding: 40px 40px;
    position: relative;  
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1F1D2B;
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(https://bonobo-mailer.s3.eu-west-1.amazonaws.com/assets/img/b-exp/bg-desktop.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    
}

.max-120 {
    max-width: 1200px;}

body::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        left: -10%;
        top: 158px;
        filter: blur(160px);
        background-color: #afad23;
        z-index: -99;
}
body::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        left: 40%;
        top: 550px;
        background-color: #b96f72;
        filter: blur(180px);
        z-index: -99;
}
button {
    padding: 1.5em 5em;
    background: rgb(50,48,48);
    background: linear-gradient(264deg, rgb(20, 17, 17) 0%, rgb(36, 26, 31) 100%);
    border: none;
    border-radius: .5rem;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .2rem;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: .2s ease-in-out;
    box-shadow: 0px 0px 3px rgb(184, 184, 184);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    }
button:hover {
    background: rgb(82, 79, 79);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;   
}
.btn:link,
.btn:visited {
    font-size: 3rem;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 1.5rem 3rem;
    text-transform: uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
    background-size: 230%;
    transition: all .3s
}
.frame {
    background: rgba( 255, 255, 255, 0.15 );
    box-shadow: 0 8px 32px 0 rgba(8, 10, 44, 0.4);
    backdrop-filter: blur( 6px );
    -webkit-backdrop-filter: blur( 6px );
    border-radius: 10px;
    border: 0px solid rgba( 255, 255, 255, 0.18 );
    transition: 0.3s;
    max-width:1900px;
}
.yellow {
    color:#FFCC03;
}
.white {
    color:white;
    font-size:2rem;
    line-height:2.3rem;
}
.text-add {
    font-family: 'Cera Stencil Medium';
}
.mt-120 {
    margin-top:120px;
}

@media (max-width: 1844px) {

    iframe {
        width: 100%!important;
        min-height:52em!important;
    }
}

@media (max-width: 1754px) {

    iframe {
        width: 100%!important;
        min-height:50em!important;
    }
}


@media (max-width: 1614px) {

    iframe {
        width: 100%!important;
        min-height:48em!important;
    }
}

@media (max-width: 1498px) {

    iframe {
        width: 100%!important;
        min-height:44em!important;
    }
}
@media (max-width: 1382px) {

    iframe {
        width: 100%!important;
        min-height:41em!important;
    }
}

@media (max-width: 1294px) {

    iframe {
        width: 100%!important;
        min-height:38em!important;
    }
}
@media (max-width: 1210px) {

    iframe {
        width: 100%!important;
        min-height:35em!important;
    }
}


@media (max-width: 1200px) {
.container span.text-special {
    font-size: 3.5rem!important;
}
iframe {
    width: 100%!important;
    min-height:30em!important;
}
}



@media (max-width: 991px) {
body {
    padding:40px 20px;
}    
iframe {
    width: 100%!important;
    min-height:25em!important;
}
.container span.text-special {
    font-size: 3rem!important;
}
.white {
    font-size: 1.5rem;
    line-height: 1.5rem;;
}
.img-log {
    max-width:250px;
}
.mt-120 {
    margin-top:60px;
}
}     
@media (max-width: 767px) {   
    iframe {
        width: 100%!important;
        min-height:16em!important;
    }
.img-log {
    max-width:250px;
}
button {
    padding:1em 1.5em;
}
.mt-120 {
    margin-top:40px;
}
body::after {
        width: 300px;
        height: 300px;
        left: 20%;
}
iframe {
    min-height:300px!important;
}
body::after {
    top: 350px;
}
}
@media (max-width: 575px) {   
iframe {
    min-height:16em!important;
}
.container span.text-special {
    font-size: 2rem!important;
}
.white {
    font-size: 1.1rem;
    line-height: 1.2rem;;
}
body {
    padding:20px 20px;
}
body::before {
    width: 100px;
    height: 100px;
    top: 58px;
} 
body::after {
    width: 100px;
    height: 100px;
    top: 258px;
} 
}    
@media (max-width: 550px) {   
    iframe {
        min-height:14em!important;
    }
}
@media (max-width: 500px) {   
    iframe {
        min-height:12em!important;
    }
}  
@media (max-width: 440px) {   
    iframe {
        min-height:10em!important;
    }
} 
@media (max-width: 380px) {   
    iframe {
        min-height:6em!important;
    }
} 
/* ------------ Inicio texto que entra y sale ------------ */
.container span.text-special {
font-size: 5rem;
padding: 0.5rem 0;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
color:white;
font-family: 'Cera Stencil';
}
span.typed-text.text-special {
font-weight: normal;
font-family: 'Cera Stencil Medium';
color: #FFCC03!important;
}
@keyframes blink {
0%  { background-color: #ccc; }
49% { background-color: #ccc; }
50% { background-color: transparent; }
99% { background-color: transparent; }
100%  { background-color: #ccc; }
}
/* ------------ Fin texto que entra y sale ------------ */