/* Fiesta Online */
 
@import url(https://webcdn.triongames.com/common-fonts/alice/alice.css);
@import url(https://webcdn.triongames.com/common-fonts/notosans/notosans.css);

/* ---- General Styling ---- */

body{
    font-family: 'Noto Sans',Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #333;
    background-color: #ccc;
}

.wrapper {
    overflow-x: hidden;
    background: #FFF none repeat scroll 0% 0%;
    margin: 0px auto;
    max-width: 2000px;
    box-shadow: -8px 0px 10px rgba(0, 0, 0, 0.1), 8px 0px 10px rgba(0, 0, 0, 0.1);
}

.content{
    position: relative;
}

.header .menu-container {
    width: 100% !important;
    background-size: cover;
}

.topbar-container {
    width: 100% !important;
}

h1.title-fiesta{
    color: #71298D;
    position: relative;
    margin: 20px 0px;
    font: 900 40px/41px "Alice",Arial,sans-serif;
    font: 900 45px/49px "Alice",Arial,sans-serif;
    text-transform: uppercase;
}

h1.title-fiesta::before{
    width: 30px;
    height: 50px;
    content:'';
    display: inline-block;
    vertical-align: bottom;
    background: url('../images/ornament-left.png') center top no-repeat;
    margin-right: 15px;
}

h1.title-fiesta::after{
    width: 30px;
    height: 50px;
    content:'';
    display: inline-block;
    vertical-align: bottom;
    background: url('../images/ornament-right.png') center top no-repeat;
    margin-left: 15px;
}

h2, h3,
.headline h2{
    font: 900 35px/36px 'Alice',Arial,sans-serif;
    color: #71298d;
}

h2.title-v2{
    color: #71298d;
}

h2.title-fiesta{
    color: #71298D;
    position: relative;
    margin-bottom: 20px;
    font: 700 35px/37px "Alice",Arial,sans-serif;
    text-transform: uppercase;
}

h3.title-fiesta-s,
h3.title-fiesta{
    color: #71298D;
    position: relative;
    margin-bottom: 15px;
    font: 700 24px/26px "Alice",Arial,sans-serif;
}

h3.title-fiesta-s{
    font: 700 21px/24px "Alice",Arial,sans-serif;
}

h3.heading-sm {
    font-size: 16px;
    line-height: 20px;
    color: #71298D;
    text-align: center;
    font-weight: 700;
}

h4{
    border-bottom: 1px solid #eee;
}

h3.class-headline,
h4.class-headline{
    color: #71298D;
}

.title-v4 {
    font-size: 27px;
    margin: 0px 0px 20px;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    border-bottom: 2px solid #61551E;
}

.title-v4 {
    font-size: 22px;
    margin: 0px 0px 20px;
    font-weight: bold;
    position: relative;
    text-transform: none;
    border-bottom: 2px solid #61551E;
}

.title-v4::after{
    content: '';
    background: transparent url('../images/news/news-headline-ornament.png') no-repeat scroll center bottom;
    width: 36px;
    height: 65px;
    position: absolute;
    top: 26px;
    left: -20px;
}

p{
    font-size: 16px;
}

section li{
    font-size: 16px;
    line-height: 25px;
}

section ul{
    margin-bottom: 25px;
}

strong{
    color: #71298D;
}

.dropcap{
    color: #71298D;
    font: 900 47px/34px "Alice", Arial, sans-serif;
    margin-left: -5px;
}

.center-alignCenter{
    position: relative;
}

.content-divider-s{
    padding: 50px 0px 0px;
}

/* ---- Content ---- */


.content-sm {
    padding-top: 40px;
    padding-bottom: 40px;
}

.breadcrumbs {
    overflow: hidden;
    padding: 30px 0px 6px;
    border-bottom: 1px solid #EEE;
    background: transparent url("../img/patterns/breadcrumbs.png") repeat scroll 0% 0%;
}

.breadcrumbs h1 {
    margin-top: 8px;
    font: 700 45px/40px "Alice";
    color: #71298D;
}

.thumbnail-style:hover {
    box-shadow: none;
    -ms-transition: none;
    -webkit-transition: none;
    transition: none;
}

.home::after,
.news::after,
.news-detail::after,
.about-fiesta::after,
.getting-started::after,
.classes::after,
.archer::after,
.cleric::after,
.crusader::after,
.fighter::after,
.joker::after,
.mage::after,
.class-change::after,
.history::after,
.dungeons::after,
.guilds::after,
.kingdom-quests::after,
.master-apprentice-system::after,
.monster-card-collection::after,
.wedding-guide::after,
.medien::after,
.login::after,
.register::after,
.password-reset::after,
.account::after,
.welcome::after,
.xmas::after{
    background: url('../images/section-divider-big.png') center top no-repeat;
    height: 20px;
    content:'';
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    z-index: 10;
}

#block1,
#block2,
#block3,
#block4,
#block5{
    max-width: 2000px;
    margin: 0px auto;
    position: relative;
}

#sidebar-nav-1 .fa{
    width: 20px;
}

#sidebar-nav-1 a:hover{
    color: #71298d;
}

.sidebar-nav-v1 > li.active, .sidebar-nav-v1 > li.active:hover {
    background: #182A43 none repeat scroll 0% 0%;
}

.headline-v2 {
    display: block;
    background: #FFF none repeat scroll 0% 0%;
    margin: 0px 0px 20px;
    padding: 0px;
    border-left: none;
}

.blog-latest-posts h3 {
    font-size: 14px;
    margin: 0px 0px 3px;
    line-height: 20px;
}

.blog-latest-posts a,
.blog-latest-posts a:hover{
    color: #71298d;
    text-decoration: none;
}

.thumbnail h3 a, .thumbnail-style h3 a {
    color: #585F69;
    font-size: 18px;
    font-weight: 700;
}

.thumbnail h3 a:hover,
.thumbnail-style h3 a:hover {
    color: #71298d;
    text-decoration: none;
}

.thumbnail-kenburn img {
    left: 10px;
    margin-left: -10px;
    position: relative;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
.thumbnail-kenburn:hover img {
    -webkit-transform: scale(1.2) rotate(2deg);
    -moz-transform: scale(1.2) rotate(2deg);
    -o-transform: scale(1.2) rotate(2deg);
    -ms-transform: scale(1.2) rotate(2deg);
    transform: scale(1.2) rotate(2deg);
}

.blog-grid a.r-more {
    color: #FFF;
    padding: 1px 6px;
    background: #71298d none repeat scroll 0% 0%;
    display: inline-block;
    font-style: normal;
}

/* ---- Account Welcome Bonus ---- */

.welcome-bonus{
    width: 250px;
    height: 110px;
    display: block;
    background: transparent url('../images/welcome/welcome-offer-sidebar.png') no-repeat left top;
}

html[lang=en] .welcome-bonus,
html[lang=us] .welcome-bonus{
    background: transparent url('../images/welcome/welcome-offer-sidebar-en.png') no-repeat left top;
}

html[lang=es] .welcome-bonus{
    background: transparent url('../images/welcome/welcome-offer-sidebar-es.png') no-repeat left top;
}

html[lang=fr] .welcome-bonus{
    background: transparent url('../images/welcome/welcome-offer-sidebar-fr.png') no-repeat left top;
}


/* ---- Index ---- */

#block1.home {
    background: #fff url('../images/sec-background-stones.jpg') no-repeat scroll center bottom;
}

#block2.home{
    background: #fff url('../images/sec-background-forest.jpg') no-repeat center 20%;
}

#block3.home{
    background: #fff url("../images/sec-background-class-selection-b.jpg") no-repeat scroll center bottom / cover;
}

#block1.features h3{
    font-weight: 700;
    margin-top: 30px;
}

.index-feature{
    color: #72C02C;
}

.content-boxes-v2-o small{
    font: 700 13px/16px "Noto Sans", sans-serif;
    color: #333;
}

.i-kingdom-quests {
    background: transparent url("../images/icons/icon-feature-kingdom-quest.png") no-repeat scroll center center / cover;
}

.i-master-apprentice {
    background: transparent url("../images/icons/icon-feature-master-apprentice.png") no-repeat scroll center center / cover;
}

.i-wedding {
    background: transparent url("../images/icons/icon-feature-wedding.png") no-repeat scroll center center / cover;
}

.i-daily-bonus {
    background: transparent url("../images/icons/icon-feature-daily-bonus.png") no-repeat scroll center center / cover;
}

.icon-feature{
    display: block;
    width: 100px;
    height: 95px;
    margin: 0px auto;
    text-align: center;
    line-height: 40px;
    color: #555;
}

.more-info{
    display: block;
    margin: 30px 0px;
}

.home .tab-content{
    position: relative;
}

@-webkit-keyframes flower {
    0% {
        -webkit-transform: translate3d(-11px,0px,10px) rotateZ(15deg);
        -moz-transform: translate3d(-11px,0px,10px) rotateZ(15deg);
        transform: translate3d(-11px,0px,10px) rotateZ(15deg);
    }

    100% {
        -webkit-transform: translate3d(0px,0px,0px) rotateZ(6deg);
        -moz-transform: translate3d(0px,0px,0px) rotateZ(6deg);
        transform: translate3d(0px,0px,0px) rotateZ(6deg);
    }
}

@-moz-keyframes flower {
    0% {
        -webkit-transform: translate3d(-11px,0px,10px) rotateZ(15deg);
        -moz-transform: translate3d(-11px,0px,10px) rotateZ(15deg);
        transform: translate3d(-11px,0px,10px) rotateZ(15deg);
    }

    100% {
        -webkit-transform: translate3d(0px,0px,0px) rotateZ(6deg);
        -moz-transform: translate3d(0px,0px,0px) rotateZ(6deg);
        transform: translate3d(0px,0px,0px) rotateZ(6deg);
    }
}

@keyframes flower {
    0% {
        -webkit-transform: translate3d(-11px,0px,10px) rotateZ(15deg);
        -moz-transform: translate3d(-11px,0px,10px) rotateZ(15deg);
        transform: translate3d(-11px,0px,10px) rotateZ(15deg);
    }

    100% {
        -webkit-transform: translate3d(0px,0px,0px) rotateZ(6deg);
        -moz-transform: translate3d(0px,0px,0px) rotateZ(6deg);
        transform: translate3d(0px,0px,0px) rotateZ(6deg);
    }
}

@-webkit-keyframes mushjump {
    0%, 100% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
        height: 185px;
    }
    50% {
        -webkit-transform: translate3d(0px, 20px, 0px);
        transform: translate3d(0px, 15px, 0px);
        height: 200px;
    }
}

@keyframes mushjump {
    0%, 100% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
        height: 185px;
    }
    50% {
        -webkit-transform: translate3d(0px, 20px, 0px);
        transform: translate3d(0px, 15px, 0px);
        height: 200px;
    }
}

@-webkit-keyframes mushsjump {
    0%, 100% {
        -webkit-transform: translate3d(-5px, 5px, 0px);
        transform: translate3d(-5px, 5px, 0px);
        height: 200px;
    }
    50% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
        height: 155px;
    }
}

@keyframes mushsjump {
    0%, 100% {
        -webkit-transform: translate3d(-5px, 5px, 0px);
        transform: translate3d(-5px, 5px, 0px);
        height: 200px;
    }
    50% {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
        height: 155px;
    }
}

@-webkit-keyframes snow-ghost{
    0% {transform: scale(0.9) translate(0, 0px) rotate(2deg);}
    20% {transform: scale(0.9) translate(0px, -10px) rotate(-2deg);}
    40% {transform: scale(0.9) translate(0px, 0px) rotate(2deg);}
    60% {transform: scale(0.9) translate(0px, -10px) rotate(2deg);}
    80% {transform: scale(0.9) translate(0px, 0px) rotate(-2deg);}
    100% {transform: scale(0.9) translate(0px, -10px) rotate(2deg);}
}

@keyframes snow-ghost{
    0% {transform: scale(0.9) translate(0, 0px) rotate(2deg);}
    20% {transform: scale(0.9) translate(0px, -10px) rotate(-2deg);}
    40% {transform: scale(0.9) translate(0px, 0px) rotate(2deg);}
    60% {transform: scale(0.9) translate(0px, -10px) rotate(2deg);}
    80% {transform: scale(0.9) translate(0px, 0px) rotate(-2deg);}
    100% {transform: scale(0.9) translate(0px, -10px) rotate(2deg);}
}

@-webkit-keyframes bell{
    0% {transform: translate(-3px, 0px) rotate(8deg);}
    100% {transform: translate(3px, 0px) rotate(-8deg);}
}

@keyframes bell{
    0% {transform: translate(-3px, 0px) rotate(8deg);}
    100% {transform: translate(3px, 0px) rotate(-8deg);}
}

/* ---- Gallery / Image Border ---- */

.ibb::before,
.ibb::after,
.iba::before,
.iba::after{
    height: 20px;
    width: 22px;
    content:'';
    display: block;
    position: absolute;
    z-index: 10;
}

.ibb::after{
    background: url('../images/corner-tr.png') center top no-repeat;
    top: -4px;
    right: -5px;
}

.ibb::before{
    background: url('../images/corner-tl.png') center top no-repeat;
    top: -4px;
    left: -5px;
}

.iba::after{
    background: url('../images/corner-br.png') center top no-repeat;
    bottom: -4px;
    right: -5px;
}

