/* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ .FX {display:flex; flex-direction:row; flex-wrap:nowrap; flex-grow:1; flex-shrink:1; flex-basis:auto; overflow-x:hidden !important;} .FF {display:flex; flex-direction:row !important; flex-wrap:wrap; flex-grow:1; flex-shrink:1; flex-basis:auto; overflow-wrap:break-word;} .FC {display:flex; flex-direction:column; flex-wrap:nowrap; flex-grow:1; flex-shrink:1; flex-basis:auto;} .F7 {flex-basis: 70%;} .F6 {flex-basis: 60%;} .F55 {flex-basis: 55%;} .F5 {flex-basis: 50%;} .F45 {flex-basis: 45%;} .F4 {flex-basis: 40%;} .F35 {flex-basis: 35%;} .F3 {flex-basis: 30%;} .F25 {flex-basis: 25%;} .F2 {flex-basis: 20%;} .F15 {flex-basis: 15%;} .F1 {flex-basis: 10%;} .FX3 {flex-basis: 32.5%;} /*.FX3 {flex-basis: 49%;}*/ .FX5 {flex-basis: 24.5%;} /*.FX5 {flex-basis: 49%;}*/ .FLOATS {background: #fffbf6da; border-radius: 10px; padding: 10px; width: auto; display: inline-flex;} .FLOATS {position: absolute; bottom: 20px; right: 20px; width: 70%; max-width: 450px;} .FLOATS .ICON img {border-radius: 5px;} .FLOATS .TS p {font-size: 12px !important;} .FLOATS {transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1);} .FLOATS:hover {transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;} .FLOATS .FLOB img {filter: brightness(1); transition: transform 1s cubic-bezier(.22,1,.36,1);} .FLOATS:hover .FLOB img {transform: rotate(360deg);} /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ .IMA {width: 100%; overflow: hidden !important; display: block;} .IMA img {width: 100%; display: block; pointer-events: none;} @keyframes ROIM { 100% {transform: rotate(360deg);}} .ROTIM img {animation: ROIM 9s linear infinite; -webkit-user-drag: none; user-select: none; pointer-events: none;} .IMR {width: 100%; overflow: hidden !important; display: block; border-radius: 30px; padding: 10px; border: 2px dotted #cbb7a057;} .IMR img {width: 100%; display: block; border-radius: 30px; pointer-events: none;} .IMO {width: 100%; overflow: hidden !important; display: block; border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%; padding: 10px; border: 2px dotted #cbb7a057;} .IMO img {width: 100%; display: block; border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%; pointer-events: none;} .IMC {width: 100%; overflow: hidden !important; display: block; border-radius: 50%; padding: 10px; border: 2px dotted #cbb7a057;} .IMC img {width: 100%; display: block; border-radius: 50%; pointer-events: none;} .IIMS {border-radius: 25px; border: 1px dotted #ffe9ce; padding: 10px;} .IIMS img {border-radius: 25px; pointer-events: none;} /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- PADDING CL -------------------------- */ /* ------------------------------------- PADDING CL -------------------------- */ /* ------------------------------------- PADDING CL -------------------------- */ /* ------------------------------------- PADDING CL -------------------------- */ .PA {padding: 120px 65px;} .PS {padding: 10px 50px;} .PR {padding: 20px 50px;} .P10 {padding: 10px 0;} .PT {padding: 10px;} .PZ {padding: 20px;} /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ .VLINE {height: 5rem; width: 1px; border-radius: 10px; margin: 10px 1px; border: none; background: linear-gradient(to top,#5f5d38,#513f2b);} .VISIT a {color: #fffc9c;} /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ .PRICE {position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:250px; padding:24px; overflow:hidden; background:linear-gradient(145deg,#ffebd5,#fff4cc); margin-bottom: 20px; border:1px solid #a38563; border-radius:18px; color:#fffaf2; box-shadow:0 12px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08); transform:translateY(0) rotateX(0); transform-origin:center bottom; transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease,border-color .4s ease; isolation:isolate;} .PRICE::before {content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.08) 45%,transparent 70%); transform:translateX(-120%); transition:transform .8s cubic-bezier(.2,.8,.2,1); pointer-events:none; z-index:-1;} .PRICE::after {content:""; position:absolute; left:18px; right:18px; bottom:-10px; height:24px; background:#a38563; filter:blur(18px); opacity:.18; z-index:-2; transition:opacity .5s ease,transform .5s ease;} .PRICE:hover {transform:translateY(-12px) rotateX(2deg); border-color:#fff3e0; box-shadow:0 24px 50px rgba(0,0,0,.3),0 8px 20px rgba(163,133,99,.16),inset 0 1px 0 rgba(255,255,255,.1);} .PRICE:hover::before {transform:translateX(120%);} .PRICE:hover::after {opacity:.35; transform:scaleX(1.08);} .PRIT {display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid rgba(163,133,99,.35);} .PRIT h4 {margin:0; font-size:15px !important; font-weight:600; letter-spacing:0.5px; font-family: "Gloock", serif; color:#dac097; text-transform:uppercase;} .PRIT span {display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid rgba(218,192,151,.5); border-radius:50%; font-size:10px; letter-spacing:1px; color:#dac097; transition:background .4s ease,color .4s ease,transform .4s ease;} .PRICE:hover .PRIT span {background:#dac097; color:#241c12; transform:rotate(360deg);} .PRIN {padding:26px 0 10px;} .PRIN h5 {margin:0; font-size:25px; font-weight:500; line-height:1.15; letter-spacing:-.5px; color:#2b2213 !important;} .PRIN h5 span {font-size:14px; font-weight:400; letter-spacing:1px; color:#a38563;} .PRID {flex:1; padding:12px 0 24px;} .PRID p {margin:0; max-width:95%; font-size:12px; line-height:1.8; font-weight:300; letter-spacing:.35px; color:rgba(255,250,242,.68);} .PRIB {display:flex; align-items:center; justify-content:flex-end; padding-top:16px; border-top:1px solid rgba(163,133,99,.25);} .PRICEBOOK {position:relative; display:inline-flex; overflow:hidden; border:1px solid #a38563; border-radius:100px; background:rgba(163,133,99,.06); transition:background .4s ease,border-color .4s ease,transform .4s ease;} .PRICEBOOK a {display:flex; align-items:center; gap:8px; padding:10px 13px 10px 18px; color:#958468; font-size:10px; font-weight:600; letter-spacing:1.5px; text-decoration:none; text-transform:uppercase;} .PRICEBOOK a span {color:#dac097; transition:color .4s ease;} .PRICEBOOK a b {display:flex; align-items:center; justify-content:center; width:25px; height:25px; margin-left:4px; border-radius:50%; background:#a38563; color:#241c12; font-size:14px; font-weight:400; transition:transform .45s cubic-bezier(.2,.8,.2,1),background .4s ease;} .PRICEBOOK:hover {background:#dac097; border-color:#dac097; transform:translateY(-2px);} .PRICEBOOK:hover a {color:#241c12;} .PRICEBOOK:hover a span {color:#241c12;} .PRICEBOOK:hover a b {background:#241c12; color:#dac097; transform:rotate(45deg);} .PRICE:hover .PRIB {transform:translateY(0);} /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* TEXT NORMAL IN LIGHT MODE */ .AVIOR h1 {font-size: 65px; font-weight: 900; color: var(--XH1); padding-bottom: 5px; font-family: "Italiana", sans-serif;} .AVIOR h1 span {font-size: 65px; font-weight: 900; color: var(--SH1); padding-bottom: 5px; font-family: "Italiana", sans-serif;} .AVIOR h2 {font-size: 45px; font-weight: 900; color: var(--XH2); padding-bottom: 5px; font-family: "Gloock", serif;} .AVIOR h3 {font-size: 30px; font-weight: 900; color: var(--XH3); padding-bottom: 5px; font-family: "Gloock", serif;} .AVIOR h4 {font-size: 25px; font-weight: 900; color: var(--XH4); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} .AVIOR h5 {font-size: 16px; font-weight: 600; color: var(--XH5); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} .AVIOR h6 {font-size: 14px; font-weight: 600; color: var(--XH6); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} .AVIOR p {font-size: 12px; font-weight: 900; color: var(--XP); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} /* SMALLEST TEXT */ .AVIOR .TM p {font-size: 9px; font-weight: 900; color: var(--PM); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} .AVIOR .TS p {font-size: 9px; font-weight: 900; color: var(--PS); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} .AVIOR .TZ p {font-size: 7px; font-weight: 900; color: var(--PZ); padding-bottom: 5px; font-family: "Quicksand", sans-serif;} /* BIG TEXT : : PROFESSIONAL */ .TBL h3 {font-size:15rem; font-weight:900 !important; color:var(--BH3); padding-bottom:5px; font-family: "Bodoni Moda", serif; overflow: hidden !important; text-shadow:1px 1px 0 rgba(255,255,255,.5),0 3px 4px rgba(120,75,35,.25),0 8px 20px rgba(120,75,35,.18);} .TBL h3 span {font-weight: 300; color: var(--XH3);} /* BIG TEXT : : SHAPE GRID */ .TML h3 {font-size:15rem; font-weight:300 !important; color:var(--BH3); padding-bottom:5px; font-family: "Rubik Microbe", system-ui; overflow: hidden !important; text-shadow:1px 1px 0 rgba(255,255,255,.5),0 3px 4px rgba(120,75,35,.25),0 8px 20px rgba(120,75,35,.18);} .TML h3 span {font-weight: 300; color: var(--XH3);} /* QUOTE */ .AVIOR .QUOTE h3 {font-family: "Explora", serif; font-weight: 400; font-size: 100px;} .AVIOR .QUOTES h3 {font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 20px; color: #dcc7ae;} /* EXTRAS */ .AVIOR h3 a {font-family: "Quicksand", sans-serif; font-weight: 500;} /* VIETNAM PAGE TEXT */ .TIVIN h1, .TIVIN h2, .TIVIN h3 { font-family: "Playfair Display", serif;} .TIVIN h4, .TIVIN h5, .TIVIN h6, .TIVIN p {font-family: "Quicksand", sans-serif;} /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */ /* ------------------------------------- CLASS : : -------------------------- */