.main-menu-trigger-wrapper { position: fixed; z-index: 8; bottom: 50%; /* margin-top: -26px; */ right: 8.16667%; opacity: 0; } .main-menu-trigger-wrapper .icon { font-size: 42px; margin-left: 2px; color: #fdb818 } .main-menu-trigger-wrapper .pin-wrapper { position: absolute; top: 14px; left: 17px; height: 20px; z-index: 2 } .main-menu-trigger-wrapper .pin-wrapper .icon { font-size: 16px; height: 20px; margin: 0; color: #22205f } .icon-close-menu { -webkit-transform: scale(.2); transform: scale(.2); opacity: 0; position: absolute; display: block; height: 0px; width: 0px; top: 13px; left: 13px; z-index: 2; } .icon-close-menu:before { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .icon-close-menu:after,.icon-close-menu:before { content: ""; position: absolute; top: 50%; left: 0; display: block; height: 2px; width: 100%; /*background-color: #22205f;*/ transition: all,.3s,cubic-bezier(.55,0,.1,1) } .icon-close-menu:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .main-menu-wrapper { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 5; overflow: hidden; visibility: visible; opacity: 1 } .main-menu,.main-menu-wrapper svg { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .main-menu { padding-bottom: 53px } .main-menu.intro-scene { opacity: 0 } .main-menu.intro-scene .button { border: none; background-color: hsla(0,0%,100%,0); box-shadow: none } .main-menu.intro-scene .button-location .destination { font-size: 13px } .main-menu.intro-scene .button-location .destination:after,.main-menu.intro-scene .language-select-wrapper { display: none } .map-container { top: 0; left: 0; width: 100%; height: calc(100% - 0px); /*background-image: url(../ui/map.jpg);*/ background: #ccc; background-repeat: no-repeat; background-size: 100% 100%; background-position: 50%; -webkit-transform: scale(1.3); transform: scale(1.3) } .map-container,.map-location-wrapper { position: absolute; will-change: transform } .map-location-wrapper { z-index: 101 } .map-location-wrapper.maldives { top: 68.3%; left: 75.5% } .map-location-wrapper.mauritius { top: 84.7%; left: 69.8% } .map-location-wrapper.tampa-bay { top: 52%; left: 19.3% } .map-location-wrapper.panama { top: 64.8%; left: 20.5% } .map-location-wrapper.nairobi { top: 71.4%; left: 62.5% } .map-location-wrapper.san-jose { top: 48.5%; left: 7% } .map-location-wrapper.cancun { top: 57%; left: 17.2% } .map-location-wrapper.active .destination:before { width: 100%; opacity: 1 } .map-location-wrapper.active .button:after { opacity: 0 } .map-location-wrapper:hover { z-index: 102 } .main-menu-footer { position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f5f5f5; border-top: 1px solid rgba(0,0,0,.2); padding: 12px 0 } .main-menu-footer:after,.main-menu-footer:before { content: ""; display: table } .main-menu-footer:after { clear: both } .main-menu-footer-left { width: 66.66667%; float: left; padding-left: 4.16667%; padding-right: 4.16667% } .main-menu-footer-right { width: 33.33333%; float: left; padding-right: 4.16667% } .main-menu-footer .footer-bar-links { padding: 0 } @media only screen and (min-width:0) and (max-width:600px) { .menu-trigger.is-opened { background-color: #fdb818 } .menu-trigger.is-opened .icon-close-menu:after,.menu-trigger.is-opened .icon-close-menu:before { background-color: #fff } .main-menu-trigger-wrapper { top: 15% } .main-menu-wrapper { overflow: auto } .main-menu { position: relative; height: auto; display: block; padding-top: 120px; padding-bottom: 0 } .main-menu.intro-scene .main-menu-footer,.main-menu.intro-scene .map-location-wrapper { display: none } .map-container { position: relative; padding-left: 4.16667%; padding-right: 4.16667%; height: auto; background-size: cover; background-image: none; padding-bottom: 40px } .map-location-wrapper { position: relative; top: auto!important; left: auto!important; border-bottom: 1px solid hsla(0,0%,100%,.2) } .map-location-wrapper .button-location { padding: 15px; border-radius: 0 } .map-location-wrapper .button-location:active { background-color: #292672 } .main-menu-footer { position: relative } .main-menu-footer-left { width: 100%; float: left } .main-menu-footer-right { width: 100%; float: left; padding-left: 4.16667%; padding-right: 4.16667%; padding-top: 10px } }