.woah #videoPlayer h1,
.woah #videoPlayer p {
	color: rgb(255,255,255);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.woah #videoPlayer .video-desc {
	margin: 10px 0 20px 40px;
	line-height: 22px;
	text-align: left;
	font-size: 16px;
}

.woah #videoPlayer .video-link {
	margin: 0;
}

.woah #videos a { color: #fff; text-decoration: none;}

.woah #videos:hover a p { color: rgb(36,36,36); }

/* 1 : 1.618 */
/*#videoPlayer h4 { font-size: 1.618em; }
#videoPlayer h3 { font-size: 2.617924em; }
#videoPlayer h2 { font-size: 4.235801em; }
#videoPlayer h1 { font-size: 6.8535261em; }
#videoPlayer p { line-height: 1.618; }*/

/* 1 : 1.118 */
.woah #videoPlayer h4 { font-size: 1.118em; }
.woah #videoPlayer h3 { font-size: 1.249924em; }
.woah #videoPlayer h2 { font-size: 1.397415em; }
.woah #videoPlayer h1 { font-size: 1.5em; }
.woah #videoPlayer p { line-height: 1.118; }

.woah #videoInfo h1 {
	color: rgb(255,255,255);
	margin: 20px 0 0 40px;
}

/* Pattern: Images */
.woah .video-image-fluid {
	display: block;
	margin: 6px auto;
	width: 100%;
}

.woah .page {
	margin: auto;
	overflow: hidden;
	width: 80%;
}

.woah #videoPlayer {
	/* outline: 3px solid rgba(0,0,0,0.4); */
	overflow: hidden;
	width: 100%;
	margin: 3px;
}

.woah #videoPlayer .panel {
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	max-height: 50%;
	position: absolute;
	transition: all 0.5s ease-in;
	width: 100%;
	z-index: 2;
}

.woah .panel > .inner {
	padding: 8px;
	margin: 0 80px;
}

.woah .right {
	float: right; 
	top: 0;
}

.woah .left {
	float: left; 
	width: 60%;
}
	
.woah #videoInfo {
	top: -99em;
}

.woah #videoPlayer .video-url {
	margin: 20px 60px 0 0;
}

.woah .button-cta {
	background-color: rgb(85, 137, 197);
    color: rgb(255, 255, 255);
	transition: all 0.35s ease-in-out 0s;    
}

.woah #relatedVideos {
	bottom: -99em;
}

.woah .panel.active {
	transition: all 0.5s ease-out; 
   display: block;  
}
.woah #videoInfo.panel.active {
	top: 0;
	min-height: 140px;
}

.woah #relatedVideos.panel.active {
	bottom: 0; 
}

.woah #videoPlayer #relatedVideos .item {
	color: rgb(255,255,255);
	overflow: hidden;
	position: relative;
	text-align: center;
	transition: all 0.35s ease-in-out;
	float: left;
	width: 25%;
}

.woah #videoPlayer #relatedVideos .item:hover {
	background: rgba(255,255,255,0.8);
	color: rgb(33,33,33);
}

.woah #videoPlayer #relatedVideos .item:hover .title {
	color: rgb(33,33,33);
}

.woah #videoPlayer #relatedVideos .item img {
	max-height: 100px;
}

/* manual controller bar */

.woah .manual-ctrl {
	background-color: rgba(0,0,0,0.3);
	border: 5px solid rgb(150,150,150);
	border-radius: 50%;
	height: 150px;
	left: 50%;
	margin: -66px 0 0 -75px;
	opacity: 0;
	position: absolute;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
	top: 50%;
	width: 150px;
	z-index: 0;
}
.woah .manual-ctrl.active {
	opacity: 1;
	z-index: 3;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
}

