:root {
  --fore: #dcdcdc;
  --back: black;
  --red: #C22528;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  color: var(--fore);
  background: var(--back);
  font-family: 'proxima-nova';
  overflow-x: hidden;
}
.mask {
	width: 100%;
	height: 100vh;
	background-color: black;
	opacity: .9;
	z-index: 999;
	position: fixed;
	left: 0;
	top: 0;

}

.loader {
	font-size: 3.5rem;
	color: #930404;
	position: fixed;
    top: 35vh;
    left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	
	animation: pulse infinite ease-in-out 1s;
	/*-webkit-animation: pulse infinite ease-in-out 1s;*/
}


a {
  color: var(--fore);
    text-decoration: none;
    border-bottom: 1px solid #dcdcdc;
}
a:hover {
	color: #fff;
}
h2 {
  padding: 0 5%;
  font-weight: 100;
  font-size: 43px;
  line-height: 1.2;
}
@media only screen and (max-width: 1000px) {
	h2 {
		font-size: 35px;
	}
}

.sidebar {
	position: relative;
}

.sidebar h2.sidebar-head {
	font-size: 5rem;
  font-weight: 700;
  position: absolute;
	top: 0;
	color: var(--fore);
	padding: 0;
	left: 5%;
  margin: 0;

}

/*@media (max-width: 900px) {
	.sidebar-head .mobile{
		position: relative;
		font-size: 3rem !important;
		margin-bottom: 20px;

	}
}*/

h3 {
  padding: 0 5%;
  text-transform: uppercase;
  /*font-size: 43px;*/
  font-size: 40px;
  line-height: 1.1;
}
@media (max-width: 500px) {
	h3 {
		font-size: 30px;
	}
}
h3.behind {
	font-size: 30px;
}
@media (max-width: 500px) {
	h3.behind {
		font-size: 25px;
	}
}

h5 {
	font-size: 1.3rem;
    margin-left: 5%;
}
p {
  padding: 0 5%;
  /*font-size: 20px;*/
  font-size: 1.5rem;
  font-weight: 100;
}
.container {
  width: 100%;
  overflow: hidden;
  background: url('../img/background2.png') var(--back);
  background-position: top center;
}
.section {
  position: relative;
  /*width: 100%;
  max-width: 700px;*/
  width: 60%;
  margin: auto;
  z-index: 10;
}
@media only screen and (max-width: 800px) {
  .section {
    width: 98%
  }
}

.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.expand {
  color: var(--fore);
    font-size: 2.5rem;
    z-index: 9;
    position: absolute;
    top: 92%;
    right: 20px;
    cursor: pointer;
}
@media only screen and (max-width: 1024px) {
  .expand {
    display: none;
  }
}

.landing2 {
	overflow: hidden;
}
.landing video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.landing img {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  /*padding: 20px;*/
  width: 100%;
  /*max-width: 1200px;*/
  opacity: 0.8;
}
.landing img.mobile {
  display: none;
}
.desktop {
	display: block;
}
.mobile {
	display: none;
}

.subhead {
  position: relative;
}
.subhead h3 {
  margin-bottom: 0;
}
.subhead p {
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
}
.images {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-top: 50px;
}
.images img {
  padding: 10px;
  width: 40%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity 1s, transform 1s;
}
.images img:nth-child(2) {
  transform: translate(50%, 0);
}
.images img.visible {
  opacity: 1;
  transform: translate(0, 0);
}
@media (max-width: 1024px) {
  .images {
    /*flex-direction: column;
    align-items: center;*/

  }
  .images img {
    /*width: 100%;*/
  }
}
.captions {
  margin: 10px 5% 50px 5%;
}
.captions .caption {
  padding: 0;
  /*font-size: 17px;*/
  font-size: 1.5rem;
  font-style: italic;
}

#img-shaffer, #img-buckner, #img-herbst, #img-warren1, #img-dabyliuk, #img-warren2 , #img-kolomoisky, #img-airport, #img-zelensky, #img-cleveland {
  padding: 10px;
  width: 100%;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity 1s, transform 1s;
}

#img-shaffer.visible, #img-buckner.visible, #img-herbst.visible, #img-dabyliuk.visible , #img-warren1.visible, #img-warren2.visible, #img-kolomoisky.visible, #img-airport.visible, #img-zelensky.visible, #img-cleveland.visible  {
	opacity: 1;
	transform: translate(0, 0);
}

#img-left {
	width: 400px;
	height: 400px;
	margin: 20px 20px 20px 5%;
	float: left;
	transition: transform 1s;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../img/Warren-Ohio-locator.jpg);
	background-size: 100%;
}

@media screen and (max-width: 1024px) {
	#img-left {
		float: none;
		width: 85%;
		margin: 20px 5%;
	}
}

#img-left.visible {
  animation: animateBackground forwards 1 ease-in-out 2s;
	/*-webkit-animation: animateBackground forwards 1 ease-in-out 2s;*/
}
@keyframes animateBackground {
	0% {
		background-size: 100% auto;
	}
	100% {
		background-size: 130% auto;
	}

}

.img-left {
	width: 400px;
	margin: 20px 20px 20px 5%;
	float: left;
}
@media only screen and (max-width: 1024px) {
	.img-left {
		float: none;
		width: 90%;
		margin-left: 5%;
	}

}

