/*======Global Styles======*/

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap');

body {
  background: #faf7e6;
  font-family: 'Source Sans Pro', sans-serif;
  color: #113155;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: #21538e;
  line-height: 2rem;
}

p {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 2rem;
}

a {
  color: #db4a44;
  text-decoration: none !important;
}

hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #db4a44, #ccc);
}

.bg-primary {
  background-color: #3c659d !important;
}

.bg-danger {
  background-color: #db4a44 !important;
}

.btn-primary {
  color: #faf7e6 !important;
  background-color: #3c659d !important;
  border-color: #3c659d !important;
  border-radius: 0em !important;
}

.btn-primary:hover {
  transition: fill 0.5s ease;
  background-color: #db4a44 !important;
  opacity: 1;
}

.btn-danger {
  color: #faf7e6 !important;
  background-color: #db4a44 !important;
  border-color: #db4a44 !important;
  border-radius: 0em !important;
}

.btn-danger:hover {
  transition: fill 0.5s ease;
  background-color: #3c659d !important;
  opacity: 1;
}

.title-header {
  display: inline-block;
  padding-bottom: 5px;
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 1.5px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
}

.page-title {
  line-height: 2.5rem;
}

.hint-text {
  font-weight: 300;
  color: #375886;
  font-size: 1.2rem;
}

.page-sub-title a h3 {
  padding: 3% 0;
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 1.5px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
  line-height: 2.5rem;
  font-weight: 500;
}

