html{
    height: 100%;
}
body{
    height: 100%;
    margin: 0px;
    background: rgb(30,30,30);
}
body::-webkit-scrollbar{
    width: 10px;
}
body::-webkit-scrollbar-track{
    background: rgb(35,35,35);
}
body::-webkit-scrollbar-thumb{
    background: rgb(50,50,50);
}
a{
    text-decoration: none; color: black;
}
/*---INTRO---*/
#introCont{
    padding-bottom: 50px; padding-top: 0px;
    color: white;
}
#title{
    width: 800px;
    margin-bottom: 10px;
    font-family: built titling; font-size: 130px; line-height: 120px;
}
#titleDesc{
    width: 500px; max-width: 500px;
    font-family: gravity;
}

/*---FOOTER---*/
#footerBack{
    background: rgb(20,20,20) !important;
}
#footerOverlay{
    background: rgb(235,235,235) !important;
}
footer div{
    color: rgb(60,60,60) !important;
}
footer div:hover{
    color: rgb(90,90,90) !important;
}

/*---PAGE---*/
#main{
    display: table; box-sizing: border-box;
    width: 1200px;
    margin: 10px auto 50px auto; padding: 40px 10px 20px 10px;
}

/*--MENU---*/
nav{
    z-index: 4;
    position: fixed; top: 0; left: 0;
    height: 60px; width: 100%;
    /*background: rgba(255,255,255,0.1);*/
    transition: 0.5s;
}
#menuCont{
    box-sizing: border-box; display: table;
    width: 1200px; height: 100%;
    margin: auto;
}
#menuBtnCont:hover .menuBtn{
    color: rgb(200,200,200);
}
#menuBtnCont:hover .menuBtn.menuIcon{
    background: url("Resources/menuBoth.png") no-repeat -20px center;
}
.menuBtn{
    box-sizing: border-box;
    float: left;
    height: 100%;
    padding: 0px 2px 0px 10px;
    font-family: built titling; letter-spacing: 2px; font-size: 30px; color: rgb(120,120,120); line-height: 60px; color: white;
    transition: line-height 0.5s, height 0.5s, color 0.05s;
}
.menuBtn.menuIcon{
    width: 20px; height: 57px;
    padding: 0px;
    background: url("Resources/menuBoth.png") no-repeat 0px center;
}
.menuBtn.menuIcon img{
    position: absolute;
    margin-top: 18px;
    height: 21px;
}
#menuBtnCont:hover{
    cursor: pointer;
}
#menuBack{
    z-index: 8; display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
}

#mobileMenu{
    z-index: 9; box-sizing: border-box; overflow: auto; display: none;
    position: fixed; top: 0; left: -500px;
    width: 500px; height: 100%;
    padding: 20px 20px 40px 20px;
    background: rgba(20,20,20,1);
    transition: 0.2s;
}
#mobileMenu::-webkit-scrollbar{width: 10px;}
#mobileMenu::-webkit-scrollbar-track{background: rgb(35,35,35);}
#mobileMenu::-webkit-scrollbar-thumb{background: rgb(50,50,50);}

.menuSplitter{
    position: relative;
    width: 100%; height: 1px;
    margin: 10px 0px 10px 0px;
    background: rgb(90,90,90);
}
#hideMenuBtn{
    display: none;
    position: fixed; bottom: 0;
    /*width: calc(100% - 40px);*/ height: 40px;
    background: rgb(60,60,60);
    text-align: center; line-height: 40px; font-size: 30px; font-family: built titling; letter-spacing: 2px; color: rgb(20,20,20);
}
#hideMenuBtn:hover{
    cursor: pointer;
}
#closeMenuBtn{
    box-sizing: border-box; overflow: hidden;
    position: fixed; left: 0px; top: 10px;
    width: 0px; height: 45px;
    background: rgb(20,20,20);
    line-height: 43px; text-align: center; font-size: 25px; color: white;
    transition: left 0.2s;
}
#closeMenuBtn:hover{
    cursor: pointer;
    background: red;
}
.mMenuBtn{
    display: table; box-sizing: border-box;
    position: relative;
    width: 100%; height: 125px;
    padding: 0px 25px 0px 25px; margin: 5px 10px 10px 0px;
    
    color: rgb(235,235,235); font-family: built titling light; letter-spacing: 2px; font-size: 60px; line-height: 125px
}
.mMenuBtn:hover{
    cursor: pointer;
}
.mMenuBtn:hover .btnCover{
    width: 100%;
}
.btnBack{
    z-index: -2;
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}
.btnCover{
    z-index: -1;
    position: absolute; top: 0; left: 0;
    width: 0px; height: 100%;
    background: rgba(40,40,40,0.8);
    transition: 0.2s;
}

