/* 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

*/
/*.parallax {
   position: relative;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}*/
body, html {

    font-family: 'Merriweather', serif;

}

h2 {
   text-align: center;
}

h3 {
   font-family: 'Francois One', sans-serif;
   font-size: 1.5em;
}

a:hover {
  color: maroon;
  background-color: transparent;
  text-decoration: underline;
}



.header {
 /*  background-image: url("../img/photo01.jpg");
   min-height: 400px;*/
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: -1;
}

.header img {
   width: 100%;
   display: block;
}

.divider {
   /*background-image: url("../img/photo02.jpg");
   min-height: 400px;*/
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: -1;
}

.divider img {
   width: 100%;
   display: block;
   /*max-height: 400px;*/
}

.courtesy {
   color: skyblue;
}

/*.divider2 {
   background-image: url("../img/photo03.jpg");
   min-height: 400px;
}*/

/*.header {
   border: 5px solid black;
   position: sticky;
   top: 0;
   z-index: -1;
}

.header img {
   width: 100%;
   height: 500px;
}*/

/*.header {
   background-image: url("../img/medium01.jpg");
   background-repeat: no-repeat;
   background-position: top;
   background-attachment: fixed;
   padding: 20px;
   border: 10px solid black;
   min-height: 300px;
}*/

.title {
   color: white;
   position: absolute;
   top: 9%;
   left: 15%;
   /*transform: translate(50%,50%);*/
   text-align: center;
}

.title h1 {
   font-size: 4em;
   margin-bottom: 0%;
}

.title h2 {
   font-size: 1.5em;
}

.byline {
   color: black;
   background-color: thistle;
   /*height: 15%;*/
   width: 24%;
   /*padding: 20px;*/
   font-size: 1.3em;
   padding: 1%;
   margin-left: 37%;

}

.textbox {
   background-color: white;
   /*border: 5px solid blue;
   /*text-align: center;*/
   padding-bottom: 5px;
   /*text-align: center;*/
   text-align: justify;
   /*display: block;*/
   /*float: right;*/
}

.text {
   background-color: white;
   margin: 0px 20%;
   padding: 2% 5%;
   border-left: 5px solid aliceblue;
   border-right: 5px solid aliceblue;
  /* box-shadow: rgba(0,0,0,0.5) 1px 1px 5px 0px;*/*/
   text-align: justify;
   width: 50%;
   /*display: block;*/
}

.sidebox1 {
   float: right;
   /*cursor: pointer;*/
   width: 40%;
   /*position: relative;*/
   margin-left: 1%;
   margin-right: 0;
}

.sidebox1 img {
   width: 100%;
   height: auto;
   cursor: pointer;
   /*border: 3px solid grey;*/
}

.caption {
   text-align: center;
   color: orange;
   font-size: 0.9em;
   font-weight: bold;
}

.overlay1 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content1 img {
   width: 100%;
}

.closer1 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.overlay2 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content2 img {
   width: 100%;
}

.closer2 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.sidebox2 {
   float: right;
   /*cursor: pointer;*/
   width: 40%;
   /*position: relative;*/
   margin-left: 1%;
   margin-right: 0;
}

.sidebox2 img {
   width: 100%;
   height: auto;
   cursor: pointer;
   /*border: 3px solid grey;*/
}

.overlay3 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal3 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content3 img {
   width: 100%;
}

.closer3 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.overlay4 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal4 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content4 img {
   width: 100%;
}

.closer4 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.sidebox3 {
   float: left;
   /*cursor: pointer;*/
   width: 40%;
   /*position: relative;*/
   margin-right: 1%;
   margin-left: 0;
}

.sidebox3 img {
   width: 100%;
   height: auto;
   cursor: pointer;
   /*border: 3px solid grey;*/
}

.overlay5 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal5 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content5 img {
   width: 100%;
}

.closer5 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.overlay6 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal6 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content6 img {
   width: 100%;
}

.closer6 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.sidebox4 {
   float: right;
   /*cursor: pointer;*/
   width: 40%;
   /*position: relative;*/
   margin-left: 3%;
   margin-right: 0;
}

