* {
  font-family: 'Open Sans', sans-serif;
}

a {
  color: white;
  text-decoration: none;
}

iframe {
  margin-top: 50px;
  margin-bottom: 50px;
}

body {
  overflow-x: hidden;
  background-color: black;
  width: 100%;
  height: auto;
  margin: auto;
}

html {
	scroll-behavior: smooth;
}

.bold {
  font-weight: bold;
}

#xi {
  width: 10%;
  height: 10%;
}

header-nav {
  display: flex;
  color: white;
  font-size: 12pt;
  height: 110px;
  top: 0;
  left: 0;
  width: 100%;
  transition: 1s;
}

#canvas {
  z-index: 0;
  background-color: black;
  top: 0;
  left: 0;
  outline: none;
  margin: 0;
}

#homages {

  width: 100%;
  height: auto;
  z-index: 0;
  background-color: black;
  top: 0;
  left: 0;
  outline: none;
  margin: 0;
  cursor: pointer;
}

#buyBeer {
  position: fixed;
  width: 146px;
  height: 67px;
  background-color: white;
  z-index: 1;
  top: 800px;
  right: 30px;
  display: none;
  transition: 1s;
  animation: sliderLeft 1s 1 alternate;
}

#upButton {
  position: fixed;
  top: 750px;
  right: 60px;
  display: none;
  transition: 1s;
  z-index: 1;
  opacity: 1;
  cursor: pointer;
}

#upButton:hover {
  transform: scale(1.1);
}

#time {
  color: white;
  text-align: center;
}

#dontSub {
  position: fixed;
  z-index: 55;
  top: 200px;
  left: 0px;
  display: none;
  transition: 1s;
  animation: sliderRight 1s 1 alternate;
  cursor: pointer;
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


#divider {
  margin: 0;
  line-height: 0px;
  display: flex;
}

#lead {
  position: absolute;
  z-index: 1;
  color: white;
  font-size: 30pt;
  font-weight: 800;
  filter: drop-shadow(1px 2px 0px #27ff6e);
}

#secondary {
  position: absolute;
  display: flex;
  padding-top: 150px;
  z-index: 1;
  color: white;
  font-size: 12pt;
  font-weight: 200;
  font-style: italic;
}

.form-control {
  position: absolute;
  display: flex;
  z-index: 1;
  margin-top: 250px;

}

#radioButton {
  border:2px solid #fff;
  height:25px;
  width:25px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;

}

#active {
  margin-left: 4px;
  margin-top: 4px;
  background-color: #27ff6e;
  height: 17px;
  width: 17px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  visibility: hidden;
}


#logo {
  height: 100px;
  display: flex;
  color: white;
  align-items: center;
  margin-left: 80px;
  margin-top: 20px;
  margin-bottom: 20px;
  transition: 1s;
}

#logoImg {
  transition: 1s;
}

#links {
  font-size: 12pt;
  margin-left: 60px;
  cursor: pointer;
}

#links1, #links2, #links3  {
  font-size: 12pt;
  margin-left: 60px;
  cursor: pointer;
}


#links2:hover {
  font-size: 12pt;
  margin-left: 60px;
  cursor: pointer;
  border-bottom: 5px solid #641cff;
  transition: 1s;
}

#links3:hover {
  font-size: 12pt;
  margin-left: 60px;
  cursor: pointer;
  border-bottom: 5px solid #ff1c5d;
  transition: 1s;
}


#links1:hover {
  font-size: 12pt;
  margin-left: 60px;
  cursor: pointer;
  border-bottom: 5px solid #27ff6e;
  transition: 1s;
}


#linksFirst {
  font-size: 12pt;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 5px solid #27ff6e;
}

#first {
  cursor: pointer;
}

#second {
  cursor: pointer;
}

#third {
  cursor: pointer;
}

#featured {
  font-size: 12pt;
  margin-left: 60px;
  cursor: pointer;
  font-weight: 800;
  border-bottom: 5px solid #27ff6e;
}

