.btn:focus, .btn:active, button, a, button:focus, button:active, a:focus, a:active {
  outline: none !important;
  box-shadow: none;
}

html {
scroll-behavior: smooth;

}

video {
	width: 100%;
	background: #000;
}

div.button {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 15px;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: all 0.25s;
    font-size: 15px;
    margin-top: 0px;

}
div.button i {
    margin-right: 5px;
}

div.button:hover {
background: rgba(255, 255, 255, 0.3);
}


.modal-dialog { max-width: 100%; width: 800px; }

#dnn_ctr4315_ModuleContent {
	overflow: hidden;
	position: relative;
}

/**************************************************
***************************************************
Intro Slide
***************************************************
*************************************************/
.DnnModule.DnnModule-2778 {
  overflow: hidden;
}
#starter {
  background: #37456D /*#002F6C*/;
  padding: 3rem 0rem 0rem 0rem;
  height: 800px;
  overflow: hidden;
}
#starter h1 .second {
  color: #fdf4de;
	display: block;
	    font-size: 3rem;
    line-height: 3rem;
}
#starter p {
  color: #fff;
  line-height: 1.3;
}
#starter h1 {
  margin-top: 6rem;
  display: block;
  margin-bottom: 20px;
  font-family: "Oswald", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  text-transform: uppercase;
  font-size: 4rem;
  color: #FFB81C;
  line-height: 4rem;
}
#starter .slick-slide img {
  width: 100%;
  min-height: 100%;
}
a.btn-down-scroll {
  font-size: 20px;
  color: #fff;
  transition: all 0.25s;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: normal;
  display: block;
  width: fit-content;
  border: 3px solid #FFf;
  border-radius: 3px;
  padding: 10px 40px;
}
.modal-body h4 {
  color: #fff;
	margin-bottom: 10px;
}

.modal-body h3 {
  color: #fff;
	margin-bottom: 10px;
}
.social-link {
  color: #fff !important;
  border: 3px solid #fff;
  padding: 10px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  display: inline-block;
  margin-left: 5px;
}
.social-top {
  margin-left: 25px;
}
a.btn-down-scroll:hover {
  background: #fff;
  color: rgba(34, 38, 12, 1);
  text-decoration: none;
}
.btn-down-scroll i {
  display: block;
  margin: 0;
  transition: all 0.1s;
}
a.btn-down-scroll:hover i {
  margin-top: 10px;
}
.social-link:hover {
  background: #fff;
}
.social-link:hover span {
  color: rgba(12, 31, 37, 1);
}
.fade-slideshow {
  z-index: 0;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.1;
 min-height: 100%;
    max-height: 2000px;
    overflow: hidden;
}
/**************************************************
***************************************************
Slide Backgrounds
***************************************************
**************************************************/
#dnn_ContentPaneFullBleed1 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)), url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/war-of-1812.jpg');
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  background-position: center;
  background-size: cover;
}
#dnn_ContentPaneFullBleed1.slide-3 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/WWI.jpg');
}
#dnn_ContentPaneFullBleed1.slide-4 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/WWII.jpg');
}
#dnn_ContentPaneFullBleed1.slide-6 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/Vietnam.jpg');
}
#dnn_ContentPaneFullBleed1.slide-8 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/OEF-OIF.jpg');
}

#dnn_ContentPaneFullBleed1.slide-9 {
	  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/Modern.jpg');
}


#dnn_ContentPaneFullBleed1.slide-5 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/Korean.jpg');
}
#dnn_ContentPaneFullBleed1.slide-7 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/Desert-Storm.jpg');
}

