/* global */
@font-face {
    font-family:PFLato;
    src:url('Lato-Regular.ttf');
}
html
{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
*,
::after,
::before
{
}
body
{
    background:#FFFFFF;
    color:#000000;
    font-size:18px;
    font-weight:400;
    margin:0px;
    padding:0px;
}
body, button, input, select, option, textarea
{
    font-family:PFLato;
}
a
{
    color:#0051A1;
    text-decoration:none;
}
a:hover { color:#0051A1; }
a img { border:0px none #000000; }
.blue { color:#0051A1; }
.center{ text-align:center; }
.click,
.clickable { cursor:pointer; }
.left { float:left; }
.right { float:right; }
p { margin-top:0px; }
table
{
    border-collapse:collapse;
}
textarea
{
    background-color:#FDFDFD;
    border:1px inset #F0F0F0;
    font-size:1em;
    margin:1px;
    padding:2px;
    resize:none;
    width:calc(100% - 10px);
}
td
{
    text-align:justify;
    vertical-align:top;
    margin:0px;
}
td, th
{
    border-spacing:0px;
    padding:0px;
}
ul { padding-left:15px; }

.error,
.success
{
    margin:5px 0px;
    padding:10px 15px;
    max-width:calc(100% - 30px);
}
.error
{
    background-color:#FFDDDD;
    border:1px solid #BB2222;
    color:#BB2222;
}

.success
{
    background-color:#DDFFDD;
    border:1px solid #22BB22;
    color:#22BB22;
}

/* input */
input,
textarea,
select
{
    box-sizing:border-box;
}
input[type=text],
input[type=password],
input[type=number],
select
{
    background-color:#FFFFFF;
    border:1px solid #DBDBDB;
    border-radius:3px;
    box-shadow:inset 0px 1px 2px hsla(0,0%,4%,.1);
    color:#363636;
    font-size:1em;
    height:2.25em;
    line-height:1.5em;
    margin:0px;
    padding:calc(0.375em - 1px) calc(0.675em - 1px);
    vertical-align:middle;
    width:100%;
    max-width:100%;
}
.adminCMS input[type=text],
.adminCMS input[type=password],
.adminCMS input[type=number],
.adminCMS select
{
    padding:calc(0.25em - 1px) calc(0.25em - 1px);
}
input[type=text]:hover,
input[type=password]:hover,
input[type=number]:hover,
select:hover
{
    border-color:#B5B5B5;
}
input:focus
{
    border-color:#0051A1;
    box-shadow:0 0 0 .125em rgba(31,102,172,.25);
}
input[type=button],
input[type=submit],
.admin-edit,
.admin-logout
{
    background-color:#0051A1;
    border:1px solid #0051A1;
    border-radius:3px;
    color:#FFFFFF;
    cursor:pointer;
    font-size:1rem;
    line-height:1.5em;
    padding:calc(0.375em - 1px) 0.75em;
}
input[type=button]:hover,
input[type=submit]:hover,
.admin-edit:hover,
.admin-logout:hover
{
    background-color:#1F66AC;
    border-color:#B5B5B5;
}
input[type=button][disabled=disabled],
input[type=submit][disabled=disabled]
{
    background-color:#808080;
}
input[type=button]:active,
input[type=submit]:active
{
    border-color:#4A4A4A;
}
input[type=button]:focus:not(:active)
input[type=submit]:focus:not(:active)
{
    box-shadow:0px 0px 0px 0.125em rgba(31,102,172,0.25);
}
input.button-small
{
    font-size:1em;
}

.admin-edit,
.admin-logout
{
    display:inline-block;
}
.admin-edit a,
.admin-logout a
{
    color:#FFFFFF;
}
.admin-logout
{
    border:1px solid #A10051;
    background-color:#A10051;
}
.admin-logout:hover
{
    background-color:#AC1F66;
}

/* master */
.master > .content
{
    display:table;
    padding:0 20px;
}
.master > .content > div
{
    display:table-cell;
    vertical-align:top;
    width:100%;
}
.content
{
    margin:0 auto;
    width:1110px;
}
.content.no-footer
{
    margin-bottom:110px;
}

/* header */
.master > .header
{
    position:relative;
}
.header .banner
{
    height:350px;
    min-width:1150px;
    overflow:hidden;
    position:absolute;
    width:100%;
    z-index:1;
}
.header.homepage .banner
{
    height:700px;
}
.header .content
{
    height:350px;
}
.header.homepage .content
{
    height:inherit;
}
.header .banner img
{
    position:absolute;
    left:calc(50% - 960px); /* 50% - 1920px/2 */
    top:0;
}
.header .banner img:last-child
{
    background-image:linear-gradient(-183.5deg, transparent 350px, white 352px), linear-gradient(180deg, white 120px, #00407F 122px, #0051A1 135px);
}
.header.homepage .banner img:last-child
{
    background-image:linear-gradient(-183.5deg, white 200px, transparent 202px, transparent 700px, white 702px);
}
.header .content
{
    position:relative;
    z-index:2;
}
.header .content > a,
.header .content > img
{
    position:absolute;
    top:-10px;
    left:15px;
}

/* shields */
.header .shields
{
    margin:475px auto 30px auto;
}
.contact.shields
{
    padding-left:30px;
    text-align:center;
}
.body-footer .shields
{
    margin-top:-60px;
}
.shields .shield
{
    background:url('../images/Shield-Base.png') center center;
    background-repeat:no-repeat;
    display:inline-block;
    height:324px;
    margin-right:calc(24.5% - 264px);
    text-align:center;
    width:264px;
}
.shields .shield:last-child
{
    margin-right:0px;
}
.contact.shields .shield
{
    background-image:url('../images/Shield-Base-Contact.png');
    height:514px;
    margin:0 calc(12% - 417px / 2);
    width:417px;
}
.shields .shield > img
{
    border-radius:50%;
    margin:10px auto;
    width:130px;
    height:130px;
}
.contact.shields .shield > img
{
    width:215px;
    height:215px;
}
.shields .shield > span
{
    color:#FFFFFF;
    display:block;
    font-size:2em;
    line-height:1em;
    margin:0 auto;
    width:66%;
}
.contact.shields .shield > span
{
    font-size:1em;
    line-height:1.4em;
}
.shields .shield > table
{
    margin:1em auto 0 auto;
    width:45%;
}
.shields .shield > table tr:nth-child(1) td,
.shields .shield > table tr:nth-child(3) td
{
    width:50%;
}
.shields .shield > table tr:nth-child(1) td > div,
.shields .shield > table tr:nth-child(3) td > div
{
    border-color:#EA5A1E;
    border-style:solid;
}
.shields .shield > table tr:nth-child(1) td > div
{
    border-width:10px 0 0 0;
}
.shields .shield > table tr:nth-child(3) td > div
{
    border-width:0 0 10px 0;
}
.shields .shield > table tr:nth-child(1) td:nth-child(1) > div { border-radius:100% 0 0 0; }
.shields .shield > table tr:nth-child(1) td:nth-child(2) > div { border-radius:0 100% 0 0; }
.shields .shield > table tr:nth-child(3) td:nth-child(1) > div { border-radius:0 0 0 100%; }
.shields .shield > table tr:nth-child(3) td:nth-child(2) > div { border-radius:0 0 100% 0; }
.shields .shield > table tr:nth-child(2) td
{
    background-color:#EA5A1E;
    height:13px;
    position:relative;
    text-align:center;
}
.shields .shield > table tr:nth-child(2) td a
{
    color:#FFFFFF;
    font-size:0.7em;
    left:0;
    position:absolute;
    right:0;
    width:100%;
}
/*
.shields .shield > a
{
    background-color:#EA5A1E;
    border:10px solid #EA5A1E;
    border-width:0px 10px;
    color:#FFFFFF;
    font-size:0.7em;
    top:2em;
    position:relative;
    z-index:5;
}
.shields .shield > a::before
{
    border-top:20px solid #EA5A1E;
    border-radius:50% 50% 0% 0%;
    content:"";
    left:-10px;
    padding:0px calc(50% + 10px);
    position:absolute;
    top:-10px;
    z-index:-1;
}
.shields .shield > a::after
{
    border-bottom:20px solid #EA5A1E;
    border-radius:0% 0% 50% 50%;
    content:"";
    left:-10px;
    padding:0px calc(50% + 10px);
    position:absolute;
    bottom:-10px;
    z-index:-1;
}
.contact.shields .shield > a,
.contact.shields .shield > a::before,
.contact.shields .shield > a::after
{
    background-color:#0051A1;
    border-color:#0051A1;
    font-size:1em;
}
/**/

/* body (database) */
.body-header
{
    color:#0051A1;
    font-size:2em;
    font-weight:bold;
    margin:0.5em 0;
    position:relative;
}
.body-header::before
{
    background-color:#EA5A1E;
    bottom:0px;
    content:" ";
    padding:2px 0px;
    position:absolute;
    width:150px;
}

.body-content
{
    color:#000000;
    text-align:justify;
}
/* sub: menu pages modifiers */
.contentMenu1 > div:nth-child(1)
{
    width:calc(100% - 460px);
}
.contentMenu1 > div:nth-child(2)
{
    width:417px;
}
.content.contentMenu4 > div
{
    display:block;
}
.contentMenu5 > div:nth-child(1)
{
    width:calc(100% - 345px);
}
.contentMenu5 > div:nth-child(2)
{
    width:325px;
}
.content.contentMenu7 > div
{
    display:block;
}
.content.contentMenu18 > div
{
    display:block;
}
.content.contentMenu18 > div .register,
.content.contentMenu18 > div .login
{
    display:table-cell;
    width:45%;
}
.content.contentMenu18 > div .register
{
    padding-left:3em;
}

.body-footer
{
    background-image:linear-gradient(-183.5deg, transparent 120px, #044884 122px);
    margin-top:60px;
    margin-bottom:-45px;
    min-width:1150px;
}
.body-footer.homepage
{
    margin-top:-130px;
    padding-top:130px;
}
.body-footer .content
{
    padding-top:20px;
    padding-bottom:110px;
}
.body-footer.homepage .content > div:first-child
{
    color:#FFFFFF;
    font-size:2.5em;
    margin-bottom:50px;
    padding-left:20px;
    position:relative;
    transform:rotate(-3.5deg);
    transform-origin:center left;
}
.body-footer.homepage .content > div:first-child > img
{
    margin-left:30px;
    position:absolute;
}

/* footer */
.footer
{
    background-image:linear-gradient(-183.5deg, transparent 120px, #03325C 122px);
    margin-top:-130px;
    min-width:1150px;
    padding:130px 0px;
}
.footer .content
{
    color:#FFFFFF;
}
.footer .content > div
{
    display:inline-table;
    width:33%;
}
.footer .content > div span
{
    font-size:1.67em;
    font-weight:bold;
}
.footer .content > div a
{
    color:#EA5A1E;
}

/* copyright */
.gotoTop
{
    float:right;
    margin-top:-100px;
    margin-right:10px;
}
.copyright
{
    background-image:linear-gradient(-183.5deg, transparent 120px, #FFFFFF 122px);
    font-size:0.8em;
    font-weight:bold;
    margin-top:-130px;
    padding:130px 0px 10px 0px;
}
.copyright,
.copyright a
{
    color:#03325C;
}

/* login logout register */
form[name="formLogin"] td,
form[name="formResetPassword"] td,
form[name="formRegister"] td,
form[name="formChangePassword"] td,
form[name="formWachtwoordVergeten"] td
{
    padding:2px 3px;
    vertical-align:middle;
}
form[name="formLogin"] tr:last-child td,
form[name="formResetPassword"] tr:last-child td,
form[name="formRegister"] tr:last-child td,
form[name="formChangePassword"] tr:last-child td,
form[name="formWachtwoordVergeten"] tr:last-child td
{
    text-align:right;
}
.logout
{
    background-color:rgb(202,38,38);
    border:1px solid #751616;
    padding:2px 3px;
    position:absolute;
    right:5px;
    top:215px;
}
.logout a
{
    color:#FFFFFF;
}


/* menu */
.menu
{
    background-color:#FFFFFF;
    color:#0051A1;
    font-size:1.15em;
    left:360px;
    position:relative;
    table-layout:unset;
    top:40px;
}
.homepage .menu
{
    transform:rotate(-3.5deg);
    transform-origin:center right;
}
.menu a
{
    color:#0051A1;
}
.menu a div
{
    padding:5px;
}
.menu td > div:hover > a,
.menu a div.hover,
.menu a:hover,
.menu a:active
{
    color:#FFFFFF;
}
.menu td
{
    padding:0px 4px 0px 4px;
    text-align:left;
}
.menu td > div
{
    padding:5px;
}
.menu td > div:hover
{
    background-color:#EA5A1E;
    border-radius:10px;
}
.submenu
{
    background:#EA5A1E no-repeat 30px top;
    display:none;
    position:absolute;
    z-index:1;
}
.submenu.sub1
{
    margin:4px 0px 0px -5px;
}
.submenu a div
{
    background:no-repeat 190px center;
    color:#FFFFFF;
    padding:11px 17px;
    vertical-align:middle;
}
.submenu a div.hover,
.submenu a div:hover,
.submenu a div:active
{
    color:#AA310B;
}


/* content */
.content
{
}


/* clubs */
.clubs > div
{
    display:table-cell;
}
.clubs > div:nth-child(1),
.clubs > div:nth-child(3)
{
    height:230px;
    text-align:center;
    vertical-align:middle;
    width:50px;
}
.clubs img
{
    cursor:pointer;
}
.clubs > div > div
{
    height:230px;
    overflow-x:hidden;
    width:950px;
}
.clubs > div > div > div
{
    margin-left:-237.5px;
    width:1750px;
}
.clubs > div a
{
    float:left;
    margin-right:57.5px;
    margin-top:25px;
    position:relative;
}
.clubs > div a div
{
    background:transparent no-repeat center center;
    border-radius:15px;
    height:175px;
    width:180px;
}


/* agenda */
.agenda
{
    padding-left:20px;
}
.agenda .header
{
    background-color:#EA5A1E;
    color:#FFFFFF;
    padding:0.5em 0.675em;
    position:relative;
}
.agenda .header::after
{
    background-color:#FFFFFF;
    top:0.5em;
    content:" ";
	padding:2em;
    position:absolute;
    left:calc(100% + 2em);
    transform:rotate(45deg) translate(-50%,50%);
	transform-origin:center center;
}
.agenda .agenda-item
{
    margin:20px 0 0 20px;
}
.agenda span
{
    display:block;
}
.agenda span:nth-child(1) { color:#EA5A1E; }
.agenda span:nth-child(2) { color:#0051A1; }
.agenda span:nth-child(3) { color:#282828; font-size:0.66em; font-style:italic; }
.agenda img
{
    margin:0 0 -2px 5px;
}

/* nieuws */
.nieuws .nieuws-item
{
    padding-bottom:1em;
    border-bottom:2px solid #888888;
}
.nieuws .nieuws-item:last-child
{
    border-bottom-style:none;
}
.nieuws .nieuws-item h4
{
    color:#0051A1;
}

/* formulieren */
.formulier-vertical,
.formulier-horizontal,
.formulier-horizontal-list
{
    border-collapse:separate;
}
.formulier-vertical > tbody > tr > td,
.formulier-vertical > tr > td,
.formulier-horizontal > tbody > tr > td,
.formulier-horizontal > tr > td,
.formulier-horizontal-list > tbody > tr > td,
.formulier-horizontal-list > tr > td
{
    padding:0.125em 0.625em;
    vertical-align:middle;
}
.formulier-vertical > tbody > tr:nth-child(2n) > td,
.formulier-vertical > tr:nth-child(2n) > td,
.formulier-horizontal > tbody> tr:nth-child(2n+3) > td,
.formulier-horizontal > tr:nth-child(2n+3) > td,
.formulier-horizontal-list > tbody > tr > td:nth-child(2n),
.formulier-horizontal-list > tr > td:nth-child(2n),
.formulier-horizontal-list > tbody > tr:first-child > td:nth-child(2n+1),
.formulier-horizontal-list > tr:first-child > td:nth-child(2n+1)
{
    background-color:#FEF0C2;   /* light green */
}
.formulier-vertical > tbody > tr:nth-child(2n+1) > td,
.formulier-vertical > tr:nth-child(2n+1) > td,
.formulier-horizontal > tbody> tr:nth-child(2n) > td,
.formulier-horizontal > tr:nth-child(2n) > td,
.formulier-horizontal-list > tbody > tr > td:nth-child(2n+1),
.formulier-horizontal-list > tr > td:nth-child(2n+1),
.formulier-horizontal-list > tbody > tr:first-child > td:nth-child(2n),
.formulier-horizontal-list > tr:first-child > td:nth-child(2n)
{
    background-color:#F3D87F;   /* dark green */
}
.formulier-vertical > tbody > tr > td:first-child,
.formulier-vertical > tr > td:first-child,
.formulier-horizontal > tbody > tr:first-child > td,
.formulier-horizontal > tr:first-child > td,
.formulier-horizontal-list > tbody > tr:first-child > td:first-child,
.formulier-horizontal-list > tr:first-child > td:first-child
{
    background-color:#B5C1F8;   /* blue */
}
.formulier-vertical > tbody > tr > td:first-child,
.formulier-vertical > tr > td:first-child,
.formulier-horizontal-list > tbody > tr:first-child > td:first-child,
.formulier-horizontal-list > tr:first-child > td:first-child
{
    min-width:150px;
    text-align:left;
    width:150px;
}
.formulier-horizontal-list > tbody > tr > td:not(:first-child),
.formulier-horizontal-list > tr > td:not(:first-child)
{
    min-width:55px;
    padding:0.125em 0.25em;
}
.formulier-horizontal-list td
{
    text-align:center;
}
.formulier-horizontal-list > tbody > tr:first-child > td:first-child,
.formulier-horizontal-list > tr:first-child > td:first-child
{
    text-align:left;
}
tr.errorInput td,
td.errorInput
{
    background-color:#FFAAAA !important;
}

/* inschrijven-locatieActiviteitKeuze */
.inschrijven-locatieActiviteitKeuze
{
    margin-bottom:1em;
    margin-top:3em;
}

/* inschrijven */

.inschrijven input[name$="_tussenvoegsel"]  { width:120px; margin-right:2em; }
.inschrijven input[name$="_achternaam"]     { width:calc(100% - 2em - 120px - 6px); }
.inschrijven input[name$="_postcode"]       { width:110px; margin-right:2em; }
.inschrijven input[name$="_woonplaats"]     { width:calc(100% - 2em - 110px - 6px); }
.inschrijven select[name$="_dag"]           { width:120px; }
.inschrijven select[name$="_maand"]         { width:150px; }
.inschrijven select[name$="_jaar"]          { width:120px; }
.inschrijven select[name="wachtlijst"]      { width:120px; }

.inschrijven table.inschrijven
{
    width:100%;
}
.inschrijven table.extraProducten
{
    margin:0.5em 0;
}
.inschrijven table.extraProducten > tbody > tr > td:first-child,
.inschrijven table.extraProducten > tr > td:first-child
{
    width:50px;
}
.inschrijven table.extraProducten > tbody > tr > td:nth-child(2),
.inschrijven table.extraProducten > tr > td:nth-child(2)
{
    text-align:center;
    width:300px;
}
.inschrijven table.extraProducten td
{
    vertical-align:middle;
}
.inschrijven table.extraProducten table
{
    width:100%;
}
.inschrijven table.extraProducten input[type=text] { width:80px; }
#divTotaleKosten
{
    margin:1em 0;
}

.inschrijven-viewonly
{
    border:0 solid rgba(0,0,0,0.5);
    border-width:1px 0;
    padding-bottom:1em;
}
.radio-fake,
.check-fake
{
    border:1px solid #000000;
    width:1em;
    height:1em;
    text-align:center;
    display:inline-block;
}
.radio-fake
{
    border-radius:50%;
}
.radio-fake p,
.check-fake p
{
    margin:-2px 0 2px 0;
    padding:0;
}

/* home splashscreen */

.home-splash-background
{
    background-color:rgba(0,0,0,0.7);
    cursor:pointer;
    height:100vh;
    left:0;
    position:fixed;
    top:0;
    width:100vw;
    z-index:1000;
}
.home-splash-wrapper
{
    position:relative;
    left:calc(50vw - 350px);
    width:700px;
    top:10vh;
    height:80vh;
    background-color:#FFFFFF;
    border-radius:15px;
}
.home-splash-content
{
    width:calc(100% - 2em);
    padding:1em;
}
.home-splash-content div.right
{
    border:1px solid #000000;
    border-radius:0 15px 0 0;
    background-color:#DEDEDE;
    padding:0.5em 0.3em;
    margin:calc(-1em - 1px) calc(-1em - 1px) 0 0;
}

/* email/ideal popup */
.popup-background,
.content.contentMenu18 > div.popup-background
{
    background-color:rgba(0,0,0,0.5);
    display:none;
    height:100vh;
    left:0;
    position:fixed;
    text-align:center;
    top:0;
    width:100vw;
    z-index:10;
}
.popup-content
{
    background-color:#FFFFFF;
    border:1px solid #000000;
    padding:20px;
}
#backgroundIDeal .popup-content
{
    height:150px;
    margin:calc(50vh - 75px) auto;
    width:400px;
}
#backgroundIDeal #popupBancontactID
{
    display:none;
}
#backgroundIDeal.heeftBancontact .popup-content
{
    height:300px;
    margin:calc(50vh - 150px) auto;
}
#backgroundIDeal.heeftBancontact #popupBancontactID
{
    display:block;
}
#backgroundEmail .popup-content
{
    height:550px;
    margin:calc(50vh - 275px) auto;
    width:650px;
}
#backgroundEmail iframe
{
    border:none;
    height:520px;
    width:650px;
}

/* gebruiker-inschrijvingen */
.gebruiker-inschrijvingen tr:not(:first-child) td:nth-last-child(1),
.gebruiker-inschrijvingen tr:not(:first-child) td:nth-last-child(2),
.gebruiker-inschrijvingen tr:not(:first-child) td:nth-last-child(3),
.gebruiker-inschrijvingen tr:not(:first-child) td:nth-last-child(4),
.gebruiker-inschrijvingen tr:not(:first-child) td:nth-last-child(5)
{
    text-align:center;
    vertical-align:middle;
}

/* inloggen - wachtwoordvergeten */
.inloggen-wachtwoordvergeten-wrap
{
    background-color:rgba(0,0,0,0.33);
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:10;
}
.inloggen-wachtwoordvergeten-content
{
    background-color:#FFFFFF;
    border:2px solid #0051A1;
    margin:0 auto;
    top:calc(50% - 100px);
    padding:1px 20px;
    position:relative;
    width:450px;
}