@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

/*=========================================================================
   Browse Happy prompt
   ==========================================================================*/

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==================================================================
   base styles
   ============================================================= */

* {margin: 0; padding: 0;}
body {
    font-family: Arial, sans-serif;
    font-size: 100%;
    line-height: 1.4em;
    background-color: #DBC04F;
}
img {max-width: 100%; height: auto;}
#wrapper {margin: 0 auto; width: 100%; max-width: 1200px; height: auto; position: relative; background-color: #DBC04F;}

header {width: 100%; height: auto; position: relative; background-image: url(../images/sign320.jpg); background-repeat: no-repeat; background-size: contain;  margin: 0 auto; padding-top: 52%; z-index: 0;}

ul {
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
}
li {
	padding:0;
	margin:0;
}
nav {position: absolute;
    top: .3em;
    right: 0;
    width: 100%;
    height: 10%;
	text-align:center;
	overflow:hidden;
	background:none;
    padding: 1.5% 0 1% 0;
}
nav ul {
		opacity:0;
		visibility:hidden;
	}

nav ul li {
	display:inline;
}

nav ul li a {
	display:inline;
	padding: 1em 3em;
	text-decoration:none;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	font-size:16px;
}
nav ul li a:hover {
	color: #fff;
}
/*styling open close button*/
.button {
	display:inline;
	position:absolute;
	right: 2%;
	top: 0;
	z-index: 999;
	font-size: 30px;
}
.button a {
	text-decoration:none;
}
.btn-open:after {
	color: #0faef8;
	content:"\f0c9";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
	color:#DBC04F;
}
.btn-close:after {
	color:#0faef8;
	content:"\f00d";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
	color: #DBC04F;
}
/*overlay*/
.overlay {
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	background: #393b6e;
	overflow: auto;
	z-index: 99;
}
.wrap {
	color:#a4a7cb;
	text-align:center;
	max-width:90%;
	margin:0 auto;
}
.wrap ul.wrap-nav {
	text-transform:capitalize;
	padding: 50px 0px 20px;
}
.wrap ul.wrap-nav li {
	font-size: 1.5em;
	display: inline-block;
	vertical-align: top;
	width: 60%;
	position: relative;
}
.wrap ul.wrap-nav li a {
	color: #a4a7cb;
	display: block;
	padding: 10% 0;
	text-decoration:none;
	transition-property: all .2s linear 0s;
	-moz-transition: all .2s linear 0s;
	-webkit-transition: all .2s linear 0s;
	-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
	color: #f0f0f0;
}

.social {
		color:#a4a7cb;
		font-size:25px;
		padding:15px 0;
	}

.social-icon {
		width:100%;
		height:50px;
		background:#DBC04F;
		color:#393b6e;
		display:block;
		margin:5px 0;
	}

.social-icon:hover {
	background:#a4a7cb;
	color:#f0f0f0;
}
.social-icon i {
	margin-top: 12px;
}

.pipe {display: none;}

#address_bar {position: absolute; top: .15%; left: 2%; font: bold .85em Arial, sans-serif; color: #a4a7cb;}
#address_bar span {display: none;}

