style.min.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. .main-menu-trigger-wrapper {
  2. position: fixed;
  3. z-index: 8;
  4. bottom: 50%;
  5. /* margin-top: -26px; */
  6. right: 8.16667%;
  7. opacity: 0;
  8. }
  9. .main-menu-trigger-wrapper .icon {
  10. font-size: 42px;
  11. margin-left: 2px;
  12. color: #fdb818
  13. }
  14. .main-menu-trigger-wrapper .pin-wrapper {
  15. position: absolute;
  16. top: 14px;
  17. left: 17px;
  18. height: 20px;
  19. z-index: 2
  20. }
  21. .main-menu-trigger-wrapper .pin-wrapper .icon {
  22. font-size: 16px;
  23. height: 20px;
  24. margin: 0;
  25. color: #22205f
  26. }
  27. .icon-close-menu {
  28. -webkit-transform: scale(.2);
  29. transform: scale(.2);
  30. opacity: 0;
  31. position: absolute;
  32. display: block;
  33. height: 0px;
  34. width: 0px;
  35. top: 13px;
  36. left: 13px;
  37. z-index: 2;
  38. }
  39. .icon-close-menu:before {
  40. -webkit-transform: rotate(45deg);
  41. transform: rotate(45deg)
  42. }
  43. .icon-close-menu:after,.icon-close-menu:before {
  44. content: "";
  45. position: absolute;
  46. top: 50%;
  47. left: 0;
  48. display: block;
  49. height: 2px;
  50. width: 100%;
  51. /*background-color: #22205f;*/
  52. transition: all,.3s,cubic-bezier(.55,0,.1,1)
  53. }
  54. .icon-close-menu:after {
  55. -webkit-transform: rotate(-45deg);
  56. transform: rotate(-45deg)
  57. }
  58. .main-menu-wrapper {
  59. position: fixed;
  60. width: 100%;
  61. height: 100%;
  62. left: 0;
  63. top: 0;
  64. z-index: 5;
  65. overflow: hidden;
  66. visibility: visible;
  67. opacity: 1
  68. }
  69. .main-menu,.main-menu-wrapper svg {
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. width: 100%;
  74. height: 100%
  75. }
  76. .main-menu {
  77. padding-bottom: 53px
  78. }
  79. .main-menu.intro-scene {
  80. opacity: 0
  81. }
  82. .main-menu.intro-scene .button {
  83. border: none;
  84. background-color: hsla(0,0%,100%,0);
  85. box-shadow: none
  86. }
  87. .main-menu.intro-scene .button-location .destination {
  88. font-size: 13px
  89. }
  90. .main-menu.intro-scene .button-location .destination:after,.main-menu.intro-scene .language-select-wrapper {
  91. display: none
  92. }
  93. .map-container {
  94. top: 0;
  95. left: 0;
  96. width: 100%;
  97. height: calc(100% - 0px);
  98. /*background-image: url(../ui/map.jpg);*/
  99. background: #ccc;
  100. background-repeat: no-repeat;
  101. background-size: 100% 100%;
  102. background-position: 50%;
  103. -webkit-transform: scale(1.3);
  104. transform: scale(1.3)
  105. }
  106. .map-container,.map-location-wrapper {
  107. position: absolute;
  108. will-change: transform
  109. }
  110. .map-location-wrapper {
  111. z-index: 101
  112. }
  113. .map-location-wrapper.maldives {
  114. top: 68.3%;
  115. left: 75.5%
  116. }
  117. .map-location-wrapper.mauritius {
  118. top: 84.7%;
  119. left: 69.8%
  120. }
  121. .map-location-wrapper.tampa-bay {
  122. top: 52%;
  123. left: 19.3%
  124. }
  125. .map-location-wrapper.panama {
  126. top: 64.8%;
  127. left: 20.5%
  128. }
  129. .map-location-wrapper.nairobi {
  130. top: 71.4%;
  131. left: 62.5%
  132. }
  133. .map-location-wrapper.san-jose {
  134. top: 48.5%;
  135. left: 7%
  136. }
  137. .map-location-wrapper.cancun {
  138. top: 57%;
  139. left: 17.2%
  140. }
  141. .map-location-wrapper.active .destination:before {
  142. width: 100%;
  143. opacity: 1
  144. }
  145. .map-location-wrapper.active .button:after {
  146. opacity: 0
  147. }
  148. .map-location-wrapper:hover {
  149. z-index: 102
  150. }
  151. .main-menu-footer {
  152. position: absolute;
  153. bottom: 0;
  154. left: 0;
  155. width: 100%;
  156. background-color: #f5f5f5;
  157. border-top: 1px solid rgba(0,0,0,.2);
  158. padding: 12px 0
  159. }
  160. .main-menu-footer:after,.main-menu-footer:before {
  161. content: "";
  162. display: table
  163. }
  164. .main-menu-footer:after {
  165. clear: both
  166. }
  167. .main-menu-footer-left {
  168. width: 66.66667%;
  169. float: left;
  170. padding-left: 4.16667%;
  171. padding-right: 4.16667%
  172. }
  173. .main-menu-footer-right {
  174. width: 33.33333%;
  175. float: left;
  176. padding-right: 4.16667%
  177. }
  178. .main-menu-footer .footer-bar-links {
  179. padding: 0
  180. }
  181. @media only screen and (min-width:0) and (max-width:600px) {
  182. .menu-trigger.is-opened {
  183. background-color: #fdb818
  184. }
  185. .menu-trigger.is-opened .icon-close-menu:after,.menu-trigger.is-opened .icon-close-menu:before {
  186. background-color: #fff
  187. }
  188. .main-menu-trigger-wrapper {
  189. top: 15%
  190. }
  191. .main-menu-wrapper {
  192. overflow: auto
  193. }
  194. .main-menu {
  195. position: relative;
  196. height: auto;
  197. display: block;
  198. padding-top: 120px;
  199. padding-bottom: 0
  200. }
  201. .main-menu.intro-scene .main-menu-footer,.main-menu.intro-scene .map-location-wrapper {
  202. display: none
  203. }
  204. .map-container {
  205. position: relative;
  206. padding-left: 4.16667%;
  207. padding-right: 4.16667%;
  208. height: auto;
  209. background-size: cover;
  210. background-image: none;
  211. padding-bottom: 40px
  212. }
  213. .map-location-wrapper {
  214. position: relative;
  215. top: auto!important;
  216. left: auto!important;
  217. border-bottom: 1px solid hsla(0,0%,100%,.2)
  218. }
  219. .map-location-wrapper .button-location {
  220. padding: 15px;
  221. border-radius: 0
  222. }
  223. .map-location-wrapper .button-location:active {
  224. background-color: #292672
  225. }
  226. .main-menu-footer {
  227. position: relative
  228. }
  229. .main-menu-footer-left {
  230. width: 100%;
  231. float: left
  232. }
  233. .main-menu-footer-right {
  234. width: 100%;
  235. float: left;
  236. padding-left: 4.16667%;
  237. padding-right: 4.16667%;
  238. padding-top: 10px
  239. }
  240. }