/* #region import file */
@import "media.less";
@import "font.css";
/* #endregion import font */
/* #region import font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* #endregion import font */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    display: block;
    scroll-behavior: smooth;
    font-family: 'Inter';
    height: 100%;
    width: 100%;
}
body{
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-x: hidden;
}
body{
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */	
	&::-webkit-scrollbar {
		display: none;
	}
	
}
p{
    margin: 0;
}

button, input[type="submit"], input[type="reset"]{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
.xs-show{
    display: none;
    .media-xs({
        display: block;
    });
}
.xxs-show{
    display: none;
    .media-xxs({
        display: block;
    });
}
//animation reveal on scroll, ada js nya
.reveal{
    position: relative;
    transform: translateY(70px);
    opacity: 0;
    transition: all 2s ease;
}
.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}
.translatex{
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.animate-fast{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}



.gbinfo{
    z-index: -2;
    background-image: url("../aset/wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
    padding: 100px 0 350px 0;
    z-index: 7;
    overflow: hidden;

    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gbinfo:before{
    z-index: -1;
    content: "";

    position: absolute;
    bottom: 0;
    left: -30vw;

    width: 58vw;
    height: 40vw;
    
    background-image: url("../aset/flower.png");
    background-repeat: no-repeat;
    background-size: contain;
    .media-lg({
        width: 48vw;
        height: 40vw;
        left: -24vw;
    });
    .media-xl({
        width: 38vw;
        height: 30vw;
        left: -14vw;
    });
    .media-sm({
        width: 68vw;
        height: 50vw;
        left: -42vw;
    });
    .media-xs({
        width: 78vw;
        height: 58vw;
        left: -54vw;
    });
    
}
.gbinfo:after{
    z-index: -1;
    content: "";

    position: absolute;
    bottom: 0;
    right: -42vw;

    width: 58vw;
    height: 40vw;
    
    background-image: url("../aset/flower.png");
    background-repeat: no-repeat;
    background-size: contain;
    .media-lg({
        width: 48vw;
        height: 40vw;
        right: -24vw;
    });
    .media-xl({
        width: 38vw;
        height: 30vw;
        right: -14vw;
    });
    .media-sm({
        width: 68vw;
        height: 50vw;
        right: -52vw;
    });
    .media-xs({
        width: 78vw;
        height: 58vw;

        bottom: -20px;
        right: -62vw;
    });
    
}
//wall opening
.websiteopening-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.titleopening{
    font-family: "Playfair Display", serif;
    color: #5F5F5F;
    letter-spacing: 2px;
    font-size: 2.5vw;
    .media-md({
        font-size: 3vw;	
    });
    .media-xs({
        font-size: 3.8vw;	
    });
    .media-xxs({
        font-size: 5vw;	
    });
}
.groombridetextopening{
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 2px;
    font-size: 7vw;

    background: linear-gradient(to top, #604d3f00, #241003);
    background: linear-gradient(to top, #604d3f40, #241003);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 1em;
    .media-md({
        font-size: 7.8vw;	
    });
    .media-xs({
        font-size: 8.1vw;	
    });
    .media-xxs({
        font-size: 10vw;	
        margin-bottom: 10px;
    });
}
.infoopening{
    margin: 3em;

    font-family: 'newyork';
    letter-spacing: 2px;
    color: #6C6C6C;
    font-size: 16px;
    position: absolute;
    bottom: 1em;
    .media-md({
        font-size: 10px;	
    });
    .media-xxs({
        margin-top: 80px;
    });
}
.asetopening{
    width: 70vw;
    max-width: 1338px;
    margin-top: -18px;
    .media-md({
        width: 85vw;	
    });
    .media-xxs({
        display: none;	
    });
}
.asetopeningxxs{
    display: none;	
    width: 85vw;
    .media-xxs({
        display: block;	
    });
}
.asetopeningxxskupu{
    display: none;	
    width: 85vw;
    .media-xxs({
        display: block;	
    });
}

//info
.infotext{
    text-align: center;
}
.groombridetext{
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    letter-spacing: 2px;
    line-height: 75px;

    background: linear-gradient(to top, #604d3f00, #241003);
    background: linear-gradient(to top, #604d3f40, #241003);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .media-xl({
        font-size: 88px;
        line-height: 85px;
    });
    .media-lg({
        font-size: 80px;
        line-height: 80px;
    });
    .media-xs({
        font-size: 48px;
    });
    .media-xxs({
        font-size: 40px;
    });
}
.parentstext{
    text-align: center;
    text-transform: uppercase;

    font-family: 'Gothic';
    font-size: 10px;
    letter-spacing: 2px;
    color: #4F4F4F;
    text-shadow: 0 0 5px white;
    .media-xl({
        font-size: 12px;
    });
}
.andtext{
    margin: 34px;
    text-align: center;
    text-transform: uppercase;

    font-family: 'Gothic';
    font-size: 12px;
    color: #000;
    letter-spacing: 2px;
    .media-xs({
        margin: 20px;
    });
}


/* #region gblovestory*/

    /* #region gblovestory arcanimation*/
        .arcwrapper{
            z-index: 120;
            position: absolute;
            bottom: 100px;
            left: 160px;
            // dont change width & height
            height: 128px;
            width: 128px;
        }
        .arcborder{
            position: absolute;
            width: 128px;
            height: 128px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .arcborder > img {
            position: absolute;
            width: 128px;
            height: 128px;
        }
    p#arcanimation{
        width: 120px;
        height: 120px;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        margin: 2% 3%;

        animation: circle 8s linear infinite;
    } 
        @keyframes circle{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .arcspan{
            position: absolute;
            left: 50%;
            transform-origin: 0 60px;
            padding: 8px 0;

            font-family: 'Inter';
            font-size: 10px;
            font-weight: 300;
            text-transform: capitalize;
            color: #787878;
        }
    /* #endregion gblovestory arcanimation*/
/* #endregion gblovestory*/

/* #region gbeventdate*/
    .gbeventdate {
        background-color: #EBE2D9;
        width: 100%;
        height: 100%;
        margin-top: -30vh;
        position: relative;
    }
    // .gbeventdate:before{
    //     content: url("../img/hero.jpg");
    //     position: absolute;
    //     border: 3px solid white;
    //     top: 0;
    //     left: 50%;
    //     transform: translateX(50%);
    // }
    .eventdatewrapper {
        padding: 5em 0;
        margin: 0 10%;
        display: flex;
        align-items: center;
        .media-xs({
            flex-direction: column;
        });
        .media-lg({
            width: 1200px;
            margin: 40px auto 0 auto;
            padding: 5em 0 8em 0;
        });
    }
    .eventwrapper {
        width: 50%;
        display: flex;
        flex-direction: column;
        .media-xs({
            width: 100%;
            margin-top: 10px;
            margin-bottom: 40px;
        });
    }
    .datenumbermainwrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 50%;
        .media-xs({
            width: 100%
        });
    }
    .datenumbermainwrapper:after{
        content: "SAVE\A THE\A DATE";
        white-space: break-spaces;
        margin: 50px 0 0 16px;

        position: absolute;
        bottom: 0;
        left: 150px;
        font-family: 'Butler';
        font-size: 25px;
        letter-spacing: 3px;
        color: rgba(76, 48, 27, 0.8);
        text-shadow: #FFF 2px 0;
        
        .media-xs({
            margin-bottom: 40px;
        });
    }
    .datenumberwrapper {
        z-index: 2;
        position: relative;
        display: flex;
        flex-direction: column;
        .media-xs({
            margin-bottom: 40px;
        });
    }
    div.datenumberwrapper:nth-child(2) {
        z-index: 1;
        position: absolute;
        margin-left: 5px;
    }
    .eventtitlewrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        border-bottom: 1px solid #7B614D;
    }
        .eventtitlediv{
            margin: 8px 0px 20px 0;
            width: 100%;

            font-family: 'Butler';
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 2px;
            color: #714C30;
            text-align: center;
            white-space: nowrap;
            .media-sm({
                font-size: 20px;
            });
            .media-xs({
                margin-bottom: 16px;
                font-size: 18px;
            });
            
        }


    .datenumber2 {
        margin-left: 100px;
    }
    .datenumber3{
        display: flex;
    }
    .datenumber p{
        line-height: 160px;
        font-family: 'Butler';
        font-size: 150px;

        background: linear-gradient(to top, rgba(77, 59, 45, 0), rgba(54, 29, 10, 0.8));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // text-shadow: #FFF 2px 0;
        position: relative;
    }
    div.datenumberwrapper:nth-child(2) > div > p {
        line-height: 160px;
        font-family: 'Butler';
        font-size: 150px;
        background: linear-gradient(to top, rgba(77, 59, 45, 0), #fff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
    }
    .eventdatewrapper:nth-child(2){
        position: absolute;
        left: 0;
    }
    .locationtimewrapper{
        margin: 40px 30px;
        .media-xs({
            margin: 40px 1em;
        });
    }
    .locationwrapperimgtxt {
        display: flex;
        align-items: center;
    }
        .eventdateicon{
            width: 26px;
            height: 26px;
        }
        .locationtimetxt{
            margin-left: 8px;

            font-family: 'Butler';
            font-size: 16px;
            color: #937259;
            letter-spacing: 2px;
            .media-xs({
                font-size: 18px;
            });
            .media-xs({
                font-size: 16px;
            });
        }
        .locationtimetxt a{
            color: #937259;
            font-size: 16px;
        }
        .locationtimetxt a:hover {
            color: #7a5a42;
        }
    .timewrapper {
        margin-top: 24px;
    }
/* #endregion gbeventdate*/


/* #region infinite slide*/
    @keyframes slide{
        from {
            transform: translateX(0)
        }
        to {
            transform: translateX(-100%)
        }
    }

    .infinitetext{
        z-index: 1;
        overflow: hidden;
        padding: 20px 0;
        white-space: nowrap;

        position: relative;
        border-top: 1px solid #7B614D;
        border-bottom: 1px solid #7B614D;
    }
        // transparansi kanan kiri
        .infinitetext:before, .infinitetext:after{
            z-index: 2;
            content: "";
            position: absolute;
            top: 0;
            width: 50px;
            height: 100%;
        }
        .infinitetext:before{
            left: 0;
            background: linear-gradient(to left, rgba(255, 255, 255, 0),#EBE2D9);
        }
        .infinitetext:after{
            right: 0;
            background: linear-gradient(to right, rgba(255, 255, 255, 0),#EBE2D9);
        }
    .infinitetext:hover .infinitetextslide{
        animation-play-state: paused;
    }
    .infinitetextslide{
        display: inline-block;
        animation: 25s slide infinite linear;
    }
    .infinitetextslide span{
        font-family: 'newyork';
        color: #9E8069;
        letter-spacing: 2px;

        margin: 0 12px;
    }
/* #endregion infinite slide*/

/* #region gbquotes*/
.quotesdiv {
    margin: 50px auto;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}
.quotestext {
    font-family: 'Butler';
    color: #606060;
    font-size: 20px;
    letter-spacing: 3px;

    text-align: center;
    margin: 8px 80px;
    .media-xs({
        font-size: 18px;
        margin: 8px 60px;
    });
    .media-xs({
        font-size: 16px;
        margin: 8px 40px;
    });
}
/* #endregion gbquotes*/

/* #region gbhashtag*/
    
    .hashtagtext {
        font-family: 'newyork';
        font-size: 24px;
        letter-spacing: 3px;

    }
    .hashtagtextwrapper {
        margin: 58px auto;
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
    }
/* #endregion gbhashtag*/

/* #region gbwishes*/
.gbwishes {
    margin-top: 50px;
    .media-xxxs({
        margin-top: 30px;
    });
}
.wishestitlewrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.wishestitle{
    font-family: 'newyork';
    font-size: 20vw;
    letter-spacing: 15px;
    line-height: normal;

    background: linear-gradient(to top, rgba(235, 226, 217, 0), rgba(162, 141, 125, 0.8));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-align: center;
    .media-xs({
        letter-spacing: 10px;
    });
    .media-xxs({
        font-size: 110px;
        letter-spacing: 8px;
    });
    .media-xxxs({
        font-size: 100px;
        letter-spacing: 8px;
    });
    .media-lg({
        font-size: 200px;
    });
}
.guestwisheswwrapper {
    display: flex;
    justify-content: center;
    margin: -10vw 12vw 50px 12vw;
    .media-sm({
        margin: -10vw 6vw 50px 6vw;
    });
    .media-xs({
        margin: -10vw 20px 50px 20px;
    });
    .media-xs({
        margin: -10vw 0 50px 0;
    });
    .media-xxxs({
        margin: -50px 26px 50px 26px;
    });
    .media-lg({
        margin: -90px 12vw 50px 12vw;
    });
    
}
.guestwishesall{
    display: flex;
}
.guestwishes{
    position: relative;
    border-radius: 15px;
    background-color: white;
    width: 28vw;
    border: 3px solid #EBE2D9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 210px;
    margin: 0 4px;

    font-family: 'newyork';
    letter-spacing: 1px;
    .media-sm({
        width: 30vw;
    });
    .media-xs({
        width: 42vw;
    });
    .media-xxs({
        width: 65vw;
    });
    .media-xxxs({
        width: 250px;
    });
    .media-lg({
        width: 20vw;
        margin: 0 8px;
    });
}

// .guestwisheswwrapper .guestwishes{
//     //Hiding the 2nd element onwards
//     .media-xxs({
//         &:nth-child(n+3) {
//             display: none;
//         }
//     });
//     //Hiding the 3rd element onwards
//     .media-xs({
//         &:nth-child(n+4) {
//             display: none;
//         }
//     });
//     //Hiding the 4rd element onwards by default 
//     &:nth-child(n+5){
//         display: none;
//     }
// }
.guestwishesfirst{
    display: flex;
    justify-content: space-between;
}
.fromwrapper{
    padding: 16px;
}
.wishesflower{
    width: 80px;
    margin: 16px;
}
.wishestextwrapper{
    bottom: 0;
    padding: 16px;
}
.wishestext{
    text-align: right;
}

.backbtn, .nextbtn{
    margin-left: 5px;
    margin-right: 5px;
    .media-xs({
        margin-left: 0;
        margin-right: 0;
    });
}
/* #endregion gbwishes*/

/* #region gbfooter*/
    .footerimg {
        z-index: 3;
        position: relative;
        width: 90%;
        height: 350px;
        background-color: #e8c8c8;
        margin: 0px auto -44px auto;
    }
    .credit{
        position: relative;
        background-color: #EBE2D9;
        width: 100%;

        display: flex;
        justify-content: center;
        padding-bottom: 48px;
    }
    .credit:after{
        z-index: -1;
        content: "";

        position: absolute;
        bottom: 67px;
        left: 0;

        width: 100%;
        height: 200px;
        
        background-image: url("../aset/footer-aset.png");
        background-repeat: no-repeat;
    }
        .credittxt{
            text-align: center;
            margin: 20px 16px;

            font-family: 'Gothic';
            font-size: 18px;
            color: #181818;
        }
            .credittxt span{
                font-family: "Playfair Display", serif;
                color: #181818;
            }
/* #endregion gbfooter*/
.creditphoto{
    position: relative;
    background-color: #EBE2D9;
    width: 100%;
    height: 120px;

    display: flex;
    justify-content: center;
    align-items: end;
}
.creditphoto:after{
    z-index: -1;
    content: "";

    position: absolute;
    bottom: 120px;
    left: 0;

    width: 100%;
    height: 200px;
    
    background-image: url("../aset/footer-aset.png");
    background-repeat: no-repeat;
}

.tambahan{
    margin: 3em 6em 0 6em;
    font-family: 'newyork';
    letter-spacing: 2px;
    color: #6C6C6C;
    text-align: center;
    font-size: 14px;
    .media-xs({
        margin: 3em 3em 0 3em;
    });
}

.tambahan1{
    margin: 1em auto;
    font-family: 'newyork';
    letter-spacing: 2px;
    color: #323232;
    text-align: center;
    font-size: 16px;
}
.profile {
    background-color: #ebe2d9;
    z-index: 8;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;
    margin: 0 auto;

    padding: 3vw 0;

    border-bottom: none;
    width: 78%;
    @media (max-width: 767px) {
      padding: 1em 0;
      width: 80%;
    }
    @media (max-width: 480px) {
      width: 85%;
    }
  }
  .herophotowrapper{
    width: 92%;
    height: 45vw;
    padding: 0;
    position: relative;
    @media (max-width: 767px) {
      width: 88%;
      height: 80vw;
      padding: 0;
    }
    @media (max-width: 480px) {
      height: 110vw;
    }
  }

  .herophoto{
    position: relative;
    width: 100%;
    height: 100%;
  }
    .herophoto:before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      box-shadow: inset 4px 2px 10px #3f3f3f8f;
    }
    .herophoto:after{
      z-index: 5;
      /* content: "26.08"; */
      position: absolute;
      right: 5%;

      font-family: "avenir-black";
      color: white;

      transform: translateY(27%) scaleY(1.1);
      bottom: 0;
      font-size: 8em;
      letter-spacing: 3px;
      @media (max-width: 900px) {
        font-size: 6em;
      }
      @media (max-width: 600px) {
        right: 0;
        transform: translate(36%, -65%) scaleY(1.1) rotate(-90deg);
        font-family: 'newyork';
        font-size: 6.5em;
      }
      @media (max-width: 385px) {
        font-size: 5em;
      }
    }
    .img-inner{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
      }
    .gallery-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #websitebody {
        background-color: #ebe2d9;
    }
    .infowrapper {
        padding: 0 5%;
    }



    .quotes-section {
        width: 100%;
        height: 60vh;
      
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url('../img/quotes.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        margin-bottom: 3em;
        @media (max-width: 480px) {
          padding: 42% 5% 0 5%;
        }
        p {
          text-align: center;
          color: white;
          /* font-size: 1.3em;
          font-family: "Aston"; */
          text-shadow: 1px 1px 3px black;
      
      
          font-size: 2.4em;
          font-family: "Monsieur La Doulaise", cursive;
          letter-spacing: 1px;
      
          overflow: hidden;
          width: 0;
          white-space: nowrap;
          padding: 2px;
      
          @media (max-width: 480px) {
            line-height: 1.3em;
          }
        }
      
        .quotesone.animate{
          animation: quotesonetype 2s steps(28, end) forwards;
        }
        .quotestwo.animate{
          animation: quotestwotype 2s steps(28, end) forwards;
        }
      }
      
      @keyframes quotesonetype {
        from {
          width: 0;
        }
        to {
          width: 24ch;
        }
      }
      @keyframes quotestwotype {
        from {
          width: 0;
        }
        to {
          width: 24ch;
        }
      }

      .dresscodetext{
        flex-direction: column;
        text-align: center;
      }
      .mt2em{
        margin-top: 2em;
      }