address {width: 100%; height: 1.3em; font: normal 1.2em 'Fjalla One', Impact, Arial, sans-serif; text-align: center; background-color: #393b6e; padding: .2em 0;}
#phone {font-size: 1.1em; margin: 0 4%; float: left;}
#phone a {color: #a4a7cb; text-decoration: none;}
#phone a:hover {color: #0faef8;}
address span {display: none;}
.fb-like {float: right; margin-right: 4%; top: -4%;}

#bbq {font: normal .85em 'Fjalla One', Impact, Arial, sans-serif; text-align: center; background-color: #111; padding: 2% 0;}
.blink {animation: blinker 1s linear infinite;}
#bbq a {color: #a7111d; text-decoration: none;}
#bbq a:hover {color: #0faef8;}
#bbq a span {color: #fed827;}

@keyframes blinker {
  50% {
    color: #ffb3c7;
  }
}

iframe {width: 90%; height: 315px; margin: 5% 5% 0 5%;}
#interiors {width: 90%; margin: 5%;}
#interiors img {width: 90%; border: solid 8px #fff; margin: 1% 0 1% 1.6%;}
#description h2 {color: #393b6e; font-family: 'Fjalla One', Arial, sans-serif; font-size: 1.75em; margin: 4% 0; text-align: center; line-height: 1.1em;}
#description p {font: normal .9em "Times New Roman", serif; text-align: justify; margin: 4% 0;}

#location {background-color: #393b6e; padding: 4% 0;}
#map {width: 90%; margin: 0 5%;}
#location p {font: normal .9em "Times New Roman", serif; text-align: justify; color: #DBC04F; margin: 3% 5%; line-height: 1.2;}
#location h2, h3, h4 {font-family: 'Fjalla One', sans-serif; text-align: center;}
#location h2 {font-size: 1.65em; color: #fff; margin: 7% 0 3% 0;}
#location h3 {color: #a4a7cb; font-size: 1.25em; line-height: 1.25em;}
#location h4 {font-size: 1.15em; color: #DBC04F; margin: 6% 0 -2% 0;}

#history {background-color: #DBC04F; padding-bottom: 2%;}
#history h3 {font-size: 1.5em; font-family: 'Fjalla One', sans-serif; color: #fff; margin: 6% 0 0 0;}
#history p {font: normal .9em "Times New Roman", serif; text-align: justify; color: #000; margin: 3% 5%;}

footer {clear: both; width: 96%; background-color: #393b6e; float: left; padding: 2%;}
#social_media {float: left; width: 80%; margin: 2% 10%;}
footer a {float: left; margin: 2% 6%; opacity: .6;}
footer a:hover {opacity: 1;}
footer p {font-size: .8em; color: #DBC04F; text-align: left; margin-left: 1%;}
footer span {float: right;}
footer span a {opacity: 1; color: #DBC04F; float: none; margin: 0;}
footer span a:hover {color: #fff;}

#plans {margin: 5% 5% 0 5%;}
#plans h2 {font: normal 1.15em 'Fjalla One', sans-serif; text-align: center; color: #fff; margin: 2% 0;}
#plans p {font-size: .75em; text-align: center; margin: -2% 0 0 0;}  
#plans h3 {font: normal 1.1em 'Fjalla One', sans-serif; color: #393b6e; padding-bottom: 5%}
#fp1 {background-image: url(../images/McMillin-Floor-1small.jpg); background-repeat: no-repeat; background-size: 100%; padding-top: 92%;}
#fp2 {background-image: url(../images/McMillin-Floor-2small.jpg); background-repeat: no-repeat; background-size: 100%; padding-top: 92%;}

/* ==========================================================================
   Media Queries   ========================================================================== */

@media screen and (min-width: 252px) {
    footer a {margin: 2% 7%;}
}

@media screen and (min-width: 270px) {
    footer a {margin: 2% 8%;}
    #plans h2 {font-size: 1.25em;}
}

@media screen and (min-width: 300px) {
    #bbq {font-size: .95em;}
    footer a {margin: 2% 8.5%;}
}

@media screen and (min-width: 320px) {
    #address_bar span {display: inline;}
    header {background-image: url(../images/sign480.jpg); background-repeat: no-repeat; background-size: contain; padding-top: 44%;} 
    #interiors img {margin-left: 2%;}
    #bbq {font-size: 1em;}
    footer a {margin: 2% 9%;}
    #first {width: 46%; float: left;}
    #second {width: 46%; float: left; margin-left: 8%;}
    #fp1 {background-image: url(../images/McMillin-Floor-1xsmall.jpg);}
    #fp2 {width: 100%; height: auto; background-image: url(../images/McMillin-Floor-2xsmall.jpg); background-repeat: no-repeat;}
    h6 {color: #DBC04F;}
}

@media screen and (min-width: 346px) {
    #bbq {width: 92%; margin: 2% auto; border-radius: 10px;}
    footer a {margin: 2% 10%;}
}

@media screen and (min-width: 364px) {
    #location h2 {margin: 7% 0 2% 0;}
    address {height: 1.5em; padding-bottom: 1%;}
    #phone {font-size: 1.3em;}
    .fb-like {margin-right: 4%; top: 1%;}
}

@media screen and (min-width: 385px) {
    #interiors img {margin-left: 2.4%;}
    #bbq {width: 84%; border-radius: 16px;}
    footer a {margin: 2% 10%;}
}

@media screen and (min-width: 400px) {
    footer {padding-bottom: 1%;}
    #fp1 {background-image: url(../images/McMillin-Floor-1small.jpg);}
    #fp2 {width: 100%; height: auto; background-image: url(../images/McMillin-Floor-2small.jpg); background-repeat: no-repeat;}
}

@media screen and (min-width: 430px) {
    #interiors img {margin-left: 2.6%;}
    #bbq {font-size: 1.1em; border-radius: 20px;}
}

@media screen and (min-width: 440px) {
    address {height: 1.7em;}
    #phone {font-size: 1.4em;}
    .fb-like {margin-right: 4%; top: 6%;}
}

@media screen and (min-width: 453px) {
    footer a {margin: 2% 11%;}
}
    
@media screen and (min-width: 463px) {
    .button {display: none;}
    nav {top: 1%; margin: 0; font: bold 1em Arial, sans-serif; padding: 0; text-align: left;}
    nav ul {float: left; width: 74%; height: 1.4em; margin: 0 2% 0 20%; padding-left: 6%; opacity: 1; visibility: visible;}
    nav ul li {float: left; padding: 0 .25em; display: inline-block;}
    nav ul li a {float: left; width: 100%; color: #0faef8; border: 0px; margin: 0; padding: 0; display: inline;}
    nav a:hover {color: #DBC04F;}
    .pipe {display: inline-block; color: #DBC04F; float: left; }
    #address_bar {display: none;}
    address {height: 1.6em; padding: .3em 0 .5% 0;}
    address span {display: inline; color: #DBC04F;}
    #phone {font-size: 1.1em; float: none; display: inline; margin-left: 2%;}
    #bbq {clear: both; font-size: 1.2em;}
    
    .fb-like {float: none; position: relative; top: -620%; left: 40%;}
    #social_media {margin-top: 0;}
}

@media screen and (min-width: 500px) {
    header {background-image: url(../images/sign800.jpg); background-repeat: no-repeat; background-size: contain; padding-top: 43.5%;} 
    nav ul {width: 67%; margin-left: 26%;}
    address {font-size: 1.3em; height: 1.5em; padding-bottom: .5%;}
    #phone {margin-left: 4%;}
    .fb-like {top: -630%; left: 42%;}
    #interiors {margin-top: 2%;}
    #interiors img {margin-left: 2.9%;}
    #plans h2 {font-size: 1.5em;}
    #plans h3 {font-size: 1.35em; padding-bottom: 5%;}
}

@media screen and (min-width: 537px) {
    nav ul {width: 63%; margin-left: 31%;}
    #bbq {width: 20em; margin: 2% auto -3% auto;}
    #location {padding-bottom: 2%;}
    #location h4 {font-size: 1.4em; margin: 4% 0 0 0;}
    #location h2 {font-size: 1.8em; margin: 4% 0 1% 0;}
    #location #par1 {font-size: 1em; margin: 2% 5%;}
    #location p {margin-top: 1%;}
    footer a {margin: 2% 12%;}
}

@media screen and (min-width: 560px) {
    nav ul li a {margin-top: .5%; font-size: 1.1em;}
    nav ul {width: 65%; margin-left: 29%;}
    #interiors img {width: 44%; margin-left: 2%;}
    #interiors p {font-size: 1em; margin: 2.5% 0;}
    #pics {margin-left: -1.4%;}
    #location p {font-size: 1em;}
    #history h3 {margin-top: 4%;}
    #history p {font-size: 1em; line-height: 1.3; margin-top: 2%;}
}

@media screen and (min-width: 565px) {
    address {text-align: left;}
    address span {margin-left: 1%;}
    #phone {margin-left: 1%;}
    .fb-like {top: -102%; left: 0; margin-left: 84.5%;}
}
    
@media screen and (min-width: 600px) {
    nav ul {margin-left: 33%;}    
    #phone {margin-left: 2%;}
    footer a {margin: 2% 12.5%;}
}

@media screen and (min-width: 630px) {
    address {font-size: 1.35em;}
    address span {margin-left: 2%;}
}

@media screen and (min-width: 660px) {
    nav {font-size: 1.2em;}
    nav ul {margin-left: 28%;}    
    address {font-size: 1.4em;}
    #phone {margin-left: 2%;}
    #pics {margin-left: -.5%;}
    .fb-like {top: -106%;}
}
    
@media screen and (min-width: 720px) {
    nav {top: .4%;}
    nav ul {width: 60%; margin-left: 34%;}
    address {font-size: 1.5em;}
    #bbq {padding: 1.4% 0;}
    #map {float: right; width: 50%; margin: 3% 2%;}
    #location #par1 {font-size: 1em; margin: -1% 4%;}
    #location h2 {font-size: 2em; margin: 5% 0 1% 0;}
    #location h4 {margin: 4% 0 1% 0;}    
    footer {width: 98%; padding: 1% 1% 0 1%;}
    footer a {margin: 2% 13%;}
}

@media screen and (min-width: 770px) {
    nav ul {margin-left: 38%;}
    #location {padding-bottom: 1%;}
}

@media screen and (min-width: 800px) {
    address span {margin-left: 2%;}
    #pics {margin-left: 0;}
    #plans h2 {font-size: 1.75em; margin-bottom: 1%;}
    #plans h3 {font-size: 1.6em; padding-bottom: 5%;}
    #fp1 {background-image: url(../images/McMillin-Floor-1med.jpg);}
    #fp2 {width: 100%; height: auto; background-image: url(../images/McMillin-Floor-2med.jpg);}
}

@media screen and (min-width: 825px) {
    header {height: auto; background-image: url(../images/banner_1200.jpg); background-repeat: no-repeat; background-size: contain;}
    nav {font-size: 1.4em;}
    nav ul {margin-left: 33%;}
    iframe {margin: 0 5%;}
    #bbq {margin: 2% auto; padding: 1% 0;}
    #interiors {width: 98%; margin: 0 auto 8% auto;}
    #interiors img {width: 42%; margin: 1% 0 1% 1.2%;}
    #pics {width: 48%; padding-top: 10%;}
    #description {width: 50%; float: right; margin: -43% 2% 0 0;}
    #description p {margin: 2% 0;}
}

@media screen and (min-width: 863px) {
    #interiors {margin-bottom: 4%;}
}

@media screen and (min-width: 880px) {
    nav ul {margin-left: 36%;}
    address {height: 1.6em;}
    #pics {padding-top: 8%;}
    #description {margin-top: -40%;}
    .fb-like {top: -96%;}
    footer a {margin: 2% 14%;}
}

@media screen and (min-width: 940px) {
    nav {font-size: 1.5em;}
}

@media screen and (min-width: 982px) {
    #interiors {margin-bottom: 4%;}
    #pics {width: 50%; padding-top: 6%;}
    #interiors p {margin-left: 2%;}
    #description {margin-top: -37.5%;}
}

@media screen and (min-width: 1000px) {
    nav ul {width: 58%; margin-left: 40%;}
    address {height: 1.5em;}
    .fb-like {top: -100%;}
    #interiors {margin-bottom: 2%;}
}

@media screen and (min-width: 1100px) {
    nav ul {width: 52%; margin-left: 44%;}
    #interiors #pics {padding-top: 4%;}
    #description {margin-top: -35%;}
}

@media screen and (min-width: 1150px) {
    nav ul {width: 50%; margin-left: 47%;}
    #description {margin-top: -34%;}
}

@media screen and (min-width: 1168px) {
    #interiors #pics {width: 54%;}
    #description {width: 46%; margin-top: -34%;}
}

@media screen and (min-width: 1200px) {
    body {background-image: url(../images/sky_bkgd.jpg); background-size: 100%;}
    nav ul {width: 48%; margin-left: 49%;}
    #interiors img {width: 42%; margin: 1% 0 1% 1.2%;}
}