#header,
#main {
    border-bottom: solid 4px rgba(0, 0, 0, .4)
}

#footer:before,
.section .section-body:before {
    content: " ";
    top: 0;
    pointer-events: none
}

#feature-ad-img,
#titleImage,
.news-links a {
    cursor: pointer
}

:not(.adsbygoogle) {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: initial;
    -webkit-tap-highlight-color: transparent
}

html:not(.adsbygoogle) {
    background-color: #FFF;
    width: 100%;
    height: 100%;
    min-width: 320px;
    min-height: 240px;
    /*overflow-x: hidden*/
}

body:not(.adsbygoogle) {
    min-height: 100%;
    min-width: 100%;
    line-height: 0;
    /*overflow: hidden;*/
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

}

#game-frame {
    position: relative;
    border: none;
    width: 100%;
    height: 100%;
    outline: 0 !important
}

img:not(.adsbygoogle) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: auto;
    height: auto
}

a:not(.adsbygoogle) {
    outline: 0
}

#header {
    z-index: 50;
    height: 71px
}

#main {
    display: block;
    width: 100%;
    padding-bottom: 40px
}



#footer:before {
    box-shadow: inset 0 0 20px #000;
    width: 140%;
    height: 140%;
    left: -20%;
    position: absolute
}

.left,
.right {
    float: left;
    height: 100%;
    display: block;
    width: 185px;
    min-height: 10px
}

.middle {
    float: left;
    width: calc(100% - 370px);
    z-index: 2;
}

#header .middle {
    height: 100%
}


#feature-holder {
    min-height: 100px;
    border: 4px solid rgba(0, 0, 0, .4);
    border-top: 0;
    height: -moz-calc(100vh - 71px - 10px);
    height: -webkit-calc(100vh - 71px - 10px);
    height: calc(100vh - 71px - 10px)
}

#content2 {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: auto
}

#feature {
    width: 100%;
    height: 100%
}

#game-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("https://static.skillcap.net/htmlGames/nardi/shared/img/background.jpg");
    background-size: cover;
}

#feature-ad-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: none;
    background: #000;
    text-align: center
}

#feature-ad {
    max-width: 100%;
    max-width: -moz-calc(100% - 20px);
    max-width: -webkit-calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 0 auto auto;
    height: 100%
}

#feature-ad-close-btn {
    float: right;
    margin-top: 10px;
    margin-bottom: 8px;
    cursor: pointer
}

#feature-ad-text {
    font-size: 30px;
    padding-top: 26px;
    margin-bottom: 10px;
    pointer-events: none;
    color: #FFF !important;
    text-shadow: initial
}

.section h1,
.section h2 {
    text-align: center;
    text-shadow: 1px 1px 1px #000
}

#feature-ad-img {
    max-width: 100%;
    max-height: calc(100% - 80px)
}

.section {
    margin-top: 40px;
    margin-left: 8%;
    margin-right: 8%
}

.section h1 {
    font-size: 30pt;
    line-height: 30pt
}

.section h2 {
    font-size: 18pt
}

.section .section-body {
    margin-top: 12px;
    /*border: 3px solid #eee;*/
    /*border-radius: 14px;*/
    padding: 7px 15px;
    text-shadow: 1px 1px 1px #333
}

.section .section-body:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    /*border-radius: 11px;*/
    /*box-shadow: inset 0 0 10px 0 #000*/
}

.section .section-body p {
    text-align: justify;
    font-size: 16pt;
    line-height: 18pt;
    padding: 14pt
}

.section .section-body ul {
    margin-left: 23px;
    font-size: 18pt;
    padding: 14pt;
    line-height: normal
}

.section .section-body ul li {
    padding: 8px
}

.section .section-body ol {
    margin-left: 23px;
    font-size: 18pt;
    padding: 14pt;
    line-height: normal
}

.section .section-body ol li {
    padding: 8px
}

.section .section-body a {
    color: #fff
}

.section .section-body a:hover {
    color: #ffba00
}

