/*
Theme Name: ForceFive Media
Version: 1.0
Author: ForceFive Media
Author URI: http://www.forcefive.ca
*/

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */

.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
hr.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; border: 0 none; } /* Use this br class to clear your floated columns */

body, html { height: 100%; }

body { background: #000; }

#wrapper { width: 100%; min-height: 100%; background: url(images/wrapper-mobile.jpg) no-repeat center top; }
#wrapper-home { width: 100%; min-height: 100%; background: url(images/wrapper-mobile.jpg) no-repeat center top; }

#main { }

#content { min-height: 450px; margin: 41px 0 0 0; padding: 20px; background: rgba(0,0,0,0.8); }

#page-left {  }
#page-right {  }

.bucket { -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 1px solid #313461; padding: 10px; }

.p10 { padding: 10px; }
.p20 { padding: 20px; }

.last { margin: 0 !important; }

.valign-parent:before { display: inline-block; height: 100%; content: ""; vertical-align: middle; }
.valign-child { display: inline-block; vertical-align: middle; }

.aligncenter { display:block; margin:0 auto }
.alignleft { float:left } .alignright { float:right }
.wp-caption { text-align:center; background:#f9f9f9; padding:10px; margin:10px }

.row { margin-bottom: 30px; }
.row:after, .cf:after { clear: both; content: ""; display: block; width: 100%; height: 0px; }

.p5{padding:5px;}.p10{padding:10px;}.p15{padding:15px;}.p20{padding:20px;}.p25{padding:25px;}.p30{padding:30px;}.p35{padding:30px;}.p40{padding:30px;}
.pr5{padding-right:5px;}.pr10{padding-right:10px;}.pr15{padding-right:15px;}.pr15{padding-right:15px;}.pr20{padding-right:20px;}.pr25{padding-right:25px;}.pr30{padding-right:30px;}.pr35{padding-right:35px;}.pr40{padding-right:40px;}
.pl5{padding-left:5px;}.pl10{padding-left:10px;}.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl25{padding-left:25px;}.pl30{padding-left:30px;}.pl35{padding-left:35px;}.pl40{padding-left:40px;}

.img-fill { position: relative; overflow: hidden; display: block; }
.img-fill img { position: relative; width: 100%; height: auto; display: block; }

.img-fit img { position: relative; width: 100%; height: auto; display: block; }

main video { max-width: 100%; height: auto; }
main iframe, main embed, main object { max-width: 100%; }

@media (max-width: 767px) {
	
#page-right {  }

.row > div { margin-bottom: 30px; }

}

/*------------- TYPE ------------------*/

body { font-family: Trebuchet, Tahoma, Arial, sans-serif; font-size: 12px; color: #abb3c3; }

h1, h2, h2 a, h3, h3 a, h4, .title { font-family: 'Quicksand', Futura, "Century Gothic", "Apple Gothic", sans-serif; font-weight: normal; }

h2 { font-size: 26px; margin: 0 0 10px 0;  }
h2 a { font-size: 26px; }
h3 { font-size: 20px; margin: 0 0 15px 0; color: white; }
h4 { font-size: 18px; margin: 0 0 15px 0; color: #ccc; }

a { color: #6699ff; text-decoration: none; }
a:hover { color: white; }

input[type="text"], input[type="email"], textarea { background: #000; border: 0 none; border: 1px solid #313461; padding: 3px 5px; color: white;
box-shadow:inset 0 0 3px #000; -moz-box-shadow:inset 0 0 3px #000; -webkit-box-shadow:inset 0 0 3px #000; }
input[type="text"]:focus, textarea:focus { background: black; border: 0 none; border: 1px solid #6d65a1; }

a.btn, input[type="submit"] { background: #253567; color: white; text-decoration: none; padding: 5px; border: 0 none; text-transform: uppercase; font-size: 12px !important; font-weight: normal !important;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; font-size: 12px; font-weight: bold; }
a.btn:hover, input[type="submit"]:hover { background: #69F; }

a.arrow-btn { font-family: 'Quicksand', Futura, "Century Gothic", "Apple Gothic", sans-serif; font-size: 14px; background: url(images/home-arrowbtn.png) no-repeat 12px 7px; padding: 7px 20px 7px 35px; border: 1px solid #313461; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
a.arrow-btn:hover { background-color: #313461; }

p { margin: 0 0 20px 0; line-height: 18px; }

strong { }

#content ul li { margin: 0 0 5px 0; line-height: 16px; list-style-type: disc; }
#content ul, #content ol { padding: 0 0 0 30px; margin: 0 0 20px 0; }
#content ol li { margin: 0 0 5px 0; line-height: 16px; list-style-type: decimal; }

img.alignleft { margin: 0 10px 3px 0; }
img.alignright { margin: 0 0 3px 10px; }
img.aligncenter { margin: 0 auto 3px auto; }

table { margin: 0 0 12px 0; }
td { padding: 3px 5px; vertical-align: top; }

blockquote { padding: 10px; border: 2px solid #dedede; margin: 0 0 5px 0;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
blockquote em { font-size: 12px; color: gray; }

hr { border: 0 none; margin: 30px 0; border-bottom: 1px dotted #313461; clear: both; }

.wpcf7-list-item { display: block; }

table.center td { text-align: center; padding-bottom: 20px; }

.gallery img { border: 2px solid #666 !important;
-webkit-transition: border-color 0.25s ease-out;
-moz-transition: border-color 0.25s ease-out;
-o-transition: border-color 0.25s ease-out;
-ms-transition: border-color 0.25s ease-out;
transition: border-color 0.25s ease-out;
 }
.gallery a:hover img { border-color: #fff !important; }

/*------------- HEADER ------------------*/

#header-wrap { background: rgba(0,0,0,0.5); }
#header { height: 125px; position: relative;  z-index: 999; }

a#header-logo { display: block; position: absolute; top: 20px; left: 15px; }

.menu-main-nav-container { position: absolute; right: 15px; bottom: 1px; z-index: 100; }
ul#menu-main-nav { }
ul#menu-main-nav > li { display: block; float: left; position: relative; border-right: 1px solid rgba(245, 220, 255, 0.1); }
ul#menu-main-nav > li > a { display: block; float: left; color: white; text-decoration: none; padding: 0px 25px; font-family: 'Quicksand', Futura, "Century Gothic", "Apple Gothic", sans-serif; height: 60px; line-height: 60px; font-weight: 700; }
ul#menu-main-nav > li > a:hover { color: #72b3f4; }
ul#menu-main-nav > li.current_page_item > a, ul#menu-main-nav > li.current_page_ancestor > a  { 
background: -webkit-linear-gradient(top, rgba(245, 220, 255,0) 75%, rgba(245, 220, 255, 0.15));
background: -webkit-linear-gradient(top, rgba(245, 220, 255,0) 75%, rgba(245, 220, 255, 0.15));
background: -webkit-linear-gradient(top, rgba(245, 220, 255,0) 75%, rgba(245, 220, 255, 0.15));
background: -webkit-linear-gradient(top, rgba(245, 220, 255,0) 75%, rgba(245, 220, 255, 0.15)); }

ul#menu-main-nav > li > ul { background: rgba(0,0,0,0.35); padding: 5px; z-index: 50; width: 210px; display: none; position: absolute; left: 0px; top: 60px; box-shadow: 0px 3px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5); }
ul#menu-main-nav > li:hover > ul { display: block; }
ul#menu-main-nav > li > ul > li { display: block; position: relative; margin: 0; }
ul#menu-main-nav li > ul > li > a { display: block; height: auto; line-height: normal; padding: 7px 10px; color: #fff; margin: 0; border-bottom: 1px solid black; font-family: 'Quicksand', Futura, "Century Gothic", "Apple Gothic", sans-serif; font-weight: 700; }
ul#menu-main-nav li > ul > li a:hover { background: #000; color: #72b3f4; }

ul#menu-main-nav > li > ul > li > ul { position: absolute; left: -9999px; top: 0px; }
ul#menu-main-nav > li > ul > li:hover ul { left: 230px; }

#header-contact { height: 36px; overflow: hidden; position: absolute; right: 0px; top: 10px; font-size: 12px; }
#header-contact span { display: block; padding: 10px 15px 0 10px; float: left; }

#header-social { float: left; margin: 0 10px 0 0; }
#header-social a { display: block; width: 24px; height: 26px; line-height: 24px; text-align: center; float: left; margin: 5px 2px 0 0; font-size: 12px; color: white; background: rgba(0,0,0,0.2); border: 1px solid #4f435e;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; }
#header-social a:hover { background: #4f435e; }
#header-social a#hs-comm { width: auto; padding: 0 5px; }



#hdr-mobile-menu { display: none; text-align: center; background: black; color: white; width: 40px; height: 40px; line-height: 40px; text-align: center; position: absolute; right: 15px; top: 60px;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
#hdr-mobile-menu:hover { cursor: pointer; background: white; color: black; }

#logo-small { display: none; }

@media (max-width: 989px) {
	
	a#header-logo { width: 240px; top: auto; bottom: 20px; }
	a#header-logo img { width: 100%; height: auto; }
	
	ul#menu-main-nav > li > a { display: inline-block; font-size: smaller; padding: 0 13px; }
	
	#header-nav { padding: 15px 0; }
	#header-nav > div { height: auto; }


}

@media (max-width: 767px) {
	
	#header-contact { background: black; position: relative; top: auto; right: auto; margin: 0 -15px; }
	
	#header { height: auto; }
	
	a#header-logo { width: 20%; max-width: 40px; padding: 10px 0; position: relative; left: auto; bottom: auto; float: left; }
	
	#logo-big { display: none; }
	#logo-small { display: block; }
	
	#hdr-mobile-menu { display: block; }
	
	.menu-main-nav-container { display: none; width: 100%; clear: both; padding-top: 15px; position: relative; right: auto; bottom: auto; }
	.menu-main-nav-container.active { display: block; }
	
	ul#menu-main-nav > li.current_page_item > a, ul#menu-main-nav > li.current_page_ancestor > a { background: rgba(188,179,214,0.1); }
	
	ul#menu-main-nav { text-align: left; }
	ul#menu-main-nav > li { float: none; width: auto; display: block; background: none; }
	ul#menu-main-nav > li > a { display: block; float: none; height: auto; line-height: normal; padding: 10px; font-size: 18px; text-align: center; }
	ul#menu-main-nav > li > ul { position: relative; left: auto; top: auto; width: auto; background: rgba(0,0,0,0.2);
	box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;	 }
	ul#menu-main-nav > li > ul > li > a { display: block; height: auto; padding: 10px 15px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.3); }

}


/*------------- FOOTER ------------------*/

#footer { margin: 20px 0; padding: 20px 0; overflow: hidden; font-size: 10px; border-top: 1px dotted #313461;  }

#footer a { color: #666666; }
#footer a:hover { color: white; }
#footer ul { margin: 0; padding: 0; }

#footer-f5 { float: left; margin: 5px 15px 0 0; }

a#footer-title {text-decoration: none; font-size: 12px; }

.menu-footer-nav-container { margin: 10px 0; float: left; }
ul#menu-footer-nav { }
ul#menu-footer-nav li { display: inline; }
ul#menu-footer-nav li a { text-decoration: none; border-left: 1px solid #666; font-size: 12px; font-family: 'Quicksand', Futura, "Century Gothic", "Apple Gothic", sans-serif; padding: 0 7px;  }
ul#menu-footer-nav li:first-child a { border: 0 none; padding-left: 0; }
ul#menu-footer-nav li a:hover {  }

a.social-16 { display: block; width: 16px; height: 16px; float: left; }
a.social-32 { display: block; width: 32px; height: 32px; float: left; }
a.social-32#twitter { background-image: url(images/twitter_32.png) }

a.social-16:hover, a.social-32:hover { background-position: left bottom; }

#footer-left {  }
#footer-right { text-align: right; vertical-align: bottom; position: relative; }

#footer-tagcloud { margin: 5px 0 0 0; }

#___plusone_0 {  }
.fb-like { margin:  0 0 0 5px !important; height: 20px; top:-2px; }
.fb_iframe_widget span { }

#footer-tag { display: block; margin: 7px 0 0 0; }

/*------------- POSTS ------------------*/

.post {  }
.post h3 { margin: 0; }
.post-footer { font-size: 10px; border: 1px solid #313461; padding: 5px; }

.post.half { width: 320px; float: left; padding: 5px;
-webkit-transition: background-color 0.25s ease-out;
-moz-transition: background-color 0.25s ease-out;
-o-transition: background-color 0.25s ease-out;
-ms-transition: background-color 0.25s ease-out;
transition: background-color 0.25s ease-out;
 }
.post.half:hover { background: #333; }
.post.half.last { float: right; }
.post.half h2 a { font-size: 14pt; }

a.post-thumb { display: block; background: black; text-align: center; height: 200px; }

ol.commentlist { padding: 20px 0 !important; }
ol.commentlist > li { list-style-type: none !important; padding: 10px; margin: 0 0 15px 0 !important; position: relative; border-left: 2px solid #313461; background: #222; }
.comment-meta { position: absolute; right: 10px; top: 30px; font-size: 11px;   }

.comment-author { padding: 5px; margin: 0 0 10px 0; overflow: hidden; }
.avatar { display: inline-block; margin: 0 10px 0 0;  }
.author-name { font-size: 20px; color: white;  }
.comment-date { font-size: 10px; }

.post-social { margin: 20px 0;  }

.related-posts { padding: 30px 0 0 0; }
.related-post { width: 200px; padding: 5px; border: 1px solid #313461; height: 200px; margin: 0 10px 20px 0; float: left; text-align: center; }
.related-post h3 { font-size: 14px; }
.rp-thumb { display: block; height: 130px; margin: 0 0 10px 0; }

/*------------- SIDEBAR ------------------*/

#page-right ul.xoxo { padding: 0; margin: 20px 0 0 0; }
#page-right ul.xoxo > li { padding: 0 0 25px 0; list-style-type: none; }
ul.xoxo > li > h2 { margin: 0 0 5px 0; font-size: 20px; }
ul.xoxo > li > ul { padding: 0 0 0 10px !important; }
ul.xoxo > li > ul > li { list-style-type: none !important; border-bottom: 1px dotted #313461; margin: 0 !important; padding: 5px 0; }

/*------------- HOME ------------------*/

#slider-wrap-wrap { margin: 41px 0 0 0; position: relative; padding: 10px; background: rgba(0,0,0,0.5); }
#slider-wrap {  overflow: hidden; }
#slider-wrap a { display: block; }
#slider-wrap a img { width: 100%; height: auto; }
#home-content { margin: 50px 0 0 0; padding: 10px; background: rgba(0,0,0,0.3); }

ul#home-posts { padding: 0; margin: 0; width: 480px; }
ul#home-posts li { display: block; width: 480px; margin: 0 0 20px 0; overflow: hidden; }
ul#home-posts li:last-child { margin: 0; }
ul#home-posts li .home-post-thumb { float: left; width: 120px; padding: 2px; border: 1px solid #313461; }

ul.home-btns { padding: 0 !important; margin: 0 !important; }
ul.home-btns li { padding: 10px 0; border-bottom: 1px dotted #333; list-style-type: none !important; margin: 0 !important; }
ul.home-btns li a { height: 17px; line-height: 17px; font-family: 'Quicksand', Futura, "Century Gothic", "Apple Gothic", sans-serif; font-size: 16px; display: block; }
ul.home-btns li a i { margin-right: 10px; color: white; }
ul.home-btns.work { margin: 0 0 20px 0 !important; }

ul#home-posts li .home-post-text { float: left; width: 270px; margin: 0 0 0 10px; }

#home-top {  }
.third h4 { margin: 0; color: #999999; text-transform: uppercase; }

#slider-nav { position: absolute; left: 30px; top: 30px; z-index: 1000; }
#slider-nav span { display: block; float: left; margin: 0 5px 0 0; width: 10px; height: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; background: gray; text-indent: -9999px; }
#slider-nav span:hover { background: white; cursor: pointer; }
#slider-nav span.cycle-pager-active, #slider-nav span.cycle-pager-active:hover { background: #72b3f4; cursor: default; }

#home-left {  }
#home-right {  }

.hidden-item { display: none; }

#home-tabs { display: block; height: 30px; }
#home-tabs ul { padding: 0; }
#home-tabs ul li { display: inline; }
#home-tabs ul li a { display: block; position: relative; float: left; height: 30px; line-height: 30px; color: white; background-color: #333; padding: 0 30px; margin: 0 2px 0 0; font-weight: bold; }
#home-tabs ul li a:hover { cursor: pointer; background: #85aeff; }
#home-tabs ul li.active-tab a { background-position: center bottom; background-color: #69F; color: black; }
#home-tabs ul li.active-tab a:hover { cursor: default; background-color: #69F; }
#home-news-events { padding: 10px 0; }
#home-tabs ul li#home-tab-twitter a { background-repeat: no-repeat;}
#home-tabs ul li#home-tab-twitter a i { font-size: 20px; margin-right: 5px; position: relative; top: 3px; }

ul.tweets { margin: 0 0 20px 0; }
ul.tweets li { display: block; padding: 10px 0; border-bottom: 1px dotted #313461 !important; }
ul.tweets li p { margin: 0; }
.twitter_timestamp { font-size: 10px; float: left; margin: 0 0 0 10px; }
.twitter_intents { font-size: 10px; margin: 5px 0 0 0;  }
.twitter_intents span { margin: 0 5px 0 0; }
.twitter_intents a { padding: 0 0 0 10px; background-position: left center; background-repeat: no-repeat; }

/*------------- PAGE ------------------*/

#map, #map h3, #map p { color: black; }
#map h3 a:hover { color: black; }

/*------------- PAGE - WHAT WE DO------------------*/

#what-we-do { text-align: center; }
#what-we-do ul.items { padding: 0 !important; height: 110px; margin: 10px 0 10px 0 !important; }
#what-we-do ul.items li { list-style-type: none !important; }
#what-we-do ul.items li:before { content: "\2022\00a0"; }
#what-we-do h3 { margin: 0 0 10px 0; }

/*------------- PAGE - WORK------------------*/

#work-left { }
#work-right { background: black; }

.work-post { width: 100%; padding: 0 0 5px 0; }
.work-post img.wp-post-image { width: 100%; height: auto; }
.work-post h3 { padding: 10px 0 0 0; margin: 0 0 5px 0; }
.work-post .arrow-btn { margin: 7px 0 0 0; }
.block { display: block; }

#work-left ul.home-btns li { padding: 7px 0 7px 10px; margin: 0; }
ul.home-btns li.current-work-cat { background: black; }
ul.home-btns li.current-work-cat a { color: white; }

#work-slider-wrap-wrap { position: relative; }
#work-slider-wrap { overflow: hidden; }

#arrow-left, #arrow-right { display: block; width: 36px; height: 94px; position: absolute; top: 50%; margin-top: -47px; z-index: 150; }
#arrow-left { background: url(images/work-arrowleft.png) no-repeat left top; left: 0px; }
#arrow-right { background: url(images/work-arrowright.png) no-repeat left top; right: 0px; }
#arrow-left:hover, #arrow-right:hover { background-position-x: -36px; }
#arrow-left:active, #arrow-right:active { background-position-x: -72px; }

.testi-box { padding: 10px 0 10px 80px; border-bottom: 1px dotted #313461; background: url(images/testi-quotebg.png) no-repeat 0px 10px; }

.project-thumb { width: 23%; padding: 1px; border: 1px solid #313461; float: left; margin: 1%; text-align: center; }
.project-thumb img { width: 100%; height: auto; }
.project-thumb h3 { font-size: 12px; margin: 5px 0; }
.project-thumb:nth-child(4n+2) { clear: both; }

a.timeline-btn { display: block; text-indent: -9999px; width: 202px; height: 52px; background: url(images/timeline-btn.png) no-repeat; }
a.timeline-btn:hover { background-position: left bottom; }

/*------------- PROJECT - SINLGE ------------------*/

ul#project-services { padding: 0 !important; margin: 0 0 25px 0; }
#project-services li { height: 20px; background: url(images/project-check.png) no-repeat left top; line-height: 20px; display: block; list-style-type: none; padding: 0 0 0 30px; margin: 0 0 7px 0; font-size: 14px; font-family: Futura, "Century Gothic", "Apple Gothic", sans-serif; }

/*--------------------------------  COMMUNITY --------------------------------*/

iframe { border: 0 none; }

#comm-left {  }
#comm-right {  }

.comm-half { width: 270px; }
.comm-third { width: 230px; margin: 0 20px 0 0; }

.comm-third ul { padding: 0 !important; }

#youtube-video { width: 430px; float: right; }
#youtube-entries { width: 120px; float: left; }
.youtubechannelEntry { width: 120px; }
.youtubechannelEntry p { font-size: 11px; color: gray; margin: 3px 0 8px 0; }

#comm-youtube { overflow: hidden; }

ul.comm-blogposts {  }
ul.comm-blogposts li { list-style-type: none !important; padding: 5px 0; margin: 0; }
ul.comm-blogposts li p { margin: 0; }

a.commbtn { display: block; padding: 10px; font-size: 14px; font-family: Futura, "Century Gothic", "Apple Gothic", sans-serif; color: black; text-align: center; margin: 0 0 5px 0; background: #b9c2ca url(../images/communitybtnbg.jpg) repeat-x; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); color: #333; }
a.commbtn:hover { text-decoration: none; background: white; color: black; }

a.comm-morebtn { display: block; position: absolute; padding: 0 15px 0 0; background: url(images/linkicon.png) no-repeat right 3px; right: 10px; top: 10px; }

#comm-left .bucket, #comm-right .bucket { position: relative; margin: 0 0 10px 0; }
#comm-left .bucket ul, #comm-right .bucket ul { padding: 0 !important; }

#comm-twitter {  }
#comm-twitter ul {  }
#comm-twitter ul li { display: block !important; border-bottom-color: #313461 !important; }

.pfyre-video { width: 700px; margin: 0 auto 30px auto; }
#pfyre-flash-wrap { width: 860px; margin: 0 auto; }


#youtube-slider-wrap-wrap { position: relative; position: relative; }
#youtube-slider-wrap { width: 836px; height: 200px; overflow: hidden; margin-left: 45px; position: relative; }
#youtube-slider { width: 9999px; position: absolute; left: 3px; top: 10px; }
.youtubechannelEntry { width: 155px; float: left; margin: 0 6px 0 0; height: 165px; padding: 2px; border: 1px solid #313461;  }
.youtubechannelEntry:hover { background: #313461; }
.youtubechannelEntry h4, .youtubechannelEntry h4 a { font-size: 12px; letter-spacing: normal; padding: 7px 0 0 0; text-align: center; }

#youtube-slider-wrap-wrap #arrow-left, #youtube-slider-wrap-wrap #arrow-right { top: 80px; }
#youtube-slider-wrap-wrap #arrow-left { left: -10px; }
#youtube-slider-wrap-wrap #arrow-right { right: -10px; }


#arrow-right.inactive, #arrow-left.inactive { background: none; cursor: default; }


/*------------- TEAM PAGE ------------------------*/

.team-member { width: 33.333%; padding: 5px; position: relative; float: left; }
.team-member .team-member-pic { position: relative; z-index: 5; overflow: hidden; }
.team-member img { width: 100%; height: auto; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
.team-member:hover img { filter: grayscale(0%); -webkit-filter: grayscale(0%);  }
.team-member .team-member-pic img.grayscale { position: relative; z-index: 9; }
.gsWrapper { height: 150px; width: 200px; }
.gsWrapper canvas { z-index: 10; }
.team-member .team-member-pic-text { background: rgba(0,0,0,.75); width: 100%; height: 150px; position: absolute; z-index: 10; top: 100%; left: 0px; }
.team-member .team-member-pic-text h2 { margin: 0; color: white; padding: 10px 10px 0px 10px; font-size: 16px; }
.team-member .team-member-pic-text h3 { margin: 0; padding: 0 10px 0px 10px; color: #999; font-size: 12px; }
.team-member-pic-text .more-btn { display: block; padding: 5px 10px; text-align: center; font-size: 12px; }
.team-member-pic-text .more-btn:hover { color: white; }
.team-member .team-member-text { opacity: 0; width: 300px; padding: 20px; color: white; position: absolute; left: -9999px; top: 150%; z-index: 50; background: url(images/trans_white.png); margin-left: -150px; }
.team-member .team-member-text p { margin: 0; color: black; }
.team-member .team-member-text:before { content: url(images/team-transArrow.png); position: absolute; left: 50%; margin-left: -20px; top: -20px; }

@media (max-width: 767px) {
	
.team-member { width: 50%; }

}