:root {

    --main-color: #E7D1BA;
    --bg-color: #131313;
    --bg-menu-mobile: rgba(19, 19, 19, .9);

    --bg-opacity: rgba(0, 0, 0, .75);

    --font-title: 'Open Sans', sans-serif;
    --font-text: 'Open Sans', sans-serif;
    --font-color: #CCC;

    --form-bg: #F3F3F3;
    --form-bg-button: #DDD;

    --border-radius: .5rem;

    --gray: #777;

    --dark-opacity: rgba(0, 0, 0, .5);
    --light-opacity: rgba(255, 255, 255, .1);

    --default-space: 3rem;

}



* {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    font-size: 16px;
    color: var(--font-color);
    box-sizing: border-box;
    border: 0;
}

body {
    background-color: var(--bg-color);
}

a {
    text-decoration: none;
}

nav li a {
    display: block;
}

a,
em,
i,
strong,
b {
    color: inherit;
    font-size: inherit;
}

img {
    max-width: 100%;
    border: 0;
}

h1,
h2,
h3 {
    font-family: var(--font-title);
    font-weight: lighter;
    color: var(--main-color);
}

h1 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 3rem;
    text-transform: uppercase;
}

h2 {
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: 2rem;
}

h3 {
    margin-bottom: .5rem;
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: bold;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    list-style: none;
}

time {
    /*font-style: italic;*/
    line-height: 2rem;
    color: var(--gray);
}

input,
textarea,
button {
    line-height: 2rem;
    background-color: none;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--form-bg);
}

input,
textarea {
    padding: 0 .5rem;
}

button {
    height: 2rem;
    background-color: var(--form-bg-button);
}

::selection {
    background-color: var(--main-color);
}

main a {
    color: var(--main-color);
}

body a {
    cursor: url('data:image/x-icon;base64,AAACAAEAICAAAAAAAACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAUAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAUAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJAAAAEwAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAcAAAAEwAAAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAAmAAAAOAAAADgAAAA4AAAAOAAAADgAAAA4AAAAOAAAADgAAAAmAAAAEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAHAAAADUAAABMAAAATAAAAEwAAABMAAAATAAAAEwAAABMAAAATAAAADUAAAAcAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAABTAAAAQQAAACUAAAAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAA////////////////////////////////////////////AAAA/wAAAFUAAABLAAAALwAAABMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAAAD///////////////////////////////////////////8AAAD/AAAAVQAAAFIAAAA4AAAAHAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAA//////////////////////////////////////////////////////8AAAD/AAAAVAAAAEEAAAAlAAAACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkAAAD//////////////////////////////////////////////////////wAAAP8AAABVAAAASwAAAC8AAAATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////////////////////////////////////////////////AAAA/wAAAFUAAABSAAAANgAAABkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////AAAA/wAAAFQAAAA4AAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////8AAAD/AAAAVQAAADkAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////wAAAP///////////////////////////////////////////////////////////wAAAP8AAABVAAAAOQAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//////AAAA////////////////////////////////////////////////////////////AAAA/wAAAFUAAAA5AAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////8AAAD///////////////////////////////////////////8AAAD///////////8AAAD/AAAAVQAAADkAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP///////////wAAAP///////////wAAAP///////////wAAAP///////////wAAAP8AAABVAAAAOQAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////AAAA////////////AAAA////////////AAAA////////////AAAA/wAAAFUAAAA5AAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////8AAAD/AAAA/wAAAP8AAAAiAAAA/wAAAP8AAAD///////////8AAAD/AAAAVQAAADkAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///////////wAAAP8AAABVAAAAOQAAAB0AAAABAAAAAQAAAP///////////wAAAP8AAABUAAAAOAAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////AAAA/wAAAFUAAAA5AAAAHAAAAAAAAAAAAAAA////////////AAAA/wAAAFEAAAA1AAAAGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////8AAAD/AAAAVAAAADgAAAAcAAAAAAAAAAAAAAD///////////8AAAD/AAAARQAAACwAAAATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///////////wAAAP8AAABRAAAANQAAABkAAAAAAAAAAAAAAP///////////wAAAP8AAAAvAAAAHAAAAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////AAAA/wAAAEUAAAAsAAAAEwAAAAAAAAAAAAAA////////////AAAA/wAAABUAAAAMAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////8AAAD/AAAALwAAABwAAAAJAAAAAAAAAAAAAAAAAAAA/wAAAP8AAAAGAAAABgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///////////wAAAP8AAAAVAAAADAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAABgAAAAYAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////////////////////////////////////////+AH///gB///4Af//8AD///AA///gAP//4AB//8AAf//AAH//wAB//8AAf//gAH//8AB///Agf//w+H//8Ph///D4f//w+H//8Ph///D8///w////+f///8='), auto;
}



