@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;700&family=Pacifico&family=Roboto:wght@300&family=Style+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Arizonia&family=Cookie&family=Great+Vibes&family=Lovers+Quarrel&family=Monsieur+La+Doulaise&family=Mr+Bedfort&family=Mrs+Saint+Delafield&family=Playball&family=Qwigley&family=Rochester&family=Tangerine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Italiana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Waterfall&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    /*--warna-putih:#fff;*/
    /*--warna-biru:#53A3FF;*/
    /*--warna-hitam:#000;*/
    /*--warna-gelap:#363949;*/
    
    /*--bg:#fff;*/
    /*--bg2:#fff;*/
    /*--bg-menu:linear-gradient(to bottom, #2b7bff, #53A3FF);*/
    /*--bg-tabel:linear-gradient(to right, #2b7bff, #53A3FF);*/
    
    /*--bayang:0px 44px 32px 8px rgba(132,139,200,0.2);*/
}

.tema1{
    /*------------coklat-------*/
    --warna-teks:#6E4733;
    --warna-utama:#D5AF81;
    --warna-utama-gelap:#B1836E;
    --gambar1:url('../img/bg-bunga.jpg');
    
    /*--bg:#FBEDDE;*/
    --bg:#FBF0ED;
    --bg2:#C9B09B;
    
    /*--warna-biru:#50525A;*/
    /*--warna-gelap:#edeffd;*/
    /*--bg-menu:linear-gradient(to bottom, #202528, #202528);*/
    /*--bg-tabel:linear-gradient(to right, #363A3D, #363A3D);*/
    
    /*--bayang:0px 44px 32px 8px rgba(132,139,200,0.12);*/
}

.tema2{
    /*--------------------------pink*/
    --warna-teks:#BA7198;
    --warna-teks2:#6F435B;
    --warna-teks-lawan:#6F435B;
    --warna-utama:#EEA7B3;
    --warna-utama-gelap:#BA7198;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg3.png');
    
    --bg:#F7E3E3;
    --bg2:#F4CAD1;
    
    
    --warna-utama-terang:#BA7198;
    
    --warna-bunga-tepi1:#DECCCC;
    --warna-bunga-tepi2:#fae9ec;
    --warna-bunga-nama1:#BA7198;
    --warna-bunga-nama2:#FFB696;
    
    --warna-ikon:#BA7198;
    --warna-ikon2:#FFF7F4;
    --warna-ikon-teks:#FFF7F4;
    
}

.tema3{
    /*------------black gold---------*/
    --warna-teks:#F8C569;
    --warna-teks2:#F9C369;
    --warna-teks-lawan:#AE8F52;
    
    --warna-utama:#DFBB6D;
    --warna-utama-gelap:#AE8F52;
    --warna-utama-terang:#AE8F52;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    
    
    --bg:#3A3A3A;
    --bg2:#282828;
    
    --warna-bunga-tepi1:#63522F;
    --warna-bunga-tepi2:#7C663B;
    --warna-bunga-nama1:#F8C468;
    --warna-bunga-nama2:#FFF7BC;
    
    --warna-ikon:#F8C468;
    --warna-ikon2:#F8C569;
    --warna-ikon-teks:#3A3A3A;
}

.tema4{
    /*------------hijau daun-------*/
    --warna-teks:#5A7178;
    --warna-teks2:#3E4F54;
    --warna-teks-lawan:#E9D9C2;
    --warna-utama:#5A7178;
    --warna-utama-gelap:#3E4F54;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#f8f7f2;
    --bg2:#5A7178;
    
    --warna-utama-terang:#5A7178;
    
    --warna-bunga-tepi1:#DFDED9;
    --warna-bunga-tepi2:#8B9BA0;
    --warna-bunga-nama1:#5A7178;
    --warna-bunga-nama2:#BBDABB;
    
    --warna-ikon:#5A7178;
    --warna-ikon2:#FFF7F4;
    --warna-ikon-teks:#FFF7F4;
}

.tema5{
    /*----------------abu*/
    --warna-teks:#C1BFCD;
    --warna-teks2:#3E4F54;
    --warna-teks-lawan:#FFFFE9;
    --warna-utama:#C1BFCD;
    --warna-utama-gelap:#3E4F54;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#EBEBEB;
    --bg2:#595B5A;
    
    --warna-utama-terang:#5A7178;
    
    --warna-bunga-tepi1:#D3D3D3;
    --warna-bunga-tepi2:#8A8C8B;
    --warna-bunga-nama1:#595B5A;
    --warna-bunga-nama2:#ACADAC;
    
    --warna-ikon:#5A7178;
    --warna-ikon2:#FFF7F4;
    --warna-ikon-teks:#FFF7F4;
}

.tema6{
    /*----------------------ungu--------*/
    --warna-teks:#C1BFCD;
    --warna-teks2:#3E4F54;
    --warna-teks-lawan:#605F66;
    --warna-utama:#C1BFCD;
    --warna-utama-gelap:#3E4F54;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#f8f7f2;
    --bg2:#C1BFCD;
    
    --warna-utama-terang:#9A98A4;
    
    --warna-bunga-tepi1:#D3D3D3;
    --warna-bunga-tepi2:#f8f7f2;
    --warna-bunga-nama1:#9A98A4;
    --warna-bunga-nama2:#C1BFCD;
    
    --warna-ikon:#C1BFCD;
    --warna-ikon2:#FFF7F4;
    --warna-ikon-teks:#FFF7F4;
}

.tema7{
    /*----------------------putih gold--------*/
    --warna-teks:#D4AF37;
    --warna-teks2:#946916;
    --warna-teks-lawan:#FFFFE9;
    --warna-utama:#C1BFCD;
    --warna-utama-gelap:#3E4F54;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#FFFDF1;
    --bg2:#BCA062;
}

