html, body, div{

	margin: 0;
	padding: 0;
	font-family: 'museo300';
	font-size: 14px;
	color: #2c2624;
	letter-spacing: 1.2pt;
	line-height: 25px;
}

html, body, #grid, #content, .section{
	height: 100%;
}

.trans{
	transition: all 200ms;
}

a{
	color: #6F5615;
	text-decoration: none;
}

a:hover, a:focus{
	text-decoration: underline;
}

strong{
	color: #272525;
	font-family: 'museo300';
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
}


.canvas{
	width: 100%;
	position: relative;
	left: 0;
}

#loader{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #FAFAF9;
	opacity: 0.9;
	z-index: 99999;
}

#loader > .grid{
  height: 100%;
  top: 0;
}

#qLbar {
	top: 0 !important;
}


#spinner {
	position: absolute;
	height: 61px;
	width: 61px;
	top: 50%;
	border: 3px solid rgba(226, 226, 226, 0.75);
	border-radius:100%;
	-webkit-animation: rotation 1s infinite linear;
	-moz-animation: rotation 1s infinite linear;
	-o-animation: rotation 1s infinite linear;
	animation: rotation 1s infinite linear;
	left: 50%;
	margin-left: -27px;
	margin-top: -27px;
}


.no-csstransforms #spinner:before {
	border: 0;
}	

#spinner:before {
   content:"";
   display:block;
   position:absolute;
   left:-3px;
   top:-3px;
   height:100%;
   width:100%;
   border-top:3px solid rgba(0,0,0,1);
   border-left: 3px solid #000;
   border-bottom:3px solid transparent;
   border-right: 3px solid #000;
   border-radius:100%;
}
@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}


svg#Atera_Lines{
	width: 100%;
}

.section{
	text-align: center;
	outline-color: transparent;
	outline: none;
	box-shadow: none;
	position: relative;
	height: 100%;
	width: 100%;
	margin: 0;
	max-width: 100%;
}



.grid{
	top: 10vh;
	max-width: 1430px;
	margin: 0 auto;
	position: relative;
}

.grid.notop{
	top: 0;
}

@media screen and (max-width:1800px) {
	.grid{
		max-width: 80%;
	}
}


.grid.home{
	top: 20%;	
}

.section.grey{
	background-color:#f4f4f3;
}

.section.white{
	background-color: #fafaf9;
}

.section.left-logo{
	background-image:url();
	background-position: -30% 0;
}

.section.right-logo{
	background-position: 30% 0;
}


.section.full{
	padding-top: 0;
	height: 100%;
}

.section > h1{
	margin-top: 0;
}

.align-left, .align-left p{
	text-align: left;
}

.small p{
	font-size: 14px;
	line-height: 18px;
}

.italic{
	font-family: 'museo300';
	font-style: italic;
}

.left{
	text-align: left;
}




#open-nav{
	position: fixed;
	left: 6%;
	top:10vh;
	width: 30px;
	height: 10px;
	z-index: 3000;
	transition:all 400ms;
	margin-left: 15px;
}




#nav{
	position: fixed;
	width: 30%;
	left: -30%;
	height: 100%;
	background:white;
	z-index: 30000;
	top: 0;
	max-width: 300px;
}


#social{
	top: 12vh;
	position: relative;
	text-align: left;
	left: 20%;
	margin-left: 15px;
	list-style: none;
}

#social li{
	display: inline;
	width: 30px;
    float: left;
}

#social a{
	color: #767270;
	margin-right: 7px;
	transition:color 100ms; 
	text-indent: 0;
}

#social a:hover{
	color: #6F5615;
}

a#michelin {
  width: 40px;
  display: block;
  position: fixed;
  z-index: 1000;
  right: 6%;
  top: 10%;
  height: 30px;
  transition:all 400ms; 
  margin-right: 15px;
}

body.home a#michelin{
	top:20%;
}






body.init #open-nav{
	left: -70px;
}

body.init a#michelin{
	right: -70px;
}

a#michelin svg path{
	fill: #74706e;
	transition: fill 200ms;
}

a#michelin:hover svg path{
	fill:#6F5615
}

body.home #social{
	top:22%;	
}

#open-nav line{
	transition: stroke 200ms;
}

