@font-face {
    font-family: GothamMedium;
    src: url("/assets/css/gotham/Gotham-Medium.otf") format("opentype");
}

@font-face {
    font-family: GothamBook;
    src: url("/assets/css/gotham/Gotham-Book.otf") format("opentype");
}
.banner-appslider-bg{
    width:100%; 
    height:450px; 
    display:flex; 
    align-items:center; 
    justify-content:flex-end;
    overflow: hidden;
    animation-name: banner_bg;
    animation-duration: 1s;
    animation-timing-function: ease;
}


@keyframes banner_bg {
    0%   {opacity:.5;}
    /* 25%  {opacity:.25;}
    50%  {opacity:0.5;}
    75%  {opacity:0.75;} */
    100% {opacity:1;}
  }


.banner-appslider-blur{
    width: 1300px; 
    height:244px;
    backdrop-filter: blur(20px);
    border-top-left-radius: 122px;
    border-bottom-left-radius: 122px;
    display:flex; 
    align-items:center; 
    background-color: rgba(255,255,255,0.05);
    padding-left:140px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    opacity:0;
    animation-name: blur_effect;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-fill-mode: forwards;

}

@keyframes blur_effect {
    0%   { width: 0px;}
    /* 25%  {opacity:.25;}
    50%  {opacity:0.5;}
    75%  {opacity:0.75;} */
    100% {width: 1300px; opacity:1; }
  }

.banner-appslider-text{
    margin-left:-90px;
    width:170px;
    height:auto;
    animation-name: banner_main_text;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;

}

@keyframes banner_main_text {
    0%   { margin-left:-90px;  width:170px;}
    /* 25%  {opacity:.25;}
    50%  {opacity:0.5;}
    75%  {opacity:0.75;} */
    100% {margin-left:-70px;  width:206px;}
  }

.banner-appslider-product{
    /* margin-top:-40px; */
    position:relative; 
    left:-100px;
    z-index:3;
}

.banner-appslider-buttons{
    width:243px;
    position:relative; 
    left:-215px;
    top:80px;
    z-index:2; 
    text-align:center;
}

.banner-app-slider-price{
    display:inline-flex;
    width:243px;
    height:83px;
    background:url(/assets/banner/price_button.png);
    justify-content: center;
    align-items: center; 
    color: #fff;    
    font-size:45px;     
    font-family: 'GothamMedium', sans-serif;
    margin-bottom:10px;
    background-repeat: no-repeat;
}

.banner-app-slider-buy{
    display:inline-flex;
    width:171px;
    height:39px;
    background:url(/assets/banner/start_buying_button.png);
    justify-content: center;
    align-items: center; 
    color: #fff;       
    font-size:17px;   
    font-family: 'GothamBook', sans-serif;  
    background-repeat: no-repeat;
}
@media(max-width:1800px){
    .banner-appslider-blur{
        margin-right:-100px;
    }
}

@media(max-width:1600px){
    .banner-appslider-blur{
        margin-right:-200px;
    }
}

@media(max-width:1600px){
    .banner-appslider-blur{
        margin-right:-300px;
    }
}

@media(max-width:1480px){
    .banner-appslider-buttons{
       left:-215px;
    }
}

@media(max-width:1430px){
    @media(max-width:1600px){
    .banner-appslider-blur{
        margin-right:-400px;
    }
}
}

@media(max-width:1200px){
    .banner-appslider-bg{
        height: 347px;
    }
}

@media(max-width:980px){
    .banner-appslider-buttons{
        margin-top:95px;
        margin-left: -33px;

    }
    .banner-appslider-product{
        order:2;
        left: -225px;
    }
    .banner-appslider-buttons > div:last-child{
        display:none;
    }
}

@media(max-width:930px){
    .banner-appslider-product{
        width:500px;
        left: -300px;
    }
}

@media(max-width:840px){
    .banner-appslider-product{
      
        width:400px;
    }

    .banner-appslider-bg{
        padding-bottom:30px;
    }
}

@media(max-width:670px){
    .banner-appslider-product{
      
        left: -350px;
    }

    .banner-appslider-buttons > div:last-child{
        display:inline-flex;
    }

    .banner-appslider-buttons{
        /* margin-top:0px;
        margin-left: 0px;
        top:0px; 
        left:20px; */
        margin-top:100px;
        margin-left: 20px;

    }

    .banner-app-slider-buy{
        display:none!important;
    }

    .banner-appslider-blur{
        display: flex;
    }

    .banner-appslider-text{
        width: 30vw!important;
    }
}

@media(max-width:570px){

    .banner-appslider-buttons{
        display:nones;
    }
    .banner-appslider-product {
        width: 280px;
    }
    .banner-appslider-text{
        width: 50vw;
    }

    .banner-appslider-buttons{
        
        margin-left: 50px;

    }
}

@media(max-width:450px){
    .banner-appslider-product{
      
        left: -340px;
        width: 200px;
    }

}