.woah .ctrl-inner {
    border-color: transparent transparent transparent rgba(255,255,255,0.7);
    border-style: solid;
    border-width: 60px 0 60px 80px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
    top: 10%;
    width: 0;
	
}
.woah .manual-ctrl:hover {
	background-color: rgba(0,0,0,1);
	border-color: rgb(90,90,90);
}
.woah .manual-ctrl:hover .ctrl-inner {
	border-color: transparent transparent transparent rgba(255,255,255,1);
}

.woah #videoPlayer #relatedVideos .title a {
	color: rgb(255,255,255);
}

.woah .related {
	 display: none;
}
/* end of WOAH */

/* start of LARGE */
.large #videoPlayer h1,
.large #videoPlayer p {
	color: rgb(255,255,255);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.large #videoPlayer .video-desc {
	margin: 10px 0 20px 40px;
	line-height: 22px;
	text-align: left;
	font-size: 16px;
}

.large #videoPlayer .video-link {
	margin: 0;
}

.large #videos a { color: #fff; text-decoration: none;}

.large #videos:hover a p { color: rgb(36,36,36); }

/* 1 : 1.618 */
/*#videoPlayer h4 { font-size: 1.618em; }
#videoPlayer h3 { font-size: 2.617924em; }
#videoPlayer h2 { font-size: 4.235801em; }
#videoPlayer h1 { font-size: 6.8535261em; }
#videoPlayer p { line-height: 1.618; }*/

/* 1 : 1.118 */
.large #videoPlayer h4 { font-size: 1.118em; }
.large #videoPlayer h3 { font-size: 1.249924em; }
.large #videoPlayer h2 { font-size: 1.397415em; }
.large #videoPlayer h1 { font-size: 1.5em; }
.large #videoPlayer p { line-height: 1.118; }

.large #videoInfo h1 {
	color: rgb(255,255,255);
	margin: 20px 0 0 40px;
}

/* Pattern: Images */
.large .video-image-fluid {
	display: block;
	margin: 6px auto;
	width: 100%;
}

.large .page {
	margin: auto;
	overflow: hidden;
	width: 80%;
}

.large #videoPlayer {
	/* outline: 3px solid rgba(0,0,0,0.4); */
	overflow: hidden;
	width: 100%;
	margin: 3px;
}

.large #videoPlayer .panel {
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	max-height: 50%;
	position: absolute;
	transition: all 0.5s ease-in;
	width: 100%;
	z-index: 2;
}

.large .panel > .inner {
	padding: 8px;
	margin: 0 80px;
}

.large .right {
	float: right; 
	top: 0;
}

.large .left {
	float: left; 
	width: 60%;
}
	
.large #videoInfo {
	top: -99em;
}

.large #videoPlayer .video-url {
	margin: 20px 60px 0 0;
}

.large .button-cta {
	background-color: rgb(85, 137, 197);
  color: rgb(255, 255, 255);
	transition: all 0.35s ease-in-out 0s;     
}

.large #relatedVideos {
	bottom: -99em; 
}

.large .panel.active {
	transition: all 0.5s ease-out;
}
.large #videoInfo.panel.active {
	top: 0;
	min-height: 140px;      
}
 
.large #relatedVideos.panel.active {
	bottom: 0; 
}

.large #videoPlayer #relatedVideos .item {
	color: rgb(255,255,255);
	overflow: hidden;
	position: relative;
	transition: all 0.35s ease-in-out;
	float: left;
	width: 25%;   
}

.large #videoPlayer #relatedVideos .item:hover {
	background: rgba(255,255,255,0.8);
	color: rgb(33,33,33);
}

.large  #videoPlayer #relatedVideos .item:hover .title {
	color: rgb(33,33,33);
}

.large #videoPlayer #relatedVideos .item img {
	max-height: 100px;
}

/* manual controller bar */


.large .manual-ctrl.active {
    opacity: 1;
    z-index: 3;
}
.large .manual-ctrl {
    background-color: rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(150, 150, 150);
    border-radius: 50%;
    height: 100%;
    left: 54%;
    margin: -60px 0 0 -75px;
    opacity: 0;
    position: absolute;
    top: 54%;
    width: 100%;
    z-index: 0;
	max-width: 100px;
	max-height: 100px;
}

