/*
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 : 18-dec-2015, 18:04:44
    Author     : MediaLab3
*/

/* Landscape phones and down */
  @media (max-width: 480px) { 
	body {margin:0 !important; padding:0 !important;}
        #logo{left: 0; right: 0; margin: 0 auto; width: 90%;}
        #social{left: 0; right: 0; margin: 0 auto; text-align: center; width: 100%;}
        
        #pagecontent{padding-top: 260px;}
        #pagecontent .content{width: 80%; padding-left: 5%; padding-right: 5%; margin: 0 auto;}
        #pagecontent .content h2{font-size: 40px; line-height: 38px;}
        
        #footer{left: 0; right: 0; margin: 0 auto; width: 90%; bottom: -100px;}
        #footer #social{display: none;}
        #footer .left{background: url('../images/footer-logo.png') center top no-repeat; height: auto; padding: 0; padding-top: 40px; text-align: center;}
        
        #contactform{width: 90%; margin: 0 auto; left: 0; right: 0; background: #000; top: -200%;}
        #contactform #contact-area input{display: inline-block; vertical-align: top; width: 38%; margin-bottom: 20px;}
        #contactform #contact-area input + input{margin: 0;}
        #contactform #contact-area input#Leeftijd{display: block; width: 80%; margin: 0 auto; margin-top: 20px;}
        #contactform #contact-area input#Geboorte{display: block; width: 80%; margin: 0 auto; margin-bottom: 20px;}
        #contactform .onder{font-size: 12px;}
        
        span.mobile{display: block;}
        span.close{display: block; text-align: center; font-weight: 900; color: #fff; border: 2px solid #fff; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; cursor: pointer; margin: 0 auto; margin-top: 30px; margin-bottom: -20px;}
        span.close:hover{background: #fff; color: #000;}
  }
  @media (min-width: 481px) and (max-width: 767px) { 
	body {margin:0 !important; padding:0 !important;}
        #logo{left: 0; right: 0; margin: 0 auto; width: 90%;}
        #social{left: 0; right: 0; margin: 0 auto; text-align: center; width: 100%;}
        
        #pagecontent{padding-top: 260px;}
        #pagecontent .content{width: 80%; padding-left: 5%; padding-right: 5%; margin: 0 auto;}
        #pagecontent .content h2{font-size: 40px; line-height: 38px;}
        
        #footer{left: 0; right: 0; margin: 0 auto; width: 90%; bottom: -100px;}
        #footer #social{display: none;}
        #footer .left{background: url('../images/footer-logo.png') center top no-repeat; height: auto; padding: 0; padding-top: 40px; text-align: center;}
        
        #contactform{width: 90%; margin: 0 auto; left: 0; right: 0; background: #000; top: -200%;}
        #contactform #contact-area input{display: inline-block; vertical-align: top; width: 38%; margin-bottom: 20px;}
        #contactform #contact-area input + input{margin: 0;}
        #contactform #contact-area input#Leeftijd{display: block; width: 80%; margin: 0 auto; margin-top: 20px;}
        #contactform #contact-area input#Geboorte{display: block; width: 80%; margin: 0 auto; margin-bottom: 20px;}
        #contactform .onder{font-size: 12px;}
        
        span.mobile{display: block;}
        span.close{display: block; text-align: center; font-weight: 900; color: #fff; border: 2px solid #fff; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; cursor: pointer; margin: 0 auto; margin-top: 30px; margin-bottom: -20px;}
        span.close:hover{background: #fff; color: #000;}
  }
 
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 1000px) { 
	body {margin:0 !important; padding:0 !important;}
        #logo{left: 0; right: 0; margin: 0 auto; width: 90%;}
        #social{left: 0; right: 0; margin: 0 auto; text-align: center; width: 100%;}
        
        #pagecontent{padding-top: 260px;}
        #pagecontent .content{width: 80%; padding-left: 5%; padding-right: 5%; margin: 0 auto;}
        #pagecontent .content h2{font-size: 40px; line-height: 38px;}
        
        #footer{left: 0; right: 0; margin: 0 auto; width: 90%; bottom: -100px;}
        #footer #social{display: none;}
        #footer .left{background: url('../images/footer-logo.png') center top no-repeat; height: auto; padding: 0; padding-top: 40px; text-align: center;}
        
        #contactform{width: 90%; margin: 0 auto; left: 0; right: 0; background: #000; top: -200%;}
        #contactform #contact-area input{display: inline-block; vertical-align: top; width: 38%; margin-bottom: 20px;}
        #contactform #contact-area input + input{margin: 0;}
        #contactform #contact-area input#Leeftijd{display: block; width: 80%; margin: 0 auto; margin-top: 20px;}
        #contactform #contact-area input#Geboorte{display: block; width: 80%; margin: 0 auto; margin-bottom: 20px;}
        #contactform .onder{font-size: 12px;}
        
        span.mobile{display: block;}
        span.close{display: block; text-align: center; font-weight: 900; color: #fff; border: 2px solid #fff; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; cursor: pointer; margin: 0 auto; margin-top: 30px; margin-bottom: -20px;}
        span.close:hover{background: #fff; color: #000;}
  }
 
  /* Less Large desktop */
  @media (min-width: 999px) and (max-width: 1199px) { 
	body {margin:0 !important; padding:0 !important;}
        span.mobile{display: none;}
        span.close{display: none;}
        #contactform{right: 5%; width: 35%;}
  }
  
  /* Large desktop */
  @media (min-width: 1200px) { 
	body {margin:0 !important; padding:0 !important;}
        
        span.mobile{display: none;}
        span.close{display: none;}
  }