@import url(../lib/quartz/ui/style/ui.css);

body { background: #222 fixed no-repeat 50% 50%; background-size: cover; font-size: 17px; font-family: "pragmatica-web", "Helvetica Neue", Helvetica, Arial sans-serif; font-weight: 300; color: #333; }
body:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: cover;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-radial-gradient(center, ellipse cover,  rgba(34,34,34,0.5) 0%, rgba(34,34,34,1) 85%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(34,34,34,0.5)), color-stop(85%,rgba(34,34,34,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(34,34,34,0.5) 0%,rgba(34,34,34,1) 85%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(34,34,34,0.5) 0%,rgba(34,34,34,1) 85%,rgba(34,34,34,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(34,34,34,0.5) 0%,rgba(34,34,34,1) 85%,rgba(34,34,34,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(34,34,34,0.5) 0%,rgba(34,34,34,1) 85%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80222222', endColorstr='#222222',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
body.branded { background: #222 fixed no-repeat 50% 0; background-size: auto; }
body.branded:before { display: none; }

.jwplayer button { padding: 0; margin: 0; }

.player-header { background: white; box-shadow: 0 1px 0 rgba(0,0,0,.075); height: 55px; overflow: hidden; }
.player-header > * { height: 100%; }
.player-header .player-header-title { position: absolute; width: 50%; left: 25%; text-align: center; }
.player-header .player-header-title > * { display: inline-block; padding: 14px 10px; font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }
.player-header .player-header-graphic { height: 100%; background: transparent url(../img/header-vivoom-logo.png) no-repeat 0 0; text-indent: -9999px;  }
.player-header .player-header-logo { width: 150px; background-size: auto 55px; background-position: 0 0; }
.player-header .player-header-home { width: 55px; background-size: auto 55px; background-position: -150px 0; }
.player-header .player-header-share { background-size: auto 55px; background-position: -205px 0; text-indent: 0; }
.player-header .player-header-twitter { width: 55px; background-size: auto 55px; background-position: -260px 0; }
.player-header .player-header-facebook { width: 55px; background-size: auto 55px; background-position: -315px 0; }
.player-header .player-header-pinterest { width: 55px; background-size: auto 55px; background-position: -370px 0; }
.player-header .player-header-tumblr { width: 55px; background-size: auto 55px; background-position: -425px 0; }
.player-header .player-header-links { white-space: nowrap; }
.player-header .player-header-links > * { display: inline-block; }
.player-header .player-header-links em { font-style: normal; }
.player-header .player-header-links a:hover { background: #f3f3f3; box-shadow: inset 0 0 5px rgba(0,0,0,.1), inset 0 0 1px rgba(0,0,0,.2); }
.player-header .player-header-links a,
.player-header .player-header-links span { display: inline-block; padding: 15px 10px 19px; font-size: 14px; font-weight: normal; color: #888; }
.player-header .player-header-links-primary { float: left; }
.player-header .player-header-links-secondary { float: right; }




.icon { width: 20px; height: 20px; background: transparent no-repeat 50% 50%; background-size: 100% 100%; display: inline-block; line-height: 1; vertical-align: middle; margin: 0 .325em; }
.icon-share { background-image: url(../img/icon-share.png); }
.icon-twitter { background-image: url(../img/icon-twitter-blue.png); }
.icon-flag { background-image: url(../img/icon-flag.png); }
.icon-facebook { background-image: url(../img/icon-facebook-blue.png); }
.icon-pinterest { background-image: url(../img/icon-pinterest.png); }
.icon-tumblr { background-image: url(../img/icon-tumblr.png); }
.icon-back { background-image: url(../img/icon-back.png); }

.player-header .player-header-share-links { display: inline-block; }
.player-header-active .player-header-share { display: none !important; }
.player-header-active .player-header-share-links { display: inline-block; }

.player-layout { padding: 20px 0; }
.player-layout-tight { padding: 0px; }

.player-page { max-width: 720px; margin: 0 auto; }

.player-content { box-shadow: 0 0 1px rgba(0,0,0,.25); }

.player-video-container { background: #222 no-repeat 50% 50%; background-size: cover; overflow: hidden; background: #222; }
.player-video-container .jwcontrols { z-index: 3; }
.player-video-container:after { content: ''; display: block; position: absolute; background: transparent url(../img/gradient.png) repeat-x 0 100%; background-size: 100% 100%; bottom: 0; left: 0; width: 100%; height: 0px; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
.player-video-container[data-state="playing"]:after,
.player-video-container[data-state="paused"]:after { height: 0; }
.player-video-container .background { position: absolute; width: 1000%; height: 1000%; top: -450%; left: -450%; }
.player-video-container .background img { display: block; position: absolute; margin: auto; top: 0; bottom: 0; right: 0; left: 0; min-width: 12.5%; min-height: 12.5%; }
.player-video { background: #333; box-shadow: 0 0 20px rgba(0,0,0,.25); }
.player-video > * { display: block; height: 100% !important; width: 100% !important; top: 0; left: 0; position: absolute !important; }
.player-video:before { display: block; height: 0; padding-bottom: 100%; }
.player-video[data-orientation="portrait"] { width: 40%; margin: auto; max-height: 100vh; }
.player-video[data-orientation="landscape"] {  }
.player-video[data-orientation="portrait"][data-ratio="16:9"]:before { padding-bottom: 177.777777778%; }
.player-video[data-orientation="landscape"][data-ratio="16:9"]:before { padding-bottom: 56.25% }
.player-video[data-orientation="portrait"][data-ratio="3:2"]:before { padding-bottom: 150%; }
.player-video[data-orientation="landscape"][data-ratio="3:2"]:before { padding-bottom: 66.666666666%; }
.player-video[data-ratio="1:1"]:before { padding-bottom: 100%; }
@media only screen and (max-width: 640px) and (min-height: 321px) {
	.player-video[data-orientation="portrait"] { width: auto; }
	.player-video[data-orientation="portrait"][data-ratio="16:9"]:before { padding-bottom: 100%; }
	.player-video[data-orientation="portrait"] .jwplayer .jwuniform { background-size: cover !important; background-position: 50% 100%; }
}

.player-details { padding: 20px 30px 24px; }
.player-details * { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }
.player-details .player-meta { font-size: 14px; margin: 2px 0; }
.player-details .player-meta > * { display: inline; margin-right: .5em; }
.player-details .player-meta .player-author { font-weight: bold; }
.player-details .player-meta .player-time { color: #aaa; }
.player-details .player-description { margin: 2px 0; }

.player-meta { font-size: 14px; margin: 2px 0; }
.player-meta > * { display: inline; margin-right: .5em; }
.player-meta .player-author { font-weight: bold; color: #000; }
.player-meta .player-time { color: #aaa; }

.player-content .player-ad {  }
.player-content .player-ad[data-ad-type="html"] {  }
.player-content .player-ad[data-ad-type="graphic"] { position: relative; display: block; height: auto; }
.player-content .player-ad[data-ad-type="graphic"] a,
.player-content .player-ad[data-ad-type="graphic"] img { display: block; width: 100%; height: auto; }
.player-content .player-ad .overlay { position: absolute; top: 0px;}

.player-content .player-ad .sponsor-social-textimg { padding: 0px; 0px; 0px; 0px; }
.player-content .player-ad .sponsor-social-actions { padding: 10px 10px 5px; 10px; }
.player-content .player-ad .sponsor-social-actions ul { margin: 0; text-align: center; }
.player-content .player-ad .sponsor-social-actions ul li { display: inline-block; margin: 0; padding: 10px 5px; list-style-type: none; vertical-align: top; font-size: 1px;}
.player-content .player-ad .sponsor-social-actions ul li iframe { margin: 0; }
.player-content .player-ad .sponsor-social-actions ul li.twitter-follow {  }
.player-content .player-ad .sponsor-social-actions ul li.facebook-like { width: 50px; }
.player-content .player-ad .sponsor-social-actions ul li.youtube-subscribe {  }
.player-content .player-ad .sponsor-social-actions ul li.pinterest-follow {  }
.player-content .player-ad .sponsor-social-actions ul li.foursquare-follow {  }
.player-content .player-ad .sponsor-social-actions ul li.instagram-follow {  }
.player-content .player-ad .sponsor-social-actions ul li.google-plus-follow {  }
.player-content .player-ad .sponsor-social-actions ul li.tumblr-follow {  }


.player-footer { padding: 10px 30px 7px; background: rgba(0,0,0,.5); color: white; font-size: 14px; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
.player-footer:after { content: ' '; display: table; clear: both; }
.player-footer a,
.player-footer a:hover { color: white; }
.player-footer,
.player-footer > * { display: block; }
.player-footer .player-footer-action {float: right;}
.player-footer .player-footer-action-img { height: 40px;}
.player-footer .player-footer-text { float: center; margin-top: -3px; white-space: nowrap; text-align: center; color: rgba(255, 255, 255, 0.4);}


@media only screen and (min-width: 1600px) {
	body.branded { background-size: 100% auto; }
}
@media only screen and (max-width: 640px) {
	body { font-size: 14px; background-image: none !important; }
	.player-layout { padding: 0 0; }
	.player-details { padding: 16px 20px 20px; }
	.player-content .player-ad .sponsor-social-actions { padding: 16px 20px 20px; }
	.player-footer { padding: 8px 20px 5px; background: transparent; }
	
	.player-footer .player-footer-action-img { padding-top: 2px; height: 25px;}
	.player-footer .player-footer-text { padding-top: 2px;}
	
	.player-header .player-header-links em { display: none; }
	.player-header .player-header-title { left: 0; text-align: left; }
	.player-header .player-header-links-primary { display: none; }
	.player-header .player-header-links a,
	.player-header .player-header-links span { padding: 15px 2px 19px; }
    .player-header .player-header-logo { width: 150px; background-size: auto 55px; background-position: -20px 0; }
}

/* FIXES FOR FB JWPLAYER MOBILE */
.jwvideo { display: none !important; }
.player-video-container[data-state] .jwvideo { display: block !important; }

/* Instagram Badge */