.page-sub-title a h3:hover {
  transition: 0.5s ease;
  background: linear-gradient(to left, #ccc, #21538e, #ccc);
  background-size: 100% 1.5px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
  color: #db4a44;
}

.sub-heading {
  font-weight: 500;
}

/*======hint icon alignment*/

.img-valign {
  vertical-align: middle;
  margin-bottom: 0.21em;
  margin-left: 0.21em;
}

.text-alignment {
  top: 50%;
  transform: translateY(-50%);
}

/*======Header======*/
.crane {
  height: 226px;
  width: 376px;
  background-image: url(../svg/cranes.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
}

.gas {
  height: 226px;
  width: 376px;
  background-image: url(../svg/gasworks.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.greenheadright {
  height: 226px;
  width: 376px;
  background-image: url(../svg/greensheaderright.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.greenheadleft {
  height: 226px;
  width: 376px;
  background-image: url(../svg/greenheadingleft.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.hardingheadleft {
  height: 226px;
  width: 376px;
  background-image: url(../svg/hardingheadingleft.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.hardingheadright {
  height: 226px;
  width: 376px;
  background-image: url(../svg/hardingheadingright.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.smithheadright {
  height: 226px;
  width: 376px;
  background-image: url(../svg/smithheadingright.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.smithheadleft {
  height: 226px;
  width: 376px;
  background-image: url(../svg/smithheadingleft.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.jonesheadleft {
  height: 226px;
  width: 376px;
  background-image: url(../svg/jonesheadingleft.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.jonesheadright {
  height: 226px;
  width: 376px;
  background-image: url(../svg/jonesheadingright.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

.logo-main {
  color: #3c659d;
  text-transform: uppercase;
  font-family: Myriad Pro, Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/*=====NAVIGATION=====*/

.navbar-custom {
  background: #3c659d !important;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
}

.navbar-brand h4 {
  color: #faf7e6;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding-left: 0.5rem;
  letter-spacing: 0.1rem;
}

.navbar-custom .navbar-nav .nav-link {
  color: #faf7e6;
  padding: 1rem 1rem;
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: #faf7e6;
  background-color: #21538e;
}

.navbar-custom .navbar-nav .dropdown-menu {
  background-color: #3c659d !important;
  border: none;
}

.navbar-custom .navbar-nav .dropdown-menu .dropdown-item {
  color: #faf7e6 !important;
}

.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color: #21538e;
}

.fa,
.fas {
  color: #faf7e6;
}

/*======Introduction page======*/

/*======FIRE PLACE======*/

.landingcontainer {
  display: none;
}

#button,
#maphistbutton,
#demoMapsbtn,
#maphistbuttonmob,
#TempMuBtn,
#AbbeyRoadBtn,
#EastHamBtn,
#PubFoodBtn,
#WorkMensBtn,
#HolRoadSchBtn,
#MayFamBtn,
#BeckAlpsBtn,
#SewageBtn,
#GasWorkBtn,
#WarCampBtn,
#ChurchBtn,
#TheDocksBtn,
#SilverTateBtn {
  cursor: pointer;
}

#button rect:hover {
  transition: fill 0.5s ease;
  fill: #db4a44 !important;
  opacity: 1;
}

#maphistbutton rect:first-child:hover {
  transition: fill 0.5s ease;
  fill: #db4a44 !important;
  opacity: 1;
}

#maphistbuttonmob rect:first-child:hover {
  transition: fill 0.5s ease;
  fill: #db4a44 !important;
  opacity: 1;
}

/* ========= Home page=========== */

/*===== shocase scetion======= */

.showplace {
  background: url(../svg/show_bg.svg) no-repeat center center fixed;
  background-size: cover;
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 2px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
}

#rocketwill,
#satwill,
#willtextfirst,
#willlogofirst,
#karenship,
#karenmask,
#karentextsecond,
#karenlogosec,
#dognick,
#glassnick,
#nickytextthird,
#nicklogothird,
#chrisphoto,
#chirswestham,
#christextfourth,
#chirslogoour,
#will-hint,
#karen-hint,
#nicky-hint,
#chriis-hint,
#willlogom,
#karenlogom,
#nicklogom,
#chirslogom {
  visibility: hidden;
}

#chrisbtnskip,
#nickybtnskip,
#karenbtnskip,
#willbtnskip {
  cursor: pointer;
}

#logomobile {
  visibility: hidden;
}

/*==== End showcase section =====*/

/*======= Newham map location=======*/

#zoommap {
  border: solid #21538e 1px;
}

#buttonzoomin,
#buttonzoomout {
  cursor: pointer;
}

.nomorezoom {
  opacity: 0.1;
}

/* qoutes section */

.red-quote {
  color: #db4a44;
  border-bottom: #21538e 1.3px solid;
  font-weight: 600;
}

.blue-name {
  color: #21538e;
  margin: 0;
}

.cream-b {
  border: #21538e 1px solid;
}

/* audio sectio of the quotes  */

#play-pause-will,
#play-pause-karen,
#play-pause-nicky,
#play-pause-free {
  cursor: pointer;
  height: 55px;
  width: 55px;
  background-image: url('../img/quotebtns/playbtn.svg');
  background-repeat: no-repeat;
  margin: auto;
}

.play-will,
.play-karen,
.play-nicky,
.play-free {
  background-image: url('../img/quotebtns/playbtn.svg');
}

.pause-will,
.pause-karen,
.pause-nicky,
.pause-free {
  background-image: url('../img/quotebtns/pausebtn.svg') !important;
}

/* ========= Home page end=========== */

/*=====MAPS PAGE=====*/
.mapcontainer h3 {
  border-bottom: #db4a44 solid 2px;
}

.map-icon-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*=====History map page=====*/

#newhamhistory {
  width: 950px;
  height: 950px;
}

#churchlabel,
#royaldockslabel,
#holbornlabel,
#templelabel,
#workinglabel,
#publabel,
#becksewagelabel,
#beckgasworklabel,
#beckalpslabel,
#warcamplabel,
#tatelabel,
#mayflowerlabel,
#abbeylabel,
#eastwesthamlabel {
  visibility: hidden;
}

#labdemise {
  opacity: 0;
}

#mapbtns circle {
  cursor: pointer;
}

#mapbtns circle:hover {
  transition: fill 0.5s ease;
  fill: #21538e !important;
  opacity: 1;
}

/*=====demographic map script======*/

#demographic {
  width: 950px;
  height: 950px;
}

#yearone,
#yearonesat,
#yeartwo,
#yeartwosat,
#yearthree,
#yearthreesat,
#yearfour,
#yearfoursat,
#yearv,
#yearvsat,
#yearsix,
#yearsixsat,
#yearonered,
#yeartwored,
#yearthreered,
#yearfourred,
#yearvred,
#yearsixred {
  visibility: hidden;
}

#yearsixbtn,
#yearvbtn,
#yearfourbtn,
#yearthreebtn,
#yeartwobtn,
#yearonebtn,
#mapdemobutton {
  cursor: pointer;
}

#mapdemobutton rect:first-child:hover {
  transition: fill 0.5s ease;
  fill: #db4a44 !important;
  opacity: 1;
}

/*=====FAMILIES=====*/

.family-b {
  border-bottom: #db4a44 solid 1px;
}

.pseudonyms {
  color: #db4a44;
}

.pseudonyms-cream-b {
  border: #db4a44 1px solid;
}

#hardingname,
#jonesname,
#smithname,
#greenname {
  visibility: hidden;
}

