/*
  We include some minimal custom CSS to make the playlist UI look good
  in this context.
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
  line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Customer css*/
body {
  font-family: 'Raleway', sans-serif;
  background-color: #1c1c1c;
  height: 100%;
}
h1, h2, h3, h4 {
	font-family: 'Raleway', sans-serif;
}
#nav {
	background-color: transparent;
	width: 100%;
	position: absolute;
	top: 0px;
}
#nav.affix {
	background-color: #414141;
	position: fixed;
	top: 0;
	z-index: 10;
	-webkit-transition: all .6s ease-in-out;
}
.navbar-nav {
	margin: 0px;
}
.navbar {
	margin-bottom: 0px;
	border: 0px;
	min-height: 58px;
}
/* customize nav style */
.navbar-custom {
	font-weight: 900;
	text-transform: uppercase;
	opacity: 0.98;
}
.navbar-custom .navbar-nav > li > a {
  width: 200px;
  max-width: 300px;
	color: #fff;
  float: right;
  font-size: 1.1rem;
	text-shadow:
  	/* Outline */
 	-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
}
.navbar-custom .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a {
	border-bottom: solid 8px #379326;
	background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
	color: #fff;
	background-color: transparent;
}
.navbar-custom .dropdown-menu {
	right: 0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
	border-top-color: #999;
	border-bottom-color: #999;
}
.navbar-collapse.in { 
	overflow-y: visible;
}
.navbar-toggle {
	outline: 0;
  background-color: #379326;
}
.background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/rh-video-player/RH-player-bk2-1920x1280.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #1c1c1c;
}
.player-container {
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	width: 80%; /*test 60%*/
	height: auto;
	max-width: 1200px;
	margin: 0 auto;
	/*padding: 0px 0px 0px 0px;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.main-preview-player {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
.main-preview-player video {
	 background-color: transparent;
}
.vjs-poster {
 background-color: transparent; 
} 
.video-js,
.playlist-container {
  position: relative;
  min-width: 100px;
  min-height: 150px;
  width: 100%;
  height: 0;
  background-color: transparent;
}
.player-container .video-js {
  font-size: 1em !important;
}
.vjs-chromecast-button .vjs-icon-placeholder {
  width: 28px !important;
  height: 28px !important;
}
.vjs-airplay-button .vjs-icon-placeholder {
  width: 28px !important;
  height: 28px !important;
}
.video-js {
  flex: 3 1 55%;
	 background-color: rgba(0, 0, 0, 0.4);
}
.vjs-no-js {
  background-color: #ccc;
}
 .vjs-menu li {
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: none;
}
.vjs-chapters-button .vjs-menu .vjs-menu-content {
	width: 400px;
	min-width: 350px;
	border: 2px solid #379326;
	left: 100%;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
}
.vjs-chapters-button .vjs-menu li {
	text-align: left;
}
.vjs-playlist .vjs-playlist-title-container { 
    padding: 0.5rem 0rem;
}  
.playlist-container {
  flex: 1 1 45%; 
  height: auto;
}
.vjs-playlist {
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 140px;
  min-width: 249px; 
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px;
  width: 100%;
  font-size: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.vjs-playlist img {
	height: auto;
	max-height: 169px; 
	width: 50%;
	max-width: 463px; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.vjs-playlist-description {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: auto;
	min-height: 100%;
	display: block;
	text-align: left;
	padding: .5rem !important;
  font-size: 16px !important;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
.video-js.vjs-fluid-pd {
  width: 100%;
  max-width: 100%;
  height: auto;  
 }
.video-js.vjs-fluid-pd  {
	padding-top: 42%;	
 }
.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload {
  cursor: pointer;
  display: block;
  font-family: FontAwesome;
}
.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:before {
  display: block;
  position: relative;
  top: 4px;
  content: '\f0ed' !important;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 1.5em;
}
.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:after {
  display: block;
  position: relative;
  content: ' ';
  width: 4px;
  height: 5px;
  background-color: transparent;
  top: -11px;
  left: calc(50% - 2px)
}
  
 /* MEDIA QUERIES */

@media only screen and (max-width: 600px) {
.video-js .vjs-subs-caps-button { display: none !important; }
.video-js .vjs-quality-selector { display: none !important; }
.video-js .vjs-descriptions-button { display: none !important; }
.video-js .vjs-fullscreen-control { display: none !important; }
.vjs-chapters-button .vjs-menu .vjs-menu-content {
	width: 300px;
	min-width: 250px;
}
.player-container {
	width: 95% !important;
}
}
  
@media (max-width: 1000px){ /*952*/
.playlist-container {
	margin-top: 9px;
	min-height: 250px;
	height: 300px;
  flex: 1 1 55%;
	border: 1px solid transparent;
}
.video-js .vjs-control {
  min-width: 2em !important;
  width: 3em !important;
}
.vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
  width: 6em !important;
}
.video-js.vjs-fluid-pd  {
	padding-top: 56.25%;  
 }
 .main-preview-player {
	margin-bottom: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.vjs-playlist img  {
	margin-top: 10px;
	margin-bottom: 10px;
}
.vjs-playlist-description {
	padding: 5px;
}
.vjs-playlist {
  padding: 0;
}
.vjs-playlist .vjs-playlist-name {
  padding: 0;
}
.player-container {
	width: 95%; 
}
}

/* Small devices (tablets, up to 767px) */
@media (max-width: 767px) {
.navbar-collapse {
	background-color: #2e2e2e;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
header {
	margin-bottom: 0px;
}
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */ 
header video {
	display: none;
}
.section1-img {
	background: url("../img/mobile.jpg") no-repeat center center;
  -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}  
}

@media (min-width: 767px) {
.navbar-nav.nav-justified > li {
	float: none;
}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#nav {
	position: static;
	top: -32px;
}
header h1 {
	font-size: 5rem !important;
}
.navbar-collapse {
	background-color: transparent;
}
.section-x h1 {
	font-size: 5rem;
}
.sticky-container {
	padding: 0px;
	margin: 0px;
	position: fixed;
	right: -70px; 
	top: 170px; 
	width: 150px; 
	z-index: 1100;
	display: none;
}
.sticky {
	display: block;
}
.sticky li {
	list-style-type: none;
	background-color: transparent;
	color: #efefef;
	height: 32px; /*57*/
	padding: 0px;
	margin: 0px 0px 1px 0px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	cursor: pointer;
}
.sticky li:hover {
	margin-left: -100px;
	background-color: #ccc;
}
.sticky li img {
	float: left; 
	margin: 0px 0px; 
	margin-right: 18px;
}
.sticky li p {
	padding-top: 5px;
	margin: 0px;
	line-height: 11px;
	font-size: 11px;
	font-weight: 600;
}
.sticky li p a {
	text-decoration: none;
	color: #4d459f;
}
.sticky li p a:hover {
	text-decoration: underline;
}
}

@media (min-width: 992px) {
header h1 {
	font-size: 6rem !important;
}
.section-x h1 {
	font-size: 6rem;
}
}

@media (min-width: 1200px) {
header h1 {
	font-size: 8rem !important;
}
.section-x h1 {
	font-size: 8rem;
}
}

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	header {
		height: 672px;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	header {
		height: 928px;
	}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 568px;
	}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 480px;
	}
}