#dnn_ContentPaneFullBleed1.slide-2 {
  background-image: linear-gradient(to top left, rgba(0, 13, 29, 0.95), rgba(0, 13, 29, 0.8)),url('/Portals/1/Interactive/2019/11-uniform-evolution/navy/Civil-War.jpg');
}
/**************************************************
***************************************************
Scroll Bar
***************************************************
**************************************************/
/* width */ ::-webkit-scrollbar {
  width: 10px;
} /* Track */ ::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 3px;
} /* Handle */ ::-webkit-scrollbar-thumb {
  background: #c9d6e6;
  border-radius: 3px;
} /* Handle on hover */ ::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/**************************************************
***************************************************
Variations
***************************************************
**************************************************/
.variations h2 {
  margin-top: 0px;
  display: block;
  color: #fdf4de;
  font-size: 2rem;
  margin-bottom: 10px;
  border-bottom: 3px solid #fdf4de;
  padding-bottom: 10px;
}
.btn-group {
  width: 100%;
}
.btn-group > .btn {
  border-color: #fdf4de;
  color: #fdf4de;
  font-size: .7rem;
  width: 50%;
}
.btn-group > .btn.active {
  background: #fdf4de;
  color: rgb(12, 31, 37);
}
.variations p {
  color: #fff;
  line-height: 1.3;
}
.variations li {
  list-style: disc inside;
  color: #c9d6e6;
  margin-bottom: 15px;
  font-size: 19px;
  position: relative;
  float: left;
  display: contents;
}
/**************************************************
***************************************************
Slider Structure
***************************************************
**************************************************/
#slideshow-head h1 {
  margin-top: 4rem;
  display: block;
  text-align: center;
  margin-bottom: 5px;
  font-family: "Oswald", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  color: #fdf4de;
  text-transform: uppercase;
  font-size: 4rem;
}
#slideshow-head p {
  display: block;
  text-align: center;
  color: #fff;
  font-style: italic;
  margin-bottom: 0px;
}
.timeline {
  padding-bottom: 4rem;
}
.timeline .slick-slide {
  padding: 0px 40px !important;
}
.slick-list .slick-track div.slick-slide:last-child .timeline-dot:after {
  right: 75%;
  left: auto;
}
.timeline .fa {
  font-size: 45px;
  position: absolute;
  top: 75px;
  z-index: 9;
	color: #E4E4E4;
}
.timeline .fa-chevron-right {
  right: 50px;
}
.timeline .fa-chevron-left {
  left: 50px;
}
.timeline-dot {
  width: 20px;
  height: 20px;
  background-color: #FFB81C /*#c9d6e6*/;
  margin: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
  margin-top: 0px;
  position: relative;
}
.timeline-dot:after {
  content: "";
  width: 100vw;
  height: 4px;
  background: #c9d6e6;
  position: absolute;
  bottom: 7px;
  left: 100%;
}
.timeline-nav h2 {
  color: #c9d6e6;
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 1.5rem;
}
.timeline-nav p {
  color: #c9d6e6;
  text-align: center;
  max-width: 700px;
  margin: auto;
  margin-top: 40px;
  min-height: 200px;
}
.inside {
  height: 399%;
  width: 100%;
  border-radius: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0);
}
.changer-container {
  width: 384px;
  height: 550px;
  z-index: -1;
  margin: auto;
  display: block;
  max-width: 100%;
}
.frame {
  position: absolute;
}
.scrollable {
  height: 550px;
  width: 400px;
  margin: auto;
  overflow: scroll;
  overflow-x: hidden;
  max-width: 100%;
}
.remove-fix {
  position: relative;
}
.remove-height {
  height: 100%;
}
.circle {
  position: absolute;
}
.pulsating-circle {
  position: absolute;
  left: 5px;
  top: 8px;
  transform: translateX(-50%) translateY(-50%);
  width: 10px;
  height: 10px;
}
.circle .title {
font-size: 15px;
    right: 20px;
    top: -10px;
    position: relative;
    z-index: 99999999999999999999999999;
    display: block;
    color: #fff;
    background: rgba(0, 47, 105, 0.6);
    padding: 10px;
    border-radius: 3px;
    min-width: 100px;
    left: -116px;
}
button.circle {
  position: relative;
  width: 10px;
  height: 10px;
  z-index: 99;
  background: transparent;
  border: none;
  transition: all .25s;
}
.pulsating-circle:before {
  content: '';
  position: relative;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 45px;
  background-color: rgba(255, 255, 255, 0.8);
  animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFB81C /*rgba(255, 255, 255, 0.8)*/;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
button.circle .title {
  transition: all .25s;
}
button.circle:hover .title {
  background:rgba(0, 47, 105, 1);
}
.variation-selector h3 {
  color: #fff;
  font-size: 30px;
}
.variation-selector .nav-link {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 15px 20px;
  transition: all 0.25s;
  position: relative;
  display: inline-block;
  float: left;
}
.variation-selector .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.variation-selector .nav-link.active, .variation-selector .nav-link.active:hover {
  background-color: #fff;
  color: #000;
}
.nav-pills > li > a {
  border-radius: 0px;
}
.variation-selector li:nth-child(1) .nav-link {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.variation-selector li:last-child .nav-link {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
  color: rgb(12, 31, 37);
  background-color: #fff;
}
@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
     opacity: 0; 
  }
}
@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}

