/*
 __            __  __                        __  __                        __
|  |          |  ||  |                      |  ||  |                      |  |
 |  |        |  |  |  |        ____        |  |  |  |        ____        |  |
  |  |      |  |    |  |      |    |      |  |    |  |      |    |      |  |
   |  |    |  |      |  |    |  ||  |    |  |      |  |    |  ||  |    |  |
    |  |  |  |        |  |  |  |  |  |  |  |        |  |  |  |  |  |  |  |
     |  ||  |          |  ||  |    |  ||  |          |  ||  |    |  ||  |
      |____|            |____|      |____|            |____|      |____|
	  
Copyright (C) 2020 Vanparijs Wim Websites www.vanparijswimwebsites.com
*/

/******************
 *                *
 * Basic elements *
 *                *
 ******************/

a {
    color: #000;
}

h1 {
    text-align: left;
}



/***************
 *             *
 * Bg & Header *
 *             *
 ***************/

#bg1 {
    width: 1750px;
    
    z-index: 2;
    top: -400px;
    right: -250px;
    transform: none;
}

#bg2 {
    width: 2253px;
    max-width: none;
    height: auto;

    left: -500px;
    bottom: -850px;
    z-index: 1;
    transform: none;
}

html:not(#single-screen) #bg2 {
    top: -400px;
    left: -400px;
}

#bg3 {
    width: 1500px;
    max-width: none;
    transform: rotate(75deg) scale(1);
    bottom: 100px;
    right: -550px;
}

#bg4 {
    width: 1250px;
    max-width: none;
    bottom: -25em;
    left: -10em;
}



/***********
 *         *
 * Sub Nav *
 *         *
 ***********/

#single-screen #page-content a {
    text-decoration: none;
    font-size: 1.3em;
}

#sub-nav {
	text-align: center;
	margin: 2em 1em;
    z-index: 50;
}

#sub-nav.horizontal {
	margin: 2em 1em 5em 1em;
}

#sub-nav:not(.horizontal) {
    position: relative;

    margin: 10em 1em 10em 1em;
}

#sub-nav a, 
#sub-nav .main-item .item-wrapper span {
    display: inline-block;
    text-decoration: none;
    font-size: 1.3em;
    max-width: 5.5em;
    hyphens: manual;
    vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

#sub-nav .item-wrapper *,
#sub-nav .sub-items span {
	background-color: transparent;
	transition: background-color 200ms;
}


#sub-nav .main-item:not(.active) .item-wrapper *:hover,
#sub-nav .sub-items a:not(.active) span:hover {
	background-color: #90D68D;
}

#sub-nav:not(.horizontal) .main-item {
	position: relative;
}

#sub-nav .main-item:not(:first-child) {
	margin-top: 4em;
}

#sub-nav .with-submenu + .main-item {
	margin-top: 0;
}

#sub-nav:not(.horizontal) .main-item:not(.with-submenu):not(:last-child):after {
	content: '';
	display: block;
	width: 0.15em;
	height: 3.5em;
    background-color: #000;

	position: absolute;
	top: 2.1em;
	left: calc(50% - 0.07em);
}

#sub-nav.horizontal .main-item {
	display: inline-block;
	margin-top: 0;
	padding: 0 0.5em;
}

#sub-nav.horizontal .main-item .item-wrapper {
	position: relative;
	z-index: 50;
}

#sub-nav.horizontal .main-item:not(:last-of-type) .item-wrapper {
	padding-right: 3.25em;
}

#sub-nav.horizontal .main-item:not(:last-of-type) .item-wrapper:after {
	content: '';
	display: block;
	width: 2.25em;
	height: 0.16em;
    background-color: #000;

	position: absolute;
	top: calc(55% - 0.07em);
	right: -0.05em;
}

#sub-nav .main-item.active .item-wrapper a, 
#sub-nav .main-item.active .item-wrapper span {
    display: inline-block;
    position: relative;
    z-index: 25;
    font-weight: bold;
	margin: 0 0.25em 0 1em;
}

#sub-nav .main-item.active .sub-items a.active {
	font-weight: bold;
}

#sub-nav .main-item.active .item-wrapper a::before, 
#sub-nav .main-item.active .item-wrapper span::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;

    top: -0.35em;
    left: -0.85em;
    width: 105%;
    height: 110%;
    padding: 0.2em 0.75em;

    background-image: url(/static/images/active_green.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#sub-nav.horizontal .main-item.with-submenu.active.submenu-open .item-wrapper::before,
#sub-nav.horizontal .main-item.with-submenu.submenu-open .item-wrapper::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -2.25em;
	left: calc(50% - 1em);

	width: 0.15em;
	height: 1.5em;
	background-color: #000;
}

