@charset "UTF-8";

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, header, hgroup, menu, nav, section,
summary, hgroup {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height: 100%;
}

body {
    background-image: url("../images/bg.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#mastwrap {
    min-height: 100%;
    height: auto;
    margin: 0px auto -1.8rem;
    padding: 0 0 calc(40px + 1.8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#metro-panel .carusel {
    flex-basis: 100%;
}

#footer {
    background-color: rgba(100, 100, 100, 0.5) !important;
    width: 100%;
    height: 1.8rem;
    font-size: 18px;
    line-height: 28px;
    font-weight: normal;
    font-family: "Open_Sans_L";
    color: #a6a6a6;
    text-align: center;
}

#home {
    display: flex;
    box-sizing: border-box;
    padding: 70px 20px;
    width: 100%;
    justify-content: center;
}

#metro-panel {max-width: 1200px;min-width: 1px;}

#metro-panel .stripe {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.inner-bg{
    background-image: url("../images/logo_girl.png");
    height: 150px !important;;
    width: 600px !important;;
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    margin: 0;
    border: 0;
    padding: 0px !important;
}
.inner-front{
    background-image: url("../images/logo_girl.gif");
    background-repeat: no-repeat;
    height: 99px !important;
    width: 312px !important;
    top: 31px;
    left: 77px;
    position: relative;
}

/*#home {
    background: url("../images/bg1.jpg") center center repeat;
    background-size: cover;
    min-height: 500px;
    padding-top: 120px;
    padding-bottom: 120px;
}*/


.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.donate{
    background: #A93536 !important;
}

.donate-sel{
    background: #e79822 !important;
}

.info{
    background: #149CA8 !important;
}

.info-sel{
    background: #33495F !important;
}

.download{
    background: #387003 !important;
}


.download-sel{
    background: #49c630 !important;
}

.discord{
    background: #746386 !important;
}

.discord-sel{
    background: #7289da !important;
}

.vk{
    background: #4c75a3 !important;
}

.vk-sel{
    background: #72abec !important;
}

.map{
    background: #77614A !important;
}

.map-sel{
    background: #97816A !important;
}

.free-coin{
    background: #eecb27 !important;
}

.free-coin-sel{
    background: #e79822 !important;
}

.rule{
    background: #f50000 !important;
}

.rule-sel{
    background: #ff8000 !important;
}

.skin{
    background: #31b0d5 !important;
}

.skin-sel{
    background: #72abec !important;
}

.carusel{
    /*opacity: 0.5;*/
    background-color: rgba(0, 0, 0, 0.5) !important;
    /*height: 450px !important;*/
    /*width: 90%;*/
    width: 1200px !important;
    position: relative;
    margin: 0;
    border: 0;
    /*padding: 0px !important;*/
}

.carusel-img{
    /*background-color: transparent !important;*/
    /*    background-color:rgba(0, 0, 0, 0.5);
        opacity: 1;
    */    height: 200px !important;;
    width: 600px !important;;/*
    position: relative;
    margin: 0;
    border: 0;
    padding: 0px !important;*/
}

/*metro-panel*/

.stripe:before, .stripe:after {
    /* content: ""; */
    /* display: table; */
    line-height: 0;
}
.stripe:after {
    clear: both;
}
[class*="tile"] {
}
.nav-tile{
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.nav-tile:hover{/*
    transform: scale(0.9);
    -webkit-transform: scale(0.9);*/
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
}
.nav-tile:hover a > img{
}
.navbar .container {
    width: 1170px;
}
.tile-06 {
    height: 200px;
    width: 1200px;
}
.tile-05 {
    height: 200px;
    width: 1000px;
}
.tile-04 {
    height: 200px;
    width: 800px;
}
.tile-03 {
    height: 200px;
    /* width: 600px; */
    flex-basis: 600px;
}
.tile-02 {
    height: 200px;
    width: 400px;
}
.tile-01 {
    height: 200px;
    width: 200px;
    flex-basis: 200px;
    position: relative;
    flex-grow: 1;
}
.boffset6 {
    margin-left: 1200px;
}
.boffset5 {
    margin-left: 1000px;
}
.boffset4 {
    margin-left: 800px;
}
.boffset3 {
    margin-left: 600px;
}
.boffset2 {
    margin-left: 400px;
}
.boffset1 {
    margin-left: 200px;
}

#metro-panel .header-holder {
    height: 1032px;
    width: 100%;
}

