@charset "utf-8";

/* CSS Document */

/* ------------------------------------------------------------------
  Name         	: OathRO | Flux CP Theme for Ragnarok Online
 * --------------------------------------------------------------------- */

@font-face {
    font-family: 'GothamCondensedMedium';
    src: url('../fonts/GothamCondensedMd.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamMedium';
    src: url('../fonts/GothamMedium.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBook';
    src: url('../fonts/GothamBook.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TitilliumWebReg';
    src: url('../fonts/TitilliumWebReg.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TitilliumWebBold';
    src: url('../fonts/TitilliumWebBold.ttf');
    font-weight: bold;
    font-style: normal;
}



body,html {
    height: 100%;
	scroll-behavior: smooth;
}

body {
	background: #141618;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}

.lds-ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid #fff;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes lds-ring {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}

.img-load {
	animation: heartbeat 1s infinite; 
}

.cargador {
	background: var(--bs-dark); 
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
}
  
.cargador2 {
	display: none;
}
  
#load{
	width:100%;
	height:100%;
	position:fixed;
	z-index:9999;
	background: #000;
}
  
#preloader3 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: #000;
	visibility: hidden;
}
  
#preloader3:before {
	content: "";
	position: fixed;
	border: 6px solid #fff;
	border-bottom-color: #2b2c2f; 
	border-radius: 50%;
	width: 50px;
	height: 50px;
	top: calc(50% - (50px /2));
	left: calc(50% - (50px /2));
	-webkit-animation: animate-preloader 1s linear infinite;
	animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
  0% {
	transform: rotate(0deg);
  }
  100% {
	transform: rotate(360deg);
  }
}
  
@keyframes animate-preloader {
  0% {
	transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
}
  
#msgIndicator{
	position: fixed;
	font-size: 20px;
	text-align: center;
	width: 300px;
	top: 55%;
	left: calc(50% - (300px / 2));
	z-index: 99999;
	visibility: hidden;
}

#msgIndicator2{
	position: fixed;
	font-size: 30px;
	text-align: center;
	color: #fffefe;
	width: 800px;
	top: calc(40% + 40px);
	left: calc(50% - (800px / 2));
}

@keyframes heartbeat {
  0% {
    transform: scale( 1);    
  }
  20% {
    transform: scale( 0.9 ) ;
  } 
  40% {
    transform: scale( 0.8 ) ;
  }
}

.my-auto {
	margin: auto 0 !important;
}

.mx-auto {
	margin: 0 auto !important;
}

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

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

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

.text-white {
	color: #fff !important;
}

.text-whitenews {
	color: #fff !important;
	font-size: 13px !important;
}
.text-label {
	color: #ffc663 !important;
	margin-right: 6px !important;
}

.text-value {
	color: #bababb !important;
}

.text-orange {
	color: rgb(233, 142, 6) !important;
}

.text-section {
	color: #1265a8!important;
}

.img-fluid {
	width: 100%;
}



@keyframes pulse{
  0% {
    transform: scale(0.95);
  }
  
  70% {
    transform: scale(1);
  }
  
  100% {
    transform: scale(0.95);
  }
}


.header-container {
	max-width: 1120px;
}

h4.latest {
	font-size: 25pt;
} 

.article-title {
	font-size: 11pt;
	background: #ff9800;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	line-height: 25pt;
}

#section-highlights {
	background: url(../img/section-bg.jpg) no-repeat #fff;
	background-size: cover;
	background-position: center center;
}

#section-roadmap {
	background: url(../img/section-roadmap.jpg) no-repeat #fff;
	background-size: cover;
	background-position: center center;
}

#section-serverinfo  {
	/* background: rgb(240,240,240);
	background: linear-gradient(180deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%); */
	background: url(../img/section-bg2.jpg) no-repeat #fff;
	background-size: cover;
	background-position: center center;
}

#section-newsupdates{
	background: url(../img/section-news.jpg) no-repeat #fff;
	background-size: cover;
	background-position: center center;
}


/* --------------------------------
 Server Status
-------------------------------- */	