.large .ctrl-inner {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    border-style: solid;
    border-width: 34px 0 34px 68px;
    content: "";
    display: block;
    height: 0;
    left: 55%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    top: 16%;
    transition: all 0.35s ease-in-out 0s;
    width: 0;
}
.large .manual-ctrl:hover {
	background-color: rgba(0,0,0,1);
	border-color: rgb(90,90,90);
}
.large .manual-ctrl:hover .ctrl-inner {
	border-color: transparent transparent transparent rgba(255,255,255,1);
}

.large #videoPlayer #relatedVideos .title a {
	color: rgb(255,255,255);
}

.large .related {
	 display: none;
}	

/* end of LARGE */

/* start of MED */

.med #videoPlayer h1,
.med #videoPlayer p {
	color: rgb(255,255,255);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.med #videoPlayer .video-desc {
	margin: 10px 0 20px 40px;
	line-height: 22px;
	text-align: left;
	font-size: 16px;
}

.med #videoPlayer .video-link {
	margin: 0;
}

.med #videos a { color: #fff; text-decoration: none;}

.med #videos:hover a p { color: rgb(36,36,36); }

/* 1 : 1.618 */
/*#videoPlayer h4 { font-size: 1.618em; }
#videoPlayer h3 { font-size: 2.617924em; }
#videoPlayer h2 { font-size: 4.235801em; }
#videoPlayer h1 { font-size: 6.8535261em; }
#videoPlayer p { line-height: 1.618; }*/

/* 1 : 1.118 */
.med #videoPlayer h4 { font-size: 1.118em; }
.med #videoPlayer h3 { font-size: 1.249924em; }
.med #videoPlayer h2 { font-size: 1.397415em; }
.med #videoPlayer h1 { font-size: 1.5em; }
.med #videoPlayer p { line-height: 1.118; }

.med #videoInfo h1 {
	color: rgb(255,255,255);
	margin: 20px 0 0 40px;
}

/* Pattern: Images */
.med .video-image-fluid {
	display: block;
	margin: 6px auto;
	width: 100%;
}

.med .page {
	margin: auto;
	overflow: hidden;
	width: 80%;
}

.med #videoPlayer {
	/* outline: 3px solid rgba(0,0,0,0.4); */
	overflow: hidden;
	width: 100%;
	margin: 3px;
}

.med #videoPlayer .panel {
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	max-height: 50%;
	position: absolute;
	transition: all 0.5s ease-in;
	width: 100%;
	z-index: 2;
}

.med .panel > .inner {
	padding: 8px;
	margin: 0 60px;
}

.med .right {
	float: right; 
	top: 0;
}

.med .left {
	float: left; 
	width: 60%;
}
	
.med #videoInfo {
	top: -99em;
}

.med #videoPlayer .video-url {
	margin: 20px 60px 0 0;
}

.med .button-cta {
	background-color: rgb(85, 137, 197);
    color: rgb(255, 255, 255);
	transition: all 0.35s ease-in-out 0s;
}

.med #relatedVideos {
	bottom: -99em;
}

.med .panel.active {
	transition: all 0.5s ease-out;
}
.med #videoInfo.panel.active {
	top: 0;
	min-height: 140px;
}

.med #relatedVideos.panel.active {
	bottom: 0;
}


.med #videoPlayer #relatedVideos .item {
	color: rgb(255,255,255);
	width: 25%;
	/* margin: 10px 2px 54px -86px; */
	overflow: hidden;
	position: relative;
	float: left;
	transition: all 0.35s ease-in-out;
}
.med #videoPlayer #relatedVideos .item:hover {
	background: rgba(255,255,255,0.8);
	color: rgb(33,33,33);
}

.med #videoPlayer #relatedVideos .item:hover .title {
	color: rgb(33,33,33);
}

