/* RESPONSIVE GRID SYSTEM =============================================================================  */

/* html5reset.css - 01/11/2011 */

/* BASIC PAGE SETUP ============================================================================= */

     .js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }

* {
    box-sizing: border-box;
}
.bg { 
    background-attachment:fixed; 
    background-repeat: no-repeat; 
    background-position:top right;
    background: url(../pics/backg.jpg);
        -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover ;
}


body { 
    margin : 0 ;
    padding : 0;
    font-family : 'Cantarell', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif; 	
    background-color : #000; 
     overflow-x: hidden;

    
    }
    main {
        margin-top:100px;
    }

main p {
    color:#fff;

    text-align: justify;
}
#text {
        width:80%;
    margin:auto;
        color:#fff;

}

main #text img {
          display:inline-block;


}

p.cleartop {
    margin-top:80px;
}

  #text .contacttxt {
          display:inline-block;
        width: 60%;
    }
.contacttxt img {
position: absolute;}

#bottom {
    position: fixed
}


/*  HEADINGS  ============================================================================= */

h1 { 
    font-family: Dosis;
    font-weight: 300; 
    font-size : 3.5em; /* 40 / 16 */
    color: #eaeaea;
    line-height: 1.4em;
    margin: 0.5em;
    }

h2 { 
    font-family: 'Roboto Slab', serif, 'Georgia'; 	
    color: #fff;
    font-weight: 300;
    font-size : 1.4em; /* 28 / 16 */
    line-height : 1.3em; 
    background: rgba(0,0,0,0.7);
    padding: 0.3em;
    margin: 0em 0 -20px 0;
    }

h3 { 
    font-family: 'Roboto Slab', serif, 'Georgia'; 	
    color: #fff;
    font-weight: 300;
    font-size : 1.2em; /* 28 / 16 */
    line-height : 1.3em; 
    background: rgba(0,0,0,0.7);
    padding: 0.3em;
    margin: 0em 0 0 0;
    }

h4 { 
    color: #444;
    margin-bottom : 0.5em;
    font-size : 1.5em; /* 24 / 16  */
    line-height : 1.25; 
    }

footer h4 { 
		color: #ccc;
    }

h5 { 
    color: #555;
    margin-bottom : 1.25em;
    font-size : 1em; /* 20 / 16 */ 
    }

h6 { 
    color: #666;
    font-size : 1em; /* 16 / 16  */ 
    }

/*  TYPOGRAPHY  ============================================================================= */


p, ol, dl, address { 
    margin-bottom : 1.5em; 
    font-size : 1.2em; /* 16 / 16 = 1 */ 
    line-height: 1.6em;
    }

p {
/* http://www.w3.org/TR/css3-text/#hyphenation */
-webkit-hyphens : auto;
-webkit-hyphenate-character : "\2010";
-webkit-hyphenate-limit-after : 1;
-webkit-hyphenate-limit-before : 3;
-moz-hyphens : auto; }

/* LINKS =============================================================================  */

a { 
    color : #fff;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    text-decoration: underline;
    }

a:visited { 
    color : #fff; 
    }

a:focus { 
    color : rgb(0,0,0); 
    }

a:hover, a:active { 
    color : #fff;
    }

main a:link {
        	color: #CF9F24;

    text-decoration: none;
border-bottom: 1px dotted #CF9F24;
padding-bottom:3px;
}
main a:hover {
    color:#fff;
}
a:visited { 
    color : #CF9F24; 
    }

footer a { 
    color : #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

footer a:visited { 
    color : #fff; 
    }

footer a:focus { 
    color : rgb(0,0,0); 
    }

footer a:hover, footer a:active { 
    outline : 0;
    color : #fff;
    }

/* IMAGES ============================================================================= */

img {
    border : 0;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    }

/*img.floatleft { float: left; margin: 0 10px 0 0; }
/*img.floatright { float: right; margin: 0 0 0 10px; }

/*  MAIN LAYOUT	============================================================================= */

iframe, object, embed {
    max-width: 100%;
    min-width:60%;
    max-height:90%;
    }   
iframe {
    width:100%;
    height:300px;
    margin:0px;
    border: 0px;
    
}
#maps {
    margin-top:120px;
}
p.navicon {display: none}

header {
    height: 215px;
    margin: 0 0 0 0;
    padding: 0 0 0 0; 
    width:100%;
    font-size: 0.8125em; /* 13 / 16 */
    color: #000;
    text-align: center;
    z-index:99;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(119,119,119,0.8) 0%, rgba(15,15,15,0.86) 99%, rgba(14,14,14,0.8) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(119,119,119,0.8)), color-stop(99%,rgba(15,15,15,0.86)), color-stop(100%,rgba(14,14,14,0.8))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(119,119,119,0.8) 0%,rgba(15,15,15,0.86) 99%,rgba(14,14,14,0.8) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(119,119,119,0.8) 0%,rgba(15,15,15,0.86) 99%,rgba(14,14,14,0.8) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(119,119,119,0.8) 0%,rgba(15,15,15,0.86) 99%,rgba(14,14,14,0.8) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(119,119,119,0.8) 0%,rgba(15,15,15,0.86) 99%,rgba(14,14,14,0.8) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99777777', endColorstr='#cc0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  
}

