body { font-family: Roboto, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333; }
.pageWrapper { width: 100%; overflow: hidden; }
.sectionWrapper { width: 1170px; margin: 0 auto; }
.narrowSectionWrapper { width: 800px; margin: 0 auto; }

.portableNavTrigger { display: none; }

.grid { position: relative; }
.grid .tile { display: block; float: left; }
.grid_w_2 .tile { width: 50%; }
.grid_w_3 .tile { width: 33.3333%; }
.grid_w_4 .tile { width: 25%; }

.spacerImg { display: block; width: 100%; }
.jumpBtn { cursor: pointer; }

.kickstarterLabel { position: fixed; display: block; bottom: 0; left: 0; max-width: 30%; max-height: 35%; z-index: 98; }

body { padding-top: 100px; }
.header { position: absolute; top: 0; left: 0; width: 100%; color: #fff; z-index: 99;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.header .sectionWrapper { height: 100px; line-height: 100px; padding: 0 3.5%; width: auto; }
.headerLogo { display: block; position: absolute; left: 3.5%; top: 50%; vertical-align: middle; height: 54px; margin-top: -27px; 
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.headerLogo.dark {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0; 
}
.mainNav { float: right; padding: 0; margin: 0; list-style-type: none; }
.mainNav li { float: left; padding: 0; margin: 0 12px; }
.mainNav li:last-child { margin-right: 0; }
.mainNav li a { display: block; font-weight: 700; text-transform: uppercase; color: inherit; }
.homePage .header { position: fixed; }
.header.floating { background: #fff; color: #383057;
  -moz-box-shadow: 0 3px 1px rgba(0,0,0,.15);
  -webkit-box-shadow: 0 3px 1px rgba(0,0,0,.15);
  -ms-box-shadow: 0 3px 1px rgba(0,0,0,.15);
  -o-box-shadow: 0 3px 1px rgba(0,0,0,.15);
  box-shadow: 0 3px 1px rgba(0,0,0,.15);
}
.header.floating .headerLogo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.header.floating .headerLogo.dark {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

body { padding-top: 0; }

.sectionTitle { position: relative; font-size: 3em; line-height: 1em; padding-top: 1.5883em; padding-bottom: 1.5883em; text-align: center; font-weight: 800; letter-spacing: .5em; text-transform: uppercase; color: #fff; background: url(/imgs/bg_dark-purple_narrow_b.jpg) 50% 50% no-repeat; }
.sectionTitle.light { background-image: url(/imgs/bg_light_narrow.jpg); color: #383057; }

.txtCntnt { line-height: 1.5em; }
.txtCntnt p, .txtCntnt ul, .txtCntnt ol, .txtCntnt table { margin-top: 1em; margin-bottom: 1em; }
.txtCntnt b, .txtCntnt strong { color: #383057; font-weight: 700; }
.txtCntnt a { text-decoration: underline; cursor: pointer; }
.txtCntnt h2 { line-height: 1.2em; margin: 1em 0; color: #383057; }
.txtCntnt h3 { font-family: 'Roboto Slab', serif; font-size: 1.35em; line-height: 1.2em; margin: 1.5em 0 .8em; font-weight: 400; color: #383057; }
.txtCntnt h4 { font-weight: 700; font-size: 1em; color: #383057; }
.txtCntnt h2:last-child, .txtCntnt h3:last-child, .txtCntnt h4:last-child, .txtCntnt p:last-child, .txtCntnt ul:last-child, .txtCntnt ol:last-child, .txtCntnt table:last-child { margin-bottom: 0; }
.txtCntnt h2:first-child, .txtCntnt h3:first-child, .txtCntnt h4:first-child, .txtCntnt p:first-child, .txtCntnt ul:first-child, .txtCntnt ol:first-child, .txtCntnt table:first-child { margin-top: 0; }

.simpleSection { padding: 5em 0; background: 50% 50% no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.darkSection { background-color: #2A1611; color: #fff;
  text-shadow: 0 0 .75em rgba(0,0,0,.75);
}
.darkSection .title, .darkSection h2, .darkSection h3, .darkSection h4, .darkSection b, .darkSection strong { color: #fff; }
.simpleSection .title { text-align: center; font-size: 2.75em; font-weight: 300; text-transform: uppercase; letter-spacing: .25em; margin: 0 0 1.5em; }

.introTxt { font-size: 1.4em; line-height: 1.75em; text-align: justify; font-family: 'Roboto Slab', serif; }

.homeArea { position: relative; overflow: hidden; background: url(/imgs/cover.jpg) no-repeat 50% 50%;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@keyframes homeImgFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.homeArea img { display: block; width: 100%;
  animation: homeImgFadeIn 3s 1;
}
@keyframes taglineHexaFadeIn {
  0% { transform: rotate(90deg) scale(0); opacity: 0; }
  33% { transform: rotate(0) scale(1); }
  100% { transform: rotate(-45deg) scale(1); opacity: .35; }
}
@keyframes taglineHexaFloat {
  0% { margin: 0; }
  25% { margin: .5em; }
  75% { margin: -.5em; }
  100% { margin: 0; }
}
@keyframes taglineHexaRotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(-405deg); }
}
@keyframes taglineFadeIn {
  0% { margin-right: -4em; opacity: 0; line-height: 2.6em; filter: blur(10px); }
  33% { margin-right: -4em; opacity: 0; line-height: 2.6em; filter: blur(10px); }
  55% { margin-right: 0; line-height: 2.5em; }
  100% { opacity: 1; line-height: 1.3em; }
}
@keyframes subTaglineFadeIn {
  0% { opacity: 0; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes taglineTolFadeIn {
  0% { text-shadow: 0 0 0 rgba(255,255,255,.25); }
  55% { text-shadow: 0 0 0 rgba(255,255,255,.25); }
  100% { text-shadow: 0 -1.3em 0 rgba(255,255,255,.25); }
}
@keyframes taglineBolFadeIn {
  0% { text-shadow: 0 0 0 rgba(255,255,255,.25); }
  55% { text-shadow: 0 0 0 rgba(255,255,255,.25); }
  100% { text-shadow: 0 1.3em 0 rgba(255,255,255,.25); }
}
@keyframes textError {
  50% { text-shadow: 0 0 0 rgba(255,255,255,.15); }
  57% { text-shadow: 0 0 0 rgba(255,255,255,.15); }
  57.1% { text-shadow: -1em 0 0 rgba(255,255,255,.15), 1em 0 0 rgba(255,255,255,.15); }
  60% { text-shadow: -1em 0 0 rgba(255,255,255,.15), 1em 0 0 rgba(255,255,255,.15); }
  60.01% { text-shadow: 0 -1.3em 0 rgba(255,255,255,.15), 0 1.3em 0 rgba(255,255,255,.15); }
  63% { text-shadow: 0 -1.3em 0 rgba(255,255,255,.15), 0 1.3em 0 rgba(255,255,255,.15); }
  63.01% { text-shadow: 0 0 0 rgba(255,255,255,.15); }
}
@keyframes textBlink {
  55% { opacity: 1; }
  59.99% { opacity: .5; }
  60% { opacity: 1; }
  75% { opacity: 1; }
  75.01% { opacity: 0; }
  77% { opacity: 0; }
  77.01% { opacity: 1; }
}
.homeArea .tagline { position: absolute; top: 33%; right: 5%; width: 90%; text-align: right; color: #fff; text-transform: uppercase; font-weight: 800; font-size: 3em; line-height: 1.3em; line-height: 7.8em; margin-top: -3.9em; letter-spacing: .25em; }
.homeArea .tagline .txt { display: inline-block; position: relative; z-index: 1; line-height: 1.3em; vertical-align: middle;
  animation: taglineFadeIn 6s 1, textError 8s infinite 6.2s;
}
.homeArea .tagline:after { content: ''; display: block; position: absolute; top: .8em; right: -2.5em; width: 8em; height: 8em; background: url(/imgs/hexa-dark.png) no-repeat 50% 50%;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  transform: rotate(-45deg);
  opacity: .35;
  animation: taglineHexaFadeIn 6s 1, taglineHexaFloat 12s infinite linear 6.1s, taglineHexaRotate 30s infinite linear 6.1s;
}
.homeArea .subTagline { position: absolute; bottom: 7.5%; right: 5%; margin-right: .5em; text-align: right; width: 21em; font-size: 1.4em; line-height: 1.35em; font-weight: 700;
  text-shadow: 0 0 .5em rgba(255,255,255,1);
  animation: subTaglineFadeIn 8s 1;
}
.tol {
  text-shadow: 0 -1.3em 0 rgba(56,48,87,.25);
  text-shadow: 0 -1.3em 0 rgba(255,255,255,.25);
  animation: taglineTolFadeIn 6s 1;
}
.bol {
  text-shadow: 0 1.3em 0 rgba(56,48,87,.25);
  text-shadow: 0 1.3em 0 rgba(255,255,255,.25);
  animation: taglineBolFadeIn 6s 1;
}
.fel {
  animation: textBlink 5.5s infinite 10.2s;
}
.fel2 {
  animation: textBlink 6.5s infinite 6.2s;
}
.fel3 {
  animation: textBlink 5s infinite 8.2s;
}
.fel4 {
  animation: textBlink 6s infinite 11.2s;
}
.scrollTxt { position: absolute; display: block; bottom: 3.5%; left: 50%; width: 200px; margin-left: -100px; color: #fff; text-align: center; cursor: pointer;
  text-shadow: 0 0 1em rgba(0,0,0,.5);
  animation: scrollFadeIn 8s 1;
}
.scrollIcon { position: relative; display: inline-block; font-size: 18px; width: 2em; height: 2em; line-height: 2em; background: transparent; color: #fff; text-align: center; vertical-align: middle; overflow: hidden; }
.scrollIcon i { position: absolute; top: 0; left: 0; width: 100%; line-height: 2em;
  animation: leaveDownGetBackFromTop 2s;
  -moz-animation: leaveDownGetBackFromTop 2s; /* Firefox */
  -webkit-animation: leaveDownGetBackFromTop 2s; /* Safari and Chrome */
  -o-animation: leaveDownGetBackFromTop 2s; /* Opera */
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes scrollFadeIn {
  0% { opacity: 0; }
  85% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes leaveDownGetBackFromTop {
  25% { top: 0; left: 0; }
  49.8% { top: 100%; left: 0; }
  49.9% { top: 100%; left: 100%; }
  50% { top: -100%; left: 100%; }
  50.1% { top: -100%; left: 0; }
  75% { top: 0; left: 0; }
}
@-moz-keyframes leaveDownGetBackFromTop /* Firefox */ {
  25% { top: 0; left: 0; }
  49.8% { top: 100%; left: 0; }
  49.9% { top: 100%; left: 100%; }
  50% { top: -100%; left: 100%; }
  50.1% { top: -100%; left: 0; }
  75% { top: 0; left: 0; }
}
@-webkit-keyframes leaveDownGetBackFromTop /* Safari and Chrome */ {
  25% { top: 0; left: 0; }
  49.8% { top: 100%; left: 0; }
  49.9% { top: 100%; left: 100%; }
  50% { top: -100%; left: 100%; }
  50.1% { top: -100%; left: 0; }
  75% { top: 0; left: 0; }
}
@-o-keyframes leaveDownGetBackFromTop /* Opera */ {
  25% { top: 0; left: 0; }
  49.8% { top: 100%; left: 0; }
  49.9% { top: 100%; left: 100%; }
  50% { top: -100%; left: 100%; }
  50.1% { top: -100%; left: 0; }
  75% { top: 0; left: 0; }
}

.theWorld { position: relative; overflow: hidden; }
.theWorld .img { display: none; }
.theWorld video { display: block; width: 100%; }
.theWorld .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.theWorld .pois { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.theWorld .poi { position: absolute; display: block; }     
.councilTowerPoi { top: 7%; left: 50%; }
.threePillarsPoi { top: 11%; left: 20%; }
.innerCirclePoi { top: 32%; left: 40%; }
.rimPoi { top: 52.5%; left: 47%; }
.nomadSettlementsPoi { top: 72%; left: 20%; }
.nomadSettlementsPoi .caption { color: #fff; margin-top: -8em; }
.outbackPoi { top: 80%; left: 48%; }
.outbackPoi .caption { margin-top: -8em; }
.minePoi { top: 45%; left: 88%; color: #fff; }
.minePoi:after { background: #fff; }
.minePoi:before { border-color: #fff; }
.nomadSettlementsPoi:hover .caption, .minePoi:hover .caption {
  text-shadow: 0 0 .5em rgba(0,0,0,.75);
}

.gameFeatures { background-image: url(/imgs/bg_gold-mine.jpg); }
.gameFeatures ul { padding: 0; margin: 0; list-style-type: none; font-size: 1.2em; }
.gameFeatures ul li { float: left; width: 46%; padding: .8em 2%; margin: 0; text-align: center; }
.gameFeatures ul li:before { content: ''; display: block; margin: 0 auto .25em; font-size: 4em; font-family: 'FontAwesome'; line-height: 2em; width: 2em; background: url(/imgs/hexa-white-frame.png) no-repeat 50% 50%;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}
.gameFeatures ul li { text-align: left; height: 8em; line-height: 8em; vertical-align: middle; }
.gameFeatures ul li span { display: inline-block; line-height: 1.5em; vertical-align: middle; margin-left: 9em; margin-top: -.6em; }
.gameFeatures ul li:before { float: left; text-align: center; margin: 0 -1000px 0 0; }
.gameFeatures ul li:last-child { clear: both; float: none; margin: 0 auto; }
.gameFeatures ul li.world:before { content: ''; }
.gameFeatures ul li.timeTravel:before { content: ''; }
.gameFeatures ul li.worker:before { content: ''; }
.gameFeatures ul li.paths:before { content: ''; content: ''; }
.gameFeatures ul li.replay:before { content: ''; }
.gameFeatures ul li.interaction:before { content: ''; }
.gameFeatures ul li.expansions:before { content: ''; }

.pathItem { background: url(/imgs/flag_harmony.jpg) no-repeat 50% 50%; overflow: hidden; cursor: pointer;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -moz-perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
.pathItem .flag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/imgs/flag_harmony.jpg) no-repeat 50% 50%; z-index: 0;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  transition: all 4s linear;
}
.pathItem:hover .flag {
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
.pathItem:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #5D5F30;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  -ms-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
}
.pathItem:hover:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  -moz-opacity: .65;
  -khtml-opacity: .65;
  opacity: .65;
}
.pathItem .caption { position: absolute; top: 50%; left: -25%; width: 150%; margin-top: -2.5em; color: #fff; text-align: center; font-size: 1.2em; z-index: 2;
  text-shadow: 0 0 .5em rgba(0,0,0,.75)
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0; 
  -moz-transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(-90deg);
  -moz-transform-origin: center 250%;
  -webkit-transform-origin: center 250%;
  -ms-transform-origin: center 250%;
  -o-transform-origin: center 250%;
  transform-origin: center 250%;
  -moz-transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
  -moz-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  filter: blur(10px);
}
.pathItem:hover .caption {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1; 
  -moz-transform: rotateX(0);
  -webkit-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
  filter: blur(0);
}
.pathItem .caption .title { text-transform: uppercase; margin-bottom: .5em; letter-spacing: 1em; margin-left: 1em;
  -moz-transition: all 2s linear .2s;
  -webkit-transition: all 2s linear .2s;
  -ms-transition: all 2s linear .2s;
  -o-transition: all 2s linear .2s;
  transition: all 3.8s linear .2s;
}
.pathItem:hover .caption .title { letter-spacing: .5em; margin-left: .5em; }
.pathItem .caption .title .smallTxt { display: block; font-size: .5em; letter-spacing: .25em; margin-left: .25em; }
.pathItem .caption .body { font-weight: 700; }
.pathItem .spacer_2x1 { display: none; }
.pathItem.dominance, .pathItem.dominance .flag { background-image: url(/imgs/flag_dominance.jpg); }
.pathItem.dominance:after { background: #1E2430; }
.pathItem.progress, .pathItem.progress .flag { background-image: url(/imgs/flag_progress.jpg); }
.pathItem.progress:after { background: #DF9003; }
.pathItem.salvation, .pathItem.salvation .flag { background-image: url(/imgs/flag_salvation.jpg); }
.pathItem.salvation:after { background: #88482C; }

.contactSection { position: relative; text-align: center; background-image: url(/imgs/bg_sandstorm.jpg); }
.contactSection .title { font-weight: 800; letter-spacing: 0; margin: 1.5em 0 .5em; }
.socialBtns a { position: relative; display: inline-block; margin: .25em .1em; font-size: 5em; font-family: 'FontAwesome'; line-height: 2em; height: 2em; width: 2em; color: #fff; text-align: center; background: url(/imgs/hexa-white-frame.png) no-repeat 50% 50%; text-decoration: none;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.socialBtns a:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.socialBtns a.imgIconBtn { color: rgba(255,255,255,0); }
.socialBtns a.imgIconBtn img { position: absolute; top: 17.5%; left: 17.5%; display: block; width: 65%; height: 65%;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.socialBtns a.bgg img { opacity: .5; }
.socialBtns a.bgg:hover img { opacity: 1; }
.contactSection .socialBtns { margin-bottom: 2em; }
.contactSection .mail { font-weight: 700; font-size: 1.2em; }
.madeBy { position: absolute; bottom: 10px; right: 30px; }

.formCnt { width: 450px; margin: 3em auto 0; padding: 2em 3em 3em; background: #fff; color: #333;
  text-shadow: none;
  border-radius: 1em;
  box-shadow: 0 -.25em 0 rgba(0,0,0,.2) inset, 0 .4em 0 rgba(0,0,0,.25);  
}
.formCnt { text-align: center; }
.formCnt .indicates-required { text-align: right; font-size: .8em; font-style: italic; }
.formCnt label { display: block; padding: .6em 0 .25em; text-align: left; color: #383057; font-weight: 700; }
.formCnt input[type=text], .formCnt input[type=email] { font-size: 1em; height: 2.5em; line-height: 1.5em; padding: .5em .75em; background: #f8f8f8; width: 100%; color: #000; border: 1px solid #bbb;
  -moz-box-shadow: 0 .15em 0 rgba(0,0,0,.1) inset;
  -webkit-box-shadow: 0 .15em 0 rgba(0,0,0,.1) inset;
  -ms-box-shadow: 0 .15em 0 rgba(0,0,0,.1) inset;
  -o-box-shadow: 0 .15em 0 rgba(0,0,0,.1) inset;
  box-shadow: 0 .15em 0 rgba(0,0,0,.1) inset;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}
.formCnt input[type=text]:focus, .formCnt input[type=email]:focus { background: #fff; border-color: #383057; outline: none;
  -moz-box-shadow: 0 0 0 rgba(0,0,0,.1) inset, 0 .25em 0 rgba(0,0,0,.15);
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,.1) inset, 0 .25em 0 rgba(0,0,0,.15);
  -ms-box-shadow: 0 0 0 rgba(0,0,0,.1) inset, 0 .25em 0 rgba(0,0,0,.15);
  -o-box-shadow: 0 0 0 rgba(0,0,0,.1) inset, 0 .25em 0 rgba(0,0,0,.15);
  box-shadow: 0 0 0 rgba(0,0,0,.1) inset, 0 .25em 0 rgba(0,0,0,.15);
  transform: scale(1.05);
}
.formCnt .mce_inline_error {  }
.formCnt .button { margin-top: 1em; }

.pathPage { position: relative; }
.pathHead { position: relative; padding-top: 100px; height: 450px; background: url(/imgs/bg_pop.jpg) no-repeat 50% 50%; overflow: hidden;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.pathHead:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,.1); background: rgba(0,0,0,.25); }
.pathHead:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; z-index: 10;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.pathHead .character { display: block; position: absolute; left: 80%; margin-left: -256px; bottom: -30%; height: 130%; }
.pathHead .character.leftAlign { left: 20%; }
@keyframes pathCaptionFadeIn {
  0% { transform: scale(3); filter: blur(1em); }
  100% { transform: scale(1); filter: blur(0); }
}
@keyframes pathTitleFadeIn {
  0% { letter-spacing: 2em; }
  100% { letter-spacing: .5em; }
}
.pathHead .caption { position: absolute; top: 50%; left: 50%; width: 1800px; margin: -3em -900px; color: #fff; text-align: center; font-size: 2em; z-index: 2;
  text-shadow: 0 0 1em rgba(0,0,0,.75);
  animation: pathCaptionFadeIn 4s 1 cubic-bezier(0.19, 1, 0.22, 1);
}
.pathHead .caption .title { text-transform: uppercase; font-size: 2em; margin-bottom: .5em; letter-spacing: .5em; margin-left: .5em;
  -moz-transition: all 2s linear .2s;
  -webkit-transition: all 2s linear .2s;
  -ms-transition: all 2s linear .2s;
  -o-transition: all 2s linear .2s;
  transition: all 3.8s linear .2s;
  animation: pathTitleFadeIn 8s 1 ease-out;
}
.pathHead .caption .title .smallTxt { display: block; font-size: .5em; letter-spacing: .25em; margin-left: .25em; }
.pathHead .caption .body { display: none; font-weight: 700; }
.pathHead .caption:before { content: ''; display: block; position: absolute; top: -3em; left: 50%; margin-left: -16em; width: 10em; height: 10em; background: url(/imgs/hexa-white-frame.png) no-repeat 50% 50%;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  -moz-opacity: .2;
  -khtml-opacity: .2;
  opacity: .2;
}
.pathBody { position: relative; padding: 0 0 4em; margin-top: -7em; text-align: center; z-index: 11; }
.pathBody .title { position: relative; display: inline-block; font-size: 2.5em; color: #383057; font-family: 'Roboto Slab', serif;
  text-shadow: 0 0 .5em rgba(255,255,255,.75);
}
.pathBody .title:before { content: '“'; display: block; font-size: 5em; position: absolute; top: .05em; left: -.35em; font-family: 'Times New Roman', serif;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  -moz-opacity: .4;
  -khtml-opacity: .4;
  opacity: .4;
  filter: blur(.015em); 
}
.pathBody .title:after { content: '”'; display: block; font-size: 3em; position: absolute; bottom: -.4em; right: -.4em; font-family: 'Times New Roman', serif;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  -moz-opacity: .2;
  -khtml-opacity: .2;
  opacity: .4;
  filter: blur(.025em); 
}
.pathBody body { text-align: left; }
.pathBody .chapter { position: relative; padding: 3em 0; text-align: justify;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 2.5em;
  -moz-column-gap: 2.5em;
  column-gap: 2.5em;  
}
.pathBody .chapter:after { content: ''; display: block; position: absolute; bottom: 1px; left: 10%; width: 80%; height: 2px; background: rgba(0,0,0,.2); }
.pathBody .chapter:last-child:after { display: none; }
.pathBody .chapter img { margin-bottom: 1em; }
.bioSection .chapter { position: relative; margin-left: 52%;
  -webkit-columns: 1;
  -moz-columns: 1;
  columns: 1;  
}
.bioSection .chapter img { display: block; float: left; width: 100%; margin-left: -108%; }
.pathBody h3 { font-size: 2em; margin-bottom: 0; margin-top: 1.25em; text-align: left; text-align: center; }
.pathInfo { display: table; font-size: 1.2em; border: 2px solid #383057; border-color: rgba(56,48,87,.25); margin: 0 auto 2em; }
.pathInfoInner { display: table-row; }
.pathInfo .badgeArea { display: table-cell; vertical-align: middle; text-align: right; padding: 1em; }
.pathInfo .badge { max-width: 8em; display: inline-block; }
.pathInfo .infoSegments { display: table-cell; vertical-align: middle; text-align: left; padding: 1em; }
.pathInfo .infoSegment { margin: 0 1em 0 0; padding: .5em 0; font-family: 'Roboto Slab', serif; border-bottom: 1px solid rgba(56,48,87,.25); }
.pathInfo .infoSegment:last-child { border-bottom: 0; }
.pathInfo label { display: inline-block; width: 10.5em; margin: 0 1em 0 0; text-align: left; color: #383057; font-size: .75em; font-weight: 800; text-transform: uppercase; font-family: Roboto, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.pathInfo i { color: #383057; display: inline-block; font-size: 1.3333em; width: 1em; margin-right: .5em; text-align: center; }
.harmonyPage .pathHead { background-image: url(/imgs/bg_poh.jpg); }
.harmonyPage .pathHead:before { background: rgba(255,255,255,.1); }
/*.harmonyPage .pathHead .character { left: 20%; }*/
.harmonyPage .pathHead .caption:before { margin-left: 6em; }
.dominancePage .pathHead { background-image: url(/imgs/bg_pod.jpg); }
.dominancePage .pathHead:before { background: rgba(0,0,0,.2); }
.salvationPage .pathHead { background-image: url(/imgs/bg_pos.jpg); }
/*.salvationPage .pathHead .character { left: 20%; }*/
.salvationPage .pathHead .caption:before { margin-left: 6em; }

.pathInfoNav { display: block; margin: 0; padding: 0; list-style-type: none; border-bottom: 2px solid #9B97AA; }
.pathInfoNav:after { content: ''; display: block; clear: both; }
.pathInfoNav li { position: relative; float: left; margin: 0; padding: 0; width: 25%; margin-right: -2px; margin-bottom: -2px; }
.pathInfoNav li:first-child { margin-left: 3px; }
.pathInfoNav li a { display: block; height: 3.6em; line-height: 1.2em; padding: 1em; border: 2px solid #CDCBD4; border-bottom-color: transparent; text-align: left; font-size: 1.2em; font-family: 'Roboto Slab', serif; color: inherit; text-decoration: none; }
.pathInfoNav label { display: block; margin: 0; text-align: left; color: #383057; font-size: .75em; font-weight: 800; text-transform: uppercase; font-family: Roboto, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.pathInfoNav i { color: #383057; display: inline-block; font-size: 1.3333em; width: 1em; margin-right: .25em; text-align: center; }
.pathInfoNav label, .pathInfoNav i, .pathInfoNav .value { opacity: .75; }
.pathInfoNav label, .pathInfoNav i, .pathInfoNav li a, .pathInfoNav .value {
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.pathInfoNav li:hover { z-index: 1; }
.pathInfoNav li:hover a { border-color: #9B97AA; border-bottom-color: transparent; }
.pathInfoNav li:hover label, .pathInfoNav li:hover i, .pathInfoNav li:hover .value, .pathInfoNav li.active label, .pathInfoNav li.active i, .pathInfoNav li.active .value { opacity: 1; }
.pathInfoNav li.active { z-index: 2; }
.pathInfoNav li.active a { border-color: #9B97AA; border-bottom-color: #fff; background: #fff; }
.pathInfoNav li, .pathInfoNav li:first-child { width: 24.5%; margin-left: .25%; margin-right: .25%; } 
.pathInfoSection { padding-top: 2em; }
.pathInfoSection_exo { padding-top: 0; }

.whitePoi { color: #fff; }
.whitePoi:after { background: #fff; }
.whitePoi:before { border-color: #fff; }
.whiteCaptionPoi .caption .title { color: #fff; }
.whiteCaptionPoi:hover .caption .title {
  text-shadow: 0 0 .5em rgba(0,0,0,.75);
}

.exoPoiArea { position: relative; margin: 0 auto; width: 574px; max-width: 80%; }
.exoPoiArea .exoImg { display: block; width: 100%; }
.exoPoiArea .pois { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.exoPoiArea .poi { position: absolute; display: block; } 
.exoPoi_1 { top: 19.5%; left: 34%; }
.exoPoi_2 { top: 61%; left: 25%; }
.exoPoi_3 { top: 72%; left: 44%; }
.exoPoi_4 { top: 32%; right: 52%; }
.exoPoi_5 { top: 60%; right: 25%; }
.pathBody .exoPoiArea .title { display: block; font-family: inherit; text-shadow: none; max-width: 100%; text-align: left; }
.pathBody .exoPoiArea .title:before, .pathBody .exoPoiArea .title:after { content: ''; display: none; }

.seederPois .exoPoi_1 { top: 28%; left: 46%; }
.seederPois .exoPoi_2 { top: 47%; left: 12%; }
.seederPois .exoPoi_3 { top: 61%; left: 30%; }
.seederPois .exoPoi_4 { top: 40%; right: 50%; }
.seederPois .exoPoi_5 { top: 52%; right: 50%; }

.octopodPois .exoPoi_1 { top: 37%; left: 30%; }
.octopodPois .exoPoi_2 { top: 66%; left: 24%; }
.octopodPois .exoPoi_3 { top: 34%; right: 27%; left: auto; }
.octopodPois .exoPoi_4 { top: 48%; right: 44%; }
.octopodPois .exoPoi_5 { top: 62%; right: 30%; }

.gargoylePois .exoPoi_1 { top: 31%; left: 21%; }
.gargoylePois .exoPoi_2 { top: 62%; left: 23%; }
.gargoylePois .exoPoi_3 { top: 38.5%; right: 45%; left: auto; }
.gargoylePois .exoPoi_4 { top: 60%; right: 19%; }
.gargoylePois .exoPoi_5 { top: 79%; right: 40%; }

.simpleSection .youtube-embed-wrapper { width: 90%; margin: 0 auto 2em; }
.gameImg { display: block; margin: 2em auto 0; width: 100%; max-width: 1465px; }
.txtCntnt img { max-width: 100%; }

#eucookiealert { position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 2em; font-size: 12px; background: rgba(0,0,0,.66); color: #fff; line-height: 1.5; z-index: 102; }
#eucookiealert .btn { margin-left: 1.5em; }
#eucookiealert a { font-weight: bold; text-decoration: underline; color: inherit; }