#nav #closer{
	width: 25px;
	height: 25px;
	display: block;
	position: relative;
	top: 10vh;
	left: 20%;
	transition:top 400ms;
	margin-left: 15px;
}

body.home #nav #closer, 
body.home #open-nav{
	top:20vh;
}

#nav #closer #X{
	transition: transform 0ms; 
	transform-origin: 50% 50%;	
}

#nav #closer:hover #X{
	transition: transform 200ms; 
	transform: rotate(90deg);
}

#nav #closer:hover line,
#open-nav:hover line{
	stroke:#6F5615;	
}

#nav ul{
	margin: 20px 0;
	padding: 0;
	position: relative;
	top: 12vh;
	transition:top 200ms;
}


body.home #nav ul{
	top: 22vh;
}

#nav ul li{
	position: relative;
}

#nav ul li a{
	position: relative;
	padding:10px 0 10px 20%;
	color: #767270;
	width: auto;
	display: block;
	transition: all 100ms;
	text-align: left;
	text-indent: 15px;
	letter-spacing: 0.8pt;
}

#nav ul li a:hover,
#nav ul li a.active{
	color:#fff;
}

#nav ul li a::before{
	content: "";
	position: absolute;
	top:0;
	left:0;
	color:#fff;
	padding:10px 0 10px 30%;
	width: 30%;
	overflow: hidden;
	transition: all 200ms; 
	background: #fff;
	display: block;
	height: 25px;
	z-index: -1;
}

#nav ul li a:hover::before,
#nav ul li a.active::before{
	width: 70%;
	background: #6F5615;

}

body{
	overflow-x: hidden;
}

body.nav-visible #nav{
	left: 0;
}

.no-touch body.nav-visible #grid{
	-ms-transform: translate(10%,0);
	-webkit-transform: translate(10%,0);
	transform: translate(10%,0);	
}





h1, h2{
	font-family: 'museo300';
	font-size: 30px;
	letter-spacing: 3px;
	line-height:33px;
}

h3{
	font-family: 'museo300';
	font-size: 17px;
	letter-spacing: 3px;
}

p{
	color: #767270;	
	font-family: 'museo300';
	letter-spacing: 1.2pt;
}

p img{
	max-width: 100%;
	height: auto;
}

.btn{
	width: 280px;
	padding: 7px 0;
	border-radius: 50px;
	display: inline-block;
	letter-spacing: 0;
	text-transform: lowercase;
	position: relative;
	cursor: pointer;
}

.btn.yellow{
	background: #6F5615;
	border: 1px solid #916f1b;
	color: #fff;
}

.btn.yellow:hover{
	background: #ffffff;
	border: 1px solid #ffffff;
	color: #5c5c5c
}

.bottom-pad{
	margin-bottom: 6% !important;
}

.top-pad{
	margin-top: 6% !important;
}


/* HOME */
svg#Atera_Logo {
	width: 100%;
}

#_home h1, #_home p{
	color: #000;
}

a.scrolldown {
   width: 100px;
  height: 60px;
  position: absolute;
  display: block;
  bottom: 20px;
  left: 50%;
  margin-left: -50px;
  text-align: center;
}

a.scrolldown span{
	color: #000;
	font-size: 11px;
}

a.scrolldown svg{
	width: 32px;
	height: 32px;
	left: 50%;
	margin-left: -16px;
	position: absolute;
  bottom: 0;
}

