* {
  margin: 0;
  box-sizing: border-box;
}
.alert {
    background-color: red;
    color: white;
    font-weight: bold;
    width: 100%;
    padding: 15px;
    position: absolute;
    top: 0;
    text-align: center;
    vertical-align: middle;
}
body {
  background-color: black;
  overflow-x: hidden;
}
.streaks-info {
    display: none;
}
.streaks-open:hover .streaks-info {
    display: block;
}
.streaks-info {
    width: 100%;
}
/*
font-family: 'Candal', sans-serif;
font-family: 'Open Sans', sans-serif;
*/
body::scrollbar{
  width: 1em;
}
body::scrollbar-thumb {
  background-color: white;
}
body::scrollbar-track {
  background-color: black;
}
body::-webkit-scrollbar{
  width: 1em;
}
body::-webkit-scrollbar-thumb {
  background-color: white;
}
body::-webkit-scrollbar-track {
  background-color: black;
}
body::-moz-scrollbar{
  width: 1em;
}
body::-moz-scrollbar-thumb {
  background-color: white;
}
body::-moz-scrollbar-track {
  background-color: black;
}
body::-ms-scrollbar{
  width: 1em;
}
body::-ms-scrollbar-thumb {
  background-color: white;
}
body::-ms-scrollbar-track {
  background-color: black;
}
.nav {
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  z-index: 50000;
  position: sticky;
  top: -42px;
}
.top {
  padding: 10px;
  background-color: rgb(40,39,39);
  color: white;
  padding-left: 30px;
  font-size: 0.8em;
}
.top a:link, .top a:visited {
  color: white;
  text-decoration: none;
  margin-right: 2%;
}
.top a:hover {
  text-decoration: underline;
}
.left {
  float: left;
  width: 50%;
}
.right {
  display: inline-block;
  color: white;
  width: 49%;
  text-align: right;
}
.right svg {
  cursor: pointer;
  display: inline-block;
  transition: 0.2s ease-in-out;
}
.right svg:hover {
  transform: scale(1.2) rotateZ(5deg);
}
.right a:link, .right a:visited {
  text-decoration: none;
}
.bottom {
  background-color: black;
  color: white;
  padding: 20px;
  font-size: 15px;
  vertical-align: middle;
  border-bottom: solid 3px white;
  position: sticky;
  top: 0;
}
.title-txt {
  font-size: 1.8em;
  margin-right: 30px;
  font-family: 'Bebas Neue', cursive;
}
.navlink:link, .navlink:visited {
  color: white;
  text-decoration: none;
  transition: 0.2s;
  padding: 26px 1%;
}
.navlink:hover {
  background-color: white;
  color: black;
}
.title-link {
  color: white;
  text-decoration: none;
}
.title-link:hover {
  opacity: 0.9;
  background-color: black;
  color: white;
}
.main-left {
  width: 85%;
  display: inline-block;
}
.main-right {
  display: inline-block;
  width: 14%;
  float: right;
  text-align: right;
}
.main-right a {
    text-decoration: none;
}
.main-right svg {
  vertical-align: middle;
  cursor: pointer;
  display: inline-block;
}
.featured {
  width: 100%;
  display: block;
  transform: translateY(-15%);
}
.featured a:link, .featured a:visited {
  text-decoration: none;
}
.featured img {
  transition: 0.3s;
}
.f-caption {
  position: absolute;
  top: 55%;
  left: 2%;
  background-color: rgba(40,39,39,0.6);
  padding: 30px;
  color: white;
  font-family: 'Open Sans', sans-serif;
  max-width: 50%;
}
.f-caption:hover {
  color: #00ff00;
  cursor: pointer;
}
.caption-title {
  font-size: 2em;
  font-family: 'Candal', sans-serif;
}
.whats-hot {
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  right: 35px;
  top: 25%;
  width: 25%;
  text-align: center;
  background-color: black;
  color: white;
}
.meta-da {
  font-size: 0.7em;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.article-hot {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  transition: 0.3s;
  display: block;
  vertical-align: top;
}
.article-hot img {
  width: 120px;
  height: 67.5px;
  display:inline-block;
  margin-right: 15px;
}
.article-hot:hover {
  background-color: white;
  color: black;
}
.art-title {
  font-size: 1em;
  display: inline-block;
}
div.welcome {
  background-color: black;
  top: 101%;
  color: white;
  width: 100%;
  text-align: center;
  padding: 30px;
}
.page-cont {
  width: 100%;
  text-align: center;
}
.f-article-cat {
  position: absolute;
  top: 49%;
  font-weight: bold;
  padding: 5px 20px;
  border-radius: 5px;
  left: 2%;
  color: white;
  font-family: 'Open Sans', sans-serif;
}
.pop-articles {
  display: grid;
  grid-template-columns: repeat(3,34%);
  grid-gap: 3%;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  width: 80%;
  left: 10%;
}
.hot-article {
  background-color: white;
  color: black;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
}
.hot-article:hover {
  color: #555;
  transform: scale(1.02);
}
.upper {
  padding: 0;
  width: 100%;
}
.upper img {
  width: 100%;
  border-bottom: solid 2px black;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.lower {
  padding: 30px;
  padding-top: 10px;
}
.lower-title {
  font-family: 'Candal', sans-serif;
}
.divider {
  width: 100px;
  height: 10px;
  background-color: white;
  border-radius: 5px;
}
.listings {
  width: 80%;
  position: relative;
  left: 10%;
}
.article-list {
  display: grid;
  grid-template-columns: repeat(2,40%);
  grid-gap: 10%;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
}
.side-links {
  vertical-align: top;
}
.home-node {
  background-color: #ccc;
  color: black;
  padding-top: 30px;
  padding-bottom: 10px;
  margin: 20px;
  position: relative;
  font-family: 'Open Sans', sans-serif;
}
.art-right {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.node-title {
  font-size: 1.5em;
  color: black;
  font-family: 'Candal', sans-serif;
}
.photo-display img {
  width: 23%;
  margin: 2px;
  cursor: pointer;
  transition: 0.3s;
}
.photo-display img:hover {
  opacity: 0.7;
}
.fancy-btn {
  padding: 15px 30px;
  opacity: 0.9;
  background-color: #00ff00;
  color: white;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  border: solid 2px #00ff00;
  transition: 0.3s;
  border-radius: 3px;
}
.fancy-btn:hover {
  background-color: white;
  color: #00ff00;
}
.juice {
  background-color: white;
  color: black;
  width: 85%;
  padding: 40px;
  font-family: 'Open Sans', sans-serif;
}
.footer {
  color: white;
  border-top: solid 3px white;
  padding: 30px;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  vertical-align:bottom;
  background-color: black;
  text-align: center;
}
.footer > table > tr > td {
  text-align: center;
}
.footer-link {
  color: white;
  text-decoration: none;
  margin: 7px;
}
.footer-link:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}
td a:link {
  text-decoration: none;
}
td svg {
  cursor: pointer;
  margin: 10px;
  display: inline-block;
  transition: 0.2s;
}
td svg:hover {
  transform: scale(1.2) rotateZ(5deg);
}
body#cat-page {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.prime-title {
  max-width: 100%;
  font-size: 4em;
  font-family: 'Candal', sans-serif;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,0.7);
  padding: 30px;
}
.main-info {
  background-color: black;
  color: white;
  padding-top: 30px;
  text-align: center;
  width: 100%;
  border-top: solid 3px white;
}
.secondarysu {
  width: 80%;
  text-align: center;
}
.pagination {
  font-family: 'Open Sans', sans-serif;
}
.pagination a.page:link, .pagination a.page:visited {
  padding: 15px 20px;
  text-decoration: none;
  color: white;
}
.pagination a.page:hover {
  text-decoration: underline;
}
.onit:link {
  background-color: white;
  color: black;
  padding: 15px 20px;
  text-decoration: none;
}
.item {
  margin: 0;
  transition: 0.3s;
  position: relative;
  width: 100vw;
}
.meta {
  font-family: 'Open Sans', sans-serif;
  padding: 5px;
  font-size: 0.8em;
}
.mini-caption{
  position: absolute;
  bottom: 4%;
  left: 2%;
  padding: 10px;
  z-index: 3;
  width: 90%;
  background-color: #555;
  opacity: 0.8;
  font-family: 'Candal', sans-serif;
  text-align: left;
}
.item img {
  width: 100%;
}
.search-cont {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 200000000;
  height: 100%;
  background-color: white;
  color: black;
  vertical-align: middle;
  text-align: center;
  display: none;
}
#close {
  position: absolute;
  right: 4%;
  top: 2%;
  font-size: 4em;
  cursor: pointer;
}
.search-cont form {
  width: 70%;
  height: 50%;
  top: 35%;
  left: 15%;
  position: relative;
  font-family: 'Open Sans', sans-serif;
}
.search-cont form input[type=text] {
  border: none;
  border-bottom: solid 3px #ccc;
  width: 50%;
  padding: 15px 30px;
  outline: none;
  transition: 0.2s;
}
.search-cont form input[type=text]:focus {
  border-bottom: solid 3px black;
}
.search-cont form select {
  padding: 15px 30px;
  border-radius: 5px;
  border: solid 2px black;
}
.search-cont form input[type=submit] {
  padding: 15px 30px;
  background-color: black;
  color: white;
  border: solid 2px black;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}