#metro-panel h1 {
    font-size: 72px;
    line-height: 79px;
    font-weight: normal;
    font-family:"Open_Sans_L";

    padding: 10px;
}

#metro-panel h3 {
    font-size: 24px;
    line-height: 31px;
    font-weight: normal;
    font-family:"Open_Sans_L";

    background: rgba(0,0,0,0.2);
    padding: 5px;
}
#metro-panel h5 {
    margin-top: 20px;
    font-size: 18px;
    line-height: 25px;
    font-weight: normal;
    font-family:"Open_Sans_L";
}

#metro-panel .slogan h1 {
    font-size: 72px;
    line-height: 79px;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px;
    color: #000;
}
#metro-panel .slogan h3 {
    font-size: 24px;
    line-height: 50px;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #fff;
    color: #000;
    padding: 0px;
    padding-left: 10px;
}
#metro-panel .slogan h5 {
    margin-top: 20px;
    font-size: 18px;
    line-height: 25px;
    font-weight: normal;
    font-family:"Open_Sans_L";
}
#metro-panel [class*="tile"] {
    color: #FFFFFF;
}
#metro-panel [class*="tile"] .inner {
    padding: 20px 30px;
}

#metro-panel .transparent {
    background: none repeat scroll 0 center transparent;
}
#metro-panel .logo_container {
    z-index: 2;
}
#metro-panel .logo_container .logo {
    font-size: 64px;
    margin-top: 77.5px;
    text-align: center;
}
#metro-panel .logo_container .logo a:hover, #metro-panel .logo_container .logo a:focus, #metro-panel .logo_container .logo a:active {
    color: #FFFFFF;
    text-decoration: none;
}
#metro-panel .tile-nav {
    display: block;
    font-size: 19.2px;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}
#metro-panel .tile-nav .nav-hover {
    content: "";
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: all 0.2s ease-in-out 0s;
    width: 100%;
    z-index: 1;
    background: red;
    top: 0;
}
#metro-panel .tile-nav .nav-hover > h5 {
    margin-top: 00px;
    text-align: left;
    font-size: 18px;
    line-height: 27px;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    padding: 20px;
    padding-bottom: 10px;
}
#metro-panel .tile-nav .nav-hover > p {
    text-align: left;
    font-size: 14px;
    line-height: 21px;
    font-weight: normal;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    padding: 20px;
    padding-top: 10px;
}
#metro-panel .tile-nav:hover, #metro-panel .tile-nav:active, #metro-panel .tile-nav:focus {
    color: #FFFFFF;
    text-decoration: none;
}
#metro-panel .tile-nav:hover .nav-hover {
    opacity: 1;
    transition: all 0.2s ease-in-out 0s;
}
#metro-panel .tile-nav i {
    display: block;
    font-size: 60px;
    padding-top: 45px;
}
#metro-panel .tile-nav span {
    display: block;
    margin-top: 28px;
    margin-bottom: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 22px;
    line-height: 31px;
}

#metro-panel .tile-nav span2 {
    display: block;
    margin-top: 16px;
    margin-bottom: 7px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 22px;
    line-height: 23px;
}

#metro-panel .thumb {
    background: none repeat scroll 0 center transparent;
    perspective: 800px;
}
#metro-panel .thumb img {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
#metro-panel .thumb .scroll {
    overflow: hidden;
}
#metro-panel .thumb .scroll .img2 {
    bottom: -195px;
}
#metro-panel .thumb .tile-nav {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;
}
#metro-panel .thumb .tile-nav img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
#metro-panel .thumb .tile-nav.flipX .img2 {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
#metro-panel .thumb .tile-nav.flipY .img2 {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
#metro-panel .thumb.active .flipX {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}
#metro-panel .thumb.active .flipY {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
#metro-panel .thumb .nav-hover {
    display: none;
}