/*
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;}
    
    .mobile{display: block;}    
    #menu{display: none;}
    
    .centering{width: 90%; margin: 0 auto;}
    
    #header #logo{width: 251px; height: 200px; background-size: contain; background-position: top;}
    #header #logo h1 a{background-size: contain; background-position: center; width: 60%; top: 0; left: 10%;}
    
    #pageheader.home{height: 280px;}
    #pageheader.page{height: 280px;}
    
    #pageheader h4{left: 5%; right: 5%; top: 130px; margin: 0 auto; font-size: 20px; line-height: 30px;}
    #pageheader .btn{margin-top: 200px; height: 35px; min-width: 185px; line-height: 35px; font-size: 14px;}
    
    #pagecontent{background: none; padding-top: 60px;}
    #pagecontent.home .content{display: block; width: auto;}
    #pagecontent.home .sidebar{display: block; width: auto; margin-top: 40px;}
    #pagecontent.contact .content{display: block; width: auto;}
    #pagecontent.contact .sidebar{display: block; width: auto; margin-top: 40px;}
    
    #pagecontent.home .sidebar img{width: 100%; height: auto;}
    
    #pagecontent .inner{width: auto;}
    #pagecontent .inner #nieuws{width: 100%;}

    #pagecontent .multi{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
    
    #blocks{padding-top: 60px; padding-bottom: 60px;}
    #blocks .column{width: auto; display: block;}
    #blocks .column + .column{margin-top: 30px;}
    
    #besturen .bestuur .image{display: block; width: auto; text-align: center; margin: 0;}
    #besturen .bestuur .inhoud{display: block; width: auto;}

    .scroll-to-top{right: 40px;}
    
    #ctas .cta{display: block; width: auto;}
    #ctas .cta .inner{width: 90%; left: 0; right: 0; margin: 0 auto; text-align: center;}
    #ctas .cta:nth-child(1) .inner{width: 90%; left: 0; right: 0; margin: 0 auto;}
    #ctas .cta:nth-child(2) .inner{width: 90%; left: 0; right: 0; margin: 0 auto;}
    #ctas .cta .btn{margin: 0 auto; margin-top: 40px; display: block; width: 65%;}
    
    #footer{padding-top: 60px; padding-bottom: 60px;}
    #footer .column{display: block; width: auto; float: none;}
    #footer form{float: none;}
    #footer input.btn{float: none;}
    #footer .column:nth-child(1){width: 50%;}
}

@media screen and (min-width: 401px) and (max-width: 720px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    .mobile{display: block;}    
    #menu{display: none;}
    
    .centering{width: 90%; margin: 0 auto;}
    
    #header #logo{width: 251px; height: 200px; background-size: contain; background-position: top;}
    #header #logo h1 a{background-size: contain; background-position: center; width: 60%; top: 0; left: 10%;}
    /* #pageheader.home{height: 280px;} */
    #pageheader.home{height: 255px;}
    /* #pageheader.page{height: 280px;} */
    #pageheader.page{height: 255px;}
    /* #pageheader h4{left: 5%; right: 5%; top: 130px; margin: 0 auto; font-size: 20px; line-height: 30px;} */
    #pageheader h4{left: 5%; right: 5%; top: 95px; margin: 0 auto; font-size: 20px; line-height: 30px;}
    /* #pageheader .btn{margin-top: 200px; height: 35px; min-width: 185px; line-height: 35px; font-size: 14px;} */
    #pageheader .btn{margin-top: 185px; height: 35px; min-width: 185px; line-height: 35px; font-size: 14px;}
    
    #pagecontent{background: none; padding-top: 60px;}
    #pagecontent.home .content{display: block; width: auto;}
    #pagecontent.home .sidebar{display: block; width: auto; margin-top: 40px;}
    #pagecontent.contact .content{display: block; width: auto;}
    #pagecontent.contact .sidebar{display: block; width: auto; margin-top: 40px;}
    
    #pagecontent.home .sidebar img{width: 100%; height: auto;}
    
    #pagecontent .inner{width: auto;}
    #pagecontent .inner #nieuws{width: 100%;}

    #pagecontent .multi{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
    
    #blocks{padding-top: 60px; padding-bottom: 60px;}
    #blocks .column{width: auto; display: block;}
    #blocks .column + .column{margin-top: 30px;}
    
    #besturen .bestuur .image{display: block; width: auto; text-align: center; margin: 0;}
    #besturen .bestuur .inhoud{display: block; width: auto;}

    .scroll-to-top{right: 40px;}
    
    #ctas .cta{display: block; width: auto;}
    #ctas .cta .inner{width: 90%; left: 0; right: 0; margin: 0 auto; text-align: center;}
    #ctas .cta:nth-child(1) .inner{width: 90%; left: 0; right: 0; margin: 0 auto;}
    #ctas .cta:nth-child(2) .inner{width: 90%; left: 0; right: 0; margin: 0 auto;}
    #ctas .cta .btn{margin: 0 auto; margin-top: 40px; display: block; width: 65%;}
    
    #footer{padding-top: 60px; padding-bottom: 60px;}
    #footer .column{display: block; width: auto; float: none;}
    #footer form{float: none;}
    #footer input.btn{float: none;}
    #footer .column:nth-child(1){width: 50%;}
}

