/* Foundation v2.1.1 http://foundation.zurb.com */
/* Artfully Masterminded by ZURB */

/* -------------------------------------------------- 
    Table of Contents
-----------------------------------------------------
:: Reset & Standards
:: Links
:: Lists
:: Misc
*/


/*	--------------------------------------------------
	:: Global Reset & Standards
	-------------------------------------------------- */

/* 
		Eric Meyer's CSS Reset
		http://meyerweb.com/eric/tools/css/reset/ 
		v2.0 | 20110126
   		License: none (public domain)
	*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

html {
    font-size: 13px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    /*border-collapse: collapse;*/
    border-spacing: 0;
}



body {
    -webkit-font-smoothing: antialiased;
}



/*	--------------------------------------------------
    :: Typography
	-------------------------------------------------- */

@media handheld, only screen and (max-width: 980px) {
    .onzeWerkwijze {
        background-image: none !important;
        width: auto !important;
        height: auto !important;
        list-style: none inside url("../img/dotOrange.png") !important;
        margin-left: 20px !important;
    }

        .onzeWerkwijze li {
            float: none !important;
            margin-left: 0 !important;
        }

    .mobileMenu {
        float: left !important;
    }

    .onzeWerkwijze li a {
        background-image: none !important;
        height: auto !important;
        text-indent: 0 !important;
        display: inline !important;
    }

    .button {
        margin: 10px !important;
    }

    .breed100 .mainContent.columns {
        width: 100% !important;
    }

    .CTAbuttons .cb_chatbutton, .CTAbuttons .afspreken, .CTAbuttons .nieuwsbrief {
        display: block !important;
    }

    .CTAbuttons .cb_online {
        float: none !important;
    }

    .pageclass_nieuwsoverzicht .nieuwsImgKlein {
        position: relative !important;
        left: 0px !important;
    }

    .pageclass_nieuwsoverzicht .nieuwslijst li {
        float: none !important;
        clear: both !important;
    }

    .moreCases {
        display: none !important;
    }

    #cases {
        height: auto !important;
    }
}

@media handheld, only screen and (max-width: 1010px) {
    .topMenu {
        border-right: solid 1px #d0d0d0;
    }
}

@media handheld, only screen and (max-width: 1140px) {
    .socialKolom a.pageTop {
        display: none !important;
    }
}

/* Mobile */
.hide-if-big {
    display: none !important;
}

@media handheld, only screen and (min-device-width: 767px) {
    .toMobile {
        display: none !important;
    }
}

@media handheld, only screen and (max-device-width: 768px) {
    .volledig {
        display: block !important;
    }
}

@media handheld, only screen and (max-width: 768px) {


    body {
        background-image: none !important;
    }

    body, p {
        line-height: 1.7em !important;
    }

    .sideCol {
        top: 0px !important;
    }

    .header {
        height: auto !important;
    }

    .logo a {
        margin: 0 !important;
        text-align: center !important;
    }

        .logo a img {
            margin: 0 auto !important;
        }

    .header .telefoonnummer {
        margin-top: 0 !important;
        float: none !important;
        height: 45px !important;
        text-align: center;
    }

    .show-if-big {
        display: none !important;
    }

    .blokMetLintje {
        float: none !important;
        width: 80% !important;
    }

    .hide-if-big {
        display: block !important;
    }

    .sideCol .nieuws {
        top: 20px !important;
    }

    .footer .four img {
        margin-top: 10px;
    }

    table tr td {
        padding: 2px !important;
    }

    .content.twelve h1 {
        background-image: none !important;
        padding-bottom: 25px !important;
    }

    .Accordion, .iconLinks, .begrippen {
        background-image: none !important;
        padding-left: 0px !important;
    }

    .domeinFormulier, .contactFormulier {
        border: none !important;
        padding: 0px !important;
    }

    .breed100 .mainContent.columns {
        width: auto !important;
    }

    .pageclass_referenties .frontrotatorRow, .pageclass_referenties .recentRow, .pageclass_referenties .thumbs span, .pageId_83 .thumbs div, .topMenu {
        display: none !important;
    }

    .pageclass_referenties .thumbs, .pageclass_referenties .thumbs a, .pageclass_referenties .mainParagraphs {
        display: block !important;
    }

    .pageclass_contact .paragraph {
        float: none !important;
        width: 100% !important;
        clear: both !important;
    }

    dl.contactgegevens dt {
        float: none !important;
        width: 100% !important;
    }

    dl.contactgegevens dd {
        float: none !important;
        width: 100% !important;
    }

    .casesRow {
        width: 100% !important;
        float: none !important;
    }

    .para0 {
        float: none !important;
        width: 100% !important;
        margin-top: 0px !important;
    }

    #cases {
        height: auto !important;
        overflow: auto !important;
    }

    .pageId_11 .inputWrap4 {
        width: 100% !important;
    }

    .mobileMenu {
    }

    .menuWrap select {
        display: block !important;
    }

    .subKop, .para0 .subKop {
        top: 0px !important;
        float: none !important;
    }

    .para0 .subKop {
        top: -30px !important;
    }

    h1 {
        height: auto !important;
    }

    .sideCol {
        padding-top: 10px !important;
    }

    .caseItem .arrowLeft {
        left: 0px;
        top: 0px;
    }

    .caseItem .arrowRight {
        right: 0px;
        top: 0px;
    }

    .gratisAdviesrapport, .home .gratisAdviesrapport {
        position: relative !important;
        top: 10px !important;
        right: auto !important;
        display: block;
        width: 243px;
        height: 74px;
        margin: 0 auto;
        background: url('/img/gratisAdviesrapportMobile.png') no-repeat top center !important;
        text-indent: -9999px;
        text-transform: uppercase;
        float: none;
    }

    .content p.intro {
        font-size: 1.5em;
    }

    .content p img {
        float: none;
        width: 100%;
    }

    .knoppenbeneden {
        margin-top: 20px !important;
    }

        .knoppenbeneden:first-child {
            margin-top: 60px !important;
        }
}

