/*
Theme Name: Runes of Mystery
Theme URI: https://www.runesofmystery.com
Description: Runes of Mystery
Version: 1.0
Author: Süleyman Ekici
Author URI: https://www.runesofmystery.com
*/


.header {z-index: 99999}
input.error {
border: 1px solid #f93131!important;
}

.main .slider {position: relative; overflow: hidden; background: #000!important;}
	.main .slider::after {content: " "; display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0;  background-color: rgba(0,0,0,0.4); z-index: 501}
	.main .slider video {position: absolute; top: 50px; left: 0; right: 0; bottom: 0; z-index: 501}
	.main .slider-inner {position: relative; z-index: 9999;}
	.main .slider .container  {position: relative; z-index: 503; }
	@media( max-width: 800px )
	{
		.slider {height: 100%}
	}


.usercp-profile-form {}


.main {min-height: 500px}
.margin-bottom-0 {margin-bottom: 0!important}
.margin-top-0 {margin-top: 0!important}
.system-requirements .download-page-title {margin-bottom: 100px}
.system-requirements .download-page-details {background: none}
.btn-loading{color:transparent!important;pointer-events:none;position:relative;text-shadow:none!important}.btn-loading:after{content:'';-webkit-animation:loader .5s infinite linear;animation:loader .5s infinite linear;border:2px solid #fff;border-radius:50%;border-right-color:transparent!important;border-top-color:transparent!important;display:block;height:1.4em;width:1.4em;position:absolute;left:calc(50% - (1.4em / 2));top:calc(50% - (1.4em / 2));-webkit-transform-origin:center;transform-origin:center;position:absolute!important}@-webkit-keyframes loader{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.news-popular-item-content a {color: inherit}
.news-details-content  {margin-bottom: 10px; font-family: var(--font-title); line-height: 38px}
.news-details-content a {color: #fbbf66}
.news-details-content em {line-height: 30px; }
.news-details-content img {max-width: 100%}
a.read-more-btn {margin-top: 10px; max-width: 200px; text-align: center; font-size: 13px; padding:5px 10px; outline:0!important; display: inline-block; color: #c69955; border: 1px solid #c69955}
a.read-more-btn:hover {background-color: #c69955; color: #fff}
ul.pagination {display: block; margin-bottom: 20px; padding: 20px 0}
ul.pagination li {margin: 0 10px; display: inline-block}
ul.pagination li a.active , ul.pagination li.active a {outline: 2px solid }
ul.pagination li a {border-radius: 3px; font-size: 15px; display: inline-block; color: #c69955; padding: 7px 15px; border-radius: 10px} 
.text-center {text-align: center}
.email-newsletter-inner .submit {background: #fbbf66; color: #0e0d0b; border: 1px solid #fbbf66}
.email-newsletter-inner .submit:hover {opacity: 0.9}
.story-sidebar {position: sticky!important; top: 0}
.disabled {opacity: 0.5; cursor: not-allowed}
.story-slider-item-image {position: inherit!important}
.story-slider-item-content {backdrop-filter: blur(5px); background: rgb(0,0,0,0.40) }
.story-slider-item-image img {height: auto!important; object-fit: unset!important}
.alert {
padding: 10px;
font-size: 15px;
position: relative;
border-radius: 2px;
box-shadow: 0 0 3px 3px #3c3c3c;
}

.close {
position: absolute;
width: 30px;
height: 30px;
opacity: 0.5;
border-width: 1px;
border-style: solid;
border-radius: 50%;
right: 15px;
top: 25px;
text-align: center;
font-size: 1.6em;
cursor: pointer;
}

.alert {
background-color: #ebebeb;
border-left: 5px solid #6c6c6c;
}
.alert .close {
border-color: #6c6c6c;
color: #6c6c6c;
}

.alert-success {
background-color: #a8f0c6;
border-left: 5px solid #178344;
}
.alert-success .close {
border-color: #178344;
color: #178344;
}

.alert-danger {
background-color: #f7a7a3;
border-left: 5px solid #8f130c;
}
.alert-danger .close {
border-color: #8f130c;
color: #8f130c;
}

.alert-warning {
background-color: #ffd48a;
border-left: 5px solid #8a5700;
}
.alert-warning .close {
border-color: #8a5700;
color: #8a5700;
}

.announcements a {color: inherit}
.new-videos-list {width: 100%}
.new-videos-list-item, .new-videos-big-item {width: calc(100% / 3) }
.new-videos-list-item {border: 10px solid transparent; border-radius: 20px; overflow: hidden}
.header .sub-menu {text-transform: uppercase;}
.news-slider-text {width: auto!important}
.rise-player-play-btn {color: #f7ad3f!important}
.header-no-bg::before {background:none!important}
.header-no-bg {margin-bottom: 0}

.news-update {margin-bottom: 20px}
.header a:focus {outline:0!important}
.header a {transition: all 0.2s ease}
.menu-right.login-btn li:not(.active) a:hover {color: var(--color-yellow)}
.menu-right.login-btn li.active:hover a {opacity: 0.7}
.roco-logo {    font-size: 22px;  text-shadow: 0px 0px 20px #c76a00;  color: #f4b764; letter-spacing: 1px}
.news-details .news-popular-item-content {z-index: 999}
.nft-market-placeholder {margin-bottom: 100px}

.class-videos-item {max-height: 500px; width: calc( 100% - 50px);}
.class-skills ul {    background: #191d22}
.class-skills ul li strong {height: 50px }
.class-skills ul li p {height: 50px}
.class-videos-item {width: 100%}
.class-videos-item-image imgtest {object-fit:none!important; height: auto}
.class-skills h4, .class-videos h4, .class-videos .h4, .class-wrap-right .class-skills h4, .class-wrap-right .class-skills .h4 {text-transform: uppercase; letter-spacing: 0.5px; text-align: center}

.usercp-profile-form  input.form-control {width: 100%}
.register-login-image {border-right: 1px solid #29303a}
.register-login input {background: #45484c!important}
.register-login .list-info h3 {font-weight: 500; color: var(--color-yellow); margin-bottom: 5px; font-size: 17px}
.register-login .list-info p {color: #909090; }
.register-login .input-wrap span, .register-login .input-wrap {display: block; width: 100%;}
.register-page .input-wrap span {display: none}
.country-list span {display: inline!important}
.register-login .usercp-profile-form .form-input {width: 100%}
.register-login-form-link a,.usercp-profile-form .submit-wrap input[type="submit"], .submit-wrap .btn,	.usercp-profile-form .submit-wrap, .usercp-profile-form .checkbox-wrap label {margin-left: 0}
.login-page .container, .register-page .container {max-width: 1200px}
.register-login {border-radius: 5px; background-color: #191d22}
.register-login .register-login-image {width: 50%}
.register-login .list-info {height: 100%; display: flex; flex-direction: column; }
.register-login .list-info .icon {margin-right: 10px; width: 45px; height: 45px}
.register-login .list-info li {padding:20px 25px; border-bottom: 1px solid #29303a; display: flex; align-items: center; color:  #5f5f5f; }
.register-login .usercp-profile-form .help-wrap span {margin-left: 0}
@media( max-width: 800px )
{

.usercp-profile-form .input-wrap{ margin-bottom: 20px}
.register-login-form {max-width: 100%}
.form-captcha {margin-left: 0!important}
.news-details .news-popular-item-content { width: calc(100% - 60px)!important}
.header-title h1, .header-title .h1, .header-title h2, .header-title .h2 { line-height: 40px;  font-size: 25px}
.hide-mobile {display: none}
.news-details-title {margin-top: 100px}
.new-videos-list-item {width: 100%}
.new-videos-list-item:before {padding-top:0!important}
.article-box-full {height: auto; min-height: 400px!important}
.new-videos-list-item a {position: inherit!important; display: block!important; width: 100%}
.new-videos-list-item-image, .new-videos-big-item-image {position: inherit!important}
.new-videos-list-item-content {position: absolute}
.new-videos-list-item-image img, .new-videos-big-item-image img {object-fit: inherit!important; height: auto!important}
.new-videos-list-item-content h6 {font-size: 16px}
.class-header {height: 340px!important}
.character-selector-item-content-text ul {flex-wrap: nowrap!important}
.announcements {margin-top: 20px!important}
}

@media ( max-width: 1300px )
{
    .header-inner nav.menu-right>ul>li>a {padding: 0px 14px}
    .header-inner nav.menu-right>ul>li>a {font-size: 12px}
    .header-inner nav.menu>ul>li>a {font-size: 12px}
    .header-inner nav.menu>ul>li:not(:last-of-type) {margin-right: 25px}
    .header-inner nav.menu>ul>li:last-child , .header-inner nav.menu>ul>li:first-child {display: none}
}

@media ( max-width: 1600px )
{
    
    .header-inner nav.menu>ul>li>a {font-size: 12px}
    .header-inner nav.menu>ul>li:not(:last-of-type) {margin-right: 25px}
}


.clock {width: 350px; margin-left: auto;  display: flex; }
.clock-item {width: 20%; margin: 0 20px; min-width: 20% }
.clear {clear: both}
.countdown {margin-bottom: 20px; margin-left: -20px; width: 300px}
.countdown *{transition:all .2s ease}
.countdown 
.countdown-container{position:relative}
.clock-item {background: #000; border-radius: 50%}
.clock-item .inner{height:0;padding-bottom:100%;position:relative;width:100%}
.clock-canvas{background-color:rgba(255,255,255,.1);border-radius:50%;height:0;padding-bottom:100%;}
.text{color:#fff;font-size:30px;font-weight:700;margin-top:-50px;position:absolute;top:60%;text-align:center;text-shadow:1px 1px 1px #000;width:100%}
.text .val{font-size:20px; position: relative; top: 5px}
.text .type-time{margin-top: -40px; font-size:11px; display: block}
.text-center {text-align: center; widtih: 100%;}
.home-download-btn em {display: block; font-size: 11px}
@media ( max-width: 1280px )
{
    .flex-slide .slide-countdown {text-align: center!important; magin: 0 auto; width: 100%!important}
    .flex-slide .clock {width: 100%; }
    .flex-slide .clock-item {margin: 0 5px!important; min-width: 20%!important}
    .flex-slide .val {position: relative; top: 10px}
    .flex-slide .type-time {font-size: 10px!important; margin-top: -10px!important}
}

@media ( max-width: 800px )
{
    .news-details-content-text img {max-width: 100%; height: auto!important}
}

.header-inner .logo-runesofmystery img {
    height: 90px;
}



	
.row-ranking-table-sub
{
    background-color: rgba(79,86,98,.2);
    border-radius:10px;
    padding:15px;
}

.row-ranking-table-sub td{ height:48px; border-top :1px solid #282D32 !important; border-bottom : 0px solid #fff !important; color:#b1997f; padding-top:12px;vertical-align:middle;}

.row-ranking-table-sub th{ font-size:16px; height:48px; text-shadow: 1px 1px 0 #000, 1px 1px 0 #000; color:#f8b700; !important}



.runesofmystery-ranking-warrior {color:#e398a3;}
.runesofmystery-ranking-warrior:hover{ color:#fff; }
.runesofmystery-ranking-rogue {color:#97c1e6;}
.runesofmystery-ranking-rogue:hover{ color:#fff; }
.runesofmystery-ranking-mage {color:#9de3a4;}
.runesofmystery-ranking-mage:hover{ color:#fff; }
.runesofmystery-ranking-priest {color:#dcde9e;}
.runesofmystery-ranking-priest:hover{ color:#fff; }
.runesofmystery-ranking-symbol{font-weight:bold;}
.ranking-top-title{color:#c69955;!important;}

.arrow-sort-icon { border: solid #fff; border-width: 0 3px 3px 0; display: inline-block;}
.up-sort-icon { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); padding: 3px; margin-left:5px; margin-top:3px;}
.down-sort-icon { transform: rotate(45deg); -webkit-transform: rotate(45deg); padding: 3px; margin-left:5px; margin-bottom:3px;}
.hidden-sort-icon {display:none;}

.light-effect
{
    display:block;
    position:absolute;
    margin-top:-25px;
    width:100px;
    height:30px;
    background: linear-gradient(45deg,#343a40, #6c757d, #fff, #6c757d);
    opacity:.3;
    border-radius:5px;
    background-size: 200% 200%;
    animation: lightEfc 1.5s ease infinite;
    animation-direction: alternate;
}
.light-effect2
{
    display:block;
    width:100%;
    height:100%;
    background: linear-gradient(45deg,#343a40, #6c757d, #fff, #6c757d);
    opacity:.3;
    border-radius:5px;
    background-size: 200% 200%;
    animation: lightEfc 1.5s ease infinite;
    animation-direction: alternate;
}

@keyframes lightEfc
{
    0% {background-position: 0%}
    100% {background-position: 100%}
}

.runesofmystery-nation-img {width:35px; height:35px; !important;}
.runesofmystery-class-img {width:37px; height:37px; !important;}

.runesofmystery-ranking-img {margin-right:10px;}
.runesofmystery-ranking-text{font-weight:bold;}
.runesofmystery-ranking-legend {color:#E8AA97;}
.runesofmystery-ranking-champion {color:#CBB67B;}
.runesofmystery-ranking-epic {color:#DDA0DE;}
.runesofmystery-ranking-master {color:#8BB5E9;}
.runesofmystery-ranking-rookie {color:#93856C;}
.runesofmystery-ranking-bp {color:#0f0;}
.runesofmystery-nation-lunaskar {color:#DC734D;}
.runesofmystery-nation-protean {color:#547CC5;}
.ranking-switch-nation {color: #b1997f; margin-top:50px;}
.ranking-switch-class {color: #b1997f; margin-top:50px;}
.ranking-sortable-column {color:var(--color-yellow);}
.ranking-sortable-column:hover {color:var(--color-yellow);}
.runesofmystery-ranking-selectedjob { box-shadow: 1px 1px 2px #111, 0 0 25px white, 0 0 5px gray;}
.runesofmystery-ranking-selectedjob:hover {color:var(--color-yellow);}
.runesofmystery-ranking-unselectedjob {color:var(--color-yellow);}
.runesofmystery-ranking-unselectedjob:hover {box-shadow: 1px 1px 2px #111, 0 0 25px white, 0 0 5px gray;}

.table-ranking {margin-top:30px; color:#f8b700;padding:10px;}
.table-ranking-title {background-color:#111; height:60px;line-height: 1.5;font-weight: 700;}
.table-ranking-row {height:50px; border-bottom: 1px solid #2B3139; border-top: 1px solid #2B3139;}
.table-ranking-row-a {background-color:#212429;}
.table-ranking-row-b {background-color:#191D22;}
.table-ranking-row-a:hover{background-color:#111;color:#fff;border-bottom: 2px dotted #fff;border-top: 2px dotted #fff;}
.table-ranking-row-b:hover{background-color:#111;color:#fff;border-bottom: 2px dotted #fff;border-top: 2px dotted #fff;}

a.job-5 {position: relative; color: var(--color-yellow)!important; top: 5px}