@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: #acb392;
}

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

* {
	transition: all 0.3s;
}

a:hover {
	transition: all 0.3s;
}

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

.basecolor1 {
	background-color: #26251e;
}

.basecolor2 {
	background-color: #e7dfcb;
}

/*header met logo*/
.logo {
	height: 6.5vh;
	min-height: 60px;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20%;
}

/*navigatiebalk*/
nav {
	background-color: #26251e;
	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: #26251e;
	background-color: white;
}

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

.social a {
	font-size: 1.9rem;
	color: #26251e;
}

/*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;
}

#homesplash {
	position: relative;
	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/toast.jpg?v2);
	background-position: center center;
	background-size: cover;
}


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

.slogandate h1 {
	color: #26251e;
	font-size: 3rem;
}

.slogandate h2 {
	color: #b82515;
	font-size: 2.5rem;
}

.slogandate h3 {
	color: #26251e;
	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: #26251e;
	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 #26251e;
	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: #26251e;
	color: white;
}

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

.suggestions a h3,
.lecturers a h3 {
	color: #26251e;
	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: #26251e;
	font-size: 1.3rem;
}


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

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

.btnRed {
	background-color: #26251e !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 #26251e !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: #26251e;
	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 #26251e;
	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: #26251e;
	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;
	min-height: 280px;
	margin-top: 39px;
	align-items: center;
	background-color: #acb392;
	text-align: center;
	color: black !important;
}

footer * {
	color: black !important;
}

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: #26251e;
	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: #b82515;
	font-size: 1.3rem;
}

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

.newsitems article {
	border-bottom: 1px dotted #acb392;
	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: #acb392;
	font-size: 2.4rem;
	padding-bottom: 13px;
}

.newsitems h3 {
	padding-top: 26px;
	color: #b82515;
	font-size: 1.8rem;
	padding-bottom: 13px;
}

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

	nav ul,
	nav {
		height: 30vh;
	}

	nav ul {
		flex-direction: column;
	}

	nav ul li {
		flex: 0 0 13%;
	}

	nav ul li a {
		color: white !important;
		width: 100% !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%;
	}
}

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



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




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

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

	.btnSearch span {
		display: none;
	}
}