bre@charset "utf-8";
/* CSS Document */

.image img{
	display:inline-block;
	height: 200px;
}
.image .thumb{
	display: block;
	position:relative;
	float:left;
	
	outline: 1px solid rgba(0,0,0,0.10);
	}

.section{
	background-color: #fff;
	position: relative;
	z-index: 2;
	padding: 10px;
	padding-left: 15%; padding-right: 15%;
	min-height:20px;
	/*word-break: break-all;*/
}
.section.youtube, .section.file, .section.image, .section.gdrive{
	min-height:50px;
	}
.section.youtube{
	padding:20px;
	text-align:center;
	
	}
.section.gdrive{
	padding:20px;
	text-align:center;
	}
.section.gdrive iframe{
	width:100%; height:500px;
	border:solid 1px rgba(0,0,0,0.20);
	}
.break{
	/*border-top: rgba(0,0,0,0.15) 5px solid;*/
	-webkit-box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
	height: 40px;
	margin:auto; padding:0;
	margin-bottom: 40px;
	
}
@media only screen and (max-width: 1024px) {
	.section{
		padding: 30px;
		}
	.break{
		/*border-top: rgba(0,0,0,0.15) 10px solid;*/
		-webkit-box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
		box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
		padding:0;
		background-color: transparent;
		}
	}
.section .stateedit, .section .statelive, .section .state{
	font-size: 34px;
	position:absolute;
	top:0px; left:10px;
	z-index:3;
	}
.noadmin .section .stateedit, .noadmin .section .statelive, .noadmin .section .state{
	display:none;
	}
.section .checkbox{
	font-size: 34px;
	position:absolute;
	top:5px; left:25px;
	z-index:3;
	opacity: 0;
	}
.section .checkbox:checked{
	opacity: 1;
}
.section:hover .checkbox{
	opacity: 1;
}
.noadmin .section .checkbox{
	display:none;
	}
.section:hover .add{
	opacity: 0.5;
	max-height: 999px;
	max-width: 999px;
}
.section.color1{
	background-color: #FFFFFF;
}
.section.color2{
	background-color: #EEEEEE;
}
.section.color3{
	background-color: #002843;
	color: #FFF;
}
.section.color4{
	background-color: #0070BB;
	color: #FFF;
}


.section.color4 a, .section.color3 a{
	color:#fff; text-decoration:underline;
	}

.section.color4 .icon a, .section.color3 .icon a{
	color: rgba(255,0,141,1.00);
	text-decoration: none;
}
.section .thumb img{
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	object-fit:cover;
	outline: solid 1px rgba(0,0,0,0.09);
	outline-offset: -1px;
}

.image{
	text-align: center;
	padding:0;
}
.file{
	text-align:center;
	}
.file .icon{
	position:relative;
	background-image: url(../images/icon-file.png); background-repeat: no-repeat;
	background-size: 100px; background-position: top center;
	display: inline-block;
	
}
.file .icon .file, .file .icon .link{
	display:block;
	padding-top: 40px;
	width: 120px; height: 80px;
	text-align:center;
	font-weight:bold;
	overflow:hidden;
	}
.file .icon .link{
	font-size: 2em;
	padding-top: 25px;
	width: 120px; height: 95px;
	}
.file .icon span{
	display: block;
	position:absolute;
	bottom:0; width:90%;
	right:0; left:0;
	margin-right:auto; margin-left:auto;
	background-color: rgba(0,0,0,0.30);
	border-radius: 20px; padding-top: 3px; padding-bottom:3px;
	color: #FFF;
	font-size: 10px; text-align: center;
	font-weight: bold;
}
.file .icon span:hover{
	transform: scale(1.2,1.2);
	}


.admin .section:hover{
	/*margin-top:4px; margin-bottom:4px;*/
	outline-offset: -5px;
	outline: 4px solid rgba(0,0,0,0.15);
}

.btn{
	display: block;
	background-size: cover;
	width: 30px; height: 30px;
	background-color:rgba(255,255,255,1.00);
	border-radius:15px;
	position: absolute;
	top: 0; right: 0;
	/*float:right;*/
	text-align: center;
	z-index: 3;
	opacity: 0;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.39);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.39);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.39);
	transition:all 0.2s ease-in-out;
	transform: scale(0.8,0.8);
}
.btn:hover{
	opacity: 1;
	transform: scale(1.2,1.2);
	transition:all 0.2s ease-in-out;
}

div:hover > .btn{
	opacity: 0.5;
}


div .btn:hover{
	opacity: 1;
	transform: scale(1,1);
}
.noadmin div .btn{
	display: none;
	}
.edit.btn{
	right: 35px; top: -15px;
	background-image: url(../images/icon-edit.png);
	}

.delete.btn{
	right:10px; top:-15px;
	background-image: url(../images/icon-delete.png);
	}
.section .delete.btn{
	right:5px;
	}
.file .icon .delete.btn{
	position:absolute;
	float:none;
	}
	
.image .thumb .delete.btn{
	position:absolute;
	float:none;
	top:10px; right:10px;
	transform: scale(0.7,0.7);
	}
.image .thumb .edit.btn{
	position:absolute;
	float:none;
	top:10px; right:35px;
	transform: scale(0.7,0.7);
}
	
@media only screen and (max-width: 500px) {
	.edit.btn{
		right:5px;
		}
	.edit.btn, .delete.btn{
		width: 60px; height: 60px;
		top:-30px;
		border-radius:60px;
		opacity:1;
		}
	.section .edit.btn{
		right:65px;
		}
	.image .thumb .delete.btn{
		top:30px; right:30px;
		}
	.youtube .media-wrapper .delete.btn{
		top:30px; right:30px;
		}
	
	}
#ownerinfo{
	background-color:rgba(41,49,51,1.00);
	padding:30px;
	color:#fff;
	padding-left: 50%; 
	-webkit-box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
	box-shadow: 0px 10px 14px -4px rgba(0,0,0,0.2);
	margin-bottom:20px;
	}
@media only screen and (max-width: 1024px) {
	#ownerinfo{
		padding-left:35%;
		}
	}
@media only screen and (max-width: 500px) {
	#ownerinfo{
		padding-left:30px;
		}
	}
#ownerpic{
	width:80px; height:80px;
	float:left;
	object-fit:cover;
	border: solid 1px rgba(255,255,255,0.46);
	border-radius:40px;
	z-index:2;
	margin-right:20px;
	}
#ownerinfo h3, #ownerinfo h5, #ownerinfo p{
	text-align:left;
	margin:0;
	}
#ownerinfo p{
	color:rgba(158,158,158,1.00);
	font-size:0.8em;
	}
/*------------------------------ MEDIA --------------------------------*/

/*hier kan je instellingen voor media wrapper doen*/
.media-wrapper {
	width: 100%;
	display: inline-block;
	position: relative;
	margin-top:20px;
	margin-bottom:20px;
	}
.media-wrapper:after {
	padding-top: 56.25%;
	/* 16:9 ratio */
	display: block;
	content: '';
	}
.media-container {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: transperent;
	color: white;
	}

/*------------------------------ ART --------------------------------*/

/*afbeelding*/
.media-wrapper img{
	height:100%;
	max-height:720px;
	display:block; margin:auto;
	
	}
/*video object*/
.media-wrapper video{
	width:100%;
	height:100%;
	}	
/*iframe voor youtube en sketchfab embed*/
.media-wrapper iframe{
	width:100%;
	height:100%;
	}
se