@media handheld, only screen and (max-width: 710px) {
}


em, i {
    font-style: italic;
    line-height: inherit;
}

strong, b {
    font-weight: bold;
    line-height: inherit;
}

small {
    font-size: 60%;
    line-height: inherit;
}

h1 small, h2 small, h3 small, h4 small, h5 small {
    color: #777;
}

/*	Blockquotes 
	blockquote, blockquote p { line-height: 20px; color: #777; }
	blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited { color: #555; } */

abbr, acronym {
    text-transform: uppercase;
    font-size: 90%;
    color: #222;
    border-bottom: 1px solid #ddd;
    cursor: help;
}

abbr {
    text-transform: none;
}

/**
 	 * Print styles.
	 *
	 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
	 * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
	 */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    /* Black prints faster: sanbeiji.com/archives/953 */
    p a, p a:visited {
        color: #444 !important;
        text-decoration: underline;
    }

        p a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }
    /* Don't show links for images, or javascript/internal links */
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }
    /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img {
        page-break-inside: avoid;
    }

    @page {
        margin: 0.5cm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }
}
/* Arfully Masterminded by ZURB */

/* --------------------------------------------------
	:: Grid
	
	This is the mobile-friendly, responsive grid that
	lets Foundation work much of its magic.
	
	-------------------------------------------------- */

.container {
    padding: 0px 20px;
    position: relative;
}

.row {
    width: 100%;
    max-width: 954px;
    min-width: 727px;
    margin: 0 auto;
    z-index: 1;
}
    /* To fix the grid into a certain size, set max-width to width */
    .row .row {
        min-width: 0px;
    }

.column, .columns {
    margin-left: 4.4%;
    float: left;
    min-height: 1px;
    position: relative;
}
    /*background-color:#EEE;*/
    .column:first-child, .columns:first-child {
        margin-left: 0px;
    }

.row .one.columns {
    width: 4.3%;
}

.row .two.columns {
    width: 13%;
}

.row .three.columns {
    width: 21.68%;
}

.row .four.columns {
    width: 30.4%;
}

.row .five.columns {
    width: 39.1%;
}

.row .six.columns {
    width: 47.8%;
}

.row .seven.columns {
    width: 56.5%;
}

.row .eight.columns {
    width: 65.2%;
}

.row .nine.columns {
    width: 73.9%;
}

.row .ten.columns {
    width: 82.6%;
}

.row .eleven.columns {
    width: 91.3%;
}

.row .twelve.columns {
    width: 100%;
}

.row .offset-by-one {
    margin-left: 13.1%;
}

.row .offset-by-two {
    margin-left: 21.8%;
}

.row .offset-by-three {
    margin-left: 30.5%;
}

.row .offset-by-four {
    margin-left: 39.2%;
}

.row .offset-by-five {
    margin-left: 47.9%;
}

