/*
Theme Name: Digital Invitation
Version: 1.0
Text Domain: digitalinvitation
Author: aidenraadh
Author URI: https://aidenraadh.com/
*/
:root {
    --spacing-sm: 3rem;
    --spacing-lg: 6rem;
}
@font-face {
    font-family: 'Times New Roman';
    src: url('assets/fonts/times-new-roman/times-new-roman.ttf');
}
@font-face {
    font-family: 'Times New Roman Bold';
    src: url('assets/fonts/times-new-roman/times-new-roman-bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'Gilmoray';
    src: url('assets/fonts/gilmoray/gilmoray.ttf');
    font-weight: bold;
}
*, *::before, *::after{
    margin: 0;
    padding: 0;
}
::placeholder { /* Most modern browsers support this now. */
   color:    #333333 !important;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    color: #333333;
    font-size: 1rem;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 400;
    font-size: inherit;
}
#splash-screen{
    background: url('assets/images/bg-3.png') no-repeat scroll center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s;
}
.home{
    background: url('https://thedigitalinvitation.co/wp-content/uploads/2024/03/HORIZONTAL-1-1-scaled.jpg') no-repeat scroll center;
    background-size: cover;
    position: relative;
}
#homepage{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem; text-align: center;
    gap: 3rem;
    font-family: 'Belleza';
}
#homepage .btn{
    background: url('assets/images/btn-bg.png') no-repeat scroll center;
    background-size: cover;
    padding: 1em 1.4em;
    font-size: 1.2rem;
    font-family: inherit;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
}
.hero{
    min-height: 100vh;
    background: url('https://thedigitalinvitation.co/wp-content/uploads/2024/03/HORIZONTAL-1-1-scaled.jpg') no-repeat scroll center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Gilmoray';
    font-size: 1.5rem;
    text-align: center;
}
#hero-michael{
    background: url('https://thedigitalinvitation.co/wp-content/uploads/2023/09/1.jpeg') no-repeat scroll center;
    background-size: cover;	
}
.hero .heading{
    font-weight: 600;
}
.countdown{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-sm) 0;

}
.countdown #countdown-timer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.6rem;
    margin-top: 2.4rem;
}
.countdown .time-unit .time{
    font-size: 2rem;
    font-family: 'Gilmoray';
}
.countdown .time-unit .unit{
    font-family: 'Plus Jakarta Sans';
    text-transform: uppercase;
}
.special-day{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans';
    text-align: center
} 
.special-day p{
    line-height: 28px;
}
.special-day .heading{
    padding-top: 7rem;
    font-family: 'Gilmoray';
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.special-day .scroll-text{
    font-family: 'Plus Jakarta Sans'; margin: 6rem 0 2rem;
}
.our-story{
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    text-align: center;
    font-family: 'Plus Jakarta Sans';
    display: flex;
    flex-direction: column;
    align-items: center;
}
.our-story p{
    line-height: 28px;
}
.our-story .heading{
    font-family: 'Gilmoray';
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.our-story .img-box .img-inner-box{
    margin-top: 3rem;
}
.bg-cool{
    position: relative;
    min-height: 100vh;
}
.others{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.save-date{
    min-height: 100vh; background-color: #262626; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: white;
    font-family: 'Gilmoray';
    text-transform: uppercase;
    text-align: center;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);    
}
.save-date .heading{
    font-size: 6rem;
}
.save-date .date{
    font-family: 'Plus Jakarta Sans';
    font-size: 2.5rem;
    margin-bottom: 5rem;
}
#hansel-footer{
	color: #333333 !important;
}
#hansel-footer div.wpforms-container-full .wpforms-field-label{
	color: #333333;
	font-family: 'Plus Jakarta Sans';
	margin-bottom: 1rem;
	font-weight: 400;
}

#hansel-footer .wpforms-field-medium{
	color: #333333 !important;
	border-bottom-color: #333333 !important;
}


