@charset "utf-8";

/* general stuff */
.bold { /* used to highlight differences in pricing list in tarieven.html */
    font-weight: bold;
}
.extra-bottom-margin { /* used to better divide sections on professionals.html */
    margin-bottom: 45px;
}
.mt-5 {
    margin-top: 5px;
}

/* navigation bar */
.nav-logo-wrap .logo img { /* displaying company name next to logo */
 
}
.nav-logo-wrap .logo {
    max-width: 290px;
}
.logotext {
    position: relative;
    top: 5px;
    right: 8px;
    font-size: 22px;
}
.inner-nav .clearlist li.stand-out { /* make navbar items stand out */
    background-color: rgba(37, 170, 226, 0.9);
    padding-left: 10px;
    padding-right: 8px;
    margin-left: 15px;
    margin-right: -8px;
}
.mobile-on .inner-nav .clearlist li.stand-out {
    background-color: rgba(37, 170, 226, 0.25);
    padding-left: 0px;
    padding-right: 1px;
    margin-left: 15px;
    margin-right: -10px;
}
.inner-nav .clearlist li.stand-out a {
    color: #fff;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mn-sub { /* fold-out menu color with alpha */
    background: rgba(37,170,226,0.9);
}
#contact-button { /* fixed contact button bottom-right corner */
    position: fixed;
    right: 40px;
    bottom: 30px;
}
#contact-button .contact-icon {
    width: 80px;
}

/* top banner */
.fixed-height-small{ /* override the default stylesheet */
    min-height: 600px;
}
.fixed-height-extra-small { /* created for extra small banner on tarieven.html and contact.html */
    min-height: 450px;
}
.home-content { /* layout text more vertically centered */
    padding-top: 75px;
}

/* enormous button on index.html */
.btn-toobig {
    display: block;
    white-space: pre-wrap;
}

/* sports images on index.html */
.work-overlay { /* styling text overlay */
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(50% - 28px);
    color: white;
}
.work-overlay h2 {
    font-weight: 600;
    margin: 0;
    color: rgba(255,255,255,.9);
    z-index:99;
}
.work-item:hover .work-overlay h2 {
    color: rgba(255,255,255,1);
}
@media screen and (min-width: 993px) { /* center the last image */
    .works-grid li:nth-child(7) {
        width: 100%;
    }
    .works-grid li:nth-child(7) > a {
        width: 33.33333%;
        margin: 0 auto;
    }
}
.lightgrey-background { /* and make the remaining space very light grey */
    background-color: #f7f7f7;
}

/* trainers carousel on index.html */
.team-item-detail-contents { /* overlay-content style */
    width: 50%;
    margin: 0 auto;
    text-align: left;
}
.trainersemail { /* email style */
    padding-left: 5px;
}
.team-social-links a {
    text-decoration: none;
}

/* pricing items on sports pages and index.html */
@media (min-width: 992px) {
    .only-two-cols { /* made for when there are only 2 columns */
        width: 67%;
        margin: 0 auto;
    }
}
.four-in-a-row { /* created to get four 'work-items' in a row, instead of just three */
    width: 25%;
}
@media only screen and (max-width: 992px) {
    .four-in-a-row {
        width: 50%;
    }
}
@media only screen and (max-width: 480px) {
    .four-in-a-row {
        width: 100%;
    }
}
.pr-notavailable { /* text instead of button to say you can't buy this yet */
    margin-left: 0px;
    margin-right: 0px;
}
.highlight-price {
    margin: 0 -20px;
    color: #fcfcfc;
}
.highlight-price .pr-per {
    color: #ddd;
}

/* make one whole pricing column blue! */
.make-me-blue .pricing-item-inner {
    background-color: rgba(37, 170, 226, .9);
    color: #fcfcfc;
    border: 1px solid #ddd;
}
.make-me-blue .pricing-item-inner:hover {
    border-color: #959595;
}
.make-me-blue .pr-list {
    color: #eeeeee;
    -webkit-text-stroke: .4px;
}
.make-me-blue .pr-list li {
    border-bottom: 1px solid #ddd;
}
.make-me-blue .pr-list li:first-child {
    border-top: 1px solid #ccc;
}
.make-me-blue .pr-button {
    border-top: 1px solid #ccc;
}
.make-me-blue .btn-mod {
    background: rgba(255,255,255,.95);
    color:rgba(0,0,0,.7);
    border: 3px solid transparent;
    margin: -1px;
    -webkit-text-stroke: .2px;
}
.make-me-blue .btn-mod:hover {
    background: rgba(0,0,0,.8);
    color:rgba(255,255,255,.9);
}
.make-me-blue .pricing-icon {
    font-size: 40px;
    margin: -6px 0 -7px;
}

/* split-section on sports pages */
.wrapper-for-list { /* make a list layout work inside .split-section */
    padding: 0 15px 25px 0;
}
.wrapper-for-list li {
    padding: 5px 0;
}
.wrapper-for-list btn {
    margin-right: 10px;
}

