/*************/
/* Variables */
/************/
.clear {
  clear: both;
}

/*
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), 
  url(http://themes.googleusercontent.com/static/fonts/raleway/v6/xkvoNo9fC8O2RDydKj12b73hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
*/
body {
  font-family: "Raleway", "arial", "helvetica", sans-serif;
  text-transform: uppercase;
  overflow: hidden;
  height: 100%;
  /* border: 0 solid #000; */
}
body a {
  text-decoration: none;
}
body li {
  list-style-type: none;
}

.pageElemDisabled {
  display: none;
}

#nonFooterBody {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#pageContentBack {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-color: #000;
}

#pageFront {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}
#pageFront.whiteSetting {
  background-color: #fff;
  bottom: 0;
}

.whitePageElem .splashReelContainer {
  position: absolute;
  top: 25px;
  left: 61px;
}

.splashReelContainer {
  cursor: pointer;
  height: 80px;
}
.splashReelContainer div {
  position: absolute;
  top: 0;
  left: 0;
}
.splashReelContainer .splashTextContainer {
  z-index: 2;
    position: relative;

}

.splashReelContainer .splashTextContainer h3 {
    position: absolute;
    top: 18px;
    /* left: -20px; */
    /* width: 100%; */
    width: 320px;
    padding-right: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    /* letter-spacing: 2.5px; */
    line-height: 1.1;
    padding-right: 55px;
    padding-left: 0;
    color: white;
}

.splashReelContainer .splashWheelContainer {
  z-index: 3;
  width: 70px;
  height: 70px;
  -webkit-animation-name: 'spinAnim';
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 1000;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 35 35px;
  -moz-transform-origin: 35 35px;
  -transform-origin: 35 35px;
}
.splashReelContainer .splashPlayTriangleContainer {
  z-index: 5;
}

@-webkit-keyframes 'spinAnim' {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

#pageContentFront {
  position: relative;
  width: 100%;
  overflow: auto;
}
#pageContentFront.whiteSetting {
  background-image: url("../images/oneworld_watermark.gif");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 25px;
  padding-top: 59px;
}
#pageContentFront.whiteSetting a {
  color: #111;
}

/* Bio page */
#pageContentFront.whiteSetting .fullWidthPanel {

  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  padding-left: 30px;
  padding-right: 30px;
  /*position: absolute;*/
  /*top: 123px;*/
  /*left: 38px;*/
  max-width: 1250px;

  font-size: 14px;
  text-transform: none;
}

.clearFloat {
  clear: both;
}

#pageContentFront.whiteSetting .fullWidthPanel .bioImage {
    margin-bottom: 30px;
    margin-top: 20px;
}

#pageContentFront.whiteSetting .fullWidthPanel img {
    max-width: 100%;
}

.bioPage .fullWidthPanel h3 {
  text-transform: uppercase;
  padding-bottom: 20px;
}

#pageContentFront.whiteSetting .fullWidthPanel .bioText {
/*    column-count: 2;
    column-gap: 40px;
    */
    line-height: 180%;
}

#pageContentFront.whiteSetting .fullWidthPanel .bioText .leftTextCol {
    float: left;
    width: 48%;
    margin: 0;
    /*height: 100%; */
}

#pageContentFront.whiteSetting .fullWidthPanel .bioText .rightTextCol {
    float: right;
    width: 48%;
    margin: 0;
    /* height: 100%; */
}


#pageContentFront.whiteSetting .fullWidthPanel .bioText p {
    padding-bottom: 20px;
}

#pageContentFront.whiteSetting .leftPanel {
  position: absolute;
  top: 123px;
  left: 38px;
  width: 352px;
}
#pageContentFront.whiteSetting .leftPanel h2 {
  margin-left: 56px;
  line-height: 180%;
}
#pageContentFront.whiteSetting .rightPanel {
  font-size: 14px;
  text-transform: none;
  margin-left: 450px;
  padding-right: 38px;
  max-width: 800px;
}
#pageContentFront.whiteSetting .aboutusPage .rightPanel {
  font-size: 17px;
}

