/********************************************************************************************* 

x. Smaller than 2000px

*********************************************************************************************/
@media only screen and (max-width:2000px) {
	
	.home #restaurants .restaurants span.logo {
		font-size: 4.286em;
	}
	
	.home #news .news.featured li.image span.text img {
		width: 70px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1900px

*********************************************************************************************/
@media only screen and (max-width:1900px) {
	
	.home #restaurants .restaurants span.logo {
		font-size: 3.571em;
	}
	
	.home #restaurants .restaurants span.logo img {
		max-height: 150px;
		max-width: 200px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1800px

*********************************************************************************************/
@media only screen and (max-width:1800px) {
	
	#header .logo.large {
		width: 130px;
	}
	
	#header .logo.large.visible {
		bottom: -45px;
	}
	
	#header .logo.large img {
		width: 100%;
	}
	
	.home #about .column.first .inside {
		padding: 0 0 40px 0;
	}
	
	.home #about .column.last .inside {
		padding: 0;
	}
	
	.home #about .column.width-50 {
		width: auto;
		max-width: 800px;
		margin: 0 auto;
		float: none;
	}
	
	.wrapper.extra-large {
		width: auto;
		padding: 0 100px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1400px

*********************************************************************************************/
@media only screen and (max-width:1400px) {
	
	h1 {
		font-size: 5.714em;
	}
	
	h2,
	.home #restaurants .restaurants span.logo {
		font-size: 2.857em;
	}
	
	h3 {
		font-size: 1.429em;
	}
	
	h4 {
		font-size: 1.286em;
	}
	
	h5 {
		font-size: 1.143em;
	}
	
	.home #events .events > li,
	.restaurant #events .events > li {
		width: 50%;
	}
	
	#introduction svg.logo,
	#introduction svg.joule,
	#introduction svg.trove,
	#introduction svg.revel,
	#introduction svg.revelry {
		width: 300px; height: 1414px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1350px

*********************************************************************************************/
@media only screen and (max-width: 1350px) {
	
	.wrapper.large {
		width: auto;
		padding: 0 100px;
	}

}

/********************************************************************************************* 

x. Smaller than 1300px

*********************************************************************************************/
@media only screen and (max-width: 1300px) {
	
	#header {
		height: auto;
		min-height: 125px;
	}
	
	#header .hamburger,
	#header .logo.small {
		top: calc((125px / 2));
	}
	
	#header .sub-navigation {
		width: 100%; height: auto;
		padding-top: 125px;
		position: relative;
		top: 0;
		z-index: 0;
	}
	
	#header .sub-navigation a {
		text-align: center;
		text-indent: 0;
		display: block;
	}
	
	#header .sub-navigation .sub-menu {
		display: none;
	}
	
	#header .sub-navigation .sub-menu li {
		width: 100%;
		margin: 0;
		-webkit-transition: width, 0s, ease-out !important;
		-moz-transition: width, 0s, ease-out !important;
		-ms-transition: width, 0s, ease-out !important;
		-o-transition: width, 0s, ease-out !important;
		transition: width, 0s, ease-out !important;
	}
	
	#header .sub-navigation .sub-menu li.active a,
	#header .sub-navigation .sub-menu li.hover a {
		text-indent: 0;
	}
	
	.home #news .news.featured li:nth-child(4),
	.home #news .news.featured li:nth-child(6),
	#header .sub-navigation .sub-menu.open li.active {
		display: none;
	}
	
	.home #news .news.featured li.width-40 {
		width: 70%;
	}
	
	.not-found,
	.restaurant {
	    padding-top: 155px;
	}

}

/********************************************************************************************* 

x. Smaller than 1200px

*********************************************************************************************/
@media only screen and (max-width: 1200px) {
	
	#header .bar {
		display: none;
	}
	
	#header .menu {
		margin-left: 40px;
	}
	
	.restaurant #events {
		padding: 0 0 20px 0;
	}
	
	.wrapper.extra-large,
	.wrapper.large {
		padding: 0 20px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1100px

*********************************************************************************************/
@media only screen and (max-width: 1100px) {
	
	.home #contact svg {
		width: 900px; height: 377px;
		bottom: -50px;
	}
	
	.home #restaurants .restaurants span.logo img {
		max-height: 100px;
		max-width: 150px;
	}
	
	.home #restaurants .restaurants span.logo {
		font-size: 1.786em;
	}
	
	.restaurant #menu .menu {
		margin-left: -10px;
		margin-right: -10px;
	}
	
	.restaurant #menu .menu li .inside {
		padding: 0 20px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1040px

