.logo img {width: 300px; height: auto; margin-left: 20px; margin-top: 10px}
.logo {float: left}
header{display: block; font-family: 'Rosario', sans-serif; background-color: #76b2b2; width: auto; height: 80px}
h2 {font-family: 'EB Garamond', serif; font-size: 3em; text-align: center;}
.wrapper {background-color: antiquewhite}
/*featured post*/
.featured .btn {width: 50%; margin-left: 24%; margin-right: auto}
.featured, figcaption, .btn {display: block; }
.featured img {  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
a {color: #76b2b2}
figcaption {color: black}
.tags {text-align: center; height: 10% }
.latest .row .column {text-align: left;}

.email .right{ height: 20%; background-color: white;} /*mail chimp form goes here*/
/*categories*/
.roww {margin-left: auto; margin-right: auto; width: 33%; display: block} /*main content*/
header{display: block; font-family: 'Rosario', sans-serif; background-color: #76b2b2; width: auto; height: 80px}
.roww h2 {font-family: 'EB Garamond', serif; font-size: 3em; text-align: center;}

.style {text-align: center; display: block; margin-left: auto; margin-right: auto; width: 50%;}

.style p {font-size: 1.2em}
.style, a.btn {text-align: left}
/*fundamentals*/

.title, h1 {font-family: 'EB Garamond', sans-serif;text-align: center;}
.funda, p {text-align: left}
.funda {text-align: center; width: 50%; margin-right: auto; margin-left: auto}
.cat img {width: 100%}
.cat h2 {font-family: 'EB Garamond', serif; font-size: 3em; text-align: center; color: #76b2b2; }
.cat img {width: 100%}
.card {padding: 5%;; width: 50%; margin-right: auto; margin-left: auto} 
.column h4 {font-size: 1.6em}
.row .column p {line-height: 1.8em}
.text-block {width: 55%; margin-left: auto; margin-right: auto}
/*end categories*/


.text-block p {width: 95%}

/*about*/

.main img {display: block; max-width: 100%; width: 30%; height: auto; margin-left: auto; margin-right: auto}
.main p {dispay:inline; line-height: 1.9em; margin-left: auto; margin-right: auto; width: 30%  }
/*footer*/

/*footer*/
img#home {display: inline-block; margin-left: 85%; max-width: 60%; width: 20%; max-height: 100%; height: auto}

.footertitle ul.social{
 width:100%;
 height:37px;
 display:block;
 margin:0;padding:0;
}

ul.social li{
 list-style:none;padding:0;
 padding-right:10px;
 margin:0;
 float:left;
}
ul.social li a{
 background-image:url(images/social.png);
 width:38px;
 height:37px;
 display:block;
}
ul.social li a.facebook{
 background-position: 0 -37px;
}

ul.social li a.twitter{
 background-position: 41px -37px;
}
ul.social li a:hover{
 background-position-y:0;
} 

/*end footer social buttons*/

.footertitle {color: white; font-size: 1.8em}

figcaption {margin-left: auto; margin-right: auto ;text-align: left; width: 50%; margin-top: 2%}

/*our latest posts*/ 
.latest, .row, .column h3 {font-family: 'EB Garamond', serif; text-align: center}
.latest, .row,  .column a {color: #76b2b2}
.latest .row, .column h4 { text-align: left}
.latest, .row, .column p {line-height: 1em}
.latest, .row, .column h5{ font-size: 1em; text-align: left; line-height: 1.5em}
.column { display:inline-block; width: 27%; margin-right:2%; margin-left:4%;  vertical-align: top; color:black; text-align: center}

/*featured*/
.featured h3 {text-align: center; font-size: 1.8em; font-family:  'EB Garamond', serif}
.contact {display: block; width: 10%; margin-left: auto; margin-right: auto; margin-top: 3%}

.row2:after {
  content: "";
  display: table;
  clear: both;
	
}

.mobilenav {display: none}


body {background-color: antiquewhite}
.footertitle {;display:block; font-size: 25px; text-align: left; padding: 2% 4%; font-family: 'EB Garamond', serif; background-color: #76b2b2; height:auto; width: auto; margin-top:20%}
.wrapper {width: 100%; max-width: 1880px; margin-left:auto; text-align: center;  }

/*universal styles*/
 .hero-text h1 {font-size: 5em; font-family: 'EB Garamond', serif; line-height: 1.1em; text-shadow: 6px 1px 26px black}

body {font-family: 'Rosario', sans-serif;}
/*hero image*/
body, html { margin: 0;
    height: 90%;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("images/homepage-hero-5.jpg");

  
  height: 100%;

  
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}


.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
/*HERO IMAGE*/

/*nav*/
.btn {
  background-color: #76b2b2;
  border: none;
  color: white;
  padding: 16px 2px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #d8d8c3;
  color: white;
} /*end hover button*/

nav {margin-right: 5%}
nav li a {color: antiquewhite}
nav li {float: right;
	list-style-type: none;
	margin-left: 100px;}
nav ul {width: auto;
	float: right;
	text-align: right;
	padding: 0; }

/*link color code*/
a:hover, a:active {
  background-color: #af7d0c;
}
header 
a:link {
  color: #af7d0c;
  background-color: transparent;
  text-decoration: none;
	
}

a:visited {

  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #d8d8c3;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #76b2b2;
  background-color: transparent;
  text-decoration: underline;
}

/*button customization*/
.btn {
  background-color: #76b2b2;
  border: none;
  color: white;
  padding: 15px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
/*ul customization*/
body ul {list-style: inside circle;}


/*hero button*/
.hero-image .hero-text button {
  background-color: #76b2b2;
  border: none;
  color: antiquewhite;
  padding: 16px 32px;
  text-align: center;
  font-size: 30px;
  margin: 4px 2px;
  transition: 0.3s;
}

button:hover {
  background-color: #d8d8c3;
  color: white;
} /*end hover button*/

.email #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:80%; padding: 5%; margin-left: auto; margin-right:auto}
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

/*Article pages*/
.style h3 {margin-left: 20%}
.list h2 {text-align: left; font-size: 1.9em}
.style, .list {margin-left:auto;margin-right:auto ; width: 60%}
.style img {width: 100%; height: auto;margin-left:auto;margin-right:auto}
.style {max-width: 100%}
.title h1 {font-size: 3em}
.style h1 {font-size: 3em}



/*contact form*/
.form {text-align: center; width: 35%; margin-left: auto; margin-right:auto;}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; 
  padding: 12px; 
  border: 1px solid;
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px;
  resize: vertical;
}

/* submit background color */
input[type=submit] {
  background-color: #d8d8c3;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* when moving the mouse over the submit button, add a blue color */
input[type=submit]:hover {
  background-color: #78b2b2;
	
}

/*background color/ padding around the form*/
.container {
  border-radius: 5px;
  background-color: #76b2b2;
  padding: 50px;
}
body {margin: 0}

/*footer*/
.footertitle ul.social{
 max-width:100%; width: 25%;
 height:auto;
 display:block;
 margin:0;padding:0;
}

ul.social li{
 list-style:none;padding:0;
 padding-right:10px;
 margin:0;
 float:left;
}
ul.social li a{
 background-image:url(images/social.png);
 width:38px;
 height:37px;
 display:block;
}
ul.social li a.facebook{
 background-position: 0 -37px;
}

ul.social li a.twitter{
 background-position: 41px -37px;
}
ul.social li a:hover{
 background-position-y:0;
} 


/*begin media queries*/
@media screen and (max-width: 1011px) {/*toggle button*/
	.main img { width: 95%}
	.main p {width: 95%}
	.style {max-width: 100%; width: 95%; margin-left: auto; margin-right: auto;}
	.list {width: 100%}
}
@media screen and (max-width: 960px) {/*toggle button*/
	.row .column {max-width: 100%; width: 90%}
		#toggle {display: block; margin-left: 25%}
		nav {display: none}
	.mobilenav {display: block ; width: 100%; height: 400px; margin-top: 10%;margin-left: auto; margin-right: auto;}
	div.column {display:inline-block; width: 75%}
	.footertitle {height: auto}
	.featured .text-block {width: 100%}
	.featured img {width: 100%}
	.cat img {max-width: 100%}
	.footertitle {max-height: 100%; }
	
	.main {display:block}
	.main p {max-width: 95%; width: 100%; }
	.main img {width: 95%; height: auto;}
}
@media screen and (max-width: 860px) {/*toggle button*/
	
	.main img {max-width: 100%; width: 100%}
}
@media screen and (max-width: 600px) {/*toggle button*/
	
	

}

@media screen and (max-width: 676px) {/*toggle button*/

	

}
@media screen and (max-width: 375px) {/*toggle button*/
	
	
	.hero-text h1 {font-size: 3em}
}
@media screen and (max-width: 414px) {/*toggle button*/
	
	
	.hero-text h1 {font-size: 4em}
}