/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


/* Images */
.TopTable:before,
.TopTable:after {
    content: " ";
    display: table;
}
.TopTable:after {
    clear: both;
}
.TopTable {
    *zoom: 1;
}

/* Basic Styles */
body {
	background-color: #ffffff;
}
nav {
	height: 40px;
	width: 100%;
	background: mediumseagreen;
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 1px solid ffb380;
}

nav ul {
	padding: 0;
	margin: 0 auto;
	width: 1000px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 150px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 2px 1px 0px mediumseagreen;
}
nav li a {
	border-right: 1px solid ffb380;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: 	#BE1A12;
}
nav a#pull {
	display: none;
}



* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}
.row:after {
    content: "";
    clear: both;
    display: table;
}

ul.c {list-style-type: square;}


[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}



/*Styles for screen 800px and lower*/
@media screen and (max-width: 900px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: mediumseagreen;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #fff;
	}
}

#three { 
  background-color: white;
  overflow:hidden;
  text-align: left;  
  font-size: 60px;
  font-weight: bold;
  color: #404040 ;
  font-family: Verdana,Tahoma, sans-serif;
  display: block;
  
}

#one2 {
  background-color: white;
  float:left; 
  margin-right:20px;
  width:400px;
  max-height:350px;
  
}

#map {
  width: 98%;
  height: 500px;
  transform-style:preserve-3d;
  transform:perspective(auto) translateZ(-30vw) scale(1.4);
  perspective:1000;  
   margin-left: 2%;
     margin-right: 2%;
   
  
}


.wrapper2 { 
  overflow:hidden;
  
}

.wrapper2 div {
   min-height: 100px;
   padding: 10px;
}


/*For Information Pages*/

.infowrap { 
  overflow:hidden;
  
   }

.infowrap div {
   padding: 1px;
   border: 3px solid WHITE;
   font-size: 25px;
    margin-right:2%;
   margin-left: 2%;
   vertical-align: middle;
   
}
 



#foneinfo {
 background-color: mediumseagreen;
  float:left; 
  font-weight: bold;
  width:47%;
  text-align: left;
  color: Black;
    
}
#ftwoinfo { 
    background-color: Black;
  overflow:hidden;
  font-weight: bold;
  width:47%;
  min-height:auto;
    text-align: left;
	color: mediumseagreen;

    
}
#contactinfo {
 background-color: mediumseagreen;
  float:left;   
  width:47%;
  text-align: left;
  color: Black;
    
}


html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}

.footer {
    background-color:firebrick;
    color: #ffffff;
    text-align: center;
    font-size: 32px;
    padding: 5px;
	margin-top: 5px;
}
#foot { 
  overflow:hidden;
  min-height:auto;
    text-align: center;
}

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    
}

input[type=submit] {
    width: 100%;
    background-color: Black;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: mediumseagreen;
    font-weight: bold;
}

input[type=submit]:hover {
    background-color: mediumseagreen;
      color: Black;
      
}

myform {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    font-weight: bold;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}

/*Win Phone and Below*/
@media only screen and (min-width:1px) and (max-width:768px)  {

    #one2 { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;  
  }
  #foot   {width: auto; float: none; font-size: 16px;}

   #foneinfo {width: auto; float: none;text-align: left;font-size: 17px;}
   #contactinfo {width: auto; float: none;text-align: left;font-size: 17px;}
  #ftwoinfo {width: auto; float: none; text-align: left;font-size: 17px; background-color: Black; color: mediumseagreen}
  #three {margin-left: 20px;}
}




@media only screen and (min-width:769px) and (max-width:1024px) {
   
   
   #one2 { 
    float: left;
    margin-right:0;
    width:50%;
    border:0;  
  }

.infowrap {display: flex;}
  #foneinfo {font-size: 17px; width: 46%; flex:1;}
  #contactinfo {font-size: 17px; width: 46%; flex:1;}
  #ftwoinfo {width: 46%; float: right; font-size: 17px;}
   #three {margin-left: 50px; margin-top: 50px; }
   #map {height: 360px; }
   

    
}

/*wxga tablet to ultrabook*/
@media only screen and (min-width:1025px) and (max-width:1366px) {
    
    #one2 { 
    width: 400px;
  }

#foneinfo {font-size: 20px; width: 46%}
#contactinfo {font-size: 20px; width: 46%}
   #ftwoinfo {width: 46%; float: right; font-size: 20px;}
   #three {margin-top: 60px; margin-left: 100px;}
   .infowrap {display: flex;}
   #map { height: 400px; }
    
}

@media only screen and (min-width:1367px) and (max-width:4000px) {
  #ftwoinfo {width: 46%; float: right; font-size: 20px;}
  #foneinfo {font-size: 20px; width: 46%;}
  #contactinfo {font-size: 20px; width: 46%;}
  #three {margin-top: 70px; margin-left: 1000px;}
  .infowrap {display: flex;}
  #map { height: 400px; }
  
  
    
}


div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 400px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}