@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto:100,300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400&display=swap');

body {
	font-family: 'Roboto', sans-serif;
	color: #2e433c;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #2e433c
}

* {
	transition: all 0.3s;
}

a:hover {
	transition: all 0.3s;
}

/*algemeen*/
.reverse {
	flex-direction: row-reverse;
}

.basecolor1 {
	background-color: #5388a6;
}

.basecolor2 {
	background-color: #e7dfcb;
}

/*header met logo*/


/*navigatiebalk*/
nav {
	background-color: #5388a6;
	height: 6.5vh;
}

nav ul {
	display: flex;
}


nav ul li a {
	color: white;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

nav ul li a:hover {
	color: #5388a6;
	background-color: white;
}

.social {
	display: flex;
	justify-content: flex-end;
	flex: 0 0 30%;
}

.social a {
	font-size: 1.9rem;
	color: #5388a6;
}

/*banners + splash*/
.bannerf {
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	height: 39vh;
	box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.3);
	transition: all 0.5s;
}

#zzsplash {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	line-height: 2.8rem;
	text-transform: uppercase;
	font-size: 3rem;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 100;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.12);
	height: 66vh !important;
	overflow: hidden;
	background-image: url(../images/banner2.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	background-size: contain;
}

#zzsplash2022{
	background-image:url(../images2022/banner.jpg);
	background-size:contain;
	background-position:center center;
	height:35vh;
	margin-top:4vh !important;
	padding:2vh;
	background-repeat:no-repeat;
	background-color: #d7723d;
}

.centerme {
	text-align: center;
}

.centerme p {
	font-size: 1.1rem;
	line-height: 1.3rem;
	font-weight: 300;
	padding-bottom: 39px;
}

#zzsplash img {
	max-width: 80%;
}


.slogandate {
	display: flex;
	height: 30vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.slogandate h1 {
	color: #5388a6;
	font-size: 3rem;
}

.slogandate h2 {
	color: rgb(243, 157, 150);
	font-size: 2.5rem;
}

.slogandate h3 {
	color: #5388a6;
	padding-top: 13px;
}


.ontop {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: inset 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
}

#homesplash h3,
.bannerf h3 {
	text-align: center;
	line-height: 2.6rem;
	text-transform: uppercase;
	font-size: 3rem;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 100;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.12);
}

/*banners*/
#troeven {
	height: 39vh;
	background-image: url(../images/troeven.jpg);
}

#tips {
	height: 39vh;
	background-image: url(../images/onlinetip.jpg);
}

#offline {
	height: 39vh;
	background-image: url(../images/classroom.jpg);
}


.bannerf:hover {
	filter: grayscale(45%) sepia(10%) brightness(96%) hue-rotate(13deg) saturate(190%) contrast(128%);
	-webkit-filter: grayscale(45%) sepia(10%) brightness(96%) hue-rotate(13deg) saturate(190%) contrast(128%);
	-moz-filter: grayscale(45%) sepia(10%) brightness(96%) hue-rotate(13deg) saturate(190%) contrast(128%);
	transition: all 0.5s;
}

.btnMe {
	font-size: 1rem;
	background-color: #5388a6;
	color: white;
	padding-left: 26px;
	padding-right: 26px;
	border-radius: 6.5px;
	text-transform: lowercase;
	margin-top: 26px;
}

.fullvid {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
}

/*info panels*/
.infopanel {
	background-color: rgba(51, 123, 129, 1);
	color: white !important;
	text-align: center;
	padding: 26px;
	border-radius: 13px;
	margin-bottom: 26px;
}

.infopanel * {
	color: white;
	font-size: 1.3rem;
	line-height: 1.5rem;
	font-weight: 300;
}

/*suggestions*/

/*suggestions*/
.suggestions,
.lecturers {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.suggestions a,
.lecturers a {
	flex: 0 0 31%;
	border: 1px solid #5388a6;
	background-color: white;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	margin-bottom: 26px;
}


.suggestions a div,
.lecturers a div {
	padding: 6.5px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.suggestions button,
.lecturers button {
	width: 40%;
	background-color: #5388a6;
	color: white;
}

.suggestions button i,
.lecturers button i {
	display: inline-block;
	margin-right: 6.5px;
}

.suggestions a h3,
.lecturers a h3 {
	color: #5388a6;
	font-size: 1rem;
	font-weight: 300;
}

.suggestions a img,
.lecturers a img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	object-position: center;
}

.suggestions a:hover,
.lecturers a:hover {
	transform: scale(1.05);
	transform: perspective(800px) rotateY(-6deg);
	transition: all 0.5s;
}

.suggestions a img:hover,
.lecturers a img:hover {
	filter: contrast(1);
	transition: all 0.5s;
}

main {
	margin-top: 39px;
}

main header {
	text-align: center;
	padding-bottom: 13px;
	margin-bottom: 13px;
}

main header h3 {
	font-weight: 400;
	color: #5388a6;
	font-size: 1.3rem;
}


/*zoekbalk*/
.frmSearch {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}

.btnSearch {
	background-color: #5388a6 !important;
	border: 0px;
	color: white;
	width: 13%;
}

.btnRed {
	background-color: #5388a6 !important;
	border-radius: 6.5px;
	color: white;
	width: 26%;
	padding: 11px 16px;
	margin-bottom: 26px;
	text-align: center;
	display: flex;
	justify-content: center;
}

.btnRed i {
	display: inline-block;
	margin-right: 6.5px;
}

.btnRed:hover {
	transform: scale(1.05);
	transition: all 0.5s;
}


.q {
	background-color: white !important;
	border: 1px solid #5388a6 !important;
	width: 80%;
}

.searchpages {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.searchpages a {
	flex: 0 0 13%;
	padding: 13px;
	cursor: pointer;
	transform: scale(1.3);
	transition: all 0.3s;
}

.searchpages a:hover {
	transform: scale(1.2);
	transition: all 0.4s;
}

.searchpages figure {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 70%;
	margin: auto;
	text-align: center;
}

.searchpages figcaption {
	color: #5388a6;
	font-size: 0.8rem;
	font-weight: 300;
}

/*Cursusinfo - pagina "lees"*/
.listitem {
	display: flex;
	justify-content: space-between;
}

.listitem article {
	flex: 0 0 46%;
}

/*modals*/
.modaltip {
	width: 40vw;
	left: 30vw;
}

/*infopages*/
.ecourse-info {
	margin-top: 52px;
	font-family: Roboto, sans-serif !important;
	font-style: normal;
	font-variant: normal;
	letter-spacing: 0px;
	word-spacing: 0px;
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.9rem;
}

.ecourse-info section {
	overflow: auto;
	display: flex;
	justify-content: space-between;
	padding-bottom: 13px;
	border-bottom: 1px dotted #5388a6;
	margin-bottom: 13px;
}


.ecourse-info figure {
	flex: 0 0 19%;
}

.ecourse-info article {
	flex: 0 0 76%;
}

.ecourse-info figcaption {
	font-size: 0.8rem;
	text-align: center;
}

.ecourse-info img {
	width: 100%;
}

.ecourse-info h3,
.shoppingcart h3,
.myhistory h3 {
	margin-bottom: 13px;
	color: #5388a6;
	font-weight: 500;
	font-size: 2em;
}

.ecourse-info h3 i,
.shoppingcart h3 i,
.myhistory h3 i {
	padding-right: 13px;
}

.firstchapter {
	border: 1px solid #ccc;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	background-color: white;
	padding: 46px;
	font-size: 1.1rem;
	transform: scale(0.3);
	transform-origin: 0% 0%;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}

.firstchapter p {
	padding-bottom: 13px;
}

.firstchapter iframe {
	width: 100%;
	min-height: 480px;
	border: 0px;
}

.firstchapter h2 {
	font-size: 1.6rem;
	padding-bottom: 39px;
}

.firstchapter h3 {
	font-size: 1.4rem;
	padding-bottom: 39px;
}

.firstchapter ul,
.firstchapter ol {
	padding-bottom: 26px;
}

.firstchapter:hover {
	transform: scale(1);
	transition: all 0.5s;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}

.courselist li {
	border: 1px solid #ccc;
	padding: 5px;
	padding-left: 13px;
	margin-bottom: 3px;
	border-radius: 6.5px;
	cursor: pointer;
	transform-origin: left;
	background-color: white;
	display: flex;
}

.courselist li a {
	flex: 0 0 100%;
}


.courselist li:hover {
	transform: scale(1.03);
	transition: all 0.3s;
	background-color: #e7dfcb;
	cursor: pointer;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}

.performer {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 13px;
	transform-origin: left;
	width: 33%;
	display: flex;
	align-items: center;
}

/*anibg*/
.anibg {
	background-color: black;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-animation: BGA 10s ease infinite;
	animation: BGA 30s ease infinite;
	background-position: 0 0;
	transition: all 1s;
}

@-webkit-keyframes BGA {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 80%;
	}
}

@-webkit-keyframes BGSCALE {
	from {
		background-size: 100%;
	}

	to {
		background-position: 120%;
	}

}

.expander {
	position: absolute;
	bottom: 39px;
	left: 39px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.8);
	color: black;
	border-radius: 50%;
	cursor: pointer;
}

