@font-face {
    font-family: "Helvetica";
    src: url(fonts/Helvetica.ttf);
}
body, section, div, a, img, input, h4 {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;}
body {margin: 0; padding: 0; overflow-y: scroll; font-family: 'Roboto', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
a {text-decoration: none; color: inherit; display: inline-block;}
fieldset {margin: 0; padding: 0; border: 0;}
fieldset.editable {display: none;}
input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='file'], input[type='submit'], button[type='submit'], textarea, select {resize: none; background-color: #ffffff; line-height: 20px; padding: 7px; display: block; margin: 6px 0; width: 100%; color: #555; border: 1px solid #ddd !important; -webkit-transition: border-color .2s linear; -moz-transition: border-color .2s linear; -o-transition: border-color .2s linear; transition: border-color .2s linear; border-radius: 5px;}
nav {background-color: #000000; text-align: center;}
nav .current{color: #ffffff;}
div.gas {position: fixed; bottom: 0px; left: 50%; margin-left: -160px; width: 320px; height: 50px; z-index: 1005;}
div.gas .adsbygoogle {display: block; margin: 0 auto; width: 320px; height: 50px;}
.clear {clear: both; text-align: center; color: red;}
.left {float: left;}
.right {float: right;}
.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(0, 0, 0, 0.5); z-index: 98;}
.wrapper .video {position: relative; cursor: pointer; padding-bottom: 52%; height: 0; background-color: #222222;}
.wrapper .video .video-player-overlay {position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99; display: none;}
.wrapper .video .video-player-overlay h1 {color: #ffffff; font-size: 1.0em; text-align: center; padding:0; margin: 6% 0;}
.wrapper .video .video-player-overlay p {color: #ffffff; font-size: 1.0em; text-align: center; padding:0; margin: 5% 0;}
.wrapper .video .video-player-overlay a.button {width: 20%; float: none !important; color: #fff; border-color: rgba(0,0,0,.2); font-weight: 700; padding: 10px 0px;  font-size: 1em; line-height: 1em; border-radius: 6px; text-align: center; display: inline-block;}
.wrapper .video .video-player-overlay a.button.skip {float: left; background-color: #cc131f;}
.wrapper .video .video-player-overlay a.button.skip:hover {background-color: #ad101a;}
.wrapper  .video .play-button {position: absolute; background: url(../media/play-button.png) center no-repeat; width: 48px; height: 48px; display: block; left: 50%; top: 50%; margin: -24px 0 0 -24px; z-index: 101;}
.wrapper .video .video-player-bg {position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center;}
.wrapper .video iframe {width: 100%; height: 100%; display: none; position: absolute; top: 0px; left: 0px;}
.loading-gif {position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1001; display: none;}
.loading-gif  img{width: 100px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -50px; position: absolute;}
.pulse {animation: pulse 1.5s infinite; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 1.5s infinite; -o-animation: pulse 1.5s infinite;}

.social a.button {width: 49%;  color: #cc131f; border-color: rgba(0,0,0,.2); font-weight: 700; padding: 10px 0px;  font-size: 19px; line-height: 1.33; border-radius: 6px; text-align: center; display: inline-block;}
.social a.button.facebook {float: left; background-color: #3b5998; color: #ffffff;}
.social a.button.facebook:hover {background-color: #30487b;}
.social a.button.twitter {float: right; background-color: #55acee; color: #ffffff;}
.social a.button.twitter:hover {background-color: #309aea;}
.social a.button i.fa {font-size: 1.3em; padding-right: 10px; line-height: .75em; vertical-align: -15%;}
.social p {color: #ffffff; text-align: center;}
.social .fb-like {margin: 0 auto; width: 100% !important; height: 30px !important; overflow: hidden; text-align: center;}
.social .fb-like span:nth-of-type(1) {text-align: center; width: auto !important;}
.social .fb-like span iframe:nth-of-type(1) {width: auto !important; position: relative !important;}

.social.login {float: right;}
.social.login a.button.facebook {width: 46px; height: 42px; margin-right: 7.5px; margin-top: 2px; font-size: 10px; line-height: 1em;}
.social.login a.button.facebook i.fa {font-size: 2em !important; padding-right: 0px; vertical-align: -60%;}
.social.login a.button.facebook span {display: block;}
@-webkit-keyframes pulse {from { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #6583c3; -webkit-box-shadow: 0 0 18px #6583c3; } to { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; }}
@-moz-keyframes pulse {from { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #6583c3; -webkit-box-shadow: 0 0 18px #6583c3; } to { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; }}
@-o-keyframes pulse {from { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #6583c3; -webkit-box-shadow: 0 0 18px #6583c3; } to { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; }}
@keyframes pulse {from { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #6583c3; -webkit-box-shadow: 0 0 18px #6583c3; } to { background-color: #3b5998; -webkit-box-shadow: 0 0 9px #333; }}

div.loading {position: absolute; left: 50%; margin-left: -25px; display: block;}
div.loading .spinner {margin: 0 auto; width: 50px; height: 30px; text-align: center; font-size: 10px;}
div.loading .spinner > div {background-color: #4a4a4a; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; -moz-animation: stretchdelay 1.2s infinite ease-in-out; -o-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out;}
div.loading .spinner .rect2 {-webkit-animation-delay: -1.1s; -moz-animation-delay: -1.1s; -o-animation-delay: -1.1s; animation-delay: -1.1s;}
div.loading .spinner .rect3 {-webkit-animation-delay: -1.0s; -moz-animation-delay: -1.0s; -o-animation-delay: -1.0s; animation-delay: -1.0s;}
div.loading .spinner .rect4 {-webkit-animation-delay: -0.9s; -moz-animation-delay: -0.9s; -o-animation-delay: -0.9s; animation-delay: -0.9s;}
div.loading .spinner .rect5 {-webkit-animation-delay: -0.8s; -moz-animation-delay: -0.8s; -o-animation-delay: -0.8s; animation-delay: -0.8s;}

section.content {width: 100%;}
section.content .wrapper {width: 100%; margin: 0 auto; }
section.content .top {background-color: black; width: 100%;}

ul {padding: 0; margin: 0; color: #999; width: auto; display: inline-block;}
ul li{display: inline-block; list-style: none; vertical-align: top; cursor: pointer;}
ul li.brand {width: 168px; height: 50px; background: url(../media/damn-tv-logo.png) 15px center no-repeat; text-indent: -999px; overflow: hidden;}
ul li:not(.brand){padding: 15px 10px 15px 0; line-height: 20px;}
ul li:not(.active):hover {color: #ffffff;}

nav.pagination {background-color: transparent;}
nav.pagination ul {font-weight: bold;}
nav.pagination ul a {color: #09f;}
nav.pagination ul a.current, nav.pagination ul a:hover {color: #ffffff; background-color: #09f;}
nav.pagination ul a li {padding: 20px;}

header {width: 100%; position: relative; background-color: #000; border-bottom: 1px solid #080808; box-shadow: 0 1px 0 #333;}
header ul li:not(.brand) {display: none;}
header .mobile-nav {position: relative; float: right; border: 0px solid white; border-top: 0px;}
header .mobile-nav ul {display: none; position: absolute; top: 44px; right: 0px; background-color: rgba(0,0,0,0.5); z-index: 1001; width: 140px;}
header .mobile-nav ul li {display: block;}
header .mobile-nav:hover ul{display: block;}
header .mobile-nav button {padding: 9px 10px; float: right; background-color: transparent; background-image: none; border: 1px solid #ffffff; border-radius: 4px;}
header .mobile-nav button span {display: block !important; background-color: #fff; width: 22px; margin: 4px 0px; height: 2px; border-radius: 1px; text-align: right;}

section.content .stage {padding: 0px 0px 10px; margin-bottom: 20px; background-color: #000000;}
section.content .stage {position: relative;}
section.content .stage .loading-wrapper {height: 30px; width: 100%; position: relative; visibility: hidden;}
section.content .stage nav {width: 100%; margin: 10px 0px 0px;}
section.content .stage nav a.button {width: 48%; color: #cc131f; border: 1px solid white !important; font-weight: 700; padding: 10px 0px; font-size: 19px; line-height: 1.33; border-radius: 6px; text-align: center; display: inline-block;}
section.content .stage nav a.button:hover {background-color: #222;}
section.content .stage nav a.button.previous {float: left;}
section.content .stage nav a.button.previous i.fa-arrow-left {margin-right: 5px;}
section.content .stage nav a.button.next {float: right;}
section.content .stage nav a.button.next i.fa-arrow-right {margin-left: 5px;}

section.content .stage .showcase {margin-bottom: -14px;}
section.content .stage .showcase .left {padding: 0px; width: 100%;}
section.content .stage .showcase .left a {width: 100%; height: auto;}
section.content .stage .showcase .left a .post {width: 100%; height: auto; position: relative;}

section.content .stage .showcase .right {padding: 0px; width: 100%; height: auto !important; display: block !important; visibility: visible !important;}
section.content .stage .showcase .right a {width: 100%; height: auto; float: left;}
section.content .stage .showcase .right a .post {width: 100%; height: auto; position: relative;}

section.content .stage .showcase a .post{overflow: hidden; margin-bottom: -4px;}
section.content .stage .showcase a .post .overlay {background-image: -webkit-linear-gradient(-90deg,rgba(0,0,0,.3) 0,#000 100%); display: block; z-index: 50; background-image: -moz-linear-gradient(-90deg,rgba(0,0,0,.3) 0,#000 100%); background-image: linear,-90deg,rgba(0,0,0,.3) 0,#000 100%; width: 100%; height: 100%; position: absolute; top: -4px; left: 0; opacity: .5; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;}
section.content .stage .showcase a .post .overlay:hover {opacity: .8;}
section.content .stage .showcase a .post img {width: 100%; height: auto;}
section.content .stage .showcase a .post h4 {width: 100%; height: auto; position: absolute; bottom: 3px; font-size: 1.2em; z-index: 51; padding: 15px; margin: 0px; color: #ffffff;}
section.content .stage .showcase .right a .post h4 {font-size: 1.2em;}

section.content .stage .left {width: 100%;  padding: 0px 15px;}
section.content .stage .left .social {width: 100%; margin-top: 10px;}

section.content .stage .right {position: relative; visibility: hidden; height: 0px; width: 33.33333%; padding: 0px 15px;}
section.content .stage .right .playlist {position: relative;}
section.content .stage .right .playlist a {display: block;}
section.content .stage .right .playlist .viewport {height: 321px; width: 100% !important; overflow-x: hidden; overflow-y:hidden; position: relative;}
section.content .stage .right .playlist .viewport .jspContainer {width: 100% !important;}
section.content .stage .right .playlist .viewport .jspContainer .jspPane {width: 100% !important;}
section.content .stage .right .playlist .viewport .current {background-color: #333;}
section.content .stage .right .playlist .viewport .current .preview img {border: 2px solid #cc131f;}
section.content .stage .right .playlist .viewport .current .preview img:before {content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,255,255, 1.0); -moz-transition: background .3s linear; -webkit-transition: background .3s linear; -o-transition: background .3s linear; transition: background .3s linear;}
section.content .stage .right .playlist .viewport .preview {width: 100%; padding: 9px; color: #fff;}
section.content .stage .right .playlist .viewport .preview:hover {background-color: #555;}
section.content .stage .right .playlist .viewport .preview img {float: left; width: 33.33333%; height: auto;}
section.content .stage .right .playlist .viewport .preview .info {float: right; width: 66.66666%;  padding-left: 5px;}
section.content .stage .right .playlist .viewport .preview .info h4 {margin: 0px; padding: 0px;max-height: 2.4em; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word;}
section.content .stage .right .playlist .viewport .preview .info p {margin: 0px; padding: 5px 0px 0px; font-size: 0.8em; color: #999;}
section.content .stage .right .playlist .viewport .playlist-end {color: red; text-align: center; height: 45px; display: block;}

section.content .audience {}
section.content .audience article {padding: 0px 15px; color: #333;}
section.content .audience article h1 {font-size: 1.6em; margin: 0px;}
section.content .audience article h1 small{font-size: 0.5em !important; color: #999; margin: 0px 0px 0px 10px;}
section.content .audience article p{font-size: 1.3em; color: #999; margin: 0px;}
section.content .audience .comments {margin: 10px 0px 0px; padding: 0px 15px; width: 100%; min-height: 210px; position: relative;}
section.content .audience .comments ul {margin: 0; padding: 0; list-style: none; width: 100%; position: relative; border-bottom: 1px solid #ddd;}
section.content .audience .comments ul li {display: inline-block; width: 50%; border-radius: 4px; padding: 10px 0px; text-align: center; font-size: 1.2em; box-sizing: border-box;}
section.content .audience .comments ul li:hover {color: #999;}
section.content .audience .comments ul li.left {border-top:0px solid #ddd; border-right:0px solid #ddd; border-left:0px solid #ddd;}
section.content .audience .comments ul li.right {border-top:0px solid #ddd; border-right:0px solid #ddd; border-left:0px solid #ddd;}
section.content .audience .comments ul li.active {border-top:1px solid #ddd; border-right:1px solid #ddd; border-left:1px solid #ddd;}
section.content .audience .comments .disqus-comments {display: none;}
section.content .audience .comments .fb-comments {}

section.content .featured.admin {padding: 20px 0;}
section.content .featured.admin h1{text-align: center; background-color: #66FF99; padding: 20px; display: none;}
section.content .featured.admin p {display: none;}
section.content .featured.home .wrapper .feat:last-child {display: none;}

section.content .featured div.feat {display: inline-block;  float: left; width: 100%; position: relative; margin-bottom: 15px;}
section.content .featured div.feat ul {margin: 0 auto;}
section.content .featured div.feat ul a {width: auto !important;}
section.content .featured div.feat ul li {padding-top: 0px;}
section.content .featured div.feat ul li:hover {color: #000000;}
section.content .featured div.feat a {display: inline-block; width: 100%;}
section.content .featured div.feat .post {width: 100%; height: auto; padding: 0px 15px; display: inline-block; position: relative;}
section.content .featured div.feat .post:hover {background-color: #f4f4f4;}
section.content .featured div.feat .post .boundary {position: relative; overflow: hidden;}
section.content .featured.admin div.feat .post .boundary .stats {display: none; width: 100%; height: 100%; position: absolute; background-color: rgba(0,0,0,0.5); color: #ffffff;}
section.content .featured.admin div.feat .post .boundary .stats .left {width: 50%; display: inline-block;}
section.content .featured.admin div.feat .post .boundary .stats .left h5{font-size: 1.0em; text-align: center;}
section.content .featured.admin div.feat .post .boundary .stats .left p{display: block; font-size: 1.0em; text-align: center;}
section.content .featured.admin .site-stats {width: 100%; margin: 0 0 20px;}
section.content .featured.admin .site-stats span {width: 33%; float: left; display: inline-block; overflow: hidden; white-space: nowrap;}
section.content .featured.admin .site-stats span p {display: block; text-align: center;}
section.content .featured.admin .site-stats span p:first-child {font-size: 2em; margin-bottom: 5px; margin-top: 0px;}
section.content .featured.admin .site-stats span p:last-child {font-size: 0.96em; margin-top: 0px;}
section.content .featured div.feat .post img {width: 100%;}
section.content .featured div.feat .post h4 {font-size: 1.4em; margin: 0px; color: #09f; height: 75px; max-height: 75px; overflow: hidden;}
section.content .featured div.feat .post h4:hover {color: #2a6496}
section.content .featured div.feat .post h4 small {font-size: 0.6em; color: #999; margin: 0px 0px 0px 5px;}

section.modal {background-color: rgba(255, 255, 255, 1); display: none; position: absolute !important; height: auto; top: 20%; padding: 15px; width: 100%; z-index: 99;}
section.modal .add-video {display: none;}
section.modal .edit-video {display: none;}
section.modal .play-button {display: none !important;}
section.modal input[type="text"], section.modal textarea  {border-right: 0px; width: 90%; float: left; display: inline-block; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right-width: 0px !important;}
section.modal textarea  {width: 87%; height: 120px; overflow-y: scroll;}
section.modal button[type="submit"], section.modal input[type="submit"] {width: 10%; float: right; display: inline-block; border-top-left-radius: 0px; border-bottom-left-radius: 0px; cursor: pointer;}
section.modal button[type="submit"].submit {border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: none; }
section.modal .audience article {padding-top: 10px;}
section.modal .audience article h1 {font-size: 1.6em; float: left; line-height: 1.0em;}
section.modal .audience article h1 small{font-size: 0.5em !important; line-height: 2.5em;}
section.modal .audience article p{font-size: 1.0em; margin: 15px 0;}

section.content footer {width: 100%; background-color: #f4f4f4; padding: 20px 0px; display: block;}
section.content footer p {text-align: center;}


@-webkit-keyframes stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  20% { -webkit-transform: scaleY(1.0) }}
@-moz-keyframes stretchdelay {0%, 40%, 100% { -moz-transform: scaleY(0.4) }  20% { -moz-transform: scaleY(1.0) }}
@-o-keyframes stretchdelay {0%, 40%, 100% { -o-transform: scaleY(0.4) }  20% { -o-transform: scaleY(1.0) }}
@keyframes stretchdelay {0%, 40%, 100% {transform: scaleY(0.4); -webkit-transform: scaleY(0.4); -moz-transform: scaleY(0.4); -o-transform: scaleY(0.4);}  20% {transform: scaleY(1.0); -webkit-transform: scaleY(1.0); -moz-transform: scaleY(1.0); -o-transform: scaleY(1.0);}}



@media (min-width: 768px)
{
	.container {width: 750px;}
	.wrapper .video .video-player-overlay h1 {font-size: 3.0em;}
	.wrapper .video .video-player-overlay p {font-size: 1.5em;}
	.wrapper .video .video-player-overlay p a.button {font-size: 0.7em !important; line-height: 1.33em;}
	.social.login a.button.facebook {width: 138px; height: 30px; font-size: 15px; margin-top: 7.5px;}
	.social.login a.button.facebook i.fa {font-size: 1.1em !important; padding-right: 15px; line-height: 0em !important; vertical-align: -15%;}
	.social.login a.button.facebook span {display: inline-block;}
	div.gas {position: relative; bottom: auto; left: auto !important; margin-left: auto !important; margin: 10px auto 20px; width: 728px; height: 90px; z-index: auto;}
	div.gas .adsbygoogle {display: block; width: 728px; height: 90px;}
	section.content .wrapper {max-width: 750px;}
	section.content header ul li:not(.brand){display: inline-block;}
	section.content header .social {display: inline-block;}
	section.content header button {display: none;}
	section.content .stage .left nav {margin-top: 10px;}
	section.content .stage .showcase .left {padding: 0px; width: 100%;}
	section.content .stage .showcase a .post h4 {font-size: 2em;}
	section.content .stage .showcase .right {padding: 0px; width: 100%;}
	section.content .stage .showcase .right a {width: 50%; height: auto; float: left;}
	section.content .audience article h1 {font-size: 2.5em;}
	section.content .audience article p{font-size: 1.5em;}
	section.content .featured div.feat {width: 50%;}	
	section.modal {width: 750px; height: auto; top: 20%; left: 50%; margin-left: -375px;}
	section.modal .audience article h1 {font-size: 1.6em; }
	section.modal .audience article h1 small{font-size: 0.5em !important;}
	section.modal .audience article p{font-size: 1.0em;}
	section.content .featured.admin .site-stats span {float: none;}

}

@media (min-width: 992px)
{
	.container {width: 970px;}
	.wrapper .video .video-player-overlay h1 {font-size: 3.0em;}
	.wrapper .video .video-player-overlay p {font-size: 1.5em;}
	.wrapper .video .video-player-overlay p a.button {font-size: 0.7em !important; line-height: 1.33em;}
	section.content .wrapper {max-width: 970px;}
	section.content header ul li:not(.brand){display: inline-block;}
	section.content header .social {display: inline-block;}
	section.content header button {display: none;}
	section.content .stage .loading-wrapper {width: 66.66666%;}
	section.content .stage .left {width: 66.66666%;}
	section.content .stage .left nav {display: none;}
	section.content .stage .right {visibility: visible; height: auto;}
	section.content .stage .showcase .left {padding: 0px; width: 50%;}
	section.content .stage .showcase a .post h4 {font-size: 2em;}
	section.content .stage .showcase .right {padding: 0px; width: 50%;}
	section.content .stage .showcase .right a {width: 50%; height: auto; float: left;}
	section.content .audience article h1 {font-size: 2.5em;}
	section.content .audience article p{font-size: 1.5em;}
	section.content .featured div.feat {width: 32.33333%;}
	section.modal .audience article h1 {font-size: 1.6em; }
	section.modal .audience article h1 small{font-size: 0.5em !important;}
	section.modal .audience article p{font-size: 1.0em;}

@media (min-width: 1200px)
{
	.container {width: 1170px;}
	.wrapper .video .video-player-overlay h1 {font-size: 3.0em;}
	.wrapper .video .video-player-overlay p {font-size: 1.5em;}
	.wrapper .video .video-player-overlay p a.button {font-size: 0.7em !important; line-height: 1.33em;}
	section.content .wrapper {max-width: 1170px;}
	section.content header ul li:not(.brand){display: inline-block;}
	section.content header .social {display: inline-block;}
	section.content header button {display: none;}
	section.content .stage .loading-wrapper {width: 66.66666%;}
	section.content .stage .left {width: 66.66666%;}
	section.content .stage .left nav {display: none;}
	section.content .stage .right {visibility: visible; height: auto;}
	section.content .stage .right .playlist .scroll-bar,section.content .stage .right .playlist .viewport {height: 388px;}
	section.content .audience article h1 {font-size: 2.5em;}
	section.content .audience article p{font-size: 1.5em;}
	section.content .featured  div.feat{width: 33.33333%;}
	section.modal .audience article h1 {font-size: 1.6em; }
	section.modal .audience article h1 small{font-size: 0.5em !important;}
	section.modal .audience article p{font-size: 1.0em;}
	
}