/***************
  Font Faces
***************/
@import url(https://fonts.googleapis.com/css?family=Asap:400,700);


/*****************
  End Font Faces
*****************/
html,body{
  width: 100%;
  height: 100%;
  background-color: #e9e9e9;
  font-family: "Asap";
}

#wrap {
  margin: 0 auto;
  width: 883px;
  height: auto;
  margin-top: 10px;
}

.menu {
  width: 220px;
  min-height: 620px;
  float: left;
  padding-right:40px;
  position: relative;
}

.fixed {position:fixed}

.menu li, .menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#slogan {
  float: right;
  margin-top: 40px;
}

#adres {
  float:right;
  bottom: 0;
  position: absolute;
  bottom: 10px;
  right: 40px;
}

.bg1 {background: #fff url('../userfiles/home/cmill-1.jpg') no-repeat right top}
.bg2 {background: #fff url('../userfiles/home/cmill-2.jpg') no-repeat right top}
.bg3 {background: #fff url('../userfiles/home/cmill-3.jpg') no-repeat right top}
.bg4 {background: #fff url('../userfiles/home/cmill-4.jpg') no-repeat right top}
.bg5 {background: #fff url('../userfiles/home/cmill-5.jpg') no-repeat right top}

#tiles {
  float: left;
  width: 603px;
  height: 603px;
  background-size:cover;
  border: 10px solid #fff;
  border-right: 7px solid #fff;
  border-bottom: 7px solid #fff;
  margin-top: 10px;
  position: relative;
}

.tile {
  position: relative;
  width: 196px;
  height: 298px;
  float: left;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;
  background-color: transparent;
}

.tile > a {
  font-size: 26px;
  line-height: 130%;
  width: 171px;
  height: 273px;
  cursor: pointer;
  display: block;
  padding: 15px 10px 10px 15px;
  color: #fff;
  text-decoration: none;
  text-shadow: 3px 1px 5px black;
}

.tile > a:hover {
  background-color: rgba(0,40,124,0.55);
  text-decoration: none;
  color: #c8dc00;
}

#logo {
  width: 204px;
  height:57px;
  float:right;
  margin-top: 20px;
}

#logo>img {
  width: 100%;
  height: 100%;
  border: 0;
}

#footer {
  float: left;
  width: 603px;
  padding: 10px 0 10px 270px;
}

#footer span.right {
  float: right;
  margin-right: 5px;
}

#footer a.social {
  display: block;
  float: left;
  height: 19px;
  margin-right: 5px;
}

a.fb {background-image: url(../images/facebook-up.png); width: 10px;}
a.fb:hover {background-image: url(../images/facebook-over.png)}
a.li {background-image: url(../images/linkedin-up.png); width: 18px}
a.li:hover {background-image: url(../images/linkedin-over.png)}
a.tw {background-image: url(../images/twitter-up.png); width: 20px}
a.tw:hover {background-image: url(../images/twitter-over.png)}
a.yt {background-image: url(../images/youtube-up.png); width: 16px}
a.yt:hover {background-image: url(../images/youtube-over.png)}

#news {
  width: 600px;
  float:left;
  margin-top:10px;
  background-color: #fff;
  padding: 10px;
  min-height: 560px;
}

.cat {
  width:100%;
  padding-bottom:10px;
}

#news > div.news {
  width: 100%;
  height: auto;
  float:left;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

#news .img > img, #news .news .img img {
  width: 200px;
  height: 120px;
  float: left;
}

#news > div > img {
  width: 100%;
}

#news .txt {
  float: left;
  width: 340px;
  height: 100%;
  padding-left:20px;
}

#news .txt_one {
  float: left;
  width: auto;
  height: 100%;
  padding:0 20px;
}

.clear {clear: both}

nav {
  position: relative;   
}

#aanmelden {
  float: right;
  margin-top: 20px;  
}


#contact {
  float: left;
  margin: 20px;
}

#contact label {
  width: 120px;
  display: block;
  float: left;
}

#contact > div > div {
}

#contact > div {
  width: 100%;
  height: auto;
  float: right;
  margin-top: 5px;
}

#contact input[type=text],#contact textarea {
  width: 100%;
  height: 20px;
  float: left;
  border: 1px solid #eee;
  border-collapse: collapse;
}

#contact textarea {
  height: 100px;
}

#contact {
	margin-bottom: 20px;
}

#sitemap {
  padding: 10px;
}

#sitemap ul {
 padding-left:1em;
 margin-left:0;
 padding-top: 0;
 padding-bottom: 2em;

}

#sitemap li {
 list-style: none;
}

#map_canvas {border: 0; width:100%; height:373px}
#mobile-nav, .mobile-visible{
  display: none;
  width:100%;
  float:left
}

