@font-face{font-family:Raleway;src:url(fonts/raleway-medium-webfont.html) format('woff2'),url(fonts/raleway-medium-webfont.woff) format('woff');font-style:normal}@font-face{font-family:Raleway;src:url(fonts/raleway-bold-webfont.html) format('woff2'),url(fonts/raleway-bold-webfont.woff) format('woff');font-style:normal;font-weight:700}@font-face{font-family:Caviar;src:url(fonts/caviardreams-regular-webfont.html) format('woff2'),url(fonts/caviardreams-regular-webfont.woff) format('woff');font-style:normal}@font-face{font-family:Baskerville;src:url(fonts/baskerville.html) format('woff2'),url(fonts/baskerville.woff) format('woff');font-style:normal}@font-face{font-family:Kepler;src:url(fonts/kepler-regular-webfont.html) format('woff2'),url(fonts/kepler-regular-webfont.woff) format('woff');font-style:normal}@font-face{font-family:Birch;src:url(fonts/birch-regular-webfont.html) format('woff2'),url(fonts/birch-regular-webfont.woff) format('woff');font-style:normal}@font-face{font-family:Lato;src:url(fonts/lato-regular-webfont.html) format('woff2'),url(fonts/lato-regular-webfont.woff) format('woff');font-style:normal}@font-face{font-family:Otama;src:url(fonts/otama.html) format('woff2'),url(fonts/otama.woff) format('woff');font-style:normal}@font-face{font-family:DolceVita;src:url(fonts/DolceVitaLight.html) format('woff2'),url(fonts/DolceVitaLight.woff) format('woff');font-style:normal}@font-face{font-family:Voor;src:url(fonts/Voor.html) format('woff2'),url(fonts/Voor.woff) format('woff');font-style:normal}	
			html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}input,select,img,iframe{vertical-align: middle;}html{font-size:125%;}
			
			body { background:#F0F0F0; overflow-x:hidden; } body.locked { height:100%; overflow:hidden; } .centered { margin: auto; display: block; } .full_width { width: 100%; } .full_height { height: 100%; width: auto; } .absolute { position:absolute; top:0; left:0; } .mobile_only { display:none; } .button.mobile_only { display:none; } body * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; } .has_transition_800_inout_exp { -webkit-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1000_inout_exp { -webkit-transition: all 1000ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 1000ms cubic-bezier(0.860, 0.000, 0.070, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1300_inout_exp { -webkit-transition: all 1300ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 1300ms cubic-bezier(0.860, 0.000, 0.070, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_800_inout { -webkit-transition: all 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_600_inout_cubic { -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_800_inout_cubic { -webkit-transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1000_inout_cubic { -webkit-transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1300_inout_cubic { -webkit-transition: all 1300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 1300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1600_inout_quart { -webkit-transition: transform 1600ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: transform 1600ms cubic-bezier(0.770, 0.000, 0.175, 1.000); will-change: transform; backface-visibility:hidden; } .has_transition_600_inout_cubic { -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_400_inout { -webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_300_inout { -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_300 { -webkit-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) ; will-change: transform, opacity; backface-visibility:hidden; } .has_transition_600_inout { -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; will-change: transform, opacity; backface-visibility:hidden; } .has_transition_400 { -webkit-transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; will-change: transform, opacity; backface-visibility:hidden; } .has_transition_600 { -webkit-transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) !important; will-change: transform, opacity; backface-visibility:hidden; } .has_transition_800 { -webkit-transition: all 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_600_cubic { -webkit-transition: all 600ms cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 600ms cubic-bezier(0.215, 0.610, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_400_cubic { -webkit-transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 400ms cubic-bezier(0.215, 0.610, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1000_expo { -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_800_expo { -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1300_expo { -webkit-transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1600_expo { -webkit-transition: all 1600ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 1600ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_2000_expo { -webkit-transition: all 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_800 { -webkit-transition: all 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1000 { -webkit-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1000_cubic { -webkit-transition: all 1000ms cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 1000ms cubic-bezier(0.215, 0.610, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_1500_cubic { -webkit-transition: all 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 1500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .has_transition_800_cubic { -webkit-transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1.000); will-change:transform,opacity; backface-visibility:hidden; } .has_transition_1200 { -webkit-transition: all 1200ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 1200ms cubic-bezier(0.165, 0.840, 0.440, 1.000); will-change: transform, opacity; backface-visibility:hidden; } .no_transition { -webkit-transition: none !important; transition: none !important; } .horizontal_mirror { -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .transform_left { -webkit-transform-origin:left; transform-origin:left; } .transform_right { -webkit-transform-origin:right; transform-origin:right; } .transform_centered { -webkit-transform-origin: center center!important; transform-origin: center center !important; } .no_width { -webkit-transform: scale(0,1); transform: scale(0,1); } .no_height { -webkit-transform: scale(1,0); transform: scale(1,0); } .no_margin_left { margin-left:0 !Important; } .no_opacity { opacity: 0!important; pointer-events:none; } .top_single { opacity: 0 !important; -webkit-transform: translateY(10px); transform: translateY(10px); } .top_double { opacity: 0 !important; -webkit-transform: translateY(30px); transform: translateY(30px); } .top_triple { -webkit-transform: translateY(60px); transform: translateY(60px); } .top_wrap { -webkit-transform: translateY(86%); transform: translateY(86%); } .self { overflow:hidden; -webkit-transform-origin:left; transform-origin:left; } .self_hidden { -webkit-transform:translateX(-100%); transform:translateX(-100%); will-change:transform; backface-visibility:hidden; } .self_showing { -webkit-transform:translateX(100%); transform:translateX(100%); will-change:transform; backface-visibility:hidden; } .main_call .self .self_showing { -webkit-transform:translateX(110%); transform:translateX(110%); } .veil { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000000; opacity: 0.2; will-change: opacity; z-index: 1; backface-visibility:hidden; } .hidden_by_scaleup { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .hidden_by_scaleup_low { -webkit-transform: scale(1.025); transform: scale(1.025); opacity: 0 !important; pointer-events:none; } .hidden_by_scaling { -webkit-transform: scale(0.4) !important; transform: scale(0.4) !important; opacity: 0; pointer-events:none; } .hidden_by_scaling_full { -webkit-transform: scale(0) !important; transform: scale(0) !important; pointer-events:none; } .hidden_by_scaling_low { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0; pointer-events:none; } .hidden_by_scaling_ultralow { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0 !important; pointer-events:none; } .hidden_by_scaling_invisible { -webkit-transform: scale(0.98); transform: scale(0.98); opacity: 0 !important; } .left_translated { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 0.8; } .left_translated_low { -webkit-transform: translateX(-20px); transform: translateX(-20px); opacity: 0; } .right_translated { -webkit-transform: translateX(40px); transform: translateX(40px); opacity: 0.8; } .container { margin: auto; width:800px; } .half { width: 50%; float: left; position:relative; } .quarter { float: left; width: 25%; } .third { float: left; width: 33.3333%; } .sixty { width:60%; float:left; } .thirty { width:30%; float:left; } .fourty { width:40%; float:left; } .twenty { width:20%; float:left; } .covered { position:relative; overflow:hidden; } .covered.full { width:100%; height:100%; } .covered.text { display:inline-block; } .cover { position: absolute; width: 100%; height: 100%; left:100%; -webkit-transform:translateX(-100%); transform:translateX(-100%); z-index:1; will-change:transform; backface-visibility:hidden; } .covered .content { -webkit-transform:translateX(10%); transform:translateX(10%); width: auto !important; height: 100%; opacity:0; will-change:transform; backface-visibility:hidden; } .cover.removed { -webkit-transform:translateX(0) !important; transform:translateX(0) !important; } .content.positioned { -webkit-transform:translateX(0) !important; transform:translateX(0) !important; opacity:1; } .covered.vertical .cover { top:-100%; -webkit-transform:translateY(100%); transform:translateY(100%); left: 0; } .covered.vertical .content { -webkit-transform:translateY(0) translateX(0); transform:translateY(0) translateX(0); } .covered.vertical .cover.removed { -webkit-transform:translateY(0); transform:translateY(0); } .covered.right .cover { left:-100%; -webkit-transform:translateX(100%); transform:translateX(100%); z-index:1; } .covered.right .content { -webkit-transform:translateX(-10%); transform:translateX(-10%); width: auto !important; } .cover.grey { background: #F0F0F0; } .cover.dark_grey { background:#DCDCDC; } .cover.white{ background: #FFFFFF; } h1, h2, h3, h4, h5 { font-weight: normal; } a { text-decoration: none; color:#332C26; } hr { border: none; border-bottom:1px solid #999999; width:20px; margin:auto; } .top_20 { margin-top:20px !important; } .top_40 { margin-top:40px !important; } .top_50 { margin-top:50px !important; } .top_60 { margin-top:60px !important; } .top_80 { margin-top:80px !important; } .top_100 { margin-top:100px !important; } .bottom_30 { margin-bottom:30px !important; } .bottom_60 { margin-bottom:60px !important; } .bottom_90 { margin-bottom:90px !important; } .bottom_120 { margin-bottom:120px !important; } .bottom_150 { margin-bottom:150px !important; } /**********************************************/ 
#main { width: calc(100% - 60px); position: relative; left: 60px; top: 0; z-index:1; overflow:hidden; -webkit-transition: transform 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000)s; transition: transform 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } 
#menu_container { position: fixed; top: 0; height: 100vh; width:60px; background:#FFFFFF; z-index:4; will-change:transform; backface-visibility:hidden; } 
#menu_container.hidden { transform:translateX(-100%); } 
#revealer { z-index:3; position:fixed; width: 100%; height:100%; top:0; pointer-events:none; will-change:transform; } 
.rev_layer { width: 100%; height: 100%; position: absolute; top: 0; will-change:transform; -webkit-transform:translateX(-100%); transform:translateX(-100%); backface-visibility:hidden; } 
.rev_layer.covering { -webkit-transform:translateX(0%); transform:translateX(0%); } 
#layer_1 { background: #D9E9F0; } 
#layer_2 { background: #C4D6DD; z-index:1; } 
#layer_1.in { -webkit-animation: layerIn 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards; animation: layerIn 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards; transform-origin:left; -webkit-transform-origin:left; } 
#layer_1.out { display:none; } 
#layer_2.in { -webkit-animation: layerIn 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) 200ms forwards; animation: layerIn 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) 200ms forwards; transform-origin:left; -webkit-transform-origin:left; } 
#layer_2.out { -webkit-animation: layerOut 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards; animation: layerOut 800ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards; transform-origin:left; -webkit-transform-origin:left; -webkit-transform:translateX(0); transform:translateX(0); } 
@-webkit-keyframes layerIn { 0% {-webkit-transform:translateX(-100%);} 100% {-webkit-transform:translateX(0);} } @keyframes layerIn { 0% {transform:translateX(-100%);} 100% {transform:translateX(0);} } @-webkit-keyframes layerOut { 0% {-webkit-transform:translateX(0);} 100% {-webkit-transform:translateX(100%);} } @keyframes layerOut { 0% {transform:translateX(0);} 100% {transform:translateX(100%);} } #menu_controller { position: absolute; width: 25px; left: 50%; margin-left: -26px; margin-top: -25px; cursor: pointer; padding: 17px 13px; top: 50%; z-index:1; } #audio_player {cursor:pointer; position:absolute; left:9px; bottom:4.5%; } #quick_buttons { transform: rotateZ(-90deg); position: absolute; bottom: 15%; width: 240px; -webkit-transform-origin: left bottom; transform-origin: left bottom; left: 55px; } #quick_buttons ul li { float: left; font-family: Raleway; font-size: 11px; color: #767371; cursor:pointer; padding:20px 0; } #quick_buttons ul li:hover { color:#000000; } #quick_buttons ul li.spacer { margin: 0px 13px; } #languages { background: #FFFFFF; position: absolute; bottom: 15%; height: 69px; left: 62px; width:50px; -webkit-transform-origin:left; transform-origin:left; } #languages ul { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } #languages ul li { float: left; font-family: Raleway; font-size: 11px; color: #767371; cursor: pointer; } #languages ul li:hover { color:#000000; } #languages ul li + li { margin-top:8px; } #socials { background: #FFFFFF; position: absolute; bottom: calc(15% + 100px); height: 50px; left: 62px; width: 125px; padding: 0 5px; -webkit-transform-origin:left; transform-origin:left; } #socials ul { display: flex; justify-content: space-around; align-items: center; height: 100%; } #socials ul li:hover { -webkit-transform:scale(0.8); transform:scale(0.8); } #menu_controller.opened { -webkit-transform: translate3d(0,40px,0) rotateZ(45deg); transform: translate3d(0,40px,0) rotateZ(45deg); } #menu_controller:hover hr._1,#menu_controller.opened hr._1 { -webkit-transform: rotate(90deg) translate3d(9px,-1px,0) !important; transform: rotate(90deg) translate3d(9px,0px,0) !important; } #menu_controller:hover hr._2, #menu_controller.opened hr._2 { opacity: 0; } #menu_controller:hover hr._3, #menu_controller.opened hr._3 { -webkit-transform: translate3d(0px, -7px,0) !important; transform: translate3d(0px, -7px,0) !important; } #main_menu { position: fixed; left: 62px; z-index: 2; perspective:1500px; width: 300px; height: 100vh; pointer-events:none; } #main_menu_container { display: flex; flex-direction: column; justify-content: space-around; align-items: center; height: 100vh; width: 100%; transform-origin: left; transform: rotateY(94deg); opacity:0; background: #FFFFFF; -webkit-transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000) ; } .menu_open #main_menu { pointer-events:all; } .menu_open #main_menu_container{ transform: rotateY(0deg); opacity:1; -webkit-transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000) 200ms; transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000) 200ms; } .menu_open #main, .menu_open #gallery_slider { -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) ; transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) ; } 
.menu_open #main.shift { transform: translateX(304px); } 
.menu_open #gallery_slider.shift { transform: translateX(304px); } 
.menu_circle { border-radius: 50%; background: #fff; width: 106px; height: 50px; position:absolute; z-index:-1; left:50%; margin-left:-53px; } 
.menu_letter { font-family: "微軟正黑體"; color: #CDC7C3; overflow: hidden; margin: auto; position: relative; text-align: center; font-size: 17px; top:8px; left:1px; } 
#main_menu .underline { width: 100%; height: 1px; background: #E5DFDD; margin-top: 8px; } 
.menu_letter.a { top:3px; } 
.menu_letter.hidden { transform: translateY(40px); } 
.button { display: flex; flex-direction: column; align-items: center; width: 180px; position:relative; cursor:pointer; } 
.button:hover .menu_circle { -webkit-transform:scale(0.9); transform:scale(0.9); background:#fff; } 
.button:hover .button_text { color:#666666; } 
.button .covered { z-index:0; } 
.button.active .menu_circle { -webkit-transform:scale(0.9) !important; background:#fff !important; } 
.button.active .button_text { color:#666666 !important; } 
/*.button:hover .menu_circle { width: 300px; height: 100%; border-radius: 0; } .button:hover .button_text { color:#FFFFFF; } */ 
.button_text { color: #8C8B87; font-family: Otama; font-size: 18px; margin-top: 30px; } 
#menu_controller hr { width: 25px; height: 0px; border: none; border-bottom: 1px solid #727272; margin: 0; margin-top: 7px; margin-left: 0; -webkit-transition: transform 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) ; transition: transform 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000); } #menu_bar #menu_controller hr.hidden{ width:0; margin-left:12.5px; } #menu_bar.full #menu_controller hr.hidden{ width:0; margin-left:10px; } #menu_controller hr:first-child { margin-top:0; } #menu_logo { float: left; position: absolute; top: 2%; left: 9px; } #main_slider { position:relative; z-index:1; height:100vh; -webkit-transition: -webkit-transform 1400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change:transform; backface-visibility:hidden; } .slider.hidden { -webkit-transform:translateX(-20%); transform:translateX(-20%); opacity:0; pointer-events:none; } .slides_wrap { overflow: hidden; z-index: 0; position: relative; width: 100%; height: 100%; } .slide.active { opacity:1; z-index:2; } .slide.out { opacity:1; z-index:1; } .slide._3 .pay, .slide._4 .pay { /* top:68%;*/ } .slide { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; opacity: 1; backface-visibility:hidden; will-change:transform; } .slide img { /*will-change:transform; backface-visibility:hidden; */ } .slider_controller { float: right; position: absolute; right: 0; top: 75px; width: 55px; z-index:3; will-change:transform; backface-visibility:hidden; } #gallery_controller { padding-left:50px; } .slider_controller .item:first-child { margin-top:0; } .slider_controller .item { padding:15px 0; position:relative; will-change:transform; cursor:pointer; min-height: 10px; backface-visibility:hidden; } .slider_controller .line { width: 55px; height: 1px; background: #FFFFFF; position: absolute; top: 26px; -webkit-transition: all 5000ms cubic-bezier(0.250, 0.250, 0.750, 0.750); transition: all 5000ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transform-origin:right; transform-origin:right; will-change:transform; backface-visibility:hidden; } .dark_theme .line { background:#666666 !important; } .dark_theme .circle { background:#666666 !important; } .slider_controller .circle + .line{ top:20px; } .slider_controller .item.out .line { -webkit-transition: all 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000); } .slider_controller .letter { font-family: Otama; color: #FFFFFF; opacity: 0.5; font-size: 19px; margin-left: 4px; will-change:transform; backface-visibility:hidden; } .slider_controller .circle { background: #FFFFFF; width: 7px; height: 7px; border-radius: 50%; position: absolute; top: 17px; left: 5px; opacity:0.4; } .slider_controller .circle.hidden { -webkit-transform:scale(0); transform:scale(0); } .slider_controller .letter.hidden { -webkit-transform:translateX(-20%); transform:translateX(-20%); opacity:0 !important; } .slider_controller .item.active .line { -webkit-transition: all 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000); } .slider_controller .item.active .letter { opacity:1; } .slider_controller .item.active .circle { opacity:1; } #home_container { position: absolute; top: 4%; left: 50%; margin-left: -280px; width: 576px; pointer-events:none; z-index:3; } #logo { width: 78px; height: 148px; margin:auto; position:relative; } #logo > * { position:absolute; } #logo .bottom { top: 32px; left: 17px; } .pay { position: absolute; width: 100%; overflow: hidden; top: 50%; z-index:2; height:101px; box-sizing:border-box; display: flex; align-items: center; justify-content: center; margin-top:-50px; } .pay_back { position: absolute; left: 50%; margin-left: -600px; top: 0px; display:none; } .pay h2 { font-family: Voor; color: #FFFFFF; font-size: 40px; text-shadow: 0px 0px 8px #000000; letter-spacing: 1px; text-align: center; margin-left: 7px; letter-spacing: 8px; } @media (min-width: 1600px) { .pay h2 { font-size: 50px; } } #logotype { position: relative; width: 327px; margin: auto; margin-top: 30px; will-change:transform; backface-visibility:hidden; } #logotype h1 { font-family: DolceVita; color: #FFFFFF; font-size: 37px; position: relative; letter-spacing: 2.2px; will-change: transform; backface-visibility:hidden; } #logotype h2 { font-family: Caviar; color: #FFFFFF; font-size: 20px; position: relative; top: -1px; left: 0px; letter-spacing: 3.2px; will-change:transform; backface-visibility:hidden; } #logotype h2 span { display:block; float:left; } #sky { width: 100%; height: 45%; position: absolute; top: 0; } #scroll_down { position: absolute; top:-80px; left: 50%; z-index: 2; margin-left: -20px; will-change:transform; backface-visibility:hidden; } #index #scroll_down.translated { -webkit-transform:translateY(20px); transform:translateY(20px); } .s_circle { stroke-dasharray:93; } .s_circle.repeat { -webkit-animation: circleIn 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards; animation: circleIn 1000ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards; } .s_arrow.repeat { -webkit-animation: arrowIn 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; animation: arrowIn 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; } @-webkit-keyframes circleIn { 0% {stroke-dashoffset:94;stroke:white;} 1% {stroke:#CDC7C3;} 100% {stroke-dashoffset:0;stroke:#CDC7C3;} } @keyframes circleIn { 0% {stroke-dashoffset:94;stroke:white;} 1% {stroke:#CDC7C3;} 100% {stroke-dashoffset:0;stroke:#CDC7C3;} } @-webkit-keyframes arrowIn { 0% {-webkit-transform:translateY(10px);stroke:white;} 100% {-webkit-transform:translateY(0);stroke:#CDC7C3;} } @keyframes arrowIn { 0% {transform:translateY(10px);stroke:white;} 100% {transform:translateY(0);stroke:#CDC7C3;} } .s_circle.hidden { stroke-dashoffset: 94; } .s_arrow.no_opacity { opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px); } #content { float:left; width:100%; position:relative; } .card { width: 90%; max-width: 640px; margin: auto; padding: 30px; background: #FFFFFF; position: relative; z-index: 1; } #index .card { margin-top:-80px; } #index .card.hidden { -webkit-transform: translateY(300px) scale(0.95,1); transform: translateY(300px) scale(0.95,1); } .card_title { margin-bottom: 15px; margin-top:60px; text-align: center; font-family: Birch; color: #767371; font-size: 40px; } .big_intro { font-family: Kepler; font-size: 44px; color: #BFBAB8; width: 350px; text-align: center; margin: auto; margin-top: 45px; } .bordered_title { position: relative; max-width: 320px; margin: auto; margin-top: 40px; } .bordered_title h4 { color: #767371; font-family: Birch; font-size: 25px; text-align: center; padding: 0px 8px 0 10px; background: #FFFFFF; width: 100px; margin: auto; z-index: 1; position: relative; box-sizing: border-box; } .bordered_title hr { color: #767371; font-family: Birch; font-size: 25px; text-align: center; padding: 0px 8px 0 10px; background: #FFFFFF; margin: auto; z-index: 1; position: relative; top: 15px; width: 100%; } .text { font-family: Lato; font-size: 14px; margin: auto; } .text.centered { text-align:center; } .card .text { max-width: 350px; } .circle_call { width: 100px; height: 100px; background: #CDC7C3; border-radius: 50%; margin: auto; margin-top: 45px; margin-bottom: 10px; overflow:hidden; } .circle_call:hover { } .circle_call p span { will-change:transform; font-size: 70px; backface-visibility:hidden; } .circle_call p { font-family: Otama; color: #FFFFFF; overflow: hidden; width: 70px; margin: auto; position: relative; text-align:center; } .circle_call p.w { top: 14px; left: 2px; } .circle_call p.e { top: 10px; left: 0px; } .circle_call p.f { top: 10px; left: 2px; } .circle_call p.b { top: 9px; left: 3px; } .circle_call p.p { top: 9px; left: 3px; } .circle_call p.r { top: 9px; left: 2px; } .circle_call p.hidden { -webkit-transform:translateY(72px); } .back_graphic_container.top { overflow: hidden; position: absolute; top: -320px; overflow: hidden; height: 320px; width:100%; } .back_graphic_container.bottom { overflow: hidden; position: absolute; bottom: -265px; overflow: hidden; height: 265px; width:100%; } .back_graphic_container.bottom img { bottom:0; } .seahorse { position: absolute; left: 50%; margin-left: -160px; } .double_blocks.restaurant { } .double_blocks { position: relative; float: left; position: relative; z-index: 1; padding:12% 0; width:100%; } .double_blocks .covered.hidden { transform:translateX(-100%); } .double_blocks .center { width: 28%; left: 50%; margin-left: -14%; background: #FFFFFF; margin-top:2.3%; position: absolute; padding-top: 28%; transform-origin:left; } .center .content { position: absolute; top: 0; height: 78%; margin: 14% 8% 8% 8%; width: 84%; } .center .content .info_content { flex-direction: column; display: flex; height: calc(100% - 50px); position: absolute; bottom: 0; justify-content: space-around; align-items: center; width:100%; } .borders { position: absolute; width: 100%; height: 100%; } .borders > div { position:absolute; background:#CCC6C3; } .borders .top { -webkit-transform-origin:left; width:100%; height:1px; } .borders .bottom { -webkit-transform-origin:right; width:100%; height:1px; bottom:0; } .borders .left { -webkit-transform-origin:bottom; width:1px; height:100%; } .borders .right { -webkit-transform-origin:top; width:1px; height:100%; right:0; } .center .content .card_title { margin-bottom: 0; margin-top:0; } .more { display: block; width: 58px; margin: 0 auto; font-family: Otama; color: #CCC6C3; } .more:hover span { color:#666666; -webkit-transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) ; } .more span { display: block; width: 100%; display: block; margin-bottom: 12px; text-align: center; font-size: 20px; line-height: 0.4; -webkit-transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) ; } .more_arrow { transform: rotateZ(-90deg); margin-top: 10px; margin-left: 46px; } .center .content .text { width: 80%; text-align: center; margin: 0 auto; } .top_ico { width: 80px; margin-top: -40px; position: absolute; left: 50%; margin-left: -40px; } .center .content hr { margin:0 auto; } .more img { display:none; } #ct_back,#ct_shapes { position: absolute; top: 100vh; width: 100%; left: 0; z-index: -2; will-change:transform; backface-visibility:hidden; } #ct_shapes { display:none; } #index #ct_shapes { display:block; } #js-noise { position: fixed; background: #fff; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.4; z-index: -1; pointer-events: none; will-change:transform; } #events_panel { overflow:hidden; width:100%; position:relative; z-index:1; } .big_title .circle_call { margin-top: 0; margin-bottom:0; } .main_panel .big_title { margin-top:50px; } .section_title { color: #8C8B87; font-family: Otama; font-size: 40px; text-align: center; margin-top: 15px; } .section_long_title { color: #BFB9B8; font-size: 35px; font-family: Kepler; letter-spacing: 1px; text-align: center; width: 90%; margin: auto; max-width: 620px; margin-top: 30px; } .section_title.grey { color:#CDC7C3; } .ml_panel { margin-top:70px; } .grey_panel { max-width: 900px; width: 90%; margin: auto; background: #EBEBE8; padding-bottom: 20px; } .white_panel { width: 100%; height: 100%; background: #FFFFFF; position: relative; transform: translateX(30px) translateY(30px); padding-bottom:35px; } .content_container.video_1280 { margin-left: -220px; overflow: hidden; width: 1280px; will-change:transform; backface-visibility:hidden; } .grey_panel.hidden { -webkit-transform:translateX(15px) translateY(15px); transform:translateX(15px) translateY(15px); } .white_panel.hidden { -webkit-transform:translateX(0px) translateY(0px); transform:translateX(0px) translateY(0px); } .white_panel .panel_content { } .content_container > * { width:100%; will-change:transform; backface-visibility:hidden; } .content_container.video_1280.hidden { transform: translateX(-50%); } .content_container.video_1280.hidden > * { transform: translateX(101%); } .panel_ico { width: 60px; margin: auto; z-index: 1; position: relative; margin-top: 3px; will-change:transform; backface-visibility:hidden; } .panel_title { text-align: center; margin-top: 15px; font-family: Kepler; font-size: 26px; color: #8C8B85; will-change:transform; backface-visibility:hidden; } .panel_more { display: block; position: absolute; transform: rotateZ(-90deg); bottom: -4px; right: -80px; } .main_call, .gallery_call { width:100%; float:left; margin-top:80px; z-index:1; position:relative; will-change:transform; backface-visibility:hidden; } #index .main_call { margin-top:200px; } .main_call.less_margin { margin-top:30px; } .text_call { width: 90%; max-width: 800px; margin: auto; text-align: center; font-size: 21px; color: #797674; font-family: Kepler; line-height: 27px; margin-top: 40px; margin-bottom: 40px; } .call_button { width: 246px; background: #FFFFFF; margin: auto; padding: 20px; margin-bottom: 50px; } .call_button a { border: 1px solid #CCC6C3; width: 246px; display: block; text-align: center; padding: 23px 0; color: #797673; font-family: Kepler; font-size: 20px; } .call_button:hover { background: #CCC6C3; } .call_button:hover a { border: 1px solid #FFFFFF; color: #FFFFFF; } .gallery_button { width: 246px; background: #FFFFFF; padding: 20px; position: absolute; left: 50%; top: 50%; margin-left: -143px; margin-top: -52px; -webkit-transform-origin:top; transform-origin:top; } .gallery_button a { width: 246px; display: block; text-align: center; padding: 23px 0; color: #797673; font-family: Kepler; font-size: 20px; } .gallery_button .borders { width: calc(100% - 40px); height: calc(100% - 40px); } .gallery_button:hover { background: #8c8b87; } .gallery_button:hover a { color:#FFFFFF; } #agenda #content { background:#FFFFFF; } #agenda_list { float: left; width: 100%; position: relative; z-index: 1; background: #FFFFFF; padding: 35px 0 80px 0; } .agenda_list_pic { display:none; float:right; } .agenda_list_pic:first-child { display:block; } #agenda_content { width: 960px; margin: auto; margin-top: 60px; } .items { width: 65%; float: left; } .pic_container { float: right; width: 25%; overflow:hidden; } .pic_container.hidden { width:0; -webkit-transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 400ms cubic-bezier(0.165, 0.840, 0.440, 1.000) ; } .montly { margin-top:50px; } .montly:first-child { margin-top:0; } .month { font-family: kepler; color: #8C8B87; font-size: 22px; text-transform:uppercase; } .item_title { font-family: Otama; font-size: 28px; color: #8C8B87; display:block; } .items .item { margin-left: 40px; margin-top: 20px; } .items .item:hover .item_title{ -webkit-transform:translateX(30px); transform:translateX(30px); } .underline { margin-top: 15px; position: relative; -webkit-transform-origin:left; transform-origin:left; } .underline hr { width: 100%; border: none; border-bottom: 1px solid #CCC6C3; margin-top: 15px; position: relative; z-index: 1; } .underline .selector { height: 11px; width: 100px; background: #8C8B87; z-index: 0; position: absolute; bottom: -5px; -webkit-transform-origin:left; transform-origin:left; } #footer { width: calc(100% - 60px); background: #F0F0F0; left: 60px; position: relative; padding: 50px 0 50px 0; } #footer_content { border: 1px solid #CCC6C3; max-width: 440px; margin: auto; height: 680px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .footer_text { font-family: kepler; color: #666561; font-size: 18px; } .footer_text a { color: #666561; } #footer_buttons { width: 95%; } #footer_buttons ul { display: flex; justify-content: space-around; } #footer_buttons ul li.spacer { font-size: 12px; margin-top: 6px; } #footer_buttons ul a { font-family: Lato; font-size: 12px; } #follow_us h4 { color: #B9AEA4; font-family: Otama; font-size: 25px; } #social_container { display: flex; justify-content: space-around; align-items: center; margin-top: 15px; } #copyright { text-align: center; font-family: kepler; color: #666561; font-size: 15px; margin-top: 50px; } .main_panel { width:100%; position:relative; z-index:1; } .single_box { background: #FFFFFF; width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; margin: auto; margin-top: 50px; padding: 30px; position: relative; } #position .single_box { width: 38vw; height: 38vw; max-width: 440px; max-height: 440px; } #position .single_box .info_content .text { max-width: 340px; margin-top: 2%; } .single_box .borders { position: absolute; width: calc(100% - 60px); height: calc(100% - 60px); } .single_box .info_content { position: absolute; width: calc(100% - 60px); height: calc(100% - 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .single_box .info_content .card_title { text-align: center; font-family: Birch; color: #767371; font-size: 45px; margin-top: 0; } .single_box .info_content .text { max-width: 300px; text-align: center; margin: 0; line-height: 22px; margin-top: 10%; } #beach .single_box .info_content .text{ margin-top: 2%; } #beach .single_box .info_content .card_title{ margin-bottom: 10px; } #beach video { -webkit-transform:transform:scale(1.01); transform:scale(1.01); } .call_pic_title { font-family: Birch; position: absolute; color: #FFFFFF; width: 100%; text-align: center; font-size: 50px; top: 50%; margin-top: -30px; text-shadow: 1px 1px 5px #333333; will-change:transform; backface-visibility:hidden; } .text_call.spaced { margin-top: 80px; margin-bottom: 40px; } .text_call.smaller { font-size: 18px; max-width: 620px; width: 80%; } .story_panel { width: 100%; margin-top: 65px; float: left; position:relative; z-index:1; } .text_panel { width: 30%; padding: 5%; display: flex; flex-direction: column; justify-content: space-around; background: #FFFFFF; -webkit-transform-origin:left; transform-origin:left; } .row { width: 100%; display: flex; } .panel_label { font-family: Birch; font-size: 40px; color: #CCC6C3; } .panel_text { font-family: Kepler; color: #797672; font-size: 16px; line-height: 24px; } .pic_panel.long { width:65%; } .pic_panel.fifteen { width: 16%; } .pic_panel.mid { width:32%; } .pic_panel.double { width:48%; } .pic_panel.fifteen img { height:100%; } .ball_ico { width: 64px; height: 64px; background: #CDC7C3; border-radius: 50%; margin: auto; margin-top: -32px; overflow: hidden; } .ball_ico p { font-family: Otama; color: #FFFFFF; overflow: hidden; width: 70px; margin: auto; position: relative; text-align: center; } .ball_ico p span { font-size:45px; will-change:transform; backface-visibility:hidden; } .ball_ico p.m { left: -2px; top: 1px; } .ball_ico p.p { left: -1px; top: 6px } .double_call { width: 130px; } .double_call a { font-family: Lato; font-size: 13px; margin: auto; text-align: center; width: 100%; display: block; padding: 8px 0px; color:#333333; } .double_call a:hover { color:#cdc7c3; } .double_call hr { width: 92%; border-bottom:1px solid #CDC7C3; } .form { width: 100%; float: left; margin-top: 20px; margin-bottom:50px; } .form h2 { font-family: Otama; text-align: center; font-size: 40px; color: #8C8B87; } #rooms .form { margin-top:80px; margin-bottom:0; } #rooms.detail #ct_back { display:none; } .form_content { width: 90%; max-width: 710px; margin: auto; background: #FFFFFF; overflow: hidden; padding: 50px 60px; margin-top: 80px; } .form_content.hidden { -webkit-transform:translateY(200px) scale(0.95); transform:translateY(200px) scale(0.95); } .form_row { margin-top:60px; float: left; width: 100%; } .form_row:first-child { margin-top:0; } .form_row:last-child { margin-top:80px; } .form_content .form_row > div { width: 100%; float: left; position: relative; } .form_content .form_row > div:first-child { margin-left:0; } .form_content .message_input { margin-left:0; } .form_content div > label { font-family: Kepler; font-size: 18px; color: #5E5E5E; width:100px; float:left; } .simple_input input { border: none; background: none; border-bottom: 1px solid #ACA196; font-family: Playfair; font-size: 18px; color: #5E5E5E; padding: 0; width: calc(100% - 110px); margin-top: -4px; margin-left:10px; } .simple_input + .simple_input { margin-left:14%; } .simple_input.small_label label { width:75px; } .simple_input.small_label input { width: calc(100% - 85px); } .simple_input.small { width:13% !important; } .simple_input.small._2 { margin-left:4%; } .simple_input.dates,.simple_input.people { width: 43% !important; } .simple_input.num_select select { width: calc(100% - 90px); margin-top: -4px; } .simple_input.num_select label { width: 90px; } .newsletter_input { margin-top: 55px; } .dates { cursor:pointer; } .dates label { width: 130px !important; cursor:pointer; } .dates label img { margin-left:10px; } .wed label { width:215px !Important; } .dates input { width: calc(100% - 130px) !Important; cursor: pointer; margin-left: 0; } .wed input { width: calc(100% - 225px) !Important; } .ultra_large label { width:300px !Important; } .simple_input select { width: calc(100% - 215px); border: none; border-bottom: 1px solid #ACA196; background: none; font-family: Playfair; font-size: 18px; color: #5E5E5E; } .simple_input select option { margin-top:5px; } .simple_input.half { width:47.5% !important; } .full_width_input + .simple_input { margin-left:0 !Important; } textarea { width: calc(100% - 142px); margin-top: 4px; border: 1px solid #ACA196; background: none; height: 130px; padding: 5px; font-family: Lato; font-size: 15px; margin-left: 30px; } .form_row.no_message > *, .form_row.no_message .radio_input { margin-top:0px; } .form_row.no_message .mandatory { text-align:left; } .form_section_title { text-align: center; font-family: Aerolite; color: #5E5E5E; font-size: 40px; line-height: 25px; margin-top: 60px; float: left; width: 100%; } .form_section_title:first-child { margin-top:0; } .form_section_title + .form_row { margin-top:60px; } .full_width_input { width:100% !important; } .full_width_input label { width: 250px !important; height:50px; } .mandatory { color: #666666; font-family: Kepler; font-size: 16px; text-align: left; margin-top:4px; } .info_request .radio_input { width: auto; float: right; margin-top: 40px; } .send { cursor: pointer; width: 215px; height: 41px; text-align: center; background: #EDEAE6; color: #999999; font-family: Lato; font-size: 18px; letter-spacing: 2px; padding-top: 14px; position: absolute; top: 0; right: 0; } .send:hover { color: #FFFFFF; background: #8C8B87; } p.radio_input { float: left; font-family: Kepler; color: #666666; font-size: 16px; position: relative; width: 100%; height: 18px; margin-top: 9px; } p.radio_input > input { padding: 0; margin: 0; height: 16px; width: 16px; float: left; position: absolute; left: 0; opacity: 0; } .input_field input { border: none; background: #FFFFFF; width: 100%; text-indent: 10px; padding: 8px 0 7px; font-family: 'Open Sans', sans-serif; font-weight: 400; color: #333333; font-size: 12px; } input[type=radio], input[type=checkbox] { cursor: pointer; } p.radio_input:not(#foo) > input[type=radio] + label { background-position: 0 -7px; } p.radio_input:not(#foo) > input + label { background: url(style/images/radio_input.png) 0 -1px no-repeat; height: 16px; } p.radio_input > label { line-height: 21px; padding: 0px 0px 1px 28px; float: left; } p.radio_input:not(#foo) > input[type=radio]:hover + label, p.radio_input:not(#foo) > input[type=radio]:focus + label, p.radio_input:not(#foo) > input[type=radio] + label:hover { background-position: 0 -32px; } p.radio_input:not(#foo) > input[type=radio] + label { background-position: 0 -7px; } p.radio_input:not(#foo) > input[type=radio]:hover:checked + label, p.radio_input:not(#foo) > input[type=radio]:focus:checked + label, p.radio_input:not(#foo) > input[type=radio]:checked + label:hover, p.radio_input:not(#foo) > input[type=radio]:focus:checked + label { background-position: 0 -57px; } p.radio_input:not(#foo) > input[type=radio]:checked + label { background-position: 0 -57px; } #agenda_overview { margin-top:100px; float:left; width:100%; } #agenda_panel { max-width: 800px; width: 90%; margin: auto; margin-top: 80px; display: flex; margin-bottom: 30px; } #agenda_panel .left { width:40%; background: #EBEBE8; display: flex; flex-direction: column; } #agenda_panel .right { width:60%; overflow: hidden; } #agenda_panel .info { margin-top: 30px; margin-left: 30px; width: 100%; height: 100%; background: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; flex-grow:1; position: relative; } #agenda_panel .panel_text { width: 80%; margin: 0; margin-top: 50px; text-align: center; } #agenda_panel .month { font-family: Birch; font-size: 32px; text-align: center; margin-top: 0; } #agenda_panel hr { margin: 20px auto; border-bottom: 1px solid #CCC6C3; width: 50px; } #agenda_panel .title { font-family: Raleway; color: #CCC5C3; font-size: 16px; text-align: center; text-transform:uppercase; width: 90%; } #agenda_panel .more { margin-top: 50px; } #agenda_panel .more_arrow { display:block !important; } .section_call { margin-top:180px; width:100%; float:left; margin-bottom:50px; position:relative; } .section_call.ending { margin-bottom:0; } .section_call h3 { position: absolute; text-align: center; width: 100%; color: #FFFFFF; font-family: Voor; font-size: 40px; bottom: 40%; text-shadow: 2px 2px 1px #333333; letter-spacing: 3px; line-height:60px; } .section_call h3 span { display:block; } .section_call .circle_call { position: absolute; bottom: 10%; margin: 0; float: left; margin-left: -50px; left: 50%; width: 80px; height: 80px; background: #FFFFFF; } .section_call:hover .circle_call { background: #8C8B87; -webkit-transform:scale(0.9); transform:scale(0.9); } .section_call:hover .circle_call p span{ color: #FFFFFF; } .section_call .circle_call p { color: #CDC7C3; } .section_call .circle_call p.w { top: 10px; left: 2px; } .section_call .circle_call p span { font-size:55px; } .story_panel .video_panel { width:55.5%; } .size_container { overflow:hidden; height:100%; } #beach_info { width:100%; float:left; margin-top: 100px; } .beach_row { display: flex; justify-content: center; margin-top: 50px; align-items:center; } .beach_row:first-child { margin-top:0; } .beach_plate { width: 33%; display: flex; align-items: center; max-width: 360px; padding: 0 15px; } .beach_plate .pic { width: 40%; } .beach_plate .info_content { width: 60%; background: #FFFFFF; padding: 15px 15px 15px 0; position: relative; max-width: 300px; } .beach_plate .info_content.left .info_text { margin-left:-15px; } .beach_plate .info_content.right .info_text p { text-align:left; } .beach_plate .info_text { background: #CDC7C3; margin-left: 15px; width: calc(100% + 15px); min-height: 222px; display: flex; align-items: center; } .beach_plate p { letter-spacing: 0.5px; color: #FFFFFF; font-family: Lato; font-size: 16px; text-align: right; padding: 0 30px; line-height: 32px; width: 70%; } .beach_club_title { width: 30%; text-align: center; font-family: Otama; color: #8C8B85; font-size: 35px; } .beach_club_text { width: 30%; text-align: center; font-family: Otama; color: #8C8B87; font-size: 22px; line-height: 40px; } .i_card { width:55%; } .i_food { width: 85%; float: right; margin-right: -25px; } .i_bottle { width: 50%; margin-left: 20px; } .i_lunch { width: 80%; float: right; margin-right: -25px; } .i_stair { width:65%; } .i_shower { width: 45%; float: right; margin-right: 25px; } .i_note { width: 35%; margin-left: 30px; } .i_child { width: 55%; margin-right: 6px; float:right; } #beach #agenda_overview { margin-top: 50px; } #where .story_panel { margin-top:80px; } #where .story_panel .row .text_panel { width:23.5%; } #where .story_panel .row .mid { width:33.33333%; } #where .mid+.text_panel { width:25% !important; } #where .story_panel .row .long { width:69%; } #about .story_panel .row .text_panel { width: 25%; padding: 2.5%; } #about .story_panel .row .long { width: 75%; } #about .story_panel .row:first-child .text_panel { width:85%; padding:2% 5%; } #about .story_panel .row:first-child .long { width:40%; background: #FFFFFF; display: flex; align-items: center; } .rooms_panel { margin-top:65px; } .rooms_panel > div:nth-child(even) { flex-direction:row-reverse; } .rooms_pic { width:50%; } .rooms_title { width:50%; background:#FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8% 0 4% 0; -webkit-transform-origin:left; transform-origin:left; } .rooms_title h2 { text-align: center; font-family: Birch; color: #797672; font-size: 40px; margin-top: 0; } .rooms_title hr { margin-top: 5%; margin-bottom: 18%; width: 50px; border-bottom: 1px solid #CCC6C3; } .view_button { display: block; padding: 15px 50px; border: 1px solid #BCB8B5; font-family: Lato; font-size: 15px; color: #8d8782; box-shadow: 2px 2px 2px #BCB8B5; } .view_button:hover { box-shadow: none; transform: scale(0.9); } .room_detail_panel { background:#FFFFFF; padding-top:6%; overflow:hidden; } .room_detail_panel .big_title { } .room_details { margin-top: 10%; display:flex; margin-bottom: 80px; } .room_details .left { width: 45%; float: left; display:flex; align-items:flex-end; } .room_details .right { float: left; width: 55%; max-width:800px; } .pic_detail_container { position:relative; } .room_details .pic { z-index: 1; position: relative; } .pic_back { position: absolute; width: 30%; float: right; right: -21px; top: -20px; background: #EBEBE8; height: calc(100% + 40px); z-index: 0; -webkit-transform-origin:right; transform-origin:right; } .room_name { margin-left: 100px; width: 215px; overflow: hidden; } .room_name.no_width { -webkit-transform: scale(1); transform: scale(1); width: 0; } .room_name h2 { font-family: Kepler; color: #8C8B85; font-size: 44px; } .room_details .underline { width:calc(100% - 100px); margin-left:100px; margin-top:80px; } .room_text { margin-left: 200px; margin-top: 80px; padding-right:20px; } .room_details .room_text hr { margin-left: 0; margin-top: 30px; width: 50px; border-bottom: 1px solid #CCC6C3; } .services { margin-top: 40px; margin-left: 100px; } .service { margin-top: 35px; float: left; width:100%; } .service:first-child { margin-top:0; } .service_text { float: left; width: calc(100% - 100px); color: #8C8B86; font-family: Kepler; font-size: 20px; letter-spacing: 0.3px; } .service .ico { width: 100px; float: left; } #other_rooms { float: left; width: 100%; background: #FFFFFF; margin-top: 80px; height: 305px; } #other_rooms ul li a:hover { color:#767371; } #other_rooms .container { position:relative; } #other_rooms p { margin-bottom: 15px; margin-top: 60px; font-family: Birch; color: #767371; font-size: 40px; } #other_rooms hr { margin-left: 0; } #other_rooms img { position: absolute; top: -60px; right: 0; } #other_rooms ul { margin-top: 60px; margin-bottom: 68px; } #other_rooms ul li a { font-family: Raleway; color: #CCC5C3; font-size: 16px; text-transform: uppercase; display: block; } .map_panel { margin-top:65px; float: left; width: 100%; pointer-events:none; } .position_panel { float: left; width: 100%; margin-top:50px; } .position_info { width: 100%; margin: auto; display: flex; margin-top: 80px; } .position_info_text { width: 50%; text-align: center; } .position_vertical_spacer { height: 50px; width: 1px; background: #8C8B86; margin-left: 1px; } .bottom_pic { margin-top: 100px; float: left; width:100%; } .bottom_pic .big { width: 100%; max-width: 1271px; display: block; margin: auto; } .bottom_pic .ico { margin-top: -40px; } #events_composition { float:left; width:100%; display:flex; margin-top:-350px; transform:translateY(-200px); } #events_composition .left, #events_composition .right { width: 35%; display: flex; flex-direction: column; align-items: center; } #events_composition .center { width: 30%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9vw; } #events_composition .ball { width: 60%; max-width: 320px; z-index:-1; } .text_ball { border-radius: 50%; background: #CDC7C3; width: 10vw; height: 10vw; max-width: 160px; max-height: 160px; display: flex; align-items: center; } .text_ball p { font-family: Otama; color: #FFFFFF; text-align: center; margin-top: -2px; font-size: 23px; width: 100%; line-height: 24px; } .right .ico_ball { align-self: flex-start; margin-left: 2vw; margin-top: -80px; width: 15%; display:none; } .right .rb_2 { align-self: flex-start; } .right .tb_2 { align-self: flex-start; } .left .lb_1 { align-self: flex-end; } #events_composition .left { justify-content:flex-end; } .rquote { position: absolute; bottom: -15px; color: #CCC5C3; font-size: 60px; right: -23px; } .lquote { position: absolute; top: -33px; color: #CCC5C3; font-size: 60px; left: -15px; } .events_sentence { position: relative; font-family: Otama; color: #8D8B88; text-align: center; } #events .pic_panel.mid { width:47.82%; } #events .pic_panel.big { width:52.18%; } #events .pic_panel.long { padding:2% 0; background:#FFFFFF; } .agenda_panel { margin-top:65px; } .agenda_panel > div:nth-child(even) { flex-direction:row-reverse; } .agenda_pic { width:50%; } .agenda_title { width:50%; background:#FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8% 0 4% 0; -webkit-transform-origin:left; transform-origin:left; } .agenda_title h2 { text-align: center; font-family: Birch; color: #797672; font-size: 40px; margin-top: 0; } .agenda_title hr { margin-top: 5%; margin-bottom: 18%; width: 50px; border-bottom: 1px solid #CCC6C3; } .view_button { display: block; padding: 15px 50px; border: 1px solid #BCB8B5; font-family: Lato; font-size: 15px; color: #8d8782; box-shadow: 2px 2px 2px #BCB8B5; } .news_detail_panel { background: #FFFFFF; padding-top: 6%; overflow: hidden; max-width: 1440px; margin: auto; } .news_detail_panel .big_title { } .news_details { margin-top: 10%; display:flex; margin-bottom: 80px; } .news_details .left { width: 45%; float: left; display:flex; align-items:flex-end; } .news_details .right { float: left; width: 55%; max-width: 630px; } .news_details .pic { z-index: 1; position: relative; } .news_name { margin-left: 100px; overflow: hidden; width:100%; } .news_name.no_width { -webkit-transform: scale(1); transform: scale(1); width: 0; } .news_name h2 { font-family: Otama; font-size: 28px; color: #8C8B87; white-space:nowrap; } .news_date { margin-top: 40px; position: relative; top: 12px; } .news_date p { color: #767371; font-family: Birch; font-size: 30px; text-transform: uppercase; color: #CCC5C3; text-align: right; } .news_details .underline { width:calc(100% - 100px); margin-left:100px; } .news_text { margin-left: 200px; margin-top: 80px; padding-right:20px; } .news_details .news_text hr { margin-left: 0; margin-top: 30px; width: 50px; border-bottom: 1px solid #CCC6C3; } .news_details .text_detail { font-family: kepler; color: #8C8B86; font-size: 18px; line-height: 25px; margin-top: 30px; } #agenda .section_title { color:#CCC5C3; text-indent: 7px } #gallery_slider { position: fixed; top: 0; left: 60px; width: calc(100% - 60px); z-index:1; -webkit-transition: transform 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000)s; transition: transform 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform, opacity; backface-visibility:hidden; } #gallery_slider .slides_wrap:hover { cursor:none; } #gallery_arrow { position: absolute; top: 0; left: 0; pointer-events:none; opacity:0; } .menu_open #gallery_arrow { opacity:0 !important; } .menu_open .slides_wrap { cursor:default !important; } #gallery_arrow svg { transform: rotateZ(-90deg); transform-origin: 20px 20px; } #gallery_arrow svg.rotated { transform: rotateZ(90deg); } #shadow { position:absolute; left:1px; top:1px; } .dark_theme #shadow .s_circle { stroke: #FFFFFF !important; } .dark_theme #shadow .s_arrow { stroke: #FFFFFF !important; } #gallery_close { position: absolute; right: 0px; top: 0px; width: 38px; height: 38px; cursor:pointer; will-change:transform,opacity; padding-right:21px; padding-top:33px; padding-left:50px; padding-bottom:12px; } #gallery_slider:hover #gallery_arrow { opacity:1; } .dark_theme #gallery_close img { filter:brightness(0.6); } .dark_theme .s_circle { stroke: #666666 !important; } .dark_theme .s_arrow { stroke: #666666 !important; } .in { -webkit-animation: slideIn 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; animation: slideIn 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; } .in img { -webkit-animation: imgIn 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; animation: imgIn 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; } #gallery_slider .in { -webkit-animation: slideIn 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; animation: slideIn 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; } #gallery_slider .in img { -webkit-animation: imgIn 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; animation: imgIn 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; } @-webkit-keyframes slideIn { 0% {-webkit-transform:translateX(-100vw);opacity:1;} 100% {-webkit-transform:translateX(0);opacity:1;} } @keyframes slideIn { 0% {transform:translateX(-100vw);opacity:1;} 100% {transform:translateX(0);opacity:1;} } @-webkit-keyframes imgIn { 0% {-webkit-transform:translateX(99vw);opacity:1;} 100% {-webkit-transform:translateX(0);opacity:1;} } @keyframes imgIn { 0% {transform:translateX(99vw);opacity:1;} 100% {transform:translateX(0);opacity:1;} } @media (max-width: 1439px) { .more_arrow { display:none; } .content_container.video_1280 { margin-left: -92px; overflow: hidden; width: 1024px; } } @media (min-width: 1600px) { #events_composition .center { padding-bottom:10vw; } .events_sentence { font-size:28px; } .single_box { width: 30vw; height: 30vw; max-width: 440px; max-height: 440px; margin: auto; margin-top: 50px; padding: 30px; position: relative; } .text { font-family: Lato; font-size: 16px; margin: auto; line-height:24px; } .single_box .info_content .text { line-height:25px; max-width:350px; } #position .single_box { width: 38vw; height: 38vw; max-width: 540px; max-height: 540px; } #position .single_box .info_content .text { max-width: 420px; margin-top: 5%; } .text_call { line-height: 30px; font-size: 22px; } .text_call.smaller { font-size: 19px; } .text_panel { padding:8% 5%; } .panel_text { font-size: 19px; line-height: 26px; } .pay { padding-top: 22px; padding-bottom: 28px; } } @media (max-height: 460px) { #main_menu_container { -webkit-flex-flow: column wrap; flex-flow: column wrap; } } @media (max-height: 799px) { #audio_player { bottom:0; } #quick_buttons { bottom:70px; } #main_menu_container .button .menu_circle { -webit-transform:scale(0) !important; transform:scale(0) !important; } #main_menu_container .button .button_text { margin-top:0; } #main_menu_container .button { height: 12.5%; justify-content: center; } #main_menu .underline { position: absolute; bottom: 0; } } @media (max-height: 699px) { #audio_player { bottom:0; display:none; } #quick_buttons { bottom:20px; } } @media (max-width: 960px) { .mobile_hidden { display:none !important; } .mobile_only { display:block; } #menu_container { width: 100%; height: 35px; } #menu_container.hidden { transform:translateY(-100%); } #menu_controller { left: 10px; top: 10px; padding: 0; margin-left: 0; margin-top: 0; } #menu_controller hr { margin-top:5px; } #menu_controller:hover hr._1, #menu_controller.opened hr._1 { -webkit-transform: rotate(90deg) translate3d(7px,-1px,0) !important; transform: rotate(90deg) translate3d(7px,0px,0) !important; } #menu_controller:hover hr._3, #menu_controller.opened hr._3 { -webkit-transform: translate3d(0px, -4px,0) !important; transform: translate3d(0px, -5px,0) !important; } #quick_buttons { transform: none; width: auto; right: 10px; left: auto; top: 0px; } #main { width: 100%; left: 0px; top: 35px; transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000) 0ms !important; } #main_slider { min-height:100%; } .menu_open #main, .menu_open #gallery_slider { transform: none; } .menu_open #main_menu_container { height: calc(100vh - 35px); padding-bottom: 10px; opacity: 1; -webkit-transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000) 0ms; transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000)0ms; } #main_menu { top: 35px; height: calc(100% - 35px); left: 0; width: 100%; z-index:2; } .menu_circle { display:none; } .button_text { letter-spacing:1px; font-size: 22px; margin-top:0px; } #menu_logo { display:none; } #main_menu_container { padding-bottom: 20px; box-sizing: border-box; transform-origin: left; transform: translateX(-100%); opacity:1; transition: all 1300ms cubic-bezier(0.190, 1.000, 0.220, 1.000) 0ms; } #logo > img { width: 100%; } #logo { width: 50px; height: 94px; } #logotype { width: 271px; } #logotype h2 { font-size: 15px; position: relative; left: 1px; letter-spacing: 3.3px; } #logotype h1 { font-size:30px; } #home_container { position: absolute; top: 10%; left:0; margin-left:0; width: 100%; } .slider_controller .letter { font-size: 15px; } .slider_controller .item { padding: 7px 0; } .slider_controller { top: 5%; width: 40px; } .slider_controller .line { width: 40px; top: 14px; } .in { -webkit-animation: slideIn 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; animation: slideIn 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards; backface-visibility:hidden; } .in img { -webkit-animation: none !important; animation: none !important; } @-webkit-keyframes slideIn { 0% {width:0} 100% {width:100%} } @keyframes slideIn { 0% {width:0} 100% {width:100%} } #index .card { margin-top: 0px; box-sizing: border-box; width: 100%; padding: 20px; margin-bottom: 20px; } .bordered_title hr { padding: 0; } .bordered_title { margin-top: 10px; } .big_intro { font-size: 33px; width: 90%; margin: auto; margin-top: 40px; } .circle_call { width: 60px !important; height: 60px !important; } .circle_call p { width: 60px; top:3px; } .circle_call p.w { top: 10px; left: 1px; } .circle_call p.e { top: 7px; left: 0px; } .circle_call p span { font-size: 40px !Important; } .half { width:100%; } .half + .half { margin-top: 100vw; } .double_blocks { padding:20px 0; } .double_blocks .center { width: 100vw; left: 0; margin-left: 0; height: 100vw; box-sizing: border-box; position: relative; margin-top: 64.5%; } .pay h2 { font-size: 27px; text-align: center; margin-left: 7px; letter-spacing: 2px; } .pay { top: 40%; z-index: 2; } #index .main_call { margin-top: 20px; } #index .card.hidden { -webkit-transform: translateY(100px) scale(1); transform: translateY(100px) scale(1); } .text_call { font-size:17px !important; } .call_button { margin-bottom: 20px; } .video_cover { position: absolute; width: 100%; height: 97%; display: flex; justify-content: center; pointer-events:none; left:0; z-index: 1; overflow: hidden; } .poster_veil { position: absolute; width: 100%; height: 100%; background: #000000; opacity: 0.4; left:0; height: 110%; } .play_button { position: relative; display: flex; align-items: center; } .tap { margin-left: 18px; font-family: Lato; font-size: 16px; color: #FFFFFF; } .section_title { font-size: 32px; } .items { width: 100%; padding: 20px; box-sizing: border-box; } .items .item { margin-left: 30px; } .item_title { font-size: 22px; } .underline .selector { width: 80px; } .month { font-size: 20px; } #footer { width: 100%; background: #F0F0F0; left: 0; position: relative; padding: 50px 20px 40px 20px; box-sizing: border-box; } #footer_content { height: 620px; } #footer_content > img { width:120px; } .footer_text { font-size: 17px; } #footer_buttons ul { flex-direction: column; align-items: center; } #footer_buttons ul li.spacer { display:none; } #copyright { margin-top: 40px; } .section_long_title { font-size: 21px; } .single_box .borders { width: calc(100% - 40px); height: calc(100% - 40px); } .row { flex-direction:column; } #about .story_panel .row .text_panel { width: 100%; padding: 20px !important; box-sizing: border-box; } .pic_panel.long, .pic_panel.double { width: 100% !important; } .text_panel { width: 100% !important; padding: 20px !important; box-sizing: border-box; } #where .mid+.text_panel { width: 100% !important; } #agenda_overview { margin-top: 50px; } #agenda_panel { max-width: 800px; width: 100%; margin-top: 50px; flex-direction: column; } #agenda_panel .left { width: 100%; } #agenda_panel .info { margin: 20px; width: calc(100% - 40px); height: calc(100% - 40px); } #agenda_panel .month { margin-top: 32px; } #agenda_panel .right { width: calc(100% - 40px); margin: auto; } .section_call { margin-top: 60px; height: 300px; } .section_call a img { width:auto; } .section_call .circle_call { margin-left: -30px; } .section_call h3 { font-size: 28px; line-height: 38px; } .single_box { width: 100vw !important; height: auto !important; max-width: none; max-height: none; padding: 20px; box-sizing: border-box; min-height: 100vw; display: flex; align-items: center; max-height: none !important; } .single_box .info_content { position: relative; margin: auto; padding: 20px; width: 100%; box-sizing: border-box; } .single_box .info_content .text { margin-top: 0px; width: 100%; max-width: 100%; } .position_vertical_spacer + .position_info_text { margin-top:20px; } .position_info { flex-direction:column; margin-top:40px; } .bottom_pic { margin-top: 40px; height: 300px; } .bottom_pic .big { width:auto; height:36vh; } .main_call .self img, .gallery_call .self img { height:200px; width:auto; } #food .pic_panel.fifteen { height: 64vw; width: 100%; } #food .pic_panel.fifteen img { height:auto; } .story_panel + .double_blocks { margin-top:20px; } .form h2 { font-size: 21px; } .form_content { width: 100%; padding: 20px; box-sizing: border-box; margin-top:40px; } .simple_input.dates, .simple_input.people { width: 100% !important; } .simple_input + .simple_input { margin-top:25px; } .simple_input { margin-left:0 !important; } .form_row { margin-top:25px; } .message_input label { width: 100% !important; } textarea { width: 100%; margin-left: 0; box-sizing: border-box; } .form_row:last-child { margin-top: 30px; } p.radio_input { margin-top: 25px; } .send { position: relative; margin-top: 85px; width: 100%; } .main_call.less_margin { margin-top: 0; } .pic_panel.mid { width:100%; } #gallery_slider { top: 35px; height: calc(100% - 35px); width: 100%; left: 0; will-change: initial; } #gallery_arrow { display:none; } #gallery_close { width: 19px; padding-top: 15px; padding-left: 0; } #gallery_close img { width:16px; } .story_panel .video_panel { width: 100%; } .size_container, #beach .video_cover { transform: translateY(5px); margin-top: -5px; } #beach_info { margin-top: 40px; } .beach_plate { width: 100%; display: flex; align-items: center; max-width: 320px; padding: 0 15px; justify-content: space-between; } .beach_plate .pic { width: 35%; display: flex; justify-content: center; align-items: center; } .i_card { width: 50%; } .beach_plate .info_content { width: 60%; background: #FFFFFF; padding: 15px 15px 15px 0; position: relative; max-width: 150px; } .beach_plate .info_text { min-height:150px; } .beach_plate p { letter-spacing: 0.5px; color: #FFFFFF; font-family: Lato; font-size: 14px; text-align: right; padding: 0 30px; line-height: 19px; width: 70%; } .beach_plate:first-child { margin-top:0; } .beach_plate { margin-top:20px; } .beach_row { flex-wrap:wrap; margin-top:20px; } .i_food { margin-right: -10px; } .i_bottle { margin-left: 5px; } .i_lunch { margin-right: -7px; } .i_shower { margin-right: 0px; } .i_note { margin-left: 5px; } .i_child { margin-right: -3px; } .call_pic_title { font-size:40px; top:55%; } .rooms_title h2 { font-size: 35px; } .rooms_title { width:100%; padding: 20px 0 25px 0; } .rooms_pic { width: 100%; } .rooms_panel .row + .row { flex-direction: column; } .room_details .left { width: calc(100% - 50px); float: left; display: flex; align-items: flex-end; margin-left: 20px; } .pic_back { right: -11px; top: -10px; height: calc(100% + 20px); } .room_details .right { width: 100%; margin-top: 30px; padding: 0 20px; box-sizing: border-box; } .room_text { margin-left: 0; margin-top: 20px } .services { margin-top: 30px; margin-left: 0px; } .service { margin-top: 25px; } .service_text { font-size: 18px; } .service .ico { width: 60px; float: left; } .room_details { flex-direction: column; } .room_name { width:auto; margin-left:0px; width:100%; } #events .pic_panel.mid { width: 100%; } #events .pic_panel.big { width: 100%; } .view_button { padding: 10px 35px; font-size: 12px; } .dates label img { margin-top: -5px; } .dates label { width: 150px !important; cursor: pointer; } .dates input { width: calc(100% - 150px) !Important; } #rooms .form { margin-top:40px; } #quick_buttons ul li { padding:11px 0; } #other_rooms { padding: 20px; box-sizing: border-box; height: auto; margin-top: 60px } #other_rooms p { margin-top: 0; } #other_rooms ul { margin-top: 22px; margin-bottom: 0; } .news_title h2 { font-size: 35px; } .news_title { width:100%; padding: 20px 0 25px 0; } .rooms_pic { width: 100%; } .news_details .left { width: calc(100% - 50px); float: left; display: flex; align-items: flex-end; margin-left: 20px; } .pic_back { right: -11px; top: -10px; height: calc(100% + 20px); } .news_details .right { width: 100%; margin-top: 0px; padding: 0 20px; box-sizing: border-box; } .news_text { margin-left: 0; margin-top: 20px } .news_date { margin-top:10px; } .news_details { flex-direction: column-reverse; margin-bottom: 0; } .news_name { width:auto; margin-left:0px; width:100%; } .news_name h2 { white-space:normal; } #agenda_content { width: 100%; margin-top: 0; } #agenda #agenda_list { margin-top: 40px; padding: 0; } #languages { bottom: auto; top: 37px; right: 100px; left: auto; width: 66.5px; box-shadow: 0px 0px 3px #999999; } #main_menu_container .button.mobile_only { display:flex !important; } } html[lang=en] .dates label { width: 140px !important; cursor: pointer; } html[lang=en] .dates input { width: calc(100% - 140px) !Important; }
			.somemusic { position: absolute; bottom:0px; right:0px; z-index:500;}