@font-face {
    font-family: 'rubik';
    src: url(../font/Rubik/Rubik-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'assistant';
    src: url(../font/Assistant/Assistant-VariableFont_wght.ttf);
}

/* RESET */
*, *:before, *:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}
html { background:#2d2d2d; }
body, section, .container {
    font: 62.5% 'assistant', sans-serif;
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    color: #fff;
    width: 100%;
}
a { color: inherit; text-decoration: none; }
input{ color:#fff !important; } 
ul { list-style: none; }
.hide { display: none !important; }
.hidden{ visibility: hidden; }
.visible { opacity: 1 !important; }
.orange { color:#F6B617 !important; font-size: 1.3rem; }
/* END RESET */

@media ( min-width: 0px ){
    #div_1_section_2, #div_2_section_2, #div_3_section_2 { display: none; }
    #div_1_section_2_sm, #div_2_section_2_sm { display: block; padding-top: 30px; }
    #div_1_section_2_sm img { margin:  0; width: 90vw; }
    #div_2_section_2_sm > div { margin-bottom: 30px; }
    #div_2_section_2_sm img { height: 12vw; width: 40vw; }

    #down_space { height: 0px; bottom: 0;}

    #footer_logo img { width: 30vw; } 

    #header_content {
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 100vw;
        z-index: 1;
    }
    #header_description {
        color: #FFF;
        font-family: 'rubik';
        font-size: 32px;
        line-height: 40px;
        padding: 10px 15px;
        z-index: 1;
    }
    #header_description .orange { font-size: 28px; }
    #header_img, #header_img_alt {
        left: 0;
        opacity: 0.5;
        position: absolute;
        min-height: 100vh;
        top: 0;
        overflow: hidden;
        min-width: 100vw;
        z-index: 0;
    }
    #header_img { display: none; }
    #header_logo { padding-top: 10vh; z-index: 1;text-align: center; } 
    #header_logo img { width: 70%; max-width: 420px }

    #img_section_1 { width: 100vw; }
    #img_section_1_box { position: relative; z-index: 1; }

    #main_body {
        background:#2d2d2d;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        position: relative;
        z-index: 1;
    }

    #mavideo {
        position: fixed;
        width: auto;
        height: 100%;
        top:-0.1%;
        left:-150%;
        -webkit-filter : opacity(40%); /* Chrome, Safari, Opera */
        filter : opacity(40%);
    }

    #navbar { display: none; }
    #navbar_sm {
        align-items: center;
        background-color: rgba(0, 56, 56, 0.5);
        display: flex;
        justify-content: space-evenly;
        position: fixed;
        bottom: 0%;
        width: 100vw;
        z-index: 99;
        height: 100px;
        opacity: 1;
    }
    #navbar_sm div { text-align: center; width: 33vw; }
    #navbar_sm img { margin-left: -7px; width: 20vw; }
    #navbar_sm a { font-size: 18px; }

    #video_container {
        overflow: hidden;
        position: fixed;
        height: 812px;
        width: 100vw;
        top: 0;
        left: 0;   
    }

    header { height: 100vh; position: relative; z-index: 2; }

    .device2 { height: 250px; width: auto; }
    .icone_device { width: 80px !important; height: auto !important; justify-items: center; padding-bottom: 15px;}
    .mobile_apps { flex-direction: column; justify-content: center; }
    .mobile_apps > div { padding-top: 20px; }
    .section {
        background-color:#2d2d2d;
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        position: relative;
        width: 100vw;
        z-index: 1;
    }

    .box-4 { padding-top: 30px; text-align: center; }
    .f-align-center { align-items: center; }
    .f-around { justify-content: space-around; } 
    .f-basis-10 { padding-top: 30px; }
    .f-basis-20 { flex-basis: 20vh; }
    .f-basis-25 { flex-basis: 25vh; }
    .f-basis-40 { flex-basis: 40%; }
    .f-basis-50 { flex-basis: 50%; }
    .f-basis-60 { flex-basis: 60%; padding-bottom: 30px; }
    .f-center { justify-content: center; }
    .f-column { display: flex; flex-direction: column; }
    .f-grow { flex-grow: 1; }
    .f-row { display: flex; flex-direction: row; }
    .gray { color: #a2a2a2; }
    .gray a { color: #a2a2a2; }
    .rubik { font-family: 'rubik'; line-height: 1.5rem }
    .assistant { font-family: 'assistant'; line-height: 1.5rem }
    .mb-13 { margin-bottom: 13px; }
    .mb-26 { margin-bottom: 26px; }
    .medium-rubik { font-family: 'rubik'; line-height: 2rem; }
    .medium-assistant { font-family: 'assistant'; line-height: 2rem; }
    .pt-15 { padding-top: 30px; }
    .px-7 { padding: 0 7px; }
    .size-18 { font-size: 16px; }
    .size-22 { font-size: 20px; }
    .size-25 { font-size: 22px; }
    .size-35 { font-size: 30px; }
    .text-center { text-align: center; }
    .block1{padding: 30px 20px 0 20px;}
    .box2_title{ font-size: 32px; line-height: 2.4rem; text-align:center; padding-bottom: 30px;}
    .device_title{ font-size: 22px; font-family: 'rubik'; text-align: center;  }
    .box3_title{ font-family: 'rubik'; font-size: 32px; line-height: 2.4rem; text-align: center; padding-bottom: 30px;}
    .box3_description{ font-size: 18px; font-family: 'assistant'; text-align: center; padding-bottom: 40px;}
    #header_logo{ z-index: 1; }
}

 @media (orientation: landscape) and (max-device-width : 850px) {
    header{
        height: 150vh;
    }

    #header_content{
        height: 100vh;
    }

    .header_slider{
        height: 100vh;
    }

    #header_description {
        color: #FFF;
        font-family: 'rubik';
        font-size: 32px;
        line-height: 3rem;
        padding: 2vh 10vw;
        z-index: 1;
        height: 100vh;
    }
    .input_email{ 
        transform: translateY(4px) !important; 
    }

    #slider_dots {transform: translateY(10px) !important; z-index: 1;}
} 