#sub-nav.horizontal .main-item.with-submenu.active .item-wrapper::before {
	background-color: #90D68D;
}

#sub-nav.horizontal .main-item:last-child.with-submenu.submenu-open .item-wrapper::before {
	left: 50%;
}

#sub-nav.horizontal .main-item:last-child.with-submenu.active .item-wrapper::before {
	left: 50%;
}

#sub-nav.horizontal .main-item:not(:last-child).with-submenu.submenu-open .item-wrapper::before {
	left: calc(50% - 1.62em);
}

#sub-nav .sub-items {
	position: relative;
	left: 50%;
    padding: 0.5em 0.5em 0.5em;
    margin: 0.3em 0;
	height: 100%;
	border-left: solid #000 0;
	
	transition: border-left-color 300ms, transform 300ms;
}

#sub-nav.horizontal .main-item:not(.submenu-open) .sub-items {
	display: none;
}

#sub-nav.horizontal .main-item.submenu-open .sub-items {
	position: absolute;
	border-left: none;
	padding-top: 1.5em;
	left: 0;
	width: 100%;
	height: auto;
	font-size: 0.92em;
	z-index: 50;
}

#sub-nav .main-item:not(:last-of-type):not(.active) .sub-items {
	border-left-width: 0.15em;
}

#sub-nav .main-item.submenu-open .sub-items {
	border-left-color: transparent;
}

#sub-nav .sub-items a {
	opacity: 0;
	visibility: hidden;

	transition: opacity 300ms, visibility 300ms;
}

#sub-nav .submenu-open .sub-items a {
	opacity: 1;
	visibility: visible;
}

#sub-nav .sub-items a {
	display: block;
    max-width: none;
    text-align: left;
    padding: 0.25em 2em;

    position: relative;
}

#sub-nav.horizontal .sub-items a {
	display: inline-block;
}

#sub-nav.horizontal .sub-items a {
	padding-right: 0;
}

#sub-nav.horizontal .sub-items a:first-child {
	padding-left: 0;
}

#sub-nav .sub-items a:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    width: 1.75em;
    height: 0.15em;
	background-color: #000;
}

#sub-nav.horizontal .sub-items a:first-child:before {
	display: none;
}


/***********
 *         *
 * Content *
 *         *
 ***********/

html:not(#single-screen) #content {
    min-height: calc(100vh - 7em);
    padding-bottom: 7em;
}

html:not(#single-screen) #page-content a, .workshop a {
    display: inline-block;
    padding: 0 0.1em;
    background-color: #90D68D;
    text-decoration: none;
}

.workshop a.video {
    background-color: transparent;
    margin-left: 2em;
    margin-top: 1.25em;
}

.workshop a.video img {
    max-height: 5em;
}

#img-wrapper img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



/***********
 *         *
 * Actions *
 *         *
 ***********/

#actions {
	text-align: right;
	position: relative;
	z-index: 50;
}

#actions .wrapper {
    padding-right: 3em;
}

#actions a {
    display: inline-block;
    text-decoration: none;
    padding: 0 1em;
}

#actions img {
    max-height: 4.5em;
}



/***************
 *             *
 * Video Popup *
 *             *
 ***************/

#video-popup{
    display: none;
}
  
#video-popup .b-close{
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 32px;
    height: 32px;
    background-image: url("/static/icons/close.png");
    cursor: pointer;
}


/***********
 *         *
 * Project *
 *         *
 ***********/

.project .content {
    position: relative;
}

.project .content:not(:first-of-type) {
	margin-top: 15em;
}

.project:last-of-type {
    margin-bottom: 5em;
}

.project .project_img_background,
#content .project_img_background {
    width: 22.5em;
    right: 5em;
}

.project .image, 
#content .image {
    width: 15em;
    right: 8.5em;
}

.project.image-left {
	display: flex;
	flex-direction: row-reverse;
}

.project.image-left #actions {
	text-align: left;
}



/************
 *          *
 * Workshop *
 *          *
 ************/

 .workshop .content {
    position: relative;
    margin-top: 10em;
}

.workshop:last-of-type {
    margin-bottom: 5em;
}

.workshop .content img.photo {
    position: absolute;
    top: 50%;
    max-width: 20em;
}

.workshop .content img.left{
    left: -75%;
    transform: translateY(-50%) translateX(-25%);
}

.workshop .content img.right{
    right: -75%;
    transform: translateY(-50%);
}

