@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?pha3wb');
    src:  url('fonts/icomoon.eot?pha3wb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?pha3wb') format('truetype'),
    url('fonts/icomoon.woff?pha3wb') format('woff'),
    url('fonts/icomoon.svg?pha3wb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Cinzel|Lobster|Raleway:400,700');

@font-face {
    font-family: 'Great Vibes';
    src: url('fonts/GreatVibes-Regular.ttf') format('truetype');
}

img {
    max-width: 100%;
}

.section-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section-home {
    background-image: url("../tinified/banner.jpeg");
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: rgba(255,255,255, 0.55);
    position: relative;
}
.section-home > div {
    vertical-align: bottom;
    padding-bottom: 100px;
}
.section-home::before {
    content: "";
    background: linear-gradient(0deg,rgba(70, 57, 46, 1) 60%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 230px;
    width: 100%;
    opacity: 0.9;
}
.section-landing {
    background-image: url("../tinified/bg.jpg");
}
.section-landing h1 {
    color: #46392e;
}
.section-landing p {
    text-align: center;
    font-family: Cinzel,sans-serif;
    color: #46392e;
}
.section .quote {
    font-size: 22px;
    color: #fff;
    font-family: Cinzel,sans-serif;
}
.section .title {
    font-family: 'Great Vibes';
    color: #ddbeb3;
    text-align: center;
    font-size: 90px;
    margin: 0;
}
.section .sub-title {
    font-family: Cinzel,sans-serif;
    text-align: center;
    color: #ddbeb3;
    font-size: 30px;
    margin: 0;
    font-weight: 800;
}
.section .title-big {
    font-family: Oswald;
    font-size: 100px;
    color: #ddbeb3;
}
.section.active .title-big {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
}

.section.active .title {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
}
.section.active .sub-title {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.section-couple {
    background: #b2bac7;
   max-height: 100vh;
}
.section-couple .groom {
    background-image: url("../tinified/groom.jpg.jpeg");
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    display: table;
    table-layout: fixed;
    width: 100%;
    position: relative;
}
.section-couple .groom::before {
    content: "";
    background: linear-gradient(0deg,rgb(171, 205, 243) 44%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 230px;
    width: 100%;
    opacity: 0.9;
}
.section-couple .bride {
    background-image: url("../tinified/bride.jpg.jpeg");
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    display: table;
    table-layout: fixed;
    width: 100%;
    position: relative;
}
.section-couple .bride::before {
    content: "";
    background: linear-gradient(0deg,rgba(164, 181, 200, 1) 44%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 230px;
    width: 100%;
    opacity: 0.9;
}
.section-location > div {
    vertical-align: bottom;
    padding-bottom: 100px;
}
.section-location::before {
    content: "";
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 44%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 430px;
    width: 100%;
    opacity: 0.9;
}
.section-couple .bio {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
}
.section-couple img {
    max-width: 200px;
    margin-bottom: 30px;
}
.section-couple .name {
    font-family: 'Lobster', cursive;
    color: #46392e;
    font-weight: 800;
    font-size: 50px;
}
.section-couple.active .name {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
}
.section-couple .parents {
    font-family: Cinzel,sans-serif;
    font-weight: 800;
    font-size: 25px;
    color: #46392e;
}
.section-couple.active .parents {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}
.btn-opening {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    background: #004030;
    background-image: url("../tinified/bg.jpg");
    background-size: contain;
    background-position: left;
    flex-direction: column;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    text-align: center;
    z-index: 10;

}
#myAudio {
    width: 0;
    height: 0;
    border: none;
    display: none;
  }

.btn-opening.tutup {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.btn-opening h2 {
    font-family: Cinzel,sans-serif;
    color: #46392e;
    font-weight: 500;
    font-size: 30px;
}
.btn-opening span {
    font-weight: 500;
    font-size: 20px;
    font-family: Cinzel,sans-serif;
    padding: 10px 30px;
    background: #a4b5c8;
    color: #46392e;
    margin-top: 50px;
}
.btn-opening label {
    font-weight: 800;
    font-family: 'Lobster', cursive;
    font-size: 20px;
}
.section-about {
    background-image: url("../tinified/count.jpeg");
    background-blend-mode: multiply;
    background-color: rgba(30, 24, 24, 0.55);
}

.section-location {
    background-image: url("../tinified/akad.jpeg");
    background-blend-mode: multiply;
    background-position: center;
    
}
.section-wish {
    background-image: url("../tinified/rsvp.jpeg");
    background-blend-mode: multiply;
    background-position: center;
    
}
.section-location .btn-map {
    text-decoration: none;
    padding: 10px 30px;
    background: #ddbeb3;
    color: #46392e;
    font-family: Cinzel, sans-serif;
   
}

.item-gallery {
    width: 150px;
}
.item-gallery.wid {
    width: 330px;
}
.section-location.active .btn-map {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 1.5s;
}
.section-location-2 {
    background-image: url("../tinified/resepsi.jpeg");
    background-blend-mode: multiply;
    background-color: rgba(179, 179, 179, 0.55);
}
.section-location p.address {
    font-size: 14px;
}
.section-location.active iframe {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: 1s;
}
.section-location p {
    font-family: Cinzel,sans-serif;
    color:#ffffff;
    font-weight: 800;
    font-size: 20px;
}
.section-location.active p {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.section-thanks {
    background-image: url("../tinified/gift.jpeg");
    background-position: center;
}
.section-thanks .title-big {
    color: #FFF5E4;
}
.section-thanks h4 {
    font-weight: 700;
}
.section-thanks p {
    font-family: Cinzel,sans-serif;
    color: #46392e;
    font-size: 20px;
}
.section-thanks .gift {
    background: #000;
    color: #ffffff;
    padding: 75px 15px 15px;
    margin: 15px 0;
    border-radius: 10px;
    position: relative;
}
.section-thanks .gift img {
    width: 50px;
}
.section-thanks .gift img.logo {
    width: 100px;
    position: absolute;
    right: 20px;
    top: 20px;
}
.section-thanks .gift p {
    color: #fff;
}
.section-thanks .fp-tableCell {
    vertical-align: bottom !important;
}
.section-gallery {
    background-position: right;
    background-image: url("../tinified/bg.jpg");
}

.section-gallery .title-big {
    color: #46392e;
}
.section-rsvp {
    background-color: #8D2929;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    background-color: rgba(30, 24, 24, 0.55);
    background-blend-mode: multiply;
}
.section-rsvp .title-big,
.section-rsvp .sub-title {
    color: rgba(255,255,255, 0.7);
}
.section-rsvp.active .title-big {
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-fill-mode: both;
}
.section-rsvp form {
    font-family: Cinzel,sans-serif;
    color: white;
}
.section-rsvp.active form {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: 1s;
}
.section-rsvp form button {
    background: #CAAE77;
    margin-top: 30px;
    padding: 10px;
    float: right;
    color: #2e261e;
    border-radius: 0;
    border: none;
}
.section-rsvp form button:hover,
.section-rsvp form button:focus,
.section-rsvp form button:active {
    background-color: rgba(255,255,255,.5);
}
.section-rsvp form input {
    width: 100%;
    background-color: rgba(255,255,255,.5);
    border: none;
    padding: 10px;
    border-radius: 0;
}
.section-wish #wishInput,
.section-wish input,
.section-wish select {
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 10px;
    border: none;
    margin-bottom: 15px;
    color: #000;
}
.section-wish select {
-webkit-appearance: none;
}
.section-wish #wishInput::placeholder,
.section-wish input::placeholder,
.section-wish select::placeholder {
    color: #000;
}
input::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder {
    color: #000;
}

.section-wish #wishInput::-webkit-input-placeholder,
.section-wish input::-webkit-input-placeholder,
.section-wish select::-webkit-input-placeholder {
    color: #000;
  
}
.section-wish .title-big {
    color: #46392e;
}
.section-wish #wishInput {
    min-height: 200px;
}
.section-wish #submitWish {
    padding: 10px 30px;
    background: #FFF5E4;
    color: #822e0c;
    font-family: Cinzel, sans-serif;
    padding: 10px 30px;
    border: none;
}

.section-last {
    background-image: url("../tinified/whistlist.jpeg");
    background-position: center;
    background-color: rgba(70, 57, 46, 0.55);
    background-blend-mode: multiply;
}
.section-last #wishList {
    max-height: 60vh;
    overflow: scroll;
}
.section-last .comment {
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    margin-bottom: 15px;
}
.section-last .comment h4 {
    font-size: 18px;
    margin-bottom: 0;
    font-family: 'Lobster', cursive;
}
.section-last .comment p {
    font-size: 12px;
    margin-bottom: 0;
}
.section-last .not-found {
    font-family: 'Lobster', cursive;
    color: #fff;
}
.countdown {
    text-align: center;
    font-size: 40px;
    display: flex;
    justify-content: space-around;
}
.countdown .time-box {
    display: block;
    color: #fff;
}
.countdown .det {
    font-family: 'Lobster', cursive;
    display: block;
}
.countdown .time-box .unit {
    font-size: 20px;
}

@media (max-width: 992px) {
    .section .title {
        font-size: 57px;
    }
    .section .sub-title {
        font-size: 20px;
    }
    .section-couple .name {
        font-size: 28px;
    }
    .section-couple .parents {
        font-size: 18px;
    }
    .section .title-big {
        font-size: 46px;
    }
  
}
@media (max-width: 767px) {
    .section-rsvp {
        background-size: cover;
    }
    .section-couple img {
        max-width: 150px;
        margin-bottom: 15px;
    }
    .section-location {
        background-position: 36%;
    }
    .section-couple .groom {
        background-size: cover;
        background-position: center;
        height: 45vh;
    }
    .section-couple .bride {
        background-size: cover;
        background-position: center;
        height: 45vh;
    }
    .section-couple .bio {
        vertical-align: bottom;
    }
    .btn-opening {
        background-size: cover;
    }
}