html{
overflow-x:hidden !important;
}
body {
font-family: 'Quicksand', sans-serif;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: 'Cardo', serif;
}
h1, .h1 {
font-size: 3rem;
}
h2, .h2 {
font-size: 2.5rem;
}
.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 850px;
z-index: -1;
}
.bg-video::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .05;
background: url(../img/bg.webp);
}
.bg-video::before {
content:'';
position: absolute; 
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .3;
}
.bg-video__content {
width: 100%;
height: 100%;
object-fit: cover;
}
.logo {
width: 250px;
}
#header {
min-height: 850px;
}
#resident {
	background: url(../img/resident.webp) no-repeat;
	background-position: top right;
	background-size: 900px;
}
.sep {
width: 2px;
height: 80px;
margin: auto;
}
hr {
opacity: 1;
}
.lead {
font-size: 1.5rem;
}
.text-warning {
color: rgb(255, 236, 178) !important;
}
.btn-dark {
background: #2f251d !important;
}
.btn-dark:hover {
background: #000 !important;
}
.voice-note-controls .play-btn {
color: #2f251d;
width: 70px;
height: 70px;
}
.btn-light {
border: 1px solid #ece2da;
color: #717171;
background: #fffaf6 !important;
}
.voice-note-container .bi {
font-size: 1.5rem;
}
.progress-bar {
background-color: #2f251d !important;
}
.voice-note-controls .progress {
height: 8px;
background-color: #ded8d4;
}
#conclusion {
background: url(../img/conclusion.webp) no-repeat;
background-size: 1000px;
min-height: 900px;
}
.accordion-button {
font-size: 2rem;
}
.accordion-button:not(.collapsed) {
background-color: #fffaf6;
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
color: #2f251d;
}
.ici::after {
content: '';
position: absolute;
top: 15px;
left: -25px;
width: 100px;
height: 84px;
opacity: 1;
background: url(../img/ici.webp) no-repeat;
}
#peekhole, #faq {
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 44%,#fff8f3 100%);
}
 .video-background {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
	 z-index: 9999;
    }
.video-background video {
	position: absolute;
	top: 70%;
	left: 90%;
	min-width: 20%;
	min-height: 20%;
	width: 300px;
	height: 500px;
	z-index: -1;
	transform: translate(-50%, -50%);
	opacity: .2;
}
#cta {
background: #000;
}
    .content {
      position: relative;
      z-index: 1;
      color: white;
      text-align: center;
    }
.accordion {
--bs-accordion-border-color: #e6e0dc;
}
@media (max-width: 1399px){

.bg-video {
height: 800px;
}
#header {
min-height: 800px;
}
.logo {
	width: 200px;
}
#resident {
	background-size: 1000px;
}
}
@media (max-width: 991px){

h1, .h1 {
font-size: 2.5rem;
}
	.video-background video {
	top: 75%;
	left: 90%;
	width: 200px;
}
}
@media (max-width: 767px){
h1, .h1 {
font-size: 1.5rem;
}
.lead {
font-size: 1.15rem;
}
.logo {
width: 150px;
}

#conclusion {
background-size: 800px;
min-height: 800px;
}
	.bg-video {
height: 550px;
}
#header {
min-height: 550px;
}
}
.video-background video {
	width: 200px;
}
@media (max-width: 575px){
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
--bs-gutter-x: 4rem;
}

#conclusion {
background-size: 800px;
min-height: 700px;
background-position: top center;
}
.bg-video {
height: 600px;
}
#header {
min-height: 600px;
}
#resident {
	background-position: top right -100px;
	background-size: 1000px;
}
	.video-background video {
	top: 80%;
	left: 90%;
	width: 180px;
}
}
@media (max-width: 414px){

#conclusion {
background-size: 850px;
min-height: 900px;
background-position: top right -150px;
}
#conclusion .fs-3 {
font-size: 1.15rem !important;
}
.bg-video {
height: 700px;
}
#header {
min-height: 700px;
}
#resident {
	background-size: 1200px;
}
	.video-background video {
	top: 85%;
	left: 90%;
	width: 120px;
}
}