a.scrolldown svg line{
	-webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
    0% {stroke: #A8A6A5}
    50% {stroke: #6F5615}
    100% {stroke: #A8A6A5}
}


/* DINNER */

#_dinner, #_private-dining, #_about{
	background-image: url(images/atera_circle.svg);
	background-size: 120%;
	background-position: 60% 0;
	background-repeat: no-repeat;
	
}

#_dinner p{
	letter-spacing: 1.6pt;
}





/* RESERVATIONS */

.reservations-input .btn{
	text-align: center;
	margin-top: 20px;
	width: 120%;
	left: -10%;
	
}

@media screen and (max-width:1000px) {
	.reservations-input .btn{
		width: 130%;
		left: -15%;
	}	
}

@media screen and (max-width:900px) {
	.reservations-input .btn{
		width: 120%;
		left: -10%;
	}	
	
	.reservations-form .reservations-field .reservations-option	{
	  left: 50%;
	  margin-left: -140px;
	}
}


.reservations-input .btn .fa{
	position: absolute;
	right: 20px;
	top:10px
}

.ui-datepicker td span, .ui-datepicker td a{
	color: black;
}

.ui-datepicker{
	padding: 0 1em;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
	margin-left: -2px;
}

.reservations-input .btn:hover{
	background: #6F5615;
	border: 1px solid #E6CB89;
	color: #FFF;
}


.reservations-field.active .btn{
	background: #fff;
	color: #676767;
}



.reservations-field{
	position: relative;
}

.reservations-form .reservations-field .reservations-option {
	max-height: 0;
	overflow: hidden;
	background: #FFF;
	padding: 0 25px;
	position: absolute;
	height: auto;
	z-index: 2;
	width: 232px;
	top: 70px;
	border-radius: 14px;
	font-size: 12px;
	line-height: 19px;
	transition: all 200ms;
	text-align: center;
    left: 50%;
    margin-left: -136px;
}


.reservations-form .reservations-field.active .reservations-option{
	max-height: 400px;
	padding: 25px;
}

.reservations-form .reservations-field .reservations-option ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.reservations-option .reservations-value{
	display: inline-block;
	border: 1px solid #BAB8B7;
	border-radius: 30px;
	cursor: pointer;
	padding: 2px 8px;
	min-height: 17px; min-width: 11px; line-height: 22px;
	letter-spacing: 1.3pt;
}
.reservations-option .reservations-value:hover{
	border: 1px solid #000;
}

.reservations-option .reservations-value.active{
	background: #6F5615 !important;
	color: white;
	border: none !important;
}

#notification{
	border-radius: 20px;
	width: 30%;
	margin: 10px auto;
	padding: 20px;
	opacity: 0;
	background: #C3E78A;
	border: 1px solid #B7E387;
	color: #5C5C5C;
	transition: opacity 200ms;

}

#notification.visible{
	opacity: 1;
}

#opentable, .play{
	color: #BAB8B7;
	position: relative;
	display: inline-block;
	cursor: not-allowed;
}

.no-touch.play{
	display: none;
}


#opentable span, .play span{
	width: 78px;
	height: 78px;
	border-radius: 40px;
	transition: all 200ms;	
	display: inline-block;	
	color: white;
	border:1px solid #BAB8B7;	
}
#opentable span .fa, .play span .fa{
  font-size: 50px;
  line-height: 77px;
  text-indent: 4px;
  color: #BAB8B7;
}

.play span .fa{
	color: #000;
}

#opentable.enabled {
	opacity: 1;
	cursor: pointer;
	color: #6F5615;
}

#opentable.enabled span{
	background: #6F5615;
	border:1px solid #6F5615;
}

#opentable.enabled span .fa{
	color: #fff;
}


.reservations-input .btn.valid,
.play:hover span{
	background: #fff;
	border: 1px solid #b7e387;
	color: #5c5c5c
}

#opentable.enabled:hover span{
	border: 1px solid #000;
	background: #fff;
}

#opentable.enabled:hover{
	color: #000;
}

#opentable.enabled:hover span .fa {
  color: #000;
}

/* PRIVATE DINING */

#_dinner, #_private-dining{
	background-position: -150% 50%;
}

/* GALLERY */

#_gallery, #_behind-the-scenes{

	height: 100%;
	width: 100%;
	transition: height 200ms;
	margin: 0;
	display: inline-block;
	padding: 0;
}

.gallery-wrapper,
.thumbs-wrapper{
	height: 70vh;
	width: 74%;
	transition: height 200ms;
	margin: 10vh 13%;
	padding: 0;
	position: relative;
	
}

#bhts-gallery-wrapper{
	margin: 0;
	width: 100%;
}

.thumbs-wrapper{
	display: none;
}

.gallery-thumbs{
	overflow: hidden;
}

.gallery{
	width: 100%;
	height: 100%;
}

.gallery-wrapper *{
	outline: none !important;
}

.opengrid{
	display: block;
	left: 50%;
	margin-left: -16px;
	position: absolute;
	width: 34px;
	height: 34px;

	cursor: pointer;
	z-index: 22;
	bottom: 6vh;	
}


