html,body{
    margin:0;
    padding:0;
    background: #205822;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-size:14px;
    color: #275729;
    text-shadow: 0 0 3px #fff;
}

/* @media only screen and (max-width: 425px){
    html,body{overflow-y: hidden;}
} */

@keyframes putarGbr {
    from{transform: rotate(0deg);}
    to{transform: rotate(-360deg);}
}

@keyframes shakeKiri {
    0%{left: 0;}
    16%{left: -30px;}
    32%{left: 0;}
    48%{left: -30px;}
    64%{left: 0;}
    80%{left: -30px;}
    100%{left: 0;}
}

/* @keyframes showInTopRight {
    0%{
        top: -50;
        right: -50;
    }
    100%{
        top: 0;
        right: 0;
    }
} */

/* .anim-fadeIn{
    animation:fadeIn 5s;
} */

.shake-kiri{
    animation: shakeKiri 3s;
}

.pagination{
    position: fixed;
    width: 100vw;
    max-width: 425px;
    height:5px;
    z-index: 999;
    padding: 0 5px;
    box-sizing: border-box;
}

.pagination .item{
    background-color: #c1c1c1;
    width: 10%;
    height: 3px;
    margin:5px 0.55%;
    float: left;
    z-index: 999999;
    border-radius: 3px;
    box-shadow: 0px 0px 10px #fff;
    box-sizing: border-box;
}

.wrapper{
    margin: auto;
    width: 100vw;
    max-width: 425px;
    overflow-x:scroll;
}

/* .wrapper::-webkit-scrollbar{
    height: 0;
} */

.container {
    width: max-content;
    display: inline-block;
    text-align: center;
}

.halaman{
    position: relative;
    float: left;
    width: 100vw;
    max-width: 425px;
    height: 100vh;
    /* border-left: 1px solid #5a5a5a; */
    transition:all 3s;
    opacity: 0;
}

/*.halaman:first-child{*/
/*    transition: left 1s;*/
/*}*/

.sudut-atas,.sudut-bawah{
    position: absolute;
    width: 0;
    transition:all 3s;
    transition-delay: .5s;
    opacity: .5;
}

.sudut-atas{
    top: 0;
    bottom: auto;
}

/* .halaman .sudut-atas{
    animation: showInTopRight 5s;
} */

.sudut-bawah{
    bottom: 0;
    top: auto;

}

.flip{
    transform: scaleX(-1) !important;
}

.rotasi{
    transform: rotate(180deg);
}

.flip-rotasi{
    transform: rotate(180deg) scaleX(-1) !important;
}

.kanan{
    left: auto;
    right: 0;
}

.kiri{
    left: 0;
    right: auto;
}

/* .sudut-atas.flip{
    left: 0;
    right: auto;
}

.sudut-bawah.flip{
    left: auto;
    right: 0;
} */

.frame-luar{
    position: absolute;
    width: 85%;
    top: 25%;
    left: 25%;
    transform: translate(-50%,-50%);
    scale: 0;
    transition: all 2s;
    transition-delay: 1.5s;
}

/* .halaman{
    animation: fadeIn 5s;

} */

.font18 {
    font-size: 18px;
    font-weight: 500;
}

.font17 {
    font-size: 17px;
    font-weight: 500;
}

.font15{
    font-size: 15px;
    font-weight: 500;
}

.kutipan-surah {
    font-size: 13px;
    margin: 5px 0 22px;
}

.judul{
    font-family: "Caveat", cursive;
    font-weight: 600;
    font-style: normal;
    font-size:32px;
    margin-bottom: 10px;
}

.frame-dalam.cover{
    position: relative;
    width: 300px;
    height: 300px;
    left: 50%;
    transform: translateX(-50%);
}

.frame-dalam .frame-nama-calon {
    position: relative;
    width: 100%;
    z-index: 9999;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    padding: 7px 0 1px;
}

.frame-nama-calon {
    border: 1px solid #205822;
    padding: 5px 0;
}

.circle-img{
    position: absolute;
    width: 100%;
    display: block;
    animation: putarGbr 5s linear infinite;
}

.nama-calon {
    font-family: "Grenze Gotisch", serif;
    font-weight: 400;
    font-style: normal;
    color: #0c5a2a;
    font-size: 40px;
    line-height: 1.2;
    padding-bottom: 4px;
}

.cover .nama-calon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.kepada {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #275729;
}

.nama-diundang {
    font-size: 18px;
    color: #1a4b1c;
    margin: 10px 0 15px;
    display: block;
}