@media ( min-width: 576px ) {
    #header_img { display: flex; top: 0px; }  
    #header_img_alt { display: none; }
    #header_logo { padding-top: 21vh; }
    #header_description{ font-size: 32px;padding: 10px 35px; }
    #mavideo { left:-150%; }
}

@media ( min-width: 768px ) {
    #btn_section_1_box { padding: 5vh 0 15vh 0; }  
    #div_1_section_2, #div_2_section_2, #div_3_section_2 { display: flex; }
    #div_1_section_2_sm, #div_2_section_2_sm { display: none; }
    #footer_logo img { width: 10vw; } 
    #footer-menu { flex-direction: row; padding: 0; }
    #footer-menu div { padding: 26px; }
    #header_description { font-size: 32px; }
    #header_description .orange { font-size: 32px; }
    #img_section_1 { width: 50vw; }
    #mavideo { left:-100%; }
    #navbar {
        align-items: center;
        background-color: #2d2d2d;
        display: flex;
        height: 70px;
        position: fixed;
        width: 100vw;
        z-index: 3;    
    }
    #navbar_login { padding: 13px 52px; }
    #navbar_logo { padding: 13px 52px;  }
    #navbar_logo img { width: 10vw; }
    #navbar_sm { display: none; }

    .section { flex-direction: row; height: 100%; }
    .section.f-column { flex-direction: column; }
    
    .f-basis-10 { padding: 30px; }
    .size-18 { font-size: 14px; }
    .size-22 { font-size: 18px; }  
    .size-25 { font-size: 20px; }    
    .size-35 { font-size: 30px; }
}

@media ( min-width: 992px ) {  
    #device-img {
        max-height: 100%;
        /* width: 100%; */
    }    
    #mavideo { left:-50%; }

    .device2 { height: 400px; } 
    
    .size-18 { font-size: 18px; }   
    .size-22 { font-size: 22px; }   
    .size-25 { font-size: 25px; }    
    .size-35 { font-size: 35px; }
    
    .section { padding: 100px 0 0 0; }
}

@media ( min-width: 1280px ) {
    #header_img { top: -100px; }
    #mavideo { height: 120%; left:0%; }
}

/***************************/
/*       BUTTON TYPE        */
/***************************/

#header_btn_box { padding: 0 0; font-family: 'rubik';}
#btn_section_1_box, #btn_section_1_email { padding: 25px 0 50px 0; }
#navbar_sm .bt_usual { padding: 10px 15px; }