.tema8{
    /*----------------------coklat 2--------*/
    --warna-teks:#7E6F5A;
    --warna-teks2:#7E6F5A;
    --warna-teks-lawan:#FFFFE9;
    
    --warna-utama:#7E6F5A;
    --warna-utama-gelap:#786F61;
    --warna-utama-terang:#88A8C7;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#EEE9E2;
    --bg2:#978B7A;
    
    --warna-bunga-tepi1:#DBD1C2;
    --warna-bunga-tepi2:#B9A796;
    --warna-bunga-nama1:#7E6F5A;
    --warna-bunga-nama2:#E8CE78;
    
    --warna-ikon:#978B7A;
    --warna-ikon2:#3A6FA3;
    --warna-ikon-teks:#fff;
}

.tema9{
    /*----------------------biru putih--------*/
    --warna-teks:#224261;
    --warna-teks2:#224261;
    --warna-teks-lawan:#D7E2EC;
    
    --warna-utama:#3A6FA3;
    --warna-utama-gelap:#2E5882;
    --warna-utama-terang:#88A8C7;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#F1FAFB;
    --bg2:#3A6FA3;
    
    --warna-bunga-tepi1:#C3D3E3;
    --warna-bunga-tepi2:#618BB5;
    --warna-bunga-nama1:#2E5882;
    --warna-bunga-nama2:#96ABC0;
    
    --warna-ikon:#3A6FA3;
    --warna-ikon2:#F1FAFB;
    --warna-ikon-teks:#fff;
}

.tema10{
    /*----------------------putih peach--------*/
    --warna-teks:#CC9178;
    --warna-teks2:#B27F69;
    --warna-teks-lawan:#7F5B4B;
    
    --warna-utama:#CC9178;
    --warna-utama-gelap:#B27F69;
    --warna-utama-terang:#B27F69;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#FFF7F4;
    --bg2:#FFD3D4;
    
    --warna-bunga-tepi1:#FFE1D5;
    --warna-bunga-tepi2:#fff1f2;
    --warna-bunga-nama1:#CC9178;
    --warna-bunga-nama2:#FFB696;
    
    --warna-ikon:#E5AA90;
    --warna-ikon2:#FFF7F4;
    --warna-ikon-teks:#FFF7F4;
}

.tema11{
    /*----------------------hitam cream--------*/
    --warna-teks:#dac9b6;
    --warna-teks2:#F3E0CB;
    --warna-teks-lawan:#F3E0CB;
    
    --warna-utama:#DFBB6D;
    --warna-utama-gelap:#AA9C8E;
    --warna-utama-terang:#AA9C8E;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#424242;
    --bg2:#282828;
    
    --warna-bunga-tepi1:#625C5C;
    --warna-bunga-tepi2:#494545;
    --warna-bunga-nama1:#F1D1BC;
    --warna-bunga-nama2:#F2E2D1;
    
    --warna-ikon:#C2B3A2;
    --warna-ikon2:#C2B3A2;
    --warna-ikon-teks:#3A3A3A;
    
}

.tema12{
    /*----------------------ungu--------*/
    --warna-teks:#8878A8;
    --warna-teks2:#665A7E;
    --warna-teks-lawan:#665A7E;
    --warna-utama:#C1BFCD;
    --warna-utama-gelap:#665A7E;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#f0e8f4;
    --bg2:#CDB5DB;
    
    --warna-utama-terang:#9A98A4;
    
    --warna-bunga-tepi1:#e1d2e9;
    --warna-bunga-tepi2:#e6daed;
    --warna-bunga-nama1:#CDB5DB;
    --warna-bunga-nama2:#B8A2C5;
    
    --warna-ikon:#B8A2C5;
    --warna-ikon2:#665A7E;
    --warna-ikon-teks:#FFF7F4;
}

.tema13{
    /*----------------------biru --------*/
    --warna-teks:#224261;
    --warna-teks2:#224261;
    --warna-teks-lawan:#D7E2EC;
    
    --warna-utama:#3A6FA3;
    --warna-utama-gelap:#2E5882;
    --warna-utama-terang:#88A8C7;
    
    --warna-utama2:#FFFFE9;
    --gambar1:url('../img/bg2.jpg');
    
    --bg:#D0E6FA;
    --bg2:#196BA3;
    
    --warna-bunga-tepi1:#A3C3DA;
    --warna-bunga-tepi2:#618BB5;
    --warna-bunga-nama1:#2E5882;
    --warna-bunga-nama2:#96ABC0;
    
    --warna-ikon:#3A6FA3;
    --warna-ikon2:#F1FAFB;
    --warna-ikon-teks:#fff;
}

body{
    /*display:flex;*/
    /*height:100vh;*/
    /*justify-content:center;*/
    /*align-items:center;*/
    /*background: linear-gradient(135deg, #A2F1EE, #044A9B);*/
    /*padding:10px;*/
    
    
    overflow: hidden;
}

body::-webkit-scrollbar {
  width: 10px;
}

/* Track */
body::-webkit-scrollbar-track {
  background: #e2e2e2; 
}
 
/* Handle */
body::-webkit-scrollbar-thumb {
  background: #D5AF81; 
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  background: #AA8C67; 
}

.container{
    
    /*max-width:700px;*/
    width:100%;
    /*background:#F8F7F2;*/
    background:var(--bg2);
    /*padding:25px 30px;*/
    /*border-radius:5px;*/
    
}

.kotak{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:15px;
    /*border:1px solid red;*/
    
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
}

.kotak4{
    min-height:20vh;
    /*background:var(--bg2);*/
    padding:20px 12px 80px 12px;
    /*border:1px solid red;*/
}

