body.oc-loading, body.oc-loading * {cursor:wait !important} .stripe-loading-indicator {height:5px;background:transparent;position:fixed;top:0;left:0;width:100%;overflow:hidden;z-index:2000} .stripe-loading-indicator .stripe, .stripe-loading-indicator .stripe-loaded {height:5px;display:block;background:#0090c0;position:absolute;-webkit-box-shadow:inset 0 1px 1px -1px #FFF,inset 0 -1px 1px -1px #FFF;box-shadow:inset 0 1px 1px -1px #FFF,inset 0 -1px 1px -1px #FFF} .stripe-loading-indicator .stripe {width:100%;-webkit-animation:oc-infinite-loader 60s linear;animation:oc-infinite-loader 60s linear} .stripe-loading-indicator .stripe-loaded {width:100%;transform:translate3d(-100%,0,0);opacity:0;filter:alpha(opacity=0)} .stripe-loading-indicator.loaded {opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 0.4s linear;transition:opacity 0.4s linear;-webkit-transition-delay:0.3s;transition-delay:0.3s} .stripe-loading-indicator.loaded .stripe {animation-play-state:paused} .stripe-loading-indicator.loaded .stripe-loaded {opacity:1;filter:alpha(opacity=100);transform:translate3d(0,0,0);-webkit-transition:transform 0.3s linear;transition:transform 0.3s linear} .stripe-loading-indicator.hide {display:none} body >p.flash-message {position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#fff;font-size:14px;padding:10px 30px 10px 15px;z-index:10300;word-wrap:break-word;text-shadow:0 -1px 0 rgba(0,0,0,0.15);text-align:center;-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);box-shadow:0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} body >p.flash-message.fade {opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)} body >p.flash-message.fade.in {opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} body >p.flash-message.success {background:#8da85e} body >p.flash-message.error {background:#c30} body >p.flash-message.warning {background:#f0ad4e} body >p.flash-message.info {background:#5fb6f5} body >p.flash-message button.close {float:none;position:absolute;right:10px;top:8px;color:white;font-size:21px;line-height:1;font-weight:bold;opacity:0.2;filter:alpha(opacity=20);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;outline:none} body >p.flash-message button.close:hover, body >p.flash-message button.close:focus {color:white;text-decoration:none;cursor:pointer;opacity:0.5;filter:alpha(opacity=50)} @media (max-width:768px) {body >p.flash-message {left:10px;right:10px;top:10px;margin-left:0;width:auto }} [data-request][data-request-validate] [data-validate-for]:not(.visible), [data-request][data-request-validate] [data-validate-error]:not(.visible) {display:none} a.oc-loading:after, button.oc-loading:after, span.oc-loading:after {content:'';display:inline-block;vertical-align:middle;margin-left:.4em;height:1em;width:1em;animation:oc-rotate-loader 0.8s infinite linear;border:.2em solid currentColor;border-right-color:transparent;border-radius:50%;opacity:0.5;filter:alpha(opacity=50)} @-moz-keyframes oc-rotate-loader {0% {-moz-transform:rotate(0deg) }100% {-moz-transform:rotate(360deg) }} @-webkit-keyframes oc-rotate-loader {0% {-webkit-transform:rotate(0deg) }100% {-webkit-transform:rotate(360deg) }} @-o-keyframes oc-rotate-loader {0% {-o-transform:rotate(0deg) }100% {-o-transform:rotate(360deg) }} @-ms-keyframes oc-rotate-loader {0% {-ms-transform:rotate(0deg) }100% {-ms-transform:rotate(360deg) }} @keyframes oc-rotate-loader {0% {transform:rotate(0deg) }100% {transform:rotate(360deg) }} @-moz-keyframes oc-infinite-loader {0% {transform:translateX(-100%) }10% {transform:translateX(-50%) }20% {transform:translateX(-25%) }30% {transform:translateX(-12.5%) }40% {transform:translateX(-6.25%) }50% {transform:translateX(-3.125%) }60% {transform:translateX(-1.5625%) }70% {transform:translateX(-0.78125%) }80% {transform:translateX(-0.390625%) }90% {transform:translateX(-0.1953125%) }100% {transform:translateX(-0.09765625%) }} @-webkit-keyframes oc-infinite-loader {0% {transform:translateX(-100%) }10% {transform:translateX(-50%) }20% {transform:translateX(-25%) }30% {transform:translateX(-12.5%) }40% {transform:translateX(-6.25%) }50% {transform:translateX(-3.125%) }60% {transform:translateX(-1.5625%) }70% {transform:translateX(-0.78125%) }80% {transform:translateX(-0.390625%) }90% {transform:translateX(-0.1953125%) }100% {transform:translateX(-0.09765625%) }} @-o-keyframes oc-infinite-loader {0% {transform:translateX(-100%) }10% {transform:translateX(-50%) }20% {transform:translateX(-25%) }30% {transform:translateX(-12.5%) }40% {transform:translateX(-6.25%) }50% {transform:translateX(-3.125%) }60% {transform:translateX(-1.5625%) }70% {transform:translateX(-0.78125%) }80% {transform:translateX(-0.390625%) }90% {transform:translateX(-0.1953125%) }100% {transform:translateX(-0.09765625%) }} @-ms-keyframes oc-infinite-loader {0% {transform:translateX(-100%) }10% {transform:translateX(-50%) }20% {transform:translateX(-25%) }30% {transform:translateX(-12.5%) }40% {transform:translateX(-6.25%) }50% {transform:translateX(-3.125%) }60% {transform:translateX(-1.5625%) }70% {transform:translateX(-0.78125%) }80% {transform:translateX(-0.390625%) }90% {transform:translateX(-0.1953125%) }100% {transform:translateX(-0.09765625%) }} @keyframes oc-infinite-loader {0% {transform:translateX(-100%) }10% {transform:translateX(-50%) }20% {transform:translateX(-25%) }30% {transform:translateX(-12.5%) }40% {transform:translateX(-6.25%) }50% {transform:translateX(-3.125%) }60% {transform:translateX(-1.5625%) }70% {transform:translateX(-0.78125%) }80% {transform:translateX(-0.390625%) }90% {transform:translateX(-0.1953125%) }100% {transform:translateX(-0.09765625%) }} /*! * fullPage 3.0.7 * https://github.com/alvarotrigo/fullPage.js * * @license GPLv3 for open source use only * or Fullpage Commercial License for commercial use * http://alvarotrigo.com/fullPage/pricing/ * * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo */.fp-enabled body,html.fp-enabled{margin:0;padding:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)}.fp-section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fp-slide{float:left}.fp-slide,.fp-slidesContainer{height:100%;display:block}.fp-slides{z-index:1;height:100%;overflow:hidden;position:relative;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.fp-section.fp-table,.fp-slide.fp-table{display:table;table-layout:fixed;width:100%}.fp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}.fp-slidesContainer{float:left;position:relative}.fp-controlArrow{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:absolute;z-index:4;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fp-controlArrow.fp-prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent}.fp-controlArrow.fp-next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff}.fp-scrollable{overflow:hidden;position:relative}.fp-scroller{overflow:hidden}.iScrollIndicator{border:0!important}.fp-notransition{-webkit-transition:none!important;transition:none!important}#fp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;-webkit-transform:translate3d(0,0,0)}#fp-nav.fp-right{right:17px}#fp-nav.fp-left{left:17px}.fp-slidesNav{position:absolute;z-index:4;opacity:1;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0!important;right:0;margin:0 auto!important}.fp-slidesNav.fp-bottom{bottom:17px}.fp-slidesNav.fp-top{top:17px}#fp-nav ul,.fp-slidesNav ul{margin:0;padding:0}#fp-nav ul li,.fp-slidesNav ul li{display:block;width:14px;height:13px;margin:7px;position:relative}.fp-slidesNav ul li{display:inline-block}#fp-nav ul li a,.fp-slidesNav ul li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}#fp-nav ul li a.active span,#fp-nav ul li:hover a.active span,.fp-slidesNav ul li a.active span,.fp-slidesNav ul li:hover a.active span{height:12px;width:12px;margin:-6px 0 0 -6px;border-radius:100%}#fp-nav ul li a span,.fp-slidesNav ul li a span{border-radius:50%;position:absolute;z-index:1;height:4px;width:4px;border:0;background:#333;left:50%;top:50%;margin:-2px 0 0 -2px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#fp-nav ul li:hover a span,.fp-slidesNav ul li:hover a span{width:10px;height:10px;margin:-5px 0 0 -5px}#fp-nav ul li .fp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px;overflow:hidden;display:block;opacity:0;width:0;cursor:pointer}#fp-nav ul li:hover .fp-tooltip,#fp-nav.fp-show-active a.active+.fp-tooltip{-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;width:auto;opacity:1}#fp-nav ul li .fp-tooltip.fp-right{right:20px}#fp-nav ul li .fp-tooltip.fp-left{left:20px}.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section{height:auto!important}.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell,.fp-responsive .fp-auto-height-responsive.fp-section{height:auto!important}.fp-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset 'UTF-8'; /* Slider */ /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } @charset "UTF-8"; /* ----------------------- External Font ----------------------- */ /* ---------- Media Queries ---------- */ /* ---------- Placeholder Style ---------- */ /* ---------- Center an element (absolute) ---------- */ /* ---------- Center an element (relative) ---------- */ /* ---------- Animation Mixin Setup ---------- */ /* ---------- Gradient ---------- */ /* ----------------------- Rounded ----------------------- */ /* ----------------------- Opacity ----------------------- */ /* ----------------------- Transform ----------------------- */ /* ----------------------- Rotation ----------------------- */ /* ----------------------- Scale ----------------------- */ /* -------------------- Scale Horizontal -------------------- */ /* ------------------ Transform Origin ------------------ */ /* ----------------------- Transition ----------------------- */ /* ------------------ Transition Specific ------------------ */ /* ----------------------- Pseudo ----------------------- */ /* ----------------------- Filter ----------------------- */ /* grayscale ex: filter: grayscale(100%); sepia ex: filter: sepia(100%); saturate ex: filter: saturate(0%); hue-rotate ex: filter: hue-rotate(45deg); invert ex: filter: invert(100%); brightness ex: filter: brightness(15%); contrast ex: filter: contrast(200%); blur ex: filter: blur(2px); */ /* ----------------------- Extra Mixin ----------------------- */ /* Can remove in another project */ /* .-----------------------------------------------------. | FONTS | '-----------------------------------------------------' */ @font-face { font-family: 'Cormorant SC'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantsc/v10/0yb5GD4kxqXBmOVLG30OGwserA.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUOjIg1_i6t8kCHKm459WxZqi7j.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUPjIg1_i6t8kCHKm459WxZYgzD-w.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm459Wxhzg.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUPjIg1_i6t8kCHKm459WxZFgrD-w.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUPjIg1_i6t8kCHKm459WxZcgvD-w.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUQjIg1_i6t8kCHKm45_Qphzg.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD7g4.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW4.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF7g4.ttf) format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE7g4.ttf) format('truetype'); } /* .-----------------------------------------------------. | BASIC STYLES | '-----------------------------------------------------' */ .slick-dotted.slick-slider { margin-bottom: 0 !important; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .dd-b-content li{list-style:unset} input::-webkit-input-placeholder { color: rgba(167, 176, 183, 0.5); } input:-moz-placeholder { color: rgba(167, 176, 183, 0.5); } input::-moz-placeholder { color: rgba(167, 176, 183, 0.5); } input:-ms-input-placeholder { color: rgba(167, 176, 183, 0.5); } .error::-webkit-input-placeholder { color: #FF0000; } .error:-moz-placeholder { color: #FF0000; } .error::-moz-placeholder { color: #FF0000; } .error:-ms-input-placeholder { color: #FF0000; } table { margin: 0; padding: 0; border: none; width: 100%; } table tr { padding: 0; margin: 0; } table th { font-style: normal; padding: 0; margin: 0; } table td { padding: 0; margin: 0; } address { font-style: normal; } blockquote { margin: 0; padding: 0; } body { font: 400 1em/28px 'Montserrat', sans-serif; margin: 0; padding: 0; overflow: hidden; background: #003143; } main { z-index: 2; } input[type='text'], textarea { font-family: 'Montserrat'; outline: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; } input[type='submit'] { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } img { max-width: 100%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } a { text-decoration: none; color: #000000; } a:hover { text-decoration: underline; color: #000000; } p { margin: 0 0 12px 0; padding: 0; line-height: 20px; } .clearfix, .dd-s-section .dd-b-container, .dd-b-wrapper, .dd-s-contact .dd-btn-group, .dd-s-about .dd-b-about, .dd-s-news-detail .dd-b-body .dd-b-top { *zoom: 1; } .clearfix:before, .dd-s-section .dd-b-container:before, .dd-b-wrapper:before, .dd-s-contact .dd-btn-group:before, .dd-s-about .dd-b-about:before, .dd-s-news-detail .dd-b-body .dd-b-top:before, .clearfix:after, .dd-s-section .dd-b-container:after, .dd-b-wrapper:after, .dd-s-contact .dd-btn-group:after, .dd-s-about .dd-b-about:after, .dd-s-news-detail .dd-b-body .dd-b-top:after { content: " "; display: table; } .clearfix:after, .dd-s-section .dd-b-container:after, .dd-b-wrapper:after, .dd-s-contact .dd-btn-group:after, .dd-s-about .dd-b-about:after, .dd-s-news-detail .dd-b-body .dd-b-top:after { clear: both; } .dd-row-fluid { *zoom: 1; } .dd-row-fluid:before { content: ""; display: table; } .dd-row-fluid:after { content: ""; display: table; clear: both; } .dd-row-fluid [class*="span-"] { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; } .dd-row-fluid [class*="span-"]:first-child { margin-left: 0 !important; } .dd-row-fluid .no-gutter { margin-left: 0 !important; } .dd-row-fluid .pull-right { float: right; } .dd-row-fluid .span-1 { width: 100%; } .dd-row-fluid .span-2 { width: 100%; } .dd-row-fluid .span-3 { width: 100%; } .dd-row-fluid .span-4 { width: 100%; } .dd-row-fluid .span-5 { width: 100%; } .dd-row-fluid .span-6 { width: 100%; } .dd-row-fluid .span-7 { width: 100%; } .dd-row-fluid .span-8 { width: 100%; } .dd-row-fluid .span-9 { width: 100%; } .dd-row-fluid .span-10 { width: 100%; } .dd-row-fluid .span-11 { width: 100%; } .dd-row-fluid .span-12 { width: 100%; } @media only screen and (min-width: 768px) { .dd-row-fluid .span-1 { width: 6.3802083333%; } .dd-row-fluid .span-2 { width: 14.84375%; } .dd-row-fluid .span-3 { width: 23.3072916667%; } .dd-row-fluid .span-4 { width: 31.7708333333%; } .dd-row-fluid .span-5 { width: 40.234375%; } .dd-row-fluid .span-6 { width: 48.6979166667%; } .dd-row-fluid .span-7 { width: 57.1614583333%; } .dd-row-fluid .span-8 { width: 65.625%; } .dd-row-fluid .span-9 { width: 74.0885416667%; } .dd-row-fluid .span-10 { width: 82.5520833333%; } .dd-row-fluid .span-11 { width: 91.015625%; } .dd-row-fluid .span-12 { width: 99.4791666667%; } .dd-row-fluid [class*="span"], .dd-row-fluid [class*="span"].has-gutter { margin-left: 2.0833333333%; } } @media only screen and (min-width: 1080px) { .dd-row-fluid .span-1 { width: 6.5533980583%; } .dd-row-fluid .span-2 { width: 15.0485436893%; } .dd-row-fluid .span-3 { width: 23.5436893204%; } .dd-row-fluid .span-4 { width: 32.0388349515%; } .dd-row-fluid .span-5 { width: 40.5339805825%; } .dd-row-fluid .span-6 { width: 49.0291262136%; } .dd-row-fluid .span-7 { width: 57.5242718447%; } .dd-row-fluid .span-8 { width: 66.0194174757%; } .dd-row-fluid .span-9 { width: 74.5145631068%; } .dd-row-fluid .span-10 { width: 83.0097087379%; } .dd-row-fluid .span-11 { width: 91.5048543689%; } .dd-row-fluid .span-12 { width: 100%; } .dd-row-fluid [class*="span"], .dd-row-fluid [class*="span"].has-gutter { margin-left: 1.9417475728%; } } .mobile-hide { display: none !important; } @media only screen and (max-width: 768px) { .dd-s-project-overview .dd-suncasa-map .dd-scroll-area { height: auto !important; } .dd-s-project-overview,.dd-s-project-overview .fp-tableCell{ height: auto !important;max-height:100vw;} } @media only screen and (min-width: 768px) { .mobile-hide { display: inherit !important; } .tablet-hide { display: none !important; } } @media only screen and (min-width: 1080px) { .mobile-hide { display: inherit !important; } .tablet-hide { display: inherit !important; } .desktop-hide { display: none !important; } } .dd-s-section { padding-top: 48px; padding-bottom: 48px; } @media only screen and (min-width: 768px) { .dd-s-section { padding-top: 72px; padding-bottom: 72px; } } @media only screen and (min-width: 1080px) { .dd-s-section { padding-top: 84px; padding-bottom: 84px; } } .dd-s-section .dd-b-container { position: relative; padding-left: 24px; padding-right: 24px; } @media only screen and (min-width: 768px) { .dd-s-section .dd-b-container { padding-left: 36px; padding-right: 36px; } } @media only screen and (min-width: 1080px) { .dd-s-section .dd-b-container { max-width: 1124px; margin: 0 auto; padding-left: 12px; padding-right: 12px; } } ul, li { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, .sub-headline { font-weight: 700; margin: 0 0 12px 0; padding: 0; } /* .-----------------------------------------------------. | REUSE ELEMENTS | '-----------------------------------------------------' */ .dd-b-language { font-size: 0; line-height: 0; position: absolute; z-index: 70; } .dd-b-language li { padding: 0 12px; display: inline-block; border-right: 1px solid rgba(0, 0, 0, 0.75); text-transform: uppercase; font-size: 12px; line-height: 12px; } .dd-b-language li a { color: rgba(0, 0, 0, 0.75); } .dd-b-language li:first-child { padding-left: 0; } .dd-b-language li:last-child { padding-right: 0; border: none; } .dd-b-language li.active { font-weight: 700; } .dd-b-language.at-menu { bottom: 27px; text-align: center; left: 0; right: 0; } .dd-b-language.at-header { top: 30px; right: 30px; } .dd-b-language.at-header li { line-height: 18px; border-right-color: #b7b7b7; } .dd-b-language.at-header li span, .dd-b-language.at-header li a { color: #b7b7b7; } .dd-b-language.at-header li.active a { color: #FFFFFF; font-weight: 400; } .dd-b-language.at-header li:first-child:before { content: ""; display: inline-block; position: relative; background: url(../images/icon-language-white.svg) 0 0 no-repeat; background-size: 18px 18px; width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 17px; } @media only screen and (min-width: 1080px) { .dd-b-language.at-menu { bottom: 43px; } .dd-b-language.at-header { top: 48px; right: 45px; } } .dd-social-network { font-size: 0; line-height: 0; } .dd-social-network li { display: inline-block; margin-right: 20px; } .dd-social-network li a { width: 30px; height: 30px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-position: center center; background-repeat: no-repeat; } .dd-social-network li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .dd-social-network li:last-child { margin-right: 0 !important; } .dd-social-network.at-menu li a { border: 1px solid rgba(0, 0, 0, 0.75); } .dd-social-network.at-menu li a.facebook-icon { background-image: url(../images/icon-fb-black.svg); background-size: 8px 18px; } .dd-social-network.at-menu li a.twitter-icon { background-image: url(../images/icon-tw-black.svg); background-size: 16px 14px; } .dd-social-network.at-menu li a.instagram-icon { background-image: url(../images/icon-ig-black.svg); background-size: 16px 16px; } .dd-social-network.at-menu li a.youtube-icon { background-image: url(../images/icon-yt-black.svg); background-size: 17px 19px; } .dd-social-network.at-menu li a.zalo-icon { background-image: url(../images/icon-zalo-b.svg); background-size: 14px 14px; } .dd-social-network.at-menu li a.mail-icon { background-image: url(../images/icon-mail-b.svg); background-size: 14px 14px; } .dd-social-network.at-footer { margin-bottom: 16px; } .dd-social-network.at-footer li { margin-right: 22px; } .dd-social-network.at-footer li a { width: 37px; height: 37px; background-color: #FFFFFF; } .dd-social-network.at-footer li a.youtube-icon { background-image: url(../images/icon-yt-navy.svg); background-size: 17px 19px; } .dd-social-network.at-footer li a.facebook-icon { background-image: url(../images/icon-fb-navy.svg); background-size: 10px 19px; } .dd-social-network.at-footer li a.twitter-icon { background-image: url(../images/icon-tw-navy.svg); background-size: 19px 16px; } .dd-social-network.at-footer li a.instagram-icon { background-image: url(../images/icon-ig-navy.svg); background-size: 16px 16px; } .dd-social-network.at-bottom { position: absolute; bottom: 30px; left: 30px; z-index: 70; width: auto; display: flex; align-items: center; } .dd-social-network.at-bottom li a { border: 1px solid #FFFFFF; } .dd-social-network.at-bottom li a.facebook-icon { background-image: url(../images/icon-fb-white.svg); background-size: 8px 18px; } .dd-social-network.at-bottom li a.twitter-icon { background-image: url(../images/icon-tw-white.svg); background-size: 16px 14px; } .dd-social-network.at-bottom li a.instagram-icon { background-image: url(../images/icon-ig-white.svg); background-size: 16px 16px; } .dd-social-network.at-bottom li a.youtube-icon { background-image: url(../images/icon-yt-white.svg); background-size: 17px 19px; } .dd-social-network.at-bottom li a.zalo-icon { background-image: url(../images/icon-zalo-w.svg); background-size: 14px 14px; } .dd-social-network.at-bottom li a.mail-icon { background-image: url(../images/icon-mail-w.svg); background-size: 14px 14px; } @media only screen and (min-width: 1080px) { .dd-social-network.at-footer { margin-bottom: 23px; } .dd-social-network.at-bottom { bottom: 30px; left: 50px; } } .dd-text-logo { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: absolute; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); z-index: 1; top: 15px; width: 60px; } .dd-text-logo svg { display: block; width: 100%; height: 100%; object-fit: contain; } .dd-text-logo svg * { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-text-logo.hide { -webkit-transform: translate(-50%, -70px); -moz-transform: translate(-50%, -70px); -o-transform: translate(-50%, -70px); -ms-transform: translate(-50%, -70px); transform: translate(-50%, -70px); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } @media only screen and (min-width: 768px) { .dd-text-logo { top: 25px; } } @media only screen and (min-width: 1080px) { .dd-text-logo { width: 80px; } } .villas .dd-text-logo { top: 10px; } @media only screen and (min-width: 1080px) { .villas .dd-text-logo { top: 25px; } } .dd-fullscreen-banner { width: 100%; height: 100vh; object-fit: cover; display: block; } .dd-fullheight-banner { height: 100%; display: block; max-width: none; } @-webkit-keyframes move-the-hand { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 25% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } 75% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes move-the-hand { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 25% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } 75% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes move-the-hand { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 25% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } 75% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes move-the-hand { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 25% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } 75% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes move-the-hand { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 25% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); } 75% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes dot-flicker { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-moz-keyframes dot-flicker { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-ms-keyframes dot-flicker { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes dot-flicker { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes dot-flicker { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } .dd-b-how-to-view { display: none; background-color: rgba(0, 0, 0, 0.8); -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; max-width: 280px; width: 100%; padding: 26px 10px 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 49; text-align: center; } .dd-b-how-to-view *:last-child { margin-bottom: 0; } .dd-b-how-to-view p { color: #FFFFFF; font-size: 12px; line-height: 1.5em; } .dd-b-how-to-view .dd-icons { margin: 0 auto 29px; width: 140px; font-size: 0; line-height: 0; text-align: center; display: block; position: relative; z-index: 40; } .dd-b-how-to-view .dd-icons span { background-color: #FFFFFF; display: inline-block; vertical-align: middle; width: 27px; height: 27px; margin-right: 17px; } .dd-b-how-to-view .dd-icons span:first-child, .dd-b-how-to-view .dd-icons span:last-child { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: relative; z-index: 2; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .dd-b-how-to-view .dd-icons span:first-child:before, .dd-b-how-to-view .dd-icons span:first-child:after, .dd-b-how-to-view .dd-icons span:last-child:before, .dd-b-how-to-view .dd-icons span:last-child:after { background-color: #003143; width: 6px; height: 1px; content: ""; display: block; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 50%; left: 50%; margin-left: -5px; margin-top: -1px; } .dd-b-how-to-view .dd-icons span:first-child:after, .dd-b-how-to-view .dd-icons span:last-child:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -1px; } .dd-b-how-to-view .dd-icons span:nth-child(2), .dd-b-how-to-view .dd-icons span:nth-child(3), .dd-b-how-to-view .dd-icons span:nth-child(4) { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 6px; height: 6px; -webkit-animation: dot-flicker 1.5s linear infinite; -moz-animation: dot-flicker 1.5s linear infinite; -ms-animation: dot-flicker 1.5s linear infinite; -o-animation: dot-flicker 1.5s linear infinite; animation: dot-flicker 1.5s linear infinite; } .dd-b-how-to-view .dd-icons span:nth-child(5) { background: url(../images/hand.svg) 0 0 no-repeat; background-size: 24px 26px; width: 24px; height: 26px; margin-right: 0; position: absolute; z-index: 50; left: 41px; top: 15px; -webkit-animation: move-the-hand 3s linear infinite; -moz-animation: move-the-hand 3s linear infinite; -ms-animation: move-the-hand 3s linear infinite; -o-animation: move-the-hand 3s linear infinite; animation: move-the-hand 3s linear infinite; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-b-how-to-view .dd-icons span:last-child { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); margin: 0; } @media only screen and (min-width: 1080px) { .dd-b-how-to-view { display: none !important; } } .dd-b-villa-breadcrumb { position: absolute; z-index: 3; top: 14vh; left: 20px; padding: 0; text-transform: uppercase; letter-spacing: 0; font-size: 12px; line-height: 1.25em; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-b-villa-breadcrumb a { color: #7C7C7C; display: inline-block; vertical-align: middle; } .dd-b-villa-breadcrumb span { display: inline-block; vertical-align: middle; padding-left: 13px; font-weight: 700; margin-left: 8px; position: relative; z-index: 10; color: #003143; letter-spacing: 0; } .dd-b-villa-breadcrumb span:before, .dd-b-villa-breadcrumb span:after { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 9px; height: 1px; background-color: #7C7C7C; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; margin-top: -1px; } .dd-b-villa-breadcrumb span:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media only screen and (min-width: 1080px) { .dd-b-villa-breadcrumb { top: 47px; left: 150px; } .dd-b-villa-breadcrumb:before { width: 100px; } } .dd-villa-compass { position: absolute; z-index: 29; left: 50px; top: 33vh; } .dd-villa-compass img { display: block; margin-top: 15px; width: 50px; height: 50px; } .dd-villa-compass .dd-compass-direction { position: absolute; z-index: 30; top: 0; left: 0; width: 100%; text-align: center; font-size: 12px; line-height: 12px; color: rgba(0, 0, 0, 0.7); text-transform: uppercase; } @-webkit-keyframes mini-map-hover { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-moz-keyframes mini-map-hover { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-ms-keyframes mini-map-hover { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes mini-map-hover { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes mini-map-hover { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes gallery-hotspot { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: 30px; height: 30px; } 100% { width: 54px; height: 54px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-moz-keyframes gallery-hotspot { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: 30px; height: 30px; } 100% { width: 54px; height: 54px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-ms-keyframes gallery-hotspot { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: 30px; height: 30px; } 100% { width: 54px; height: 54px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes gallery-hotspot { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: 30px; height: 30px; } 100% { width: 54px; height: 54px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes gallery-hotspot { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: 30px; height: 30px; } 100% { width: 54px; height: 54px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @media only screen and (min-width: 1080px) { .dd-villa-mini-map { position: absolute; z-index: 5; top: 42vh; left: 50px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); transform-origin: 0 0; } .dd-villa-mini-map img { display: block; max-width: 450px; } .dd-villa-mini-map img.overlays { position: absolute; top: 0; left: 0; z-index: 1; } .dd-villa-mini-map .dd-area { position: absolute; z-index: 6; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .dd-villa-mini-map .dd-area span { width: 22px; height: 22px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out; -o-transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out; z-index: 7; display: block; background-color: #7C7C7C; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .dd-villa-mini-map .dd-area span:before { content: ""; display: block; position: absolute; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9; text-align: center; color: #FFFFFF; text-transform: uppercase; white-space: nowrap; background: url(../images/icon-plus-white.svg) center center no-repeat; background-size: 80%; width: 16px; height: 16px; } .dd-villa-mini-map .dd-area span:after { content: ""; display: block; position: absolute; z-index: 6; top: -4px; left: -4px; right: -4px; bottom: -4px; background-color: rgba(124, 124, 124, 0.5); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .dd-villa-mini-map .dd-area.dd-area-orchid { width: 110px; height: 68px; left: 59px; top: 114px; } .dd-villa-mini-map .dd-area.dd-area-jasmine { width: 44px; height: 68px; left: 16px; top: 113px; background-image: url(../images/mini-map-mask.html); background-position: right top; background-repeat: no-repeat; background-size: 44px 68px; } .dd-villa-mini-map .dd-area.dd-area-camellia { width: 66px; height: 68px; left: 235px; top: 25px; } .dd-villa-mini-map .dd-area.dd-area-camellia span { top: 28%; } .dd-villa-mini-map .dd-area.dd-area-camellia:hover span, .dd-villa-mini-map .dd-area.dd-area-camellia.current span { top: 50%; } .dd-villa-mini-map .dd-area.dd-area-iris { width: 129px; height: 67px; left: 107px; top: 25px; } .dd-villa-mini-map .dd-area.dd-area-poeny { width: 67px; height: 67px; left: 169px; top: 114px; } .dd-villa-mini-map .dd-area:hover, .dd-villa-mini-map .dd-area.current { background-color: rgba(255, 241, 197, 0.5); } .dd-villa-mini-map .dd-area:hover span, .dd-villa-mini-map .dd-area.current span { background-color: #006e9b; } .dd-villa-mini-map .dd-area:hover span:before, .dd-villa-mini-map .dd-area.current span:before { content: attr(data-heading); background: none; font-size: 12px; line-height: 1em; width: auto; height: auto; } .dd-villa-mini-map .dd-area:hover span:after, .dd-villa-mini-map .dd-area.current span:after { background-color: rgba(0, 110, 155, 0.5); } .dd-villa-mini-map .dd-area:hover.dd-area-orchid span, .dd-villa-mini-map .dd-area.current.dd-area-orchid span { width: 53px; height: 53px; } .dd-villa-mini-map .dd-area:hover.dd-area-jasmine span, .dd-villa-mini-map .dd-area.current.dd-area-jasmine span { width: 53px; height: 53px; } .dd-villa-mini-map .dd-area:hover.dd-area-camellia span, .dd-villa-mini-map .dd-area.current.dd-area-camellia span { width: 70px; height: 70px; } .dd-villa-mini-map .dd-area:hover.dd-area-iris span, .dd-villa-mini-map .dd-area.current.dd-area-iris span { width: 39px; height: 39px; } .dd-villa-mini-map .dd-area:hover.dd-area-poeny span, .dd-villa-mini-map .dd-area.current.dd-area-poeny span { width: 45px; height: 45px; } .dd-villa-mini-map .dd-area.current { background-color: rgba(124, 124, 124, 0.5); } .dd-villa-mini-map .dd-area.current span:after { top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-animation: mini-map-hover 1.3s linear infinite; -moz-animation: mini-map-hover 1.3s linear infinite; -ms-animation: mini-map-hover 1.3s linear infinite; -o-animation: mini-map-hover 1.3s linear infinite; animation: mini-map-hover 1.3s linear infinite; } } @media only screen and (min-width: 1690px) { .dd-villa-mini-map { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .show-logo .dd-text-logo { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); z-index: 3; } .show-footer footer { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); pointer-events: initial; } .show-villa-breadcrumb .dd-b-villa-breadcrumb { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } /* .-----------------------------------------------------. | HEADER | '-----------------------------------------------------' */ @-webkit-keyframes menu-icon-bar { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 40% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } 60% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes menu-icon-bar { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 40% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } 60% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-ms-keyframes menu-icon-bar { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 40% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } 60% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes menu-icon-bar { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 40% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } 60% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @keyframes menu-icon-bar { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 40% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } 60% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes sub-menu-hover { 0% { width: 0; } 100% { width: 55px; } } @-moz-keyframes sub-menu-hover { 0% { width: 0; } 100% { width: 55px; } } @-ms-keyframes sub-menu-hover { 0% { width: 0; } 100% { width: 55px; } } @-o-keyframes sub-menu-hover { 0% { width: 0; } 100% { width: 55px; } } @keyframes sub-menu-hover { 0% { width: 0; } 100% { width: 55px; } } .dd-menu-open { position: absolute; z-index: 3; top: 25px; left: 20px; line-height: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-menu-open.hide { -webkit-transform: translateY(-70px); -moz-transform: translateY(-70px); -o-transform: translateY(-70px); -ms-transform: translateY(-70px); transform: translateY(-70px); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-menu-open .dd-bars { overflow: hidden; display: inline-block; vertical-align: middle; width: 28px; height: 16px; position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .dd-menu-open .dd-bars .dd-bar { width: 28px; height: 2px; overflow: hidden; position: absolute; z-index: 10; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .dd-menu-open .dd-bars .dd-bar .dd-bar-in { width: 84px; height: 2px; position: absolute; top: 0; left: 0; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .dd-menu-open .dd-bars .dd-bar .dd-bar-in:before, .dd-menu-open .dd-bars .dd-bar .dd-bar-in:after { width: 28px; height: 2px; content: ""; display: block; position: absolute; top: 0; background-color: #FFFFFF; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in:before { left: -56px; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in:after { left: 0; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-01 { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-02 { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-02:before, .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-02:after { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-03 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-03:before, .dd-menu-open .dd-bars .dd-bar .dd-bar-in.dd-bar-in-03:after { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .dd-menu-open .dd-bars .dd-bar.dd-bar-01, .dd-menu-open .dd-bars .dd-bar.dd-bar-02, .dd-menu-open .dd-bars .dd-bar.dd-bar-03 { left: 0px; } .dd-menu-open .dd-bars .dd-bar.dd-bar-01 { top: 0px; } .dd-menu-open .dd-bars .dd-bar.dd-bar-02 { top: 7px; } .dd-menu-open .dd-bars .dd-bar.dd-bar-03 { top: 14px; } .dd-menu-open:hover .dd-bars .dd-bar .dd-bar-in:before, .dd-menu-open:hover .dd-bars .dd-bar .dd-bar-in:after { -webkit-transform: translateX(56px); -moz-transform: translateX(56px); -o-transform: translateX(56px); -ms-transform: translateX(56px); transform: translateX(56px); -webkit-transition-duration: 1s; transition-duration: 1s; } .dd-menu-open .dd-label { display: none; } @media only screen and (min-width: 768px) { .dd-menu-open { top: 30px; left: 30px; } .dd-menu-open .dd-label { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 16px; color: #FFFFFF; margin-left: 9px; font-weight: 300; text-transform: uppercase; } } @media only screen and (min-width: 1080px) { .dd-menu-open { top: 50px; left: 50px; } } .dd-b-menu { position: absolute; z-index: 70; top: 0; left: 0; bottom: 0; width: 100%; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-b-menu.open { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .dd-b-menu .dd-menu-close { font-size: 11px; text-transform: uppercase; position: relative; z-index: 10; margin-top: 15px; margin-right: 16px; float: right; padding-right: 31px; color: #000000; } .dd-b-menu .dd-menu-close:before, .dd-b-menu .dd-menu-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #000000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-b-menu .dd-menu-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-b-menu .dd-menu-close:hover { text-decoration: none; } .dd-b-menu .dd-menu-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-b-menu .dd-menu-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-b-menu .dd-b-main-menu { background: #FFF url(../images/bg-menu.webp) center center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .dd-b-menu .dd-b-main-menu a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-b-menu .dd-b-main-menu .dd-b-body { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; width: 100%; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu { margin-bottom: 10px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li { text-transform: uppercase; margin-bottom: 5px; font-size: 16px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li a { color: #002333; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li a:hover { color: #B1861F; text-decoration: none; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li.active a { color: #B1861F; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li:last-child { margin-bottom: 0; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info { margin-bottom: 10px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-phone { margin: 0; font-size: 20px; color: #002333; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-phone a { color: #002333; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-phone a:hover { color: #B1861F; text-decoration: none; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-links { font-size: 13px; line-height: 25px; color: #000000; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-links a { color: #000000; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-links a:hover { color: #B1861F; text-decoration: none; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info *:last-child { margin-bottom: 0; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li { font-size: 16px; line-height: 1.25em; margin-bottom: 15px; text-align: center; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li h3 { font-size: 16px; text-transform: uppercase; color: #FFFFFF; display: flex; flex-flow: column; align-items: center; justify-content: space-between; margin-top: 30px; margin-bottom: 30px; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li h2 { text-transform: uppercase; color: #FFFFFF; display: flex; flex-flow: column; align-items: center; justify-content: space-between; margin-bottom: 30px; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li h3:after { margin-top: 10px; content: ""; display: block; width: 40px; height: 5px; background-color: #FFFFFF; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li a { color: #FFFFFF; display: block; padding: 0 50px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li a.active, .dd-b-menu .dd-b-sub-menu .dd-sub-menu li a:hover { color: #EDB633; text-decoration: none; position: relative; z-index: 5; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li a.active:after, .dd-b-menu .dd-b-sub-menu .dd-sub-menu li a:hover:after { content: ""; display: block; position: absolute; width: 0px; height: 2px; background-color: #EDB633; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; -webkit-animation: sub-menu-hover 0.3s ease-out 1; -moz-animation: sub-menu-hover 0.3s ease-out 1; -ms-animation: sub-menu-hover 0.3s ease-out 1; -o-animation: sub-menu-hover 0.3s ease-out 1; animation: sub-menu-hover 0.3s ease-out 1; animation-fill-mode: forwards; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li a strong { font-weight: 700; } .dd-b-menu .dd-b-sub-menu .dd-sub-menu li:last-child { margin-bottom: 0; } @media only screen and (min-width: 375px) { .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu { margin-bottom: 20px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li { margin-bottom: 10px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info { margin-bottom: 20px; } } @media only screen and (min-width: 768px) { .dd-b-menu { right: auto; width: 550px; } .dd-b-menu .dd-menu-close { margin-top: 27px; color: #FFFFFF; } .dd-b-menu .dd-menu-close:before, .dd-b-menu .dd-menu-close:after { background-color: #FFFFFF; } .dd-b-menu .dd-b-main-menu { right: auto; width: 300px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu { margin-bottom: 12%; } .dd-b-menu .dd-b-sub-menu { position: absolute; left: 300px; top: 0; bottom: 0; width: 250px; background-color: rgba(0, 35, 51, 0.9); } } @media only screen and (min-width: 1080px) { .dd-b-menu { right: auto; width: 690px; } .dd-b-menu .dd-b-main-menu { width: 390px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li { font-size: 16px; margin-bottom: 6%; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-phone { font-size: 28px; margin-bottom: 10px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-links { line-height: 35px; } .dd-b-menu .dd-b-sub-menu { width: 300px; left: 390px; } } @media only screen and (min-width: 1690px) { .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu { margin-bottom: 15%; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-main-menu li { font-size: 18px; margin-bottom: 10%; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-phone { font-size: 30px; } .dd-b-menu .dd-b-main-menu .dd-b-body .dd-menu-contact-info .dd-links { line-height: 35px; } } @media only screen and (max-width: 767px) { .dd-b-menu .dd-menu-close { margin-left: 16px; float: left; } } /* .-----------------------------------------------------. | FLASH SCREEN | '-----------------------------------------------------' */ @-webkit-keyframes background-animation { 0% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @-moz-keyframes background-animation { 0% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @-ms-keyframes background-animation { 0% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @-o-keyframes background-animation { 0% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } @keyframes background-animation { 0% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } .mobile-view #fp-nav, .tablet-view #fp-nav { display: none !important; } @media only screen and (min-width: 1080px) { #fp-nav { display: block; padding-top: 0; padding-bottom: 0; } #fp-nav.right { right: 50px; } #fp-nav:before { content: ""; display: block; position: absolute; height: 17vh; background-color: rgba(255, 255, 255, 0.3); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); left: 50%; top: 0; width: 1px; margin-top: -26px; } #fp-nav ul li { margin: 0 0 35px 0; width: 8px; height: 8px; } #fp-nav ul li:nth-last-child(1) { margin-bottom: 0; } #fp-nav ul li a { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #fp-nav ul li a span { background-color: #FFFFFF; width: 100%; height: 100%; margin: 0 !important; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #fp-nav ul li a.active { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } #fp-nav ul li a.active span { width: 100%; height: 100%; } } #fp-nav ul li .fp-tooltip { font-family: Montserrat; text-transform: uppercase; top: -10px; } .dd-s-flashscreen { position: fixed; z-index: 9998; top: 0; bottom: 0; left: 0; right: 0; background-color: #003851; } .dd-s-flashscreen .dd-flashscreen { display: block; width: 100%; height: 100vh; object-fit: cover; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 2s ease-out; -moz-transition: all 2s ease-out; -o-transition: all 2s ease-out; transition: all 2s ease-out; } .dd-s-flashscreen.start { background: linear-gradient(0deg, #002333, #003851); background-size: 100% 400%; -webkit-animation: background-animation 5s linear infinite; -moz-animation: background-animation 5s linear infinite; -ms-animation: background-animation 5s linear infinite; -o-animation: background-animation 5s linear infinite; animation: background-animation 5s linear infinite; } .dd-s-flashscreen.start .dd-flashscreen { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .dd-s-flashscreen .dd-logo-flashscreen { z-index: 9999; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* .-----------------------------------------------------. | INTRO SECTION | '-----------------------------------------------------' */ @-webkit-keyframes intro-sub-heading { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } 33% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 66% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } } @-moz-keyframes intro-sub-heading { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } 33% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 66% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } } @-ms-keyframes intro-sub-heading { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } 33% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 66% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } } @-o-keyframes intro-sub-heading { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } 33% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 66% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } } @keyframes intro-sub-heading { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } 33% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 66% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); top: 100%; } } @-webkit-keyframes scroll-down-button { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 31%; } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 56%; } } @-moz-keyframes scroll-down-button { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 31%; } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 56%; } } @-ms-keyframes scroll-down-button { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 31%; } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 56%; } } @-o-keyframes scroll-down-button { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 31%; } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 56%; } } @keyframes scroll-down-button { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 31%; } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 56%; } } .dd-scroll-btn { position: absolute; bottom: 7%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); height: 15vh; width: 26px; } @media only screen and (min-width: 1080px) { .dd-scroll-btn { height: 10vh; } } .dd-scroll-btn span { display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 100%; height: 26px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: absolute; z-index: 20; } .dd-scroll-btn span:first-child { background-color: #FFFFFF; top: 0; left: 0; } .dd-scroll-btn span:first-child:before, .dd-scroll-btn span:first-child:after { background-color: #003143; width: 6px; height: 1px; content: ""; display: block; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 50%; left: 50%; margin-left: -5px; margin-top: 1px; } .dd-scroll-btn span:first-child:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -1px; } .villas .dd-scroll-btn span:first-child { background-color: #7C7C7C; } .villas .dd-scroll-btn span:first-child:before, .villas .dd-scroll-btn span:first-child:after { background-color: #FFFFFF; } .dd-scroll-btn span:nth-child(2) { width: 6px; height: 6px; background-color: #FFFFFF; top: 38px; left: 50%; margin-left: -3px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-animation: scroll-down-button 1.5s linear infinite; -moz-animation: scroll-down-button 1.5s linear infinite; -ms-animation: scroll-down-button 1.5s linear infinite; -o-animation: scroll-down-button 1.5s linear infinite; animation: scroll-down-button 1.5s linear infinite; } .villas .dd-scroll-btn span:nth-child(2) { background-color: rgba(124, 124, 124, 0.4); } .dd-scroll-btn span:last-child { border: 1px solid #FFFFFF; left: 0; bottom: 0; } .villas .dd-scroll-btn span:last-child { border-color: #7C7C7C; } .dd-scroll-btn:hover span { -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } @media only screen and (min-width: 1080px) { .dd-scroll-btn .dd-scroll-btn { height: 10vh; } } .dd-s-intro .dd-logo { position: absolute; z-index: 10; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); top: 23px; display: block; } .dd-s-intro .dd-logo img { display: block; width: 150px; } .ie .dd-s-intro .dd-logo { z-index: 99; } .ie9 .dd-s-intro .dd-logo { z-index: 9999; } .dd-s-intro .dd-b-text { text-align: center; width: 100%; margin: 0; display: flex; flex-flow: column; justify-content: center; align-items: center; margin-bottom: 20px; } .dd-s-intro .dd-main-heading { font-size: 20px; line-height: 1.25em; font-weight: 300; text-transform: uppercase; color: #FFFFFF; margin-bottom: 0; } .dd-s-intro .dd-main-heading span { font-size: 16px; display: block; text-align: center; } .dd-s-intro .dd-sub-heading { color: #FFFFFF; font-size: 15px; line-height: 1.4em; font-weight: 700; text-transform: uppercase; margin-bottom: 0; } .dd-s-intro .dd-sub-heading span { width: 100%; display: block; padding-left: 20px; padding-right: 20px; } .dd-s-intro .slick-dots { bottom: auto; top: 130px; left: 0; right: 0; margin: 0 auto; width: 100%; height: 16px; display: flex; align-items: center; justify-content: center; } .dd-s-intro .slick-dots li { display: block; margin: 0 10px; width: 10px; height: 10px; } .dd-s-intro .slick-dots li button { display: block; width: 100%; height: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #FFFFFF; text-indent: -1000em; overflow: hidden; } .dd-s-intro .slick-dots li button:before { display: none; } .dd-s-intro .slick-dots li.slick-active button { opacity: .6; } .dd-s-intro .dd-sky { display: flex; align-items: center; justify-content: center; flex-flow: column-reverse; height: 100vh; padding: 0 20px; } .dd-s-intro .dd-sky .dd-fullscreen-banner { position: relative; z-index: 5; } .dd-s-intro #dd-viewport { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; cursor: none; background: #153964; background: -moz-linear-gradient(top, #153964 0%, #6caafa 50%, #7eafef 100%); background: -webkit-linear-gradient(top, #153964 0%, #6caafa 50%, #7eafef 100%); background: linear-gradient(to bottom, #153964 0%, #6caafa 50%, #7eafef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#153964', endColorstr='#7eafef',GradientType=0 ); } .dd-s-intro #dd-world { position: absolute; z-index: 2; left: 50%; top: 50%; margin-left: -256px; margin-top: -256px; height: 512px; width: 512px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; } .dd-s-intro #dd-world div { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; } .ie .dd-s-intro #dd-world, .gecko .dd-s-intro #dd-world { background: url(../images/cloud-ie.webp) 0 0 no-repeat; background-size: cover; left: 0; top: 0; bottom: 30%; right: 0; margin-left: 0; margin-top: 0; height: 100%; width: 100%; } .ie .dd-s-intro #dd-world div, .gecko .dd-s-intro #dd-world div { display: none; } .dd-s-intro .dd-cloud-base { position: absolute; left: 256px; top: 256px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .dd-s-intro .dd-cloud-layer { position: absolute; left: 50%; top: 50%; width: 256px; height: 256px; margin-left: -128px; margin-top: -128px; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; max-width: none; } @media only screen and (min-width: 768px) { .dd-s-intro .dd-b-text { padding: 0 60px; pointer-events: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; width: 100%; z-index: 10; } .dd-s-intro .dd-sky { display: block; padding: 0; } .dd-s-intro .dd-sky img { width: 100%; height: 100%; object-fit: cover; } .dd-s-intro .slick-dots { top: 50%; left: 20px; right: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: auto; display: block; } .dd-s-intro .slick-dots li { margin: 20px 0; } } @media only screen and (min-width: 1080px) { .dd-s-intro .dd-logo { top: 50px; } .dd-s-intro .dd-scroll-btn { height: 10vh; } .dd-s-intro .dd-main-heading { font-weight: 100; font-size: 6vh; display: inline-block; vertical-align: middle; } .dd-s-intro .dd-main-heading span { font-size: 3vh; } .dd-s-intro .dd-sub-heading { display: inline-block; vertical-align: middle; font-size: 3vh; width: 35%; margin-top: 0; } .dd-s-intro .dd-sub-heading span { text-align: left; padding-right: 0; } .dd-s-intro .slick-dots { left: 50px; } } /* .-----------------------------------------------------. | GENERAL MAP & HOTPOTS | '-----------------------------------------------------' */ .dd-scroll-area { overflow: hidden; height: 100% !important; } .dd-scroll-area .dd-map-hotpot { position: relative; z-index: 5; left: 50% !important; top: 50% !important; height: 100%; } .dd-scroll-area .dd-map-hotpot img { display: block; object-fit: cover; } .dd-scroll-area .dd-map-hotpot .dd-hotpot { position: absolute; z-index: 6; left: 0; top: 0; bottom: 0; right: 0; -moz-transform-origin: center center; -o-transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; margin: auto; } /* .-----------------------------------------------------. | LOCATION SECTION | '-----------------------------------------------------' */ @-webkit-keyframes location-key-hotpot { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } } @-moz-keyframes location-key-hotpot { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } } @-ms-keyframes location-key-hotpot { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } } @-o-keyframes location-key-hotpot { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } } @keyframes location-key-hotpot { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); } } @-webkit-keyframes h-move { 0% { left: 0px; } 100% { left: 400px; } } @-moz-keyframes h-move { 0% { left: 0px; } 100% { left: 400px; } } @-ms-keyframes h-move { 0% { left: 0px; } 100% { left: 400px; } } @-o-keyframes h-move { 0% { left: 0px; } 100% { left: 400px; } } @keyframes h-move { 0% { left: 0px; } 100% { left: 400px; } } @-webkit-keyframes v-move { 0% { top: 0px; } 100% { top: 400px; } } @-moz-keyframes v-move { 0% { top: 0px; } 100% { top: 400px; } } @-ms-keyframes v-move { 0% { top: 0px; } 100% { top: 400px; } } @-o-keyframes v-move { 0% { top: 0px; } 100% { top: 400px; } } @keyframes v-move { 0% { top: 0px; } 100% { top: 400px; } } .dd-s-location { background-color: #FFFFFF; } .dd-s-location .dd-b-location { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .dd-s-location .dd-scroll-area { padding-top: 0; padding-bottom: 0; } @media only screen and (min-width: 1080px) { .dd-s-location .dd-scroll-area { padding: 0; } } .dd-s-location .dd-location-map .dd-hotpot { width: 45px; height: 45px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 10; cursor: pointer; } .dd-s-location .dd-location-map .dd-hotpot.is-area { background-color: #003143; width: 38px; height: 38px; cursor: default; } .dd-s-location .dd-location-map .dd-hotpot.is-area:before { height: 31px; width: 1px; background-color: #003143; content: ""; display: block; position: absolute; left: 50%; bottom: 38px; } .dd-s-location .dd-location-map .dd-hotpot.is-area:after { content: ''; background-color: rgba(0, 49, 67, 0.4); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; top: -6px; right: -6px; left: -6px; bottom: -6px; width: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); display: block; padding: 0; } .dd-s-location .dd-location-map .dd-hotpot.is-area .dd-label { font-size: 14px; line-height: 22px; position: absolute; z-index: 5; bottom: 42px; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #003143; text-align: center; padding: 5px 25px; white-space: nowrap; color: #FFFFFF; text-transform: uppercase; } .dd-s-location .dd-location-map .dd-hotpot.is-area .dd-label strong { font-weight: 700; display: block; } .dd-s-location .dd-location-map .dd-hotpot.is-government { background-color: #d62828; background-image: url(../images/icon-city-hall-w.svg); background-size: auto 60%; } .dd-s-location .dd-location-map .dd-hotpot.is-school { background-color: #284d87; background-image: url(../images/icon-filter-school-white.svg); } .dd-s-location .dd-location-map .dd-hotpot.is-entertainment { background-color: #ff006e; background-image: url(../images/icon-places.svg); background-size: auto 60%; } .dd-s-location .dd-location-map .dd-hotpot.is-industrial { background-color: #fca311; background-image: url(../images/icon-factory.svg); background-size: auto 60%; } .dd-s-location .dd-location-map .dd-hotpot.is-hospital { background-color: #bf3460; background-image: url(../images/icon-filter-hospital-white.svg); } .dd-s-location .dd-location-map .dd-hotpot.is-market { background-color: #02c39a; background-image: url(../images/icon-shopping.svg); background-size: auto 50%; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa { background-color: #003143; width: 38px; height: 38px; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa:before { height: 31px; width: 1px; background-color: #003143; content: ""; display: block; position: absolute; left: 50%; bottom: 38px; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa:after { content: ''; background-color: rgba(0, 49, 67, 0.4); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; top: -6px; right: -6px; left: -6px; bottom: -6px; width: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); display: block; padding: 0; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label { position: absolute; z-index: 5; bottom: 45px; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #003143 url(../images/logo-text-w.svg) center center no-repeat; background-size: 117px 26px; width: 150px; height: 50px; display: block; overflow: hidden; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar { position: absolute; width: 25px; height: 2px; background-color: #FFFFFF; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-delay { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-top { top: 0px; left: 0px; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-right { top: 0px; right: 0px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transform-origin: 100% 0; -webkit-transform-origin: 100% 0; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-bottom { bottom: 0px; left: 0px; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-left { top: 0px; left: 2px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-top, .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-bottom { -webkit-animation: h-move 1s linear infinite; -moz-animation: h-move 1s linear infinite; -ms-animation: h-move 1s linear infinite; -o-animation: h-move 1s linear infinite; animation: h-move 1s linear infinite; } .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-right, .dd-s-location .dd-location-map .dd-hotpot.is-suncasa .dd-label .dd-bar.dd-left { -webkit-animation: v-move 1s linear infinite; -moz-animation: v-move 1s linear infinite; -ms-animation: v-move 1s linear infinite; -o-animation: v-move 1s linear infinite; animation: v-move 1s linear infinite; } .dd-s-location .dd-location-map .dd-hotpot:after { content: attr(data-place); display: block; position: absolute; text-transform: uppercase; font-size: 14px; line-height: 1.3em; color: #FFFFFF; background-color: #003143; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; top: 50%; right: 50px; width: 211px; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: none; padding: 4px 6px; } .dd-s-location .dd-location-map .dd-hotpot.is-right:after { left: 50px; right: auto; } .dd-s-location .dd-location-map .dd-hotpot:hover { z-index: 12; } .dd-s-location .dd-location-map .dd-hotpot:hover:after { display: block; } .dd-s-location .dd-location-map .dd-hotpot.hide { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-s-location .dd-location-filter { position: absolute; z-index: 30; bottom: 20px; left: 20px; right: 20px; font-size: 0; line-height: 0; text-align: center; } .dd-s-location .dd-location-filter li { display: inline-block; vertical-align: middle; margin-right: 20px; margin-bottom: 10px; position: relative; z-index: 5; background-color: transparent; } .dd-s-location .dd-location-filter li a { width: 40px; height: 40px; display: flex; align-items: center; background: none; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .dd-s-location .dd-location-filter li a:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; content: ""; display: block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: auto 60%; border: 2px solid transparent; } .dd-s-location .dd-location-filter li a.dd-filter-all:before { border-color: #a3b2bb; background-color: #FFFFFF; background-image: url(../images/icon-filter-all.svg); background-size: auto 60%; } .dd-s-location .dd-location-filter li a.dd-filter-industrial:before { background-color: #fca311; background-image: url(../images/icon-factory.svg); } .dd-s-location .dd-location-filter li a.dd-filter-government:before { background-color: #d62828; background-image: url(../images/icon-city-hall-w.svg); } .dd-s-location .dd-location-filter li a.dd-filter-school:before { background-color: #284d87; background-image: url(../images/icon-filter-school-white.svg); background-size: auto 40%; } .dd-s-location .dd-location-filter li a.dd-filter-hospital:before { background-color: #bf3460; background-image: url(../images/icon-filter-hospital-white.svg); background-size: auto 50%; } .dd-s-location .dd-location-filter li a.dd-filter-market:before { background-color: #02c39a; background-image: url(../images/icon-shopping.svg); background-size: auto 50%; } .dd-s-location .dd-location-filter li a.dd-filter-entertainment:before { background-color: #ff006e; background-image: url(../images/icon-places.svg); } .dd-s-location .dd-location-filter li a.dd-filter-download:before { background-color: #FFFFFF; background-image: url(../images/icon-download.svg); background-size: auto 40%; border-color: #a3b2bb; } .dd-s-location .dd-location-filter li a.active:before { border-color: #003143; } .dd-s-location .dd-location-filter li:last-child { margin-right: 0; } @media only screen and (min-width: 1080px) { .dd-s-location .dd-location-filter { left: 50px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); bottom: auto; right: auto; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .dd-s-location .dd-location-filter:after { display: none; } .dd-s-location .dd-location-filter li { display: block; margin-right: 0; margin-bottom: -1px; background-color: rgba(141, 141, 141, 0.1); } .dd-s-location .dd-location-filter li a { width: 100%; height: auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid rgba(0, 0, 0, 0.2); color: #8d8d8d; text-transform: uppercase; font-size: 14px; line-height: 20px; padding: 10px 35px 10px 0; text-align: left; } .dd-s-location .dd-location-filter li a:before { border: none; margin: 0 15px; } .dd-s-location .dd-location-filter li a.active { background-color: #003143; } .dd-s-location .dd-location-filter li a.active:hover { background-color: #003143; } .dd-s-location .dd-location-filter li a:hover { background-color: #a3b2bb; text-decoration: none; color: #FFFFFF; } } /* .-----------------------------------------------------. | PROJECT OVERVIEW SECTION | '-----------------------------------------------------' */ @-webkit-keyframes hotpot-hover { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-moz-keyframes hotpot-hover { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-ms-keyframes hotpot-hover { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes hotpot-hover { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes hotpot-hover { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes dot-breadcrumb { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); } } @-moz-keyframes dot-breadcrumb { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); } } @-ms-keyframes dot-breadcrumb { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); } } @-o-keyframes dot-breadcrumb { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); } } @keyframes dot-breadcrumb { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 80% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); } } @-webkit-keyframes hotpot-label { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 0; } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: auto; padding: 0 20px; } } @-moz-keyframes hotpot-label { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 0; } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: auto; padding: 0 20px; } } @-ms-keyframes hotpot-label { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 0; } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: auto; padding: 0 20px; } } @-o-keyframes hotpot-label { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 0; } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: auto; padding: 0 20px; } } @keyframes hotpot-label { 0% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 0; } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); width: auto; padding: 0 20px; } } @-webkit-keyframes icon-fade { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @-moz-keyframes icon-fade { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @-ms-keyframes icon-fade { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @-o-keyframes icon-fade { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes icon-fade { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 50% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @-webkit-keyframes hotpot-line { 0% { height: 0; } 100% { height: 80px; } } @-moz-keyframes hotpot-line { 0% { height: 0; } 100% { height: 80px; } } @-ms-keyframes hotpot-line { 0% { height: 0; } 100% { height: 80px; } } @-o-keyframes hotpot-line { 0% { height: 0; } 100% { height: 80px; } } @keyframes hotpot-line { 0% { height: 0; } 100% { height: 80px; } } @-webkit-keyframes back-icon { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -o-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); } } @-moz-keyframes back-icon { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -o-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); } } @-ms-keyframes back-icon { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -o-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); } } @-o-keyframes back-icon { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -o-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); } } @keyframes back-icon { 0% { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -o-transform: translateX(-30%); -ms-transform: translateX(-30%); transform: translateX(-30%); } } @-webkit-keyframes nothing {} @-moz-keyframes nothing {} @-ms-keyframes nothing {} @-o-keyframes nothing {} .dd-s-project-overview { background-color: #f9f6ed; } .dd-s-project-overview .dd-compass { background: url(../images/icon-compass.webp) 0 0 no-repeat; background-size: 80px 80px; width: 80px; height: 80px; position: absolute; z-index: 60; left: 21px; bottom: 21px; } .dd-s-project-overview .dd-project-overview-decor { width: 30%; height: 100%; position: absolute; z-index: 999; top: -30px; right: 0; background: url(../images/bg-hoatiet.svg) right 0 no-repeat; background-size: 100% auto; pointer-events: none; } @media only screen and (min-width: 768px) { .dd-s-project-overview .dd-project-overview-decor { width: 20%; top: -40px; right: 150px; } } @media only screen and (min-width: 1080px) { .dd-s-project-overview .dd-project-overview-decor { width: 20%; top: -80px; right: 250px; } } .dd-s-project-overview .dd-map-hotpot .dd-hotpot { width: 50px; height: 50px; cursor: pointer; } .dd-s-project-overview .dd-map-hotpot .dd-hotpot:before { content: ""; display: block; position: absolute; width: 1px; height: 0; background-color: #FFFFFF; bottom: 50%; left: 50%; z-index: 5; } .dd-s-project-overview .dd-map-hotpot .dd-hotpot:after { content: attr(data-place); display: block; position: absolute; text-transform: uppercase; color: #FFFFFF; background-color: #002333; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; bottom: 105px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; z-index: 6; text-align: center; font-size: 20px; line-height: 34px; width: 0; overflow: hidden; padding: 0; } .dd-s-project-overview .dd-map-hotpot .dd-hotpot span { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: block; position: relative; top: 50%; background: #FFFFFF; left: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; -webkit-backface-visibility: hidden; } .dd-s-project-overview .dd-map-hotpot .dd-hotpot span:before, .dd-s-project-overview .dd-map-hotpot .dd-hotpot span:after { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; background: #FFFFFF; margin-left: -5px; margin-top: -5px; width: 30px; height: 30px; content: ""; display: block; -webkit-backface-visibility: hidden; } .dd-s-project-overview .dd-map-hotpot .dd-hotpot span:before { animation: wave 3s infinite ease-out; } .dd-s-project-overview .dd-map-hotpot .dd-hotpot span:after { animation: wave 3s 1.5s infinite ease-out; } .dd-s-project-overview .dd-project-slide { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; } .dd-s-project-overview .dd-project-slide.active { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); z-index: 20; } .dd-s-project-overview .dd-project-slide .dd-scroll-area { padding: 0; } .dd-s-project-overview .dd-suncasa-map { position: relative; background-color: #003143; } .dd-s-project-overview .dd-suncasa-map .dd-scroll-area { height: 100vh ; } .dd-s-project-overview .dd-suncasa-map .map-suncasa { width: 100%; height: auto; position: relative; } .dd-s-project-overview .dd-suncasa-map .map-suncasa > img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: auto; object-fit: contain; pointer-events: none; } .dd-s-project-overview .dd-suncasa-map .map-suncasa > img.overlays { opacity: 0; } .dd-s-project-overview .dd-suncasa-map .map-suncasa > img.overlays.active { opacity: 1; } .dd-s-project-overview .dd-suncasa-map .map-suncasa .map-suncasa-overlays { position: relative; z-index: 2; width: 100%; height: 100%; } .dd-s-project-overview .dd-suncasa-map .map-suncasa .map-suncasa-overlays svg { display: block; width: 100%; height: 100%; opacity: 0; } .dd-s-project-overview .dd-suncasa-map .map-suncasa .map-suncasa-overlays svg > g > * { cursor: pointer; } .dd-s-project-overview .dd-suncasa-map .map-suncasa .text-overlays { position: absolute; z-index: 3; bottom: 150px; left: 0; right: 0; margin: 0 auto; text-align: center; width:400px; padding:20px 20px 0; background:rgba(0,0,0,0.5); } .dd-s-project-overview .dd-suncasa-map .map-suncasa .text-overlays h3 { font-size: 20px; font-weight: 700; margin-bottom: 5px; color: #FFFFFF; } .dd-s-project-overview .dd-suncasa-map .map-suncasa .text-overlays p { font-size: 12px; color: #FFFFFF; } .dd-s-project-overview .dd-project-info { display: none; position: absolute; z-index: 32; left: 20px; right: 20px; top: 0; bottom: auto; pointer-events: none; } .dd-s-project-overview .dd-project-info .dd-back { position: absolute; top: 38px; left: 0; color: #FFFFFF; letter-spacing: 1px; font-size: 12px; line-height: 14px; } .dd-s-project-overview .dd-project-info .dd-back:before { content: ""; display: inline-block; position: relative; background: url(../images/icon-back-white.svg) 0 0 no-repeat; background-size: 43px 14px; width: 43px; height: 14px; vertical-align: middle; margin-right: 8px; } .dd-s-project-overview .dd-project-info .dd-read-more { display: none; } .dd-s-project-overview .dd-project-info .dd-b-head { pointer-events: auto; padding-top: 91px; } .dd-s-project-overview .dd-project-info .dd-b-head h2 { font-size: 20px; line-height: 1.25em; text-transform: uppercase; font-weight: 300; padding-right: 45px; position: relative; z-index: 2; display: inline-block; color: #FFFFFF; letter-spacing: 1px; margin-bottom: 0; } .dd-s-project-overview .dd-project-info .dd-b-head h2 strong { font-weight: 700; } .dd-s-project-overview .dd-project-info .dd-b-head h2:after { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; color: rgba(0, 0, 0, 0.7); font-weight: 300; text-align: center; width: 30px; height: 30px; line-height: 1em; background: #FFFFFF url(../images/icon-plus.svg) center center no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 5; font-size: 24px; cursor: pointer; } .dd-s-project-overview .dd-project-info .dd-b-head h2:before { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 4; right: -5px; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.4); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; } .dd-s-project-overview .dd-project-info .dd-b-body { pointer-events: auto; background-color: rgba(0, 35, 51, 0.9); border-top: 1px solid #c9b45f; padding: 65px 20px 20px 20px; position: absolute; z-index: 9; top: 20px; display: none; } .dd-s-project-overview .dd-project-info .dd-b-body .dd-close { font-size: 12px; text-transform: uppercase; position: absolute; z-index: 10; float: right; padding-right: 35px; color: #FFFFFF; top: 15px; right: 16px; padding-top: 2px; } .dd-s-project-overview .dd-project-info .dd-b-body .dd-close:before, .dd-s-project-overview .dd-project-info .dd-b-body .dd-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-project-overview .dd-project-info .dd-b-body .dd-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-project-overview .dd-project-info .dd-b-body .dd-close:hover { text-decoration: none; } .dd-s-project-overview .dd-project-info .dd-b-body .dd-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-s-project-overview .dd-project-info .dd-b-body .dd-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-s-project-overview .dd-project-info .dd-b-body p { font-size: 12px; line-height: 1.5em; letter-spacing: 0px; color: #FFFFFF; } .dd-s-project-overview .dd-project-info .dd-b-body *:last-child { margin-bottom: 0; } @media only screen and (min-width: 768px) { .dd-s-project-overview .dd-project-info .dd-b-body { width: 100%; padding-bottom: 45px; } .dd-s-project-overview .dd-project-info .dd-b-body p { line-height: 20px; letter-spacing: 1px; } } @media only screen and (min-width: 1080px) { .dd-s-project-overview .dd-project-info { left: 6%; right: 6%; top: 16%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .dd-s-project-overview .dd-project-info .dd-back { position: relative; display: block; text-align: right; top: auto; left: auto; } .dd-s-project-overview .dd-project-info .dd-back:hover { text-decoration: none; } .dd-s-project-overview .dd-project-info .dd-back:hover:before { -webkit-animation: back-icon 1s linear infinite; -moz-animation: back-icon 1s linear infinite; -ms-animation: back-icon 1s linear infinite; -o-animation: back-icon 1s linear infinite; animation: back-icon 1s linear infinite; } .dd-s-project-overview .dd-project-info .dd-b-head { padding-top: 0; display: inline-block; vertical-align: middle; } .dd-s-project-overview .dd-project-info .dd-b-head h2 { font-size: 6vh; line-height: 1em; display: block; text-align: right; } .dd-s-project-overview .dd-project-info .dd-b-head h2:after { font-size: 20px; } .dd-s-project-overview .dd-project-info .dd-b-head .dd-back { margin-top: 7px; padding-right: 45px; } .dd-s-project-overview .dd-project-info .dd-b-body { top: 91px; width: 50%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } .dd-s-project-overview .dd-project-info .dd-b-body p { font-size: 14px; } .dd-s-project-overview .dd-project-info.dd-mini-ver { left: 0; top: 11%; right: auto; bottom: auto; width: 490px; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-back, .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-close { display: none; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more { display: block; float: right; text-transform: uppercase; font-size: 12px; line-height: 18px; color: #FFFFFF; position: relative; z-index: 5; padding-left: 25px; margin-top: 6px; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more:before, .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more:after { content: ""; display: block; position: absolute; width: 12px; height: 1px; background-color: #FFFFFF; top: 4px; left: 0; transform-origin: 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more:after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); left: 17px; top: 5px; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more:hover { text-decoration: none; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more:hover:before, .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-read-more:hover:after { -webkit-animation: icon-fade 1s linear infinite; -moz-animation: icon-fade 1s linear infinite; -ms-animation: icon-fade 1s linear infinite; -o-animation: icon-fade 1s linear infinite; animation: icon-fade 1s linear infinite; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-b-head { background-color: rgba(0, 35, 51, 0.9); padding: 33px 20px 22px 40px; display: block; width: 100%; max-width: none; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-b-head h2 { font-size: 20px; line-height: 24px; display: block; text-align: left; margin-bottom: 0px; padding-bottom: 2px; border-bottom: 1px solid #c9b45f; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-b-head h2:after, .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-b-head h2:before { display: none; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-b-body { background-color: rgba(255, 255, 255, 0.9); border: none; padding: 23px 20px 33px 40px; display: block !important; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-left: 0; width: 100%; max-width: none; top: 82px; } .dd-s-project-overview .dd-project-info.dd-mini-ver .dd-b-body p { font-size: 14px; color: rgba(0, 0, 0, 0.8); } .dd-s-project-overview .dd-project-info.dd-mini-ver.open-content .dd-b-body { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .dd-s-project-overview .dd-project-info.dd-mini-ver.open-content .dd-read-more:before, .dd-s-project-overview .dd-project-info.dd-mini-ver.open-content .dd-read-more:after { top: 12px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-project-overview .dd-project-info.dd-mini-ver.open-content .dd-read-more:after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); top: 13px; } } .dd-s-project-overview .dd-project-breadcrumb { display: none; position: absolute; z-index: 30; bottom: 0; left: 20px; right: 0; } .dd-s-project-overview .dd-project-breadcrumb a { display: inline-block; } .dd-s-project-overview .dd-project-breadcrumb .dd-hotpot { width: 12px; height: 12px; background-color: #FFFFFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; z-index: 39; } .dd-s-project-overview .dd-project-breadcrumb .dd-hotpot:before { content: ""; display: block; position: absolute; border: 1px solid #FFFFFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 100%; height: 100%; -webkit-animation: dot-breadcrumb 1.3s linear infinite; -moz-animation: dot-breadcrumb 1.3s linear infinite; -ms-animation: dot-breadcrumb 1.3s linear infinite; -o-animation: dot-breadcrumb 1.3s linear infinite; animation: dot-breadcrumb 1.3s linear infinite; } .dd-s-project-overview .dd-project-breadcrumb .dd-thumbnail { height: 118px; position: relative; z-index: 35; display: block; } .dd-s-project-overview .dd-project-breadcrumb .dd-cur-slide { font-size: 12px; margin: 0; color: rgba(0, 0, 0, 0.7); text-transform: uppercase; padding-left: 47px; line-height: 20px; background: #FFFFFF; position: absolute; z-index: 29; right: 31px; bottom: 37px; left: 60px; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .dd-s-project-overview .dd-project-breadcrumb .dd-back { color: #FFFFFF; letter-spacing: 1px; background: rgba(0, 35, 51, 0.7); position: absolute; z-index: 28; left: 60px; right: 0; bottom: 8px; font-size: 12px; line-height: 29px; text-align: right; padding-right: 10px; pointer-events: auto; margin-bottom: 0; text-transform: uppercase; } .dd-s-project-overview .dd-project-breadcrumb .dd-back a:first-child { color: #FFFFFF; } .dd-s-project-overview .dd-project-breadcrumb .dd-back a:first-child:before { content: ""; display: inline-block; position: relative; background: url(../images/icon-back-white.svg) 0 0 no-repeat; background-size: 38px 12px; width: 38px; height: 12px; vertical-align: middle; margin-right: 5px; } .dd-s-project-overview .dd-project-breadcrumb .dd-back a:first-child:hover { text-decoration: none; color: #c9b45f; } .dd-s-project-overview .dd-project-breadcrumb .dd-back span { display: none; } @media only screen and (min-width: 768px) { .dd-s-project-overview .dd-project-breadcrumb { max-width: 320px; } .dd-s-project-overview .dd-project-breadcrumb .dd-back { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } } @media only screen and (min-width: 1080px) { .dd-s-project-overview .dd-project-breadcrumb { left: 6%; bottom: 20px; right: auto; } .dd-s-project-overview .dd-project-breadcrumb .dd-hotpot { width: 10px; height: 10px; } .dd-s-project-overview .dd-project-breadcrumb .dd-hotpot:before { content: ""; display: block; position: absolute; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; width: 1px; height: 80px; z-index: 6; background-color: #FFFFFF; bottom: 50%; left: 50%; z-index: 5; -webkit-animation: nothing 0s linear 1; -moz-animation: nothing 0s linear 1; -ms-animation: nothing 0s linear 1; -o-animation: nothing 0s linear 1; animation: nothing 0s linear 1; } .dd-s-project-overview .dd-project-breadcrumb .dd-hotpot:after { content: attr(data-place); display: block; position: absolute; text-transform: uppercase; color: rgba(0, 0, 0, 0.7); background-color: #FFFFFF; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; bottom: 80px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; z-index: 6; text-align: center; font-size: 13px; line-height: 20px; padding: 0 22px; } .dd-s-project-overview .dd-project-breadcrumb .dd-cur-slide { display: none; } .dd-s-project-overview .dd-project-breadcrumb .dd-back { left: 60px; top: 50%; right: auto; bottom: auto; font-size: 14px; line-height: 30px; text-align: center; padding-right: 0; width: 600px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .dd-s-project-overview .dd-project-breadcrumb .dd-back a:first-child { vertical-align: middle; display: inline-block; } .dd-s-project-overview .dd-project-breadcrumb .dd-back a:first-child:before { display: none; } .dd-s-project-overview .dd-project-breadcrumb .dd-back span { display: inline-block; vertical-align: middle; padding-left: 20px; font-weight: 700; text-transform: uppercase; margin-left: 10px; position: relative; z-index: 10; } .dd-s-project-overview .dd-project-breadcrumb .dd-back span:before, .dd-s-project-overview .dd-project-breadcrumb .dd-back span:after { content: ""; display: block; position: absolute; top: 49%; left: 0; width: 13px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; } .dd-s-project-overview .dd-project-breadcrumb .dd-back span:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } .dd-s-project-overview .dd-garden-popin { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: translate(-200%, 50%); -moz-transform: translate(-200%, 50%); -o-transform: translate(-200%, 50%); -ms-transform: translate(-200%, 50%); transform: translate(-200%, 50%); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; z-index: 100; width: 280px; } .dd-s-project-overview .dd-garden-popin.open { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .dd-s-project-overview .dd-garden-popin .dd-b-head { background-color: rgba(0, 35, 51, 0.75); padding: 14px 7px 14px 20px; } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close { float: right; position: relative; width: 20px; height: 20px; } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close:before, .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close:hover { text-decoration: none; } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-s-project-overview .dd-garden-popin .dd-b-head h2 { font-size: 16px; line-height: 1.25em; padding-top: 1px; letter-spacing: 1px; font-weight: 300; color: #FFFFFF; text-transform: uppercase; margin-bottom: 6px; } .dd-s-project-overview .dd-garden-popin .dd-b-head h2 strong { font-weight: 700; } .dd-s-project-overview .dd-garden-popin .dd-b-head .dd-desc { font-size: 12px; line-height: 1.25em; color: #FFFFFF; padding-right: 13px; font-weight: 300; } .dd-s-project-overview .dd-garden-popin .dd-b-head *:last-child { margin-bottom: 0; } .dd-s-project-overview .dd-garden-popin .dd-b-body { border-top: 1px solid #c9b45f; background-color: rgba(0, 35, 51, 0.8); } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider { text-align: center; -webkit-transform: translateX(-500%); -moz-transform: translateX(-500%); -o-transform: translateX(-500%); -ms-transform: translateX(-500%); transform: translateX(-500%); position: absolute; top: 0; left: 0; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider.active { position: relative; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-slide { padding: 43px 20px 34px 20px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .dd-photo { margin-bottom: 20px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .dd-photo img { display: block; margin: 0 auto; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider p { font-size: 12px; line-height: 18px; color: #FFFFFF; margin-bottom: 0; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider p.dd-lang-vn { text-transform: uppercase; margin-bottom: 3px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-dots { bottom: 16px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-dots li { width: 7px; height: 7px; margin: 0 6px; padding: 0; cursor: pointer; background-color: #FFFFFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-dots li button { width: 7px; height: 7px; padding: 0; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-dots li button:before { display: none; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-dots li.slick-active { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } @media only screen and (min-width: 1080px) { .dd-s-project-overview .dd-garden-popin { width: 100%; max-width: 840px; } .dd-s-project-overview .dd-garden-popin .dd-b-head { padding: 30px 17px 23px 30px; } .dd-s-project-overview .dd-garden-popin .dd-b-head h2 { font-size: 20px; } .dd-s-project-overview .dd-garden-popin .dd-b-body { overflow: hidden; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider { font-size: 0; line-height: 0; text-align: left; margin-bottom: -1px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-slide { padding: 0; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider .slick-dots { display: none; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider > div { display: inline-block; width: 33.33%; height: 260px; border-right: 1px solid rgba(17, 111, 165, 0.7); border-bottom: 1px solid rgba(17, 111, 165, 0.7); text-align: center; padding-top: 20px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider > div .dd-photo { height: 150px; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider > div .dd-photo img { max-height: 100%; } .dd-s-project-overview .dd-garden-popin .dd-b-body .dd-garden-slider > div:nth-child(3n) { border-right: none; } .dd-s-project-overview .dd-garden-popin.wide { max-width: none; width: 88%; } .dd-s-project-overview .dd-garden-popin.wide .dd-b-body .dd-garden-slider > div { width: 25%; } .dd-s-project-overview .dd-garden-popin.wide .dd-b-body .dd-garden-slider > div:nth-child(3n) { border-right: 1px solid rgba(17, 111, 165, 0.7); } .dd-s-project-overview .dd-garden-popin.wide .dd-b-body .dd-garden-slider > div:nth-child(4n) { border-right: none; } } .dd-s-project-overview .dd-club-popin { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: translate(-500%, -50%); -moz-transform: translate(-500%, -50%); -o-transform: translate(-500%, -50%); -ms-transform: translate(-500%, -50%); transform: translate(-500%, -50%); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; z-index: 100; width: 280px; } .dd-s-project-overview .dd-club-popin.open { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .dd-s-project-overview .dd-club-popin .dd-b-head { background-color: #002333; padding: 14px 7px 14px 20px; } .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close { float: right; position: relative; width: 20px; height: 20px; } .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close:before, .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close:hover { text-decoration: none; } .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-s-project-overview .dd-club-popin .dd-b-head .dd-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-s-project-overview .dd-club-popin .dd-b-head h2 { font-size: 16px; line-height: 1.25em; padding-top: 1px; letter-spacing: 1px; font-weight: 300; color: #FFFFFF; text-transform: uppercase; margin-bottom: 0; } .dd-s-project-overview .dd-club-popin .dd-b-head h2 strong { font-weight: 700; } .dd-s-project-overview .dd-club-popin .dd-b-body { border-top: 1px solid #c9b45f; background-color: #002333; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo .dd-photo img { display: block; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo .dd-mini-map { display: none; } @media only screen and (min-width: 768px) { .dd-s-project-overview .dd-club-popin { width: 70%; } } @media only screen and (min-width: 1080px) { .dd-s-project-overview .dd-club-popin.open { width: 84.5%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); right: 0; left: auto; } .dd-s-project-overview .dd-club-popin .dd-b-head { padding: 30px 17px 23px 30px; } .dd-s-project-overview .dd-club-popin .dd-b-head h2 { font-size: 20px; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo { display: flex; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo .dd-photo { width: 60%; flex-grow: 0; flex-shrink: 0; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo .dd-photo img { display: block; width: 100%; height: 100%; object-fit: contain; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo .dd-mini-map { display: flex; align-items: center; justify-content: center; width: 40%; padding: 20px; flex-grow: 0; flex-shrink: 0; } .dd-s-project-overview .dd-club-popin .dd-b-body .dd-b-photo .dd-mini-map img { display: block; width: 100%; height: 100%; object-fit: contain; } } .dd-b-zoom { position: absolute; top: 80px; right: 20px; width: 40px; height: 40px; z-index: 11; } .dd-b-zoom .js-zoom-map { display: block; width: 100%; height: 100%; right: 20px; top: 20px; background-image: url(../images/zoom-in.svg); background-repeat: no-repeat; background-size: 100%; } .map-zoom .dd-scroll-area .dd-map-hotpot { overflow: scroll; width: 2010px !important; height: 1080px !important; } .map-zoom .dd-b-zoom .js-zoom-map { background-image: url(../images/zoom-out.svg); } /* .-----------------------------------------------------. | HERO | '-----------------------------------------------------' */ .dd-s-hero { background-repeat: no-repeat; background-size: cover; background-position: center top; background-color: #f9f6ed; text-align: center; } .dd-s-hero:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; background-color: rgba(0, 0, 0, 0.3); } .dd-s-hero .fp-tableCell { position: relative; z-index: 2; vertical-align: top; } .dd-s-hero .dd-b-head { position: relative; display: inline-block; padding: 115px 20px 0; } .dd-s-hero .dd-b-head h1 { font-size: 20px; line-height: 1em; text-align: center; color: #FFFFFF; font-weight: 300; letter-spacing: 0.5px; } .dd-s-hero .dd-b-head h1 strong { font: 400 30px/1em 'Cormorant SC', serif; display: block; } .dd-s-hero .dd-b-description { text-align: center; padding-left: 20px; padding-right: 20px; width: 100%; color: #FFFFFF; } .mobile-view .dd-s-hero .dd-b-description { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 7%; } .dd-s-hero .dd-b-description p { font-size: 12px; line-height: 1.5em; } @media only screen and (min-width: 768px) { .dd-s-hero .dd-b-head { margin-bottom: 5px; } .dd-s-hero .dd-b-head h1 { font-size: 3vh; margin-bottom: 0; } .dd-s-hero .dd-b-head h1 strong { font-size: 5vh; display: inline-block; vertical-align: middle; } .dd-s-hero .dd-b-description { max-width: 60vw; margin: 0 auto; padding-left: 0; padding-right: 0; } .dd-s-hero .dd-b-description p { font-size: 14px; } } @media only screen and (min-width: 1024px) { .dd-s-hero .dd-b-head h1 { font-size: 5vh; } .dd-s-hero .dd-b-head h1 strong { font-size: 10vh; } } @media only screen and (min-width: 1080px) { .dd-s-hero .dd-b-head { padding-top: 300px; } .dd-s-hero .dd-b-head:after { background-size: 44px 45px; width: 44px; height: 45px; top: 125px; } .dd-s-hero .dd-b-head.dd-orchid:after { left: 26%; top: 125px; } .dd-s-hero .dd-b-head.dd-peony:after { left: 58%; top: 139px; } .dd-s-hero .dd-b-head.dd-iris:after { left: 70%; top: 135px; } .dd-s-hero .dd-b-head.dd-camellia:after { left: 23%; top: 127px; } .dd-s-hero .dd-b-description { max-width: 800px; } } @media only screen and (min-width: 1690px) { .dd-s-hero .dd-b-head:after { background-size: 78px 90px; width: 78px; height: 90px; top: 84px; } } /* .-----------------------------------------------------. | BLUEPRINT | '-----------------------------------------------------' */ .dd-s-blueprint { background-color: #f9f6ed; } .dd-s-blueprint .fp-tableCell { vertical-align: top; } .dd-s-blueprint .dd-b-container { padding-left: 20px; padding-right: 20px; padding-top: 30vh; } .dd-s-blueprint .dd-b-head { text-align: center; padding-bottom: 36px; border-bottom: 1px dashed rgba(0, 0, 0, 0.3); } .dd-s-blueprint .dd-b-head h2 { font-size: 20px; line-height: 1.25em; color: #002333; font-weight: 300; text-transform: uppercase; margin-bottom: 1px; } .dd-s-blueprint .dd-b-head h2 strong { font-weight: 700; } .dd-s-blueprint .dd-b-head p { color: #7C7C7C; } .dd-s-blueprint .dd-b-head *:last-child { margin-bottom: 0; } .dd-s-blueprint .dd-b-blueprint-view:before { content: ""; display: block; position: relative; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #000000 transparent transparent transparent; margin: -1px auto 0; } .dd-s-blueprint .dd-blueprint-slider .dd-b-photo { margin-bottom: 16px; } .dd-s-blueprint .dd-blueprint-slider .dd-b-photo img { display: block; margin: 0 auto; } .dd-s-blueprint .dd-blueprint-slider .dd-b-photo img.dd-view { height: 20vh; } .dd-s-blueprint .dd-blueprint-slider p { color: rgba(0, 0, 0, 0.7); text-transform: uppercase; text-align: center; } .dd-s-blueprint .dd-blueprint-slider .slick-slide *:last-child { margin-bottom: 0; } .dd-s-blueprint .dd-blueprint-slider .slick-list { margin-bottom: 14px; } .dd-s-blueprint .dd-blueprint-slider .slick-dots { display: block !important; position: relative; bottom: auto; top: auto; left: auto; right: auto; font-size: 0; line-height: 0; width: 100%; } .dd-s-blueprint .dd-blueprint-slider .slick-dots li { border: none; height: 16px; width: 16px; display: inline-block; vertical-align: middle; padding: 0; margin: 0 7% 0 0; background-color: transparent; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /*border-bottom: 1px solid rgba($daintree, 0.7); border-top: 1px solid rgba($white, 0);*/ background-color: rgba(0, 35, 51, 0.7); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .dd-s-blueprint .dd-blueprint-slider .slick-dots li button { display: none; } .dd-s-blueprint .dd-blueprint-slider .slick-dots li.slick-active { /*width: 28%;*/ /*border-bottom: 2px solid $daintree;*/ border-top: none; background-color: #002333; } .dd-s-blueprint .dd-blueprint-slider .slick-dots li:last-child { margin-right: 0; } .dd-s-blueprint .dd-villa-compass, .dd-s-blueprint .dd-villa-mini-map { display: none; } @media only screen and (min-width: 768px) { .dd-s-blueprint .dd-b-container { padding-top: 18vh; } .dd-s-blueprint .dd-b-head { width: 90%; max-width: 940px; margin: 0 auto; } .dd-s-blueprint .dd-blueprint-slider .slick-dots li { /*width: 50px;*/ margin-right: 20px; } .dd-s-blueprint .dd-blueprint-slider .slick-dots li.slick-active { /*width: 80px;*/ } .dd-s-blueprint .dd-blueprint-slider .dd-b-photo { margin-bottom: 2.5vh; } .dd-s-blueprint .dd-blueprint-slider .slick-list { margin-bottom: 2.5vh; } .dd-s-blueprint .dd-blueprint-slider .dd-b-photo img.dd-view { height: 39vh; } .dd-s-blueprint .dd-blueprint-slider .dd-b-photo img.dd-grass { height: 5vh; } } @media only screen and (min-width: 1080px) { .dd-s-blueprint .dd-b-head { width: 60%; padding-bottom: 9vh; } .dd-s-blueprint .dd-b-head h2 { font-size: 5vh; } .dd-s-blueprint .dd-b-container { padding-left: 0; padding-right: 0; padding-top: 19vh; } .dd-s-blueprint .dd-b-blueprint-view:before { border-width: 12px 12px 0 12px; } .dd-s-blueprint .dd-villa-compass, .dd-s-blueprint .dd-villa-mini-map { display: block; } } /* .-----------------------------------------------------. | FLOORS | '-----------------------------------------------------' */ .dd-s-floors { background-color: #f9f6ed; } .dd-s-floors .dd-b-container { padding-left: 20px; padding-right: 20px; padding-top: 5vh; } .dd-s-floors .dd-b-view-detail { background-color: #f9f6ed; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 280px; display: none; z-index: 52; } .dd-s-floors .dd-b-view-detail .dd-b-head { background-color: #002333; padding: 13px 8px 3px 20px; } .dd-s-floors .dd-b-view-detail .dd-b-head h2 { font-size: 16px; line-height: 1.25em; color: #FFFFFF; font-weight: 300; text-transform: uppercase; padding-top: 1px; } .dd-s-floors .dd-b-view-detail .dd-b-head h2 strong { font-weight: 700; } .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close { width: 20px; height: 20px; float: right; position: relative; z-index: 5; } .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close:before, .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close:hover { text-decoration: none; } .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-s-floors .dd-b-view-detail .dd-b-head .dd-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-s-floors .dd-b-view-detail .dd-b-body { border: 1px solid #c9b45f; padding-top: 11px; padding-bottom: 16px; text-align: center; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor { position: absolute; left: -999%; top: 0; z-index: 1; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor.active { position: relative; z-index: 50; left: auto; text-align: left; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor img { max-height: 69vh; display: block; margin: 0 auto 15px; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor h5 { font-size: 14px; line-height: 1.25em; color: #002333; margin-bottom: 1px; text-transform: uppercase; text-align: center; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor p { font-size: 14px; line-height: 1.25em; color: #002333; text-align: center; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor *:last-child { margin-bottom: 0; } .dd-s-floors .dd-b-view-general { position: relative; z-index: 5; } .dd-s-floors .dd-b-view-general .dd-hotpot { position: absolute; z-index: 6; border-bottom: 1px solid #002333; font-size: 12px; line-height: 1.25em; color: #002333; top: 0; left: 0; width: 100%; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); text-transform: uppercase; } .dd-s-floors .dd-b-view-general .dd-hotpot span { width: 180px; float: right; padding: 8px 11px 10px 18px; text-align: left; display: block; background-color: rgba(255, 255, 255, 0.5); font-weight: 400; } .dd-s-floors .dd-b-view-general .dd-hotpot span strong { font-weight: 400; } .dd-s-floors .dd-b-view-general .dd-hotpot span:after { content: ""; display: inline-block; position: relative; background: url(../images/icon-plus.svg) center center no-repeat; background-size: 75%; width: 16px; height: 16px; color: #002333; border: 1px solid #002333; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; float: right; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-floors .dd-b-view-general .dd-hotpot:hover span:after { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .dd-s-floors .dd-b-view-general img { display: block; max-width: 100%; } .dd-s-floors .dd-download { display: block; padding: 19px 10px 18px; text-align: center; border: 1px solid #000000; text-transform: uppercase; font-size: 12px; line-height: 20px; background-color: #fcf3d9; letter-spacing: 0.5px; color: #002333; position: absolute; z-index: 6; bottom: -80px; left: 0; right: 0; } .dd-s-floors .dd-download strong { font-weight: 700; } .dd-s-floors .dd-download:hover { background-color: #eadbae; text-decoration: none; } .dd-s-floors .dd-download:before { content: ''; background: url(../images/icon-download.svg) 0 0 no-repeat; background-size: 21px 20px; width: 21px; height: 20px; margin-right: 17px; display: inline-block; vertical-align: middle; } .dd-s-floors .dd-villa-mini-map, .dd-s-floors .dd-villa-compass { display: none; } @media only screen and (min-width: 768px) { .dd-s-floors .dd-b-container { padding-top: 15vh; } .dd-s-floors .dd-b-view-general { max-width: 80%; margin: 0 auto 30px auto; } .dd-s-floors .dd-b-view-general img { max-height: 59vh; } .dd-s-floors .dd-download { max-width: 370px; right: auto; } } @media only screen and (min-width: 1080px) { .dd-s-floors .dd-b-container { width: calc(100% - 360px); max-width: 100vw; margin: 0 auto; padding: 0; } .dd-s-floors .fp-tableCell { vertical-align: middle; } .dd-s-floors .dd-b-floors { font-size: 0; line-height: 0; position: relative; z-index: 5; } .dd-s-floors .dd-b-view-detail { width: 50%; display: inline-block !important; vertical-align: middle; background-color: transparent; position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .dd-s-floors .dd-b-view-detail .dd-b-head { display: none; } .dd-s-floors .dd-b-view-detail .dd-b-body { border: none; padding-top: 50px; padding-bottom: 0; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor { display: inline-block; } .dd-s-floors .dd-b-view-detail .dd-b-body .dd-floor img { max-height: 79vh; max-width:35vw; margin-right: 30px; } .dd-s-floors .dd-b-view-general { width: 50%; margin-bottom: 0; display: inline-block; vertical-align: middle; } .dd-s-floors .dd-b-view-general .dd-hotpot { border-bottom-style: dashed; font-size: 14px; } .dd-s-floors .dd-b-view-general .dd-hotpot span { padding: 3px 0px; text-align: right; background-color: transparent; } .dd-s-floors .dd-b-view-general .dd-hotpot span:after { font-size: 16px; margin-left: 10px; } .dd-s-floors .dd-b-view-general img { height: 35vh; margin-left: 10px; } .dd-s-floors .dd-villa-compass, .dd-s-floors .dd-villa-mini-map { display: block; } } /* .-----------------------------------------------------. | GALLERY VILLA | '-----------------------------------------------------' */ .dd-other-villas { display: none; font-size: 0; line-height: 0; position: absolute; z-index: 10; bottom: 0; left: 0; right: 0; } .villas .dd-other-villas { display: block; } .dd-other-villas a { color: #FFFFFF; text-transform: uppercase; font-size: 12px; line-height: 18px; padding: 10px 5px; text-align: center; width: 50%; display: inline-block; } .dd-other-villas a:hover { color: #c9b45f; text-decoration: none; } .dd-other-villas a:before, .dd-other-villas a:after { content: ""; display: block; position: absolute; background-color: rgba(255, 255, 255, 0.45); width: 20px; height: 1px; top: 50%; } .dd-other-villas a:first-child:before { left: 0; } .dd-other-villas a:first-child:after { content: ""; display: block; position: absolute; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ width: 1px; height: 30px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .dd-other-villas a:last-child { border: none; } .dd-other-villas a:last-child:before { display: none; } .dd-other-villas a:last-child:after { right: 0; } @media only screen and (min-width: 768px) { .dd-other-villas { padding-top: 2vh; padding-bottom: 2vh; } } @media only screen and (min-width: 1080px) { .dd-other-villas a { font-size: 18px; line-height: 1.25em; font-weight: 700; } .dd-other-villas a:before, .dd-other-villas a:after { display: inline-block; position: relative; width: 22%; top: auto; vertical-align: middle; } .dd-other-villas a:first-child:before { left: auto; margin-right: 3.5%; } .dd-other-villas a:last-child:after { right: auto; margin-left: 3.5%; } } .dd-s-gallery { background-color: #f9f6ed; } @media only screen and (min-width: 1080px) { .dd-s-gallery .fp-tableCell { display: block; } } .dd-b-gallery-popin { background-color: rgba(0, 35, 51, 0.9); border-top: 1px solid #c9b45f; padding: 65px 20px 45px 20px; position: absolute; z-index: 9; top: 70px; left: 20px; right: 20px; display: none; } .dd-b-gallery-popin .dd-close { font-size: 12px; text-transform: uppercase; position: absolute; z-index: 10; float: right; padding-right: 35px; color: #FFFFFF; top: 15px; right: 16px; padding-top: 2px; } .dd-b-gallery-popin .dd-close:before, .dd-b-gallery-popin .dd-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-b-gallery-popin .dd-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-b-gallery-popin .dd-close:hover { text-decoration: none; } .dd-b-gallery-popin .dd-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-b-gallery-popin .dd-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-b-gallery-popin p { font-size: 12px; line-height: 20px; letter-spacing: 1px; color: #FFFFFF; } .dd-b-gallery-popin .dd-placeholder *:last-child { margin-bottom: 0; } @media only screen and (min-width: 1080px) { .dd-b-gallery-popin { top: 18vh; left: 50%; right: auto; z-index: 999; width: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding-left: 50px; padding-right: 50px; } .dd-b-gallery-popin p { font-size: 14px; line-height: 25px; } } .dd-b-gallery-slider { height: 100%; } .dd-b-gallery-slider .dd-b-content { color: #fff; position: absolute; z-index: 10; top: 21vh; left: 20px; right: 20px; display: block; } .dd-b-gallery-slider .slick-list { height: 100%; } .dd-b-gallery-slider .slick-list .slick-track { height: 100%; } .dd-b-gallery-slider .slick-slide { height: 100%; } .dd-b-gallery-slider .slick-slide:after { content: ""; display: block; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 49, 67, 0.3); } .dd-b-gallery-slider .slick-slide .dd-photo { height: 100%; object-fit: cover; display: block; width: 100%; } .dd-b-gallery-slider .slick-dots { bottom: 25px; } .dd-b-gallery-slider .slick-dots li button:before { color: #ffffff; opacity: 1; font-size: 40px; } .dd-b-gallery-slider .slick-dots li.slick-active button:before { opacity: 1; font-size: 50px; } @media only screen and (min-width: 1080px) { .dd-b-gallery-slider .dd-b-content { position: absolute; z-index: 10; top: 21vh; left: 50px; right: 50px; display: block; } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading { font-size: 6vh; line-height: 1.25em; text-transform: uppercase; font-weight: 300; position: relative; z-index: 2; color: #FFFFFF; letter-spacing: 1px; padding-right: 45px; display: inline-block; margin-bottom: 0; } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading strong { font-weight: 700; } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading:after { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; color: rgba(0, 0, 0, 0.7); font-weight: 300; text-align: center; width: 30px; height: 30px; line-height: 1em; background: #FFFFFF url(../images/icon-plus.svg) center center no-repeat; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 5; font-size: 24px; cursor: pointer; } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading:before { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 4; right: -5px; width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.4); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading:before { -webkit-animation: gallery-hotspot 1.3s linear infinite; -moz-animation: gallery-hotspot 1.3s linear infinite; -ms-animation: gallery-hotspot 1.3s linear infinite; -o-animation: gallery-hotspot 1.3s linear infinite; animation: gallery-hotspot 1.3s linear infinite; top: 49%; right: 15px; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading span:before { content: ""; display: inline-block; position: relative; width: 70px; height: 6vh; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: left center; background-size: 55%; border-right: 1px solid #FFFFFF; margin-right: 29px; margin-top: -2px; } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading.dd-heading-bird-garden span:before { background-image: url(../images/icon-bird-garden-white.svg); } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading.dd-heading-pool span:before { background-image: url(../images/icon-pool-white.svg); } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading.dd-heading-living span:before { background-image: url(../images/icon-living-white.svg); } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading.dd-heading-bedroom span:before { background-image: url(../images/icon-bedroom-white.svg); } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading.dd-heading-family-area span:before { background-image: url(../images/icon-family-area-white.svg); } .dd-b-gallery-slider .dd-b-content .dd-b-head .dd-heading.dd-heading-terrace span:before { background-image: url(../images/icon-terrace-white.svg); } .dd-b-gallery-slider .dd-b-content .dd-b-body { display: none; } .dd-b-gallery-slider .dd-b-content .dd-b-body p { font-size: 14px; line-height: 25px; color: #FFFFFF; } } /* .-----------------------------------------------------. | GALLERY HOME | '-----------------------------------------------------' */ .dd-category-menu { position: relative; z-index: 1; margin-bottom: 20px; } .dd-category-menu .current { background-color: #002333; border: 1px solid #003143; font-size: 16px; line-height: 20px; padding: 17px 40px 15px 25px; color: #b7b7b7; margin-bottom: 0; text-transform: uppercase; cursor: pointer; } .dd-category-menu .current:after { content: ""; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-width: 7px 5px 0 5px; border-color: #b7b7b7 transparent transparent transparent; right: 25px; top: 50%; margin-top: -4px; } .dd-category-menu ul { top: 100%; left: 1px; right: 1px; position: absolute; z-index: 2; background-color: rgba(183, 183, 183, 0.8); display: none; } .dd-category-menu ul li { border-bottom: 1px solid #b7b7b7; text-transform: uppercase; } .dd-category-menu ul li a { font-size: 16px; line-height: 20px; color: #002333; padding: 17px 25px 15px; display: block; } .dd-category-menu ul li a:hover { text-decoration: none; } .dd-category-menu ul li:last-child { border: none; } @media only screen and (min-width: 768px) { .dd-category-menu { width: 240px; } } @media only screen and (min-width: 1080px) { .dd-category-menu { margin-bottom: 0; } } .dd-s-gallery-media { z-index: 999; } .dd-s-gallery-media .dd-b-container { padding-left: 20px; padding-right: 20px; padding-top: 30px; } .dd-s-gallery-media .dd-b-container.loading .dd-gallery-slider, .dd-s-gallery-media .dd-b-container.loading .dd-gallery-nav { pointer-events: none; opacity: .5; } .dd-s-gallery-media .dd-gallery-slider { max-height: 35vh; overflow: hidden; } .dd-s-gallery-media .dd-gallery-slider .slick-slide { position: relative; z-index: 2; font-size: 0; line-height: 0; max-height: 35vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide img { width: 100%; object-fit: cover; height: 35vh; max-width: none; } .dd-s-gallery-media .dd-gallery-slider .slick-slide.is-video iframe { height: 35vh; width: 100%; } .dd-s-gallery-media .dd-gallery-slider .slick-slide.is-video:after { display: none; } .dd-s-gallery-media .dd-gallery-slider .slick-slide:after { background: -moz-linear-gradient(top, rgba(0, 35, 51, 0) 0%, rgba(16, 35, 50, 0.7) 28%, rgba(16, 35, 50, 0.7) 100%); background: -webkit-linear-gradient(top, rgba(0, 35, 51, 0) 0%, rgba(16, 35, 50, 0.7) 28%, rgba(16, 35, 50, 0.7) 100%); background: linear-gradient(to bottom, rgba(0, 35, 51, 0) 0%, rgba(16, 35, 50, 0.7) 28%, rgba(16, 35, 50, 0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00002333', endColorstr='#b3102332',GradientType=0 ); height: 30%; content: ""; display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info { position: absolute; bottom: 5px; left: 20px; right: 20px; z-index: 5; text-align: center; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info h2 { font-size: 24px; line-height: 1.25em; font-weight: 700; color: #FFFFFF; text-transform: uppercase; margin-bottom: 0px; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info p { font-size: 12px; line-height: 1.5em; color: #a3b2bb; display: none; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info *:last-child { margin-bottom: 0; } .dd-s-gallery-media .dd-gallery-nav { margin-bottom: 5vh; } .dd-s-gallery-media .dd-gallery-nav .slick-slide { height: 60px; overflow: hidden; background-color: #003143; } .dd-s-gallery-media .dd-gallery-nav .slick-slide img { object-fit: cover; min-height: 60px; } .dd-s-gallery-media .dd-gallery-nav .slick-slide.slick-current img { -moz-opacity: 0.3; -khtml-opacity: 0.3; -webkit-opacity: 0.3; opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); } .dd-s-gallery-media .dd-gallery-nav .slick-arrow { width: 40px; height: 40px; background-color: #b7b7b7; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 10; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow:before, .dd-s-gallery-media .dd-gallery-nav .slick-arrow:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; left: 50%; width: 15px; height: 2px; margin-left: -7px; margin-top: -1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 0 0; background-color: #000000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-gallery-media .dd-gallery-nav .slick-arrow:hover { background-color: #FFFFFF; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-prev { left: -10px; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-next { right: -10px; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-next:after, .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-next:before { left: auto; right: 50%; margin-right: -7px; transform-origin: 100% 0; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-disabled { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-s-gallery-media .dd-paging { position: relative; z-index: 1; font-size: 0; line-height: 0; text-align: center; } .dd-s-gallery-media .dd-paging a { display: inline-block; font-size: 16px; line-height: 30px; width: 30px; height: 30px; margin-right: 10px; color: #FFFFFF; vertical-align: middle; text-align: center; } .dd-s-gallery-media .dd-paging a:last-child { margin-right: 0; } .dd-s-gallery-media .dd-paging a:hover, .dd-s-gallery-media .dd-paging a.active { background-color: #FFFFFF; color: #003143; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-decoration: none; } .dd-s-gallery-media .dd-paging a:first-child, .dd-s-gallery-media .dd-paging a:last-child { width: 24px; height: 24px; padding-top: 11px; } .dd-s-gallery-media .dd-paging a:first-child span, .dd-s-gallery-media .dd-paging a:last-child span { font-size: 0; line-height: 0; width: 24px; height: 2px; background-color: #003143; position: relative; z-index: 10; display: block; } .dd-s-gallery-media .dd-paging a:first-child span:before, .dd-s-gallery-media .dd-paging a:first-child span:after, .dd-s-gallery-media .dd-paging a:last-child span:before, .dd-s-gallery-media .dd-paging a:last-child span:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; left: 0; width: 12px; height: 2px; margin-top: -1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 0 0; background-color: #003143; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dd-s-gallery-media .dd-paging a:first-child span:after, .dd-s-gallery-media .dd-paging a:last-child span:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-gallery-media .dd-paging a:first-child:hover, .dd-s-gallery-media .dd-paging a:last-child:hover { background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .dd-s-gallery-media .dd-paging a:first-child:hover span, .dd-s-gallery-media .dd-paging a:last-child:hover span { background-color: #FFFFFF; } .dd-s-gallery-media .dd-paging a:first-child:hover span:before, .dd-s-gallery-media .dd-paging a:first-child:hover span:after, .dd-s-gallery-media .dd-paging a:last-child:hover span:before, .dd-s-gallery-media .dd-paging a:last-child:hover span:after { background-color: #FFFFFF; } .dd-s-gallery-media .dd-paging a:nth-child(n+6) { display: none; } .dd-s-gallery-media .dd-paging a:last-child { display: inline-block; } .dd-s-gallery-media .dd-paging a:last-child span:before, .dd-s-gallery-media .dd-paging a:last-child span:after { right: 0; left: auto; transform-origin: 100% 0; } @media only screen and (min-width: 768px) { .dd-s-gallery-media .dd-b-container { padding-left: 0; padding-right: 0; max-width: 80vw; margin: 0 auto; position: relative; z-index: 1; } .dd-s-gallery-media .dd-gallery-slider { margin: 0 auto; max-height: 400px; overflow: hidden; } .dd-s-gallery-media .dd-gallery-slider .slick-slide { max-height: 400px; } .dd-s-gallery-media .dd-gallery-slider .slick-slide img { height: 400px; } .dd-s-gallery-media .dd-gallery-slider .slick-slide.is-video iframe { height: 400px; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info { bottom: 3vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info h2 { font-size: 36px; margin-bottom: 5px; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info p { display: block; } .dd-s-gallery-media .dd-gallery-nav { max-width: 65vw; margin: 12px auto; } .dd-s-gallery-media .dd-gallery-nav .slick-slide { height: 70px; } .dd-s-gallery-media .dd-gallery-nav .slick-slide img { min-height: 70px; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-prev { left: -20px; } .dd-s-gallery-media .dd-gallery-nav .slick-arrow.slick-next { right: -20px; } .dd-s-gallery-media .dd-paging { max-width: 55vw; margin: 0 auto; } .dd-s-gallery-media .dd-paging a:nth-child(n+6) { display: inline-block; } } @media only screen and (min-width: 1024px) { .dd-s-gallery-media .dd-b-container { max-width: 65vw; } .dd-s-gallery-media .dd-gallery-slider { max-height: 50vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide { max-height: 50vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide img { height: 50vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide.is-video iframe { height: 50vh; } .dd-s-gallery-media .dd-gallery-nav { max-width: 57vw; } .dd-s-gallery-media .dd-gallery-nav .slick-slide { height: 100px; } .dd-s-gallery-media .dd-gallery-nav .slick-slide img { min-height: 100px; } } @media only screen and (min-width: 1080px) { .dd-s-gallery-media .dd-category-menu { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -14vw; margin-bottom: 0; width: 12vw; } .dd-s-gallery-media .dd-gallery-slider { max-height: 60vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide { max-height: 65vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide img { height: 65vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide.is-video { height: 65vh; } .dd-s-gallery-media .dd-gallery-slider .slick-slide.is-video iframe { height: 92%; } .dd-s-gallery-media .dd-gallery-slider .slick-slide .dd-info { bottom: 7vh; } .dd-s-gallery-media .dd-gallery-nav { margin-top: 24px; margin-bottom: 24px; } .dd-s-gallery-media .dd-gallery-nav .slick-slide { height: 10vh; } .dd-s-gallery-media .dd-gallery-nav .slick-slide img { min-height: 10vh; } .dd-s-gallery-media .dd-paging { max-width: 45vw; } } @media only screen and (min-width: 1690px) { .dd-s-gallery-media .dd-gallery-nav .slick-slide { height: 14vh; } .dd-s-gallery-media .dd-gallery-nav .slick-slide img { min-height: 14vh; } } /* .-----------------------------------------------------. | CONTACT SECTION | '-----------------------------------------------------' */ .dd-s-contact-footer .dd-b-container { padding: 0 20px; } @media only screen and (min-width: 1080px) { .dd-s-contact-footer .dd-b-container { width: 100%; padding-left: 50px; padding-right: 50px; padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 1690px) { .dd-s-contact-footer .dd-b-container { max-width: 1400px; margin: 0 auto; padding-top: 150px; padding-bottom: 150px; } } .dd-b-wrapper { font-size: 0; line-height: 0; } .dd-s-contact .dd-b-head { text-align: center; margin-bottom: 7vh; } .dd-s-contact .dd-b-head h2 { font-size: 30px; line-height: 1em; font-weight: 300; color: #FFFFFF; text-transform: uppercase; margin-bottom: 2px; } .dd-s-contact .dd-b-head p { font-size: 12px; line-height: 20px; color: #a3b2bb; } .dd-s-contact .dd-b-head *:last-child { margin-bottom: 0; } .dd-s-contact .dd-b-body .checkbox { margin-bottom: 10px; display: block; } .dd-s-contact .dd-form-popin { z-index: 999; display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 20px; right: 20px; background-color: rgba(0, 49, 67, 0.98); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); padding: 20px; } .dd-s-contact .dd-form-popin .dd-close { width: 20px; height: 20px; float: right; position: relative; margin-bottom: 10px; z-index: 5; } .dd-s-contact .dd-form-popin .dd-close:before, .dd-s-contact .dd-form-popin .dd-close:after { content: ""; display: block; position: absolute; z-index: 11; top: 50%; right: 0; width: 28px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-contact .dd-form-popin .dd-close:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-contact .dd-form-popin .dd-close:hover { text-decoration: none; } .dd-s-contact .dd-form-popin .dd-close:hover:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .dd-s-contact .dd-form-popin .dd-close:hover:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dd-s-contact .checkbox-wrapper { margin-top: 9px; } .dd-s-contact .dd-btn-group { text-align: center; } .dd-s-contact .dd-checkbox-group { text-align: left; } .dd-s-contact .dd-back { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 10px; font-weight: 300; display: none; } .dd-s-contact .dd-btn { width: 100%; margin: 0 auto; } .dd-s-contact .dd-continue { display: none; } @media only screen and (min-width: 768px) { .dd-s-contact .dd-btn { max-width: 240px; } .dd-s-contact .dd-form-popin { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); right: auto; width: 50vw; min-width: 280px; } } @media only screen and (min-width: 1080px) { .dd-s-contact { padding: 30px 30% 30px 50px; margin-bottom: 30px; z-index: 1; position: relative; border: 1px solid #0078ae; } .dd-s-contact .dd-b-head { margin-bottom: 25px; text-align: left; } .dd-s-contact .dd-b-head h2 { font-size: 30px; line-height: 1em; margin-bottom: 15px; font-weight: 300; } .dd-s-contact .dd-form-popin { display: block !important; right: auto; position: absolute; position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); background: transparent; -webkit-box-shadow: none; box-shadow: none; padding: 0; width: auto; } .dd-s-contact .dd-form-popin .dd-close { display: none; } .dd-s-contact .dd-form-popin .dd-input { width: calc(33.3% - 14px); margin: 0 20px 0 0; } .dd-s-contact .dd-form-popin .dd-input:last-child { margin-right: 0; } .dd-s-contact .dd-form-popin .input__field { height: 52px; line-height: 52px; } .dd-s-contact .dd-form-popin .input__label { line-height: 52px; } .dd-s-contact .dd-form-popin .input__field:focus + .input__label .input__label-content, .dd-s-contact .dd-form-popin .input--filled .input__label-content { -webkit-transform: scale3d(0.81, 0.81, 1) translate3d(0, 45px, 0); transform: scale3d(0.81, 0.81, 1) translate3d(0, 45px, 0); } .dd-s-contact .dd-form-popin .dd-checkbox { width: calc(33.3% - 14px); margin: 0 20px 0 0; display: inline-block; } .dd-s-contact .dd-form-popin .dd-checkbox:last-child { margin-right: 0; } .dd-s-contact .dd-form-popin .dd-input-group { margin-bottom: 30px; } .dd-s-contact .dd-form-popin .dd-checkbox-group { margin-bottom: 25px; display: block; } .dd-s-contact .dd-form-popin .dd-btn { width: 202px; float: right; margin-right: 0; height: 40px; font-size: 14px; line-height: 40px; } .dd-s-contact .dd-form-popin .dd-btn:before { content: ""; display: block; position: absolute; height: 1px; width: 251px; top: 50%; left: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); background-color: #FFFFFF; z-index: 9; } .dd-s-contact .dd-form-popin .dd-btn:after { content: ""; display: block; position: absolute; height: 1px; width: 30px; top: 50%; left: 0; background-color: rgba(255, 255, 255, 0.3); z-index: 10; } .dd-s-contact .dd-form-popin .dd-continue { display: none; } .dd-s-contact .dd-form-popin .dd-submit { display: block; } .dd-s-contact .dd-contact-photo { position: absolute; z-index: 100; bottom: 0; right: -10px; width: 25%; } } @media only screen and (min-width: 1690px) { .dd-s-contact { padding: 30px 50% 78px 54px; margin-bottom: 5vh; background: url(../images/bg-contact.webp) right bottom no-repeat; background-size: auto 100%; } .dd-s-contact .dd-contact-photo { position: absolute; z-index: 100; bottom: 0; right: -40px; width: 35%; } .dd-s-contact .dd-b-head { margin-bottom: 32px; } .dd-s-contact .dd-form-popin .dd-input-group { margin-bottom: 47px; } .dd-s-contact .dd-form-popin .dd-checkbox-group { margin-bottom: 32px; } } .dd-form-custom .dd-checkbox-group { margin-bottom: 20px; } .dd-form-custom .dd-checkbox-group *:last-child { margin-bottom: 0; } .dd-form-custom .dd-input-group { margin-bottom: 25px; } .dd-form-custom .dd-input-group *:last-child { margin-bottom: 0; } .dd-form-custom .dd-checkbox { margin-bottom: 10px; display: block; } .dd-form-custom .dd-checkbox input[type=checkbox] { display: none; } .dd-form-custom .dd-checkbox input[type=checkbox]:checked + label:before { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .dd-form-custom .dd-checkbox label { display: block; position: relative; cursor: pointer; z-index: 1; font-size: 12px; line-height: 20px; padding-left: 30px; color: #FFFFFF; } .dd-form-custom .dd-checkbox label:before, .dd-form-custom .dd-checkbox label:after { content: ""; display: block; position: absolute; } .dd-form-custom .dd-checkbox label:before { content: "✓"; font-size: 12px; line-height: 16px; color: #003143; top: 2px; bottom: 2px; left: 2px; text-align: center; z-index: 3; width: 15px; height: 16px; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: #FFFFFF; } .dd-form-custom .dd-checkbox label:after { border: 1px solid #FFFFFF; top: 0; left: 0; z-index: 2; width: 19px; height: 20px; } .dd-form-custom .dd-input { position: relative; z-index: 1; display: inline-block; width: 100%; vertical-align: top; margin-bottom: 25px; } .dd-form-custom .input__field { position: relative; display: block; float: right; height: 40px; line-height: 40px; font-size: 14px; width: 100%; padding: 0; border: none; border-radius: 0; color: #FFFFFF; -webkit-appearance: none; background: transparent; } .dd-form-custom .input__field:focus { outline: none; } .dd-form-custom .input__label { padding: 0; color: #FFFFFF; font-size: 14px; line-height: 40px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; width: 100%; height: 100%; text-align: left; cursor: text; } .dd-form-custom .input__label-content { position: relative; display: block; padding: 0; width: 100%; color: #a3b2bb; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .dd-form-custom .graphic { position: absolute; top: 0; left: 0; fill: none; -webkit-transform: scale3d(1, -1, 1); transform: scale3d(1, -1, 1); -webkit-transition: stroke-dashoffset 0.3s; transition: stroke-dashoffset 0.3s; pointer-events: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 4px; stroke-dasharray: 962; stroke-dashoffset: 558; } .dd-form-custom .input--filled .input__field, .dd-form-custom .input__field:focus { padding-left: 10px; padding-right: 10px; } .dd-form-custom .input__field:focus + .input__label, .dd-form-custom .input--filled .input__label { cursor: default; pointer-events: none; } .dd-form-custom .input__field:focus + .input__label .graphic, .dd-form-custom .input--filled .graphic { stroke-dashoffset: 0; } .dd-form-custom .input__field:focus + .input__label .input__label-content, .dd-form-custom .input--filled .input__label-content { -webkit-transform: scale3d(0.81, 0.81, 1) translate3d(0, 34px, 0); transform: scale3d(0.81, 0.81, 1) translate3d(0, 34px, 0); } .dd-form-custom .dd-btn { border: 1px solid rgba(255, 255, 255, 0.7); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #FFFFFF; background: #003143; cursor: pointer; padding: 0; font-size: 14px; line-height: 48px; text-align: center; display: block; width: 100%; text-transform: uppercase; letter-spacing: 1px; outline: none; position: relative; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-form-custom .dd-btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-form-custom .dd-btn:before { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; } .dd-form-custom .dd-btn:hover, .dd-form-custom .dd-btn:active { color: #003143; background: #FFFFFF; text-decoration: none; } @media only screen and (min-width: 1080px) { .dd-form-custom .dd-input { max-width: 350px; } } /* .-----------------------------------------------------. | ABOUT | '-----------------------------------------------------' */ .dd-s-about { height: 100%; overflow: hidden; } .dd-s-about .dd-mini-menu { padding-left: 20px; padding-right: 20px; padding-top: 50px; margin-bottom: 20px; } .dd-s-about .dd-mini-menu li a { position: relative; z-index: 1; padding-left: 83px; font-weight: 300; font-size: 15px; line-height: 20px; color: #a3b2bb; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-about .dd-mini-menu li a:before { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: #a3b2bb; content: ""; display: block; position: absolute; z-index: 2; left: 0; bottom: 3px; width: 50px; height: 1px; } .dd-s-about .dd-mini-menu li a:hover, .dd-s-about .dd-mini-menu li a.active { color: #FFFFFF; text-decoration: none; } .dd-s-about .dd-mini-menu li a:hover:before, .dd-s-about .dd-mini-menu li a.active:before { height: 3px; background-color: #FFFFFF; } .dd-s-about .dd-mini-menu li a.active { text-transform: uppercase; } .dd-s-about .dd-dot-menu { text-align: center; position: absolute; z-index: 10; bottom: 20px; left: 20px; right: 20px; } .dd-s-about .dd-dot-menu li { margin: 0 10px; padding: 0; cursor: pointer; display: inline-block; } .dd-s-about .dd-dot-menu li a { background-color: #FFFFFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; display: block; width: 10px; height: 10px; font-size: 0; line-height: 0; } .dd-s-about .dd-dot-menu li a.active { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .dd-s-about .dd-b-container { padding-left: 20px; padding-right: 20px; } .dd-s-about .dd-b-container .dd-tab-container { display: none; padding-top: 10px; } .dd-s-about .dd-b-container .dd-tab-container.active { display: block; } .dd-s-about .dd-b-container .dd-tab-container h2 { font-size: 20px; line-height: 1.25em; color: #FFFFFF; font-weight: 300; text-transform: uppercase; text-align: center; } .dd-s-about .dd-b-investor { text-align: center; } .dd-s-about .dd-b-investor .dd-bg-mobile { display: block; margin: 0 auto 10px; max-height: 100px; } .dd-s-about .dd-b-investor .dd-info { padding-top: 20px; } .dd-s-about .dd-b-investor .dd-info p { text-align: justify; font-size: 12px; line-height: 18px; color: #FFFFFF; } .dd-s-about .dd-b-investor .dd-info p.is-large { font-size: 16px; line-height: 20px; font-weight: 600; } .dd-s-about .dd-b-investor .dd-info *:last-child { margin-bottom: 0; } .dd-s-about .dd-b-about .dd-photo { margin-bottom: 10px; } .dd-s-about .dd-b-about .dd-photo img { display: block; width: 100%; } .dd-s-about .dd-b-about .dd-info p { color: #FFFFFF; font-size: 12px; line-height: 18px; font-weight: 300; } .dd-s-about .dd-b-about .dd-info *:last-child { margin-bottom: 0; } @media only screen and (min-width: 768px) { .dd-s-about .fp-tableCell { vertical-align: middle; } .dd-s-about .dd-mini-menu { padding: 0; top: 15vh; left: 30px; position: absolute; z-index: 50; } .dd-s-about .dd-b-container { max-width: 73vw; margin: 0 auto; padding-top: 25vh; } .dd-s-about .dd-b-about .dd-photo { margin-bottom: 20px; } .dd-s-about .dd-b-about .dd-photo img { width: auto; max-height: 30vh; } } @media only screen and (min-width: 1024px) { .dd-s-about { overflow: hidden; } .dd-s-about .dd-b-container { max-width: none; padding: 0; } .dd-s-about .dd-b-container .dd-tab-container { padding-top: 0; } .dd-s-about .dd-b-investor { background: url(../images/vsip.webp) center center no-repeat; background-size: cover; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column; } .dd-s-about .dd-b-investor:before { content: ""; display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: -moz-linear-gradient(to right, #002333 0%, rgba(0, 35, 51, 0.99) 5%, rgba(0, 35, 51, 0.9) 20%, rgba(0, 35, 51, 0.85) 30%, rgba(0, 35, 51, 0.8) 40%, rgba(0, 35, 51, 0.75) 50%, rgba(0, 35, 51, 0.7) 60%, rgba(0, 35, 51, 0.65) 70%, rgba(0, 35, 51, 0.5) 80%, rgba(0, 35, 51, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(to right, #002333 0%, rgba(0, 35, 51, 0.99) 5%, rgba(0, 35, 51, 0.9) 20%, rgba(0, 35, 51, 0.85) 30%, rgba(0, 35, 51, 0.8) 40%, rgba(0, 35, 51, 0.75) 50%, rgba(0, 35, 51, 0.7) 60%, rgba(0, 35, 51, 0.65) 70%, rgba(0, 35, 51, 0.5) 80%, rgba(0, 35, 51, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #002333 0%, rgba(0, 35, 51, 0.99) 5%, rgba(0, 35, 51, 0.9) 20%, rgba(0, 35, 51, 0.85) 30%, rgba(0, 35, 51, 0.8) 40%, rgba(0, 35, 51, 0.75) 50%, rgba(0, 35, 51, 0.7) 60%, rgba(0, 35, 51, 0.65) 70%, rgba(0, 35, 51, 0.5) 80%, rgba(0, 35, 51, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc003851', endColorstr='#00003851',GradientType=1 ); /* IE6-9 */ } .dd-s-about .dd-b-investor .dd-bg-mobile { display: none; } .dd-s-about .dd-b-investor .dd-logo { position: relative; z-index: 2; display: block; margin: 0 auto 40px; } .dd-s-about .dd-b-investor .dd-info { position: relative; z-index: 2; max-width: 420px; margin: 0 auto; padding-left: 30px; padding-right: 30px; } .dd-s-about .dd-b-about { position: relative; z-index: 1; height: 100vh; background: url(../images/vsip.webp) center center no-repeat; background-size: cover; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column; } .dd-s-about .dd-b-about:before { content: ""; display: block; position: absolute; width: 70%; left: 0; top: 0; bottom: 0; z-index: 2; background: -moz-linear-gradient(to right, #002333 0%, rgba(0, 35, 51, 0.99) 5%, rgba(0, 35, 51, 0.9) 20%, rgba(0, 35, 51, 0.85) 30%, rgba(0, 35, 51, 0.8) 40%, rgba(0, 35, 51, 0.75) 50%, rgba(0, 35, 51, 0.7) 60%, rgba(0, 35, 51, 0.65) 70%, rgba(0, 35, 51, 0.5) 80%, rgba(0, 35, 51, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(to right, #002333 0%, rgba(0, 35, 51, 0.99) 5%, rgba(0, 35, 51, 0.9) 20%, rgba(0, 35, 51, 0.85) 30%, rgba(0, 35, 51, 0.8) 40%, rgba(0, 35, 51, 0.75) 50%, rgba(0, 35, 51, 0.7) 60%, rgba(0, 35, 51, 0.65) 70%, rgba(0, 35, 51, 0.5) 80%, rgba(0, 35, 51, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #002333 0%, rgba(0, 35, 51, 0.99) 5%, rgba(0, 35, 51, 0.9) 20%, rgba(0, 35, 51, 0.85) 30%, rgba(0, 35, 51, 0.8) 40%, rgba(0, 35, 51, 0.75) 50%, rgba(0, 35, 51, 0.7) 60%, rgba(0, 35, 51, 0.65) 70%, rgba(0, 35, 51, 0.5) 80%, rgba(0, 35, 51, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc003851', endColorstr='#00003851',GradientType=1 ); /* IE6-9 */ } .dd-s-about .dd-b-about .dd-photo { margin-bottom: 0; margin-right: 0; padding: 0; float: none; max-width: none; border: none; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; } .dd-s-about .dd-b-about .dd-photo img { width: 100%; object-fit: cover; height: 100%; max-height: none; } .dd-s-about .dd-b-about .dd-info { position: absolute; top: 24vh; margin-top: 0; z-index: 5; width: 40vw; left: 112px; padding: 0; background-color: transparent; border: none; } .dd-s-about .dd-b-about .dd-info p { font-size: 12px; line-height: 1.5em; color: #FFFFFF; } } @media only screen and (min-width: 1080px) { .dd-s-about .dd-mini-menu { top: 25vh; left: 50px; } .dd-s-about .dd-b-investor .dd-info { max-width: 600px; padding-left: 30px; padding-right: 30px; } .dd-s-about .dd-b-about:before { width: 70%; } .dd-s-about .dd-b-about .dd-info { left: 132px; width: 40vw; top: 35vh; } .dd-s-about .dd-b-about .dd-info p { font-size: 13px; } } @media only screen and (min-width: 1690px) { .dd-s-about .dd-b-about:before { width: 50%; } .dd-s-about .dd-b-about .dd-info { width: 30vw; top: 33vh; } .dd-s-about .dd-b-about .dd-info p { font-size: 14px; } } /* .-----------------------------------------------------. | NEWS | '-----------------------------------------------------' */ .root-news, .root-news-detail { background-color: #003143; } .dd-s-news { color: #FFFFFF; padding: 90px 20px 13px; } .dd-s-news .dd-cate-dropdown { float: right; position: relative; z-index: 10; margin-top: 2px; } .dd-s-news .dd-cate-dropdown .dd-current-cate { font-size: 14px; line-height: 31px; font-weight: 300; padding-right: 20px; padding-left: 20px; position: relative; z-index: 5; margin-bottom: 0; cursor: pointer; } .dd-s-news .dd-cate-dropdown .dd-current-cate:before, .dd-s-news .dd-cate-dropdown .dd-current-cate:after { content: ""; display: block; position: absolute; width: 8px; height: 1px; background-color: #FFFFFF; top: 12px; right: 2px; transform-origin: 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-news .dd-cate-dropdown .dd-current-cate:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); right: 0; top: 12px; transform-origin: right top; } .dd-s-news .dd-cate-dropdown .dd-current-cate.opening:before, .dd-s-news .dd-cate-dropdown .dd-current-cate.opening:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 17px; right: 4px; } .dd-s-news .dd-cate-dropdown .dd-current-cate.opening:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 17px; right: 0; } .dd-s-news .dd-cate-dropdown .category-list { display: none; position: absolute; width: 160px; right: 0; top: 31px; padding: 0 20px 0 10px; background-color: #003143; } .dd-s-news .dd-cate-dropdown .category-list li { border-bottom: 1px solid #FFFFFF; } .dd-s-news .dd-cate-dropdown .category-list li a { text-align: right; font-size: 14px; line-height: 20px; font-weight: 400; padding: 14px 0 9px; color: #FFFFFF; display: block; } .dd-s-news .dd-cate-dropdown .category-list li a:hover { text-decoration: none; color: #c9b45f; } .dd-s-news .dd-cate-dropdown .category-list li:last-child { border: none; } .dd-s-news .dd-cate-dropdown .category-list li.active a { color: #c9b45f; } .dd-s-news .dd-b-head { margin-bottom: 9px; } .dd-s-news .dd-b-head h2 { font-weight: 300; font-size: 20px; line-height: 30px; text-transform: uppercase; margin-bottom: 0; } .dd-s-news .dd-b-head *:last-child { margin-bottom: 0; } .dd-s-news .dd-b-body .post-list li { background-color: #003143; margin-bottom: 20px; } .dd-s-news .dd-b-body .post-list li:last-child { margin-bottom: 14px; } .dd-s-news .dd-b-body .post-list li * { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-news .dd-b-body .post-list .dd-thumbnail img { display: block; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top { padding: 12px 20px 12px; border-bottom: 1px solid rgba(201, 180, 95, 0.5); } .dd-s-news .dd-b-body .post-list .dd-b-intro-top h3 { color: #FFFFFF; font-size: 18px; line-height: 25px; font-weight: 400; margin-bottom: 0; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top h3 a { color: #FFFFFF; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top h3 a:hover { text-decoration: none; color: #c9b45f; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top .dd-date { color: rgba(255, 255, 255, 0.5); font-size: 14px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top *:last-child { margin-bottom: 0; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom { padding: 10px 20px 10px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom p { font-size: 13px; line-height: 20px; font-weight: 300; margin-bottom: 5px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom .dd-more { color: #c9b45f; text-transform: uppercase; font-size: 13px; line-height: 13px; display: inline-block; margin-left: -20px; font-weight: 300; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom .dd-more:before { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; content: ""; display: inline-block; position: relative; height: 1px; width: 40px; background-color: #c9b45f; vertical-align: middle; margin-right: 4px; margin-top: -3px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom .dd-more:hover { color: #FFFFFF; text-decoration: none; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom .dd-more:hover:before { background-color: #FFFFFF; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom *:last-child { margin-bottom: 0; } .dd-s-news .dd-pagination { font-size: 0; line-height: 0; text-align: center; padding-top: 1px; } .dd-s-news .dd-pagination li { display: inline-block; margin-right: 6px; vertical-align: top; } .dd-s-news .dd-pagination li:last-child, .dd-s-news .dd-pagination li:nth-last-child(2) { margin-right: 0; } .dd-s-news .dd-pagination li.dd-arrows { margin-top: -3px; } .dd-s-news .dd-pagination li.dd-arrows a { width: 11px; height: 20px; position: relative; z-index: 10; font-size: 0; line-height: 0; display: block; } .dd-s-news .dd-pagination li.dd-arrows a:before, .dd-s-news .dd-pagination li.dd-arrows a:after { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; content: ""; display: block; position: absolute; z-index: 11; top: 50%; left: 0; width: 15px; height: 1px; margin-top: -1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 0 0; background-color: #FFFFFF; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .dd-s-news .dd-pagination li.dd-arrows a:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .dd-s-news .dd-pagination li.dd-arrows a:hover:before, .dd-s-news .dd-pagination li.dd-arrows a:hover:after { background-color: #c9b45f; } .dd-s-news .dd-pagination li.dd-arrows.dd-prev { float: left; } .dd-s-news .dd-pagination li.dd-arrows.dd-prev a { left: 0; } .dd-s-news .dd-pagination li.dd-arrows.dd-next { float: right; } .dd-s-news .dd-pagination li.dd-arrows.dd-next a { right: 0; } .dd-s-news .dd-pagination li.dd-arrows.dd-next a:after, .dd-s-news .dd-pagination li.dd-arrows.dd-next a:before { left: auto; right: 0; transform-origin: 100% 0; } .dd-s-news .dd-pagination li a { font-size: 13px; line-height: 13px; font-weight: 300; color: #FFFFFF; padding-left: 12px; padding-right: 12px; display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-news .dd-pagination li a:hover { color: #c9b45f; text-decoration: none; } .dd-s-news .dd-pagination li.active a { color: #c9b45f; border-bottom: 1px solid #c9b45f; padding-bottom: 3px; } @media only screen and (min-width: 768px) { .dd-s-news { padding-bottom: 40px; } .dd-s-news .dd-b-head { margin-bottom: 29px; } .dd-s-news .dd-b-body .post-list { margin-bottom: 35px; } .dd-s-news .dd-b-body .post-list li { width: 49%; margin-right: 2%; display: inline-block; vertical-align: top; margin-bottom: 38px; } .dd-s-news .dd-b-body .post-list li:nth-child(2n) { margin-right: 0; } .dd-s-news .dd-b-body .post-list li:last-child, .dd-s-news .dd-b-body .post-list li:nth-last-child(2) { margin-bottom: 0; } .dd-s-news .dd-b-body .post-list li .dd-thumbnail img { height: 235px; width: 100%; object-fit: cover; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top { padding-top: 23px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom { padding-bottom: 25px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .dd-s-news .dd-pagination li:nth-last-child(2) { margin-right: 6px; } .dd-s-news .dd-pagination li a { font-size: 18px; line-height: 18px; } .dd-s-news .dd-pagination li.dd-arrows { margin-top: 0; } .dd-s-news .dd-pagination li.dd-arrows.dd-prev, .dd-s-news .dd-pagination li.dd-arrows.dd-next { float: none; } } @media only screen and (min-width: 1024px) { .dd-s-news { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1080px) { .dd-s-news { padding: 0 50px 94px; max-width: 1500px; margin: -25vh auto 0; position: relative; z-index: 2; } .dd-s-news .dd-cate-dropdown { border-bottom: 1px solid rgba(255, 255, 255, 0.4); width: 335px; } .dd-s-news .dd-cate-dropdown .dd-current-cate { font-size: 20px; line-height: 33px; padding-right: 30px; padding-left: 0px; } .dd-s-news .dd-cate-dropdown .dd-current-cate:before, .dd-s-news .dd-cate-dropdown .dd-current-cate:after { content: ""; display: block; position: absolute; width: 15px; height: 1px; top: 8px; right: 5px; } .dd-s-news .dd-cate-dropdown .dd-current-cate:after { right: 0; top: 8px; } .dd-s-news .dd-cate-dropdown .dd-current-cate.opening:before, .dd-s-news .dd-cate-dropdown .dd-current-cate.opening:after { top: 20px; right: 7px; } .dd-s-news .dd-cate-dropdown .dd-current-cate.opening:after { top: 20px; right: 0px; } .dd-s-news .dd-cate-dropdown .category-list { width: 100%; top: 33px; padding: 0 20px 0 10px; background-color: #003143; } .dd-s-news .dd-cate-dropdown .category-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .dd-s-news .dd-cate-dropdown .category-list li a { text-align: left; font-size: 16px; line-height: 22px; padding: 15px 0 12px; } .dd-s-news .dd-b-head { margin-bottom: 20px; background-color: #003143; padding: 11px 34px 9px 26px; } .dd-s-news .dd-b-head h2 { font-size: 39px; line-height: 50px; } .dd-s-news .dd-b-head *:last-child { margin-bottom: 0; } .dd-s-news .dd-b-body .post-list { margin-bottom: 82px; font-size: 0; line-height: 0; } .dd-s-news .dd-b-body .post-list li { margin-bottom: 30px; width: 49%; margin-right: 2%; display: inline-block; vertical-align: top; position: relative; z-index: 1; } .dd-s-news .dd-b-body .post-list li:nth-child(2n) { margin-right: 0; } .dd-s-news .dd-b-body .post-list li:last-child, .dd-s-news .dd-b-body .post-list li:nth-last-child(2) { margin-bottom: 0; } .dd-s-news .dd-b-body .post-list .dd-thumbnail { width: 45%; float: left; } .dd-s-news .dd-b-body .post-list .dd-thumbnail img { width: 100%; height: 240px; object-fit: cover; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top { padding: 40px 30px 0 25px; border-bottom: none; overflow: hidden; } .dd-s-news .dd-b-body .post-list .dd-b-intro-top h3 { font-size: 20px; line-height: 30px; margin-bottom: 5px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom { padding: 6px 30px 40px 25px; overflow: hidden; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom p { margin-bottom: 0; line-height: 24px; -webkit-line-clamp: 2; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom .dd-more { margin-left: 0; position: absolute; bottom: 15px; left: 45%; right: 0; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom .dd-more:before { content: ""; display: inline-block; position: relative; height: 1px; width: 65%; background-color: #c9b45f; vertical-align: middle; margin-right: 15px; margin-top: -3px; } .dd-s-news .dd-b-body .post-list .dd-b-intro-bottom *:last-child { margin-bottom: 0; } .dd-s-news .dd-pagination li { margin-right: 40px; } .dd-s-news .dd-pagination li:nth-last-child(2) { margin-right: 40px; } .dd-s-news .dd-pagination li.active a { border-bottom-width: 3px; padding-bottom: 10px; } } .dd-s-news-detail { padding: 101px 0 20px; } .dd-s-news-detail .dd-b-container { padding-left: 20px; padding-right: 20px; } .dd-s-news-detail .dd-b-container blockquote { margin-bottom: 24px; } .dd-s-news-detail .dd-b-container blockquote p { display: inline !important; } .dd-s-news-detail .dd-b-container blockquote:before, .dd-s-news-detail .dd-b-container blockquote:after { display: inline-block; vertical-align: top; line-height: 20px; font-size: 20px; color: #FFF; } .dd-s-news-detail .dd-b-container blockquote:before { content: '“'; margin-right: 6px; } .dd-s-news-detail .dd-b-container blockquote:after { content: '”'; margin-left: 6px; } .dd-s-news-detail .dd-b-head { color: #FFFFFF; text-align: center; font-size: 0; line-height: 0; margin-bottom: 11px; } .dd-s-news-detail .dd-b-head .dd-mini-heading { text-transform: uppercase; font-size: 12px; line-height: 12px; font-weight: 400; color: #FFFFFF; } .dd-s-news-detail .dd-b-body { color: #FFFFFF; } .dd-s-news-detail .dd-b-body .dd-b-top h2 { text-align: center; font-size: 18px; line-height: 25px; color: #FFFFFF; font-weight: 400; margin-bottom: 12px; } .dd-s-news-detail .dd-b-body .dd-b-top .dd-date { display: none; } .dd-s-news-detail .dd-b-body .dd-featured-images { font-size: 0; line-height: 0; margin-bottom: 15px; } .dd-s-news-detail .dd-b-body img { width: 100%; display: block; } .dd-s-news-detail .dd-b-body .dd-b-content h1, .dd-s-news-detail .dd-b-body .dd-b-content h2, .dd-s-news-detail .dd-b-body .dd-b-content h3, .dd-s-news-detail .dd-b-body .dd-b-content h4, .dd-s-news-detail .dd-b-body .dd-b-content h5, .dd-s-news-detail .dd-b-body .dd-b-content h6 { font-weight: 400; margin-bottom: 0; } .dd-s-news-detail .dd-b-body .dd-b-content p { font-weight: 300; line-height: 26px; margin-bottom: 24px; } .dd-s-news-detail .dd-b-body .dd-b-content h2 { font-size: 18px; line-height: 25px; } .dd-s-news-detail .dd-b-body .dd-b-content h3 { font-size: 16px; line-height: 20px; } .dd-s-news-detail .dd-b-body .dd-b-content h4 { font-size: 15px; line-height: 20px; } .dd-s-news-detail .dd-b-body .dd-b-content h5 { font-size: 14px; line-height: 20px; } .dd-s-news-detail .dd-b-body .dd-b-content ul { margin-bottom: 24px; padding-left: 15px; } .dd-s-news-detail .dd-b-body .dd-b-content ul li { list-style-type: circle; font-weight: 300; line-height: 26px; font-size: 13px; } .dd-s-news-detail .dd-b-body .dd-share { position: relative; display: flex; align-items: center; justify-content: flex-end; } .dd-s-news-detail .dd-b-body .dd-share:before { content: ""; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2); } .dd-s-news-detail .dd-b-body .dd-share span { background-color: #003143; display: block; white-space: nowrap; margin-left: 20px; font-size: 13px; line-height: 20px; font-weight: 300; color: #FFFFFF; } .dd-s-news-detail .dd-b-body .dd-share a { display: block; background: url(../images/icon-fb-white.svg) 0 0 no-repeat; background-size: auto 20px; width: 10px; height: 20px; flex-grow: 0; flex-shrink: 0; } .dd-s-news-detail .dd-b-body .dd-share .share-btn { flex-grow: 0; flex-shrink: 0; margin-left: 20px; } @media only screen and (min-width: 1024px) { .dd-s-news-detail .dd-b-container { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1080px) { .dd-s-news-detail { padding-top: 89px; padding-bottom: 70px; } .dd-s-news-detail .dd-b-container { max-width: 1500px; margin: 0 auto; padding-left: 50px; padding-right: 50px; } .dd-s-news-detail .dd-b-container .dd-b-head { display: none; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-top { padding-bottom: 40px; border-bottom: 1px solid #c9b45f; margin-bottom: 60px; font-size: 0; line-height: 0; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-top h2 { font-size: 40px; line-height: 50px; font-weight: 400; margin-bottom: 0; text-align: left; display: inline-block; width: calc(100% - 100px); padding-right: 20vw; vertical-align: bottom; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-top .dd-date { display: inline-block; width: 100px; text-align: right; vertical-align: bottom; font-size: 18px; line-height: 20px; color: rgba(255, 255, 255, 0.5); margin-bottom: 3px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-featured-images { font-size: 0; line-height: 0; margin-bottom: 15px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content img { margin-bottom: 30px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content h2 { font-size: 30px; line-height: 40px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content h3 { font-size: 28px; line-height: 34px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content h4 { font-size: 26px; line-height: 30px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content h5 { font-size: 22px; line-height: 28px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content p { margin-bottom: 30px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-b-content ul { margin-bottom: 30px; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-share a { font-size: 16px; text-align: right; } .dd-s-news-detail .dd-b-container .dd-b-body .dd-share a span { padding-right: 35px; padding-left: 30px; } } .dd-s-related-news .dd-b-container { padding-left: 20px; padding-right: 20px; } .dd-s-related-news .dd-b-head { background-color: #003143; margin-bottom: 20px; } .dd-s-related-news .dd-b-head h2 { font-size: 12px; font-weight: 400; color: #FFFFFF; padding: 12px 20px 10px; text-transform: uppercase; text-align: center; } .dd-s-related-news .dd-b-body ul li { padding: 17px 0 11px; border-top: 1px solid rgba(255, 255, 255, 0.2); } .dd-s-related-news .dd-b-body ul li .dd-date { font-size: 14px; line-height: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 0; } .dd-s-related-news .dd-b-body ul li h3 { font-weight: 400; font-size: 18px; line-height: 25px; margin-bottom: 0; } .dd-s-related-news .dd-b-body ul li h3 a { color: #FFFFFF; } .dd-s-related-news .dd-b-body ul li h3 a:hover { color: #c9b45f; text-decoration: none; } .dd-s-related-news .dd-b-body ul li .dd-more { display: none; } .dd-s-related-news .dd-b-body ul li *:last-child { margin-bottom: 0; } @media only screen and (min-width: 1024px) { .dd-s-related-news .dd-b-container { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1080px) { .dd-s-related-news .dd-b-container { padding-left: 50px; padding-right: 50px; max-width: 1500px; margin: 0 auto; } .dd-s-related-news .dd-b-head { margin-bottom: 24px; } .dd-s-related-news .dd-b-head h2 { font-size: 30px; padding: 31px 45px 28px; text-align: left; } .dd-s-related-news .dd-b-body ul { margin-bottom: 30px; } .dd-s-related-news .dd-b-body ul li { padding: 22px 200px 24px 0; width: calc(50% - 17px); display: inline-block; vertical-align: top; margin-right: 34px; position: relative; z-index: 1; } .dd-s-related-news .dd-b-body ul li:nth-child(2n) { margin-right: 0; } .dd-s-related-news .dd-b-body ul li * { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-related-news .dd-b-body ul li .dd-date { font-size: 16px; line-height: 16px; margin-bottom: 6px; } .dd-s-related-news .dd-b-body ul li h3 { font-size: 13px; line-height: 20px; } .dd-s-related-news .dd-b-body ul li .dd-more { display: inline-block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; color: #c9b45f; text-transform: uppercase; font-size: 16px; line-height: 16px; font-weight: 300; } .dd-s-related-news .dd-b-body ul li .dd-more:before { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; content: ""; display: inline-block; position: relative; height: 1px; width: 73px; background-color: #c9b45f; vertical-align: middle; margin-right: 11px; margin-top: -3px; } .dd-s-related-news .dd-b-body ul li .dd-more:hover { color: #FFFFFF; text-decoration: none; } .dd-s-related-news .dd-b-body ul li .dd-more:hover:before { background-color: #FFFFFF; } } .dd-s-featured-news { display: none; } @media only screen and (min-width: 1080px) { .dd-s-featured-news { display: block; background: url(../images/bg-featured-news.webp) 0 0 no-repeat; background-size: cover; padding: 30vh 0 37vh; position: relative; z-index: 1; } .dd-s-featured-news:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; background: -moz-linear-gradient(top, rgba(0, 56, 81, 0) 0%, #003851 100%); background: -webkit-linear-gradient(top, rgba(0, 56, 81, 0) 0%, #003851 100%); background: linear-gradient(to bottom, rgba(0, 56, 81, 0) 0%, #003851 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00003851', endColorstr='#003851',GradientType=0 ); } .dd-s-featured-news .dd-b-container { max-width: 1500px; padding-left: 50px; padding-right: 50px; margin: 0 auto; position: relative; z-index: 3; } .dd-s-featured-news .dd-b-container .dd-b-body { max-width: 65%; } .dd-s-featured-news h1{color: #FFFFFF;text-transform: uppercase;} .dd-s-featured-news .dd-b-container .dd-b-body h2 { font-weight: 500; line-height: 1.25em; text-transform: uppercase; color: #FFFFFF; text-align: left; margin-bottom: 0; } .dd-s-featured-news .dd-b-container .dd-b-body p { font-size: 13px; line-height: 24px; color: #FFFFFF; margin-bottom: 40px; } .dd-s-featured-news .dd-b-container .dd-b-body .dd-buttons { text-align: right; position: relative; z-index: 4; } .dd-s-featured-news .dd-b-container .dd-b-body .dd-buttons:before { content: ""; display: block; position: absolute; z-index: 5; height: 1px; left: 0; right: 253px; top: 50%; margin-top: -1px; background-color: #FFFFFF; } .dd-s-featured-news .dd-b-container .dd-b-body .dd-more { font-size: 15px; line-height: 50px; font-weight: 400; height: 50px; text-align: center; border: 1px solid #FFFFFF; width: 278px; background-color: rgba(0, 49, 67, 1); display: inline-block; position: relative; z-index: 6; text-transform: uppercase; color: #FFFFFF; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-s-featured-news .dd-b-container .dd-b-body .dd-more:hover { text-decoration: none; background-color: #003143; } } @media only screen and (min-width: 1690px) and (min-width: 1080px) { .dd-s-featured-news .dd-b-container .dd-b-body { max-width: 60%; } } .dd-s-footer.dd-s-news-footer .dd-b-foot { border-top: 1px solid rgba(255, 255, 255, 0.2); position: relative; bottom: auto; top: 0; left: 0; padding-top: 30px; padding-bottom: 40px; } .dd-b-news-breadcrumb { padding: 153px 50px 0 50px; text-transform: uppercase; letter-spacing: 0; font-size: 15px; line-height: 25px; } .dd-b-news-breadcrumb:before { content: ''; width: 75px; height: 1px; background-color: #FFFFFF; vertical-align: middle; display: inline-block; margin-right: 20px; } .dd-b-news-breadcrumb a { color: #FFFFFF; display: inline-block; vertical-align: middle; } .dd-b-news-breadcrumb span { display: inline-block; vertical-align: middle; padding-left: 13px; font-weight: 400; position: relative; z-index: 10; color: #919191; margin-left: 7px; } .dd-b-news-breadcrumb span:before, .dd-b-news-breadcrumb span:after { content: ""; display: block; position: absolute; top: 50%; left: 7px; width: 9px; height: 1px; background-color: #FFFFFF; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; } .dd-b-news-breadcrumb span:after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } /* .-----------------------------------------------------. | FOOTER | '-----------------------------------------------------' */ .dd-s-mini-footer { padding-left: 20px; padding-right: 20px; } .dd-s-mini-footer .dd-b-body { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 21px; padding-bottom: 21px; text-align: center; } .dd-s-mini-footer .dd-b-body p { margin-bottom: 0; color: rgba(183, 183, 183, 0.4); font-size: 10px; line-height: 14px; } @media only screen and (min-width: 768px) { .dd-s-mini-footer .dd-b-body { padding-top: 35px; padding-bottom: 37px; } .dd-s-mini-footer .dd-b-body p { font-size: 15px; line-height: 15px; } } @media only screen and (min-width: 1024px) { .dd-s-mini-footer { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 1080px) { .dd-s-mini-footer { padding-left: 50px; padding-right: 50px; } .dd-s-mini-footer .dd-b-body { padding-top: 40px; padding-bottom: 40px; } } .dd-s-footer { text-align: center; position: relative; } .dd-s-footer .dd-b-body *:last-child, .dd-s-footer .dd-b-foot *:last-child { margin-bottom: 0; } .dd-s-footer .dd-b-body .dd-b-contact-info-head { text-align: center; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 { font-size: 0; line-height: 0; display: inline-block; margin: 0 15px 13px; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 .dd-icon { width: 49px; height: 49px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #FFFFFF; display: flex; align-items: center; justify-content: center; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 .dd-icon > svg, .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 .dd-icon .svg-icon { fill: #FFFFFF; width: 50%; height: 50%; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3.active .dd-icon { background-color: #FFFFFF; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3.active .dd-icon > svg, .dd-s-footer .dd-b-body .dd-b-contact-info-head h3.active .dd-icon .svg-icon { fill: #003143; } .dd-s-footer .dd-b-body .dd-b-contact-info-body { min-height: 50px; } .dd-s-footer .dd-b-body .dd-b-contact-info-body .dd-text { display: none; } .dd-s-footer .dd-b-body .dd-b-contact-info-body .dd-text.active { display: block; } .dd-s-footer p { color: #a3b2bb; font-size: 12px; line-height: 16px; } .dd-s-footer p.dd-phone { font-size: 16px; } .dd-s-footer p.dd-phone a { color: #a3b2bb; } .dd-s-footer p.dd-phone a:hover { color: #FFFFFF; text-decoration: none; } .dd-s-footer p.is-small { font-size: 10px; } .dd-s-footer a.dd-link { color: #a3b2bb; font-size: 13px; line-height: 20px; } .dd-s-footer a.dd-link:hover { color: #FFFFFF; text-decoration: none; } .dd-s-footer .dd-b-foot { position: relative; z-index: 5; bottom: 0; left: 0; right: 0; color: #b7b7b7; font-size: 10px; line-height: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 20px; text-align: center; } .dd-s-footer .dd-b-foot span { display: block; padding-top: 10px; } .dd-s-footer .dd-b-foot span img { width: 60px; display: block; margin: 10px auto 0; } @media only screen and (min-width: 768px) { .dd-s-footer { margin-bottom: 0; } } @media only screen and (min-width: 1080px) { .dd-s-footer { width: auto; text-align: left; } .dd-s-footer .dd-b-body { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 15px; } .dd-s-footer .dd-b-body .dd-b-contact-info-head { text-align: left; width: 1110px; display: inline-block; vertical-align: bottom; font-size: 0; line-height: 0; } .dd-s-footer .dd-b-body .dd-b-contact-info-head > * { padding: 5px 0; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 { font-weight: 400; font-size: 12px; line-height: 16px; margin-right: 20px; margin-bottom: 0; color: #a3b2bb; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 .dd-icon { width: auto; height: auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; display: inline-block; vertical-align: middle; margin-right: 5px; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 .dd-icon > svg, .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 .dd-icon .svg-icon { width: 16px; height: 16px; fill: #FFFFFF; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3.active .dd-icon { background: transparent; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3.active .dd-icon .svg-icon { fill: #FFFFFF; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 a { color: #a3b2bb; } .dd-s-footer .dd-b-body .dd-b-contact-info-head h3 a:hover { color: #FFFFFF; text-decoration: none; } .dd-s-footer .dd-b-body .dd-b-contact-info-body { text-align: left; width: 1110px; display: inline-block; vertical-align: bottom; font-size: 0; line-height: 0; } .dd-s-footer .dd-b-body .dd-b-contact-info-body .dd-text { width: 33.3%; display: inline-block; } .dd-s-footer .dd-b-body .dd-b-contact-info-body .dd-text.active { display: inline-block; } .dd-s-footer .dd-b-foot { position: absolute; bottom: -90px; left: 0; margin: 0; border-top: none; padding: 0; text-align: right; font-size: 12px; line-height: 16px; text-align: center; } } @media only screen and (min-width: 1690px) { .dd-s-footer { max-width: 1400px; width: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); padding-left: 50px; padding-right: 50px; } .dd-s-footer .dd-b-foot { bottom: -90px; } } footer { position: absolute; z-index: 1; bottom: 0; left: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; pointer-events: none; } /* .-----------------------------------------------------. | THEMES | '-----------------------------------------------------' */ .root-news .dd-text-logo, .root-news-detail .dd-text-logo { -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); z-index: 3; } .root-news .dd-text-logo svg *, .root-news-detail .dd-text-logo svg * { fill: #FFFFFF; } .dd-dark-theme .dd-text-logo svg * { fill: #000000; } .dd-dark-theme .dd-bars .dd-bar .dd-bar-in:before, .dd-dark-theme .dd-bars .dd-bar .dd-bar-in:after { background-color: #000000; } .dd-dark-theme .dd-label { color: rgba(0, 0, 0, 0.75); } .dd-dark-theme .dd-b-language { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dd-dark-theme .dd-b-language.at-header li.active a { color: #000000; } .dd-dark-theme .dd-b-language.at-header li:first-child:before { background-image: url(../images/icon-language-black.svg); } .dd-dark-theme .dd-b-language.hide { -webkit-transform: translateY(-70px); -moz-transform: translateY(-70px); -o-transform: translateY(-70px); -ms-transform: translateY(-70px); transform: translateY(-70px); -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dd-dark-theme .dd-social-network.at-bottom li a { border: 1px solid rgba(0, 0, 0, 0.7); } .dd-dark-theme .dd-social-network.at-bottom li a.facebook-icon { background-image: url(../images/icon-fb-black.svg); } .dd-dark-theme .dd-social-network.at-bottom li a.twitter-icon { background-image: url(../images/icon-tw-black.svg); } .dd-dark-theme .dd-social-network.at-bottom li a.instagram-icon { background-image: url(../images/icon-ig-black.svg); } .dd-dark-theme .dd-social-network.at-bottom li a.youtube-icon { background-image: url(../images/icon-yt-black.svg); } .dd-dark-theme .dd-social-network.at-bottom li a.zalo-icon { background-image: url(../images/icon-zalo-b.svg); } .dd-dark-theme .dd-social-network.at-bottom li a.mail-icon { background-image: url(../images/icon-mail-b.svg); } @media only screen and (min-width: 768px) { .dd-dark-theme #fp-nav:before { background-color: rgba(0, 0, 0, 0.3); } .dd-dark-theme #fp-nav ul li a span { background-color: rgba(0, 0, 0, 0.7); } .dd-dark-theme #fp-nav ul li .fp-tooltip { color: rgba(0, 0, 0, 0.7); text-transform: uppercase; } } .dd-light-theme .dd-text-logo svg * { fill: #FFFFFF; } .dd-light-theme .dd-bars .dd-bar .dd-bar-in:before, .dd-light-theme .dd-bars .dd-bar .dd-bar-in:after { background-color: #FFFFFF; } .dd-light-theme body.villas .dd-text-logo svg * { fill: #FFFFFF; } .dd-light-theme body.villas .dd-bars .dd-bar .dd-bar-in:before, .dd-light-theme body.villas .dd-bars .dd-bar .dd-bar-in:after { background-color: #FFFFFF; } .dd-light-theme body.villas .dd-label { color: #FFFFFF; } .dd-light-theme .dd-label { color: #FFFFFF; } .dd-light-theme .dd-b-villa-breadcrumb:before { background-color: #FFFFFF; } .dd-light-theme .dd-b-villa-breadcrumb a { color: #FFFFFF; } .dd-light-theme .dd-b-villa-breadcrumb span { color: #FFFFFF; } .dd-light-theme .dd-b-villa-breadcrumb span:before, .dd-light-theme .dd-b-villa-breadcrumb span:after { background-color: #FFFFFF; } .video-background { min-height: 100vh; display: block; z-index: 1; position: relative; } .video-background:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; pointer-events: none; } .video-background iframe { pointer-events: none; } .video-foreground, .video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #vidtop-content { top: 0; color: #fff; } @media (min-aspect-ratio: 16 / 9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16 / 9) { .video-foreground { width: 300%; left: -100%; } } .awards { position: fixed; bottom: 15px; right: 15px; display: flex; flex-wrap: nowrap; z-index: 1000; } .awards a { display: block; } .awards a img { display: block; width: 100px; margin: 0; } .awards a img.mobile { display: none; } @media only screen and (max-width: 1079px) { .dd-social-network.at-bottom { bottom: 30px; } } @media only screen and (max-width: 767px) { .awards { bottom: auto; top: 0; right: 0; margin: 0; } .awards a img { display: none; } .awards a img.mobile { width: 80px; display: block; } } .form-group { display: flex; justify-content: space-between; } .form-group .form-row { width: 49%; } .form-row { margin-bottom: 20px; line-height: initial; } .form-row label { display: block; font-size: 12px; color: #000000; margin-bottom: 5px; } .text-input { display: block; width: 100%; height: 40px; padding: 10px; outline: none; border: 1px solid #FFFFFF; font-size: 14px; color: #000000; } .text-input.error { border-color: #f00; } textarea.text-input { height: auto; min-height: 100px; } .btn { line-height: 40px !important; cursor: pointer; color: #FFFFFF; display: inline-block; border: none; background: #0078ae; font-size: 14px; text-transform: uppercase; text-align: center; height: 40px; padding: 0 20px; font-family: Montserrat; font-weight: 400; text-decoration: none; } .btn:focus { outline: none; border: none; } .btn:hover { color: #FFFFFF; text-decoration: none; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; background-color: rgba(0, 0, 0, 0.4); align-items: center; justify-content: center; pointer-events: none; display: none; } .modal.active { display: flex; } .modal .modal-content { position: relative; pointer-events: initial; background-color: #003851; padding: 40px; width: 500px; border: 1px solid #004462; } .modal .modal-content h3 { font-size: 20px; color: #FFFFFF; text-transform: uppercase; font-weight: 300; } .modal .modal-content [data-dismiss="modal"] { border: none; cursor: pointer; width: 20px; height: 20px; background: url(../images/icon-close-white.svg) no-repeat center center; background-size: contain; outline: none; position: absolute; top: 20px; right: 20px; z-index: 1; } .contact-form { width: 100%; } .contact-form textarea.text-input { height: 100px; } .contact-form .form-row label { color: #FFFFFF; } .contact-form .form-row:last-child { margin-bottom: 0; } .contact-form .btn { display: block; width: 100%; } .contact-form .confirm-container > div { font-size: 12px; margin-top: 20px; margin-bottom: 20px !important; color: #FFFFFF; line-height: initial; text-align: center; } .contact-form .confirm-container > div:first-child { padding-top: 10px; margin-top: 20px; border-top: 1px solid #a3b2bb; } .contact-form .confirm-container .btn { display: block; width: 50%; margin: 0 auto; } .img-notice { font-style: italic; padding: 10px 0; display: block; } .row { display: flex; align-items: center; } @-webkit-keyframes wave { 0% { transform: scale(0); opacity: 1; transform-origin: center; } 100% { transform: scale(3); opacity: 0; transform-origin: center; } } @-moz-keyframes wave { 0% { transform: scale(0); opacity: 1; transform-origin: center; } 100% { transform: scale(3); opacity: 0; transform-origin: center; } } @-ms-keyframes wave { 0% { transform: scale(0); opacity: 1; transform-origin: center; } 100% { transform: scale(3); opacity: 0; transform-origin: center; } } @-o-keyframes wave { 0% { transform: scale(0); opacity: 1; transform-origin: center; } 100% { transform: scale(3); opacity: 0; transform-origin: center; } } @keyframes wave { 0% { transform: scale(0); opacity: 1; transform-origin: center; } 100% { transform: scale(3); opacity: 0; transform-origin: center; } } .hidden { display: none !important; pointer-events: none; } .tippy-content { font-weight: 700; }