/*=========================== GENERAL ============================*/

.columnHeightText{
    background: #f00;
    width: 20px;
    min-height: 10px;
    position: absolute;
    z-index: 999;
    opacity: 0.4;
    display: none;
}

.columnHeightText:nth-child(2) {
    background: #0f0;
    left: 35%;
}

.columnHeightText:nth-child(3) {
    background: #00f;
    left: 67%;
}

.columnHeightText:nth-child(4) {
    background: #0ff;
    left: 57%;
}

html{
    background-color:#131517;
}
body{
    background-color: #1A1C23;
    padding-top: 50px;
}

.siteWrapper{
    overflow-x:hidden;
}

main{min-height: 100vh;justify-content: flex-start;text-align: left;position: relative;}

main:hover #topics {
    /* opacity: 0.3; */
}

.scrollFixed main {
}

.modalBlanket{
	  position: fixed;
	  background: rgba(7, 8, 10, 0.8);
	  z-index: 1090;
	  backdrop-filter: blur(15px);
	  top: 0;
	  transition: all 500ms;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  text-align: center;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  overflow: auto;
}

.modalBlanket.show {
    visibility: visible;
    opacity: 1;
    transition-duration: 5s;
}

.modalBlanket .modalCard{
}

.modalBlanket .modalCard {}
.modalBlanket .modalCard .articleItem {}


.full-width{
    width: 100%;
}

.actionPage {min-height: 100vh;padding-top: 2em;padding-bottom: 10em;}

.actionPage .logo {
    position: relative;
    margin: 2em auto;
    display: block;
    width: 10%;
}

.actionPage::before {
    position: fixed;
}

.actionPage main {
    display: block;
    width: 100%;
    padding-top: 0;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.fullWidth #contentWrapper{
    align-self: flex-start;
}

.fullWidth #contentWrapper .loadingHolder {
    width: 100%;
}

.scrollFixed .fullWidth #contentWrapper {
    margin-left: calc(25%);
}

.celebration{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

.dark-bg {
    background: #131517;
}

.landscapeGate{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: none;
}

.landscapeGate.table {
    display: none;
}

.landscapeGate .logo {
    width: 150px;
}

/*=========================== SCROLLBARS ============================*/

html {
    --scrollbarBG: #ffffff;
    --thumbBG: #E8E9E9;
}
.scrollable::-webkit-scrollbar {
    width: 11px;
}
.scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.scrollable::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}
.scrollable::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color:rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color:#000;
}

/*=========================== TYPOGRAPHY ============================*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');
*{
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    line-height: 1;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-weight:700;
    color: #fff;
}

h1.underlined{position:relative;padding-bottom: 0.5em;}
h1.underlined:after {content: "";display: block;position: absolute;border-bottom: 2px solid #47494e;left: calc(50% - 50px);width: 100px;bottom: 0;}

a, a:hover, a:visited {
  color: #fff;
  text-decoration: underline;
  background-color: transparent;
}

p {
    color: #53616f;
}

hr{
    border-top-color: rgba(255, 255, 255, 0.1);
}

.faded-80{
    opacity: 0.8
}

.faded-50{
    opacity: 0.5
}

.faded-20{
    opacity: 0.2
}


/*=========================== FORMS ============================*/

.form-group {
    position: relative;
}

.form-group label {
    color: #53616f;
}

.help-block.form-error {
    position: absolute;
    bottom: 0;
    right: 1px;
    font-size: 0.8em;
    font-weight: 100;
    background: #13131c;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.3em 0.5em;
    border-radius: 9px;
    -webkit-transform: translateY(59%);
    -ms-transform: translateY(59%);
    transform: translateY(59%);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #13131c inset;
  transition: background-color 5000s ease-in-out 0s;
}



.formWrapper .form-control {
    min-height: 43px;
    background-color: #14141b;
    color: #fff;
    font-weight: 600;
    border-color: transparent;
}

