@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap'); @import url('https://fonts.googleapis.com/css?family=Questrial&display=swap'); @font-face { font-family: 'snellregular'; src: url('../../assets/font/snellbt-regular-webfont.eot'); src: url('../../assets/font/snellbt-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../../assets/font/snellbt-regular-webfont.woff2') format('woff2'), url('../../assets/font/snellbt-regular-webfont.woff') format('woff'), url('../../assets/font/snellbt-regular-webfont.svg#snellregular') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'Quicksand', sans-serif; font-size:18px; letter-spacing: 1px; background:#89082d; color:#FFF; } #float-sample { position: fixed; background: #000; width: 100%; height: 50px; top: 0px; z-index: 999; color: #fff; padding: 15px; font-size: 17px; letter-spacing: 2px; } /* AUDIO */ #btn-audio { position: fixed; right: 15px; bottom: 25px; display: flex; align-items: center; z-index: 1000; } #click-btn { z-index: 100; border: none; background-color: transparent; display: flex; justify-content: center; align-items: center; } #playPausebtn { width: 35px; } /* POPUP */ #modal { height: 100%; text-align: center; z-index: 1000; position: fixed; height: 100%; width: 100%; left: 0; top: 0; transition: 1s; } #modal .popup { position: relative; width: 100%; height: 100%; background: #000; padding-top: 120px; background-size: cover; background-position: center; transition: all .2s ease-out; background-image: url('../../assets/images/popup1.jpg'); animation: banner 17s infinite linear; } #modal .popup-content { margin: 0; padding: 0; width: 100%; height: 100%; color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; } #modal .popup-content h1 { padding-bottom: 15px; font-family: 'snellregular', Playfair Display, serif; font-weight: normal; font-size: 53px; line-height: 58px; } #modal .popup-content .nama-tamu { font-size: 17px; line-height: 20px; margin: 10px; font-weight: bold; letter-spacing: 1px; } #modal .popup button { border: none; padding: 5px; border-radius: 25px; width: 190px; /*----PENTING-----*/ margin-top: 10px; background: #ecdebd; color: #a9223e; } @keyframes banner{ 0%{ background-image: url('../../assets/images/popup1.jpg');} 50%{ background-image: url('../../assets/images/popup1.jpg');} 26%{background-image: url('../../assets/images/popup2.jpg');} 50%{background-image: url('../../assets/images/popup2.jpg');} } /*HEADER */ #header-orn { background:url(../../assets/images/bg-header.png) no-repeat bottom center; height:200px; } #header { text-align:center; } #header .header-content { padding:20px; width:600px; text-align:center; margin:0px auto; } #header h1 { font-family: 'snellregular', Playfair Display, serif; font-weight: normal; font-size: 53px; line-height: 58px;} #header h4 { font-size:17px; padding-bottom: 10px; } #header h5 { letter-spacing: 2px; line-height:15px; padding-top:10px; } .tittle-section { font-family: 'Quicksand', sans-serif; font-size:23px; text-align:center; padding-bottom:10px; letter-spacing: 3px; padding-top:5px; } .tittle-section2 { width:50px; height:2px; background:#cda779; border-radius:1px; margin:auto; bottom: 0; } /*QUOTE */ #quote { margin: 0px auto; font-size: 30px; font-family: 'Italianno', cursive; line-height: 30px; background: #62051e; padding: 25px; color: #fff; } #quote .box { padding: 30px ; background: #89082d; border-radius: 10px; box-shadow: 0 3px 20px 0 #530419; } #quote h2 { font-size: 16px; letter-spacing: 1px; font-family: 'Questrial', sans-serif; line-height: 27px; padding-top: 10px; } #quote h3 { font-size: 14px; letter-spacing: 1px; font-family: 'Questrial', sans-serif; } /* CAROUSEL SLIDE */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } html, body,.carousel, .carousel-inner, .carousel-inner .item { height: auto; } #bg-wave-top { padding-top: 40px; height: 0px; position: relative; z-index: 99; } #bg-wave-top .wave-top { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } #bg-wave-top .wave-top svg { position: relative; display: block; width: calc(100% + 1.3px); height: 50px; } #bg-wave-top .wave-top .shape-fill { fill: #89082D; } .bg-bottom { height: 150px; position: relative; bottom: 0; left: 0; width: 100%; margin-top: -150px; z-index: 99; /*----PENTING-----*/ background: rgb(98,5,30); background: linear-gradient(0deg, rgba(98,5,30,1) 21%, rgba(98,5,30,0) 93%); } /* PENGANTAR/PENUTUP */ #pengantar { letter-spacing: 1px; color:#fff; padding: 10px 0px 10px 0px; } #pengantar img { padding: 20px 0px; } #penutup { letter-spacing: 1px; color:#fff; } #penutup img { padding: 20px 0px; } /* SANG MEMPELAI */ #tentang-pasangan { padding: 10px 0 10px 0; font-family: 'Quicksand', sans-serif; position: relative; } #tentang-pasangan h2 { font-family: 'snellregular', Playfair Display, serif; font-weight: normal; font-size:29px;} #tentang-pasangan p { margin-bottom: 20px; font-size:15px; } #tentang-pasangan .container-pic { position:relative; width:230px; margin:0px auto; } #tentang-pasangan .pic { padding:0px; margin:0px; overflow:hidden; } #tentang-pasangan .pic img { width:100%; display:block; } span.picframe { display:block; width:100%; position:absolute; z-index:777; height: 100%; } #tentang-pasangan .fa-location-dot { color: #cda779; } #tentang-pasangan .fa-instagram { font-size: 27px; color: #cda779; padding:7px; } #tentang-pasangan .fa-facebook-f { font-size: 25px; color: #cda779; padding:7px; } #tentang-pasangan .fa-heart-o { margin: 3px; color: red; font-size:15px; } /* INFO ACARA */ #acara { font-family: 'Questrial', sans-serif; background: url("../../assets/images/bg-acara.jpg") no-repeat; background-position: center center; padding: 50px 0px; } #acara p { line-height: 20px; padding: 10px 0px; } #acara .box { font-size: 16px; letter-spacing: 2px; } #acara h1 { font-size: 20px; letter-spacing: 2px; font-weight: bold; } #acara h2 { font-size: 17px; } #acara h3 { font-size: 14px; line-height: 20px; } .btn-map { font-size: 15px; background: #ecdebd; color: #89082d; padding: 9px 27px; border-radius: 20px; } /* GIFT */ #gift { margin:0px auto; padding:15px; font-size: 15px; letter-spacing: 1px; } #gift .btn { font-size: 15px; background: #ecdebd; color: #89082d; padding: 7px 23px; border-radius: 20px; } #gift .h2 { font-family: 'Quicksand', sans-serif; font-size: 15px;} #covid2 { font-family: 'Poppins', sans-serif; line-height: 25px; letter-spacing: 1px; margin-top:20px; font-size: 15px; color: #000; } #gift .button-gift { padding: 7px 23px; border: #fff solid 1px; background:#e1e1e1; border-radius: 20px; } #gift button:active { background:#80e55d; } #gift button:focus { outline: none; } .copiedbackground { background: #80e55d!important; } .copiedbackground active { border: solid; } .hidden { opacity: 0; pointer-events: none; } .visible { opacity: 1; } /* COUNTER */ #countdown .inline{ display: inline-block; } #countdown .main-counter { position: relative; z-index: 3; } #countdown .main-counter .counter { background-color: #fff; width:70px; margin-right: 5px; margin-bottom: 10px; color:#470214; text-align: center; border-radius: 10px; } #countdown .main-counter .counter .head { padding: 2px 0px; } #countdown .main-counter .counter .head h3 { text-align: center; margin: 0px; } #countdown .main-counter .counter .foot { padding: 5px; text-align: center; background-color: #470214; color: #fff; } #countdown .tgl { padding: 0px 10%; } @media(max-width:766px) { #countdown .main-counter .counter .head { padding: 10px 0px; } } @media(max-width:587px) { #countdown .acara .container { padding: 0px; } #countdown .main-counter .counter{ width: auto; margin-right: 4px; } } @media(max-width:500px) { #countdown .main-counter .counter{ width:70px; margin-right: 2px; margin: 0px; } #countdown .main-counter .counter .head { padding: 5px 0px; } } /* RSVP */ #konfirmasi { padding: 0px 15px; letter-spacing: 1px; width: auto; } #konfirmasi label { padding: 10px 0px 7px 0px; } #konfirmasi button { width: 100%; background: #ecdebd; color: #000; padding: 7px; border: none; letter-spacing: 2px; } #konfirmasi .back { margin:0px auto; padding: 0px 15px ; } #konfirmasi .btn-back { background: #000; color: #fff; border-radius: 4px; font-size: 14px; } .form-group { margin-bottom: 5px; } .form-group .has-error em.help-block{ font-size: 12px; color: #fff; margin-bottom: 0px; } /* KOMENTAR */ #komentar { margin:0px auto; padding:15px; } #komentar .komentar-box { } #komentar .grid { border-bottom: #62051e dotted 1px; ; margin-bottom: 20px; } #komentar h2 { font-size: 15px; font-weight: bold; line-height: 15px; margin-bottom: 5px; } #komentar h4 { font-size: 14px; font-style: italic; } #komentar h5 { font-size: 11px; color: #7f7f7f; line-height: 10px; letter-spacing: 1px;} #komentar .btn { color: #000; } /* NEW GALERI */ #main-gallery { margin-top: 30px; position: relative; max-width: 100%; width: 100%; margin: 0px 0px; } .fancy-gallery { text-align: center; } .fancy-gallery .container .gallery-item { -moz-column-count: 3; column-count: 3; -moz-column-gap: 1rem; column-gap: 1rem;} .fancy-gallery .container .gallery-item img { width: 100%; display: block; margin-bottom: 1rem; border-radius: 5px; transition: transform 0.3s ease;} @media (max-width: 768px) { .fancy-gallery .container .gallery-item { -moz-column-count: 2; column-count: 2; } } /* FOOTER */ #footer { text-align:center; } #footer h1 { margin-top: 30px; font-family: 'Quicksand', sans-serif; font-size:20px; letter-spacing: 1px; line-height: 25px; } #footer h2 { font-size: 24px; margin-bottom: 75px; letter-spacing: 1px; font-family: 'snellregular', Playfair Display, serif; font-weight: normal; line-height: 20px; } #footer h3 { font-size: 13px; font-family: 'Quicksand', sans-serif; } #footer h3 a { text-decoration:none; color:#ecdebd; } #footer .social a { background:#ecdebd; } #footer .social a i { color: #1c1c1c; } #footer a > img { width: 100px; } #footer .social { display: block; margin-bottom:70px;} #footer .social a { padding: 10px 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: inline-block; margin: 2px; } #footer .footer-top { min-height: 300px; width: 100%; background-image: url(../../assets/images/bg-footer.jpg); background-size: cover; background-position: center; position: relative; } #footer .bg-wave-footer { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } #footer .bg-wave-footer svg { position: relative; display: block; width: calc(100% + 1.3px); height: 118px; } #footer .bg-wave-footer .shape-fill { fill: #89082d; } @media(max-width:768px) { #header .header-content { width:90%; } #header h2 { padding-top:20px; } #acara .box { width: 95%; line-height: 25px; } #acara .btn-map { font-size: 13px; } #acara .btn-protkes { font-size: 13px; width: 230px; margin: 0px auto; } #tentang-pasangan .pic { margin-top:10px; } #footer { } #footer h1 { } .tittle-section3 { margin-top: 30px; } .banner button { bottom: 0; } #footer .bg-wave-footer svg { width: calc(118% + 1.3px); height: 38px; } #bg-wave-top { margin: 0px; height: 5px; padding: 0px; } }