.bt_alert_border { border: 2px solid#F6B617 !important; }
.bt_usual {
    background: #F6B617 ;
    background-size: 300% 100%;
    background-position: left bottom;
    border-radius: 10px;
    padding: 10px 25px;
    font-family: 'assistant';
    font-size: 18px; 
}
    .bt_usual:hover {
        background:  #FFF ;
        background-size: 300% 100%;
        background-position: right bottom;
        border-color: #FFF;
        color:#F6B617;
        transition: all 0.2s ease;
    }
.bt_hide { display: none !important; }
.bt_info { display: none; } 

.btn_email {
    background: #F6B617 ;
    background-size: 300% 100%;
    background-position: left bottom;
    border-radius: 10px;
    /* border-radius: 10px; */
    color: #FFF;
    cursor: pointer;
    display: block;
    font-family: 'assistant';
    font-size: 16px;
    height: 50px;
    padding: 14px;
    margin: 16px;
    text-align: center;
    width: 60vw;
}
    .btn_email:hover {
        background:  #FFF ;
        background-size: 300% 100%;
        background-position: right bottom;
        border-color: #FFF;
        border-left: 1px solid#F6B617;
        color:#F6B617;
        transition: all 0.2s ease;   
    }

.checkbox_email {
    display: block;
    margin-left: 20px;
    width: 100%;
    position: relative;
}  
    .checkbox_email label {
        color: #fff;
        cursor: pointer; 
        display: block;
        margin-bottom: 0;
        min-height: 20px;
        padding-left: 24px;
        position: relative;
    }
        .checkbox_email label span {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .checkbox_email label:before {
            background: linear-gradient( -45deg, #fff, #767676 );
            content: '';
            left: 0;
            height: 16px;
            position: absolute;
            top: 0;
            width: 16px;
            transition: transform 0.28s ease;
        }
        .checkbox_email label:after {
            content: '';
            display: block;
            width: 10px;
            height: 5px;
            border-bottom: 3px solid#F6B617;
            border-left: 3px solid#F6B617;
            transform: rotate(-45deg) scale(0);
            transition: transform ease 0.25s;
            position: absolute;
            top: 5px;
            left: 3px;
        }
        .checkbox_email label:hover::after { opacity: 0.5; }
        .checkbox_email input[type="checkbox"] {
            width: auto;
            opacity: 0.00000001;
            position: absolute;
            left: 0;
            margin-left: -10px;
        }
            .checkbox_email input[type="checkbox"]:checked ~ label:after { transform: rotate(-45deg) scale(1); }
            .checkbox_email input[type="checkbox"]:focus + label:before { outline: 0; } 

.input_email {
    margin-left: 16px !important;
    display: block;
    border: 1px solid white;
    border-radius: 10px;
    color:#2d2d2d !important;
    font-family: 'assistant';
    font-size: 24px;
    height: 50px;
    padding: 7px;
    margin: 7px -21px 7px 7px;
    width: 60vw;
}

@media ( min-width: 360px ) {
    .bt_usual { padding: 10px 50px; }    
}

@media ( min-width: 576px ) {
    #header_btn_box { padding: 100px 0}
    .btn_email{ 
        border-top-left-radius: 0px; 
        border-bottom-left-radius: 0px; 
        border-top-right-radius: 10px; 
        border-bottom-right-radius: 10px; 
    }
    .input_email{ 
        border-top-left-radius: 10px; 
        border-bottom-left-radius: 10px; 
        border-top-right-radius: 0; 
        border-bottom-right-radius: 0;
        transform: translateY(4px); 
    }
    .bt_info {
        color: #FFF;
        display: block;
        font-size: 16px;
        text-align: center;
    }

    #header_btn_email_checkbox_box,
    #btn_section_1_email_checkbox_box{ transform: translateX(-170px); }

    .btn_email, .input_email { display: inline-block; width: 260px; }
    .checkbox_email { margin-left: 280px; }
}    

@media ( min-width: 768px ) {
    .bt_usual { font-size: 18px; } 
    #btn_section_1_email_checkbox_box{ transform: translateX(0); }
    #btn_section_2_email_checkbox_box{ transform: translateX(-160px); }   
}

@media ( min-width: 992px ) {
    .btn_email{ width: 270px; font-size:18px; } 
    .input_email { width: 270px; font-size:18px; transform: translateY(-1px);}
    #btn_section_2_email_input{transform: translateY(0px)} 
    #btn_section_2_email_checkbox_box{ transform: translateX(-150px); }   
}

@media ( max-width: 1480px ) and ( min-width: 768px ) {
    #btn_section_1_email { padding: 0 6vw; }
    #btn_section_1_email .checkbox_email { margin-left: 13px; } 
    #btn_section_1_email_input,
    #btn_section_1_email_span{
        border-radius: 10px;
    }  
}

@media ( min-width: 1480px ){#btn_section_1_email_checkbox_box{ transform: translateX(-150px); } }


/***************************/
/*     SLIDER CAROUSEL     */
/***************************/

#slider_content {
    display: flex;
    height: 100vh;
    transition: transform 1s;
}

.sc_info {
    display: flex;
    flex-direction: column;
    font-family: 'assistant';
    height: 30vh;
    justify-content: space-around;
    padding: 70px 55px 26px 55px; 
    text-align: center;
    width: 100vw;
}
.sc_description{
    font-size: 15px;
}
.sc_actor{
    font-size: 15px;
}
.sc_type{
    font-size: 15px;
}
.sc_img {
    align-items: center;
    display: flex;
    height: 50vh;
    justify-content: center;
    width: 100vw;
}
    .sc_img img {
        display: block;
        max-height: 30vh;
        max-width: 100vw;
    }

.sc_slider {
    display: flex;
    flex-basis: 60%;
    flex-direction: column;
    padding-bottom: 0px;
}

#slider_dots {
    display: flex;
    justify-content: center;
    
}

.sc_dot {
    background-color: #FFF;
    border-radius: 50%;
    height: 10px;
    margin: 13px 7px;
    width: 10px;
}
    .sc_dot:hover {
        cursor: pointer;
    }
    .sc_dot.sc_dot_selected {
        background-color:#F6B617;
    }

@media (orientation: landscape) and ( min-width: 0px ) {
    
    .sc_actor { font-size: 10px; }
    .sc_date { font-size: 12px; padding-top: 100px;}
    .sc_description { flex-grow: 1; font-size: 22px; margin: 7px 0; }
    .sc_title { font-size: 14px; }
    .sc_type { font-size: 10px; }
}

@media  ( min-width: 768px ) {
    .sc_actor { font-size: 16px; }
    .sc_date { font-size: 18px; }
    .sc_description { font-size: 22px; padding-top: 20px; }
    .sc_title { font-size: 30px; }
    .sc_type { font-size: 12px; }   
}

@media ( min-width: 992px ) {
    #slider_content { height: 100vh; }
    .sc_slider { flex-direction: row; }
    .sc_info { height: 50vh; padding: 26px 26px 26px 26px;  text-align: start; width: 50vw; }
    .sc_img { height: 60vh; width: 50vw; }  
    .sc_img img { max-height: 60vh; max-width: 50vw; }
    .sc_description { font-size: 18px; margin: 30px 0; padding-top: 5px; }
    .sc_title { margin-bottom: 5px; }
    .sc_type { font-size: 12px; }
    .sc_date { padding-top: 3px ; }

}

@media ( min-width: 1280px ) {
    .sc_description { padding: 0; }
}

/***************************/
/*     SLIDER COMMENTS     */
/***************************/

#slider_comments {
    display: flex;
    flex-basis: 40%;
    justify-content: center;
}