#pageContentFront.whiteSetting .rightPanel p,
#pageContentFront.whiteSetting .rightPanel h1,
#pageContentFront.whiteSetting .rightPanel h2,
#pageContentFront.whiteSetting .rightPanel h3,
#pageContentFront.whiteSetting .rightPanel h4 {
  padding-bottom: 20px;
  line-height: 180%;
}

.noscriptContent, .oldBrowser.errorText {
  position: absolute;
  font-family: "arial", "helvetica", sans-serif;
  font-size: 18px;
  top: 200px;
  left: 50px;
  right: 50px;
  z-index: 20;
  color: #000;
  text-transform: none;
  line-height: 180%;
}

.hideUntilJavaScript, .hideUntilGoodBrowser {
  display: none;
}

.backImage {
  z-index: -2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background-color: #000;
  overflow: hidden;
}

.backVideo {
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background-color: #000;
  overflow: hidden;

  visibility: hidden;
}

.homePage .categoryPanel {
  color: #fff;
  overflow: hidden;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 46px;
  width: 335px;

  display: none;    /* initially hidden.  will be visible after boot */
}
.homePage .categoryPanel .content {
  position: relative;
  width: 100%;
}
.homePage .categoryPanel .content .backPanel {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.4;
}
.homePage .categoryPanel .content .splashWrapper {
  width: 100%;
  padding-top: 135px;
  padding-left: 11px;
  height: 100px;
  border-bottom: 1px solid #c00;
}
.homePage .categoryPanel .content .splashWrapper.small {
  padding-top: 120px;
  height: 85px;
}
.homePage .categoryPanel .content .splashWrapper.medium {
  padding-top: 125px;
  height: 90px;
}
.homePage .categoryPanel .content .splashWrapper.large {
  padding-top: 130px;
  height: 95px;
}
.homePage .categoryPanel .content .splashWrapper.huge {
  padding-top: 135px;
  height: 100px;
}
.homePage .categoryPanel .content .splashWrapper .splashReelContainer {
  position: relative;
}
.homePage .categoryPanel .content ul.categoryList {
  font-weight: 800;
  font-size: 18px;
}
.homePage .categoryPanel .content ul.categoryList.small {
  font-weight: 700;
  font-size: 14px;
}
.homePage .categoryPanel .content ul.categoryList.medium {
  font-weight: 800;
  font-size: 15px;
}
.homePage .categoryPanel .content ul.categoryList.large {
  font-weight: 800;
  font-size: 16px;
}
.homePage .categoryPanel .content ul.categoryList.huge {
  font-weight: 800;
  font-size: 18px;
}
.homePage .categoryPanel .content ul.categoryList li {
  padding: 20px 18px 20px 23px;
  border-bottom: 1px solid #c00;
  cursor: pointer;
}
.homePage .categoryPanel .content ul.categoryList li.small {
  padding: 12px 18px 12px 23px;
}
.homePage .categoryPanel .content ul.categoryList li.medium {
  padding: 14px 18px 14px 23px;
}
.homePage .categoryPanel .content ul.categoryList li.large {
  padding: 17px 18px 17px 23px;
}
.homePage .categoryPanel .content ul.categoryList li.huge {
  padding: 20px 18px 20px 23px;
}
.homePage .categoryPanel .content ul.categoryList li:last-child {
  border-bottom: none;
}
.homePage .categoryPanel .content ul.categoryList li.hoverHighlight {
  color: #e00;
}
.homePage .categoryPanel .content ul.categoryList li.hoverHighlight .playArrow div.red {
  display: block !important;
}
.homePage .categoryPanel .content ul.categoryList li.hoverHighlight .playArrow.pushed div.yellow {
  display: block !important;
}
.homePage .categoryPanel .content ul.categoryList li.current {
  color: #f00 !important;
}
.homePage .categoryPanel .content ul.categoryList li.current .playArrow div.red {
  display: block !important;
}
.homePage .categoryPanel .content ul.categoryList li .label {
  width: 225px;
  display: inline-block;
}
.homePage .categoryPanel .content ul.categoryList li .playArrow {
  text-align: right;
  width: 50px;
  display: inline-block;
  float: right;
  margin-top: -3px;
}
.homePage .categoryPanel .content ul.categoryList li .playArrow div {
  position: absolute;
  width: 50px;
}
.homePage .categoryPanel .content ul.categoryList li .playArrow div.white {
  z-index: 1;
}
.homePage .categoryPanel .content ul.categoryList li .playArrow div.red {
  z-index: 2;
  display: none;
}
.homePage .categoryPanel .content ul.categoryList li .playArrow div.yellow {
  z-index: 3;
  display: none;
}
.homePage .contentFooterContainer {
  height: 126px;
  z-index: 3;

  display: none;    /* not visible at boot, but will fade in when thumbs made visible */
}
.homePage .contentFooterContainer .infoStrip {
  height: 12px;
}