.sidebox4 img {
   width: 100%;
   height: auto;
   cursor: pointer;
   /*border: 3px solid grey;*/
}

.overlay7 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal7 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content7 img {
   width: 100%;
}

.closer7 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.sidebox5 {
   float: left;
   /*cursor: pointer;*/
   width: 40%;
   /*position: relative;*/
   margin-right: 2%;
   margin-left: 0;
}

.sidebox5 img {
   width: 100%;
   height: auto;
   cursor: pointer;
   /*border: 3px solid grey;*/
}

.overlay8 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal8 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content8 img {
   width: 100%;
}

.closer8 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.overlay9 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal9 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content9 img {
   width: 100%;
}

.closer9 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.overlay10 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
}

.modal10 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content10 img {
   width: 100%;
}

.closer10 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}

.sidebox6 {
   float: right;
   /*cursor: pointer;*/
   width: 40%;
   /*position: relative;*/
   margin-left: 3%;
   margin-right: 0;
}

.sidebox6 img {
   width: 100%;
   height: auto;
   cursor: pointer;
   /*border: 3px solid grey;*/
}

.overlay11 {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.7);
   display: none;
   cursor: pointer;
}

.modal11 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.content11 img {
   width: 100%;
   max-height: 750px;
   /*overflow: scroll;*/
}

.closer11 {
   color: red;
   width: 23px;
   height: 27px;
   background-color: white;
   font-size: 1.5em;
   font-weight: bolder;
   text-align: center;
   padding: 1px;
   /*border-radius: 50%;*/
   border: 3px solid red;
   cursor: pointer;
   position: absolute;
   top: -16px;
   right: -13px;
   /*left: -20px;*/
}


.audio {
   background-color: white;
   /*padding: 3%;*/
   /*display: flex;*/
   /*flex-wrap: wrap;*/
   float: left;
   /*position: relative;
   top: 50%
   left: 50%;*/
   overflow: hidden;
   width: 38%;
   margin-right: 3%;
   /*margin-left: 0;*/
  /* margin-top: 0;
   padding-top: 0;*/
}

.aud audio {
   width: 100%;
}


.audio img {
   width: 100%;
/*   height: 200%;*/
}

.audio h3 {
   color: hotpink;
   text-align: center;
}

.audio p {
   text-align: center;
   color: hotpink;
}

.video {
   background-color: white;
   padding-top: 20px;
   text-align: center;
}

.qavideo p {
   font-style: italic;
   text-align: center;
}

.vid p {
   font-style: italic;
}

.videotext h3 {
   color: maroon;
}

/*.vid iframe {
   border: 5px solid red;
}*/


.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px; 
   height: 0; 
   overflow: hidden;
   border: 3px solid red;
}

.video-container iframe, .video-container object, .video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}


.poll {
   width: 100%;
   border-top: 3px solid black;
   border-bottom: 3px solid black;
}

.poll .photos {
   display: flex;
   margin-bottom: 1%;
   margin-top: 1%;
}

.poll .img1 {
   width: 50%;
   border-right: 3px dotted black;
   padding-right: 2%;
}

.poll .img2 {
   width: 50%;
   float: right;
   padding-left: 2%;
   /*border: 3px solid red;*/
   /*margin-top: -34%;*/
}

.poll .img1 img {
   width: 100%;
}

.poll .img2 img {
   width: 100%;
}

.poll h4 {
   text-align: center;
   color: purple;
}

.poll p {
   text-align: center;
   /*color: purple;*/
}

.socialmedia {
   width: 100%;
   overflow: hidden;
   border-top: 3px solid black;
   border-bottom: 3px solid black;
}

.media {
   padding-left: 7%;
   overflow: hidden;
}

.twitter {
   width: 45%;
   margin: 1%;
   overflow: scroll;
   max-height: 350px;
   float: left;
   /*padding-bottom: 2%;*/
}

.socialtext h3 {
   text-align: center;
   color: limegreen;
}

