#HydroXPagina , #HydroXPagina *, #HydroXPagina *:before, #HydroXPagina *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }



#HydroXPagina { width: 100%; background: #141E25; position: relative; z-index: 0; }



#HydroXPagina img { width: 100%; }



#HydroXPagina h1 { font-size: 30px; } 



#HydroXPagina h2 { font-size: 25px; line-height: 40px; text-transform: uppercase; }



#HydroXPagina p { font-size: 16px; line-height: 24px; margin:0; }



#HydroXPagina figure { margin: 0px; padding: 0px; }



#HydroXPagina a { color: #424242; }



.SeoBasisBlok a { font-size: 16px; line-height: 30px; }







/* Header */



#HydroXPagina header { background: white; }



#HydroXPagina .nlLogo { display: inline-block; }







/* Menu */



#PortalMenu .row { background: #f0e820; align-items: center; justify-content: center; }



#PortalMenu .row div { width: 12%; }



#PortalMenu .row div a { display: block; text-align: center; padding: 1em; color: black;}



.UitklapVlak { position: absolute; padding: 0 !important; background: #e3da00; padding: 1em; display: flex; flex-direction: column;  margin-left: -15px;}







/* Vlakverdeling */



#HydroXPagina .SeoBasisBlok { display: flex; margin: 0 auto; }



#HydroXPagina .SeoBasisBlok:nth-child(even) { background: #132432; }



#HydroXPagina .SeoTekstvlak { color: white;  padding: 60px; display: flex; flex-direction: column; }







.SeoEnkelvlak { width: 100%; display: inline-flex; flex-direction: row-reverse; }



.SeoEnkelvlak div { width: 80%; align-self: center; flex: auto; }



.SeoEnkelvlakImg { width: 100%; padding: 0; }



.SeoEnkelvlakImg div { width: 100%; }



.SeoDubbelvlak { width: 50%; margin: 0 auto; padding: 30px; text-align: center; }



.infocenterarea { text-align: center; }



.infocenterarea > div { flex-wrap: wrap; }



.infocenterarea figure { width: 100%; }



.InfoLeftRightArea { flex-wrap: wrap; }   



.Inleiding { text-align: center; }









/* Content */



#HydroXPagina li { list-style: none; }



#HydroXPagina .percentages{

    height: 400px;

    background: url(/download/b2c_be_nl/pic/corsair/HydroX/percentages.PNG) no-repeat; 

}



#HydroXPagina .bars{

    color:white;

    min-height: 430px;

    background: url(/download/b2c_be_nl/pic/corsair/HydroX/bars2.png) no-repeat; 

        background-position: 85% 0;

}



#HydroXPagina .bars p{width: 500px; padding: 0 50px 0 0;margin-bottom: -15px;}



#HydroXPagina .percentages h2{padding: 60px 45px; color: white;}

#HydroXPagina .bars {padding: 60px 45px; color: white;}



#cookieBox { margin: 20px 0; border: none; width: 100%; height: 320px;}



.ImageKlein { display: flex; padding: 0; margin: 0;}



.SeoBasisBlok a { color: black; text-align: center; background: #E9E600; border-radius: 20px; padding: 8px; margin: 20px 0;}



.SeoBasisBlok a p { color: black; }







#SeoItemGrafiek .SeoEnkelvlak { background: white !important; color: #424242 !important; flex-direction: row-reverse !important;}



#SeoItemGrafiek .ItemAfbeelding { padding: 60px 30px; }



#SeoItemGrafiek ul {  width: 100%; display: flex; flex-direction: column; padding: 20px 0; }



#SeoItemGrafiek ul li { display: flex; align-items: center; }



#SeoItemGrafiek ul img { width: 80px; margin-right: 20px; }



#SeoItemGrafiek li p span { font-size: 30px; font-weight: 700; padding-right: 6px; }







.SeoBasisBlok:last-child .SeoTekstvlak img { width: 20% !important; margin: 10px -4px; }



.hydrobutton{

color: black;

text-transform: uppercase;

font-weight: 400;

letter-spacing: 0.01em;

}



.hydrobutton p{

color: black;

}



.video {

text-align: center;

}



@media (max-width: 1100px){

#HydroXPagina .bars p{width: 440px;}

#HydroXPagina .col-6{

    width: 100%;

    flex: 0 0 100%;

max-width: 100%;

}

#HydroXPagina .bars{

   background-position: 75% 0;

}

}



