@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700'); /* Kopjes/subkopjes - font-family: 'Inconsolata' */

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); /* Teksten - font-family: 'Open Sans' */

html {
	margin: 0;
	padding: 0;
	background-color: #fdfdfd;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



a {
	text-decoration: none;
}

td a {
	color: white;
	text-decoration: underline;
}

/* Header logo */

img#logo {
	width: 375px;
	margin: auto;
	display: block;
}

/* Navbar */

nav {
	width: 60%;
	margin: auto;
}

nav ul {
	list-style: none;
	display: inline-flex;
	width: 100%;
	padding: 0;
}

nav ul li {
	text-align: center;
	margin: auto;
}

nav ul li a {
	text-decoration: none;
	color: black;
	font-family: 'Inconsolata', monospaced;
	text-transform: uppercase;
	font-size: 25px;
	text-align: center;
}

nav ul li a.active {
	font-weight: 700;
}
        
nav a:before, nav a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: black;
    content: "";
    opacity: 0;
    transition: all .2s;
    margin-top: 2px;
    margin-bottom: 2px;
}

nav a:before
{
    top: 3px;
    transform: translateY(-10px);
}

nav a:after
{
    bottom: 3px;
    transform: translateY(10px);
}

nav a:hover:before, nav a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

nav a
{
    color: black;
    text-decoration: none;
    font-size: 20px;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

/* Slider */

.rip{}

/* Tekst */

.container {
	width: 1000px;
	margin: auto;
	margin-top: 80px;
	margin-bottom: 80px;
}

h1 {
	font-family: 'Inconsolata', monospaced;
	font-size: 45px;
	text-align: center;
}

h2 {
	font-family: "inconsolata", sans-serif;
	font-size: 40px;
	text-align: center;
	color: black;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

p {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
}

.imagecontainer {
	padding-top: 30px;
	width: 80%;
	text-align: justify;
	text-justify: distribute-all-lines;
	margin: auto;
}

.imagecontainer img {
	border-radius: 50%;
	width: 250px;
	height: 250px;
	vertical-align: top;
    display: inline-block;
    *display: inline;
}

.stretch {
	width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.grid {
	display: grid;
	grid-template-columns: 50% 50%;
	/*margin-top: 80px;
	margin-bottom: 80px;*/
}

img.gridimg {
	width: 80%;
	margin: auto;
}

.textbox {
	width: 80%;
	margin: auto;
}

/* Footer */

footer {
	margin: 0;
	padding: 0;
	background-color: rgba(42,42,42,1.00);
	
}

.footergrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	align-items: center;
	grid-column-gap: 20px;
	border-bottom: 1px solid white;
}

footer img {
	display: block;
	width: 70%;
	margin: auto;
}

p.footertext {
	color: white;
	margin-top: 0;
}

table.openingstijden {
	width: 100%;
	margin: auto;
	color: white;
	text-align: center;
	font-size: 20px;
	margin-top: 30px;
	text-transform: uppercase;
}

table.openingstijden i {
	margin: 0 20px;
}

.info {
	display: grid;
	grid-template-columns: 50% 50%;
}

.info p {
	color: white;
	margin: 0px 100px 0px 100px;
	text-align: center;
	font-size: 12px;
}

.info p a {
	text-decoration: none;
	color: white;
}

.wip {
	height: 40vh;
	width: 70%;
	margin: auto;
}

.wip h3 {
	margin-top: 80px;
	text-align: center;
	font-family: "inconsolata", sans-serif;
	font-size: 50px;
}

.container ul {
	margin-top: 80px;
}

img#inbrengenimg {
	float: right;
	width: 250px;
	margin-left: 30px;
}

.collectiongrid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 10px;
	align-items: center;
	justify-items: center;
}

.carnaval {
	width: 100%;
	margin-bottom: 10px;
}

