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

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

 body {
    min-height: 100%;
    position: absolute;
}

h1 {
    font-size: 1.7em;
    padding-right: 0;
}



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

#bg1 {
    top: 0px;
    left: 50%;
    right: unset;
    width: 1750px;
    transform: translateX(-50%) scale(1);
}

#bg2 {
    width: 1500px;
    left: -200px;
    bottom: -100px;
    transform: none;
}

#bg3 {
    top: 50%;
    transform: translateY(-50%) translateX(-25%);
    left: -75%;
}



/**************
 *            *
 * Navigation *
 *            *
 **************/

#navigation {
    position: relative;
    text-align: left;
    margin-left: 4em;
}

#navigation #line {
    position: absolute;
    width: 24em;
    height: 0.35em;
    top: 64px;
    left: 6.5em;
    background-color: #000;
}

#navigation a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    z-index: 10;
    margin-right: 1.25em;
}

#navigation a:first-of-type {
    margin-left: 1.4em;
}

#navigation a:last-child {
    margin-right: 0;
}

#navigation a img {
    transform: scale(0.75);
}



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

#page-content, #single-screen #page-content {
    position: relative;
    top: auto;
    left: auto;
    font-size: 0.9em;
    line-height: 175%;
    padding-bottom: 3em;
}

#page-content.has-quote:not(.has-hidden-content), #page-content.has-quote.hidden-content-visible {
    padding-bottom: 12.5em;
}

#page-content .wrapper {
    margin: 9em 0em;
}

#single-screen #page-content .wrapper {
    margin-left: 3em;
    margin-right: 7em;
}
 
#page-content #sub-content{
    margin-left: 5em;
    margin-top: 3em;
    position: relative;
}

#page-content #sub-content p {
    padding-right: 0.25em;
}

#page-content #sub-content #hidden-content {
    visibility: hidden;
}

p#title {
    font-size: 1.1em;
    font-weight: bold;
    /*margin-left: 2em; but font-size is 1.1em;*/
    margin-left: 1.81em;
}

section #hidden-content p:not(.no-emphasize):nth-child(2)::first-letter {
    font-size: inherit !important;
    font-weight: normal !important;
}



/*********
 *       *
 * quote *
 *       *
 *********/

#quote{
    position: absolute;
    max-width: 20%;
    top: 50vh;
    left: 17.5%;
    transform: translateX(-17.5%);
    background-image: url(/static/images/speech_bubble_left.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 8em 7em;
    font-style: italic;
}



/***********
 *         *
 * Bio nav *
 *         *
 ***********/

ul#members {
    margin-top: 2em;
}

ul#members li {
    list-style: none;
    display: inline-block;
    margin: 0;
    margin-right: 2em;
}

ul#members li a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

ul#members li a.current {
    color: #90D68D;
}



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

/* <= 1280px */
@media screen and (max-width: 80em) {
    #page-content .wrapper {
        margin-top: 0;
    }

    #navigation {
        margin: 0 auto;
        width: 36.7em;
    }

    #page-content #sub-content {
        margin-top: 0;
    }
	
	#page-content #sub-content #hidden-content {
		display: none;
		visibility: visible;
	}

    #page-content.has-quote {
        padding-bottom: 0;
    }

    #page-content .wrapper {
        margin-bottom: 0;
    }

    #bg3 {
        position: initial;
        transform: none;
        display: block;
        margin: 0 auto;
    }

    #quote {
        position: initial;
        transform: none;
        margin: 0 auto;
    }
}

/* <= 1024px */
@media screen and (max-width: 64em) {
    html#single-screen, #single-screen body{
        overflow-y: visible;
    }

    #page-content .wrapper {
        margin: 0;
    }

    #quote {
        max-width: 50%;
    }
    
    footer {
        background-size: auto;
    }

    footer p {
        padding-top: 1.5em;
    }
}

/* <= 768px */
@media screen and (max-width: 48em) {
    #bg1 {
        transform: translateX(-50%) scale(5);
        transform-origin: top center;
    }

    #bg2 {
        display: none;
    }

    section {
        margin: 0;
    }

    #single-screen #page-content {
        display: block;
        width: auto;
        margin: 0 0.75em;
	}

    #page-content.has-quote.hidden-content-visible {
        padding-bottom: 0;
    }

    #page-content .wrapper, #single-screen #page-content .wrapper{
        margin: 7.5em 1em 0 1em;
    }

    #page-content #sub-content {
        margin: 0;
	}

    #navigation {
        margin: 0 auto;
        width: auto;
    }

    #navigation #line {
        width: 80%;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
    }

    #navigation a {
        display: inline-block;
        width: 32%;
        margin: 0;
    }

    #navigation a:first-of-type {
        margin-left: 0;
    }

    #navigation a img {
        transform: scale(1.1);
    }

    #page-content #sub-content {
        margin-top: 0;
    }

    #page-content  #sub-content p#title {
        text-align: left;
        padding-right: 0;
        margin-left: 0;
    }

    #quote {
        max-width: 80%;
        width: auto;
        position: static;
        padding: 5em 4em;
    }

    footer, #single-screen footer {
        position: static;
    }
}

/* <= 800px */
@media screen and (max-height: 50em) and (min-width: 48em) {
    html:not(#single-screen) #page-content .wrapper {
        margin-top: 1em;
    }
}