.iba::before{
    background: url('../images/corner-bl.png') center top no-repeat;
    bottom: -4px;
    left: -5px;
}

/* ---- Section News ---- */

#block1.news-detail .fb_iframe_widget{
    margin-top: -20px;
}

/*#2cbaa5*/

#block1.news-detail{
    background: #fff url('../images/sec-background-mystic.jpg') no-repeat scroll center bottom;
}

#block1.news-detail .content{
    padding-bottom: 425px;
}

.news-date-detail{
    margin-top: -15px;
}

.news-detail h3{
    font: 400 14px/18px "Noto sans";
    margin-bottom: 3px;
}

.news-detail h3 a{
    color: #333;
}

.news-detail .blog-thumb-v3{
    padding-left: 15px;
}

.news-detail small{
    color: #666;
}

.thumbnails .blog-grid h3 a {
    font: 700 20px/27px "NotoSans",Arial,sans-serif;
    color: #333; /*#585F69;*/
    text-shadow: none;
    margin-top: 5px;
}

.news-overview-list {
    margin-top: -10px;
}

/* ---- Section Guide ---- */

#block1.about-fiesta {
    background: #fff url('../images/sec-background-.jpg') no-repeat scroll center bottom;
}

#block1.archer,
#block1.cleric,
#block1.crusader,
#block1.fighter,
#block1.joker,
#block1.mage{
    background: url("../images/sec-background-town-right.jpg") no-repeat scroll right 140px, url("../images/sec-background-town-left.jpg") no-repeat scroll left bottom;
    padding-bottom: 260px;
    background-size: 60%;
}

#block1.classes{
    background: #FFF url("../images/sec-background-class-selection.jpg") no-repeat scroll center bottom/contain;
    background: url("../images/sec-background-city.jpg") no-repeat scroll center 20% / contain;
}

#class_select_index {
    background: transparent none repeat scroll 0% 0%;
    box-shadow: none;
    width: auto;
    position: relative;
    right: auto;
    z-index: 50;
    top: auto;
    text-align: center;
    margin-top: 15px;
}

#class_select_index ul {
    margin: 0px 12px;
    padding: 17px 0px 7px;
    display: inline-block;
}

#class_select_index li {
    float: left;
    list-style: outside none none;
    margin-bottom: 20px;
    width: 85px;
}

#class_select_index li span {
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    display: block;
    width: 85px;
    padding-top: 50px;
}

.class-selection-description i{
    padding-right: 5px;
}

.select_archer {
    background: transparent url("../images/guide/classes/class-icon-archer.png") no-repeat scroll center top;
}
.select_cleric {
    background: transparent url("../images/guide/classes/class-icon-cleric.png") no-repeat scroll center top;
}
.select_crusader {
    background: transparent url("../images/guide/classes/class-icon-crusader.png") no-repeat scroll center top;
}
.select_fighter {
    background: transparent url("../images/guide/classes/class-icon-fighter.png") no-repeat scroll center top;
}
.select_joker {
    background: transparent url("../images/guide/classes/class-icon-joker.png") no-repeat scroll center top;
}
.select_mage {
    background: transparent url("../images/guide/classes/class-icon-mage.png") no-repeat scroll center top;
}

.select_archer,
.select_cleric,
.select_crusader,
.select_fighter,
.select_joker,
.select_mage {
    width: 55px;
    height: 55px;
    cursor: pointer;
}

.select_archer:hover,
.select_cleric:hover,
.select_crusader:hover,
.select_fighter:hover,
.select_joker:hover,
.select_mage:hover {
    background-position: center bottom;
}

.class-select-block{
    position: relative;
}

#class_select{
    background-color: rgb(255, 255, 255);
    box-shadow: -1px 2px 15px rgba(0, 0, 0, 0.2);
    width: 140px;
    border-radius: 10px;
    position: absolute;
    right: -32px;
    z-index: 50;
    top: 165px;
}

#class_select ul{
    margin: 0px 12px;
    padding: 17px 0px 7px;
}

#class_select li {
    list-style: outside none none;
    margin-bottom: 31px;
    width: 85px;
}

#class_select li span {
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    display: block;
    width: 85px;
    padding-top: 50px;
}

#class_select li a:hover,
#class_select li.active a{
    color: #71298D;
    text-decoration: none;
}

#class_select li.active{
    background-position: center bottom;
}

.fiesta-thumbnail-style {
    padding: 7px;
    margin: 0px 15px 30px 0px;
}

.class-features{
    margin: 40px 0px;
}

.class-features ul{
    list-style: none;
    padding-left: 15px;
}

.class-features h3.title-fiesta{
    margin-bottom: 8px;
}

.class-skill{
    position: absolute;
    z-index: 10;
    bottom: -30px;
    left: 50%;
    margin-left: -50px;
}

.class-change h2{
    font-size: 32px;
    margin-top: 30px;
}

.thumbnail-img,
.thumbnail-style .thumbnail-img{
    background-color: rgba(255, 255, 255, 0.9);
    border-width: 3px;
    border-style: solid;
    border-color: #61551E; /*rgba(84, 84, 84, 0.3) rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.6) rgba(84, 84, 84, 0.3);*/
    padding: 0px;
    position: relative;
}

.thumbnail-style a.btn-more {
    right: -10px;
    bottom: 24px;
    color: #FFF;
    padding: 1px 6px;
    position: absolute;
    background: #71298d none repeat scroll 0% 0%;
    display: inline-block;
}

.thumbnail-style a.btn-more:hover {
    text-decoration: none;
    box-shadow: 0 0 0 2px #5fb611;
}

.border-box{
    background-color: #fff7e3;
    border-style: solid;
    border-width: 30px 40px 30px 40px;
    -moz-border-image: url("../images/fiesta-box-border.png") 30 40 30 40 repeat stretch;
    -webkit-border-image: url("../images/fiesta-box-border.png") 30 40 30 40 repeat stretch;
    border-image: url("../images/fiesta-box-border.png") 30 40 30 40 repeat stretch;
}


#block1.history {
    background: #fff url('../images/sec-background-library.jpg') no-repeat scroll center bottom;
}

.chapter-box .tab-pane{
    width: 100%;
    position: relative;
    margin: 0px auto;
}

.chapter-box .tab-pane{
    padding: 0px 310px 0px 20px;
}

.chapter-box{
    min-height: 675px;
}

.chapter-list{
    width: 280px;
    padding-left: 0px;
    list-style: outside none none;
    position: absolute;
    top: 50px;
    right: 0px;
    z-index: 10;
}

.chapter-list li{
    padding: 0 0 5px 15px;
}

.chapter-list a{
    text-decoration: none;
}

.chapter-list a:hover{
    color: #71298D;
}

.chapter-list .list-icon{
    line-height: 23px;
}

.chapter-list .list-icon i{
    height: 26px;
    width: 26px;
    background: transparent url("../images/list-icon.png") no-repeat scroll center top;
    display: block;
    position: absolute;
    left: -17px;
}

.chapter-list .list-icon:hover i{
    background-position: center bottom;
}

.chapter-box h4{
    color: #71298D;
    font: 900 25px/26px "Alice",Arial,sans-serif;
}

.chapter-box .tab-content {
    padding: 0;
    background: none;
    border: none;
}

.chapter-select{
    position: relative;
    width: 60%;
    margin: 0px auto;
    display: none;
}

.chapter-select i{
    position: absolute;
    top: 7px;
    right: 7px;
    height: 18px;
    width: 18px;
    font-size: 18px;
}

.chapter-select option{
    font: 15px/23px "Noto Sans",Helvetica,Arial,sans-serif;
    color: #404040;
}

.chapter-select select{
    display: block;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0px 0px 2px #C9C9C9;
    height: 33px;
    padding: 6px 10px;
    border-color: #BBB;
    border-radius: 0px;
    border-style: solid;
    border-width: 1px;
    font-size: 14px;
    color: #404040;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
}


/* ---- Section Features ---- */

#block1.dungeons,
#block2.kingdom-quests{
    background: #FFF url("../images/sec-background-mountains.jpg") no-repeat scroll center bottom;
    padding-bottom: 270px;
}

.kingdom-box .tab-pane,
.dungeon-box .tab-pane{
    width: 100%;
    position: relative;
    margin: 0px auto;
}

.kingdom-box .tab-pane{
    padding: 385px 380px 0px 130px;
}

.dungeon-box .tab-pane{
    padding: 385px 290px 0px 200px;
}

#tower-of-iyzel{
    background: #fff url('../images/features/dungeons/izyel-tower.jpg') center top no-repeat;
}

#devildom-mine{
    background: #fff url('../images/features/dungeons/devildom-mine.jpg') center top no-repeat;
}

#devildom-barrack{
    background: #fff url('../images/features/dungeons/devildom-barracks.jpg') center top no-repeat;
}

#crystal-castle{
    background: #fff url('../images/features/dungeons/crystal-castle.jpg') center top no-repeat;
}

#devildom-territory{
    background: #fff url('../images/features/dungeons/devildom-territory.jpg') center top no-repeat;
}

#dragons-tomb{
    background: #fff url('../images/features/dungeons/dragons-tomb.jpg') center top no-repeat;
}

#leviathan-nest{
    background: #fff url('../images/features/dungeons/leviathan-nest.jpg') center top no-repeat;
}

#secret-laboratory{
    background: #fff url('../images/features/dungeons/secret-laboratory.jpg') center top no-repeat;
}

#devildom-fortress{
    background: #fff url('../images/features/dungeons/devildom-fortress.jpg') center top no-repeat;
}

#burning-adelia{
    background: #fff url('../images/features/dungeons/burning-adelia.jpg') center top no-repeat;
}

#seized-adelia{
    background: #fff url('../images/features/dungeons/seized-adelia.jpg') center top no-repeat;
}

#sirens-castle{
    background: #fff url('../images/features/dungeons/sirens-castle.jpg') center top no-repeat;
}

.dungeon-box{
    min-height: 560px;
}

.kingdom-box{
    min-height: 675px;
}

.kingdom-list{
    width: 375px;
}

.dungeon-list{
    width: 320px;
}

.kingdom-list,
.dungeon-list{
    padding-left: 0px;
    list-style: outside none none;
    position: absolute;
    top: 50px;
    right: 0px;
    z-index: 10;
}

.kingdom-list li,
.dungeon-list li{
    padding: 0 0 8px 15px;
}

.kingdom-list a,
.dungeon-list a{
    text-decoration: none;
}

.kingdom-list a:hover,
.dungeon-list a:hover{
    color: #71298D;
}

.kingdom-list .list-icon,
.dungeon-list .list-icon{
    line-height: 23px;
}

.kingdom-list .list-icon i,
.dungeon-list .list-icon i{
    height: 26px;
    width: 26px;
    background: transparent url("../images/list-icon.png") no-repeat scroll center top;
    display: block;
    position: absolute;
    left: -17px;
}

.kingdom-list .list-icon:hover i,
.dungeon-list .list-icon:hover i{
    background-position: center bottom;
}

.kingdom-box h3, .dungeon-box h3,
.kingdom-box h4, .dungeon-box h4{
    color: #71298D;
    font: 900 25px/26px "Alice",Arial,sans-serif;
}

.kingdom-box .tab-content,
.dungeon-box .tab-content {
    padding: 0;
    background: none;
    border: none;
}

#counterattack-of-king-slime{
    background: #fff url('../images/features/kingdom-quest/counterattack-of-king-slime.jpg') center top no-repeat;
}

#wrath-of-piracy-mara{
    background: #fff url('../images/features/kingdom-quest/wrath-of-piracy-mara.jpg') center top no-repeat;
}

#golden-hill-adventure{
    background: #fff url('../images/features/kingdom-quest/gold-hill-adventure.jpg') center top no-repeat;
}

#millennium-robo-plot{
    background: #fff url('../images/features/kingdom-quest/the-millennium-robo-plot.jpg') center top no-repeat;
}

#mean-giant-honeybandit{
    background: #fff url('../images/features/kingdom-quest/mean-giant-honeybandit.jpg') center top no-repeat;
}

#lost-mini-dragon{
    background: #fff url('../images/features/kingdom-quest/lost-mini-dragon.jpg') center top no-repeat;
}

#spiders-assault{
    background: #fff url('../images/features/kingdom-quest/spiders-assault.jpg') center top no-repeat;
}

#king-kong-phinos-mess{
    background: #fff url('../images/features/kingdom-quest/king-kong-phinos-mess.jpg') center top no-repeat;
}

#evil-spirit-gordon-master{
    background: #fff url('../images/features/kingdom-quest/evil-spirit-gordon-master.jpg') center top no-repeat;
}

#henneath-rebellion-war{
    background: #fff url('../images/features/kingdom-quest/henneath-rebellion-war.jpg') center top no-repeat;
}

#inheritor-of-bijou{
    background: #fff url('../images/features/kingdom-quest/inheritor-of-bijou.jpg') center top no-repeat;
}

#rage-of-the-emperor-slime{
    background: #fff url('../images/features/kingdom-quest/rage-of-the-emperor-slime.jpg') center top no-repeat;
}

#bijous-sanctuary{
    background: #fff url('../images/features/kingdom-quest/bijous-sanctuary.jpg') center top no-repeat;
}

#hidden-mine{
    background: #fff url('../images/features/kingdom-quest/magrittes-hidden-mine.jpg') center top no-repeat;
}

#spring-battlefield{
    background: #fff url('../images/features/kingdom-quest/spring-battlefield.jpg') center top no-repeat;
}