.scroll-info {
	position: relative;
	top: 0px;
	z-index: 1;
	font-family: 'GothamBook';
	font-size: 8pt;
	text-transform: uppercase;
	color: #fcfcfc;
	background: rgba(0,0,0,0.6);
	width: calc(100vw - 330px);
}

.text-news {
	padding: 11px 10px;
	font-size: 9pt;
	color: #ffffff;
	background: #0074d4;
	position: relative;
	top: -6px;
	letter-spacing: 1px;
}

.text-news::after{
	content: '';
	z-index: 1001;
	position: absolute;
	display: inline-block;
	top: 0;
	left: 181px;
	width: 0;
	height: 0;
	border-bottom: 37px solid #0074d4;
	border-right: 32px solid transparent;
}


.scroll-news {
	width: calc((100vw - 370px) - 190px);
	padding: 10px 0 5px 0;
}

.up {
    color: #10c755 !important;
	margin-right: 6px !important;
}

.down {
    color: #cc1313 !important;
}

#serverstatus {
	font-family: 'GothamBook';
	font-size: 8pt;
	text-transform: uppercase;
	color: #fff;
	background: rgb(35 39 42);
}

.value-bg {
	background: #1f1c1c;
	border-radius: 15px;
	border: 1px solid #202025;
	padding: 0 15px !important;
}

.server-status span {
	padding: 0 5px;
}

.status-divider {
	border-right: 1px solid #026c8c;
}

.server-statistics {
	margin-left: 45px !important;
}

.online-stat {
	margin: 0 auto;
	padding: 10px;
}

.status-label {
	padding-left: 20px;
	border-left: 1px solid rgba(255,255,255,.2);
}

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

.navbar-inverse .navbar-toggle {
	border-color: #333;
	border: 0;
	background: none;
	position: relative;
	top: 12px;
}

/**********************************
Responsive navbar-brand image CSS
- Remove navbar-brand padding for firefox bug workaround
- add 100% height and width auto ... similar to how bootstrap img-responsive class works
***********************************/

.navbar-brand {
	padding: 0px;
  }
  .navbar-brand>img {
	height: 100%;
	padding: 15px;
	width: auto;
  }
  
.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.brand-centered .navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-toggle {
    z-index: 1;
}  

/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
	transform-style: preserve-3d;
	height: 50px;
  }
  .navbar-alignit .navbar-brand {
	  top: 50%;
	  display: block;
	  position: relative;
	  height: auto;
	  transform: translate(0,-50%);
	  margin-right: 15px;
	margin-left: 15px;
  }
   
  .navbar-nav>li>.dropdown-menu {
	  z-index: 9999;
	  border-bottom: 3px solid #e4b60e
  }


.dropdown-header, .dropdown-menu>li>a {
	line-height: 3.125rem;
	width: 100%;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
}

.dropdown-menu > li a:hover, .dropdown-menu > li.show {
	background: #e69e05;
	color: white;
}

.navbar-inverse {
	background-color: rgba(0,0,0,0);
	border: 0;
}

.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-text {
	color: #cccccc;
	font-size: 12pt;
}

.navbar-brand {
	height: 115px;
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}


@media (min-width: 992px) {
	#serverstatus {
		top: 0px;
	}
}

@media (max-width: 1400px) {
	#serverstatus {
		background: #181b1d;
	}
}

@media (max-width: 991px) {
	#slider {
		margin-top: -100px !important;
	}
	#serverstatus {
		top: 132px;
	}
}

@media (max-width: 768px){
	#header.transparent-header.full-header #header-wrap {
		background: url(../img/menubg.png) repeat-x rgba(0, 0, 0, 0.8);
	}

	#navbar9 {
		background: rgba(0, 0, 0, 0.3);
		margin-top: 15px !important;
	}

	.navbar-brand {
		height: 70px !important;
	}

	.navbar-brand img {
		height: 75px !important;
	}

	#serverstatus {
		top: 102px;
	}
}


@media (min-width: 992px){
	.navbar-nav>li {
		float: left;
		padding: 0 15px;
	}
}
@media (max-width: 991px){
	.navbar-nav>li {
		padding: 0px;
	}
}

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

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

