/* ==========================================================================
   Desktops, (1200px and up)
   ========================================================================== */

@media (min-width: 1200px) {

/*    
body.base .eyecatcher,
body.base .eyecatcher li img { max-height: 320px; } 
*/
 
body.home .eyecatcher,
body.home .eyecatcher li img { min-height: 400px; } 


    
}

/* ==========================================================================
   Normal devices (tablets, 980px and up)
   ========================================================================== */

@media (min-width: 980px) and (max-width: 1199px) {

	.container { width: 940px;}
    
    body.base .search-and-book-box{
        margin-top: -140px;
        height: 140px;
    }
    
    body.home .eyecatcher,
    body.home .eyecatcher li img { min-height: 300px; } 
    
    .home-blocks .container{ width: 870px; }
    .home-blocks.carousel .item .image { margin: 0 45px; }
    
    .photo-block::after,
    .photo-block::before { height: 60px; }
    
    .photorow::before{
        height: 70px;
        top: -60px;
    }
    
    header .logo { max-width: 200px; }
    .menu > li > a { padding: 15px 8px 16px; font-size: 15px; }
    
    .accommodations-overview .acco-item .description h2{ font-size: 16px; text-align: center; }
	
}


/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 979px) {


	.container { width: 720px;}
    
    body.base .search-and-book-box {
        margin-top: -70px;
        height: 100px;
    }
    
    .header-top .contact li.show{  top: 8px; }
    .header-top .contact li.tel,
    .header-top .contact li.email{ right: 310px; }
    
    body.home .eyecatcher,
    body.home .eyecatcher li img { min-height: 200px; } 
    
    .photo-block::after,
    .photo-block::before{ height: 60px; }

	/* logo-3w */
	.logo-3w { display: none;}
    
    .home-blocks.carousel .item .image{
        margin: 0px;
    }
    
    .photorow::before{
        height: 50px;
        top: -40px;
    }
    
    
    /* accommodaties */
    .accommodations-overview .acco-item .description h2 {
        font-size: 16px;
        text-align: center;
    }
    
    /* faciliteiten / omgeving */
    body.module .item .image, body.module .news-item .image{
        margin-bottom: 10px;
        width: 100px;
    }
    body.module .item .image::before, body.module .news-item .image::before{
        margin-top: 30px;       
    }
    
    body.module .gallery .image{
        width: 120px;
        height: 120px;
    }
    body.module .gallery .image::before{
        margin-top: 42px;
    }
    


}


/* ==========================================================================
   Extra small devices (phones, less than 768px)
   ========================================================================== */

