.work {
	margin: 40px auto;
	max-width: 1360px;
    width: 80%;
}

.work .filter-more {
    font-size: 15px;
    text-align: center;
    margin: 0px auto;
    
    line-height: 1.6em;
    color: var(--Font150);
}

.work .show-more-filter {
    text-align: center;
}

.work .show-more-filter a {
    text-decoration: none;
    font-size: 14px;
    color: var(--Font150);
    cursor: pointer;
}

.work .show-more-filter a:hover {
    color: var(--FontHover);
}


/****************************************
    Tags above work blocks
*****************************************/
.workTags {
    text-align: center;
    padding: 0;
}

.workTags .selectButton {
	display: inline-block;
    padding: 0px 10px 10px;
    font-size: 15px;
}

.workTags .selectButton .tag {
    color: var(--Font100);
}

.workTags .selectButton:hover .tag {
    color: var(--FontHover);
}

.workTags .selectButton .tag.active {
	color: var(--FontSelected);
}

.workTags .selectButton .tagCount {
    color: var(--Font50);

    vertical-align: super;
	font-size: smaller;
	padding: 0px 5px;
}

/****************************************
    Work blocks
*****************************************/
.workBlocks {
    padding: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: auto;
}

@media all and (max-width: 1750px) {
	.workBlocks {
		max-width: 1020px;
	}
}
@media all and (max-width: 1325px) {
	.workBlocks {
		max-width: 680px;
	}
}
@media all and (max-width: 900px) {
	.workBlocks {
		max-width: 340px;
	}
}

.workBlocks .workBlock-item {
	max-width: 350px;
	max-height: width;
	opacity: 1;
}

.workBlocks .workBlock-item.ng-leave.ng-leave-active {
	max-width: 0px;
	max-height: 0px;
	opacity: 0;
}

.workBlocks .workBlock-item.ng-enter {
    -webkit-transition:0.5s ease-in-out all;
    -moz-transition:0.5s ease-in-out all;
    -o-transition:0.5s ease-in-out all;
    transition:0.5s ease-in-out all;
}

.workBlocks .workBlock-item.ng-leave {
    -webkit-transition:0.5s ease-in-out all;
    -moz-transition:0.5s ease-in-out all;
    -o-transition:0.5s ease-in-out all;
    transition:0.5s ease-in-out all;
}

/**************************
  Thumbnail, name, hover
***************************/
.workBlock-content {
    max-width: 300px;
	max-height: 270px;
	text-align: center;
    margin: 20px;
    position: relative;
}

.workBlock-content .thumbnail {
    max-height: 270px;
    max-width: 300px;
    width: 100%;
}

.workBlock-content .work-info {
    /*Kleur onder foto's van werk*/
    background-color: var(--Vakjes);
    opacity: 1;
    
	width: 100%;
    height: 33%;
    position: absolute;
    bottom: 0;
}
.workBlock-content .work-info.ng-hide {
    opacity: 0;
}
.workBlock-content .work-info.ng-hide-add {
    -webkit-transition:0.1s linear all;
    -moz-transition:0.1s linear all;
    -o-transition:0.1s linear all;
    transition:0.1s linear all;
}
.workBlock-content .work-info.ng-hide-remove {
    -webkit-transition:0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition:0.3s linear all;
    transition:0.3s linear all;
}

.workBlock-content .work-name {
    color: var(--Font150);

    white-space: pre-line;
    line-height: 1.6em;
    font-size: 14px;

    padding-top: 2px;
}

.workBlock-content .work-tags {
    color: var(--Font100);
    line-height: 1.6em;
    font-size: 10px;
}

.workBlock-content .work-hover {
    background-color: rgba(55, 147, 231, 0.6);
    opacity: 1;

    width: 100%;
	height: 100%;
    position: absolute;
    bottom: 0px;

    cursor: pointer;
}
.workBlock-content .work-hover.ng-hide {
	opacity: 0;
}
.workBlock-content .work-hover.ng-hide-add {
    -webkit-transition:0.3s linear all;
    -moz-transition:0.3s linear all;
    -o-transition:0.3s linear all;
    transition:0.3s linear all;
}
.workBlock-content .work-hover.ng-hide-remove {
    -webkit-transition:0.1s linear all;
    -moz-transition:0.1s linear all;
    -o-transition:0.1s linear all;
    transition:0.1s linear all;
}

.workBlock-content .work-hover .work-date {
    color: var(--Font255);
    padding-top: 2%;
}

.workBlock-content .work-hover .work-more {
    color: var(--Font255);
    padding-top: 20%;
	font-size: 40px;
}

.workBlock-content .work-hover .work-name {
    /*
    padding-top: 11%;
    */
    
    width: 100%;
    height: 33%;
    position: absolute;
    bottom: 0;

    color: var(--Font255);

    white-space: pre-line;
    line-height: 1.6em;
    font-size: 14px;

    
}