#arena{
    background: #fff url('../images/features/kingdom-quest/arena.jpg') center top no-repeat;
}

#warriors-code{
    background: #fff url('../images/features/kingdom-quest/warriors-code.jpg') center top no-repeat;
}

.dungeon-select,
.kq-select{
    position: relative;
    width: 60%;
    margin: 0px auto;
    display: none;
}

.dungeon-select i,
.kq-select i{
    position: absolute;
    top: 7px;
    right: 7px;
    height: 18px;
    width: 18px;
    font-size: 18px;
}

.dungeon-select option,
.kq-select option{
    font: 15px/23px "Noto Sans",Helvetica,Arial,sans-serif;
    color: #404040;
}

.dungeon-select select,
.kq-select select{
    display: block;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0px 0px 2px #C9C9C9;
    height: 33px;
    padding: 6px 10px;
    border-color: #BBB;
    border-radius: 0px;
    border-style: solid;
    border-width: 1px;
    font-size: 14px;
    color: #404040;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
}

#block1.guilds{
    background: #fff url('../images/sec-background-guilds.jpg') no-repeat center bottom;
    padding-bottom: 420px;
}

#block1.guilds::after{
    background: none;
}

#block1.wedding-guide{
    background: #FFF url("../images/sec-background-wedding.jpg") no-repeat scroll center bottom;
    padding-bottom: 340px;
}

#block2.wedding-guide{
    background: #FFF url("../images/sec-background-priest.jpg") no-repeat scroll center bottom;
    padding-bottom: 380px;
}

#block1.master-apprentice-system,
#block1.monster-card-collection{
    background: #FFF url("../images/sec-background-ruins.jpg") no-repeat scroll center bottom;
    padding-bottom: 130px;
}

#block1.monster-card-collection p{
    padding-bottom: 22px;
}

.mcc-left{
    width: 322px;
    height: 478px;
    background: transparent url('../images/features/monster-card-collection-left.png') no-repeat center top;
    position: absolute;
    top: 0px;
    left: -300px;
}

.mcc-right{
    width: 620px;
    height: 433px;
    background: transparent url('../images/features/monster-card-collection-right.png') no-repeat center top;
    position: absolute;
    top: 0px;
    right: -600px;
}


/* ---- Section Media ---- */

#block1.medien{
    background: url('../images/sec-background-abandoned-ruins.jpg') no-repeat center top;
}


#block2.medien{
    background: #fff url('../images/sec-background-cave.jpg') no-repeat center bottom;
}

.owl-btn {
    color: #777;
    cursor: pointer;
    font-size: 18px;
    padding: 0px 9px 3px;
    text-align: center;
    background: #F5F5F5 none repeat scroll 0% 0%;
}

.owl-navigation{
    text-align: center;
    margin-top: 5px;
}

.owl-controls{
    display: none !important;
}

.owl-btn:hover {
    color: #fff;
    background: #71298d;
}

.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
    padding-right: 10px;
}

/* ---- Section Community ---- */

/* ---- Account Bereich ---- */

#block1.login .content,
#block1.password-reset .content,
#block1.register .content{
    min-height: 595px;
}

#block1.login {
    background: #fff url('../images/sec-background-.jpg') no-repeat scroll center bottom / cover;
}

#block1.register {
    background: #fff url('../images/sec-background-.jpg') no-repeat scroll center bottom / cover;
}

#block1.password-reset {
    background: #fff url('../images/sec-background-.jpg') no-repeat scroll center bottom / cover;
}

.shadow-effect-2::before{
    transform: rotate(-3deg);
    box-shadow: 0px 15px 10px rgba(0,0,0,0.8);
}

.shadow-effect-2::after {
    transform: rotate(3deg);
    box-shadow: 0px 15px 10px rgba(0,0,0,0.8);
}

.modal-sm{
    width: 350px;
}

.modal-content {
    position: relative;
    border-radius: none;
    outline: none;
    background: transparent url('../images/modal-bg-paper.png') no-repeat scroll center top;
    border: none;
    box-shadow: none;
    height: 120px;
}

.modal-body h4{
    display: none;
}

.modal-body #modal-login-body a,
.modal-body #modal-cashshop-body a,
.modal-body #modal-register-body a{
    box-sizing: border-box;
    height: 100px;
    color: #FFF;
    text-align: center;
    margin: -5px auto;
    display: block;
    width: 280px;
    background: transparent url('../images/modal-play-button.png') no-repeat scroll center top;
    border: 0px none;
    line-height: 25px;
    font-size: 25px;
    font-weight: 700;
    padding-top: 38px;
}

.modal-body #modal-login-body a:hover{
    text-decoration: none;
    background-position: center bottom;
}

.account-details p{
    font-family: 'Noto Sans',Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #333;
}

.fb-login-button img{
    margin: 20px 0px 0px;
}

.profile-body .profile-c{
    padding: 0px 15px;
}

.profile-body .profile-c .carousel-inner .item{
    padding: 20px;
}

.latest-list small {
    color: #ccc;
    display: block;
}

.latest-list li {
    padding: 8px 0px;
    border-top: 1px solid #ccc;
}

.latest-list li:first-child {
    padding-top: 0px;
    border-top: medium none;
}

.latest-list li a {
    color: #555;
}

.link-list a {
    color: #EEE;
    font-size: 11px;
    padding: 6px 0px;
    display: inline-block;
    text-transform: uppercase;
}

.link-list li i {
    color: #BBB;
    float: right;
    margin-top: 10px;
}

.link-list li:first-child {
    border-top: medium none !important;
}

/* ---- Account Bereich / Char Transfer---- */

.char_transfer_wrapper {
    *zoom:1;
    font-weight: 400;
    float: left;
    margin: 6px 0px 20px 11px;
}
.char_transfer_wrapper:after {
    clear: both;
    content: "";
    display: table;
}

.char_transfer_server {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;
    font-weight: bold;
    color: #8AA8BD;
}
.char_transfer_server:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}
.char_transfer_server .dropdown {
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    padding: 0px 5px;
}
.char_transfer_server ul.dropdown {
    list-style: none;
}
.char_transfer_server .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;
}
.char_transfer_server .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;
}
.char_transfer_server .dropdown li {
    margin-left: 0px;
    padding: 0px 10px;
    list-style: outside none none !important;
}
.char_transfer_server .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    font-size: 14px;
}
.char_transfer_server .dropdown li i {
    float: left;
    width: 35px;
    height: 23px;
}
.char_transfer_server .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}
.char_transfer_server .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 7px 7px;
}
.char_transfer_server .dropdown li:hover a {
    background: #f3f8f8;
}
.char_transfer_server.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}
.no-opacity .ranking_dropdown .dropdown, .no-pointerevents .ranking_dropdown .dropdown {
    display: none;
    opacity: 1;
    pointer-events: auto;
}
.no-opacity .ranking_dropdown.active .dropdown, .no-pointerevents .ranking_dropdown.active .dropdown {
    display: block;
}

h3.char-transfer-headline{
    font: 400 17px/20px "Noto Sans",Helvetica,Arial,sans-serif !important;
}

.char-select-wrapper{
    float: left;
    margin: 10px;
    background: transparent url("../images/char-transfer/transfer-box.png") no-repeat scroll center top;
}

.char-select-overlay{
    width: 102px;
    height: auto;
    background: transparent url("../images/char-transfer/icon-selected-big.png") no-repeat scroll left top;
    color: #e25112;
    cursor: pointer;
}

.char-select-overlay:hover,
.char-select-overlay.selected{
    background-position: right top;
    color: #019f01;
}

.char-select-box{
    width: 102px;
    height: 102px;
    position: relative;
}

.level{
    width: 26px;
    height: 38px;
    background: transparent url("../images/char-transfer/level-flag.png") no-repeat scroll center top;
    font: 700 11px/30px Arial,sans-serif;
    color: rgb(255, 255, 255);
    text-align: center;
    position: absolute;
    top: -1px;
    left: -3px;
}

.symbol{
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    top: 16px;
    z-index: 10;
}

.tarcher{
    background: transparent url("../images/char-transfer/class-icon-archer.png") no-repeat scroll center top;
}

.tcleric{
    background: transparent url("../images/char-transfer/class-icon-cleric.png") no-repeat scroll center top;
}

.tcrusader{
    background: transparent url("../images/char-transfer/class-icon-crusader.png") no-repeat scroll center top;
}

.tfighter{
    background: transparent url("../images/char-transfer/class-icon-fighter.png") no-repeat scroll center top;
}

.tjoker{
    background: transparent url("../images/char-transfer/class-icon-joker.png") no-repeat scroll center top;
}

.tmage{
    background: transparent url("../images/char-transfer/class-icon-mage.png") no-repeat scroll center top;
}

.char-transfer-icon{
    width: 20px;
    height: 21px;
    background: transparent url("../images/char-transfer/icon-selected.png") no-repeat scroll center top;
    position: absolute;
    bottom: 7px;
    right: 9px;
    z-index: 20;
}

.char-transfer-icon.selected{
    background-position: center bottom;
}

.char-name{
    padding: 2px 0px;
    font-weight: 700;
    font: 700 14px "Open Sans",Arial,sans-serif;
    text-align: center;
}

.panel-title{
    font: 900 35px/36px "Alice",Arial,sans-serif;
    color: #71298D;
}

.char-transfer-button{
    margin-right: 10px;
}

.icon-taler{
    background: transparent url("../images/char-transfer/fiesta-coins.png") no-repeat scroll center top;
    width: 24px;
    height: 28px;
    display: block;
    float: left;
    margin: 2px 1px 0px 0px;
}

.approve-transfer{
    float: right;
    text-align: right;
}

.transfer-price{
    float: right;
    margin-right: 14px;
}

.transfer-info{
    margin: 7px 10px 0 0;
}

.char-transfer-inner{
    width: 70%;
    min-height: 125px;
}

.current-taler-balance{
    width: 75%;
}

.status-taler-balance{
    margin-bottom: 20px;
}

.trans-desc{
    float: left;
    margin-right: 15px;
}

.trans-desc.req{
    color: #A94442;
}

.trans-taler::after{
    content: '';
    clear: both;
}

.alert{
    position: relative;
    margin-top: 50px;
}

.alert-warning p{
    color: #8A6D3B;
    font-size: 14px;
}

/* ---- Main Features ---- */

.main-feature-big{
    width: 100%;
    max-width: 2000px;
    min-height: 655px;
    position: relative;
    margin: 0px auto;
    /*	overflow: hidden;*/
    background: #fff url('../images/fiesta-online-header.png') center top no-repeat;
}

.main-feature-big .logobig {
    vertical-align: middle;
    display: block;
    width: 380px;
    margin: 40px auto 0px -180px;
    position: absolute;
    left: 50%;
    z-index: 20;
}

.main-feature-big::after{
    background: transparent url("../images/section-divider-brambles.png") no-repeat scroll center top;
    height: 70px;
    content: "";
    display: block;
    position: absolute;
    bottom: -36px;
    left: 0px;
    right: 0px;
    z-index: 10;
}

.main-feature-news,
.main-feature-guide,
.main-feature-features,
.main-feature-media,
.main-feature-community{
    width: 100%;
    max-width: 2000px;
    min-height: 350px;
    position: relative;
    margin: 0px auto;
}

.main-feature-news{
    background: #fff url('../images/background-header-news.jpg') center top no-repeat;
}

.main-feature-guide{
    background: #fff url('../images/background-header-guide.jpg') center top no-repeat;
}

.main-feature-features{
    background: #fff url('../images/background-header-features.jpg') center top no-repeat;
}

.main-feature-media{
    background: #fff url('../images/background-header-media.jpg') center top no-repeat;
}

.main-feature-community{
    background: #fff url('../images/background-header-community.jpg') center top no-repeat;
}

.main-feature-account{
    width: 100%;
    max-width: 2000px;
    min-height: 200px;
    position: relative;
    margin: 0px auto;
    background: #fff url('../images/background-header-account.jpg') center top no-repeat;
}

.main-feature-account .logobig {
    vertical-align: middle;
    display: block;
    width: 280px;
    margin: 5px auto 0px -135px;
    position: absolute;
    left: 50%;
    z-index: 20;
}

.main-feature-account .logobig img{
    width: 280px;
}

.main-feature-news .logobig,
.main-feature-guide .logobig,
.main-feature-features .logobig,
.main-feature-media .logobig,
.main-feature-community .logobig{
    vertical-align: middle;
    display: block;
    width: 300px;
    margin: 25px auto 0px -131px;
    position: absolute;
    left: 50%;
    z-index: 20;
}

.main-feature-news .logobig img,
.main-feature-guide .logobig img,
.main-feature-features .logobig img,
.main-feature-media .logobig img,
.main-feature-community .logobig img{
    width: 300px;
}

.main-feature-news::after,
.main-feature-guide::after,
.main-feature-features::after,
.main-feature-media::after,
.main-feature-community::after,
.main-feature-account::after{
    background: transparent url("../images/section-divider-brambles.png") no-repeat scroll center top;
    height: 70px;
    content: "";
    display: block;
    position: absolute;
    bottom: -35px;
    left: 0px;
    right: 0px;
    z-index: 10;
}

.home-headline{
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    text-align: center;
    z-index: 10;
}