.search-cont form input[type=submit]:hover {
  background-color: white;
  color: black;
}
/* Be sure to copy from here on below to the main docuent */
.below {
    display: none;
    width: 250px;
    background-color: black;
    position: absolute;
    right: 0;
    border: solid 3px white;
}
.user-drop a:first-of-type {
    color: white;
    padding: 15px;
}
.below a:link, .below a:visited {
    display: block;
    padding: 15px 30px;
    color: white;
    background-color: black;
    width: 100%;
    text-align: center;
    transition: 0.2s;
    text-decoration: none;
}
.below a:hover {
    background-color: white;
    color: black;
}
.user-drop:hover .below {
    display: block;
}
.main-photo {
  min-width: 80%;
  background-color: black;
  color: white;
  padding: 30px;
  text-align: center;
}
.left-photo {
  display: inline-block;
  width: 65%;
}
.right-photo {
  display: inline-block;
  width: 30%;
}
.left-photo img {
  width: 100%;
}
.right-photo img {
  width: 49%;
}
.left-photo img, .right-photo img {
  cursor:pointer;
  transition: 0.2s;
}
.right-photo img:hover {
  opacity: 0.9;
}
.newly-released-disp img {
  width: 20%;
  margin: 2px;
  cursor: pointer;
  transition: 0.2s;
}
.newly-released-disp img:hover {
  opacity: 0.9;
}
.photo-title {
  font-family: 'Candal', sans-serif;
}
.newly-released-disp .item {
  width: 20%;
  display: inline-block;
}
.newly-released-disp .item img {
  width: 97%;
}
.all-disp {
  width: 100%;
}
.all-disp img {
  margin: 3px;
  width: 22%;
  cursor: pointer;
  transition: 0.2s;
}
.all-disp img:hover {
  opacity: 0.9;
}
/* COPY THIS OVER */
.phone-display {
  display: none;
}
.mobile-nav, .mobile-search-area, .mobile-cont {
  display: none;
}
@media screen and (max-width: 1100px){
  .nav {
    display: none;
  }
  .mobile-nav, .mobile-search-area, .mobile-cont {
    display: block;
  }
}
.mobile-nav {
            width: 100%;
            background-color: black;
            border-bottom: solid 4px white;
            z-index: 999999999999999999999999999;
            position: sticky;
            top: 0;
        }
        .mob-menu, .mobile-search {
            display: inline-block;
            padding: 10px;
            width: 15%;
        }
        .mobile-logo {
            width: 60%;
            display: inline-block;
        }
        .mobile-search {
            justify-content: right;
            text-align: right;
            position: relative;
        }
        .mobile-logo img {
            width: 80%;
        }
        .mob-menu img, .mobile-search img {
            width: 100%;
            position: relative;
        }
        .mobile-nav img {
            position: relative;
            vertical-align: middle;
        }
        .mob-menu {
            justify-content: left;
        }
        .mobile-cont {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            color: white;
            z-index: 9999999999999999999999999999;
            text-align: center;
            transition: 0.2s;
            left: -100%;
        }
        .title {
            font-size: 60px;
            margin-top: 20px;
            color: #00ff00;
            font-family: 'Bebas Neue', cursive;
        }
        .x-out {
            color: white;
            font-family: 'Open Sans', sans-serif;
            font-size: 3em;
            width: 100%;
            position: absolute;
            text-align: right;
            cursor: pointer;
            top: 0;
            left: 0;
            z-index: 9999999999999999999999999999999;
            padding-right: 15px;
        }
        .mobile-link-area {
            width: 100%;
            text-align: center;
            justify-content: center;
            color: white;
            margin-top: 30px;
        }
        .mobile-nav-lnk {
            width: 100%;
            color: white;
            font-size: 40px;
            padding: 15px 30px;
            font-family: 'Bebas Neue', sans-serif;
            display: block;
            border: solid 1px white;
        }
        .moremenu::after {
            content: '>';
            font-size: 0.8em;
            position: relative;
            top: -7.5px;
            left: 15px;
            color: #00ff00;
        }
        .mobile-search-area {
            right: -100%;
            transition: 0.2s;
            background-color: black;
            z-index: 9999999999999999999999999999;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            text-align: center;
            justify-content: center;
        }
        .menus {
            display: none;
        }
        .mobile-select {
            width: 80%;
            background-color: black;
            color: white;
            border: solid 4px white;
            outline: none;
            border-radius: 5px;
            padding: 10px 15px;
        }
        .mobile-text {
            width: 80%;
            background-color: black;
            color: white;
            border: solid 4px white;
            outline: none;
            border-radius: 5px;
            padding: 10px 15px;
        }
        .mobile-submit {
             width: 80%;
            background-color: white;
            color: black;
            border: solid 4px white;
            outline: none;
            border-radius: 5px;
            padding: 10px 15px;
        }
