body {
	background-color: #434141;
	color: #fff;
	font-size: 12pt;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.08em;
	background-image: url("../img/lupita-background.jpg");
}

body, html {		
	overflow-x: hidden;		
}

p { margin-top: unset; margin-bottom: unset; }

h1, h2, h3, h4 {font-family: 'Permanent Marker', cursive; color: #FCC051;}



p, a {color: #fff; text-decoration: none;}

a h1, a h2, a h3, a h4 {
	text-decoration: none;
}

a:hover h1, a:hover h2, a:hover h3, a:hover h4 {
	text-decoration: underline;
}

h1 {font-size: 50pt; margin: 0 0 24pt 0;}
h2 {font-size: 30pt; margin: 0 0 24pt 0;}
h3 {text-decoration: underline;}
a:hover {text-decoration: none; color: #FCC051!important;}

.regular {font-weight: normal;}
.bold {font-weight: bold;}


@media only screen and (min-width: 992px) {
	.title.overlap {position: relative; left: -100px; width: 450px;}
}







/* header & navigation */
.header {padding: 24pt;}
.logo {width: 150px; max-width: 180px;}
.navi > > span > a  {margin-right: 12pt; font-wight: 900;}

.contact {
    font-size: 0.8em;
}
.social {max-width: 50px;font-size: 35px;position: relative;top: 0px;margin-top: 0px;}


/* main content */
.main-content {padding: 10pt 0;max-width: 800px;margin: auto;}

@media only screen and (max-width: 991px) {
	.main-content {padding: 50px 10px;}

	.social {
		display: block;
		flex-basis: unset;
		flex-grow: unset;
	}
}

/* alerts */
.lu-alert { background-color: #FCC051; padding: 5px 10px; margin-bottom: 24pt;}
.lu-icon {font-size: 35px; max-width: 100px;}


.navi a {
    margin-right: 30px;
}

#opentable {width:230px;margin-top:30%;}

.locations {
    padding-left: 10px;
    padding-right: 10px;
}

@media only screen and (max-width: 991px) {
	.title { margin: 10px }

	.locations img {
		width: 170% !important;
		max-width: 170% !important;
		position: relative;
		left: -35%;
	}

	h1 { font-size: 3em; !important }

	.header {padding: 10px;}

	.navi a {
		display: none;
	}

	.contact {
		flex-basis: unset;
		font-size: 0.7em;
		margin-top: 30px;
	}

	.logo {
		flex-basis: unset;
		width: 100%;
		max-width: 100%;
		margin-top: 15px;
	}

	.logo img {
		height: 50px;
	}

	h2 {
		text-align: center;
	}

	.bookings iframe {
		margin: auto;
		display: block;
	}

	.bookings img {
		display: none;
	}

	.social {
		width: 100%;
		max-width: 100%;
		text-align: center !important;
		margin-top: 12px;
	}

	.half-width-mobile {
		width: 50%;
		flex-basis: unset;
		flex-grow: unset;
	}
}

@media only screen and (max-width: 1100px) {
	.header {
		font-size: 0.9em;
	}
}