/* 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:#efefef;
	font-family:Georgia,Verdana,Tahoma,Arial,Helvetica,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: 4px;
}
#pagina { /*  */
	width:96%;
	margin: auto;
}
#hoofd { /* Dit is de definitie van de header */
	background-color:#FF9;
    width: 100%;
    height: auto;
	text-align:left;
	margin: 0 0 2px 0;
	padding: 0 auto;
}
h2 {
	position:relative;
	z-index: 10;
	line-height: 1.1em;
	font-size: 1.0em;
	font-weight: bold;
	font-style: italic;
	padding: 0 10px 4px 0;
}
.blwh {
	left: 10px;
	padding-right: 30px;
	color: #66F;
    letter-spacing: 0.02em;
}
[class*="col-2"]  {
	text-align: center;
    height: auto;
}
[class*="col-1"] {
	text-align: center;
    height: auto;
}
a.fav {text-decoration:none; font-size:0.9em; font-weight:normal; color:#F00;}
a.fav:visited {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:#FFC;
	font-size: 0.95em;
	line-height: 1.2em;
	padding: 10px 20px 30px 20px;
}
#content p{ /* */
	padding: 0 0 8px 0;
}
#intro h1 { /* font wordt gebruikt voor aanroep */
	font-family: 'Margarine', cursive;
	font-size: 34px;
	font-weight: 400;
	letter-spacing: 0.018em;
	line-height: 1.4em;
	color: #eee;
    text-shadow: 2px 3px 2px #222, 0 0 10px #dfdfdf, 0 0 10px darkblue;
	text-align: left;
	padding: 0;
}
#intro h5 { /* font wordt gebruikt voor aanroep */
	font-family: 'Margarine', cursive;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0.014em;
	line-height: 1.24em;
	color: #333;
	padding: 5px 5px;
}
#content h3 { /* Tekst/paragraaf headers */
	font-size:110%;
	letter-spacing: 0.05em;
	color:#4477FF;
	font-weight:bold; 
	margin:25px 0 6px 0;
}
#content h4 { /* Tekst/paragraaf subheaders */
	font-size:90%;
	letter-spacing: 0.05em;
	color:#0099FF;
	font-weight:bold;
	font-style: italic; 
	margin:0 0 6px 0;
}
#content ul {
	list-style-type:square;
	margin-top:6px; /* ruimte boven de listing */
	margin-bottom:16px; /* ruimte onder de listing */
	margin-left:20px; /* Verschuift de listing vanaf kantlijn naar rechts */
	padding-left:0.5em; /* Verschuift de listing vanaf kantlijn naar rechts */
}
#content li {
	font-size:100%;
	letter-spacing: 0.00em;
	line-height: 1.40em;
	margin: 4px 0 0 20px;
}
#content li.subhead { /* sub-sub headers */
	text-align:left;
	font-size:1.10em;
	font-weight:normal; 
	color:#222;
}

#footer { /* gebruikt bij alle DESLI gerelateerde sites */
	clear: both;
	background-color:#ffffaa;
	font-family:Verdana;
	font-size:11px;
	text-align: center;
	color:#004040;
	font-weight:normal;
	line-height:12px;
	padding:6px 0px;
	text-decoration:none;
	outline:none;
}
#footer a {
	text-decoration:none;
	outline:none;
	color:#393;
}
#footer a:hover {
	color:#161;
}

/* 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: 1150px) {
    /* For mobile phones: */
    [class*="col-12"] {width: 100%;}
    [class*="col-8"] {width: 100%;}
    [class*="col-7"] {width: 100%;}
    [class*="col-6"] {width: 100%;}
    [class*="col-5"] {width: 100%;}
    [class*="col-4"] {width: 100%;}
    [class*="col-3"] {width: 50%;}
	[class*="col-2"] {width: 33.33%;}
	[class*="col-1"] {width: 33.33%;}
	#intro h1 {font-size: 46px; font-weight: 380; line-height: 1.3em;}
	#pagina {width:98%;}
}
@media only screen and (max-width: 600px) {
    /* For mobile phones: */
    [class*="col-12"] {width: 100%;}
	img.scaled {width: 90%; height: 90%;}
	h2 {line-height:1.0em; font-size:1.0em;}
	#pagina {width:98%;}
	#intro h1 {font-size: 42px; font-weight: 350; line-height: 1.2em;}
	.blok {font-size:1.32em;}
}
@media only screen and (max-width: 460px) {
    /* For mobile phones: */
    [class*="col-12"] {width: 100%;}
    [class*="col-3"] {width: 100%;}
	h2 {line-height:1.0em; font-size:0.8em;}
	#intro h1 {font-size: 38px; font-weight: 300; line-height: 1.1em;}
	#intro h5 {font-size: 20px; font-weight: 300; line-height: 1.0em;}
	.uitklap {font-size:0.8em;}
	.blok {font-size:1.0em;}
}