.composition{position:relative}.composition__photo{width:55%;box-shadow:0 2rem 4rem rgba(0,0,0,0.4);position:absolute;transition:.3s all;z-index:5}.composition__photo:hover{transform:scale(1.2);outline:1.5rem solid #7ed56f;outline-offset:2rem;z-index:10}@media (max-width: 900px){.composition__photo{width:33.33333%;position:relative;float:left}}.composition__photo--1{top:-2rem;left:0}@media (max-width: 900px){.composition__photo--1{top:0;transform:scale(1.1)}}.composition__photo--2{right:2rem;top:2rem}@media (max-width: 900px){.composition__photo--2{top:0;right:0;transform:scale(1.4);z-index:100}}.composition__photo--3{top:10rem;left:20%}@media (max-width: 900px){.composition__photo--3{top:0;left:0;transform:scale(1.1)}}.composition:hover .composition__photo:not(:hover){transform:scale(0.9);box-shadow:0 1rem 3rem rgba(0,0,0,0.3)}@-webkit-keyframes kanan{0%{transform:translateX(-10rem);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes kanan{0%{transform:translateX(-10rem);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes kiri{0%{transform:translateX(10rem);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes kiri{0%{transform:translateX(10rem);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes bawah{0%{transform:translateY(10rem);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes bawah{0%{transform:translateY(10rem);opacity:0}100%{transform:translateY(0);opacity:1}}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{font-size:10px}@media (max-width: 900px){html{font-size:8px}}@media (max-width: 600px){html{font-size:7px}}body{font-size:16px;font-family:'Lato', sans-serif;line-height:1.7;color:#777}.header__utama{text-transform:uppercase;color:#fff;margin-bottom:4rem}.header__utama--judul{font-size:6rem;display:block;font-weight:400;letter-spacing:3rem;-webkit-animation:kanan 1.5s;animation:kanan 1.5s}@media (max-width: 600px){.header__utama--judul{font-size:4rem;letter-spacing:2rem}}.header__utama--keterangan{font-size:2rem;display:block;font-weight:400;letter-spacing:1.65rem;-webkit-animation:kiri 1.5s;animation:kiri 1.5s}@media (max-width: 600px){.header__utama--keterangan{font-size:1.3rem;letter-spacing:1rem}}.header__kedua{font-size:3rem;text-transform:uppercase;background:linear-gradient(to right, #7ed56f, #28b485);background-clip:text;-webkit-background-clip:text;-moz-background-clip:text;color:transparent}@media (max-width: 600px){.header__kedua{font-size:3rem}}.header__ketiga{font-size:1.6rem}.paragrap{font-size:1.6rem;margin-bottom:4rem}.paragrap:not(:last-child){margin-bottom:4rem}.btn{text-decoration:none;text-transform:uppercase;padding:1.6rem 4rem;display:inline-block;border-radius:10rem;transition:.2s all;position:relative;-webkit-animation:bawah 1.5s;animation:bawah 1.5s;font-size:1.6rem;border:none;cursor:pointer}.btn:hover{transform:translateY(5px);box-shadow:0 1rem 2rem rgba(0,0,0,0.3)}.btn:active{transform:translateY(-1px);box-shadow:0 0.5rem 1rem rgba(0,0,0,0.3)}.btn:focus{outline:none}.btn::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transition:.2s all;opacity:1}.btn:hover::after{transform:scale(1.4, 1.7);opacity:0}.btn-white{background:#fff;color:#777}.btn-white::after{background:#fff;border-radius:10rem;z-index:-1}.btn-green{background:#55c57a;color:#777;color:#fff}.btn-green::after{background:#55c57a;border-radius:10rem;z-index:-1}.btn-text{font-size:1.6rem;text-decoration:none;color:#7ed56f;display:inline-block;padding:1rem 2rem;border-bottom:1px solid #7ed56f;font-weight:600;transition:.3s all}.btn-text:hover{background:#7ed56f;transform:translateY(-3px);box-shadow:0 1rem 2rem rgba(0,0,0,0.3);color:#fff}.btn-text:active{transform:translateY(-1px);box-shadow:0 0.5rem 1rem rgba(0,0,0,0.3)}.header{height:95vh;background:linear-gradient(to right bottom, rgba(126,213,111,0.8), rgba(40,180,133,0.8)),url("../img/hero-small.jpg") no-repeat top/cover;position:relative;clip-path:polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);-webkit-clip-path:polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);-moz-clip-path:polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%)}@media (max-width: 600px){.header{height:80vh;clip-path:polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);-webkit-clip-path:polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);-moz-clip-path:polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%)}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.header{background:linear-gradient(to right bottom, rgba(255,185,0,0.8), rgba(40,180,133,0.8)),url("../img/hero.jpg") no-repeat top/cover}}.header__logo--box{position:absolute;top:4rem;left:4rem}.header__logo{height:3.5rem}.header__text--box{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}.row{max-width:114rem;margin:0 auto;margin-bottom:8rem}@media (max-width: 600px){.row{max-width:50rem}}@media (max-width: 900px){.row{max-width:50rem}}.row::after{content:"";display:table;clear:both}.row [class^="col-"]{float:left}.row [class^="col-"]:not(:last-child){margin-right:6rem}@media (max-width: 600px){.row [class^="col-"]{width:100% !important;margin-bottom:4rem !important;margin-right:0;float:none;padding:0 3rem}}@media (max-width: 900px){.row [class^="col-"]{width:100% !important;margin-bottom:2rem;margin-right:0;float:none}}.row .col-1-of-2{width:calc((100% - 6rem) / 2)}.row .col-1-of-3{width:calc((100% - 2 * 6rem) / 3)}.row .col-1-of-4{width:calc((100% - 3 * 6rem) / 4)}.row .col-2-of-3{width:calc(2 * (100% - 2 * 6rem) / 3 + 6rem)}.row .col-2-of-4{width:calc(2 *(100% - 3 * 6rem) / 4 + 6rem)}.row .col-3-of-4{width:calc(3 *(100% - 3 * 6rem) / 4 + 2 * 6rem)}.footer{padding:10rem 0 5rem 0;background:#111;font-size:1.4rem}.footer__logobox{text-align:center}.footer__logo{width:15rem;height:auto}.footer__navigasi{border-top:1px solid #eee;padding-top:2rem;display:inline-block;width:85%}@media (max-width: 900px){.footer__navigasi{width:100%;text-align:center}}.footer__list{list-style:none}.footer__item{display:inline-block}.footer__item:not(:last-child){margin-right:2rem}.footer__link{text-decoration:none;text-transform:uppercase;color:#eeeeee;display:inline-block;transition:.2s all}.footer__link:hover{box-shadow:0 2rem 4rem rgba(0,0,0,0.2);transform:scale(1.2) rotate(5deg);color:#55c57a;background:#333}.footer__link:active{transform:scale(1.07) rotate(3deg);box-shadow:0 1rem 2rem rgba(0,0,0,0.2)}.footer__copyright{color:#eee;border-top:1px solid #eee;padding-top:2rem;float:right;width:85%}@media (max-width: 900px){.footer__copyright{width:100%;float:none;text-align:center}}.section-about{padding:10rem 0;margin-top:-5rem}@media (max-width: 900px){.section-about{padding:15rem 0}}.section-feature{padding:20rem 0;margin-top:-10rem;background:linear-gradient(to right bottom, rgba(126,213,111,0.8), rgba(40,180,133,0.8)),url("../img/nat-4.jpg") no-repeat top/cover;clip-path:polygon(0 15%, 100% 0, 100% 85%, 0% 100%);-webkit-clip-path:polygon(0 15%, 100% 0, 100% 85%, 0% 100%);-moz-clip-path:polygon(0 15%, 100% 0, 100% 85%, 0% 100%)}@media (max-width: 900px){.section-feature{padding:10rem 0 5rem 0;clip-path:polygon(0 5%, 100% 0, 100% 90%, 0% 100%);-webkit-clip-path:polygon(0 5%, 100% 0, 100% 90%, 0% 100%);-moz-clip-path:polygon(0 5%, 100% 0, 100% 90%, 0% 100%)}}.section-card{padding:15rem 0;margin-top:-15rem;background:#eeeeee}.section-testi{padding:20rem 0;background:rgba(255,255,255,0.8);position:relative}@media (max-width: 900px){.section-testi{padding:10rem 0 10rem 0}}.section-booking{padding:15rem 0;background:linear-gradient(to right bottom, #7ed56f, #28b485)}@media (max-width: 900px){.section-booking{padding:10rem 0}}.text-center{text-align:center}.mb-lg{margin-bottom:8rem}@media (max-width: 900px){.mb-lg{margin-bottom:4rem !important}}.mb-md{margin-bottom:4rem}@media (max-width: 900px){.mb-md{margin-bottom:3rem !important}}.mb-sm{margin-bottom:2rem}.mt-md{margin-top:4rem}@media (max-width: 900px){.mt-md{margin-top:3rem !important}}.box{background:rgba(255,255,255,0.7);padding:2rem;text-align:center;border-radius:.5rem;box-shadow:0 1rem 4rem rgba(0,0,0,0.2);transition:.2s all}.box__icon{font-size:6rem;background:linear-gradient(to right, #7ed56f, #28b485);display:inline-block;background-clip:text;-webkit-background-clip:text;-moz-background-clip:text;color:transparent}.box__text{font-size:1.5rem}.box:hover{transform:translateY(-5px) scale(1.05)}.card{perspective:150rem;position:relative;height:53rem}.card__sisi{font-size:2rem;height:53rem;transition:1.5s all;position:absolute;top:0;left:0;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 1rem 4rem rgba(0,0,0,0.1);border-radius:5px;overflow:hidden}.card__sisi--belakang{transform:rotateY(180deg)}.card__sisi--belakang--1{background:linear-gradient(to right bottom, #ffb900, #ff7730)}.card__sisi--belakang--2{background:linear-gradient(to right bottom, #7ed56f, #28b485)}.card__sisi--belakang--3{background:linear-gradient(to right bottom, #2988ff, #5643fa)}.card:hover .card__sisi--depan{transform:rotateY(-180deg)}.card:hover .card__sisi--belakang{transform:rotateY(0)}.card__gambar{height:23rem;clip-path:polygon(0 0, 100% 0%, 100% 85%, 0% 100%);-webkit-clip-path:polygon(0 0, 100% 0%, 100% 85%, 0% 100%);-moz-clip-path:polygon(0 0, 100% 0%, 100% 85%, 0% 100%);-o-clip-path:polygon(0 0, 100% 0%, 100% 85%, 0% 100%);-ms-clip-path:polygon(0 0, 100% 0%, 100% 85%, 0% 100%)}.card__gambar--1{background:linear-gradient(to right bottom, #ffb900, #ff7730),url("../img/nat-5.jpg") no-repeat top/cover}.card__gambar--2{background:linear-gradient(to right bottom, #7ed56f, #28b485),url("../img/nat-6.jpg") no-repeat top/cover}.card__gambar--3{background:linear-gradient(to right bottom, #2988ff, #5643fa),url("../img/nat-7.jpg") no-repeat top/cover}@supports (background-blend-mode: screen){.card__gambar{background-blend-mode:screen}}.card__heading{font-size:2.5rem;position:absolute;top:12rem;left:2rem;text-transform:uppercase;color:#fff;font-weight:300;width:85%}.card__heading--span{padding:1rem 2rem;box-decoration-break:clone;-webkit-box-decoration-break:clone;-moz-box-decoration-break:clone}.card__heading--span--1{background:linear-gradient(rgba(255,185,0,0.8), rgba(255,119,48,0.8))}.card__heading--span--2{background:linear-gradient(rgba(126,213,111,0.8), rgba(40,180,133,0.8))}.card__heading--span--3{background:linear-gradient(rgba(41,136,255,0.8), rgba(86,67,250,0.8))}.card__table{width:80%;margin:0 auto;padding:3rem}.card__table ul{list-style:none;font-size:1.5rem}.card__table ul li{text-align:center;padding:1rem}.card__table ul li:not(:last-child){border-bottom:1px solid #e7e7e7}.card__harga{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);text-align:center;width:90%}.card__harga--judul{font-size:2.5rem;color:#fff;font-weight:100;text-transform:uppercase}.card__harga--nilai{font-size:5rem;font-weight:100;text-transform:uppercase;color:#fff}@media (max-width: 900px){.card{height:auto;background:#fff;box-shadow:0 1rem 4rem rgba(0,0,0,0.1)}.card__sisi{height:auto;position:relative;width:100%;border-radius:5px;box-shadow:none}.card__sisi--belakang{transform:rotateY(0deg);clip-path:polygon(0 15%, 100% 0, 100% 100%, 0% 100%);-webkit-clip-path:polygon(0 15%, 100% 0, 100% 100%, 0% 100%)}.card__harga{position:relative;padding:4rem;left:0;top:0;transform:translate(0);text-align:center;width:100%}.card__harga--judul{font-size:1.4rem}.card__harga--nilai{font-size:4rem;font-weight:100}}.testi{width:75%;margin:auto;font-size:1.6rem;background:#fff;padding:6rem;padding-left:9rem;box-shadow:0 3rem 6rem rgba(0,0,0,0.1);transform:skewX(-12deg);position:relative}@media (max-width: 900px){.testi{width:100%}}@media (max-width: 600px){.testi{transform:skewX(0deg);width:100%;border-radius:5px}}.testi>*{transform:skewX(12deg)}@media (max-width: 600px){.testi>*{transform:skewX(0deg)}}.testi__shape{height:13rem;width:13rem;border:none;float:left;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%);shape-outside:circle(50% at 50% 50%);transform:translateX(-4rem) skewX(12deg)}@media (max-width: 900px){.testi__shape{transform:translateX(-2.5rem) skewX(12deg)}}@media (max-width: 600px){.testi__shape{transform:translateX(-2rem) skewX(0)}}.testi__img{width:100%;height:100%;transform:scale(1.4);transition:.5s all}.testi__caption{position:absolute;top:50%;left:50%;transform:translate(-50%, -20%);text-align:center;color:#fff;text-transform:uppercase;transition:.5s all;opacity:0}.testi:hover .testi__caption{transform:translate(-50%, -50%);opacity:1}.testi:hover .testi__img{-webkit-filter:blur(5px) brightness(80%);filter:blur(5px) brightness(80%);transform:scale(1)}.backvideo{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-10}.backvideo__video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.booking{height:50rem;background:linear-gradient(105deg, rgba(255,255,255,0.8) 50%, transparent 50%),url("../img/nat-10.jpg") no-repeat top/cover;border-radius:5px;box-shadow:0 2rem 4rem rgba(0,0,0,0.2)}@media (max-width: 900px){.booking{height:auto;background:linear-gradient(105deg, rgba(255,255,255,0.8) 100%, transparent 100%),url("../img/nat-10.jpg") no-repeat top/cover}}.booking__form{width:50%;padding:6rem}@media (max-width: 900px){.booking__form{width:100%}}.form__group:not(:last-child){margin-bottom:2rem}.form__input{font-size:1.6rem;padding:1.5rem 2rem;font-family:"Lato", sans-serif;color:#777;width:100%;display:block;border:none;border-bottom:3px solid transparent;transition:.3s all}.form__input:focus{outline:none;border-bottom:3px solid #55c57a;box-shadow:0 1rem 2rem rgba(0,0,0,0.1)}.form__input:focus:invalid{border-bottom:3px solid #ff7730}.form__label{display:block;margin:1rem 0 0 2rem;font-weight:700;font-size:1.2rem;opacity:1;transition:.7s all}.form__input:placeholder-shown+.form__label{transform:translateY(-4rem);opacity:0}.form__radio--group{width:49%;display:inline-block}@media (max-width: 600px){.form__radio--group{width:100%}.form__radio--group:not(:last-child){margin-bottom:1.5rem}}.form__radio--label{font-size:1.5rem;font-weight:600;position:relative;padding-left:4rem}.form__radio--label:hover{cursor:pointer}.form__radio--button{height:3rem;width:3rem;display:block;border:5px solid #55c57a;position:absolute;top:-.5rem;left:0;border-radius:50%}.form__radio--button::after{content:"";display:block;width:70%;height:70%;background:#55c57a;position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%, -50%);opacity:0;transition:.3s all}.form__radio--input:checked+.form__radio--label .form__radio--button::after{opacity:1}.navigation__checkbox{display:none}.navigation__button{display:inline-block;height:7rem;width:7rem;position:fixed;top:3.5rem;right:3.5rem;background:#fff;z-index:200;border-radius:50%;box-shadow:0 1rem 2rem rgba(0,0,0,0.3);text-align:center}.navigation__background{display:inline-block;height:6rem;width:6rem;position:fixed;background:radial-gradient(#7ed56f, #28b485);z-index:100;border-radius:50%;top:4rem;right:4rem;transition:0.8s all cubic-bezier(0.86, 0, 0.7, 1)}.navigation__nav{position:fixed;z-index:150;height:100vh;width:0%;opacity:0;visibility:hidden;transition:0.8s all cubic-bezier(0.68, -0.55, 0.265, 1.55)}.navigation__list{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);list-style:none;text-align:center}.navigation__item{margin:1rem}.navigation__link{text-transform:uppercase;text-decoration:none;font-size:3rem;color:#fff;display:inline-block;font-weight:300;background:linear-gradient(120deg, transparent 0%, transparent 50%, white 50%);background-position:0%;background-size:230%;padding:1rem 2rem;transition:.5s all}.navigation__link:hover{background-position:100%;color:#55c57a}@media (max-width: 900px){.navigation__link{font-size:2.3rem}}.navigation__checkbox:checked ~ .navigation__background{transform:scale(80)}.navigation__checkbox:checked ~ .navigation__nav{opacity:1;visibility:visible;width:100%}.navigation__icon{width:3rem;height:2px;display:inline-block;background:#333;position:relative;margin-top:3.5rem;transition:.5 all}.navigation__icon::before,.navigation__icon::after{content:"";height:100%;width:100%;display:inline-block;background-color:#333;position:absolute;left:0;transition:.5s all}.navigation__icon::before{top:-1rem;background-color:#333}.navigation__icon::after{top:1rem;background-color:#333}.navigation__checkbox:checked ~ .navigation__button .navigation__icon{background:transparent}.navigation__checkbox:checked ~ .navigation__button .navigation__icon::before{transform:rotate(135deg);top:0}.navigation__checkbox:checked ~ .navigation__button .navigation__icon::after{transform:rotate(-135deg);top:0}.popup{background:rgba(0,0,0,0.8);height:100vh;width:100%;display:block;position:fixed;top:0;left:0;z-index:300;opacity:0;visibility:hidden;transition:.4s all}.popup:target{opacity:1;visibility:visible}.popup:target .popup__box{transform:translate(-50%, -50%) scale(1)}.popup__box{width:75%;background:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.1);box-shadow:0 1rem 2rem rgba(0,0,0,0.2);display:table;border-radius:5px;overflow:hidden;transition:.3s all}.popup__kiri{width:33.33%;display:table-cell}@media (max-width: 600px){.popup__kiri{width:100%;display:none}}.popup__kanan{width:66.66%;display:table-cell;vertical-align:middle;padding:5rem;position:relative}.popup__gambar{width:100%;display:block}@media (max-width: 900px){.popup__gambar{height:36vh}}.popup__text{font-size:1.4rem;-moz-column-count:2;column-count:2;-moz-column-gap:4rem;column-gap:4rem}.popup__close{position:absolute;top:2rem;right:2rem;cursor:pointer;text-decoration:none;color:#333;font-size:2rem;transition:.4s all}.popup__close:hover{color:#55c57a}
