body{
    background: rgb(248,248,248);
}

/*--- ELEMENTS - GENERAL ---*/
a{
    text-decoration: none; color: black;
}

/*--- BACKGROUND ---*/
#back{
    z-index: -2;
    position: absolute; top: 0; left: 0;
    height: 100%; min-height: 1100px; width: 100%;
}
#cover{
    z-index: -1;
    position: absolute; top: 0; left: 0;
    height: 100%; min-height: 1100px; width: 100%;
    background: linear-gradient(rgba(255,255,255,0.60) , rgba(248,248,248,1));
}
.overlay{
    z-index: -1;
    position: absolute; top: 0; left: 0;
    width: 0px; height: 100%;
    background: rgb(200,200,200);
    transition: 0.2s;
}

/*--- 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%; max-width: 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;
    position: relative;
    width: 1200px; box-sizing: border-box;
    margin: 5px auto 20px auto;
}
.splitter{
    display: table;
    width: calc(100% - 60px); height: 1px;
    margin: auto;
    background: rgb(200,200,200);
}
.splitterHor{
    position: relative; float: left;
    width: 1px;  height: 100%;
    margin: 0px 20px 0px 20px;
    background: rgb(200,200,200);
}
section{
    display: inline-block;
    position: relative;
    width: 100%;
    background: rgba(255,255,255,0.7);
    margin-bottom: 20px;
}

/*--- PS COMMUNITY --*/
#community{
    display: table;
    position: relative;
    height: 0px; min-height: 160px; box-sizing: border-box;
    padding: 20px; 
}
#community:hover .overlay.com{
    width: 100%;
}
.communityCont{
    display: table;
    position: relative; float: left;
    height: 100%; box-sizing: border-box;
}
    .communityCont.title{
        width: calc(100% - 201px);
    }
    .communityCont.split{
        width: 41px;
    }
    .communityCont.download{
        width: 160px;
    }
    #community:hover{
        cursor: default;
    }
.communityWrap{
    display: table;
    position: relative; float: left;
    box-sizing: border-box;
    /*border: 1px solid yellow;*/
}
    .communityWrap.title{
        width: calc(100% - 120px);
    }
.communityWrapPush{
    display: table-cell; vertical-align: middle;
    height: 100%;
}
.communityPush{
    display: table-cell; vertical-align: middle;
    position: relative;
    height: 100%; box-sizing: border-box;
}
    .communityPush.title{
        box-sizing: border-box;
        max-width: calc(100% - 321px);
    }
#communityIcon{
    float: left; overflow: hidden;
    position: relative;
    width: 100px; height: 100px;
    margin-right: 20px;
}
#communityIcon img{
    position: absolute; left: calc(50% - 70px); top: calc(50% - 70px);
    width: 140px;
}
#communityTitle{
    font-family: built titling; font-size: 35px;
}
#communityLabel{
    font-family: gravity;
}

#downloadDesc{
    display: table;
    position: relative;
    margin: auto;
    font-family: gravity;
    color: rgb(90,90,90);
}
.communityAppDownloadCont{
    display: inline-block;
    position: relative;
    height: 100%;
}
#communityAppDownload{
    position: relative;
    width: 160px;
}
.downloadBtn{
    display: table;
    position: relative;
    padding: 15px; margin: 5px auto 5px auto;
    font-family: gravity; color: white; font-size: 17px;
}
.downloadBtn.Play{
    background: rgb(104, 159, 56);
}
.downloadBtn.Play:hover{
    background: rgb(117,197,45);
}
.downloadBtn.AppStore{
    background: rgb(23,148,245);
}

/*--- EVENTS ---*/
#events{
    
}
.eventCont{
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 30px;
}
.eventCont:hover{
    cursor: pointer;
}
.eventCont:hover .eventOverlay{
    width: 100%;
}
.eventImg{
    float: left;
    width: 450px; height: 300px;  
}
#main a:nth-of-type(n + 2) div .eventImg{
    width: 300px; height: 200px;
}
.eventDesc{
    display: table-cell; vertical-align: middle;
    height: 300px; width: 400px;
    padding-left: 40px;
}
#main a:nth-of-type(n + 2) div .eventDesc{
    height: 200px; width: 600px;
}
.eventTitle{
    font-family: built titling; font-size: 50px; color: rgb(40,40,40);
}
.eventValid{
    /*float: left;
    margin-right: 15px;*/
}
.eventDate{
    font-family: gravity; color: rgb(120,120,120);
}
.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;
}