/* content just below banner on sports pages */
.flexi-box { /* setting overall layout */
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: center;
}
.flexi-two,
.flexi-one,
.flexi-three {
    flex: 1 1 33%;
    margin: 0 10px;
}
.flexi-one,
.flexi-three {
    padding: 20px 0 0;
}
.flexi-one {
    margin: 0 20px 0 0;
}
.flexi-three {
    margin: 0 0 0 20px;
}
.calltoactionarea { /* setting layout within the two text+button areas */
    display: flex;
    height: 100%;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.calltoactionarea .text {
    height: 143px;
    text-transform: uppercase;
    text-align: center;
    font-size: 18px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    font-weight: 500;
    color: #777;
}
.calltoactionarea .text p {
    position: absolute;
    bottom: 87px;
    width: min-content;
    min-width: 275px;
}
@media only screen and (max-width: 991px) { 
    .flexi-one {
        margin: 0 10px 0 0;
    }
    .flexi-three {
        margin: 0 0 0 10px;
    }
    .calltoactionarea .text p {
        min-width: 260px;
    }
}
@media only screen and (max-width: 767px) { /* different layout on small screens */
    .flexi-box {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    }
    .flexi-one,
    .flexi-three {
        flex: 1 1 50%;
        padding: 20px 0;
        order: 2;
        margin: 0 10px;
    }
    .flexi-two {
        flex: 0 0 200px;
        width: 100%;
        order: 1;
    }
    .calltoactionarea .text {
        height: unset;
    }
    .calltoactionarea .text p {
        position: static;
        width: 100%;
        min-width: unset;
        margin: 10px 0;
    }
}
.sportsmap #map-canvas { /* setting map size */
    height: 200px;
}
.sportsmap .map-toggle {
    width: 250px;
    margin-left: -125px;
}
.sportsmap .mt-text { /* making sure the address overlay fits nicely */
    font-size: 14px;
}
.sportsmap .map-section { /* setting color of the overlay */
    background: rgba(0,158,224,0.76);
}
.sportsmap .map-section.js-active { /* setting height of the folded overlay */
    height: 38px;
    background: rgba(0,158,224,0.76);
}
.sportsmap .map-section.js-active .map-toggle { /* setting height and position of the folded clickable area */
    margin-top: -19px;
    margin-bottom: 0px;
    height: 38x;
}
.sportsmap .map-section.js-active .mt-icon { /* hiding icon on folded overlay */
    display: none;
}
.sportsmap .map-section.js-active .mt-text { /* perfecting folded overlay position */
    top: 0px;
}
.sportsmap .mt-open { /* improving folded overlay text styling */
    font-size: 12px;
    color: rgba(255,255,255,1);
}
.sportsmap .gm-style div:nth-child(2) { /* moving 'Google' button to be clickable above folded overlay */
    bottom: 36px !important;
}
@media only screen and (max-width: 767px) { /* different layout for smaller screens */
    .sportsmap .mt-text {
        font-size: 14px;
    }
    .sportsmap .map-toggle {
        width: 300px;
        margin-left: -150px;
    }
    .sportsmap .mt-open {
        font-size: 12px;
    }
    .sportsmap .map-section.js-active .mt-text {
        top: 7px;
    }
}
.anchor { /* to offset anchor link to prices on sport pages (so you land on a nicer view) */
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/* pricing tables on tarieven.html */
.pricing-header { /* copying the style without using a table (because accordion animation doesn't work on tr's) */
    border-bottom: 1px solid rgb(221,221,221);
    border-collapse: collapse;
}
.pricing-header h3 {
    font-size: 15px;
    font-weight: bold;
    color: rgb(119,119,119);
    padding: 8px;
    margin: 0;
}
.pricing-table {
    padding: 0;
    margin: 0 0 20px;
}
.pricing-table > li {
    list-style-type: none;
    font-size: 15px;
    font-weight: 300;
    border-top: 1px solid rgb(221,221,221);
    border-collapse: collapse;
    padding: 8px;
}
.pricing-table > li.clickable-row {
    display: flex;
    flex-flow: row no-wrap;
    justify-content: space-between;
    cursor: pointer; /* changed the cursor style to communicate this is clickable */
}
.pricing-table > li.clickable-row:hover {
    background-color: #f5f5f5;
}
.item-price .btn { /* ignore padding and place this button totally at the edge */
    margin-right: -8px;
}
.bellow { /* styling the bellows */
    padding: 0 0 0 8px !important;
}
.bellow .pr-list {
    margin: 0;
}
.bellow .pr-list li:first-child {
    border-top: 0px;
}
.bellow .pr-list li:last-child {
    border-bottom: 0px;
    margin-bottom: 8px;
}
.tab-content .form-tip,
.tab-content .form-tip .fa { /* make the taxes information slightly larger */
    font-size: 13px;
}

/* contact form */
.checkbox-label { /* laying out the checkbox part of the contact form */
    font-size: 15px;
    font-weight: 300;
    color: #444;
    padding-right: 6px;
    line-height: 20px;
}
.flex-vertical-center {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.flex-17px {
    flex: 0 0 17px;
}
.flex-200px {
    flex: 0 0 221px;
}
.flex-dyna {
    flex: 1 1 auto;
}
.fakenewline {
    display: none;
}
.fakespace {
    display: none;
}
@media only screen and (max-width: 580px) {
    .flex-vertical-center {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: flex-end;
    }
    .flex-17px {
        flex: 0 0 17px;
    }
    .flex-200px {
        flex: 1 0 91%;
    }
    .flex-dyna {
        flex: 1 1 91%;
    }
    .fakenewline {
        display: block;
        flex: 0 0 100%;
    }
    .fakespace {
        display: block;
        flex: 0 0 30px;
    }
}
form input.custom-checkbox { /* better looking checkbox */
    margin: 13px 13px 13px 0;
    font-size: 15px;
}