.home-headline h1{
    font: 400 37px/33px "Alice",Helvetica,Arial,sans-serif;
    color: #fff; /*#0d1399;*/
    padding-top:15px;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.home-headline h2{
    font: 700 21px/23px "Noto Sans",Helvetica,Arial,sans-serif;
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.play-button-small{
    position: absolute;
    left:50%;
    margin-left: -128px;
    bottom: 20px;
    z-index: 25;
}

.play-button-small a{
    display: block;
    width: 256px;
    height: 100px;
}

.play-button-small a.de{
    background: url('../images/play-button-small-de.png') no-repeat center top/cover;
}
.play-button-small a.us,
.play-button-small a.en{
    background: url('../images/play-button-small-en.png') no-repeat center top/cover;
}
.play-button-small a.es{
    background: url('../images/play-button-small-es.png') no-repeat center top/cover;
}
.play-button-small a.fr{
    background: url('../images/play-button-small-fr.png') no-repeat center top/cover;
}

.play-button-big{
    position: absolute;
    left:50%;
    margin-left: -160px;
    bottom: 20px;
    z-index: 25;
}

.play-button-big a{
    display: block;
    width: 320px;
    height: 125px;
}

.play-button-big a.de{
    background: url('../images/play-button-big-de.png') no-repeat center top;
}
.play-button-big a.us,
.play-button-big a.en{
    background: url('../images/play-button-big-en.png') no-repeat center top;
}
.play-button-big a.es{
    background: url('../images/play-button-big-es.png') no-repeat center top;
}
.play-button-big a.fr{
    background: url('../images/play-button-big-fr.png') no-repeat center top;
}

.play-button-small a:hover,
.play-button-big a:hover{
    background-position: center bottom;
}

#video-background{
    position: absolute;
    left: 50%;
    margin-left: -1000px;
    z-index: 0;
}

/* ---- Header ---- */

.header.small,
.header.big {
    position: relative;
    max-width: 2000px;
    margin: 0px auto;
    font-size: 100%;
    background: #535A65 url("../images/background-menu.jpg") no-repeat scroll center 30px;
}

.header > .container {
    display: table;
    /*	margin-bottom: -78px;*/
    margin-bottom: 0px;
    width: 100%;
}

.header .topbar {
    z-index: 50;
    padding: 4px 0px;
    position: relative;
}

.header .topbar ul.loginbar > li {
    display: inline;
    list-style: outside none none;
    position: relative;
    padding-bottom: 15px;
}

.header .navbar-collapse {
    height: 50px !important;
}

.header .navbar-collapse::after{
    background: transparent url("../images/section-divider-big.png") no-repeat scroll center top;
    height: 20px;
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0px;
    right: 0px;
    z-index: 10;
}

.header .navbar-nav {
    position: relative;
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header .navbar-nav > li:hover > a, .header .navbar-nav > .open > a, .header .navbar-nav > .open > a:hover, .header .navbar-nav > .open > a:focus {
    color: #71298d;
}

.header .topbar ul.loginbar li i.fa-home{
    font-size: 15px;
}

.header .topbar ul.accountBar li i.fa-cog,
.header .topbar ul.accountBar li i.fa-key{
    display: none;
}

/*accountBar*/
.header .topbar ul.accountBar {
    top: 25px;
    left: -5px;
    display: none;
    padding: 4px 0;
    padding-left: 0;
    list-style: none;
    min-width: 100px;
    position: absolute;
    background: #f0f0f0;
}

.header .topbar li:hover ul.accountBar {
    display: block;
}

.header .topbar ul.accountBar:after {
    top: -4px;
    width: 0;
    height: 0;
    left: 8px;
    content: ' ';
    display: block;
    position: absolute;
    border-bottom: 6px solid #f0f0f0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left-style: inset; /*FF fixes*/
    border-right-style: inset; /*FF fixes*/
}

.header .topbar ul.accountBar li a {
    color: #555;
    display: block;
    font-size: 10px;
    padding: 2px 12px;
    margin-bottom: 1px;
    text-transform: uppercase;
}

.header .topbar ul.accountBar li.active a i {
    color: #999;
    float: right;
    margin-top: 2px;
}

/*.header .topbar ul.accountBar li a:hover,
.header .topbar ul.accountBar li.active a {
	background: #fafafa;
}*/

.header .topbar ul.accountBar li a:hover {
    text-decoration: none;
}

.headline {
    display: block;
    margin: 10px 0px 25px;
    border-bottom: 1px dotted rgba(0,0,0,0.5);
}

.headline h2, .headline h3, .headline h4 {
    margin: 0px 0px -2px;
    padding-bottom: 5px;
    display: inline-block;
    border-bottom: 2px solid #af0c00;
}

.header {
    border-bottom: none;
}

.header .logo img {
    z-index: 1;
    position: relative;
    margin: 10px 0px 0px;
    width: 160px;
    height: 85px;
}

.main-container{
    -ms-transition: transform 200ms ease 0s;
    -webkit-transition: transform 200ms ease 0s;
    transition: transform 200ms ease 0s;
}

.topbar-toggle,
.navigation-toggle{
    display: none;
}

.mobile-accountHeader{
    display: none;
}

.header .topbar ul.loginbar > li > a,
.header .topbar ul.loginbar > li > a:hover {
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
}

.header .topbar ul.loginbar li i.fa {
    color: #fff;
}

.header .topbar ul.languages li i.fa {
    color: #BBB;
    display: none;
}

.header .topbar ul.languages li.active i.fa{
    display: block;
}

/* ---- Header Icons ---- */

.icon{
    width: 40px;
    height: 40px;

    position: absolute;
    left: -25px;
    top: 0px;
}

.icon-startseite{
    background: transparent url("../images/menu/icon_home.png") no-repeat scroll center top / cover;
}

.icon-news{
    background: transparent url("../images/menu/icon_news.png") no-repeat scroll center top / cover;
}

.icon-guide{
    background: transparent url("../images/menu/icon_guide.png") no-repeat scroll center top / cover;
}

.icon-media{
    background: transparent url("../images/menu/icon_media.png") no-repeat scroll center top / cover;
}

.icon-features{
    background: transparent url("../images/menu/icon_features.png") no-repeat scroll center top / cover;
}

.icon-community{
    background: transparent url("../images/menu/icon_community.png") no-repeat scroll center top / cover;
}

.icon-shop{
    background: transparent url("../images/menu/icon_shop.png") no-repeat scroll center top / cover;
}

.icon-rotg{
    background: transparent url("../images/menu/icon_rotg.png") no-repeat scroll center top / cover;
}

/* ---- Responsive Video ---- */

.embed-responsive{
    border-width: 3px;
    border-style: solid;
    border-color: #61551E;
    overflow: visible;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blog-grid img{
    border-width: 3px;
    border-style: solid;
    border-color: #61551E;
}

/* ---- Footer ---- */

.footer-logo {
    margin: 17px 0px 20px;
    height: 40px;
}

.footer-v1{
    max-width: 2000px;
    margin: 0px auto;
}

.footer-v1 .footer{
    background: #fff;
    padding: 20px 0px 20px;
}

.footer-v1 .footer p{
    font-size: 14px;
}

.footer-v1 .copyright {
    background: transparent url("../images/background-copyright.png") no-repeat scroll 0% 0%;
    padding: 75px 0px 5px;
    min-height: 110px;
}

.footer-v1 .copyright a {
    font-size: 14px;
    color: #ffa200;
}

.footer-v1 .copyright p{
    font-size: 14px;
    color: #fff;
}

.footer-v1 .footer h2 {
    color: #585f69;
    font-size: 18px;
    font-weight: 200;
}

.footer-v1 .footer p {
    color: #555;
}

.footer-v1 .link-list a, .footer-v1 .link-list i {
    color: #555;
}

.footer-v1 .link-list li {
    border-top: 1px solid #ccc;
}

.footer-v1 .bg-so{
    height: 28px;
    top: 0px;
    left: 3px;
    width: 28px;
    z-index: 0;
    background-color: rgb(255, 255, 255);
    border-radius: 5px !important;
    position: absolute;
}

.social_facebook,
.social_twitter,
.social_youtube{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

.social_twitter::after,
.social_facebook::after{
    content: '';
    width: 10px;
    height: 10px;
    background: #fff;
}

.social-icons li{
    position: relative;
    width: 32px;
    height: 32px;
}

@media (max-width: 1499px){

    .home-headline{
        position: absolute;
        top: 225px;
        left: 50%;
        margin-left: -215px;
        width: 450px;
    }

    .home-headline h1{
        font: 400 32px/30px 'Alice',Helvetica,Arial,sans-serif;
        color: #fff; /*#0d1399;*/
        text-transform: uppercase;
        padding-top: 7px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .home-headline h2{
        font: 700 19px/23px "Noto Sans",Helvetica,Arial,sans-serif;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .play-button-big{
        position: absolute;
        left:50%;
        margin-left: -128px;
        bottom: 20px;
        z-index: 25;
    }

    .play-button-big a{
        display: block;
        width: 256px;
        height: 100px;
    }

    .play-button-big a.de{
        background: url('../images/play-button-small-de.png') no-repeat center top;
    }

    .play-button-big a.en,
    .play-button-big a.us{
        background: url('../images/play-button-small-en.png') no-repeat center top;
    }

    .play-button-big a.es{
        background: url('../images/play-button-small-es.png') no-repeat center top;
    }

    .play-button-big a.fr{
        background: url('../images/play-button-small-fr.png') no-repeat center top;
    }


    .play-button-big a:hover{
        background-position: center bottom;
    }
}

@media (min-width: 1199px){

    #topcontrol:hover {
        background: #71298d;
    }

    #block2.home .mq-image{
        margin: 110px 0 0 30px;
    }

    .header .navbar-nav > li > a{
        padding: 9px 50px 9px 20px;
    }

    .char-account-password-reset{
        position: absolute;
        left: -150px;
        bottom: 0px;
        z-index: 10;
        background: transparent url("../images/account-char-madragora.png") no-repeat scroll center top / cover;
        width: 550px;
        height: 600px;
    }

    .char-account-password-reset::after{
        content: '';
        position: absolute;
        top: 114px;
        right: 48px;
        background: transparent url("../images/flower.png") no-repeat scroll center top;
        width: 150px;
        height: 150px;
        animation: 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s alternate none infinite running flower;
    }

    .char-account-login{
        position: absolute;
        left: -150px;
        bottom: 0px;
        z-index: 10;
        background: transparent url("../images/account-char-fox-boy.png") no-repeat scroll center top / cover;
        width: 550px;
        height: 600px;
    }

    .char-account-login::after{
        position: absolute;
        top: 487px;
        right: 55px;
        background: transparent url("../images/account-bell.png") no-repeat scroll center top / 100% 100%;
        width: 55px;
        height: 75px;
        -webkit-animation: bell 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation: bell 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        z-index: 10;
        content: '';
    }

    .char-account-register{
        position: absolute;
        left: -150px;
        bottom: 0px;
        z-index: 10;
        background: transparent url("../images/account-char-akisha.png") no-repeat scroll center top / cover;
        width: 550px;
        height: 600px;
    }

    #archer, #cleric, #crusader, #fighter, #joker, #mage{
        min-height: 595px;
    }

    #archer .char-img,
    #cleric .char-img,
    #crusader .char-img,
    #fighter .char-img,
    #joker .char-img,
    #mage .char-img{
        position: absolute;
        right: 150px;
        top: 0px;
        z-index: 10;
        width: 350px;
        height: 555px;
    }

    #archer .char-img{
        background: transparent url("../images/guide/chars/class-archer.png") no-repeat scroll center top / cover;
    }
    #cleric .char-img{
        background: transparent url("../images/guide/chars/class-cleric.png") no-repeat scroll center top / cover;
    }
    #crusader .char-img{
        background: transparent url("../images/guide/chars/class-crusader.png") no-repeat scroll center top / cover;
    }
    #fighter .char-img{
        background: transparent url("../images/guide/chars/class-fighter.png") no-repeat scroll center top / cover;
    }
    #joker .char-img{
        background: transparent url("../images/guide/chars/class-joker.png") no-repeat scroll center top / cover;
    }
    #mage .char-img{
        background: transparent url("../images/guide/chars/class-mage.png") no-repeat scroll center top / cover;
    }

    .archer .char-img,
    .cleric .char-img,
    .crusader .char-img,
    .fighter .char-img,
    .joker .char-img,
    .mage .char-img{
        position: absolute;
        left: -250px;
        top: 50px;
        z-index: 10;
        width: 661px;
        height: 982px;
    }

    .archer .char-img{
        background: transparent url("../images/guide/classes/fiesta-archer.png") no-repeat scroll center top / cover;
    }
    .cleric .char-img{
        background: transparent url("../images/guide/classes/fiesta-cleric.png") no-repeat scroll center top / cover;
    }
    .crusader .char-img{
        background: transparent url("../images/guide/classes/fiesta-crusader.png") no-repeat scroll center top / cover;
    }
    .fighter .char-img{
        background: transparent url("../images/guide/classes/fiesta-fighter.png") no-repeat scroll center top / cover;
    }
    .joker .char-img{
        background: transparent url("../images/guide/classes/fiesta-joker.png") no-repeat scroll center top / cover;
    }
    .mage .char-img{
        background: transparent url("../images/guide/classes/fiesta-mage.png") no-repeat scroll center top / cover;
    }

    .iclass-screen1,
    .iclass-screen2{
        background-color: rgba(255, 255, 255, 0.9);
        border: 3px solid #61551E;
        padding: 0px;
        position: absolute;
        width: 250px;
    }

    .iclass-screen1{
        top: 55px;
        left: 30px;
        z-index: 30;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    .iclass-screen2{
        top: 15px;
        right: 40px;
    }

    .class-screen1,
    .class-screen2{
        background-color: rgba(255, 255, 255, 0.9);
        border: 3px solid #61551E;
        padding: 0px;
        position: absolute;
        width: 320px;
    }

    .class-screen1{
        top: 220px;
        right: -340px;
        z-index: 30;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    .class-screen2{
        top: 130px;
        right: 0px;
    }

    .feature-index-cl{
        top: 210px;
        left: -270px;
    }


    .feature-index-cr{
        top: 150px;
        right: -220px;
    }

    .footer-v1 .container .row .col-md-3:first-child::before{
        position: absolute;
        top: 10px;
        left: -210px;
        background: transparent url("../images/mushroom-man.png") no-repeat scroll center top / 90% 100%;
        width: 200px;
        height: 200px;
        -webkit-animation: 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s alternate none infinite running mushjump;
        animation: 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s alternate none infinite running mushjump;
        z-index: 10;
        content: '';
    }

    .footer-v1 .container .row .col-md-3:first-child::after{
        position: absolute;
        top: 200px;
        left: -210px;
        background: transparent url("../images/mushroom-man-shadow.png") no-repeat scroll center top / 100% 90%;
        width: 200px;
        height: 160px;
        -webkit-animation: 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s alternate none infinite running mushsjump;
        animation: 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s alternate none infinite running mushsjump;
        background-size: 90% 100%;
        content: '';
    }

    .footer-v1 .container .row .col-md-3:first-child a::after{
        position: absolute;
        top: 172px;
        left: -210px;
        background: url("../images/mushroom-man-shadow-ground.png") no-repeat scroll center top transparent;
        width: 200px;
        height: 160px;
        content: '';
    }

    .char-account-register::after{
        position: absolute;
        top: 255px;
        right: 50px;
        background: transparent url("../images/snow-ghost.png") no-repeat scroll center top / 90% 100%;
        width: 120px;
        height: 200px;
        -webkit-animation: snow-ghost 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -moz-animation: snow-ghost 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation: snow-ghost 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        z-index: 10;
        content: '';
    }
}

@media (min-width: 1199px) and (max-width: 1499px){
    .main-feature-big {
        background-size: 1500px auto;
        min-height: 480px;
    }
    .main-feature-big .logobig{
        width: 340px;
        margin: 20px auto 0px -150px;
    }
    .main-feature-big .logobig img{
        width: 340px;
        margin: 0px;
    }

    .main-feature-account .logobig {
        vertical-align: middle;
        display: block;
        width: 260px;
        margin: 5px auto 0px -155px;
        position: absolute;
        left: 50%;
        z-index: 20;
    }

    #video-background{
        width: 1500px;
        height: auto;
        margin-left: -750px;
    }

    .main-feature-newsx,
    .main-feature-small{
        background-size: 1500px auto;
        min-height: 250px;
    }

    #block1.archer .class-description,
    #block1.cleric .class-description,
    #block1.crusader .class-description,
    #block1.fighter .class-description,
    #block1.joker .class-description,
    #block1.mage .class-description{
        padding-right: 90px;
    }

    .archer .char-img,
    .cleric .char-img,
    .crusader .char-img,
    .fighter .char-img,
    .joker .char-img,
    .mage .char-img {
        left: -115px;
        width: 560px;
        height: 810px;
    }

    .feature-index-cl{
        top: 210px;
        left: -220px;
    }

    .feature-index-cr{
        top: 150px;
        right: -165px;
    }
}