.arsenalPage .contentFooterContainer {
  height: 143px;
}
.arsenalPage .contentFooterContainer .infoStrip {
  height: 29px;
  font-weight: 800;
}
.arsenalPage .contentFooterContainer .infoStrip ul {
  height: 29px;
}

#logoContainer {
  position: absolute;
  top: 25px;
  left: 46px;
  width: 335px;
  height: 115px;
  z-index: 15;
  color: #fff;
  text-align: center;
  font-size: 26px;
}

#headerContainer {
  position: relative;
  min-height: 115px;
  width: 100%;
  z-index: 2;
}
#headerContainer.darkSetting {
  color: #fff;
}
#headerContainer.whiteSetting {
  color: #000;
  -moz-box-shadow: 0 0px 10px 30px rgba(0, 0, 0, 0.02), 0 40px 90px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0px 10px 30px rgba(0, 0, 0, 0.02), 0 40px 90px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0px 10px 30px rgba(0, 0, 0, 0.02), 0 40px 90px 0 rgba(0, 0, 0, 0.1);
}
#headerContainer .backPanel {
  z-index: 1;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}
#headerContainer .backPanel.darkSetting {
  background-color: #000;
  opacity: 0.4; /* was 0.6 */
}
#headerContainer .backPanel.whiteSetting {
  background-color: #fff;
  opacity: 1.0;
}
#headerContainer .siteInfoNav {
  position: relative;
  z-index: 2;
  padding-right: 50px;
  margin-top: 24px;
  padding-bottom: 10px;
  float: right;
  margin-left: 401px;
}
#headerContainer .siteInfoNav .topStrip {
  border-bottom: 2px solid #c00;
  height: 46px;
}
#headerContainer .siteInfoNav .topStrip div.mikeCameraMan {
  padding-top: 20px;
  float: left;
}
#headerContainer .siteInfoNav .topStrip div.mikeCameraMan p {
  height: 25px;
  padding-top: 5px;
  float: left;
  height: 21px;
}
#headerContainer .siteInfoNav .topStrip div.mikeCameraMan p.mikeN {
  border-right: 2px solid #c00;
  padding-right: 15px;
  /* padding: 0 5px 0 0; */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
}
#headerContainer .siteInfoNav .topStrip div.mikeCameraMan p.cameraMan {
  padding-top: 10px;
  padding-left: 8px;
  font-size: 9px;
  font-weight: 500;
}
#headerContainer .siteInfoNav .topStrip div.socialIcons {
  padding: 0;
  float: right;
  height: 36px;
}
#headerContainer .siteInfoNav .topStrip div.socialIcons ul li {
  margin-left: 7px;
  width: 33px;
  display: inline-block;
}
#headerContainer .siteInfoNav ul.siteNav {
  clear: both;
  padding: 0;
  margin: 0;
  text-align: left;
}
#headerContainer .siteInfoNav ul.siteNav.darkSetting li a {
  color: #fff;
}
#headerContainer .siteInfoNav ul.siteNav.whiteSetting li a {
  color: #000;
}
#headerContainer .siteInfoNav ul.siteNav li {
  font-size: 18px;
  font-weight: 200;
  display: inline-block;
  padding-top: 10px;
  margin-right: 13px;
}
#headerContainer .siteInfoNav ul.siteNav li:last-child {
  margin-right: 0;
}
#headerContainer .siteInfoNav ul.siteNav li a.currentPage {
  color: #f00;
  font-weight: 700;
  cursor: default;
}
#headerContainer .siteInfoNav ul.siteNav li a.hoverHighlight {
  color: #f00;
}