@media (max-width: 1000px){

#HydroXPagina .bars p {width: 100%;}

#HydroXPagina .bars h2{margin-top:300px; }

#HydroXPagina .bars {background-position: 100% 0;

}



@media (max-width: 900px){

#HydroXPagina .percentages{

    background: url(/download/b2c_be_nl/pic/corsair/HydroX/percentages-m.png) no-repeat; 

    background-size: cover;

}



#HydroXPagina .bars{

    background: url(/download/b2c_be_nl/pic/corsair/HydroX/bars1.png) no-repeat; 

    background-position: right 0;

}



#HydroXPagina .bars h2{



    margin-top: 290px;

}

}



@media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */



    #HydroXPagina .SeoDubbelvlak .SeoTekstvlak { padding: 30px 0; }



    #HydroXPagina { width: 100%; position: relative; margin-top: -10px;}



    .SeoBasisBlok:nth-child(7) .ItemAfbeelding, .SeoBasisBlok:nth-child(9) .ItemAfbeelding { padding: 10px!important; }



}







}

@media screen and (max-width: 667px) { /* Mobile */



    #HydroXPagina header { background: white; }



    .SeoEnkelvlak { flex-direction: column; }



    .SeoDubbelvlak { width: 100%; padding: 0; }



    .SeoEnkelvlak div { width: 100%; }



    #HydroXPagina .SeoDubbelvlak .SeoTekstvlak { padding: 30px !important; }



    #HydroXPagina .nlLogo a { padding: 20px 21px 8px; }



    #HydroXPagina iframe { margin: 17px auto; width: 100%; height: 200px; }



    #HydroXPagina h1 { font-size: 25px; }



    #HydroXPagina h3 { font-size: 22px; }



    #HydroXPagina p { font-size: 14px; line-height: 23px;}









    #HydroXPagina .SeoTekstvlak { padding: 20px; }



    #HydroXPagina .SeoBasisBlok:nth-child(even) .SeoEnkelvlak, #HydroXPagina .SeoBasisBlok:nth-child(odd) .SeoEnkelvlak { flex-direction: column; }



    .ImageKlein { flex-flow: wrap; }



    .ImageKlein li { width: 50%; }



    #SeoItemGrafiek .SeoEnkelvlak { flex-direction: column-reverse !important; }



    #SeoItemGrafiek .ItemAfbeelding { margin-top: -84px; }



    #HydroXPagina .percentages{height: 353px;}

    #HydroXPagina .bars{

        background: url(/download/b2c_be_nl/pic/corsair/HydroX/bars-m.png) no-repeat;

        background-position: 50% 0;}

    #HydroXPagina .bars p {padding: 0 0px 0 0;

}

    }







@media (max-width: 590px){

    #HydroXPagina  h2 { font-size:20px;}

    #HydroXPagina .percentages h2 { padding: 20px; height: 270px; margin: -50px 0;}

    #HydroXPagina .percentages {height: 308px;}

    #HydroXPagina .bars {

        background: url(/download/b2c_be_nl/pic/corsair/HydroX/bars-xs.png) no-repeat;

        background-position: 50% 0;

        background-size: cover;}

}



@media (max-width: 500px){

    #HydroXPagina .percentages h2 { height: 210px; margin: -50px 0;}

    #HydroXPagina .percentages {height: 261px

        ;}

    #HydroXPagina .bars {

        background: url(/download/b2c_be_nl/pic/corsair/HydroX/bars-xs.png) no-repeat;

        background-position: 50% 0;

        background-size: cover;}

}



@media (max-width: 450px){

    #HydroXPagina .percentages h2 { height: 180px; margin: -50px 0;}

    #HydroXPagina .percentages {height: 235px;}

}



@media (max-width: 375px){

    #HydroXPagina .percentages h2 { font-size: 17px; padding:0; }

    #HydroXPagina .percentages {height: 193px;}

    #HydroXPagina .bars{background-size:contain;}

    #HydroXPagina .bars h2{margin-top: 153px;}

}





@media screen and (max-width: 500px) { /* Mobile */



    #PortalMenu .row { flex-direction: column; }



    #PortalMenu .row div { width: 100%; }



    .UitklapVlak { position: inherit; width: 100% !important; }



}







@media screen and (min-width: 501px) and (max-width: 1032px) { /* Tablet */



    #PortalMenu .row div { width: 25%; }



    .UitklapVlak { width: 25% !important; }



}