.location{
    font-family: 'Plus Jakarta Sans';
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);  
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;    
}
.location p{
    line-height: 28px;
}
.location .heading{
    font-family: 'Gilmoray';
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.location .map{
    width: 56rem;
    height: 40rem;
}
.location .step{
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
}
.location .step:last-of-type{
    margin-bottom: 0;
}
.location .step > div{
    flex-shrink: 0;
    width: 50%;
}
.location .step > div:first-child{
    display: flex;
    flex-direction: column;
    align-items: end;
    text-align: right;
    padding-right: 2rem;
}
.location .step > div:first-child > *{
	padding-right: 2.8rem;
}
.location .step > div:last-child{
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    padding-left: 2rem;
}
.location .step > div svg{
    position: absolute;
    width: 46%;
    bottom: -1rem;
}
.location .step > div:first-child svg{
    right: -0.8rem;
}
.location .step > div:last-child svg{
    right: 10rem;
    width: 52%;
}
.location .step .sketch{
    width: 14rem;
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 2rem;
}
.location .step .sketch img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.location .step .time{
    font-weight: 600;
    font-family: 'Plus Jakarta Sans';
    font-size: 1.5rem;
    margin-bottom: 0.8em;
}
.location .step .heading{
    font-weight: 600;
    font-family: 'Plus Jakarta Sans';
    font-size: 1rem;
    margin-bottom: 1em;
}
.location .step .body{
    line-height: 1.5em;
}
.footer{
    padding: var(--spacing-sm) 0 1.4rem; background: #262626;
    color: #fff;
}
.footer > .body{
    display: flex;
	flex-direction: column;
	align-items: center;
    gap: 2rem;
}
.footer > .body > div{
    width: 33%;
    flex-shrink: 0;
}
.location .step .body{
    font-style: italic;
}
.img-inner-box{
    display: flex; gap: 3rem;
}
.img-box{
    max-width: 56rem;
}
.img-box .main-img{
    width: 100%;
}

.img-box .img{
    width: 50%;
}
.img-box img{
    width: 100%;
    height: auto;
}
.quote{
    font-style: italic;
    font-family: 'Plus Jakarta Sans';
    text-align: center;
    line-height: 28px;
}
.moving-bg{
    position: relative;
    overflow: hidden;
}

.moving-bg > *{
    position: relative;
}
.moving-bg > .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s;
}
#audio-control{
	position: fixed;
    bottom: 4rem;
    left: 5rem;
    width: 4rem;
	border: none;
	background-color: transparent;
	cursor: pointer;
}
#audio-control.played .played-img{
	display: block
}
#audio-control.played .no-played-img{
	display: none
}
#audio-control .played-img{
	display: none
}
#audio-control .no-played-img{
	display: block
}
@keyframes one {
    from {opacity: 0.4;}
    to {opacity: 1;}
}
@keyframes two {
    from {opacity: 0.4;}
    to {opacity: 1;}
}
@keyframes three {
    from {opacity: 0.4;}
    to {opacity: 1;}
}
.scroll-anim{
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 10rem;
}
.one.scroll-anim{
    animation-name: one;
}
.two.scroll-anim{
    animation-name: two;
    animation-delay: 0.4s;
}
.three.scroll-anim{
    animation-name: three;
    animation-delay: 0.8s;
}
.gallery{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.gallery img{
	width: 100%;
	height: 20rem;
	object-fit: cover;
}
#hansel-footer .guest-form .wpforms-confirmation-container-full{
	background: transparent !important;
}
@media only screen and (min-width: 1051px) {
    html {
        font-size: calc(16px + ((100vw - 1281px) * 0.001407));
    }
}

@media only screen and (max-width: 1050px) {
    html {
        font-size: calc(16px - ((100vw - 1050px) * -0.004615));
    }    
}

@media only screen and (max-width: 700px) {
    html {
        font-size: calc(14.4px + ((100vw - 320px) * 0.00421));
    }
}


@media only screen and (min-width: 3000px) {
    .section-container {
        padding-left: calc(502px + ((100vw - 3000px) * 0.4466));
        padding-right: calc(502px + ((100vw - 3000px) * 0.4466));
    }
}

@media only screen and (min-width: 2500px) and (max-width: 3000px) {
    .section-container {
        padding-left: calc(278px + ((100vw - 2500px) * 0.4466));
        padding-right: calc(278px + ((100vw - 2500px) * 0.4466));
    }
}

@media only screen and (min-width: 2000px) and (max-width: 2500px) {
    .section-container {
        padding-left: calc(325px + ((100vw - 2000px) * 0.4433));
        padding-right: calc(325px + ((100vw - 2000px) * 0.4433));
    }
}

@media only screen and (min-width: 1500px) and (max-width: 2000px) {
    .section-container {
        padding-left: calc(105px + ((100vw - 1500px) * 0.5072));
        padding-right: calc(105px + ((100vw - 1500px) * 0.5072));
    }
}

@media only screen and (min-width: 1051px) and (max-width: 1500px) {
    .section-container {
        padding-left: calc(20px + ((100vw - 1101px) * 0.33519));
        padding-right: calc(20px + ((100vw - 1101px) * 0.33519));
    }
}

@media only screen and (max-width: 1050px) {
    .section-container {
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .location .map{
        width: 100% !important;
        height: 80vw;
    }      
}

@media only screen and (max-width: 700px) {
    .section-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .special-day .heading{
        padding-top: 2rem;
    }
    .special-day .scroll-text{
        margin-top: 1rem;
    }    
    .countdown #countdown-timer{
        flex-direction: column;
    }
    .our-story .img-box .img-inner-box{
        margin-top: 1.2rem;
    }  
    .location .step .sketch{
        width: 100%;
    }
    .location .step .sketch img{
        width: 100%;
    }
    .location .step > div{
        flex-shrink: 1;
    } 
    .location .step .time{
        font-size: 16px;
    }
    .location .step .heading{
        font-size: 14px;
    }
    .location .step .body{
        font-size: 12px;
    }
    .location .step > div:first-child svg{
        right: -1.6rem;
		width: 4.6rem;
    }
    .location .step > div:last-child svg{
		right: 32vw;
		width: 16vw;
    }
	.location .step > div:first-child{
		padding-right: 0;
	}	
	.location .step > div:first-child > *	{
		padding-right: 0;
	}
	.location .step > div:last-child > *	{
		padding-left: 1rem;
	}	
    .img-box{
        max-width: 56rem;
        padding-left: 0;
        padding-right: 0;
    }  
    .img-inner-box{
        gap: 1.2rem;
    }
    .footer > .body{
        flex-direction: column;
    }
    .footer > .body > div{
        width: 100%;
    }   
	#audio-control{
		bottom: 2rem;
		left: 2rem;
	}	
	#kissing-bg .img-box{
		padding: 0 1rem;
	}	
}