#mobileMenu a:nth-of-type(1) div .btnBack{background: linear-gradient(rgba(40,40,40,0.6),rgba(40,40,40,0.6)),url(../../../../games/need-for-speed/2015/blacklist/Resources/Images/Menu/menuImage1.jpg) no-repeat center; background-size: cover;}
#mobileMenu a:nth-of-type(2) div .btnBack{background: linear-gradient(rgba(40,40,40,0.6),rgba(40,40,40,0.6)),url(../../../../games/need-for-speed/2015/blacklist/Resources/Images/Menu/menuImage2.jpg) no-repeat center; background-size: cover;}
#mobileMenu div:nth-of-type(1) .btnBack{background: linear-gradient(rgba(40,40,40,0.6),rgba(40,40,40,0.6)),url(../../../../games/need-for-speed/2015/blacklist/Resources/Images/Menu/menuImage3.jpg) no-repeat center; background-size: cover;}
#mobileMenu a:nth-of-type(3) div{display: none;}
#mobileMenu a:nth-of-type(4) div .btnBack{background: linear-gradient(rgba(40,40,40,0.7),rgba(40,40,40,0.7)),url(../../../../games/need-for-speed/2015/blacklist/Resources/Images/Menu/menuImage4.jpg) no-repeat center; background-size: cover;}
#mobileMenu a:nth-of-type(5) div .btnBack{background: linear-gradient(rgba(40,40,40,0.6),rgba(40,40,40,0.6)),url(../../../../games/need-for-speed/2015/blacklist/Resources/Images/Menu/menuImage5.jpg) no-repeat center; background-size: cover;}

/*---BUTTON---*/
.button{
    display: table; overflow: hidden;
    position: relative;
    padding: 10px 20px 10px 20px;
    background: white;
    font-family: built titling; color: black; font-size: 25px;
}
.button:hover{
    cursor: pointer;
}
.buttonOverlay{
    overflow: hidden; box-sizing: border-box;
    position: absolute; top: 0; left: 0px;
    height: 100%; width: 0px;
    background: rgb(230,230,230);
    transition: 0.2s;
}
.button:hover .buttonOverlay{
    width: 100%;
}
.buttonText{
    width: 300px;
}
.buttonTextCont{margin: 10px 0px 0px 20px;}
.button:hover .buttonTextCont{color: black;}

/*---RULES WINDOW----*/
#rulesWindow{
    display: none;
}
#rulesWindowCont{
    z-index: 5; overflow: hidden;
    position: fixed; top: 50px; left: calc(50% - 300px);
    width: 600px; height: calc(100% - 100px);
    background: white;
}
#windowBack{
    z-index: 4;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
}
#rulesWindow iframe{
    box-sizing: border-box; overflow: auto !important;
    width:100% !important; height: 100%;
    border: none;
}
#closeWindowBtn{
    position: absolute; right: 8px; top: 10px;
    width: 35px; height: 35px;
    background: red;
    color: white; font-size: 19px; line-height: 35px; text-align: center;
}
#closeWindowBtn:hover{
    background: darkred;
    cursor: pointer;
}

@media screen and (max-width: 1400px){
    #menuCont{
        width: 980px;
    }
    #main{
        width: 980px !important;
    }
}
@media screen and (max-width: 1000px){
    #menuCont{
        width: 100%;
    }
    #menuCont:hover{
        cursor: pointer;
    }
    #menuBtnCont{
        width: 100%; height: 60px;
    }
    #mobileMenu{
        left: 0px;
        width: 100%;
    }
    #hideMenuBtn{
        display: block;
    }
    
    #main{
        width: 100% !important;
        padding: 40px 10px 0px 10px;
    }
    #title{
        width: 100%;
    }
    #titleCont{
        padding-bottom: 25px; padding-top: 0px;
        color: white;
    }
    #titleDesc{
        font-family: gravity; width: 100%;
    }
    
    #rulesWindow{
        left: 0; top: 0;
        width: 100%; height: 100%;
    }
    #rulesWindowCont{
        left: 0; top: 0;
        width: 100%; height: 100%;
    }
    #rulesWindowCont iframe{
        width: 100%;
    }
}
@media screen and (max-width: 720px){
    #title{
        font-size: 70px; line-height: 70px;
    }
    
    .wmng-link{
        width: 100%;
    }
}
@media screen and (max-width: 500px){
    .mMenuBtn{
        height: 100px;
        padding: 0px 15px 0px 15px;
        font-size: 47px; line-height: 100px;
    }
}

@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");
}
@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");
}