.opengrid:hover rect{ fill:#6F5615;}
.opengrid:hover path{ fill:#E6CB89;}


.gallerycloser {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 32px;
  height: 32px;
  z-index: 999;
  opacity: 0.9;
  display: none;
}

.showThumbs .gallerycloser{
	display: block !important;
}

.gallerycloser svg line{
	transition:stroke 200ms; 
}

.gallerycloser:hover svg line{
	stroke:#6F5615;
}


.gallery-thumbs{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
}

.showThumbs .thumbs-wrapper{
	display: block;
}

.showThumbs .gallery-wrapper{
	display: none;
}


.cycle-slide, .cycle-slide .innerimage{
	width: 100%;
	height: 100%;
}

.cycle-slide .overlay{
	width: 100%;
	background: #fff;
}

.cycle-slide .overlay .inner{
	padding: 0;
}

.cycle-slide .overlay .inner h1{
	display: none;
}

.cycle-slide .overlay .inner p{
	color: #000;
}

.slide0 .overlay{
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	background: rgba(0, 0, 0, 0.2);
	position: absolute;
	display: block;
	pointer-events: none;
}

.slide0 .overlay .inner{
  position: absolute;
  width: 100%;
  top: 43%;
  padding: 0;
  pointer-events: none;
}

.slide0 .overlay .inner h1, .slide0 .overlay p{
	color: white;
	display: block;
	pointer-events: none;
}


.gallery-wrapper .image{
	position: relative;
	margin-top:60px;
	display: block;
}

.gallery-wrapper .image:last-child{
	margin-bottom: 60px;
}

.gallery-wrapper .image img{
	max-width: 100%;
}

.gallery-wrapper .image .caption{
	width: 80%;
  margin: 0 auto;
  text-align: center;
}

.gallery-wrapper .image .caption .inner{
	color:#000;
}

.cycle-prev, .cycle-next{
	position: absolute;
	top: 50%;	width: 34px;
	height: 34px;
	margin-top: -17px;
	z-index: 200;
	cursor: pointer;
}


.noslides .cycle-prev, .noslides .cycle-next{
	display: none;
}

.cycle-prev *, .cycle-next *, .opengrid *{
	transition: all 150ms;
}

.cycle-prev{left: -12%; }
.cycle-next{right: -12%; }

.cycle-prev:hover .inner, .cycle-next:hover .inner{fill:#E6CB89;}
.cycle-prev:hover .outer, .cycle-next:hover .outer{fill:#E6CB89;}
.cycle-prev:hover .arrow, .cycle-next:hover .arrow{fill:#ffffff;}


.no-svg .cycle-prev, .no-svg .cycle-next{background-position: top; background-repeat: no-repeat;}
.no-svg .cycle-prev {background-image: url(images/arr-left.png);}
.no-svg .cycle-next {background-image: url(images/arr-left.png);}
.no-svg .cycle-prev:hover, .no-svg .cycle-next:hover{background-position: bottom;}


.rsThumb {
	float: left;
	position: relative;
	width: 20%;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
}

.rsThumb.h1 {height: 100%;}
.rsThumb.h2 {height: 50%;}
.rsThumb.h3 {height: 33.3333%;}
.rsThumb.h4 {height: 25%;}
.rsThumb.h5 {height: 20%;}
.rsThumb.h6 {height: 16.666%;}

.rsThumb img{
	max-width: 100%;
	height: auto;
	float: left;
}

.rsThumb .thumbcaption{
  background: rgba(0, 0, 0, 0.77);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #FFF;
  opacity: 0;
  transition: opacity 200ms;
}

.rsThumb .thumbcaption::before{
	content: url(images/plus.svg);
	width: 34px;
	height: 34px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -17px;
	margin-top: -17px;
	opacity: 0.8;
}


.rsThumb:hover .thumbcaption{
	opacity: 1;
}

.rsThumb .thumbcaption span{
	padding-top: 59%;
	color: white;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1.8pt;
	text-transform: lowercase;
	display: block;
	-webkit-font-smoothing: antialiased;
	font-family: 'museo300';
	margin: 10% auto 0;
	width: 80%;
}


@media screen and (max-width:760px) {
	.rsThumb{
		width: 50%;
	}
}

@media screen and (min-width: 760px) and (max-width:860px) {
	.rsThumb{
		width: 33.333333%;
	}
}

@media screen and (min-width: 1600px) and (max-width:2000px) {
	.rsThumb{
		width: 16.666%;
	}
}

@media screen and (min-width: 2000px) and (max-width:2400px) {
	.rsThumb{
		width: 14.285714286%;
	}
}

@media screen and (min-width: 2400px) and (max-width:2800px) {
	.rsThumb{
		width: 12.5%;
	}
}



/* VIDEO */

.videowrapper{
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: block;
}

.videocontainer{
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	left: 0;
	
}

.videowrapper video{
	max-width: none;
	height: 100%;
}

/* ABOUT */

#_about{
	background-position: 130% -20%;
}

#RonnyEmborg{
	margin: 60px 0;
	display: block;
}

#RonnyEmborg svg *{
	transition: fill 150ms;
}

#RonnyEmborg:hover svg *{
	fill:#6F5615;
}


/* LOGO */
svg{
	overflow:visible;
}



/* GOOGLE MAP */

.acf-map {
	width: 100%;
	height: 400px;
	margin-top: 100px !important;
}


@media screen and (min-width:1020px) {
	#open-nav{
		left: 64px;
	}
	
	a#michelin{
		right: 64px;
	}
		
}

