@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 @keyframes fade-in {

	 100% {
		 opacity: 1;
	}
}
 @keyframes slide-in {

	 100% {
		 top: 0;
	}
}
 @keyframes scaleDown {

	 100% {
		 transform: scale(1);
	}
}
 @keyframes reveal-info {

	 100% {
		 height: 0;
	}
}
 body {
	 margin: 0;
	 padding: 0;
	 padding-top: 80px;
}

 .container_rev {
	 margin-left: auto;
	 margin-right: auto;
	 width: 100%;
	 background-color: #d7ccc8;
	 font-size: 20px;
	 font-family: "Montserrat", sans;
   padding-bottom: 30px;
   
}
 .container_rev .container-inner {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 position: relative;
	 animation: fade-in 1.5s ease, slide-in 1.2s ease;
	 -webkit-animation: fade-in 1.5s ease, slide-in 1.2s ease;
   
}
 .container_rev .container-inner .main-content {
	 flex-basis: 50%;
	 order: 1;
	 align-self: center;
	 display: flex;
	 flex-direction: column;
   /*background-color: #d7ccc8;*/
   background-color: rgb(215, 204, 200, 0.7);
   width:100%;
}
 .container_rev .container-inner .main-content .main-headings {
	 width: 100%;
	 align-self: center;
	 display: flex;
	 flex-direction: column;
	 animation: scaleDown 6s ease 2s;
	 -webkit-animation: scaleDown 6s ease 2s;
   margin-top: 30px;
}
 .container_rev .container-inner .main-content .main-headings #by-line {
	 width: 60%;
	 padding-bottom: 1px;
	 padding-left: 3px;
	 margin-left: 15px;
	 font-size: 85%;
	 border-bottom: 1px solid #757575;
	 font-style: italic;
}
 .container_rev .container-inner .main-content .main-headings .heading {
	 margin-top: 20px;
	 margin-left: 80px;
  overflow: hidden;
}
 .container_rev .container-inner .main-content .main-headings .heading #heading1, .container_rev .container-inner .main-content .main-headings .heading #heading2, .container_rev .container-inner .main-content .main-headings .heading #heading3 {
	 margin: 0;
	 
}
 .container_rev .container-inner .main-content .main-headings .heading #heading1, .container_rev .container-inner .main-content .main-headings .heading #heading2 {
	 font-size: 400%;
	 font-weight: normal;
	 letter-spacing: -2px;
}
 .container_rev .container-inner .main-content .main-headings .heading #heading1 {
	 margin-left: 50px;
}
 .container_rev .container-inner .main-content .main-headings .heading #heading2 {
	 margin-left: 150px;
}
 .container_rev .container-inner .main-content .main-headings .heading #heading3 {
	 margin-top: -52px;
	 font-size: 900%;
	 font-weight: 800;
	 letter-spacing: 2px;
   overflow: hidden;
   word-break: break-word;
}
 .container_rev .container-inner .main-content .main-headings .short-bio {
	 width: 60%;
	 margin-top: -10px;
	 margin-left: 90px;
	 font-style: italic;
	 font-size: 105%;
   padding-bottom:15px;
}
 .container_rev .container-inner .main-content .main-headings a {
	 margin-left: 92px;
	 align-self: flex-start;
	 font-weight: bold;
	 font-size: 120%;
	 font-family: helvetica;
	 text-decoration: none;
	 color: black;
}
 .container_rev .container-inner .main-content .main-headings a:hover {
	 text-decoration: underline;
}


  #more-info-js h4{
     font-size: 25px;
   }
   
  #more-info-js p {
     font-size: 20px;
     line-height: 1.6;
   }

 .container_rev .container-inner .main-content .more-info {
	 width: 100%;
	 height: 0;
	 margin-left: auto;
	 margin-right: auto;
	 overflow: hidden;
	 align-self: flex-start;
	 animation: reveal-info 4s ease 3s;
	 -webkit-animation: reveal-info 4s ease 3s;
   padding-left: 30px;
}
 .container_rev .container-inner .image-wrapper {
	 flex-basis: 50%;
	 order: 2;
   padding-left: 150px;
   max-width: 600px;
}
 .container_rev .container-inner .image-wrapper .image-container {
	 width: 100%;
	 height: 100%;
	 overflow: hidden;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 animation: scaleDown 6s ease 2s;
	 -webkit-animation: scaleDown 6s ease 2s;
}
 .container_rev .container-inner .image-wrapper .image-container img {
	 width: 100%;
	 height: auto;
	 position: relative;
}
 @media (min-width: 350px) and (max-width: 529px) {
	 * {
		 animation-name: none !important;
	}
	 .container_rev {
		 width: 90%;
		 margin-left: auto;
		 margin-right: auto;
	}
	 .container-inner {
		 flex-direction: column !important;
		 justify-content: center !important;
	}
	 .main-content, .image-wrapper {
		 flex-basis: 100% !important;
	}
	 .main-content {
		 order: 2 !important;
		 /*outline: 1px solid red;*/
		 margin: 0 50px;
	}
	 .heading {
		 margin-left: 25px !important;
	}
	 #heading1, #heading2 {
		 margin: 0;
		 margin-top: -5px !important;
     font-size: 200% !important;
	}
	 #heading2 {
		 margin-left: 100px !important;
     
	}
	 #heading3 {
		 margin-top: -10px !important;
     font-size: 300% !important;
	}
	 .short-bio {
		 margin-top: -10px !important;
		 margin-left: 10px !important;
	}
		 .short-bio p{
	     font-size: 80%;
	 }
	 .more-info {
		 height: 140vw !important;
		 width: 88% !important;
		 margin: 0 !important;
		 align-self: flex-start !important;
		 margin-top: 0 !important;
     overflow-y: scroll !important;
     padding: 15px;
	}
	 .link {
		 display: none;
	}
   
	 .image-wrapper {
		 order: 1 !important;
		 width: 100%;
		 height: 100px !important;
		 justify-content: center !important;
     padding-left: 0 !important;
	}
	 .image-container {
		 width: 100% !important;
		 height: 400px;
		 margin-left: auto;
		 margin-right: auto;
		 /*position: relative;
		 top: 50%;
		 transform: translateY(-50%);*/
	}
	 .image-container img {
		 width: 80% !important;
		 height: auto !important;
		 top: -20px;
		 margin-left: auto;
		 margin-right: auto;
	}
     #more-info-js h4{
     font-size: 18px;
   }
   
  #more-info-js p,li {
     font-size: 16px;
   }
}
 @media (min-width: 530px) and (max-width: 699px) {
	 * {
		 animation-name: none !important;
	}
	 .container_rev {
		 width: 90%;
		 margin-left: auto;
		 margin-right: auto;
	}
	 .container-inner {
		 flex-direction: column !important;
		 justify-content: center !important;
	}
	 .main-content, .image-wrapper {
		 flex-basis: 100% !important;
	}
	 .main-content {
		 width: 80%;
		 order: 2 !important;
		 align-self: center !important;
	}
	 .main-headings {
		 width: 100%;
		 margin-top: 20px;
		 margin-left: auto;
		 margin-right: auto;
	}
	 .heading {
		 margin-left: 25px !important;
	}
	 #heading1, #heading2 {
		 margin: 0;
		 margin-top: -5px !important;
     font-size: 200% !important;
	}
	 #heading3 {
		 margin-top: -10px !important;
     font-size: 300% !important;
	}
	 .short-bio {
		 margin-top: -10px !important;
		 margin-left: 10px !important;
	}
	 .short-bio p{
	     font-size: 80%;
	 }
	 .link {
		 display: none;
	}
	 .more-info {
		 height:140vw !important;
		 width: 90% !important;
		 margin: 0 !important;
		 align-self: flex-start !important;
		 margin-top: 0 !important;
		 text-align: justify;
     overflow-y: scroll !important;
     padding: 15px;
	}
   
	 .image-wrapper {
		 order: 1 !important;
		 width: 100%;
		 height: 400px;
		 justify-content: center !important;
     padding-left: 0 !important;
	}
	 .image-container {
		 width: 100% !important;
		 height: 400px;
		 margin-left: auto;
		 margin-right: auto;
	}
	 .image-container img {
		 width: 80% !important;
		 height: auto !important;
		 top: -20px;
		 margin-left: auto;
		 margin-right: auto;
	}
     #more-info-js h4{
     font-size: 18px;
   }
   
  #more-info-js p,li {
     font-size: 16px;
   }
   
   #main-headings-js {
     transform: scale(1.0);
   }
}
 @media (min-width: 700px) and (max-width: 1200px) {
	 .container_rev {
		 width: 100%;
	}
	 #heading1, #heading2 {
		 margin: 0;
		 margin-top: -5px !important;
     font-size: 350% !important;
	}
	 #heading3 {
		 margin-top: -10px !important;
     font-size: 500% !important;
	}
		 .short-bio {
		 margin-top: -10px !important;
		 margin-left: 10px !important;
	}
	
	 .link {
		 margin-left: 30px;
	}
	 .more-info {
		 margin-top: -40px !important;
	}
}
 