/*--- GALLERY ---*/
#images{
    box-sizing: border-box;
    width: 100%;
    padding: 30px 30px 10px 30px;
}
.imageLink{
    display: table;
    position: relative;
    width: 100%; height: 300px; box-sizing: border-box;
    margin-bottom: 20px;
}
.imageLink:hover{
    cursor: pointer;
}
.imgCover{
    z-index: 0;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.2);
}
.imgOverlay{
    z-index: 3; overflow: hidden;
    position: absolute; top: 0; left: 0;
    width: 0px; height: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.6);
    transition: 0.2s;
}
.imageLink:hover .imgOverlay{
    width: 100%;
}
.imgTextCont{
    display: table;
    position: relative;
    height: 100%;
}
.imgText{
    box-sizing: border-box; display: table-cell;
    position: relative;
    height: 100%;
    padding-left: 100px; padding-right: 100px;
    font-family: built titling; font-size: 90px; color: rgb(40,40,40); vertical-align: middle;
}

.imgTextCont.back{
    z-index: 2;
    position: relative;
    border: none;
}
.imgText.back{
    color: white;
}


/*--- 980px ---*/
@media screen and (max-width: 1400px){
    /* TITLE */
    #title{
        font-size: 110px; line-height: 110px;
    }
    #titleCont{
        width: 980px;
    }
    
    /* MAIN */
    #main{
        width: 980px;
    }
    
    /* PLAYSTATION COMMUNITY */
    /*#communityAppDownload{
        width: 150px;
    }*/
    
    /* EVENTS */
    .eventImg{
        width: 400px;
    }
}

/*--- 100% < 1000px ---*/
@media screen and (max-width: 1000px){
    /* TITLE */
    #titleCont{
        width: 100%;
    }
    #title{
        width: 100%;
        font-size: 90px; line-height: 100px;
    }
    #titleLogo{
        left: 0px;
    }
    
    /* MAIN */
    #main{
        width: calc(100% - 20px);
    }
    
    /* PS COMMUNITY */
    #communityTitle{
        font-family: built titling; font-size: 25px;
    }
    
    /* EVENTS */
    .eventImg{
        width: 100%; height: 150px;
        background-position: center !important;
    }
    #main a:nth-of-type(1) div .eventImg{
        float: none;
    }
    #main a:nth-of-type(n + 2) div .eventImg{
        width: 75px;
        margin-bottom: 30px;
    }
    #main div:nth-of-type(1) .eventDesc{
        height: auto; width: auto;
        padding: 20px 0px 0px 0px;
    }
    #main a:nth-of-type(n + 2) .eventDesc{
        width: auto; height: 150px !important;
        padding-left: 15px; 
    }
    
    /* GALLERY */
    .imageLink{
        height: 250px;
    }
    .imgText{
        padding: 0px 10px 0px 10px;
        text-align: center;
        font-size: 70px;
    }
    .imageLink{
        background-position: center !important;
    }
}

/*--- 100% < 720px ---*/
@media screen and (max-width: 720px){
    /* TITLE */
    #title{
        font-size: 60px; line-height: 60px;
    }
    
    /* MAIN */
    #main{
        width: calc(100% - 20px);
    }
    
    /* PS COMMUNITY */
    #communityLabel{
        font-size: 16px;
    }
    #communityIcon{
        width: 60px; height: 60px;
    }
    #communityIcon img{
        position: absolute; left: calc(50% - 40px); top: calc(50% - 40px);
        width: 80px;
    }
    .communityCont{
        float: none;
        width: 100% !important; height: auto;
    }
    .communityWrap.title{
        width: calc(100% - 60px);
    }
    #communitySplitter{
        width: 100%; height: 1px;
        margin: 10px 0px 10px 0px;
    }
    .communityCont.download .communityPush{
        display: table;
        position: relative;
        margin: auto;
    }
    #downloadDesc{
        font-size: 14px;
    }
    .downloadBtn{
        padding: 10px;
        font-size: 15px;
    }
    
    /* EVENTS */
    .eventTitle{
        font-size: 35px;
    }
    
    /* GALLERY */
    #images{
        padding: 20px 20px 0px 20px !important;
    }
    .imageLink{
        height: 150px;
    }
    .imgText{
        font-size: 50px;
    }
}

/*--- 100% < 500px ---*/
@media screen and (max-width: 500px){
    /* LINKS - SHORTCUTS */
    #title{
        font-size: 45px; line-height: 45px;
    }
    #titleDesc{
        font-size: 15px;
    }
    #titleShortcuts{
        right: 0px;
    }
    
    /* MAIN */
    section{
        margin-bottom: 10px;
    }
    
    /* PS COMMUNITY */
    #communityTitle{
        font-family: built titling; font-size: 18px;
    }
    #communityIcon{
        width: 40px; height: 40px;
    }
    #communityLabel{
        font-size: 10px;
    }
    #communityIcon img{
        position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);
        width: 60px;
    }
    
    /* EVENTS */
    .eventCont{
        padding: 30px;
    }
    #main a:nth-of-type(n + 2) div .eventImg{
        display: none;
    }
    .eventDesc{
    }
    .eventTitle{
        font-size: 30px;
    }
    #allEventsBtn{
        font-size: 25px;
    }
    
    /* GALLERY */
    #images{
        padding: 10px 10px 0px 10px !important;
    }
    .imageLink{
        margin-bottom: 10px;
    }
    .imgText{
        font-size: 40px;
    }
}