.med #videoPlayer #relatedVideos .item img {
	max-height: 100px;
	max-width: 150px;
}

/* manual controller bar */

.med .manual-ctrl {
	background-color: rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(150, 150, 150);
    border-radius: 50%;
    height: 100%;
    left: 54%;
    margin: -60px 0 0 -75px;
    opacity: 0;
    position: absolute;
    top: 54%;
    width: 100%;
    z-index: 0;
	max-width: 100px;
	max-height: 100px;
}
.med .manual-ctrl.active {
	opacity: 1;
	z-index: 3;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
}

.med .ctrl-inner {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    border-style: solid;
    border-width: 34px 0 34px 68px;
    content: "";
    display: block;
    height: 0;
    left: 55%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    top: 16%;
    transition: all 0.35s ease-in-out 0s;
    width: 0;
}

.med .manual-ctrl:hover {
	background-color: rgba(0,0,0,1);
	border-color: rgb(90,90,90);
}
.med .manual-ctrl:hover .ctrl-inner {
	border-color: transparent transparent transparent rgba(255,255,255,1);
}

.med #videoPlayer #relatedVideos .title a {
	color: rgb(255,255,255);
}

.med .related {
	 display: none;
}
	
.med #videoInfo.panel.active {
	top: 0;
	min-height: 40%;
}

.med #relatedVideos.panel.active {
	max-height: 54%;
    min-height: 24%;
}

.med #videoPlayer .video-desc {
	margin: 5px 0 20px 10px;
	line-height: 19px;
	text-align: left;
	font-size: 16px;
}

.med #videoInfo h1 {
	margin: 10px 0 0 10px;
}

.med #videoPlayer #relatedVideos .item:hover {
	background:none;
	color: rgb(33,33,33);
}
	
.med .item p {display:none;}

/* end of MED */

/* mini600 */

.mini600 #videoPlayer h1,
.mini600 #videoPlayer p {
	color: rgb(255,255,255);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.mini600 #videoPlayer .video-desc {
	margin: 10px 0 20px 40px;
	line-height: 22px;
	text-align: left;
	font-size: 16px;
}

.mini600 #videoPlayer .video-link {
	margin: 0;
}

.mini600 #videos a { color: #fff; text-decoration: none;}

.mini600 #videos:hover a p { color: rgb(36,36,36); }

/* 1 : 1.618 */
/*#videoPlayer h4 { font-size: 1.618em; }
#videoPlayer h3 { font-size: 2.617924em; }
#videoPlayer h2 { font-size: 4.235801em; }
#videoPlayer h1 { font-size: 6.8535261em; }
#videoPlayer p { line-height: 1.618; }*/

/* 1 : 1.118 */
.mini600 #videoPlayer h4 { font-size: 1.118em; }
.mini600 #videoPlayer h3 { font-size: 1.249924em; }
.mini600 #videoPlayer h2 { font-size: 1.397415em; }
.mini600 #videoPlayer h1 { font-size: 1.5em; }
.mini600 #videoPlayer p { line-height: 1.118; }

.mini600 #videoInfo h1 {
	color: rgb(255,255,255);
	margin: 20px 0 0 40px;
}

/* Pattern: Images */
.mini600 .video-image-fluid {
	display: block;
	margin: 6px 0;
	width: 100%;
}

.mini600 .page {
	margin: auto;
	overflow: hidden;
	width: 80%;
}

.mini600 #videoPlayer {
	/* outline: 3px solid rgba(0,0,0,0.4); */
	overflow: hidden;
	width: 100%;
	margin: 3px;
}

.mini600 #videoPlayer .panel {
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	max-height: 50%;
	position: absolute;
	transition: all 0.5s ease-in;
	width: 100%;
	z-index: 2;
}

.mini600 .panel > .inner {
	padding: 8px;
	margin: 0 60px;
}

.mini600 .right {
	float: right; 
	top: 0;
}