/* MOBILE */

@media screen and (max-height:900px) {
	.bottom-pad{margin-bottom: 2% !important;}	
	.top-pad{margin-top: 2% !important;}
}

@media screen and (max-width:900px) {
	
	p {
		color: #55514f;
  	}
  	
  	h1, h2{
	  	font-size: 22px;
  	}
  
	.grid{
		top:0;
		max-width: 72%;
	}
	
	.grid__cell{
		width: 100%;
		padding: 0 15px;
		text-align: center;
	}
	
	.grid__cell img{
		  max-width: 100%;
	}
	
	.section{
		height: auto;
		padding: 20% 0;
	}
	
	.section.full{
		padding: 0;
	}
	
	a.scrolldown{
		position: relative;
		bottom: inherit;
		margin-top: 40px;
	}
	
	
	#loader > .grid{
		top:12%;
	}
	
	.btn{
		width: 100%;
	}
	
	
	#notification{
		width: 80%;
	}
	
	
	#gallery-grid, #bhts-gallery-grid{
		bottom: 3%;
	}
	
	.gallery-wrapper{
		height: 100%;
		width: 85%;
		margin: 17% auto;
		padding: 0;
	}
	
	.cycle-slide{
		height: 250px;
	}
	
	
	.gallery-wrapper .grid{
		padding: 0 23px;
		max-width: 86%;
	}
	
	.gallery-wrapper .image .caption{
		position: relative;
	}
	
	.gallery-wrapper .image .caption .inner{
		padding: 0;
	}
	
	.thumbs-wrapper, .cycle-prev, .cycle-next, .opengrid, .showThumbs .thumbs-wrapper {
		display: none;	
	}
	
	.showThumbs .gallery-wrapper{
		display: block;
	}
	
	.rsSlide .overlay {
		bottom: 0%;
		width: 90%;
		text-align: center;
		padding: 20px 5% 60px;
		margin: 0 auto;
		top:inherit;
		opacity: 1;
	}
	
	
	.rsSlide .overlay h2{
		line-height: 30px;
	}
	
	.slide0 .overlay .inner{
		top:initial;
		bottom:50%;
		
	}
	
	#_contact{
		padding-bottom: 0;
	}
	
	.acf-map{
		position: relative;
		height: 300px;
	}
}

@media screen and (max-width:700px) {

	
	svg#Atera_Logo{
		width: 70%;			
	}
	
	
	#nav #closer, #open-nav, #michelin{
		top:5% !important;
	}
	
	#open-nav{
		left: 2.5%;
	}
	a#michelin{
		right: 2.5%;
	}
	
	#nav{
		width: 100%;
		left: -100%;
		max-width: 100%;
	}
	#nav #closer, #social{
		left: 10%;
	}
	
	#nav ul, #social{
		top:6% !important;
	}
	
	#nav ul li a{
		padding:10px 0 10px 10%;
		height: 25px;
	}
	
	#nav ul li a:hover::before, #nav ul li a.active::before{
		width: 100%;
		padding: 10px 0;
	}
	
	.section{
		padding-bottom: 110px;
	}
	
}

#wpadminbar{
	display: none !important;
}