.dgov-grid.dgov-justify-center .dgov-col-xlg-4 {
	min-height: 580px;
}

.yk {
	background: #ffffff09;
    padding: 15px;
    font-style: italic;
	margin-bottom: 15px;
}

.yk p {
	font-size: .9rem;
}

.yk p:last-child {
	margin: 0px;
}

.modal-title {
display: inline-block;
    font-family: "Oswald", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    max-width: 95%;
    font-size: 1.4rem;
    opacity: .5;
}
.modal-header {
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 0px 15px;
}
.modal-content {
  border-radius: 4px;
  background: rgb(12, 31, 37);
}
.modal-header .close {
  color: #fff;
}
.modal-body {
  color: #fff;
	    padding: 0px 15px;
}
.modal-body p {
font-weight: 100;
	line-height: 1.4;
}

.modal-body p strong {
color: #FFB81C;
}

.modal.in .modal-dialog {
  opacity: 1;
}
.modal-header .close {
  margin-top: 0px;
  font-size: 2rem;
}
.slick-arrow {
  opacity: 0.8;
  transition: all 0.25s;
}
.slick-disabled {
  opacity: 0 !important;
}
.slick-arrow:hover {
  opacity: 1;
  color: #FFB81C;
}
.slick-disabled:hover {
  opacity: 0 !important;
  color: #fdf4de;
}
.hotspots {
  width: 100%;
  height: 100%;
	position: relative;
}
.circle {
  transition: all 0.25s;
  position: absolute;
}

.social-link:hover span {
	color: #000 !important;
}

@media (max-width: 1200px) {
	#dnn_ctr2782_HtmlModule_lblContent > div.timeline.slick-initialized.slick-slider > div > div > div.slick-slide.slick-current.slick-active > div > div {
		width: 90%;
		display: block;
		margin: auto;
	}
	.fade-slideshow {
  z-index: 0;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.1;
 min-height: 130%;
    max-height: 2000px;
    overflow: hidden;
}
}


@media (max-width: 991px) {
	
	#dnn_ctr2782_HtmlModule_lblContent > div.timeline.slick-initialized.slick-slider > div > div > div.slick-slide.slick-current.slick-active > div > div {
		width: 100%;
		display: inline-block;
	}
	
  #starter .dgov-col-md-5 img {
    display: none;
  }
  #starter {
    height: auto;
    padding-bottom: 50px;
  }
  h1 .first {
    display: block;
  }
	.tab-pane {
	margin: auto;
	transform: translate(50%, 0%);
}
	.pulsating-circle {
		display: none;
	}
}
@media (max-width: 780px) {
	
	p.desktop {display:none;}
	p.mobile {display:none;}
	.modal-dialog {
	width: 900px
}
	
.timeline .slick-slide {
  padding: 0px 0px !important;
	}
	
	
	.timeline .fa-chevron-right, .timeline .fa-chevron-left {
		top: -45px;
		opacity: 1;
	}
	.social-top {
		display: block;
		margin-top: 30px;
    margin-left: -4px;
	}
	
	.dgov-col-md-7 br {
		display:none;
	}
	
	#starter {
		background: linear-gradient(rgba(55, 69, 109, .7) , rgba(55, 69, 109, .7)) ,url(/Portals/1/Interactive/2019/11-uniform-evolution/navy/war-of-1812.jpg);
		background-size: cover;
	}
	
	#starter .slick-slider {
		display: none;
	}
}
@media (max-width: 550px) {
.changer-container {
		width: 90%;
	}
		.tab-pane {
	margin: auto;
	transform: translate(0%, 0%);
}
	.circle .title {
		min-width: 100px;
	}
	.switcher-fix {
	position: relative;
	padding: 0px;
	margin: 15px;
}

.switcher-fix .card {
	max-width: 100%;
}

.switcher-fix .card .changer-container {
	width: 100%;
}
}
/**************************************************
***************************************************
HOTSPOTS - SLIDE 1
***************************************************
**************************************************/
#f01-hotspot-05 {
left: 129px;
    top: 154px;
  opacity: 0; 
}
#f01-hotspot-03 {
left: 127px;
    top: 508px;
   opacity: 0;
}
#f01-hotspot-02 {
    left: 194px;
    top: 406px;
    opacity: 0;
}
#f01-hotspot-01 {
    left: 173px;
    top: 30px;
 opacity: 0;
}
.hotspots0 #f01-hotspot-01, .hotspots0 #f01-hotspot-02, .hotspots0 #f01-hotspot-03  {
  opacity: 1;
}
.hotspots1 #f01-hotspot-02 {
  opacity: 1;
}
.hotspots0 #f01-hotspot-05 {
  opacity: 1;
}
/**************************************************
***************************************************
HOTSPOTS - SLIDE 2
***************************************************
**************************************************/
#f02-hotspot-03 {
left: 105px;
    top: 496px;
	opacity: 0; 
}

