#back{
    z-index: -2;
    position: absolute; top: 0; left: 0;
    height: 100%; min-height: 900px; width: 100%;
}
#cover{
    z-index: -1;
    position: absolute; top: 0; left: 0;
    height: 100%; min-height: 900px; width: 100%;
    background: linear-gradient(rgba(255,255,255,0.60) , rgba(255,255,255,1));
}
a{
    text-decoration: none; color: black;
}

/*---TITLE---*/
#titleCont{
    display: table; box-sizing: border-box;
    position: relative;
    width: 1200px;
    margin: auto; padding: 40px 10px 20px 10px;
}
#title{
    width: 800px;
    margin-bottom: 10px;
    font-family: built titling; font-size: 130px; color: rgb(40,40,40); line-height: 120px;
}
#titleDesc{
    width: 100%; 500px;
    font-family: gravity; color: rgb(40,40,40);
}
#titleLogo{
    position: absolute; left: 400px; top: 0;
    width: 300px; height: 100%;
    background: url(Resources/Images/Common/wmng404040.png) no-repeat center; background-size: contain; opacity: 0.1;
}
#titleShortcuts{
    position: absolute; top: 0; right: 20px;
}
.shortcut{
    background: rgb(40,40,40);
    font-family: built titling light; font-size: 25px; color: white;
}

/*---MAIN---*/
#main{
    display: table; box-sizing: border-box;
    position: relative;
    width: 1200px;
    margin: 0px auto 20px auto;
}
.splitter{
    display: table;
    width: calc(100% - 60px); height: 1px;
    margin: auto;
    background: rgb(200,200,200);
}
.eventInfo{
    position: relative;
    box-sizing: border-box; float: left;
    /*width: calc(50% - 4px);*/ width: calc(100% - 4px);
    padding: 30px; margin: 2px;
    background: rgba(255,255,255,0.7);
}
.eventInfo.tracks{
    float: right;
}
.eventInfo:hover{
    cursor: pointer;
}
.eventInfo:hover .eventOverlay{
    width: 100%;
}
.infoTitle{
    font-family: built titling; font-size: 28px; color: rgb(40,40,40);
}
.infoDesc{
    margin-top: 10px;
    font-family: gravity; 
}
table{
    border: none; border-spacing: 0px;
}
table tr td{
    vertical-align: top;
}
table tr td:nth-of-type(1){
    width: 120px;
}
table tr td:nth-of-type(2){
    padding-left: 20px;
}

.eventOverlay{
    z-index: -1;
    position: absolute; top: 0; left: 0;
    width: 0px; height: 100%;
    background: rgb(200,200,200);
    transition: 0.2s;
}

#allEventsBtn{
    font-family: built titling; font-size: 30px; color: rgb(100,100,100); text-align: center;
}




@media screen and (max-width: 1400px){
    #titleCont{
        width: 980px;
    }
    
    #main{
        width: 980px;
    }
    .eventInfo{
        width: 100%;
        margin: 2px 0px 2px 0px;
    }
    .eventInfo.tracks{
        float: left;
    }
}
@media screen and (max-width: 1000px){
    #titleCont{
        width: 100%;
    }
    #title{
        width: 100%;
        font-size: 90px; line-height: 100px;
    }
    #titleLogo{
        left: 0px;
    }
    
    
    #main{
        width: calc(100% - 20px);
    }
}
@media screen and (max-width: 720px){
    #title{
        font-size: 50px; line-height: 50px;
    }
}
@media screen and (max-width: 500px){
    #titleShortcuts{
        right: 0px;
    }
    
    .eventDesc{
    }
    .eventTitle{
        font-size: 40px;
    }
}