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

x. Basic Setup (Body, Fonts, etc.) 

********************************************************************************************/
@media only screen and (max-width:1300px) {
	.wrapper {
		width: auto;
		margin: 0 50px;
	}
}
@media only screen and (max-width:1200px) {
	h1.the-cafe-flora-family {
		padding: 0;
	}
	h1.the-cafe-flora-family .logo {
		display: none;
	}
}
@media only screen and (max-width:1000px) {
	h1 {
		font-size: 3.077em;
	}
	.illustration {
		-moz-transform: scale(.75);
		-webkit-transform: scale(.75);
		-o-transform: scale(.75);
		-ms-transform: scale(.75);
		transform: scale(.75);
	}
}
@media only screen and (max-width:800px) {
	.wrapper {
		margin: 0 30px;
	}
}
@media only screen and (max-width:700px) {
	h1 {
		font-size: 2.308em;
	}
	h2 {
		font-size: 1.923em;
	}
}
@media only screen and (max-width:500px) {
	.illustration {
		display: none;
	}
}


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

x. Content

*********************************************************************************************/
@media only screen and (max-width:800px) {
	.content ol.three-column, 
	.content ol.two-column, 
	.content ul.three-column, 
	.content ul.two-column {
		margin: 0 -15px -30px -15px;
	}
	.content ol.three-column li, 
	.content ol.two-column li, 
	.content ul.three-column li, 
	.content ul.two-column li {
		padding: 0 15px;
	}
	.content ol.two-column li, 
	.content ul.two-column li {
		width: calc(49.5% - 30px);
	}
	.content ol.three-column li, 
	.content ul.three-column li {
		width: calc(33% - 30px);
	}
}
@media only screen and (max-width:500px) {
	.content ol.three-column, 
	.content ol.two-column, 
	.content ul.three-column, 
	.content ul.two-column {
		margin: 0 0 -30px 0;
	}
	.content ol.three-column li, 
	.content ul.three-column li,
	.content ol.two-column li, 
	.content ul.two-column li {
		width: 100%;
		padding: 0;
	}
}

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

x. bxSlider

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	.bx-wrapper .bx-pager {
		top: calc(100% + 5px);
	}
}
@media only screen and (max-width:500px) {
	.bx-wrapper .bx-pager-item, 
	.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
		margin: 0 3px;
	}
	.bx-wrapper .bx-pager.bx-default-pager a {
		width: 4px; height: 4px;
	}
}



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

x. Header

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	header .anchor-navigation {
		text-align: center;
	}
	header .anchor-navigation li {
		margin: 0 15px;
	}
	header .desktop {
		display: none;
	}
	header .mobile {
		display: block;
	}
	header .mobile .navigation .close {
		top: 30px; right: 30px;
	}
}
@media only screen and (max-width:800px) {
	header .anchor-navigation,
	header .mobile .navigation .locations .logo {
		display: none;
	}
	header .mobile .navigation .locations .columns .column .inside {
		padding: 30px;
	}
	header .mobile .navigation .locations .content .restaurant-name {
		display: block;
	}
}
@media only screen and (max-width:600px) {
	header .mobile .navigation .menu .links li {
		margin: 0 0 20px 0;
	}
	header .mobile .navigation .menu .links li a {
		font-size: 1em;
	}
}
@media only screen and (max-width:500px) {
	header .mobile .navigation .locations .columns {
		display: block;
	}
	header .mobile .navigation .locations .columns .column {
		width: 100%;
		float: none;
	}
	header .mobile .navigation .locations .social-media {
		display: none;
	}
}

@media only screen and (max-height:700px) {
	header .mobile .navigation .locations {
		display: none;
	}
	header .mobile .navigation .menu {
		bottom: 0 !important;
	}
}
@media only screen and (max-width:500px) {
	header .notice .content {
		font-size: 0.846em;
	}
}


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

x. Main

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	main section.spacing {
		margin-bottom: 50px;
	}
	section.full-width + section.full-width {
		margin-top: -50px;
	}
}
@media only screen and (max-width:1000px) {
	main .logo {
		margin: 0 0 30px 0;
	}
}
@media only screen and (max-width:800px) {
	main {
		padding: 0;
	}
	main section.spacing {
		margin-bottom: 30px;
	}
	section.full-width + section.full-width {
		margin-top: -30px;
	}
}

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

x. Footer

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	footer .wrapper {
		padding: 50px 0;
	}
	footer .columns {
		margin: 0 -25px 100px -25px;
	}
	footer .columns .column .inside {
		padding: 0 25px;
	}
}
@media only screen and (max-width:1000px) {
	footer .columns {
		margin: 0 -25px 50px -25px;
	}
	footer .content form {
		margin: 0 0 50px 0;
	}
}
@media only screen and (max-width:800px) {
	footer .logo {
		display: none;
	}
	footer .restaurant-name {
		display: block;
	}
	footer .wrapper {
		padding: 30px 0;
	}
	footer .columns {
		margin: 0 -15px 50px -15px;
	}
	footer .columns .column .inside {
		padding: 0 15px;
	}
}
@media only screen and (max-width:700px) {
	footer .columns {
		margin: 0 0 50px 0;
		display: block;
	}
	footer .columns .column {
		width: 100%;
		float: none;
	}
	footer .columns .column:first-child {
		margin: 0 0 30px 0;
	}
	footer .columns .column:last-child {
		margin: 30px 0 0 0;
	}
	footer .columns .column .inside {
		padding: 0;
	}
}
@media only screen and (max-width:600px) {
	footer .content form input[type="email"] {
		width: 300px;
	}
}
@media only screen and (max-width:500px) {
	footer .content form input[type="email"],
	footer .content form input[type="submit"] {
		text-align: center;
		width: 100%;
		max-width: none;
		margin: 0;
		display: block;
	}
}


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

