@import url(vendors/select2.css);
@import url(vendors/eonasdan-bootstrap-datetimepicker.css);
@import url(forms/form-validation.css);

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');


body{ background: #eeeeee; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: 500; color: #000000; }
h1{ color: #000000; font-size: 50px; margin: 30px 0 30px 0; padding: 0; }
h2{ color: #ffffff; font-size: 40px; margin: 0; padding: 0; }
h3{ color: #feb300; font-size: 30px; margin: 0; padding: 0; }
h4{ color: #feb300; font-size: 20px; margin: 5px 0 10px 0; padding: 0; }
h5{ color: #d9007d; font-size: 16px; margin: 0 0 10px 0; padding: 0; }
i{ margin-right: 10px; }
a{ color: #d9007d; }
.clear{ clear: both; border: none; margin: 0; }
.center{ text-align: center; }

.button{ background: #d9007d; color: #ffffff; font-size: 20px; position: absolute; bottom: 10px; left: 10px; display: block; width: calc(100% - 20px); text-align: center; padding: 10px 0; }
.button:hover{ text-decoration: none; background: #bb006c; color: #ffffff; }
.button:focus{ color: #ffffff; text-decoration: none; }

/* TOP */
.container-fluid.top{ background: #000000; color: #ffffff; font-size: 16px; padding: 3px 0; height: 28px; }

/* NAVIGATIE */
.container-fluid.nav{ background: #fec600;
    background: -moz-linear-gradient(top, #fec600 0%, #feb300 100%);
    background: -webkit-linear-gradient(top, #fec600 0%,#feb300 100%);
    background: linear-gradient(to bottom, #fec600 0%,#feb300 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#662d91', endColorstr='#feb400',GradientType=1 ); }
.container-fluid.nav .container{ position: relative; }
.container-fluid.nav .logo{ position: absolute; top: -60px; left: 20px; z-index: 99999; background: #ffffff; max-width: 350px; padding: 50px 20px 10px 20px; border-radius: 10px; transform: rotate(-5deg); box-shadow: 1px 1px 15px rgba(0,0,0,0.3); }
.container-fluid.nav .logo img{ max-width: 250px; width: 250px; height: 96px !important; }

.navbar{ margin-bottom: 0; }
.navbar-default{ background-color: transparent; border-color: transparent; margin-top: 20px; }
.navbar-collapse{ padding-right: 0; padding-left: 0; }
.navbar-nav{ float: right; margin-right: 165px; }
.nav.navbar-nav > li a{ color: #000000; font-weight: 400; margin-bottom: 10px; padding: 10px 12px 5px 12px; }

.container-fluid.content:before{ content: ''; display: block; height: 18px; width: calc(100% + 30px); background: #eeeeee; border-top: 10px solid #feb300; border-bottom: 5px solid #feb300; margin: 5px -15px 20px -15px; }

.nav.navbar-nav .dropdown-menu li a{ padding: 10px 15px 10px 12px; margin: 0; font-size: 16px }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover{ color: #000000; background-color: transparent; border-bottom: 2px solid #000000; }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover{ color: #000000; background-color: transparent; }

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover{ color: #000000; border-bottom: 2px solid #000000; }
	
.nav.navbar-nav > li:nth-child(3) > a { font-weight: 700; }

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover{ text-decoration: none; background-color: #d9007d; color: #ffffff; }
.dropdown-menu > li > a{ color: #000000; }

.stempel{ position: absolute; right: 0; top: -10px; z-index: 999; max-width: 150px; }
.stempel img{ width: 100%; }

/* CONTENT */
.container-fluid.content{ padding-bottom: 50px; }
label{ font-weight: 500; }

.btn{ padding: 10px 50px; font-size: 18px; font-weight: 500; border-radius: 0; }
.btn-primary{ color: #fff; background-color: #d9007d; border-color: transparent; }
.btn-primary:hover,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover{ color: #fff; background-color: #bb006c; border-color: transparent; }


/* FOOTER */
.container-fluid.footer{ background: #262626; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; color: #ffffff; padding-bottom: 40px; }
.container-fluid.footer .container{ position: relative; }
.container-fluid.footer .col-md-3 { width: 33.33333%; }
.container-fluid.footer h2{ font-size: 22px; margin: 40px 0 20px 0; }
.container-fluid.footer .block.html{ min-height: 45px; }
.container-fluid.footer .button{ position: relative; left: 0; top: 10px; display: inline; bottom: auto; padding: 10px 30px; }
.container-fluid.footer .hart{ position: absolute; right: 0; bottom: -40px; width: 260px; }
.container-fluid.footer .hart img{ width: 100%; }
.container-fluid.footer td { padding-bottom: 10px; }

.container-fluid.endpage{ background: #000000; padding: 5px 0; font-family: 'Roboto Condensed', sans-serif; font-size: 16px; font-weight: 300; color: #ffffff; }
.container-fluid.endpage .col-sm-6{ text-align: left; }
.container-fluid.endpage .col-sm-6:nth-child(2){ text-align: right; }

/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width: 959px) and (max-width: 1220px){
	.nav > li > a{ padding: 10px; }
	.stempel{ right: -36px; top: 27px; }
	.navbar-nav{ margin-right: 0; }
	.nav.navbar-nav li a{ padding: 0px 10px 5px 10px; }
}

/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container{ width: 100%; }
	.container-fluid.nav .logo{ top: -70px; padding: 50px 20px 0px 20px; }
	.navbar-default{ margin-top: 90px; }
	.navbar-nav{ padding-left: 0; margin-right: 0; }
	.stempel{ right: -20px; top: 40px; }
	.container-fluid.footer .col-md-3 { width: 100%; }	
}

/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	h1{ font-size: 30px; }
	.container-fluid.nav .logo{ top: -70px; padding: 50px 20px 0px 20px; }
	.navbar-default{ margin-top: 0; }
	.navbar-default .navbar-nav .open .dropdown-menu > li > a{ color: #000000; text-align: right; margin-right: 10px; }
	.navbar-toggle{ margin-right: 0; }
	.stempel{ right: 50px; bottom: -100px; top: auto; }	
	.navbar-default .navbar-toggle{ border-color: #ffffff; }
	.navbar-default .navbar-toggle:focus,
	.navbar-default .navbar-toggle:hover{ background-color: #ffffff; }
	.navbar-default .navbar-toggle .icon-bar{ background-color: #ffffff; }
	.navbar-default .navbar-toggle:focus .icon-bar,
	.navbar-default .navbar-toggle:hover .icon-bar{ background-color: #fec600; }
	.navbar-default .navbar-collapse,
	.navbar-default .navbar-form{ border-color: transparent; }
	.navbar-nav{ margin: 7.5px 0; }
	.nav > li > a { text-align: right; }
	.navbar-collapse{ box-shadow: none; }	
	.container-fluid.footer .col-md-3 { width: 100%; }
	.stempel{ display: none; }
}

/* Mobiel (Portrait)
================================================== */
@media only screen and (max-width: 479px) {
	h1{ font-size: 30px; }
	.container-fluid.top{ display: none; }
	.container-fluid.nav .logo{ max-width: 200px; top: -30px; padding: 50px 0 0 0; }
	.container-fluid.nav .logo img{ width: 160px; }
	.btn-primary{ width: 100%; max-width: none; margin-bottom: 10px; }
	.btn-default{ width: 100%; max-width: none; }
	.pull-right{ float: none !important; }
	.pull-left{ float: none !important; }
	.container-fluid.footer .col-md-3 { width: 100%; }
	.container-fluid.footer{ padding: 0 15px 40px 15px; }
	
	.navbar-default{ margin-top: 0; }
	.navbar-default .navbar-nav .open .dropdown-menu > li > a{ color: #000000; text-align: right; margin-right: 10px; }
	.navbar-toggle{ margin-right: 0; }
	.stempel{ display: none; }

	.navbar-default .navbar-toggle{ border-color: #ffffff; }
	.navbar-default .navbar-toggle:focus,
	.navbar-default .navbar-toggle:hover{ background-color: #ffffff; }
	.navbar-default .navbar-toggle .icon-bar{ background-color: #ffffff; }
	.navbar-default .navbar-toggle:focus .icon-bar,
	.navbar-default .navbar-toggle:hover .icon-bar{ background-color: #fec600; }
	.navbar-default .navbar-collapse,
	.navbar-default .navbar-form{ border-color: transparent; }
	.navbar-nav{ margin: 7.5px 0; }
	.nav > li > a { text-align: right; }
	.navbar-collapse{ box-shadow: none; }
	.block.html.instagram{ height: 350px; }
		.container-fluid.footer .hart {position: relative; bottom: 0;}
		.container-fluid.endpage .col-sm-6, .container-fluid.endpage .col-sm-6:nth-child(2) {text-align: center;}
	
}