.bigpicture {
	height: 85vh !important;
	transition: all 1s;
}

footer {
	justify-content: center !important;
	margin-top: 39px;
	align-items: center;
	text-align: center;
}

footer img {
	max-width: 90%;
}

footer h3 {
	font-size: 1.4rem;
}

footer p {
	margin-bottom: 26px;
	font-weight: 600;
}

footer a {
	font-size: 0.9rem;
	padding: 3.5px;
}


/*prijzen*/
.socialprices {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.prices {
	flex: 0 0 50%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(51, 123, 129, 1);
	border-radius: 13px;
	padding: 13px;
}

.count {
	width: 13%;
	text-align: right;
}

.btnBuy {
	background-color: white;
	border: 1px solid rgba(51, 123, 129, 0.2);
	color: rgba(51, 123, 129, 1);
	margin-left: 4px;
	cursor: pointer;
	transform-origin: right;
	transition: all 0.3s;
}

.btnBuy:hover {
	transform: scale(1.1);
	transform-origin: right;
	transition: all 0.3s;
}

#mylist {
	position: relative;
}

.shopcount {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: none;
	color: white;
	justify-content: center;
	align-items: center;
	top: 17px;
	left: 60%;
	background-color: #5388a6;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}


#shoppingcart table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	text-align: left;
	padding: 8px;
	font-size: 1.1rem;
}


tr:nth-child(even) {
	background-color: #e7dfcb;
}

.removeItem {
	text-align: right;
	cursor: pointer;
}

.removeItem i {
	transform-origin: right;
}

.removeItem i:hover {
	transform: scale(1.6);
	transition: all 0.2s;
}


.logofirst {
	background-image: url(../images/tllogo.png);
	background-size: 35%;
	background-position: center 60%;
	background-repeat: no-repeat;
}

.logofirst:hover {
	background-color: black;
}

.directions {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 350px;
	width: 90vw;
	margin: auto;
}

.directions h3 {
	font-size: 1.9rem;
}

.directions a {
	color: rgb(243, 157, 150);
	font-size: 1.3rem;
}

.directions article {
	border-top: 2px solid #2e433c;
	padding-top: 39px;
	padding-bottom: 39px;
	width: 100%;
}

.newsitems article {
	border-bottom: 1px dotted #2e433c;
	padding-bottom: 26px;
	margin-bottom: 26px;
}

.newsitems p {
	font-size: 1.1rem;
	font-weight: 200;
	line-height: 1.5rem;
	padding-bottom: 13px;
}

.newsitems h1 {
	color: #2e433c;
	font-size: 2.4rem;
	padding-bottom: 13px;
}

.newsitems h3 {
	padding-top: 26px;
	color: rgb(243, 157, 150);
	font-size: 1.8rem;
	padding-bottom: 13px;
}

.datebanner {
	height: 130px;
	background-color: #2b84c6;
	border-bottom: 13px solid #f8b588;
	margin-bottom: 39px;
}