.socialtext p {
   text-align: center;
}

/*.socialtext {
   text-align: center;
   text-decoration: underline;
   width: 100%;
}*/

.timeline {
   background-color: white;
}

.timeline h3 {
   text-align: center;
   margin: 0 20%;
   padding: 0 5%;
   padding-top: 2%;
   border-top: 5px solid aliceblue;
   border-left: 5px solid aliceblue;
   border-right: 5px solid aliceblue;
   width: 50%;
   color: navy;
}

.timeline p {
   text-align: justify;
   margin: 0 20%;
   padding: 2% 5%;
   border-left: 5px solid aliceblue;
   border-right: 5px solid aliceblue;
   width: 50%;
}

.footer {
   background-color: lightblue;
   text-align: center;
   padding: 1%;
}















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

      .header {
         position: relative;
         height: 100vh;
         width: 100%;
      }

      .header img {
         height: 100%;
         width: 100%;
         object-fit: cover;
      }

      .divider {
         position: relative;
      }

      .title {
         color: linen;
         position: absolute;
         top: 65%;
         left: 0%;
         /*transform: translate(-50%,-50%);*/
         text-align: center;
         /*width: 50%;*/
      }

      /*.title h1 {
         font-size: 2em;
      }*/

      .title h2 {
         display: none;
      }

      .byline {
         color: black;
         background-color: thistle;
         width: 36%;
         padding: 2%;
         text-align: center;
         margin-left: 30%;
         font-size: 1em;
      }

      /*.textbox {
         max-width: 640px;
      }*/


      .text {
         background-color: white;
         margin: 0%;
         /*padding: 2% 5%;*/
         border: none;
         /*box-shadow: rgba(0,0,0,0.5) 1px 1px 5px 0px;*/
         text-align: justify;
         width: 90%;
      }

      .sidebox1 {
         float: none;
         width: 100%;
      }

      .sidebox2 {
         float: none;
         width: 100%;
      }
      
      .sidebox3 {
         float: none;
         width: 100%;
      }

      .sidebox4 {
         float: none;
         width: 100%;
      }

      .sidebox5 {
         float: none;
         width: 100%;
      }

      .sidebox6 {
         float: none;
         width: 100%;
      }
      
      .caption {
         text-align: center;
      }

      .caption2 {
         text-align: center;
      }

     .caption3 {
         text-align: center;
      }

     .modal1 {
         width: 90%;
     }

      .modal2 {
         width: 90%;
     }

      .modal3 {
         width: 90%;
     }

     .modal4 {
         width: 90%;
     }

     .modal5 {
         width: 90%;
     }

     .modal6 {
         width: 90%;
     }

     .modal7 {
         width: 90%;
     }

      .modal8 {
         width: 90%;
     }

      .modal9 {
         width: 90%;
     }

     .modal10 {
         width: 90%;
     }

     /* .video {*/
         /*width: 90%;*/
         /*border: 2px solid black;*/

     /* }*/

     /* .audio {
         display: block;
      }*/

      .audio {
         width: 90%;
        /* border: 2px solid red;*/
      }

      .aud {
         padding-left: 15%;
        /* border: 2px solid black;*/
      }

      .aud img {
         width: 80%;
      }

      .aud audio {
         width: 80%;
      }

      .poll .photos {
         display: block;
      }

      .poll .img1 {
         width: 100%;
         border: none;
      }

      .poll .img2 {
         float: none;
         border-top: 3px dotted black;
         width: 100%;
         margin-top: 0%;
         margin-bottom: 4%;
      }

      .socialmedia {
         display: block;
      }

      .twitter {
         width: 90%;
         max-height: none;
      }

      .timeline {
         border-left: none;
         border-right: none;
         border-top: 3px solid black;
      }

      .timeline h3 {
         border-left: none;
         border-right: none;
         border-top: none;
        /* margin: 0%;*/
         /*max-width: 640px;*/
         text-align: center;
      }

      .timeline p {
         border: none;
         margin: 0px;
         width: 90%
      }

}