.sectionWrapper { max-width: 90%; }
.narrowSectionWrapper { max-width: 80%; }
.header .sectionWrapper { max-width: 100%; }

@media only screen
and (max-width: 1100px) {
  body { font-size: 15.5px; }
}
@media only screen
and (max-width: 1000px) {
  body { font-size: 15px; }
}
@media only screen
and (max-width: 900px) {
  body { font-size: 14.5px; }
}
@media only screen
and (max-width: 800px) {
  body { font-size: 14px; }
}
@media only screen
and (max-width: 700px) {
  body { font-size: 13.5px; }
}
@media only screen
and (max-width: 600px) {
  body { font-size: 13px; }
}
@media only screen
and (max-width: 500px) {
  body { font-size: 12.5px; }
}
@media only screen
and (max-width: 400px) {
  body { font-size: 12px; }
}

@media only screen
and (max-width: 784px) {
  .portableNavTrigger { display: block; position: absolute; right: 0; top: 20px; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 24px; color: #fff; cursor: pointer; }
  .header.floating .portableNavTrigger { color: #383057; }
  .navigation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #383057; background: #fff url(/imgs/bg_light.jpg) no-repeat 50% 50%; background: #383057; color: #fff;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
  }
  .header .navigation .portableNavTrigger { color: #fff; }
  .mainNav { float: none; position: absolute; left: 5%; top: 50%; width: 90%; font-size: 1.5em; line-height: 2em; margin-top: -7.5em; }
  .mainNav li { float: none; display: block; margin: 0; padding: .5em 0; }
  .mainNav li a { display: block; text-align: center; }
  .navigation { visibility: hidden;
    -moz-transform: scale(3);
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    filter: blur(3em);
    -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 .8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .portableNavOpen .navigation { visibility: visible;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    filter: blur(0);
  }
}
@media screen and (max-width: 1000px), screen and (max-height: 500px) {
  .header .sectionWrapper { height: 80px; line-height: 80px; }
  .pathHead { padding-top: 80px; }
  .headerLogo { height: 48px; margin-top: -24px; }
  .portableNavTrigger { top: 10px; }
}
@media screen and (max-width: 590px), screen and (max-height: 350px) {
  .header .sectionWrapper { height: 60px; line-height: 60px; }
  .pathHead { padding-top: 60px; }
  .headerLogo { height: 40px; margin-top: -20px; }
  .portableNavTrigger { top: 0; }
}

@media only screen
and (max-width: 1500px) {
  .pathItem .caption .title { letter-spacing: .65em; margin-left: .65em; }
  .pathItem:hover .caption .title { letter-spacing: .375em; margin-left: .375em; }
}
@media only screen
and (max-width: 1300px) {
  .grid_w_4 .tile { width: 50%; }
  
  .pathItem .spacer_1x1 { display: none; }
  .pathItem .spacer_2x1 { display: block; }
  .pathItem .caption .title { letter-spacing: 1em; margin-left: 1em; }
  .pathItem:hover .caption .title { letter-spacing: .5em; margin-left: .5em; }
}
@media only screen
and (max-width: 800px) {
  .pathItem .caption .title { letter-spacing: .65em; margin-left: .65em; }
  .pathItem:hover .caption .title { letter-spacing: .375em; margin-left: .375em; }
}
@media only screen
and (max-width: 590px) {
  .grid_w_4 .tile { float: none; width: auto; }
  
  .pathItem .caption .title { letter-spacing: 1em; margin-left: 1em; }
  .pathItem:hover .caption .title { letter-spacing: .5em; margin-left: .5em; }
}

@media only screen
and (max-width: 1168px) {
  .timelinePoi .caption { width: 30em; }
}
@media only screen
and (max-width: 1082px) {
  .timelinePoi .caption { width: 25em; }
}
@media only screen
and (max-width: 866px) {
  .timelinePoi .caption { width: 20em; }
}
@media only screen
and (max-width: 668px) {
  .timelineLine { left: 10%; }
  .timelinePoi { left: 10%; }
  .timelinePoi.rightAlign .caption { right: auto; left: 98%; text-align: left; }
  .timelinePoi.rightAlign.active .caption { margin-right: 0; margin-left: 1em; }
  .timelinePoi.rightAlign .caption .body { text-align: left; }
  .timelinePoi .caption { width: 35em; }
  .timelinePoi.rightAlign .time { right: auto; left: 98%; margin-right: 0; margin-left: 0; text-align: left; padding-left: 0; padding-right: .5em; }
  .timelinePoi.rightAlign.active .time { margin-right: 0; margin-left: 1em; }
}
@media only screen
and (max-width: 608px) {
  .timelinePoi .caption { width: 30em; }
}
@media only screen
and (max-width: 520px) {
  .timelinePoi .caption { width: 25em; }
}
@media only screen
and (max-width: 430px) {
  .timelinePoi .caption { width: 20em; }
}
@media only screen
and (max-width: 339px) {
  .timelinePoi .caption { width: 19em; }
}
@media only screen
and (max-width: 310px) {
  .timelinePoi .caption { width: 17em; }
}

@media only screen
and (max-width: 1430px) {
  .homeArea .tagline, .homeArea .subTagline { right: 2.5%; }
}
@media only screen
and (max-width: 1323px) {
  .homeArea .tagline { font-size: 2.5em; }
}
@media only screen
and (max-width: 1187px) {
  .homeArea .subTagline { width: 38%; }
}
@media only screen
and (max-width: 1070px) {
  .homeArea .tagline { font-size: 2em; }
  .homeArea .subTagline { font-size: 1.2em; }
}
@media only screen
and (max-width: 794px) {
  .homeArea .tagline { letter-spacing: .125em; }
}
@media only screen
and (max-width: 654px) {
  .homeArea .tagline { letter-spacing: 0; }
}
@media only screen
and (max-width: 524px) {
  .homeArea .tagline { font-size: 1.75em; }
  .homeArea .subTagline { font-size: 1.1em; }
}
@media only screen
and (max-width: 458px) {
  .homeArea .tagline:after { width: 14em; height: 14em; top: -1em; }
  .homeArea .subTagline { top: 33%; bottom: auto; margin-top: 4em; width: 70%; color: #fff;
    text-shadow: 0 0 1em rgba(0,0,0,.5);
  }
}
@media only screen
and (max-width: 524px) {
  .homeArea .tagline { font-size: 1.75em; }
  .homeArea .subTagline { font-size: 1.1em; }
}

@media only screen
and (max-width: 1024px) {
  .sectionTitle { font-size: 2.5em; }
  .simpleSection .title, .pathBody .title { font-size: 2.25em; }
  .sectionTitle {
    -moz-background-size: 175%;
    -webkit-background-size: 175%;
    -ms-background-size: 175%;
    -o-background-size: 175%;
    background-size: 175%;  
  }
}
@media only screen
and (max-width: 610px) {
  .sectionTitle { font-size: 2em; }
  .simpleSection .title, .pathBody .title { font-size: 1.8em; }
}
@media only screen
and (max-width: 1024px) {
  .theWorld .img { display: block; width: 100%; }
  .theWorld video { display: none; }
  .theWorld .poi .caption .body { display: none; }
  .nomadSettlementsPoi .caption { margin-top: -.6em; }
  .outbackPoi .caption { margin-top: -.6em; }
}
.formCnt { max-width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen
and (max-width: 822px) {
  .gameFeatures ul li { float: none; width: auto; height: 6em; line-height: 6em; }
  .gameFeatures ul li:before { font-size: 3em; }
  .gameFeatures ul li span { margin-left: 7em; }
  
  .introTxt { font-size: 1.2em; } 
}
@media only screen
and (max-width: 425px) {
  .gameFeatures ul li { text-align: center; height: auto; }
  .gameFeatures ul li:before { float: none; display: block; margin: 0 auto; }
  .gameFeatures ul li span { margin: .5em 0 0 0; display: block; } 
}

@media screen and (max-width: 1000px), screen and (max-height: 500px) {
  .pathHead { height: 400px; }
  .pathHead .character { margin-left: -224px; left: 90%; }
  .pathHead .character.leftAlign { left: 20%; }
  /*.harmonyPage .pathHead .character, .salvationPage .pathHead .character { left: 20%; }*/
}
@media screen and (max-width: 590px), screen and (max-height: 350px) {
  .pathHead { height: 350px; }
  .pathHead .character { margin-left: -191px; left: 90%; }
  .pathHead .character.leftAlign { left: 20%; }
  /*.harmonyPage .pathHead .character, .salvationPage .pathHead .character { left: 20%; }*/
}
@media only screen
and (max-width: 1170px) {
  .pathHead .caption { font-size: 1.8em; }
  .pathHead .caption .title { letter-spacing: .35em; }
  @keyframes pathTitleFadeIn {
    0% { letter-spacing: 1.5em; }
    100% { letter-spacing: .35em; }
  }
}
@media only screen
and (max-width: 950px) {
  .pathHead .caption { font-size: 1.6em; }
  .pathHead .caption .title { letter-spacing: .25em; }
  @keyframes pathTitleFadeIn {
    0% { letter-spacing: 1em; }
    100% { letter-spacing: .25em; }
  }
}
@media only screen
and (max-width: 800px) {
  .pathHead .caption { font-size: 1.4em; }
  .pathHead .caption .title { letter-spacing: .25em; }
  @keyframes pathTitleFadeIn {
    0% { letter-spacing: .75em; }
    100% { letter-spacing: .25em; }
  }
}
@media only screen
and (max-width: 600px) {
  .pathHead .caption { font-size: 1.2em; }
  .pathHead .caption .title { letter-spacing: .15em; }
  @keyframes pathTitleFadeIn {
    0% { letter-spacing: .35em; }
    100% { letter-spacing: .15em; }
  }
}
.pathBody .title { max-width: 80%; }
@media only screen
and (max-width: 1024px) {
  .pathInfo .badge { max-width: 8em; }
}
@media only screen
and (max-width: 850px) {
  .pathInfo .badge { max-width: 7em; }
}
@media only screen
and (max-width: 628px) {
  .pathInfo label { display: block; }
}
@media only screen
and (max-width: 450px) {
  .pathInfo { display: block; }
  .pathInfoInner { display: block; }
  .pathInfo .badgeArea { display: block; text-align: center; padding-bottom: 0; }
  .pathInfo .infoSegments { display: block; text-align: center; }
  .pathInfo label { width: auto; text-align: left; }
}
@media only screen
and (max-width: 1200px) {
  .pathBody .chapter { padding: 3em 0;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;  
  }
}
@media screen and (max-width: 920px), screen and (max-height: 400px) {
  .pathBody .chapter { padding: 3em 0; max-width: 40em; width: 90%; margin: 0 auto;
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;  
  } 
  .pathBody .chapter img { float: none; width: 70%; max-width: 300px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }
}

@media only screen
and (max-width: 800px) {
  .pathInfoNav .modelTxt { display: none; }
}
@media only screen
and (max-width: 770px) {
  .pathInfoNav { margin-left: -2.5%; margin-right: -2.5%; }
  .pathInfoNav li a { font-size: 1em; }
}
@media only screen
and (max-width: 657px) {
  .pathInfoNav li a { font-size: .9em; padding: .5em; }
}
@media only screen
and (max-width: 452px) {
  .pathInfoNav li a { height: 4.8em; font-size: .8em; }
}
@media only screen
and (max-width: 200px) {
  .pathInfoNav label i { display: none; }
}