.datebanner .smallcontainer {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.halfu{
	flex: 0 0 40%;
}

.datebanner .halfu h3 {
	color: white;
	height: 100%;
	font-size: 1.3rem;
	font-weight: 600;
	text-align: center;
}

.mobileshow{
    display:none;
}


@media (min-width:1500px) {
	#zzsplash img:first-child{
		margin-top:70px;
	}
	#second{
		margin-bottom:100px;
	}
}


/*mobile*/
@media (max-width:900px) {
	.logo {
		background-size: 50%;
		transition: all 1s;
	}

	#zzsplash {
		height: 30vh !important;
	}

	
	
	.socialprices {
		flex-direction: column;
	}

	.prices {
		flex: 0 0 100%;
	}

	.btnRed {
		width: 100%;
	}

	.modaltip {
		width: 70vw;
		left: 15vw;
	}

	.searchpages a {
		flex: 0 0 40%;
		transform: scale(1);
	}

	.ecourse-info section {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.suggestions,
	.lecturers,
	.frmSearch {
		flex-direction: column;
	}

	.ecourse-info figure {
		flex: 0 0 100%;
	}
	
	.datebanner{
		height:300px !important;
	}
	
	.datebanner .smallcontainer{
		height:300px;
		display:block;
	}
	
	.datebanner .halfu{
		height:140px;
		display:flex !important;
		align-items: center !important;
		justify-content: center !important;;
	}
	.datebanner .halfu h3{
		display:flex;
		height:100%;
		align-items:center;
	}
	footer{
		height:230px !important; 
	}
}

 
@media (max-width:900px) {
    .row{
        display:block;
    }
    #zzsplash, #zzsplash2 {
        background-position: center;
        margin-top:4vh;
        height:20vh !important;
    }
    
    .smallcontainer{
        width:97vw;
    }
    #br{
        padding:0 !important;
    }
    #br article{
        margin:0 !important;
        margin-bottom:39px !important;
        margin-top:39px !important;
    }
    .cbar{
        padding:0 !important;
    }
    
    .mobileshow{
        display:inline-block;
    }
    .mobilehide{
        display:none;
    }
    
    nav a, #steps li{
        transform:scale(0.8);
        margin:2px;
    }
    .CrowlBannerSlide figcaption{
        padding-left:13px !important;
    }
    
    .b2b article{
        padding-left:0px !important;
        padding-right:0px !important;
    }
    #steps{
        padding:2px !important;
    }
    nav{
        justify-content: center !important;
        padding-left:3px;
        padding-right:3px;
    }
    
    .usppanel{
        margin-left:0 !important;
        margin-right:0 !important;
        width:80% !important;
    }
    .shoppingcart table td, .shoppingcart table th{
        font-size:90%;
    }
    .shoppingcart table th{
        display:none;
    }
    .shoppingcart table td input{
        width:80px !important;
    }
    
    .shoppingcart table{
        width:100%;
    }
    
    nav a {
        padding:3px;
        height: 100%;
        flex: 0 0 9% !important;
        font-size:0.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
       
    }
    
    
    .accordeon article h2{
        font-size:98%;
    }
    
    .quests a section{
        height:50%;
    }
    
    .quests a section h3{
        font-size:99%;
    }
    
    .cbar p{
        font-size:0.7rem;
        font-weight:200;
        padding:6px;
    }
    .cbar i{
        display:none;
    }
    
    .ecourse-info h3{
        font-size:94%;
    }
    
    .socialprices, .prices{
        flex-direction: column;
    }
    .prices input{
        width: 100%;
    }
    
    
    .cbar h1{
        font-size:90%;
        padding:3px;
        font-weight:200;
    }
    #aanbod{
        margin-top:6vh;
    }
    .mobhide{
          display:none;
    }
    nav a, #steps li{
        transform:scale(0.8);
        margin:2px;
    }
      
    #steps{
        display:none !important;
        padding:2px !important;
    }
	
}



@media (max-width:600px) {
	* {
		transition: all 0.5s;
	}

	.modaltip {
		width: 90vw;
		left: 2vw;
	}

	nav ul {
		display: none !important;
	}



	.suggestions button,
	.lecturers button {
		width: 70%;
	}

	.suggestions a,
	.lecturers a {
		height: 350px;
		overflow: auto;
	}

	.btnSearch span {
		display: none;
	}
}