@media only screen and (max-width:688px) {
    #divHeader {
        background-position-y: 126px;
        height: 177px;
    }

    #divHeaderMenu {
        margin-top: 4px;
    }

    #divDuikertje {
        margin-top: 2px;
    }

    #imgHomeMenu {
        margin-right: 0;
    }

    #zoeken {
        width: calc(100% - 64px);
    }

    .divMenuknop {
        font-size: 0.9em;
    }

    #divKruimelpadIcon {
        display: none;
    }

    #divMobielIcon {
        display: block;
        float: right;
		width: 100%;
    }

        #divMobielIcon img {
			float: right;
            cursor: pointer;
            margin: 1.2rem 0.5rem;
            width: 28px;
        }

    .divMenu {
        padding-left: 15px;
        padding-right: 15px;
    }

    .form-inline {
        display: block;
    }

        .form-inline label:first-child {
            width: 100%;
            margin-bottom: 15px;
        }

    .divTekst {
        padding: 0;
        width: 100% !important;
    }

        .divTekst img {
            max-width: 100%;
        }

    .divFormTekst {
        padding: 0;
    }

    .divOnderdeelSel, .divFormHolder {
        padding-bottom: 0;
        width: 100%;
    }

    .divSubmenuHolder {
        margin-bottom: 17px;
    }

    #imgLogoIZM {
        width: 320px;
    }

    .form-control {
        width: 100% !important;
		margin-left: 0 !important;
		display: inline-block;
    }

    .form-inline .fr-box {
        width: 100% !important;
    }

    .divFormHolder label:first-of-type {
        padding-top: 0px !important;
    }

    input[type="checkbox"] + label, input[type="radio"] + label {
        white-space: normal;
    }

    .inputFile + label {
        width: 100%;
    }

    .fr-view img.fr-dii {
        height: auto;
    }

    #divHeaderMenu span.divHeaderMenuSpan {
        display: none;
    }
}
@media only screen and (max-width:549px) {

	.divLogoIZM {
		width: 10% !important;
	}
	
	#divHeaderMenu {
		margin-top:80px;
	}
	#aDoelgroep {
		padding: 0.8rem
	}

	#aUitloggen {
		padding: 0.8rem;
	}

	.divMededelingIcon {
		width: 42%;
	}

	.btn {
		margin: 0.7rem;
	}

	.submenu-row {
		width: 100% !important;
	}

	/* Brieven/E-mail */

	.divLiBriefEmail span {
		display: inline-block;
		width: 50%;
	}

	.nietSortable .divLiBriefEmail {
		min-height: 4rem;
		height: auto !important;
	}

	.sortCategorie {
		margin: 0 3.3rem 2rem 0;
	}

	/* Col bootstrap overide */
	.col-md-3 {
		width: 28%;
	}
}
@media only screen and (max-width:443px) {

	.msg-bottom {
		left: 48.5%;
	}
	
	#divHeader {
		background-position-y:156px;
		height:209px;
	}

	#divDoelgroep {
		width: auto;
	}

	#divKruimelpad{
		margin-top:46px;
	}

	#divDuikertje {
		margin-top:-32px;
		padding-left:0;
	}

	#divHeaderMenu {
		margin-top: 6rem;
	}

	#divHomeMenu {
		margin-top:14px;
	}

	#divDoelgroep {
		margin-top:45px;
	}

	#divMobielIcon {
		margin-top:14px;
	}

	.btnIphoneBreed {
		margin-bottom:15px !important;
		width:100%;
	}

	.divPlaatje {
		width:100%;
	}

	.divOmschrijving {
		width: 100% !important;
	}

	.form-group label {
		text-align: left !important;
		border-right: 0 !important;
		border-left: 0.1rem solid var(--primary-lighter);
		min-height: 3.6rem !important;
	}

	/* Col bootstrap overide */
	.col-md-3 {
		width: 45%;
	}
}

@media only screen and (max-width:736px) {
	.tabOverzicht table, .tabOverzicht thead, .tabOverzicht tbody, .tabOverzicht th, .tabOverzicht td, .tabOverzicht tr {
		display: block;
	}
	.tabOverzicht td::before {
		overflow: hidden;
		min-width: 40% !important;
	}
	.tabOverzicht tr {
		margin-bottom: 10px;
	}

	.tabOverzicht thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.tabDiplomaZwemmen thead tr {
		position: static !important;
	}

	.tabOverzicht td {
		border: none;
		margin-bottom: 2px;
		position: relative;
		padding-left: calc(45% + 15px);
		white-space: normal;
		text-align: left !important;
		min-height: 40px;
	}

	.tabOverzicht td input[type='checkbox'] {
		margin: -15px;
		margin-left: 0px;
	}

	.tabOverzicht td:before {
		height:100%;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 45%;
		white-space: nowrap;
		text-align: left;
		color: var(--primary);
		background: var(--primary-accent);
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		border-right: 0.1rem solid var(--primary-lighter);
	}

	.tdIcon {
		width: auto !important;
	}

	.tabScores tbody tr:nth-child(4n+1), .tabScores tbody tr:nth-child(4n+2)  {
		background: var(--lighter-table-row) !important;
	}

	.tabOverzicht td:before {
		content: attr(data-title);
		font-weight: normal;
		text-align: right;
		padding-right: 0.5rem;
	}

	.tabOverzicht .tdTotaal:not(.tdTotaalMetTitel):before {
		content:none;
	}
	.tdTotaalMetTitel {
		font-weight: normal !important;
	}

	.tabOverzicht .tdVerbergMobiel {
		display: none;
	}

	.tabOverzicht + .divButtons {
		padding-top: 26px;
	}

	.tabOverzicht + h3 {
		margin-top:22px;
	}

	.tabOverzicht td .form-control {
		width:calc(55% - 15px);
		margin-left: calc(45% + 15px);
	}
	
	.tabOverzichtHalf {
		float:none;
		width:100%;
	}

	.tdIcon {
		padding-left:calc(45% + 15px) !important;
	}

	.trMobileHide {
		display:none !important;
	}

	.tdMobileShow {
		display:block !important;
	}

	.divHulp {
		width:100% !important;
	}

	.tdVerbergenStaand {
		display:block;
	}

	.ulOnderdelen {
		columns:1;
	}

	.form-group .divSelectieHolder, .divFormTekst {
		width: 100% !important;
	}

	.nietOpMobiel {
		display: none;
	}
	.landscapemelding {
		text-align: center;
	}

	.tdButton .btn-primary:first-child {
		margin-left:calc(45% + 15px);
	}

	.form-inline select {
		background-image:none !important;
	}

    .tdLabel {
        padding-bottom:5px !important;
        width:initial;
    }

    .form-score {
        margin:0;
    }

    .divTouchMobiel {
        overflow: scroll;
    }

    .tabTouchNormaal {
        width: 100%;
    }

    .tabTouchNormaal th {
        background-color: #F18800;
        border-right: 2px solid #fff;
        color: #fff;
        padding: 10px 10px 10px 15px;
        text-align: left;
        vertical-align: top;
    }

    .tabTouchNormaal td {
        border-right: 2px solid #fff;
        padding: 10px 10px 10px 15px;
        vertical-align: top;
    }

    .tabTouchNormaal + .form-inline {
        margin-top: 35px;
    }

    .tabTouchNormaal .tdIcon {
        padding-left: 15px !important;
    }
	tr.mobile-hide {
		display: none;
	}
}

@media only screen and (max-width:812px) {
    #divHomeKruimelpad {
        display: none;
    }
}