#back{
    z-index: -2;
    position: absolute; top: 0; left: 0;
    height: 100%; min-height: 1100px; width: 100%;
    background: url(Resources/Images/Background/need_for_speed_city-wallpaper-1920x1080.jpg) no-repeat center; background-size: cover;
}
#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.75) , 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: 20px 10px 20px 10px;
    animation: gameFlowIn 0.7s ease 0s 1 normal;
}
#title{
    width: 800px;
    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---*/
#games{
    display: table; box-sizing: border-box;
    width: 1200px; height: auto;
    margin: 0px auto 0px auto; padding-bottom: 40px;
}

/*---BUTTON---*/
.button.short{
    float: left;
    margin-right: 5px;
    background: rgb(40,40,40) !important;
    color: white !important;
}
.button.short .buttonOverlay{
    background: rgb(80,80,80) !important;
}
.button.short .buttonOverlay .buttonText .buttonTextCont{
    color: white !important;
}
/*
.*/

/*---GAMES---*/
.gameBtn{
    display: table; box-sizing: border-box; float: left;
    overflow: hidden; opacity: 0;
    position: relative;
    width: calc(33.3333% - 14px); height: 300px;
    padding: 20px; margin: 7px;
    background-size: cover;
    font-family: built titling light; color: rgb(245,245,245); font-weight: bold;
    font-size: 50px; line-height: 50px; letter-spacing: 2px;
}   
.gameBtn:hover{
    cursor: pointer;
    
}
.gameBtnUpTextCont{
    display: table-cell; vertical-align: middle;
    position: relative;
    width: 100%; height: 100%; box-sizing: border-box;
    margin: auto;
    text-align: center;
    /*color: rgb(245,245,245);*/
}
.gameBtnImgWrap{
    width: 60%; height: 48%;
    margin: auto;
    /*border: 1px solid red;*/
}
.gameBtnTextCont.h span{
    padding: 20px;
    /*background: rgba(40,40,40,0.86);*/
}
.gameBtnUpTextWrap{
    
}
.gameBtnUpTextWrap span{
}
.gameBtnOverlay{
    overflow: hidden; box-sizing: border-box;
    position: absolute; top: 0; left: 0px;
    height: 100%; width: 0px;
    background: rgba(40,40,40,0.86);
    transition: 0.2s;
}
/*#games a:nth-of-type(4) .gameBtn .gameBtnOverlay{
    width: 100% !important;
}*/
.gameBtn:hover .gameBtnOverlay{
    width: 100%; 
}
/*.gameBtn:hover .gameBtnTextCont{
    background: white;-webkit-text-fill-color: transparent; -webkit-background-clip: text;
}*/
.gameBtnText{
    display: table;
    box-sizing: border-box;
    position: relative;
    width: 100%; height: 100%;
}
.gameBtnTextCont{
    display: table-cell; vertical-align: middle;
    position: relative;
    height: 100%; width: 400px; box-sizing: border-box;
    color: white;
    text-align: center;
}
.gameBtnTextWrap{
}
.gameBtnTextWrap span{
    padding: 20px;
    background: rgb(255,255,255);
}
.gameBtn:hover .gameBtnTextCont{color: white;}

/*.gameBtnTextCont.gtS{
    background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)), url(Resources/Images/Games/GTS/head.jpg) no-repeat center / cover;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
}
.gameBtnTextCont.nfs15{
    background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)), url(Resources/Images/Games/NFS15/Potential/head8.jpg) no-repeat center / cover;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
}
.gameBtnTextCont.gt6{
    background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)), url(Resources/Images/Games/GT6/head.jpg) no-repeat center / cover;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
}
.gameBtnTextCont.nfsPB{
    background: url(Resources/Images/Games/NFSPB/headP_500.jpg) no-repeat center / cover;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
}
.gameBtnTextCont.nfsW{
    background: linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)), url(Resources/Images/Games/NFSW/head5.jpg) no-repeat center / cover;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
}
.gameBtnTextCont.zom{
    background: url(Resources/Images/Games/ZOMBIES/headP_500.jpg) no-repeat center / cover;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
}*/




@media screen and (max-width: 1400px){
    #title{
        width: 600px;
        font-size: 110px; line-height: 100px;
    }
    #titleCont{
        width: 980px;
    }
    
    #games{
        width: 980px;
    }
    .gameBtn{
        width: calc(50% - 14px);
        /*width: calc(50% - 10px); padding-bottom: calc(28.125% - 10px);*/
    }
}
@media screen and (max-width: 1000px){
    /*.gameBtnTextCont{
        width: 100%;
    }*/
    #titleCont{
        width: 100%;
        padding: 20px 15px 20px 15px;
    }
    #title{
        width: 100%; max-width: 600px;
        font-size: 90px; line-height: 90px;
    }
    #titleDesc{
        width: 100%;
    }
    #titleLogo{
        left: 0px;
    }
    
    #games{
        box-sizing: border-box;
        width:100%;
        padding: 0px 15px 40px 15px;
    }
    .gameBtn{
        height: 210px;
        /*font-size: 65px; line-height: 70px;*/
    }
    .gameBtnTextCont{
        height: 210px;
    }
}
@media screen and (max-width: 720px){
    #title{
        max-width: 320px;
        font-size: 60px; line-height: 60px;
    }
    #titleDesc{
        font-size: 15px;
    }
    
    .gameBtn{
        height: 180px;
        width: calc(100% - 10px);/* padding-bottom: calc(56.25% - 10px);*/
    }
    .gameBtnTextCont{
        height: 180px;
    }
}
@media screen and (max-width: 500px){
    #titleShortcuts{
        right: 0px;
    }
    
}

@keyframes gameFlowIn{
    0%{
        opacity: 0;
        top: -93px;
    }
    100%{
        opacity: 1;
        top: 0px;
    }
}

@font-face{
    font-family: built titling;
    src: url("Resources/Font/built titling rg.ttf");
    src: url("Resources/Font/webfontkit-20170506-085927/built_titling_rg-webfont.woff") format("woff");
}
@font-face{
    font-family: built titling light;
    src: url("Resources/Font/built titling lt.ttf");
    src: url("Resources/Font/builtLight/built_titling_lt-webfont.woff") format("woff");
}
@font-face{
    font-family: gravity;
    src: url("Resources/Font/Gravity-Regular.otf") format("opentype");
    src: url("Resources/Font/gravity/gravity-regular-webfont.woff") format("woff");
}
@font-face{
    font-family: bebas;
    src: url("Resources/Font/BEBAS___.TTF");
    src: url("Resources/Font/bebas/bebas___-webfont.woff") format("woff");
}