/* RESPONSIVITY */

.Wrapper {
    max-width: 100%;
}

.Grid {
    width: 100%;
    max-width: 1366px;
}

nav {
    padding: 1rem;
}

@media (max-width: 991px) {
    /* MOBILE */
}

@media (min-width: 992px) {
    /* X-LARGE DISPLAY */

    .Wrapper {
        padding: 0 calc((100% - 1366px) / 2);
    }

    .Grid {
        display: grid;
        grid-template-areas:
            "header header"
            "main sidebar"
            "footer footer";
        grid-template-rows: auto auto 6rem;
        border-left: .1px solid var(--bg-opacity);
        border-right: .1px solid var(--bg-opacity);
    }

    nav {
        width: 100%;
    }

    nav ul {
        width: 100%;
    }

}



/* LAYOUT GRID */

.Wrapper {
    background-size: cover;
    background-attachment: fixed;
    background-image: url('/static/images/bg/bg.jpg');
}

ul.Social {
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.Social li {
    margin: 0 .5rem;
    font-size: 1.25rem;
}

ul.Social li:hover,
ul.Social li:focus {
    color: var(--main-color);
}

.Floating-Social {
    z-index: 9998;
    position: fixed;
    bottom: 2rem;
    left: 1rem;
    padding: .25rem;
    border: 1px solid var(--font-color);
    background-color: var(--bg-opacity);
    border-radius: 1.5rem;
}

.Layout-Header {
    grid-area: header;
    text-align: center;
    background:
        linear-gradient(rgba(0, 0, 0, 0) 75%,
            rgba(0, 0, 0, .75) 85%,
            rgba(0, 0, 0, 1)),
        url('/static/images/bg/FG.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow: 0 0 3rem rgba(0, 0, 0, .75);
}

nav {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1366px;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, 0));
    background: -o-linear-gradient(top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, 0));
    background: linear-gradient(top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, 0));
}

nav li {
    color: var(--main-color);
}

nav li a {
    font-family: var(--font-title);
    font-weight: lighter;
    font-size: .9em;
    line-height: 2.5rem;
    text-transform: uppercase;
}

.Logo {
    width: 2rem;
    height: 2rem;
}

main {
    grid-area: main;
}

aside.Sidebar {
    grid-area: sidebar;
}

.Layout-Footer {
    grid-area: footer;
    align-self: center;
    display: block;
    margin: 3rem auto 0;
    padding-bottom: 1rem;
    text-align: center;
}

.Layout-Footer footer {
    margin: .5rem auto 0;
    font-weight: lighter;
    font-size: .7rem;
    color: var(--gray);
}

nav i {
    cursor: pointer;
    font-size: 1.5rem;
}



/* VISUALS */

