body { background: #f3f3f3; font-size: 100%; font-size: 15px; }

.container { background: white;  }

.header{  position:relative; margin:0;   } 

#logo{ margin-top: 20px;  } 
#logo a{ display: block;  width:229px; height:98px; text-indent: -9999em; margin-bottom: 15px; background: url(/template/img/logo_ftv.gif)  no-repeat; }

h1.black { padding: 20px 20px; display: block; text-align: center; background: black; color: white; margin-bottom: 30px; margin-top: 0px;  }

h1.green { padding: 20px 20px; display: block; text-align: center; background: #28ad4a; color: white; margin-bottom: 30px; margin-top: 0px;  }


.back a { margin-top: 30px; margin-bottom: 30px; color: #666; text-decoration: underline; font-size: 90%; display: block; }

a { text-decoration: underline; color: #333; }
a:hover { color: #28ad4a;  }


.intro { font-weight: 700; }
.intro ul { padding-left: 20px; }
.intro li { list-style-type:disc; }


.usp { text-align: center; margin-top: 30px; margin-bottom: 30px; color: #666666; }
.usp ul { overflow: hidden; text-align: center; }
.usp h3 { color: black; font-size: 135%; }
.usp h4 { font-size: 90%; display: inline;  border-right: solid 1px #ccc; padding-right: 20px; margin-right: 20px; }

.general-txt {   text-align: center; overflow: hidden; padding: 10px 0px 20px!important; color: #666; }
.general-txt p { font-size: 90%; }
.general-txt h3 { color: black; }
.mrgt { margin-top: 15px; }

.image { max-height: 225px; width: 100%; overflow: hidden; margin-bottom: 15px; }
.image img { width: 100%!important; height: auto; }


/*  Navigatie */

.navbar { border-radius: 0px; background: #f3f3f3; border: none; }

.navbar-collapse {  width: 100%; border-collapse: collapse; border: none; }

ul.nav { width: 100%;  }

nav li { display: table-cell!important; margin: 0; }

.nav-justified > li > a { color: #666; padding: 15px; transition: all 0.3s ease 0s; text-decoration: none; font-weight: bold; }
.nav-justified li a:hover { background: #333; color: white; }
.nav-justified li.active a { background: #28ad4a; color: white; }

/* Formulieren */

#form-container { background: #f3f3f3; padding: 5px 15px 15px 15px; }

.form-group { clear: both; margin-top: 15px; }
.form-control { border-radius: 0px!important; }
.formHint { font-size: .85em; color: #666; margin-top: 10px; }

.modal-header { background: #28ad4a; color: white!important; }
.modal-body { background: #f3f3f3; }
.modal-body a { color: #666!important; font-size: 80%!important; margin-top: 20px; display: block; }
.modal-body input { border: solid 1px #ececec; } 

.error { font-size: 80%; margin-top: 10px; color:red; }
a.close { font-size: 80%; color: #666; opacity: 1; }
a.close:hover { text-decoration: underline; }

/* Taal keuze */

.lang-select{ position:absolute; top:15px; right:0px; z-index:2; }
.lang-select li{ float:left;  }
.lang-select li a{ font-size: 10px; margin-left:12px; color:#666;}
.lang-select li.selected a{ color:#999; text-decoration: underline; }
.lang-select select { float: right; border-radius: 0px!important; background: #aeafb2; font-size: 80%; color: white; border: none!important; width: auto;  }

.label { color: #666; font-weight: normal; padding: 11px; }

.gray { background: #aeafb2; overflow: hidden; float: right;  }

/* Login box  */

.login { background: #f3f3f3; color: #666; text-align: center; position: absolute; right: 0px; top: 79px; }
.login a { color: #666; font-size: 80%; display: block; padding: 12px 0px 8px; text-decoration: none; }
.login a:hover { text-decoration: underline; }
.login .gray { padding: 8px 5px 2px 5px; color: white; font-size: 125%; }

/* General Classes */

.no-padding { padding: 0px; }
.npl { padding-left: 0px!important; }
.npr { padding-right: 0px!important; }

.bg-green { background: #28ac49; }
.txtbox { overflow: hidden; padding-bottom: 30px; }

.btn-green { background: #28ad4a; padding: 10px 10px; color: white; text-shadow: none; display: block; clear: both; text-align: center; /* margin: 20px 0px 0px 20px; */ transition: all 0.3s ease 0s; border: none; }

.btn-green:hover { background: black; }

a.btn-green { background: #28ad4a; padding: 10px 10px; color: white; text-shadow: none; display: block; clear: both; text-align: center; /* margin: 20px 0px 0px 20px; */ transition: all 0.3s ease 0s; text-decoration: none; }
a.btn-green:hover { background: #000; color: white; text-decoration: underline; }
a.btn-green .glyphicon-play { font-size: 80%; margin-left: 10px; }

.button-gray a { padding: 6px; text-decoration: none; background: #f3f3f3; color: #666; display: block; text-transform: uppercase; text-align: center; font-size: 125%; }
.button-gray:hover { text-decoration: underline; }

a.btn-gray { background: #f3f3f3; padding: 10px 10px; color: #666; text-shadow: none; display: block; clear: both; text-align: center; /* margin: 20px 0px 0px 20px; */ transition: all 0.3s ease 0s; text-decoration: none;  }
a.btn-gray:hover { background: #333; color: white; }
a.btn-gray .glyphicon-play { font-size: 80%; margin-left: 10px; }


iframe { max-width: 100%!important; }

select:hover { cursor: pointer; }


.title { text-align: center; font-size: 150%; font-weight: bold; color: #666; margin-bottom: 20px; }
.title-upp {  font-size: 130%; font-weight: bold; color: #666; margin-bottom: 0px; text-transform: uppercase; }


.course-title { padding: 20px 20px; display: block; text-align: center; background: black; color: white; margin-bottom: 30px; }
.course-title h3 { margin: 0px; padding: 0px; }

.txt { color: #666; font-size: 90%; margin: 10px 0px 20px 0px; }

.course-txt h1 { margin-bottom: 20px; font-size: 120%; padding: 10px; }
.course-txt { color: #666; font-size: 100%; }
.course-txt .price { color: white; padding: 10px; background: #28ad4a; text-align: center; font-weight: bold; font-size: 120%; margin-right: 15px;}
.course-txt .credits { color: white; padding: 10px; background: #666; text-align: center; font-weight: bold; font-size: 120%;}

ul.social-media { overflow: hidden; margin-bottom: 30px; }
.social-media li { padding: 10px; }
.social-media li img { max-width: 50px; }
.social-media li a { display: block; opacity: 0.7; transition: all 0.3s ease 0s; }
.social-media li a:hover { opacity: 1; }
.social-media li img { width: 100%; height: auto; }

.screen-reader { display: block !important; left: -9999px !important; position: absolute !important; }

/* Breacrumb */

.breadcrumb { background: none; font-size: 80%; color: #666; padding-left: 0px; }
.breadcrumb a { color: #666; }

/* Navigatie */

ul.top-nav { }
ul.top-nav li{ float:left; line-height: 13px; }
ul.top-nav li a{ color:#666; float:left; margin-left:10px; padding-right:10px; border-right:solid 1px #ededed;  }
ul.top-nav li.last a{ border:none; padding-right:0;}
ul.top-nav li.here a{ color:#28ad4a; text-decoration: underline; }

/* Carousel */

.carousel { width: 100%; clear: both;  position: relative; margin-bottom: 15px; }
.carousel-caption { left: 40%; right: 5%; top: 10%; bottom: 10%;  }
.carousel-caption h1 { color: #3c3c3b; background: white; font-weight: bold; padding: 10px; left: 0px; text-shadow: none; text-align: left; padding-left: 20px; font-size: 100%; }
.carousel-caption .txt { text-align: left; margin-left: 20px; font-size: 105%; color: white!important; }

.transparent-black { background:#000; background:rgba(0,0,0,0.5); }

.transparent-white { background:#fff!important; background: rgba(255, 255, 255, 0.9)!important; transition: all 0.3s ease 0s; }
.transparent-white:hover { text-decoration: underline; }

/* Block-menu */

.height { min-height: 373px; }
.height .btn-green { position: absolute; bottom: 15px; left: 15px; right: 15px; }

.big-block { padding: 15px;  color: #666666; margin-bottom: 30px; background: #f3f3f3; position: relative; }
.big-block p { font-size: 90%; }
.big-block h2 { color: #666666; font-size: 120%!important; font-weight: bold; }
.big-block img { width: 100%; height: auto; }

.row-2 { background: #28ad4a; color: white; }
.row-2 h2 { color: white; }
.row-2 a.btn-green { border: solid 1px white; }


.small-block  { position: relative; overflow: hidden; margin-bottom: 30px; }
.small-block ul { overflow: hidden; margin: 0px; }
.small-block li { overflow: hidden; display: block; }
.small-block a { display: block!important; }
.small-block a:hover { text-decoration: underline!important; overflow: hidden; }
.small-block .content { position: absolute; bottom: 0px; left: 15px; right: 15px; padding: 0px 15px; }
.small-block .content h4 { font-size: 100%!important; color: #666666; line-height: 1.3; }
.small-block .content:hover { text-decoration: underline;  }
.small-block img { width: 100%!important; height: auto!important; }


/* Categorien */

.cat-ovv { position: relative; overflow: hidden; }
.cat-ovv img { position: absolute; left: 0px; top: 0px; width: 100%!important; height: auto!important; }

.category-nav ul { overflow: hidden; padding-bottom: 10px; }
.category-nav .title { padding: 15px; background: #28AD4A; text-align: left; color: white; font-size: 120%; margin-bottom: 2px; }
.category-nav a { padding: 15px; display: block; margin-bottom: 2px; background: #f3f3f3; color: #666; }
.category-nav a.active { background: #aeafb2; color: white; }
.category-nav .badge { padding: 5px; margin-top: 0px; background: #28AD4A; }


.cat-block .content { position: absolute; bottom: 15px; left: 15px; right: 15px; padding: 10px; color: #666;   }
.cat-block .counter { background: #28ad4a; color: white; position: absolute; right: 0px; top: 0px; padding: 10px; }
.cat-block h2 { margin-top: 5px; }

.cat-block .content { background: red; }
.cat-block a { color: #666; }

/* Play buttons */

.play { position: absolute; right: 5.2%; left: 77%; top:0px; transition: all 0.3s ease 0s; opacity: 1;  }
.play:hover { opacity: 1; }
.play img { width: 100%; height: auto; background:  }

.price-play { padding: 5px; text-align: center; font-weight: bold;  position: absolute; right: 15px; left: 77%; top:0px; transition: all 0.3s ease 0s; opacity: 1; background: black; color: white; }

.price-play .txt { font-size: 50%; color: white!important; margin: 5px 0px; }
.price-play .prices { font-size: 80%; }
.price-play:hover { opacity: 1; }
.price-play a { color: white; }


.video-block{  }
.txt-light { color: #9c9b9b; font-size: 90%; }


iframe {
    width: 100%;
    min-height: 275px;
}



.login-info a {margin: 0px; margin-top: 15px;}
#msg-alert	{background-color: #8a8a8a; color: #fff; padding: 5px 10px; font-size: 12px; display: inline-block; margin-top: 10px; }
#msg-alert:empty {display: none;}


/* Footer */

.footer{  padding: 8px 0; font-size:100%; padding-top: 30px; padding-bottom:30px; background: #f3f3f3!important; clear: both;}
.footer .title { text-align: left; font-size: 100%; margin-bottom: 5px; }
.footer .last { text-align: right; margin-right: 15px; }
.footer {  color: #666; font-size: 80%;  }

#footermenu ul { overflow: hidden; margin: 0px; padding: 0px; }
#footermenu li a { display: block; color: #666; font-size: 100%; padding: 5px 5px 5px 0px; text-decoration: none; }
#footermenu li.active { text-decoration: underline!important; }
#footermenu .active { text-decoration: underline!important; }



/* ==|== media queries ====================================================== */

@media only screen and (max-width: 480px) {

	.height { min-height: 373px!important; }	
	
}	

@media only screen and (max-width: 640px) {

#logo { margin-top: 60px; }
#logo img { margin: 0px auto; }


.course-title { margin-right: 15px; }

.label-mob { margin-top: 20px; }

ul.social-media { margin-bottom: 0px; }
.usp { text-align: center;  }


.button-gray a { margin-right: 15px; margin-bottom: 15px; margin-top: 0px; }
a.btn-gray { margin-bottom: 15px; }

.navbar { border-radius: 0px; background: #f3f3f3; border: none; margin-top: 20px;  }
.navbar-collapse { padding: 0px;  }

ul.nav { width: 100%;  }
.nav li {  margin: 0; overflow: hidden; display: block!important; clear: both; }

.nav-justified > li > a { color: #666; padding: 15px; display: block!important; clear: both!important; transition: all 0.3s ease 0s; text-decoration: none; font-weight: bold; }
.nav-justified li a:hover { background: #333; color: white; }
.nav-justified li.active a { background: #28ad4a; color: white; }


.nav li a { display: block; clear: both;  }

ul.nav-justified {  width: 100%; }

.login { position: relative; top: inherit; }

.category-nav { padding: 0px; }
.category-nav a { overflow: hidden; }
.badge { float: right; }

.small-block {  }

.height { min-height: 400px!important; }


}


@media only screen and (max-width: 768px) {

 body {  }
 .carousel-caption { bottom:5%; left:5%!important; right:5%; top:5%; }
 .carousel-caption h1 { font-size: 110%; margin: 0px; }


.course-txt { padding: 0px; }
.course-txt .price { margin-right: 0px; margin-bottom: 15px; }

#logo { margin-top: 60px; }
#logo img { margin: 0px auto; }

.npl { padding: 0px; }
.npr { padding: 0px; }

.login { position: relative; top: inherit; }

.height { min-height: 450px!important; }

}

@media only screen and (max-width: 1024px) {

.login a { margin-right: 10px; }
.login a:hover { text-decoration: underline; }

.course-txt { padding: 0px; }
.course-txt .price { margin-right: 0px; margin-bottom: 15px; }

#footermenu { margin-bottom: 15px; font-size: 15px; }
.footer .title { font-size: 20px; text-align: left!important; }

a.btn-gray { margin-bottom: 15px; }


.npl { padding: 0px; }
.npr { padding: 0px; }

.label-mob { margin-top: 20px; }

.login  { position: relative; top: inherit; margin-bottom: 15px; }

#logo { margin-top: 50px;  }

}

@media only screen and (min-width: 1025px) {
	
	.info { clear: both;  }
	
	.course-txt { padding: 0px; }
	.course-txt .price { margin-bottom: 20px; }
	
	h1.green { clear: both; }
	
	.breadcrumb { clear: both; }
	
	
}


@media only screen and (max-width: 1179px) {

body { font-size: 100%; font-size: 13px; }

.carousel-caption { bottom:10%; left:20%; right:5%; top:10%; }

.height { min-height: 343px; }

 .carousel-caption { bottom:5%; left:5%!important; right:5%; top:5%; }
 .carousel-caption h1 { font-size: 150%; margin: 0px; }



}

@media only screen and (min-width: 1179px) {

	.container { max-width: 1280px; }

}