/* ===== GRID ===================================================== */

@media screen and (min-width: 450px) {
	html {
    box-sizing: border-box;
	}
	*, *:before, *:after {
	    box-sizing: inherit;
	}
	.container {
	    margin: 0 auto;
	    width: 80%;
	    max-width: 1200px;
	}
	.row {
		width: 100%;
	}
	.row:after {
	    content: "";
	    display: table;
	    clear: both;
	}
	.column {
		width: 100%;
		float: left;
		padding: 10px;
	}
	.column.one-half {
		width: 50%;
	}
	.column.one-third {
		width: 33.3%;
	}
	.column.two-third {
		width: 66.6%;
	}
	.column.one-fourth {
		width: 25%;
	}
	.column.three-fourth {
		width: 75%;
	}
	.column.one-sixth {
		width: 16.6%;
	}
	.column.one-eighth {
		width: 12.5%;
	}
	.column.three-eighth {
		width: 37.5%;
	}
	.column.five-eighth {
		width: 62.5%;
	}
}
/* HEIGHT CLASSES FOR ROWS WITH MAP CONTAINERS */
/**/
.height-100 {
	height: 100px;
}
.height-150 {
	height: 150px;
}
.height-200 {
	height: 200px;
}
.height-250 {
	height: 250px;
}
.height-300 {
	height: 300px;
}
.height-400 {
	height: 400px;
}
.height-500 {
	height: 500px;
}
.height-600 {
	height: 600px;
}
.height-700 {
	height: 700px;
}
.height-800 {
	height: 800px;
}

/* ===== BASIC PAGE ELEMENTS ======================================= */

body {
	background-image: url('/img/food.png');
	background-attachment: fixed;
}/*
main {
	width: 90%;
	margin: 0 auto;	
}*/
header {
	background-color: #fafafa;
	text-align: center;
	margin-bottom: 20px
}
footer {
	background-color: rgba(45,45,45,0.7);
	color: #fff;
	padding: 10px;
	clear: both;
	margin-top: 20px;
}
/* ===== TYPOGRAPHY / TEXT ========================================= */

.small-text {
	font-size: .8em;
}
.large-text {
	font-size: 1.5em;
}
.align-right {
	text-align: right;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	text-decoration: none;
	color: inherit;
} 

h1.title {
	font-family: 'Pacifico', cursive;
	font-size: 40px;
	margin-top: 0;
}
h2.title {
	font-family: 'Pacifico', cursive;
	font-size: 30px;
	color: #ff7c00;
}
h1 {
	color: #268e00;
}
h1,
h2,
h3 {
	font-family: 'Bree Serif', serif;
}
p {
	font-family: 'Open Sans', sans-serif;
}
@media screen and (max-width:400px) {
	p {
		font-size: .9em;
	}
}
@media screen and (max-width:715px) {
		
	.large-text {
		font-size: 1.2em;
	}
}

a {
	text-decoration: none;
	color: inherit;
}

/* ===== HELPERS =================================================== */

