@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*Header, knoppenmenu en partner css*/

.S2S {background-color:#031255 ; color: white; font-family: 'Poppins', sans-serif;}
.S2S section{padding: 0 10%;}
.S2S .header{background-color:#422181; padding: 0;}
.S2S img{width: 100%;}
.S2S h1{font-size: 50px;}
.S2S h2{ font-size: 25px;}
.S2S .keuzemenu .row{padding: 20px 20%;}
.S2S .keuzemenu a {color: white; text-decoration: none;}
.S2S .knop{
    margin: 10px auto;
    border-radius: 50px;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 0px black, 0px 5px 0px black;
    -moz-box-shadow: 0px 5px 0px black, 0px 5px 0px black;
    box-shadow: 0px 5px 0px black, 0px 5px 0px black;
    transition: all .1s ease;
    border:none;
}

.S2S .knop:hover{
    -webkit-box-shadow: 0px 2px 0px black, 0px 2px 3px black;
    -moz-box-shadow: 0px 2px 0px black, 0px 2px 3px black;
    box-shadow: 0px 2px 0px black, 0px 2px 3px black;
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
}
.S2S .knop:active {
    -webkit-box-shadow: 0px 3px 0px black, 0px 3px 6px black;
    -moz-box-shadow: 0px 3px 0px black, 0px 3px 6px black;
    box-shadow: 0px 3px 0px black, 0px 3px 6px black;
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
}

.S2S .keuzemenu .row .begin .knop{background-color: #4C2AD5;}
.S2S .keuzemenu .row .gamingpc .knop{background-color: #2e56d9;}
.S2S .keuzemenu .row .gaminggear .knop{background-color: #422181;}
.S2S .keuzemenu .row .monitor .knop{background-color: #5466D9;}
.S2S .keuzemenu .row .microfoon .knop{background-color: #597FF9;}
.S2S .keuzemenu .row .hoofdtelefoon .knop{background-color: #5E5EBF;}
.S2S .keuzemenu .row .laptop .knop{background-color: #194FFE;}
.S2S .keuzemenu .row .accessoire .knop{background-color: #3D53B7;}
.S2S .knop p{font-weight: bold;font-size: 16px; margin: 0;}
.S2S .divider{background-color: #4C2AD5; height: 50px; padding: 0;}
.S2S .partners{background-color: white; color: #707070;}
.S2S .partners h3{text-transform: uppercase; font-size: 2rem;}
.S2S .partners .row{justify-content: center;}
.S2S .partners .col-sm-3{padding:20px 50px; display: flex; align-items: center;flex-wrap: wrap;}

/*Responsive*/
@media (max-width: 1300px) {
    .S2S .keuzemenu .row {
        padding: 20px 15%;
    }
}

@media (max-width: 1060px) {
    .S2S .keuzemenu .row {
        padding: 20px 5%;
    }
    .S2S .partners .col-sm-4{padding:20px;}
}

@media (max-width: 850px) {
    .S2S .keuzemenu .row {
        padding: 20px 0%;
    }
}

@media (max-width: 560px) {

}

@media (max-width: 380px) {
    .S2S h1{font-size: 40px;}
    .S2S h2{ font-size: 19px;}

    .S2S .knop{
        border-radius: 30px;
        width: 110px;
        height: 110px;
    }

    .S2S .knop p {
        font-size: 14px;
    }
}


/*Main content css*/
/*Carousel section*/
.S2S .carousel .carousel-inner{padding: 10px 0;}
.S2S .carousel .hide {display: none;}
.S2S .carousel h2{font-size: 3rem;}
.S2S .carousel .left{
    background-image: url(/download/b2c_be_nl/pic/S2S/DSC02573-HDR.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10% 5% 5% 5%;
    flex-direction: column;
}

.S2S .carousel .left .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(76, 42, 213,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}

.S2S .carousel .left .content{
    z-index: 2;
    position: relative;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.S2S .carousel .left a{
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 20px;
}
.S2S .carousel .right{
    background-color: white;
    color: black;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.S2S .carousel .right img{
    width: auto;
    height: 200px;
}

.S2S .carousel .right h3{
    color: black;
    padding: 0 100px;
    min-height: 85px;
}

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

.S2S .carousel .prijs{
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background-color: #D11010;
    padding: 10px 20px;
}




@media (max-width: 1200px) {
    .S2S .carousel .right h3 {
        padding: 0 60px;
    }
}

@media (max-width: 950px) {
    .S2S .carousel .right h3 {
        padding: 0 35px;
    }
}

@media (max-width: 670px) {
    .S2S .carousel .right h3 {
        padding: 0 5px;
    }
    .S2S .carousel h2{font-size: 2rem;}
}


/*hardwarecat css*/

.S2S .brandimg img{
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: bottom;
}

.S2S .brandimg .col-12{
    padding: 0;
}

.S2S .hardwarecat{margin: 25px 0;}
.S2S .hardwarecat .content{
    padding: 25px; 
    background-color:#4C2AD5 ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.S2S .hardwarecat .imgside{padding: 0;}
.S2S .hardwarecat .content a{
    background-color: white;
    color: black;
    padding: 10px 20px;
    border-radius: 22px;
    align-self: flex-end;
    text-decoration: none;
}

.S2S .hardwarecat img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.S2S .video>.row>.col-12{padding: 0;}

.S2S .hardwarecat .content a:hover{
    -webkit-box-shadow: 0px 2px 0px black, 0px 2px 3px black;
    -moz-box-shadow: 0px 2px 0px black, 0px 2px 3px black;
    box-shadow: 0px 2px 0px black, 0px 2px 3px black;
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
}

.S2S .carousel .left a:hover{
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
    transition: all 0.3s ease-in-out;
}

@media (max-width:767px){
    .mobileimg{display: block;}
    .desktopimg{display: none;}

    .S2S .hardwarecat .imgside{
        order: -1;
    }
    .S2S .hardwarecat .content{
        order: 1;
    }
    .S2S .hardwarecat .content a{
        align-self: center;
    }
    
}

@media (max-width: 1000px){
    .S2S .partners .col-sm-3 {padding: 20px;}
}