.infoStrip {
  margin: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
  padding: 0;
}
.infoStrip ul {
  display: block;
  margin-right: 0;
  margin-left: 5px;
  padding: 0;
  float: left;
}
.infoStrip ul li {
  cursor: pointer;
  height: 100%;
  display: inline-block;
  border-right: 1px solid #444;
  padding-top: 3px;
  padding-left: 10px;
  padding-right: 15px;
  vertical-align: text-top;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*
   Introduced in IE 10.
   See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
  */
  -ms-user-select: none;
  user-select: none;
}
.infoStrip ul li.disabled {
  color: #999;
}
.infoStrip ul li:last-child {
  border-right: none;
}
.infoStrip .infoText {
  float: left;
  padding-top: 6px;
  padding-left: 30px;
}
.infoStrip .infoText span.title {
  color: #f00;
  margin-right: 10px;
}
.infoStrip .infoText span.reelDesc {
  font-size: 11px;
}

.contentFooterContainer {
  margin: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
}

.horizThumbnails {
  background-color: #000;
  width: 100%;
  height: 114px;
  overflow-x: hidden;
  overflow-y: hidden;
  /* maybe get rid of containing div. */
}
.horizThumbnails ul {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}
.horizThumbnails ul li {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 220px;
  height: 100%;
  cursor: pointer;
  border-left: 1px solid #ccc;
  text-align: center;
}
.horizThumbnails ul li:first-child {
  border-left: 0 solid #000;
  border-left: none;
}
.horizThumbnails ul li .thumbLabel {
  z-index: 20;
  position: absolute;
  font-size: 12px;
  bottom: 8px;
  left: 10px;
  right: 10px;
  text-align: center;
  vertical-align: top;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.2em black, -0.1em -0.1em 0.2em black, 0.1em -0.1em 0.4em black, 0.2em 0.2em 0.4em black;
}
.horizThumbnails ul li .thumbSelectTriangle {
  display: none;
}
.horizThumbnails ul li.selectHighlight .thumbSelectTriangle {
  display: block !important;
  padding: 0;
  margin: 0;
  z-index: 22;
  position: absolute;
  vertical-align: top;
  top: -2px;
  left: 0;
  right: 0;
  text-align: center;
}
.horizThumbnails ul li.selectHighlight .thumbSelectTriangle img {
  text-align: center;
}

#fullscreenButton {
  width: 120px;
  height: 30px;
  text-align: center;
}

/* ColorBox overrides */
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight,
#cboxMiddleLeft, #cboxMiddleRight {
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-color: #000 !important;
}

#colorbox, #cboxWrapper {
  background-color: none !important;
}

#cboxContent, #cboxLoadedContent {
  overflow: visible !important;
  background: none;
  background-color: none;
}

/****************************/

#overlayContainer {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 18;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none;
}

#fullBrowserOverlay {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 18;
    display: none; 
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#fullBrowserOverlay .dimmer {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black; /* maybe should use rgba() */
    opacity: 0.7; 
}

#vimeoContainer {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 500px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    /* display: none; */
    background-color: black;
}

#vimeoVisiblityDiv {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


/***********************************/
/* TODO: JAM 2018/02/20 expriment
 * http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
 * https://blog.synq.fm/html5-video-looping-autoplay-on-ios-and-android
 */

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* z-index: -100; */
    z-index: 1;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(/back_video/blackrect.jpg) no-repeat; 
    /* background: url(/back_video/couple_viewing_laptop.jpg) no-repeat; */
    background-size: cover; 
}