html {
	scroll-behavior: smooth;
}


body {
	font-family: var(--font-primary);
}

.imusic {
	position: fixed;
	bottom: 15px;
	right: 15px;
	width: 40px;
	padding: 5px;
	border-radius: 50%;
	z-index: 9;
	background-color: var(--warna);
}

/*undangan*/
.wrap {
	width: 412px;
	margin: auto;
	border: 1px solid var(--warna);
	/* background-color: black; */
}




/* modal */
.modal-dialog {
	height: 100%;
	max-width: 412px;
	margin: auto;
	padding: 0;
}

.modal-content {
	/*height: 800px;*/
	/*  max-height: 100%;*/
	border-radius: 0;
	/*background-color: var(--warna);*/
	color: white;
	/*top: -450px;*/
	/*border: 0px solid #fff;*/
}

.model-penuh {
	padding-right: 0;
	/*  display: block;*/
}

.corak-modal {
	top: -70px !important;
	width: 100.1% !important;
}


/*responsive modal*/
@media screen and (max-width: 378px) {
	.corak-modal {
		top: -57px !important;
	}
	

}

@media screen and (max-width: 313px) {
	.corak-modal {
		top: -43px !important;
	}
	.wrap {
		width: 100%;
	}

}
@media screen and (max-width: 425px) {
	.wrap {
		width: 100%;
	}
}


/*warna text agenda*/
.text-color {
	color: var(--warna);
}


.bd-btm {
	border-bottom: 2px solid white;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
}

.modal {
	overflow: hidden !important;
}

.modal-tema {
	width: 100%;
	position: relative;
	filter: grayscale(1);
}

.btn-modal {
	position: relative;
	top: -372px;
}

.btn-modal .col-md-6 {
	top: 15px;
}


.modal-body {
	margin-top: -60px;
}


.modal-ct {
	position: relative;
	top: -562px;
}

.cover-modal {
	height: 800px;
	background-color: var(--warna);
	width: 100.4%;
	position: relative;
	/* top: -388px; */
	left: -0.9px;
}
.title-modal{
	font-size: 20px;
    position: absolute;
    top: 4rem;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
	font-family: var(--font-primary);
	color:#fff;
}
.mempelai-name{
	font-size: 45px;
	font-family: var(--font-second);
	font-weight: 700;
}
.btn-tema-modal{
	background-color: white; 
	color: var(--warna);
	font-family: var(--font-third)
}

/* top konten */
#top-content {
	color: #fff;
	margin: auto;
	width: 100%;
	/* background: linear-gradient(180.03deg, rgba(101, 62, 29, 0.9) 0.02%, rgba(101, 62, 29, 0.471408) 77.07%, rgba(101, 62, 29, 0.178305) 99.96%, rgba(101, 62, 29, 0.201562) 99.97%, rgba(101, 62, 29, 0) 99.98%); */
	z-index: -1;
}

.img-top {
    width: 100%;
    z-index: -1;
    /* position: absolute; */
}

#wraptext {
	padding: 20px;
    width: 412px;
    text-align: center;
    position: absolute;
    top: 13px;
    font-size: 20px;
}
@media screen and (max-width: 425px) {
	#wraptext {
		width: 100%;
	}
}
.title-top{
	font-family: var(--font-second);
	font-size: 28px;
	color: #fff;
}
.couple-name {
    text-align: center;
    position: absolute;
    font-size: 45px;
    font-family: var(--font-second);
    top: 235px;
}
.datetime {
    text-align: center;
    position: absolute;
    font-size: 18px;
    top: 494px;
	font-family: var(--font-primary);
}
.batas-atas{
	width: 100%;
	position: relative;
	top: -38px;
	z-index: 2;
}
.batas-bawah{
	width: 100%;
	position: relative;
	top: -163px;
	z-index: 2;
}
/* kutipan */
.kutipan{
	background-color: #14111C;
}
.box-kutipan{
	background-color: #D5B597;
	width: 320px;
	margin: auto;
	position: relative;
	top:-150px;
}

