/* WEBSITE_STYLES
   --------------------------------------------- */
    html, body { height: 100%; }
    body { 
        min-height: 100%;
        font-family: 'Avenir';
        font-size: 14px;
        line-height: 140%; 
        overflow-x: hidden;
    }
    
    h1, h2, h3, h4, h5, h6 { color: #075694; font-weight: 700; }
    ul, p, li, table { color: #fff; font-weight: 400; }    
    strong { color: #fff; font-size: 1.2em; font-weight: 600; }
    
    a { text-decoration: none; color: #1f4f8c; font-weight: 400; }
      
    .hover:hover {
        opacity: .90;
        -webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        -ms-transition: all .2s ease-in;
        -o-transition: all .2s ease-in;
        transition: all .2s ease-in;
    }

/* PAGE_WRAP
   --------------------------------------------- */ 
    section.page {
        width: 100%;
        min-width: 300px; 
        padding: 0;
        margin: 0 auto; 
        position: absolute;
        top: 350px;
        left: 0;
        right: 0; 
        z-index: 7000;
    }

/* TOP
   --------------------------------------------- */ 
    section.top {
        width: 100%;
        background: #fff;
        border-top: 5px solid #075694;
        -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1);
    }   
    
        section.top > article:first-of-type { max-width: 1024px; min-width: 300px; margin: 0 auto; padding: 20px 10px; }
            
            section.top .logo {
                width: 100%;
                max-width: 201px;
                height: 140px;
                margin: 0;
                display: inline-block;
                background: url('../img/logo.png') no-repeat center; 
            } 
            
            section.top .tel_00 { width: auto; margin-top: 20px; float: right; }
            section.top .tel {
                height: auto;
                float: right;
                font-size: 3em; 
                font-weight: 700;
                letter-spacing: -2px;
                line-height: 117%;
            }

            section.top .mailen {
                height: auto;
                float: right;
                padding: 5px 15px;
                font-size: 2em; 
                font-weight: 700;
                letter-spacing: -2px;
                line-height: 117%;
                color: #fff;
                background: #ff7800;
                border: 1px solid #ef7203;
                border-bottom: 2px solid #ef7203;
                margin-top: -50px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .3);
                box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .3);
                -webkit-transition: background 300ms ease;
                transition: background 300ms ease;
            }

                section.top .mailen:hover {
                    background: #fc8a25;
                }
            
    .naam_frank{
    	float: right;
    	width: 100%;
    	clear: both;
    	font-size: 26px;
    	text-align: right;
    	margin-top: 0;
    }
    
/* CONTENT
   --------------------------------------------- */         
    section.content { 
        width: 100%; 
        max-width: 1024px; 
        min-width: 300px; 
        margin: 0 auto; 
        padding: 50px 0 0;
        font-size: 1.15em;
        line-height: 160%;
        letter-spacing: -.01em;
   }
           
        section.content h1 { font-size: 2em; font-weight: 700; margin: 0 0 10px; color: #fff; }
        section.content h3 { 
            margin-bottom: 20px;
            color: #0a67b0; 
            font-size: 2em; 
            font-weight: 700;        
        }
        section.content p  { color: #333333; font-weight: 500; } 
        section.content ul { margin: 0 0 0 15px; }
        section.content ul li { margin: 3px 0; list-style-type: disc; color: #333333; font-weight: 500; }
        
        section.content .intro { background: #fff; padding: 40px; }
        section.content .intro p.bigger { margin: 15px 0 3px; }
        
             section.content .intro div.left { width: 50%; display: inline-block; vertical-align: top; }

/* FORM
   --------------------------------------------- */           
form.contactForm { width: 45%; margin-left: 5%; display: inline-block; vertical-align: top; text-align: left; }

    form.contactForm input,
    form.contactForm select {
        width: 100%;
        display: inline-block;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    
        form.contactForm input[type='text'],
        form.contactForm input[type='tel'],
        form.contactForm input[type='email'] { -webkit-appearance: none; }
        
        form.contactForm input[type='file'] { margin-bottom: 15px; }
           
    
    form.contactForm input[type='text'],
    form.contactForm input[type='tel'],
    form.contactForm input[type='email'],
    form.contactForm select {
        margin: 5px 0;
        padding: 5px;
        background: #f5f5f5;
        border: 1px solid #d7dddd;
        font-family: 'Avenir';
        font-size: 1.1em;
        font-weight: 400;
        color: #000;
    }
    
    ::-webkit-input-placeholder {
       color: #000;
    }
    
    :-moz-placeholder { /* Firefox 18- */
       color: #000;  
    }
    
    ::-moz-placeholder {  /* Firefox 19+ */
       color: #000;  
    }
    
    :-ms-input-placeholder {  
       color: #000;
    }
    
    /* Change the white to any color ;) */
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px rgba(245,245,245,1) inset;
    }
            
        form.contactForm input[type='text']:hover,
        form.contactForm input[type='tel']:hover,
        form.contactForm input[type='tel']:focus,
        form.contactForm input[type='email']:hover,
        form.contactForm input[type='email']:focus,
        form.contactForm select:hover,
        form.contactForm select:focus { 
            border: 1px solid #45484d;
        }

    form.contactForm input[type='submit'] {
        margin: 3px 0 0;
        padding: 5px;
        background: #45484d;
        border: 0;
        color: #fff;
        font-family: 'Avenir'; 
        font-size: 1.2em;
        font-weight: 400;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
         -ms-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        -webkit-appearance: none;
    }
    
        form.contactForm input[type='submit']:hover {
            background: #075694;
            cursor: pointer;
        }
        
        form.contactForm input[type='submit']:focus,
        form.contactForm input[type='submit']:active {
            background: #45484d;
        }
        
    div.loaderDiv { 
        width: 100%; 
        height: 100%; 
        padding: 5px;
        background: url('../img/loading.svg') no-repeat center center; 
        -moz-opacity:0.4;
        display: none; 
        position: absolute; 
        top: 0; 
        left: 0; 
        z-index: 99999; 
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    
    form.contactForm input[type='text'].error,
    form.contactForm input[type='tel'].error,
    form.contactForm input[type='email'].error,
    form.contactForm input[type='radio'].error,
    form.contactForm select.error { 
        border: 1px solid #cf1818; 
        background-image: url('../img/icon-error.png');
        background-repeat: no-repeat;
        background-position: right 10px center; 
        background-size: 20px;
    }
    
    div.success p { 
        max-width: 300px;
        margin-bottom: 5px;
        padding: 5px !important; 
        background: #cefcdd; 
        text-align: center; 
        font-size: 1em;
        -webkit-border-radius: 3px; 
        border-radius: 3px; 
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
         -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }
    div.success p.steady {
        background: #70da93; 
    }
    div.success p.blink { 
        background: #cefcdd; 
    }
        
                                       
/* SCROLL_TOP 
   -------------------------------- */				
	div.scroll-top:hover {
		-webkit-animation: scroll .01s 1 forwards ease-in;
		animation: scroll .01s 1 forwards ease-in;
	}
		
 	@keyframes scroll {
	  0%   { opacity: 1; }
	  5%   { opacity: 0; }
	  50%  { background-position: 0 -60px; opacity: 0; }
	  100% { background-position: 0 -60px; opacity: 1; }
	}
	@-webkit-keyframes scroll {
	  0%   { opacity: 1; }
	  5%   { opacity: 0; }
	  50%  { background-position: 0 -60px; opacity: 0; }
	  100% { background-position: 0 -60px; opacity: 1; }
	}
	
	div.scroll-top {
		width: 60px;
		height: 60px;
		position: fixed;
		bottom: 0;
		right: 3%;
		z-index: 9999;
		background-color: #fff;
		background-image: url('../img/arrow-up.png');
		background-repeat: no-repeat;
		background-position: 0 0;
		cursor: pointer;  
        -webkit-border-radius: 6px 6px 0 0;  
        border-radius: 6px 6px 0 0;
	}
    
/* FOOTER
   --------------------------------------------- */              
    footer { width: 100%; max-width: 1024px; margin: 0 auto; padding: 40px 0 0; background: #075694; }
  
        footer section {  min-width: 320px; margin: 0 auto; padding: 0 40px; }
          
            footer section article { width: 33.3333333%; display: inline-block; vertical-align: top; }
            footer section article h4 { margin-bottom: 15px; font-size: 1.4em; color: #fff; }
            footer section article p,
            footer section article strong,
            footer section article li { width: 100%; display: inline-block; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .3); }
            footer section article li a { color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .3); }
            footer section article li span { width: 50px; display: inline-block; }
            
        footer section.copyright { width: 100%; max-width: 100%; margin-top: 40px; padding: 5px 0; background: #0a67b0; text-align: center; }
        footer section.copyright p { color: #fff; font-size: .85em; }
    
/* MEDIA_QUERIES
   --------------------------------------------- */ 
   
    @media only screen and (min-width: 0) and (max-width: 960px) {
        
        section.page { top: 447px; }
        
        section.content .intro div.left,
        form.contactForm { width: 100%; margin: 0; }
        
        form.contactForm { margin-top: 30px; }

        section.top, nav ul { text-align: center; }
        section.top .tel_00 { width: 100%; display: inline-block; float: none; }
        section.top .tel_00 .tel { display: inline-block; float: none; text-align: center; font-size: 2.5em; line-height: 200%; }
        section.top .mailen { float: none; }
        .naam_frank { text-align: center; }
        a.mobilenumber { padding: 10px 32px 10px 0; top: -38px; background-size: 24px; font-size: 1.4em; }
        
        section.sidebar,
        section.content .formulier { width: 100%; } 
        section.content .formulier { margin-top: 30px; }
        
        footer section article { width: 50%; margin: 0 0 30px; text-align: left; }
        footer section article h4 { margin: 0 0 10px; }
    
    }  
    
    @media only screen and (min-width: 0) and (max-width: 640px) {
        section.page { top: 393px; }
        section.top .tel_00 { margin-top: 10px; }
        section.top .tel_00 .tel { height: auto; font-size: 1.5em; }  
    }
   
    @media only screen and (min-width: 0) and (max-width: 413px) {
        
        nav ul li a { font-size: .9em; }
        footer section article { width: 100%; }

    }