#hardingpicbtn,
#jonespicbtn,
#smithpicbtn,
#michael,
#debbie,
#familiesbutton rect,
#brian,
#kim,
#chirstopher,
#greenpicbtn,
#mary,
#james,
#lisa,
#nicky,
#susan,
#david,
#karen,
#jason,
#jenny,
#amy,
#william-s,
#melissa,
#emma {
  cursor: pointer;
}

#familiesbutton rect:hover {
  transition: fill 0.5s ease;
  fill: #db4a44 !important;
  opacity: 1;
}

/*==== WORKS PAGE ====*/

#workchart {
  width: 870px;
  height: 870px;
}

.workpage,
.jobs-list,
.skill-list {
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 2px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
}

#intersection,
#young-know,
#old-know,
#young-brit,
#older-brit {
  visibility: hidden;
}

#britbtnone,
#britbtntwo,
#knowbtnone,
#knowbtntwo,
#interbtn,
#clsbtninter,
#clsbtnknowyng,
#clsbtnknowold,
#clsbtnbritold,
#clsbtnbrityng,
#jobsBtn,
#skillsBtn,
#workbutton,
#svkbutton,
#jobsbutton {
  cursor: pointer;
}

/*=====JOBS PAGE=====*/
#younggentext,
#midgentext,
#oldgentext,
#youngernames,
#middlenames,
#oldernames,
#jamesquote,
#milissaquote,
#jasonquote {
  visibility: hidden;
}

#younggenbtn,
#oldergenbtn,
#middlegenbtn,
#clsbtnynggen,
#clsbtnmidgen,
#clsbtnoldgen,
#oldplatebtn,
#yngplatebtn,
#midplatebtn,
#clsbtnoldjob,
#clsbtnmidjob,
#clsbtnyngjob,
#jamesandmarybtn,
#willdocksbtn,
#michdecbtn,
#willtatebtn,
#davidcourtbtn,
#debbiechdbtn,
#maryschbtn,
#melissajobbtn,
#karenworkbtn,
#lisaworktbtn,
#braindevbtn,
#chrisinbtn,
#jasontvbtn,
#nickyjobbtn {
  cursor: pointer;
}

#jobchart {
  width: 870px;
  height: 870px;
}

/*=====SKILLs PAGE=====*/

#oldgenskilltext,
#midgenskilltext,
#ynggenskilltext,
#youngnamesskill,
#middlenamesskill,
#oldernamesskill,
#jasonlearnquote,
#karenlearnquote,
#brianschoolquote,
#melschoolquote,
#willschoolquote,
#davidlearnquote {
  visibility: hidden;
}

#younggenskillbtn,
#middlegenskillbtn,
#oldergenskillbtn,
#clsbtnynggenskill,
#clsbtnmidgenskill,
#clsbtnoldgenskill,
#plifthyng,
#plifthmid,
#plifthold,
#clsbtnoldskill,
#clsbtnmidskill,
#clsbtnyngskill,
#willbtnskill,
#michwoodbtnskill,
#maryjamesfishbtn,
#davsusanshipsbtn,
#debbiedisneytbtn,
#michdebstinkbtn,
#willmodelbtn,
#lisabtnskill,
#melschbtnskill,
#lisapartytbtn,
#karencarvansbtn,
#melmentalbtn,
#chrishndsbtnskill,
#jasonbtnskill,
#nickybtnskill,
#emmabtnskill,
#brianbtnskill,
#chrissbtnlearn,
#jasonbtnlearn,
#jennybtnlearn,
#nickybtnlearn,
#emmabtnlearn,
#brianbtnlearn {
  cursor: pointer;
}

#skillchart {
  width: 870px;
  height: 870px;
}

/*====== VALUES SECTION =======*/

#familylist {
  list-style: none;
  line-height: 2rem;
}

#familylist li::before {
  content: '•';
  color: #3c659d;
  font-weight: bold;
  font-size: 1.5rem;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/*====== VALUES SECTION =======*/