.Transition,
nav a,
ul.Social li:hover,
ul.Social li:focus,
nav i,
.Nav,
.More a,
.Events article {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

nav li i,
nav li a,
h1 {
    text-shadow: 0 0 1px #000, 0 0 .5rem #000;
}

.Logo img,
nav i {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.Logo img:hover,
.Logo img:focus,
nav i:hover,
nav i:focus {
    opacity: 1;
    filter: alpha(opacity=100);
}

h1 {
    text-align: center;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
}



/* COMPONENTS */

.More {
    text-align: center;
    font-weight: bold;
}

.More a:hover,
.More a:focus {
    color: var(--main-color);
}

.Soon {
    text-align: center;
    font-size: .9rem;
    color: var(--gray);
}



/* VIDEOS */

.Video {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.Video .Embed {
    overflow: hidden;
    position: relative;
    padding-bottom: 56.25%;
    max-width: 100%;
    height: 0;
    border-radius: var(--border-radius);
}

.Video .Embed iframe,
.Video .Embed object,
.Video .Embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* SIDEBAR */

.List-Events,
.List-News {
    margin: 0 auto 6rem;
}

.List-Events .Box,
.List-News article {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.List-Events .Box,
.List-News article {
    padding: 1.5rem;
    background-color: var(--light-opacity);
}

.List-Events article {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto .5rem;
}

.List-Events article:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.List-Events time {
    margin-right: 1rem;
    width: 4rem;
    text-align: right;
}

.List-Events aside {
    width: calc(100% - 4rem);
    text-align: left;
    color: var(--main-color);
}

.List-Events footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-opacity);
}

.List-News article {
    margin: 0 auto 1rem;
}



/* HOME */

.Videos {
    margin: 0 auto 6rem;
}

.Videos article {
    margin: 0 auto 3rem;
    text-align: center;
}

.Videos footer.More {
    margin-top: -1rem;
}



/* EVENTS */

.Events article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .25rem;
    padding: .25rem;
}

.Events article:hover {
    background-color: var(--light-opacity) !important;
}



/* SCREEN SiZES */

@media (max-width: 991px) {

    .Floating-Social {
        display: none;
    }

    .Grid {
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 40vh, rgba(0, 0, 0, .75) 60vh, rgba(0, 0, 0, .5));
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 40vh, rgba(0, 0, 0, .75) 60vh, rgba(0, 0, 0, .5));
        background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 40vh, rgba(0, 0, 0, .75) 60vh, rgba(0, 0, 0, .5));
        background: linear-gradient(top, rgba(0, 0, 0, 1) 40vh, rgba(0, 0, 0, .75) 60vh, rgba(0, 0, 0, .5));
    }

    .Layout-Header {
        margin-bottom: -10vh;
    }

    .Layout-Header footer {
        height: 30vh;
    }

    .Nav-Toggle i {
        display: block;
        width: 2rem;
    }

    .Nav {
        z-index: 9999;
        opacity: 0;
        filter: alpha(opacity=0);
        overflow: hidden;
        position: absolute;
        top: 3rem;
        left: -13rem;
        padding: 1rem 0;
        text-align: left;
        background-color: var(--bg-menu-mobile);
        border-radius: 0 1rem 1rem 0;
    }

    #Nav.Visible {
        left: 0;
        opacity: 1;
        filter: alpha(opacity=100);
    }

    nav li a {
        padding: 0 2rem;
    }

    nav ul li:hover,
    nav ul li:focus {
        background-color: var(--bg-opacity);
    }

    main {
        padding: 0 1rem;
    }

    aside.Sidebar {
        margin-top: var(--default-space);
        padding: 0 1rem;
    }


    .Events article span,
    .Events article time {
        font-size: .8em;
    }

    .Events span.Title,
    .Events span.Venue,
    .Events span.Band {
        display: none;
    }

    .Events article time {
        width: 46%;
    }

    .Events span.City {
        width: 46%;
    }

    .Events figure.Country {
        width: 5%;
    }

}



@media (min-width: 992px) {

    h1 {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    }

    nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #Nav-Toggle {
        display: none;
    }

    .Wrapper {
        display: flex;
        justify-content: center;
        align-items: stretch;
        padding: 0 1rem;
    }

    .Grid {
        grid-template-columns: 60% 40%;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 80vh, rgba(0, 0, 0, .75) 100vh, rgba(0, 0, 0, .5));
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 80vh, rgba(0, 0, 0, .75) 100vh, rgba(0, 0, 0, .5));
        background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 80vh, rgba(0, 0, 0, .75) 100vh, rgba(0, 0, 0, .5));
        background: linear-gradient(top, rgba(0, 0, 0, 1) 80vh, rgba(0, 0, 0, .75) 100vh, rgba(0, 0, 0, .5));
    }

    .Layout-Header {
        margin-bottom: -15vh;
    }

    .Layout-Header footer {
        height: 75vh;
    }

    nav li a {
        margin: 0 .5rem;
    }

    main {
        padding: 0 3rem;
    }

    aside.Sidebar {
        padding: 0 3rem 0 0;
    }

    .Page-Events .Grid {
        grid-template-areas: "header header"
            "main main"
            "footer footer";
    }

    .Events article {
        text-align: center;
    }

    .Events article span,
    .Events article time,
    .Events figure.Country {
        width: 18%;
    }

    .Events span.Title {
        width: 25%;
    }

    .Events span.Band {
        width: 15%;
    }

    .Events figure.Country {
        width: 3%;
    }

}