/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
}

body {
   /*font-family: 'Montserrat', sans-serif;*/
   background-color: #faf9f4;
   padding-top: 150px;
   font-family: georgia;
   text-align: justify;
   line-height: 2em;
}

header {
   background-color: #faf9f4;
   padding: 20px;
   overflow: hidden;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
}

nav {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   background-color: black;
   border: 3px solid #faf9f4;
   font-family: georgia;
}

.menu {
   border: 6px solid #cea5ad;
   background-color: black;
   padding: 1%;
   color: linen;
   text-align: left;
   cursor: pointer;
}

.menu p {
   padding: 4%;
}


.heading {
   background-color: black;
   padding: 8px;
   font-size: 1em;
   text-align: center;
   width: 70%;
   color: black;
   margin: 0 auto;
   margin-top: 4%;
}

.heading h1 {
   color: #faf3fd;
   margin: 5%;
   font-size: 2em;
}

.subheading {
   padding: 20px;
   font-size: 1.3em;
   text-align: center;
   width: 70%;
   margin: auto;
   margin-top: -4%;
   margin-bottom: -7%;
   color: black;
   border: 3px solid black;
   background-color: black;
}

.byline {
   text-align: center;
   width: 70%;
   font-weight: bold;
   font-size: 1em;
   color: black;
   background-color: black;
   border: 3px solid black;
   margin: auto;
}


.subheading h4 {
   color: #faf3fd;
}

.byline h3 {
   color: #faf3fd;
}

.byline video {
   width: 70%;
   border: 9px solid pink;
   margin-bottom: 20px;
}

a {
   color: pink;
}

section {
   width: 90%;
   margin: 4% auto;
   border: 4px solid black;
   padding-left: 3.5%;
   padding-right: 3.5%;
   background-color: black;
   overflow: hidden;
}

section p {
   color: #faf3fd;
   font-size: 1.2em;
}

section h3 {
   color: #cea5ad;
   text-align: center;
   padding: 10px;
}

.facts video {
   width: 100%;
   border: 3px solid #cea5ad;
   padding: 20px;
   background-color: #faf3fd;
}

.data {
   background-color: white;
   width: 70%;
   padding: 20px;
}

.map {
   background-color: white;
   width: 70%;
   padding: 20px;
}

.video {
   width: 90%;
   text-align: center;
   display: block;
   border: 5px solid #faf3fd;
   background-color: #cea5ad;
   padding: 25px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
}

.video iframe {
   width: 100%;
}

.photocaption {
   position: absolute;
   font-size: 1em;
   bottom: 0px;
   left: 0;
   width: 100%;
   color: #faf3fd;
   text-align: center;
   background-color: rgba(0,0,0,0.6);
}

.photo_with_caption {
   position: relative;
   border: 3px solid #faf3fd;
   padding: 10px;
   margin: 10px;
   background-color: #cea5ad;
   width: 51%;
}

.photo_with_caption.left {
   float: left;
}

.photo_with_caption.right {
   float: right;
}

.photo_with_caption img {
   width: 100%;
   height: auto;
}

.dawnchild  {
   width: 29%;
   margin-left: 2%
}

.sarachild  {
   width: 25%;
   margin-right: 3%;
}

.rima {
   width: 25%;
   margin-right: 5%;
}

.tasneem {
   margin-left: 0.5%;
   margin-right: 3%;
   width: 40%;
}

#section6 audio {
   width: 50%;
   border: 5px solid #cea5ad;
   background-color: #faf3fd;
}

.jeremy {
   text-align: center;
}

.genevieve h3 {
   color: #cea5ad;
}

.genevieve {
   width: 90%;
   display: block;
   border: 5px solid #faf3fd;
   padding: 25px;
   margin-bottom: 5px;
   background-color: black;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}


.genevieve iframe {
   text-align: center;
   width: 100%;
   border: 3px solid #cea5ad;
   background-color: #faf3fd;
   margin: auto;
}


.me {
   border: 3px solid black;
   background-color: black;
}

.me p {
   color: #cea5ad;
   padding: 20px;
   text-align: right;
}

.last p {
   float: left;
   width: 40%;
   margin: auto;
   border: 3px solid #cea5ad;
   padding: 3%;
   background-color: #faf3fd;
   color: black;
   margin-top: 40px;
}

.popup video {
   margin: auto;
   width: 100%;
   padding: 20px;
}


.popup {
   cursor: pointer;
   width: 50%;
   border: 3px solid #cea5ad;
   background-color: #faf3fd;
   margin-bottom: 40px;
   margin-left: 25%;
}


.overlay {
  position: fixed;
  top: 16px;
  left: -78px;
  height: 100%;
  width: 100%;
  margin: 5.5%;
  background-color: white;
  overflow-y: scroll;
  display: none;
  z-index:  10;
  object-fit: cover;
}

.modal {
   position: relative;
   border: 3px solid #cea5ad;
   width: 100%;
   margin: auto;
   background-color: black;
   display: flex;
   padding: 10%;
}

.modal video {
   width: 100%;
   margin: auto;
}

.closer {
   position: absolute;
   cursor: pointer;
   top: 0px;
   right: 0px;
   width: 60px;
   background-color: black;
   width: 5%;
}

.closer img {
   width: 10%;
}

.caption {
   width: 100%;
   margin: auto;
}

.caption p {
    top: -12px;
    left: 549px;
    position: relative;
    font-size: 1em;
}


/*media query for responsive design */

@media only screen and (max-width: 640px) {

   .menu{
      display: none;
   }


}