/*General Styles*/

@font-face {
    font-family: 'CeraGRMedium-Richkid';
    src: url('../fonts/CeraGRMedium-Richkid.eot');
    src: url('../fonts/CeraGRMedium-Richkid.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CeraGRMedium-Richkid.woff') format('woff'),
         url('../fonts/CeraGRMedium-Richkid.ttf') format('truetype'),
         url('../site/fonts/CeraGRMedium-Richkid.svg#CeraGRMedium-Richkid') format('svg');
    font-weight: normal;
    font-style: normal;
    /*unicode-range: U+040-07F;   */    /* unicode for a-z and A-Z letters only! */
}

body { background: #0E0E0E; height: 100%; font-size: 18px; font-family: 'CeraGRMedium-Richkid'; margin: 0; box-sizing: border-box;}
.contentContainer { max-width: 545px; height:100vh; position: relative; background: url('/images/bg.jpg'); background-size: contain; background-position: center; 
    background-repeat: no-repeat; margin: 0 auto; overflow: hidden;}

/*Header*/
#header { position: relative; top: 16%; margin-right: 25px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

/*Logo*/
.logo-container { text-align: center;}
.logo-container img { max-width: 380px;}

/*Link Section*/
.linkContainer { position: relative; top: 52%; left: 13%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.link-box { text-transform: uppercase; margin-bottom: 25px;}
.link-box a { display: inline-block; color: #fff; font-size: 135%; font-family: 'CeraGRMedium-Richkid'; border: 1px solid #fff; border-radius: 3px; padding: 10px 17px; text-decoration: none;}

@media(min-width: 768px) and (max-width: 1024px) {
    /*Link Section*/
    .contentContainer { background-size: cover;}
    .linkContainer { padding: 0 5px;}
    .link-box { margin-bottom: 24px;}
}

@media(min-width: 768px) and (max-width: 959px) {
    /*Link Section*/
    .link-box a { padding: 11px 17px;}
}

@media(max-width: 767px) {
    /*Header*/
    #header { top: 105px; margin-right: 0;}
    .logo-container { margin-right: 35px}
    .logo-container img { max-width: 270px; }

    /*Logo*/
    .contentContainer { background-size: cover;}

    /*Link Section*/
    .linkContainer { top: 53%;}
    .link-box { margin-bottom: 17px;}
    .link-box a { font-size: 106%; padding: 7px 10px;}
}

@media(max-width: 375px) {
    /*Header*/
    #header { top: 120px; }
    .logo-container { margin-right: 10px;}

    /*Link Section*/
    .link-box a { font-size: 95%; }
}

@media(max-width: 360px) {
    /*Link Section*/
    .linkContainer {top: 51%; left: 11%;}
    .link-box { margin-bottom: 15px; }
    /*.link-box a { font-size: 105%; }*/
}

@media(max-width: 320px) {
    /*Header*/
    #header { top: 100px; }
    .logo-container img { max-width: 235px; }

    /*Link Section*/
    .linkContainer { top: 53%;}
    .link-box a { font-size: 87%; }
}