/*********************************
***** GLOBAL *********************
*********************************/
h1,h2,h3,h4,h5,h6{
    font-family: "Ubuntu", sans-serif;
    font-weight:bold;
    text-shadow: 2px 2px 4px #000000;
}

h1{
    margin: 0;
    font-size:3rem;
}

a {
    color:#fff;
    text-decoration: none;
}

.grid-wrapper{
    display: grid;
    height:100vh;
    grid-template-columns: 66.6666% 33.3333%;
    grid-template-rows: 11% auto auto;
}

.active .inactive-mask{
    display:none;
}

    /*********************************
    ***** GLOBAL | CARDS *************
    *********************************/
    .card-wrapper{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        height:100%;
        flex-basis:auto;
    }

    .animation-wrapper{
        width:100%;
        height:100%;
        top:0;
        left:105%;
        position: absolute;
    }

    .animation-wrapper.animated{
        left: 0px;
    }

    .animation-wrapper .content{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width:100%;
        height:100%;
        cursor:pointer;
        background: rgba(0, 175, 145, 1);
    }

    .animation-wrapper .content:hover{
        -webkit-box-shadow: inset 0 0 30px rgba(255,255,255,.25);
        -moz-box-shadow: inset 0 0 30px rgba(255,255,255,.25);
        box-shadow: inset 0 0 30px rgba(255,255,255,.25);
        background: #006c5f;
    }

    .animation-wrapper .content .left{
        height: 100%;
        width:33.3333%;
        flex-grow:0;
        background: url("../img/test-bg-img.jpg") center center no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .animation-wrapper .content .right{
        flex-grow: 1;
        width:66.6666%;
    }

    .right h3{
        margin: 0;
        padding:5px;
    }
    .desc{
        display:inline-block;
        width:100%;
        padding: 0 5px 5px 5px;
    }
    .more-btn{
        font-family: "Ubuntu", sans-serif;
        font-weight:bold;
        font-size:18px;
        display:block;
        width:100%;
        padding: 5px;
        background:rgba(113, 24, 215, .5);
        box-sizing:border-box;
    }

/*********************************
***** HEADER *********************
*********************************/
.header{
    grid-column: 1/3;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
    /*********************************
    ***** HEADER | BRANDING **********
    *********************************/
    .branding{
        width:66.6666%;
        background: transparent;
        flex-grow:0;
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .logo{
        width: 33.3333%;
        padding: 0 10px;
        flex-grow:0;
    }

    .title-holder{
        flex-grow: 1;
    }

    .title{
        text-align: center;
    }

    .logo img{
        width: 100%;
    }



    /**********************************
    ***** HEADER | TOP NAV ************
    **********************************/
    .top-nav{
        background:transparent;
        flex-grow:1;
        height:100%;
    }

    ul{
        display:flex;
        flex-direction: row;
        list-style: none;
        padding:0;
        margin:0;
        height:100%;
    }

    ul li{
        list-style:none;
        padding:0;
        margin:0;
        height:100%;
        width:25%;
        background:#00af9a;
        cursor: pointer;
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-basis: auto;
        flex-grow:1;
    }

    ul li span{
        flex-basis: auto;
    }

    ul li.active{
        background: #fd3535;
        cursor:default;
        font-family: "Ubuntu", sans-serif;
        font-weight: bold;
    }

    ul li:hover:not(.active) {
        background: #006c5f;
        font-family: "Ubuntu", sans-serif;
        font-weight: bold;
        -webkit-box-shadow: inset 0 0 30px rgba(255,255,255,.25);
        -moz-box-shadow: inset 0 0 30px rgba(255,255,255,.25);
        box-shadow: inset 0 0 30px rgba(255,255,255,.25);
    }

/***************************
**** CARD HOLDER ***********
***************************/
.card-holder{
    grid-column: 2/3;
    grid-row: 2/4;
    background: url("../img/lolla-bg-1280.jpg") center center no-repeat;
    background-size: cover;
}

.card-holder .card{
    box-sizing: border-box;
    width: 100%;
    height:20%;
    flex-grow: 0;
    overflow: hidden;
    position:relative;
}

.card-holder .card.active .animation-wrapper .content{
    background:#fd3535;
}

/***************************
**** VIDEO HOLDER **********
***************************/
.video-holder{
    grid-column: 1/2;
    grid-row: 2/3;
    background: #000;
}

/***************************
**** BIG CARD **************
***************************/
.big-card{
    grid-column: 1/2;
    grid-row: 3/4;
}

.big-card .sponsor-card{
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background:#fff;
    padding:0;
    margin: 0;
}

.big-card .sponsor-card .sponsor-logo{
    width:43%;
    height:auto;
}

/***************************
**** RESPONSIVENESS ********
***************************/

    /*****************************************************
    **** RESPONSIVENESS | GENERAL MOBILE VERTICAL ********
    *****************************************************/
    body.mobile.vertical .grid-wrapper {
        grid-template-rows: 10% auto 17.5% 30%;
    }
    body.mobile.vertical .card-holder{
        grid-row: 4/5;
    }

    body.mobile.vertical .card-holder .card-wrapper{
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.mobile.vertical .card-holder .card{
        width:33.3333%;
        height:50%;
    }

    body.mobile.vertical .right h3{
        text-align: center;
        padding: 5px 0;
        background: rgba(23,176,155,.75);
    }

    body.mobile.vertical .more-btn{
        text-align: center;
        font-size:.75rem;
        background:rgba(113, 24, 215, .75);
    }

    body.mobile.vertical .desc{
        display:none;
    }

    body.mobile.vertical .animation-wrapper .content {
        /*background: url("../img/test-bg-img.jpg") center center no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;*/
    }

    body.mobile.vertical .animation-wrapper .content:hover{
        background-color: rgba(0,108,95,.25) !important;
    }

    body.mobile.vertical .animation-wrapper .content .left{
        display:none;
    }

    body.mobile.vertical .video-holder, body.mobile.vertical .big-card, body.mobile.vertical .card-holder{
        grid-column: 1/3;
    }



    /***********************************
    **** RESPONSIVENESS | SMALL ********
    ***********************************/
    @media screen and (max-width:640px){
        body.mobile.horizontal .card{
            box-sizing: border-box;
            width: 100%;
            height: 20%;
            flex-grow: 0;
            overflow: hidden;
            position: relative;
        }

        body.mobile.horizontal .card .left{
            display:inherit;
        }
    }

    /***********************************
    **** RESPONSIVENESS | MEDIUM *******
    ***********************************/
    @media screen and (max-width:900px){
        /*-- CARD HOLDER --*/
        .right h3{
            font-size:.75rem;
        }

        .more-btn{
            font-size:.75rem;
        }

        .desc{
            font-size:.65rem;
        }
    }

    @media screen and (max-width:768px){
        /*--GLOBAL--*/
        .grid-wrapper{
            grid-template-rows: 10% auto 17.5% 30%;
        }

        /*-- BRANDING --*/
        .branding{
            width: 33.3333%;
        }
        .logo{
            flex-grow: 1;
        }
        .title-holder{
            display:none;
            flex-grow: 0;
        }
        /*-- CARD HOLDER --*/
        .card-holder{
            grid-row: 4/5;
        }

        .card-holder .card-wrapper{
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .card-holder .card{
            width:33.3333%;
            height:50%;
        }

        .right h3{
            text-align: center;
            padding: 5px 0;
            background: rgba(23,176,155,.5);
        }

        .more-btn{
            text-align: center;
            font-size:.75rem;
            background:rgba(113, 24, 215, .75);
        }

        .desc{
            display:none;
        }

        .animation-wrapper .content {
            /*background: url("../img/test-bg-img.jpg") center center no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;*/
        }

        .animation-wrapper .content.active{
            background-color:transparent;
        }

        .animation-wrapper .content:hover{
            background-color: rgba(0,108,95,.25) !important;
        }

        .animation-wrapper .content .left{
            display:none;
        }

        .video-holder, .big-card, .card-holder{
            grid-column: 1/3;
        }
    }

    /***********************************
    **** RESPONSIVENESS | LARGE ********
    ***********************************/
    @media screen and (max-width:1280px){
        h1{
            font-size:2rem;
        }
    }

    @media screen and (min-width:1023.5px){
        body.horizontal .grid-wrapper{
            grid-template-columns: 66.6666% 33.3333%;
            grid-template-rows: 11% auto auto;
        }

        body.horizontal .video-holder{
            grid-column: 1/2;
            grid-row: 2/3;
        }

        body.horizontal .big-card{
            grid-column: 1/2;
            grid-row: 3/4;
        }

        body.horizontal .card-holder{
            grid-column: 2/3;
            grid-row: 2/4;
        }
    }

    @media screen and (max-width:1023px){
        body.mobile.horizontal .grid-wrapper{
            grid-template-columns: 66.6666% 33.3333%;
            grid-template-rows: 11% auto auto;
        }

        body.mobile.horizontal .video-holder{
            grid-column: 1/2;
            grid-row: 2/4;
        }

        body.mobile.horizontal .card-holder{
            grid-column: 2/3;
            grid-row: 2/4;
        }

        body.mobile.horizontal .big-card{
            display:none;
        }

        body.mobile.horizontal .desc{
            font-size:10px;
        }
    }