@media screen and (min-width: 721px) and (max-width: 1000px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    .mobile{display: block;}    
    #menu{display: none;}
    
    .centering{width: 90%; margin: 0 auto;}
    
    #header #logo{width: 251px; height: 200px; background-size: contain; background-position: top;}
    #header #logo h1 a{background-size: contain; background-position: center; width: 60%; top: 0; left: 10%;}
    
    #pageheader.home{height: 280px;}
    #pageheader.page{height: 280px;}
    
    #pageheader h4{left: 5%; right: 5%; top: 130px; margin: 0 auto; font-size: 20px; line-height: 30px;}
    #pageheader .btn{margin-top: 200px; height: 35px; min-width: 185px; line-height: 35px; font-size: 14px;}
    
    #pagecontent{background: none; padding-top: 60px;}
    #pagecontent.home .content{display: block; width: auto;}
    #pagecontent.home .sidebar{display: block; width: auto; margin-top: 40px;}
    #pagecontent.contact .content{display: block; width: auto;}
    #pagecontent.contact .sidebar{display: block; width: auto; margin-top: 40px;}
    
    #pagecontent.home .sidebar img{width: 100%; height: auto;}
    
    #pagecontent .inner{width: auto;} 
    
    #blocks{padding-top: 60px; padding-bottom: 60px;}
    #blocks .column{width: auto; display: block;}
    #blocks .column + .column{margin-top: 30px;}
    
    #besturen .bestuur .image{display: block; width: auto; text-align: center; margin: 0;}
    #besturen .bestuur .inhoud{display: block; width: auto;}

    #nieuws{width: 100%;}
    .scroll-to-top{right: 40px;}
    
    #ctas .cta{display: block; width: auto;}
    #ctas .cta .inner{width: 90%; left: 0; right: 0; margin: 0 auto; text-align: center;}
    #ctas .cta:nth-child(1) .inner{width: 90%; left: 0; right: 0; margin: 0 auto;}
    #ctas .cta:nth-child(2) .inner{width: 90%; left: 0; right: 0; margin: 0 auto;}
    #ctas .cta .btn{margin: 0 auto; margin-top: 40px; display: block; width: 65%;}
    
    #footer{padding-top: 60px; padding-bottom: 60px;}
    #footer .column{display: block; width: auto; float: none;}
    #footer form{float: none;}
    #footer input.btn{float: none;}
    
}

@media screen and (min-width: 1001px) and (max-width: 1260px) {
    html{padding: 0; margin: 0;}
    body{padding: 0; margin: 0;}
    
    .centering{width: 980px;}
    
    #nieuws{width: 100%;}
    .scroll-to-top{right: 5%;}
    
    #ctas .cta .inner{width: 450px;}
    #ctas .cta:nth-child(1) .inner{}
    #ctas .cta:nth-child(2) .inner{left: 60px;}
}