x. Gallery

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	section.gallery.background-color .wrapper {
		padding: 50px 0;
	}
}
@media only screen and (max-width:800px) {
	section.gallery.background-color .wrapper {
		padding: 30px 0;
	}
}

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

x. Images

*********************************************************************************************/
@media only screen and (max-width:400px) {
	section.images .columns {
		margin: 0;
		display: block;
	}
	section.images .columns .column {
		width: 100%;
		float: none;
	}
	section.images .columns .column:first-child {
		margin: 0 0 10px 0;
	}
	section.images .columns .column .inside {
		padding: 0;
	}
}

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

x. Menu

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	section.menus .menu-category .item-categories {
		margin: 0 -25px;
	}
	section.menus .menu-category .item-categories .item-category {
		margin: 50px auto 0 auto;
	}
	section.menus .menu-category .item-categories .item-category .inside {
		padding: 0 25px;
	}
}
@media only screen and (max-width:800px) {
	section.menus .menu-category .item-categories {
		margin: 0 -15px;
	}
	section.menus .menu-category .item-categories .item-category {
		margin: 30px auto 0 auto;
	}
	section.menus .menu-category .item-categories .item-category .inside {
		padding: 0 15px;
	}
}
@media only screen and (max-width:700px) {
	section.menus .menu-category .item-categories {
		display: block;
	}
	section.menus .menu-category .item-categories .item-category {
		width: 100%;
		max-width: none;
		float: none;
	}
	section.menus .menu-categories {
		margin: 30px 0 0 0;
	}
	section.menus .menu-categories li {
		margin: 0 15px 30px 15px;
	}
}
@media only screen and (max-width:660px) {
	section.menus .menu-category {
		width: auto;
	}
}

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

x. Recent Posts

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	section.recent-press .wrapper {
		padding: 50px 0 0 0;
	}
	.home section.recent-press .wrapper {
		padding: 50px 0;
	}
	section.recent-press .grid .item {
		margin: 50px 0 0 0;
	}
	section.recent-press .grid .item .inside {
		padding: 0 25px;
	}
}
@media only screen and (max-width:1000px) {
	section.recent-press .grid .item {
		width: 50%;
	}
	.home section.recent-press .grid .item:last-child {
		display: none;
	}
}
@media only screen and (max-width:800px) {
	section.recent-press .wrapper {
		padding: 30px 0 0 0;
	}
	.home section.recent-press .wrapper {
		padding: 30px 0;
	}
	section.recent-press .grid .item {
		margin: 30px 0 0 0;
	}
	section.recent-press .grid .item .inside {
		padding: 0 15px;
	}
	section.recent-press .grid .item .inside .image {
		max-width: 30%;
	}
}
@media only screen and (max-width:500px) {
	section.recent-press .grid,
	.home section.recent-press .grid .item:last-child {
		display: block;
	}
	section.recent-press .grid .item {
		text-align: center;
		width: 100%;
		float: none;
	}
	section.recent-press .grid .item .inside .image {
		margin: 0 auto 30px auto;
	}
	section.recent-press .grid .item .inside .image img {
		margin: 0 auto;
	}
	section.recent-press .title h1 {
		-moz-transform: none;
		-webkit-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
		position: relative;
		top: 0; left: 0;
	}
	section.recent-press .wrapper {
		padding: 0;
	}
}

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

x. Shop

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	section.shop .grid .item {
		width: 50%;
	}	
}
@media only screen and (max-width:800px) {
	section.shop .grid {
		margin: -15px;
	}
	section.shop .grid .inside {
		padding: 15px;
	}
}
@media only screen and (max-width:500px) {
	section.shop .grid .item {
		width: 100%;
	}	
}


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

x. Slick

*********************************************************************************************/
@media only screen and (max-width:700px) {
	.slick-slide .image {
		height: 400px;
	}
}
@media only screen and (max-width:500px) {
	.slick-slide .image {
		height: 300px;
	}
}

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

