body {
    background-color: #efefef;
    color: #333;
    font-family: Calibri,Arial,Helvetica,sans-serif;
    font-size: 16px;
    margin: auto;
    max-width: 100% !important;
}


h1 {
    border-bottom: 1px solid #e4e6d7;
    clear: both;
    color: #333;
    font-size: 1.75rem;
    font-weight: normal;
    letter-spacing: -0.3px;
    line-height: 110%;
    margin-bottom: 20px;
    padding-bottom: 15px;
    width: 100%;
}


/*------------------------------------*\
    Top Bar
\*------------------------------------*/

#topRow {
	background-color: #666;
	display: block;
	height: 15px;
}



/*------------------------------------*\
    HEADER.SCSS
\*------------------------------------*/

.header2 {
  padding: 0 0 0.5rem 0;
  border-bottom: 1px solid #e4e6d7;
  background-color: #fff;
   }
   
/*------------------------------------*\
    LOGO.SCSS
\*------------------------------------*/
.logo2 {
  display: block;
  margin: 0 auto;
  max-width: 50%;
  min-width: 300px; } 
   

/*------------------------------------*\
    CONTENT.SCSS
\*------------------------------------*/
.content {
  padding: 24px;
  padding: 0 3rem 1.5rem;
  overflow: hidden;
  background: #fff;
  max-width: 960px;
  margin: 0 auto; }


/*------------------------------------*\
    WRAP.SCSS
\*------------------------------------*/
.wrap {
  margin: 0 auto;
  padding:  0;
  max-width: 960px;
  background-color: #FFF;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }


/*------------------------------------*\
    HEADING.SCSS
\*------------------------------------*/
.heading {
  font-size: 1.75rem;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase; }

.heading--sub {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1; }

/*------------------------------------*\
    HEADING-NAV.SCSS
\*------------------------------------*/
.heading-nav {
  margin: 0;
  clear: both; }
.heading-nav > li {
  padding: 12px;
  padding: 0.75rem; }
.heading-nav > li > a {
  padding-bottom: 2px;
  padding-bottom: 0.125rem;
  border-bottom: 3px solid transparent;
  color: #666;
  text-decoration: none;
  text-transform: uppercase; }
.heading-nav > li > a:hover, .heading-nav > li > a.current {
  color: #7a8237;
  border-bottom: 3px solid #7a8237; }

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/**
 * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
 * When used on an `ol` or `ul`, this class throws the list into horizontal mode
 * e.g.:
 *
   <ul class=nav>
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Demo: jsfiddle.net/inuitcss/Vnph4
 *
 */
.nav {
  list-style: none;
  margin-left: 0; }
.nav > li, .nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1; }

/**
 * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
 *
   <ul class="nav  nav--stacked">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--stacked > li {
  display: list-item; }
.nav--stacked > li > a {
  display: block; }

/**
 * `.nav--banner` extends `.nav` and centres the list, e.g.:
 *
   <ul class="nav  nav--banner">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--banner {
  text-align: center; }

/**
 * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
 *
   <ul class="nav  nav--block">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 */
.nav--block {
  line-height: 1;
  /**
   * Remove whitespace caused by `inline-block`.
   */
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
  white-space: nowrap; }
.nav--block > li {
  letter-spacing: normal;
  word-spacing: normal; }
.nav--block > li > a {
  padding: 12px; }

/**
 * Force a nav to occupy 100% of the available width of its parent. Extends
 * `.nav`, e.g.:
 *
   <ul class="nav  nav--fit">
       <li><a href=#>Home</a></li>
       <li><a href=#>About</a></li>
       <li><a href=#>Portfolio</a></li>
       <li><a href=#>Contact</a></li>
   </ul>
 *
 * Thanks to @pimpl for this idea!
 */
.nav--fit {
  display: table;
  width: 100%; }
.nav--fit > li {
  display: table-cell; }
.nav--fit > li > a {
  display: block; }

/**
 * Make a list of keywords. Extends `.nav`, e.g.:
 *
   `<ul class="nav  nav--keywords>`
 *
 */
.nav--keywords > li:after {
  content: "\002C" "\00A0"; }
.nav--keywords > li:last-child:after {
  display: none; }


/*------------------------------------*\
    Video Container.SCSS
\*------------------------------------*/
.video-container{
	max-width: 640px;
	margin: 0 auto;
}

/*------------------------------------*\
    Video On Demand Container.SCSS
\*------------------------------------*/
.vod-container{
	max-width: 640px;
	min-width: 640px;
	height: 100%;
	margin: 0 auto;
}


/*------------------------------------*\
    iFrame Wrap Container.SCSS
\*------------------------------------*/
.myWrapper {
  position: relative;
  padding-bottom: 64%;
  padding-top: 20px;
  height: 0;
}
.myWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*------------------------------------*\
    Border Line.SCSS
\*------------------------------------*/
.border{
	max-width: 100%;
	border-bottom: solid 1px #e4e6d7;
	margin: 10px auto;
	padding-top: 10px;
	clear: both;
}


/*------------------------------------*\
    PLAYER.SCSS
\*------------------------------------*/
.player {
  max-width: 640px !important;
  margin: 0 auto; }
  
.player-playlist {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  max-width: 940px; }

#player_wrapper {
  float: left; }