*********************************************************************************************/
@media only screen and (max-width: 1040px) {
	
	.home #news .news.extra li .inside {
		padding-left: 0;
		padding-right: 0;
	}
	
	.home #news .news.featured {
		margin: 0 0 40px 0;
	}
	
	.home #news .news.featured li.width-30 {
		width: 50%;
		margin: 0 0 10px 0;
	}
	
	.home #news .news.featured li.width-50 {
		width: 100%;
		margin: 0 0 10px 0;
	}
	
	.home #news .news.featured li .inside {
		padding: 40px;
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		position: relative;
		top: 0;
	}

}

/********************************************************************************************* 

x. Smaller than 1024px

*********************************************************************************************/
@media only screen and (max-width: 1024px) {
	
	.home #events .events li .meta li,
	.home #news .news.extra li .meta li,
	.restaurant #events .events li .meta li {
		margin: 0;
		float: none;
	}
	
	.home #events .events li .meta li.separator,
	.home #news .news.extra li .meta li.separator,
	.restaurant #events .events li .meta li.separator {
		display: none;
	}

}

/********************************************************************************************* 

x. Smaller than 1000px

*********************************************************************************************/
@media only screen and (max-width: 1000px) {
	
	.home #events .categories,
	.restaurant #menu .categories {
		margin-bottom: 0;
	}
	
	.home #events .categories li,
	.restaurant #menu .categories li {
		background: #F0F1F2;
		margin-bottom: 20px;
	}

}


/********************************************************************************************* 

x. Smaller than 900px

*********************************************************************************************/
@media only screen and (max-width: 900px) {
	
	#header {
		min-height: 110px;
	}
	
	#header .hamburger,
	#header .logo.small {
		top: calc((110px / 2));
	}
	
	#header .hamburger {
		left: 40px;
	}
	
	#header .logo.small {
		right: 40px;
	}
	
	#header .menu {
		margin-top: 150px;
	}
	
	#header .menu li {
		margin-bottom: 20px;
	}
	
	#header .sub-menu li {
		margin-bottom: 15px;
	}
	
	#header .navigation {
		width: 300px;
	}
	
	#header span.title {
		line-height: 110px;
	}
	
	#header .sub-navigation {
		padding-top: 110px;
	}
	
	.home #contact svg {
		width: 700px; height: 293px;
		bottom: -40px;
	}
	
	.not-found,
	.restaurant {
		padding: 110px 0 0 0;
	}
	
	.pagination.side .gallery-wrapper .gallery-pager { 
		text-align: center;
		background: #fff;
		padding: 15px 30px 0 30px;
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		position: absolute;
		bottom: 0; left: 50%;
	}
	
	.pagination.side .gallery-wrapper .gallery-pager .gallery-pager-item {
		margin: 0 3px;
		display: inline-block;
		zoom: 1; 
		*display: inline;
	}
	
}

/********************************************************************************************* 

x. Smaller than 870px

*********************************************************************************************/
@media only screen and (max-width: 870px) {
	
	.home #restaurants .restaurants {
		margin: 0 0 -10px 0;
	}
	
	.home #restaurants .restaurants li.width-50 {
		margin: 0 0 10px 0;
		width: 100%;
	}

}

/********************************************************************************************* 

x. Smaller than 840px

*********************************************************************************************/
@media only screen and (max-width: 840px) {
	
	.wrapper.medium {
		width: auto;
		padding: 0 20px;
	}
	
}


/********************************************************************************************* 

x. Smaller than 800px

*********************************************************************************************/
@media only screen and (max-width: 800px) {
	
	h1 {
		font-size: 4.286em;
	}
	
	h2 {
		font-size: 2.143em;
	}
	
	.home #events .events > li,
	.restaurant #events .events > li {
		width: 100%;
	}
	
	.home #events .events li .inside,
	.restaurant #events .events li .inside {
		margin-left: 0;
		margin-right: 0;
	}
	
	.home #hero {
		height: 80vh;
	}
	
}

/********************************************************************************************* 

x. Smaller than 700px

*********************************************************************************************/
@media only screen and (max-width: 700px) {
	
	#footer {
		padding: 40px 0;
	}
	
	#footer .logo {
		top: 40px;
	}
	
	#footer span.credits {
		margin-top: 40px;
	}
	
	.home #contact svg {
		width: 600px; height: 251px;
		bottom: -20px;
	}
	
	.home #events .events li.width-50,
	.home #news .news.extra li.width-50,
	.restaurant #events .events li.width-50 {
		width: 100%;
	}
	
	.home #news .news.extra li .inside {
		padding-top: 40px;
	}
	
	.home #news .news.extra li:first-of-type .inside {
		padding-top: 0 !important;
	}
	
	.restaurant #menu .category,
	.restaurant #menu .sub-category {
		padding: 0;
	}
	
	.restaurant #menu .menu li.width-33 {
		width: 50%;
	}
	
}