#commbutton,
#importbutton,
#valuebutton,
#identitybutton,
#fam-value-btn,
#yngvase,
#midvase,
#oldvase,
#clsbtnoldidentity,
#willdunbtn,
#davidsusanbtn,
#jamesandmaryneighbtn,
#clsbtnmidentity,
#karenidentitybtn,
#lisaidentitybtn,
#clsbtnyngidentity,
#nickyidentitybtn,
#jennyidentitybtn,
#jasonidentitybtn,
#brianidentitybtn,
#chrisidentiyibtn,
#oldpic,
#midpic,
#yngpic,
#clsbtnoldifamily,
#clsbtnmidfamily,
#clsbtnyngfamily,
#willfamilybtn,
#mikedebsfamilybtn,
#suedavefamilybtn,
#maryjamesfamilybtn,
#melfamilybtn,
#karenfamilybtn,
#lisafamilybtn,
#brianfamilybtn,
#chrisfamilybtn,
#jasonifamilybtn,
#jennyfamilybtn,
#nickyfamilybtn,
#emmafamilybtn,
#oldtime,
#midtime,
#yngtime,
#clsbtnoldicommunity,
#clsbtnmidcommunity,
#clsbtnyngcommunity,
#willcommbtn,
#mikedebscommbtn,
#suedavecommbtn,
#maryjamescommbtn,
#melcommbtn,
#karencommbtn,
#lisacommbtn,
#briancommbtn,
#chriscommbtn,
#jasonicommbtn,
#jennycommbtn,
#nickycommbtn,
#emmacommbtn {
  cursor: pointer;
}

#flowersold,
#midflowers,
#yngflowers,
#youngernames,
#middlenamesdentity,
#oldernamesidentity,
#youngernamesfamily,
#middlenamesfamily,
#oldernamesifamily,
#frame-pol,
#frame-dock,
#frame-pub,
#oldernamesicommunity,
#middlenamescommunity,
#youngernamescommunity,
#oldlabel,
#midlabel,
#ynglabel {
  visibility: hidden;
}

/*====== VALUES SECTION ENDS =======*/

/*====== GALLERIES SECTION =======*/

/*======= Gallery sub heading=======*/

.gallery-sub-title h3 {
  padding: 3% 0;
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 1.5px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
  line-height: 2.5rem;
  font-weight: 500;
}

.border-primary {
  border-color: #3c659d !important;
  border: 2px solid !important;
}

.gallery-border {
  border: #db4a44 1px solid;
}

.gallery-thumb {
  width: 300px;
}

/*===== gallery navigation=====*/

#hardingfampicbtn,
#newhampicbtn,
#jonesfampicbtn,
#mrsmithspicbtn,
#greensfampicbtn,
#galleriesbutton {
  cursor: pointer;
}

#greenfamname,
#hardinfamgname,
#newhamname,
#jonesfamname,
#mrsmithname {
  visibility: hidden;
}

.fancybox-caption {
  font-size: 1.2em;
  color: #faf7e6;
}

.fancybox-bg {
  background: #113155;
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.9;
}

.fancybox-thumbs {
  background: #faf7e6 !important;
}

.fancybox-close-small {
  color: #db4a44 !important;
}

/* .fancybox-button {
  background: #113155;
} */

/*===== gallery navigation ends=====*/
/*====== GALLERIES SECTION ENDS =======*/

/*====== TEAM SECTION =======*/

#team-section .card-body {
  background: #faf7e6;
  border: #db4a44 1px solid;
  border-radius: 0em;
}

#team-section .card-title {
  padding-bottom: 5px;
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 1.5px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
}

#team-section img {
  margin-top: -100px;
}

.introduction-team {
  margin-bottom: 100px;
}

.team-sec {
  margin-bottom: 110px;
}

.team-sec-top {
  margin-top: 110px;
}

.team-border {
  border: #db4a44 1px solid;
}

.team-icon {
  margin-top: -100px;
}

.team-modal-head {
  padding-bottom: 5px;
  background: linear-gradient(to left, #ccc, #db4a44, #ccc);
  background-size: 100% 1.5px;
  background-position: bottom 0 left 0, bottom 5px left 0;
  background-repeat: no-repeat;
}

.modalimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.fanBack {
  background: #faf7e6 !important;
  border: #db4a44 1px solid;
  display: none;
  max-width: 800px;
}

.famTree {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 200px;
}

/*====== TEAM SECTION ENDS =======*/

/* References page */

#ref-section em {
  font-weight: 600;
}