.sco_circle {
    border-radius: 50%;
    height: 120px;
    width: 120px;
}

.sco_stars img {
    height: 25px;
    margin: 7px 3px;
}

.sco_slider {
    align-items: center;
    display: none;
    flex-direction: column;
    padding: 13px; 
}
    .sco_slider.sco_slider_selected {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 13px; 
    }

.sco_body {
    font-family: 'assistant';
    line-height: 1.5rem;
    margin: 26px;
    text-align: center;    
}

.sco_summary {
    color:#F6B617;
    font-family: 'assistant';
    font-style: italic;
    line-height: 1.5rem;
    text-align: center;
} 

.sco_user {
    font-family: 'assistant';
    font-style: italic;
    line-height: 1.5rem;
    text-align: center;   
}

@media ( min-width: 768px ) {
    #slider_comments { justify-content: space-around; }
    .sco_slider { display: flex; }
}

/***************************/
/*     SLIDER FADE OUT     */
/***************************/

.header_slider {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    min-width: auto;
    height: 90vh;
    z-index: 0;    
}

.sfo_img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
    transition: opacity 2s;
    height: auto;
    min-width: 100vw;
    overflow-y: hidden;
    z-index: 0;
}
    .sfo_img.sfo_img_selected {
        opacity: 0.5;
        transition: opacity 2s;
        min-width: 100vw;
    }

@media (orientation: landscape) and( min-width: 0px ) {
    #header_slider_phone_plus, #header_slider_tab, #header_slider_web { display: none; }
    #header_slider_phone { display: block; }
}    

@media ( min-width: 360px ) {
    #header_slider_phone, #header_slider_tab, #header_slider_web { display: none; }
    #header_slider_phone_plus { display: block; }
}

@media ( min-width: 576px ) {
    #header_slider_phone, #header_slider_phone_plus, #header_slider_web { display: none; }
    #header_slider_tab { display: block; }
    #slider_dots {transform: translateY(-100px); z-index: 1;}
}

@media ( min-width: 880px ) {
    #slider_dots {transform: translateY(-60px); z-index: 1;}
}

@media ( min-width: 992px ) {
    #header_slider_phone, #header_slider_phone_plus, #header_slider_tab { display: none; }
    #header_slider_web { display: block; width: 100vw; }
    #slider_dots {transform: translateY(-350px); z-index: 1;}
}

@media ( min-width: 1400px ) {
    #slider_dots {transform: translateY(-300px); z-index: 1;}
}