.surat{
    min-height:28vh;
    background:var(--bg2);
    /*background-image:url('img/bg1.png');*/
    /*background-position:center center;*/
    /*background-repeat:no-repeat;*/
    /*background-size:cover;*/
    padding:30px;
}

.kotak1{
    /*background-image:var(--gambar1);*/
    /*background-position:center center;*/
    /*background-repeat:no-repeat;*/
    /*background-size:cover;*/
    /*background:linear-gradient(to bottom, white, var(--warna-utama));*/
    
}

.bunga_tepi1{
    position:absolute;
    height:80vh;
    top:0;
    left:0;
}

.bunga_tepi2{
    position:absolute;
    height:60vh;
    bottom:0;
    right:0;
}

.kotak1 .bg{
    /*background:linear-gradient(to bottom, white, var(--warna-utama));*/
    height:15vh;
    /*border:1px solid black;*/
    width:100%;
    position:absolute;
    bottom:0;
    /*z-index: -1;*/
}

.kotak2{
    min-height:50vh;
    /*background:var(--bg2);*/
    padding:80px 12px;
}

.kotak3{
    min-height:50vh;
    /*border:1px solid black;*/
    background:var(--bg2);
    position:relative;
    padding:40px 0 50px 0;
}

.kotak3 .bunga1{
    width:200px;
    position:absolute;
    left:200px;
    bottom:0;
}

.kotak3 .bunga2{
    width:200px;
    position:absolute;
    right:200px;
    top:0;
    -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
    -moz-transform: rotate(180deg);        /* FF */
    -o-transform: rotate(180deg);          /* Opera */
    -ms-transform: rotate(180deg);         /* IE9 */
    transform: rotate(180deg);
}

.bunga3{
    height:50vh;
    position:absolute;
    right:0;
    bottom:-30px;
    opacity:0.5;
    z-index:2;
}

.bunga4{
    height:50vh;
    position:absolute;
    left:0;
    top:-30px;
    opacity:0.5;
    z-index:2;
    transform: rotate(180deg);
}

.bunga_back{
    /*border:1px solid black;*/
    width: 50vh;
    height: 50vh;
    position:absolute;
    right:0;
    bottom:0;
    /*border:1px solid grey;*/
    background-color: var(--warna-bunga-tepi1);
  mask: url(../img/bunga_back.svg) no-repeat right bottom / contain;
  -webkit-mask: url(../img/bunga_back.svg) no-repeat right bottom / contain;
  /*margin-bottom:-30px;*/
  /*z-index:2;*/
}

.bunga_tepi{
    /*border:1px solid black;*/
    width: 40vh;
    height: 40vh;
    position:absolute;
    left:20px;
    bottom:0;
    /*border:1px solid grey;*/
    background-color: var(--warna-bunga-tepi2);
  mask: url(../img/bunga_tepi.svg) no-repeat left bottom / contain;
  -webkit-mask: url(../img/bunga_tepi.svg) no-repeat left bottom / contain;
  /*margin-bottom:-30px;*/
  /*z-index:1;*/
}

/*.kotak3 .teks1{*/
/*    color:var(--warna-utama2);*/
/*}*/

/*.kotak3 span{*/
/*    color:var(--warna-utama2);*/
/*}*/

.kotak_isi{
    /*border:1px solid black;*/
    width:950px;
    text-align:center;
    /*z-index:80;*/
    /*z-index:1;*/
}

.kotak_nama{
    width:100%;
    /*border:1px solid black;*/
    display:flex;
    justify-content:center;
    align-items:center;
}

.kotak_nama2{
    width:100%;
    /*border:1px solid black;*/
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
	flex-wrap:wrap;
}

.kotak_nama_isi{
    width:44%;
    /*border:1px solid black;*/
    /*margin-bottom:17px;*/
}

.kotak_nama_isi ion-icon{
    margin-right:5px;
}

.kotak_nama_isi span{
    line-height:28px;
}

/*----------------------------------------------------------------STYLE NAMA-----------------*/
.tutup_nama{
    padding:10px;
}

.tutup_isi_nama2{
    position:relative;
    padding:30px;
}

.kotak_isi_nama{
    /*border:2px solid #7E6F5A;*/
    border:2px solid var(--warna-teks);
    text-align:center;
    padding:20px;
}

.tutup_isi_nama2{
    text-align:center;
    padding:20px;
    margin-top:20px;
}

.nama_tek1{
    /*nama panggilan di bawah*/
    font-family: 'Abril Fatface', cursive;
    
    font-size:1.5rem;
    /*color:#3E4F54;*/
    /*color:#7E6F5A;*/
    color:var(--warna-teks);
    display:block;
    letter-spacing:3.5px;
    
}

.nama_tek2{
    /*nama inisial*/
    font-family: 'Abril Fatface', cursive;
    /*color:#7E6F5A;*/
    color:var(--warna-teks);
    font-size:6rem;
    
}

.nama_tek3{
    /*teks untuk dan*/
    font-family: 'Abril Fatface', cursive;
    
    font-size:1.3rem;
    /*color:#3E4F54;*/
    /*color:#89857B;*/
    color:var(--warna-teks);
    display:block;
    letter-spacing:2.5px;
}

/*---------paling atas undangan*/
.bunga_nama_atas{
    width: 100vw;
    height: 40vh;
    position:absolute;
    left:0;
    top:0;
    /*background-color: red;*/
    background:linear-gradient(to right, var(--warna-bunga-nama1), var(--warna-bunga-nama2), var(--warna-bunga-nama1));
    mask: url(../img/bunga_atas.svg) no-repeat center top / contain;
    -webkit-mask: url(../img/bunga_atas.svg) no-repeat center top / contain;
    /*z-index:2;*/
}

