/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
* {
box-sizing: border-box;
}

html {
font-size: 1em;
line-height: 1.4;
}

body {
border-top: 3px solid #25378c;
background-color: rgba(122, 125, 125, 0.06);
background-image: url('../img/BackgroundImageBody.jpg');
position: relative;
}

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

fieldset {
border: 0;
margin: 0;
padding: 0;
}

textarea {
resize: vertical;
}

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

.container {
width: 100%;
margin: 20px auto;
overflow: hidden;
position: relative;
max-width: 960px;
}

ul {
padding: 0;
margin: 0;
}

.block {
display: block;
}

.uppercase {
text-transform: uppercase;
}

h1 {
	color: #2d2e2e;
}
h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: "Oswald", sans-serif;
font-weight: 400;
}

p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}

h1 {
text-transform: uppercase;
text-align: center;
font-size: 2.5em;
margin: 10px 0 30px 0;
}

button {
display: block;
border: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


/* ==========================================================================
HEADER
========================================================================== */

header .mainlogo img {
width: 80%;
display: block;
margin: 5px auto 10px;
}

nav {
width: 90%;
margin: 0 auto 15px;
}

nav ul#mainMenu {
padding: 0;
list-style-type: none;
display: none;
}

nav ul#mainMenu.open {
display: block;
}

nav ul#mainMenu li {
border-bottom: 1px solid #25378c;
}

nav ul#mainMenu li:last-child {
border-bottom: none;
}


nav ul#mainMenu a {
text-decoration: none;
color: #2d2e2e;
padding: 10px;
display: block;
cursor: pointer;
text-transform: uppercase;
}

nav ul#mainMenu a:hover {
color: white;
background-color: #1e2c70;
}

nav button#mobileMenuTrigger {
padding: 10px;
width: 100%;
background-color: #25378c;
text-transform: uppercase;
cursor: pointer;
font-family: 'Oswald', sans-serif;
letter-spacing: 2px;
color: white;
}

nav button#mobileMenuTrigger:hover {
color: white;
background-color: #1e2c70;
}

nav button.menu::before {
content: "\f0c9";
font-family: FontAwesome;
margin-right: 5px;
color: white;
}

/* ==========================================================================
JUMBOTRON
========================================================================== */

.jumboTron {
	background-image: url('../img/Header.jpg');
	background-size: cover;
	position: relative;
	padding: 20px;
}

.jumboTron .jumboTronInfo  {
	color: white;

}

.jumboTron .jumboTronInfo p {
	font-weight: 100;
	letter-spacing: 1px;
	font-family: 'Oswald', sans-serif;
	margin-bottom: 30px;
	margin:  0 auto;
}

.jumboTron .jumboTronInfo a {
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	width: 150px;
	max-width: 150px;
	text-align: center;
	color: white;
	padding: 10px;
	margin:  0 auto;
	background-color: #25378c;
	margin-top: 10px;
	text-align: center;

}

.jumboTron .jumboTronInfo a:hover {
	background-color: #1e2c70;
}

.jumboTron::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,.5);
}

.jumboTron h1 {
	color: white;
	text-shadow: 1px 1px 1px #000000;
	text-align: center;
	position: relative;
	font-size: 1.5em;
	text-transform: capitalize;
	font-weight: 200;
	letter-spacing: 2px;
	font-size: 3em;
}


/* ==========================================================================
OUR PROPERTY
========================================================================== */

.ourProperty {
	position: relative;
}

.ourProperty .propertyPhoto {
	background-image: url('../img/OurProperty.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 300px;
}


.ourProperty .informationalInfo h2 {
	display: none;
}

.ourProperty .informationalInfo a {
	display: block;
	background-color: #7e735b;
	width: 100px;
	padding: 10px;
	color: white;
	text-decoration: none;
	text-align: center;
	margin: 10px auto;
	text-transform: uppercase;
}
/* ==========================================================================
PHOTOGALLERY
========================================================================== */

.photoGallery img {
	width: 100%;
	height: auto;
}




/* ==========================================================================
FAQ
========================================================================== */

.faqContainer {
width: 90%;
margin: 10px auto;
}

.faq {
    position: relative;
}

button.accordion {
width: 100%;
background-color: #25378c;
color:  white;
padding: 10px;
text-align: left;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
}


div.panel {
padding: 10px;
display: none;
color: #2d2e2e;
background-color: #ffffff63;
}

div.panel p {
margin: 0;
}



/* ==========================================================================
RESIDENCE
========================================================================== */
.residents button a {
	color: white;
	text-decoration: none;
}

button.ctaButton {
display: block;
width: 90%;
margin: 40px auto;
padding: 10px;
background-color: #25378c;
color: white;
max-width: 300px;
font-family: 'Oswald', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}

button.ctaButton:hover {
background-color: #1e2c70;

color: white;
}

.residentPolicy a {
display: block;
width: 90%;
background-color: #25378c;
color: white;
padding: 10px;
text-decoration: none;
margin: 10px auto;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 300;
}



.residentPolicy a.application::before,
.residentPolicy a.policyAgreement::before {
content: "\f0ed";
font-family: FontAwesome;
margin-right: 5px;
color: white;
}



/* ==========================================================================
FACEBOOK
========================================================================== */
.socialFacebook {
	display: none;
}

/* ==========================================================================
CONTACT US
========================================================================== */

#contactUs {
background-image: url('../img/Header2.jpg');
background-size: cover;
padding: 20px;
text-align: center;
}

#contactUs .contact h6 span.contactUsFont {
font-size: 2em;
}