.mini600 .left {
	float: left; 
	width: 60%;
}
	
.mini600 #videoInfo {
	top: -99em;
}

.mini600 #videoPlayer .video-url {
	margin: 20px 60px 0 0;
}

.mini600 .button-cta {
	background-color: rgb(85, 137, 197);
    color: rgb(255, 255, 255);
	transition: all 0.35s ease-in-out 0s;
}

.mini600 #relatedVideos {
	bottom: -99em;
}

.mini600 .panel.active {
	transition: all 0.5s ease-out;
}
.mini600 #videoInfo.panel.active {
	top: 0;
	min-height: 140px;
}

.mini600 #relatedVideos.panel.active {
	bottom: 0;
}

.mini600 #videoPlayer #relatedVideos .item {
	color: rgb(255,255,255);
	overflow: hidden;
	position: relative;
	float: left;
	width: 25%;
	transition: all 0.35s ease-in-out;
}

.mini600 #videoPlayer #relatedVideos .item:hover {
	background: rgba(255,255,255,0.8);
	color: rgb(33,33,33);
}

.mini600 #videoPlayer #relatedVideos .item:hover .title {
	color: rgb(33,33,33);
}

.mini600 #videoPlayer #relatedVideos .item img {
	max-height: 100px;
	max-width: 150px;
}

/* manual controller bar */

.mini600 .manual-ctrl {
	background-color: rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(150, 150, 150);
    border-radius: 50%;
    height: 100%;
    left: 54%;
    margin: -60px 0 0 -75px;
    opacity: 0;
    position: absolute;
    top: 54%;
    width: 100%;
    z-index: 0;
	max-width: 100px;
	max-height: 100px;
}
.mini600 .manual-ctrl.active {
	opacity: 1;
	z-index: 3;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
}

.mini600 .ctrl-inner {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    border-style: solid;
    border-width: 34px 0 34px 68px;
    content: "";
    display: block;
    height: 0;
    left: 55%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    top: 16%;
    transition: all 0.35s ease-in-out 0s;
    width: 0;
}

.mini600 .manual-ctrl:hover {
	background-color: rgba(0,0,0,1);
	border-color: rgb(90,90,90);
}
.mini600 .manual-ctrl:hover .ctrl-inner {
	border-color: transparent transparent transparent rgba(255,255,255,1);
}

.mini600 #videoPlayer #relatedVideos .title a {
	color: rgb(255,255,255);
}

.mini600 .related {
	 display: none;
}
	
.mini600 #videoInfo.panel.active {
	top: 0;
	min-height: 40%;
}

.mini600 #relatedVideos.panel.active {
	max-height: 54%;
    min-height: 24%;
}

.mini600 #videoPlayer .video-desc {
	margin: 5px 0 20px 10px;
	line-height: 19px;
	text-align: left;
	font-size: 16px;
}

.mini600 #videoInfo h1 {
	margin: 10px 0 0 10px;
}

.mini600 #videoPlayer #relatedVideos .item:hover {
	background:none;
	color: rgb(33,33,33);
}

.mini600 .item p {display:none;}

/* .mini600 */
	
/* MINI */

.mini #videoPlayer h1,
.mini #videoPlayer p {
	color: rgb(255,255,255);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.mini #videos a {color: #fff; text-decoration: none;}

.mini #videos:hover a p { color: rgb(36,36,36); }

/* 1 : 1.618 */
/*#videoPlayer h4 { font-size: 1.618em; }
#videoPlayer h3 { font-size: 2.617924em; }
#videoPlayer h2 { font-size: 4.235801em; }
#videoPlayer h1 { font-size: 6.8535261em; }
#videoPlayer p { line-height: 1.618; }*/

/* 1 : 1.118 */
.mini #videoPlayer h4 { font-size: 1.118em; }
.mini #videoPlayer h3 { font-size: 1.249924em; }
.mini #videoPlayer h2 { font-size: 1.397415em; }
.mini #videoPlayer h1 { font-size: 1.5em; }
.mini #videoPlayer p { line-height: 1.118; }