.player__aside {
  margin: 0 auto;
  padding: 12px 24px;
  float: left;
  width: 95%;
}

.player__aside-title {
  margin-bottom: 6px;
  font-size: 20px;
  font-size: 1.25em;
}

.player__aside-info {
  margin-bottom: 6px;
  padding: 6px;
  font-size: 14px;
}

.player__aside-info a {
	color: #fe9b27;
}

.player__aside-info a:hover {
	text-decoration: underline;
}

.player-test {
	font-size: larger;
  }
  
.player-test a{
	font-weight: bold;
	color: orange;
	
  }


/* ==========================================================================
/* Download Instruction
/* ======================================================================= */
#download-guide{
	margin: 0 auto;
}

#download-guide img{
	float: left;
	padding-right: 10px;
}

#download-guide p{
	vertical-align: middle;
	text-decoration: none;
	margin: 0;
	padding: 17px;
}

#download-guide a{
	display: block;
	border: solid 1px #80cb47;
	text-decoration: none;
	color: #80cb47;
	background-color: #fff;
	padding: 5px;
}

#download-guide a:hover{
	background: #e6f5dd;
}

/* ==========================================================================
/* Mobile Devices Instruction
/* ======================================================================= */
#mobile-guide{
	margin: 0.5rem auto 0;
}

#mobile-guide img{
	float: left;
	padding-right: 10px;
}

#mobile-guide p{
	vertical-align: middle;
	text-decoration: none;
	margin: 0;
	padding: 12px;
	font-size: small;
}

#mobile-guide a{
	display: block;
	border: solid 1px #2acace;
	text-decoration: none;
	color: #2acace;
	background-color: #fff;
	padding: 5px;
}

#mobile-guide a:hover{
	background: #c4f0f5;
}



/*------------------------------------*\
    BLOCK.SCSS
\*------------------------------------*/
.block {
  margin-bottom: 24px !important;
  margin-bottom: 1.5rem !important; }

.block--half {
  margin-bottom: 12px !important;
  margin-bottom: 0.75rem !important; }

.block--none {
  margin-bottom: 0 !important; }



/*------------------------------------*\
    DOWNLOAD.SCSS
\*------------------------------------*/

.download {
  margin: 0 auto;
  padding: 24px;
  padding: 1.5rem;
  width: 940px;
  color: #333;
  background: #eee;
}

.download > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.download > ul > li > a {
  color: #7a8237;
}

.download__note {
  margin: 0;
}


/*------------------------------------*\
    FOOTER.SCSS
\*------------------------------------*/
.footer {
  padding-top: 24px;
  padding-top: 1.5rem;
  overflow: hidden;
  clear: both;
  border-top: 1px solid #333;
  color: #fff;
  background: #222;
  box-shadow: inset 0 8px 8px -8px black; }

.footer__disclaimer {
  margin: 0 auto 24px;
  margin: 0 auto 1.5rem;
  padding: 0 24px;
  max-width: 960px;
  color: #bbb;
  text-align: center; }

.footer__logo {
  display: block;
  margin: 0 auto 12px;
  margin: 0 auto 0.75rem;
  max-width: 15%;
  min-width: 150px;
  }

.footer__copyright {
  display: block;
  margin: 0;
  padding: 8px 0;
  padding: 0.5rem 0;
  overflow: hidden;
  color: #999;
  text-align: center;
  background: #111; }