.content-wrapper {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}
.subtitle {
	font-style: italic;
	color: #6f6d73;
	font-weight: lighter;
	line-height: .8em;
	margin-bottom: 10px;
}
.white-box {
	background-color: rgba(255,255,255,.95);
	padding: 20px;
	margin: 10px 0;
}
.float-right {
	float: right;
}
.float-left {
	float: left;
}
.clear {
	clear: both;
}
.hidden {
	display: none;
}
.visible {
	display: block;
}
.center-element {
	display: block !important;
	margin: 0 auto;
}
.center-text {
	text-align: center;
}
.center-vert {
	vertical-align: -40%;
}
.center-vert-margin {
	margin-top: 20%;
}
.sub-vert {
	vertical-align: sub;
}
.bottom-border {
	border-bottom: 10px solid #fafafa;
}
.bottom-border.light {
	border-bottom: 2px solid #fafafa;
}
.bottom-border.dark {
	border-bottom: 2px solid #DFDDDF;
}
.texture-bar {
	width: 100%;
	height: 25px;
}
.pinstripe {
	background-image: url('/img/patterns/pinstripe.png');
}
.white-carbon {
	background-image: url('/img/patterns/white_carbon.png');
}
.red-text {
	color: red;
}
.green-text {
	color: #268e00;
}
.gray-text {
	color: #e0e0e0;
}
.highlight {
	background-color: #fff;
}
.bold {
	font-weight: bold;
}
.prof {
	border-radius: 50%;
	overflow: hidden;
	width: 100%;
	margin-right: 10px;
}
.inline {
	display: inline;
}
.block {
	display: block;
}
.food-background {
	background-image: url('/img/meal.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.image-overlay-bar {
	padding: 100px 0 100px 0;
	text-align: center;
	/*color: #fff;*/
}
.image-overlay-bar.orange {
	background-color: rgba(255,124,0,.5);
}
.image-overlay-bar.white {
	background-color: rgba(255,255,255,.8);
}
@media screen and (max-width: 450px) {
	.prof {
		width: 100px;
	}
}
@media screen and (max-width: 750px) {

	.visible {
		display: none;
	}
}

/* ===== LISTS ===================================================== */
ul {
	list-style: none;
	text-indent: 0;
	padding: 0;
	margin: 0;
	margin-bottom: 10px;
}
li {
	text-indent: none;
}
.review-checkboxes li {
	display: inline;
	padding: 3px;

}

/* ===== FORMS ===================================================== */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
	padding: 10px;
	border-radius: 5px;
	background-color: #fff;
	border: 3px solid #dfdddf;
	width: 50%;
	margin-bottom: 5px;
	height: 50px;
	font-family: 'Open Sans', sans-serif;
}
input[type="email"] .large ,
input[type="number"] .large ,
input[type="search"] .large ,
input[type="text"] .large ,
input[type="tel"] .large ,
input[type="url"] .large ,
input[type="password"] .large ,
textarea .large ,
select .large {
	padding: 20px;
	border-radius: 10px;
}


/* == MEDIA QUERIES == */
@media screen and (min-width:450px) {
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea {
		width: 50%;
	}
}
@media screen and (min-width:900px) {
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea {
		width: 30%;
	}
}
input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}


/* ===== COLORS ==================================================== */


/* ===== BUTTONS =================================================== */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	height: 50px;
	display: inline-block;
	padding: 0 30px;
	line-height: 50px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	background-color: #fff;
	border-radius: 10px;
	font-size: .9em;
	margin: 10px 0;
	font-family: 'Bree Serif', serif;
	color: #FF7c00;
	box-shadow: 0 2px 0 0 #ff9d50;
}
.button-min {
	height: 50px;
	display: inline-block;
	padding: 0 30px;
	line-height: 50px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: none;
	font-size: .9em;
	background-color: none;
	margin: 10px 0;
	border: 3px solid #268e00;
	/*padding: 15px 20px;*/
	color: #268e00;
	font-family: 'Bree Serif', serif;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: #fafafa;
}
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background-color: #fff;
	box-shadow: none;
	margin: 12px 0 8px 0;
}/*
.button.large,
button.large,
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large {
	width: 100%;
}*/

/* ===== MEDIA QUERIES ============================================= */

/* screen sizes 500px and up */
@media screen and (min-width:750px) {
    .filtering-options {
    	float: right;
    	width: 30%;
    	padding: 10px;
    	margin-left: 20px;
    }
    .restaurant-list {
    	float: left;
    	width: 65%;
    }
    .map-review-display {
    	width: 150px;
		height: 125px;
		float:left;
    }
    .review-view-box {
    	width: 100%;
    	float: none;
		background-color: #fafafa;

    }
    .review-view-box p {
    	width: 100%;
    	float: none;
    	font-size: 12px;
    }

}
/* screen sizes less than 600px wide */
@media screen and (max-width:600px) {
	.view-box {
		float: none;
		width: 100%;
	}
}






















/* ==== OLD =========== */
.thumb {
	padding-right: 10px;
}
.featured-thumb {
	width: 25%;
	float: left;
	margin: 0px 10px 10px 10px;
}

/*.restaurant-card {
	padding: 0 30px 30px 20px;
	background-color: #fff;
	border: 1px solid #fafafa;
	border-radius: 5px;
	margin-top: 10px;
	clear: both;
}*/
.more-arrow {
	font-size: 40px;
	margin-top: 15%;
}
.more-arrow a {
	text-decoration: none;
	color: #e0e0e0;
}

textarea {
	width: 90%;
	height: 75px;
	max-width: 450px;
}