.mini #videoInfo h1 {
	color: rgb(255,255,255);
	 margin: 10px 0 0 10px;
}

/* Pattern: Images */
.mini .video-image-fluid {
	display: block;
	margin: 6px 0;
	width: 100%;
}

.mini .page {
	margin: auto;
	overflow: hidden;
	width: 80%;
}

.mini #videoPlayer {
	/* outline: 3px solid rgba(0,0,0,0.4); */
	overflow: hidden;
	width: 100%;
	margin: 3px;
}

.mini #videoPlayer .panel {
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	max-height: 50%;
	position: absolute;
	transition: all 0.5s ease-in;
	width: 100%;
	z-index: 2;
}

.mini .panel > .inner {
	padding: 8px;
	margin: 0 80px;
}

.mini .right {
	float: right; 
	top: 0;
}

.mini .left {
	float: left; 
	width: 60%;
}
	
.mini #videoInfo {
	top: -99em;
}

.mini #videoPlayer .video-url {
	margin: 10px;
}

.mini .button-cta {
	background-color: rgb(85, 137, 197);
    color: rgb(255, 255, 255);
	transition: all 0.35s ease-in-out 0s;
}

.mini #relatedVideos {
	bottom: -99em;
}

.mini .panel.active {
	transition: all 0.5s ease-out;
}
.mini #videoInfo.panel.active {
	top: 0;
	min-height: 50%;
}

.mini #relatedVideos.panel.active {
	bottom: 0;
}

.mini #videoPlayer #relatedVideos .item:hover {
	background: none;
	color: rgb(33,33,33);
}

.mini #videoPlayer #relatedVideos .item:hover .title {
	color: rgb(33,33,33);
}

.mini #videoPlayer #relatedVideos .item img {
	max-height: 100px;
	max-width: 150px;
}

/* manual controller bar */

.mini .manual-ctrl {
	background-color: rgba(0,0,0,0.3);
	border: 5px solid rgb(150,150,150);
	border-radius: 50%;
	height: 150px;
	left: 50%;
	margin: -66px 0 0 -75px;
	opacity: 0;
	position: absolute;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
	top: 50%;
	width: 150px;
	z-index: 0;
}
.mini .manual-ctrl.active {
	opacity: 1;
	z-index: 3;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
}

.mini .ctrl-inner {
    border-color: transparent transparent transparent rgba(255,255,255,0.7);
    border-style: solid;
    border-width: 60px 0 60px 80px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
    top: 10%;
    width: 0;
}

.mini .manual-ctrl:hover {
	background-color: rgba(0,0,0,1);
	border-color: rgb(90,90,90);
}
.mini .manual-ctrl:hover .ctrl-inner {
	border-color: transparent transparent transparent rgba(255,255,255,1);
}

.mini #videoPlayer #relatedVideos .title a {
		color: rgb(255,255,255);
	}

.mini #videoPlayer .video-link {
	margin: 0;
}

.mini .related {
	margin: 0 12px;
}

.mini #videoPlayer .video-url {
    margin: 10px 10px;
}

.mini .left { 
	width: 100%;
	float: left;
}

.mini .right { 
	float: left;
}

.mini #videoPlayer #relatedVideos .item {
    color: rgb(255, 255, 255);
    margin: -12px 27px 24px -83px;
    overflow: hidden;
    position: relative;
    text-align: left;
    transition: all 0.35s ease-in-out 0s;
    width: 80%;
	min-width: 160px;
}

.mini .video-desc { display: none; }

.mini .manual-ctrl.active {
    opacity: 1;
    z-index: 3;
}

.mini .manual-ctrl {
    background-color: rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(150, 150, 150);
    border-radius: 50%;
    height: 100%;
	opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
	max-width: 90px;
	max-height: 90px;
	left: 70%;
    top: 58%;
}