/*---------paling bawah undangan*/
.bunga_nama_atas2{
    width: 100vw;
    height: 40vh;
    position:absolute;
    left:0;
    bottom:0;
    /*background-color: red;*/
    background:linear-gradient(to right, var(--warna-bunga-nama1), var(--warna-bunga-nama2), var(--warna-bunga-nama1));
    mask: url(../img/bunga_atas_balik.svg) no-repeat center bottom / contain;
    -webkit-mask: url(../img/bunga_atas_balik.svg) no-repeat center bottom / contain;
    /*z-index:2;*/
}

.bunga_nama_bawah{
    width: 100vw;
    height: 20vh;
    position:absolute;
    left:0;
    bottom:0;
    /*background-color: red;*/
    background:linear-gradient(to right, var(--warna-bunga-nama1), var(--warna-bunga-nama2), var(--warna-bunga-nama1));
    mask: url(../img/bunga_garis_bawah.svg) no-repeat center bottom / contain;
    -webkit-mask: url(../img/bunga_garis_bawah.svg) no-repeat center bottom / contain;
    /*z-index:2;*/
}

.bunga_nama_bawah2{
    width: 100vw;
    height: 20vh;
    position:absolute;
    left:0;
    top:0;
    /*background-color: red;*/
    background:linear-gradient(to right, var(--warna-bunga-nama1), var(--warna-bunga-nama2), var(--warna-bunga-nama1));
    mask: url(../img/bunga_garis_atas.svg) no-repeat center top / contain;
    -webkit-mask: url(../img/bunga_garis_atas.svg) no-repeat center top / contain;
    /*z-index:2;*/
}

.bunga_nama1{
    width: 85px;
    height: 85px;
    position:absolute;
    right:0;
    top:0;
    /*border:1px solid grey;*/
    /*background-color: #7E6F5A;*/
    background-color: var(--warna-teks);
    mask: url(../img/bunga_nama.svg) no-repeat right top / contain;
    -webkit-mask: url(../img/bunga_nama.svg) no-repeat right top / contain;
    z-index:2;
}

.bg_nama1{
    width: 80px;
    height: 70px;
    position:absolute;
    right:0;
    top:0;
    background:var(--bg);
}

.bunga_nama2{
    width: 85px;
    height: 85px;
    position:absolute;
    left:0;
    bottom:0;
    /*border:1px solid grey;*/
    /*background-color: #7E6F5A;*/
    background-color: var(--warna-teks);
    mask: url(../img/bunga_nama2.svg) no-repeat left bottom / contain;
    -webkit-mask: url(../img/bunga_nama2.svg) no-repeat left bottom / contain;
    z-index:2;
}

.bg_nama2{
    width: 80px;
    height: 70px;
    position:absolute;
    left:0;
    bottom:0;
    background:var(--bg);
}

/*----------------------------------------------------------------NAMA-----------------*/

.cover {
  position: relative;
  /*top: 0;*/
  /*left: 0;*/
  margin:auto;
  margin-bottom:20px;
  width:240px;
    height:240px;
  /*border:1px solid black;*/
  
    display:flex;
  justify-content:center;
  align-items:center;
}

.image1 {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  /*border: 1px solid #000000;*/
  width:200px;
    border-radius:50%;
}

.image2 {
  position: absolute;
  top: 0;
  left: 0;
  /*top: -20px;*/
  /*left: -20px;*/
  /*border: 1px solid #000000;*/
  width:240px;
    /*border-radius:50%;*/
}

.kotak_nama_tengah{
    /*margin:0 5px;*/
    width:10%;
    /*border:1px solid black;*/
}

.kotak_waktu{
    width:20vw;
    margin:0 10px;
    /*border:1px solid black;*/
}

.galeri{
 /*   display:flex;*/
	/*justify-content:center;*/
	flex-direction:row;
	flex-wrap:wrap;
	z-index:90;
}

.galeri img{
    width:200px;
    margin:5px;
    transition: transform .2s;
    z-index:98;
}

.galeri img:hover{
    transform: scale(3);
    z-index:99;
}

.ucapan{
    
    min-height:50px;
    max-height:50vh;
    overflow-y: scroll;
    /*border:1px solid red;*/
}

.ucapan::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.ucapan::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.ucapan::-webkit-scrollbar-thumb {
  background: #ccc; 
}

/* Handle on hover */
.ucapan::-webkit-scrollbar-thumb:hover {
  background: #999; 
}



.kotak_ucapan{
    width:100%;
    /*border:1px solid black;*/
    display:flex;
    /*justify-content:center;*/
    /*align-items:center;*/
    flex-direction:row;
	flex-wrap:wrap;
	margin-bottom:10px;
	padding:5px 0px;
	/*border-top:2px solid #ccc;*/
}

.kotak_ucapan .kiri{
    width:25%;
    /*border:1px solid black;*/
}

.kotak_ucapan .kiri img{
    width:50%;
    border-radius:50%;
}

.kotak_ucapan .kanan{
    width:74%;
    /*border:1px solid black;*/
    text-align:left;
}

.kotak_ucap{
    color:var(--warna-teks2);
    position: relative;
    border:1px solid #D6D6D6;
    border-bottom:3px solid #D6D6D6;
    border-radius:5px;
    padding:5px;
    padding-left:10px;
}

.kotak_ucap::before{
    position: absolute;
    content:'';
    left:-8px;
    top:3px;
    
    width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 8px solid var(--warna-utama);
	border-bottom: 10px solid transparent;
}

.form_ucap{
    z-index:3;
    position:relative;
}


.teks1{
    /*-----------------------------judul nama depan-----------*/
    /*font-family: 'Pacifico', cursive;*/
    /*font-family: 'Rancho', cursive;*/
    /*font-family: 'Berkshire Swash', cursive;*/
    font-family: 'Great Vibes', cursive;
    
    font-size:4.3rem;
    color:var(--warna-teks);
    
}