/* END COPY */
.tweet {
  padding: 15px 30px;
  background-color: #077ADA;
  color: white;
  text-decoration: none;
  margin: 5px;
  border-radius: 5px;
}
.fb {
  padding: 15px 30px;
  background-color: #061C74;
  margin: 5px;
  text-decoration: none;
  color: white;
  border-radius: 5px;
}
.tweet:hover, .fb:hover {
  opacity: 0.8;
}
.resultx {
  text-align: left;
  padding: 20px;
  transition: 0.2s;
  margin: 5px;
  cursor: pointer;
}
.likepost {
  background: none;
  border: none;
  font-size: 2em;
  color: red;
  outline: none;
  cursor: pointer;
}
.resultx:hover {
  background-color: #ccc;
}
.option {
  background-color: black;
  color: white;
  padding: 30px 45px;
  font-size: 3em;
  border-radius: 7px;
  text-align: center;
  margin: 5px;
  cursor: pointer;
  transition: 0.2s;
}
.option:hover {
  box-shadow: 0 0 15px black;
}
@media screen and (max-width: 1100px){
  .phone-nav-disp {
    display: block;
    font-size: 2em;
  }
  .article-list {
    grid-template-columns: repeat(1,90%);
    grid-gap: 10px;
  }
  .side-links, .main-left, .top, .newly-released-disp, .photo-title, .main-photo {
    display: none;
  }
  .phone-display, .phone-links-disp, .phone-photo-disp {
    display: block;
  }
  .mini-caption {
    font-size: 3em;
  }
}
@media screen and (max-width: 1100px){
    body {
      overflow-x: hidden;
    }
    .whats-hot, .navlink, .top, .page-cont, .main-left, .main-right,.featured, .welcome, .below, .user-drop {
      display: none;
    }
    .bottom {
      height: 150px;
      vertical-align: middle;
      position: fixed;
      top: 0;
      width: 100%;
    }
    .item {
      display: block;
      width: 100%;
      color: white;
      z-index: 1;
    }
    .mobile {
      display: block;
      height: 50px;
    }
}
.accept {
  background-color: green;
  color: white;
  padding: 15px 30px;
  text-align: center;
  border: solid 3px black;
}
.article-to-screen {
  width: 90%;
  height: 750px;
}
input.accept, a.accept:link, a.accept:visited {
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
}
input.reject, a.reject:link, a.reject:visited {
  text-decoration: none;
  background-color: red;
  color: white;
  padding: 15px 30px;
  text-align: center;
  border: solid 3px black;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
}