.mini .ctrl-inner {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    border-style: solid;
    border-width: 34px 0 34px 57px;
    content: "";
    display: block;
    height: 0;
    left: 33%;
    margin: 1px 0 0 -5px;
    position: absolute;
    text-decoration: none;
    top: 11%;
    transition: all 0.35s ease-in-out 0s;
    width: 0;
}

.mini .item p {display:none;}

/* end of MINI */

/* MICRO */

.micro  #videoPlayer h1,
.micro  #videoPlayer p {
	color: rgb(255,255,255);
    font-family: "myriad-pro-n3","myriad-pro",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.micro .video-desc { display: none; }

.micro  #videoPlayer .video-link {
	margin: 0;
}

.micro  #videos a { color: #fff; text-decoration: none;}

.micro  #videos:hover a p { color: rgb(36,36,36); }

/* 1 : 1.618 */
/*#videoPlayer h4 { font-size: 1.618em; }
#videoPlayer h3 { font-size: 2.617924em; }
#videoPlayer h2 { font-size: 4.235801em; }
#videoPlayer h1 { font-size: 6.8535261em; }
#videoPlayer p { line-height: 1.618; }*/

/* 1 : 1.118 */
.micro  #videoPlayer h4 { font-size: 1.118em; }
.micro  #videoPlayer h3 { font-size: 1.249924em; }
.micro  #videoPlayer h2 { font-size: 1.397415em; }
.micro  #videoPlayer h1 { font-size: 1.5em; }
.micro  #videoPlayer p { line-height: 1.118; }

.micro  #videoInfo h1 {
	color: rgb(255,255,255);
	margin: 20px 0 0 40px;
}

/* Pattern: Images */
.micro  .video-image-fluid {
	display: block;
	margin: auto;
	width: 100%;
}

.micro  .page {
	margin: auto;
	overflow: hidden;
	width: 80%;
}

.micro  #videoPlayer {
	/* outline: 3px solid rgba(0,0,0,0.4); */
	overflow: hidden;
	width: 100%;
	margin: 3px;
}

.micro  #videoPlayer .panel {
	background: rgba(0,0,0,0.8);
	color: rgb(255,255,255);
	max-height: 50%;
	position: absolute;
	transition: all 0.5s ease-in;
	width: 100%;
	z-index: 2;
}

.micro  .panel > .inner {
	padding: 8px;
	margin: 0 80px;
}

.micro  .right {
	float: left; 
	top: 0;
}

.micro  .left {
	float: left; 
	width: 100%;
}
	
.micro  #videoInfo {
	top: -99em;
}

.micro  #videoPlayer .video-url {
	margin: 10px;
}

.micro  .button-cta {
	background-color: rgb(85, 137, 197);
    color: rgb(255, 255, 255);
	transition: all 0.35s ease-in-out 0s;
}

.micro  #relatedVideos {
	bottom: -99em;
}

.micro  .panel.active {
	transition: all 0.5s ease-out;
}
.micro  #videoInfo.panel.active {
	top: 0;
	min-height: 140px;
}

.micro  #relatedVideos.panel.active {
	bottom: 0;
}

.micro  #videoPlayer #relatedVideos .item {
	color: rgb(255,255,255);
	overflow: hidden;
	position: relative;
	text-align: center;
	transition: all 0.35s ease-in-out;
}

.micro  #videoPlayer #relatedVideos .item:hover {
	background: none;
	color: rgb(33,33,33);
}

.micro  #videoPlayer #relatedVideos .item:hover .title {
	color: rgb(33,33,33);
}

.micro  #videoPlayer #relatedVideos .item img {
	max-height: 100px;
}

/* manual controller bar */

