/* Extra CSS */


#cklogo {
    height: inherit;
    width: 75%;
    margin: 20px 0;
}

.showreelbutton {
    vertical-align: middle;
    margin-left: 15px;
}

h3#showreelbtntxt {
    margin-top: 0.3em;
}

h2#showreelbtntxtmobile {
    text-align: center;
    vertical-align: middle;
}

#showreelvideo {
    height: 100%;
    width: 100%;
}

#begin {
    box-shadow: 0,0,0,0;
}

#productionsimg {
    
    width: 100%;
    height: inherit;
}

#ck-logo-footer {
    width: 100%;
    height: inherit;
}

/* Image hover text */

.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 1em;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 0.5em;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}

/* Video Images Anim */

.video-wrapper {
    display: block;
    position: relative;
    border-bottom: 0;
    overflow: hidden;
}

.video-wrapper img {
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

.video-wrapper img:after {
    -moz-transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.video-wrapper img:hover {
    -moz-transform: scale(1.050);
    -webkit-transform: scale(1.050);
    -ms-transform: scale(1.050);
    transform: scale(1.050);
}

.video-wrapper img:hover:after {
    opacity: 0;
}

/* Instagram feed */

a#instagramicon {
    text-align: left;
    line-height: normal;
    border-bottom-color: transparent;
}

#instagrampanellarge, #instagrampanelsmall {
    overflow: hidden;
}

#instagramfeed {
    position: relative;
    height: inherit;
    width: 100%;
    display: flex;
    flex-flow: row wrap; 
    overflow: hidden;
}

  .instapost {
    position: relative;
    width: 22vw;
    height: 100%;
    background: #000;
    display: block;
    overflow: hidden;
    border-bottom-color: transparent;
}

  .instapostsmall {
    position: relative;
    width: 33.33%;
    height: 100%;
    background: #000;
    display: inline-block;
    overflow: hidden;
    border-bottom-color: transparent;
}

    .instaimage {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-position: center;
    background-size: cover;
    transition: all .15s ease-in-out;
}
    .instagramlist {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50px;
    background: rgba(255,255,255,0.8);
    display: flex;
    justify-content: space-around;
    transform: translateY(-100%);
    transition: all .15s ease-in-out;
    color: #FFF;
}
    .instagramlist li {
    text-align: center;
    line-height: 50px;
    list-style: none;
}

    .instaimage:hover {
    opacity: .5;
    transform: scale(1.05);
}

    .instapost ul:hover {
    transform: translateX(0);
}

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

    #instagrampanelsmall{
        display: block;
    }
    
    #instagrampanellarge{
        display: none;
    }
}

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

    #instagrampanelsmall{
        display: none;
    }
    
    #instagrampanellarge{
        display: block;
    }
}


/* Wrapper Zonder Border */

	#wrapperNoBorder {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-moz-transition: opacity 1s ease-out, -moz-transform 0.75s ease-out;
		-webkit-transition: opacity 1s ease-out, -webkit-transform 0.75s ease-out;
		-ms-transition: opacity 1s ease-out, -ms-transform 0.75s ease-out;
		transition: opacity 1s ease-out, transform 0.75s ease-out;
		-moz-transition-delay: 0.25s;
		-webkit-transition-delay: 0.25s;
		-ms-transition-delay: 0.25s;
		transition-delay: 0.25s;
		cursor: default;
		position: relative;
		height: 32rem;
        box-shadow: none;
	}

		#wrapperNoBorder > .scrollZone {
			position: fixed;
			width: 6rem;
			height: inherit;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
			z-index: 15000;
		}

			#wrapperNoBorder > .scrollZone.left {
				left: 0;
			}

			#wrapperNoBorder > .scrollZone.right {
				right: 0;
			}

		#wrapperNoBorder > .copyright {
			position: absolute;
			bottom: -3rem;
			right: 0;
			font-size: 0.8rem;
			color: rgba(46, 43, 55, 0.375);
			margin-bottom: 0;
            box-shadow: none;
		}

			#wrapperNoBorder > .copyright a:hover {
				color: inherit;
			}

		#wrapperNoBorder.is-dragging {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
		}

			#wrapperNoBorder.is-dragging * {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			#wrapperNoBorder.is-dragging *:not(a, .image) {
				cursor: -moz-grab;
				cursor: -webkit-grab;
				cursor: -ms-grab;
				cursor: grab;
			}

		#wrapperNoBorder.is-dragged * {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
		}

		body.is-loading #wrapperNoBorder {
			-moz-transform: translateX(2rem);
			-webkit-transform: translateX(2rem);
			-ms-transform: translateX(2rem);
			transform: translateX(2rem);
			opacity: 0;
		}

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

		#wrapperNoBorder {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
			margin: 0 0 5rem 0;
            box-shadow: none;
		}

			#wrapperNoBorder > .scrollZone {
				display: none;
			}

			#wrapperNoBorder > .copyright {
				display: block;
				width: 100%;
				text-align: center;
			}

			body.is-loading #wrapperNoBorder {
				-moz-transform: translateY(1rem);
				-webkit-transform: translateY(1rem);
				-ms-transform: translateY(1rem);
				transform: translateY(1rem);
			}

	}

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

		#wrapperNoBorder {
			box-shadow: none;
		}

			body.is-loading #wrapperNoBorder {
				-moz-transform: none;
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}

	}