@media (max-width: 1198px){
    .main-feature-news::after,
    .main-feature-guide::after,
    .main-feature-features::after,
    .main-feature-media::after,
    .main-feature-community::after,
    .main-feature-account::after {
        background: transparent url("../images/section-divider-brambles-medium.png") no-repeat scroll center top;
        height: 39px;
        bottom: -20px;
    }

    .iclass-screen1,
    .iclass-screen2,
    .class-screen1,
    .class-screen2{
        background-color: rgba(255, 255, 255, 0.9);
        border: 3px solid #61551E;
        padding: 0px;
        position: relative;
        width: auto;
        -webkit-transform: none;
        transform: none;
        top: auto;
        right: auto;
    }

}

@media (min-width: 992px){
    .nav > li a.home-nav{
        display: none;
    }
    .header .navbar-nav > li > a {
        font: 400 22px/20px "Alice",Arial,sans-serif;
        color: #666;
        padding: 9px 40px 9px 20px;
        /*text-shadow: 0px 0px 2px rgba(0,0,0,0.6), 1px 1px 4px rgba(0,0,0,0.8);*/
    }

    .header .navbar-nav > li:last-child > a {
        padding-right: 0px;
    }

    .header .navbar-nav > li > a:hover, .header .navbar-nav > .active > a{
        border: none;
        color: #71298d;
    }

    #block2.home{
        /*		background: #fff url('../images/background-evolve.jpg') center bottom no-repeat;
                background-size: contain;*/
    }

    .header .dropdown{
        height: 46px;
    }

    .header .dropdown > a:after {
        top: 24px;
        content: "\f107";
        left: 50%;
        margin-left: -18px;
        font-weight: 900;
    }

    .header .dropdown:last-child > a::after {
        top: 24px;
        content: "\f107";
        left: 50%;
        margin-left: 6px;
        font-weight: 900;
    }

    .header .dropdown-menu {
        padding: 0px;
        min-width: 200px;
        border: 2px solid #61551e;
        border-radius: 0px;
        border-top: none;
        z-index: 9999 !important;
        margin-left: -25px;
        background-color: rgba(255,255,255,0.95);
        box-shadow: 0px 2px 5px rgba(0,0,0,0.3) inset;
    }

    .header .dropdown-menu li:last-child::before{
        background: url('../images/corner-br.png') center top no-repeat;
        height: 20px;
        width: 22px;
        content:'';
        display: block;
        position: absolute;
        bottom: -4px;
        right: -4px;
        z-index: 10;
    }

    .header .dropdown-menu li:last-child::after{
        background: url('../images/corner-bl.png') center top no-repeat;
        height: 20px;
        width: 22px;
        content:'';
        display: block;
        position: absolute;
        bottom: -4px;
        left: -4px;
        z-index: 10;
    }

    .header .dropdown-toggle{
        height: 50px;
        z-index: 25;
    }

    /* ---- Sticky Header ---- */
    .header-fixed .header {
        height: auto;
    }

    .header-fixed .header.header-sticky {
        margin-top: 0;
        transition: all 0.2s ease-in-out;
    }

    .header-fixed .header.header-fixed-shrink {
        top: 0;
        left: auto;
        width: 100%;
        /*height: 95px;*/
        z-index: 999;
        position: fixed;
        margin-top: -35px;
        border-bottom: none;
        box-shadow: 0 0 3px #bbb;
        background: #535A65 url("../images/background-menu.jpg") no-repeat scroll center 30px;
        transition: all 0.3s ease-in-out;
    }

    /*Container*/
    .header-fixed .header.header-fixed-shrink > .container {
        margin-bottom: -46px;
    }

    /*Logo*/
    .header-fixed .header.header-fixed-shrink .logo img {
        max-width: 105px;
        margin: 45px 0 -4px;
    }

    /*Navbar Nav*/
    .header-fixed .header.header-fixed-shrink .navbar-nav > li > a {
        padding-top: 19px;
        padding-bottom: 0px;
        line-height: 0px;
    }

    .header-fixed .header.header-fixed-shrink .navbar-nav > li > a:hover,
    .header-fixed .header.header-fixed-shrink .navbar-nav > .active > a {
        border-bottom: none;
    }

    /*Dropdown*/
    .header-fixed .header.header-fixed-shrink .dropdown > a:after {
        top: 34px;
    }

    /*Search*/
    .header-fixed .header.header-fixed-shrink .nav > li > .search {
        color: #777;
        padding: 20px 0 22px;
        background: inherit;
        border-bottom: none;
    }

    .header-fixed .header.header-fixed-shrink .nav .search-open {
        top: 60px;
    }

    .header-fixed .header.header-fixed-shrink .navbar-collapse.collapse{
        margin-top: 50px;
    }

    .feature-index-cl{
        position: absolute;
        width: 475px;
        height: 550px;
        background: transparent url('../images/char-mini-greenky.png') no-repeat center top;
    }


    .feature-index-cr{
        position: absolute;
        width: 400px;
        height: 650px;
    }

    .ficrb{
        position: absolute;
        top: 0px;
        right: 0px;
        background: transparent url('../images/flower-man.png') no-repeat center top;
        width: 350px;
        height: 650px;
    }

    .ficra{
        position: absolute;
        top: 60px;
        right: 200px;
        background: transparent url('../images/flower.png') no-repeat center top;
        width: 150px;
        height: 150px;
        -webkit-animation: flower 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -moz-animation: flower 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation: flower 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
}

@media (min-width: 992px) and (max-width: 1199px){

    .main-feature-big {
        background: #fff url('../images/fiesta-online-header.png') center top no-repeat;
        background-size: 1200px auto;
        min-height: 390px;
    }
    .main-feature-big .logobig{
        width: 300px;
        margin: 10px auto 0px -130px;
    }
    .main-feature-big .logobig img{
        width: 300px;
        margin: 0px;
    }

    .main-feature-news,
    .main-feature-guide,
    .main-feature-features,
    .main-feature-media,
    .main-feature-community{
        width: 100%;
        max-width: 1200px;
        min-height: 240px;
        position: relative;
        margin: 0px auto;
    }

    .main-feature-news{
        background: #fff url('../images/background-header-news-m.jpg') center top no-repeat;
    }

    .main-feature-guide{
        background: #fff url('../images/background-header-guide-m.jpg') center top no-repeat;
    }

    .main-feature-features{
        background: #fff url('../images/background-header-features-m.jpg') center top no-repeat;
    }

    .main-feature-media{
        background: #fff url('../images/background-header-media-m.jpg') center top no-repeat;
    }

    .main-feature-community{
        background: #fff url('../images/background-header-community-m.jpg') center top no-repeat;
    }

    .main-feature-news .logobig,
    .main-feature-guide .logobig,
    .main-feature-features .logobig,
    .main-feature-media .logobig,
    .main-feature-community .logobig{
        vertical-align: middle;
        display: block;
        width: 230px;
        margin: 10px auto 0px -100px;
        position: absolute;
        left: 50%;
        z-index: 20;
    }

    .main-feature-news .logobig img,
    .main-feature-guide .logobig img,
    .main-feature-features .logobig img,
    .main-feature-media .logobig img,
    .main-feature-community .logobig img{
        width: 230px;
    }

    .main-feature-account{
        background: #fff url('../images/background-header-account-m.jpg') center top no-repeat;
        background-size: 1200px auto;
        min-height: 160px;
    }
    .main-feature-account .logobig{
        width: 240px;
        margin: 5px auto 0px -110px;
    }
    .main-feature-account .logobig img{
        width: 240px;
        margin: 0px;
    }

    #video-background{
        width: 1200px;
        height: auto;
        margin-left: -600px;
    }

    .home-headline{
        position: absolute;
        top: 190px;
        left: 50%;
        margin-left: -190px;
        width: 380px;
    }

    .home-headline h1{
        font: 400 22px/21px 'Alice',Helvetica,Arial,sans-serif;
        color: #fff; /* #0d1399;*/
        text-transform: uppercase;
        padding-top: 2px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .home-headline h2{
        font: 700 16px/18px "Noto Sans",Helvetica,Arial,sans-serif;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .play-button-small{
        position: absolute;
        left:50%;
        margin-left: -100px;
        bottom: 5px;
        z-index: 25;
    }

    .play-button-small a{
        display: block;
        width: 200px;
        height: 78px;
    }

    .play-button-big{
        position: absolute;
        left:50%;
        margin-left: -128px;
        bottom: 10px;
        z-index: 25;
    }

    .header .navbar-nav > li > a{
        font: 400 21px/19px "Alice",Arial,sans-serif;
    }

    .header .dropdown > a:after {
        top: 24px;
        content: "\f107";
        left: 50%;
        margin-left: -13px;
        font-weight: 900;
    }

    .header .dropdown .shop::after {
        top: 24px;
        content: "\f107";
        font-weight: 900;
        margin-left: -9px;
        left: 70%;
    }

    .icon {
        width: 35px;
        height: 35px;
        position: absolute;
        left: -20px;
        top: 0px;
    }

    #block2.home .mq-image{
        margin: 200px 0px 0px 30px;
    }

    #block1.game .mq-image{
        margin: 200px 0px 0px 30px;
    }

    #block2.game .mq-image{
        margin: 120px 0px 0px 0px;
    }

    #block3.game .mq-image{
        margin: 130px 0px 0px 10px;
    }

    .char-account-password-reset{
        position: absolute;
        left: -130px;
        bottom: 0px;
        z-index: 10;
        background: transparent url("../images/account-char-madragora.png") no-repeat scroll center top / cover;
        width: 465px;
        height: 465px;
    }

    .char-account-password-reset::after {
        content: '';
        position: absolute;
        top: 96px;
        right: 42px;
        background: transparent url("../images/flower.png") no-repeat scroll center top/cover;
        width: 125px;
        height: 125px;
        animation: 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s alternate none infinite running flower;
    }

    .char-account-login{
        position: absolute;
        left: -130px;
        bottom: 0px;
        z-index: 10;
        background: transparent url("../images/account-char-fox-boy.png") no-repeat scroll center top / cover;
        width: 465px;
        height: 465px;
    }

    .char-account-register{
        position: absolute;
        left: -130px;
        bottom: 0px;
        z-index: 10;
        background: transparent url("../images/account-char-akisha.png") no-repeat scroll center top / cover;
        width: 465px;
        height: 465px;
    }

    .archer .char-img,
    .cleric .char-img,
    .crusader .char-img,
    .fighter .char-img,
    .joker .char-img,
    .mage .char-img{
        position: absolute;
        left: -110px;
        top: 100px;
        z-index: 10;
        width: 480px;
        height: 690px;
    }

    .archer .char-img{
        background: transparent url("../images/guide/classes/fiesta-archer.png") no-repeat scroll center top / cover;
    }
    .cleric .char-img{
        background: transparent url("../images/guide/classes/fiesta-cleric.png") no-repeat scroll center top / cover;
    }
    .crusader .char-img{
        background: transparent url("../images/guide/classes/fiesta-crusader.png") no-repeat scroll center top / cover;
    }
    .fighter .char-img{
        background: transparent url("../images/guide/classes/fiesta-fighter.png") no-repeat scroll center top / cover;
    }
    .joker .char-img{
        background: transparent url("../images/guide/classes/fiesta-joker.png") no-repeat scroll center top / cover;
    }
    .mage .char-img{
        background: transparent url("../images/guide/classes/fiesta-mage.png") no-repeat scroll center top / cover;
    }

    #block1.archer,
    #block1.cleric,
    #block1.crusader,
    #block1.fighter,
    #block1.joker,
    #block1.mage{
        background-size: 70%, 90%;
        background-position: right 460px, left bottom;
        padding-bottom: 300px;
    }

    #class_select{
        width: 120px;
        right: -25px;
    }

    #class_select ul{
        margin: 0px 7px;
    }

    #class_select li span {
        font-size: 13px;
    }

    #block1.archer .class-description,
    #block1.cleric .class-description,
    #block1.crusader .class-description,
    #block1.fighter .class-description,
    #block1.joker .class-description,
    #block1.mage .class-description{
        padding-right: 90px;
    }

    #archer, #cleric, #crusader, #fighter, #joker, #mage{
        min-height: 525px;
    }

    #archer .char-img,
    #cleric .char-img,
    #crusader .char-img,
    #fighter .char-img,
    #joker .char-img,
    #mage .char-img{
        position: absolute;
        right: 50px;
        top: 0px;
        z-index: 10;
        width: 350px;
        height: 555px;
    }

    #archer .char-img{
        background: transparent url("../images/guide/chars/class-archer.png") no-repeat scroll center top / cover;
    }
    #cleric .char-img{
        background: transparent url("../images/guide/chars/class-cleric.png") no-repeat scroll center top / cover;
    }
    #crusader .char-img{
        background: transparent url("../images/guide/chars/class-crusader.png") no-repeat scroll center top / cover;
    }
    #fighter .char-img{
        background: transparent url("../images/guide/chars/class-fighter.png") no-repeat scroll center top / cover;
    }
    #joker .char-img{
        background: transparent url("../images/guide/chars/class-joker.png") no-repeat scroll center top / cover;
    }
    #mage .char-img{
        background: transparent url("../images/guide/chars/class-mage.png") no-repeat scroll center top / cover;
    }

    .feature-index-cl{
        top: 210px;
        left: -255px;
    }

    .feature-index-cr{
        top: 150px;
        right: -200px;
    }

    .char-account-register::after{
        position: absolute;
        top: 195px;
        right: 20px;
        background: transparent url("../images/snow-ghost.png") no-repeat scroll center top / 90% 100%;
        width: 120px;
        height: 200px;
        -webkit-animation: snow-ghost 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -moz-animation: snow-ghost 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation: snow-ghost 5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        z-index: 10;
        content: '';
    }
}