.formWrapper .form-control.is-valid, .formWrapper .was-validated .form-control:valid {
    border-color: #28a745;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.formWrapper .form-control.is-invalid, .was-validated .form-control:invalid {border-color: #dc3545;}

.formWrapper select.form-control {
    -webkit-appearance: none;
    background-image: url("../img/icons/dropdown.svg");
    background-position: 95% 50%;
    background-size: 10px;
    background-repeat: no-repeat no-repeat;
}

.formWrapper .form-control::-webkit-input-placeholder {
    color: rgba(76, 76, 76, 0.13);
}

.formWrapper .form-control::-moz-placeholder {
    color: rgba(87, 87, 86, 0.13);
}

.formWrapper .form-control:-ms-input-placeholder {
    color: rgba(87, 87, 86, 0.13);
}

.formWrapper .form-control::-ms-input-placeholder {
    color: rgba(87, 87, 86, 0.13);
}

.formWrapper .form-control::placeholder {
    color: rgba(255, 255, 255, 0.05);
}

.formSec {
    max-width: 450px;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

.formWrapper {
    border: 0;
    padding: 1.5em 1.5em;
    border-radius: 0.6em;
    -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 60px -20px rgba(0, 0, 0, 1);
    background-color: #1A1C23;
}

.formWrapper.rounded {
    box-shadow: none;
    padding: 0;
}

.formWrapper.rounded .form-control{
    background-color: #26282F;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    padding: 1.3em 1.5em;
    font-size: 1.2em;
}

.formWrapper .form-control:disabled, .formWrapper .form-control[readonly] {
    opacity: 0.4;
}

.formWrapper.rounded .form-control::placeholder {
    color: rgba(255, 255, 255, 0.2);
}


.closeBtn {
    position: absolute;
    right: 1.5em;
    top: 2em;
    display: block;
    height: 25px;
    width: 20px;
}

.closeBtn img {
    max-width: 20px;
}

.goBack {
    position: absolute;
    left: 1.5em;
}

.lastSlide .goBack,
.firstSlide .goBack {
    opacity: 0;
}

.goBack .icon {
    font-size: 1.4em;
    color: #9d9d9d;
}

.formWrapper h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.9em;
    color: #fff;
}

.formWrapper .signupSlider,
.formWrapper .activateSlider {
    width: 100%;
    height: auto;
}

.formWrapper .formStep {
    padding: 0 1em;
    height: auto;
}

.formWrapper .statusCompleted {}

.formWrapper .statusCompleted h2 {
    color: #fff;
    text-align: center;
    font-size: 2.6em;
}

.formWrapper .statusCompleted p {
    color: #fff;
    text-align: center;
    line-height: 1.4em;
    font-size: 1.4em;
}

.formWrapper .formStep h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #fff;
    opacity: 0.1;
}

.formGroup {
    display: block;
    margin-bottom: 1em;
}

.formGroup label {
    position: relative;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 100;
    font-size: 0.8em;
    padding: 0.4em 0em;
    line-height: 1;
    margin-bottom: 0;
    z-index: 9;
}

.formWrapper .formStep .btn {
    display: block;
    padding-top: .75em;
    padding-bottom: .75em;
    width: 100%;
    font-weight: 700;
    border: 0px;
}

.formWrapper .formStep .formCheck {
    text-align: left;
    font-size: 1em;
    font-weight: 400;
    display: flex;
    align-items: center;
    color: #ffffff;
}

.formWrapper .formStep .formCheck + .form-error {
    display: none;
}