/********************************************************************************************* 

x. Smaller than 600px

*********************************************************************************************/
@media only screen and (max-width: 600px) {
	
	a.underline {
		font-size: 1.143em;
	}
	
	#footer {
		padding-bottom: 10px;
	}
	
	#footer .logo {
		width: 50px; height: auto;
		margin: 0 auto;
		display: block;
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-o-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
		position: relative;
		top: 0; left: 0;
	}
	
	#footer .logo img {
		width: 100%; height: auto;
	}
	
	#footer .gift-card {
		text-align: center;
		padding: 0;
		float: none;
	}
	
	#footer .gift-card input[type="image"] {
		display: none;
	}
	
	#footer .navigation {
		float: none;
	}
	
	#footer .navigation li.restaurants .sub-menu {
		text-align: center;
	}
	
	#footer .navigation li.restaurants .sub-menu li {
		display: inline-block;
		zoom: 1; 
		*display: inline;
		float: none;
	}
	
	#footer span.credits {
		line-height: 60px;
		margin-top: 0;
	}
	
	#header .hamburger {
		left: 20px;
	}
	
	#header .logo.small,
	#header .sub-navigation a:after {
		right: 20px;
	}
	
	#header .menu {
		margin-left: 20px;
	}
	
	#header .navigation {
		width: 250px;
	}
	
	.home #contact {
		padding: 90px 0 40px 0;
	}

	.home #contact svg {
		display: none;
	}
	
	.home #events .events li .inside,
	.restaurant #events .events li .inside {
		margin-left: 0;
		margin-right: 0;
		padding: 20px;
	}
	
	.home #news .news.featured li .inside {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.home #restaurants .restaurants,
	.home #restaurants .restaurants li.width-50 {
		margin: 0;
	}
	
	.restaurant #menu .menu {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	.restaurant #reservations .location,
	.restaurant #reservations .reservations,
	.restaurant #reservations .times {
		margin: 0 0 40px 0;
	}
	
}

/********************************************************************************************* 

x. Smaller than 590px

*********************************************************************************************/
@media only screen and (max-width: 590px) {
	
	.restaurant #reservations {
		padding: 20px 0;
	}

	.wrapper.small {
		width: auto;
		padding: 0 20px;
	}

}

/********************************************************************************************* 

x. Smaller than 500px

*********************************************************************************************/
@media only screen and (max-width: 500px) {
	
	.content ol, 
	.content ul, 
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6,
	.home #news .news.extra li .inside,
	.home #news .news.featured,
	p,
	.restaurant .category {
		margin-bottom: 20px;
	}
	
	#header {
		min-height: 100px;
	}
	
	#header .gift-card {
		padding: 0 0 0 20px !important;
	}
	
	#header .gift-card input[type="submit"] {
		margin: 0;
	}
	
	#header .hamburger,
	#header .logo.small {
		top: calc((100px / 2));
	}
	
	#header .logo.large {
		width: 100px;
	}
	
	#header .logo.large.visible {
		bottom: -35px;
	}
	
	#header .menu {
		margin-bottom: 40px;
		margin-top: 120px;
	}
	
	#header .menu li {
		margin-bottom: 20px;
	}
	
	#header .navigation .logo.small {
		display: none;
	}
	
	#header span.title {
		line-height: 100px;
	}
	
	#header .sub-menu li {
		margin-bottom: 15px;
	}
	
	#header .sub-navigation {
		padding-top: 100px;
	}
	
	/*
	.home #about,
	.home #contact,
	.home #events,
	.home #news,
	.home #restaurants,
	.restaurant #about,
	.restaurant #events .content,
	.restaurant #menu .content {
		padding-top: 40px;
	}
	
	.home #about .content,
	.home #contact .content,
	.home #events .content,
	.home #news .content,
	.home #restaurants .content,
	.restaurant #about .content {
		padding-bottom: 40px;
	}
	
	.home #contact .emails li {
		margin-bottom: 40px;
	}
	*/
	
	.home #events .more {
		margin-top: 10px;
	}
	
	.home #news .news.extra {
		margin: 0;
	}
	
	.home #news .news.extra li .inside {
		margin-left: 0;
		margin-right: 0;
		padding: 0 0 20px 0;
	}
	
	.home #news .news.featured li .inside {
		padding: 20px;
	}
	
	.loader {
		width: 30px; height: 30px;
		background-size: 30px 30px;
	}
	
	.not-found,
	.restaurant {
		padding-top: 130px;
	}
	
	.restaurant #reservations .address span.separator {
		width: 1px; height: 1px;
		visibility: hidden;
		display: block;
		overflow: hidden;
	}
	
}