.game-links {
    display: inline-block;
    width: 100%
}

.game-links a {
    text-decoration: none
}

.game-links a:link {
    color: #fff
}

.game-links a:active {
    color: #ffba00
}

.game-links a:visited {
    color: #fff
}

.game-links a:hover {
    color: #ffba00
}

.game-links .game-link {
    display: inline-block;
    float: left;
    width: 33.33%;
    padding: 20px;
    text-align: center;
    margin-bottom: 40px;
    line-height: normal
}

.game-links .game-link img {
    display: inline-block;
    margin: auto;
    width: 90%;
    max-width: 90px
}

.game-links .game-link img:hover {
    transform: scale(1.1, 1.1)
}

.game-links .game-link h3 {
    display: inline-block;
    font-size: 16pt;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    white-space: pre
}

.game-links .game-mode-link img {
    max-width: 240px;
    width: 90%;
    border-radius: 6px;
    border: 2.5px solid #ccc;
    box-shadow: 0 0 6px #000
}

.social-above .shadow:before,
.social-below .shadow:before {
    content: " ";
    box-shadow: inset 0 0 6px 0 #000
}

.game-links .game-mode-link img:hover {
    transform: scale(1.05, 1.05)
}

.news-links {
    text-align: center;
    padding: 7px
}

.news-links a:link {
    color: #fff
}

.news-links a:active {
    color: #ffba00
}

.news-links a:visited {
    color: #fff
}

.news-links a:hover {
    color: #ffba00
}

.news-links .news-link {
    padding: 7px;
    line-height: normal
}

.news-links .story-title {
    display: inline-block;
    clear: both;
    text-decoration: underline;
    font-size: 20pt
}

.news-links .story-date {
    display: inline-block;
    clear: both;
    color: #ccc;
    font-size: 12pt
}

.social-above,
.social-below {
    max-height: 56px;
    min-height: 41px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, .25)
}

.social-above {
    padding: 11px 20px 3px;
    width: 254px;
    position: absolute;
    right: 5px;
    bottom: 0;
    border-radius: 10px 10px 0 0;
    border: 1px solid #000;
    border-bottom: 0
}

.social-above .shadow,
.social-above .shadow:before {
    width: 100%;
    position: absolute;
    left: 0;
    pointer-events: none;
    top: 0
}

.social-above .fb-holder {
    padding-top: 6px;
    display: inline-block;
    transform: translateY(-5px)
}

.social-above .shadow {
    /*overflow: hidden;*/
    height: 100%
}

.social-above .shadow:before {
    height: calc(100% + 20px);
    border-radius: 10px 10px 0 0
}

.social-below {
    padding: 8px 20px 7px;
    width: 254px;
    margin-left: 50%;
    left: -127px;
    display: none;
    border-radius: 0 0 10px 10px;
    border: 1px solid #000;
    border-top: 0
}

.social-below .shadow,
.social-below .shadow:before {
    width: 100%;
    position: absolute;
    left: 0;
    pointer-events: none
}

.social-below .fb-holder {
    display: inline-block;
    padding-top: 6px;
    transform: translateY(-5px)
}

.social-below .shadow {
    top: 0;
    /*overflow: hidden;*/
    height: 100%
}

.social-below .shadow:before {
    height: calc(100% + 20px);
    top: -20px;
    border-radius: 0 0 10px 10px
}

.aspace {
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    box-sizing: initial;
    border: 4px solid rgba(0, 0, 0, .4);
    background: rgba(0, 0, 0, .2)
}

.adblock #feature-holder,
.mobile #feature-holder {
    border-left-width: 0;
    border-right-width: 0
}

.aspace-h {
    width: 728px;
    height: 90px
}

.aspace-v {
    width: 160px;
    height: 600px
}

@media (max-width: 520px) {
    .game-links .game-link {
        width: 50%;
    }
}

@media (max-width: 360px) {
    .game-links .game-link {
        width: 100%;
    }
}