.opening {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    min-height: 100vh;

    min-width: 100%;

    padding-top: 3rem;

    padding-bottom: 3rem;

    background-color: #ffffff;

    z-index: 10;

}



.satu {

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    min-height: 100vh;

    z-index: 1;

    position: relative;

}



.satu::after {

    content: '';

    display: block;

    position: absolute;

    top: 0px;

    bottom: 0px;

    right: 0px;

    left: 0px;

    background: linear-gradient(0deg, rgba(1, 1, 3, 1) 4%, rgba(255, 255, 255, 0) 20%);

}



.slideopa {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    min-height: 100vh;



}



.bgcolor-hero {

    position: absolute;

    bottom: 0px;

    top: 0px;

    left: 0px;

    right: 0px;

    background-color: #050505;

    opacity: 0.6;

    z-index: -1;

}



.bgimg-hero {

    position: absolute;

    bottom: 40px;

    top: 0px;

    left: 0px;

    right: 0px;

    z-index: -2;

    /* min-height: 170vh; */



}



.fullsckom {

    position: relative;

    min-height: 130vh;

    margin-top: 0px auto;

    margin-bottom: 0px auto;

}



.slideopakom {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    min-height: 130vh;

}



.bgcolor-kom {

    position: absolute;

    bottom: 0px;

    top: 0px;

    left: 0px;

    right: 0px;

    background-color: #050505;

    opacity: 0.6;

    z-index: -1;

    min-height: 130vh;

}



.bgimg-kom {

    position: absolute;

    bottom: 40px;

    top: 0px;

    left: 0px;

    right: 0px;

    z-index: -2;

    min-height: 130vh;



}





.svgatas {

    opacity: 0.5;

    position: absolute;

    top: 100%;

}



@font-face {

    font-family: alexbrus;

    src: url(./font/AlexBrush-Regular.ttf);

}





@font-face {

    font-family: robotolt;

    src: url(./font/Roboto-Light.ttf);

}



@font-face {

    font-family: roboto-bold;

    src: url(./font/Roboto-bold.ttf);

}



@font-face {

    font-family: greatvibes;

    src: url(./font/GreatVibes-Regular.ttf);

}



@font-face {

    font-family: italiano;

    src: url(./font/Italianno-Regular.ttf);

}



@font-face {

    font-family: ohbaby;

    src: url(./font/OoohBaby-Regular.ttf);

}



@font-face {

    font-family: poppins;

    src: url(./font/Poppins-Medium.ttf);

}





.alexbrush {

    font-family: 'alexbrus';

}

.mempelai_open {
    position: absolute;
    top: 90px;
    bottom: 0;
    right: 0;
    left: 0;

}

.kata_open {
    position: absolute;
    top: 40px;
    bottom: 0;
    right: 0;
    left: 0;
}



.robotolt {

    font-family: 'robotolt';

}



.robotobold {

    font-family: 'roboto-bold';

}



.greatvibes {

    font-family: 'greatvibes';

}



.italiano {

    font-family: 'italiano';

}



.ohbaby {

    font-family: 'ohbaby';

}



.poppins {

    font-family: 'poppins';

}



.textshadow {

    text-shadow: 2px 1px 4px #808080;

}



.textshadow1 {

    text-shadow: 2px 2px #000000;

}







.fullsc {

    position: relative;

}





.img-bundar {

    height: 200px;

    width: 200px;

    margin: 0px auto;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    border-radius: 50%;

}



.sha {

    box-shadow: 1px 5px 5px rgba(43, 38, 38, 0.8);

}



.divider-custom {

    margin: 1.25rem 0 1.5rem;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.divider-custom .divider-custom-line {

    width: 100%;

    max-width: 7rem;

    height: 0.25rem;

    background-color: #2c3e50;

    border-radius: 1rem;

    border-color: #2c3e50;

}



.divider-custom .divider-custom-line:first-child {

    margin-right: 1rem;

}



.divider-custom .divider-custom-line:last-child {

    margin-left: 1rem;

}



.divider-custom .divider-custom-icon {

    color: #2c3e50;

    font-size: 2rem;

}



.divider-custom.divider-light .divider-custom-line {

    background-color: #fff;

}



.divider-custom.divider-light .divider-custom-icon {

    color: #fff;

}



.acara {

    position: relative;

    z-index: 1;



}



.komen {

    position: relative;

    z-index: 1;

}



.bcucapan {

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    position: absolute;

    top: 0px;

    bottom: 0px;

    left: 0px;

    right: 0px;

    z-index: -2;

}



.bcwarnaucapan {

    background-color: #000000;

    opacity: 0.6;

    position: absolute;

    top: 0px;

    bottom: 0px;

    left: 0px;

    right: 0px;

    z-index: -1;



}



.kucapan {

    margin: 0px auto;

    border-radius: 10px;

    overflow: auto;

    z-index: 1;

}



.boxucapan {

    height: auto;

    margin: 0px auto;

    border-radius: 10px;
    opacity: 0.8;

    /* border-style: solid;

    border-color: goldenrod; */

}



.isi {

    height: 500px;

    margin: 0px auto;

    overflow: auto;



}



.isi img {

    border-radius: 100%;

    height: 30px;

    width: 30px;

}



.ewalet {

    border-style: solid;

    border-color: #a4aaae;

    height: 170px;

    width: 300px;

    box-shadow: 2px 2px 5px #4d4c4c;

    border-radius: 10px;

    position: relative;

    display: flex;

    margin: 0px auto;

    z-index: 1;

    background-image: url('./bc.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;



    /* &::before {

        content: '';

        position: absolute;

        top: 0px;

        bottom: 0px;

        right: 0px;

        left: 0px;

        background-image: url('../img/bg-atm.png');

        opacity: 0.3;

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;



    } */

}



.bank {

    width: 20%;

    height: 20%;

    position: relative;

    left: 80%;

}



.nobank {

    position: relative;

    top: 70%;

    left: 100%;

}



.an {

    position: relative;

    top: 85%;

}



.copy {

    position: relative;

    top: 70%;

    bottom: ;

    right: ;

    left: 50%;

    height: 20px;

    width: 20px;



    cursor: pointer;

}



.gallery img {

    max-width: 100%;

    max-height: 100%;

}



.quote {

    height: 80vh;

    position: relative;

}



.slideopaquote {

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    min-height: 80vh;



}



.bgcolor-quote {

    position: absolute;

    bottom: 0px;

    top: 0px;

    left: 0px;

    right: 0px;

    background-color: #050505;

    opacity: 0.6;

    z-index: -1;

    min-height: 80vh;

}



.bgimg-quote {

    position: absolute;

    bottom: 40px;

    top: 0px;

    left: 0px;

    right: 0px;

    z-index: -2;

    min-height: 80vh;



}



.imgstory {

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    height: 100%;

    width: 100%;

}



.btnmusic {

    position: fixed;

    bottom: 20px;

    right: 20px;

    width: 50px;

    height: 50px;

    z-index: 5;

}