.formWrapper .formStep .formCheck label {
    margin-left: 0.9em;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.formWrapper .formStep .formCheck label small {
    display: block;
    color: #9A9A9A;
}

.formWrapper .formStep .formCheck input {
    opacity: 0;
}

.formWrapper .formStep .formCheck .customCheckbox {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    background-color: #13131c;
    border: 2px solid #13131c;
    /* margin-top: -1em; */
    margin-left: -2em;
}

.formWrapper .formStep .formCheck .customCheckbox:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    top: 20%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    background-image: url('../img/icons/checkmark.svg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
}

input[type=checkbox].is-invalid + span {
    border: 2px solid #ea0001 !important;
}

.formWrapper .formStep .formCheck input.form-check-input:checked~.customCheckbox:after,
.formWrapper .formStep .formCheck input.form-check-input:checked~.customCheckbox:before {
    opacity: 1;
}

.btn.submit span {
  opacity: 1;
  width: 1em;
  height: 1em;
  margin-bottom: 0.1em;
  margin-right: -1em;
  transition: all 300ms ease;
  display: inline-block;
  position: relative;
  left: 0em;
}

.loading .btn.submit span {
    opacity: 1;
    left: 0;
}


/*=========================== BUTTONS ============================*/

.btn, .btn:hover, .btn:focus{
    border-radius: 2em;
    outline: none;
    font-weight: bold;
    color: #fff;
    transition-property: all;
    box-shadow: 0 0 0 #000;
    text-decoration: none;
    text-transform: uppercase;
}

.btn.faded-50{
	opacity: 0.5
}

.btn.faded-20{
	opacity: 0.2
}

.btn.faded-20:hover, .btn.faded-50:hover{
	opacity: 1
}

.btn-icon, .btn-icon:hover {
    padding: 0.3em;
}

.btn-icon i {
    font-size: 1.4em;
}

.btn-category, .btn-category:hover, .btn-category:focus {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
    font-size: 1.3em;
    text-align: left;
    font-weight: 700;
    padding: 0.2em 0em;
    display: block;
}

.btn-primary, .btn-primary:hover, a.btn-primary, a.btn-primary:hover {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #fff !important;
}

.btn-topic, .btn-topic:hover {
    color: #fff;
    background-color: #26282E;
    border-color: #26282E;
    font-size: 0.9em;
    text-align: left;
    font-weight: 700;
    display: inline-block;
    padding: 0.4em 0.4em 0.4em 0.9em;
    align-items: center;
    width: auto;
    margin-right: 1em;
    box-shadow: 0 0px 0px rgba(0,0,0,0.2);
}

.btn-topic.hot {padding-left: 0.4em;}

.btn-topic:hover {
    /* background-color: #30353d; */
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.btn-topic:hover:active {
    background-color: #fff;
    color: #1b1c24;
}

.btn-topic span {
    flex-grow: 1;
    font-weight: 700;
    padding: 0.6em 0.1em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.btn-topic i {
    padding: 0em 0em;
    font-size: 1.2em;
}

.btn-topic .pin {
    width: 1.5em;
    text-align: center;
    margin-left: 0.2em;
    transform: rotate(-45deg);
    display: inline-block;
}

.btn-topic .pin.icon-pin-outline {
    opacity: 0.1;
    transform: rotate(0deg) scale(1);
    transition: all 300ms cubic-bezier(0.4, -0.7, 0.65, 1.54);
}

.btn-topic .pin:hover.icon-pin-outline {transform: rotate(-45deg) scale(1.2);}

.btn-topic .pin.icon-pin-outline:hover {
    opacity: 0.6;
}

.btn-share, .btn-share:hover {
    color: #fff;
    background-color: #fff;
    border-color: transparent;
}

.btn-share.fb{background-color:#3b5999!important}
.btn-share.twitter{background-color:#55acee!important}
.btn-share.linkedin{background-color:#0077b5!important}
.btn-share.reddit{background-color:#ff5700!important}
.btn-share.pinterest{background-color:#bd081c!important}
.btn-share.whatsapp{background-color:#25D366!important}
.btn-share.mail{background-color:#fff!important; color: #333 !important;}

.btn.disabled, .btn:disabled {
    color: #7d7d7d;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
}

.btn-xlg, .btn-xlg:hover, .btn-xlg:active, .btn-xlg:focus {
    padding: 0.7rem 2.5rem;
    font-size: 1.5em;
    line-height: 1.5;
    border-radius: 3em;
}

a.btn-faded, a.btn-faded:hover {
    color: #505259;
    background-color: #262830;
    border-color: transparent;
}

/* ================================================================================ ALERTS ========================================================================*/

.alertify{}

.alertify .ajs-dialog, .alertify .ajs-footer {
    background: #2a2c33 !important;
    border-radius: 0.5em !important;
    border: none !important;
}

.alertify .ajs-footer {
    padding: 0.4em 1em !important;
}

.alertify .ajs-footer .ajs-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.5em;
    color: #fff !important;
    opacity: 0.6;
}

.alertify .ajs-footer .ajs-button.ajs-ok {
    opacity: 1;
}

.alertify .ajs-content {
    padding: 0.5em 0em 0.5em !important;
    color: #fff;
}

.alertify .ajs-content .ajs-input {
    background: rgba(0, 0, 0, 0.3);
    border: none !important;
    color: #fff;
    font-size: 1.4em;
    margin: 0.3em 0 0 !important;
    padding: 0.5em 1em !important;
    border-radius: 0.3em !important;
    outline: none;
}

.alertify .ajs-content .ajs-input:focus {
    border: none !important;
}

.alertify .ajs-header {
    display: none;
}

/*.alertify-notifier.ajs-center{
    width: 100%;
    left: 0 !important;
}

.alertify-notifier .ajs-message.ajs-error{
    margin-top: 0 !important;
    margin-bottom: 10px;
    max-width: 50%;
    display: block;
    padding: 1em 2em !important;
    width: auto;
    width: fit-content;
}
*/

.alertify-notifier .ajs-message.ajs-error{
    background: #c00 !important;
    text-shadow: none !important;
    border: none;
    border-radius: 3em;
    box-shadow: 0 10px 30px 10px rgba(0,0,0,1);

}

.alertify-notifier .ajs-message.ajs-success{
    background: #09F !important;
    text-shadow: none !important;
    border: none;
    border-radius: 3em;
    box-shadow: 0 10px 30px 10px rgba(0,0,0,1);

}

/*=========================== NAV ============================*/

nav.navbar{
    background-color: #1b1c24;
    box-shadow: 0 0px 15px rgba(0,0,0,0.6);
    width: 100%;
    }

#mainNav .navbar-toggler {color: #fff;border: none !important;padding: 0.2em;outline: none;box-shadow: none !important;}

#mainNav .navbar-collapse {}

nav.navbar a {
    text-decoration: none;
    line-height: 1.2em;
    line-height: 1;
}

nav.navbar a.nuxt-link-active {
    color: #fff !important;
}

nav.navbar .navbar-brand{
    /* flex-basis: 33%; */
}

#mainNav #popoutNav {
    position: absolute;
    right: 5%;
    top: 50px;
    background-color: #1b1c24;
    box-shadow: 0 0px 15px rgba(0,0,0,0.6);
    border-radius: 0.5em;
    text-align: right;
    padding: 0.5em 1em;
}

/*=========================== SEARCH ============================*/

#searchForm{position: fixed;width: 100%;z-index: 90;box-shadow: 0 0 30px rgba(0,0,0,0.4);top: 50px;}

#searchPage {
    padding-top: 200px;
}

#searchText .searchInput {
    font-size: 3em;
    background: #0d0f10;
    padding: 0.1em 1em 0.2em 0.5em;
    border-radius: 3em;
    line-height: 1;
    display: flex;
    align-items: center;
    width: 100%;
}

#searchText .searchInput input::placeholder {
    color: #21252a;
}

#searchText .searchInput input {
    background-color: transparent;
    border: none;
    outline: none;
    color: #fff;
    text-align: center;
    flex-grow: 1;
}

#searchText .searchInput {}

#searchText h1 {
    font-size: 1.5em;
    color: #fff;
    opacity: 0.2;
    margin-left: 5%;
}


/*=========================== FEATURED ============================*/

#featured{
    background-color:#131517;
    box-shadow: inset 0 3px 3px rgba(0,0,0,0.1);
    padding: 1.5em 0 1em 0;
}

#featured .articleItem {
    margin-right: 1em;
}

#featured .articleItem:last-child {
    padding-right: 5%;
}