@media (max-width: 767px) {
    
    .hide-desktop{
        display:block;
    }

    .header-top .contact li.textline {
        display:none;
    }
    
    .header-bottom a.online-boeken {
        display: block;
        background: none;
        width: 100%;
        box-shadow: none;
        margin-top: 40px;
    }
    .header-bottom a.online-boeken:hover {
        background: none;
    }
    a.online-boeken .title { display: none; }
    
    .header-top .contact li.email { display:none; }
    .header-top .contact li.show{  top: 8px; }

     .header-top .contact li.tel {
        position: relative;
        right: 0;
        left: 0;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
        width: 100%;
        padding: 0;
        margin: 0 0 10px;
        display: none;
        text-align: right;
        float: left;
    }
    .header-top .contact li.tel.show {
        display: block;
    }
    
    .header-top .contact li.tel span{     
        padding: 0px 10px;
        clear: both;
        float: left;
        width: 100%;
        font-size: 15px; 
    }

  

    .header-top .contact li.tel span {
        clear: none;
        float:left; 
    }


    .header-top .contact .icon.mail a { display:block;  }
    .header-top .contact .icon.mail i.base { display:none; }

	.container { width: auto;}

    .eyecatcher {
        min-height: 80px;
    }
    .wrapper::before {
        display: none;
    }
    
    body.base .search-and-book-box {
        margin-top: -40px;
        height: 60px;
    }

    /* table */
    table {
		overflow-x: auto;
		display: block;
        max-width: 100%;
	}

	/* contact-form */
	.contact-form td { display: block;}
	.contact-form input[type=text], .contact-form  select, .contact-form  textarea { width: 100%;}
    
    .photo-block::after,
    .photo-block::before { height: 40px; }
    
    .home-blocks.carousel .item .image{
        margin: 20px auto;
        float: none;
    }
    .home-blocks.carousel .item .image.breakout img{
        margin-top: -120px;
        float: left;
    }
    .carousel .item .desc{
        margin-bottom: 20px;
    }
    .carousel .owl-carousel .owl-nav .owl-prev {  left: 5px;  }
    .carousel .owl-carousel .owl-nav .owl-prev:hover { left: 3px;}
    .carousel .owl-carousel .owl-nav .owl-next {right: 5px;}
    .carousel .owl-carousel .owl-nav .owl-next:hover { right: 3px;}

    .carousel .owl-carousel .owl-nav div {
        margin-top: -45px;
    }
    
    .photo-block .photo a.btn{       
        right: 0!important;
        left: 0!important;
        width: 90%;
        bottom: 40px!important;
        margin: 0px 5% 0 5%!important;
    }
    .photo-block .photo:last-child a.btn{
        margin-top: -100px!important;
    }
    
    .text-block .content {
        padding: 0 15px;
    }
    .search-and-book-box .box {
        padding: 10px 0px 5px;
    }
    .text-block .content a.btn{
        margin: 0px;
    }
    .home .btn{
        width: 100%;
        margin-bottom: 10px!important;
    } 
    
    .photorow::before{
        height: 40px;
        top: -30px;
    }

    .pop-up {
        bottom: 15px;
        left: 15px;
        right: 15px;

        display: none;
        max-width: 100%;
    }
    
    footer .col-3{
        width: 50%;
        float: left;
        margin-bottom: 20px;
    } 
    
    /* accommodaties */
    body.module .accommodation-detail .col-4 {
        padding-left: 0px;
    }  
    .accommodations-overview .acco-item .description h2 {
        font-size: 16px;
        text-align: center;
    }

    body.home .btn-blauw {
        display: block;
        margin: 10px;
    }

    .photo-block .photo .title {
        font-size: 16px;
        left: 0!important;
        right: 0!important;
        width: 100%;
        text-align: center;
    }

    
    /* faciliteiten / omgeving */
    body.module .content-left, body.module .content-right {
        width: 100%;
    }
    body.module .gallery{
        padding-left:0px;
    }
    
    .content.right{ margin-top: 20px;}
    
    body.module .accommodation-detail .col-8 {
        float: left;
    }
    body.module .accommodation-detail h1 {
        width: 100%;
        float:left;
    }
    body.module .content .item .btn{ margin-bottom: 10px;}
    
    /* iframes */
    .content iframe{ width: 100%; }
    
	
	/* logo-3w */
	.logo-3w { display: none;}
	
}


/* ==========================================================================
   Responive nav
   ========================================================================== */

@media screen and (min-width: 980px) {
	
	.js .nav-collapse { position: relative;}
	.js .nav-collapse.closed { max-height: none;}
	.nav-toggle { display: none;}
	
}
@media screen and (max-width: 979px) { 

	.js .nav-collapse {
		clip: rect(0 0 0 0);
		max-height: 0;
		position: absolute;
		display: block;
		overflow: hidden;
		zoom: 1;
        clear: both;
	}
	.nav-collapse.opened {
		max-height: 9999px;
	}
	.nav-toggle {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
        
        float: right;
        padding: 8px;
        font-size:20px;
	}
    .menu{
        width: 100%;
        padding: 10px;
    }
	.menu > li {
		float:none!important;
        border-top: 1px solid #FFFFFF;
        background-color: #F3F3F3;
	}
    .menu > li > a {
        padding: 5px;   
    }
    .menu > li > ul{
        display:block;
        position: relative;
        box-shadow: none;
        padding: 10px 15px;
    }
    
    header{
        position: relative!important;
        transition: none!important;
        z-index:9999;
    }
    
    header .logo{
        max-width: 150px;
        top: -30px;
    }
    .header-top .contact {
        margin-left: 100px;
        padding: 0;
    }
    .header-top .contact li.tel,
    .header-top .contact li.email{
        font-size:12px;
        margin-right: 5px;
    }
    .header-top .contact li.email{
        padding-right: 20px;
        padding-left: 80px;
    }
    .header-top .contact li{
       margin-right: 5px; 
    }
    .header-top .language select{
        width: 90px;
        padding: 0px 10px;
        font-size: 12px;    
    }
    
    /* zoek en boek */
    .search-and-book-box {
        
    }
    .search-and-book-box .box{
        width: 370px;
    }
    .search-and-book-box .container{
        left: 0px;
        position: absolute;   
        top: 150px;
    }
    .search-and-book-box .title{
        font-size: 15px;
    }
    .search-and-book-box .btn{
        font-size: 14px;
    }
    
    /* home-blocks */
    .home-blocks .owl-carousel .owl-dots.disabled, .home-blocks .owl-carousel .owl-nav.disabled{
        display:none;
    }
    
    /* Accommodaties */
    body.module .accommodations-overview .acco-item .image img{
        width: 100%;
    }
    body.module .accommodations-overview .acco-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    
	
}