.teks2{
    /*-----------------------------------judul setiap seksi--------*/
    /*font-family: 'Berkshire Swash', cursive;*/
    font-family: 'Great Vibes', cursive;
    
    /*font-size:3rem;*/
    font-size:3.5rem;
    color:var(--warna-teks);
}

.teks3{
    /*--------------------------------kata surat dan di dalam kotak gelap------*/
    font-family: 'Open Sans', sans-serif;
    color:var(--warna-teks-lawan);
    font-style: italic;
    font-weight:300;
}

.teks4{
    /*-----------------bismillah sebelum nama dan foto pengantin*/
    font-family: 'Open Sans', sans-serif;
    color:var(--warna-teks2);
    font-weight:500;
    font-style: italic;
    letter-spacing: 0.2px;
}

.teks5{
    /*-----------------tulisan sebelum nama pengantin dan terima kasih*/
    font-family: 'Montserrat', sans-serif;
    color:var(--warna-teks2);
    font-weight:400;
    font-size:16px;
    letter-spacing: 4px;
    text-transform: uppercase;
    /*margin-bottom:4px;*/
}

.teks6{
    /*-------------------nama pengantin*/
    /*font-family: 'Berkshire Swash', cursive;*/
    font-family: 'Great Vibes', cursive;
    
    /*font-size:25px;*/
    font-size:2.8rem;
    color:var(--warna-teks2);
    line-height:40px !important; 
}

.teks7{
    /*------------------nama orang tua dan teks lain nya*/
    font-family: 'Montserrat', sans-serif;
    color:var(--warna-teks2);
    font-weight:400;
    font-size:17px;
    /*letter-spacing: 4px;*/
    /*text-transform: uppercase;*/
    /*margin-bottom:4px;*/
}

.teks8{
    /*------------------------jam---------*/
    font-family: 'Berkshire Swash', cursive;
    
    font-size:3.4rem;
    letter-spacing:4px;
    color:var(--warna-teks-lawan);
}

.teks9{
    /*--------------------------dibawah jam*/
    font-family: 'Montserrat', sans-serif;
    color:var(--warna-teks-lawan);
    font-weight:400;
    font-size:17px;
}

.teks10{
    /*--------------------------nama undangan kepada*/
    /*font-family: 'Berkshire Swash', cursive;*/
    /*font-family: 'Great Vibes', cursive;*/
    font-family: 'Montserrat', sans-serif;
    /*font-size:20px;*/
    font-weight:700;
    font-size:1.8rem;
    color:var(--warna-teks);
    margin:10px;
    letter-spacing:1.2px;
}

.teks11{
    /*--------------------------judul kepada dan hormat */
    font-family: 'Montserrat', sans-serif;
    font-weight:400;
    font-size:15px;
    
    /*font-size:2.5rem;*/
    color:var(--warna-teks);
}

.teks12{
    /*--------------------------judul kepada dan hormat */
    font-family: 'Montserrat', sans-serif;
    font-weight:300;
    font-size:11px;
    
    /*font-size:2.5rem;*/
    color:var(--warna-teks-lawan);
}

.teks13{
    /*--------------------------judul kepada dan hormat */
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'Berkshire Swash', cursive;
    font-weight:400;
    font-size:18px;
    
    /*font-size:2.5rem;*/
    color:var(--warna-teks-lawan);
}

.teks_warna2{
    color:var(--warna-teks-lawan);
}

.tipe1 .kotak1{
    /*background:Aquamarine;*/
    /*color:blue;*/
}

.tipe2 .kotak1{
    /*background:#B1836E;*/
    /*color:white;*/
}

.tipe1 .kotak2{
    /*background:#CCC5BD;*/
}

.tipe1 .kotak3{
    /*background:#CCC5BD;*/
}

/*.kotak1{*/
/*    width:100%;*/
/*    height:400px;*/
/*    border:1px solid black;*/
/*    background:#aaa;*/
/*}*/

/*.kotak2{*/
/*    width:100%;*/
/*    height:400px;*/
/*    border:1px solid black;*/
/*    background:#ddd;*/
/*}*/

.tutup_jalan{
    width:100%;
    /*border:1px solid black;*/
}

.tutup_jalan .awal .tengah::before{
    position: absolute;
    content:'';
    left:calc(50% - 10px);
    top:0;
    /*border-left:5px solid #D6D6D6;*/
    /*height:100px;*/
    width:20px;
    height:20px;
    border-radius:50%;
    background:#D6D6D6;
}

.tutup_jalan .akhir .tengah::before{
    position: absolute;
    content:'';
    left:calc(50% - 10px);
    bottom:-30px;
    /*border-left:5px solid #D6D6D6;*/
    /*height:100px;*/
    width:20px;
    height:20px;
    border-radius:50%;
    background:#D6D6D6;
}

.kotak_jalan{
    width:100%;
    /*border:1px solid black;*/
    display:grid;
    grid-template-areas:'kiri tengah kanan';
    grid-template-columns: 47% auto 47%;
    padding-bottom:30px;
}

.kotak_jalan .kiri{
    grid-area: kiri;
    /*border:1px solid black;*/
    padding:5px 10px;
}

.kotak_jalan .kiri .atas{
    text-align:right;
}

.kotak_jalan .kanan .atas{
    text-align:left;
}


.kotak_jalan .tengah{
    position: relative;
    grid-area: tengah;
    /*border:1px solid black;*/
    display:flex;
    justify-content:center;
}

.kotak_jalan .tengah .garis{
    position: absolute;
    left:calc(50% - 2.5px);;
    height:calc(100% + 30px);
    border-left:5px solid #D6D6D6;
}

.kotak_jalan .kanan{
    grid-area: kanan;
    /*border:1px solid black;*/
    padding:5px 10px;
}

