@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.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%;}
}
/*****************/
/* HTML elements */
/*****************/
html {
  font-family: "Arial", sans-serif; 
}
.header { 
  background-color: #fff;
  color: #707173;
  padding: 15px;
}
p 
{
	font-family: "Arial";
	margin: 20px 220px 0 13.5%;
	min-width: 70%;
}
h1
{
	color: #fbd611;
	font-family: "Ubuntu"; 
	font-size: 42px;
	font-weight: normal;
	margin: 20px 220px 0 13.5%;
}
h2
{
	color: #fbd611;
	font-family: "Ubuntu";
	font-size: 26px;
	line-height: 28px;
	margin: 20px 220px 0 13.5%;
}
/**********/
/* Header */
/**********/
/* logo */
.logo 
{ 
width: 15%; 
position: relative;
margin: 20px 220px 20px 7.5%;
}


/**********/
/* slider */
/**********/
.slider_container
{
	background-color: #fff1bb;
	border-bottom: 12px solid #fff;
	position: relative;
}
.slider_container .slider
{
	margin: 0 auto;
	position: relative;
	width: 68.5%;
}

/***********/
/* article */
/***********/
.page_content
{
	background: transparent url('images/saxofoon.jpg') 0 0 repeat;
	margin-left:220px 0 auto;
	min-height: 100%;
	padding: 30px 42px 84px;
	width:100%;
}
.article p,
.article ul,
.article ol,
.article table
{
	color: #fff;
	font-size: 21px;
	line-height: 28px;
	margin: 20px 200px 0 13.6%;
	}
.article a
{
	color: #fbd611;
	}

/*****************/
/* Register form */
/*****************/
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 70%;
  }
.register_form
{
	clear: both;
	float: left;
    position: absolute;
    margin: 60px 200px 60px 12.6%;
    
}
.register_form .fw_form_feedback {
	color: #fff;
	margin-bottom: 10px;
}
.register_form .fw_form_feedback_error {
	color: #f00;
}
.register_form .fw_form_row
{
	padding-bottom: 17px;
}
.register_form .fw_form_label,
.register_form .fw_form_field
{
	display: inline-block;
	vertical-align: top;
}
.register_form .fw_form_label
{
	color: #fff;
	font-size: 19px;
	padding-top: 6px;
	width: 233px;
}
.register_form .fw_form_field
{
	width: 374px;
}
.register_form input[type="text"]
{
	border: none;
	border-radius: 4px;
	display: block;
	margin: 0;
	outline: none;
	padding: 0;
	padding: 10px 5px 11px;
	width: 100%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.register_form .fw_form_row.fw_error input[type="text"] {
	border: 1px solid #f00;
}
.register_form .fw_form_submit_link {
	background-color: #fff;
	border-radius: 4px;
	color: #000;
	display: inline-block;
	padding: 10px 5px 11px;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.register_form .fw_form_submit_link:hover {
	text-decoration: underline;
}
/**************************/
/* Homepage footer visual */
/**************************/
.homepage_items
}
	font-size: 34px;
	font-weight: normal;
	line-height: 1em;
	margin: 0;
}

/* page footer article links */

.sidebar .articles a:first-child .string_1
{
	margin-top: 21px;
}
.sidebar .articles .aanmelden .string_1 {
	font-size: 37px;
}
.articles:after
{
	clear: both;
	content: '';
	display: block;
}
.articles a
{
	background: white;
	display: block;
	float: left;
	height: 217px;
    margin-left: 13.6%;
	
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 216px;
	-moz-box-shadow: 0 3px 7px 0 #000;
	-webkit-box-shadow: 0 3px 7px 0 #000;
	box-shadow: 0 3px 7px 0 #000;
}
.articles .block
{
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 10px solid;
	height: 1px;
	left: 94px;
	position: absolute;
	width: 1px;
}
.articles a:first-child
{
	background-color: #666666;
}
.articles a:first-child .arrow
{
	border-top-color: #666666;
}
.articles a:first-child + a
{
	background-color: #C0C0C0;
}
.articles a:first-child + a .arrow
{
	border-top-color: #C0C0C0;
}
.articles a:first-child + a + a
{
	background-color: 	#ffea99;
}
.articles a:first-child + a + a .arrow
{
	border-top-color: 	#ffea99;
}
.articles span
{
	display: block;
}
.articles a .string_1
{
	color: #fffdfb;
	font-size: 45px;
	line-height: 45px;
	margin-top: 26px;
}

.sidebar .articles a:first-child p strong{
	color: #fbd611;
}

.articles a p{
	margin: 0;
	padding: 0;
}
.articles a:first-child p strong{
	color: #fbd611;
	font-family: Ubuntu;
	line-height: 62px;
	margin-top: -8px;
}

.articles a:first-child + a{
	color: #f4ffff;
	font-size: 45px;
	line-height: 45px;

}

.articles a:first-child + a p strong{
	color: #666666;
	font-family: Ubuntu;
	font-size: 50px;
	line-height: 63px;
	margin-top: 4px;	
}

.articles a:first-child + a + a p
{
	color: #666666;
	font-size: 45px;
	line-height: 45px;
}

.articles a:first-child + a + a p strong
{
	color: #A9A9A9;
	font-family: Ubuntu;
	font-size: 50px;
	line-height: 63px;
	margin-top: 9px;
}
/**********/
/* Footer */
/**********/

.footer_container {
	background-color: #707173;
	border-top: 16px solid #fff;
}
.footer
{
	background-color: #707173;
	margin: 0 auto;
	padding: 0 0 25px;
	text-align: center;
	width: 100%%
}
.footer h2
{
	font-family: Ubuntu;
	font-size: 50px;
	font-weight: normal;
    	line-height: 55px;
	text-align: center;
    	margin: 0;
	margin-top: 39px;
}
.footer p
{
	color: #fff;
	line-height: 23px;
	margin-top: 43px;
} 
  

* {
  box-sizing: border-box;
}


.container {
  padding: 16px;
  background-color: white;
}


input[type=text], input[type=password] {
  width: 65%;
  padding: 15px;
  margin: 20px 220px 0 13.5%;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}


hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}


.registerbtn {
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity: 1;
}


a {
  color: #fbd611;
}

.signin {
  background-color: #f1f1f1;
  text-align: center;
}