.contact {
background: rgba(255, 255, 255, 0.77);
padding: 10px;
text-transform: uppercase;
max-width: 600px;
margin: 0 auto;
}

.contact h3 {
font-family: 'Lato', sans-serif;
font-size: .8em;
}

.contact span.block {
display: block;
}

.contact h4 {
	margin: 5px 0;
}

.contact i {
font-size: 1.5em;
color: #25378c;
}


#contactUs .contact h6 {
	margin: 5px 0;
}

#contactUs .contact h6 a {
	color: black;
	text-decoration: none;
}



/* =========================================================================FOOTER
========================================================================== */

footer {
position: relative;
}

footer img {
	width: 70%;
	margin: 0 auto;
	display: block;
}

footer .copyright p {
	width: 90%;
	margin: 0 auto;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.12);
	text-align: center;
	font-weight: 200;
	color: #7a7d7d;
	font-size: .8em;
}

footer .copyright p:before {
	content: "\f1f9";
	font-family: FontAwesome;
	color: #2d2e2e;
	margin-right: 5px;
}

footer .copyright .icons img {
	display: block;
	float: left;
	width: 50%;
	padding: 2px;
}

footer .copyright {
	position: relative;
}

footer .copyright a.returnToTopIcon {
	position: fixed;
	display: none;
	text-decoration: none;
	background-color: #25378c;
	color: white;
	padding: 15px;
	text-align: center;
	bottom: 7em;
	right: 2em;
	animation: fadein 2s;
}

footer .copyright a.returnToTopIcon:hover {
	background-color: #1e2c70;
}
/* ==========================================================================
Media Queries
========================================================================== */

/* Mobile first queries */

/* Mobile */
@media (min-width: 320px) {
}

/* Larger than phablet */
@media (min-width: 550px) {

header nav {
	width: 70%;
}

.container {
width: 90%;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

.clear {
clear: both;
}

.jumboTron h4 {
	margin-bottom: 0;
}
.photoGallery img {
	width: 50%;
	float: left;
	padding: 5px;
}

.jumboTron .jumboTronInfo p {
	margin-bottom: 20px;
}

.contact h3 {
font-size: 1.5em;
}

.contact h4 {
font-size: 2em;
margin-bottom: 0;
}

.contact h6 {
font-size: 1.2em;
margin: 10px;
}

button.accordion::before {
content: "\f059";
font-family: FontAwesome;
margin-right: 10px;
}

button.accordion::after {
content: "\f061";
color: white;
font-weight: bold;
font-family: FontAwesome;
float: right;
}


button.accordion.active::after {
content: "\f063";
}

.residents .ctaButton {
width: 42%;
margin: 0 0 30px 0;
}

.residents .ctaButton.leftButton {
float: left;
}

.residents .ctaButton.rightButton {
float: right;
}

.contact i {
	font-size: 2em;
}
}

/* Larger than tablet */
@media (min-width: 750px) {

header .mainlogo {
width: 30%;
float: left;
}

header .mainlogo img {
	width: 100%;
}

header nav {
	float: right;
	width: 70%;
	margin: 0;
	border: none;
}


button#mobileMenuTrigger {
display: none;
}

nav ul#mainMenu {
display: block;
float: right;
background-color: transparent;
}

nav ul#mainMenu li {
float: left;
border: none;
}


nav ul#mainMenu li a {
font-size: .9em;
margin-top: 33px;
color: #2d2e2e;
}

.jumboTron {
	background-position: 50%;
}

.jumboTron h1 {
	font-size: 3em;
	text-align: left;
	margin-bottom: 10px;
	font-variant: small-caps;
	letter-spacing: 4px;
}

.jumboTron .jumboTronInfo p {
	width: 80%;
	text-align: left;
	margin: 10px 0 20px 0;
	font-weight: 100;
}

.jumboTron .jumboTronInfo a {
	margin: 0;
}


.photoGallery img {
	width: 25%;
	float: left;
}

.faqLeft{
	width: 70%;
	float: left;
}

.residentPolicy {
	width: 30%;
	float: right;
}

.residentPolicy a {
	margin-top: 0;
	width: 100%;
	color: white;
}

.faqContainer {
	margin: 0 0 10px 0;
}

.faq::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 130%;
    top: 0;
    transform: skewY(-17deg);
    background-color: rgba(38, 56, 142, 0.06);

}

.socialFacebook {
	display: block;
}

.socialFacebook .facebookFeed {
	margin: 0 13%;
}


.contact {
	border: 2px solid #25378c;
}

#contactUs {
	padding: 40px;
}

#contactUs .contact h6 a.email {
	color: #25378c;
}
}

/* Larger than desktop */
@media (min-width: 1000px) {

.jumboTron {
	height: 400px;
	}

.socialFacebook .facebookFeed {
	margin: 0 21%;
}


.jumboTron h1 {
	text-transform: capitalize;
	font-weight: 300;
	letter-spacing: 2px;
	text-align: left;
}

.jumboTron .jumboTronInfo p {
	max-width: 50%;
	margin: 20px 0 30px 40px;
	line-height: 25px;



nav ul#mainMenu li a {
margin-top: 28px;
font-size: 1.1em;
}


/* Larger than Desktop HD */
@media (min-width: 1200px) {

.socialFacebook .facebookFeed {
	margin: 0 22%;
}

}


@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {

}

/* ==========================================================================
Helper classes
========================================================================== */

.hidden {
display: none !important;
visibility: hidden;
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

.invisible {
visibility: hidden;
}



/* ==========================================================================
Print styles
========================================================================== */

@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: " (" attr(href) ")";
}

abbr[title]:after {
content: " (" attr(title) ")";
}

a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}