@charset "UTF-8";
/* @import must be at top of file, otherwise CSS will not work 
@import url("/count/35b3a4");*/
@font-face {
  font-family: 'Paradigm';
  src: url('webfonts/35B3A4_0_0.woff2') format('woff2'), url('webfonts/35B3A4_0_0.woff') format('woff'), url('webfonts/35B3A4_0_0.ttf') format('truetype');
}
@font-face {
  font-family: 'RumbleBraveRough';
  src: url('webfonts/35B023_6_0.woff2') format('woff2'), url('webfonts/35B023_6_0.woff') format('woff'), url('webfonts/35B023_6_0.ttf') format('truetype');
}
@font-face {
  font-family: 'QuadratSerial';
  src: url('webfonts/35B03E_0_0.woff2') format('woff2'), url('webfonts/35B03E_0_0.woff') format('woff'), url('webfonts/35B03E_0_0.ttf') format('truetype');
}
.innerVid {
  object-fit: cover;
  height: 100%;
  min-widthxxx: 800px;
}
.pdficon {
  background-image: url(../img/pdf.png) !important;
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: 50%;
  padding-left: 40px !important;
  width: 256px !important;
  left: calc(50% - 128px) !important;
  background-color: #272b2f;
  border-color: #272b2f !important;
}
.bottom10em {
  bottom: 7.5em !important;
}
* {
  box-sizing: border-box;
  font-family: 'Asul', sans-serif;
}
.small-logo .more {
  bottom: -2em;
}
.active-link {
  color: #f7d758 !important;
}
.hero-anchor {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  text-align: center;
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  border: solid 1px #ffffff;
  padding: 5px 10px 5px 10px;
  border-radius: .2em;
}
.iosCenter {
  right: auto !important;
  left: auto !important;
  display: block;
  left: 50% !important;
  margin-left: -100px;
}
.hero {
  height: 512px;
  width: 100%;
  margin-bottom: 2px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
  min-height: 80vh;
  width: 100%;
  /* margin-bottom: 3px; */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
  height: 64vh;
  height: 56vh; /* min-height: 600px; */
}
.hero.fit {
  height: 400px;
  padding: 0;
  height: auto;
  padding: 0;
  margin-bottom: 3em;
  min-height: auto;
  margin-top: 3em;
}
.hero-logo .more {
  /* bottom: -2em; */
}
.height100 {
  /* min-height: 600px; */
}
.bg1 {
  background-image: url(../img/hero/1.jpg);
  margin-bottom: 1px !important;
}
.bgart {
  background-image: url(../img/hero/art.jpg);
  margin-bottom: 1px !important;
}
.bg2 {
  background-image: url(../img/logos/bg-omnipedia.png);
  background-position: left bottom;
  background-size: contain;
}
.bg3 {
  background-image: url(../img/hero/4.jpg);
}
.bg5 {
  background-image: url(../img/hero/5.jpg);
}
.bg6 {
  background-image: url(../img/hero/6.jpg);
}
.hero.empires {
  background-image: url(../img/hero/bg-map.jpg);
}
.hero.map {
  background-image: url(../img/hero/map.jpg);
}
.hero.brightridge {
  background-image: url(../img/hero/2.jpg); /* margin-bottom: 3px; */
}
.hero.vandgels {
  background-image: url(../img/hero/3.jpg);
}
.hero.wilderless {
  background-image: url(../img/hero/background-wilderless.jpg); /* margin-bottom: 3px; */
}
.hero.meadowfell {
  background-image: url("../img/hero/background-meadowfell.jpg"); /* margin-bottom: 3px; */
}
.hero.grimshiver {
  background-image: url("../img/hero/background-grimshiver.jpg"); /* margin-bottom: 3px; */
}
.hero.residibay {
  background-image: url(../img/hero/background-residibay.jpg);
}
.card-square {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.bg-brightridge {
  background-image: url(../img/logos/bg-brightridge.png) !important;
}
.bg-brightridge-white {
  background-image: url(../img/logos/bg-brightridge-white.png) !important;
}
.bg-wilderless-white {
  background-image: url(../img/logos/bg-wilderless.png) !important;
}
.bg-meadowfell-white {
  background-image: url(../img/logos/bg-meadowfell.png) !important;
}
.bg-grimshiver-white {
  background-image: url(../img/logos/bg-grimshiver.png) !important;
}
.bg-empires-white {
  background-image: url(../img/logos/bg-empires-white.png) !important;
}
.bg-vandgels-white {
  background-image: url(../img/logos/bg-vandgels-white.png) !important;
}
.bg-vandgels {
  background-image: url(../img/logos/bg-vandgels.png) !important;
}
.bg-residibay {
  background-image: url(../img/logos/bg-residibay.png) !important;
}
.bg-residibay-white {
  background-image: url(../img/logos/bg-residibay-white.png) !important;
}
.bg-goldenwood {
  background-image: url(../img/bg-goldenwood.png) !important;
}
.bg-infinite {
  background-image: url(../img/logos/bg-infinite.png) !important;
}
.wide {
  xwidth: 40vw !important;
  xleft: calc(50vw - 20vw) !important;
  background-size: cover !important;
}
.hero-logo {
  background-image: url(../img/nimian-legends-logo-stacked.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 480px;
  height: 330px;
  margin: auto;
  top: 64px;
  position: absolute;
  left: calc(50vw - 240px);
  background-image: url(../img/nimian-legends-logo-stacked.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 480px;
  height: 350px;
  margin: auto;
  top: calc(50% - 175px);
  position: absolute;
  left: calc(50vw - 240px);
  border: 1px;
}
.nav {
  margin-top: 40px;
}
.global-nav {
  background-image: url(../img/tint.png);
  background-repeat: repeat-x;
  background-position: left top;
  position: fixed;
  width: calc(100vw - 16px);
  min-height: 40px;
  z-index: 24;
  top: 8px;
  margin-left: 8px;
  border-radius: 8px;
  mix-blend-mode: hard-light
}
.nav-container {
  max-width: 1120px;
  margin: auto;
  margin-bottom: auto;
  color: #2a3947;
  xxborder-bottom: solid 1px #333;
  margin-bottom: 3em;
  position: relative;
}
.page-title {
  font-size: 3em;
  display: block;
  height: 3em;
  line-height: 3em;
  border-bottom: solid 1px #aaa;
  margin-bottom: 1em;
}
.page-title a, .page-title a:visited {
  text-decoration: none !important;
  color: #37424a !important;
}
body {
  background-image: url(../img/paper-tile.jpg);
  background-repeat: repeat;
  background-position: left top;
  margin: 0;
  padding: 0;
  color: #323836;
  width: 100vw;
  color: #ffffff;
}
.site-nav {
  float: right;
  margin-right: 2em;
  margin: 0;
  margin-right: 0px;
  margin-right: 2em;
  font-family: 'Paradigm';
}
.site-nav li {
  list-style: none;
  float: left;
}
.site-nav ul {
  padding: 0;
  margin: 0;
}
.site-nav li a {
  display: inline-block;
  margin: 1em;
  text-decoration: none;
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1em;
  text-shadow: 0px 0px 1px rgb(32, 37, 34);
}
.no-background {
  /* background-image: url(../img/omnipedia-header.png); */
  /* [disabled]background-color: #333333; */
}
.hero-caption {
  font-family: Paradigm;
  color: #b4c6d4;
  bottom: 2em;
  position: absolute;
  right: 2em;
  color: #dad8bc;
}
.center-text {
  text-align: center;
}
.coming-soon {
  font-family: Paradigm;
  color: #b4c6d4;
  width: 100%;
  text-align: center;
  bottom: 50%;
  position: absolute;
}
.more {
  color: #ffffff;
  width: 100%;
  text-align: center;
  bottom: 20%;
  position: absolute;
  border: solid 1px #fbfbfb;
  width: 200px;
  border-radius: .3em;
  padding: .5em;
  left: calc(50% - 100px);
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 1em;
  xxbackground-color: #4e5a5a;
  xxbackground-color: #5c7283;
  xxbackground-color: #3a4856;
  xxborder-radius: 1em;
  background-image: url(../img/tint.png); /* background-repeat: repeat; */
}
.more:hover, .standard-button:hover {
  background-color: #fff;
  color: #5c7283 !important;
  border: #fff;
  background-image: none;
}
.more-pos {
  padding: .5em;
  font-size: 1.5em;
  bottom: -30px;
}
.standard-button {
  background-image: url(../img/tint.png);
}
.logo-text {
    font-family: 'QuadratSerial';
    font-family: 'Asul', sans-serif;
    font-weight: 700;
    color: #ffffff;
    width: 100%;
    text-align: center;
    bottom: 3em;
    position: absolute;
    border-radius: .2em;
    font-size: 1.2em;
    text-shadow: 0 0 1px #000000;
    ;
    padding-top: 0.5px;
    padding-right: 0.5px;
    padding-bottom: 0.5px;
    padding-left: 0.5px;
}
.card-square {
  width: 33.333%;
  height: 30vh;
  float: left;
  background-color: #323836;
  max-height: 300px;
  max-height: 350px;
  position: relative;
  background-position: center -2em;
  background-position: center -4em;
  border: solid 1px #fff;
  background-color: #37424a;
  background-color: #272b2f;
  min-height: 240px; /* border-radius: 1em; */
}
a.card-square:hover {
  xxxbackground-color: #4b4f53;
}
.download {
  position: absolute;
  bottom: 3em;
  /*
border: solid 1px #ffffff;
padding: .8em;
border-radius: .3em;
color: #fff;
text-decoration: none;
xxfont-size: .8em;
font-family: 'QuadratSerial';	
font-family: 'Paradigm';*/
}
.download.ios {
  right: 1em;
}
.download.android {
  left: 1em
}

.download.rightbadge {
  right: -5em;
}
.download.centerbadge {
  left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
}
.download.leftbadge {
  left: -5em
}
@media only screen and (max-width: 768px) {
.download img{
	width: 150px;
	height: auto;
	
}
	.download {
		left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
	}
.download.rightbadge {
  left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
	bottom: 0px;
}
.download.centerbadge {
  left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
	bottom: 100px; 
}
.download.leftbadge {
  left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
	position: absolute; /* Position relative to the container */
    bottom: 50px; 
	 
}
	
	.download.android {
  left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
	bottom: 20px;
}
.download.ios {
  left: 50%; /* Move the left edge to the horizontal center of the parent */
  transform: translateX(-50%); 
	bottom: 80px; 
}
}


.inactive {
  xxcolor: #798b99;
  xxborder-color: #798b99;
}
.card-half {
  width: 50%;
  height: 500px;
  position: relative;
  float: left;
}
.card-half.centered {
  width: 50%;
  height: 500px;
  position: relative;
}
.dark-bg {
  background-color: #323836;
  opacity: .8;
  width: 100%;
  height: 100%;
  border-radius: .5em;
  background-color: #000;
  opacity: .7;
  position: absolute;
  z-index: 0;
}
.white-text {
  color: #fff !important;
}
.bg-cards {
  background-image: url(../img/logos/bg-omnipedia.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.center-text-box {
  text-align: center;
  xxxheight: 60%;
  width: 64%;
  margin: 0;
  xxtop: calc(50% - 30%);
  position: absolute;
  left: calc(50% - 32%);
  width: 84%;
  left: calc(50% - 42%);
  xxwidth: 60%;
  xxleft: calc(50% - 30%);
  xxmargin-top: 50px;
  position: relative;
}
.top50 {
  margin-top: 50px;
}
.top100 {
  margin-top: 100px;
}
.darkbg {
  background-image: url(../img/darkbg.png);
}
.center-box {
  width: 680px;
  left: calc(50% - 340px);
  top: calc(50% - 200px);
  height: auto;
  text-align: center;
  color: #fff;
  position: relative;
  padding-top: 32px;
  border-radius: 5px;
  padding-bottom: 32px;
  max-height: 500px;
}
.center-text-box h2 {
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  font-size: 2em;
  /* font-size: 3vw; */
  margin: 0;
  z-index: 1;
  position: relative;
  margin: 1em 3em;
}
.inner-logo {
  width: 680px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
h2 {
  font-family: 'Asul', sans-serif;
  font-weight: 700;
}
.center-box p {
  /* font-family: 'Paradigm'; */
  font-size: 1.2em;
  line-height: 1.5;
  z-index: 1;
  position: relative;
  margin: 1em 3em;
  text-shadow: 0 0 2px #000;
  font-weight: 700;
}
.center-box h2 {
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  font-size: 2.5em;
  font-size: 2.25em;
  margin: 0;
  z-index: 1;
  position: relative;
  margin: 1em 3em;
  text-shadow: 0 0 2px #000;
}
.center-text-box p {
  font-familyx: 'Paradigm';
  font-size: 1.3em;
  line-height: 1.8;
  z-index: 1;
  position: relative;
  margin: 1em auto; /* border-bottom: solid 1px #cccccc; */ /* padding-bottom: 1em; */ max-width: 1024px;
  font-weightxxx: 700;
}
.standard-button {
  xxborder: solid 1px;
  color: #333;
  padding: 1em 2em;
  border-radius: .2em;
  text-decoration: none;
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  margin: 1em;
  position: relative;
  display: inline-block;
  background-colorx: #4e5a5a;
  color: #fff;
  background-colorx: #5c7283;
  background-colorx: #3a4856;
  color: #ffffff;
  text-align: center;
  border: solid 1px #ffffff;
}
.footer {
  min-height: 200px;
  text-align: center;
  padding: 5em;
  width: 100vw;
  max-width: 100%;
  float: left;
  border-bottom: solid 1px #ccc;
  border-top: solid 1px #ccc;
  margin-bottom: 5em;
}
.hero-quote {
  /* min-height: 320px; */
  text-align: center;
  padding: 5em;
  /* padding-bottom: 0; */
}
.footer .social a img {
  width: 4em;
  height: 4em;
  margin: 2em;
}
.world-quote {
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  font-size: 3em;
  /* padding: 1em 1em 2em 1em; */
  border-bottom: solid 1px #ccc;
}
.world-quote .attribution {
  display: block;
  font-size: .3em;
  margin-top: 1em;
  color: #33737c;
  color: #7d93a4;
}
.world-quote.small {
  font-family: 'QuadratSerial';
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  font-size: 2em;
  /* padding: 0em 3em 2em 3em; */
  /* border-bottom: solid 1px #ccc; */ border: none;
}
.world-quote.small .attribution {
  display: block;
  font-size: .5em;
  margin-top: 1em;
}
.message {
  font-family: 'Paradigm';
  color: #7d93a4;
  text-align: center;
  width: 100%;
  margin: auto;
  padding-bottom: 6em;
  font-size: 1;
  line-height: 1.5;
  float: left;
  padding-left: 20%;
  padding-right: 20%;
}
.full .thumbImage {
  margin-top: 0;
  background-image: url(../img/card_back.png);
  background-position: center top;
  width: 100%;
  position: absolute;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
}
.card-border {
  width: 100%;
  height: 100%;
  xxbackground-image: url(../../omnipedia/assets/img/border.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
  position: absolute;
  border: 15px solid transparent;
  xxborder-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
  border-image: url(../../omnipedia/assets/img/border.png) 30 round;
}
.video-player {
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.75);
  width: 640px;
  height: 360px;
  border-radius: 8px;
}
.video-hero {
  text-align: center;
  /* margin: 1em 1em 2em 1em; */
  padding: 1em 0 2em 0;
  xxborder-top: solid 1px #cccccc;
  xxborder-bottom: solid 1px #cccccc;
  position: relative;
}
.group:after, .rows:after, .footer:after {
  content: "";
  display: table;
  clear: both;
}
.rows {
  margin-bottom: 1px;
}
.card-square:first-child {
  border-left: none;
}
.card-square:last-child {
  border-right: none;
}
.no-mobile {
  display: block;
}
@media only screen and (max-width: 980px) {
  .video-player {}
  .card-square:nth-child(2) {
    /* border-right:none; */
  }
  .card-square:nth-child(3) {
    border-left: none;
  }
  .card-square {
    /* width: 50%; */
    /* min-height: 320px; */
  }
  .card-half {
    width: 100%;
    height: 400px;
  }
  .center-text-box {
    width: 84%;
    left: calc(50% - 42%);
    margin-top: 0;
  }
  .center-box {
    width: 100%;
    left: 0;
    height: auto;
  }
  .center-box h2 {
    font-size: 1.5em;
  }
  .row {
    max-width: 100vw;
  }
	
	.bg-wilderless-white-bookx {
background-image: url(../img/logos/bg-wilderless.png) !important;
background-size: 100% !important;
background-position: top center !important;
}
	
}
@media only screen and (max-width: 480px) {
  .no-mobile {
    display: none;
  }
  .footer {
    padding: 0;
  }
  .footer .social a img {
    width: 3em;
    height: 3em;
    margin: .5em;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .message {
    width: auto;
    padding-bottom: 6em;
    font-size: 1.1em;
    line-height: 1.5;
    margin: 0 2em;
    /* border-top: solid 1px #ccc; */
    /* padding-top: 3em; */
    padding-left: 0;
    padding-right: 0;
  }
  .world-quote.small {
    padding: 1em 1em 2em 1em;
    font-size: 1.5em;
    line-height: 1.5;
  }
  .hero-quote {
    padding: 0;
    min-height: 0;
    /* margin-bottom: 50px; */
  }
  .center-box p, .center-box h2 {
    margin: 1em;
  }
  body {
    overflow-x: hidden;
  }
  .card-square {
    width: calc(100vw - 8px);
    border-left: none;
    border-right: none;
    margin: 0 auto;
    margin-left: 4px;
    border-radius: 8px;
    margin-bottom: 4px;
  }
  .center-text-box p {
    font-family: 'Paradigm';
    font-size: 1.2em;
    line-height: 1.5;
    margin: .5em;
  }
  .center-text-box h2 {
    font-size: 2em;
    margin: .5em;
  }
  .card-half {
    width: 100%;
    height: auto;
    min-height: 300px;
  }
  .hero-caption {
    bottom: 10px;
    position: absolute;
    right: auto;
    left: 0;
    text-align: center;
    width: 100vw;
    display: none;
  }
  .hero-logo {
    background-image: url(../img/nimian-legends-logo-stacked.png);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
    width: 100vw;
    height: 80%;
    margin: auto;
    top: 20px;
    position: absolute;
    left: 0;
    text-align: center;
    background-position: center 0px;
    /* max-width: 400px; */
  }
  .hero {
    /* height: 400px; */ min-height: 80vh;
  }
  .height100 {
    min-height: 80vh;
  }
  .video-hero {
    margin: 1em 0;
    padding: 0;
  }
  .video-player {
    width: 100vw;
    height: 60vw;
    border-radius: 0;
  }
	
	@media only screen and (min-width: 768px) {
  .download.ios {
    right: 0;
    bottom: 10px;
    left: 0;
  }
  .download.android {
    left: 0;
    bottom: 90px;
    right: 0;
  }
	}
  .site-nav li a {
    display: inline-block;
    margin: 5px;
  }
  .logo-text {
    left: 0;
  }
  .bottom10em {
    font-size: 1em;
    bottom: 170px !important;
  }
  .dropdown-content a {
    margin: 1em !important;
  }
  .page-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 0;
    line-height: 2;
    border: none;
  }
  .nav .dropdown2 {
    width: 100vw;
    text-align: center;
    top: 0;
  }
  .nav .dropdown-content2 {
    position: absolute;
    border: none;
    top: 35px;
    width: 100vw;
  }
  .nav-options {
    top: 60px;
  }
  .nav .dropdown2 {
    width: 100vw;
    text-align: center;
    top: 0;
    height: 35px;
    text-align: center;
    margin: auto;
    z-index: 23;
  }
  .view-options {
    text-decoration: none;
    color: #4c7279;
    margin-right: 0;
    border: solid 1px #aaa;
    padding: .5em 2em .5em 2em;
    border-radius: 0;
    position: relative;
    display: block;
    margin-bottom: 3px;
    z-index: 16;
    text-align: center;
    width: 48vw;
    float: left;
    font-size: 14px;
    margin: 1vw;
  }
  .nav {
    margin-bottom: 70px;
  }
  .site-nav {
    margin-right: 0;
  }
  .site-nav li a {
    width: 20vw;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    margin: 0;
  }
  .dropdown-content a {
    margin: 1em !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .no-background, .global-nav {
    background-image: url(../img/tint.png);
    min-height: 40px;
    width: 100vw !important;
    top: 0;
    margin: 0;
    border-radius: 0;
  }
  .small-logo {
    background-size: 80%;
    text-align: center;
    background-position: center;
  }
  .dropdown2 .view-options {
    width: 100vw !important;
    float: none;
    font-size: 14px;
    margin: 0;
  }
  .plain .card-title {
    border-bottom: solid 1px #ccc;
  }
	
	
	
}