@import url('https://fonts.googleapis.com/css?family=Prata&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); @import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap'); @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"); @import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap'); #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; } body { margin:0; font-family: 'Muli', sans-serif; font-size: 14px; font-size: normal; font-smooth: always; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; background: #fff; } /* AUDIO */ #btn-audio { position: fixed; right: 15px; bottom: 25px; display: flex; align-items: center; z-index: 999; } #click-btn { z-index: 100; border: none; background-color: transparent; display: flex; justify-content: center; align-items: center; } #playPausebtn { width: 35px; } /* POPUP ASLI*/ #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: 70px; 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 { font-family: 'Prata', serif; font-size:11px; letter-spacing: 4px; line-height:20px; } #modal .popup-content h2 { font-family: 'Pinyon Script', cursive; font-size:56px; letter-spacing: 1px; line-height:50px; } #modal .popup-content .h3 { font-family: 'Prata', serif; font-size:12px; letter-spacing: 2px; line-height:10px; } #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: #FFF; color: #000; } @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 { position: absolute; display: block; z-index: 99; color:#FFF; width: 100%; text-align: center; bottom: 0; margin-bottom: 200px; } #header h1 { font-family: 'Prata', serif; font-size:11px; letter-spacing: 4px; line-height:20px; text-shadow: 1px 2px 5px rgba(0,0,0,0.61);} #header h2 { font-family: 'Pinyon Script', cursive; font-size:56px; letter-spacing: 1px; line-height:50px; text-shadow: 1px 2px 5px rgba(0,0,0,0.61); } #header h3 { font-family: 'Prata', serif; font-size:12px; letter-spacing: 2px; line-height:15px; text-shadow: 1px 2px 5px rgba(0,0,0,0.61);} .bg-wave1 { position: relative; z-index: 99; bottom:0; margin-top:-50px; margin-bottom:-50px;} .gradient { position: absolute; width: 100%; height: 30%; overflow-x: hidden; z-index: 98; bottom: 40px; } /* SLIDE HEADER */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow:hidden; } .item.active img { transition: transform 7000ms linear 0s; transform: scale(1.03, 1.03); } .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; } .carousel-inner img { width: 100%; } @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); } } /* PENGANTAR/PENUTUP */ #pengantar { letter-spacing: 1px; color:#817a75; padding: 0px 20px;} #pengantar img { padding: 20px 0px; } #penutup { letter-spacing: 1px; color:#817a75; } #penutup img { padding: 20px 0px; } /*QUOTE */ #quote { margin: 0px auto; font-size: 35px; font-family: 'Italianno', cursive; line-height: 30px; padding: 25px; } #quote .box { padding: 30px ; border-radius: 10px; background: rgb(238,238,238); background: linear-gradient(0deg, rgba(238,238,238,1) 21%, rgba(255,255,255,1) 100%); } #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; } /* SANG MEMPELAI */ #tentang-pasangan { color: #565656; padding: 25px 0 10px 0; position: relative; z-index: 77; } #tentang-pasangan h2 { font-size: 32px; font-family: 'Pinyon Script', cursive; } #tentang-pasangan p { margin-bottom: 20px; color:#817a75; font-size: 16px; } #tentang-pasangan .fa-instagram { font-size: 30px; color: #565656; padding: 7px; } #tentang-pasangan .fa-facebook-f { font-size: 26px; color: #565656; padding: 7px; } #tentang-pasangan .fa-heart-o{ margin: 3px; color: red; font-size: 15px;} #tentang-pasangan .hand { padding: 20px; } #tentang-pasangan .img-profil { width:220px; border-radius: 50%; position: relative; border: solid 1px #f26161; padding: 7px ; background: #fff; margin-top:30px; } .tittle-section { font-weight: bold; font-size:24px; text-align:center; color: #565656; padding-bottom:15px; letter-spacing: 2px; padding-top:10px; font-family: 'Quicksand', sans-serif;} .tittle-section2 { width:50px; height:2px; background:#ffd8d8; border-radius:1px; margin:auto; bottom: 0; } /* INFO ACARA */ #acara { color: #000; background: url("../../assets/images/bg-acara.jpg") no-repeat; background-position:top center; padding: 25px 20px; } #acara p { line-height:30px; padding:10px 0px; } #acara .box { font-family: 'Muli', sans-serif; font-size:16px; border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.99) 75%, rgba(255,255,255,1) 76%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 75%,rgba(255,255,255,1) 76%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 75%,rgba(255,255,255,1) 76%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } #acara .btn-map { font-size: 15px; background: #f26161; color: #fff; padding: 10px 20px; border-radius: 20px; } #acara .btn-map:hover{ text-decoration: none; background: #fff; color: #f26161; border: solid 1px #f26161; } #acara .btn-protkes { font-size: 15px; padding: 9px 27px; border-radius: 20px; margin-top: 15px; width: 220px; margin: 0px auto; background: #fff; color: #f26161; border: solid 1px #f26161; } #covid { line-height: 25px; letter-spacing: 1px; margin-top: 20px; font-size: 14px; } .countdown.show { text-align: center; margin: 20px 0px; padding: 0; font-size: 40px; font-family: 'Questrial', sans-serif; } .countdown.show h2 { font-size: 25px; font-family: 'Pinyon Script', cursive; color:#f26161; } .countdown.show .running, .running { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .countdown.show .running timer, .running timer { font-size: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; color: #565656; } .countdown.show .running timer .days, .running timer .days, .countdown.show .running timer .hours, .running timer .hours, .countdown.show .running timer .minutes, .running timer .minutes, .countdown.show .running timer .seconds, .running timer .seconds {width: 50px; text-align: left; margin: 0 7px; } /* GIFT */ #gift { margin:0px auto; padding:15px; font-size: 15px; letter-spacing: 1px; } #gift .btn { font-size: 15px; background: #f26161; color: #fff; 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; } /* RSVP -*/ #konfirmasi { color: #000; background: url("../../assets/images/bg-acara2.jpg") no-repeat; background-position:top center; padding: 20px 15px 0px 15px; letter-spacing: 1px; border-radius: 10px; border: 2px solid #ECB4B5; margin: 20px; } #konfirmasi label { padding: 10px 0px 7px 0px; } #konfirmasi button { width: 100%; background: #f26161; color: #fff; margin: 10px 0px; 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: #ff0000; margin-bottom: 0px; } /* KOMENTAR -*/ #komentar { margin:0px auto; padding:5px; } #komentar .komentar-box { padding:25px; } #komentar .grid { border-bottom: #D6D6D6 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: #A8A8A8; line-height: 10px; } /* GALLERY */ .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-top { width: 100%; height: 350px; position: relative; bottom: 0px; } #footer-wave { background-image: url(../../assets/images/bg-footer.jpg); background-position: center; background-size: cover; height: 525px; position: relative; z-index: 89; } #footer { background: #000; position: relative; width: 100%; height: 400px; color:#FFF; font-family: 'Questrial', sans-serif;} .bg-wave2 { position: relative; z-index: 99; } #footer h1 { padding-top: 50px; font-family: 'Pinyon Script', cursive; font-size:25px; letter-spacing: 1px; line-height: 40px; position: relative; z-index: 100; } #footer .art { font-family: 'Pinyon Script', cursive; font-size: 35px; letter-spacing: 1px; line-height: 20px } #footer h2 { font-size: 13px; margin-bottom: 70px; font-family: 'Prata', serif; letter-spacing: 2px; } #footer h3 { font-size: 13px; letter-spacing: 1px; } #footer h3 a { text-decoration:none; color:#ffc000; } #footer .social a { background:#fff; } #footer .social a i { color: #000; } #footer a > img { width: 100px; } #footer .social { display: block; } #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; } @media screen and (max-width: 768px) { #header { margin-bottom: 100px; } .bg-wave1 { margin-top: -50px; margin-bottom:0px;} .bg-wave2 { position: relative; z-index: 99; } #footer-top { height: 250px; } #footer-wave { height: 290px; background-position: center; background-size: cover; } #quote {} } @media screen and (max-width: 480px) { .container2 { padding-left: 0px; padding-top: 105px; z-index: 3; } .container2 .content2::before { left: 25px; top: -10px; border: medium solid white; border-width: 0 10px 10px 10px; border-color: transparent transparent #fee2e4 transparent; } .bg-wave1 { margin-top: -50px; margin-bottom:0px; } #quote { } } @media (max-width: 480px) {.countdown.show .running timer, .running timer { font-size: 40px; } .countdown.show .running timer .days, .running timer .days, .countdown.show .running timer .hours, .running timer .hours, .countdown.show .running timer .minutes, .running timer .minutes, .countdown.show .running timer .seconds, .running timer .seconds { width: 49px; } } .countdown.show .running .labels, running .labels { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 15px; } .countdown.show .running .labels span, .running .labels span { width: 69px; text-align: center; margin: 0px 2px; } @media (max-width: 480px) {.countdown.show .running .labels span, .running .labels span { width: 69px;} } .countdown.show .running .break, .running .break { -ms-flex-preferred-size: 100%; flex-basis: 100%; height: 0; padding: 0px; } .countdown.show .ended, .ended { display: none; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .countdown.show .ended .break, .ended .break { -ms-flex-preferred-size: 100%; flex-basis: 100%; height: 0; } }