/* SET BASE
----------------------------------------------- */
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
img {max-width: 100%;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}

body {font: 14px Roboto, Tahoma, Geneva, sans-serif; line-height: 2.5; padding: 0; margin: 0;        
color: #000; background: #ededed; min-height: 100%; width: 100%; font-weight: 300;}
a {color: #000; text-decoration: none;}
a:hover, a:focus {color: #f44336; text-decoration: none;}
h1 {font-weight: 400; font-size: 24px;}
h2 {font-weight: 400; font-size: 18px;}
h3 {font-weight: 400; font-size: 16px;}
h4 {font-weight: 400; font-size: 14px;}
h5 {font-weight: 400; font-size: 10px;}

button, textarea, input[type="text"], input[type="password"] {appearance: none; -webkit-appearance: none; font-size: 16px; 
font-family: Roboto !important;}

.btn, button, input[type="button"], input[type="submit"] {
display: inline-block; text-align: center; padding: 0 15px; height: 40px; line-height: 40px; cursor: pointer;  
background-color: #f1656f; color: #fff; font-size: 14px; border: 0px solid #e3e3e3; border-radius: 4px;}
.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover 
{background-color: #f1656f; color: #fff; border-color: #9b59b6;}
button:active, input[type="button"]:active, input[type="submit"]:active {box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);}

input[type="text"], input[type="password"] {display: block; width: 100%; height: 40px; line-height: 40px; padding: 0 15px;
background-color: #eee; color: #222;  border-radius: 4px; box-shadow: none; border: 0;}
input[type="text"]:focus, input[type="password"]:focus {}
input::-webkit-input-placeholder {color: #222; opacity: 0.5;}
input::-moz-placeholder {color: #222; opacity: 0.5;}
input:-moz-placeholder {color: #222; opacity: 0.5;}
input:-ms-input-placeholder {color: #222; opacity: 0.5;} 
input:focus::-webkit-input-placeholder {color: transparent}
input:focus::-moz-placeholder {color: transparent}
input:focus:-moz-placeholder {color: transparent}
input:focus:-ms-input-placeholder {color: transparent} 

select {height: 40px; border: 1px solid #e3e3e3; background-color: #eee; color: #222;}
textarea {display: block; width: 100%; padding: 15px; overflow: auto; vertical-align: top; resize: vertical; height: 90px; 
background-color: #eee; color: #222;  border-radius: 4px; box-shadow: none; border: 0;}

.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit 
{overflow: hidden; position: relative; background-color: #222;}
.img-resp {padding-top: 141%;}
.img-resp-vert {padding-top: 140%;}
.img-resp-sq {padding-top: 100%;}
.img-box img, .img-square img, .img-resp img, .img-resp-vert img, .img-resp-sq img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img, .img-resp-sq img {position: absolute; left: 0; top: 0;}
.img-wide img {width: 100%; display: block;}
.img-fit img {width: 100%; height: 100%; object-fit: cover;}
.nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.fx-row {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.fx-col {display:-ms-flexbox;display:-webkit-flex;display:flex; 
-ms-flex-direction:content;-webkit-flex-direction:content;flex-direction:content}
.fx-center {-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fx-middle {-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.fx-start {-webkit-justify-content:flex-start;justify-content:flex-start;}
.fx-first {-ms-flex-order: -1;-webkit-order: -1;order: -1;}
.fx-last {-ms-flex-order: 10;-webkit-order: 10;order: 10;}
.fx-1 {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;}

@font-face {font-family: 'Material Icons'; font-style: normal; font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts//MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.mat-icon, [data-icon]:before {font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: inherit;
display: inline-block; vertical-align: top; line-height: inherit; text-transform: none; 
letter-spacing: normal; word-wrap: normal; white-space: nowrap;
direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}
[data-icon]:before {content: attr(data-icon);}

b, strong, h1, h2, h3, h4, h5 {font-weight: 400;}
.icon-left .mat-icon, .icon-left:before {margin-right: 0.4em;}
.hidden, #dofullsearch {display: none;}


/* BASIC GRID
----------------------------------------------- */
.wrap {min-width:320px; overflow:hidden; position: relative;}
.wrap-container {max-width:1200px; margin:0 auto; position:relative; z-index:10;}
.topper {background-color: #fff; box-shadow: 0 20px 20px -20px rgba(0,0,0,0.1); 
padding: 8px 2000px; margin: 0 -2000px 30px -2000px; height: 70px;}
.content {min-height: 80vh;}
.nav-content {width: 100%;}
.nav-side {width: 200px; margin-right: 30px;}
.bottomer {background-color: #fff; border-top: 1px solid #e3e3e3; position: relative; 
	padding: 15px 2070px; margin: 60px -2000px 0 -2000px;}
	
#gotop{position:fixed; width:50px; height:50px; line-height:50px; right:10px; bottom:10px; cursor:pointer; font-size:30px;
z-index:9998; display:none; opacity:1; background-color:#fff; color:#888;
border-radius:50%; text-align:center; box-shadow: 0 1px 4px rgba(0,0,0,0.2);}


/* HEADER
----------------------------------------------- */
.logo {display: block; height: 70px; width: 320px; float: left;}
.topper-menu {float: left;}
.topper-menu li {float: left; margin-left: 100px;}
.topper-menu li a {display: block; line-height: 70px;}
.topper-menu a:before {color: #f1656f; margin-right: 10px; font-size: 18px;}
.topper-menu li a:hover {text-decoration: underline;}
.search-box {margin-top:15px; float: right;}
.search-input {width:100%; position:relative;}
.search-input input, .search-input input:focus {width:100%; padding:0 30px 0 15px; border-radius:0px; 
background-color:#fff; color:#000; height:40px; line-height:40px; box-shadow: inset 0 0 0 1px #c1d187;}
.search-box button {position:absolute; right:0; top:0;
padding:0 !important; width:40px; 
font-size:18px; background:transparent !important; color: #000 !important;}


/* NAV
----------------------------------------------- */
.nav {margin: 0 -10px 20px -10px;}
.nav li {width: 20%; position: relative;}
.nav li a {display: block; padding: 0 10px; line-height: 30px;}
.nav li a:hover, .nav li a.is-active {background-color: #c1d187; color: #000;}
.nav li span {position: absolute; right: 20px; top: 0; display: inline-block; line-height: 30px; 
	font-size: 12px; opacity: 0.5;}
.nav-side .nav li {width: 100%;}
.nav-full {background-color: #fff; box-shadow: 0 -20px 20px -20px rgba(0,0,0,0.1); 
padding: 0px 2000px; margin: 60px -2000px -80px -2000px;}
.nav-full .nav li {width: 25%;}
li span i {font-style: normal; display: inline; margin-left: 3px;}

/* SECT
----------------------------------------------- */
.main-content > h1, .main-content > h2 {font-size: 24px; margin-bottom: 20px; font-weight: 400;}
.site-desc > h1, .site-desc > h2 {font-size: 24px; margin-bottom: 10px; font-weight: 400;}
.site-desc {margin-bottom: 30px;}
.site-desc > p + p {margin-top: 10px;}
.floats .site-desc {padding-left: 15px; padding-right: 15px;}
.site-desc a {text-decoration:underline; color:#f1656f;}
h1 span, h2 span {color: #f1656f;}
.speedbar {font-size: 12px; color: #888; background-color: #eee; 
	margin: -20px -30px 15px -30px; padding: 10px 30px;}
.speedbar a {}
.speedbar a:hover {text-decoration: underline;}


/* THUMBS
----------------------------------------------- */
.floats {margin: 0 -15px;}
.float {float: left; width: 20%;  padding: 0 15px 5px 15px;}
.float-inner {position: relative;}
.float-link {display: block;}
.float-img {box-shadow:0 3px 8px 0 rgba(0,0,0,0.5);}
.float-img:before {content: ''; position:absolute; z-index: 10; left:0; bottom:0; width:100%; height:100px; 
background: none;}
.float-title {line-height: 20px; height: 20px; overflow: hidden; margin-top: 10px; 
white-space: nowrap; text-overflow: ellipsis;}
.float-meta {display: inline-block; border-top: 1px solid #f1656f; margin-top: 5px; padding-top: 1px;}
.float-meta > div {display: inline-block; margin-right: 10px; height: 16px; line-height: 16px; font-size: 12px;}
.float-meta > div:before {opacity: 0.5; font-size: 16px;}
.float-meta > div.float-rate:before {opacity: 1; color: #6cc43c;}
.float-meta > div.float-rate.low:before {content: "thumb_down"; color: #f1656f;}
.float-edit {right:10px; top:5px; position: absolute;}
.float-edit a {color: #fff; font-size: 16px;}

.float-model {width: 20%; text-align: center;}
.float-model .img-resp {padding-top: 140%;}
.float-model .float-title {height: 20px; margin-top: 15px;}
.float-model .float-meta {bottom: 50px;}
.float-model .float-meta > div {margin: 0 5px;}


/* PAGS
----------------------------------------------- */
.pagination {text-align: center; font-size: 16px; margin-bottom: 30px;}
.pagination-in > span, .pagination-in > a {display: inline-block; vertical-align: middle; margin: 0 2px 10px 2px; 
height: 40px; line-height: 40px; min-width: 40px; text-align: center; background-color: #fff; padding: 0 10px; 
border: 1px solid #e3e3e3;}
.pagination-in > span:not(:first-child):not(:last-child):not(.nav_ext) {background-color: #82963c; color: #fff;}


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



/* FULL
----------------------------------------------- */
.full-page {background-color: #fff; box-shadow: 0 20px 20px -20px rgba(0,0,0,0.1); padding: 10px 30px 20px 30px;}
.video-page h1 {margin-bottom: 20px;}
.vpm {margin: 0 -30px; margin-bottom: 20px; padding: 10px 30px; 
	border-bottom: 1px solid #f0f0f0; background-color: #fff;}
.related {width: 100%;}
.related h2 {margin: 20px 0;}
h1 + .full-page {padding-top: 0;}

.vp-tags + .vp-desc {margin-top: 10px;}
.vp-tags {line-height:24px;}
.vp-tags a {color: #0088cf; text-decoration: underline;}
.vp-tags a:hover {text-decoration: none;}

.player-behavior {margin:0 -30px;}
.behavior-box {width: 370px; padding: 20px; text-align: center;}
.player-box {width: calc(100% - 370px); width: -webkit-calc(100% - 370px); 
background: #000; min-height: 200px;}
.behavior-box img {display: block;}

.behavior + .behavior {margin-top: 20px;}
.behavior-img {width: 95px; height: 95px; overflow: hidden;}
.behavior-desc {width: calc(100% - 110px); width: -webkit-calc(100% - 110px); opacity: 0.5;}
.behavior-desc {color: #fff; opacity: 0.7;}
.behavior:hover .behavior-desc {opacity: 1;}
.behavior {}
.behavior-title {line-height: 22px; max-height: 88px; overflow: hidden; color:#222;}

.vpm-float {display: inline-block; float: left; height: 40px; line-height: 40px; 
	margin-left: 30px; font-size: 14px;}
.vpm-float:before {opacity: 0.4; margin-right: 5px; font-size: 18px;}
.vpm-fav:before {opacity: 1; color: #f1656f;}
.vpm-fav > div {display: inline-block; vertical-align: top;}
.v-fav-in:hover {cursor: pointer; color: #f1656f;}
.vpm-err {margin-right: 0; float: right;}
.vpm-err:before, .vpm-err a {opacity: 1; color: #f1656f; text-decoration: underline;}

.vpm-rate {white-space:nowrap; text-align:center; height: 40px; float: left;}
.rate-plus, .rate-minus, .rate-counts {display:inline-block; vertical-align:middle;}
.rate-data {display:none;}
.rate-counts {width:160px; padding-top:0px; height:40px; position: relative; font-size: 12px;	}
.rate-plus, .rate-minus {cursor:pointer; width:40px; height:40px; text-align:center; font-size:24px; 
line-height:40px; margin-right: 7px; border-radius: 50%; transition: box-shadow .3s;}
.rate-plus {background-color:#6cc43c; color: #fff;}
.rate-minus {background-color:#f1656f; color: #fff;}
.rate-plus:hover, .rate-minus:hover {box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);}
.rate-bar {width:100%; min-height:6px; height:6px; border-radius:4px; overflow:hidden; 
position:absolute; background-color:#f1656f; left: 0; right: 0; bottom: 5px;}
.rate-fill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#6cc43c; transition:width 1s linear;}
.rate-perc {margin-right:5px; font-size:18px; color:#6cc43c;}
#cookie_fav {cursor:pointer;}

/* FULL STORY STATIC
----------------------------------------------- */
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame 
{max-width:100% !important; display:block; width:100%; height:530px;}
.mejs-container {max-width:100% !important;}
.full-text {line-height: 1.7;}
.full-text img:not(.emoji) {max-width:100%; margin:10px 0; display: none;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text a {text-decoration:underline; color:#f1656f;}
.full-text a:hover {text-decoration:none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0; font-size:18px; font-weight:700;}
.full-text p {margin-bottom:10px;}
.full-text ul, .full-text ol {margin:0;}
.full-text ul li {list-style:disc; margin-left:40px;}
.full-text ol li {list-style:decimal; margin-left:40px;}


/* COMMENTS
----------------------------------------------- */
.vidoser-comms {margin-top: 20px;}
.comms-title {line-height:40px; font-weight: 500;}
.comms-title > span {font-size:14px;}
.add-comm-form {position:relative; margin:20px 0; display:none;}
.ac-soc {position:absolute; right:0px; top:-8px;}
.ac-soc:before {content:attr(data-label); display:inline-block; vertical-align:top; line-height:30px; margin-right:5px;}
.ac-soc a {display:inline-block; margin:0 0 0 3px; vertical-align:top;}
.ac-soc img {display:block; width:30px;}
.ac-inputs, .ac-textarea {margin-bottom:15px;}

.ac-av {width:40px; height:40px; border-radius:0%; float:left; margin-right:10px;
background:#fff url(../dleimages/noavatar.png) no-repeat; background-size:contain;}
.ac-title {font-weight:700; margin-bottom:15px; text-transform:uppercase;}
.ac-inputs input {width:49%;}
.ac-textarea textarea {height:85px;}
.ac-submit {}
.sec-answer + .sec-label {margin-top:10px;}
.ac-protect {margin-top:-10px; display:none;}
.ac-protect .label {font-size:12px;}
.ac-protect .sep-input {padding:10px 10px 10px 160px;}
.ac-protect input {}

.mass_comments_action {text-align:right; padding:5px 15px; background-color:#eee; margin:20px 0 0 0;}
.last-comm-link {font-size:16px; margin-bottom:10px;}
.last-comm-link a {text-decoration:underline;}
.vidoser-comms {}

.comm {background-color:#eee; padding:10px; padding-left:60px; margin-top:10px;}
.comm-av {width:40px; height:40px; float:left; margin-left:-50px;}
.comm-meta {margin-bottom:8px;}
.comm-meta span + span {margin-left:10px; opacity:0.8;}
.comm-author {font-weight:700;}
.comm-text {font:14px/18px Arial, Helvetica, sans-serif;}


/* LOGIN
----------------------------------------------- */
.login-box {background-color:#FFF; padding:20px; display:none;}
.lb-user {margin:-20px -20px 20px -20px; padding:20px; background-color:#f6f6f6;  
display:flex; flex-flow:row wrap; justify-content:center; align-items:center;}
.lb-ava {width:80px; height:80px; border-radius:50%; margin-right:20px;}
.lb-name div {font-size:18px;}
.lb-name a {margin-top:10px;}
.lb-menu a {display:block; line-height:30px; padding:0 10px; background-color:#f6f6f6;}
.lb-menu a:hover, .lb-menu a:hover .fa {background-color:#f1656f; color:#fff;}
.lb-menu a .fa {color:#593136; display: none;}
.login-box input[type="text"], .login-box input[type="password"], .login-box button, .lb-check 
{display:block; margin-bottom:20px; width:100%;}
.lb-check input {display:none;}
.lb-check input + label:before {width:14px; height:14px; margin-right:7px; cursor:pointer; position:relative; top:3px;
border-radius:3px; border:1px solid #ccc; content:""; background-color:#f6f6f6; display:inline-block;}
.lb-check input:checked + label:before {background-color:#e5050b;}
.lb-soc {margin:20px -20px -20px -20px; padding:20px; background-color:#f6f6f6; text-align:center;}
.lb-soc a {display:inline-block; margin:10px 3px 0 3px; vertical-align:top;}
.lb-soc img {display:block; width:30px;}


/* ADAPTIVE
----------------------------------------------- */
.hamburger-menu {display:none;}
.bochello-panel {width:260px; height:100%; overflow-x:hidden; overflow-y:auto; background-color:#000; 
padding:0 10px; z-index:888; position:fixed; left:-260px; top:0; transition:left .4s; -webkit-transition:left .4s;}
.bochello-panel.active {left:0;}
.close-overlay {width:100%; height:100%; background-color:rgba(0,0,0,0.5); 
position:fixed; left:0; top:0; z-index:887; display:none;}
.bochello-panel a {display:block; padding:10px 50px 10px 0; color:#FFF; font-size:14px;
color:#FFF; border-bottom:1px solid #111;}
.bochello-panel li {position:relative; color:#FFF;}
.bochello-panel li span {position:absolute; right:10px; top:10px; opacity:0.8;}
.bochello-panel li a:before {color: #f1656f; margin-right: 10px;}


@media screen and (max-width: 1220px) {
body {background-image: none;}
.wrap-container {max-width:1000px; padding-left: 15px; padding-right: 15px;}
.nav-content, .topper-menu, .nav-full {display: none;}
.js-mob, .contents {display: block;}
.bottomer:before, .bottomer-counter {display: none;}
.bottomer {padding-left: 2000px; padding-right: 2000px;}
.float-model .float-rate {display: none;}

.hamburger-menu {display: block; float: right; width: 40px; height: 40px; line-height: 40px; text-align: center; 
cursor: pointer; background-color: #f1656f; color: #fff; margin: 15px 0 0 15px; font-size: 24px;}

.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:400px;}
}

@media screen and (max-width: 950px) {
.wrap-container {max-width:768px;}
.float {width: 33.33%;}
.float-model {width: 25%;}

.behavior-box {display: none;}
.player-box {width: 100%;}
.vpm {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between; text-align: center;}
.vpm:after {display: none;}
.vpm-rate {width: 100%;}
.vpm-float {margin: 0; float: none;}
}

@media screen and (max-width: 760px) {
.wrap-container {max-width:640px;}
.float {width: 50%;}
.float-model {width: 33.33%;}
h1, h2, h3, h4, h5 {font-size: 18px !important;}
.bottomer {text-align: center;}
.bottomer a {margin: 10px 0; display: block;}
.logo {width: 60px; overflow: hidden;}
.logo img {width: 320px; max-width: 320px;}
.topper {position: relative;}
.search-box {width: auto; margin: 0; float: none; position: absolute; left: 2070px; right: 2055px; top: 15px;}

.vpm-err  {display: none;}

.ac-protect {margin-top:0px;}
.comments-tree-list .comments-tree-list {padding-left:0px !important;}
.comments-tree-list .comments-tree-list:before {display:none;}
.mass_comments_action {display:none;}
.sub-title h1 {font-size:18px; line-height:24px;}
}

@media screen and (max-width: 590px) {
.wrap-container {max-width:480px;}

.full-page, .speedbar {padding-left: 15px; padding-right: 15px;}
.player-behavior, .vpm, .speedbar {margin-left: -15px; margin-right: -15px;}
.vpm {padding-left: 15px; padding-right: 15px;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:300px;}

.ac-soc {position:static;}
.ac-inputs input {width:100%; margin-top:10px;}
.ac-protect {width:100%; float:none; margin:0;}
.ui-dialog {width:100% !important;}
.upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 20px;}
.upop-left {margin-bottom:10px; text-align:center;}
.ui-dialog-buttonset button {display:block; margin:0 0 5px 0; width:100%;}
#dofullsearch, #searchsuggestions span.seperator {display:none !important;}
.attach .download-link {margin:0 -15px 0 0; float:none; display:block; padding:0 10px;}
.attach-info {float:none;}
}

@media screen and (max-width: 470px) {
.wrap-container22 {max-width:320px;}
.float {width: 100%;}
.float-model {width: 50%;}
.site-desc p, .break-list {display: none;}
.site-desc h1, .site-desc h2 {margin-bottom: 0;}

.vpm-views, .vpm-date {display: none;}
.vpm-float {font-size: 12px;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:250px;}
}


