#f02-hotspot-02 {
       left: 195px;
    top: 362px;  
	opacity: 0; 
}

#f02-hotspot-01 {
    left: 170px;
    top: 27px;
	opacity: 0; 
}

.hotspots0 #f02-hotspot-01, .hotspots0 #f02-hotspot-02, .hotspots0 #f02-hotspot-03 {
  opacity: 1;
}

.hotspots1 #f02-hotspot-02 {
	  opacity: 1;

}


/**************************************************
***************************************************
HOTSPOTS - SLIDE 3
***************************************************
**************************************************/
#f03-hotspot-03 {
     left: 141px;
    top: 497px;
  opacity: 0; 
}

#f03-hotspot-02 {
    left: 156px;
    top: 331px;
   opacity: 0; 
}
#f03-hotspot-01 {
 left: 174px;
    top: 26px;
   opacity: 0; 
}
#f03-hotspot-04 {
left: 80px;
    top: 407px;
   opacity: 0; 
}
.hotspots0 #f03-hotspot-01, .hotspots0 #f03-hotspot-02, .hotspots0 #f03-hotspot-03, .hotspots0 #f03-hotspot-06, .hotspots0 #f03-hotspot-04  {
  opacity: 1;
}

.hotspots1 #f03-hotspot-02 {
	  opacity: 1;

}
/**************************************************
***************************************************
HOTSPOTS - SLIDE 3B
***************************************************
**************************************************/

#f03b-hotspot-03 {
     left: 132px;
    top: 502px;
   opacity: 0; 
}
#f03b-hotspot-02 {
  left: 196px;
    top: 331px;
   opacity: 0; 
}
#f03b-hotspot-01 {
  left: 174px;
  top: 40px;
   opacity: 0; 
}
.hotspots0 #f03b-hotspot-01, .hotspots0 #f03b-hotspot-02, .hotspots0 #f03b-hotspot-03{
  opacity: 1;
}

.hotspots1 #f03b-hotspot-02 {
	  opacity: 1;
}
/**************************************************
***************************************************
HOTSPOTS - SLIDE 4
***************************************************
**************************************************/

#f04-hotspot-04 {
left: 87px;
    top: 319px;
   opacity: 0; 
}
#f04-hotspot-03 {
    left: 147px;
    top: 503px;
   opacity: 0; 
}
#f04-hotspot-02 {
  left: 160px;
    top: 374px;
   opacity: 0; 
}
#f04-hotspot-01 {
    left: 180px;
    top: 70px;
   opacity: 0; 
}
.hotspots0 #f04-hotspot-01, .hotspots0 #f04-hotspot-02, .hotspots0 #f04-hotspot-03 {
  opacity: 1;
}

.hotspots1 #f04-hotspot-02 {
	opacity: 1;
}

