@charset "utf-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 100%;
	line-height: normal;
	color:#fff;
	background-image:url(images/background-arena-wealth.jpg); background-color:#1f126a; background-repeat:no-repeat; background-position:top left; background-size: 66.66% auto;
height:100%;
}

h1, h2 {
	padding-bottom: 5px;
	margin: 10px 0;
	font-family: 'Montserrat', sans-serif;
	font-weight:normal;
    color:#1f126a;
}
h3, h4, h5, h6 {
	margin: 15px 0 15px 0;
	font-family: 'Montserrat', sans-serif;
	font-weight:normal;
    color:#fff;
}
h1 {
	font-size: 150%;
	line-height: normal;
}
h2 {
	font-size: 150%;
}
h3 { 
	font-size: 125%;
}
h4 {
	font-size: 100%;
}
p {
	margin-top: 0.5em;
	margin-bottom: 0.9em;
}
a {
	color:#1f126a;
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; -webkit-appearance: none;
}
a:hover { text-decoration: none; color:#d4060b; }



.background { position:fixed; width:100%; height:100%; overflow-y:scroll;}
.holder {width:33.33%; float:left; height:auto; min-height:100%;}
.row1 h1 {text-align:center; color:#fff;}
.row1 .popup { padding:5px; margin-top:20px; text-align:center;}
.row1 .popup img {max-width:265px; padding: 10px;
	background: #fff;
	border-radius: 4px;}
.row2.holder {background-color: rgba(0,0,0,0.75); color:#999;}
.row3.holder {background: #1f126a;}
.row2 h1 {color:#fff; text-align:center;}
.row2 h3 {color:#fff; text-align:center;}
.row3 h3 {color:#fff;}
.row3 a, .row3 {color:#ccc;}
.row3 a:hover {color:#fff;}
.row3 .neg {color:#fff;}
.row {position:relative; padding:0 40px; overflow:hidden; }

.row2 .row, .row3 .row {display:table; height:100%; margin-top:150px; margin-bottom:40px;}
.row2 .row .popup, .row3 .row .popup {display:table-cell; vertical-align: middle;}


img {width:100%; height:auto;}

a.meer-info { position:relative; text-align:center; background: #1f126a; background-repeat:no-repeat; background-position:10px 50%; background-size:25px; display:block; color:#ccc; padding:10px; margin:0 0 10px 0; border:1px solid #fff; -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;}
a.meer-info:hover {background: #fff; color: #1f126a; background-repeat:no-repeat; background-position:10px 50%; background-size:25px; }

a.meer-info.facebook {background-image:url(images/facebook-over.png);}
a.meer-info.facebook:hover {background-image:url(images/facebook.png);}
a.meer-info.youtube {background-image:url(images/youtube-over.png);}
a.meer-info.youtube:hover {background-image:url(images/youtube.png);}

.social-link {text-align:center; margin:20px 0;}
.social-link a { display:inline-block; width:32px; height:32px; margin-right:5px;}
.social-link.facebook a {background: url(images/facebook.png) no-repeat 50%;}
.social-link.facebook a:hover {background: url(images/facebook-over.png )no-repeat 50%;}
.social-link img {width:100%; height:auto;}


@media screen and (max-width:768px) {
	html, body {background-position:top left; background-size: 100% auto;}
	.holder {width:50%; height:70%;}
	.row1.holder, .row2.holder {height:auto; min-height:540px; position:relative; }
	.row2.holder {padding-top:40px; padding-bottom:70px;}
	.row3.holder, .row4.holder { width:100%; height:auto;}
	.row3 .row {display:block;}
	.row3 .row .popup {display:block;}
	a.meer-info {float:left; display:block; width:45%; margin:0 0 10px 0;}
	a.meer-info.aanmelden, a.meer-info.youtube {float:right; margin:0 0 10px 0;}
}

@media screen and (max-width:736px) {
	.row1.holder, .row2.holder { font-size: 100%;}
	.row2.holder {padding-top:30px; padding-bottom:0;}
}
@media screen and (max-width:600px) {
	.background { position:relative; width:100%;}
	.holder {width:100%; height:auto;}
	.row1.holder {height:auto; min-height:300px; position:relative;}
	.row2.holder {height:auto; min-height:auto; position:relative;}
	.row3.holder, .row4.holder { width:100%; height:auto;}
	.row3 .row {display:block;}
	.row3 .row .popup {display:block;}
	a.meer-info {float:none; display:block; width:auto; margin:0 0 10px 0;}
	a.meer-info.aanmelden, a.meer-info.youtube {float:none; margin:0 0 10px 0;}
	.row { padding:20px 20px;}
}