/* CSS layout definition file: FietsRepa's - BikeReps */

@import "https://fonts.googleapis.com/css?family=Jolly+Lodger|Margarine";
@import url('https://fonts.googleapis.com/css?family=Montserrat');

* { /* resetten van alles met de universele selector */
	margin:0;
	padding:0;
}
body {
	background-color:#BB9;
	font-family: 'Montserrat', sans-serif;
	font-size:1.0em;
}
body hr {
	margin:3px 0;
}
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 0px;
}

#pagina { /*  */
	width:98%;
	margin: auto;
}
#hoofd { /* Dit is de definitie van de header */
	background-color:#DDD;
    width: 100%;
    height: auto;
	text-align:left;
	margin: 0 0 2px 0;
	padding: 0 auto;
}
h2 {
	position:relative;
	z-index: 100;
	line-height: 1.1em;
	font-size: 1.1em;
	font-weight: bold;
	font-style: italic;
	padding: 0 10px 14px 0;
}
.groen {
	left: 20px;
	padding-right: 20px;
	color: #0C0;
    letter-spacing: 0.05em;
}
.uk {
	text-align: center;
    height: auto;
	padding: 10px 0 0 0;
}
a.fav:link {text-decoration:none; font-size:0.9em; font-weight:normal; color:#F00;}
a.fav:active {text-decoration:none; font-size:0.9em; font-weight:bold; color:#F00;}
a.fav:visited {text-decoration:none; font-size:0.9em; font-weight:bold; color:#F00; outline:none;}
a.fav:hover {text-decoration:none; font-size:0.9em; font-weight:bold; color:#99F;}
.datum {
	color: #049;
	font-family:verdana;
	font-size:0.8em;
	font-weight:bold;
    letter-spacing: 0.075em;
	text-align: center;
	padding: 10px; 
}
#content { /* Dit is de definitie van de ruimte onder de header */
    width: 100%;
	background-color:#bbb;
}
.vak {
	background-color: #444;
	font-style: normal;
	text-align:center;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.3em;
	margin: 5px 0;
	padding: 16px 0 20px 0;
}
.vak h1 {
	font-family: 'Margarine', cursive;
	font-size: 50px;
	font-weight: 500;
	line-height: 1.3em;
	color: #cd3;
	text-shadow: 2px 2px 2px #993;
}
.vak h3 {
	font-family: 'Margarine', cursive;
	font-size: 35px;
	font-weight: 300;
	line-height: 1.35em;
	color: #cd3;
	text-shadow: 2px 2px 2px #993;
}
.vak h4 {
	font-family:verdana;
	font-size: 14px;
	color: #FCE22C;
}
.vak h5 {
	font-family:verdana;
	font-size: 12px;
	color: #ff0;
}
#footer {
	clear: both;
	margin:0;
	background-color:#EEE;
	font-family:Verdana,Tahoma,sans-serif;
	font-size:11px;
	text-align: center;
	color:#000000;
	font-weight:normal;
	line-height:12px;
	padding:6px 0px;
}
#footer a {
	font-size:11px;
	text-decoration:none;
	outline:none;
	color:#666;
}
#footer a:hover {
	color:#333;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 1050px) {
    /* For mobile phones: */
    [class*="col-7"] {width: 100%;}
    [class*="col-6"] {width: 100%;}
    [class*="col-2"] {width: 33.33%;}
    [class*="col-1"] {width: 33.33%;}
}
@media only screen and (max-width: 600px) {
    /* For mobile phones: */
	img.scaled {width: 90%;}
	h2 {line-height:1.0em; font-size:1.0em;}
	.vak h1 {font-size: 38px; font-weight: 350; line-height: 1.2em;}
	.vak h3 {font-size: 30px; font-weight: 280; line-height: 1.2em;}
}
@media only screen and (max-width: 460px) {
    /* For mobile phones: */
	img.scaled {width: 85%;}
	h2 {line-height:1.0em; font-size:0.8em;}
	.vak h1 {font-size: 38px; font-weight: 350; line-height: 1.2em;}
	.vak h3 {font-size: 28px; font-weight: 250; line-height: 1.2em;}
}