:root {
	--ui-bg: #fff;
	--ui-bg-darker: #f7f7f7;
	--ui-bg-darkest: #f0f0f0;
	--ui-bg-accent: #373c41;
	--ui-text-color-on-accent: #fff;
	--ui-bdc: #ccc;
}

/* RESET, BASIC UI SETTINGS
----------------------------------------------- */
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0; box-sizing: border-box;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
img, table, iframe, video, frame, embed, object {max-width: 100%;}

::selection {background: #ff0000; color: #fff;}
b, strong, .bolder {font-weight: 700;}

button, select, textarea, input[type="text"], input[type="password"], input[type="button"], input[type="submit"] 
	{appearance: none; -webkit-appearance: none; font-size: 16px; font-family: inherit;}
button, .btn, input[type="button"], input[type="reset"], input[type="submit"], .form__btn,  .self_delete_link,
.qq-upload-button, .pm__links a, .usp__btn a {display: inline-flex; align-items: center; justify-content: center; 
	cursor: pointer; text-align: center; padding: 0 20px; height: 40px; font-size: 15px; font-weight: 400; 
	white-space: nowrap; background-color: #2d91d7; color:#fff; border-radius: 3px; box-shadow: none;}
button:hover, .btn:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,  .self_delete_link:hover,
.form__btn:hover, .qq-upload-button:hover, .pm__links a:hover, .usp__btn a:hover 
{background-color: #267fbc; color: #fff;}
button:active, input[type="button"]:active, input[type="submit"]:active {box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);}
.color-btn, [class*=fr], [class*=plyr], [class*=owl-], [id*=mceu] {padding: 0; margin: 0; 
	line-height: normal; border: 0; box-shadow: none; background: none; border-radius: 0;}

input[type="text"], input[type="password"] {height: 40px; line-height: 40px; border-radius: 4px; padding: 0 15px;}
select {height: 40px; padding: 0 15px; display: block;}
select:not([multiple]) {background-image: url(../dleimages/chevron.svg); padding-right: 30px;
	background-repeat: no-repeat; background-position: right 15px top 50%; background-size: .6em auto;}
select option {padding: 6px 10px;}
select[multiple] {padding: 0 5px;}
textarea {padding: 15px; overflow: auto; vertical-align: top; resize: vertical;}
input[type="text"], input[type="password"], select, textarea {width: 100%; background-color: #fff; color: #000; 
	box-shadow: inset 0 0 0 1px #e3e3e3, inset 1px 2px 5px rgba(0,0,0,0.1);}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus 
	{box-shadow: inset 0 0 0 1px #2d91d7, inset 1px 2px 5px rgba(0,0,0,0.1);}

input:focus::placeholder, textarea:focus::placeholder {color: transparent}

/* COMMENTS
----------------------------------------------- */
.page__comments {margin-top: 15px;}
.add-comments-form.form {padding: 0; background: none; margin-top: 20px;}
.add-comments-form .form__input, .add-comments-form__input, .add-comments-form .form__textarea-inside textarea, 
.mass_comments_action select {box-shadow: inset 0 0 0 1px #e3e3e3; border-radius: 0;}
.add-comments-form__input {margin-left: 20px;}
.add-comments-form .d-none, .comments_subscribe + br {display: none;}
.mass_comments_action {display: none; align-items: center; max-width: 800px; white-space: nowrap; margin-bottom: 20px;}
.mass_comments_action select {flex: 1 1 0; margin: 0 -8px 0 20px;}
.mass_comments_action .bbcodes {border-radius: 0; padding: 0 10px;}
.page__comments-btn {cursor: pointer; position: relative; height: 40px; line-height: 40px; font-weight: 600;
	padding: 0 20px; text-transform: uppercase; color: var(--tt-2); font-size: 12px; display: inline-block;}
.page__comments-btn::before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	background-color: var(--bg-2); z-index: -1; transform: skew(-15deg); box-shadow: var(--bsh);}
.page__comments-btn:hover::before, .page__comments-btn.is-active::before {background: var(--gradient);}
.page__comments-btn:hover, .page__comments-btn.is-active {color: #fff;}
.show-comms a {color: var(--accent); text-decoration: underline; margin-top: 10px; display: inline-block;}

.comment-item__title {font-weight: 700; font-size: 16px; margin-top: 25px; margin-bottom: 5px;}
.comment-item {margin-top: 20px;}
.comment-item__img {width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;}
.comment-item__letter {width: 100%; height: 100%; text-transform: uppercase; font-weight: 700; 
	position: absolute; left: 0; top: 0; z-index: 5; color: #fff; font-size: 18px;}
.comment-item__author {font-weight: 600; font-size: 14px;}
.comment-item__date {color: var(--tt-2); margin-top: 4px; font-size: 12px;}
.comment-item__main {margin: 8px 0 0 0;}
.comment-item__rating {white-space: nowrap; font-size: 12px;}
.comment-item__rating a {margin-left: 6px;}
.comment-item__rating a > span:first-child {color: #6ab04c; text-decoration: underline; font-weight: 400; margin-right: 2px;}
.comment-item__rating a:last-child > span:first-child {color: #eb4d4b;}


/* LOGIN
----------------------------------------------- */
.login {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden;
	background-color: var(--ui-bg); border-radius: 4px; width: 400px; 
	box-shadow: 0 0 0 10px rgba(255,255,255,0.2), 0 15px 45px rgba(0,0,0,1);}
.login__header {padding: 20px 40px; background-color: var(--ui-bg-darker);}
.login__title {font-size: 17px; font-weight: 600; padding: 1px 0; text-transform: capitalize;}
.login__close {cursor: pointer; font-size: 24px; opacity: 0.6; margin-left: 20px;}
.login__title a {border-bottom: 1px dotted var(--tt-2); margin-left: 10px; font-weight: 400;}
.login__content {padding: 20px 40px;}
.login__row {margin-bottom: 20px; position: relative; display: block; font-size: 14px;}
.login__caption {font-size: 14px; color: var(--tt); margin-bottom: 10px;}
.login__caption a {text-decoration: underline; margin-left: 6px;}
.login__input input {padding-left: 40px;}
.login__row .fa {opacity: 0.5; position: absolute; left: 0; bottom: 0; line-height: 40px; width: 40px; text-align: center;}
.login__row button {width: 100%;}
.login__social {background-color: var(--ui-bg-darker); padding: 20px 40px; text-align: center;}
.login__social-caption {font-size: 11px; text-transform: uppercase; margin-bottom: 10px;}
.login__social-btns a {display:inline-block; margin: 0 3px; vertical-align:top;}
.login__social-btns img {display:block; width:30px; height: 30px; border-radius: 50%;}
.login__avatar {width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;}
.login__menu {margin-bottom: -10px;}
.login__menu li {flex: 1 1 0; min-width: auto; max-width: 100%; margin: 0 5px 10px 5px; overflow: visible;}
.login__menu a {display: block; border-radius: 6px; padding: 10px; text-align: center; white-space: nowrap;
	background-color: var(--ui-bg-darker); box-shadow: inset 0 0 10px rgba(0,0,0,0.1); font-size: 14px;}
.login__menu .fa {display: block; height: 30px; font-size: 24px; opacity: 0.3;}
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	opacity: 0.6; background-color: #000; cursor: pointer; display: none;}
	
@media screen and (max-width: 590px) {
	.login {max-width: 90%; max-height: 90%; overflow-x: hidden; overflow-y: auto;}
	.login__header, .login__content, .login__social, .pages-bg {padding-left: 20px; padding-right: 20px;}
}

/* SNIPPETS
----------------------------------------------- */
.img-box, .img-wide, .img-responsive, .img-fit-cover {overflow: hidden; position: relative;}
.img-responsive {padding-top: 60%;}
.img-responsive--portrait {padding-top: 150%;}
.img-box > img, .img-responsive > img {width: 100%; min-height: 100%; display: block;}
.img-responsive > img {position: absolute; left: 0; top: 0;}
.img-wide img, .img-wide > a {width: 100%; display: block;}
.img-fit-cover img {width: 100%; height: 100%; object-fit: cover;}
.clr {clear: both;}
.clearfix::after {content: ""; display: table; clear: both;}
.ws-nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.line-clamp {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.vw100 {margin:0 calc((100% - 100vw)/2); padding:0 calc((100vw - 100%)/2);}
.img-mask::before {content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 70%; 
	background: linear-gradient(to top, #000 0%, transpatent 100%); opacity: 0.6;}
.d-flex, .fx-row, #dle-content {display: flex; flex-wrap: wrap; flex-direction: row;}
.fd-column, .fx-col {flex-direction: column; flex-wrap: nowrap;} 
.jc-space-between, .fx-row {justify-content: space-between;}
.jc-flex-start, .fx-start, #dle-content {justify-content: flex-start;}
.jc-center, .fx-center {justify-content: center;}
.jc-flex-end {justify-content: flex-end;}
.ai-flex-start {align-items: flex-start;}
.ai-center, .fx-middle {align-items: center;}
.ai-flex-end {align-items: flex-end;}
.order-first {order: -1;}
.order-last {order: 10;}
.flex-grow-1, .fx-1, .stretch-free-width {flex: 1 1 0; max-width: 100%; min-width: 50px;}
.btn-icon, .centered-content {display: inline-flex; justify-content: center; align-items: center;}
.icon-at-left [class*="fa-"], .icon-left .icon {margin-right: 0.5em;}
.icon-at-right [class*="fa-"], .icon-right .icon {margin-left: 10px;}
.hidden, #dofullsearch, .form__header .form__btn, .comment-item__main .quote + br, .d-none {display: none;}
.animated-element, button, .btn, .page__rating-bar-progress, 
.show-login i {transition: all .3s;}