.kotak_jalan .atas{
    color:var(--warna-teks2);
}

.tutup_jalan .kotak_kata{
    color:var(--warna-teks2);
    position: relative;
    border:1px solid #D6D6D6;
    border-bottom:3px solid #D6D6D6;
    border-radius:5px;
    padding:5px;
}

.kotak_jalan .tengah .logo{
    width:45px;
    height:45px;
    border-radius:50%;
    border:5px solid #D6D6D6;
    /*background:#D5AF81;*/
    background:var(--warna-utama);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:100;
}

.kotak_jalan .tengah .logo ion-icon{
    color:white;
    font-size:20px;
}

.tutup_jalan .kanan .kotak_kata::before{
    position: absolute;
    content:'';
    left:-8px;
    top:3px;
    
    width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 8px solid var(--warna-utama);
	border-bottom: 10px solid transparent;
}

.tutup_jalan .kiri .kotak_kata::before{
    position: absolute;
    content:'';
    right:-8px;
    top:3px;
    
    width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-left: 8px solid var(--warna-utama);
	border-bottom: 10px solid transparent;
}

.tutup_jalan .ganjil .kiri .atas, .tutup_jalan .ganjil .kanan .bawah{
    display:none;
}

.tutup_jalan .genap .kanan .atas, .tutup_jalan .genap .kiri .bawah{
    display:none;
}

.jalan_tanggal{
    display:none;
    /*text-align:left;*/
}

.hadiah{
    width:100px;
    height:100px;
    background:var(--warna-utama);
    border: none;
    cursor: pointer;
    border-radius:50%;
}

.hadiah ion-icon{
    font-size:40px;
    color:white;
}

.bt_hadiah{
    padding:7px 17px;
    background: var(--warna-ikon);
    color: var(--warna-ikon-teks);
    border:none;
    border-radius:5px;
    margin:auto;
    display: flex;
  align-items: center;
 
}

.bt_hadiah ion-icon{
    /*color: var(--warna-ikon-teks);*/
    font-size:20px;
}

.kotak_kartu{
    display:none;
    
}

.kartu{
    /*border:1px solid black;*/
    border-radius:10px;
    width:100%;
    aspect-ratio: 1.8/1;
    background-image: url("https://rinduku.my.id/aset/img/card.png");
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.33);
    font-family: "Orbitron", sans-serif;
    font-weight:600;
    padding:20px;
    margin-top:20px;
    position:relative;
}

.kartu_buka{
    display:block;
}

.kartu div{
    position:absolute;
    left:16px;
    bottom:30px;
    text-align:left;
}

.kartu .kartu_img{
    height:40px;
    width:auto;
    position:absolute;
    top:10px;
    right:15px;
}

.kartu .span1{
    /*font-size:1.7rem;*/
    font-size:1.9rem;
    color:#fff;
    text-shadow: 1px 1px 0px #000;
    line-height:40px;
    text-decoration:none;
}

.kartu .span2{
    font-size:1.2rem;
    color:#fff;
    text-shadow: 1px 1px 0px #000;
}

.kartu .rek_kecil{
    font-size:1.55rem;
}

.kartu ion-icon{
    cursor:pointer;
    margin-left:10px;
    color:#fff;
    font-size:20px;
}


/*---------------------------------------------------------------------------------------MODAL-----------------------------------------------------------------------------------*/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  /*z-index: 101; */
  /* Sit on top */
}



/* Modal Content */
.modal-content {
  background-color: var(--bg);
  margin: auto;
  padding: 20px;
  /*border: 1px solid #888;*/
  border:4px dashed var(--warna-utama-terang);
  width: 90%;
  border-radius:10px;
  /*z-index: 101;*/
  position:relative;
}

/* The Close Button */
.close, .close2 {
  color: #aaaaaa;
  /*float: right;*/
  font-size: 28px;
  font-weight: bold;
  position:absolute;
  top:10px;
  right:17px;
}