#links:hover {
  border-bottom: 5px solid #27ff6e;
  transition: 1s;
}

#subscribe {
  position: absolute;
  right: 40px;
  text-align: center;
  cursor: pointer;
}

.subscribe {
  background-color: #27ff6e;
  padding: 10px;
  width: 100px;
  border-radius: 4px;
  text-shadow: 1px 1px #000;
}

.subscribe:hover {
  animation: filter-animation 1s infinite  alternate;
  animation: mover 1s infinite  alternate;
}

#navSec {
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  height: 100px;
}

input[type='radio'] {
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background-color: black;
  border: 2px solid white;
}

input[type='radio']:checked {
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transition: 120ms transform ease-in-out;
  background-color: #27ff6e;
  box-shadow: inset 0 0 10px #000
}

/* THIRD PART OF THE PAGE */


#containerBlocks {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;

}

#blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

#aBlock {
  display: flex;
  width: 330px;
  height: 200px;
  margin: 40px 40px 0px 40px;
  border: 1px solid rgba(255,255,255, 0.3);
  flex-flow: column;
  align-items: center;
  background-image: url('../images/thumbnailstarstransp.png');
  background-repeat: no-repeat;
}

#aBlock:hover {
  transition: 0.5s;
  transform: scale(1.05);
}

#aBlock:hover #circle {
  transition: 0.5s;
  animation: rotateAnimation 8s linear infinite;
}

#aBlock:hover #subTextPhilosophical {
  transition: 0.5s;
  color: white;
}

#aBlock:hover #subText {
  transition: 0.5s;
  color: white;
}

#aBlock:hover #subTextReview {
  transition: 0.5s;
  color: white;
}

#aBlock:hover #circleEnt {
  transition: 0.5s;
  animation: rotateAnimation 8s linear infinite;
}

#aBlock:hover #circle1 {
  transition: 0.5s;
  animation: rotateAnimation 8s linear infinite;
}

#aBlock:hover #barPhilosophical {
  z-index: -10;
  margin-top: 0px;
  width: 100%;
  position: absolute;
  transition: 0.5s;
  height: 200px;
  background: linear-gradient(90deg, rgba(174,10,255, 0.3) 0%, rgba(28,32,255, 0.3) 100%);
}

#aBlock:hover #bar {
  z-index: -10;
  margin-top: 0px;
  width: 100%;
  position: absolute;
  transition: 0.5s;
  height: 200px;
  background: linear-gradient(90deg, rgba(0,229,255,0.3) 0%, rgba(55,255,96,0.3) 100%);
}

#aBlock:hover #barReview {
  z-index: -10;
  margin-top: 0px;
  width: 100%;
  position: absolute;
  transition: 0.5s;
  height: 200px;
  background: linear-gradient(90deg, rgba(255,104,10,0.3) 0%, rgba(255,28,105,0.3) 100%);
}



@keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

@keyframes sliderLeft {
  0% { transform: translateX(0); }
  50% { transform: translateX(40px); }
  100% { transform: translateX(-10px); }
}

@keyframes sliderRight {
  0% { transform: translateX(-584px); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(0px); }
}

@-webkit-keyframes filter-animation {
0% {-webkit-filter: hue-rotate(0deg) saturate(100%);}

50% {
  -webkit-filter: hue-rotate(20deg) saturate(100%);
}

100% {
  -webkit-filter: hue-rotate(0deg) saturate(100%);
}

}

#AOTM {
  height: 100px;
}

#affiliates {
  margin-top: 50px;
  color: rgba(255,255,255, 0.3);
  font-size: 10pt;
}


.affiliates {

}

#circle {
  margin-top: 20px;
  margin-bottom: 0;
}

#circleEnt {
  margin-top: 48px;
}


#circle1 {
  margin-top: 10px;
}

#title {
  margin-top: 0px;
}

#sanctity {
}

