/* ----------------
	FONTS 
----------------- */

@font-face {
    font-family: 'TrajanProRegular';
    src: url('../Fonts/trajanpro-regular-webfont.eot');
    src: url('../Fonts/trajanpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/trajanpro-regular-webfont.woff') format('woff'),
         url('../Fonts/trajanpro-regular-webfont.ttf') format('truetype'),
         url('../Fonts/trajanpro-regular-webfont.svg#TrajanProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body{margin: 0;padding: 0; font-family: 'Muli'; font-size: 13px; line-height: 20px; }
*{transition-timing-function: ease-in-out; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: center center; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%;}

body[style*="overflow: hidden"] .ft-widget-b2{
	display:none !important;
}

h1, h2, h3, h4, h5, h6{	font-family: 'TrajanProRegular'; font-weight: normal; 
	-webkit-font-smoothing: antialiased; margin: 5px 0; letter-spacing: 0.1em;}
h1{font-size: 28px; line-height: 28px;}
h2{font-size: 22px; line-height: 26px;}
h3{font-size: 20px;}
h4{font-size: 17px;}
h5{font-size: 13px;}
h6{font-size: 10px;}
p{letter-spacing: 0.4px; color: #fff; margin: 1.3em 0;}

p, h1, h2, h3, h4, *, .grey1{color: #636363}

em{font-weight: 300;}
a{color: #303131; text-decoration: none; letter-spacing: 0.4px;}
a:hover{color: #595d5d; text-decoration: none;}
.greenlink a{color: #136a00}
dl { width: 100%; max-width: 500px; position: relative;}
dt {float: left; clear: both}
dd {float: right; font-size: 13px; font-family: 'Muli'; -webkit-font-smoothing: auto; display: inline-block; text-align: right;margin-left: 0;}
dt h3 { display: inline;}

table tr td{vertical-align:top;}


/* ----------------
	.CLASSES 
----------------- */

.ph0{height: 0%}
.ph10{height: 10%}
.ph20{height: 20%}
.ph30{height: 30%}
.ph33{height: 33.33%}
.ph40{height: 40%}
.ph50{height: 50%}
.ph60{height: 60%}
.ph66{height: 66.66%}
.ph70{height: 70%}
.ph80{height: 80%}
.ph90{height: 90%}
.ph100{height: 100%}

.w100{width: 100%;}

div[class*='forced_']{transition:all 600ms; overflow: hidden;}
.forced_ph100{height: 100vh !important; }
.forced_w100{width: 100% !important; }
.forced_w0{width: 0% !important; }
.forced_ph0{height: 0% !important; }
.forced_ml_-9-12{margin-left: -75% !important; }
.forced_ml_-6-12{margin-left: -50% !important; }
.forced_vh80{min-height: 400px !important; height: 80vh !important; max-height: 80vh !important }
.forced_vh100, .vh100{min-height: 500px !important; height: 100vh !important; max-height: 100vh !important}
.f15, .f15 p{font-size: 15px; line-height: 22px;}
.f12, .f12 p{font-size: 12px; line-height: 19px;}





.black{background: #000000}
.grey0{background: #1b1b1b}
.grey1, #gift:hover{background: #f2f2f2}
.black, .grey2, .grey1-5, .grey3, .white, #reservation-content, #gift{background: #fff; color: #636363}
.white p, .white h1, .white h2, .white h3, .white h4, .white *{color: #636363}
.white a{color:#9ead5a}
.greyscale{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: grayscale(100%); -webkit-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);}

.pos-rel{position: relative;}
.pos-abs{position: absolute;}
.bottom{bottom: 0;}
.top{top:0;}
.left{left:0}
.right{right: -2px}
.btn{display: inline-block; padding: 20px 0px; text-indent: 80px; font-family: 'TrajanProRegular'; }
.btn.w100{text-indent: 15%; font-size:22px; padding:35px 0;}
.yellow, .yellow:hover{background: #eebf54; color:#fff}
a.green, .greenlink a.green, a.green:hover{background: #136a00; color:#fff}

a.black{background: #ddd; color: #636363; transition:background 400ms;}
a.black:hover, #gallerylink:hover{background: #fff}


.t-all{transition:all 300ms;}
.back-center{background-size: contain; background-repeat: no-repeat; background-position: center center;}
.back-bottom{background-size: contain; background-repeat: no-repeat; background-position: center bottom;}
.center{text-align: center;}
.cover{background-size: cover;}
.pad{padding: 0 15%; display: table; height: 100%; width: 70%}
.pad.light{padding: 0 10%; width: 80%}
.pad-all{padding: 15%; height: 70%;}
.table{display: table; height: 100%; width: 100%}
.cell{display: table-cell; vertical-align: middle}
.clear{display: block; clear: both}
.spacer10{height: 10px;}
.spacer20{height: 22px;}
.spacer30{height: 30px;}
.spacer40{height: 40px;}
.spacer50{height: 50px;}
.spacer60{height: 60px;}
.spacer70{height: 70px;}
.toned{opacity: 0.6;}
.toned:hover{opacity: 1;}
.showerflow{overflow: visible;}
body:not(.gallery-overlay) .img-center-top{background-position: center top !important}
body:not(.gallery-overlay) .img-center-bottom{background-position: center bottom !important}

.nofloat img{float:none;}

.green-border-button{
	color: #3aaa35 !important;
    border: 1px solid #3aaa35;
    padding: 10px 15px;
    border-radius: 10px;
    outline: none !important;
	display: inline-block;
    margin: 0 10px;
}

#modal-notice{
	max-width:720px;
	padding: 30px;
}

#modal-notice p{
	max-width:500px;
	margin:15px auto;
	border-radius:5px;
}

/* SCROLLLLL */
.menuitem{position: absolute; z-index: -100; display: block; width: 1px; top: 0;}

/* ----------------
	COOKIES, NOM NOM 
----------------- */
.cc_dialog{max-width: 100% !important; box-sizing: border-box; font-family: 'Muli'; }
.light.cc_dialog .cc_dialog_text{color: #636363 !important;font-size:13px !important;}
.light.cc_dialog button.cc_b_ok {
    color: #9ead5a !important;
    background-color: transparent !important;
    border: 1px solid !important;
}


/* ----------------
	NAVIGATION 
----------------- */
body.nav-visible #nav-toggle .line2{transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg);}
body.nav-visible #nav-toggle .line3{transform: rotate(-45deg); -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}

body.nav-visible #nav-toggle rect{transform-origin: 35px 27px;-moz-transform-origin: 35px 27px;}

body.nav-visible #nav-toggle .line1, body.nav-visible #nav-toggle .line4{opacity: 0;}

body.no-svg #nav-toggle{background-image: url(../Images/nav-toggle.png); background-position: center top}
body.nav-visible.no-svg #nav-toggle{background-position: center bottom}




#nav-toggle{top: 0; position: fixed; border: none; padding: 0;}

#nav-toggle svg rect{
	fill: #636363 !important;
}

#nav {overflow: visible}
#nav ul{display: block;  width: 80%; margin: 3vh 0;}

#nav ul.headers li{display: inline-block; float: left; height: 24px; width: 33%; margin-bottom: 1%}
#nav ul.headers li a{display: block; color: #686a6a; margin-bottom: 1%; font-size: 16px; margin-bottom: 6%;}


#nav ul.social li{display: inline-block; float: left; height: 50%;  margin-bottom: 1%; margin-right: 5%}

#nav ul li a:hover{color: #000;}





/* ----------------
	GALLERY + MAPS
----------------- */

#landing .image, #angelika .image{background-size: cover; background-position: center; margin: 0; height: 100%; width: 100%; position: relative; transition:all 600ms; cursor: pointer; display:block}


.gallery-toggle{opacity: 0;}
.gallery-toggle svg rect.back{fill:#000;stroke-width:0;fill-opacity:0.23}
.gallery-toggle svg rect.verti-line, .gallery-toggle svg rect.hori-line{fill:#fff;stroke-width:0;}
.image:hover .gallery-toggle{opacity: 1;}

.gallery-toggle, a.map-toggle .button{position: absolute; top: 50%; z-index: 100; right: 50%; width: 100px; height: 100px; margin: -50px -50px 0 0; cursor: pointer; transition:all 600ms;}
a.map-toggle{width: 100%; height: 100%; display: block;  position: absolute;  top: 0;  left: 0;}
.gallery-toggle{background:rgba(0, 0, 0, 0.5)}
a.map-toggle:hover span{opacity:1}
.map-toggle span{text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; position: absolute; bottom: -46px; line-height: 13px; opacity: 0; display: block}
a.map-toggle .verti-line, a.map-toggle .verti-line{transition:all 600ms;}
a.map-toggle:hover .back{fill-opacity:0.4 !important}
a.map-toggle rect{-moz-transform-origin: 50px 50px; transform-origin: 50px 50px;}
.map-open a.map-toggle{top:50px; right: 50px;}
.map-open a.map-toggle .verti-line, .map-open a.map-toggle .hori-line{transform: rotate(315deg); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg)}
body.no-svg .gallery-toggle, body.no-svg .map-toggle{background-image: url(../Images/gallery-toggle.png); background-position:center top}
body.no-svg .gallery-open .gallery-toggle, body.no-svg .map-open .map-toggle{background-position:center bottom}

#gallery-categories svg, #gallery-categories svg *{z-index: 500; opacity: 0.5; transition:all 200ms;}
svg.l-arr, svg.r-arr{width: 40px; height: 100%; top:0; }
svg.l-arr{left: -40px;}
svg.r-arr{right: -40px;}
svg.b-arr{bottom: -40px; width: 100%; height: 40px; }

.gridcontent .fancybox.video:after{opacity: 1; background: url(/images/play.svg); z-index: 99}
.gridcontent .fancybox.video:before {content: ""; width: 100%; height: 100%; background: #000;  z-index: 9;  position: absolute;  opacity: 0.4;}
.gridcontent .fancybox:after{content:""; background: url(/images/plus.svg); width: 100px; height: 100px; display: block; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; opacity: 0; transition:opacity 400ms;}


#map-canvas{height: 100%; width: 100%;  opacity: 0; transition: opacity 500ms; transition-delay: 1000ms}


#map.initiated #map-canvas{opacity: 1;}


/* ----------------
	#SPECIFIC PARTS 
----------------- */

#show-hat{
	position: fixed;
    bottom: 0px;
    right: 10px;
    background: #fff;
    padding: 4px 8px;
}

#gift {
    position: fixed;
    top: 0px;
    right: 20px;
    padding: 8px 38px;
    border: none;
	transition:background 0.2s;
}


table.openinghours{border-spacing:0}
table.openinghours td{border-top:1px solid #ddd; padding: 6px 20px 6px 0}
	

#content{position: relative; z-index: 0;}
div.logo{background-image: url(../Images/Geranium-logo-black.svg); background-repeat: no-repeat; background-position: center center; background-size: 80%;   transition-property: none; transition: background-color 400ms}
body.no-svg div.logo{background-image: url(../Images/Geranium-logo-black.png);}

#RGInstagram .link{bottom: 30px;}
#RGInstagram:hover{background: #c7a04c}
#RGInstagram svg{height: 49px; width: 49px;     bottom: -2px;    position: relative;    margin-right: 20px;}

.instagram .persons{bottom: 30px; right: 15%;}

.instagram .persons a{margin-left: 50px; white-space: nowrap;}
.instagram .persons a:hover{color:#c7a04c}

.instagram .persons a svg {height: 20px; width:20px; margin-right: 13px; position: relative; bottom: -1px;}
.instagram .persons a svg *{transition: all 800ms;}
.instagram .persons a:hover svg path{fill:#c7a04c !important}

.instagram .persons a svg *, .instagram-icon *, #bocuse svg *{
	fill: #636363;
}

#angelika svg{max-height:130px;}
#angelika .angelika-green{fill:#3AAA35;}
#angelika .cell{text-align:center}
#angelika:hover{background: #3AAA35;}
#angelika:hover .angelika-green{fill: #fff;}

#facebook:after{content:''; background-image: url(../Images/Facebook_f_black.svg); display: block; position: absolute; width: 17px; height: 35px; left: 40px; bottom: 25px;}
body.no-svg #facebook:after{background-image: url(../Images/Facebook_f_black.png)}
#facebook:hover{color: #fff; background: #3B5998}
#facebook:hover *{color: #fff;}



#facebook .cell{vertical-align: bottom; padding-bottom: 25px;}

#facebook .cell, #RGInstagram .link, .instagram .persons a, #nav ul.social li a {
    color: #636363;
}

#facebook:hover .cell{
	color:#FFF;
}

#facebook:hover:after{
	filter: invert(1);
}

#nav ul.social li a:hover{
	color:black
}

#twitter:after{content:''; background-image: url(../Images/twitter-bird.svg); display: block; position: absolute; right: 0; bottom: 0; width: 50px; height: 34px; left: 
5%; bottom: 25px;}
body.no-svg #twitter:after{background-image: url(../Images/twitter-bird.png)}
#twitter:not(.no-hover):hover{ background: #55acee}
#twitter:hover{color: #fff;}
#twitter .pad{padding: 0 20%;}
#twitter .cell{vertical-align: bottom; padding-bottom: 25px; }
#twitter .persons{right: 10%; bottom: 25px; text-align: right}
#twitter .persons span{display: block; cursor: pointer; transition:color 200ms;}
#twitter .persons span:hover{color: #55acee}


#tripadvisor-logo{width: 94px; height: 67px; position: absolute; right: 37px; bottom: 20px;}
body.no-svg #tripadvisor-logo{background-image: url(../Images/Tripavisor_logo.png)}
#tripadvisor-logo *{transition: all 200ms;}

#bocuse{background: #f2f2f2; color: #636363}
#bocuse svg, body.no-svg #bocuse:after{display: block; position: absolute;  width: 254px; height: 72px; right: 20px; bottom: 15px; transition:fill 200ms;}
body.no-svg #bocuse:after{background-image: url(../Images/bocuse.png); }
#bocuse:hover{background: #000; }
#bocuse:hover svg *{fill:#E7B416}
#worlds50best #the50logo{
	display: block;
    position: absolute;
    width: 130px;
    height: 84px;
    left: 50%;
    margin-left: -65px;
    bottom: 20px;
    background-image: url(../Images/Worlds50Best.png);
    background-size: 90px 130px;
    background-position: center 0px;
    background-repeat: no-repeat;
    transition: all 200ms; 
}
#worlds50best:hover{background-color:#782b91;}

#michelin .star{background-image: url(../Images/michelin-star.svg); width: 47px; height: 51px; display: inline-block; margin-right: 10px; background-repeat: no-repeat;}
#michelin:hover{background-color: #CD3B24;}

#gallerylink:hover{background: #999}
#gallerylink h4{text-align: center; width: 100%; display: block}
#gallerylink .cell {
    background: url(/images/gallery-overview-black.png) no-repeat 96% center;
}

#site-by:hover, #photos:hover{color: #60616b;}


/* ----------------
	animations
----------------- */
.animated{transition:all 800ms;}
.animate.delay500, .delay500 .cycle-slideshow{transition-delay: 200ms;}
.animate.delay1000, .delay1000 .cycle-slideshow{transition-delay: 400ms;}
.animate.delay1500, .delay1500 .cycle-slideshow{transition-delay: 600ms;}
.animate.delay2000, .delay2000 .cycle-slideshow{transition-delay: 800ms;}

.animate.fadeIn{opacity:0; -webkit-filter: brightness(10);}
.animated.fadeIn{opacity:1; -webkit-filter: brightness(1);}

.animate.slideUp{position:relative; top:20px}
.animated.slideUp{top:0px}
.animate.grey1, 
.animate.grey2, 
.animate.grey3, 
.animate.black, 
.animate .grey1, .animate .grey2, .animate .grey3, .animate .black{background: white;}

#michelin .star, #worlds50best #the50logo, #facebook:after{
	transition:filter 0.2s;
}

#michelin:not(:hover) .star{
    filter: brightness(0.1);
}

#worlds50best:not(:hover) #the50logo{
	filter: brightness(0.3);
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */