@font-face{
    font-family:Standard;
    src:url("../fonts/Highlander.ttf")
}
html,body{
    height:100%
}
body{
    background-color:#000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    min-height:100vh;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
div{
    width:100%;
    box-sizing:border-box;
    -webkit-transition-duration:.2s;
    transition-duration:.2s
}
html,body,div,h1,h2,h3,h4,p,ul,li{
    margin:0;
    padding:0
}
h1,h2,h3,li{
    font-weight:100
}
h1,h2,h3,li,p{
    font-family:'Roboto'
}
p{
    font-weight:thin;
    color:#D9CEBA
}
a,li,h1,h2,h3{
    color:gold
}
a,li,p{
    font-size:18px;
    text-decoration:none
}
li{
    list-style:none
}
img{
    width:100%;
    height:auto
}
#wrapper{
    max-width:1980px;
    margin:0 auto
}
.button{
    width:70px;
    height:30px;
    border-radius:10px;
    background-color:#1d0f0c;
    text-align:center;
    line-height:25px
}
.button p{
    color:gold;
    margin:0 auto
}
.button:hover{
    border:1px solid #D9CEBA
}
.button:hover p{
    color:#D9CEBA
}
@media screen and (min-width: 1280px){
    .button{
        width:120px;
        height:50px;
        border-radius:2px;
        line-height:50px
    }
}
.newspage p,.lead p{
    text-align:justify
}
.form{
    width:83.33333%;
    padding:0 0 50px 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin:0 auto;
    -ms-flex-flow:column;
    flex-flow:column
}
@media screen and (min-width: 768px){
    .form{
        width:41.66667%
    }
}
@media screen and (min-width: 1280px){
    .form{
        width:25%
    }
}
.form input{
    width:100%;
    height:50px;
    margin-bottom:25px;
    text-align:center;
    border-radius:2px;
    border:none;
    padding:0 15px
}
.form h1{
    margin-bottom:50px
}
.form h1,.form p{
    text-shadow:0 3px 1px #222
}
.form p{
    text-align:left;
    font-size:12px
}
.form .button{
    color:gold;
    width:auto;
    border:none;
    margin-bottom:15px
}
@media screen and (min-width: 1280px){
    .form{
        padding:100px 0
    }
    .form input{
        height:40px;
        text-align:left
    }
    .form p{
        font-size:14px;
        max-width:350px
    }
}
.form .accountOnly{
    display:none
}
.form .checkAge{
    display:inline-block;
    text-align:center;
    margin:0 auto;
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.form .checkAge div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-flow:column;
    flex-flow:column;
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.form .checkAge div input{
    text-align:justify;
    width:20px;
    height:20px;
    float:left;
    margin:0 auto
}
@media screen and (min-width: 768px){
    .form .checkAge div{
        -ms-flex-flow:row;
        flex-flow:row
    }
    .form .checkAge div input{
        margin:0 15px 0 0
    }
}
#fixed-menu{
    top:0;
    left:0;
    right:0;
    margin:0 auto;
    position:fixed;
    height:50px
}
#nofixed-menu{
    position:relative;
    height:75px
}
.menu{
    width:100%;
    max-width:1680px;
    margin:50px auto;
    -webkit-transition-duration:.5s;
    transition-duration:.5s;
    z-index:990
}
.menu .mainmenu{
    position:fixed;
    top:0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
@media screen and (min-width: 1280px){
    .menu .mainmenu{
        position:relative;
        z-index:2
    }
}
.menu .mainmenu .bar{
    position:fixed;
    top:0;
    height:60px;
    background:url("../images/placeholder/nav.jpg") #000;
    background-size:100% 100%;
    border-radius:3px;
    box-shadow:0 0 5px 0 #000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:0 15px
}
@media screen and (min-width: 1280px){
    .menu .mainmenu .bar{
        height:130%;
        position:relative
    }
}
.menu .mainmenu .bar .logo{
    height:50px;
    width:auto
}
.menu .mainmenu .bar .logo img{
    height:100%;
    width:auto
}
@media screen and (min-width: 1280px){
    .menu .mainmenu .bar .logo{
        width:400px;
        height:auto
    }
    .menu .mainmenu .bar .logo img{
        width:100%;
        height:auto
    }
}
.menu .mainmenu .bar .mainnav{
    display:none;
    height:100%
}
@media screen and (min-width: 1280px){
    .menu .mainmenu .bar .mainnav{
        display:inline-block
    }
}
.menu .mainmenu .bar .mainnav ul{
    display:inline-block;
    height:100%;
    float:left;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.menu .mainmenu .bar .mainnav ul:last-child{
    float:right
}
.menu .mainmenu .bar .mainnav ul li{
    height:100%
}
.menu .mainmenu .bar .mainnav ul li:hover{
    cursor:pointer
}
.menu .mainmenu .bar .mainnav ul li a{
    height:100%;
    padding:0 30px;
    border:1px solid;
    border-color:transparent #473628 transparent transparent;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.menu .mainmenu .bar .mainnav ul li a div{
    float:left;
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.menu .mainmenu .bar .mainnav ul li a div p{
    font-family:'Standard';
    font-size:25px;
    background:-webkit-linear-gradient(gold, #ffef99);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
.menu .mainmenu .bar .mainnav ul li a .arrow{
    width:49px;
    height:49px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg)
}
.menu .mainmenu .bar .mainnav ul li a:hover div p{
    background:-webkit-linear-gradient(#D9CEBA, #fff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
.menu .mainmenu .bar .mainnav .login{
    position:relative
}
.menu .mainmenu .bar .mainnav .login .loginManagement{
    position:absolute;
    height:100%;
    background-color:#1d0f0c;
    top:100%;
    left:0;
    display:none
}
.menu .mainmenu .bar .mainnav .login .loginManagement h3{
    margin:0 auto
}
@media screen and (min-width: 1280px) {

  .menu .mainmenu .bar .mainnav .login > li > div > a > div {
    position: relative;
    width: 100%;
  }

  .menu .mainmenu .bar .mainnav .login .frame {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    z-index: 2;
  }

  .menu .mainmenu .bar .mainnav .login li .avatar-div {
    position: relative;
  }

  .menu .mainmenu .bar .mainnav .login .avatar-div .mail {
    padding-top: 35px;
  }

  .menu .mainmenu .bar .mainnav .login .avatar-div .mail span {
    position: absolute;
    z-index: 4;
    left: -66px;
    padding-top: 4px;
    font-size: 7px;
  }

  .menu .mainmenu .bar .mainnav .login .avatar-div .mail div img {
    height:32px;
    width:32px;
    right: 59px;
    position: absolute;
    z-index: 3;
  }

    .menu .mainmenu .bar .mainnav .login:hover .loginManagement{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
    .menu .mainmenu .bar .mainnav .login .avatar_loggedIn{
        padding-left:25px;
        border:1px solid;
        border-color:transparent transparent transparent #473628
    }
    .menu .mainmenu .bar .mainnav .login .avatar_loggedIn div{
        width:50px;
        height:100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
    .menu .mainmenu .bar .mainnav .login .avatar_loggedIn div img{
        width:50px;
        height:50px;
        border-radius:50%
    }
}
.menu .submenu{
    display:none;
    max-width:1680px;
    background-color:#000;
    padding:50px 8.33333%;
    position:absolute;
    -webkit-transition-duration:0s;
    transition-duration:0s
}
.menu .submenu .content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.menu .submenu .content .topic{
    min-height:180px;
    width:20%;
    margin-right:8.33333%
}
.menu .submenu .content .topic h2{
    font-size:18px;
    color:#D9CEBA;
    border:1px solid;
    font-weight:bold;
    border-color:transparent transparent gold transparent
}
.menu .submenu .content .topic h2,.menu .submenu .content .topic ul a li{
    font-family:'Roboto'
}
.menu .submenu .content .topic ul{
    padding-top:25px
}
.menu .submenu .content .topic ul a,.menu .submenu .content .topic ul a li{
    font-weight:thin
}
.menu .submenu .content .topic ul a:hover,.menu .submenu .content .topic ul a li:hover{
    color:#D9CEBA
}
.touchmenu{
    padding:50px 0;
    width:100%;
    height:100%;
    top:0;
    background-color:#000;
    position:fixed;
    z-index:999;
    display:none;
    -webkit-transition-duration:0s;
    transition-duration:0s;
    overflow-y:scroll
}
@media screen and (min-width: 768px){
    .touchmenu{
        width:50%
    }
}
.touchmenu .bar{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.touchmenu .bar .closebutton{
    width:8.33333%;
    margin:0 8.33333%
}
.touchmenu .bar .closebutton div{
    width:50px;
    height:50px;
    position:relative
}
.touchmenu .bar .closebutton div:before,.touchmenu .bar .closebutton div:after{
    content:'';
    position:absolute;
    background-color:gold;
    width:70%;
    height:3px;
    border-radius:20px;
    bottom:50%
}
.touchmenu .bar .closebutton div:before{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.touchmenu .bar .closebutton div:after{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.touchmenu .bar .logo{
    width:66.66667%
}
.touchmenu .menu{
    padding:0 50px
}
.touchmenu .menu ul li{
    font-family:'Roboto';
    padding:15px 0
}
.touchmenu .menu ul li ul{
    padding-left:15px
}
.touchmenu .menu ul li ul li{
    background-color:#171717
}
.touchmenu .menu ul li ul li ul a li{
    color:#D9CEBA
}
.touchmenu .menu ul li ul,.touchmenu .menu ul li ul li ul{
    display:none
}
.video,.backgroundImage{
    position:fixed;
    top:0;
    z-index:-99
}
.video{
    left:0;
    right:0;
    max-width:3200px;
    margin:0 auto;
    display:none
}
.video video{
    width:100%
}
@media screen and (min-width: 1280px){
    .video{
        display:block
    }
}
@media screen and (min-width: 1280px){
    .backgroundImage{
        display:none
    }
}
.demo{
    margin:100px auto;
    width:66.66667%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    border-radius:20px;
    padding:30px;
    position:relative
}
.demo div{
    position:absolute;
    border-radius:20px;
    width:100%;
    height:100%;
    background-color:#000;
    z-index:-1;
    opacity:.8;
    top:0;
    left:0
}
.footer{
    max-width:1680px;
    margin:0 auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-flow:column;
    flex-flow:column;
    text-align:center;
    border-radius:5px 5px 0 0;
    padding:25px 0;
    background:url("../images/placeholder/nav.jpg") #000
}
.footer .socialMedia{
    margin:0 auto 12.5px;
    width:150px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.footer .socialMedia .pic{
    height:39px;
    width:auto
}
.footer .socialMedia .pic img{
    height:100%;
    width:auto
}
.footer .info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-flow:column;
    flex-flow:column;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
@media screen and (min-width: 768px){
    .footer .info{
        width:50%;
        max-width:500px;
        margin:0 auto;
        -ms-flex-flow:row;
        flex-flow:row
    }
}
.footer .info .logo{
    width:50%;
    max-width:450px;
    margin-bottom:12.5px
}
@media screen and (min-width: 768px){
    .footer .info .logo{
        margin-right:25px
    }
}
.footer .content{
    width:auto
}
.footer .content ul{
    display:inline-block;
    margin-bottom:25px
}
.footer .content ul li{
    display:inline;
    margin-right:25px
}
.footer .content ul li:last-child{
    margin-right:0
}
.footer p{
    font-size:8px
}
@media screen and (min-width: 768px){
    .footer p{
        font-size:12px
    }
}
.news{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-flow:column;
    flex-flow:column;
    padding:0 8.33333% 200px
}
.news p{
    font-size:12px
}
.news h2{
    font-size:14px
}
.news .latest{
    min-height:200px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-flow:column;
    flex-flow:column;
    margin-bottom:50px
}
.news .latest h1{
    font-size:35px;
    color:#fff
}
.news .latest .lead{
    width:100%
}
@media screen and (min-width: 1280px){
    .news .latest .lead{
        width:80%
    }
}

.news .latest p{
    font-size:16px
}
.news .latest .button{
    margin-top:25px
}
.news .latest .button p{
    font-size:12px
}
@media screen and (min-width: 1280px){
    .news .latest{
        margin:100px 0
    }
    .news .latest h1{
        text-shadow:3px 2px 0 #000;
        font-weight:bolder;
        font-size:65px
    }
    .news .latest p{
        text-shadow:2px 2px 0 #000;
        font-size:30px
    }
}
.news .more{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-flow:column;
    flex-flow:column
}
.news .more .article{
    margin:25px auto;
    position:relative;
    max-width:400px
}
.news .more .article:first-child{
    margin-top:0
}
.news .more .article .catcher{
    background-color:#000;
    height:135px
}
.news .more .article .catcher img{
    height:100%
}
.news .more .article .catcher img:nth-child(2){
    height:auto;
}
.news .more .article .catcher iframe{
    height:auto;
    width:100%;
    text-align:center
}
.news .more .article .info{
    padding:12.5px 15px;
    background-color:#1d0f0c;
    // height:100px;
    overflow:hidden
}
.news .more .article .info .content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.news .more .article .info .content .headline{
    width:83.33333%;
    margin-right:8.33333%
}
.news .more .article .info .content .comment{
    width:50px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.news .more .article .info .content .comment .icon{
    margin-right:10px;
    width:10px;
    height:10px;
    background:url("../images/icons/flatlander.ico");
    background-position:left;
    background-size:10px 10px
}
@media screen and (min-width: 1280px){
    .news .more{
        -ms-flex-flow:row;
        flex-flow:row;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    .news .more .article{
        margin:0 25px 0 0
    }
    .news .more .article h2{
        font-size:16px
    }
    .news .more .article p{
        font-size:14px
    }
    .news .more .article .catcher{
        height:175px;
        position:relative
    }
    .news .more .article .catcher iframe{
        height:100%;
        width:auto;
        max-width:100%;
        position:absolute;
        left:0;
        right:0;
        margin:0 auto
    }
}
.newspage{
    margin:0 auto;
    max-width:1680px;
    padding:0 15px 100px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    position:relative
}
.newspage .transparentBackground{
    position:absolute;
    height:99%;
    top:0;
    left:0;
    right:0;
    background-color:#000;
    z-index:-50;
    opacity:.7;
    border-radius:5px
}
@media screen and (min-width: 1280px){
    .newspage{
        margin-top:50px;
        padding:0
    }
}
.newspage #article,.newspage .article{
    padding-top:50px;
    width:100%
}
@media screen and (min-width: 768px){
    .newspage #article p,.newspage .article p{
        font-size:21px
    }
}
@media screen and (min-width: 1280px){
    .newspage #article,.newspage .article{
        padding:5%
    }
}
.newspage #article .title,.newspage #article .lead,.newspage .article .title,.newspage .article .lead{
    margin-bottom:25px
}
@media screen and (min-width: 768px){
    .newspage #article .title,.newspage .article .title{
        font-size:28px
    }
}
.newspage #article .catcher,.newspage .article .catcher{
    margin:0 auto;
    max-width:500px
}
.newspage #article .catcher iframe,.newspage .article .catcher iframe{
    width:100%;
    height:auto
}
.newspage #article .text,.newspage .article .text{
    font-weight:lighter
}
.newspage #article .commentArea,.newspage .article .commentArea{
    margin:150px auto;
    max-width:900px
}
.newspage #article .commentArea textarea,.newspage .article .commentArea textarea{
    width:100%;
    min-height:200px;
    margin:0 auto;
    resize:vertical;
    border-radius:5px
}
.newspage #article .commentArea button,.newspage .article .commentArea button{
    border:none;
    width:70px;
    height:30px;
    border-radius:10px;
    background-color:#1d0f0c;
    color:gold;
    margin:25px 0;
    display:block
}
.newspage #article .commentArea button p,.newspage .article .commentArea button p{
    color:gold;
    margin:0 auto;
    text-align:center
}
.newspage #article .commentArea button:hover,.newspage .article .commentArea button:hover{
    border:1px solid #D9CEBA
}
.newspage #article .commentArea button:hover p,.newspage .article .commentArea button:hover p{
    color:#D9CEBA
}
@media screen and (min-width: 1280px){
    .newspage #article .commentArea button,.newspage .article .commentArea button{
        width:120px;
        height:50px;
        border-radius:2px
    }
}
.newspage #article .commentArea .counter,.newspage .article .commentArea .counter{
    margin-bottom:25px
}
.newspage #article .commentArea .ownComment,.newspage .article .commentArea .ownComment{
    border:1px solid;
    border-color:transparent transparent #D9CEBA;
    margin-bottom:50px
}
.newspage #article .commentArea .otherComments .commentBox,.newspage .article .commentArea .otherComments .commentBox{
    border:1px solid #D9CEBA;
    padding:15px;
    margin-bottom:25px
}
.newspage #article .commentArea .otherComments .commentBox:last-child,.newspage .article .commentArea .otherComments .commentBox:last-child{
    margin-bottom:0
}
.newspage #article .commentArea .otherComments .commentBox .info,.newspage .article .commentArea .otherComments .commentBox .info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.newspage #article .commentArea .otherComments .commentBox .info input,.newspage .article .commentArea .otherComments .commentBox .info input{
    width:16px;
    height:16px
}
.newspage #article .commentArea .otherComments .buttons,.newspage .article .commentArea .otherComments .buttons{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    width:250px;
    margin:0 auto
}
.newspage #article .catcher iframe{
    width:100%;
    height:auto;
    min-height:315px;
    margin:25px 0
}
.newspage #sidebar{
    display:none;
    width:16.66667%;
    margin-right:5%
}
@media screen and (min-width: 1280px){
    .newspage #sidebar{
        display:block
    }
}
.newspage #sidebar p{
    font-size:12px
}
.newspage #sidebar h2{
    font-size:15px
}
.newspage #sidebar .more{
    margin-bottom:50px
}
.newspage #sidebar .more:first-child{
    margin-top:50px
}
.newspage #sidebar .more .info{
    background-color:#1d0f0c
}
.newspage #sidebar .more .info .content{
    padding:15px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.newspage #sidebar .more .info .content .comment{
    width:auto
}
.register{
    padding:100px 0
}
.register .accountText{
    display:none
}
.register .t2{
    text-align:justify
}
.account{
    padding:100px 0
}
.account .registerText{
    display:none
}
.account .accountOnly{
    display:block;
    width:90px;
    height:90px;
    background-color:#222;
    border-radius:50%;
    margin-bottom:15px
}
.logInForm{
    padding:100px 0
}
.logInForm .notLogIn{
    display:none
}

/* games page */

.download {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.download img {
  width: 150px;
  height: auto;
}