#text {
  white-space: nowrap;
  color: white;
  font-weight: 800;
  font-size: 16pt;
  line-height: 2pt;
  filter: drop-shadow(1px 1px 0px #ff1c5d);
}

#textPolitics {
  white-space: nowrap;
  color: white;
  font-weight: 800;
  font-size: 16pt;
  line-height: 2pt;
  filter: drop-shadow(1px 1px 0px #27ff6e);
}

#textPhilosophical {
  white-space: nowrap;
  color: white;
  font-weight: 800;
  font-size: 16pt;
  line-height: 2pt;
  filter: drop-shadow(1px 1px 0px #641cff);
}

#subText {
  color: #27ff6e;
  font-size: 10pt;
  line-height: 2pt;
  font-weight: 200;
}

#bar {
  height: 6px;
  width: 96%;
  background: linear-gradient(90deg, rgba(10,229,255,1) 0%, rgba(28,255,96,1) 100%);
  margin-top: 20px;
  animation: filter-animation 3s infinite  alternate;
}

#barReview {
  height: 6px;
  width: 96%;
  background: linear-gradient(90deg, rgba(255,104,10,1) 0%, rgba(255,28,105,1) 100%);
  margin-top: 20px;
  animation: filter-animation 3s infinite  alternate;
}

#barPhilosophical {
  height: 6px;
  width: 96%;
  background: linear-gradient(90deg, rgba(174,10,255,1) 0%, rgba(28,32,255,1) 100%);
  margin-top: 20px;
  animation: filter-animation 3s infinite  alternate;
}

#subTextReview {
  color: #FFF01F;
  font-size: 10pt;
  line-height: 1pt;
  font-weight: 200;
}

#subTextPhilosophical {
  color: #4f0fff;
  font-size: 10pt;
  line-height: 2pt;
  font-weight: 200;
}


#footer {
  padding: 20px;
  color: white;
}

/* stories css */

#article {
  position: relative;
  color: white;
  text-align: center;
  margin: 40px 100px 40px 100px;
}

.bolder {
  font-size: 24pt;
  font-weight: bold;
}

.articleBolder {
  font-size: 24pt;
  font-weight: bold;
}

.articleBold {
  font-size: 20pt;
  font-weight: bold;
}

.leading {
  font-size: 32pt;
  font-weight:800;
}

#intro1 {
  padding-top: 10px;
  margin-bottom: 40px;
}

#articleSpace {
  margin-top: 70px;
  margin-bottom: 70px;
}

#intro {
  margin-bottom: 40px;
}

#leadImage {
  margin-bottom: 40px;
  animation: rotateAnimation 8s linear infinite;
}

@keyframes rotateAnimation {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

#ReadMore {
  position: absolute;
  z-index: 1;
  color: white;
  outline: none;
  padding-top: 400px;
}

#ReadMorebutton {
  background-color: #27ff6e;
  padding: 15px;
  width: 125px;
  border-radius: 4px;
  text-shadow: 0px 0px 3px #052412, 0px 0px 6px black;
  font-weight: 800;
  animation: filter-animation 3s infinite  alternate;
}

#ReadMorebutton a:link, a:visited {
  color: white;
}

#returnButtonDiv {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
}


#returnButtonGreen {
  background-color: #27ff6e;
  text-align: center;
  color: white;
  padding: 15px;
  width: 125px;
  border-radius: 4px;
  text-shadow: 0px 0px 3px #052412, 0px 0px 6px black;
  font-weight: 800;
  animation: filter-animation 3s infinite  alternate;
}

#returnButtonPurple {
  background-color: #4f0fff;
  text-align: center;
  color: white;
  padding: 15px;
  width: 125px;
  border-radius: 4px;
  text-shadow: 0px 0px 3px #052412, 0px 0px 6px black;
  font-weight: 800;
  animation: filter-animation 3s infinite  alternate;
}

#returnButtonRed {
  background-color: #ff145b;
  text-align: center;
  color: white;
  padding: 15px;
  width: 125px;
  border-radius: 4px;
  text-shadow: 0px 0px 3px #052412, 0px 0px 6px black;
  font-weight: 800;
  animation: filter-animation 3s infinite  alternate;
}


