@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap'); @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"); @import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Vidaloka&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); @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/css?family=Quicksand&display=swap'); @import url('https://fonts.googleapis.com/css?family=Questrial&display=swap'); @font-face { font-family: 'upakartiregular'; src: url('../../assets/font/upakarti-webfont.woff2') format('woff2'), url('../../assets/font/upakarti-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'samarkan_____normal'; src: url('../../assets/font/saman___-webfont.woff2') format('woff2'), url('../../assets/font/saman___-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'Varela Round', sans-serif; font-size:19px; letter-spacing: 0px; background:#c9c1a0; color:#947755; } #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%; width: 100%; text-align: center; background: #c9c1a0 url('../../assets/images/bg-wayang.png') no-repeat; background-size: 500px auto; background-position: center 200px; z-index: 1000; position: fixed; left: 0; top: 0; transition: 1s; color:#856648; } #modal .popup { position: relative; width: 100%; height: 100%; } #modal .popup-content { margin: 0px auto; padding: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; } #modal .popup-content h1 { font-family: 'upakartiregular'; text-align: center; font-size: 70px; line-height: 40px; } #modal .popup-content h2 { font-size: 20px; letter-spacing: 2px; font-family: 'Varela Round', sans-serif; line-height: 10px; margin-top: 30px; } #modal .popup-content .h3 { font-size: 55px; letter-spacing: 2px; font-family: 'Vidaloka', serif; } #modal .img-profil { width: 180px; height: auto; position: relative; margin-top: 20px; } #modal .popup-content .nama-tamu { text-transform: uppercase; font-size: 16px; line-height: 10px; margin: 10px; font-weight: bold; letter-spacing: 2px; } #modal .popup button { border: none; padding: 5px; border-radius: 25px; width: 190px; background: #856648; color: #dbd4ba; margin: 0px auto; margin-top: 10px; } /*HEADER */ #header { text-align:center; padding: 10px 0px; margin: 15px; } .tittle-section { color:#947755; font-family: 'upakartiregular'; font-size: 35px; text-align:center; padding-bottom:10px; letter-spacing: 1px; padding-top:-11px; } .tittle-section3 { width:50px; height:2px; background:#947755; border-radius:1px; margin:auto; bottom: 0; } /* PENGANTAR/PENUTUP */ #pengantar { letter-spacing: 1px; color:#846f51; } #pengantar img { padding: 20px 0px; } #penutup { letter-spacing: 1px; color:#846f51; } #penutup img { padding: 20px 0px; } /* SANG MEMPELAI */ #tentang-pasangan { padding: 10px 0 10px 0; position: relative; } #tentang-pasangan h2 { font-size: 29px; font-family: 'Lobster Two', cursive; letter-spacing: 1px; line-height: 40px; letter-spacing: -1px; } #tentang-pasangan p { margin-bottom: 20px; font-size: 15px; letter-spacing: 0px; } #tentang-pasangan .img-profil { width:230px; border-radius: 50%; position: relative; padding: 7px ; margin-top:30px; } #tentang-pasangan .fa-location-dot { color: #947755; } #tentang-pasangan .fa-instagram { font-size: 27px; color: #947755; padding:7px; } #tentang-pasangan .fa-facebook-f { font-size: 25px; color: #947755; padding:7px; } /* INFO ACARA */ #acara { padding: 20px 15px; } #acara p { line-height: 30px; padding:10px 0px; } #acara .box { font-size:16px; border-radius: 20px; font-size: 15px; letter-spacing: 0px; border: 2px solid #b6ad88; } .btn-map { font-size: 15px; background: #947755; color: #dbd4ba; padding: 10px 20px; border-radius: 20px; } .btn-map:hover{ text-decoration: none; background: #947755; color: #816c4e; } .btn-protkes { font-size: 15px; padding: 9px 27px; border-radius: 20px; margin-top: 15px; width: 240px; margin: 0px auto; color: #947755; border: 2px solid #947755} #covid { line-height: 25px; letter-spacing: 1px; margin-top:20px; font-family: 'Quicksand', sans-serif; font-size: 14px; color: #000; text-align: center; } /* COUNTER */ #countdown .inline { display: inline-block; font-family: 'Poppins', sans-serif; font-weight:300; } #countdown .main-counter { position: relative; z-index: 3; } #countdown .main-counter .counter { border: solid 1px #947755; width:70px; margin-right: 5px; margin-bottom: 10px; color:#947755; text-align: center; border-radius: 10px; } #countdown .main-counter .counter .head { font-weight: bold; } #countdown .main-counter .counter .head h1 { font-size: 25px; font-weight:500; line-height: 0px; letter-spacing: 0px; } #countdown .main-counter .counter .foot { padding-bottom: 5px; text-align: center; color: #947755; border-radius: 0px 0px 10px 10px; } #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; } #countdown .main-counter .counter .head { padding: 0px; } #countdown .main-counter .counter .foot { padding: 5px 0px; } } /* RSVP - NEW*/ #konfirmasi { padding: 0px 15px; letter-spacing: 1px; width: auto; } #konfirmasi label { padding: 10px 0px 7px 0px; } #konfirmasi button { width: 100%; background: #947755; color: #dbd4ba; 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: #ff3232; margin-bottom: 0px; } /* KOMENTAR - NEW*/ #komentar { margin:0px auto; padding:5px; } #komentar .komentar-box { } #komentar .grid { border-bottom: #b1aa8e dotted 1px; ; margin-bottom: 20px; } #komentar h2 { font-size: 15px; font-weight: bold; line-height: 15px; margin-bottom: 5px; letter-spacing: 0px; } #komentar h4 { font-size: 13px; font-style: italic; } #komentar h5 { font-size: 10px; color: #aca279; line-height: 10px; letter-spacing: 1px;} /* 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; } } /* QUOTE */ #quote { margin: 0px auto; font-size: 22px; font-family: 'samarkan_____normal'; line-height: 25px; padding: 20px; } #quote .box { padding: 30px; border-radius: 10px; box-shadow: 0 5px 25px 0 rgba(0,0,0, .25); } #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; line-height: 5px; font-family: 'Questrial', sans-serif;} /* FOOTER */ #footer { width: 100%; height: 620px; text-align: center; padding:30px; font-family: 'Nunito', sans-serif; background: url('../../assets/images/bg-footer.png') repeat-x; background-size: 400px auto; background-position: center bottom; } #footer .img { width: 210px; } #footer .bottom { margin: 0px auto; position: relative; right: 0; } #footer h1 { margin-top: 30px; font-family: 'Lobster Two', cursive; font-size: 24px; line-height: 23px; font-style: italic; } #footer h2 { font-size: 17px; margin-bottom: 50px; letter-spacing: 2px; line-height: 13px; } #footer h3 { font-size: 13px; line-height: 20px; font-family: 'Questrial', sans-serif; letter-spacing: 1px; } #footer h3 a { text-decoration: none; color:#947755; font-weight: bold; } #footer-bottom { text-decoration: none; color:#947755; font-weight: bold; } #footer .social a { background:#947755; } #footer .social a i { color: #dbd4ba; } #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; } @media(max-width:768px) { #header img { width: 100%; } #quote { padding:30px; } #acara { padding: 10px; } #acara .box { width:96%; padding:10px; } #acara .btn-map { font-size: 13px; } #acara .btn-protkes { font-size: 13px; width: 210px; margin: 0px auto; } #tentang-pasangan .pic { margin-top:10px; } #footer { } #komentar { margin:0px auto; padding:0px; } .tittle-section3 { margin-top: 30px; } #bg-wave-top { margin: 0px; height: 5px; padding: 0px; } }