@media (max-width: 991px){
    .home-nav{
        display: block;
    }
    .pull-right{
        /*		float: none !important;*/
    }

    .fb-login-button img{
        max-width: 180px;
    }

    .play-button-big,
    .play-button-small{
        display: none;
    }

    .dungeon-select,
    .kq-select{
        display: block;
    }

    .chapter-list,
    .dungeon-list,
    .kingdom-list{
        display: none;
    }

    .main-feature-big::after {
        background: transparent url("../images/section-divider-brambles-small.png") no-repeat scroll center top;
        height: 36px;
        content: "";
        display: block;
        position: absolute;
        bottom: -20px;
        left: 0px;
        right: 0px;
        z-index: 10;
    }

    .main-feature-news::after,
    .main-feature-guide::after,
    .main-feature-features::after,
    .main-feature-media::after,
    .main-feature-community::after,
    .main-feature-account::after {
        background: transparent url("../images/section-divider-brambles-small.png") no-repeat scroll center top;
        height: 36px;
        bottom: -20px;
    }

    .header.small,
    .header.big{
        background:transparent;
    }

    .header > .container {
        display: table;
        margin-bottom: -48px;
    }

    .header .navbar-collapse{
        background: none;
        height: auto !important;
    }

    .header .topbar-toggle,
    .header .navigation-toggle {
        position: relative;
        display: block;
        padding: 9px 10px;
        background: none;
        border: 1px solid transparent;
        border-color: #71298d;
    }

    .header .topbar-toggle{
        float: right;
        margin: 8px 15px 8px 0px;
    }

    .header .navigation-toggle{
        float: left;
        margin: 8px 0px 8px 15px;
    }

    .header .topbar-toggle:hover,
    .header .navigation-toggle:hover {
        background: #9547b4 !important;
    }

    .header .navigation-toggle, .header .topbar-toggle,
    .header .navigation-toggle:hover, .header .topbar-toggle:hover,
    .header .navigation-toggle:focus, .header .navigation-toggle:focus {
        background: #71298d none repeat scroll 0% 0%;
        padding: 6px 10px 2px;
    }

    .header .topbar-toggle .fa,
    .header .navigation-toggle .fa {
        color: #FFF;
        font-size: 19px;
    }

    .header .navbar-nav{
        margin-top: 90px;
    }

    .header .navbar-nav > li > a {
        color: #fff;
        background: rgba(0,0,0,0.5);
    }

    .header .navbar-nav > li > a:hover {
        color: #71298d;
    }

    .header .navbar-nav > .active > a, .header .navbar-nav > .active > a:hover, .header .navbar-nav > .active > a:focus {
        background: none repeat scroll 0% 0% #71298d;
        color: #FFF !important;
    }

    .header .navbar-nav .open .dropdown-menu > li > a:hover, .header .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #999;
        background-color: transparent;
    }

    .header .navbar-nav > li:hover > a, .header .navbar-nav > .open > a, .header .navbar-nav > .open > a:hover, .header .navbar-nav > .open > a:focus {
        color: #fff;
        background: rgba(255, 255, 255, 0.4) none repeat scroll 0% 0%;
    }

    .header .navbar-collapse{
        position: absolute;
        min-height: calc(100vh + 51px);
        bottom: -51px;

        /* ie right 70% bei content 30% */

        /*	position: fixed;
            min-height: 100%; */
        top: 0px;
        right: 100%;
        width: 80%;
        background-color: #182a43;
        border-right: 2px solid rgba(0, 0, 0, 0.7);
        background: #2B1E0B url('../images/menubar-side-header.jpg') no-repeat scroll 50% 0px;
        box-shadow: 3px 0px 12px rgba(0, 0, 0, 0.35);

    }

    .collapse{
        visibility: visible;
    }

    .header .navbar-collapse.collapse {
        display: block !important;
    }

    .header .mobile-logo{
        background: url('../images/fiesta-online-logo-small.png') no-repeat scroll 50% 0px;
        width: 200px;
        height: 119px;
        left: 50%;
        margin: 3px 0px 0px -100px;
        position: relative;
    }

    .header .navbar-nav {
        display: block;
        background: none;
        position: relative;
        top: 0px;
        left: 0px;
        padding: 4px 0px;
        list-style: outside none none;
        min-width: 100px;
        margin-top: 80px;
    }

    .header .menu-container{
        width: auto;
    }

    .header .navbar-nav > li {
        float: none;
        position: relative;
    }

    .header .navbar-nav > li > a {
        font: 700 1.6rem/1.6 'Noto Sans',Arial,serif;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        background: none;
        display: block;
        padding: 0.5rem 1rem 0.5rem 50px;
        border-bottom: none;
    }

    .icon{
        width: 35px;
        height: 35px;
        left: 7px;
    }

    .header .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
    }

    .header .navbar-nav .open .dropdown-menu > li > a, .header .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 50px;
    }

    .header .navbar-nav > li a {
        border-bottom: none;
    }

    .header .navbar-nav > .active > a, .header .navbar-nav > .active > a:hover, .header .navbar-nav > .active > a:focus {
        background-color: rgba(0,0,0,0.15);
        color: #71298d !important;
    }

    .header .topbar{
        position: absolute;
        min-height: calc(100vh + 51px);
        bottom: -51px;

        /* ie right 70% bei content 30% */

        /*	position: fixed;
            min-height: 100%;*/
        top: 0px;
        left: 100%;
        width: 80%;
        background-color: #182a43;
        border-left: 2px solid rgba(0, 0, 0, 0.7);
        background: #182a43 url('../images/accountbar-side-header.jpg') no-repeat scroll 50% 0px;
        box-shadow: -3px 0px 12px rgba(0, 0, 0, 0.35);
    }

    .header .topbar .mobile-accountHeader{
        display: block;
        text-align: center;
        color: #fff;
        padding-top: 2px;
    }

    .header .topbar ul.hoverSelectorBlock {
        top: 0px;
        left: 0px;
        display: block;
        padding: 4px 0px;
        list-style: outside none none;
        min-width: 100px;
        position: relative;
        background: none;
    }

    .header .topbar ul.loginbar {
        position: relative;
        padding-left: 0px;
    }

    .header .topbar ul.loginbar > li {
        display: block;
        list-style: outside none none;
        position: relative;
        padding: 0px 40px;
    }

    .header .topbar ul.loginbar .tb_gameLogin a{
        box-sizing: border-box;
        margin: 50px 0px 15px;
        width: 100%;
        height: 34px;
        color: #fff;
        background-color: #5CB85C;
        background-image: linear-gradient(to bottom, #5CB85C, #4FA83A);
        text-align: center;
        vertical-align: middle;
        border-radius: 4px !important;
        border: 0px none;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(255, 255, 255, 0.25) inset;
    }

    .header .topbar ul.loginbar .tb_gameLogin a:hover{
        background-image: linear-gradient(to bottom, #40B05C, #30A03A);
        color: #fff;
    }

    .header .topbar ul.loginbar .tb_gameLogin i{
        display: none;
    }

    .header .topbar ul.hoverSelectorBlock::after,
    .header .topbar ul.loginbar li.topbar-devider {
        display: none;
    }

    .header .topbar ul.loginbar li i.fa{
        float: left;
        padding-top: 12px;
        color: #fff;
    }

    .header .topbar ul.loginbar li i.fa-cog{
        display: none;
    }

    .header .topbar ul.accountBar li i.fa-cog,
    .header .topbar ul.accountBar li i.fa-key{
        display: block;
    }

    .header .topbar ul.loginbar .tb_goToHome{
        display: none;
    }

    .header .topbar ul.loginbar .tb_accountHeadline{
        display: none;
    }

    .header .topbar ul.accountBar li a, .header .topbar ul.accountBar li a:hover,
    .header .topbar ul.loginbar > li > a, .header .topbar ul.loginbar > li > a:hover{
        font: 700 1.6rem/1.6 'Noto Sans',Arial,serif;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        display: block;
        padding: 6px 25px;
    }

    .header .topbar ul.accountBar > li > a:hover,
    .header .topbar ul.loginbar > li > a:hover{
        color: #999;
        background: none;
    }

    .header .topbar ul.languages li a {
        color: #ccc;
        font-size: 1.2rem;
    }

    .header .topbar ul.languages li a:hover, .header .topbar ul.languages li.active a {
        background: none;
    }


    .header .topbar ul.languages li a:hover,
    .header .topbar ul.languages li.active a{
        color: #555;
    }

    .languages{
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .languages .tb_german,
    .languages .tb_english,
    .languages .tb_english_us,
    .languages .tb_spanish,
    .languages .tb_french{
        float: left;
        padding: 5px 0px 5px 10px;
    }

    .languages .tb_german a,
    .languages .tb_english a,
    .languages .tb_english_us a,
    .languages .tb_spanish a,
    .languages .tb_french a{
        width: 38px;
        height: 25px;
    }

    .languages .tb_german a{
        background:	url('../images/language/de.png') no-repeat center top / cover !important;
    }
    .languages .tb_english a{
        background:	url('../images/language/en.png') no-repeat center top / cover!important;
    }
    .languages .tb_english_us a{
        background:	url('../images/language/us.png') no-repeat center top / cover!important;
    }
    .languages .tb_spanish a{
        background:	url('../images/language/es.png') no-repeat center top / cover!important;
    }
    .languages .tb_french a{
        background:	url('../images/language/fr.png') no-repeat center top / cover!important;
    }

    .languages .tb_german span,
    .languages .tb_english span,
    .languages .tb_english_us span,
    .languages .tb_spanish span,
    .languages .tb_french span{
        display: none;
    }

    #video-background{
        display: none;
    }

    .main-feature-news{
        display: block;
    }

    .class-detail h1.title-fiesta{
        background: url("../images/background-class-header.jpg") no-repeat center top;
        height: 110px;
        padding-top: 30px;
        border: 2px solid #000;
    }

    .class-select-block{
        position: relative;
    }

    #class_select{
        background: none;
        box-shadow: none;
        width: auto;
        border-radius: none;
        position: relative;
        right: auto;
        z-index: 50;
        top: auto;
        text-align: center;
        margin-top: 15px;
    }

    #class_select ul{
        margin: 0px 12px;
        padding: 17px 0px 7px;
        display: inline-block;
    }

    #class_select li {
        float: left;
        list-style: outside none none;
        margin-bottom: 20px;
        width: 85px;
    }

    #class_select li span {
        font-size: 14px;
        text-align: center;
        font-weight: 700;
        display: block;
        width: 85px;
        padding-top: 50px;
    }

    h1.title-fiesta::before,
    h1.title-fiesta::after{
        display: none;
    }

    #block1.archer .content,
    #block1.cleric .content,
    #block1.crusader .content,
    #block1.fighter .content,
    #block1.joker .content,
    #block1.mage .content{
        padding-top: 0px;
    }

    .kingdom-box .tab-pane{
        width: 100%;
        position: relative;
        margin: 0px auto;
        padding: 300px 30px 0px 10%;
    }

    .dungeon-box .tab-pane{
        width: 100%;
        position: relative;
        margin: 0px auto;
        padding: 330px 30px 0px 10%;
    }

    /* Dungeons */

    #tower-of-iyzel{
        background: #fff url('../images/features/dungeons/izyel-tower-s.jpg') no-repeat center top;
    }

    #devildom-mine{
        background: #fff url('../images/features/dungeons/devildom-mine-s.jpg') no-repeat center top;
    }

    #devildom-barrack{
        background: #fff url('../images/features/dungeons/devildom-barracks-s.jpg') no-repeat center top;
    }

    #crystal-castle{
        background: #fff url('../images/features/dungeons/crystal-castle-s.jpg') no-repeat center top;
    }

    #devildom-territory{
        background: #fff url('../images/features/dungeons/devildom-territory-s.jpg') no-repeat center top;
    }

    #dragons-tomb{
        background: #fff url('../images/features/dungeons/dragons-tomb-s.jpg') no-repeat center top;
    }

    #leviathan-nest{
        background: #fff url('../images/features/dungeons/leviathan-nest-s.jpg') no-repeat center top;
    }

    #secret-laboratory{
        background: #fff url('../images/features/dungeons/secret-laboratory-s.jpg') no-repeat center top;
    }

    #devildom-fortress{
        background: #fff url('../images/features/dungeons/devildom-fortress-s.jpg') no-repeat center top;
    }

    #burning-adelia{
        background: #fff url('../images/features/dungeons/burning-adelia-s.jpg') no-repeat center top;
    }

    #seized-adelia{
        background: #fff url('../images/features/dungeons/seized-adelia-s.jpg') no-repeat center top;
    }

    #sirens-castle{
        background: #fff url('../images/features/dungeons/sirens-castle-s.jpg') no-repeat center top;
    }

    /* KQ */

    #counterattack-of-king-slime{
        background: #fff url('../images/features/kingdom-quest/counterattack-of-king-slime-s.jpg') center top no-repeat;
    }

    #wrath-of-piracy-mara{
        background: #fff url('../images/features/kingdom-quest/wrath-of-piracy-mara-s.jpg') center top no-repeat;
    }

    #golden-hill-adventure{
        background: #fff url('../images/features/kingdom-quest/gold-hill-adventure-s.jpg') center top no-repeat;
    }

    #millennium-robo-plot{
        background: #fff url('../images/features/kingdom-quest/the-millennium-robo-plot-s.jpg') center top no-repeat;
    }

    #mean-giant-honeybandit{
        background: #fff url('../images/features/kingdom-quest/mean-giant-honeybandit-s.jpg') center top no-repeat;
    }

    #lost-mini-dragon{
        background: #fff url('../images/features/kingdom-quest/lost-mini-dragon-s.jpg') center top no-repeat;
    }

    #spiders-assault{
        background: #fff url('../images/features/kingdom-quest/spiders-assault-s.jpg') center top no-repeat;
    }

    #king-kong-phinos-mess{
        background: #fff url('../images/features/kingdom-quest/king-kong-phinos-mess-s.jpg') center top no-repeat;
    }

    #evil-spirit-gordon-master{
        background: #fff url('../images/features/kingdom-quest/evil-spirit-gordon-master-s.jpg') center top no-repeat;
    }

    #henneath-rebellion-war{
        background: #fff url('../images/features/kingdom-quest/henneath-rebellion-war-s.jpg') center top no-repeat;
    }

    #inheritor-of-bijou{
        background: #fff url('../images/features/kingdom-quest/inheritor-of-bijou-s.jpg') center top no-repeat;
    }

    #rage-of-the-emperor-slime{
        background: #fff url('../images/features/kingdom-quest/rage-of-the-emperor-slime-s.jpg') center top no-repeat;
    }

    #bijous-sanctuary{
        background: #fff url('../images/features/kingdom-quest/bijous-sanctuary-s.jpg') center top no-repeat;
    }

    #hidden-mine{
        background: #fff url('../images/features/kingdom-quest/magrittes-hidden-mine-s.jpg') center top no-repeat;
    }

    #spring-battlefield{
        background: #fff url('../images/features/kingdom-quest/spring-battlefield-s.jpg') center top no-repeat;
    }

    #arena{
        background: #fff url('../images/features/kingdom-quest/arena-s.jpg') center top no-repeat;
    }

    #warriors-code{
        background: #fff url('../images/features/kingdom-quest/warriors-code-s.jpg') center top no-repeat;
    }

    #archer .char-img,
    #cleric .char-img,
    #crusader .char-img,
    #fighter .char-img,
    #joker .char-img,
    #mage .char-img,
    .archer .char-img,
    .cleric .char-img,
    .crusader .char-img,
    .fighter .char-img,
    .joker .char-img,
    .mage .char-img{
        position: relative;
        border: 3px solid #61551E;
        height: 150px;
        margin: 10px 0px 40px;
        width: 100%;
    }

    #archer .char-img,
    .archer .char-img{
        background: transparent url("../images/guide/classes/class-header-archer.jpg") repeat scroll 0% 0%;
    }
    #cleric .char-img,
    .cleric .char-img{
        background: transparent url("../images/guide/classes/class-header-cleric.jpg") repeat scroll 0% 0%;
    }
    #crusader .char-img,
    .crusader .char-img{
        background: transparent url("../images/guide/classes/class-header-crusader.jpg") repeat scroll 0% 0%;
    }
    #fighter .char-img,
    .fighter .char-img{
        background: transparent url("../images/guide/classes/class-header-fighter.jpg") repeat scroll 0% 0%;
    }
    #joker .char-img,
    .joker .char-img{
        background: transparent url("../images/guide/classes/class-header-joker.jpg") repeat scroll 0% 0%;
    }
    #mage .char-img,
    .mage .char-img{
        background: transparent url("../images/guide/classes/class-header-mage.jpg") repeat scroll 0% 0%;
    }

    .cdb::before,
    .cdb::after,
    .cda::before,
    .cda::after{
        height: 20px;
        width: 22px;
        content:'';
        display: block;
        position: absolute;
        z-index: 10;
    }

    .cdb::after{
        background: url('../images/corner-tr.png') center top no-repeat;
        top: -4px;
        right: -5px;
    }

    .cdb::before{
        background: url('../images/corner-tl.png') center top no-repeat;
        top: -4px;
        left: -5px;
    }

    .cda::after{
        background: url('../images/corner-br.png') center top no-repeat;
        bottom: -4px;
        right: -5px;
    }

    .cda::before{
        background: url('../images/corner-bl.png') center top no-repeat;
        bottom: -4px;
        left: -5px;
    }

    .chapter-box .tab-pane {
        padding: 0px 20px 0px 20px;
    }

    .chapter-select {
        position: relative;
        width: 60%;
        margin: 0px auto 25px;
        display: block;
    }

}

