@charset "utf-8";
/* CSS Document */

.datetext{
    position: absolute;
    top: 30px;
    left: -190px;
    z-index: 100;
    width: 60%;
    background: #F00;
    padding: 10px 30px;
    font-size: 29px;
    color: #fff;
    transform: rotate(348deg);
    text-align: center;
    box-shadow: 0 0 10px #000;
}



.swiper, swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
}

.actieswiper, swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
    margin-top: 40px;
    margin-bottom: 40px;
}

.swiper-wrapper2{
    z-index: 1000;
    position: absolute;
    background: #fff;
    width: 500px;
    height: 100%;
    left: 100px;
}

.swiper-slide img:hover{
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    z-index: 10;
    box-shadow: 0 5px 15px 0 rgba(0,0,0, 0.5);
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {

    left: var(--swiper-navigation-sides-offset,10px);
    right: auto;
    color: #ffd300;
    font-weight: 900;
    z-index: 2;
    background: transparent;
    padding: 35px 35px 35px 30px;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,10px);
    left: auto;
    color: #ffd300;
    font-weight: 900;
    z-index: 2;
    background: transaprent;
    padding: 35px 35px 35px 30px;
}

.swiper-overlay-prev{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: calc(var(--swiper-navigation-size)/ 44 * 100);
    height: 100%;
    /*background: linear-gradient(to right,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 100%);*/
}

.swiper-overlay-next{
    position: absolute;
    top: 0;
    z-index: 1;
    right:0;
    width: calc(var(--swiper-navigation-size)/ 44 * 100);
    height: 100%;
    /*background: linear-gradient(to left,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 100%);*/
}

.swiper-pagination {
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
}

:root {
    --swiper-theme-color: #d0021b;
}

.imageinfo{

}

.game-preview h1{
    margin:20px 0px;
}

.game-preview button{
    display: block;
    width:100%;
    max-width: 100%;
    text-wrap: inherit;
}

/* 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) {


    .actielist .swiper, swiper-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block;
        margin-top: 40px;
        margin-bottom: 40px;
    }

}

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

    .game-preview h1{
        margin:0px 0px;
    }

    .game-preview button{
        display: block;
        width:inherit;
        max-width: 70%;
    }

}

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


    .datetext{
        position: absolute;
        top: 30px;
        left: -190px;
        z-index: 100;
        width: 60%;
        background: #F00;
        padding: 10px 30px;
        font-size: 29px;
        color: #fff;
        transform: rotate(348deg);
        text-align: center;
        box-shadow: 0 0 10px #000;
    }

    .swiper, swiper-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: visible;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .swiper-slide img:hover{
        -webkit-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01);
        z-index: 10;
        box-shadow: 0 5px 15px 0 rgba(0,0,0, 0.5);
    }

    .swiper-button-prev, .swiper-rtl .swiper-button-next {

        left: var(--swiper-navigation-sides-offset,50px);
        right: auto;
        color: #ffd300;
        font-weight: 400;
        z-index: 2;
        background: transparent;
        padding: 35px 35px 35px 30px;
    }

    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset,50px);
        left: auto;
        color: #ffd300;
        font-weight: 400;
        z-index: 2;
        background: transparent;
        padding: 35px 35px 35px 30px;
    }

    .swiperred-prev, .swiper-rtl .swiper-button-next {

        left: var(--swiper-navigation-sides-offset,50px);
        right: auto;
        color: #ffffff;
        font-weight: 900;
        z-index: 2;
        background: #d0021b;
        padding: 35px 35px 35px 30px;
    }

    .swiperred-next, .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset,50px);
        left: auto;
        color: #fff;
        font-weight: 900;
        z-index: 2;
        background: #d0021b;
        padding: 35px 35px 35px 30px;
    }

    .swiper-overlay-prev{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: calc(var(--swiper-navigation-size)/ 44 * 100);
        height: 100%;
        /*background: linear-gradient(to right,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 100%);*/
    }

    .imageSwiper .swiper-slide img{
        height:auto;
    }

    .swiper-overlay-next{
        position: absolute;
        top: 0;
        z-index: 1;
        right:0;
        width: calc(var(--swiper-navigation-size)/ 44 * 100);
        height: 100%;
        /*background: linear-gradient(to left,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 100%);*/
    }

    .swiper-pagination {
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0,0,0);
        z-index: 10;
    }

    :root {
        --swiper-theme-color: #d0021b;
    }

}


/*
    code by Iatek LLC 2018 - CC 2.0 License - Attribution required
    code customized by Azmind.com
*/
@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

    .imageinfo{
        position: absolute;
        width: 500px;
        background: #ffffffdb;
        z-index: 100;
        height: 100%;
        padding: 20px;
        bottom: 0;
    }

    .photoSwiper2{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 100px;
        background: #fff;
        height: 100%;
        width: 500px;
        overflow:hidden;
        margin-left: -90px;
    }

    .imageSwiper .swiper-wrapper{
        padding-left: 400px;
    }

}


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

    .imageinfo{
        position: absolute;
        width: 500px;
        background: #ffffffdb;
        z-index: 100;
        height: 100%;
        padding: 20px;
        bottom: 0;
    }

    .photoSwiper2{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 100px;
        background: #fff;
        height: 100%;
        width: 500px;
        overflow:hidden;
        margin-left: -90px;
    }

}

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

    .imageinfo{
        position: absolute;
        width: 500px;
        background: #ffffffdb;
        z-index: 100;
        height: 100%;
        padding: 20px;
        bottom: 0;
    }

    .photoSwiper2{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 100px;
        background: #fff;
        height: 100%;
        width: 500px;
        overflow:hidden;
        margin-left: -90px;
    }

}