@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #131313;
  padding: 0;
  margin: 0;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff;
}

p {
  color: #E7E9F0;
}
a {
  text-decoration: none;
}

header {
  background-color: #313131;
  display: grid;
  grid-template-columns: 20% 1fr 20%;
}

header img {
  width: 105px;
  padding: 10px;
}

.nav {
  color: #9097B6;
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin-right: 1em;

}

.hamMenu {
  font-size: 55px;
}

.closeMenu{
  display: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.heroLogo {
  height: 93px;
  margin-top: 20px;
}

.heroHeadshot {
  max-width: 90%;
  
}

.hero h3 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.hero p {
  font-size: 2rem;
  text-align: center;
  margin: 0;
  color: #9097B6;
}

.hero p span {
  color: #FAAD19;
}

.hero button {
  background: #FAAD19;
  font-size: 1.2rem;
  color: #051747;
  border-radius: 5rem;
  border: none;
  padding: 10px;
  margin-top: 10px;

}

.hero button img{
  height: 20px;
}

.demoTitle {
  margin-left: 1em;

}

.demos {
  display: flex;
  align-items: center;
  justify-items: center;
  max-width: 100%;
}

.carousel{
  margin: 1.5em;
  margin-top: 0;
}


.card {
  background: #313131;
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  
}

.cardHeader {
  display: grid;
  grid-template-columns: 80% 1fr;
  justify-content: center;
  align-content: center;
}

.cardTitle {
  color: #fff;
  Margin: 0;
  font-size: .75rem;
}

.cardSubtitle {
  grid-column: 1;
  margin: 0;
  font-size: .75rem;
}

.icon {
  width: 3em;
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  justify-self: center;
  
}

.cardContent {
  display: grid;
  align-items: center;
  justify-items: center;
  max-width: 100%;
}

.voiceAnimation {
  grid-area: 1 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    height: 150px;
}

.bar {
    bottom: 1px;
    height: .3em;
    width: .3em;
    margin: 0px .05em;
    border-radius: 5px;
}

.wave {
  background: #535F80;
  animation: sound 0ms -600ms linear infinite alternate;
}

@keyframes sound {
    0% {
       opacity: .35;
        height: .3em; 
    }
    100% {
        opacity: 1;       
        height: 7em;        
    }
}

.bar:nth-child(1)  { left: .1em; animation-duration: 474ms; }
.bar:nth-child(2)  { left: 1.5em; animation-duration: 433ms; }
.bar:nth-child(3)  { left: 2.9em; animation-duration: 407ms; }
.bar:nth-child(4)  { left: 4.3em; animation-duration: 458ms; }
.bar:nth-child(5)  { left: 5.7em; animation-duration: 400ms; }
.bar:nth-child(6)  { left: 7.1em; animation-duration: 427ms; }
.bar:nth-child(7)  { left: 8.5em; animation-duration: 441ms; }
.bar:nth-child(8)  { left: 9.9em; animation-duration: 419ms; }
.bar:nth-child(9)  { left: 11.3em; animation-duration: 487ms; }
.bar:nth-child(10) { left: 12.7em; animation-duration: 442ms; }
.bar:nth-child(11)  { left: .1em; animation-duration: 474ms; }
.bar:nth-child(12)  { left: 1.5em; animation-duration: 433ms; }
.bar:nth-child(13)  { left: 2.9em; animation-duration: 407ms; }
.bar:nth-child(14)  { left: 4.3em; animation-duration: 458ms; }
.bar:nth-child(15)  { left: 5.7em; animation-duration: 400ms; }
.bar:nth-child(16)  { left: 7.1em; animation-duration: 427ms; }
.bar:nth-child(17)  { left: 8.5em; animation-duration: 441ms; }
.bar:nth-child(18)  { left: 9.9em; animation-duration: 419ms; }
.bar:nth-child(19)  { left: 11.3em; animation-duration: 487ms; }
.bar:nth-child(20) { left: 12.7em; animation-duration: 442ms; }
.bar:nth-child(21)  { left: .1em; animation-duration: 474ms; }
.bar:nth-child(22)  { left: 1.5em; animation-duration: 433ms; }
.bar:nth-child(23)  { left: 2.9em; animation-duration: 407ms; }
.bar:nth-child(24)  { left: 4.3em; animation-duration: 458ms; }
.bar:nth-child(25)  { left: 5.7em; animation-duration: 400ms; }
.bar:nth-child(26)  { left: 7.1em; animation-duration: 427ms; }
.bar:nth-child(27)  { left: 8.5em; animation-duration: 441ms; }
.bar:nth-child(28)  { left: 9.9em; animation-duration: 419ms; }
.bar:nth-child(29)  { left: 11.3em; animation-duration: 487ms; }
.bar:nth-child(30) { left: 12.7em; animation-duration: 442ms; }
.bar:nth-child(31)  { left: 11.3em; animation-duration: 487ms; }
.bar:nth-child(32) { left: 12.7em; animation-duration: 442ms; }

.coverPhoto {
  grid-area: 1 / 2;
  width: 100px;
  z-index: 1;
}

.cardWrap {
  height: 110px;
}
.cardDiscript {
  height: 75px;
  font-size: .75rem;
}

.card p span {
  color: #fff;
  font-weight: 500;
}
.muteBtn {
  background: #FAAD19;
  color: #051747;
  border-radius: 5rem;
  border: none;
  padding: 10px;
  font-size: 1em;

}

.default img, .whileActive img {
  height: 15px;
}

.whileActive {
  display: none;
}

.active .default {
  display: none;
}

.active .whileActive {
  display: flex;
}

.audibleLink {
background-color: #051747;
}

.audibleLink .cardContent {
  grid-template-columns: 15% 1fr 15%;
}

.audibleLink .cardContent a {
  grid-column: 2;
}
.audibleLink .cardContent img {
  width: 100%;
  margin-top: 25px;
}

footer {
  background-color: #313131;
  padding-top: 2em;
  margin-top: 2em;
}

.siteLinks {
  display: flex;
  justify-content: space-between;
  color: #9097B6;
  list-style-type: none;
}

.affiliateLogos {
  display: flex;
  justify-content: space-around;
}

.affiliateLogos img{
 height: 55px;
}

.socialLinks{
  margin-top: 25px;
  margin-bottom: 25px;
}

.socialLinks a img{
  height: 24px;
  padding: 16px;

}

.footerCredit {
  display: grid;
  grid-template-columns: 40% 20% 40%;
  padding-bottom: 2%;
}

.line1, .line2 {
  grid-row: 2;
  justify-self: center;
  background: #999999;
  bottom: 1px;
  height: .1em;
  width: 90%;
  border-radius: 5px;
}

.footerCredit img {
  justify-self: center;
  width: 80%;
  grid-row: 1/5;
}

.copywrite {
  grid-area: 3/3;
  justify-self: end;
  padding-right: 5%;
  color: #999999;
}

/*Styles for About Page*/
.aboutHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 1em;
}
.letter ul {
  color: #E7E9F0;
}