.header-rotg {
    width: 100%;
}

.rotg-intro-text {
    text-transform: uppercase;
    font-family: 'Alice',Helvetica,Arial,sans-serif;
    margin-top:  141px;
}

.rotg-intro-text p {
    color: #57153A;
    font-size:  30px;
}

.rotg {
    background: url('../images/rotg_section_bg.jpg') no-repeat;
    background-size: cover;
    background-position: top;
    font-family: 'Alice',Helvetica,Arial,sans-serif;
}

.container-rotg {
    width: 1550px;
    margin: 0 auto;
    padding-bottom: 71px;
}

.pack .price {
    font-size: 24pt;
    color: #cd2c83;
}

.pack .old-price {
    font-size: 30px;
    text-decoration: line-through;
}

.packs .pack .pack-content {
    display: none;
}

.pack1 .btn-rotg a, .pack4 .btn-rotg a, .pack5 .btn-rotg a, .pack6 .btn-rotg a {
    background-image: url('../images/rotg_btn_pack1.png');
    width: 290px;
    height: 102px;
    display: inline-block;
    line-height: 90px;
    font-size: 30px;
    color: #ffffff;
}

.pack2 .btn-rotg a {
    background-image: url('../images/rotg_btn_pack2.png');
    width: 290px;
    height: 102px;
    display: inline-block;
    line-height: 90px;
    font-size: 30px;
    color: #ffffff;
}

.pack3 .btn-rotg a {
    background-image: url('../images/rotg_btn_pack3.png');
    width: 290px;
    height: 102px;
    display: inline-block;
    line-height: 90px;
    font-size: 30px;
    color: #ffffff;
}

.btn-rotg.sold-out a {
    background-image: url('../images/rotg-btn-sold-out.png');
    width: 330px;
    height: 131px;
    pointer-events: none;
}

.packs, .table-container {
    display:  flex;
    justify-content: flex-end;
}

.table-container {
    margin-bottom:  100px;
}

.pack {
    text-align:  center;
    width: 392px;
}

.table-packs {
    font-size:  24px;
}

.table-packs th {
    width:  347px;
    padding: 30px 0;
}

.table-packs td {
    width:  396px;
    text-align: center;
    padding: 30px;
}

.table-packs th {
    padding-left: 50px;
}

.table-packs tr:nth-child(odd) {
    background-color: #eaf7fd;
}

.table-packs td:not(:last-child) {
    border: 2px solid black;
}

.table-packs td:last-child {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}

