img,
video {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

body{
  background-color: #000000;
}

.main-color{
  color: #DC2626;
}

.hero-text-container{
  overflow: hidden; 
  margin-left: auto;
  margin-right: auto;
  width: 75%; 
}

.main-title-1{
  padding-bottom: 2rem; 
  color: #ffffff; 
  font-size:75px;
  line-height: 1; 
  font-weight: 700; 
  line-height: 1; 
}

.main-title-2{
  font-size: 35px;
  font-weight: 700; 
}

.header-line-separator{
  margin-top: 60px; 
  color: #ffffff; 
  width: 8.333333%; 
  margin-left: auto;
  margin-right: auto;
}

.scroll-down{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  padding-top: 20%;
}


.author{
  margin-top: 2.5rem; 
  color: #E5E7EB; 
  font-size: 1.25rem;
  line-height: 1.75rem; 
}

.date{
  margin-top: 0.75rem; 
  color: #9CA3AF; 
  font-size: 1rem;
  line-height: 1.5rem; 
}



/* Paddings */
.padding-top-32{
  padding-top: 8rem;
}

.padding-top-8{
  padding-top: 2rem;
}

.padding-top-24{
  padding-top: 6rem;
}


.main-text-container{
  color: #ffffff; 
  font-size: 1.125rem;
  line-height: 1.75rem; 
  width: 41.666667%;
  margin-left: auto;
  margin-right: auto;
}

.video-container{
  margin-top: 8rem;
  margin-bottom: 8rem;
  border-radius: 0.75rem;
}

.main-video{
  width: 100%; 
  border-radius: 1rem; 
  margin-left: auto;
  margin-right: auto;
}

.main-video-caption{
  margin-top: 1rem; 
  color: #9CA3AF; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-size: 1rem;
  line-height: 1.5rem; 
  text-align: center; 
}

.content-with-images{
  overflow: hidden; 
  position: relative; 
  width: 100%; 
}

.left-image{
  position: absolute; 
  width: 25%; 
  height: 18rem; 
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem; 
}

.right-image{
  position: absolute; 
  right: 0; 
  width: 25%; 
  height: 18rem; 
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem; 
}

.quote-container{
  padding-top: 5rem;
  padding-bottom: 5rem; 
  width: 50%; 
  margin-left: auto;
  margin-right: auto;
}

.quote-svg{
  position: absolute; 
  transform: translate(-50%, -33.333333%);
  width: 9rem; 
  height: 9rem; 
  opacity: 0.4; 
}

.quote{
  position: relative; 
  z-index: 10; 
  padding-bottom: 2rem; 
  font-size: 1.25rem;
  line-height: 1.75rem; 
  font-weight: 600; 
  line-height: 1.625; 
  text-align: center; 
}

.quote-author{
  margin-top: -0.5rem; 
  font-weight: 400; 
  text-align: center; 
}

.video-loop{
  padding-top: 5rem; 
  color: #ffffff; 
  width: 41.666667%; 
  margin-left: auto;
  margin-right: auto;
}

.rounded-corners{
  border-radius: 1rem; 
}

.text-emphasis{
  font-weight: 700; 
  text-align: center; 
}

.text-emphasis1{
  font-weight: 700; 
  font-size: 100px;
  text-align: center; 
  padding-bottom: 5%;
  padding-top: 5%;
}

.p text-emphasis1{
  font-weight: 700; 
  font-size: 4rem;
}

.text-emphasis-main{
  font-size: 3.75rem;
  line-height: 1; 
  font-weight: 700; 
}

.section-spacing{
  padding-top: 5rem;
  padding-bottom: 5rem; 
}

.text-bold{
  font-weight: 700; 
}

.ricardo{
  display: flex; 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
}

.ricardo-image{
  width: 18rem; 
  height: auto; 
  border-radius: 1rem; 
}

.audio-player-button{
  padding-top: 0.75rem; 
  margin-left: auto;
  margin-right: auto;
}

.column-half{
  width: 50%;
}

.hero{
  position: relative; 
  height: 100vh; 
}

.main-title-container{
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  text-align: center; 
  width: 100%; 
}

.footer-text{
  width: 75%;
  color: white;
  padding: 1%;
  font-weight: 400; 
  text-align: right; 
  margin-left: auto;
  margin-right: auto;
}