@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap");
@import url('animate.min.css');

@font-face {
    font-family: 'julietta_messieregular';
    src: url('../fonts/julietta-messie-webfont.eot');
    src: url('../fonts/julietta-messie-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/julietta-messie-webfont.woff2') format('woff2'),
         url('../fonts/julietta-messie-webfont.woff') format('woff'),
         url('../fonts/julietta-messie-webfont.ttf') format('truetype'),
         url('../fonts/julietta-messie-webfont.svg#julietta_messieregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

html,
body {
  font-family: 'Poppins', sans-serif!important;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
  position: relative;
  width: 100%;
  display: block;
  padding: 0 auto;
  overflow-x: hidden;
}

[tabindex="-1"]:focus {
  outline: 0 !important; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

abbr[data-original-title], abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none; }

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit; }

dl, ol, ul {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol, ol ul, ul ol, ul ul {
  margin-bottom: 0; }

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

b, strong {
  font-weight: bolder; }

small {
  font-size: 80%; }

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent; }

a:hover {
  color: #0056b3;
  text-decoration:none; }

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus {
  outline: 0; }



::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
  background: rgba(225,225,225,0.3);
  padding: 0 3px;

}


::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
}


.btn-outline{
  background: transparent;
  border-radius: 20px;
  padding: 6px 20px;
  border:solid 1px #90ae8f;
  color: #90ae8f;
}

.flex {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.7;
  width:15px;
  height:15px;
}

.circles {
    display: block;
    width: 12px;
    height:12px;
    background:#90ae8f;
    border-radius: 50%;
    position: absolute;
    opacity: 0.5;
    z-index:1;
  }


/* --------- Cover --------------- */
.cover{
  position: fixed;
  z-index:10000;
  overflow:hidden;
  background:#ffffff url(../img/bg1.jpg) center  no-repeat;
  background-size:cover;
  width: 100vw;
  height: 100vh;

}

.sw-cover-box{
  width: 100%;
  height: 100%;
  text-align: center;
}

.cover .sw-cover-box .images-couple img{
  width:20%;
}

.cover .box-content h4{
  font-size:18px;
  font-weight: 500;
  position: relative;
  margin-bottom: 30px;
}

.cover .box-content h3{
  font-family: 'julietta_messieregular', cursive;
  font-size:90px;
  margin:30px 0px 0px;
}

.cover .box-content p{
  font-size:14px;
  font-weight: 600;
}

.cover .box-content .guests{
  position: relative;
  text-align: center;
  margin:20px 0px 0px;
}

.cover .box-content .guests p{
  font-size: 15px;
  font-weight: 500;
  margin:0px;
}

.cover .box-content .guests h4{
  font-size:18px;
  padding: 10px 0px;
  margin:0px;
}

.cover .btn-open-qrcode{
    padding: 8px 20px;
    color: #a07c5c;
    font-size: 14px;
    font-weight: 500;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: solid 1px #a07c5c;
}

.cover .btn-open-invitation{
    padding:8px 20px;
    background: #688c72;
    color: #ffffff;
    font-size: 14px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius: 10px;
}

.cover .btn-open-qrcode,.cover .btn-open-invitation{
  margin:5px 5px;
}

.cover .box-qrcode{
  position: relative;
  background-color: rgba(165, 192, 167, 0.38);
  padding: 15px;
  -webkit-border-radius:15px;
  -moz-border-radius:15px; 
  border-radius:15px;
  width: 40%;
  margin: auto;
}

.cover .box-qrcode p{
   font-size: 14px;
   line-height: 20px;
   font-weight: 300;
   margin: 0px;
   padding: 0px;
}

.cover .box-qrcode .qrcode{
  position: relative;
  padding: 5px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px; 
  border-radius:10px;
  margin:0px 0px 5px;
  height:auto;
  width:150px;
}

/* ---------- Welcome -------------*/
.sw-welcome{
  background: url(../img/bg1.jpg) center  no-repeat;
  background-size:cover;
  width: 100vw;
  height: 100vh;
  margin:0 auto;
  overflow: hidden;
}

.sw-welcome-element{
  background: url('../img/element-top-right.png') top right no-repeat,
  url('../img/element-bottom-left.png') bottom left no-repeat;
  background-size:570px;
  width: 100%;
  height: 100%;

}

.sw-welcome .box-content{
  margin:auto;
  color: #90ae8f;
}

.sw-welcome .box-content .images-couple{
  margin:40px 0px 30px;
}