.table-packs th {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

.rotg-items {
    max-width: 85%;
    margin: 0 auto;
}

.rotg-item {
    margin-bottom: 80px;
}

.rotg-item .flex-container {
    display:  flex;
}

.rotg-item .flex-container p {
    margin-left:  45px;
    margin-top: 40px;
    font-size: 30px;
    color:  #57153A;
}

.rotg-item h3 {
    margin-bottom: 34px;
    text-transform: uppercase;
    font-size: 50px;
}

.rotg-item img {
    width:  100%;
}

.rotg-item:nth-child(even) h3 {
    text-align: right;
}

.rotg-item:nth-child(even) p {
    order: -1;
    margin-right:  45px;
    margin-left: 0;
}

@media (max-width: 1580px) {

    .container-rotg {
        width:  auto;
    }

    .rotg-intro-text {
        padding: 0 7%;
    }

    .table-packs {
        display:  none;
    }

    .packs .pack .pack-content {
        display: block;
        background-image: url('../images/rotg_text_bg.png');
        background-repeat: no-repeat;
        height: 860px;
        width: 390px;
    }

    .packs .pack .pack-content ul {
        list-style: none;
        padding-left: 0;
        padding-top: 60px;
        width: 86%;
        margin: 0 auto;
    }

    .packs .pack .pack-content ul li {
        margin-bottom: 20px;
        font-size: 22px;
        text-align: center;
        color: #57153A;
        padding: 0 4px;
    }

    .table-packs td {
        border:  2px solid black;
    }

    .packs-container .packs {
        justify-content: center;
    }

    .packs-container .table-container {
        justify-content: center;
    }
}

@media (max-width: 1440px) {
    .rotg-intro-text {
        text-align: center;
    }
    .table-packs {
        display: none;
    }

    .rotg-items {
        max-width: 95%;
    }

    .rotg-item .flex-container img, .rotg-item .flex-container p {
        width: 50%;
    }
}


@media (max-width: 1200px) {
    .packs-container .packs {
        flex-direction: column;
    }

    .rotg-item h3, .rotg-item:nth-child(even) h3 {
        text-align: center;
    }

    .rotg-item .flex-container {
        flex-direction: column;
        align-items: center;
    }

    .rotg-item .flex-container img, .rotg-item .flex-container p {
        width: 80%;
    }

    .rotg-item:nth-child(odd) p {
        order: -1;
    }

    .packs .pack .pack-content {
        background-image: none;
        height: auto;
    }

    .packs .pack .pack-content ul {
        padding-top: 30px;
    }

    .rotg-item h3 {
        margin-bottom: -14px;
    }

    .rotg-item p {
        text-align: center;
        margin-bottom: 36px;
    }

    .pack .pack-content {
        margin: 0 auto;
        margin-bottom: 50px;
    }
}

@media (max-width: 500px) {
    .rotg-intro-text {
        margin-top: 0;
    }

    .rotg-item h3 {
        font-size: 33px;
    }

    .rotg-intro-text p, .rotg-item .flex-container p {
        font-size: 22px;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 768px) and (max-width:991px){
    .move-to-right{
        -ms-transform: translate(-30%);
        -webkit-transform: translate(-30%);
        transform: translate(-30%);
    }

    .move-to-left{
        -ms-transform: translate(30%);
        -webkit-transform: translate(30%);
        transform: translate(30%);
    }

    .header .topbar{
        width: 30%;
    }

    .header .navbar-collapse{
        width: 30%;
    }
    .header.big .logo{
        position: absolute;
        left: 50%;
        margin-left: -140px;
        margin-top: 35px;
    }
    .header.small .logo{
        position: absolute;
        left: 50%;
        margin-left: -140px;
        margin-top: 5px;
    }
    .header.small .logo img,
    .header.big .logo img{
        width: 280px;
        height: 167px;
    }
    .main-feature-big {
        min-height: 250px;
        background: #fff url('../images/fiesta-online-header.png') center top no-repeat;
    }

    .main-feature-big .logobig {
        width: 260px;
        margin: 2px auto 0px -115px;
    }

    .main-feature-big .logobig img{
        width: 260px;
    }

    .home-headline{
        position: absolute;
        top: 162px;
        left: 50%;
        margin-left: -165px;
        width: 330px;
    }

    .home-headline h1{
        font: 400 19px/17px 'Alice',Helvetica,Arial,sans-serif;
        color: #fff; /*#0d1399;*/
        text-transform: uppercase;
        padding-top: 0px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .home-headline h2{
        font: 700 16px/15px "Noto Sans",Helvetica,Arial,sans-serif;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .main-feature-news,
    .main-feature-guide,
    .main-feature-features,
    .main-feature-media,
    .main-feature-community{
        width: 100%;
        max-width: 992px;
        min-height: 200px;
        position: relative;
        margin: 0px auto;
    }

    .main-feature-news{
        background: #fff url('../images/background-header-news-sm.jpg') center top no-repeat;
    }

    .main-feature-guide{
        background: #fff url('../images/background-header-guide-sm.jpg') center top no-repeat;
    }

    .main-feature-features{
        background: #fff url('../images/background-header-features-sm.jpg') center top no-repeat;
    }

    .main-feature-media{
        background: #fff url('../images/background-header-media-sm.jpg') center top no-repeat;
    }

    .main-feature-community{
        background: #fff url('../images/background-header-community-sm.jpg') center top no-repeat;
    }

    .main-feature-news .logobig,
    .main-feature-guide .logobig,
    .main-feature-features .logobig,
    .main-feature-media .logobig,
    .main-feature-community .logobig{
        vertical-align: middle;
        display: block;
        width: 260px;
        margin: 10px auto 0px -110px;
        position: absolute;
        left: 50%;
        z-index: 20;
    }

    .main-feature-news .logobig img,
    .main-feature-guide .logobig img,
    .main-feature-features .logobig img,
    .main-feature-media .logobig img,
    .main-feature-community .logobig img{
        width: 260px;
    }

    .main-feature-account{
        min-height: 200px;
        background: #fff url('../images/background-header-account-sm.jpg') center top no-repeat;
    }

    .main-feature-account .logobig{
        width: 260px;
        margin: 10px auto 0px -110px;
    }
    .main-feature-account .logobig img{
        width: 260px;
        margin: 0px;
    }

    #block1.login .mq-image,
    #block1.register .mq-image,
    #block1.password-reset .mq-image{
        visibility: hidden !important;
    }
}

@media (min-width: 768px){
    .dwarf-funds{
        background: transparent url("../images/char-transfer/dwarf-funds.png") no-repeat scroll center top;
        width: 235px;
        height: 275px;
        position: absolute;
        top:0px;
        right: 0px;
    }

    .char-transfer-successful{
        width: 235px;
        height: 275px;
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: transparent url("../images/char-transfer/char-transfer-successful.png") no-repeat scroll center bottom;
    }
}

@media (max-width: 767px){
    .char-transfer-inner{
        width: 100%;
    }

    .current-taler-balance{
        width: 100%;
    }
    .header.big .logo{
        position: absolute;
        left: 50%;
        margin-left: -140px;
        margin-top: 25px;
    }
    .header.big .logo img{
        width: 280px;
        height: 150px;
    }
    .breadcrumbs{
        /*		display: none;*/
    }
    #block2.home{
        /*		background: #fff url('../images/background-evolve-x-small.jpg') center bottom no-repeat;*/
        background-size: contain;
    }

    #block1.login .mq-image,
    #block1.register .mq-image,
    #block1.password-reset .mq-image{
        display: none;
    }

    .content-boxes-v2-o .icon-custom {
        float: none;
        margin-top: 0px;
        margin-right: 0px;
    }

    i.icon-custom{
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 767px) and (min-width:469px){
    .move-to-right{
        -ms-transform: translate(-50%);
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
    }

    .move-to-left{
        -ms-transform: translate(50%);
        -webkit-transform: translate(50%);
        transform: translate(50%);
    }

    .header .topbar{
        width: 50%;
    }

    .header .navbar-collapse{
        width: 50%;
    }
    .main-feature-big {
        min-height: 230px;
        background: #fff url('../images/fiesta-online-header.png') center top no-repeat;
        background-size: 800px auto;
    }

    .main-feature-big .logobig {
        width: 240px;
        margin: 4px auto 0px -105px;
    }

    .main-feature-big .logobig img{
        width: 240px;
    }

    .home-headline{
        position: absolute;
        top: 142px;
        left: 50%;
        margin-left: -160px;
        width: 330px;
    }

    .home-headline h1{
        font: 400 19px/17px 'Alice',Helvetica,Arial,sans-serif;
        color: #fff; /*#0d1399;*/
        text-transform: uppercase;
        padding-top: 0px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .home-headline h2{
        font: 700 16px/15px "Noto Sans",Helvetica,Arial,sans-serif;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .main-feature-news,
    .main-feature-guide,
    .main-feature-features,
    .main-feature-media,
    .main-feature-community{
        width: 100%;
        max-width: 800px;
        min-height: 200px;
        position: relative;
        margin: 0px auto;
    }

    .main-feature-news{
        background: #fff url('../images/background-header-news-s.jpg') center top no-repeat;
    }

    .main-feature-guide{
        background: #fff url('../images/background-header-guide-s.jpg') center top no-repeat;
    }

    .main-feature-features{
        background: #fff url('../images/background-header-features-s.jpg') center top no-repeat;
    }

    .main-feature-media{
        background: #fff url('../images/background-header-media-s.jpg') center top no-repeat;
    }

    .main-feature-community{
        background: #fff url('../images/background-header-community-s.jpg') center top no-repeat;
    }

    .main-feature-news .logobig,
    .main-feature-guide .logobig,
    .main-feature-features .logobig,
    .main-feature-media .logobig,
    .main-feature-community .logobig{
        vertical-align: middle;
        display: block;
        width: 260px;
        margin: 10px auto 0px -110px;
        position: absolute;
        left: 50%;
        z-index: 20;
    }

    .main-feature-news .logobig img,
    .main-feature-guide .logobig img,
    .main-feature-features .logobig img,
    .main-feature-media .logobig img,
    .main-feature-community .logobig img{
        width: 260px;
    }

    .main-feature-account{
        min-height: 200px;
        background: #fff url('../images/background-header-account-s.jpg') center top no-repeat;
    }

    .main-feature-account .logobig{
        width: 260px;
        margin: 10px auto 0px -110px;
    }
    .main-feature-account .logobig img{
        width: 260px;
        margin: 0px;
    }

    .header.small .logo{
        position: absolute;
        left: 50%;
        margin-left: -140px;
        margin-top: 10px;
    }
    .header.small .logo img,
    .header.big .logo img{
        width: 280px;
        height: 150px;
    }
}

@media (max-width: 468px){

    .move-to-right{
        -ms-transform: translate(-80%);
        -webkit-transform: translate(-80%);
        transform: translate(-80%);
    }

    .move-to-left{
        -ms-transform: translate(80%);
        -webkit-transform: translate(80%);
        transform: translate(80%);
    }

    .header .topbar{
        width: 80%;
    }

    .header .navbar-collapse{
        width: 80%;
    }
    .main-feature-big{
        min-height: 200px;
        background: #fff url('../images/fiesta-online-header.png') center top no-repeat;
    }

    .main-feature-big .logobig {
        width: 220px;
        margin: 3px auto 0px -95px;
    }

    .main-feature-big .logobig img{
        width: 220px;
    }

    .home-headline{
        position: absolute;
        top: 132px;
        left: 50%;
        margin-left: -150px;
        width: 300px;
    }

    .home-headline h1{
        font: 400 17px/14px 'Alice',Helvetica,Arial,sans-serif;
        color: #fff; /*#0d1399;*/
        text-transform: uppercase;
        padding-top: 0px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .home-headline h2{
        font: 700 14px/8px "Noto Sans",Helvetica,Arial,sans-serif;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .main-feature-news,
    .main-feature-guide,
    .main-feature-features,
    .main-feature-media,
    .main-feature-community{
        width: 100%;
        max-width: 485px;
        min-height: 165px;
        position: relative;
        margin: 0px auto;
    }

    .main-feature-news{
        background: #fff url('../images/background-header-news-xs.jpg') center top no-repeat;
    }

    .main-feature-guide{
        background: #fff url('../images/background-header-guide-xs.jpg') center top no-repeat;
    }

    .main-feature-features{
        background: #fff url('../images/background-header-features-xs.jpg') center top no-repeat;
    }

    .main-feature-media{
        background: #fff url('../images/background-header-media-xs.jpg') center top no-repeat;
    }

    .main-feature-community{
        background: #fff url('../images/background-header-community-xs.jpg') center top no-repeat;
    }

    .main-feature-news .logobig,
    .main-feature-guide .logobig,
    .main-feature-features .logobig,
    .main-feature-media .logobig,
    .main-feature-community .logobig{
        vertical-align: middle;
        display: block;
        width: 240px;
        margin: 5px auto 0px -110px;
        position: absolute;
        left: 50%;
        z-index: 20;
    }

    .main-feature-news .logobig img,
    .main-feature-guide .logobig img,
    .main-feature-features .logobig img,
    .main-feature-media .logobig img,
    .main-feature-community .logobig img{
        width: 240px;
    }

    .main-feature-account{
        min-height: 165px;
        background: #fff url('../images/background-header-account-xs.jpg') center top no-repeat;
    }

    .main-feature-account .logobig{
        width: 240px;
        margin: 5px auto 0px -110px;
    }
    .main-feature-account .logobig img{
        width: 240px;
        margin: 0px;
    }

    .header.big .logo{
        position: absolute;
        left: 50%;
        margin-left: -110px;
        margin-top: 30px;
    }
    .header.big .logo img{
        width: 220px;
        height: 118px;
    }

    .header.small .logo{
        position: absolute;
        left: 50%;
        margin-left: -100px;
        margin-top: 18px;
    }
    .header.small .logo img{
        width: 200px;
        height: 107px;
    }
}

.header .mega-menu .dropdown-menu > li.sub-dropdown > a::after {
    font-family: FontAwesome;
    content: "\f105";
    position: absolute;
    width: 20px;
    left: 90%;
    top: 0;
    line-height: 32px;
    margin-left: 0 !important;
}

@media (max-width: 991px) {
    li.sub-dropdown a {
        background: none !important;
        position: relative;
    }

    .sub-dropdown-menu {
        background-color: #38250e !important;
        border-top: 1px solid #b98a26 !important;
        border-bottom: 1px solid #b98a26 !important;
        padding-left: 14px;
    }

    .header .mega-menu .dropdown-menu > li.sub-dropdown > a::after {
        content: "\f107";
        left: 93%;
    }
}

@media (min-width: 992px) {
    .header .mega-menu .dropdown-menu.sub-dropdown-menu {
        top: -4px;
        border: 2px solid #61551e;
        list-style: none;
        padding: 0;
        left: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0px 2px 5px rgb(0 0 0 / 30%) inset;
        position: absolute;
        margin-left: 0;
    }

    .header .mega-menu .dropdown-menu.sub-dropdown-menu a {
        display: block;
        white-space: nowrap;
        line-height: 1.42857143;
    }

    .header .mega-menu .dropdown-menu.sub-dropdown-menu a:hover {
        text-decoration: none;
    }

    .header .mega-menu .dropdown-menu > li.sub-dropdown > a:last-child {
        border: none;
    }

    .header .mega-menu .dropdown-menu > li.sub-dropdown > a {
        position: relative;
        line-height: 1.42857143;
        height: auto;
        z-index: 1;
    }

    .header .mega-menu .dropdown-menu.sub-dropdown-menu {
        display: none;
    }

    .header .mega-menu .dropdown-menu > li.sub-dropdown:hover > .sub-dropdown-menu {
        display: block;
    }

    .header .mega-menu .dropdown-menu > li.sub-dropdown {
        position: relative;
        height: auto;
    }

    ul.navbar-nav > li:last-child > ul {
        right: 0;
    }
}