.hotspots0 #f04-hotspot-04 {
  opacity: 1;
}

/**************************************************
***************************************************
HOTSPOTS - SLIDE 4B
***************************************************
**************************************************/

#f04b-hotspot-01 {
    top: 37px;
    left: 182px;
	opacity: 0;
}

#f04b-hotspot-02 {
     top: 428px;
    left: 208px;
	opacity: 0;
}

#f04b-hotspot-03 {
top: 498px;
    left: 120px;
	opacity: 0;
}

#f04b-hotspot-04 {
    top: 178px;
    left: 120px;
	opacity: 0;
}

#f04b-hotspot-05 {
    top: 239px;
    left: 120px;
	opacity: 0;
}

.hotspots0 #f04b-hotspot-01, .hotspots1 #f04b-hotspot-01, .hotspots0 #f04b-hotspot-02, .hotspots0 #f04b-hotspot-03, .hotspots0 #f04b-hotspot-04, .hotspots0 #f04b-hotspot-05  {
	opacity: 1
}
/**************************************************
***************************************************
HOTSPOTS - SLIDE 5
***************************************************
**************************************************/
#f05-hotspot-04 {
    left: 71px;
    top: 337px;
   opacity: 0; 
}
#f05-hotspot-03 {
    left: 177px;
    top: 499px;
   opacity: 0; 
}
#f05-hotspot-02 {
    left: 185px;
    top: 431px;
   opacity: 0; 
}
#f05-hotspot-01 {
    left: 178px;
    top: 37px;
   opacity: 0; 
}
.hotspots0 #f05-hotspot-01, .hotspots0 #f05-hotspot-03{
  opacity: 1;
}
.hotspots0 #f05-hotspot-02, .hotspots1 #f05-hotspot-02 {
  opacity: 1;
}
.hotspots0 #f05-hotspot-04, .hotspots0 #f05-hotspot-04 {
  opacity: 1;
}

/**************************************************
***************************************************
HOTSPOTS - SLIDE 6
***************************************************
**************************************************/
#f06-hotspot-04 {
left: 152px;
    top: 238px;
   opacity: 0; 
}
#f06-hotspot-03 {
    left: 125px;
    top: 505px;
   opacity: 0; 
}
#f06-hotspot-02 {
    left: 191px;
    top: 411px;
   opacity: 0; 
}
#f06-hotspot-01 {
    left: 179px;
    top: 26px;
   opacity: 0; 
}
.hotspots0 #f06-hotspot-04, .hotspots0 #f06-hotspot-01, .hotspots0 #f06-hotspot-03, .hotspots0 #f06-hotspot-02 {
  opacity: 1;
}
.hotspots1 #f06-hotspot-02{
  opacity: 1;
}

/**************************************************
***************************************************
HOTSPOTS - SLIDE 6B
***************************************************
**************************************************/

#f06b-hotspot-04 {
left: 152px;
    top: 238px;
   opacity: 0; 
}

#f06b-hotspot-03 {
    left: 125px;
    top: 505px;
   opacity: 0; 
}
#f06b-hotspot-02 {
    left: 191px;
    top: 411px;
   opacity: 0; 
}
#f06b-hotspot-01 {
 left: 179px;
    top: 33px;
   opacity: 0; 
}
.hotspots0 #f06b-hotspot-01, .hotspots0 #f06b-hotspot-03, .hotspots0 #f06b-hotspot-02, .hotspots0 #f06b-hotspot-04 {
  opacity: 1;
}
.hotspots1 #f06b-hotspot-02{
  opacity: 1;
}

/**************************************************
***************************************************
HOTSPOTS - SLIDE 7
***************************************************
**************************************************/

#f07-hotspot-03 {
     left: 129px;
    top: 461px;
   opacity: 0; 
}
#f07-hotspot-02 {
left: 191px;
    top: 368px;
   opacity: 0; 
}
#f07-hotspot-01 {
  left: 179px;
  top: 35px;
   opacity: 0; 
}
.hotspots0 #f07-hotspot-01, .hotspots0 #f07-hotspot-03 {
  opacity: 1;
}
.hotspots0 #f07-hotspot-02, .hotspots1 #f07-hotspot-02 {
  opacity: 1;
}