#featured .articleItem h2 {
    text-overflow: ellipsis;
    /* white-space: nowrap; */
}

#featured .articleItem .content {
    height: 300px;
    min-width: 235px;
}

#featured .articleItem .videoContent .plyr {
    width: auto;
    height: 300px;
}

#featured h1 {
    font-size: 1.5em;
    color: #fff;
    opacity: 0.2;
    margin-left: 15px;
}

#featured .featuredWrapper {
    display: flex;
    align-items: flex-end;
    padding: 0 15px;
    overflow: auto;
}

#featured .featuredTopics{padding: 0 5%;text-align: center;}

/*=========================== CONTENT ============================*/

.milc-pattern{
	background-image: url(../img/pattern-black.png);
	background-size: 7%;
	background-attachment: fixed;
}


/*=========================== TOPICS PANEL ============================*/


#topics{
    align-self: flex-start;
    transition: opacity 1s ease-out 500ms;
}

#topics .btn-category i {opacity: 0.2;}

#topics .btn-category.nuxt-link-exact-active i {
    opacity: 1;
}

main:hover #topics:hover {
    opacity: 1;
    transition-delay: 0s;
    overflow: auto;
}

.scrollFixed #topics{
    position: fixed;
    top: 50px;
    background: #1b1c24;
    height: calc(100vh - 50px);
    overflow: auto;
}

