/* Datalife Engine template 
creation date: 05 april 2019, 
version dle: 12-13
*/

/* 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 {background-color: #202020; color: #fff; 
font-size: 15px; font-family: 'Rubik'; font-weight: 300; font-style: normal;}
a {text-decoration: none; color: #fff;}
a:hover {color: #ff9900;}

button, textarea, input[type="text"], input[type="password"] {appearance: none; -webkit-appearance: none; 
	font-size: 15px; font-weight: 300; font-family: 'Rubik' !important;}

.button, .btn, .pagi-load a, .up-second li a, .usp-edit a, .qq-upload-button, button:not(.color-btn):not([class*=fr]), 
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a 
{display: inline-block; text-align: center; padding: 0 30px; height: 40px; line-height: 40px; 
border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 400; color: #000; background: #ff9900}
.button:hover, .btn:hover, .up-second li a:hover, .usp-edit a:hover, .qq-upload-button:hover, 
.pagi-load a:hover, .usp-btn a:hover,
button:not(.color-btn):hover, html input[type="button"]:hover, input[type="reset"]:hover, 
input[type="submit"]:hover, .meta-fav a:hover 
{background-color: #ff9900; color: #000;}
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"] {height: 40px; line-height: 40px;
border-radius: 8px; border: 0; padding: 0 15px;}
select {height: 40px; border: 0; padding: 0 15px;}
textarea {padding: 15px; overflow: auto; vertical-align: top; resize: vertical;}
input[type="text"], input[type="password"], select, textarea {width: 100%; background-color: #111; color: #fff; 
box-shadow: inset 0 0 0 1px #111, inset 1px 2px 5px rgba(0,0,0,0.2);}
select {width: auto;}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus 
{box-shadow: inset 0 0 0 1px #111, inset 1px 2px 5px rgba(0,0,0,0.1);}
input::placeholder, textarea::placeholder {color: #fff; opacity: 0.5; font-size: 15px;} 
input:focus::placeholder, textarea:focus::placeholder {color: transparent}

.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit {overflow: hidden; position: relative;}
.img-resp {padding-top: 55%;}
.img-resp-vert {padding-top: 145%;}
.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; bottom: 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, #dle-content {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:column;-webkit-flex-direction:column;flex-direction:column}
.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, #dle-content {-webkit-justify-content:flex-start;justify-content:flex-start;}
.fx-between {-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.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%; min-width: 50px;}

b, strong, .bolder {font-weight: 500;}
.anim, .th-img:after, .categ-img:after {transition: all .2s;}
.title, h1, h2, h3, h4, h5 {font-size: 24px; font-weight: 400; margin-bottom: 20px;}
.rounded {border-radius: 8px;}
.icon {display: inline-block; vertical-align: middle;}
.icon-search {width: 18px; height: 18px; background: url(../images/isearch.png);}
.icon-eye {width: 23px; height: 17px; background: url(../images/ieye.png);}
.icon-clock {width: 18px; height: 18px; background: url(../images/iclock.png);}
.icon-like {width: 19px; height: 19px; background: url(../images/ilike.png);}
.icon-video {width: 16px; height: 12px; background: url(../images/ivideo.png);}
.icon-left {width: 15px; height: 25px; background: url(../images/ileft.png);}
.icon-right {width: 15px; height: 25px; background: url(../images/iright.png);}
.icon-fstar {width: 19px; height: 18px; background: url(../images/ifstar.png);}
.icon-ftag {width: 19px; height: 18px; background: url(../images/iftag.png) no-repeat;}
.icon-farrow {width: 19px; height: 17px; background: url(../images/ifarrow.png);}
.icon-fhashtag {width: 18px; height: 18px; background: url(../images/ifhashtag.png);}
.icon-fdownload {width: 18px; height: 18px; background: url(../images/ifdownload.png);}
.icon-fshare {width: 18px; height: 18px; background: url(../images/ifshare.png);}
.icon-fchat {width: 19px; height: 18px; background: url(../images/ifchat.png);}
.icon-fcalendar {width: 30px; height: 30px; background: url(../images/ifcalendar.png);}
.icon-feye {width: 38px; height: 26px; background: url(../images/ifeye.png);}
.icon-fclock {width: 30px; height: 30px; background: url(../images/ifclock.png);}
.icon-flike {width: 28px; height: 26px; background: url(../images/iflike.png);}
.icon-fdislike {width: 28px; height: 26px; background: url(../images/ifdislike.png);}
.hidden, #dofullsearch {display: none;}
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 20px; font-size: 24px; font-weight: 400;}
#dle-content > *:not(.thumb) {width: 100%;}


/* GRID
----------------------------------------------- */
.wrap {min-width:320px; padding-top: 15px;} 
.wrap-container {max-width:1230px; margin:0 auto; width: calc(100% - 30px); position: relative;}
.header-in {height: 80px; background-color: #252525;}
.content {padding: 40px 0; min-height: 80vh;}
.footer {text-align: center; color: #fff;}


/* HEADER, FOOTER
----------------------------------------------- */
.hmenu {font-size: 0;}
.hmenu li {display: inline-block; vertical-align: top; margin: 0 45px;}
.hmenu li a {display: block; height: 80px; line-height: 80px; font-size: 18px; text-transform: uppercase; color: #808080;}
.hmenu li a.is-active {color: #ff9900; text-shadow: 0 0 30px #ff9900;}
.hmenu li a:hover {color: #fff;}
.logo {display: inline-block; position: absolute; left: 100px; top: 50%; transform: translate(0%,-50%);}
.btn-search {width: 18px; height: 18px; cursor: pointer; position: absolute; right: 100px; top: 50%; margin-top: -9px;}
.search-wrap {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10;
	background-color: #252525; border-radius: 10px; padding: 20px; display: none;}
.search-box {width:100%; position:relative; max-width: 500px; margin: 0 auto;}
.search-box input, .search-box input:focus {box-shadow:none; padding: 0 45px 0 10px;
background-color:#252525; color: #fff; height: 40px; line-height: 40px; border-radius: 3px;}
.search-box button {position:absolute; right:0; top:0; z-index:10; padding:0 !important; 
background:transparent !important; width: 40px; box-shadow: none !important;}
.search-box input:not(:focus)::placeholder {color: #fff; opacity: 1; font-size: 18px;}

.ft-menu {background-color: #252525;}
.ft-copyright {font-size: 14px; margin-top: 20px; padding: 90px 0 20px 0; 
	background: url(../images/logo.png) center top no-repeat;}


/* SECT
----------------------------------------------- */
.sect {margin-bottom: 10px;}
.sect-desc-text {line-height: 22px; color: #808080; margin-bottom: 60px;}
.sect-desc .title {text-align: center; margin-bottom: 15px; font-size: 30px; 
	text-transform: uppercase; font-weight: 500; padding-top: 10px;}
.sect-header .title {margin-bottom: 0;}
.title span {color: #ff9900;}
.sect-header {margin-bottom: 20px; background-color: #252525; padding: 15px;}
.sect-items {margin: 0 -7px;}
.sort {font-size: 0; padding-right: 15px; white-space: nowrap;}
.sort li {display: inline-block; margin-left: 30px;}
.sort a {font-size: 15px; display: block; color: #808080;}
.sort li[class] a, .sort a:hover  {color: #ff9900; text-shadow: 0 0 30px #ff9900;}
.btn-more {padding: 10px 0 30px 0; text-align: center; font-weight: 400; font-size: 20px; 
	text-transform: uppercase; text-align: center; width: 100%;}


/* THUMB
----------------------------------------------- */
.thumb {width: 33.33%; padding: 0 7px; margin-bottom: 20px;}
.th-in:hover .th-img {border-color: #ff9900;} 
.th-in:hover .th-meta {opacity: 0;}
.th-img {border: 1px solid transparent;}
.th-title {margin-top: 10px; line-height: 18px; height: 36px; overflow: hidden;}
.th-meta {position: absolute; z-index: 10; left: 10px; right: 10px; bottom: 10px; background-color: rgba(0,0,0,0.2);
height: 54px; line-height: 54px; border-radius: 27px; overflow: hidden; padding: 0 35px;}
.th-meta-bg {background-repeat: no-repeat; background-position: center bottom;
background-size: calc(100% + 20px) auto; filter: blur(10px);
position: absolute; left: 0; bottom: -10px; width: 100%; height: 128px;}
.th-meta-item {position: relative; z-index: 10; color: #fff;}
.th-meta-item.to-center {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.th-meta-item .icon {margin-right: 10px; position: relative; top: -1px;}
.th-meta-item .icon-like {top: -3px;}

.categ {width: 20%; padding: 0 10px; margin-bottom: 10px;}
.categ-title {height: auto; overflow: visible;}
.categ .th-img {padding-top: 78%;}
.categ-count {height: 40px; line-height: 40px; border-radius: 20px; padding: 0 10px; overflow: hidden; 
position: absolute; bottom: 10px; right: 10px; left: 140px; background-color: rgba(0,0,0,0.2);}
.categ-count .th-meta-bg {background-size: calc(100% + 150px) auto; height: 100px; width: calc(100% + 10px); 
	background-position: right bottom; left: auto; right: -10px;}


/* TAGS, RKL
----------------------------------------------- */
.sect-tags {font-size: 0;}
.sect-tags a, .sect-tags > span.ftags-caption {display: inline-block; vertical-align: top; margin: 0 6px 6px 0; 
	height: 30px; line-height: 30px; border-radius: 15px; font-size: 15px;
background-color: #252525; color: #808080; padding: 0 10px;}
.sect-tags a:hover, .tags_more a {background-color: transparent; box-shadow: inset 0 0 0 1px #ff9900; color: #ff9900;}
.sect-rkl {background-color: #252525; padding: 20px; margin-top: 40px;}
.rkl {overflow: hidden; width: 282px; margin: 0 10px 20px 10px;}
.rkl-box {margin: 0 -10px -20px -10px;}
.rkl > * {display: block;}


/* PAGS
----------------------------------------------- */
.pags {font-size: 20px; font-weight: 400; width: 100%; padding: 20px 7px 30px 7px;}
.pags-list {margin: 0 20px; color: #808080;}
.pags-list > * {display: inline-block; vertical-align: top; margin: 0 15px; height: 25px; line-height: 25px;}
.pags-list span:not(.nav_ext) {color: #ff9900; text-shadow: 0 0 30px #ff9900;}
.pags-list a {color: #808080;}
.pags-list a:hover {color: #fff;}
.pags-arrow > * {width: 15px; height: 25px; text-align: center; display: inline-block;}
.pags-arrow > *:not(:hover), .pags-arrow > span {filter: grayscale(0); opacity: 0.3;}


/* VIDEO
----------------------------------------------- */
.article > h1 {padding: 15px; border-radius: 8px; font-size: 24px; font-weight: 400;}
.fplayer {margin-bottom: 10px; background-color: #000;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame 
{width: 100%; height:550px; display: block;}
.fctrl, .fdesc, .fcomms, .article > h1 {background-color: #252525; margin-bottom: 10px;}
.fctrl, .fdesc, .fcomms {padding: 20px 36px;}
.fcol {width: 48%;}
.fcomms {margin-bottom: 35px;}
.fctrl {padding-top: 0; padding-bottom: 0;}

.ftabs > * {color: #808080; height: 50px; line-height: 50px;}
.ftabs .is-active, .ftabs > *:hover {color: #ff9900; text-shadow: 0 0 30px #ff9900; cursor: pointer;}
.ftabs > *:not(:hover):not(.is-active) .icon, .frate a:not(:hover) {filter: grayscale(1); opacity: 0.7;}
.ftabs .is-active .icon, .ftabs > *:hover .icon {box-shadow: 0 0 30px rgba(255,153,0,0.5);}
.ftabs-box {display: none;}
.ftabs-box.visible {display: block;}
.fsoc {text-align: center;}

.fmeta-item {color: #fff; height: 50px; line-height: 50px;}
.frate {color: #888;}
.frate-likes {margin-right: 35px;}
.frate a:hover + * {color: #ff9900;}
.frate a {display: block; position: relative; top: -2px;}
.frate a:nth-child(3) {top: 0px;}

.ftext {color: #808080; line-height: 22px;}
.ftext a {color: #ff9900; text-decoration: underline;}
.ftags {padding-left: 120px; position: relative;}
.ftags + .ftags {margin-top: 10px;}
.ftags-caption {padding: 0 !important; background-color: transparent !important; 
	color: #fff !important; position: absolute; left: 0; top: 0;}
.ftags a:not(:hover) {background-color: #202020;}
.ftags .icon, .ftabs .icon, .fmeta-item .icon {margin-right: 10px; position: relative; top: -1px;}

.comm-item {margin-bottom: 10px;}
.comm-left {width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; 
	position: relative; background-color: #202020;}
.comm-text {margin-top: 5px; color: #fff;}
.comm-author {font-weight: 400; margin-right: 10px; color: #ff9900;}
.comm-author a {font-weight: 400; color: #ff9900;}
.comm-date {color: #808080;}
.comm-letter {position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 40px; text-align: center; 
background-color: #000; color: #fff; font-weight: 400; text-transform: uppercase;}

.fcomm-add input, .fcomm-add textarea {width: 100%;	background-color: #202020; box-shadow: none;}
.fcomm-add input {height: 40px; line-height: 40px; margin-bottom: 5px; padding: 0 20px; border-radius: 20px 20px 8px 8px;}
.fcomm-add textarea {padding: 15px 20px; height: 95px; border-radius: 8px 8px 8px 20px;}
.fcomm-add-textarea button {padding: 0 !important; background-color: #2d2d2d !important; border-radius: 8px 8px 20px 8px !important;
margin-left: 5px; width: 75px; height: 95px !important; line-height: 95px !important;}


/* FULL STORY STATIC
----------------------------------------------- */
.mejs-container {max-width:100% !important;}
.full-text {line-height: 22px; color: #808080}
.full-text img:not(.emoji) {max-width:100%; margin:10px 0;}
.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:#ff9900;}
.full-text a:hover {text-decoration:none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0;}
.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
----------------------------------------------- */
.ac-protect, .ac-textarea .bb-editor + br, .comments_subscribe, .mass_comments_action, 
.fcomm-add-textarea br {display: none;}




/* ADAPTIVE
----------------------------------------------- */
.side-panel {width:280px; height:100%; overflow-x:hidden; overflow-y:auto; background-color:#252525;
padding:30px 15px; z-index:9999; position:fixed; left:-320px; top:0; transition:left .4s;}
.side-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:9998; display:none;}
body.opened-menu {overflow: hidden; width: 100%; height: 100%;}
.side-panel .hmenu li a {height: 40px; line-height: 40px;}
.side-panel .hmenu li {width: 100%; margin: 0;}

.toggle {cursor: pointer; width: 30px; height: 40px; position: relative; display: none; 
position: absolute; left: 10px; top: 50%; margin-top: -20px;}
.toggle-icon {position: relative; margin-top: 18px; margin-bottom: 18px;}
.toggle-icon::before {top: -8px;}
.toggle-icon::after {top: 8px;}
.toggle-icon::after, .toggle-icon::before {content: ""; position: absolute;}
.toggle-icon, .toggle-icon::after, .toggle-icon::before {background-color: #808080; display: block;
	height: 2px; width: 30px; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
.toggle-icon::before {width: 30px; left: 0px;}
.toggle-icon::after {width: 30px; left: 0px;}

@media screen and (max-width: 1230px) {
.wrap-container {max-width:1000px; width: calc(100% - 20px);}
.header .hmenu {display: none;}
.wrap {padding-top: 60px;}
.header-in {height: 60px; width: 100%; border-radius: 0;}
.header {position: fixed; z-index: 999; left: 0; top: 0; width: 100%;}
.logo {height: 60px; padding-top: 5px; max-width: 240px; overflow: hidden; left: 50%; transform: translate(-50%,-50%);}
.logo img {max-height: 50px;}
.toggle {display: block;}
.btn-search {right: 10px;}
.search-wrap {padding: 10px; height: 60px;}
.sect-desc .title {padding-top: 0;}
.sort {padding-right: 0;}
.categ {width: 25%;}

.fctrl, .fdesc, .fcomms {padding-left: 10px; padding-right: 10px;}
.fcol {width: 100%;}
.ftext {margin-bottom: 15px;}
.comm-item:last-child {margin-bottom: 25px;}
.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;}
.thumb {width: 50%;}
.categ {width: 33.33%;}
}

@media screen and (max-width: 760px) {
.wrap-container {max-width:640px;}
.sort {width: 100%;} 
.sort {display: none;}
.categ {width: 50%;}

.dcont button {font-size:12px; padding:0 15px !important;}
.comments-tree-list .comments-tree-list {padding-left:0px !important;}
.comments-tree-list .comments-tree-list:before {display:none;}
.mass_comments_action {display:none;}
}

@media screen and (max-width: 590px) {
.wrap-container {max-width:480px;}
.thumb {width: 100%;}
.categ .th-img {padding-top: 59%;}
.pags-arrow {display: none;}
.pags-list {margin: 0; text-align: center;}
.sect-desc .title {font-size: 22px;}
.ft-menu {padding: 15px;}
.ft-menu li {margin: 0; width: 100%;}
.ft-menu li a {line-height: 40px; height: 40px;}

.article > h1 {font-size: 18px;}
.fctrl {padding: 0; background-color: transparent; margin: 0; padding-top: 60px; position: relative;}
.fctrl > *, .frate {padding: 0 10px; background-color: #252525; border-radius: 8px; margin-bottom: 10px;}
.fmeta-item {font-size: 11px;}
.frate {position: absolute; left: 0; top: 0; right: 0; margin: 0; justify-content: center; font-size: 15px;}
.ftab:first-child, .ftab:nth-child(3) {width: 50%;}
.ftabs {padding-top: 10px; padding-bottom: 10px;}
.ftabs > * {height: 40px; line-height: 40px;}
.ftags {padding: 0;}
.ftags-caption {position: static; margin-right: 0; width: 100%;}
.fcomm-add textarea {border-radius: 8px 8px 8px 8px; margin-bottom: 10px;}
.fcomm-add-textarea button {border-radius: 8px 8px 20px 20px !important; margin: 0; width: 100%; height: 50px !important; line-height: 50px !important;}

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

.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;}
.categ {width: 100%;}
.th-meta {padding: 0 20px;}
.th-title {height: auto; overflow: visible;}
.categ .th-meta-item {text-align: center;}

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