/* = HEADER AND NAVIGATION ------------------------------------------------------------------------------------- */ .main-header-holder { font-family: 'montserrat-light'; font-weight: 300; } /* + Common */ .main-header-holder { position: fixed; left: 0px; top: 0px; z-index: 9997; width: 100%; height: 60px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .main-header-holder .main-nav-trigger { display: none; z-index: 3; position: absolute; right: 40px; top: 50%; width: 20px; height: 17px; text-indent: -9999px; will-change: transform; cursor: pointer; outline: none; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(0deg) scale(1); } .main-header-holder .main-nav-trigger span { display: block; position: absolute; left: 0; opacity: 1; height: 1px; width: 100%; background: #ffffff; -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .main-header-holder .main-nav-trigger span:nth-child(1) { top: 0px; } .main-header-holder .main-nav-trigger span:nth-child(2) { top: 8px; } .main-header-holder .main-nav-trigger span:nth-child(3) { top: 16px; } .main-header-holder .main-nav-trigger:before { content: ""; display: block; position: absolute; left: -10px; top: -10px; right: -10px; bottom: -10px; } .main-header-holder .main-nav-trigger.open span:nth-child(1) { top: 8px; -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(135deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(135deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(135deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(135deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(135deg) scale(1); } .main-header-holder .main-nav-trigger.open span:nth-child(2) { opacity: 0; left: -60px; } .main-header-holder .main-nav-trigger.open span:nth-child(3) { top: 8px; -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(-135deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(-135deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(-135deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(-135deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(-135deg) scale(1); } @media (max-width: 1300px) { .main-header-holder .main-nav-trigger { display: none; } } @media (max-width: 1200px) { .main-header-holder .main-nav-trigger { display: block; } } .main-header-holder .small-header-logo { float: left; position: relative; z-index: 2; width: 57px; height: 57px; margin: 0px 0 0 40px; text-indent: -9999px; outline: none; -webkit-transform: translateX(0px) translateY(-100%) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(-100%) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(-100%) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(-100%) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(-100%) translateZ(0px) rotate(0deg) scale(1); background: url(https://lalumlaw.co.il/wp-content/uploads/2019/11/small_web_logo.jpg) center center no-repeat; background-size: 57px 57px; -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } @media (max-width: 1300px) { .main-header-holder .small-header-logo { width: 60px; background: url(https://lalumlaw.co.il/wp-content/uploads/2019/05/very-small-logo.jpg) center center no-repeat; background-size: 100% 100%; } } @media (max-width: 1200px) { .main-header-holder .small-header-logo { width: 49px; background-size: 49px 49px; } } .main-header-holder .big-header-logo { display: block; position: absolute; left: 40px; top: 35px; width: 65px; height: 65px; text-indent: -9999px; background: url(https://lalumlaw.co.il/wp-content/uploads/2019/11/small_web_logo.jpg) no-repeat; background-size: 100% 100%; outline: none; -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } @media (max-width: 1900px) { .main-header-holder .big-header-logo { width: 65px; height: 65px; } } @media (max-width: 1300px) { .main-header-holder .big-header-logo { top: 35px; width: 65px; height: 65px; background: url(https://lalumlaw.co.il/wp-content/uploads/2019/11/small_web_logo.jpg) no-repeat; background-size: 100%; } } @media (max-width: 1200px) { .main-header-holder .big-header-logo { top: 20px; width: 65px; height: 65px; background-image: url(https://lalumlaw.co.il/wp-content/uploads/2019/11/small_web_logo.jpg); } } .main-header-holder .main-header { position: relative; z-index: 3; text-transform: uppercase; -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .main-header-holder .main-header:before, .main-header-holder .main-header:after { content: ""; display: table; } .main-header-holder .main-header:after { clear: both; } .main-header-holder .main-header .main-nav-holder .main-nav { z-index: 2; float: right; padding-right: 20px; } .main-header-holder .main-header .main-nav-holder .main-nav > li { float: left; position: relative; -webkit-transition: background-color 350ms 0ms ease-in-out; -moz-transition: background-color 350ms 0ms ease-in-out; -ms-transition: background-color 350ms 0ms ease-in-out; -o-transition: background-color 350ms 0ms ease-in-out; transition: background-color 350ms 0ms ease-in-out; } .main-header-holder .main-header .main-nav-holder .main-nav > li a { display: flex; position: relative; height: 60px; padding: 0 20px; font-size: 12px; color: #ffffff; letter-spacing: 1px; -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .main-header-holder .main-header .main-nav-holder .main-nav > li a span { position: relative; line-height: 60px; } .main-header-holder .main-header .main-nav-holder .main-nav > li a span:after { content: ""; display: block; position: absolute; left: 0px; bottom: 0px; width: 0px; height: 3px; background: #ffffff; -webkit-transition: width 350ms 0ms ease-in-out; -moz-transition: width 350ms 0ms ease-in-out; -ms-transition: width 350ms 0ms ease-in-out; -o-transition: width 350ms 0ms ease-in-out; transition: width 350ms 0ms ease-in-out; } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav > li a span { padding-bottom: 0; text-decoration: none; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav > li a span { line-height: 60px !important; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li a span { padding-bottom: 10px; text-decoration: underline; line-height: inherit; } } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav > li a { height: 60px; font-size: 12px; line-height: inherit; color: #ffffff; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li a { height: auto; line-height: 40px; font-size: 16px; color: #9b9b9b; } } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav > li { width: auto; padding: 0px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .main-header-holder .main-header .main-nav-holder .main-nav > li:nth-child(5n + 1) { clear: none; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li { width: 20%; padding: 20px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .main-header-holder .main-header .main-nav-holder .main-nav > li:nth-child(5n + 1) { clear: left; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li ul li { float: none; width: 100%; padding: 0px; text-transform: none; } .main-header-holder .main-header .main-nav-holder .main-nav > li ul li a { font-size: 15px; color: #606060; } .main-header-holder .main-header .main-nav-holder .main-nav > li ul li a span { font-weight: 400; padding-bottom: 0; text-decoration: none; line-height: inherit; } } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.current-menu-item > a { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav > li.current-menu-item ul li a.current { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav > li.current-menu-item.inquire-link > a { color: #914c3b; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.current-menu-item > a { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav > li.current-menu-item ul li a.current { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav > li.current-menu-item.inquire-link > a { color: #de7a5f; } } .main-header-holder .main-header .main-nav-holder .main-nav > li.active a span:after { width: 100%; } .main-header-holder .main-header .main-nav-holder .main-nav > li.left-to-right a span:after { left: 0px; right: auto; } .main-header-holder .main-header .main-nav-holder .main-nav > li.right-to-left a span:after { left: auto; right: 0px; } .main-header-holder .main-header .main-nav-holder .main-nav > li.magazine-link > a { padding-right: 40px; } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.magazine-link > a { padding-right: 20px; } } .main-header-holder .main-header .main-nav-holder .main-nav > li.inquire-link > a { padding-left: 40px; font-family: 'montserrat-medium'; font-weight: 500; color: #914c3b; } .main-header-holder .main-header .main-nav-holder .main-nav > li.inquire-link > a span:after { background: #914c3b; } .main-header-holder .main-header .main-nav-holder .main-nav > li.inquire-link > a:before { content: ""; display: block; position: absolute; left: 0px; top: 16px; bottom: 16px; width: 1px; background: #979797; } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.inquire-link > a { padding-left: 20px; font-family: 'montserrat-light'; font-weight: 300; } .main-header-holder .main-header .main-nav-holder .main-nav > li.inquire-link > a:before { display: none; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a span { padding-bottom: 0px; align-self: auto; text-decoration: none; } } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a { padding: 0px 20px; line-height: inherit; font-size: 12px; border: none; border-radius: 0px; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a { padding: 0px 22px; line-height: 25px; font-size: 12px; border: 1px solid #9b9b9b; border-radius: 23px; } } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link { position: relative; right: auto; top: auto; width: auto; padding: 0px; } .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link ul { display: none; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link { position: absolute; right: 85px; top: 16px; width: auto; padding: 0px; } .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link ul { display: none; } } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder .main-nav { display: block; flex-wrap: ; align-content: center; float: right; position: relative; left: auto; top: auto; width: auto; height: auto; padding: 0px 20px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent a { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent li a { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent li.current-menu-item a { color: #ffffff; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .main-nav { display: flex; flex-wrap: wrap; align-content: center; float: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding: 0px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent a { color: #ffffff; } .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent li a { color: #606060; } .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent li.current-menu-item a { color: #ffffff; } } @media (max-width: 1000px) { .main-header-holder .main-header .main-nav-holder .main-nav > li { width: 25%; padding: 60px 0px; } .main-header-holder .main-header .main-nav-holder .main-nav > li:nth-child(4n + 1) { clear: left; } .main-header-holder .main-header .main-nav-holder .main-nav > li:nth-child(5n + 1) { clear: none; } } .main-header-holder .main-header .main-nav-holder canvas { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } @media (max-width: 1300px) { .main-header-holder .main-header .main-nav-holder { position: inherit; left: auto; top: auto; opacity: 1; height: auto; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder { position: absolute; left: -9999px; top: 0px; opacity: 0; width: 100%; height: 100vh; background: #000000; -webkit-transition: opacity 300ms 0ms ease-in-out; -moz-transition: opacity 300ms 0ms ease-in-out; -ms-transition: opacity 300ms 0ms ease-in-out; -o-transition: opacity 300ms 0ms ease-in-out; transition: opacity 300ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } } .main-header-holder .main-header .main-nav-holder .header-social-nav { display: none; z-index: 3; position: absolute; left: 40px; bottom: 50px; right: 40px; justify-content: space-between; } .main-header-holder .main-header .main-nav-holder .header-social-nav li a { font-size: 10px; color: #a0a0a0; letter-spacing: 2px; } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder .header-social-nav { display: flex; } } .main-header-holder .main-header .main-nav-holder > p { display: none; z-index: 3; position: absolute; left: 40px; bottom: 25px; letter-spacing: 0.5px; color: #606060; font-size: 8px; line-height: normal; } @media (max-width: 1200px) { .main-header-holder .main-header .main-nav-holder > p { display: block; } } .main-header-holder .sub-nav { position: absolute; left: 0px; top: 60px; overflow: hidden; width: 100%; height: 110px; background: rgba(0, 0, 0, 0.8); box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateX(0px) translateY(-240px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(-240px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(-240px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(-240px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(-240px) translateZ(0px) rotate(0deg) scale(1); -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .main-header-holder .sub-nav > ul { overflow: hidden; position: relative; height: 100%; width: 100%; -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); } .main-header-holder .sub-nav > ul > li { overflow: hidden; position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; -webkit-transition: all 350ms 0ms ease-in-out; -moz-transition: all 350ms 0ms ease-in-out; -ms-transition: all 350ms 0ms ease-in-out; -o-transition: all 350ms 0ms ease-in-out; transition: all 350ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .main-header-holder .sub-nav > ul > li ul { float: right; position: relative; height: 100%; } .main-header-holder .sub-nav > ul > li ul li { float: left; position: relative; width: 180px; height: 100%; } .main-header-holder .sub-nav > ul > li ul li div { display: block; opacity: 0; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.05); -webkit-transition: all 250ms 0ms ease-in-out; -moz-transition: all 250ms 0ms ease-in-out; -ms-transition: all 250ms 0ms ease-in-out; -o-transition: all 250ms 0ms ease-in-out; transition: all 250ms 0ms ease-in-out; } .main-header-holder .sub-nav > ul > li ul li a { display: block; z-index: 2; position: relative; height: 100%; color: #ffffff; } .main-header-holder .sub-nav > ul > li ul li a span { position: absolute; left: 0px; bottom: 20px; z-index: 2; overflow: hidden; padding: 0 15px; font-size: 15px; font-weight: 400; letter-spacing: 1px; } .desktop .main-header-holder .sub-nav > ul > li ul li a span strong {display: block;} .main-header-holder .sub-nav > ul > li ul li a:before { content: ""; display: block; position: absolute; left: 0px; bottom: 15px; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.5); } .main-header-holder .sub-nav.opened { -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); } .main-header-holder:before { content: ""; display: block; position: absolute; left: 0px; top: 0; z-index: 2; width: 100%; height: 60px; background: #000000; -webkit-transform: translateX(0px) translateY(-60px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(-60px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(-60px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(-60px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(-60px) translateZ(0px) rotate(0deg) scale(1); -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; will-change: transform, background; } .main-header-holder.sticky-header { position: fixed; } .main-header-holder.sticky-header:before { -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); } .main-header-holder.sticky-header .big-header-logo { opacity: 1; -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(0); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(0); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(0); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(0); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(0); } .main-header-holder.sticky-header .small-header-logo { -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); -o-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) scale(1); } /* + IE 11 */ .ie11 .sub-nav { backface-visibility: visible; } .ie11 .sub-nav > ul > li { position: absolute; backface-visibility: visible; } .ie11 .sub-nav > ul > li ul { height: 110px; } /* + Tablet */ /*.tablet .main-header-holder .main-nav-trigger { display: block; z-index: 3; } .tablet .main-header-holder .small-header-logo { width: 49px; background-size: 49px 29px; } .tablet .main-header-holder .big-header-logo { top: 20px; width: 178px; height: 30px; background-image: url(../img/logo-white-with-text.svg); } .tablet .main-header-holder .main-header .main-nav-holder { position: absolute; left: -9999px; top: 0px; opacity: 0; width: 100%; height: 100vh; background: #000000; -webkit-transition: opacity 300ms 0ms ease-in-out; -moz-transition: opacity 300ms 0ms ease-in-out; -ms-transition: opacity 300ms 0ms ease-in-out; -o-transition: opacity 300ms 0ms ease-in-out; transition: opacity 300ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav { display: flex; flex-wrap: wrap; align-content: center; float: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding: 0px 20px; -webkit-transition: opacity 300ms 0ms ease-in-out; -moz-transition: opacity 300ms 0ms ease-in-out; -ms-transition: opacity 300ms 0ms ease-in-out; -o-transition: opacity 300ms 0ms ease-in-out; transition: opacity 300ms 0ms ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li { position: relative; z-index: 2; width: 20%; padding: 20px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li:nth-child(5n + 1) { clear: left; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li a { height: auto; line-height: 40px; font-size: 16px; color: #9b9b9b; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li a span { padding-bottom: 10px; text-decoration: underline; line-height: inherit; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul li { float: none; width: 100%; padding: 0px; text-transform: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul li a { font-size: 15px; color: #606060; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul li a span { font-weight: 400; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current_page_item { color: #fff; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.magazine-link > a { padding-right: 20px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.members-area-link { position: absolute; right: 85px; top: 16px; width: auto; padding: 0px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.members-area-link a { padding: 0px 22px; line-height: 25px; font-size: 12px; border: 1px solid #9b9b9b; border-radius: 23px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.members-area-link a span { padding-bottom: 0px; align-self: auto; text-decoration: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.members-area-link ul { display: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.inquire-link > a { padding-left: 20px; font-family: 'montserrat-light'; font-weight: 300; color: #914c3b; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.inquire-link > a:before { display: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent a { color: #fff; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent ul li.current a { color: #606060; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent ul li.current_page_item a { color: #ffffff; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent ul li a { color: #606060; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current ul li.current a { color: #606060; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current ul li.current_page_item a { color: #ffffff; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current.inquire-link > a { color: #de7a5f; } .tablet .main-header-holder .main-header .main-nav-holder .header-social-nav { display: flex; } .tablet .main-header-holder .main-header .main-nav-holder > p { display: block; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .main-nav > li { width: 25%; padding: 60px 0px; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .main-nav > li:nth-child(4n + 1) { clear: left; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .main-nav > li:nth-child(5n + 1) { clear: none; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link { position: absolute; right: 85px; top: 16px; width: auto; padding: 0px; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a { padding: 0px 22px; line-height: 25px; font-size: 12px; border: 1px solid #9b9b9b; border-radius: 23px; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a span { padding-bottom: 0px; align-self: auto; } .tablet.ios.safari .main-header-holder .main-header .main-nav-holder .header-social-nav { bottom: 70px; display: flex; } .tablet.ios.safari .main-header-holder .main-header .main-nav-holder > p { bottom: 45px; display: block; } */ @media (max-width: 1200px) { .desktop .main-header-holder:after { content: ""; display: block; position: fixed; left: -9999px; top: 0px; opacity: 0; width: 100%; height: 100vh; background: rgba(16, 16, 16, 0.6); -webkit-transition: left 0ms 300ms, opacity 300ms ease-in-out; -moz-transition: left 0ms 300ms, opacity 300ms ease-in-out; -ms-transition: left 0ms 300ms, opacity 300ms ease-in-out; -o-transition: left 0ms 300ms, opacity 300ms ease-in-out; transition: left 0ms 300ms, opacity 300ms ease-in-out; } .desktop .main-header-holder.active:after { left: 0px; opacity: 1; -webkit-transition: left 0ms, opacity 300ms ease-in-out; -moz-transition: left 0ms, opacity 300ms ease-in-out; -ms-transition: left 0ms, opacity 300ms ease-in-out; -o-transition: left 0ms, opacity 300ms ease-in-out; transition: left 0ms, opacity 300ms ease-in-out; } .desktop .main-header-holder .small-header-logo { z-index: 3; width: 41px; margin-left: 20px; background-size: 41px 25px; } .desktop .main-header-holder .big-header-logo { left: 20px; width: 65px; height: 65px; } .desktop .main-header-holder .main-nav-trigger { right: 20px; } .desktop .main-header-holder .main-header .main-nav-holder { width: 50%; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav { display: block; position: relative; left: auto; top: auto; width: 100%; height: auto; flex-wrap: initial; align-content: normal; padding: 0px; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li { position: relative; z-index: 2; width: 100%; padding: 0px 0; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li:nth-child(5n + 1) { clear: none; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li a { height: auto; padding: 0px; line-height: 46px; font-size: 14px; color: #9b9b9b; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li a span { padding-bottom: 0px; text-decoration: none; line-height: inherit !important; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li ul { display: none; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li ul li { width: 100%; padding: 0px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li ul li a { font-size: 13px; color: #606060; line-height: 38px; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li ul li a span { font-weight: 400; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li ul.header-social-nav { display: flex; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav > a { -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav > a:after { content: ""; display: block; position: absolute; right: 0px; top: 50%; width: 5px; height: 5px; border-left: 2px solid #606060; border-top: 2px solid #606060; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened > a { color: #ffffff; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened > a:after { border-color: #ffffff; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened.inquire-link > a { color: #de7a5f; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.inquire-link > a { color: #914c3b; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.current > a { color: #9b9b9b; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.current ul li a.current { color: #9b9b9b; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.current.inquire-link > a { color: #de7a5f; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-item a { color: #fff; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-item ul li a { color: #606060; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent ul li.current-menu-item a { color: #fff; } .desktop .main-header-holder .main-header .main-nav-holder .members-area-link { z-index: 3; position: absolute; right: 55px; top: 16px; padding: 0 22px; line-height: 25px; font-size: 12px; color: #9b9b9b; letter-spacing: 0.5px; border: 1px solid #9b9b9b; border-radius: 23px; } .desktop .main-header-holder .main-header .main-nav-holder .members-area-link ul { display: none; } .desktop .main-header-holder .main-header .main-nav-holder:after { content: ""; z-index: 2; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100px; background: linear-gradient(#000000, #000000 50%, transparent 100%); } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { z-index: 2; display: flex; flex-wrap: wrap; overflow: hidden; overflow-y: scroll; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding: 100px 27px 20px 35px; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .desktop.portrait .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { padding: 180px 27px 20px 25px; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder { display: flex; position: relative; align-self: flex-end; flex-wrap: wrap; width: 100%; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav { position: absolute; right: 0; bottom: 0px; left: auto; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li { width: auto; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li a { display: block; width: 35px; height: 35px; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; outline: none; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.facebook-link a { background-image: url(../img/icon-social-facebook.svg); background-size: 18px 18px; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.instagram-link a { background-image: url(../img/icon-social-instagram.svg); background-size: 19px 19px; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.twitter-link a { background-image: url(../img/icon-social-twitter.svg); background-size: 20px 17px; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.youtube-link a { background-image: url(../img/icon-social-youtube.svg); background-size: 20px 15px; } .desktop .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder > p { display: block; position: relative; left: auto; bottom: auto; width: 100%; font-size: 10px; line-height: 35px; color: #606060; letter-spacing: 1px; } .desktop.ios.safari .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { padding-bottom: 25px; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link { right: auto; top: auto; border: none; padding-top: 35px; } .desktop .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a { border: none; border-radius: 0px; } } .tablet .main-header-holder:after { content: ""; display: block; position: fixed; left: -9999px; top: 0px; opacity: 0; width: 100%; height: 100vh; background: rgba(16, 16, 16, 0.6); -webkit-transition: left 0ms 300ms, opacity 300ms ease-in-out; -moz-transition: left 0ms 300ms, opacity 300ms ease-in-out; -ms-transition: left 0ms 300ms, opacity 300ms ease-in-out; -o-transition: left 0ms 300ms, opacity 300ms ease-in-out; transition: left 0ms 300ms, opacity 300ms ease-in-out; } .tablet .main-header-holder.active:after { left: 0px; opacity: 1; -webkit-transition: left 0ms, opacity 300ms ease-in-out; -moz-transition: left 0ms, opacity 300ms ease-in-out; -ms-transition: left 0ms, opacity 300ms ease-in-out; -o-transition: left 0ms, opacity 300ms ease-in-out; transition: left 0ms, opacity 300ms ease-in-out; } .tablet .main-header-holder .small-header-logo { z-index: 3; width: 41px; margin-left: 20px; background-size: 41px 41px; } .tablet .main-header-holder .big-header-logo { left: 20px; width: 65px; height: 65px; } .tablet .main-header-holder .main-nav-trigger { right: 20px; } .tablet .main-header-holder .main-header .main-nav-holder { width: 50%; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav { display: block; position: relative; left: auto; top: auto; width: 100%; height: auto; flex-wrap: initial; align-content: normal; padding: 0px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li { position: relative; z-index: 2; width: 100%; padding: 0px 0; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li:nth-child(5n + 1) { clear: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li a { height: auto; padding: 0px; line-height: 46px; font-size: 14px; color: #9b9b9b; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li a span { padding-bottom: 0px; text-decoration: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul { display: none; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul li { width: 100%; padding: 0px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul li a { font-size: 13px; color: #606060; line-height: 38px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul li a span { font-weight: 400; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li ul.header-social-nav { display: flex; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav > a { -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav > a:after { content: ""; display: block; position: absolute; right: 0px; top: 50%; width: 5px; height: 5px; border-left: 2px solid #606060; border-top: 2px solid #606060; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened > a { color: #ffffff; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened > a:after { border-color: #ffffff; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened.inquire-link > a { color: #de7a5f; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.inquire-link > a { color: #914c3b; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current > a { color: #9b9b9b; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current ul li a.current { color: #9b9b9b; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current.inquire-link > a { color: #de7a5f; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-item a { color: #fff; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-item ul li a { color: #606060; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent ul li.current-menu-item a { color: #fff; } .tablet .main-header-holder .main-header .main-nav-holder .members-area-link { z-index: 3; position: absolute; right: 55px; top: 16px; padding: 0 22px; line-height: 25px; font-size: 12px; color: #9b9b9b; letter-spacing: 0.5px; border: 1px solid #9b9b9b; border-radius: 23px; } .tablet .main-header-holder .main-header .main-nav-holder .members-area-link ul { display: none; } .tablet .main-header-holder .main-header .main-nav-holder:after { content: ""; z-index: 2; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100px; background: linear-gradient(#000000, #000000 50%, transparent 100%); } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { z-index: 2; display: flex; flex-wrap: wrap; overflow: hidden; overflow-y: scroll; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding: 100px 27px 20px 35px; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tablet.portrait .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { padding: 180px 27px 20px 25px; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder { display: flex; position: relative; align-self: flex-end; flex-wrap: wrap; width: 100%; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav { position: absolute; right: 0; bottom: 0px; left: auto; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li { width: auto; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li a { display: block; width: 35px; height: 35px; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; outline: none; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.facebook-link a { background-image: url(../img/icon-social-facebook.svg); background-size: 18px 18px; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.instagram-link a { background-image: url(../img/icon-social-instagram.svg); background-size: 19px 19px; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.twitter-link a { background-image: url(../img/icon-social-twitter.svg); background-size: 20px 17px; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.youtube-link a { background-image: url(../img/icon-social-youtube.svg); background-size: 20px 15px; } .tablet .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder > p { display: block; position: relative; left: auto; bottom: auto; width: 100%; font-size: 10px; line-height: 35px; color: #606060; letter-spacing: 1px; } .tablet.ios.safari .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { padding-bottom: 25px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link { right: auto; top: auto; border: none; padding-top: 35px; } .tablet .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a { border: none; border-radius: 0px; } /* + Mobile */ .mobile .main-header-holder .small-header-logo { z-index: 3; width: 41px; margin-left: 20px; background-size: 41px 45px; } .mobile .main-header-holder .big-header-logo { left: 20px; width: 65px; height: 65px; } .mobile .main-header-holder .main-nav-trigger { right: 20px; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav { display: block; position: relative; left: auto; top: auto; width: 100%; height: auto; flex-wrap: initial; align-content: normal; padding: 0px; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li { position: relative; z-index: 2; width: 100%; padding: 0px 0; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li:nth-child(5n + 1) { clear: none; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li a { height: auto; padding: 0px; line-height: 40px; font-size: 14px; color: #9b9b9b; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li a span { padding-bottom: 0px; text-decoration: none; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li ul { display: none; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li ul li { width: 100%; padding: 0px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li ul li a { font-size: 13px; line-height: 35px !important; color: #606060; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li ul li a span { font-weight: 400; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li ul.header-social-nav { display: flex; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav > a { -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav > a:after { content: ""; display: block; position: absolute; right: 0px; top: 50%; width: 5px; height: 5px; border-left: 2px solid #606060; border-top: 2px solid #606060; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-135deg) scale(1); -webkit-transition: all 300ms 0ms ease-in-out; -moz-transition: all 300ms 0ms ease-in-out; -ms-transition: all 300ms 0ms ease-in-out; -o-transition: all 300ms 0ms ease-in-out; transition: all 300ms 0ms ease-in-out; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened > a { color: #ffffff; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened > a:after { border-color: #ffffff; -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.with-subnav.opened.inquire-link > a { color: #de7a5f; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.inquire-link > a { color: #914c3b; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.current > a { color: #9b9b9b; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.current ul li a.current { color: #9b9b9b; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.current.inquire-link > a { color: #de7a5f; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-item a { color: #fff; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-item ul li a { color: #606060; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav li.current-menu-parent ul li.current-menu-item a { color: #fff; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link { z-index: 3; position: relative; right: auto; top: auto; padding-top: 15px; font-size: 14px; color: #9b9b9b; letter-spacing: 0.5px; border: none; border-radius: 0px; } .mobile .main-header-holder .main-header .main-nav-holder .main-nav > li.members-area-link a { border: none; border-radius: 0px; line-height: 40px !important; } .mobile .main-header-holder .main-header .main-nav-holder .members-area-link ul { display: none; } .mobile .main-header-holder .main-header .main-nav-holder:after { content: ""; z-index: 2; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 80px; background: linear-gradient(#000000, #000000 50%, transparent 100%); } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { z-index: 2; display: flex; flex-wrap: wrap; overflow: hidden; overflow-y: scroll; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding: 80px 20px 20px; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder { display: flex; position: relative; align-self: flex-end; flex-wrap: wrap; width: 100%; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav { position: absolute; right: 0px; bottom: 0px; left: auto; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li { width: auto; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li a { display: block; width: 30px; height: 35px; text-indent: -9999px; background-repeat: no-repeat; background-position: center center; outline: none; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.facebook-link a { background-image: url(../img/icon-social-facebook.svg); background-size: 18px 18px; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.instagram-link a { background-image: url(../img/icon-social-instagram.svg); background-size: 19px 19px; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.twitter-link a { background-image: url(../img/icon-social-twitter.svg); background-size: 20px 17px; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder .header-social-nav li.youtube-link a { background-image: url(../img/icon-social-youtube.svg); background-size: 20px 15px; } .mobile .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder .soc-para-holder > p { display: block; position: relative; left: auto; bottom: auto; width: 100%; font-size: 10px; line-height: 35px; color: #606060; letter-spacing: 1px; } .mobile.ios.safari .main-header-holder .main-header .main-nav-holder .mobile-main-nav-holder { padding-bottom: 20px; } /* = BOOK A TOUR POPUP ------------------------------------------------------------------------------------- */ .book-wrapper, .inquire-wrapper { position: fixed; left: 0px; top: 0px; z-index: 9998; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); transform: translateZ(0px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .book-holder, .inquire-holder { position: absolute; left: 50%; top: 0px; bottom: 0px; width: 100%; max-width: 760px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .book-tab, .selection {display: none;} .book-tab article { padding: 90px 0 80px; } .book-holder h3, .inquire-holder h3 { margin-bottom: 5px; font-family: 'Old Standard TT', serif; font-size: 55px; font-style: italic; font-weight: 400; letter-spacing: 1px; line-height: 65px; color: #ffffff; text-align: center; } .book-holder p { max-width: 310px; margin: 0px auto; font-size: 16px; line-height: 33px; color: #ffffff; text-align: center; } .book-tab.park-book p { max-width: 510px; } .selection { position: absolute; left: 50%; top: 50%; width: 100%; max-height: 690px; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .selection p {max-width: 500px;} .popup-house-list { padding-top: 80px; text-align: center; } .popup-house-list li { display: inline-block; opacity: 1; width: 250px; text-align: center; vertical-align: top; transition: ease 300ms all; } .popup-house-list li figure { position: relative; overflow: hidden; width: 155px; height: 155px; margin: 0 auto 20px; padding: 6px; border-radius: 50%; } .desktop .popup-house-list li a figure { display: block; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .desktop .popup-house-list li a { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: ease 300ms all; } .desktop .popup-house-list li:hover a { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .popup-house-list li figure:after { content: ""; position: absolute; top: 25%; left: -68%; opacity: 0; z-index: 2; width: 100%; height: 200%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); background: rgba(255, 255, 255, 0.13); background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 11%, rgba(255, 255, 255, 0.5) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%) } .desktop .popup-house-list li a:hover figure:after { opacity: 1; top: -120%; left: 88%; transition-property: left, top, opacity; transition-duration: 1.4s, 1.4s, 1s; transition-delay: 100ms; transition-timing-function: ease; } .popup-house-list li figure figcaption { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%); font-family: 'montserrat-medium'; font-size: 18px; line-height: 22px; color: white; text-transform: uppercase; } .popup-house-list li img { display: block; position: relative; z-index: 1; width: 100%; height: auto; filter: grayscale(100%); border-radius: 50%; } .popup-house-list li a img { filter: grayscale(0%); } .popup-house-list li h4 { font-family: 'montserrat-bold'; font-size: 18px; line-height: 27px; color: white; } .popup-house-list li p, .popup-section section .popup-house-list li p { font-size: 15px; line-height: 27px; color: white; } .popup-house-list li.active, .popup-house-list li:hover { opacity: 1; } .popup-house-list li figure:before { content: ""; position: absolute; left: 0px; top: 0px; opacity: 0.2; z-index: 2; width: 167px; height: 167px; background: url(../img/house-item-selection.png) 50% 50% no-repeat #c4c4c4; background-size: 100% auto; border-radius: 50%; filter: grayscale(100%); } .popup-house-list li a figure:before { opacity: 1; filter: grayscale(0%); background: url(../img/house-item-selection.png) 50% 50% no-repeat; background-size: 100% auto; } .popup-house-list li.static, .popup-house-list li.static:hover { opacity: 1; } .popup-house-list li.static img, .popup-house-list li.static h4, .popup-house-list li.static p { opacity: 0.5; } .popup-house-list li.static:hover img { filter: grayscale(100%); } .close-popup-btn { display: block; position: absolute; right: 10px; top: 15px; z-index: 10; width: 68px; height: 68px; text-indent: -9999px; border-radius: 50%; outline: none; } .close-popup-btn:before, .close-popup-btn:after { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 1px; height: 22px; background: #ffffff; } .close-popup-btn:before { -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(45deg) scale(1); } .close-popup-btn:after { -webkit-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-45deg) scale(1); -moz-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-45deg) scale(1); -ms-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-45deg) scale(1); -o-transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-45deg) scale(1); transform: translateX(0px) translateY(-50%) translateZ(0px) rotate(-45deg) scale(1); } .tablet .close-popup-btn { right: 20px; top: 20px; width: 48px; height: 48px; } .tablet .close-popup-btn:before, .tablet .close-popup-btn:after { height: 18px; } .mobile .close-popup-btn { right: 12px; top: 12px; width: 38px; height: 38px; } .mobile .close-popup-btn:before, .mobile .close-popup-btn:after { height: 18px; } .prev-book-tab, .next-book-tab { display: block; position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; border-bottom: 2px solid #ffffff; } .prev-book-tab { left: 0px; border-left: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .next-book-tab { right: 0px; border-right: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(-45deg); -moz-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); -o-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } @media (max-width: 1000px) { .book-holder .selection h3 {margin-bottom: 25px;} .popup-house-list li { max-width: 220px; } .prev-book-tab, .next-book-tab { top: 120px; width: 15px; height: 15px; } .prev-book-tab {left: 60px;} .next-book-tab {right: 60px;} .book-tab article { max-width: 530px; margin: 0px auto; padding: 60px 0 40px; } .book-tab article h3 { margin-bottom: 15px; line-height: 56px; } } @media (max-width: 850px) { .book-holder { width: 100%; padding: 0 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } } @media (max-width: 640px) { .book-holder .selection { width: 70%; } .book-holder .selection h3 { margin-bottom: 25px; font-size: 30px; line-height: 39px; } .book-holder .selection p { margin-bottom: 60px; font-size: 12px; line-height: 20px; } .popup-house-list { position: relative; width: 220px; height: 230px; margin: 0px auto; padding-top: 0px; } .popup-house-list li { position: absolute; left: 0px; top: 0px; opacity: 0; max-width: 220px; } .mobile .popup-house-list li { -webkit-transition: all 500ms ease-in-out !important; -moz-transition: all 500ms ease-in-out !important; transition: all 500ms ease-in-out !important; -webkit-transition-property: transform, opacity !important; -moz-transition-property: transform, opacity !important; transition-property: transform, opacity !important; } .mobile .popup-house-list li.deactivate { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } .book-holder .selection .popup-house-list li p { margin: 0px; font-size: 16px; line-height: 25px; } .prev-popup-house, .next-popup-house { display: block; position: absolute; top: 80px; z-index: 2; width: 15px; height: 15px; border-bottom: 2px solid #ffffff; } .prev-popup-house { left: -30px; border-left: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .next-popup-house { right: -30px; border-right: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(-45deg); -moz-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); -o-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .popup-house-bullets { padding-top: 40px; text-align: center; } .popup-house-bullets li { display: inline-block; margin: 0 7px; } .popup-house-bullets li a { display: block; width: 10px; height: 10px; border: 1px solid #c4c4c4; border-radius: 50%; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .popup-house-bullets li.active a { background: #c4c4c4; } .calendly-inline-widget { margin: 0 -46px; } .prev-book-tab, .next-book-tab { top: 110px; width: 15px; height: 15px; } .prev-book-tab {left: 27px;} .next-book-tab {right: 27px;} .book-tab article { max-width: 295px; margin: 0px auto; padding: 60px 0 40px; } .book-tab article h3 { margin-bottom: 15px; line-height: 31px; font-size: 30px; white-space: nowrap; } .book-tab article p { font-size: 12px; line-height: 20px; } } .park-book ::-webkit-input-placeholder { opacity: 1; color: #ffffff; } .park-book ::-moz-placeholder { opacity: 1; color: #ffffff; } .park-book :-ms-input-placeholder { opacity: 1; color: #ffffff; } .park-book :-moz-placeholder { opacity: 1; color: #ffffff; } .park-book form { position: relative; max-width: 370px; margin: 0px auto; } .park-book form > div:first-child { text-align: center; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .park-book input[type="text"], .park-book input[type="email"] { display: block; width: 100%; height: 54px; margin-bottom: 35px; font-family: 'montserrat-light'; font-weight: 300; color: #ffffff; line-height: 54px; text-align: center; font-size: 14px; background: none; border: none; border-bottom: 1px solid #ffffff; border-radius: 0px; -webkit-appearance: none; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .park-book #subscribe-result { margin-top: -20px; margin-bottom: 35px; } .park-book #subscribe-result p { text-align: center; color: #D77559; font-family: 'montserrat-medium'; font-weight: 500; font-size: 14px; line-height: 14px; } .park-book .rounded-btn { min-width: 200px; font-family: 'montserrat-medium'; line-height: 50px; font-size: 13px; font-weight: 700; letter-spacing: 0.8px; background: #D77559; border: none; -webkit-appearance: none; } .park-book #subscribe-success-msg { position: absolute; left: -9999px; top: 0px; opacity: 0; width: 100%; height: 100%; -webkit-transition: left 0ms, opacity 500ms 500ms ease-in-out; -moz-transition: left 0ms, opacity 500ms 500ms ease-in-out; -ms-transition: left 0ms, opacity 500ms 500ms ease-in-out; -o-transition: left 0ms, opacity 500ms 500ms ease-in-out; transition: left 0ms, opacity 500ms 500ms ease-in-out; } .park-book #subscribe-success-msg p { position: absolute; left: 50%; top: 50%; width: 510px; font-family: 'Old Standard TT', serif; font-size: 30px; font-style: italic; font-weight: 400; line-height: 38px; text-align: center; color: #ffffff; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } @media (max-width: 640px) { .park-book article p br {display: none;} .park-book #subscribe-success-msg p { width: 100%; font-size: 20px; line-height: 27px; } } @media (max-width: 340px) { .book-tab article h3 { white-space: initial; } .park-book input[type="text"], .park-book input[type="email"] { height: 34px; line-height: 34px; margin-bottom: 20px; } .park-book #subscribe-result { margin-bottom: 20px; margin-top: -10px; } } /* = INQUIRE (18.04.2019.) ------------------------------------------------------------------------------------- */ .inquire-holder { max-width: 970px; } .inquire-holder h3 { margin-bottom: 50px; padding-top: 6vh; } .inquire-content { background: #F0F4EB; } .inquire-content h4 { margin-bottom: 40px; font-family: 'montserrat-bold'; font-size: 18px; line-height: 20px; color: #000; text-align: center; } .inquire-content h5 { margin-bottom: 10px; padding-top: 80px; font-family: 'Old Standard TT', serif; font-size: 42px; line-height: 60px; color: #101010; font-style: italic; background: url(../img/icon-email-sent.svg) 50% 0 no-repeat; } .inquire-content h6 { margin-bottom: 10px; font-family: 'montserrat-medium'; font-size: 24px; line-height: 60px; color: #101010; } .top-thank-you-info p { font-size: 13px; line-height: 19px; } .inquire-content .inquire-form-outer { padding: 70px 100px 10px; } .inquire-content .inquire-thank-you { display: none; } .inquire-form-list > li { margin-bottom: 40px; text-align: center; } .inquire-form-list li.middle-align { max-width: 370px; margin-left: auto; margin-right: auto; } .inquire-form-list li.two-col-form { margin-left: -15px; margin-right: -15px; } .inquire-form-list li.two-col-form .col { float: left; width: 50%; padding: 0 15px; box-sizing: border-box; } .inquire-form-list li label { display: block; font-family: 'montserrat-medium'; font-size: 12px; line-height: 16px; color: #333; text-align: left; } .inquire-form-list li .error { display: none; } .inquire-form-list li input[type="text"], .inquire-form-list li input[type="email"], .inquire-form-list li input[type="tel"], .inquire-form-list li textarea { width: 100%; height: 36px; font-family: 'montserrat-regular'; font-size: 16px; line-height: 16px; color: #000; text-align: left; background: none; border: 0; border-bottom: 1px solid #000; border-radius: 0; box-sizing: border-box; -webkit-appearance: none; } .inquire-form-list li textarea { padding-top: 10px; box-sizing: border-box; } .inquire-form-list li input::-webkit-input-placeholder, .inquire-form-list li textarea::-webkit-input-placeholder { color: #F0F4EB; } .inquire-form-list li input::-moz-placeholder, .inquire-form-list li textarea::-moz-placeholder { color: #F0F4EB; } .inquire-form-list li input:-ms-input-placeholder, .inquire-form-list li textarea:-ms-input-placeholder { color: #F0F4EB; } .inquire-form-list li input:-moz-placeholder, .inquire-form-list li textarea:-moz-placeholder { color: #F0F4EB; } .intl-tel-input .country-list .country { text-align: left; } .inquire-form-list li .rounded-btn { position: relative; min-width: 200px; font-family: 'montserrat-medium'; line-height: 50px; font-size: 13px; font-weight: 700; letter-spacing: 0.8px; background: #D77559; border: none; -webkit-appearance: none; } .inquire-form-list li .check-outer { position: relative; text-align: center; } .inquire-form-list li .check-outer input[type="checkbox"] { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; } .inquire-form-list li .check-outer label { display: inline-block; position: relative; padding: 0 30px; } .inquire-form-list li .check-outer label:before { content: ""; position: absolute; left: 0; top: -2px; width: 17px; height: 17px; border: #000 solid 1px; } .inquire-form-list li .check-outer label:after { content: ""; position: absolute; left: 7px; top: 1px; opacity: 0; width: 4px; height: 10px; border-right: #000 solid 1px; border-bottom: #000 solid 1px; transform: rotate(45deg); } .inquire-form-list li .check-outer input[type="checkbox"]:checked+label:after { opacity: 1; } /* Error messages */ .inquire-form-list li .error-message { color: #A65A45; } .inquire-form-list li input[aria-invalid="true"] { border-bottom: 1px solid #000 !important; } .top-thank-you-info { padding: 50px 20px; text-align: center; background-color: white; } .main-thank-you-info { padding: 40px 20px; text-align: center; } @media (max-width: 970px) { .inquire-content { margin: 0 60px; } } @media (max-width: 768px) { .inquire-form-list li.middle-align { max-width: 100%; } .inquire-form-list li.two-col-form { margin-left: 0; margin-right: 0; } .inquire-form-list li.two-col-form .col { float: none; width: auto; padding: 0; } .inquire-form-list li.two-col-form .col:first-child { margin-bottom: 40px; } } @media (max-height: 780px) { .inquire-holder h3 { margin-bottom: 20px; padding-top: 20px; } .inquire-content .inquire-form-outer { padding-top: 20px; padding-bottom: 10px; } .inquire-form-list > li { margin-bottom: 20px; } .top-thank-you-info, .main-thank-you-info { padding: 20px; } } @media (max-width: 640px) { .inquire-content { margin: 0 20px; } .inquire-content h4 { margin-bottom: 20px; } .inquire-content .inquire-form-outer { padding-left: 30px; padding-right: 30px; } .inquire-holder h3 { padding-top: 10px; font-size: 36px; line-height: 40px; } .inquire-content h4 { font-size: 15px; line-height: 20px; } .inquire-content h5 { padding-top: 60px; font-size: 36px; background-size: 50px auto; } .inquire-content h6 { font-size: 18px; line-height: 20px; } .top-thank-you-info p { font-size: 12px; line-height: 18px; } .inquire-form-list li.two-col-form .col:first-child { margin-bottom: 20px; } .inquire-form-list li label { display: none; } .inquire-form-list li .check-outer label { display: block; padding-right: 0; font-family: 'montserrat-medium'; font-size: 11px; white-space: nowrap; } .inquire-form-list li input[type="text"], .inquire-form-list li input[type="email"], .inquire-form-list li textarea { padding-left: 0; } .inquire-form-list li input::-webkit-input-placeholder, .inquire-form-list li textarea::-webkit-input-placeholder { color: #333333; } .inquire-form-list li input::-moz-placeholder, .inquire-form-list li textarea::-moz-placeholder { color: #333333; } } .select-box { position: relative; border-bottom: 1px solid #000; } .selected-option { position: relative; display: block; cursor: pointer; font-family: 'montserrat-regular'; line-height: 36px; font-size: 16px; text-align: left; background: #F0F4EB; } .selected-option:after { content: ""; display: block; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-bottom: 1px solid #000000; border-right: 1px solid #000000; transform: translateY(-50%) rotate(45deg); transition: 200ms ease-in-out; } .select-box.opened .selected-option:after { transform: rotate(225deg); } .options-list-holder { display: none; position: absolute; right: 0px; top: 100%; overflow: hidden; z-index: 100; width: 100%; background: #F0F4EB; box-sizing: border-box; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); } .options-list {} .options-list li { float: none; overflow: hidden; width: 100%; margin: 0px !important; padding: 0 20px; font-family: 'montserrat-regular'; line-height: 36px; color: #000000; font-size: 16px; text-align: left; border-bottom: 1px solid #D5D5D5; cursor: pointer; } .options-list span { float: left; } .options-list li.active { font-family: 'montserrat-medium'; } .options-list li:last-child { border-bottom: none; } .inquire-select { display: none; } @media (max-width: 640px) { /*.select-box { position: initial; } .options-list-holder { position: fixed; top: auto; bottom: 0px; } .options-list { position: relative; z-index: 3; background: #F0F4EB; } .select-box .options-list-holder:before { content: ""; position: fixed; left: -9999px; bottom: 0px; opacity: 0; z-index: 2; width: 100vh; height: 100vh; background: rgba(0, 0, 0, 0.6); transition: left 0ms 200ms, opacity 200ms ease-in-out; } .select-box.opened .options-list-holder:before { opacity: 1; left: 0px; transition: left 0ms 0ms, opacity 200ms ease-in-out; } */ } .keep-exploring-list { padding-top: 10px; text-align: center; } .keep-exploring-list li { display: inline-block; opacity: 1; width: 250px; text-align: center; vertical-align: top; transition: ease 300ms all; } .keep-exploring-list li figure { position: relative; overflow: hidden; width: 155px; height: 155px; margin: 0 auto 20px; padding: 6px; border-radius: 50%; } .desktop .keep-exploring-list li a figure { display: block; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .desktop .keep-exploring-list li a { display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: ease 300ms all; } .desktop .keep-exploring-list li:hover a { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .keep-exploring-list li figure:after { content: ""; position: absolute; top: 25%; left: -68%; opacity: 0; z-index: 2; width: 100%; height: 200%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); background: rgba(255, 255, 255, 0.13); background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 11%, rgba(255, 255, 255, 0.5) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%) } .desktop .keep-exploring-list li a:hover figure:after { opacity: 1; top: -120%; left: 88%; transition-property: left, top, opacity; transition-duration: 1.4s, 1.4s, 1s; transition-delay: 100ms; transition-timing-function: ease; } .keep-exploring-list li figure figcaption { position: absolute; left: 50%; top: 50%; z-index: 2; font-family: 'montserrat-medium'; font-size: 18px; line-height: 22px; color: white; text-transform: uppercase; transform: translate(-50%,-50%); } .keep-exploring-list li img { display: block; position: relative; z-index: 1; width: 100%; height: auto; filter: grayscale(100%); border-radius: 50%; } .keep-exploring-list li a img { filter: grayscale(0%); } .keep-exploring-list li h4 { margin-bottom: 10px; font-family: 'montserrat-bold'; font-size: 15px; line-height: 25px; color: #000; } .keep-exploring-list li.active, .keep-exploring-list li:hover { opacity: 1; } .keep-exploring-list li figure:before { content: ""; position: absolute; left: 0px; top: 0px; opacity: 0.2; z-index: 2; width: 167px; height: 167px; background: url(../img/house-item-selection.png) 50% 50% no-repeat #c4c4c4; background-size: 100% auto; border-radius: 50%; filter: grayscale(100%); } .keep-exploring-list li a figure:before { opacity: 1; filter: grayscale(0%); background: url(../img/house-item-selection.png) 50% 50% no-repeat; background-size: 100% auto; } .prev-exploring-item, .next-exploring-item { display: block; position: absolute; top: 80px; z-index: 2; width: 15px; height: 15px; border-bottom: 2px solid #ffffff; } .prev-exploring-item { left: -30px; border-left: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .next-exploring-item { right: -30px; border-right: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(-45deg); -moz-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); -o-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .keep-exploring-bullets { padding-top: 40px; text-align: center; } .keep-exploring-bullets li { display: inline-block; margin: 0 7px; } .keep-exploring-bullets li a { display: block; width: 10px; height: 10px; border: 1px solid #c4c4c4; border-radius: 50%; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .keep-exploring-bullets li.active a { background: #c4c4c4; } @media (max-width: 1000px) { .keep-exploring-list li { max-width: 220px; } } @media (max-width: 640px) { .keep-exploring-list { position: relative; width: 220px; height: 230px; margin: 0px auto; padding-top: 0px; } .keep-exploring-list li { position: absolute; left: 0px; top: 0px; opacity: 0; max-width: 220px; } .mobile .keep-exploring-list li { -webkit-transition: all 500ms ease-in-out !important; -moz-transition: all 500ms ease-in-out !important; transition: all 500ms ease-in-out !important; -webkit-transition-property: transform, opacity !important; -moz-transition-property: transform, opacity !important; transition-property: transform, opacity !important; } .mobile .keep-exploring-list li.deactivate { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } .prev-exploring-item, .next-exploring-item { display: block; position: absolute; top: 80px; z-index: 2; width: 15px; height: 15px; border-bottom: 2px solid #ffffff; } .prev-exploring-item { left: -30px; border-left: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .next-exploring-item { right: -30px; border-right: 2px solid #ffffff; -webkit-transform: translateY(-50%) rotate(-45deg); -moz-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); -o-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .keep-exploring-bullets { padding-top: 0; text-align: center; } .keep-exploring-bullets li { display: inline-block; margin: 0 7px; } .keep-exploring-bullets li a { display: block; width: 10px; height: 10px; border: 1px solid #c4c4c4; border-radius: 50%; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .keep-exploring-bullets li.active a { background: #c4c4c4; } }