.workshop .actions {
    position: relative;
    margin-top: 2.5em;
    margin-left: 2em;
    margin-right: 3em;

    border-bottom: solid 0.15em #000;
}

.workshop .actions::after {
    display: block;
    content: '';
    width: 3em;
    height: 3em;

    position: absolute;
    bottom: -0.2em;
    right: -2.9em;

    background-image: url(/static/icons/pen2.png);
    background-repeat: no-repeat;
    background-size: 3em 3em;
}

.workshop .actions a:not(.pure-button) {
    background-color: transparent;
}

.workshop .actions a img {
    max-height: 1.5em;
    vertical-align: middle;
}



/*****************
 *               *
 * Image Gallery *
 *               *
 *****************/

#workshop-images {
    padding-bottom: 3em;
}

.fancybox {
    display: block;
    text-align: center;
    height: 12em;
    padding: 5px;
}

.fancybox img {
    opacity: 0.9;
    transition: opacity 500ms;
    max-height: 100%;
    width: auto;
}

.fancybox img:hover {
    opacity: 1;
}



/**********
 *        *
 * Footer *
 *        *
 **********/

footer {
    margin-bottom: 0 !important;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: transparent;
    background-image: url(/static/images/bg/footer_production.png);
    background-position-x: -7.5em;
    background-repeat: no-repeat;
    background-size: 110% 100%; 
}



/*****************
 *               *
 * Media Queries *
 *               *
 *****************/

/* <= 1200px */
@media screen and (max-width: 80em) {
    html:not(#single-screen) #bg2 {
        transform-origin: top left;
        top: -10em;
        left: -10em;
    }

    #sub-nav {
        position: relative;
    }

    html:not(#single-screen) .main-item-wrapper {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 32.5em;
    }

    html:not(#single-screen) .main-item-wrapper #divider {
        position: initial;
    }

    .sub-item-wrapper {
        position: absolute;
        top: 3em;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    #sub-nav .divider.green:last-child {
        display: none;
    }

    .main-item-wrapper a, .sub-item-wrapper a {
        width: 5em;
        margin: 0 1em;
    }

    .project .project_img_background {
        right: 0;
    }
    
    .project .image {
        right: 3.5em;
    }
}

/* <= 768px */
@media screen and (max-width: 48em) {
    #bg2 {
        width: 1000px;
        left: -250px;
        bottom: -200px;
    }

    #bg3 {
        bottom: 65em;
        opacity: 0.5;
    }

    #bg4 {
        left: -500px;
        bottom: -150px;
        opacity: 0.6;
    }

    #sub-nav {
        margin: 5em 1em 2em 1em;
	}

	#sub-nav:not(.horizontal) .main-item.submenu-open .sub-items {
		transform: translateX(-25%);
	}

	#sub-nav.horizontal {
		margin: 2em 4em 0em 0.5em;
	}
	
	#sub-nav.horizontal .main-item:not(.active) {
		display: none;
	}

	#sub-nav.horizontal .main-item.active {
		display: block;
	}

	#sub-nav.horizontal .main-item.active .item-wrapper {
		padding-right: 0;
	}

	#sub-nav.horizontal .main-item.with-submenu.submenu-open .item-wrapper::before {
		left: 50% !important;
		bottom: -2.5em !important;
	}

	#sub-nav.horizontal .main-item.active .item-wrapper:after {
		display: none;
	}

	#sub-nav.horizontal .main-item.active .sub-items {
		position: static;
		padding-top: 2.25em;
	}

	#sub-nav.horizontal .sub-items a {
		display: block;
		padding: 0.4em;
		text-align: center;
	}

	#sub-nav.horizontal .sub-items a:before {
		display: none;
	}

    section {
        margin: 0 1em;
    }

    .workshop .content {
        margin-top: 2em;
    }

    .workshop .content img.photo, .workshop .content img.left {
        position: initial;
        top: auto;
        left: auto;
        transform: none;

        display: block;
        margin: 0 auto;

        max-width: 100%;
    }

    .workshop .content .actions {
        margin-left: 0;
    }

    .workshop .content .video {
        margin-left: 0;
    }

	.project .project_img_background,
	.other-content #img-wrapper .project_img_background {
        right: 0;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
    
	.project .image,
	.other-content #img-wrapper .image  {
        right: 0;
        left: 50%;
        transform: translateX(-50%);
		top: 4.5em;
		max-width: 13em;
    }
}

@media screen and (max-width: 20em) {
    #content .bg.project_img_background {
        display: none;
    }
}