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

*/

/*@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Roboto&display=swap');
*/
* {
  box-sizing: border-box;
}

img, video {
  width: 100%;
  display: block;
}

audio {
  display: block;
}

/*link style*/

a {
  text-decoration: none;
  color: #272F7B;
}

a:visited {
  color: #D76735;
}

a:hover, a:active {
  color: #D76735;
} 

h3, body, html {
  font-family: 'Quicksand', sans-serif; 
}

html {
  scroll-behavior: smooth;
}

h1 {
  font-family: 'Fascinate', cursive;
}

.landing {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

header {
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  position: relative;
  background-color: black;
}

header img {
  /* this opacity makes the header image dark so you can read the headline text more easily. remove the opacity if you do not have your headline on top of the image.*/
  opacity: 0.6;
}

.title1 {
  position: absolute;
  width: 100%;
  top: 5%;
  color: white;
  text-align: center;
  padding: 3%;
  text-shadow: 5px 5px #D76735;
  display: none;
}

.tripbutton {
  position: absolute;
  bottom: 160px;
  left: 0px;
  width: 100%;
}

.button {
  margin: auto;
  font-family: 'Fascinate', cursive;
  color: white;
  text-shadow: 3px 3px 2px #D76735;
  font-size: 40px;
  text-align: center;
  display: none;

}

.title1 h1 {
  font-size: 6.6em;
  margin-bottom: -4px;
}

.subhead h2 {
  font-size: 2.5em;
  font-family: 'Shrikhand', cursive;
  line-height: 1.3em;
  padding-top: 50px;
  padding-left: 150px;
  padding-right: 150px;
  color: #387676;
  margin: auto;
}

.maintext h3 {
  font-style: italic;
  margin-top: 10%;
  font-size: 1.2em;
}

.first-letter {
  font-size: 50px;
  line-height: 70px;
}

#scrapbook {
  margin: auto;
  margin-bottom: 40px;
}

#scrapbook img {
  max-width: 80%;
  margin: auto;
  cursor: pointer;
}

.buttonstop {
  display: grid;
  grid-template-columns: 65% 30%;
  margin-top: 50px;
}

.buttonsbottom {
  display: grid;
  grid-template-columns: 55% 40%;
  margin-left: 20px;
}

.communalliving {
  transform: rotate(7deg);
}

.makelove {
  transform: rotate(-5deg);
}

.climate {
  transform: rotate(-12deg);
}

.power {
  transform: rotate(10deg);
}

.backtotop {
  position: -webkit-sticky;
  position: absolute;
}

#mybtn {
  cursor: pointer;
  border: 3px solid #E19776;
  background-color: #D76735;
  font-family: 'Shrikhand', cursive;
  color: white;
  font-size: 20px;
  left: 10px;
  box-shadow: 3px 3px 5px darkgray;
}

#mybtn:hover {
  background-color: #E19776;
  color: #272F7B;
}

.content {
  width: 100%;
  background-color: white;
  overflow-x: hidden;
/*  display: none;*/
}

.maintext {
  max-width: 700px;
  margin: auto;
  color: darkslategray;
  font-size: 1.2em;
  line-height: 1.5em;
  text-align: left;
  font-weight: 300;
  padding: 1%;
}

.pullquote {
  width: 60%;
  font-size: 1.4em;
  line-height: 1.3em;
  font-style: italic;
  text-align: left;
  color: #272F7B;
}

.left {
  float: left;
  padding-right: 20px;
  margin-left: -40px;
}

.right {
  float: right;
  padding-left: 20px;
  margin-right: -40px;
}

.sidepic {
  width: 50%;
}

.sidecap {
  margin-top: 0px;
  font-size:  1em;
  text-align: center;
  color: #D76735;
}

.sectionhead {
  text-align: center;
  color: #387676;
  font-size: 3.5em;
  line-height: 1em;
  text-shadow: 3px 3px #A3BEB8;
}

.bigphoto {
  margin-top: 20px;

}

.bigphoto img {
  display: block;
  max-height: 60%;
  cursor: default;
}

.photocaption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-left: 1%;
  color: white;
  background-color: rgba(0,0,0,0.4);
}

iframe {
  border-radius: 7px;
  box-shadow: 2px 2px 5px gray;
}

/*FAILED COMMUNE FLIP CARDS*/

.flipcardfront {
   margin: auto;
   cursor: pointer;
   max-width: 50%;
   border: 4px solid #272F7B;
   box-shadow: 4px 4px 5px darkgray;
   border-radius: 7px;
}


.flipcardsection {
   border: 5px solid #272F7B;
   display: none;
   position: sticky;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 90%;
   background-color: #A3BEB8;
   overflow-y: scroll;
   z-index:  10;
   text-align: center;
   margin: auto;
   border-radius: 7px;
}

h2 {
   font-size: 3.8em;
   text-align: center;
}

.flipcards {
   display: inline-block;
   width: 80%;
   margin: 2%;
   margin: auto;
   padding-top: 10px;
   padding-left: 30px;
}

.flipcards img {
   margin: auto;
   border: 6px solid #272F7B;
   max-width: 100%;
   cursor: pointer;
   box-shadow: 4px 4px 5px;
   border-radius: 7px;
}

.outie {
   position: relative;
   width: 90%;
   padding-bottom: 50px;
}

.front {
   position: relative;
   transition: 1s;
   width: 100%;
   transform-style: preserve-3d;
}


.back {
   position: absolute;
   transform: rotateY(180deg);
   top: 0px;
   left: 0px;
   width: 100%;
}

