@import "normalize.css";
@import "constant.css";
@import "animate.css";
@import "contacts.css";
@import "monsters.css";
@import "magic.css";
@import "oasis.css";
@import "media.css";

body {
    padding-top: 100px;
}

header {
    height: 100px;
    padding-top: 15px;
    background: #fff;

    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 10;
    transition: 0.5s;
}

.navbar {
    z-index: 5;
    background: #fff;
}

.navbar-nav {
    /*float: right;*/
}

.navbar-nav a {
    color: #914078;
    font-size: 24px;
    text-transform: uppercase;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #692E57;
    background: none;
}

.navbar-toggle .icon-bar {
    width: 28px;
    height: 5px;
    background-color: #92417a;
    border-radius: 3px;
}

.navbar-default .navbar-collapse {

}

footer {
    background: #000;
    color: #a3a3a3;
    text-transform: uppercase;
    height: 81px;
    line-height: 81px;
    font-size: 30px;
}

/*GAMES LIST*/
.games_list {
    /*background: #fff;*/
}

.games_item {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /*background-size: cover;*/
    overflow: hidden;
    height: 270px;
    position: relative;
}

@media (min-width: 1600px) {
    .games_item {
        background-size: cover;
    }
}

.games_item__active {
    height: 680px;
}

.games_item > .container > .row {
    /*height: 270px;*/
}

.container_table {
    height: 100%;
}

.games_item__active > .container > .row {
    /*height: 680px;*/
    /*height: 380px;*/
    height: 100%;
}

.games_item_overlay {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 1;
}

.games_item__monster .games_item_overlay {
    background-color: rgba(33, 14, 74, 0.6);

}

.games_item__oasis .games_item_overlay {
    background-color: rgba(7, 16, 11, 0.6);
}

.games_item__magic .games_item_overlay {
    background-color: rgba(13, 109, 106, 0.6);
}

.games_item__ff .games_item_overlay {
    background-color: rgba(13, 109, 106, 0.6);
}

.games_item__active .games_item_overlay {
    display: none;
    opacity: 0;
}

.games_item__monster {
    color: white;
    background-image: url("../img/index/monster_bg.jpg");

}

.games_item__oasis {
    color: white;
    background-image: url("../img/index/oasis_bg.jpg");

}

.games_item__magic {
    color: white;
    background-image: url("../img/index/magic_bg.jpg");

}

.games_item__ff {
    color: white;
    background-image: url("../img/index/magic_bg.jpg");

}

.games_item_hero {
    background-repeat: no-repeat;

    /*background-position: 50% 55%;*/
    /*background-position: 50% 100%;*/
    background-position: 50% 0%;
    background-size: 100%;
    /*background-size: contain;*/
    /*display: none;*/
    width: 100%;
    height: 100%;
    position: absolute;

}

.games_item__active .games_item_hero {
    background-position: 50% 100%;
}

.games_item__active .games_item_hero {
    /*background-position: 50% 100%;*/
}

.games_item_hero__monster {
    background-image: url("../img/index/monsters.png");
    bottom: 0;
    right: 0;
}

.games_item_hero__monster img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.games_item_hero__oasis {
    background-image: url("../img/index/oasis_hero.png");

    bottom: 0;
    right: 0;
}

.games_item_hero__magic {
    background-image: url("../img/index/magic_hero.png");
    /*background-position: 50% 0%;*/
    bottom: 0;
    right: 0;
}

.games_item_hero__ff {
    background-image: url("../img/index/magic_hero.png");
    /*background-position: 50% 0%;*/
    bottom: 0;
    right: 0;
}

.games_item__active .games_item_hero__magic {
    /*background-position: 50% 100%;*/
}

.games_item__active .games_item_hero__ff {
    /*background-position: 50% 100%;*/
}

.games_item_name {

    /*-webkit-animation-duration: 0.5s;*/
    /*animation-duration: 0.5s;*/
    /*-webkit-animation-fill-mode: both;*/
    /*animation-fill-mode: both;*/
}

.games_item_name h2 {
    font-size: 54px;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 3;
}

.games_item_text {
    margin-top: 35px;
    font-size: 16px;
    margin-bottom: 75px;
    opacity: 0;
    display: none;
}

.games_item_button {
    display: none;
    opacity: 0;
}

.games_item__active .games_item_text,
.games_item__active .games_item_button {
    opacity: 1;
    display: block;
}