header img.logo {
    width:25%;
}

.main-nav, .main {
    position: relative; 
}
.main-nav {
    height: 55px;
    z-index: 150;
    margin-bottom: -80px;
    text-align: center;
    clear: both;
    padding:0.5em 0;
    border-top: 1px dotted #fff; 
    background-color: rgba(0, 0, 0, 0.6);
}
.main-nav-scrolled {
    position: fixed;
    top: 0px;
    width:100%;
}
.main {}
main ul {margin-left:-15px;
}
main ul li {
color: #ccc;
    list-style-type:circle;
}
main img {
    float:left;
    width:250px;
}
.twocol {
    column-count: 2;
       -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
}

#call {
    width: 60%;
    text-align: center;
    margin: auto;
    margin-top: 90px;
    background-color: #CF9F24;
    padding: 10px;
    border-radius: 10px;
}

#call p {
    width: 80%;
    margin: 20px auto;
    text-align: center;
    font-size: 2em;
    line-height: 1.2em;
    color: #000;
   
}
#call p a:link {
    color: #fff;
}
.up {
    height:100px;
    width:100%;
    margin:auto;
}
.social {
    display: flex;
    width: 150px;
     align-items: center;
    margin: auto;
}
.social img {
    display:inline;
    width:45px; 
    opacity: 0.7;
}
.social img:hover {
transition-duration: 2s;
    opacity:1;
}
footer .social {
        display: flex;
    width: 150px;
     align-items: center;
    
}
footer .social img {
    display:inline-block;
    width:45px; 
    opacity: 0.7;
}
img.icon {
    opacity: 0.4;
    width:45px;
    height:45px;
}
img.icon:hover {
	opacity: 1;
	border: 1px solid #aeabab;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width:45px;
    height:45px;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
header p {
	font-family: 'Roboto Slab', serif, 'Georgia'; 	
    font-size : 1.0em; /* 40 / 16 */
    color: #eaeaea;
    margin:10px auto;
    font-weight: 300; 
    letter-spacing: 0.05em;
    line-height:1.4em;
    width:640px;
}
header p a:link {
	color: #fff;
	text-decoration:none;
}
header p a:hover {
	color: #000;
	background: #fff;
}

#navcontainer {
	width: 100%;	
	border-top: 2px solid #000;
	background: #222;
}

.locatie {
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #fff;
	text-align: center;
}
.contact {
	margin-top: 20px;
}
#hnavig {
}
nav ul {
    margin: 0 0 0 -40px;
}
nav ul li {
    
    display: inline;   
    margin: 0 20px 0 20px;
}
nav ul li a:link   {
	font-family: 'Roboto Slab', serif, 'Georgia'; 	
	font-size : 1.2em; /* 40 / 16 */
	color: #eaeaea;
	font-weight: 300; 
	letter-spacing: 0.05em;
	text-decoration:none;
     padding: 0 3px 0 3px;
} 
nav ul li a:visited {
    	color: #eaeaea;

}
nav ul li a:hover, nav ul li a:active, nav ul li a.active  {
	color: #000;
	background: #fff;
    border-radius: 4px;
    padding: 0 3px 0 3px;
} 

nav ul li a.yellow:link, nav ul li a.yellow:visited   {
	font-family: 'Roboto Slab', serif, 'Georgia'; 	
	font-size : 1.4em; /* 40 / 16 */
	color: #CF9F24;
	font-weight: 300; 
	letter-spacing: 0.05em;
	text-decoration:none;
} 
#wrapper {
    width: 100%;
    margin-top:-220px auto;
      
}
.yellow, strong {
    	color: #CF9F24;

}

#wrapper ul {

     margin: 80px 0 0 0;
    width:25%;
    float:left;
    display: inline-block;
}
#index ul {

     padding: 120px;
    width:100%;
}
#wrapper ul li {
margin-left:-40px;
    margin-top:-5px;
    list-style-image: none;
    list-style-type: none;
 
}
#wrapper li img {

    width:100%;
    border: 4px solid #fff;
}

#wrapper li img:hover {
    opacity:1.0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

#footercontainer {
	width: 100%;	
	border-top: 1px solid #fff;
	background: #222;
    float: left;
}

footer {
	clear: both;
	width: 80%; /* 1000px / 1250px */
	font-size: 0.8125em; /* 13 / 16 */
	max-width: 92.3em; /* 1200px / 13 */
	margin: 0 auto;
	padding: 20px 0px 10px 0px;
	color: #999;
	text-align:left;
	line-height: 1.4em;
}

footer strong {
	font-size: 1.077em; /* 14 / 13 */
	color: #aaa;
}