#ref-section a {
  color: #21538e;
  text-decoration: none !important;
  font-weight: 600;
}

#ref-section a:hover {
  color: #db4a44;
}

/* References page end */

/*=====SMALL AUDIO PLAYER=====*/

#myPlayerBg {
  background: #3c659d;
  width: 100%;
  padding-bottom: 3px;
  border-radius: 4px;
}

#defaultBar {
  width: 100%;
  position: relative;
  background: #e4918e;
  height: 10px;
}

#progressBar {
  position: absolute;
  height: 10px;
  background: #db4a44;
  width: 0px;
}

#playButton {
  background-color: #3c659d;
  border: none;
  height: 32px;
  width: 32px;
  background-image: url(../img/player/play_icon.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 0.9rem;
  margin-left: 0.4rem;
}

#muteButton {
  background-color: #3c659d;
  border: none;
  height: 32px;
  width: 32px;
  background-image: url(../img/player/mute_icon.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 0.9rem;
  margin-left: 0.4rem;
}

#muteButton:active,
#playButton:active {
  position: relative;
}

#currentTime,
#fullDuration {
  color: #faf7e6;
}

/* play and pause btn */

.song {
  display: flex;
  align-items: center;
  font-size: 1.1em;
  font-family: 'Roboto';
}

.pause {
  margin-left: 0.5em;
  cursor: pointer;
}

button {
  border: none;
  cursor: pointer;
  outline: none;
}

button#playpausebtn {
  background: url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat;
  width: 10%;
  height: 100px;

  display: block;
  margin: auto;
}

button#mutebtn {
  background: url(https://image.flaticon.com/icons/svg/204/204287.svg) no-repeat;
  width: 10%;
  height: 100px;

  display: block;
  margin: auto;
}

/*=====AUDIO PLAYER=====*/

#mp3-player {
  color: #faf7e6;
}

.clearfix {
  clear: both;
}

#player-container {
  width: 330px;
  min-height: 400px;
  background: #3c659d;
  overflow: hidden;
  margin: 60px auto;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: #e4918e solid 2px;
}

#audio-img {
  position: relative;
  overflow: hidden;
  height: 200px;
  margin-bottom: 15px;
}

.cover {
  width: 100%;
  z-index: 1;
}

#audio-info {
  text-align: center;
}

#audio-info .artist {
  font-weight: bold;
}

input#volume {
  width: 95%;
  -webkit-appearance: none !important;
  margin: 2%;
  background: #faf7e6;
  height: 1px;
  margin-bottom: 20px;
}

input#volume::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: url(../img/player/knob.png) no-repeat;
  height: 12px;
  width: 12px;
}

#audio-buttons {
  width: 90%;
  display: block;
  margin: 15px auto;
  margin-left: 23px;
  overflow: auto;
}

button#play {
  width: 70px;
  height: 70px;
  background: url(../img/player/play.png) no-repeat;
  float: left;
  border: none;
}

button#pause {
  width: 70px;
  height: 70px;
  background: url(../img/player/pause.png) no-repeat;
  float: left;
  border: none;
}

button#stop {
  width: 70px;
  height: 70px;
  background: url(../img/player/stop.png) no-repeat;
  float: left;
  border: none;
}

button#prev {
  width: 70px;
  height: 70px;
  background: url(../img/player/prev.png) no-repeat;
  float: left;
  margin-top: 15px;
  border: none;
}

button#next {
  width: 70px;
  height: 70px;
  background: url(../img/player/next.png) no-repeat;
  float: right;
  margin-top: 15px;
  border: none;
}

#playlist {
  list-style: none;
  padding: 10px;
}

#playlist li {
  cursor: pointer;
  margin: 5px;
}

#playlist li.active {
  font-weight: bold;
  padding: 3px;
  background: #21538e;
}

#progressbar {
  width: 80%;
  margin-left: 2%;
  margin-top: 9px;
  height: 10px;
  background: url(../img/player/progress_bg.png) no-repeat;
  float: left;
}

#progress {
  background: url(../img/player/progress.png) no-repeat;
  height: 10px;
  display: inline-block;
  position: absolute;
  top: 9px;
  left: 8px;
}