a.reject:hover, input.accept:hover, input.reject:hover, a.accept:hover {
  opacity: 0.8;
}
.toolkit {
  text-align: center;
  width: 40%;
  background-color: white;
  position: fixed;
  bottom: 0;
  right: -100%;
  height: 90%;
  padding: 40px;
  color: black;
  text-align: center;
  transition: 0.2s;
  border: solid 4px black;
}
.toolkit td {
  padding: 10px;
  text-align: left;
}
.mobile-menu {
  width: 100%;
  transition: 0.2s;
  position: fixed;
  height: 100%;
  background-color: black;
  color: white;
}
.mobile-menu a:link, .mobile-menu a:visited {
  color: white;
  padding: 15px 50px;
  background-color: black;
}
.mobile-menu a:hover {
  background-color: white;
  color: black;
}
.mobile {
  display: none;
}

.cookies-agreement {
    left: 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: center;
  margin: 0;
  background-color: black;
  color: white;
  padding: 50px 90px;
  font-family: 'Open Sans', sans-serif;
  display: none;
  border-top: solid 4px white;
  z-index: 100000000000000000;
}
.cookies-agreement a:link, .cookies-agreement a:visited{
  color: white;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cookies-agreement a:hover {
  text-decoration-style: solid;
}
.related {
  background-color: black;
  color: white;
  padding: 15px 40px;
  border-radius: 3px;
}
.related a:link, .related a:visited {
  text-decoration: underline;
  text-decoration-style: dotted;
}
.related a:hover {
  text-decoration-style: solid;
}
.cm {
  padding: 10px;
  border: solid 2px #ccc;
}
.rp {
  background-color: #ccc;
  padding: 10px;
  margin-left: 30px;
}
.spec {
  color: #00ff00;
  padding: 1px 5px;
  border: solid 3px #00ff00;
  border-radius: 5px;
}
@media screen and (max-width: 1100px){
  .hhhh {
    display: none;
  }
  .juice {
    width: 100%;
  }
  .image-info {
      width: 100%;
  }
}
.badge {
    width: 75px;
    margin: 10px;
    transition: 0.2s;
}
.badge:hover {
    transform: scale(1.05);
}
       .image-info {
         width: 350px;
         position: relative;
         font-family: 'Open Sans', sans-serif;
         display: inline-block;
         margin-bottom: 45px;
       }
       .image-info img {
         width: 100%;
       }
       .short-exif {
         position: absolute;
         height: 20%;
         background-color: black;
         color: #00ff00;
         top: 99%;
         left: 0;
         width: 100%;
         border-top: solid 2px #00ff00;
       }
       .left-ex, .right-ex {
        display: inline-block;
        margin: 10px;
        margin-top: 3px;
        vertical-align: middle;
       }
       .right-ex {
         font-size: 1.5em;
         float: right;
       }
       .left-ex {
         font-size: 0.788996em;
       }