.games_item_button_link {
    color: #feee89;
    font-size: 24px;
    display: inline-block;
    background: url("../img/more_about_arrow.png") no-repeat 93% 50%;
    border: 3px solid #feee89;
    border-radius: 10px;
    text-align: left;
    /*width: 232px;*/
    /*height: 63px;*/
    padding: 12px 70px 12px 20px;
    transition: 0.5s;
}

.games_item_button_link:hover, .games_item_button_link:focus {
    background: #feee89 url("../img/more_about_arrow_h.png") no-repeat 93% 50%;
    color: #000;
    text-decoration: none;
}

/*END GAMES LIST*/

/*CONTACT US FORM*/
.contact_us_container {
    background-color: #92417a;
    padding: 80px 0;
}

.contact_us_form_title {
    margin: 0;
}

.contact_us_form_text {
    color: #e2d2dd;
}

.form-control {

}

.contact_us_form-group {
    min-width: 290px;
    max-width: 470px;
    margin: 15px auto;
}

.contact_us_container .form-group {
    min-width: 290px;
}

.btn-submit {
    color: white;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    background: none;
    border: 3px solid white;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 0 0px 6px #80396b;
    margin-top: 10px;
    transition: 0.5s;
}

.btn-submit:hover {
    color: #92417a;
    background: #fff;
}