.workBlock-content .work-hover .work-tags {
    color: var(--Font150);

}

/**************************
  Work modal with details
***************************/
.work-modal {
    /*achtergrond als work groot staat*/
    background-color: var(--Achtergrond);
    width: 100%;
    height: calc(100% - 120px);
    position: relative;
    top: 100px;
}
.small-work-modal {
    background-color: var(--Achtergrond);
    width: 100%;

    display: none;
    position: relative;
    top: 100px;
}
@media all and (max-width: 1000px) {
	.work-modal {
        display: none;
    }
    .small-work-modal {
        display: block;
    }
}

.work-modal .work-header {
    height: 50px;
    width: 95%;
    margin: auto auto 15px auto;
}

.close {
    font: 14px/100% arial, sans-serif;
    position: fixed;
    top: 105px;
    right: 2.5%;
	font-size: 45px;
	color: var(--Font255);
    cursor: pointer;
    z-index: 15;
}
.close:hover {
    color: var(--Font150);
}
.close:after {
    content: '×';
}

.work-modal .modal-content {
    /*border-style: solid;
    border-width: medium;
    border-color: var(--Font50);*/

    background-color: var(--Achtergrond);

    display: grid;
    grid-template-columns: 35% auto;
    grid-template-rows: 100%;
	grid-gap: 25px;

    width: 95%;
    margin: auto;
    height: 100%;
}

/* Details and photo list */
.modal-left-pane {
    /*achtergrond van work vakje*/

	height: 100%;
	width: 100%;
    overflow-y: auto;
}

.modal-left-pane .work-details {
    padding: 15px 30px;
}

.modal-left-pane .work-details .work-name {
    color: var(--Font100);
    line-height: 1.6em;
    margin: 0;
    font-size: 20px;
    white-space: pre-line;
}

.modal-left-pane .work-details .work-description {
    color: var(--Font150);
    line-height: 1.6em;
    margin: 0px;
    font-size: 15px;
	text-align: left;
	white-space: pre-line;
	margin-bottom: 15px;
}

.modal-left-pane .work-details .work-credits {
    color: var(--Font100);
    line-height: 1.6em;
    margin: 0px;
    font-size: 14px;
	text-align: left;
	white-space: pre-line;
	margin-bottom: 15px;
}

.modal-left-pane .work-details a {
    color: inherit;
    
}

.modal-left-pane .work-details a:hover {
    color: var(--FontHover);
}

.modal-left-pane .work-details .more-info {
    text-decoration: none;
    font-size: 14px;
    color: var(--Font100);
    cursor: pointer;
}

.modal-left-pane .work-details .more-info:hover {
    color: var(--FontHover);
}

.modal-left-pane .image-list {
    padding: 15px 30px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media all and (max-width: 1200px) {
	.modal-left-pane .image-list {
		grid-template-columns: 1fr 1fr;
    }
}
@media all and (max-width: 1000px) {
	.modal-left-pane .image-list {
		grid-template-columns: 1fr;
    }
}

.modal-left-pane .image-list .image-list-item {
    margin: 5px;
	position: relative;
	padding-top: 100%; /* 1:1 Aspect Ratio */
}

.modal-left-pane .image-list .small-video-list-item {
    margin: 5px 0px;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.modal-left-pane .image-list .small-image-list-item {
    margin: 5px 0px;
    position: relative;
}

.modal-left-pane .image-list .image-list-item .work-image,
.modal-left-pane .image-list .image-list-item .work-video {
    position:  absolute;
	top: 0;
	width: 100%;
	height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.modal-left-pane .image-list .small-image-list-item .work-image {
    width: 100%;
    height: 100%;
}

.modal-left-pane .image-list .small-video-list-item .small-video {
    position:  absolute;
	top: 0;
    width: 100%;
	height: 100%;
}

.modal-left-pane .image-list .small-image-list-item .copyright {
    width: 100%;
    position: absolute;
    bottom: 5px;
    text-align: center;
    margin: 0;
    line-height: 1.6em;
    color: var(--Font50);
    font-size: 12px;
}

/* video play pause button */
.fa-play, .fa-pause {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    font-size: 50px;
    color: var(--Font255);
    cursor: pointer;
}

.fa-play:hover, .fa-pause:hover {
    color: var(--FontHover);
}

/* Large image */
.modal-right-pane {
    max-width: 100%;
	height: 100%;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.modal-right-pane .selected-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: scale-down;
    margin-right: 25px;
    height: calc(100% - 20px);
}

.modal-right-pane .selected-video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin-right: 25px;
}

.modal-right-pane .copyright {
    text-align: center;
    margin: 0;
    line-height: 1.6em;
    color: var(--Font50);
    font-size: 12px;
}