/**************************************************
***************************************************
HOTSPOTS - SLIDE 8
***************************************************
**************************************************/
#f08-hotspot-05 {
    left: 148px;
    top: 226px;
	opacity: 0;  
}

#f08-hotspot-04 {
     left: 148px;
    top: 159px;
	opacity: 0;  
}

#f08-hotspot-03 {
    left: 130px;
    top: 487px;
   opacity: 0; 
}
#f08-hotspot-02 {
    left: 188px;
    top: 356px;
   opacity: 0; 
}
#f08-hotspot-01 {
     left: 172px;
    top: 25px;
   opacity: 0; 
}
.hotspots0 #f08-hotspot-01, .hotspots0 #f08-hotspot-03, .hotspots0 #f08-hotspot-04, .hotspots0 #f08-hotspot-05 {
  opacity: 1;
}
.hotspots0 #f08-hotspot-02, .hotspots1 #f08-hotspot-02 {
  opacity: 1;
}

/**************************************************
***************************************************
HOTSPOTS - SLIDE 8b
***************************************************
**************************************************/
#f08b-hotspot-03 {
    left: 130px;
    top: 487px;
   opacity: 0; 
}
#f08b-hotspot-02 {
 left: 192px;
    top: 379px;
   opacity: 0; 
}
#f08b-hotspot-01 {
 left: 180px;
    top: 71px;
   opacity: 0; 
}
.hotspots0 #f08b-hotspot-01, .hotspots0 #f08b-hotspot-03 {
  opacity: 1;
}
.hotspots0 #f08b-hotspot-02, .hotspots1 #f08b-hotspot-02 {
  opacity: 1;
}


/**************************************************
***************************************************
HOTSPOTS - SLIDE 9
***************************************************
**************************************************/
#f09-hotspot-04 {
    left: 71px;
    top: 328px;
   opacity: 0; 
}
#f09-hotspot-03 {
    left: 181px;
    top: 492px;
   opacity: 0; 
}
#f09-hotspot-02 {
     left: 197px;
    top: 409px;
   opacity: 0; 
}
#f09-hotspot-01 {
    left: 176px;
    top: 17px;
   opacity: 0; 
}
.hotspots0 #f09-hotspot-01, .hotspots0 #f09-hotspot-03 {
  opacity: 1;
}
.hotspots0 #f09-hotspot-02, .hotspots1 #f09-hotspot-02 {
  opacity: 1;
}

.hotspots0 #f09-hotspot-04 {
	opacity: 1;
}

	
/* MOBILE */

@media (max-width: 550px) {
	#f03-hotspot-06 {
    left: 70px;
    top: 153px;
	}
	#f04-hotspot-06 {
    left: 82px;
    top: 231px;
	}
	
	#f05-hotspot-06 {
		left: 80px;
	}
	
	#f05-hotspot-05 {
    left: 89px;
    top: 1400px;
	}
	
	#f06-hotspot-05 {
    left: 119px;
    top: 126px;
	}
	
	#f06-hotspot-07 {
    left: 57px;
    top: 289px;
	}
	
	#f06-hotspot-06 {
    left: 74px;
    top: 750px;
	}
	
	#f07-hotspot-05 {
    left: 113px;
    top: 232px;
	}
	
	#f07-hotspot-07 {
    top: 635px;
    left: 58px;
	}
}



	/* CREDITS */
	#credits {
	background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(10,10,10,1) 100%);
    color: #838383;
    font-size: 13px;
		padding: 2rem 0rem;
		text-align: center;
		position: relative;
	}

#credits:before {
	content: "";
	background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
	width: 100%;
	height: 100px;
	top: -80px;
	left: 0px;
	position: absolute;
}
	
	#credits h3, #credits .btn {
		    display: block;
    margin-bottom: 10px;
    font-family: "Oswald", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: #c0c0c0;
    text-transform: uppercase;
    font-size: 17px;
		text-align: center;
	}
#credits h4 {
font-size: 17px;
    color: #acacac;
}
	
	#credits li {
		    margin-bottom: 10px;
	}
#credits ul {
margin-bottom: 20px;
}

#accordion {
	margin: 0px 15px;
}