#topics.fixed {
    position: fixed;
    left: 5%;
    width: 16%;
    top: 60px;
    height: calc(90vh - 60px);
    overflow: auto;
}

#topics .btn-topic {
    padding: 0 0.6em 0 1em;
    display: flex;
}

#topics .btn-topic.hot {
    padding-left: 0.4em;
}

#topics h2{
    color: #fff;
    opacity: 0.3;
    line-height: 1;
    font-size: 1.3em;
    padding: 0.5em 0em;
}


/*=========================== CONTENT FILTERS ============================*/


#contentFilters{
    width: 100%;
    margin: 0.5em 0 1em 0;
}

#contentFilters .btn {margin-right: -1.5em;}


#contentTopics{padding: 0em 0 2em;text-align: left;}


/*=========================== STREAM VIEW ============================*/


.stream-view #contentWrapper{
    align-self: flex-start;
}

.scrollFixed .stream-view #contentWrapper {
}

.stream-view .articleWrapper .articleItem {
    width: 100%;
    border-bottom: 2px solid #15161d;
    margin-bottom: 2em;
}

.stream-view .articleWrapper .articleItem h2 {
    font-size: 1.2em;
}

.stream-view .articleWrapper .contentActions a {}

/*=========================== MASSONARY ============================*/

/* Render items as columns */
.massonary-grid .articleWrapper {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  counter-reset: items;
  /* height: 4500px; */
  overflow: hidden;
}

.massonary-grid .articleWrapper .articleItem{
    width: 33%;
    position: relative;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Re-order items into rows */
.massonary-grid .articleWrapper .articleItem:nth-child(3n+1) {order: 1;}
.massonary-grid .articleWrapper .articleItem:nth-child(3n+2) { order: 2; }
.massonary-grid .articleWrapper .articleItem:nth-child(3n)   { order: 3; }

.massonary-grid .articleWrapper .articleItem::before {
  /* counter-increment: items; */
  /* content: counter(items); */
}

/* Force new columns */
.massonary-grid .articleWrapper::before,
.massonary-grid .articleWrapper::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

/*=========================== CONTENT ARTICLES ============================*/

.articleItem{text-align: left;cursor: pointer;padding: 1%;box-shadow: 0 0 0px 0px rgba(0,0,0,0);transition: all 500ms ease-out;border-radius: 0.5em;}

.articleItem.context-view {
    /* border-bottom: 2px solid rgba(255, 255, 255, 0.1); */
    border-radius: 0;
    margin-bottom: 2em;
    box-shadow: 0 20px 40px -30px rgba(0,0,0,1) !important;
    padding-bottom: 1em;
    cursor: default;
}

.articleItem.context-view .articleContent {
    display: flex;
    flex-direction: column-reverse;
}

.articleItem.context-view .articleContent .content {
    margin-bottom: 1em;
    flex: 0 0 100%;
}

.articleItem:hover {
    box-shadow: 0 20px 30px -10px rgba(0,0,0,1);
    z-index: 10;
    opacity: 1;
    transition-delay: 100ms;
}

.articleItem h3 {
    color: #fff;
    font-size: 0.8em;
    opacity: 0.5;
    flex-grow: 1;
}

.articleItem h3 span {
    font-weight: bold;
}

.articleItem h2 {
    color: #fff;
    font-size: 1em;
}

.articleItem.context-view .articleContent h2 {
    font-size: 1.5em;
}

.articleItem h2 small {display: block;color: #727478;}

.articleItem h2 .source .favicon {
    height: 1.5em;
}

.articleItem h2 small span {
    font-size: 0.8em;
}

.articleItem .content {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0.3em;
    min-height: 160px;
}

#featured .articleItem .miniclipArticle .content {
    width: 500px;
}

.articleItem .twitterArticle .content {
    min-height: auto;
}

#featured .articleContent.giphyArticle .imageContent img{
    width: auto;
    height: 300px;
}


/* =================================== CONTENT OVERLAY ============================ */

.articleItem .content .overlay{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: no-repeat center;
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 70px;
    transition: all 300ms cubic-bezier(0.56, -0.85, 0.5, 1.72);
    opacity: 1;
    pointer-events: none;
}

.articleItem:hover .content .overlay {
    background-size: 60px;
}

.articleItem .content .overlay.blurred {
    backdrop-filter: blur(10px);
}

.articleItem .content .overlay.dark {
    background: rgba(0, 0, 0, 0.8);
}


