/* ============================================================================
    Media Queries 960 and higher (Desktop big)
============================================================================ */
@media screen and (max-width: 1240px) {
	/* Globals */
	body { min-width: 100%; font-size: 15px; }
	body:after { display: none; content: ""; font-family: "FontAwesome"; font-size: 20px; position: fixed; line-height: 30px; text-align: center; color: #FFF; right: 20px; bottom: 20px; z-index: 999; width: 30px; height: 30px; -webkit-border-radius: 50%; border-radius: 50%; background: #000; }
	.inner { width: 95%; }
	
	/* Home */
	
	/* Grids */
	.cols-4 > * { width: 33.333333%; }
	
}
/* ============================================================================
    Media Queries 960 and higher (Desktop small)
============================================================================ */
@media screen and (max-width: 1150px) {
    .header .inner { width: 90%; }
    /* .inner { width: 95%; } */
    .mainInner { width: 90%; }
    .mainInner .btnGreen { font-size: 9px; height: 35px; line-height: 31px; margin-top: 32px; }
    .menuMain ul {margin: 25px 1px; font-size: 15px;}
    .menuMain li { font-size: 12px; margin: 0 5px; }
    .logo { margin-left: 0px; }
    .language { font-size: 12px; margin-left: 10px; margin-right: 20px; }
    .homeSlider .slideInner { width: 83%; }
    .menuSearch {padding-left: 10px;}
    .onScrollMenuMainHover .innerMenuHover { background-color: #fff; display: none; height: 275px; margin: 0 auto; padding: 20px 0; width: 90%; }
    
    
    .boekenHomeHeader { margin-left: 4%; width: 83%; }
    
    .boekenHomeHeader input[type="text"], .boekenHomeHeader input[type="submit"] { width: 19%; margin-right: 3px; }
    .homeSlider .flex-control-nav { max-width: 90%; }
    .activiteitSlider { width: 96%;}
    .aanbiedingSlider { width: 96%;}
    
    .aanbiedingSlider .slide { height: 456px; }
    
    .menuMainHover {
        height: 320px;
        margin-left: 5%;
        margin-top: 0;
        opacity: 1;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 90%;
        }
    .menuMainHover .menuAanbiedingen {  padding-top: 25px; width: 62%; }
    .menuMainHover .menuItems { margin-right: 35px; width: 31%; }
    .hoverMenu li { font-size: 12px; line-height: 18px; margin-bottom: 5px; }
    
    .blocks-twee .ctaBlock { width: 265px; }

    .singleFilter { margin: 0 5px; width: 45%; }
    
    .menuTop { margin: 0 auto 35px; width: 93%; }
    .innerMenuHover .tagAanbieding { top: 18px; }
    .leesMeer { margin-left: 23%;top: 15%; left: 0; }
    .blogItem {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.1) inset;
      display: block;
      height: 390px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      text-align: center;
      width: 95%;
    }
    .blocks-drie .ctaBlock { margin: 0 5px 10px;  }
    
}
/* ============================================================================
    Media Queries 480 - 960 (iPad Portrait)
============================================================================ */
@media screen and (max-width: 960px) {
	/* Globals */
	body { font-size: 14px; }
	body:after { background: green; content: ""; font-size: 24px; }
	
	/* Home */

	/* Grids */
	.cols-3 > * { width: 33.3333333%; }
    
   /*  .inner { width: 95%; } */
    .header { height: 400px; }
    .headerHome { height: 800px; }
    
    .menuBtn { display: block; }
    .menuMain ul {opacity: 0; visibility: hidden;}
    .mainInner .btnGreen {display: none;}
    .language {display: none;}
    .boekenHomeHeader { width: 94%; }
    .logo { margin-left: 0px;}  
    
    .socialIcons li { margin: 15px 10px; float: none; text-align: center; display: inline-block; }
    .colfacebook {display:none;}
    .menuMainHover { display: none; }
    .menuRight { display: none;}
    .menuMain ul {
      background-color: rgba(255, 255, 255, 0.9);
      height: 110%;
      left: 0;
      margin: 0;
      padding: 50px 0 0;
      position: fixed;
      top: 100vh;
      width: 100%;
      z-index: 10000;
      display: block;
    }
    .menuMain li {
      border:none;
      display: inherit;
      width: 60%;
      margin: 0 auto;
      text-align: center;
      opacity: 0;
      height: 48px;
    }
    .menuMain a {
      font-size: 16px;
      line-height: 55px;
    }
    .leftContentPage { width: 100%; }
    .rightContentPage { width: 100%; padding: 0; }
    .simpelBoeken {display: none;}
    .sideBarBlock, .sideBarMenu {width: 75%; margin:20px auto;}
    .sideBarBlock img, .sideBarMenu img {width: 100%;}
    .blocks-twee .ctaBlock > p {
          font-size: 13px;
          height: 78px;
          margin: 0 auto;
          overflow: hidden;
          width: 90%;
        }
    
    .blocks-twee .ctaBlock {
      float: left;
      margin: 10px;
      width: 321px;
    }
    .footerContent .col {  text-align: center; width: 49%; padding-bottom: 50px;}
    .socialIcons { left: 0; margin-top: 45px; position: absolute; text-align: center; width: 100%; }
    
    .footerGreen .inner {padding-top: 30px; }
    .footerMolkeInfo li { margin: 0 5px; display: block;}
    .footerMolkeInfo { line-height: 20px;}
    .footerTop > img {display: block; margin: 0 auto;width: 90%; }
    
    .newsCols > * { width: 50%; }
    
    .menuSearch { padding: 0 25px; }
    .searchToggle {display: none; }
    .searchOff, .searchOn { display: inline; position: absolute; top: 38px; }
    .searchBox { margin-right: 15px; }
    .searchBtn { border-radius: 50% !important; height: 35px; line-height: 1px; margin: 0 !important; padding: 0 !important; position: absolute; right: 8px; text-align: center; top: 18px !important; width: 35px !important; }
    
    .nieuwsBrief {  width: 50%; float: none; margin: 0 auto;}
    .ratingen { display: none; }
    .blogItem {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.1) inset;
      display: block;
      height: 432px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      text-align: center;
      width: 95%;
    }
    .mobileMenu .socialIcons { font-size: 40px;  margin-left: 10px;  margin-top: 30px;  text-align: left; }
    .mobileMenu .socialIcons a { font-size: 25px; }
    .mobileMenu .socialIcons li:hover a { color: #94c11e; }
    .nieuwsBrief input, .nieuwsBrief form button[type="submit"] { max-width: 100%; }
    .contentSocialFeed { margin-top: -30px; padding-top:0; }
    .languageMobile {  margin-top: 60px; float: left; margin-left: 0; padding: 0; display: block;}
    
    
    
    
}
/* ============================================================================
    Media Queries 480 - 720 (iPhone landscape)
============================================================================ */
@media screen and (max-width: 720px) {
	/* Globals */
	body { font-size: 13px; }
	body:after { background: brown; content: ""; font-size: 28px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }

	/* Home */
	
	/* Grids */
	.cols > *, .cols-2 > *, .cols-3 > *, .cols-4 > * { width: 50%; }
    .cols > .col-3 { width: 100%; }
    .cols > .col-4 { width: 100%; } 
    
    /* .inner { width: 500px; } */
    .menuTop { display: none;}
    .menuMain { height: 90px; padding-top: 25px;}
    .onScrollMenu { top: -25px;}
    .mainInner {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);}
    .menuBtn { line-height: 64px !important; }
    .logo { margin-left: 0px; width: 100px; }

    .homeSlider {height:450px;}
    .header {height: 450px;}
    .homeSlider .slideInner { margin: 135px auto 0; }
    .homeSlider .slideTitle { font-size: 40px;  line-height: 35px; }
    .homeSlider .flex-control-nav {margin: -141px auto 0;}
    

    .homeSlider .slideTitle::after { margin-top: 30px; width: 110px; }
    .homeSlider .slideDesc p {  font-size: 16px;  line-height: 30px; margin: 0; }
/*     .activiteitSlider { margin: -85px auto 0;} */
    
    
    .leftContent { float: none; width: 100%; padding: 0; text-align:center;}
    .rightContent {float: none; width: 100%; padding: 0; text-align:center;}
    .magazineTitle::after {margin: 35px auto 0;}
    .btnMagazine { margin: 35px auto 0; }
	.boekenHomeHeader { display:none; }
	.footerBottom { padding: 35px 0 50px; }
	.copyrightLinks {display:none;}
    
    .aanbiedingSlider .slide { height: 440px; }
    .sideBarBlock, .sideBarMenu {float: none; margin: 20px auto; width: 300px; s}
    
    .pageTitle { font-size: 34px; }
    .pageTitle::after { margin: 20px 0 35px; }
    .introDescPage { font-size: 14px; line-height: 22px; }
    .pageDesc { font-size: 13px; line-height: 20px; }
    
    ul.tabs li.current { font-size: 14px; padding: 10px; }
    ul.tabs li {padding: 10px;}
    .itemsTab span {padding-right: 8px;}
    .itemsTab li {font-size: 12px;}
    .itemsTab {width: 100%;}
    
    .blocks-twee div, blocks-drie div { width: 100%; }
    .customSelect { font-size: 11px; }
    
    .footerContent .col {  text-align: center; width: 49%; padding-bottom: 60px;}
    .socialIcons { left: 0; margin-top: 10px; position: absolute; text-align: center; width: 100%; }
    .newsCols > * { width: 50%; }
    .blogItem { height: 530px; }
    
    .contentNews .breadCrumbs { padding-left: 20px; }
    
    
    .menuSearch { left: 0; margin-top: 390px; position: absolute; width: 100%; z-index: 10001; opacity: 0; display: none;}
    .menuSearchResponsiveActive { display: block; opacity: 1; visibility: visible;}
    .searchToggle { display: none; } 
    .searchBox { margin-right: 0 !important; opacity: 1; padding: 0; transition: all 0.3s ease-in-out 0s; visibility: visible; width: 100%; position: relative; top:0; right: 0; }
    .searchInput { width: 100%; }
    #searchsubmit { top: 5px; }
    
    .nieuwsBrief { margin-bottom: 50px; margin-top: 0; }
    .nieuwsBriefTitle { font-size: 18px;margin: 35px 0 25px; text-align: center;}
    .nieuwsBrief input {  height: 40px; padding: 0 20px;}
    .leftContentPage p { font-size: 13px; }
    #wpcf7-f1352-o1 form input, #wpcf7-f1352-o1 form button, #wpcf7-f1352-o1 form select, #wpcf7-f1352-o1 form textarea { width: 100% !important; }
    .blocks-twee .ctaBlock {
      float: left;
      margin: 8px;
      width: 45%;
    }
    .blogItem {
      height: 347px;
    }
    .blogDesc { margin-bottom: 45px; }
    .responsiveItems { display: block; }
    .nieuwsBrief {  width: 75%; }


	
    
}
/* ============================================================================
    Media Queries 480 and lower (iPhone Portrait)
============================================================================ */
@media screen and (max-width: 480px) {
	/* Globals */
	body { min-width: 320px; font-size: 12px; }
	body:after { background: darkblue; font-size: 30px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
	
	/* Home */
    
    .inner { width: 90%; }
    .homeSlider {height:450px;}
    .homeSlider .slideInner { margin: 135px auto 0; }
    .homeSlider .slideTitle { font-size: 40px;  line-height: 35px; }
    .homeSlider .flex-control-nav {margin: -141px auto 0;}
	.molkeSlider .slide { margin: 0 auto; width: 340px; }
	.flex-direction-nav a {top: 43%;}
	/* Grids */
	.cols > *, .cols-2 > *, .cols-3 > *, .cols-4 > * { width: 100%; }
    
    .header { height: 330px; }
    .headerHome { height: 450px; }
    
    .footerContent .col { width: 100%; padding-bottom: 45px; }
    .blogItem { height: 450px; }
    
    form input[type="submit"], form button[type="submit"], form button.button[type="submit"] {width: 100%;}
    #wpcf7-f1352-o1 form input, #wpcf7-f1352-o1 form button, #wpcf7-f1352-o1 form select, #wpcf7-f1352-o1 form textarea { width: 100% !important; }
    .blocks-drie .ctaBlock {
        float: none;
        margin: 15px auto;
        max-width: 230px;
        padding-bottom: 0;
        width: 100%;
}
    .blocks-twee .ctaBlock {
      float: none;
      margin: 8px;
      width: 280px;
      margin: 8px auto;
    }
	#recreatheek_dagprogramma .begintijdkolom, #recreatheek_dagprogramma .eindtijdkolom {width:auto;font-size:11px;}
	#recreatheek_dagprogramma .activiteitkolom {clear:both;width:auto;}
    
    .nieuwsBrief {  width: 90%;}
    .footerTitle { height: auto; }

}