.sw-welcome .box-content .images-couple img{
  width:30%;
  animation-name: floating;
  animation-duration:4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.sw-welcome .box-content .sw-el-top {
    height: 80px;
}

.sw-welcome .box-content h4{
  font-size:18px;
  font-weight: 500;
  position: relative;
}

.sw-welcome .box-content h4::before {
    background: url(../img/gunungan.png) top right no-repeat;
    content: '';
    position: absolute;
    top: -70px;
    left: 0px;
    right: 0px;
    text-align: center;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
}

.sw-welcome .box-content h3{
  font-family: 'julietta_messieregular', cursive;
  font-size:80px;
  margin:10px 0px;
}

.sw-welcome .box-content p{
  font-size:14px;
  font-weight: 600;
}


/* ---------- Couple -------------*/
.sw-couple{
  background: url(../img/bg1.jpg) center  no-repeat;
  background-size:cover;
  width: 100vw;
  height:auto;
  margin:0 auto;
  color:#90ae8f;
}

.sw-couple-element{
  position: relative;
  background: url('../img/element-top-right.png') top right no-repeat,
  url('../img/element-bottom-left.png') bottom left no-repeat;
  background-size:570px;
  padding:80px 0px;
}


.sw-couple .title{
  position: relative;
  font-family: 'julietta_messieregular', cursive;
  font-size:45px;
  text-align:center;
  margin:0px 0px 30px;
  color:#3d4544;
}


.sw-couple .title:before {
    background: url(../img/leaves-left.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 0px;
    right: 350px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
}

.sw-couple .title:after {
    background: url(../img/leaves-right.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 350px;
    right:0px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
}

.sw-couple .sub-description{
  position: relative;
  color: #3d4544;
  font-size: 15px;
  margin:40px 0px 20px;
}

.sw-couple .sub-description p{
   margin-top:20px;
}

.sw-couple .col-couple{
  padding:0px 70px;
}

.sw-couple .box-content{
  background:rgb(133 173 145 / 33%);
  margin:auto;
  margin:50px 0px 0px;
  width: 100%;
  -webkit-border-radius: 15px;/*Safari, Chrome*/
  -moz-border-radius:15px;/*Firefox*/
  border-radius:15px;
  padding:60px 50px;
  color: #3d4544;
}

.sw-couple .box-content .couple-img{
  width: 280px;
  height: 280px;
  border-radius: 50%;
  margin-bottom: 20px;
  object-fit: cover;
}

.sw-couple .box-content h3{
  font-family: 'julietta_messieregular', cursive;
  font-size: 40px;
  margin:10px 0px;
  letter-spacing: 1px;
}

.sw-couple .box-content p.description{
  font-size:14px;
  font-weight:400;
  line-height: 20px;
  margin:auto;
}

.sw-couple .box-content p.description-couple{
  font-size:14px;
  font-weight: 600;
  line-height:25px;
  margin:auto;
}



/* ---------- Event -------------*/
.sw-event{
  position: relative;
  background:#EFF5F3;
  width: 100vw;
  height:100%;
  margin:0 auto;
  color:#3d4544;
  padding: 80px 0px;
}


.sw-event .col-event{
  padding:0px 70px;
}

.sw-event .top-flower{
  background:url('../img/watercolor-flowers.png');
  background-size:100%;
  width:200px;
  height:120px;
  margin: auto;
  margin-bottom:20px;
}

.sw-event .box-content{
  background:url('../img/3.png') top right no-repeat,
  url('../img/1.png') bottom left no-repeat, #ffffff;
  margin:auto;
  margin:20px 0px 20px;
  width: 100%;
  padding:60px 50px;
  -webkit-border-radius: 40% 40% 5px 5px;/*Safari, Chrome*/
  -moz-border-radius: 40% 40% 5px 5px;/*Firefox*/
  border-radius: 40% 40% 5px 5px;
}

.sw-event .box-content h3{
  font-family: 'julietta_messieregular', cursive;
  font-size:45px;
  margin:10px 0px 30px;
  letter-spacing: 1px;
  color:#3d4544;
}

.sw-event .box-content ul{
  padding: 0px;
  margin:0px 0px 30px 0px;
}

.sw-event .box-content ul li{
  list-style:none;
  margin:15px 0px;
  font-size: 16px;
  line-height:22px;
}

.sw-event .box-content ul li i{
  margin-right:10px;
}
.sw-event .box-content p.description-couple{
  font-size:14px;
  font-weight: 600;
  line-height:25px;
  margin:auto;
}

.countdown{
  text-transform: uppercase;
  margin:20px 0px 30px;
}
.countdown > div{
  display: inline-block;
}
.countdown > div > span{
  display: block; text-align: center;
}
.countdown-container{
  margin:0 15px;
}
.countdown-container .countdown-heading{
  font-size: 11px;
  margin:5px;
  color: #666
}
.countdown-container .countdown-value{
  font-size:30px;
  font-weight: 500;
  border: solid 1px #90ae8f;
  padding:20px 30px;
  width:150px;
  color: #90ae8f;
  -webkit-border-radius: 8px 8px 8px 8px;/*Safari, Chrome*/
  -moz-border-radius: 8px 8px 8px 8px;/*Firefox*/
  border-radius: 8px 8px 8px 8px;
}


.sw-event .box-google-map{
  -webkit-border-radius:10px;/*Safari, Chrome*/
  -moz-border-radius:10px;/*Firefox*/
  border-radius:10px;
  overflow: hidden;
  border:solid 3px #d3c2ae;
  width:500px;
  text-align: center;
}

.sw-event .box-google-map iframe{
  width:100%;
}


/* ---------- Gallery -------------*/
.sw-gallery{
  position: relative;
  background: url(../img/bg1.jpg) center  no-repeat;
  background-size:cover;
  width: 100vw;
  height:100%;
  margin:0 auto;
  color:#3d4544;
  padding:100px 0px 80px;
}

.sw-gallery::before{
    content: "";
    display: block;
    width: 100%;
    background:url(../img/mask_bottom_hijau.png) top center;
    background-size: cover;
    height:100px;
    position: absolute;
    top: -30px;
    z-index: 2;
}

.sw-gallery .overlay {
    background: rgb(255,255,255);
    background: linear-gradient(186deg, rgba(255,255,255,1) 21%, rgba(225,225,225,0) 40%);
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

.sw-gallery .col-event{
  padding:0px 70px;
}


.sw-gallery .title{
  position: relative;
  font-family: 'julietta_messieregular', cursive;
  font-size:45px;
  text-align:center;
  margin:0px 0px 30px;
  color:#3d4544;
}


.sw-gallery .title:before {
    background: url(../img/leaves-left.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 0px;
    right: 350px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
    animation-name: floating-rotate_left;
    animation-duration:4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.sw-gallery .title:after {
    background: url(../img/leaves-right.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 350px;
    right:0px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
    animation-name: floating-rotate_right;
    animation-duration:4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.sw-gallery .box-content{
  position: relative;
  padding:60px 50px;
}

.sw-gallery .box-content .col-xs-6,
.sw-gallery .box-content .col-sm-6,
.sw-gallery .box-content .col-md-4,
.sw-gallery .box-content .col-lg-4{
    padding-right:10px;
    padding-left:10px;
}

.sw-gallery .gallery-items{
    position: relative;
    height: auto;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    margin:10px 0px;
    overflow: hidden;
}



.sw-gallery .gallery-items img{
    height:250px;
    width: 100%;
    transition-duration:0.4s;
    overflow: hidden;
    object-fit: cover;

}



.sw-gallery .gallery-items .gallery-items-overlay {
    position: absolute;
    bottom:-100px;
    right:-100px;
    opacity:2;
    transition-duration: 0.4s;
    color: #ffffff;
    background:#acc0a5;
    width:70px;
    height:70px;
    line-height:60px;
    text-align: left;
    -webkit-border-radius:30%;
    -moz-border-radius:30%; 
    border-radius:30%; 
}



.sw-gallery .gallery-items .gallery-items-overlay i{
  font-size:20px;
  margin-left:15px;

}



.sw-gallery .gallery-items:hover .gallery-items-overlay{
    transition-duration: 0.4s;
    opacity:1;
    bottom:-20px;
    right:-20px;
}



.sw-gallery .gallery-items:hover img{
     transform: scale(1.1);
    -ms-filter: grayscale(0.5) drop-shadow(5px -2px 0 #000000);
    -webkit-filter: grayscale(0.5) drop-shadow(5px -2px 0 #000000);
    -moz-filter: grayscale(0.5) drop-shadow(5px -2px 0 #000000);
    -o-filter: grayscale(0.5) drop-shadow(5px -2px 0 #000000);
    filter: grayscale(0.5) drop-shadow(5px -2px 0 #000000);
}


/* ---------- Ucapan Dan Doa --------------*/
.sw-message{
  position: relative;
  background:url('../img/3.png') top right no-repeat,
  url('../img/1.png') bottom left no-repeat, #ffffff;
  background-size:450px;
  width:100vw;
  height:auto;
  margin:0 auto;
  padding:80px 0px;
  color:#90ae8f;
}

.sw-message::before {
    content: "";
    display: block;
    width: 100%;
    background: url(../img/mask.png) top center;
    background-size: cover;
    height: 100px;
    position: absolute;
    top: -95px;
    z-index: 2;
}

.sw-message::after {
    content: "";
    display: block;
    width: 100%;
    background: url(../img/mask_bottom.png) top center;
    background-size: cover;
    height: 100px;
    position: absolute;
    bottom: -90px;
    z-index: 2;
}

.sw-message .title{
  position: relative;
  font-family: 'julietta_messieregular', cursive;
  font-size:45px;
  text-align:center;
  margin:0px 0px 30px;
  color:#3d4544;
}


.sw-message .title:before {
    background: url(../img/leaves-left.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 0px;
    right: 350px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
    animation-name: floating-rotate_left;
    animation-duration:4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.sw-message .title:after {
    background: url(../img/leaves-right.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 350px;
    right:0px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
    animation-name: floating-rotate_right;
    animation-duration:4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.sw-message .sub-description{
  font-size: 20px;
}

.sw-message .box-content{
  margin:40px 0px 2px;
  color: #111111;
  background:#eff5f3;
  -webkit-border-radius:6px;
  -moz-border-radius: 6px; 
  border-radius: 6px; 
  overflow: hidden;
  border: solid 1px #cccccc;
}

.sw-message .box-content .header-title{
  padding:10px 20px;
  border-bottom: solid 1px #cccccc;
  text-align: left;
  font-size: 15px;
  font-weight:500;
}

.sw-message .box-content .form-box{
  padding:20px;
  min-height: 100px;
}

.sw-message .box-content .form-box .btn-send-comment{
  padding: 5px 20px;
  background:#688c72;
  color: #ffffff;
  font-size: 14px;
}

.sw-message .comment-box{
  max-height: 450px;
  min-height: 60px;
  overflow: auto;
  text-align: left;
  border: solid 1px #cccccc;
  -webkit-border-radius:6px;
  -moz-border-radius: 6px; 
  border-radius: 6px; 
  background-color: rgba(239, 245, 243, 0.7);
}

.sw-message .comment-box .panel-comment{
  border-bottom: solid 1px #eeeeee;
  padding:10px 20px 5px 20px;
}

.sw-message .comment-box .panel-comment .panel-heading{
  font-size: 15px;
  font-weight: 600;
}
.sw-message .comment-box .panel-comment .panel-heading p{
  font-size:10px;
  font-weight: 200;
  padding: 0px;
  margin:0px;
}

.sw-message .comment-box .panel-comment .panel-body{
  font-size: 13px;
  color: #333333;
  padding:0px 0px 5px;
}

.sw-message .comment-box .panel-comment .btn-reply{
  padding:2px 3px;
  background:#688c72;
  color: #ffffff;
  font-size: 11px;
  -webkit-border-radius:3px;
  -moz-border-radius: 3px; 
  border-radius: 3px;
}
.sw-message .comment-box .panel-comment .btn-reply i{
  margin-right: 4px;
}


/* ---------- Kirim Hadiah ---------- */
.sw-gift{
  position: relative;
  display:block;
  width: 100%;
}

.sw-gift ul{
  padding:0px;
  margin:0px;
}

.sw-gift ul li{
  list-style:none;
  padding:10px 0px;
  border-bottom: solid 1px #eeeeee;
  display: flex;
  align-items: center;
  width: 100%;
}

.sw-gift ul li:last-child{
  border-bottom:0px;
}
.sw-gift ul li .gift-description{
  font-size: 15px;
}

.sw-gift ul li .gift-description a{
  cursor: pointer;
}
.sw-gift ul li .gift-description p{
  padding: 0px;
  margin:0px;
  line-height:25px;
}

.sw-gift ul li .gift-images{
  width:70px;
  position:absolute;
  right:10px;
}

.sw-gift ul li .gift-images img{
  width:70px;
  height:auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.sw-gift ul li .merchant-images{
  display: inline-block;
  margin:auto;
  border: solid 1px #eeeeee;
  padding: 10px;
  background: #eeeeee;
  -webkit-border-radius:10px;
  -moz-border-radius:10px; 
  border-radius:10px;
}

.sw-gift ul li .merchant-images img{
  width: 250px;
  height: auto;
  -webkit-border-radius:10px;
  -moz-border-radius:10px; 
  border-radius:10px;
  overflow: hidden;
  border: solid 1px #eeeeee;
  padding: 5px;
}

.sw-gift ul li .merchant-images p{
  font-weight: 600;
  margin:5px 0px 0px;
}
/* ---------- Information Covid 19 ---- */

.sw-information{
  position: relative;
  background:#EFF5F3;
  width: 100vw;
  height:100%;
  margin:0 auto;
  color:#3d4544;
  padding: 120px 0px 90px;
}


.sw-information .col-information{
  padding:0px 70px;
}


.sw-information .title{
  position: relative;
  font-family: 'julietta_messieregular', cursive;
  font-size:45px;
  text-align:center;
  margin:0px 0px 60px;
  color:#3d4544;
}


.sw-information .title:before {
    background: url(../img/leaves-left.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 0px;
    right: 300px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
}

.sw-information .title:after {
    background: url(../img/leaves-right.png) left no-repeat;
    content: '';
    position: absolute;
    top: -25px;
    left: 300px;
    right:0px;
    height: 70px;
    width: 60px;
    background-size: 100%;
    margin: auto;
}

  .sw-information .sub-description{
    font-size:16px;
    line-height:27px;
  }

  .sw-information .box-content{
    position: relative;
    margin: 20px 0px;
    text-align: center;
  }

  .sw-information .box-content .images{
    position: relative;
    margin-bottom: 20px;
  }

  .sw-information .box-content .description{
    font-size: 15px;
    line-height: 23px;
  }


/* ---------- Qr Code Tamu -------------*/
.modal-fullscreen-xl {
  padding: 0 !important;
}

.modal-fullscreen-xl .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen-xl .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen-xl .modal-body {
  overflow-y: auto;
}

.modal-fullscreen {
  padding: 0 !important;
}

.modal-fullscreen .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}

.modal {
  z-index: +99999;
}

.modal-fullscreen-xl  #htmltoimage{
  padding: 10px 10px;
  width: 300px;
  margin: auto;
  background: #688c72;
  margin-bottom: 20px;
  color: #ffffff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px; 
  border-radius:10px;
}
.modal-fullscreen-xl  #htmltoimage h4{
  font-family: 'julietta_messieregular', cursive;
  font-size: 30px;
  font-weight: 500;
}

.modal-fullscreen-xl .qrcode{
  position: relative;
  padding: 5px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px; 
  border-radius:10px;
  margin:0px 0px 10px;
  height:auto;
  width: 100%;
}


/*----------- Menu Footer -----------*/
.appBottomMenu {
  height:48px;
  width: 98%;
  position: fixed;
  z-index: 999;
  bottom:5px;
  left: 0;
  right: 0;
  margin:auto;
  background-color: rgba(133, 173, 145, 0.95);
  color: #44644d;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
  -webkit-border-radius:22px;
  -moz-border-radius:22px; 
  border-radius:22px; 
}

.appBottomMenu.no-border {
    border: 0 !important;
    box-shadow: 0 !important;
}
  .appBottomMenu .item {
    font-size: 8px;
    letter-spacing: 0;
    text-align: center;
    width: 100%;
    height:100%;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.appBottomMenu .item:before {
  content:'';
  display: block;
  height:3px;
  border-radius: 0 0 10px 10px;
  background: transparent;
  position: absolute;
  left: auto;
  right: auto;
  width: 30px;
  top: 0;
}

.appBottomMenu .item .col {
    width: 100%;
    padding: 0 4px;
    text-align: center;
}

.appBottomMenu .item .icon,
.appBottomMenu .item ion-icon {
    display: inline-flex;
    margin: 1px auto 3px auto;
    font-size:15px;
    line-height: 1em;
    color:#44644d;
    transition: 0.1s all;
    display: block;
    margin-top: 1px;
    margin-bottom: 3px;
}


.appBottomMenu .item .action-button {
    display: inline-flex;
    width: 50px;
    height: 50px;
    margin-left: -5px;
    margin-right: -5px;
    align-items: center;
    justify-content: center;
    border-radius: 200px;
    background: #007bff;
}

.appBottomMenu .item .action-button.large {
    width: 60px;
    height: 60px;
    margin-top: -20px;
    margin-left: -10px;
    margin-right: -10px;
}

.appBottomMenu .item .action-button .icon,
.appBottomMenu .item .action-button ion-icon {
    color: #FFF !important;
    margin: 0 !important;
    line-height: 0 !important;
}

.appBottomMenu .item strong {
    margin-top: 4px;
    display: block;
    color: #27173E;
    font-weight: 400;
    transition: 0.1s all;
}

/*
.appBottomMenu .item.active {
    background: #333333;
}*/

.appBottomMenu .item.active:before {
    background:#765329;
}

.appBottomMenu .item.active .icon,
.appBottomMenu .item.active strong {
  color:#765329 !important
}

.appBottomMenu .item:hover .icon,
.appBottomMenu .item:hover strong {
    color: #765329;
}

.appBottomMenu.text-light {
    color: #FFF;
}

.appBottomMenu.text-light .item {
    color: #FFF;
    opacity: .7;
}

.appBottomMenu.text-light .item .icon,
.appBottomMenu.text-light .item ion-icon,
.appBottomMenu.text-light .item strong {
    color: #FFF;
}

.appBottomMenu.text-light .item.active {
    opacity: 1;
}

.appBottomMenu.text-light .item.active{
    color: #FFF !important;
}

.appBottomMenu.bg-primary,
.appBottomMenu.bg-secondary,
.appBottomMenu.bg-success,
.appBottomMenu.bg-warning,
.appBottomMenu.bg-danger,
.appBottomMenu.bg-info,
.appBottomMenu.bg-light,
.appBottomMenu.bg-dark {
    border: 0;
}

.appBottomMenu.bg-primary .item:before,
.appBottomMenu.bg-secondary .item:before,
.appBottomMenu.bg-success .item:before,
.appBottomMenu.bg-warning .item:before,
.appBottomMenu.bg-danger .item:before,
.appBottomMenu.bg-info .item:before,
.appBottomMenu.bg-light .item:before,
.appBottomMenu.bg-dark .item:before {
    display: none;
}

/*---------------- Menu Footer ----*/

.button-music{
  position: fixed;
  cursor: pointer;
  bottom: 70px;
  right: 15px;
  color:#ffffff;
  background-color:#44644d;
  border:0px;
  z-index: 4;
  width: 45px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  font-size: 15px;
  -webkit-transition: .9s;
  transition: .9s;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 15px rgb(0 0 0 / 32%);
  box-shadow: 0px 0px 15px rgb(0 0 0 / 32%);
}

.button-music .pause{
  display: none;
}

.button-qrcode{
  position: fixed;
  cursor: pointer;
  bottom: 125px;
  right: 15px;
  color:#8a6d6d;
  background-color:#c5af95;
  border:0px;
  z-index: 4;
  width: 45px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  font-size: 15px;
  -webkit-transition: .9s;
  transition: .9s;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 15px rgb(0 0 0 / 32%);
  box-shadow: 0px 0px 15px rgb(0 0 0 / 32%);
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
  animation: heartbeat 1.5s ease-in-out infinite both;
}


a.share-button{
  position: fixed;
  cursor: pointer;
  top:18px;
  left: 15px;
  color:#8f6a17;
  font-size: 25px;
  border:0px;
  z-index: 4;
  text-align: center;
}

a.share-button:hover{
  color:#8f6a17;
}
/* ---------- Cresits -------------------*/
footer{
  padding: 10px 0px 60px;
  background: #eff5f3;
  border-top: solid 1px #ececec;
}

footer p{
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 500;
  color: #333333;
}

footer .btn-footer{
  padding: 7px 20px;
  color: #a07c5c;
  font-size: 14px;
  font-weight: 500;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: solid 1px #a07c5c;
}






/*------------- Responsive --------------*/

/* ------------ Mobile Max 1024 -----------*/
@media screen and (max-width:1025px){
  /* -------- Cover ----*/
  .cover .box-qrcode{
    width: 80%;
    margin: auto;
  }


  .sw-welcome-element{
    background-size:30%;
  }

  .sw-welcome .box-content .images-couple img{
    width: 30%;
    height: auto;
  }

  /*-------- Couple ----------*/
  .sw-couple .col-couple {
    padding: 0px 40px;
  }

  /* --------- Event --------- */
  .sw-event .col-event {
    padding: 0px 40px;
  }

  /* --------- Gallery ------*/
  .sw-gallery .box-content {
      position: relative;
      padding: 60px 40px;
  }

}

/* ------------ Mobile Max 490 -----------*/
@media screen and (max-width:490px){

  /* -------- Cover --------------*/
  .cover .sw-cover-box .images-couple img{
    width:40%;
  }

  .cover .box-content h4{
    font-size:18px;
    margin-bottom: 30px;
  }

  .cover .box-content h3{
    font-size:50px;
    margin:30px 0px 10px;
  }

  .cover .box-qrcode{
    width: 100%;
    margin: auto;
  }


  /* ------- Welcome ----*/
  .sw-welcome-element{
    background-size:70%;
  }

  .sw-welcome .box-content .images-couple{
      margin:25px 0px 20px;
  }
  .sw-welcome .box-content .images-couple img{
    width: 70%;
    height: auto;
  }

  .sw-welcome .box-content h3 {
      font-size:40px;
      font-weight: 500;
  }

  /*-------- Couple ----------*/
  .sw-couple-element{
    background-size:60%;
  }

  .sw-couple .title {
    font-size:38px;
    margin: 0px 0px 30px;
  }

  .sw-couple .title:before {
    right: 300px;
    height: 60px;
    width: 50px;
  }

  .sw-couple .title:after {
    left: 300px;
    height:60px;
    width: 50px;
  }

  .sw-couple .col-couple {
    padding: 0px 40px;
  }

  .sw-couple .box-content {
    margin: auto;
    margin: 50px 0px 0px;
    padding:40px 30px;
  }

  .sw-couple .box-content .couple-img{
    width: 80%;
    height: auto;
  }

  .sw-couple .box-content h3 {
    font-size: 40px;
  }

  /* ------------- Event ---------*/
  .sw-event .top-flower {
    width: 180px;
    height: 100px;
  }

  .countdown-container{
    margin:0 10px;
  }

  .countdown-container .countdown-heading{
    font-size: 11px;
    margin:5px;
    color: #666
  }

  .countdown-container .countdown-value{
    font-size:20px;
    font-weight: 500;
    border: solid 1px #90ae8f;
    padding:10px 10px;
    width:50px;
  }

  .sw-event .col-event {
    padding: 0px 30px;
  }

  .sw-event .box-content {
    width: 100%;
    padding: 50px 40px;
  }

  .sw-event .box-google-map {
    width: 100%;
  }

  .sw-event .box-google-map iframe {
    width: 100%;
    max-height:400px;
  }

  /* ---------- Gallery -------------*/
  .sw-gallery {
    padding:80px 0px 60px;
  }

  .sw-gallery .title {
    font-size:40px;
    margin: 0px 0px 30px;
  }
  .sw-gallery .title:before {
    right:200px;
    height: 60px;
    width: 50px;
  }

  .sw-gallery .title:after {
    left: 200px;
    height:60px;
    width: 50px;
  }


  .sw-gallery .box-content {
      position: relative;
      padding: 60px 10px;
  }
  .sw-gallery .box-content .col-xs-6,
  .sw-gallery .box-content .col-sm-6,
  .sw-gallery .box-content .col-md-4,
  .sw-gallery .box-content .col-lg-4 {
    padding-right:5px;
    padding-left:5px;
  }

  .sw-gallery .gallery-items {
    margin: 5px 0px;
    overflow: hidden;
  }

  .sw-gallery .gallery-items img{
    height:200px;
    object-fit: cover;
  }

  /* -------------- Ucapan ---------*/
  .sw-message {
    padding: 60px 0px;
    background-size: 700px;
  }

  .sw-message .title {
    font-size:38px;
    margin: 0px 0px 25px;
  }
  .sw-message .title:before {
    right: 300px;
    height: 60px;
    width: 50px;
  }

  .sw-message .title:after {
    left: 300px;
    height:60px;
    width: 50px;
  }
  .sw-message .sub-description {
    font-size: 16px;
  }

  /* --- Information ----*/
  .sw-information .title {
    font-size:38px;
    margin: 0px 0px 25px;
  }
  .sw-information .title:before {
    right: 300px;
    height: 60px;
    width: 50px;
  }

  .sw-information .title:after {
    left: 300px;
    height:60px;
    width: 50px;
  }

  .sw-information .sub-description {
    margin-top:20px;
    font-size: 15px;
    line-height: 22px;
  }
  .sw-information .col-information {
    padding: 0px 20px;
  }

  .sw-information .box-content .description {
    font-size: 14px;
    line-height:20px;
  }

  /* ------- Payment ---------- */
  .sw-gift ul li .merchant-images img{
    width:70%;
    height: auto;
  }

  /* ------- Modal Qr Code -------- */
  .modal-fullscreen-xl #htmltoimage {
    width: 90%;
  }

  .button-music,
  .button-qrcode{
    right:10px;
  }

}

/* ------------ Mobile Max 380 -----------*/
@media screen and (max-width:380px){
  /* -------- Cover --------------*/
  .cover .sw-cover-box .images-couple img{
    width:40%;
  }

  .cover .box-content h4{
    font-size:18px;
    margin-bottom: 30px;
  }

  .cover .box-content h3{
    font-size:45px;
    margin: 30px 0px 10px;
    padding: 0px;
    line-height: 25px;
  }

  .cover .box-qrcode{
    width: 100%;
    margin: auto;
  }

  /* ------- Welcome ----*/
  .sw-welcome-element{
    background-size:60%;
  }

  .sw-welcome .box-content .images-couple{
      margin:25px 0px 20px;
  }

  .sw-welcome .box-content .images-couple img{
    width: 70%;
    height:auto;
  }

  .sw-welcome .box-content h3 {
      font-size:38px;
      font-weight: 500;
  }

  /*-------- Couple ----------*/
  .sw-couple {
    padding: 0px 0px;
  }

  .sw-couple-element{
    background-size:60%;
  }

  .sw-couple .title {
    font-size:30px;
    margin: 0px 0px 30px;
  }
  .sw-couple .title:before {
    right: 250px;
    height: 60px;
    width: 50px;
  }

  .sw-couple .title:after {
    left: 240px;
    height:60px;
    width: 50px;
  }

  .sw-couple .col-couple {
    padding: 0px 15px;
  }

  .sw-couple .box-content .couple-img{
    width:70%;
    height: auto;
  }

  .sw-couple .box-content {
    margin: auto;
    margin:30px 0px 0px;
    padding:30px 15px;
  }

  .sw-couple .box-content h3 {
    font-size: 25px;
  }

  /* ------------- Event ---------*/
  .sw-event {
    padding: 60px 0px;
  }

  .sw-event .top-flower {
    width: 180px;
    height: 100px;
  }

  .countdown-container{
    margin:0 8px;
  }

  .countdown-container .countdown-heading{
    font-size: 11px;
    margin:5px;
    color: #666
  }

  .countdown-container .countdown-value{
    font-size:18px;
    font-weight: 500;
    border: solid 1px #90ae8f;
    padding:5px 5px;
    width:50px;
  }

  .sw-event .col-event {
    padding: 0px 20px;
  }

  .sw-event .box-content {
    width: 100%;
    padding:30px 30px;
  }

  .sw-event .box-content h3{
    font-size: 35px;
    margin: 10px 0px 25px;
  }

  .sw-event .box-google-map {
    width: 100%;
  }

  .sw-event .box-google-map iframe {
    border:0;
    width: 100%;
    max-height: 300px;  
  }

  /* ---------- Gallery -------------*/
  .sw-gallery .title {
    font-size:40px;
    margin: 0px 0px 30px;
  }
  .sw-gallery .title:before {
    right:200px;
    height: 60px;
    width: 50px;
  }

  .sw-gallery .title:after {
    left: 200px;
    height:60px;
    width: 50px;
  }


  .sw-gallery .box-content {
      position: relative;
      padding: 60px 10px;
  }
  .sw-gallery .box-content .col-xs-6,
  .sw-gallery .box-content .col-sm-6,
  .sw-gallery .box-content .col-md-4,
  .sw-gallery .box-content .col-lg-4 {
    padding-right:5px;
    padding-left:5px;
  }

  .sw-gallery .gallery-items {
    margin: 5px 0px;
    overflow: hidden;
  }

  .sw-gallery .gallery-items img{
    height:180px;
    object-fit: cover;
  }

  /* -------------- Ucapan ---------*/
  .sw-message .title {
    font-size:30px;
    margin: 0px 0px 20px;
  }
  .sw-message .title:before {
    right:250px;
    height: 60px;
    width: 50px;
  }

  .sw-message .title:after {
    left: 250px;
    height:60px;
    width: 50px;
  }
  .sw-message .sub-description {
    font-size:16px;
  }

  /* ------------ Information ---------*/
  .sw-information .title {
    font-size:38px;
    margin: 0px 0px 25px;
  }
  .sw-information .title:before {
    right: 200px;
    height: 60px;
    width: 50px;
  }

  .sw-information .title:after {
    left: 200px;
    height:60px;
    width: 50px;
  }

  .sw-information .sub-description {
    margin-top:20px;
    font-size: 15px;
    line-height: 22px;
  }
  .sw-information .col-information {
    padding: 0px 20px;
  }

  .sw-information .box-content .description {
    font-size: 14px;
    line-height:20px;
  }


  /* ------- Payment ---------- */
  .sw-gift ul li .merchant-images img{
    width:60%;
    height: auto;
  }

  /* ------- MOdal Qr Code -------- */
  .modal-fullscreen-xl #htmltoimage {
    width: 90%;
  }

  .button-music,
  .button-qrcode{
    right:8px;
  }
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

@keyframes floating {
    from { transform: scale(1); }
    65%  { transform: scale(1.1);}
    to   { transform: scale(1); }    
}

@keyframes floating-rotate_right {
    from { transform: rotate(0deg); }
    65%  { transform: rotate(10deg);}
    to   { transform: rotate(0deg); }    
}


@keyframes floating-rotate_left {
    from { transform: rotate(0deg); }
    65%  { transform: rotate(-10deg);}
    to   { transform: rotate(0deg); }    
}