@charset "UTF-8";
/* CSS overgenomen van Freeway */

.f-x1 { height:100% }
.f-x2 { height:1px }
.f-x3 { display:inline }
img { behavior: url("pngbehavior.htc"); }
div#PageDiv { height:100% }

    .fwNavItem a {
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
}
/* CSS voor logo animatie */

.bigEntrance{
	animation-name: bigEntrance;
	-webkit-animation-name: bigEntrance;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;			
}

@keyframes bigEntrance {
	0% {
		transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;
	}
	45% {
		transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	75% {
		transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	100% {
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}		
}

@-webkit-keyframes bigEntrance {
	0% {
		-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;
	}
	45% {
		-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	75% {
		-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	100% {
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
}
}
#footer {
width:100%; height:40px; z-index:0; clear:both; margin-left:auto; margin-top:20px; margin-right:auto; background-color:#4c72ae; overflow:visible;
}
#footer a
{
color: #f5f5f5;	
text-decoration: none
}
#footer a:hover
{
color: #93B2FF;	
text-decoration: none
}

/* CSS manueel toegevoegd */

.style8 { color:#f5f5f5; font-family:'Raleway'; font-weight:400; font-size:12px; line-height:1.4; text-align:center; text-decoration: none }
.style8 a { color:#f5f5f5; font-family:'Raleway'; font-weight:400; font-size:12px; line-height:1.4; text-align:center; text-decoration: none }
.style8 a:hover { color:#f5f5f5; font-family:'Raleway'; font-weight:400; font-size:12px; line-height:1.4; text-align:center; text-decoration: none }
.style8 a:active { color:#f5f5f5; font-family:'Raleway'; font-weight:400; font-size:12px; line-height:1.4; text-align:center; text-decoration: none }
.style8 a:visited { color:#f5f5f5; font-family:'Raleway'; font-weight:400; font-size:12px; line-height:1.4; text-align:center; text-decoration: none }
#HERO
{
padding:0px;background-image: url(BEELDEN/vrijheidstraat.png); background-size:contain; background-position: left; background-repeat: no-repeat
}

.para
{
background-attachment: fixed;
}

.flexboxhorizontaal
{
width:40%;
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-grow: 0;
align-items:stretch;
align-self: stretch;
	
/*-webkit-display:flex; -webkit-flex-wrap:wrap; -webkit-justify-content:center;
-ms-flex-wrap:wrap; -ms-justify-content:center; -ms-display:flex;*/
}

.flexboxhorizontaalnostretch { -ms-justify-content:center; -webkit-align-content:flex-start; -webkit-flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; align-content:flex-start; flex-wrap:wrap; -ms-align-content:flex-start; -ms-flex-wrap:wrap; display:flex; display: -webkit-flex; display: -ms-flex; align-items:flex-start; -webkit-align-items:flex-start; -ms-align-items:flex-start }

.flexboxverticaalboven { -ms-justify-content:flex-start; -webkit-align-content:flex-start; -webkit-flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start; align-content:stretch; flex-wrap:wrap; -ms-align-content:flex-start; -ms-flex-wrap:wrap; display:flex; display: -webkit-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column }

.flexboxverticaalcentred { -ms-flex-direction:column; -webkit-align-content:center; -webkit-flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; align-content:center; flex-wrap:wrap; -ms-align-content:center; -ms-flex-wrap:wrap; display:flex; display: -webkit-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -ms-justify-content:center }

.flexfullwidth
{
width:81%;
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-grow: 0;
align-items:stretch;
align-self: stretch;
}
.inkijk
{
width:auto;
height:250px;
margin: 10px;
border-width: 1px;
border-color: white;
border-style: solid;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3); 
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
}
.vetkleur2
{ color:#4c72ae; font-weight:bold; text-decoration:none }
.navigatie { font-family:'Raleway'; font-weight:200; font-size:16px; line-height:0.8; text-align:center }
.hoofdtekst
{ color:#4c4c4c; font-family:'Raleway'; font-weight:400; font-size:14px; line-height:1.4; margin-top:30px }

.hoofdtekst a
{
font-family:'Raleway';
font-weight:400;
color:#4c72ae;
}
.TITEL { color:#333; font-family:'Raleway'; font-weight:200; font-size:30px; text-transform:uppercase; font-variant:normal; margin:0px }
.verbergin2kol
{
display:none;
}

.verbergin1kol
{
display:none;
}

.GROW
{
flex-grow:1;
flex-wrap: wrap;
align-items: stretch;
align-content: stretch;
}


.BOX
{
width:100%; float:left; padding-bottom:20px; margin-bottom:20px; background-color:#f5f5f5; overflow:visible; position:relative; flex-grow:1}

.content
{
padding:30px 30px 0px 30px;
}

.SCHADUW
{
	z-index:auto !important;
	border-top:solid #93b2ff 3px; border-bottom:solid #93b2ff 3px;
	-webkit-box-shadow:0 3px 5px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset; -moz-box-shadow:0 3px 5px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset; box-shadow:0 3px 5px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset; }
.SCHADUW:after, .SCHADUW:before { content:''; z-index:-1; position:absolute; left:6%; bottom:15px; width:70%; background-color:rgba(0,0,0,0.5); max-width:300px; max-height:100px; height:55%; -webkit-box-shadow:0 13px 16px rgba(0,0,0,0.5); -moz-box-shadow:0 13px 16px rgba(0,0,0,0.5); box-shadow:0 13px 16px rgba(0,0,0,0.5); -webkit-transform:skew(-15deg) rotate(-6deg); -moz-transform:skew(-15deg) rotate(-6deg); -ms-transform:skew(-15deg) rotate(-6deg); -o-transform:skew(-15deg) rotate(-6deg); transform:skew(-15deg) rotate(-6deg); }
.SCHADUW:before { left:auto; right:6%; -webkit-transform:skew(15deg) rotate(6deg); -moz-transform:skew(15deg) rotate(6deg); -ms-transform:skew(15deg) rotate(6deg); -o-transform:skew(15deg) rotate(6deg); transform:skew(15deg) rotate(6deg)
}

.cover
{
width:300px;
z-index:0;
float: left;
margin: 5px 30px 10px 0px;
border-width: 1px;
border-color: white;
border-style: solid;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3); 
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
}

.screenshot
{
width:300px;
z-index:0;
float: left;
margin: 0px 30px 20px 0px;
border-width: 1px;
border-color: white;
border-style: solid;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3); 
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
transition: transform .2s; /* Animation */
}
.screenshot:hover {
  transform: scale(1.02); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.logocontainer
{
width:30%;
z-index:0;
float:left;
clear:left;
margin-left:10%;
margin-top:40px;
overflow:hidden;
}

.fullwidth
{
display:flex;
width:81%;
padding:0px;
text-align:center;
}

.kleur2
{
color:#4c72ae;
}

.cursief
{
font-style: italic
}

.jaren { color:#333; font-family:'Raleway'; font-weight:400; font-size:18px; text-align:center }
.jaren a { text-decoration: none }
.jaren a:hover { color:#4c72ae; }
.jaren a:visited { color:#333; }
.jaren a:active { color:#333; }

.archieftitelke { color:#4c72ae; font-family:'Raleway'; font-weight:200; font-size:24px; text-align:center }

/* hyperlinkstijl gekopieerd uit freeway */

.cl-effect-1 { position:relative}
.cl-effect-1 a::before,
.cl-effect-1 a::after {

	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
} 

@media (min-width: 1441px){
	
.navigatie {font-size:20px}
	
.hoofdtekst
{font-size:18px;}

.TITEL {font-size:34px}
	
.para
{
background-attachment: fixed;
}
.verbergin1kol
{
display:block;
}
.screenshot
{
width:400px;
}
.cover
{
width:300px;
}
	
.logocontainer
{
width:30%;
z-index:0;
float:left;
clear:left;
margin-left:10%;
margin-top:40px;
overflow:hidden 
}
}
@media (min-width: 1201px) and (max-width: 1440px){
.para
{
background-attachment: fixed;
}
.verbergin1kol
{
display:block;
}
.screenshot
{
width:300px;
z-index:0;
float: none;
margin: 0px 30px 20px 0px;
border-width: 1px;
border-color: white;
border-style: solid;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3); 
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
}	
.cover
{
width:200px;
}
	
.logocontainer
{
width:30%;
z-index:0;
float:left;
clear:left;
margin-left:10%;
margin-top:40px;
overflow:hidden 
}
}
@media (min-width: 769px) and (max-width: 1200px){

#HERO
{
padding:0px;background-image: url(BEELDEN/vrijheidstraat.png); background-size:contain; background-position: center; background-repeat: no-repeat; min-height: 400px
}
	
.flexfullwidth
{
width:90%;
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-grow: 0;
align-items:stretch;
align-self: stretch;
}
.para
{
background-attachment: scroll;
}
.verbergin2kol
{
display:flex;
}

.fullwidth
{
width:90%;
}

.logocontainer
{
width: 80%;
z-index:0;
float:none;
clear:both;
margin-left:10%;
margin-top:40px;
margin-bottom:20px;
overflow:hidden 
}
}
@media (min-width: 400px) and (max-width: 768px){
#HERO
{
padding:0px;background-image: url(BEELDEN/vrijheidstraat.png); background-size:contain; background-position: center; background-repeat: no-repeat; min-height: 300px;
}
.flexfullwidth
{
width:90%;
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-grow: 0;
align-items:stretch;
align-self: stretch;
}
.para
{
background-attachment: scroll;
}
.verbergin2kol
{
display:flex;
}	

.fullwidth
{
width:90%;
}	

.logocontainer
{
width:80%;
z-index:0;
float:none;
clear:both;
margin-left:10%;
margin-top:40px;
margin-bottom:20px;
overflow:hidden
}
	
.archieftitelke { font-size:18px }
	
}
@media (max-width: 400px){
#HERO
{
padding:0px;background-image: url(BEELDEN/vrijheidstraat.png); background-size:contain; background-position: center; background-repeat: no-repeat; min-height: 200px;
}
.flexfullwidth
{
width:94%;
display:flex;
justify-content:center;
flex-wrap:wrap;
flex-grow: 0;
align-items:stretch;
align-self: stretch;
}	
.para
{
background-attachment: scroll;
}
.verbergin2kol
{
display:flex;
}	
	
.fullwidth
{
width:94%;
}		

.logocontainer
{
width:80%;
z-index:0;
float:none;
clear:both;
margin-left:10%;
margin-right:0%;
margin-top:40px;
margin-bottom:20px;
overflow:hidden
}
.screenshot
{
width:100%;
margin: 0px 0px 30px 0px;
}
.cover
{
width:100%;
margin: 0px 0px 30px 0px;
}
}.ver {
}