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

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

html, body {
    height: 100%;
}



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

#bg1 {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 110%;
    min-height: 110%;
    transform: none;
}

#bg2 {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#bg3 {
    position: fixed;
    max-height: 350px;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
}

#bg3.additional-left-spacing {
    left: 225px;
}



/****************
 *              *
 * Page Content *
 *              *
 ****************/

#content {
    min-height: 100%;
}

#page-content {
    position: relative;
    left: 50%;
    /* Navigation bar is in the way to make width 50%*/
    width: 45%;
    margin: 0;
	padding-top: 2em;
	text-align: left;
}



/************
 *          *
 * Calender *
 *          *
 ************/

.calendar #production-details {
    padding-bottom: 1em;
}

.calendar #production-details .name{
    font-weight: bold;
    font-size: 1.15em;
}

.calendar .year {
    font-weight: bold;
    font-size: 1.5em;
    margin: 0.6667em 0;
    margin-top: 1.2em;
}

.calendar .month {
    font-weight: bold;
    margin: 1em 0;
}

.calendar .ticket-url {
    display: inline-block;
    position: relative;
    margin-top: -1.5em;
    margin-left: -0.5em;
}

.calendar .ticket-url img {
    display: inline-block;
    position: relative;
    transform: rotate(-60deg) scale(0.8);
    width: auto;
    max-width: none;
    max-height: 2em;
    top: 0.75em;
    left: 0.25em;
}

.calendar a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.calendar .button-wrapper{
    margin: 1em 0;
}



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

footer {
    margin-bottom: 0 !important;
    padding: 0;
    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 *
 *               *
 *****************/

 /* <= 1024px */
@media screen and (max-width: 62em) {
    #bg2 {
        opacity: 0.33;
    }

    #bg3 {
        margin: 1.5em auto;
        display: block;
        position: relative;
        top: 0;
        left: auto;
        transform: none;
    }

    #page-content {
        left: 15%;
        width: 70%;
    }
}

/* <= 768px */
@media screen and (max-width: 48em) {
    #bg3.additional-left-spacing {
        width: 90%;
        left: auto;
    }

    #page-content {
        left: 0;
        width: auto;
        padding: 4em 1em 0em 1em;
        text-align: left;
    }
}