.carnaval img {
	border-radius: 7px;
	width: 100%;
	-webkit-filter: grayscale(80%);
	filter: grayscale(80%);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.carnaval img:hover  {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.collectiongrid img {
	border-radius: 7px;
	width: 100%;
	-webkit-filter: grayscale(80%);
	filter: grayscale(80%);
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.collectiongrid img:hover  {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.collectie {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

.content h3 {
	text-align: right;
	margin-top: 2px;
	margin-bottom: 0;
	color: black;
}

p.merk {
	text-align: right;
	margin-top: 5px;
	margin-bottom: 0;
	color: black;
}

p.maat {
	text-align: right;
	font-size: 13px;
	color: rgb(39,39,39);
	margin-top: 3px;
	margin-bottom: 0;
}

.box {
	width: 100%;
	height: 333px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 7px;
}

.viewgrid {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-column-gap: 30px;
}

.viewimage {
	width: 100%;
}

p.view {
	font-size: 30px;
	text-align: left;
	margin-bottom: 0;
}

h3.view {
	font-size: 50px;
	text-align: left;
	margin-top: 8px;
	margin-bottom: 0;
}

p.categorie {
	font-size: 18px;
	text-align: left;
}

p.viewmaat {
	font-size: 21px;
	text-align: left;
}

.nieuws {
	display: grid;
	grid-template-columns: 30% 70%;
	grid-column-gap: 20px;
}

.nieuwscontent {
	grid-column: 2;
}

.nieuwsbox {
	width: 100%;
	height: 333px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 7px;
}

h3.nieuwstitel {
	font-size: 35px;
	margin: 0;
}

p.datum {
	text-align: left;
	font-size: 14px;
	font-style: italic;
	margin-bottom: 2px;
}

.nieuws p {
	text-align: left;
}

img.splitter {
	width: 100%;
}

.viewnieuws p {
	text-align: left;
}

.mobile {
	display: none;
}

#footer2 h2, #footer3 h2 {
    color: white !important;
}

@media only screen and (min-width: 300px) and (max-width: 900px) {
	.collectiongrid {
		display: none;
	}
	
	body {
		width: 100%;
	}
	
	.grid {
		display: block;
	}
	
	.gridimg {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
	.mobile header{
		width: 100%; 
		background: #ffffff; 
		height: 60px; 
		line-height: 60px;
		border-bottom: 1px solid #dddddd;
	}
	
	.mobile .hamburger{
	  background: none;
	  position: absolute;
	  right: 0;
	  line-height: 45px;
	  padding: 5px 15px 0px 15px;
	  color: #999;
	  border: 0;
	  font-size: 1.4em;
	  font-weight: bold;
	  cursor: pointer;
	  outline: none;
	  z-index: 10000000000000;
	}
	
	.mobile .cross{
	  background: none;
	  position: absolute;
	  right: 0;
	  padding: 7px 15px 0px 15px;
	  color: #999;
	  border: 0;
	  font-size: 3em;
	  line-height: 65px;
	  font-weight: bold;
	  cursor: pointer;
	  outline: none;
	  z-index: 10000000000000;
	}
	
	.mobile .menu {z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
	.mobile .menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
	.mobile .menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid; font-family: 'Inconsolata', sans-serif; font-size: 18px;}
	.mobile .menu li:hover {display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
	.mobile .menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
	.mobile .menu ul li a:hover {  color: #666; text-decoration:none;}
	.mobile .menu a {text-decoration:none; color:#666;}
	.mobile .menu a:hover {text-decoration:none; color:#666;}
	
	.mobile .glyphicon-home{
	  color: white; 
	  font-size: 1.5em; 
	  margin-top: 5px; 
	  margin: 0 auto;
	}
	
	.mobile header {display:inline-block; font-size:12px;}
	.mobile span {padding-left:20px; font-family: 'Inconsolata', sans-serif; font-size: 19px; text-transform: uppercase; font-weight: 700;}
	.mobile a {color:#336699;}
	
	img#logo {
		width: 100%;
	}
	
	#pc {
		display: none;
	}
	
	img#promoimg {
		display: none;
	}
	
	.container {
		width: 90%;
	}
	
	.imagecontainer {
		display: none;
	}
	
	img.mobile {
		width: 100%;
	}
	
	#footer1 {
		display: none;
	}
	
	#footer2 {
		margin-bottom: 20px;
	}
	
	.footergrid {
		display: block;
	}
	
	.info {
		display: block;
	}
	
	.wip {
		height: 80%;
	}
	
	img#inbrengenimg {
		display: none;
	}
	
	img#rounded {
		border-radius: 50%;
		margin-top: 60px;
	}
	
	.collectionmobile {
		display: grid;
		grid-template-columns: 1fr;
		grid-column-gap: 10px;
		align-items: center;
		justify-items: center;
	}
	
	.collectionmobile img {
		border-radius: 7px;
		width: 100%;
		-webkit-filter: grayscale(50%);
		filter: grayscale(50%);
		-webkit-transition: .2s ease-in-out;
		transition: .2s ease-in-out;
	}
	
	.collectionmobile img:hover  {
		-webkit-filter: grayscale(0);
		filter: grayscale(0);
	}
	
	.collectie {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 30px;
		grid-row-gap: 30px;
	}
}