/*************************
 * Style slider swipper
 * slider-mega (pdoResource: &sliderType)
 * Homepage
 * Called in Chunk: pdowrapper_swipper_mega (53)
 *
 * cards : 1520 x 740
 * image : 740 x 740 
 */



.slider-mega.swiper-container {
    width: 100%;
    /*height: 670px;/*prevoir shadow box 650+ 2*10 */
    height: 100vw;

}
.slider-mega .swiper-wrapper {
     height:650px;
}

/* square > h100 */
.swiper-slide .row,
.swiper-slide .col-img,
.swiper-slide .col-meta{

	height:100vw !important
}


.slider-mega .swiper-slide {
    height:100vw;
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    /* preserve radius */
    overflow: hidden;
}
/* shadow effects in web/assets/project/urbanspree/scss/custom-b5.scss */


/* seconde col. avec meta superposée à l'image */
.col-meta{
    position: absolute;
    color:#fff;
}





.slider-mega .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.slider-mega .col-img{
    /*width:650px;*/
    background-size: contain;
    background-repeat: no-repeat;
}
/* gradient bg */
.slider-mega .col-img:after{
    background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
    content: "";
    width:100%;
    height: 100%;
    z-index: 0;
    position: relative;
    display: block;
}

/* xs 
.slider-mega .swiper-slide.card .card-body{
    position:absolute;
    left:-25%;

}
*/



.slider-mega .card-body{
    height:100%;
}
.slider-mega .card-body .flex-column{
    height:inherit;
}
/* .slider-mega (haut de page) */
.slider-mega .title{
    font-family: 'Inter', sans-serif;
    /*
    font-size: 60px;
    line-height: 72px;
    */
    font-size: 36px;/*56 */
    line-height: 46px;/*62 */
    font-weight: 800;
    text-transform: uppercase;
    text-align: left;
    word-break: normal;
}
/* top left : catégory, e.g. concert */
.slider-mega .cat{
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size:18px;
    letter-spacing: 2px;
}


/* bottom */
.list-group-b .list-group-item{
    border: 2px solid #000;
    padding: 0.16rem 0.7rem;
}
.list-group-b.list-group-horizontal > .list-group-item + .list-group-item {
    border-top-width: 2px;
    border-left-width: 0;
}

/* bottom left :date, heure .slider-mega .bl */
.slider-mega .bl{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size:16px;
}



/* price (bottom right) */


/* fonctionne si 1 el */
/*
.list-group-br.list-group-horizontal > .list-group-item:first-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
*/
.list-group-b.list-group-horizontal > .list-group-item:first-child:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}


.slider-mega .br{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size:16px;
}


/* sliders controls (top) */
/* hide default swipper arrow fonts */
.slider-mega .swiper-button-next:after, .swiper-button-prev:after{
    display:none;
}
.slider-mega .swiper-button-prev,
.slider-mega .swiper-button-next{
    width: 50px !important;
    height: 50px !important;
    box-shadow: 0px 0px 10px #b3b3b31a;
    border-radius: 40px;
}

/* X-Small devices (portrait phones, less than 576px) 
No media query for `xs` since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .slider-mega .col-img:after{
        background: none;
    }


    /* 2 cols card */

    /* square > h100 */
    .swiper-slide .row,
    .swiper-slide .col-img,
    .swiper-slide .col-meta{
        height:100% !important
    }

    .col-meta{
        position: relative;
        color:#000;

    }

    .slider-mega .swiper-slide {
        width:980px;
        height:100%;
    }
    .wideslider .slider-mega .swiper-slide {
        width:1040px;/*980*/
        /*width:96%;*/
    }
    .slider-mega.swiper-container {
        height: 453px;/*prevoir shadow box swiper-wrapper+ 2*10*/
        /*left: -5%;*/
        margin-left: -57px;
    }
    .slider-mega .swiper-wrapper {
         height:433px;
    }
    .slider-mega .card-body{
        height:433px;
    }



    .slider-mega .title{
        font-size: 36px;
        line-height: 44px;
    }
    
}

/*  X-Large devices (large desktops, 1200px and up)
resolution mac 1440x900
*/
@media (min-width: 1200px) {
    
    .slider-mega .swiper-slide {
        width:980px;/*1200*/
    }
    .wideslider .slider-mega .swiper-slide {
        width:1120;/*980*/
    }
    .slider-mega.swiper-container {
        height: 453px;/*prevoir shadow box 650+ 2*10*/
        /*left: -70px;*/
        margin-left: 0px;
    
    }
    .slider-mega .swiper-wrapper {
         height:433px;
    }
    .slider-mega .card-body{
        height:433px;
    }

    .slider-mega .title{
        font-size: 36px;
        line-height: 44px;
    }
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

    .slider-mega .swiper-slide {
        width:1200px;/*1300 1320*/
    }
    .wideslider .slider-mega .swiper-slide {
        width:1300px;/*1300 1320*/
    }
    .slider-mega.swiper-container {
        height: 550px;/*prevoir shadow box swiper-wrapper height + 2*10*/
        /*left: -50px;*/
        margin-left: 0px;
    }
    .slider-mega .swiper-wrapper {
        height:530px;
   }
   .slider-mega .card-body{
       height:530px;
   }

}