/* --- GLOBAL --- */

html,body { height:100%; background-color: white; margin: 0; padding: 0; font-size: 1em; font-family: 'Karla', sans-serif; color: #231f20; }
div { height: auto; }
img { height: auto; }
.indent { padding-left: 149px; }
a { text-decoration: none;}
p { display: inline-block; font-size: 1.40em; line-height: 1.4em; padding-bottom: 20px; font-weight: 100; 
    margin:0; background-color: white;  }
ul {margin: 0; padding: 20px 0 20px 1em; color: #4769b2}
li {padding: 0 0 0 0; }
li span {color: #231f20;}

/* --- FONTS --- */

h1 { font-size: 1.8em; line-height: 1.3em; background-color: white; font-weight: 100; border-bottom: #4769b2 solid 2px; padding-bottom: 20px; margin: 0;}
h2 { font-size: 1.45em; line-height: 1.45em; border-bottom: #4769b2 solid 2px; padding-bottom: 20px; margin: 0; background-color: white; font-weight: 100; }
h3 { font-size: 1.1em; font-weight: 100; line-height: 0em; font-weight: 100;  letter-spacing: 0.05em}
h4 { font-size: 1em; line-height: 1.5em; border-bottom: #4769b2 solid 2px; padding-bottom: 6%; margin: 0; background-color: white; font-weight: 100;  }
h5 { font-size: 1em; line-height: 1.5em; border-bottom: #4769b2 solid 2px; padding-bottom: 6%; margin: 0; background-color: white; font-weight: 100;  }
h6 { font-size: 1em; line-height: 1.5em; border-bottom: #4769b2 solid 2px; padding-bottom: 6%; margin: 0; background-color: white; font-weight: 100;  }

    
/* --- CONTAINER --- */

#container { width: 100%; max-width: 1462px; margin: auto; border: 0px solid; }
#container.logo img { margin-top: 50px; width: 286px; margin-left: 37px; }


/* --- MENU --- */	
  
#menubar { width: 100%; background-color: #231f20; height: 44px; margin-top: 40px; color: white; display: flex; justify-content: center;  align-items: center; font-size: 1.2em; }
#menuitem { display: inline; padding-right: 13px; margin: 0}
#menuitem a { text-decoration: none; color: white; }
.menudivide { padding-left: 14px; border-left: #4769b2 solid 2px; }
#menumobile { width: 100%; background-color: #231f20; height: 44px; margin-top: 40px; color: white; justify-content: center;  align-items: center; display: none; font-size: 1.2em;}
#menuitem img {margin: 0 0 0 10; height: 0.8em;}	

/* --- MOBILE MENU --- */	

#mobilemenu { width: 100%; background-color: #231f20; height: 44px; margin-top: 40px; color: white; justify-content: center;  align-items: center; display: none; font-size: 1.2em; }
#mobilemenu:hover {cursor: pointer; }
#mobilemenulist {position: absolute; width: 100%; z-index: 1; display: none; transition-duration: 0.5s; }
#mobilemenuitem { width: 100%; height: 44px; color: white; background-color: #4769b2; justify-content: center;  align-items: center; display: flex; font-size: 1.2em; border-top: 2px solid white; transition-duration: 0.5s;}
#rotate {transform: rotate(0deg); transition-duration: 0.4s; }

/* --- MAIN FRAME --- */		
			
#mainframe { margin-top: 80px; margin-left: 149px; margin-right: 149px; max-width: 1164px; position: relative; display: block; border: 0px dotted; padding-bottom: 8em; }

/* --- HOMEPAGE --- */
			
#homebox { height: 698px; border: 0px solid; width: 46%; max-width: 540px; display: inline-block; position: relative; overflow: hidden; }
#homebox.left { margin-right: 8%; }
#homebox.left span { position: absolute; top: 0; border-bottom: 26px white solid; z-index: 2;}
#homebox.left img { max-height: 540px; position: absolute; bottom: 0; right: 0; }
#homebox.right span { position: absolute;  bottom: 0; border-top: 20px white solid; z-index: 2;}
#homebox.right img { max-height: 540px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); }

/* --- ABOUT --- */
			
#aboutbox { height: 810px; border: 0px solid; width: 46%; max-width: 540px; display: inline-block; position: relative; overflow: hidden; vertical-align: top;}
#aboutbox.left { margin-right: 8%; }
#aboutbox.left span { position: relative; }
#aboutbox.left img { width: 110%; padding-top: 4em;}
#aboutbox h2.bottom { position: absolute; bottom: 0; border-top: 40px white solid; z-index: 2; }
#aboutbox.right span { position: absolute;  bottom: 0;  }
#aboutbox.right img { max-height: 810px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); }


/* --- COMMERCIAL AND RESIDENTIAL --- */

#commercial { display: inline-block; position: relative; width: 29%; margin-left: 4%; margin-bottom: 4%; background-color: #4769b2; border: solid 0px; }
#commercial img { width: 100%; border: 0; opacity: 100; transition: all 0.5s; }
#commercial:hover img { opacity: 0; transition: all 0.5s; }
#commercial span { opacity: 0; transition: all 0.7s; line-height: 1.3em}
#commercial:hover span { opacity: 100; transition: all 0.7s; }
.center { text-align: center; width: 90%; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; font-size: 1.3em; padding: 20px;}
.title {vertical-align: top; text-align: left; background-color: white!important;}
#leftpull {position: absolute; left:-4%; padding-bottom: 4em;}

/* --- AVAILABLE PROPERTIES --- */

#available h1 { font-size: 1.8em; line-height: 1.3em; background-color: white; font-weight: 100; border-bottom: 0px; margin-bottom: 0; }
#blueline { border-bottom: #4769b2 solid 2px; width: 50%; height: 2px; margin-bottom: 32px;}
#available {width: 47% ; display: inline-block; position: relative; vertical-align: top;}
#available img {width: 100%; margin-bottom: 1em; margin-top: 3em}
#available.left {margin-right: 6%;}
#available a { text-decoration: none; font-weight: bold; color: #4769b2; font-size: 1.1em;}
.divTable { display: table; border-collapse: collapse; }
.divTableRow { display: table-row; }
.divTableCell { display: table-cell; padding-right: 15px; }

/* --- CONTACT --- */
			
#contact { border: 0px solid; width: 45%; display: inline-block; position: relative; vertical-align: top;}
#contact.left { margin-right: 8%; }
#contact h2 {margin-bottom: 1.2em;}
.mapcontainer { position: relative; overflow: hidden; width: 100%; height: 100px; padding-top: 56.25%; margin-top: 2em; }
#form {width: 100%; border: 0px solid;}
#formsection { font-family: 'Karla', sans-serif; font-size: 1.45em; border: none; background-color: #f2f2f4; padding: 10px 10px 10px 0.8em; color: #231f20; display: inline; margin: 0; width: 100%; margin-bottom: 0.8em;}
input[type=submit] { font-family: 'Karla', sans-serif; font-size: 1.45em; color: white; background-color: #4769b2; border: none; padding: 10px 25px 10px 25px; position: absolute; right: 0; bottom: -1.4em; margin: 0.8em 0 0 0; 
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
input:hover {cursor: pointer; }

textarea { height:400px; }


/* --- MAP IFRAME --- */
.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

    
/* --- SCREEN SIZES --- */    

@media screen and (max-width: 1200px) { 
	#commercial { width: 46%; }
}
    
@media screen and (max-width: 920px) {

	#menubar { display: none;}
	#menumobile { display: flex;}
	#mobilemenu {display: flex;}
	#homebox { height: initial; width: 100%; max-width: 100%; }
	#homebox.left { margin-right: 0%; }
	#homebox.left span { position: relative; }
	#homebox.left img { position: relative; width: 100%; max-height: initial; margin-top: 40px; margin-bottom: 40px;}
	#homebox.right span { position: relative; margin-bottom: 26px; }
	#homebox.right img { position: relative; width: 100%; max-height: initial; margin-top: 40px; }
	#aboutbox { height: initial; width: 100%; max-width: 100%; }
	#aboutbox.left { margin-right: 0%; }
	#aboutbox.left span { position: relative; }
	#aboutbox.left img { position: relative; width: 100%; max-width: 100%; min-height: auto; max-height: initial; padding-top: 3em; margin-bottom: 40px;}
	#aboutbox h2.bottom { position: relative; bottom: 0; border-top: 0px white solid; z-index: 2; }
	#aboutbox.right span { position: relative; margin-bottom: 26px; }
	#aboutbox.right img { position: relative; width: 100%; max-height: initial; margin-top: 40px; }


	 #container { width: 86%; max-width: 2000px; }
	 #container.logo img { margin-top: 40px; max-width: 286px; margin-left: 0px; width: 80%; }
	 .indent { padding-left: 0px; }
	 #mainframe { margin-right: 0px; margin-left: 0px; margin-top: 60px;}
}

@media (max-width: 500px) {
	html { font-size: 0.8em; }
	#mainframe { margin-top: 40px;}
	#commercial { width: 100%; margin-left: 0%;}
	#leftpull {position: absolute; left:0%;}
	#available {width: 100% ; display: inline-block; position: relative; vertical-align: top;}
	#contact { border: 0px solid; width: 100%; display: inline-block; position: relative; vertical-align: top;}
	#contact.left { margin-right: 0; }
	.mapcontainer { margin-bottom: 3em; }
	textarea { height: 200px; }
}