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


    /*Titles*/
    h1 { font-size: 44px; }
    .content { padding: 0 20px; }
    .top-section-title .title { font-size: 30px; }

    /*Hero*/
    .hero .content .text-wrapper { max-width: 90%; margin: 0 auto 60px; }

    /*Slick Arrows*/
    .slick-slider button.slick-arrow.slick-next:hover:before{ margin-left: -9px; }
    .slick-slider button.slick-arrow.slick-prev:hover:before{ margin-left: 10px; }

    .carrousel-arrow.carrousel-next:hover:before{ margin-left: -9px; }
    .carrousel-arrow.carrousel-prev:hover:before{ margin-left: -9px; }

}

@media screen and (max-width: 1024px){
    
    .top-section-title { width: 100%; }
    .top-section-title .sub-title{ font-size: 13px; }

}

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

    /*Generics*/
    h1 { font-size: 32px; }
    h4 { font-size: 22px; }
    .content { padding: 0 20px; }
    .top-section-title .title-text { font-size: 30px; }

    /*Hero*/
    .hero .content .text-wrapper { max-width: 100%; }
    .hero .content .text-wrapper .sub-title { font-size: 16px; }
    .hero .content .text-wrapper .button {  padding: 9px 24px; font-size: 14px; }

}