@import url(https://fonts.googleapis.com/css?family=Bitter:700);/* 
adds */
@media only screen and (min-width: 970px){
	.add{
		display: inline-block;
		width: 970px;
		margin: 0 auto 15px auto;
	}
}
@media only screen and (max-width: 970px){
	.add{
		display: none;
	}
}
/* end adds */
body{
    margin: 0;
    padding: 0;
	background: url(../images/bgi.png) #f8f8f8;
    font-family: verdana;
}
#content{
    text-align: center;
}
.clear{
    clear: both;
}


/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
/* end loader */
header{
    margin: 0;
    padding: 0;
    background-color: #353535;
    background-image: url(../images/background-tiles-diagonaal-2.png);
	overflow: hidden;
}
.show-more{
	width: 100%;
	height: 35px;
	display: inline-block;
	margin-bottom: 10px;
	text-align: left;
}
.show-more .menu-item:first-child{
	background: #cc3300;
	color: #fff;
}
.show-more .menu-item{
	width: auto;
	height: 100%;
	display: inline-block;
	padding: 6px 5px;
	font-size: 18px;
	background: #fff;
	border: 2px solid #e6e6e6;
	margin-right: 0;
	font-weight: bold;
	cursor: pointer;
}
.show-more .menu-item:hover{
	background: #888;
	color: #fff;
}
#result-1{
	font-weight: bold;
	padding: 5px;
	background: #fff;
}
#show-more{
	background-color: #E54110;
	font-family: 'Bitter', serif;
	color: #fff;
	border: none;
	font-size: 20px;
	padding: 8px 16px;
	cursor: pointer;
	margin: 10px auto 50px auto;
}
#show-more:hover{
	text-decoration: underline;
}
/* COLOR MENU ------------------------------- */
#color-menu #black:hover, #color-menu #grey:hover, #color-menu #white:hover, #color-menu #red:hover, #color-menu #orange:hover, #color-menu #yellow:hover, #color-menu #green:hover, #color-menu #blue:hover, #color-menu #purple:hover, #color-menu #rainbow:hover{
    border-top: 1px solid #fff;
}
#color-menu #black{
    background-color: black;
	border-top: 1px solid black;
}
#color-menu #grey{
    background-color: grey;
	border-top: 1px solid black;
}
#color-menu #white{
    background-color: white;
	border-top: 1px solid black;
}
#color-menu #red{
    background-color: red;
	border-top: 1px solid black;
}
#color-menu #orange{
    background-color: orange;
	border-top: 1px solid black;
}
#color-menu #yellow{
    background-color: yellow;
	border-top: 1px solid black;
}
#color-menu #green{
    background-color: #1DAF1D;
	border-top: 1px solid black;
}
#color-menu #blue{
    background-color: #3851E0;
	border-top: 1px solid black;
}
#color-menu #purple{
    background-color: #C423C4;
	border-top: 1px solid black;
}
#color-menu #rainbow{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,fcb000+17,ffff00+37,00E000+58,283eff+80,f600ff+100 */
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(left,  #ff0000 0%, #fcb000 17%, #ffff00 37%, #00E000 58%, #283eff 80%, #f600ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #ff0000 0%,#fcb000 17%,#ffff00 37%,#00E000 58%,#283eff 80%,#f600ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #ff0000 0%,#fcb000 17%,#ffff00 37%,#00E000 58%,#283eff 80%,#f600ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#f600ff',GradientType=1 ); /* IE6-9 */
	border-top: 1px solid #000;
}
/* END COLOR MENU ------------------------------- */
/* HEADER ------------------------------ */
@media only screen and (min-width: 720px){
    #small-device{
        display: none;
    }
    #header{
        max-width: 1280px;
        margin: 0 auto 0 auto;
        padding: 10px 0 10px 0;
    }
	#logo{
		width: 210px;
		margin: 4px auto 0 10px;
		padding: 0;
	}
	#advertentie{
		display: inline-block;
		height: 60px;
		width: 468px;
		float: right;
		margin-right: 5px;
	}
}
@media only screen and (max-width: 720px){
    #small-device{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #header{
        max-width: 1280px;
        margin: 0 auto 0 auto;
        padding: 10px 0 5px 0;
		text-align: center;
    }
    #logo{
		width: 210px;
		margin: 4px auto 0 10px;
		padding: 0;
    }
	#advertentie{
		display: block;
		height: 60px;
		width: 468px;
		margin: 20px auto 20px auto;
	}
}
/* END HEADER ------------------------------ */
/* COLOR MENU ------------------------------- */
@media only screen and (min-width: 1280px){
    #color-menu{
        width: 1280px;
        margin: 0 auto 0 auto;
    }
    #color-menu #black, #color-menu #grey, #color-menu #white, #color-menu #red, #color-menu #orange, #color-menu #yellow, #color-menu #green, #color-menu #blue, #color-menu #purple, #color-menu #rainbow{
        width: 10%;
        height: 30px;
        margin: 0;
        display: inline;
        float: left;
    }
    #arrow-menu{
        width: 1280px;
        margin: 0 auto 0 auto;
    }
    #arrow-menu .transparant{
        width: 10%;
        height: 20px;
        float: left;
        display: inline;
    }
    #arrow-menu #black-active,#arrow-menu #grey-active,#arrow-menu #white-active,#arrow-menu #red-active,
    #arrow-menu #orange-active,#arrow-menu #yellow-active,#arrow-menu #green-active,#arrow-menu #blue-active,
    #arrow-menu #purple-active,#arrow-menu #rainbow-active{
        width: 10%;
        height: 20px;
        float: left;
        display: inline;
        text-align: center;
    }
    /* ARROWS */
    #arrow-menu #black-active #black-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: black;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #grey-active #grey-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: grey;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #white-active #white-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: white;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #red-active #red-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: red;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #orange-active #orange-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: orange;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #yellow-active #yellow-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: yellow;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #green-active #green-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: #1DAF1D;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #blue-active #blue-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: #3851E0;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #purple-active #purple-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: #C423C4;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #rainbow-active #rainbow-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 20px;
        border-top-color: #00E000;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
}
@media only screen and (max-width: 1280px){
    #arrow-menu #black-active,#arrow-menu #grey-active,#arrow-menu #white-active,#arrow-menu #red-active,
    #arrow-menu #orange-active,#arrow-menu #yellow-active,#arrow-menu #green-active,#arrow-menu #blue-active,
    #arrow-menu #purple-active,#arrow-menu #rainbow-active{
        width: 10%;
        height: 20px;
        float: left;
        display: inline;
        text-align: center;
    }
    #color-menu{
        width: 100%;
        margin: 0 auto 0 auto;
    }
    #color-menu #black, #color-menu #grey, #color-menu #white, #color-menu #red, #color-menu #orange, #color-menu #yellow, #color-menu #green, #color-menu #blue, #color-menu #purple, #color-menu #rainbow{
        width: 10%;
        height: 30px;
        margin: 0;
        display: inline;
        float: left;
    }
    #arrow-menu{
        width: 100%;
        margin: 0 auto 0 auto;
    }
    #arrow-menu .transparant{
        width: 10%;
        height: 20px;
        float: left;
        display: inline;
    }
    #arrow-menu #black-active{
        width: 10%;
        height: 20px;
        float: left;
        display: inline;
        text-align: center;
    }
    /* ARROWS */
    #arrow-menu #black-active #black-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: black;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #grey-active #grey-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: grey;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #white-active #white-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: white;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #red-active #red-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: red;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #orange-active #orange-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: orange;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #yellow-active #yellow-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: yellow;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #green-active #green-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: #1DAF1D;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #blue-active #blue-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: #3851E0;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #purple-active #purple-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: #C423C4;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
    #arrow-menu #rainbow-active #rainbow-arrow{
        display: block;
        width: 0;
        height: 0;
        margin: 0 auto;
        border-style: solid;
        border-width: 15px;
        border-top-color: #00E000;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
}
/* END COLOR MENU ------------------------------- */
/* FOOTER ----------------------------------------*/
/* DESKTOP */
#footer{
}
@media only screen and (min-width: 930px){
    footer{
	bottom:0;
		margin-top: 50px;
    }
}
@media only screen and (min-width: 681px) and (max-width: 929px){
    footer{
	bottom:0;
        padding-top: 10px;
    }
}
@media only screen and (max-width: 680px){
    footer{
	bottom:0;
    }
}
    #footer{
	bottom:0;
	width:100%;
        margin-top: 30px;
        background-color: #912425;
    }
    #footer p{
        font-size: 11px;
        line-height: 30px;
        text-align: center;
        color: #DDD3C9;
        max-width: 1000px;
        margin: 0 auto 0 auto;
    }
    #footer p a{
        color: #DDD3C9;
    }
}
    /*EINDE FOOTER */