/* =================================== GAME CONTENT ============================ */


.articleItem .gameContent .overlay {
    background-image: url(/icon/overlay-game.png);
}

/* =================================== VIDEO CONTENT ============================ */

.articleItem .videoContent .overlay {
    background-image: url(/icon/overlay-video.png);
}

.articleItem .videoContent:hover .overlay {
    opacity: 0;
    background-size: 0%;
}

.articleItem.context-view .videoContent .plyr {
    cursor: pointer;
    height: 70vh;
    width: 100%;
}

/* =================================== IMAGE CONTENT ============================ */

.articleItem .imageContent{
    text-align: center;
    min-height: 100px;
    background: #1d1e21 url(/img/loader.svg) no-repeat center;
    border-radius: 0.5em;
}

.articleItem .imageContent img {
    width: 100%;
    border-radius: 0.3em;
}

#featured .articleItem .imageContent img {
    height: 300px;
    width: auto;
}

.articleItem .contentDetail {
    display: flex;
}


/*=========================== GAME DISTRIBUTION CONTENT ============================*/

.miniclipArticle{}

.miniclipArticle .content .gameContent {
    min-height: 180px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    height: 100%;
}

.stream-view .miniclipArticle .content .gameContent {
    min-height: 410px;
    background-size: cover;
}

/*=========================== GAME DISTRIBUTION CONTENT ============================*/

.gameDistArticle{}

.gameDistArticle .content .gameContent {
    width: 100%;
    height: 20em;
    background: center;
    background-size: cover;
}

.context-view .gameDistArticle .content .gameContent {
    border: none;
    height: 80vh;
}
/*=========================== YOUTUBE CONTENT ============================*/

.youtubeArticle{}

.youtubeArticle .content {
    /* height: 240px; */
}

.stream-view .youtubeArticle .content {
    height: auto;
}

#featured .youtubeArticle .content {
    width: 520px;
}

.youtubeArticle .content iframe {
    width: 100%;
    height: 100%;
}

.context-view .youtubeArticle .content iframe {
    width: 100%;
    height: 100%;
}

.youtubeArticle .content .videoContent {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.context-view .youtubeArticle .content .videoContent {
    height: 70vh;
    width: 100%;
}

/*=========================== TWITTER CONTENT ============================*/

.twitterArticle{
}

.twitterArticle .content p {
    font-size: 1.2em;
}

.twitterArticle .content p {
    color: #fff;
    font-weight: 100;
    line-height: 1.3;
    background: rgb(36, 37, 39);
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 0;
    height: 100%;
}

.twitterArticle .content a.link {
    color: #09F;
    font-size: 0.7em;
    font-weight: normal;
}

/* =================================== IMAGE ACTIONS ============================ */

.articleItem .contentActions {width: 100%;text-align: right;margin: 0.5em 0 0;}

.articleItem.context-view .contentActions {
    text-align: left;
}

.articleItem.context-view .contentActions a.btn {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    padding: 0.2em 1.5em;
}

.articleItem.context-view .contentActions a {
    font-size: 1.2em;
    line-height: 1.5em;
}

.articleItem.context-view .contentActions a.btn .viewOnly {
    display: inline-block;
}

#share .articleItem .contentActions {
    display: none;
}

.articleItem .contentActions .btn {
    color: #fff;
    opacity: 0.2;
    padding: 0em;
    font-weight: bold;
    transition: all 200ms ease-out;
}

.articleItem .contentActions .btn .viewOnly {
    display: none !important;
}

.articleItem .contentActions:hover .btn {
    opacity: 0.8;
}

.articleItem:hover .contentActions:hover .btn {
    opacity: 0.5;
}

.articleItem .contentActions:hover .btn:hover {
    opacity: 1;
}

.articleItem .contentActions:hover .btn.actionIcon {
}

.articleItem .contentActions .btn.actionIcon.thumbsUp:hover {
    color: #24af43;
}

.articleItem .contentActions .btn.actionIcon.thumbsUp:hover i {
    animation: tada 1s linear both;
}

.articleItem .contentActions .btn.actionIcon.thumbsUp.voted {
    color: #24af43;
    opacity: 1;
}

.articleItem .contentActions .btn.actionIcon.thumbsDown.voted {
    color: #CC0000;
    opacity: 1;
}

.articleItem .contentActions .btn.actionIcon.thumbsDown:hover {
    color:#CC0000;
}