/* ==========================================================================
   Extra small devices (phones, less than 480px)
   ========================================================================== */

@media (max-width: 479px) {
    
    header .logo{
        top:0px;
        left:15px;
        transition: all 0.5s ease-in-out;
    }
    .js-nav-active header .logo{
        max-width: 100px;
    }

   
    .header-top .contact li {
        margin-right: 2px;
    }
    .header-top .socialmedia .fa-stack {
        width: 1.4em;
    }
    .header-top .contact li.socialmedia {
        margin-right: 4px;
    }

    .header-top .contact {
        margin-left: 0px;
    } 
    .header-top .contact a{
        pointer-events: inherit;
    }
 

    .search-and-book-box {
        padding: 110px 20px;
        margin-top: -140px;
    }
    .search-and-book-box .container{
        position: relative;
        left: inherit;
        top: inherit;
        width: 100%;
    }
    
    .search-and-book-box .box {
        background:none;
        width: 100%;
    }
    .search-and-book-box .title {
        display: none;
    }
    .search-and-book-box .btn {
        font-size: 14px;
        position: absolute;
        left: 0px;
        top: 35px;
    }
    
    .home-blocks.carousel .item .image {
        width: 250px;
        height: 250px;
    }
    
    .news-block.carousel .content.col-4 {
        padding: 20px;
    }
    .news-block.carousel .item .newsimg{
        width: 100%;
        height: auto;
    }
    .news-block .content a.btn{
        margin-top: 0px;
    }
    .sponsor-block .content ul{
        display: block;   
    }
    .sponsor-block .content ul li{
        width: 25%;
        float: left;
        height: 80px;
    }
    
    .photo-block::after,
    .photo-block::before { height: 25px; }
    
    /* Accommodaties */
    body.module .container .row {
        padding: 15px;
    }
    body.module .container .row {
        padding:0px;
    }
    
    body.module .accommodations-overview .acco-item .image img{
        width: 100%;
    }
    body.module .accommodations-overview .acco-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    body.module .accommodation-detail .col-4 .accommodation-gallery .image {
        margin: 10px 1.5% 0px 1.5%;
        width: 47%;
        float: left;
    }
    
    body.module .accommodation-detail .content a.btn{
        width: 100%;
    }
    
   
    
    /* faciliteiten / omgeving */
    body.base .content h1{
        float: left;
        width: 100%;
    }
    
    .btn.pull-right{
        margin-bottom: 20px;
    }
    body.module .gallery .image{
        width: 130px;
        height: 130px;
    }
    body.module .gallery .image::before{
        margin-top: 48px;
    }
    
     footer .col-3{
        width: 100%;
    }  
    
    /* nieuws */
    
    /* contact */
    form table tbody{
        display: table;
        width: 100%;
    }
    
    .contact-form .btn{ width: 100%; }
    
    
    


    
}

@media (max-width: 419px) {
    
    body.module .item .image, body.module .news-item .image{
        width: 100%;
        height: 100%;
    }
    body.module .item .image img, body.module .news-item .image img{
        width: 100%;
    }
    body.module .item .image::before{
        margin-top: 35%;
    }
    body.module .news-item .image::before{
        margin-top: 41%;
    }
    
    
    
}