/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 4-dec-2015, 12:38:17
    Author     : MediaLab3
*/

@media screen and (max-width: 400px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    h1{font-size: 22px;}
    h2{font-size: 22px;}
    h3{font-size: 22px;}
    h4{font-size: 18px;}
    h5{font-size: 18px;}
    
    input{border-radius: 0;}
    
    .static{width: 90%; padding-left: 5%; padding-right: 5%;}
    .fluid{width: 90%; padding-left: 5%; padding-right: 5%;}
    .small{width: 90%; padding-left: 5%; padding-right: 5%;}
    
    #logo{left: auto; right: 0; left: 0; margin: 0 auto; top: 0px; background: url('images/gens/dekeukenvanarragon-logo.png') top right no-repeat; width: 30%; background-size: contain !important;}
    #social{top: 115px !important; right: 0; left: 0; margin: 0 auto; text-align: center; top: auto; bottom: 100px;}
    
    span.mobile{display: block;}
    span.mobile a{display: block; width: 100%; height: 100%;}
    
    /* MOBILE MENU */
    .mm-navbar{height: 120px; position: relative; background: url('images/gens/arrow-header.png') top center no-repeat; background-size: 75px;}
    .mm-title{color: #fff; font-size: 22px; line-height: 40px; font-weight: 300; text-align: center; display: none;}
    
    #menu{display: none;}
    #mobmenu{background: #404041;}
    #mobmenu ul li{display: block;}
    #mobmenu ul li + li{margin: 0;}
    #mobmenu ul.mm-listview{margin-top: 0; margin-right: 0px;}
    #mobmenu ul li a{color: #fff;}
    /* MOBILE MENU END */
    
    #info{right: 0; left: 0; margin: 0 auto; text-align: center; bottom: 10px !important;}
    
    #slideshow{background: #404041;}
    #slideshow .slotholder{opacity: 0.4 !important;}
    #slideshow .tp-parallax-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 40% !important;}
    #slideshow .tp-parallax-wrap + .tp-parallax-wrap{top: 55% !important;}
    #slideshow .tp-parallax-wrap + .tp-parallax-wrap + .tp-parallax-wrap{display: none !important;}
    #slideshow .tp-mask-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 45% !important;}
    #slideshow .tp-loop-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important;}
    #slideshow .slide-title{font-size: 22px !important; text-align: center !important; line-height: 30px !important; font-weight: 300 !important; text-align: center !important; right: 0 !important; margin: 0 auto !important; top: 30% !important; width: 100% !important;}
    #slideshow .tp-caption a{font-size: 14px !important; margin: 0 auto !important; line-height: 40px !important; padding-left: 10px !important;}
    
    #pageheader.page{height: 70vh;}
    #pageheader.etenbij{height: 70vh;}
    #pageheader.contact{height: 70vh;}
    
    #herco{display: none;}
    #specerijen{display: none;}
    #bestek{display: none;}
    
    #uitgelicht{display: none;}
    
    #pagecontent .content{width: 90%; background: #fff; padding-left: 5%; padding-right: 5%;}
    #pagecontent .content .btn{display: block;}
    #pagecontent .content .btn + .btn{margin-left: 0; margin-top: 20px;}
    #wrap .column{display: block;}
    #usps .column{width: auto;}
    
    #uitgelicht .art{width: 100%; background-size: contain; background-position: top;}
    #uitgelicht h4{left: 0; right: 0; margin: 0 auto; text-align: center; font-size: 22px; top: -20px;}
    
    #kwaliteiten .left{display: block; width: auto; height: auto; max-height: 30vh;}
    #kwaliteiten .left img{width: 100%;}
    #kwaliteiten .right{display: block; width: auto; height: auto;}
    #kwaliteiten h3{font-size: 14px;}
    #kwaliteiten h4{font-size: 22px;}
    
    #reservering{background: none; border: none;}
    #reservering h2{width: auto; display: block; text-align: center; margin: 0;}
    #reserveren{width: 100%; margin: 0;}
    #reserveren span + span{margin: 0;}
    #reserveren span input{margin-top: 5px !important;}
    
    #news #item h3{font-size: 22px;}
    
    #gerechten ul li .overlay .divider{display: none;}
    #gerechten ul li .overlay h4{display: none;}
    
    #recensies{display: none;}
    
    #impressies ul li{height: auto;}
    #impressies ul li .overlay h4{font-size: 18px;}
    
    #infobalk #krant{background-size: contain; pointer-events: none; width: 70%; top: -140px;}
    #infobalk .left{left: 2%;}
    #infobalk .right{right: 2%;}
    
    #form input{display: block; margin: 0 auto; width: 90%;}
    #form input.btn{width: 80%; margin-top: 30px;}
    
    #maps .route{width: 90%; margin: 0 auto; display: block;}
    #maps .route .inner{padding-top: 0; float: none; margin: 0 auto; display: block; text-align: center;}
    #maps #map{width: 100%; height: 30vh; display: block; margin-top: 30px;}
    
    /* MODALS */
    .modal{width: 85vw; top: 5%;}
    .modal img{width: 100%;}
    
    form input{display: block !important; width: 90% !important; margin: 0 auto !important; height: 30px !important; line-height: 30px !important; font-size: 14px !important;}
    
    #openingstijden #topheader h4{left: 0; right: 0; font-size: 18px; text-align: center;}
    #reserveren_modal #topheader{height: 12vh;}
    #reserveren_modal #topheader h4{left: 0; right: 0; font-size: 18px; text-align: center;}
    #reserveren_modal #reserveren{margin-top: 10px;}
    #reserveren span input{margin: 0; margin-top: 5px;}
    
    #reserveren .column{width: 100% !important; display: block !important; margin-top: 0px;}
    #reserveren .column + .column{margin: 0;}
    #reserveren .column label{text-align: center;}
    #reserveren textarea{display: none;}
    #reserveren .btn{margin-top: 5px !important;}
    
    div.wpcf7 img.ajax-loader{width: auto !important; height: auto !important;}
    /* MODALS END */
    
    #footer #logo{right: auto; top: 100px;}
    #footer #creds{text-align: center; margin-top: 140px;}
    #footer #creds span + span{margin: 0;}
    #footer #creds ul{margin-top: 30px;}
    #footer #ananas{left: 0; right: 0; margin: 0 auto; width: 60%; background-size: contain; background-position: top; pointer-events: none;}
}

@media screen and (min-width: 401px) and (max-width: 720px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    h1{font-size: 22px;}
    h2{font-size: 22px;}
    h3{font-size: 22px;}
    h4{font-size: 18px;}
    h5{font-size: 18px;}
    
    input{border-radius: 0;}
    
    .static{width: 90%; padding-left: 5%; padding-right: 5%;}
    .fluid{width: 90%; padding-left: 5%; padding-right: 5%;}
    .small{width: 90%; padding-left: 5%; padding-right: 5%;}
    
    #logo{left: auto; right: 0; left: 0; margin: 0 auto; top: 0px; background: url('images/gens/dekeukenvanarragon-logo.png') top right no-repeat; width: 30%; background-size: contain !important;}
    #social{top: 165px !important; right: 0; left: 0; margin: 0 auto; text-align: center; top: auto; bottom: 100px;}
    
    span.mobile{display: block;}
    span.mobile a{display: block; width: 100%; height: 100%;}
    
    /* MOBILE MENU */
    .mm-navbar{height: 120px; position: relative; background: url('images/gens/arrow-header.png') top center no-repeat; background-size: 75px;}
    .mm-title{color: #fff; font-size: 22px; line-height: 40px; font-weight: 300; text-align: center; display: none;}
    
    #menu{display: none;}
    #mobmenu{background: #404041;}
    #mobmenu ul li{display: block;}
    #mobmenu ul li + li{margin: 0;}
    #mobmenu ul.mm-listview{margin-top: 0; margin-right: 0px;}
    #mobmenu ul li a{color: #fff;}
    /* MOBILE MENU END */
    
    #info{right: 0; left: 0; bottom: 20px !important; margin: 0 auto; text-align: center;}
    
    #slideshow{background: #404041;}
    #slideshow .slotholder{opacity: 0.4 !important;}
    #slideshow .tp-parallax-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 40% !important;}
    #slideshow .tp-parallax-wrap + .tp-parallax-wrap{top: 55% !important;}
    #slideshow .tp-parallax-wrap + .tp-parallax-wrap + .tp-parallax-wrap{display: none !important;}
    #slideshow .tp-mask-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 45% !important;}
    #slideshow .tp-loop-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important;}
    #slideshow .slide-title{font-size: 22px !important; text-align: center !important; line-height: 30px !important; font-weight: 300 !important; text-align: center !important; right: 0 !important; margin: 0 auto !important; top: 30% !important; width: 100% !important;}
    #slideshow .tp-caption a{font-size: 14px !important; margin: 0 auto !important; line-height: 40px !important; padding-left: 10px !important;}
    
    #pageheader.page{height: 70vh;}
    #pageheader.etenbij{height: 70vh;}
    #pageheader.contact{height: 70vh;}
    
    #herco{display: none;}
    #specerijen{display: none;}
    #bestek{display: none;}
    
    #uitgelicht{display: none;}
    
    #pagecontent .content{width: 90%; background: #fff; padding-left: 5%; padding-right: 5%;}
    #pagecontent .content .btn{display: block;}
    #pagecontent .content .btn + .btn{margin-left: 0; margin-top: 20px;}
    #wrap .column{display: block;}
    #usps .column{width: auto;}
    
    #uitgelicht .art{width: 100%; background-size: contain; background-position: top;}
    #uitgelicht h4{left: 0; right: 0; margin: 0 auto; text-align: center; font-size: 22px; top: -20px;}
    
    #kwaliteiten .left{display: block; width: auto; height: auto; max-height: 30vh;}
    #kwaliteiten .left img{width: 100%;}
    #kwaliteiten .right{display: block; width: auto; height: auto;}
    #kwaliteiten h3{font-size: 14px;}
    #kwaliteiten h4{font-size: 22px;}
    
    #reservering{background: none; border: none;}
    #reservering h2{width: auto; display: block; text-align: center; margin: 0;}
    #reserveren{width: 100%; margin: 0;}
    #reserveren span + span{margin: 0;}
    #reserveren span input{margin-top: 5px !important;}
    
    #news #item h3{font-size: 22px;}
    
    #gerechten ul li .overlay .divider{display: none;}
    #gerechten ul li .overlay h4{display: none;}
    
    #recensies{display: none;}
    
    #impressies ul li{height: auto;}
    #impressies ul li .overlay h4{font-size: 18px;}
    
    #infobalk #krant{background-size: contain; pointer-events: none; width: 70%; top: -140px;}
    #infobalk .left{left: 2%;}
    #infobalk .right{right: 2%;}
    
    #form input{display: block; margin: 0 auto; width: 90%;}
    #form input.btn{width: 80%; margin-top: 30px;}
    
    #maps .route{width: 90%; margin: 0 auto; display: block;}
    #maps .route .inner{padding-top: 0; float: none; margin: 0 auto; display: block; text-align: center;}
    #maps #map{width: 100%; height: 30vh; display: block; margin-top: 30px;}
    
    /* MODALS */
    .modal{width: 85vw; top: 5%;}
    .modal img{width: 100%;}
    
    form input{display: block !important; width: 90% !important; margin: 0 auto !important; height: 30px !important; line-height: 30px !important; font-size: 14px !important;}
    
    #openingstijden #topheader h4{left: 0; right: 0; font-size: 18px; text-align: center;}
    #reserveren_modal #topheader{height: 12vh;}
    #reserveren_modal #topheader h4{left: 0; right: 0; font-size: 18px; text-align: center;}
    #reserveren_modal #reserveren{margin-top: 10px;}
    #reserveren span input{margin: 0; margin-top: 5px;}
    
    #reserveren .column{width: 100% !important; display: block !important; margin-top: 0px;}
    #reserveren .column + .column{margin: 0;}
    #reserveren .column label{text-align: center;}
    #reserveren textarea{display: none;}
    #reserveren .btn{margin-top: 5px !important;}
    
    div.wpcf7 img.ajax-loader{width: auto !important; height: auto !important;}
    /* MODALS END */
    
    #footer #logo{right: auto; top: 100px;}
    #footer #creds{text-align: center; margin-top: 140px;}
    #footer #creds span + span{margin: 0;}
    #footer #creds ul{margin-top: 30px;}
    #footer #ananas{left: 0; right: 0; margin: 0 auto; width: 60%; background-size: contain; background-position: top; pointer-events: none;}
}

@media screen and (min-width: 721px) and (max-width: 1280px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    h1{font-size: 22px;}
    h2{font-size: 22px;}
    h3{font-size: 22px;}
    h4{font-size: 18px;}
    h5{font-size: 18px;}
    
    input{border-radius: 0;}
    
    .static{width: 90%; padding-left: 5%; padding-right: 5%;}
    .fluid{width: 90%; padding-left: 5%; padding-right: 5%;}
    .small{width: 90%; padding-left: 5%; padding-right: 5%;}
    
    #logo{left: auto; right: 0; left: 0; margin: 0 auto; top: 0px; background: url('images/gens/dekeukenvanarragon-logo.png') top right no-repeat; width: 30%; background-size: contain !important;}
    #social{top: 30px; right: 0; left: 0; margin: 0 auto; text-align: center; top: auto; bottom: 100px;}
    
    span.mobile{display: block;}
    span.mobile a{display: block; width: 100%; height: 100%;}
    
    /* MOBILE MENU */
    .mm-navbar{height: 120px; position: relative; background: url('images/gens/arrow-header.png') top center no-repeat; background-size: 75px;}
    .mm-title{color: #fff; font-size: 22px; line-height: 40px; font-weight: 300; text-align: center; display: none;}
    
    #menu{display: none;}
    #mobmenu{background: #404041;}
    #mobmenu ul li{display: block;}
    #mobmenu ul li + li{margin: 0;}
    #mobmenu ul.mm-listview{margin-top: 0; margin-right: 0px;}
    #mobmenu ul li a{color: #fff;}
    /* MOBILE MENU END */
    
    #info{right: 0; left: 0; margin: 0 auto; text-align: center;}
    
    #slideshow{background: #404041;}
    #slideshow .slotholder{opacity: 0.4 !important;}
    #slideshow .tp-parallax-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 40% !important;}
    #slideshow .tp-parallax-wrap + .tp-parallax-wrap{top: 55% !important;}
    #slideshow .tp-parallax-wrap + .tp-parallax-wrap + .tp-parallax-wrap{display: none !important;}
    #slideshow .tp-mask-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 45% !important;}
    #slideshow .tp-loop-wrap{width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important;}
    #slideshow .slide-title{font-size: 22px !important; text-align: center !important; line-height: 30px !important; font-weight: 300 !important; text-align: center !important; right: 0 !important; margin: 0 auto !important; top: 30% !important; width: 100% !important;}
    #slideshow .tp-caption a{font-size: 14px !important; margin: 0 auto !important; line-height: 40px !important; padding-left: 10px !important;}
    
    #pageheader.page{height: 70vh;}
    #pageheader.etenbij{height: 70vh;}
    #pageheader.contact{height: 70vh;}
    
    #herco{display: none;}
    #specerijen{display: none;}
    #bestek{display: none;}
    
    #uitgelicht{display: none;}
    
    #pagecontent .content{width: 90%; background: #fff; padding-left: 5%; padding-right: 5%;}
    #pagecontent .content .btn{display: block;}
    #pagecontent .content .btn + .btn{margin-left: 0; margin-top: 20px;}
    #wrap .column{display: block;}
    #usps .column{width: auto;}
    
    #uitgelicht .art{width: 100%; background-size: contain; background-position: top;}
    #uitgelicht h4{left: 0; right: 0; margin: 0 auto; text-align: center; font-size: 22px; top: -20px;}
    
    #kwaliteiten .left{display: block; width: auto; height: auto; max-height: 30vh;}
    #kwaliteiten .left img{width: 100%;}
    #kwaliteiten .right{display: block; width: auto; height: auto;}
    #kwaliteiten h3{font-size: 14px;}
    #kwaliteiten h4{font-size: 22px;}
    
    #reservering{background: none; border: none;}
    #reservering h2{width: auto; display: block; text-align: center; margin: 0;}
    #reserveren{width: 100%; margin: 0;}
    #reserveren span + span{margin: 0;}
    #reserveren span input{margin-top: 5px !important;}
    
    #news #item h3{font-size: 22px;}
    
    #gerechten ul li .overlay .divider{display: none;}
    #gerechten ul li .overlay h4{display: none;}
    
    #recensies{display: none;}
    
    #impressies ul li{height: auto;}
    #impressies ul li .overlay h4{font-size: 18px;}
    
    #infobalk #krant{background-size: contain; pointer-events: none; width: 70%; top: -140px;}
    #infobalk .left{left: 2%;}
    #infobalk .right{right: 2%;}
    
    #form input{display: block; margin: 0 auto; width: 90%;}
    #form input.btn{width: 80%; margin-top: 30px;}
    
    #maps .route{width: 90%; margin: 0 auto; display: block;}
    #maps .route .inner{padding-top: 0; float: none; margin: 0 auto; display: block; text-align: center;}
    #maps #map{width: 100%; height: 30vh; display: block; margin-top: 30px;}
    
    /* MODALS */
    .modal{width: 85vw; top: 5%;}
    .modal img{width: 100%;}
    
    form input{display: block !important; width: 90% !important; margin: 0 auto !important; height: 30px !important; line-height: 30px !important; font-size: 14px !important;}
    
    #openingstijden #topheader h4{left: 0; right: 0; font-size: 18px; text-align: center;}
    #reserveren_modal #topheader{height: 12vh;}
    #reserveren_modal #topheader h4{left: 0; right: 0; font-size: 18px; text-align: center;}
    #reserveren_modal #reserveren{margin-top: 10px;}
    #reserveren span input{margin: 0; margin-top: 5px;}
    
    #reserveren .column{width: 100% !important; display: block !important; margin-top: 0px;}
    #reserveren .column + .column{margin: 0;}
    #reserveren .column label{text-align: center;}
    #reserveren textarea{display: none;}
    #reserveren .btn{margin-top: 5px !important;}
    
    div.wpcf7 img.ajax-loader{width: auto !important; height: auto !important;}
    /* MODALS END */
    
    #footer #logo{right: auto; top: 100px;}
    #footer #creds{text-align: center; margin-top: 140px;}
    #footer #creds span + span{margin: 0;}
    #footer #creds ul{margin-top: 30px;}
    #footer #ananas{left: 0; right: 0; margin: 0 auto; width: 60%; background-size: contain; background-position: top; pointer-events: none;}
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    .modal{width: 80vw;}
    #specerijen{left: -200px;}
    #herco{left: -190px;}
    #kwaliteiten .left{height: auto;}
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
    
}

@media screen and (min-width: 1921px) {
    
}