* {
  box-sizing: border-box;
}
body {
  /*display: grid;
  grid-gap: 1em;*/
  margin:0 auto;
  max-width: 56em;
  padding: 1em 0;
  background-color: #f9ebd2;
}

.center {
	padding-left: .75em;
}

.text {
	text-align: center;
}

.hide {display: none;}

/**************************NAV STYLYING***********************************/


.nav{
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.nav a {
  float: left;
  padding: .75em;
  color: white;
  text-decoration: none;
  font-size: 1.0625em;
}

.nav a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
 div .none{display: none;}
 .hide,
  .nav a {
    float: none;
    display: block;
  }
}

nav a:hover {color: #072;}
/*The columns inside a row are all floating to the left, and are therefore taken out of the flow 
of the page, and other elements will be placed as if the columns do not exist. To prevent 
this, we will add a style that clears the flow:*/
.row::after {         
  content: "";    
  clear: both;
  display: table;
}

/*All these columns should be floating to the left, and have a padding of 15px:*/

[class*="col-"] {
  float: left;
  padding: 15px;
  /*border: 1px solid red;*/
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }

}

/******Contact Form****/
div#wrap{
	width: 28em;
	color: #069;
	border-top: 2em solid #069;
	border-bottom: 1em solid #069;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1em;
	background-color:  	#F0FFF0;
	width: 90%;
}

div#wrap h1 {
	margin-bottom: .2em;
}

div#wrap {
	margin-bottom: .4em
}

div#wrap p label {
	font-weight: bold;
}

div#wrap  input[type='submit']{

	color: #069;
	background-color:  	#F0FFF0;
	width:  50%;
	border: .5em solid #069;
	border-radius: 2em;
	margin-top: 2em;
	margin-bottom: 3em;
	margin-left: auto;
	margin-right: auto;

}
p#msg {
	text-align: center;
	color:red;
}
form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

textarea {
	resize: none;
}

span { color:red; }

/*************************Gallery*************************/

div.gallery {
  margin: .3125em;
  border: .0625em solid #069;
  float: left;
  width: 12.2em;
}

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

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

div.desc {
  padding: .99375em;
  text-align: center;
}

a img {
  max-width: 100%;
  height: auto;
}


}