footer a:link, footer a:visited { 
    color: #999; 
    text-decoration: underline; 
}
footer a:hover { 
    color: #fff; 
    text-decoration: underline; 
}

footer ul {
	margin: 0 -40px 20px 0px;
	width: 220px;
	display: inline-block;
    float:left;
}

.contact {
width:550px;
    margin: 20px auto;
}

.contact img {
width: 250px;
float:left;
    margin: 0 0 20px 0;
}
.contact img.beeldmerk {
width: 50px;
float:left;
    margin: 0 0 20px 0;
    border: 1px solid #414042;
}
.contact ul {
    float:left;
    margin-left:-30px;
}
.contact ul li {
    list-style-type: none;
    
}
.contact ul li.copy {
    margin-top: 20px;
    border-top: 1px dotted #fff;
}
.strong {
    font-weight: 700;
}
footer .locatie ul li {
	clear: left;
	margin: 0px;
	padding: 0px 0px 3px 0px;
	line-height: 1.2em;
	font-weight: normal;
	background: none;
    list-style-image: none;
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}


/* VENDOR-SPECIFIC ============================================================================= */

html { 
-webkit-overflow-scrolling : touch; 
-webkit-tap-highlight-color : rgb(52,158,219); 
-webkit-text-size-adjust : 100%; 
-ms-text-size-adjust : 100%; 
font-size:100%; 
}
@media (max-width: 640px) 
{ body {font-size:1.2rem;} 
} 
@media (min-width: 640px) { 
	body {font-size:1rem;} 

} 
@media (max-width: 640px) { 

	p.introtext, p.introtext2 {font-size:1.8rem;} 
} 
@media (max-width: 640px) { 

	#up {position: relative;margin-bottom:0em;} 
} 

@media (min-width:960px) { body {font-size:1rem;} 
} 
@media (min-width:1100px) { body {font-size:1rem;} 
} 

  @media all and (max-width: 768px) {
      #wrapper { margin-top:0px;}
}


/*//// MAXWIDTH 960PX ////
============================================================================= */
@media all and (max-width: 960px) {
    img.logo {
        width: 20%;
    }
        #wrapper ul {
        width:50%;    
    }
    #wrapper li img {
        opacity: 1.0;   
         width:100%;
    }
    .twocol {
    column-count: 1;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
}
}

/*//// MAXWIDTH 768PX ////============================================================================= */
@media all and (max-width: 768px) {
    .up p {
        visibility: hidden;
    }
    body {
        overflow-x: hidden;
    }
    header {
        height:200px;
    }
    header img.logo {
        width: 50%;
    }
        #wrapper ul {
        width:100%;    
    }
    #wrapper li img {
        opacity: 1.0;   
        float:left;
        display: inline-block;
        width:100%;
    }
    nav ul li {
        width:100%;
        display:inline-block;   
        margin: 0px 0px 0px 0px;
        background-color: rgba(0,0,0,0.6);
        padding:5px;
    }
}
/*//// MAXWIDTH 640PX ////============================================================================= */
@media all and (max-width: 640px) {
    body { 
    margin : 0 ;
    padding : 0;
    font-family : 'Cantarell', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif; 	
    background-color : #000; 
     overflow-x: hidden;
    
    
    }

    .up p {
        visibility: hidden;
    }
    .social {
        margin-top:px;
        width: 180px;
    }
        .social img  {
        margin-top:-55px;
            width: 60px;
    }
    footer .social {
        display: flex;
    width: 270px;
     align-items: center;
    
}
footer .social img {
    display:inline-block;
    width:90px; 
    opacity: 0.7;
}
         header {
        height: 180px;
    }
    header img.logo {
        width: 70%;
        margin-top:-10px;
    }
    #wrapper ul {
        width:100%;    
    }
    #wrapper li img {
        opacity: 1.0;   
        float:left;
        display: inline-block;
        width:100%;
    }
    .contact {
        width:100%;
        margin: 20px auto;
    }
    .contact img {
        width: 250px;
        display: block;   
        margin: 0 0 20px 0;
    }
    .contact ul {
        display: block;
        font-size: 20px;
        line-height: 30px;
    }

     main,.main {
        width:100%;
         float:left;
    }

      
  
main #text {
    color:#fff;
    width:90%;
    margin:auto;
    text-align: left;
}
    main #text p {
        text-align:left;
    }
    main img {
        
        width:100%
    }
    
    main #text img {
     float:left;   
    }
    .not-active {
        pointer-events: none;
        cursor: default; 
    }
    
    #call {
        width:100%;
    }
    
    #call p {
    width: 100%;
    margin: 20px auto;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.2em;
    color: #000;
   
}
      #text .contacttxt {
          display:inline-block;
        width: 100%;
          
    }
    #text .contacttxt p {
        text-align: center;
    }
    .contacttxt img {
position: absolute;
left:25%;
        width: 60%}
}