#footer .col-12 { padding: 0 15px; }

.img-vlak {
    display: flex;
    flex-direction: column;
}

div.infovlakTitel {
    margin-top: auto;
}

#PortalPagina { width: 100%; position: relative; z-index: 0; border: 2px solid #f2f2f2; }

#PortalPagina img { width: 100%; }

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

#PortalPagina h2 { font-size: 25px; line-height: 40px; }

#PortalPagina p { font-size: 16px; line-height: 24px; }

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

/* #intro-btn {} */

.SeoBasisBlok a { font-size: 16px; line-height: 30px; border: 2px solid #006ac0; border-radius: 10px; padding: 10px 20px; color: #006ac0; margin: 10px 0 0; width: fit-content; transition: ease-out 0.2s;}

.SeoBasisBlok a:hover { background: #006ac0; color: white; text-decoration: none; transition: ease-in 0.2s;}



/* Menu - Desktop */

.navportal { position: absolute; display: flex; flex-direction: row; width: 95%; margin: -30px 25px; }

.navportal .Pijltje { display: none; }

.navportal .Uitklapmenu { padding: 0; }

.navportal h2 { font-size: 16px !important; margin: 0; padding: 7px; }

.navportal .UitklapVlak { background: white; box-shadow: 0px 1px 5px #cac0c0; text-align: center; }

.navportal .UitklapVlak a { display: flex; padding: 14px; justify-content: center; transition: .15s linear; }

.navportal .UitklapmenuTitel { background: white; border: 1px solid #f1f1f1;  text-align: center; transition: .15s linear; }

.UitklapmenuTitel:hover, .UitklapVlak a:hover { background: #ececec; transition: .15s linear; }



/* Vlakverdeling */

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

#PortalPagina .SeoTekstvlak { width:100%; padding: 30px; display: flex; flex-direction: column; align-self: center;}



.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; margin-top: 20px !important;}

.infocenterarea { text-align: center; }

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

.infocenterarea figure { width: 100%; }

.InfoLeftRightArea { flex-wrap: wrap; }   

.Inleiding { text-align: center; padding: 0;}



/* Uitklapvragen */

.Uitklapmenu { width: 100%; background: #ededed; padding: 17px; cursor: pointer; }

.UitklapVlak { display: none;}

.Pijltje { float: left; background: url(/pix/navigation/treeArrowRight.png) no-repeat; width: 14px; height: 26px; background-position: left 10px; cursor: pointer; }

.Pijltje.flip { background-position: left 14px; transform: rotate(90deg); background-position-x: 5px; }



/* Content */

.Pijltje { display: none; }

#Reparatie a { margin: 25px auto; }

#Reparatie img { margin-top: -155px; z-index: -1; position: relative; }



.Blauw .SeoEnkelvlak { background: url(/download/b2c_be_nl/pic/ifixit/patron-blue_v2.webp) center center no-repeat; background-size: cover; }

.Blauw .SeoTekstvlak { color: white; }

.Blauw a { border: 2px solid #ffffff; color: white; }

.Blauw .infovlakTitel { width: 100%; border-radius: 15px 0 0 0; }



.infovlakTitel h2 { font-size: 1.3em !important; line-height: 1.5em !important; margin: 0;}

.infovlak { width: 100% !important; }

.infovlak table tbody { display: flex; flex-flow: wrap; }

.infovlak table tr { width: 50%; }

.infovlak table svg { width: 1.5em; margin: 5px;}



.Wit .SeoEnkelvlak { background: url(/download/b2c_be_nl/pic/ifixit/patron-white.webp) center center no-repeat; background-size: cover; flex-direction: row; }

.Wit .infovlakTitel { width: 100%; border-radius: 0 15px 0 0;}

.Wit .UitklapmenuTitel:hover, .Wit .UitklapVlak a:hover { background: none; }



#Monteren h2 { width: 100%; text-align: center; padding: 30px 0 0; font-size: 2.5em; }

#Monteren table { box-shadow: 0 0 30px #d6d6d6; }

#Monteren .SeoDubbelvlak thead tr th { height: 428px; vertical-align: bottom; }

#Monteren table span { background: #3179df; border-radius: 100%;  padding: 10px 12px; margin: 10px; color: white; display: flex; justify-content: center; }

#Monteren .SeoDubbelvlak:nth-child(3) table span { padding: 10px 16px; }

.SeoDubbelvlak tbody tr td { padding: 15px 15px 15px 0; }

.SeoDubbelvlak tbody tr:nth-child(even) td { background: #f1f1f1; }



#Schroevendraaiers .SeoEnkelvlak { flex-direction: row; }



#Accessories .SeoTekstvlak { background: url(/download/b2c_be_nl/pic/ifixit/patron-white.webp) center center no-repeat; background-size: cover; }

#Accessories a { margin: 25px auto 0; }

.mobile { display: none; }


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

    .desktop { display: none; }
    .mobile { display: block; }

    .SeoEnkelvlak { flex-direction: column-reverse; }

    .SeoDubbelvlak { width: 100%; padding: 0; margin-top: 5%;}

    .SeoEnkelvlak div { width: 100%; }

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

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

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



    .navportal { flex-direction: column; width: 100%; position: inherit; margin: 0; }

    .navportal .UitklapVlak { position: inherit; width: 100%; }

    .Inleiding { padding: 0; background-color: #f2f2f2 !important;}

    #Reparatie img { margin-top: -60px; }

    .Wit .SeoEnkelvlak { flex-direction: column-reverse; }

    .Blauw .infovlakTitel, .Wit .infovlakTitel { width: 100%; border-radius: 0;}

    

    #Monteren h2 { font-size: 2em; padding: 30px; }

    #Monteren .SeoDubbelvlak thead tr th { height: inherit; }

    #Schroevendraaiers .SeoEnkelvlak { flex-direction: column-reverse; }

    #Accessories .SeoEnkelvlak { flex-direction: column; }

}



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

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

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

    .SeoDubbelvlak { padding: 10px; margin-top: 5%;}

    #Monteren .SeoDubbelvlak thead tr th { height: 229px; }

}