/*begin rayban page*/


.information-rayban b,
.information-rayban strong {
    font-weight: 500;
}

.banner-responsive-rayban{
    background-image: url('../image/rayban/banner_raybanmeta.webp');
    height:450px;
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

.text {padding: 20px;}

.banner-responsive-rayban.banner2{
    background-image: url('../image/rayban/banner_raybanmeta-2.webp');
}

.row-carousel {display:flex;align-items:center;}
.row-carousel > div {width:85%;}
.row-carousel .box-right {width:15%;font-size:24px;}
.box-head.bh-vto {display:none;}

.row-carousel .box-right a::after {
    display: inline-block;
    content: "";
    width: 30px;
    height: 30px;
    margin-left: 20px;
    color: #fff;
    background: url(../image/right-arrow.svg) center center no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.buttons {width:250px;height:40px;border-radius:100px;background:#F6F6F6;position:relative;cursor:pointer;}
.buttons .back{width:55%;height:100%;border-radius:100px;background:#2C333A;position:absolute;transition:all linear 300ms;}
.buttons .back.left {transform:translateX(0%);}
.buttons .back.right {transform: translateX(80%);}
.buttons .t{position:absolute;width:100%;height:100%;display:flex;justify-content:space-between;align-content:center;align-items:center;padding:10px 15px;}
.buttons .t .b{width:50%;transition:all linear 300ms;}
.buttons .b.active{color:#fff;}

.nascosto {height:0px;overflow:hidden;}


.information-rayban-container{
    max-width: 1600px !important;
    margin:20px auto !important;
    font-size: 16px;
}
.information-rayban-container h1,.information-rayban-container h2{
    font-size:28px;
    font-weight:400;
}
.information-rayban-container h3{
    font-size:24px;
    font-weight:400;
}
.boxes {max-width:1300px;margin:0 auto;}
.boxes h2 {margin-bottom:20px;line-height:40px;}

.boxes b {display:block;font-weight:400;font-size:20px;margin:30px 0 10px 0;padding-left:40px;}
.rayban-box b:nth-of-type(1) {background:url('../image/rayban/icon_photo.svg') left center no-repeat;}
.rayban-box b:nth-of-type(2) {background:url('../image/rayban/icon_listen.svg') left center no-repeat;}
.rayban-box b:nth-of-type(3) {background:url('../image/rayban/icon_ai.svg') left center no-repeat;}
.rayban-box b:nth-of-type(4) {background:url('../image/rayban/icon_translate.svg') left center no-repeat;}

.rayban-box {
    padding:40px;
    aspect-ratio:1 / 1;
    margin-bottom:20px;
    text-align:left;
    display:flex;
    align-items:center;
}
.rayban-box.video {
    padding:0;
}
.mt-40{
    margin-top:40px;
}
.mt-20{
    margin-top:20px;
}

.scopri a span{text-transform:uppercase;text-decoration:underline;font-weight:500;}
.scopri h3{margin:30px 0;}


@media screen and (max-width: 768px) {
 .boxes .col-md-6 {padding:0;}
    .information-rayban-container h1,.information-rayban-container h2{
        font-size:22px;
        line-height:24px;
    }
    .information-rayban-container h3{
        font-size:20px;
    }
    .boxes b {font-size:20px;}
    .row-carousel {display:flex;align-items:center;flex-direction:column;}
    .row-carousel > div {width:100%;}
    .row-carousel .box-right {width:100%;font-size:20px;margin-top:40px;}
}

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

    .banner-responsive-rayban.banner2{
        background-image: url('../image/rayban/banner_raybanmeta-2.webp');
        background-position: center center;
    }
}

@media only screen and (max-width: 900px)    
{
 .boxes.middle {display:grid;}
 .boxes.middle .col-md-6:nth-of-type(1) {order:2;}
    .rayban-box {
        aspect-ratio: auto;
    }

    .banner-responsive-rayban{
        background-image: url('../image/rayban/banner_raybanmeta-mobile.webp');
        background-size: cover;
        background-position: top center;
        height:400px;
    }
    .banner-responsive-rayban.banner2{
        background-image: url('../image/rayban/banner_raybanmeta-mobile-2.webp');
        background-position: bottom center;
    }
}