.close:hover, .close:focus,
.close2:hover, .close2:focus
{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal ion-icon{
    font-size:45px;
    color:var(--warna-utama);
    margin-bottom:10px;
}

.tutup_rek{
    width:100%;
    min-height:100px;
    aspect-ratio: 85 / 53;
    border:2px solid var(--warna-utama-terang);
    background:#fff;
    border-radius:20px;
    padding:10px;
    position:relative;
    margin:15px 0;
}

.tutup_rek img{
    height:40px;
    position:absolute;
    top:10px;
    right:15px;
}

.tutup_rek div{
    position:absolute;
    bottom:20px;
    left:15px;
}

.tutup_rek p{
    font-size:30px;
    color:var(--warna-teks2);
    letter-spacing:2px;
    text-align:left;
    line-height:40px;
    font-weight:500;
}

.tutup_rek p:last-child{
    font-size:24px;
    letter-spacing:0;
    font-weight:400;
}

.tutup_rek .rek_kecil{
    letter-spacing:0;
    font-size:28;
}

.tutup_rek ion-icon{
    font-size:20px;
    line-height:40px;
    margin-left:5px;
    cursor:pointer;
}

/*---------------------------------------------------------------------------------------MODAL SELESAI-----------------------------------------------------------------------------------*/

.form_input{
    width:100%;
    padding:0 20px;
}

.form_input input[type=text], .form_input textarea{
    height:35px;
    width:100%;
    max-width:600px;
    /*min-width:500px;*/
    border-radius:5px;
    outline:none;
    border:1px solid #ccc;
    padding-left:10px;
    font-size:16px;
    border-bottom-width:2px;
    background:var(--bg);
    color:var(--warna-teks);
    margin:5px;
}

.form_input textarea{
    height:150px;
}

.form_input .tombol{
    /*color:#2C7CFF;*/
    border:1px solid var(--warna-utama);
    border-bottom-width:2px;
    border-radius:3px;
    padding:5px 15px;
    font-size:15px;
    cursor:pointer;
    transition:all .5s;
    font-family: 'Montserrat', sans-serif;
    color:var(--warna-utama);
    font-weight:400;
    font-size:16px;
    letter-spacing: 4px;
}

.form_input .tombol:hover{
    background:#ddd;
}

.gambar_bunga{
    height:150px;
    /*text-align:center;*/
    margin:auto;
}

.kotak_acara{
    /*border:5px dashed brown;*/
    border: 7px solid transparent;
  border-image: linear-gradient(45deg, var(--warna-utama) , white);
  border-image-slice: 1;
  /*height: 120px;*/
  border-radius: 10px;
  position:relative;
  /*padding:60px 0;*/
  padding:20px 0;
}

.kotak_acara img{
    width:300px;
    position:absolute;
    
}

.kotak_acara .bunga{
    bottom:-100px;
    left:-80px;
}

.kotak_acara .bunga2{
    top:-100px;
    right:-80px;
    transform: rotate(180deg);
}

.jarak{
    margin:10px;
}

.ig{
    color:var(--warna-utama-gelap);
    text-decoration:none;
}

.ig ion-icon{
    /*color:white;*/
    color:var(--warna-ikon-teks);
    /*background:var(--warna-utama);*/
    background:var(--warna-ikon);
    padding:5px;
    border-radius:7px;
    font-size:20px;
    margin-right:4px;
    vertical-align:middle;
}

.wave_atas{
    overflow:hidden;
    position:relative;
    height:50px;
    width:100%;
    background:var(--bg2);
    transform: rotate(180deg);
}

.wave_bawah{
    overflow:hidden;
    position:relative;
    height:50px;
    width:100%;
    background:var(--bg2);
}

.wave_atas svg, .wave_bawah svg {
    position: relative;
    display: block;
    width: 226%;
    height: 50px;
}

.wave_atas .shape-fill, .wave_bawah .shape-fill {
    fill:var(--bg);
}

.kotak_warna1{
    background:var(--bg);
}

.kotak_warna2{
    background:var(--bg2);
}

.peta a{
    text-decoration:none;
    cursor:pointer;
    /*background:var(--warna-utama);*/
    background:var(--warna-ikon);
    /*color:white;*/
    color:var(--warna-ikon-teks);
    /*border:2px solid var(--warna-utama-gelap);*/
    border-radius:5px;
    padding:2px 5px;
}

.logo_lok{
    /*color:white;*/
    color:var(--warna-ikon-teks);
    /*background:var(--warna-utama);*/
    background:var(--warna-ikon);
    padding:3px;
    border-radius:7px;
    font-size:17px;
    vertical-align:middle;
}

.kot_hadiah{
    background:var(--bg2);
    border-radius:8px;
    width:60%;
    margin:auto;
    padding:20px 0;
    /*border:4px dashed var(--warna-utama);*/
    border:4px dashed var(--warna-utama-terang);
}

.kot_hadiah ion-icon{
    /*color:white;*/
    color:var(--warna-ikon2);
    font-size:40px;
}

.kepada{
    font-size:40px;
    z-index:99;
    /*width:100%;*/
    /*background:rgba(255, 255, 255, 0.8);*/
    position:fixed;
    top:0;
    width:100vw;
    height:100vh;
    background:#fff;
    
    
}

.kepada_back{
    width:100vw;
    height:100vh;
    /*position:absolute;*/
    /*top:0;*/
    /*left:0;*/
    /*z-index:1;*/
    
    /*background:url('img/galeri/galeri-8-63cf5f373de58.jpeg');*/
    /*background:url('img/galeri/galeri-8-63cf5f1623389.jpeg');*/
    
    
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*background-position: center bottom;*/
}

.tut_kepada{
    text-align:center;
    z-index:2;
}

.kepada_hitam{
    width:100vw;
    min-height:30vh;
    /*border:1px solid black;*/
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    padding:120px 20px 50px 20px;
    
    background:linear-gradient(to top, rgba(0,0,0, 0.9), rgba(0,0,0, 0));
    
    display:flex;
    justify-content:center;
    align-items:center;
}

.kepada_tombol{
    background:#fff;
    /*padding:20px 30px;*/
    border-radius:17px;
    height:34px;
    padding:0 20px;
    border:none;
    cursor:pointer;
    transition:0.3s;
    font-family: 'Montserrat', sans-serif;
    /*margin-bottom:50px;*/
    margin-top:25px;
}

.kepada_tombol:hover{
    background:var(--bg2);
    color:#fff;
}

.kepada_tek{
    color:#fff;
}

.kepada .teks1{
    font-size:3rem;
}

.kepada .jarak2{
    height:40px;
}

.jarak3{
    height:30px;
}

.tombol_audio{
    position:fixed;
    right:30;
    bottom:30;
    width:26px;
    height:26px;
    border-radius:13px;
    z-index:90;
    border:none;
    background:var(--warna-utama-gelap);
    color:#EEE9E2;
    /*padding:2px;*/
    z-index:90;
}

.tombol_audio ion-icon{
    font-size:18px;
}

.kotak_ikon{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    /*border:1px solid var(--bg);*/
    margin-top:15px;
}

.ikon{
    width:110px;
    height:110px;
    border:1px solid var(--warna-teks-lawan);
    border-radius:20px;
    margin:10px;
}

.ikon1, .ikon2, .ikon3, .ikon4, .ikon5{
    width:110px;
    height:110px;
    background-color: var(--warna-teks-lawan);
    
}

.ikon1{
  mask: url(../img/ikon_obat.svg) no-repeat right bottom / contain;
  -webkit-mask: url(../img/ikon_obat.svg) no-repeat right bottom / contain;
}

.ikon2{
  mask: url(../img/ikon_cuci.svg) no-repeat right bottom / contain;
  -webkit-mask: url(../img/ikon_cuci.svg) no-repeat right bottom / contain;
}

.ikon3{
  mask: url(../img/ikon_masker.svg) no-repeat right bottom / contain;
  -webkit-mask: url(../img/ikon_masker.svg) no-repeat right bottom / contain;
}

.ikon4{
  mask: url(../img/ikon_jarak.svg) no-repeat right bottom / contain;
  -webkit-mask: url(../img/ikon_jarak.svg) no-repeat right bottom / contain;
}

.ikon5{
  mask: url(../img/ikon_suhu.svg) no-repeat right bottom / contain;
  -webkit-mask: url(../img/ikon_suhu.svg) no-repeat right bottom / contain;
}

.peta iframe{
    width:100%;
    height:570px;
}

.peta2 iframe{
    width:100vw;
    height:calc(75vh - 20px);
    border:none;
}

.fade-in {
  opacity: 0;
  transition: opacity 450ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

.from-left {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.from-right {
  -webkit-transform: translateX(10%);
  transform: translateX(10%);
}

.from-left,
.from-right {
  transition: opacity 250ms ease-in, -webkit-transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in;
  transition: opacity 250ms ease-in, transform 400ms ease-in,
    -webkit-transform 400ms ease-in;
  opacity: 0;
}

.from-left.appear,
.from-right.appear {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

.rindu{
    text-align:center;
    padding:4px;
}

.rindu a{
    text-decoration:none;
    cursor:pointer;
}

/*---------------------------------------------------BERANDA-------------------------*/
.beranda{
    position:relative;
    text-align:center;
    padding:30px 20px;
    width:100%;
    height:100vh;
    color:var(--warna-teks);
}

.beranda_bawah{
    position:absolute;
    bottom:10px;
    left:0;
    text-align:center;
    width:100%;
}

.teks14{
    font-family: 'Berkshire Swash', cursive;
    
    font-size:3.4rem;
    /*letter-spacing:4px;*/
}

.teks15{
    font-family: 'Montserrat', sans-serif;
    font-weight:400;
    font-size:30px;
}

.fontlain .teks2, .fontlain .teks6{
    font-family: 'Waterfall', cursive;
    font-size:3.6rem;
}

@media only screen and (max-width: 970px){
    .kotak_isi{
        width:100%;
    }
    
    .kotak_nama_isi{
        width:100%;
        }
    
    .galeri img{
        width:100px;
        margin:5px;
        transition: transform .2s;
    }
    
    .ucapan{
        /*height:50vh;*/
    }
    
    .kotak_jalan{
        grid-template-areas:'tengah kanan';
        grid-template-columns: 50px auto;
    }
    
    
    .kotak_jalan .kiri{
        display:none;
    }
    
    .tutup_jalan .genap .kanan .atas, 
    .tutup_jalan .ganjil .kanan .bawah{
        display:block;
    }
    
    .jalan_tanggal{
        display:block;
    }
    
    .tutup_jalan .genap .kanan .atas, .tutup_jalan .ganjil .kanan .atas{
        display:none;
    }
    
    .kotak3 .bunga1{
        width:150px;
        left:50px;
    }
    
    .kotak3 .bunga2{
        width:150px;
        right:50px;
    }
    
    .form_input input[type=text], .form_input textarea{
        min-width:200px;
    }
    
    .kotak_acara{
        border:none;
    }
    
    .kotak_acara img{
        width:180px;
    }
    
    .kotak_acara .bunga{
        bottom:-70px;
        left:-10px;
    }
    
    .kotak_acara .bunga2{
        top:-70px;
        right:-10px;
    }
    
    .teks2{
        /*-----------------------------------judul setiap seksi--------*/
        /*font-size:2.3rem;*/
        font-size:3.2rem;
    }
    
    .bunga_tepi1{
        height:40vh;
    }
    
    .bunga_tepi2{
        height:35vh;
    }
    
    .simpan{
        display:none;
    }
    
    .galeri img{
        width:45vw;
    }
    
    .galeri img:hover{
        transform: scale(1.5);
    }
    
    .kot_hadiah{
        width:80%;
    }
    
    .bunga_back{
        width: 80vw;
        height: 80vw;
    }
    
    .bunga, .bunga2{
        display:none;
    }
    
    .kepada{
        background:var(--bg);
    }
    
    .kepada_back{
        /*background:url('img/galeri/galeri-8-63cf5f373de58.jpeg');*/
        /*background-repeat: no-repeat;*/
        background-size: cover;
        /*background-position: center center;*/
    }
    
    .ikon{
        width:calc(20vw - 15px);
        height:calc(20vw - 15px);
        margin:5px;
    }
    
    .ikon1, .ikon2, .ikon3, .ikon4, .ikon5{
        width:calc(20vw - 15px);
        height:calc(20vw - 15px);
    }
    
    .bunga_nama_bawah{
        mask: url(../img/bunga_garis_panjang_mobile.svg) no-repeat center bottom / contain;
        -webkit-mask: url(../img/bunga_garis_panjang_mobile.svg) no-repeat center bottom / contain;
        /*z-index:2;*/
    }
    
    .bunga_nama_bawah2{
        mask: url(../img/bunga_garis_panjang_bawah_mobile.svg) no-repeat center top / contain;
        -webkit-mask: url(../img/bunga_garis_panjang_bawah_mobile.svg) no-repeat center top / contain;
        /*z-index:2;*/
    }
    
    .peta iframe{
        width:100%;
        height:60vw;
    }
    
    .teks14{
        font-size:2.5rem;
    }
    
    .modal{
        z-index:90;
    }
        
}