.flipper {
   transform: rotateY(180deg);
}

.front .back {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

.Xpic2 {
  position: absolute;
  right: 1vh;
  top:  1vh;
  width: 7%;
  cursor: pointer;
  padding: 5px;
}

/*END OF FAILED COMMUNE FLIP CARDS*/


.cycle-slideshow {
  max-width: 700px;
  margin: auto;
}

.responsivecontainer {
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

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

.clickhere {
  font-style: italic;
  font-size: 0.7em;
  text-align: right;
  padding-right: 1%;
}

.popup {
  cursor: pointer;
}

.sidepicleft {
  margin-right: 10px;
  width: 65%;
  float: left;
  background-color: #A3BEB8;
  padding: 5px;
  margin-bottom: 5px;
  margin-right: 15px;
  border-radius: 7px;
  border: 2px solid #387676;
  box-shadow: 2px 2px 5px darkgray;
}

.sidepicleft img {
  border-radius: 5px;
}

.sidecaption {
  margin-top: 4px;
  font-size:  0.9em;
  text-align: center;
  color: black;
  line-height: 1.3em;
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  border: 2px solid #387676;
  border-radius: 7px;
  box-shadow: 2px 2px 5px gray;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.mySlides img {
    width: 100%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.slidetext {
  color: #f2f2f2;
  font-size: 18px;
  padding: 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 14px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dots {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 2px;
  background-color: #A3BEB8;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.8s ease;
  text-align: center;
}

.active, .dot:hover {
  background-color: #387676;
}

 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.podcast {
  background-color: #A3BEB8;
  margin: auto;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  border-radius: 7px;
  border: 4px solid #387676;
  box-shadow: 2px 2px 5px darkgray;
}

.podcast h2 {
  line-height: 1em;
  font-family: 'Fascinate', cursive;
  color: #272F7B;
  text-shadow: 2px 2px white;
  font-size: 45px;
}

.podcast p {
  text-align: center;
  padding: 5px;
}

.podcastbar {
  margin: auto;
}

.podcastbar:hover {
  transform: scale(1.1);
  filter: drop-shadow(1px 1px 1px);
}


.EVOvideo {
  background-color: #A3BEB8;
  padding-top: 3px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  border-radius: 7px;
  border: 4px solid #387676;
  box-shadow: 2px 2px 5px darkgray;
}

.EVOvideo h2 {
  font-size: 2.3em;
  font-family: 'Fascinate', cursive;
  line-height: 1.3em;
  color: #272F7B;
  text-shadow: 2px 2px white;
}

.EVOvideo video {
  border: 2px solid #387676;
  border-radius: 7px;
}

/*footer */

footer {
  background-color: #387676;
  color: white;
  padding: 1%;
  text-align: right;
/*  display: none;*/
}

/*popup modal*/

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: scroll;
  display: none;
  z-index:  10;
}

.modal {
  width: 70%;
  margin: 2% auto;
}

.closer {
  position: absolute;
  right: 1vh;
  top:  1vh;
  width: 10%;
  cursor: pointer;
}

/*media query for responsive design */

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

  .title1 {
    top: 5%;
  }

  .title1 h1 {
    font-size: 3.5em;
  }

  .title1 h2 {
    font-size: 1.5em
  }

  .title1 h3 {
    font-size: 1.1em;
  }

}


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

  .pullquote {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    display: none; /* remove this line if you want the pullquotes to display on mobile*/ 
  }

  .tripbutton {
    position: absolute;
    bottom: 60px;
    left: 0px;
    width: 100%;
  
  }

  .button {
    font-size: 30px;
  }

  .subhead h2 {
    font-size: 30px;
  }

.buttonstop {
  display: grid;
  grid-template-columns: 100%;
  margin-top: 50px;
}

.buttonsbottom {
  display: grid;
  grid-template-columns: 100%;
}

.scrapbook img {
  max-width: 100%;
}

.makelove {
  max-width: 80%;
  margin: auto;
  margin-top: 40px;
}

.power {
  margin-top: 30px;
}

  .left, .right {
    margin: 0px;
    padding: 10px;
  }

  .sidepic {
    width:  100%;
    margin: 0px;
    padding:  0px;
  }

  .popup {
    margin-bottom: 15px;
  }

  .popup .sidecap {
    display: none;
  }  

  .flipcardfront {
   max-width: 100%;
}

  .flipcards {
    width: 90%;
    margin: 1%;
    margin: auto;
    padding-top: 10px;
    padding-left: 20px;
  }

  .Xpic2 {
    width: 15%;
  }

  .sidepicleft {
    width: 100%;
    margin-bottom: 20px;
  }

}


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

  .title1 {
    top: 1%;
  }

  .title1 h1 {
    font-size: 2em;
  }

  .title1 h3 {
    font-size: 0.9em;
  }

  .button {
    font-size: 15px;
  }

  .tripbutton {
    bottom: 30px;
  }

  .subhead h2 {
    font-size: 20px;
    text-align: center;
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .maintext {
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: left;
    margin: 0px 15px;
  }

  .slidetext {
  font-size: 10px;
  padding: 5px;
  position: absolute;
  bottom: -40px;
  }

  .dots {
  margin-top: 40px;
  }

  .podcast h2 {
    font-size: 30px;
  }

  .podcast p {
  font-size: 20px;
  line-height: 25px;
  }

  .EVOvideo h2 {
    font-size: 20px;
    line-height: 25px;
  }

  .modal {
    width: 97%;
    margin: 10% auto;
  }

}