a.buka-undangan{
    position: relative;
    text-decoration: none;
    background-color: #205822;
    padding: 10px;
    top:15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #fff;
    line-height: 1.5;
    transition: all 1s;
    font-size: 16px;
}

.salam{
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
}

.mempelai-judul, .judul-pesta {
    font-family: "Caveat", cursive;
    font-weight: 600;
    font-style: normal;
    font-size:52px;
    line-height: 1;
}

.nama-panggilan-calon {
    font-family: "Grenze Gotisch", serif;
    font-weight: 400;
    font-style: normal;
    color: #205822;
    font-size: 40px;
    line-height: 1.1;
}

.dan{
    font-family: "Grenze Gotisch", serif;
    font-weight: 600;
    font-size: 36px;
    color: #205822;
}

.nama-lengkap-calon,.tanggal-pesta {
    font-size:18px;
    font-weight:600;
}

.frame-nama-calon, .frame-waktu-pesta, .frame-peta-lokasi{
    /* border:1px solid #205822; */
    border-radius: 15px;
}

a.instagram-calon{
    margin:auto;
    width: fit-content;
    /* background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); */
    padding:3px;
    border-radius:3px;
    text-decoration: none;
    color:#000;
    line-height:2;
}

.judul-pesta{font-size: 36px;}

.tanggal-pesta{color:#308333;}

.frame-waktu-pesta{margin-top:10px;}

.peta-lokasi {
    margin: 10px 0;
    border-radius: 15px;
    width: 100%;
}

.frame-hitung-mundur{
    margin-top:30px;
}

.hitung-mundur{
    display: inline-block;
    padding:10px 0;
    background-color: #275729;
    border-radius:10px;
    color: #fff;
    margin-bottom: 25px;
    width: 24%;
    text-align: center;
}

.waktu-hitung-mundur{
    font-size:40px;
    line-height: 1;
}

.label-hitung-mundur{
    font-size:14px;
    line-height: 1;
}

a.tambah-ke-kalender{
    display: block;
    margin-top: 10px;
    text-decoration: none;
    background-color: #275729;
    color:#fff;
    font-size:16px;
    padding: 10px 20px;
    border-radius:15px;
}

a.tambah-ke-kalender:nth-child(2) {
    margin-top: 40px;
}

.frame-peta-lokasi{
    margin-bottom:20px;
}

.icon-doa{
    font-size: 60px;
}

.judul-doa{
    font-size:28px;
    margin-bottom:20px;
}

.doa{
    font-size:16px;
    margin-bottom: 20px;
}

.penutup-doa{
    font-size:13px;
    font-weight: 400;
}

.form-hadir{
    margin-top: 20px;
}

.form-input {
    margin: auto;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    box-sizing: border-box;
}

.form-input-radio {
    display: inline-block;
    width: 49%;
    padding: 5px;
    text-align: left;
    margin-bottom: 5px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #275729;
    box-sizing: border-box;
}

.form-input[type=submit]{
    background-color: #275729;
    color:#fff;
    font-size:18px;
}

textarea#pesan{
    height: 55px;
    font-family: "Montserrat", sans-serif;
}

.nama-calon.closing{
    padding: 0;
    font-size: 45px;
}

.nama-calon.closing i {
    font-size: 34px;
}

.judul.closing{
    font-size: 18px;
    margin: 15px 0;
}

.daftar-hadir {
    margin-top: 10px;
    text-align: left;
    border: 1px solid;
    border-radius: 10px;
    padding: 10px;
    height: 350px;
    overflow-y: auto;
    background: #ffffff9e;
}

.frame-tamu {
    border-bottom: 1px solid #275729;
    margin: 11px 0;
}

.frame-tamu:first-child{
    margin-top:0;
}

.frame-tamu:last-child{
    border-bottom: none;
}

.avatar {
    position: relative;
    float: left;
    font-size: 25px;
    margin-right: 4px;
}

span.nama-tamu {
    font-size: 14px;
    font-weight: 600;
    color: black;
}

span.status-kehadiran {
    color: #fff;
    border-radius: 3px;
    padding: 0 2px;
    margin-left: 3px;
    font-size: 11px;
}

.daftar-hadir .waktu {
    font-size: 11px;
    color: #607D8B;
}

.daftar-hadir .ucapan {
    font-size: 13px;
    margin: 5px 0 10px;
}

.border{
    border: 1ps solid #275729;
}