.micro  .manual-ctrl {
	background-color: rgba(0,0,0,0.3);
	border: 5px solid rgb(150,150,150);
	border-radius: 50%;
	height: 150px;
	left: 50%;
	margin: -66px 0 0 -75px;
	opacity: 0;
	position: absolute;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
	top: 50%;
	width: 150px;
	z-index: 0;
}
.micro  .manual-ctrl.active {
	opacity: 1;
	z-index: 3;
	transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, opacity 1 ease-in-out, z-index 1 ease-in-out;
}

.micro  .ctrl-inner {
    border-color: transparent transparent transparent rgba(255,255,255,0.7);
    border-style: solid;
    border-width: 60px 0 60px 80px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    transition: all 0.35s ease-in-out;
    top: 10%;
    width: 0;
	
}
.micro  .manual-ctrl:hover {
	background-color: rgba(0,0,0,1);
	border-color: rgb(90,90,90);
}
.micro  .manual-ctrl:hover .ctrl-inner {
	border-color: transparent transparent transparent rgba(255,255,255,1);
}

.micro  #videoPlayer #relatedVideos .title a {
	color: rgb(255,255,255);
}

.micro  .related {
	 margin: 0 12px;
}
	
.micro  #videoPlayer #relatedVideos .item {
	color: rgb(255,255,255);
	width: 80%; 
	margin: 2px 2px 25px -86px;
	overflow: hidden;
	position: relative;
	text-align: left;
	transition: all 0.35s ease-in-out;
}
	
.micro  #videoInfo.panel.active {
	top: 0;
	min-height: 50%;
}

.micro  .manual-ctrl.active {
    opacity: 1;
    z-index: 3;
}
.micro  .manual-ctrl {
    background-color: rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(150, 150, 150);
    border-radius: 50%;
    height: 100%;
    left: 80%;
    margin: -60px 0 0 -75px;
    opacity: 0;
    position: absolute;
    top: 75%;
    width: 100%;
    z-index: 0;
	max-width: 100px;
	max-height: 100px;
}

.micro  .ctrl-inner {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    border-style: solid;
    border-width: 34px 0 34px 68px;
    content: "";
    display: block;
    height: 0;
    left: 55%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    top: 16%;
    transition: all 0.35s ease-in-out 0s;
    width: 0;
}

.micro  #videoPlayer .video-desc {
	margin: 5px 0 20px 10px;
	line-height: 19px;
	text-align: left;
	font-size: 16px;
}

.micro  #videoInfo h1 {
	margin: 10px 0 0 10px;
}

.micro  #videoPlayer #relatedVideos .item:hover {
	background:none;
	color: rgb(33,33,33);
}

.micro  #videoInfo.panel.active {
	top: 0;
	min-height: 100%;
}

.micro  #relatedVideos.panel.active {
	display: none;
}

.micro  #videoPlayer #relatedVideos .item {
    color: rgb(255, 255, 255);
    margin: -1px 0 24px -58px;
    overflow: hidden;
    position: relative;
    text-align: left;
    transition: all 0.35s ease-in-out 0s;
    width: 80%;
}

.micro  .manual-ctrl {
    background-color: rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(150, 150, 150);
    border-radius: 50%;
    height: 100%;
    left: 86%;
    margin: -80px 0 0 -94px;
    max-height: 80px;
    max-width: 80px;
    opacity: 0;
    position: absolute;
    top: 76%;
    width: 100%;
    z-index: 0;
}

.micro  .ctrl-inner {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    border-style: solid;
    border-width: 32px 0 32px 48px;
    content: "";
    display: block;
    height: 0;
    left: 70%;
    margin: 0 0 0 -30px;
    position: absolute;
    text-decoration: none;
    top: 10%;
    transition: all 0.35s ease-in-out 0s;
    width: 0;
}
	
/* end of MICRO */


.button-cta {
    background: none repeat scroll 0 0 #08a46f;
    color: #fff;
    display: block;
    font-family: "myriad-pro-n4","myriad-pro",sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
    padding: 10px 12px;
    text-decoration: none;
}

.video-title { text-align: left; }