@import url('https://fonts.googleapis.com/css2?family=Meddon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap');
@font-face {
    font-family: 'cinthyaregular';
    src: url('../font/cinthya/cinthya-webfont.woff2') format('woff2'),
    url('../font/cinthya/cinthya-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    font-family: 'Poppins', sans-serif;
    /* padding-bottom:82px; */
}
.font-cinthya{
    font-family: "Meddon", cursive;
    font-weight: 400;
    font-style: normal;
}
.font-delius {
  font-family: "Delius Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}
.color-white{
    color:white;
}
.font-literata{
    font-family: 'Literata', serif;
}
#welcomePage{
    min-height: 100vh;
    width:100%;
    z-index:102;
    background:url('../img/splash.jpg');
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:cover !important;
    position:fixed;
    display:flex;
    align-items:center;
    transition : all 1s ease;
    -webkit-transition : all 1s ease;
    -o-transition : all 1s ease;
    -moz-transition : all 1s ease;
}
#welcomePage.opened{
    transform : translateY(-100%);
}
#welcomePage:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: #ff3cac;
    background-image: linear-gradient( #000,  #000 );
    opacity:0.5;    
    z-index: 1;
}
#welcomePage .container{
  z-index:2;
}
#welcomePage .container-content{
  height : 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#welcomePage .container-content p{
  font-size : 18px;
}
#welcomePage .container-content h5{
  font-size : 25px;
}
#welcomePage h1, .name{
    font-family: "Meddon", cursive;
    font-weight: 400;
    font-style: normal;
    color:white;
    font-size:33px;
}
.open{
    color:white;
    background:rgb(255,255,255,0.7);
    color:black;
    border-radius:30px;
    transition:all.5s ease;
    -webkit-transition:all.5s ease;
    -o-transition:all.5s ease;
    -moz-transition:all.5s ease;
}
.open:hover{
    background:rgb(245,226,228,1);
}
.section{
    min-height:100vh;
    position:relative;
}
#snow{
    background: none;
    background-image: url('https://eko-chiya.hadirya.com/assets/themes/twelve/images/content/sn1.png'), url('https://eko-chiya.hadirya.com/assets/themes/twelve/images/content/sn2.png'), url('https://eko-chiya.hadirya.com/assets/themes/twelve/images/content/sn3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}   
.overlay-slide{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:100;
}
#navMenu{
    width:100%;
    position:fixed;
    z-index:101;
    bottom:0;
    left:0;
    background:white;
    box-shadow : 0 0 7px rgb(0 0 0 / 10%);
    -webkit-box-shadow : 0 0 7px rgb(0 0 0 / 10%);
}
.color-primary{
    color:#af9678;
}
.bg-primary{
    background:#af9678;
}
.btn-primary{
    background:#af9678;
    color:#212529;
    border-color:#212529;
}
.btn-primary:focus,.btn-primary:hover{
    background:#9e825f;
    color:#212529;
    border-color:#212529;
}
#navMenu a{
    padding : 20px 0px;
    text-align:center;
    color:black;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}
.couple{
}
.couple .left{
    min-height:600px;
    background:#af9678;
    display:flex;
    flex-direction:column;
    text-align:center;
    align-items:center;
    justify-content:center;
    color:white;
    background-image : url('https://taridanrio.hadirya.com/images/flowers_slider/fl3_c4.png');
    background-position:bottom left !important;
    background-size:55% !important;
    background-repeat:no-repeat !important;
    position:relative;
}