input {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding: 0 10px;
}
#footer .clear {display:none}


/* Tablet (768px width and smaller) view */
@media (max-width: 882px) {
	#mobile-nav, #footer-nav, .mobile-visible, #mobile-logo a{display: block;}
	.menu{display: none;}
	#wrap{
		width: 96%;
		margin-left: 10px;
		margin-right: 5px;
	}
	#tiles{
		width: 99%;
		border-left: 5px solid #fff;
	}
	.tile {
		position: relative;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
		width: 100%%;
		height: 96px;
	}
	.tile > a {
		width: 96.2%;
		height: 71px;
	}
	.mobile-visible div{
		display: inline-block;
	}
	#mobile-logo{
		margin-left: 2%;
		padding-top:10px;
	}
	.slogan {
		float: none;
		display: block;
		margin-top: 5px;
		font-size: 26px;
		padding-left:10px;
	  padding-top:0;
	}
	#adres {
		float: left;
		text-align: left;
		margin-top: 10px;
		margin-left: 10px;
		margin-bottom: 5px;
		position: relative;
		right: 2%;
	}
	#footer{
		margin: 0 auto;
		margin-top: 5px;
		width: 99%;
		padding: 5px 2%;
	}
	#footer a.social {
		float: right;
	  	display: inline-block;
	}
	#footer span.right {
		float: left;
	  	display: block;
	  	margin-left: -5px; 
	}
	
	/* Page View */
	
	.cat  {
		width:96.5%;
		padding-left:10px;
		padding-top:10px;
	}
	
	#news {
	  width: 100%;
	  margin: 0;
	  padding: 0;
	}
	
	#news .txt {
		width: 95%;
	}
	
	#news .img img{
		width: 100%;
		padding: 0;
	}
	
	#news .img > img, #news .news .img img {
		margin-bottom: 10px;
		width: 95%;
		padding-left:10px;
		padding-top: 10px;
		height: 100%;
	}
	
	#news h1{
		margin-left: 0px;
	}
	
	.news a{
		margin-top: 20px;
		margin-right: 0%;
	}
	
	.block{
		display: block;
		width: 100%;
	}
	
	#footer-nav{
		margin-top: 20px;
	}
	
	#mobile-nav div, #footer-nav div{
		float: left;
		width: 100%;
	}
	
	#mobile-nav input, #footer-nav input{
		width: 100%;
		border: 0;
	}
	
	#dd-mobile span{
		list-style: none;
		padding-left: 10px;
	}
	
	#dd-mobile ul li{
		list-style: none;
	}
	
	.wrapper-dropdown-3{
		padding: 10px 0;
		margin-bottom: 15px; 
	}
	
	.navcontact{
		margin-top: 20px;
	}
	
	#aanmelden .navcontact{
		margin-top: 0;
	}
	
	#contact > div {
    	float: left;
    	width: 100%;
	}

    .wrapper-dropdown-3 {
       margin-bottom: 15px !important;
       padding: 10px 0 !important;
    }
    
    .navcontact{
		padding: 0;
	}
	
	#social-buttons{
		margin: 0 auto;
		margin-right: 5px;
		float:right
	}
	
	#footer .clear {display:block}
}


/* 598 width and smaller view */
@media (max-width: 613px) {
    
    .desktop {display:none}
    .fixed {position: relative}

    .wrapper-dropdown-3 {
       margin-bottom: 15px !important;
       padding: 10px 0 !important;
    }

	#wrap{
		margin-left: 7px;
	}
	#tiles{
		height: 100%;
		width: 97%;
		border-right: 7px solid #fff;
		border-bottom: 7px solid #fff;
	}
	.tile{
		width: 100%;
		height: 50px;
	}
	.tile > a {
		width: 99.5%;
		height: 50px;
		padding: 0;
	}
	.tile > a span {
	  	margin-left: 5px;
		font-size:18px;
	}
	#mobile-logo a img{
		margin-top: 10px;
		width: 200px;
	}
	#adres{
		margin-top: 2%;
	}
	.slogan {
	  float: none;
	  display: block;
	  margin-top: 5px;
	  padding-left:5px;
	  padding-top:0;
	  text-align: left;
	  font-size:14px;
	}
	#news .txt {
		padding-left: 10px;
	}
	
	.cat  {
		width:95%;
		padding-left:10px;
		padding-top:10px;
	}
	
	#footer{
		font-size: 11px;
		width: 96%;
	}
	#social-buttons{
		margin: 0 auto;
		margin-right: 5px;
		float:right
	}
	#map_canvas{
		height: 200px;
	}
	
	.navcontact{
		padding: 0;
	}

	#footer .clear {display:block}
}