.row .offset-by-six {
    margin-left: 56.6%;
}

.row .offset-by-seven {
    margin-left: 65.3%;
}

.row .offset-by-eight {
    margin-left: 74.0%;
}

.row .offset-by-nine {
    margin-left: 82.7%;
}

.row .offset-by-ten {
    margin-left: 91.4%;
}
/*.row .offset-by-eleven 	{ margin-left: 95.7%;  }*/

.row .centered {
    float: none;
    margin: 0 auto;
}

/*.row .one.centered { margin-left: 47.9%; }
	.row .two.centered { margin-left: 43.5%; }
	.row .three.centered { margin-left: 39.2%; }
	.row .four.centered { margin-left: 34.8%; }
	.row .five.centered { margin-left: 30.5%; }
	.row .six.centered { margin-left: 26.1%; }
	.row .seven.centered { margin-left: 21.8%; }
	.row .eight.centered { margin-left: 17.4%; }
	.row .nine.centered { margin-left: 13.1%; }
	.row .ten.centered { margin-left: 8.7%; }
	.row .eleven.centered { margin-left: 4.3%; }*/

.row .offset-by-one:first-child {
    margin-left: 8.7%;
}

.row .offset-by-two:first-child {
    margin-left: 17.4%;
}

.row .offset-by-three:first-child {
    margin-left: 26.1%;
}

.row .offset-by-four:first-child {
    margin-left: 34.8%;
}

.row .offset-by-five:first-child {
    margin-left: 43.5%;
}

.row .offset-by-six:first-child {
    margin-left: 52.2%;
}

.row .offset-by-seven:first-child {
    margin-left: 60.9%;
}

.row .offset-by-eight:first-child {
    margin-left: 69.6%;
}

.row .offset-by-nine:first-child {
    margin-left: 78.3%;
}

.row .offset-by-ten:first-child {
    margin-left: 87%;
}

.row .offset-by-eleven:first-child {
    margin-left: 95.7%;
}

img, object, embed {
    max-width: 100%;
    height: auto;
}

img {
    -ms-interpolation-mode: bicubic;
}

/* Nicolas Gallagher's micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.row:after, .clearfix:after {
    clear: both;
}

.row, .clearfix {
    zoom: 1;
}




/*	--------------------------------------------------
	:: Block grids
	
	These are 2-up, 3-up, 4-up and 5-up ULs, suited
	for repeating blocks of content. Add 'mobile' to
	them to switch them just like the layout grid
	(one item per line) on phones
	-------------------------------------------------- */

.block-grid {
    display: block;
    overflow: hidden;
}

    .block-grid > li {
        display: block;
        height: auto;
        float: left;
    }

    .block-grid.two-up {
        margin-left: -4%
    }

        .block-grid.two-up > li {
            margin-left: 4%;
            width: 46%;
        }

    .block-grid.three-up {
        margin-left: -2%
    }

        .block-grid.three-up > li {
            margin-left: 2%;
            width: 31.3%;
        }

    .block-grid.four-up {
        margin-left: -2%
    }

        .block-grid.four-up > li {
            margin-left: 2%;
            width: 23%;
        }

    .block-grid.five-up {
        margin-left: -1.5%
    }

        .block-grid.five-up > li {
            margin-left: 1.5%;
            width: 18.5%;
        }


/* Mobile */

@media handheld, only screen and (device-width: 768px), (device-width: 800px) {
    .reveal-modal-bg {
        position: absolute;
    }

    .reveal-modal,
    .reveal-modal.small,
    .reveal-modal.medium,
    .reveal-modal.large,
    .reveal-modal.xlarge {
        width: 60%;
        top: 30%;
        left: 15%;
        margin-left: 0px;
        padding: 5%;
        height: auto;
    }
}

@media handheld, only screen and (max-width: 767px) {
    .reveal-modal-bg {
        position: absolute;
    }

    .reveal-modal,
    .reveal-modal.small,
    .reveal-modal.medium,
    .reveal-modal.large,
    .reveal-modal.xlarge {
        width: 80%;
        top: 15%;
        left: 5%;
        margin-left: 0px;
        padding: 5%;
        height: auto;
    }
}

/*
			
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/
/* --------------------------------------------------
	:: Grid
	-------------------------------------------------- */

/* Tablet screens */
@media only screen and (device-width: 768px), (device-width: 800px) {
    /* Currently unused */
}