/********************************************************************************************* 

x. Smaller than 400px

*********************************************************************************************/
@media only screen and (max-width: 400px) {
	
	a.underline:after,
	a.underline:before {
		bottom: -2.5px;
	}
	
	h1 {
		font-size: 2.857em;
	}
	
	#header {
		min-height: 80px;
	}
	
	#header .hamburger,
	#header .logo.small {
		top: calc((80px / 2));
	}
	
	#header .hamburger {
		width: 30px; height: 30px;
	}
	
	#header .hamburger .inside {
		width: 13px; height: 10px;
	}
	
	#header .hamburger .line {
		height: 2px;
	}
	
	#header .hamburger .line.fourth {
	  	top: 8px;
	}
	
	#header .hamburger .line.second, 
	#header .hamburger .line.third {
		top: 4px;
	}
	
	#header .logo.large {
		width: 80px;
	}
	
	#header .logo.large.visible {
		bottom: -30px;
	}
	
	#header .logo.small {
		width: 30px; height: auto;
	}
	
	#header .menu {
		margin-top: 100px;
	}
	
	#header span.title {
		font-size: 1.714em;
		line-height: 80px;
	}
	
	#header .sub-navigation {
		padding-top: 80px;
	}
	
	.home #news .news.featured li.image span.text img {
		width: 40px;
	}
	
	.home #events .categories a,
	.home #news .news.featured li.image span.text span.username,
	.restaurant #menu .categories a {
		font-size: 1.143em;
	}
	
	.home #news .news.featured li.width-30 {
		width: 100%;
	}
	
	.home #restaurants .restaurants span.logo {
		-moz-transform: translateX(-50%) translateY(calc(-50% - 15px));
		-webkit-transform:  translateX(-50%) translateY(calc(-50% - 15px));
		-o-transform:  translateX(-50%) translateY(calc(-50% - 15px));
		-ms-transform:  translateX(-50%) translateY(calc(-50% - 15px));
		transform:  translateX(-50%) translateY(calc(-50% - 15px));
	}
	
	.home #restaurants .restaurants span.name {
		width: 100%; height: 30px;
		position: absolute;
		top: auto;
		left: 0;
	}
	
	.home #restaurants .restaurants span.name span {
		letter-spacing: 0.35em;
		position: relative;
		top: 0; left: 0;
		-moz-transform: translateX(0) translateY(0) rotate(0);
		-webkit-transform: translateX(0) translateY(0) rotate(0);
		-o-transform: translateX(0) translateY(0) rotate(0);
		-ms-transform: translateX(0) translateY(0) rotate(0);
		transform: translateX(0) translateY(0) rotate(0);
	}
	
	.not-found,
	.restaurant {
		padding-top: 110px;
	}
	
	.pagination.bottom .gallery-wrapper .gallery-pager,
	.pagination.side .gallery-wrapper .gallery-pager {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.restaurant #reservations {
		text-align: center;
	}
	
	.restaurant #reservations .location,
	.restaurant #reservations .reservations,
	.restaurant #reservations .times {
		background: none !important;
		padding: 0;
	}
	
	.restaurant .ot-dtp-picker {
		left: 0 !important;
	}
	
	.restaurant #reservations .hours li.width-50,
	.restaurant #menu .menu li.width-33 {
		width: 100%;
	}
	
	.restaurant #events {
		padding-bottom: 20px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 320px

*********************************************************************************************/
@media only screen and (max-width: 320px) {
	
	#footer span.credits {
		line-height: 2em;
		padding: 10px 0 20px 0;
	}
	
	#header .logo.small {
		display: none;
	}
	
	#header span.title {
		text-align: right;
		padding-right: 20px;
	}
	
	.home #news .news.featured li.width-30 {
		width: 100%;
	}
	
	#introduction svg.logo,
	#introduction svg.joule,
	#introduction svg.trove,
	#introduction svg.revel,
	#introduction svg.revelry {
		width: 250px; height: 1178px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1000px (HEIGHT)

*********************************************************************************************/
@media only screen and (max-height: 900px) {
	
	#header .menu li {
		margin-bottom: 20px;
	}
	
	#header .navigation .logo.small {
		margin-top: 80px;
	}
	
	#header .sub-menu li {
		margin-bottom: 15px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 800px (HEIGHT)

*********************************************************************************************/
@media only screen and (max-height: 800px) {
	
	#header .bar {
		top: 120px;
	}
	
	#header .menu { 
		margin-top: 120px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 700px (HEIGHT)

*********************************************************************************************/
@media only screen and (max-height: 700px) {
	
	#header .gift-card {
		text-align: left;
		padding: 0 0 0 40px;
	}
	
	#header .menu {
		margin-bottom: 40px;
		margin-top: 100px;
	}
	
	#header .navigation .logo.small {
		display: none;
	}
	
}

/********************************************************************************************* 

x. Smaller than 500px (HEIGHT)

*********************************************************************************************/
@media only screen and (max-height: 500px) {
	
	#header .menu { 
		margin-top: 80px;
	}
	
}