x. Text

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	section.text.background-color .wrapper {
		padding: 100px 0;
	}
	section.text.no-columns .wrapper {
		margin: 0 auto;
	}
}
@media only screen and (max-width:1300px) {
	section.text.background-color.no-columns .wrapper,
	section.text.background-color .wrapper {
		padding: 60px 0;
	}
	section.text .columns {
		margin: 0 -25px;
	}
	section.text .columns .column {
		padding: 0 25px;
	}
}
@media only screen and (max-width:800px) {
	section.text .columns {
		margin: 0 -15px;
	}
	section.text .columns .column {
		padding: 0 15px;
	}
}
@media only screen and (max-width:700px) {
	section.text .columns {
		margin: 0;
		display: block;
	}
	section.text .columns .column {
		width: 100%; height: auto;
		padding: 0;	
		float: none;
	}
	section.text .columns .column:first-child {
		margin: 0 0 30px 0;
	}
	section.text.background-color.no-columns .wrapper,
	section.text.background-color .wrapper {
		padding: 30px 0;
	}
}
@media only screen and (max-width:660px) {
	section.text.no-columns .wrapper {
		width: auto;
		margin: 0 30px;
	}
}

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

x. Text + Image
x. Text + Map

*********************************************************************************************/
@media only screen and (max-width:1500px) {
	section.text-image.background-color.group .wrapper, 
	section.text-map.background-color.group .wrapper {
		width: auto;
		margin: 0 50px;
	}
	section.text-image.background-color.group .columns .column .content, 
	section.text-map.background-color.group .columns .column .content {
		padding: 50px;
	}
}
@media only screen and (max-width:1300px) {
	section.text-image .columns, 
	section.text-map .columns {
		margin: 0 -25px;
	}
	section.text-image .columns .column, 
	section.text-map .columns .column {
		padding: 0 25px;
	}
	section.text-image.background-color.group .wrapper, 
	section.text-map.background-color.group .wrapper {
		margin: 0;
	}
	section.text-image.background-color.group .columns .column .content, 
	section.text-map.background-color.group .columns .column .content {
		padding: 50px;
	}
	/*
	section.text-image.text-position-left.background-color.group .columns .column .content {
		padding-left: 0;
	}
	section.text-image.text-position-right.background-color.group .columns .column .content {
		padding-right: 0;
	}
	*/
	section.text-image.background-color .wrapper, 
	section.text-map.background-color .wrapper {
		padding: 50px 0;
	}
	section.text-image.background-color.blue.group + section.text-image.background-color.blue.group .wrapper,
	section.text-map.background-color.blue.group + section.text-map.background-color.blue.group .wrapper,
	section.text-image.background-color.green.group + section.text-image.background-color.green.group .wrapper,
	section.text-map.background-color.green.group + section.text-map.background-color.green.group .wrapper,
	section.text-image.background-color.pink.group + section.text-image.background-color.pink.group .wrapper,
	section.text-map.background-color.pink.group + section.text-map.background-color.pink.group .wrapper,
	section.text-image.background-color.tan.group + section.text-image.background-color.tan.group .wrapper,
	section.text-map.background-color.tan.group + section.text-map.background-color.tan.group .wrapper {
		padding-top: 0;
	}
	
}
@media only screen and (max-width:1200px) {
	.home section.gallery + section.text-image .wrapper {
	    width: auto;
	    margin: 0 50px;
	}
}
@media only screen and (max-width:1000px) {
	section.text-image .columns, 
	section.text-map .columns {
		margin: 0;
		display: block;
	}
	section.text-image .columns .column, 
	section.text-map .columns .column {
		width: 100%; height: auto;
		padding: 0;	
		float: none;
	}
	section.text-image .columns .column:first-child, 
	section.text-map .columns .column:first-child {
		margin: 0 0 30px 0;
	}
	section.text-image.background-color.group .columns .column .image.background, 
	section.text-map.background-color.group .columns .column .image.background {
		position: relative;
	}
	section.text-image.background-color.group .columns .column .image.background img, 
	section.text-map.background-color.group .columns .column .image.background img {
		display: block;
	}
}
@media only screen and (max-width:800px) {
	section.text-image.background-color.group .columns .column .content, 
	section.text-map.background-color.group .columns .column .content,
	section.text-image.background-color.group .wrapper, 
	section.text-map.background-color.group .wrapper {
		padding: 30px;
	}
	section.text-image.background-color.group .columns .column .content, 
	section.text-map.background-color.group .columns .column .content {
		padding: 0;
	}
	section.text-image.background-color .wrapper, 
	section.text-map.background-color .wrapper {
		padding: 30px 0;
	}
	.home section.gallery + section.text-image .columns .column:first-child {
		display: none;
	}
	.home section.gallery + section.text-image .wrapper {
		margin: 0 30px;
	}
}
@media only screen and (max-width:600px) {
	section.text-image #map, 
	section.text-map #map {
		height: 400px;
	}
}
@media only screen and (max-width:500px) {
	section.text-image .logos, 
	section.text-map .logos {
		display: none;
	}
	section.text-image #map, 
	section.text-map #map {
		height: 300px;
	}
}

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

x. Form

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	input[type="submit"] {
		 border-radius: 0;
	    -webkit-appearance: none;
	}
}

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

x. WordPress

*********************************************************************************************/
@media only screen and (max-width:700px) {
	.aligncenter,
	.alignleft,
	.alignnone,
	.alignright {
	    width: 50% !important;
	}
}
@media only screen and (max-width:500px) {
	.aligncenter,
	.alignleft,
	.alignnone,
	.alignright {
	    width: 100% !important;
	}
}