/* mempelai */
.mempelai{
	background:linear-gradient(rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url('background.png') no-repeat;
	background-size: cover;
	position: relative;
	top: -100px;
}
.mempelai-position{
	position: relative;
	top: -100px;
}
.title-mempelai {
    font-family: var(--font-second);
    font-size: 30px;
    font-weight: 700;
    color: #D5B597;
	margin-bottom: 50px;
    /* position: relative;
    top: -130px; */
}
.box-mempelai{
	border: solid 6px #D5B597;
	margin: auto;
	width: 290px;
	position: relative;
	/* top: -100px; */
	color: #D5B597;
	padding: 50px 10px 50px 10px;
	/* margin-top: 50px;
	margin-bottom: 50px; */
}
.ornamen-atas {
    position: absolute;
    width: 165px;
    left: -35px;
    top: -40px;
}
.ornamen-bawah {
    position: absolute;
    width: 165px;
    bottom: -50px;
}
.mempelai-name{
	font-family: var(--font-second);
	font-size: 45px;
	font-weight: 700;
}
.mempelai-full-name{
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 700;
}
.mempelai-text{
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 300;
}
.mempelai-dan{
	font-family: var(--font-second);
	font-size: 45px;
	font-weight: 700;
	color: #D5B597;
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
}
/* agenda */
.agenda{
	background-color: #14111C;
	margin-top: -110px;
}
.agenda-atas{
	width: 100%;
	position: relative;
	top: -28px;
	z-index: 2;
}
.box-agenda{
	background-color: #D5B597;
	width: 320px;
	margin: auto;
	/* position: relative;
	top:-150px; */
}
.title-agenda{
	font-family: var(--font-second);
	font-size: 45px;
	font-weight: 700;
	color: #D5B597;
	margin-top: -115px;
	margin-bottom: 30px;
	text-align: center;
}
.agenda-name{
	font-family: var(--font-second);
	font-size: 40px;
	font-weight: 700;
	color: var(--warna);
}
.agenda-text{
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--warna);
}
.btn-agenda{
	background-color: var(--warna);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0px 4px 6px 0px #100e16;
	font-family: var(--font-third);
	font-weight: 700;
}
/* countdown */
.countdown{
	background:linear-gradient(rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url('background.png') no-repeat;
	background-size: cover;
	position: relative;
	top: -100px;
}
.title-countdown{
	font-family: var(--font-second);
	font-size: 30px;
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	margin-top: -120px;
}
.number-countdown{
	font-family: var(--font-second);
	font-size: 26px;
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	/* margin-top: -120px; */
}
.text-countdown{
	font-family: var(--font-third);
	font-size: 11px;
	color: #D5B597;
	text-align: center;
	/* margin-top: -120px; */
}
.btn-no-border{
	margin:10px 5px;
}
.btn-countdown{
	background-color: #fff;
	color: var(--warna);
	font-size: 16px;
	font-family: var(--font-third);
	/* font-weight: 700; */
	margin-bottom: 100px;
}

/* cashless */
.cashless{
	background-color: #14111C;
	margin-top: -110px;
}
.title-cashless{
	font-family: var(--font-second);
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	font-size: 30px;
	margin-top: -120px;
	margin-bottom: 20px;
}
.name-cashless{
	font-family: var(--font-third);
	font-weight: 700;
	font-size: 12px;
}
.number-cashless{
	font-family: var(--font-third);
	font-size: 12px;
}
.card-cashless{
	border-radius:15px; 
	width:320px;
	/* margin-top: 20px; */
	margin-bottom: 20px;
}
.btn-cashless{
	border-radius: 8px;
	background-color: #D5B597;
	color: #fff;
	font-family: var(--font-third);
	padding: 2px;
	box-shadow: 0px 4px 7px 0px #6d6d6e99;
}
/* form ucapan */
.form-ucapan{
	background:linear-gradient(rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url('background.png') no-repeat;
	background-size: cover;
	position: relative;
	top: -100px;
	color: #D5B597;
	font-family: var(--font-third);
	padding-bottom: 100px;
}
.form-ucapan .container{
	width: 320px;
	/* margin-bottom: 100px; */
}
.title-form-ucapan{
	font-family: var(--font-second);
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	font-size: 30px;
	margin-top: -120px;
	margin-bottom: 20px;
}
.form-ucapan input{
	border-radius: 10px;
}
.form-ucapan textarea{
	border-radius: 10px;
}
.btn-form-ucapan{
	border-radius: 8px;
	background-color: #fff;
}

/* ucapan dan doa */
.ucapan{
	background-color: #14111C;
	margin-top: -110px;
}
.title-ucapan{
	font-family: var(--font-second);
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	font-size: 30px;
	margin-top: -120px;
	margin-bottom: 20px;
}
.scroll {
    height: 400px;
    width: 100%;
    overflow-y: scroll;
}
.card-greeting {
	background-color: #D5B597;
	padding: 20px;
	border-radius: 20px;
	color: var(--warna);
	width: 100%;
	margin-bottom: 20px;
}

.circle {
	background-color: #ccc;
	border-radius: 100%;
	height: var(--avatar-size);
	text-align: center;
	width: var(--avatar-size);
}

.initials {
	font-size: calc(var(--avatar-size) / 2);
	/* 50% of parent */
	line-height: 1;
	position: relative;
	top: calc(var(--avatar-size) / 4);
	/* 25% of parent */
	color: white;
}
.thankyou{
	background:linear-gradient(rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url('background.png') no-repeat;
	background-size: cover;
	position: relative;
	top: -100px;
	color: #D5B597;
	font-family: var(--font-third);
	padding-bottom: 100px;
}
.title-thankyou{
	font-family: var(--font-primary);
	/* font-weight: 700; */
	color: #D5B597;
	text-align: center;
	font-size: 30px;
	margin-top: -120px;
	margin-bottom: 20px;
}
.text-thankyou{
	font-family: var(--font-second);
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	font-size: 35px;
}
/* footer */
.footer{
	background-color: #14111C;
	margin-top: -110px;
}
.title-footer{
	font-family: var(--font-third);
	/* font-weight: 700; */
	color: #D5B597;
	text-align: center;
	font-size: 20px;
	margin-top: -120px;
}
.text-footer{
	font-family: var(--font-second);
	font-weight: 700;
	color: #D5B597;
	text-align: center;
	font-size: 12px;
	text-decoration: none;
}
.copyright {
	width: 100%;
	text-align: center;
	font-family: var(--font-third);
	/* font-weight: 700; */
	color: #D5B597;
	font-size: 16px;
}

.img-copyright {
	width: 150px;
	padding: 0 10px;
	margin-bottom: 20px;
	/* margin: auto; */
}