.couple .left h1{
    font-size:28px;
}
.couple .right{
    min-height:600px;
    background:url('../img/slide-2.JPG');
    background-size:cover  !important;
    background-repeat:no-repeat  !important;
    background-position:center  !important;
}
#event{
    min-height:100vh;
    background-image : url('../img/slide-1.jpg');
    background-position:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    position:relative;
    z-index:2;
}
#event:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:rgb(11,15,68,0.8);
    left:0;
    top:0;
    z-index:-1;
}
.fs-50{
    font-size:50px;
}
.fs-65{
    font-size:65px;
}
.fs-60{
    font-size:60px;
}
.box-time{
    background:#af9678;
    width:100px;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:30px;
    font-weight:bold;
    font-size:25px;
}
.box-time span{
    vertical-align:middle;
}
#gallery{
    background-image: linear-gradient( 0deg, #af9678 0%, #e8e1d9 100% );
}
.gallery-img img{
    width:100%;
    border-radius:10px;
    height:400px;
    object-fit:cover;
}
.img-popup{
    position:fixed;
    width:100%;
    height:100%;
    background:rgb(11,15,68,0.8);
    left:0;
    top:0;
    z-index:102;
    display:flex;
    align-items:center;
    justify-content:center;
    transform : scale(0);
    -webkit-transform : scale(0);
    -o-transform : scale(0);
    -moz-transform : scale(0);
    transition : all.5s ease;
    -webkit-transition : all.5s ease;
    -o-transition : all.5s ease;
    -moz-transition : all.5s ease;
}
.gallery-img img{
    cursor:pointer;
}
.img-popup img{
    max-height:90vh;
    width:auto;
    max-width:100%;
}
.img-popup.opened{
    transform : scale(1);
    -webkit-transform : scale(1);
    -o-transform : scale(1);
    -moz-transform : scale(1);
}
#wish{
    background : #af9678;
    background-image : url('https://eko-chiya.hadirya.com/assets/themes/twelve/images/content/flower-cover-left.png');
    background-repeat:no-repeat !important;
    background-size:30% !important;
    background-position:bottom left !important;
}
.bg-wish{
    background : rgb(255,255,255,0.7) !important;
    border-radius:15px;
}
.list-wish{
    height : 70vh;
    overflow:auto;
}
@media (max-width: 576px) {
    #wish{
        background-size:70% !important;
    }
    .gallery-img img{
        height:300px;
    }
    .couple .left,.couple .right{
        width:100%;
    }
    .box-time{
        width:75px;
        height:75px;
    }
}
.btn-map{
    /* color:white; */
    /* background:rgb(245,226,228,0.7); */
    border-radius:30px;
    transition:all.5s ease;
    -webkit-transition:all.5s ease;
    -o-transition:all.5s ease;
    -moz-transition:all.5s ease;
}
.btn-map:hover{
    background:rgb(245,226,228,1);
}
.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
@media (min-width: 320px) {
    .vertical-center {
        width: auto !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .relative {
        position: relative;
        margin-bottom: 3rem !important;
    }
}
@media (min-width: 768px) {
    .vertical-center {
        width: 200px !important;
        margin: 0;
        position: absolute !important;
        top: 50%;
        left: 0;
        right: 0;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .relative {
        position: relative !important;
    }
}
@media (min-width: 1024px) {
    .vertical-center {
        width: auto !important;
        margin: 0;
        position: absolute !important;
        top: 50%;
        left: 0;
        right: 0;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .relative {
        position: relative !important;
    }
}
.relative {
    position: relative;
}
/* Inspired by https://codepen.io/htgmanics/pen/nJwdl */
@keyframes rotating {
    0% {
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
      -moz-transform: rotate3d(0, 0, 0, 0deg);
      -ms-transform: rotate3d(0, 0, 0, 0deg);
      -o-transform: rotate3d(0, 0, 0, 0deg);
      transform: rotate3d(0, 0, 0, 0deg);
    }
    100% {
      -webkit-transform: rotate3d(0, 1, 0, 720deg);
      -moz-transform: rotate3d(0, 1, 0, 720deg);
      -ms-transform: rotate3d(0, 1, 0, 720deg);
      -o-transform: rotate3d(0, 1, 0, 720deg);
      transform: rotate3d(0, 1, 0, 720deg);
    }
  }
  @keyframes rotatingY {
    100% {
      -webkit-transform: rotateY(-360deg);
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      -o-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }
  @keyframes fluttering {
    0%,
    25%,
    50%,
    75%,
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    10%,
    60% {
      -webkit-transform: translate3d(0, 150px, 0);
      -moz-transform: translate3d(0, 150px, 0);
      -ms-transform: translate3d(0, 150px, 0);
      -o-transform: translate3d(0, 150px, 0);
      transform: translate3d(0, 150px, 0);
    }
    30%,
    80% {
      -webkit-transform: translate3d(0, 50px, 0);
      -moz-transform: translate3d(0, 50px, 0);
      -ms-transform: translate3d(0, 50px, 0);
      -o-transform: translate3d(0, 50px, 0);
      transform: translate3d(0, 50px, 0);
    }
  }
  @keyframes left-wing-flap {
    0% {
      -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    }
    50% {
      -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
      -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
      -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
      -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
      transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
      transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    }
  }
  @keyframes right-wing-flap {
    0% {
      -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    }
    50% {
      -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
      -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
      -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
      -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
      transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
      transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    }
  }
  
  .butterfly_container {
    width: 100px;
    height: 100px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .butterfly_container var {
    position: absolute;
    left: 0%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .butterfly_container var.rotate3d {
    -webkit-transform: rotate3d(1, 0.5, 0, 50deg);
    -moz-transform: rotate3d(1, 0.5, 0, 50deg);
    -ms-transform: rotate3d(1, 0.5, 0, 50deg);
    -o-transform: rotate3d(1, 0.5, 0, 50deg);
    transform: rotate3d(1, 0.5, 0, 50deg);
  }
  .butterfly_container var.translate3d {
    -webkit-animation: fluttering 10s ease-in-out infinite;
    -moz-animation: fluttering 10s ease-in-out infinite;
    -ms-animation: fluttering 10s ease-in-out infinite;
    -o-animation: fluttering 10s ease-in-out infinite;
    animation: fluttering 10s ease-in-out infinite;
  }
  .butterfly_container figure.butterfly {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .butterfly_container figure.butterfly .wing {
    position: absolute;
    width: 50px;
    height: 100px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
    -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
    -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
    transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  }
  .butterfly_container figure.butterfly .wing.right {
    -webkit-transform-origin: 50px 50px;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50px 50px;
    -o-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
    -moz-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
    -ms-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
    -o-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
    transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
    -webkit-animation: right-wing-flap 1s ease-in-out infinite;
    -moz-animation: right-wing-flap 1s ease-in-out infinite;
    -ms-animation: right-wing-flap 1s ease-in-out infinite;
    -o-animation: right-wing-flap 1s ease-in-out infinite;
    animation: right-wing-flap 1s ease-in-out infinite;
    filter: FlipH;
    -ms-filter: "FlipH";
  }
  .butterfly_container figure.butterfly .wing.left {
    -webkit-transform-origin: 50px 50px;
    -moz-transform-origin: 50px 50px;
    -ms-transform-origin: 50px 50px;
    -o-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-animation: left-wing-flap 1s ease-in-out infinite;
    -moz-animation: left-wing-flap 1s ease-in-out infinite;
    -ms-animation: left-wing-flap 1s ease-in-out infinite;
    -o-animation: left-wing-flap 1s ease-in-out infinite;
    animation: left-wing-flap 1s ease-in-out infinite;
  }
  .butterfly_container figure.butterfly .wing use {
    display: block;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    fill: url(#image);
  }
  
  .svg-defs {
    position: absolute;
    height: 0;
    width: 0;
  }