/* Mobile */
@media only screen and (max-width: 767px) {
    body {
        -webkit-text-size-adjust: none;
    }

    .row, body, .container {
        width: 100%;
        min-width: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

        .row .row .column, .row .row .columns {
            padding: 0;
        }

    .column, .columns {
        width: auto !important;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 20px;
        padding-right: 20px;
    }

        .column:last-child, .columns:last-child {
            margin-right: 0px;
        }

    .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered {
        margin-left: 0% !important;
    }


    /* Mobile 4-column Grid */
    .row .phone-one.column:first-child, .row .phone-two.column:first-child, .row .phone-three.column:first-child, .row .phone-four.column:first-child, .row .phone-one.columns:first-child, .row .phone-two.columns:first-child, .row .phone-three.columns:first-child, .row .phone-four.columns:first-child {
        margin-left: 0px;
    }

    .row .phone-one.column, .row .phone-two.column, .row .phone-three.column, .row .phone-four.column,
    .row .phone-one.columns, .row .phone-two.columns, .row .phone-three.columns, .row .phone-four.columns {
        margin-left: 4.4%;
        float: left;
        min-height: 1px;
        position: relative;
        padding: 0;
    }

    .row .phone-one.columns {
        width: 21.68% !important;
    }

    .row .phone-two.columns {
        width: 47.8% !important;
    }

    .row .phone-three.columns {
        width: 73.9% !important;
    }

    .row .phone-four.columns {
        width: 100% !important;
    }
}


/* --------------------------------------------------
	:: Block Grids
	-------------------------------------------------- */

@media only screen and (max-width: 767px) {
    .block-grid.mobile {
        margin-left: 0%;
    }

        .block-grid.mobile li {
            float: none;
            width: 100%;
            margin-left: 0%;
        }
}



/* -------------------------------------------------- 
	:: Mobile Visibility Affordances
---------------------------------------------------*/


.show-on-phones {
    display: none !important;
}

.show-on-tablets {
    display: none !important;
}

.show-on-desktops {
    display: block !important;
}

.hide-on-phones {
    display: block !important;
}

.hide-on-tablets {
    display: block !important;
}

.hide-on-desktops {
    display: none !important;
}


@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) {
    .hide-on-phones {
        display: block !important;
    }

    .hide-on-tablets {
        display: none !important;
    }

    .hide-on-desktops {
        display: block !important;
    }

    .show-on-phones {
        display: none !important;
    }

    .show-on-tablets {
        display: block !important;
    }

    .show-on-desktops {
        display: none !important;
    }
}


@media only screen and (max-width: 767px) {
    .hide-on-phones {
        display: none !important;
    }

    .hide-on-tablets {
        display: block !important;
    }

    .hide-on-desktops {
        display: block !important;
    }

    .show-on-phones {
        display: block !important;
    }

    .show-on-tablets {
        display: none !important;
    }

    .show-on-desktops {
        display: none !important;
    }
}

/* only screen and (device-width: 1280px), only screen and (max-device-width: 1280px),  /*
	/* Keeping this in as a reminder to address support for other tablet devices like the Xoom in the future */

/* Specific overrides for elements that require something other than display: block */

table.show-on-desktops {
    display: table !important;
}

table.hide-on-phones {
    display: table !important;
}

table.hide-on-tablets {
    display: table !important;
}

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px) {
    table.hide-on-phones {
        display: block !important;
    }

    table.hide-on-desktops {
        display: block !important;
    }

    table.show-on-tablets {
        display: block !important;
    }
}

@media only screen and (max-width: 767px) {
    table.hide-on-tablets {
        display: block !important;
    }

    table.hide-on-desktops {
        display: block !important;
    }

    table.show-on-phones {
        display: block !important;
    }
}


/* -------------------------------------------------- 
	:: Forms
---------------------------------------------------*/


@media only screen and (max-width: 767px) {
    div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea,
    form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea {
        display: block;
        width: 96%;
        padding: 6px 2% 4px;
        font-size: 18px;
    }

        form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea {
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
        }

    form.nice div.form-field.error small, form.nice small.error {
        padding: 6px 2%;
        display: block;
    }

    form.nice div.form-field.error .small + small, form.nice .small + .error {
        width: auto;
    }

    form.nice div.form-field.error .medium + small, form.nice .medium + .error {
        width: auto;
    }

    form.nice div.form-field.error .large + small, form.nice .large + .error {
        width: auto;
    }
}