#duration {
  position: absolute;
  top: 0;
  right: 10px;
  padding: 4px 8px;
  background: #21538e;
  border-radius: 5px;
}

#tracker {
  position: relative;
  width: 100%;
}

/*=====GALLERY=====*/

#gallery {
  background: #db4a44;
  color: #faf7e6;
}

/*=====MAP=====*/

#dpmap {
  width: 100%;
  height: 100%;
}

#info-box {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-color: #21538e;
  border: 2px solid #e4918e;
  border-radius: 2px;
  color: #faf7e6;
  padding: 5px;
  text-align: center;
  font-size: 0.8rem;
}

/*=====MAP MODAL=====*/

.modal-content {
  background: #faf7e6 !important;
  border-radius: 0rem !important;
}

.modal-header {
  background: #3c659d !important;
  border-radius: 0rem !important;
}

.modal-title {
  color: #faf7e6 !important;
}

.close,
.close:hover {
  color: #faf7e6 !important;
}

.modal-body>.img-responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

audio {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*=====HISTORY MAP INFO BOX=====*/

.royaldocks {
  position: relative;
}

.royaldockscon {
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 200;
  visibility: hidden;
}

/*=====FOOTER=====*/

/*======Landing footer====*/

#landing-footer {
  background-color: #faf7e6;
}

.gold-logo-landing,
.lever-logo-landing,
.dl-logo-landing {
  height: 200px;
  display: flex;
}

.gold-logo-landing a {
  height: 58px;
  width: 213px;
  margin: auto;
}

.gold-logo-landing,
.lever-logo-landing,
.dl-logo img {
  margin: auto;
}

.lever-logo-landing a {
  height: 57px;
  width: 256px;
  margin: auto;
}

.dl-logo-landing a {
  height: 131px;
  width: 131px;
  margin: auto;
}

#landing-footer-p {
  color: #113155;
}

/*======End Landing footer====*/

#main-footer {
  background-color: #3c659d;
}

.gold-logo,
.lever-logo,
.dl-logo {
  height: 200px;
  display: flex;
}

.gold-logo a {
  height: 58px;
  width: 213px;
  margin: auto;
}

.gold-logo,
.lever-logo,
.dl-logo img {
  margin: auto;
}

.lever-logo a {
  height: 57px;
  width: 256px;
  margin: auto;
}

.dl-logo a {
  height: 131px;
  width: 131px;
  margin: auto;
}

.footer-p {
  color: #faf7e6;
}

/*============= MEDIA QUERIES =============*/

/* Medium (md) devices (tablets, 768px and under) */

@media (max-width: 992px) {

  .page-title,
  h2 {
    font-size: 1.7rem;
  }
}

@media (max-width: 768px) {
  .carousel-caption h1 {
    font-size: 3rem;
  }

  #workchart {
    width: 550px;
    height: 550px;
  }

  #jobchart {
    width: 550px;
    height: 550px;
  }

  #skillchart {
    width: 550px;
    height: 550px;
  }

  #demographic {
    width: 100%;
    height: 100%;
  }

  #newhamhistory {
    width: 100%;
    height: 100%;
  }
}

/* Extra small (xs) devices (portrait phones, less than 576px) */

@media (max-width: 576px) {

  #main-header,
  h5 {
    font-size: 0.9rem;
  }

  .page-title,
  h2 {
    font-size: 1.7rem;
  }

  .iconmobile {
    width: 80%;
  }

  .hint-text {
    font-size: 1rem;
  }

  #maps-newham img,
  #workbtnsec img,
  #galoneimg img,
  #galtwoimg img,
  #galthreeimg img,
  #valuesicons img {
    width: 300px;
    height: 300px;
  }

  #family-sec h3 {
    font-size: 1.1rem;
  }

  #workchart {
    width: 450px;
    height: 450px;
  }

  #jobchart {
    width: 450px;
    height: 450px;
  }

  #skillchart {
    width: 450px;
    height: 450px;
  }

  #demographic {
    width: 100%;
    height: 100%;
  }

  #newhamhistory {
    width: 100%;
    height: 100%;
  }

  .mapcontainer p {
    font-size: 1rem;
  }

  #team-section h5,
  h6 {
    font-size: 0.9rem;
  }

  #fanBack,
  h5 {
    font-size: 1.2rem;
  }
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/