/* POP UP */


.popup-container {

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  z-index: 15100;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;

}

.form-text {
  text-align: center;
  padding-bottom: 10px;
  filter: drop-shadow(1px 2px 0px #27ff6e);
}

#poppytext {
  padding-left: 10px;
}

.popup-content {

  align-items: center;
  position: relative;
  max-width: 280px;
  width: 90%;
  max-height: 90%;
  min-height: 300px;
  background-color: rgba(0,0,0, 0.8);
  padding: 40px;
  border: 1px solid rgba(255,255,255, 0.3);
  background-image: url('../images/thumbnailstarstransp.png');
  background-repeat: repeat;
  color: white;

}

.popup-close {

  top: 10px;
  right: 10px;
  position: absolute;
  height: 30px;
  min-height: 30px;
  max-height:30px;
  width: 30px;
  min-width: 30px;
  max-width:30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  border: 1px solid rgba(255,255,255, 0.3);

}

.btn {

  background-color: black;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  color: white;
  padding: 10px 27px;
  margin-top: 50px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;

}

.btn:hover {

  background-color: rgba(255,255,255, 0.2);
  color: white;

}

.popup-close:hover {
  border: none;
  background-color: rgba(255,255,255, 0.2);
}

.submit {
  text-align: center;
  align-items: center;
}


.form-container-pop {

  display: flex;
  flex-flow: column nowrap;

}

.form-text {

  font-size: 30px;
  font-weight: bold;
}

.form-control-pop {

  margin: 20px 0;
  height: 30px;
  width: 200px;
  border-radius: 2px;
  box-shadow:3px 3px 7px 2px rgba(0,0,0,0.04);
  border: 0;
  padding-left: 10px;

}

.form-control-pop:focus {
  outline: #27ff6e 2px solid;
}

#center {
  display: none;
}

#textFlash {
  color: white;
}

#flashNews {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 50px;
  background-color: black;
  text-align: center;
}

#homagesText {
  font-size: 24px;
  font-weight: bold;
}

#homageImage {
  width: 50%;
  height: auto;
}

#clareImage {
  width: 30%;
  height: 100%;
}

#gretaBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#homaged {
  margin-left: 10px;
  margin-right: 10px;
}

#homagesLinkGreta {
  cursor: pointer;
}

#homagesLinkGreta:hover {
  font-weight: 800;
}

#homagesLinkClare {
  cursor: pointer;

}

#homagesLinkClare:hover {
  font-weight: 800;
}

@media(max-width: 450px) and (min-width: 300px)  {

  iframe {
    width: 300px;
    text-align: center;
  }

  #containerBlocks {
  }

  #blocks {
  margin: 0;
  width: 0;
 }

 #article {
   position: relative;
   color: white;
   margin: 30px;
   text-align: center;
 }

 #subscribe {
   display: none;
 }

 #logoImg {
   display: none;
 }

 #nav {
   display: flex;
   align-items: center;
   justify-content: center;

 }

 #logo {
   display: flex;
   margin: 0px;

   margin-right: 70px;

 }

 #center {
   display: flex;
   align-items: center;
   text-align: center;
   justify-content: center;
   margin-top: 100px;
 }

 #logoMobile {

 }

 #readMore {
   margin-top: 200px;
 }

 #ReadMorebutton {
   margin-top: 200px;
 }

 #secondary {
   margin-top: 200px;
 }

 .featuredNews {
   margin-top: 200px;
 }

 #dontSubImg {
   max-width: 300px;
 }

 #links1 {
   display: none;
 }

 #links2 {
   display: none;
 }

 #links3 {
   display: none;
 }

 #divider {
   display: none;
 }

 html {
   overflow-x: hidden;
 }

 body {
   overflow: hidden;
 }

 #homageImage {
   width: 100%;
   height: auto;
 }







}