/* Mobile Elements */
@media screen and (max-width: 736px) and (min-width: 320px) {
     .mobilenav {
        display: block;
    }
}

@media screen and (min-width: 737px) {
     .mobilenav {
        display: none;
    }
}

 .mobilenav {
     
     background-color: aqua;
     font-size: 2em;
    z-index: 2000;
  }

  .mobilenav a{
    font-size: 0.8em;
    display: block;
    margin: 0 0.8em;
    color: white;
  }

@media screen and (max-width: 736px) {
    .mobile-yes {
        display: inherit;
    }
    .mobile-no {
        display: none;
    }
}

@media screen and (min-width: 736px) {
    .mobile-yes {
        display: none;
    }
    .mobile-no {
        display: inherit;
    }
}

/* Scherm overgangen fixes */
@media screen and (min-width: 1680px){
    #introfixLarge, #introfixMedium, #introfixiPad {
        display: none;
    }
    #introfixOrginal {
        display: inherit;
    }
}

@media screen and (max-width: 1680px) and (min-width: 1281px) {
    #introfixOrginal, #introfixMedium, #introfixiPad {
        display: none;
    }
    #introfixLarge {
        display: block;
    }
}

@media screen and (max-width: 1280px) and (min-width: 737px) {
    #introfixOrginal, #introfixLarge, #introfixiPad {
        display: none;
    }
    #introfixMedium {
        display: block;
    }
}

@media screen and (max-width: 770px) and (min-width: 481px) {
    #introfixOrginal, #introfixLarge, #introfixMedium {
        display: none;
    }
    #introfixiPad {
        display: block;
    }
}


/* Popups Portfolio */

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

    #portfoliosmall, #portfoliomedium{
        display: none;
    }
    
    #portfoliolarge{
        display: block;
    }
}

@media screen and (max-width: 736px) and (min-width: 481px){
    
    #portfoliosmall, #portfoliolarge{
        display: none;
    }
    
    #portfoliomedium{
        display: block;
    }
}

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

    #portfoliomedium, #portfoliolarge{
        display: none;
    }
    
    #portfoliosmall{
        display: block;
    }
}

/* Popups Corona */

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

    #coronasmall, #coronamedium{
        display: none;
    }
    
    #coronalarge{
        display: block;
    }
}

@media screen and (max-width: 736px) and (min-width: 481px){
    
    #coronasmall, #coronalarge{
        display: none;
    }
    
    #coronamedium{
        display: block;
    }
}

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

    #coronamedium, #coronalarge{
        display: none;
    }
    
    #coronasmall{
        display: block;
    }
}


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

    html {
        font-size: 15pt;
        font-size: 1.6vmax;
    }
    #introtxt {
        text-align: center;
        
    }
    h2 {
        text-align: left;
    }
    
    h2 #showreelbtntxtmobile {
        text-align: center;
    }
    
    #introtxt ul{
        margin: auto;
        width: 50%;
    }
    #cklogo{
        margin: auto;
        width: 85%;
    }

    p {
        font-size: 1em; 
    }
}