@font-face {
    font-family: 'Roboto Condensed';
    src: url("../fonts/RobotoCondensed-Light.eot");
    src: url("../fonts/RobotoCondensed-Light.eot#iefix") format("embedded-opentype"), url("../fonts/RobotoCondensed-Light.woff") format("woff"), url("../fonts/RobotoCondensed-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url("../fonts/RobotoCondensed-Regular.eot");
    src: url("../fonts/RobotoCondensed-Regular.eot#iefix") format("embedded-opentype"), url("../fonts/RobotoCondensed-Regular.woff") format("woff"), url("../fonts/RobotoCondensed-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url("../fonts/RobotoCondensed-Bold.eot");
    src: url("../fonts/RobotoCondensed-Bold.eot#iefix") format("embedded-opentype"), url("../fonts/RobotoCondensed-Bold.woff") format("woff"), url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
}
/*BARLOW*/
@font-face {
    font-family: 'BARLOW Condensed';
    src: url("../fonts/BarlowCondensed-ExtraLight.eot");
    src: url("../fonts/BarlowCondensed-ExtraLight.eot#iefix") format("embedded-opentype"), url("../fonts/BarlowCondensed-ExtraLight.woff") format("woff"), url("../fonts/BarlowCondensed-ExtraLight.woff2") format("woff2"), url("../fonts/BarlowCondensed-ExtraLight.otf") format("opentype"), url("../fonts/BarlowCondensed-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 100;
}
@font-face {
    font-family: 'BARLOW Condensed';
    src: url("../fonts/BarlowCondensed-Light.eot");
    src: url("../fonts/BarlowCondensed-Light.eot#iefix") format("embedded-opentype"), url("../fonts/BarlowCondensed-Light.woff") format("woff"), url("../fonts/BarlowCondensed-Light.woff2") format("woff2"), url("../fonts/BarlowCondensed-Light.otf") format("opentype"), url("../fonts/BarlowCondensed-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
}
@font-face {
    font-family: 'BARLOW Condensed';
    src: url("../fonts/BarlowCondensed-Regular.eot");
    src: url("../fonts/BarlowCondensed-Regular.eot#iefix") format("embedded-opentype"), url("../fonts/BarlowCondensed-Regular.woff") format("woff"), url("../fonts/BarlowCondensed-Regular.woff2") format("woff2"), url("../fonts/BarlowCondensed-Regular.otf") format("opentype"), url("../fonts/BarlowCondensed-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'BARLOW Condensed';
    src: url("../fonts/BarlowCondensed-Medium.eot");
    src: url("../fonts/BarlowCondensed-Medium.eot#iefix") format("embedded-opentype"), url("../fonts/BarlowCondensed-Medium.woff") format("woff"), url("../fonts/BarlowCondensed-Medium.woff2") format("woff2"), url("../fonts/BarlowCondensed-Medium.otf") format("opentype"), url("../fonts/BarlowCondensed-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: 'BARLOW Condensed';
    src: url("../fonts/BarlowCondensed-SemiBold.eot");
    src: url("../fonts/BarlowCondensed-SemiBold.eot#iefix") format("embedded-opentype"), url("../fonts/BarlowCondensed-SemiBold.woff") format("woff"), url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2"), url("../fonts/BarlowCondensed-SemiBold.otf") format("opentype"), url("../fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: 'BARLOW Condensed';
    src: url("../fonts/BarlowCondensed-Bold.eot");
    src: url("../fonts/BarlowCondensed-Bold.eot#iefix") format("embedded-opentype"), url("../fonts/BarlowCondensed-Bold.woff") format("woff"), url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"), url("../fonts/BarlowCondensed-Bold.otf") format("opentype"), url("../fonts/BarlowCondensed-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
}
/*SST ARABIC*/
@font-face {
    font-family: "SST Arabic";
    src: url(../fonts/SSTArabic-Light.eot);
    src: url(../fonts/SSTArabic-Light.eot?#iefix) format("embedded-opentype"), url(../fonts/SSTArabic-Light.woff2) format("woff2"), url(../fonts/SSTArabic-Light.woff) format("woff"), url(../fonts/SSTArabic-Light.ttf) format("truetype"), url(../fonts/SSTArabic-Light.svg#SSTArabic-Light) format("svg");
    font-style: normal;
    font-weight: 100;
}
@font-face {
    font-family: "SST Arabic";
    src: url(../fonts/SSTArabic-Light.eot);
    src: url(../fonts/SSTArabic-Light.eot?#iefix) format("embedded-opentype"), url(../fonts/SSTArabic-Light.woff2) format("woff2"), url(../fonts/SSTArabic-Light.woff) format("woff"), url(../fonts/SSTArabic-Light.ttf) format("truetype"), url(../fonts/SSTArabic-Light.svg#SSTArabic-Light) format("svg");
    font-style: normal;
    font-weight: 200;
}
@font-face {
    font-family: "SST Arabic";
    src: url(../fonts/SSTArabic-Roman.eot);
    src: url(../fonts/SSTArabic-Roman.eot?#iefix) format("embedded-opentype"), url(../fonts/SSTArabic-Roman.woff2) format("woff2"), url(../fonts/SSTArabic-Roman.woff) format("woff"), url(../fonts/SSTArabic-Roman.ttf) format("truetype"), url(../fonts/SSTArabic-Roman.svg#SSTArabic-Roman) format("svg");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "SST Arabic";
    src: url(../fonts/SSTArabic-Medium.eot);
    src: url(../fonts/SSTArabic-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/SSTArabic-Medium.woff2) format("woff2"), url(../fonts/SSTArabic-Medium.woff) format("woff"), url(../fonts/SSTArabic-Medium.ttf) format("truetype"), url(../fonts/SSTArabic-Medium.svg#SSTArabic-Medium) format("svg");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "SST Arabic";
    src: url(../fonts/SSTArabic-Bold.eot);
    src: url(../fonts/SSTArabic-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/SSTArabic-Bold.woff2) format("woff2"), url(../fonts/SSTArabic-Bold.woff) format("woff"), url(../fonts/SSTArabic-Bold.ttf) format("truetype"), url(../fonts/SSTArabic-Bold.svg#SSTArabic-Bold) format("svg");
    font-weight: 700;
    font-style: normal;
}
/*Font Faces*/
body{
    background-image: url("../imgs/superstar.jpg");
    background-position:left top ;
    background-repeat: no-repeat;
    background-size: 900px 440px;
    width: 900px;
    height: 440px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-family: 'BARLOW Condensed', 'SST Arabic', 'Roboto Condensed', sans-serif;
    font-weight: 400;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*Set Upper Buttons Config (Close / Minimize buttons )*/
#upper-buttons{
    height: 28px;
    overflow: hidden;
    width: 100%;
    margin: 15px 0 0;
    padding: 0 17px;
}
.upper-version{
    height: 28px;
    overflow: hidden;
    float: left;
    text-shadow: 0 0 3px #000000ad;
    color: rgba(180, 205, 228, 0.45);
    padding: 0;
    margin: 0;
    display: inline-block;
}
.upper-version p{
    display: inline-block;
    overflow: hidden;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    border-right: 1px solid rgba(64, 96, 107, 0.3);
    padding: 0 5px 0 0;
    margin: 0 5px 0 0;
}
.upper-btn{
    width: 28px;
    height: 28px;
    overflow: hidden;
    display: block;
    float: right;
    margin: 0 1px;
    padding: 0;
    background-repeat: no-repeat;
    background-image: url('../imgs/closemin-buttons.png');
    background-position-y: 0;
}
.upper-btn:hover{
    background-position-y: -28px;
}
.upper-close{
    background-position-x: -28px;
}
.upper-min{
    background-position-x: 0;
}
/*Set mid */
#mid-upper-buttons{
    width: 100%;
    overflow: hidden;
    height: 34px;
    margin: 0;
    padding: 0 112px;
}
.mid-upper-btn{
    width: 98px;
    height: 34px;
    overflow: hidden;
    display: block;
    padding: 0;
    margin: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
}
.mid-upper-btn:hover{
    background-position-y: -34px;
}
.discord-btn{
    float: right;
    background-image: url('../imgs/discord-button.png');
}
.signup-btn{
    float: left;
    background-image: url('../imgs/signup-btn.png');
}
/*Main Section Where Progress / launcher button will be set */
#main-section{
    width: 100%;
    overflow: hidden;
    margin: 54px 0 0;
    padding: 0;
}
.main-message h4{
    width: 40%;
    overflow: hidden;
    margin: 0 30%;
    padding: 0;
    color: #fff;
    text-shadow: 0 0 3px #fff;
    font-size: 18px;
    line-height: 22px;
    height: 22px;
    font-weight: normal;
    text-align: center;
}
.main-message p{
    font-size: 14px;
    line-height: 16px;
    height: 16px;
    overflow: hidden;
    text-align: center;
    width: 40%;
    margin: 5px 30%;
    padding: 0;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.75);
}
.progress-bg{
    background-image: url('../imgs/progress-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    width: 324px;
    height: 36px;
    overflow: hidden;
    margin: 0 auto;
    padding: 10px 9px;
}
.progress-center{
    background-image: url('../imgs/progress-left-full.png'),url('../imgs/progress-right-full.png');
    background-position: left center,right center;
    background-repeat: no-repeat;
    height: 16px;
    overflow: hidden;
    margin: 0 auto;
}
/*launcher /start button */
.launcher-button{
    margin: 34px auto 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    height: 88px;
    width: 100%;
}
.str-btn{
    display: block;
    overflow: hidden;
    background-image: url('../imgs/play-button.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 174px;
    height: 88px;
    padding: 0;
    margin:0 auto;
}
.lnc-btn{
    display: block;
    overflow: hidden;
    background-image: url('../imgs/play-button.png');
    background-repeat: no-repeat;
    background-position: 0 -88px;
    width: 174px;
    height: 88px;
    padding: 0;
    margin: 0 auto;
}
.lnc-btn:hover{
    background-position-y: -176px;
}
#footer-sect{
    margin: 17px 0 0;
    padding: 0 19px;
}
#footer-sect p{
    font-size: 10px;
    font-weight: 400;
    color: #5a7d95;
    text-shadow: 0 0 2px #000;
    overflow: hidden;
    padding: 0;
    margin: 0;

}