:root {
  --text-color: black;
}

body,
html {
  color: black;
}

body {
  overflow: hidden;
}

.body {
  overflow: visible;
}

/*HEADER*/

body,
header,
a.mPS2id-highlight {
  background-color: var(--mediumred);
}

.button-content:hover a.none {
  color: black;
}

.header-bar {
  width: calc(23vw * 0.83);
}

.header-bar:hover {
  background-color: yellow;
}

.header-bar:hover:after {
  background-color: yellow;
  color: black;
}

#link-one:before {width: 11vw;}
#link-two:before {width: 16vw;}
#link-three:before {width: 27vw;}
#link-four:before {width: 7vw;}
#link-five:before {width: 40vw;}

/*HEADER END*/

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
}

a:active {
  color: black;
  text-decoration: none;
}

.lead__wrapper:after {
  display: none;
}

h1,
h2,
h3,
.word-count {
  color: var(--text-color);
}

img {
  max-width: 100%;
}



/* MAP ELEMENTS NEW FOR INSIDE THE PAGE*/

.image-overlay-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.map--element {
  min-width: 8rem;
  position: relative;
  animation-duration: 5s !important;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  transition-timing-function: ease;
  opacity: 0;
}

.map--element.go {
  animation-name: scale-big-hide;
}

@keyframes scale-big-hide {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  60% {
    transform: scale(1);
  }
  99% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.map-zoom {
  width: 20vw;
  left: 10%;
  top: 11%;
  transform-origin: center center;
}

.map-pin {
  position: absolute;
  width: 8vw;
  right: 10%;
  bottom: 1%;  
  transform-origin: center bottom;
}

.map-location {
  width: 20vw;
  left: 5vw;
  top: 45%;
}

.map-flag {
  position: absolute;
  width: 32rem;
  left: calc(50vw - 16rem);
  top: calc(50% - 10rem);
}

.map-directions {
  width: 20vw;
  left: calc(69% - 10vw);
  top: 50%;
}

section {
  box-sizing: border-box;
}

.newspaper {
  max-width: 63rem;
  margin: 4rem auto 6rem auto;
  background-color: yellow;
}

.newspaper p {
  font-size: 2.4rem;
  line-height: 1.35em;
  letter-spacing: 0.01rem;
  word-spacing: 0.05rem;
  margin-bottom: calc(3.3rem / 2);
}


.ak {
  max-width: 110rem;
  color: white;
  margin: 3rem 0;
}


.content__text {
  margin: 2rem auto 5rem auto;
  max-width: 110rem;
  padding: 2rem 2rem 1.5rem 2rem;
}

.segment {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--mediumred);
}

.segment.image {
  position: relative;
}

p,
h4 {
  color: var(--text-color);
}

p {
  max-width: 110rem;
  font-size: calc(2.5rem + 1.5vw);
  line-height: 1.15em;
}

h4 {
  max-width: none;
  text-align: center;
  margin-bottom: 2.5rem;
}

iframe {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  position: relative;
}

iframe.clicked{
  pointer-events: auto;
}

.iframe-wrapper {
  width: 100%;
  max-width: 110rem;
  height: 70vh;
  background-color: black;
}

.iframe-wrapper {
  padding: 0;
}

.segment.first {
  overflow: hidden;
}

.segment.seven {
  flex-direction: column;
}

.segment.five .content__text {
  box-sizing: border-box;
  max-width: 100%;
}

.election-wrapper {
  max-width: 100vw;
  height: 75vh;
  margin: 0 auto 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.election-wrapper p {
  font-size: 1.5rem;
  color: yellow;
}

.election-legend {
  text-align: center;
  height: 3rem;
  padding-top: 1rem;
}

.election-bar-wrapper {
  display: flex;
  align-items: flex-end;
  height: 100%;
  height: calc(100% - 4rem);
  margin-top: -4rem;
}

.election-bar {
  border: 1px solid white;
  min-width: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  opacity: 0;
}

.election-bar.go {
  justify-content: space-between;
  animation-name: election-bar;
  animation-duration: 2s;
  transform-origin: bottom;
}

@keyframes election-bar {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.election-bar-content {
  opacity: 0;
}

.election-bar-content.go {
  animation: election-bar-text;
  animation-duration: 0.2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes election-bar-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.election-bar-content:nth-of-type(1) {
  margin-top: -2rem;
  text-align: center;
  display: flex;
  justify-content: center;
}

.election-bar-content:nth-of-type(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
  margin-bottom: 1rem;
}

.president {
  height: 1.7rem;
  margin-left: -0.2rem;
  min-width: 6rem;
  transform: rotate(-90deg);
  display: flex;
}

.president p {
  height: 1.7rem;
  padding: 0.2rem 0.3rem 0.1rem 0.3rem;
}

.election-bar {
  border: 0.2rem solid;
}

.election-bar.rep {
  background: radial-gradient(circle, black 1px, transparent 1px),
  radial-gradient(circle, black 1px, transparent 1px) 2px 2px;
  background-size: 4px 4px;
  margin-right: 0.5rem;
}

.election-bar.dem {
  background: radial-gradient(circle, black 1px, transparent 1px),
  radial-gradient(circle, black 1px, transparent 1px) 4px 4px;
  background-size: 8px 8px;
  margin-right: 1.5rem;
}

.election-bar:nth-of-type(1) {
  height: 61.4%
}

.election-bar:nth-of-type(2) {
  height: 37.1%
}

.election-bar:nth-of-type(3) {
  height: 72.3%
}

.election-bar:nth-of-type(4) {
  height: 26.8%
}

.election-bar:nth-of-type(5) {
  height: 77.6%
}

.election-bar:nth-of-type(6) {
  height: 21.2%
}

.election-bar:nth-of-type(7) {
  height: 79.4%
}

.election-bar:nth-of-type(8) {
  height: 19.3%
}

.election-bar:nth-of-type(9) {
  height: 83.6%
}

.election-bar:nth-of-type(10) {
  height: 14.1%
}

.election-bar:nth-last-of-type(1) {
  margin-right: 0;
}

.election-years {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4rem;
  padding-top: 0.2rem;
}

.election-years p {
  margin-bottom: 0;
}

/*IMAGES*/

.image {
  height: 90vh;
  width: 100%;
  background-position: 50% 50%;
  background-size: cover;
}

@media screen and (orientation:portrait) {
  .image {
    height: 40vh;
  }
}


.image.one {
  background-image: url('../images/streetview/places_1.jpg');
}

.image.two {
  background-image: url('../images/streetview/places_3.jpg');
}

.image.three {
  background-image: url('../images/streetview/places_2b.jpg');
}

.image.four {
  background-image: url('../images/streetview/places_4.jpg');
}

.image.five {
  background-image: url('../images/streetview/places_5.jpg');
}

.image.six {
  background-image: url('../images/streetview/f150.png');
}


footer a:link {
  color: black;
  text-decoration: underline;
}

footer a:visited {
  color: black;
  text-decoration: underline;
}

footer a:hover {
  color: yellow;
  text-decoration: underline;
}

footer a:active {
  color: yellow;
  text-decoration: underline;
}



@media (max-width: 900px) {

  .segment {
    flex-direction: column;
  }



  @media (max-width: 479px) {

    .content__text {
      max-width: 60rem;
      padding: 2rem 1rem 1rem 1rem;
    }

    .segment {
      flex-direction: column;
    }

    .election-bar.dem {
      margin-right: 0.5rem;
    }

    .president {
      margin-left: 0.2rem;
    }

    .president p {
      height: 1.2rem;
    }

  }