.tagline h3 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.tagline p {
  font-size: 2rem;
  text-align: center;
  margin: 0;
  color: #9097B6;
}

.tagline p span {
  color: #FAAD19;
}

.aboutHero img {
  max-height: 3em;
  justify-self: end;
}

.aboutHero button {
  background: #FAAD19;
  font-size: 1.2rem;
  color: #051747;
  border-radius: 5rem;
  border: none;
  padding: 10px;
  margin-top: 20px;

}

.aboutHero button img{
  height: 20px;
}

.experiencesTitle {
  margin-left: 1em;
}
.experiences {
  margin: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.experiences img {
  max-width: 300px;
}

.imgContainer{
  position: relative;
  margin: 10px;
}

.description {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  box-sizing: border-box;
}

.imgContainer:hover .description {
  display: block;
}

.tagline {
  font-size: 1em;
}
.tagline h4 {
  margin-bottom: 0;
}
.tagline p {
  margin-top: 0;
}

.educationEquipment div ul 
 {
  color: #E7E9F0;
}

@media only screen and (min-width: 600px){
  header img {
    height: 54px;
    padding: 5px;
  }

  .mobileNav {
    display: none;
  }
  
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .heroLogo {
    grid-column: 2/5;
    height: 150px;
    padding: .75rem;
  }

  .heroHeadshot {
    grid-area: 1 / 9 / 3 / 12;
    justify-self: end;
  }

  .hero h3 {
    grid-column: 2/12;
    grid-row: 2;
    justify-self: baseline;
    font-size: 2.5em;
    font-weight: 500;
  }
  .hero p {
    grid-column: 2/12;
    justify-content: start;
    font-size: 3.5em;
  }

  .hero a{
    grid-column: 10/12;
    justify-self: end;
    margin: 15px;
  }
  
  .carousel {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-gap: 5px;
  }

 footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
 }

.socialLinks {
  grid-column: 1/2;
  grid-row: 1;
  margin: 0;
}

.affiliateLogos {
  grid-column: 2;
  justify-content: end;
  margin-right: 20px;
}

.affiliateLogos img {
  margin-left: 50px;
}

 .footerCredit {
  grid-column: 1/3;
 }




 /*Desktop Styles for About Page*/

.aboutHero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  margin-top: 20px;
}

.aboutHero iframe {
  grid-area: 1/2/8/5;
}
.aboutHero h3 {
  grid-column: 5/8;
  font-size: 2em;
  margin-bottom: 20px;
}
.letter {
  grid-column: 6/11;
}
.aboutHero img {
  grid-column: 8/10;
}

.aboutHero a {
  grid-area: 4/9/5/11;
  justify-self: end;
}
.tagline {
  grid-column: 5/12;
  display: flex;
  flex-direction: column;
}

.educationEquipment {
  display: flex;
  justify-content: space-around;
}


}