.error {
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

/*END CONTACT US FORM*/

.carousel-fade .carousel-inner .item {
    -webkit-transition: 0s ease-in-out left !important;
    -o-transition: 0s ease-in-out left !important;;
    transition: 0s ease-in-out left !important;;
    /*opacity: 0;*/
    /*-webkit-transition-property: opacity;*/
    /*-moz-transition-property: opacity;*/
    /*-o-transition-property: opacity;*/
    transition-property: none;
}

.carousel-fade .carousel-inner .active {
    /*opacity: 1;*/
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    /*left: 0;*/
    /*opacity: 0;*/
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    /*opacity: 1;*/
}

.carousel-fade .carousel-control {
    z-index: 2;
}

.carousel-indicators-black li {
    background-color: rgba(0, 0, 0, 0.3);
}

.carousel-indicators-black li.active {
    background: #000;
}

.carousel-indicators {
    margin-top: 25px;
}

@media (max-width: 767px) {
    header {
        height: 85px;
    }

    .navbar-nav a {
        font-size: 48px;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }

    .games_item {
        height: auto !important;
        background-size: cover;
    }

    .games_item_overlay {
        display: none;
    }

    .games_item_text, .games_item_button {
        display: block;
        opacity: 1;
    }

    .games_item_name h2 {
        font-size: 36px;
    }

    .games_item_text {
        font-size: 12px;
    }

    .games_item_button_link {
        font-size: 18px;
        padding: 7px 43px 5px 13px;
        background-size: 15px;
    }

    .games_item__active {
        /*height: 680px;*/
        height: auto;
    }

    .games_item_hero {
        height: 200px;
        position: relative;
        background-size: contain;
    }

    .games_item_name {
        margin-top: 20px;
    }

    .games_item_text {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .games_item_button {
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 0;
        padding-bottom: 0;
        height: 64px;
        line-height: 64px;
    }

    .games_item {
        height: 200px;
        background-size: cover;
    }

    .games_item .games_item_hero {
        display: none;
    }

    .games_item__active .games_item_hero {
        display: block;
    }

    .games_item__active {
        /*height: 680px;*/
        height: auto;
    }

    .games_item_hero {
        height: 380px;
        position: relative;
        background-size: contain;
    }

    .games_item_name {
        margin-top: 70px;
    }

    .games_item_text {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .games_item_button {
        margin-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .games_item_hero {
        height: 100%;
    }

    .games_item {
        height: 270px;
    }

    .games_item__active {
        height: 680px;
    }

    .games_item .games_item_hero {
        display: block;
    }

    .games_item_hero {
        background-size: 100%;
        height: 100%;
        position: absolute;
    }

    .games_item_name {
        margin-top: 0px;
    }
}

/*images*/
@media (max-width: 991px) {
    .games_item__monster {
        color: white;
        background-image: url("../img/sm/index/monster_bg.jpg");
        background-size: cover;
    }

    .games_item_hero__monster {
        background-image: url("../img/sm/index/monsters.png");
    }

    .games_item__oasis {
        color: white;
        background-image: url("../img/sm/index/oasis_bg.jpg");
        background-size: cover;
    }

    .games_item_hero__oasis {
        background-image: url("../img/sm/index/oasis_hero.png");
    }

    .games_item__magic {
        background-image: url("../img/sm/index/magic_bg.jpg");
        background-size: cover;
    }

    .games_item_hero__magic {
        background-image: url("../img/sm/index/magic_hero.png");
    }

    .games_item__ff {
        background-image: url("../img/sm/index/magic_bg.jpg");
        background-size: cover;
    }

    .games_item_hero__ff {
        background-image: url("../img/sm/index/magic_hero.png");
    }


    .monster_page {
        background: url("../img/sm/monsters/monster_bg.jpg") fixed 50% 50%;
        background-size: cover;
    }

    .monster_screen_1 {
        background: url("../img/sm/monsters/monsters_fon.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .monster_screen_1 .layer_3 {
        background: url("../img/sm/monsters/light.png") no-repeat 50% 180%;
        background-size: contain;
    }

    .monster_screen_1 .layer_1 {
        background: url("../img/sm/monsters/mountains.png") no-repeat 50% 140%;
        background-size: contain;
    }

    .monster_screen_1 .layer_2 {
        background: url("../img/sm/monsters/land.png") no-repeat 50% 120%;
        background-size: contain;
    }

    .monster_screen_1 .layer_4 {
        background: url("../img/sm/monsters/clouds.png") no-repeat 50% 50%;
        background-size: contain;
    }

    .monster_after {
        background-image: url("../img/sm/monsters/after.jpg");
        background-size: cover;
    }

    .monster_before {
        background-image: url("../img/sm/monsters/before.jpg");
        background-size: cover;
    }

    .magic_screen_1 {
        background: url("../img/sm/magic/magic_fon.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .magic_screen_1 .layer_1 {
        background: url("../img/sm/magic/forest.png") no-repeat 50% 100%;
        background-size: contain;
    }

    .magic_screen_1 .layer_2 {
        background: url("../img/sm/magic/2baterfly.png") no-repeat 50% 30%;
        background-size: contain;
    }

    .magic_screen_1 .layer_3 {
        background: url("../img/sm/magic/1baterfly.png") no-repeat 50% 50%;
        background-size: contain;
    }

    .magic_screen_4 {
        background: url("../img/sm/magic/island1.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .magic_screen_4#location_screen_tab1 {
        background: url("../img/sm/magic/island1.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .magic_screen_4#location_screen_tab2 {
        background: url("../img/sm/magic/home1.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .magic_screen_4#location_screen_tab3 {
        background: url("../img/sm/magic/fly_island1.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_page {
        background: url("../img/sm/oasis/oasis_fon.jpg") fixed 50% 50%;
        background-size: cover;
    }

    .oasis_screen_1 .layer_2 {
        background: url("../img/sm/oasis/2_plan_oasis.png") no-repeat 50% 100%;
        background-size: contain;
    }

    .oasis_head_hero_1.in_layer {
        background-image: url("../img/sm/oasis/1_plan_oasis.png");
        /* bottom: 0; */
        background-position: 50% 100%;
        background-size: 190%;
        /* width: 200%; */
    }

    .oasis_screen_1 .layer_1 {
        background: url("../img/sm/oasis/0_1plan-oasis.png") no-repeat 0% 100%;
        background-size: contain;
    }

    .oasis_screen_1 .layer_01 {
        background: url("../img/sm/oasis/0_2plan-oasis.png") no-repeat 100% 100%;
        background-size: contain;
    }

    .oasis_screen_4 {
        background: url("../img/sm/oasis/oasis1.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab1 {
        background: url("../img/sm/oasis/oasis1.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab2 {
        background: url("../img/sm/oasis/oasis2.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab3 {
        background: url("../img/sm/oasis/oasis3.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab4 {
        background: url("../img/oasis/oasis4.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab5 {
        background: url("../img/sm/oasis/oasis5.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab6 {
        background: url("../img/sm/oasis/oasis6.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab7 {
        background: url("../img/sm/oasis/oasis7.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

    .oasis_screen_4#location_screen_tab8 {
        background: url("../img/sm/oasis/oasis8.jpg") no-repeat 50% 50%;
        background-size: cover;
    }

}

@media (max-width: 767px) {

    .monster_after {
        background-position: 50% 50%;
    }

    .monster_before {
        background-position: 50% 50%;
    }

    .oasis_head_hero_1.in_layer {
        background-position: 50% 100%;
        bottom: -10%;
        width: 140%;
    }

    .magic_head_hero_1.in_layer {
        background-position: 30% 100%;
        bottom: -20%;
    }

}

/*end images*/