.articleItem .contentActions .btn.actionIcon.save:hover {
    color:#00ccFF;
}

.articleItem .contentActions .btn:hover {
    opacity: 1;
}

.articleItem .contentActions i {
    font-size: 1.3em;
    display: inline-block;
}



/*=========================== TAG HEADER ============================*/

#tagHeader{
    text-align: center;
    padding: 2em 0;
    color: #fff;
    min-height: 7em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#tagHeader h1, #tagHeader h2 {margin: 0;line-height: 1;}

#tagHeader .relatedTopics {
    text-align: center;
}

/*=========================== SHARE ============================*/

#share{}


#share .shareOptions h1 {
    display: block;
}


#share .modalCard .articleItem h2 {
    font-size: 1.5em;
}

#share .modalCard .shareOptions {}

#share .btn-share {
    font-size: 1.3em;
    width: 100%;
    margin: 0.3em 0;
    text-align: left;
    padding: 0.4em 1em;
}

#share h1 {
    font-size: 1.3em;
    color: #fff;
}


/*=========================== ADD TO COLLECTION ============================*/

#addToCollection{
}

#addToCollection #addToCollectionForm select[disabled] {
    opacity: 0.2;
}

#addToCollection .shareOptions h1 {
    display: block;
}

#addToCollection .modalCard .articleItem{
    flex: 0 1 50%;
}

#addToCollection .modalCard .articleItem {margin-top: -7.5%;}

#addToCollection .modalCard .addWrapper {}

#addToCollection h1 {
    font-size: 1.3em;
    color: #fff;
}

/*=========================== HOME ============================*/


/*=========================== SIGN IN ============================*/
#legacyUserCheck,
#legacyOptCheck,
#legacyActivate,
#signInForm{
    position: fixed;
    top: 0;
    z-index: 1980;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

#legacyUserCheck .logo,
#legacyOptCheck .logo,
#legacyActivate .logo,
#signInForm .logo {
    width: 30%;
}

section#signInForm {}

#legacyUserCheck .formWrapper,
#legacyOptCheck .formWrapper,
#legacyActivate .formWrapper,
#signInForm .formWrapper {
    width: 450px;
}


/*=========================== FOOTER LEGAL ============================*/

#fetchingContent.fixed{
    z-index: 999999;
    position: fixed;
    bottom: 20px;
    right: 3%;
    padding: 1em 2em;
    border-radius: 2em;
    font-size: 0.9em;
    color: #fff;
    background: rgba(0, 0, 0, 1);
    box-shadow: 0 10px 10px 0px rgba(0,0,0,0.6);
}

#fetchingContent.inline {
    position: relative;
    left: auto;
    bottom: 0;
    margin: 1em auto;
    display: inline-block;
    font-size: 0.9em;
    color: #fff;
    background: rgba(0, 0, 0, 1);
    box-shadow: none;
    padding: 1em 2em;
    border-radius: 2em;
    width: auto;
}

#fetchingContent .bottle {
    height: 1.7em;
    margin: -1em 0em -0.8em 0em;
}

/*=========================== FOOTER LEGAL ============================*/
#footerLegal{
    z-index: 1020;
    position: relative;
}

.shareEmailIcon{
    filter: invert(1);
    width: 20px;
    margin-top: 5px;
    margin-right: 0.5em;
    margin-left: 0.2em;
}


/*=========================== SCROLL TO TOP ============================*/
#scrollToTop{
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 4em;
    right: 1em;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 0px 15px rgb(0 0 0 / 60%);
    border-radius: 50%;
    background-color: #13131c;
}

/* tcs */

.innerList li:before{
	margin-left: 5px;
}
.innerList p{
	margin-left: 5px;
}

p.unboldParagraph {
    font-weight: normal;
}

.termContent p{
    display: block;
    padding-left: 46px;
    font-weight: 500;
}

.termContent ol { 
	counter-reset: item ;
}


.termContent ol li{
	/* font-weight: bold; */
	 padding-left: 8px;
}

.termContent ol ol li:before{
    content: counters(item, ".") " ";
    color: #53616f;
}

.termContent ol li ol li{
	font-weight: normal !important;
}

.termContent li { 
	display: block;
}

.termContent li:before {
    content: counters(item, ".") ".";
    counter-increment: item;
 	float: left;
    color: #53616f;
}

/* end tcs */