.feature-cover {
	overflow: hidden;
}

.feature-cover img {
    transition: transform .5s ease;
}

.feature-cover img:hover {
    cursor: pointer;
    transform: scaleX(1);
	opacity: 0.8;
}


.media-corner {
	background: url(../img/media-bg.jpg) no-repeat;
	min-height: 920px;
}

.download-render {
	margin: 500px auto 0px auto;
}

.download-render:hover {
	animation: infinite 1.5s pulse;
}

#news {
	height: 183px;
	background: url("../img/news01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
#update {
	height: 183px;
	background: url("../img/news02.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#event {
	height: 183px;
	background: url("../img/news03.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#promo {
	height: 183px;
	background: url("../img/news03.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* --------------------------------
 Roadmap Timeline
-------------------------------- */	
.timeline__content p {
	font-size: 11pt;
	width: 90%;
}

.timeline__content h2 {
	font-size: 14pt;
}

.image-decor {
	position: absolute;
	top: 0;
	right: -80px;
	width: 150px;
}

.selected-event {
	background-color: #f5dab2 !important;
}

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

.py-7 {
	padding: 70px 0 !important;
}
	
.footer {
	background: url(../img/footer-bg.jpg) top center/cover no-repeat #0c0906 !important;
	background-size: cover;
	border-top: 1px solid #4d3505 !important;
}

.footer-container {
	width: 1247px;
	max-width: 1397px;
	padding: 60px 75px;
}

.d-flex {
	display: flex;
}

.footer-info {
	max-width: 900px;
}

.footer-info ul {
	list-style: none;
	padding: 0;
}

.footer-info ul li {
	border-right: 1px solid #9c9c9c;
	display: inline-block;
	padding: 0 15px;
	height: 18px;
}

.footer-info ul li:last-child {
	border: 0;
}

.footer-info ul li a{
	font-family: 'GothamBook';
	font-size: 11pt;
	color: #fff;
}

.footer-info ul li a:hover{
	color: #e1ae48;
}

.footer-copyrights {
	font-family: 'GothamBook';
	font-size: 9pt;
	color: #878787;
	margin: 20px 15px;
	text-align: left;
}

.credits {
	text-align: left;
}

.credits img {
	margin: 0 15px;
}

.social-links {
	/* max-width: 697px; */
}

.social-tag {
	font-family: 'GothamMedium';
	font-weight: bolder;
	font-size: 11pt;
	color: #fff;
	text-align: right;
	float: right;
	margin-bottom: 10px;
}

.social-links ul {
	list-style: none;
	float: right;
}

.social-links ul li {
	display: inline-block;
}

.soc-container {
	width: 200px;
	float: right;
}

.soc-fb {
	background: url(../img/fb.png) no-repeat;
	width: 40px;
	height: 40px;
	display: block;
}

.soc-fb:hover {
	background: url(../img/fbHover.png) no-repeat;
}

.soc-dis {
	background: url(../img/discord.png) no-repeat;
	width: 200px;
	height: 40px;
	display: block;
	background-size: cover;
}

.soc-dis:hover {
	/* background: url(../img/discordHover.png) no-repeat; */
	opacity: 0.7;
}

.soc-twit {
	background: url(../img/twitter.png) no-repeat;
	width: 40px;
	height: 40px;
	display: block;
}

.soc-twit:hover {
	background: url(../img/twitterHover.png) no-repeat;
}

.soc-ig {
	background: url(../img/insta.png) no-repeat;
	width: 40px;
	height: 40px;
	display: block;
}

.soc-ig:hover {
	background: url(../img/instaHover.png) no-repeat;
}


@media (max-width: 768px){
	.soc-container{
		margin: 50px auto;
		float: none;
	}
	.footer-info ul li {
		border: 0;
		display: list-item;
		text-align: center;
		padding: 15px;
	}
	.footer-copyrights {
		text-align: center;
		margin: 40px 15px;
	}
	.credits img {
		margin: 0 25%;
		/*width: 50%;*/
	}
}

/* --------------------------------
 Flux Pages Design Styles
-------------------------------- */

#submenu {
	color: #42bad5;
	background: none;
	font-size: 10pt;
	margin-top: 30px;
}

#submenu a{ 
	color: #249ded;
	font-size: 12pt;
}

#submenu a:hover {
	text-decoration: none;
	color: #737273;
}


.admin-menu {
	color: #fff;
	background: none;
	font-size: 10pt;
}

.admin-menu a{
	color: #78aef9;
}

.admin-menu a:hover {
	text-decoration: none;
	color: #fdbf1e;
}



.admin-menu a:after {
	content: ' / ';
	color: white;
	text-decoration: none;
}



.toggler a {
	color: #f7e564;
}



.pages .page-num {
	color: #01d3f5;
}



.pages .current-page {
	color: #cc9808 !important;
	font-weight: bold;
}



.pages .page-prev, .pages .page-next {
	color: #b9f501;
}

.horizontal-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontal-table > .table-bordered {
    border: 0; 
}


.vertical-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontal-table > .table-bordered {
    border: 0;
}   

.main-container {
	width: 100%;
	position: relative;
	top: -32px;
	/*background: url(../img/section-bg.jpg) no-repeat #fff;
	background-size: cover;
	background-position: center center; */
}

.global-container {
	max-width: 1120px;
	border-radius: 5px;
	margin: auto;
	font-size: 11pt;
	padding: 35px;
	position: relative;
	min-height: 600px;
}

.global-container h2,h3 {
	font-size: 35pt;
	/* text-decoration-color: #42bad5;
	width: unset;
	text-align: center; 
	margin: 20px 0px; */
	border-bottom: 2px solid #ffc663;
}

h3 {
	font-size: 30pt;
}

.global-container a {
	color: #42bad5;
}



.global-container:empty {
	display: none;
}



.horizontal-table td {
	padding: 5px 10px;
	background: rgb(255 255 255 / 50%);
}

	

.horizontal-table th, .horizontal-table td {
	font-size: 9pt;
	border: 1px solid #ffc663;
}



.horizontal-table th {
	padding: 5px 10px;
	background-color: #e8eaec;
}



.vertical-table td {
	padding: 5px 10px;
	background: rgb(255 255 255 / 10%);
}

	

.vertical-table th, .vertical-table td {

	font-size: 9pt;
	border: 1px solid #ffc663;
}


.vertical-table th {
	padding: 5px 10px;
	background-color: #f1efef;
}


.generic-form {
	border: 1px solid #ffc663;
	background: none;
}


.generic-form-table td p {
	color: #fff;
}

.search-form label, .search-form2 label {
	color: #666;
}


.sortable {
	color: #38a6e8;
	text-decoration: underline;
}


.sortable:hover {
	color: #fff;
}


#pagemenu {
	color: #46bcd6;
}


#pagemenu a{
	color: #dfbd00;
}

.character-stats .stat-name {
	color: #f7a104;
}

.character-stats .stat-value {
	color: #27cffa;
}



.generic-form-table th label , .generic-form-table td div, .horizontal-table td, .horizontal-table th, .vertical-table th, .vertical-table td{
	color: #737273;
}


/* --------------------------------
 Follow up Override Design Styles
-------------------------------- */

.mx-h-300 {
	max-height: 300px !important;
}

.pt-5 {
	padding-top: 15px !important;
}

.wt-5 {
	padding-top: 50px !important;
}

.wt-8 {
	padding-top: 80px !important;
}

.info-table {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

@media (max-width: 991px){
	.info-table {
		display: block;
	}
}

.btn-footer-dl {
	margin: 0 0 10px 0;
	border-radius: 5px !important;
	width: 100%;
	font-size: 11pt;
	font-family: Verdana;
	text-transform: none;
	font-weight: normal;
	color: black;
	background: linear-gradient(180deg, rgba(255,206,76,1) 30%, rgba(239,169,0,1) 100%) !important;
}


@media (max-width: 767px) {
	#serverstatus i {
	padding-left: 0px !important;
  }
  	.centrado {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		margin-left: 10px;
  }
}