#timeline #map {
  position: relative;
  background-color: black;
}
@media only screen and (max-width: 600px) {
	#timeline #map {
		/*min-height: 30vh;*/
	}
}
#timeline #map img {
  position: absolute;
  width: 100%;
  float: right;
  transform: translate(-40%, 0);
  z-index: 0;
  transition: opacity 500ms;
}
@media only screen and (max-width: 600px) {
	#timeline #map img {
		/*transform: translate(-60%, 30%) scale(3);*/
	}
}
#timeline #map .map {
  opacity: 0;
}
#timeline #map-light {
  transition: opacity 500ms;
}
#timeline .stage {
  position: relative;
  max-width: 500px;
  margin: 25% 5%;
  margin-left: auto;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 80;
}
@media only screen and (max-width: 1000px) {
	#timeline .stage {
		background: transparent;
		/*margin: 90% 5%;*/
		margin-bottom: 25%;
		margin-top: 15%;
	}
	#timeline #stage7 {
		margin-top: 22%;
	}
}
#timeline .stage b.red {
  color: var(--red);
  font-weight: 700 !important;
}
#timeline .stage p:first-child b {
  color: var(--fore) !important;
  font-weight: 700 !important;
}

.map-mobile {
	position: relative;
	height: auto;
	clear: both;
	height: 45vh;
}

.map-mobile img {
	width: 100%;
	transform: translate(-65%, 40%) scale(2.3);
}

.map-mobile .mobile-overlay {
	position: absolute;
	top: 0; left: 0;
}

#Warren-locator-map {
	margin-left: 5%;
  float: left;
  padding-right: 20px;
}
#credits {
  margin-top: 3%;
  text-align: center;
  padding-bottom: 5%;
}
#credits h4 {
  margin-bottom: 0;
  color: gray;
  font-size: 1rem;
}
#credits h5 {
  margin: 0;
  font-size: 1rem;
}
#credits img {
  width: 100%;
  max-width: 300px;
  margin: 50px;
}
#navbar {
    width: 100%;
	height: 40px;
    background: linear-gradient(rgb(0, 0, 0),rgba(0, 0, 0, 0.75));
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 10px;
    position: fixed;
	top: 0;
    z-index: 3000;
	opacity: 0;
   transform: translate3d(0,0,0);
   font-family: 'proxima-nova', Helevtica, Verdana, sans-serif; color: #fff; letter-spacing: 4px; text-transform: uppercase; font-size: 15px;font-weight: 400;
   transition: opacity 1s;
}

#navbar.visible {
	animation: fadeInNavbar forwards 1 ease-in-out 1s;
	/*-webkit-animation: fadeInNavbar forwards 1 ease-in-out 1s;*/
}
@keyframes fadeInNavbar {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}

}

#navbar leftalign, navbar rightalign {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
@media only screen and (max-width: 1024px) {
	#navbar leftalign {
		justify-content: flex-start;
	}
}
#navbar rightalign {
	margin-right: 30px;
	margin-top: -9px;
}
@media only screen and (max-width: 500px) {
	#navbar rightalign {
		margin-right: 10px;
		margin-top: -5px;
	}
}
leftalign a {
  border: 0;
  cursor: pointer;
}
leftalign a:hover {
  opacity: .7;
}
textbranding {
    font-family: 'proxima-nova', Helevtica, Verdana, sans-serif;
    color: #fff;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 15px;
		margin: 0 0 0 25px;
    font-weight: 400;
	text-align: center;
}
@media screen and (max-width: 1024px) {
	#navbar {
		display:block;
		position: fixed;
		overflow: hidden;
	}
	#navbar rightalign {
		position: absolute;
		right:0;
		top: 7px;
	}
	textbranding {
		display:none;
	}
}
pglogo {
    background: url(../../brighton/img/PG-logo-white.png) center center no-repeat;
    background-size: contain;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    margin-top: 0px;
    display: block;
}

social {
    font-size: 22px;
    width: auto;
	margin-top: 8px;
}

social a.social_link {
    color: #fff !important;
    padding: 0 5px;
    border: none !important;
}

social a.social_link:hover, social a:hover {
  opacity: .7;
}

#navbar social .fab {
	font-size: 2rem;

}
@media screen and (max-width: 500px) {
	#navbar social .fab {
		margin-top: 12px;
	}
}

.caption-float-left {
  margin: 0 20px 20px 5% !important;
    width: 400px;
    padding: 0;
    font-size: 1.5rem;
    font-style: italic;
    float: left;
    clear: both;
    font-weight: 100;
}

@media screen and (max-width: 1024px) {
.caption-float-left {
		float: none;
		width: 90%;
	}

.square {
	width: 6px;
	height: 6px;
	background-color: var(--fore);
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	margin-bottom: 20px;
}

.spacer {
	height: 20px;
	clear: both;
}

#backgroundImg {
	width: 100%;
	height: 100vh;
	background: url('../img/467468940.jpg') var(--back) top center no-repeat;
	background-size: cover;
	overflow: hidden;
	/*filter: blur(20px);*/
}
@media (max-width: 500px) {
	/*#backgroundImg { display: none; }*/
}

#backgroundImg.visible {
	animation: unblur forwards 1 ease-in-out 2s;
	/*-webkit-animation: unblur forwards 1 ease-in-out 2s;*/
}

@keyframes unblur {
	0% {
		filter: blur(20px);
	}
	100% {
		filter: blur(0px);
	}
}

.sidebar {
	position: relative;
}

hr {
	border: 0;
    height: 1px;
    background: #dcdcdc;

}
@media only screen and (max-width: 600px) {
	hr {
		width: 90%;
		margin-left: 5% 0;
	}
}

.mobile-background-img {
	width: 100%;
	height: auto;
}

#Ukraine-Money-laundering-diagram {
  margin-left: 50%;
  transform: translatex(-50%) !important;
}



.full-width {
	width: 100%;
}



iframe {
	border-width: none !important;
	border: none !important;
}

@media (max-width: 1000px) {
  .landing img.desktop {
    display: none;
  }
  .landing img.mobile {
    display: block;
  }
  .desktop {
	  display: none;
  }
  .mobile {
	  display: block;
  }
}


.sidebar {
	position: relative;
}