/* ================================================================================================ */

/*                                           MAINBANNER                                             */

/* ================================================================================================ */



#hero-section {



    position: relative;

    width: 100%;

    aspect-ratio: 19.2/9;

    

    overflow: hidden;



    border-bottom: #292929;

    border-bottom-style: solid;

    border-bottom-width: 8px;







}



.hero-section__content{

    

    position: absolute;

    width: 100%;

    left: 0px;

    right: 0px;



    display: flex;

    align-items: center;

    flex-direction: column;

    text-wrap: nowrap;



}



.hero-section__img-wrapper{

    width: 100%; 

    position: relative; 

    z-index: -5;

}



.hs-img-visible-animation{

    opacity: 1;

    transition: all 1s;

}



.hs-img-hidden-animation{

    opacity: 0;

    transition: all 1s;

}



/* ----------------------------------------------------- */

/* Banner */



.hs-banner{

    

    position: relative;

    width: 100%;

    left: 0px;

    right: 0px;

    margin-top: 20px;

    margin-bottom: 25px;

   

    padding-top: 15px;

    padding-bottom: 15px;    

    display: flex;

    align-items: center;

    flex-direction: column;



    text-wrap: nowrap;

    background: rgba(255, 254, 254, .7);

    font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;

    

}



.hs-banner__pre-title {



    width: 100%;

    margin: 0px;

    

    display: flex;

    justify-content: center;

    

    font-size: 48px;

    font-weight: 300;

    text-align: center;

    background-color: rgba(48, 102, 187, 0.7);

    color:  white;  /* #ce0707, #7E0000  */

    

}



.hs-banner__title{



    width: 600px; 

    height: auto; 

    z-index: 2;

    margin-top: 20px;

    

}



.hs-banner__sub-title{



    position: relative;

    margin-top: 2px;

    margin-bottom: 2px;

    

    font-size: 36px;

    font-weight: 500;

    color:  #ce0707; /* #ce0707, #7E0000 */

    

}



.hs-banner__sub-sub-title{



    margin:0vw;



    font-weight: 600;

    font-size: 25px; 

    color: #224378; /* #224378 #292929 #428ccd*/



}



.hero-section__button{



    position: relative;

    width: auto;

    height: 100%;

    display: block;



    padding: 20px;

    text-align: center;

    align-content: center;



    font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;

    font-size: 32px;

    font-weight: 600;

    background: radial-gradient(rgb(250, 150, 15), rgb(153, 84, 4));

    color:  white; /* #ce0707, #7E0000 */

    border-radius: 15px;

    border-color: white;

    border-width: 2px;

    border-style: solid;

    text-decoration: none;

    

}



.hero-section__button:hover{

    background: radial-gradient(rgb(15, 150, 250), rgb(4, 84, 153));

}



/* ----------------------------------------------------- */

/* Images */



.hero-section__image {

    width: 100%;

}



/* ----------------------------------------------------- */

/* Mobile */



#main-banner__mobile-title-container{

    display: none;



}



/* ================================================================================================ */

/* ================================================================================================ */

/*                                          MEDIA QUERY                                             */

/* ================================================================================================ */

/* ================================================================================================ */





@media screen and (min-width: 769px) and (max-width: 1200px) {



    .hero-section__img-wrapper{

        aspect-ratio: 4/3;

    }



    #hero-section{

        aspect-ratio: auto;

        

    }



    .hero-section__content{

        position: relative;

        margin-bottom: 50px;

    }



    .hs-banner__pre-title{

        font-size: 30px;

    }



    .hs-banner__sub-title{

        font-size: 22px;

    }



    .hs-banner__sub-sub-title{

        font-size: 20px;

    }



    .hero-section__image{

        border-top: #292929;

        border-top-style: solid;

        border-top-width: 4px;

    }



    /* MOBILE PRESENTATION */



    .mobile-presentation{



        text-wrap: wrap;



        font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;

    

        font-size: 0.9em;

        

        display: flex;

        justify-content: space-between;

        align-items: flex-start;



        margin-top: 20px;

        margin-bottom: 50px;



       



        box-sizing: border-box;

        padding-left: 5px;

        padding-right: 5px;



  

    }    



    .mobile-presentation__info{

        max-width: 350px;

        width: 100%;

    }

    

    .mobile-presentation__header{

        font-size: 22px;

        

        padding-left: 10px;

        

        max-width: 350px;

        display: block;

        

        margin: 10px 0px 0px 0px;

        

        border-bottom-style: solid;

        border-color: #292929;

        font-weight: bold;

    

    }

    

    .mobile-presentation__text{

    

        max-width: 350px;

        width: 100%;

        

        box-sizing: border-box;

        padding-left: 8px;

        padding-right: 18px;

        

        text-align: center;



        font-size: 16px;

    

    }



    .mobile-presentation__paola-img{

    

        max-width: 150px;

        min-width: 100px;

        width: 100%;

        margin-top: 5px;

        margin-bottom: 5px;

    

        clip-path: circle();



    }



}



@media screen and (max-width: 768px) {



    .hero-section__img-wrapper{

        aspect-ratio: 4/3;

    }



    #hero-section{

        aspect-ratio: auto;

        



        border-top: #292929;

        border-top-style: solid;

        border-top-width: 8px;

    }



    .hero-section__image{

        border-top: #292929;

        border-top-style: solid;

        border-top-width: 4px;

    }



    .hero-section__content{



        background-color: white;

        position: relative;

        padding-bottom: 50px;



    }



    .hs-banner{

        text-wrap: wrap;

        margin-bottom: 0px;

        padding-bottom: 0px;

    }





    .hs-banner__pre-title{

        font-size: 30px;

    }



    .hs-banner__title{

        box-sizing: border-box;

        margin-top: 30px;

        margin-bottom: 5px;

        padding-left: 5px;

        padding-right: 5px;

        max-width: 500px;

        width: 100%;

    }



    .hs-banner__sub-title{

        display: none;

    }



    .hs-banner__sub-sub-title{

        font-size: 20px;

        text-align: center;

        margin-bottom: 10px;

    }



    .hs-banner__title{

        content:url("rsc/logo.png");

    }



    /* MOBILE PRESENTATION */



    .mobile-presentation{



        text-wrap: wrap;



        font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif !important;

    

        font-size: 0.9em;

        

        display: flex;

        justify-content: space-between;

        align-items: flex-start;



        margin-top: 20px;

        margin-bottom: 50px;



       



        box-sizing: border-box;

        padding-left: 5px;

        padding-right: 5px;



  

    }    



    .mobile-presentation__info{

        max-width: 350px;

        width: 100%;

    }

    

    .mobile-presentation__header{

        font-size: 22px;

    

        

        max-width: 350px;

        display: block;

        

        margin: 10px 0px 0px 0px;

        

        border-bottom-style: solid;

        border-color: #292929;

        font-weight: bold;

    

    }

    

    .mobile-presentation__text{

    

        max-width: 350px;

        width: 100%;

        

        box-sizing: border-box;

        padding-left: 8px;

        padding-right: 14px;

        

        text-align: center;



        font-size: 16px;

    

    }



    .mobile-presentation__paola-img{

    

        max-width: 150px;

        min-width: 100px;

        width: 100%;

        margin-top: 5px;

        margin-bottom: 5px;

        

    

        clip-path: circle();



    }



}