footer {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  font-size: 14px;
	font-family: "Montserrat", sans;
  font-weight: bold;
}
/*
nav a {
  font-family: helvetica;
  background-color: #f0f0f0;
  padding: 5px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
	font-family: "Montserrat", sans;
  display: flex;
  align-items: center;
  color: black;
  text-decoration: none;
}
*/
.nav_bar{
  padding: 10px 0 10px 0;
  display:flex;
  justify-content: space-around;
	background-color: #d7ccc8;
  width: 100%;
	margin-left: auto;
	margin-right: auto;
  align-items: center;
}
.nav_bar a{
  padding: 5px;
  display: inline-block;
}
.back_btn{
  font-size: 20px;
  border-style: solid;
  border-radius: 20px;
  font-family: "Montserrat", sans;
  text-decoration: none;
  color: black;
  background-color: lightgray;
}

.back_btn:hover{
  filter: brightness(30%);
}

@media (min-width: 350px) and (max-width: 529px) {
	 * {
		 animation-name: none !important;
	}
	 .nav_bar {
     width: 90%;
  }
}

 @media (min-width: 530px) and (max-width: 699px) {
	 * {
		 animation-name: none !important;
	}
	 .nav_bar {
     width: 90%;
  }
}

 @media (min-width: 700px) and (max-width: 1200px) {
   	 * {
		 animation-name: none !important;
	}
	 .nav_bar {
     width: 100%;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


.nav-link{
      font-family: "Quicksand", sans-serif;
      font-size: 150%;
      color: white;
      margin-right: 10px;
}

.nav-link:hover{
      color: #0066ff;
}

.nav-link.active{
    background-color:#0066ff !important;
    color: white !important;
    border-radius: 15px;
    padding-left: 20px;
}

.arrow-left,
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  cursor: pointer;
}

.arrow-left {
  border-right: 15px solid black;
}

.arrow-right {
  border-left: 15px solid black;
}

.social-follow {
  border-top: 1px solid #ddd;
  padding-top: 15px;
  margin-top: 30px;
}

.social-follow i {
  margin-right: 8px;
  color: #e41f1f; /* YouTube red */
}

.social-follow a {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
  text-decoration: none;
}

.social-follow a:hover {
  color: #1ee2e7;
}