body {width: 1080px; height: 100%; margin: 0 auto;
padding: 50px 48px 0; line-height: 1;color: #333;
background: #FFF; font-size: 1em;
font-family: Georgia, sans-serif;}
#wrapper {width: 100%; position: relative}

a {text-decoration: none; color: #34AC98;}
a:hover {color: #EC6635;}
::selection {background: rgba(255,255,150,.9);}

/*HEADER*/
header {float: left; width: 160px; margin-bottom: 25px;}
header h1 {display: block; width: 120px; height: 120px; text-indent: -999em;
background: url(../img/food-sense.png) no-repeat 0 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;}
header h1 a {display: block; width: 120px; height: 120px;}
header h1:hover { opacity: .85;}
header nav {position: absolute; top: 158px; left: 0; width: 160px; padding-top: 20px}
header nav li {margin-bottom: 18px;line-height: 1.3em;}
header nav li:last-child { margin: 0; }
header nav a {display: block; height: 28px; padding: 4px 0 0 44px; font-style: italic; color: #34AC98;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;}
header nav a:hover { color: #EC6635; }
header nav li a {background-position: 0 65%;background-repeat: no-repeat}
header nav li a:hover {background-position: 5px 65%; }
.tastemakers a { background-image: url(../img/nav-tastemakers.png); }
.blog a { background-image: url(../img/nav-blog.png); }
.vendors a { background-image: url(../img/nav-alist.png); }
.contribute a { background-image: url(../img/nav-contribute.png); }
.about a { background-image: url(../img/nav-about.png); }

/*SOCIAL*/
.social {position: absolute; top: 452px; left: 0; width: 160px; padding-top: 40px}
.social h2 {margin: 0 0 9px; padding-bottom: 5px; text-transform: uppercase; font-size: .75em; border-bottom: 1px dashed #E5E5E5;}
.social p {margin-bottom: 15px; line-height: 1.75em; font-size: .6825em; font-style: italic;
overflow: hidden;}
aside .twitter a.button{background-image: url(../img/icon-twitter-16.png)}
aside .facebook a.button {background-image: url(../img/icon-facebook-16.png)}
a.button {width: 110px; height: 24px; padding: 4px 0 0 28px; background: no-repeat 6px 6px;}
.button {display: block; padding: 10px 20px; background: #FFF; border-radius: 5px; border: 1px solid #E5E5E5;}
.button:hover {background-color: #EFF8F7;}

/*CONTENT*/
.content {width: 82.96296296296296%; float: right}

/*.mainImage {width: 100%; padding-bottom: 20px}
.mainImage img {max-width: 100%}
.mainImage li {border-right: 1px solid #D3EDE9; vertical-align: middle; width: 25%; height: 60px; display: inline-block; 
background-color: #EFF8F7; padding:20px 0 55px 25px; box-sizing: border-box;}
.mainImage li:last-child {border-right: none}
.mainImage li:hover {background-color: #D9EFEC;}
.mainImage li h3 {font-size: 1.125em}
.mainImage li p {font-size: 0.75em; font-family: italic}*/

/*CYCLE & NAVIGATION*/
.feature {padding-bottom: 20px}
.feature img {max-width: 100%;}
#per-slide-template a {box-shadow: 1px 0 0 #FAFDFC; border-right: 1px solid #D3EDE9; width: 25%; color: #60BEAE; line-height: 1.1em; background-color: #EFF8F7; display: inline-block;padding: 20px 10px; box-sizing:border-box;}
#per-slide-template a:last-child {border-right: none}
#per-slide-template h3 {font-size: 1.125em;}
#per-slide-template p {font-size: .75em; font-style: italic;}
#per-slide-template a:hover {color: #EC6635;background-color: #D9EFEC}
.cycle-overlay {position: absolute; z-index: 200; bottom: 100px; transition: opacity .2s ease;}
.cycle-overlay:hover{opacity: .8}
.cycle-overlay h4 {top: 285px; padding: 10px 24px 15px; color: #222; background: #FFF; font-size: 1.5em;}
.cycle-overlay h5 {top: 334px; padding: 8px 24px 12px; color: #E9E9E9; font-weight: normal; font-size: 1em; background: #111;}

/*NEWSLETTER*/
.newsletter {overflow: hidden; clear: both; width: 100%; min-height: 48px;
margin-bottom: 29px; line-height: 1em; border-top: 1px dashed #E5E5E5;
border-bottom: 1px dashed #E5E5E5; background: url(../img/icon-mailinglist-32.png) no-repeat 18px 7px;}
.newsletter p {float: left; width: 49%; padding: 7px 24px 0 66px;
font-size: .75em; font-style: italic;}
.newsletter input {width: 260px;}
.newsletter input:focus {box-shadow: #4FB7A6 0 0 7px; z-index: 1;}
.newsletter form {margin-top: 11px;}

/*4 ARTICLES*/
.articleContent {width: 100%; clear: both; margin-bottom: 18px; overflow: hidden;}
.articleContent img {width: 185px; padding: 9px; background: #FFF; border: 1px solid #E5E5E5;
-webkit-box-shadow: 1px 2px 3px #F5F5F5; 
-moz-box-shadow: 1px 1px 3px #F5F5F5;
box-shadow: 1px 1px 3px #F5F5F5;}
.articleContent img:hover {opacity: 0.75}
.articleContent article {width: 206px; float:left; margin: 0 23px 25px 0;}
.articleContent article:nth-child(n+4){margin-right:0}
.articleContent article h1 {margin: 10px 0 10px; line-height: 1.3em; color: #60BEAE;}
.articleContent article h1:hover {color: #EC6635;}
.articleContent article p , .articleContent article time {font-size: .875em; line-height: 1.45em;}
.articleContent article time {color: #AAA;}
.data {margin-top: 10px;}
.data a {font-size: .875em; line-height: 1.45em; border-bottom: 1px dashed #E5E5E5}

/*FOOTER*/
footer {clear: both; position: relative; min-height: 70px; padding-top: 20px;
border-top: 2px solid #E5E5E5; color: #AAA; line-height: 1.5em; font-size: .75em;}
small {color: #AAA;}
.footerSocial {position: absolute; top: 20px; right: 0;}
.footerSocial li {float: left; display: inline; margin-left: 5px;}
.footerSocial li a {display: block; width: 32px; height: 32px; text-indent: -999em;opacity: .5;
-webkit-transition: opacity .3s ease;
-moz-transition: opacity .3s ease;
transition: opacity .3s ease;}
.tw a {background: url(../img/icon-twitter.png) no-repeat 50% 1px;}
.fa a {background: url(../img/icon-facebook.png) no-repeat 50% 1px;}
.rs a {background: url(../img/icon-rss.png) no-repeat 50% 1px;}
.footerSocial li a:hover {opacity: 1}

	/*RWD*/
	@media screen and (max-width: 995px) {

	body {width: 712px; padding: 20px 28px 0;}

	header {width: 712px; margin-bottom: 20px;}
	header nav ul {float: right;}
	header nav {top: 55px; left: auto; right: 0; width: 528px; margin: 0;}
	header nav li {display: inline-block;}
	header nav li a {background-position: 50% 0;}
	header nav a {display: inline; padding: 35px 15px 0 15px;}
	header nav li a:hover {background-position: 50% 3px;}

	.content {width: 100%;}

	#per-slide-template p {display: none}
	#per-slide-template h3 {font-size: 0.875em}
	#per-slide-template a {padding: 10px}
	.cycle-overlay {bottom: 70px;}
	.newsletter input {width: 160px;}
	.articleContent article {width: 160px; margin: 0 24px 25px 0;}
	.articleContent img {width: 139px; height: auto}
	.social {display: none}

	.newsletter p {font-size: .7em}

	}

	@media screen and (max-width: 765px) {


	body {width: 480px; padding: 0;}
	header {width: 100%; margin: 20px 0;}
	header h1 {margin-left: 20px;}
	header nav {top: 50px; right: 25px; width: 315px; height: 20px; font-size: .75em}
	header nav ul {position: absolute; right: 0}
	header nav li {display: inline; margin: 0;}
	header nav a {float: left; margin: 0 0 0 4px; padding: 5px 5px 0 5px;}
	.tastemakers a { background-image: none; }
	.blog a { background-image: none; }
	.vendors a { background-image: none; }
	.contribute a { background-image: none; }
	.about a { background-image: none; }

	.cycle-overlay {bottom: -30px; width: 100%}
	.cycle-overlay h4{top: 214px; padding: 10px 10px; background: rgba(255,255,255,.8);
	color: #222; font-size: 0.9em;}
	.cycle-overlay h5 {top: 248px; padding: 9px 10px 11px; font-size: .65em;}
	.feature {padding-bottom: 50px}

	#per-slide-template {display: none}
	.newsletter p {float: left; width: 85%; padding-bottom: 5px}
	.newsletter form {margin: 0 0 10px 20px}
	.newsletter input {width: 360px}

	.articleContent {width: 456px; margin: 0 auto 20px;}
	.articleContent article {width: 216px; float:left; margin: 0 23px 25px 0;}
	.articleContent img {width: 195px; height: auto}
	.articleContent article:nth-child(2){margin-right:0}
	}

	@media screen and (max-width: 480px) {

	body {width: 320px; padding: 0;}
	header {width: 100%; margin: 69px 0 20px;}
	header h1 {margin: 0 auto;}
	header nav {top: 0; left: 0; width: 100%; height: 35px; font-size: .75em;
	border-bottom: 1px solid #E5E5E5;}
	header nav a {margin: 0; padding: 16px 8px 6px;	}

	.feature {height: 310px; overflow: hidden;}
	.feature img {max-width: 200%; margin-left: -160px; margin-top: 0;}

	.newsletter p {float: left; width: 75%}
	.newsletter input {width: 195px}

	.articleContent {width: 280px; margin: 0 auto 20px;}
	.articleContent article {width: 280px; margin-right: 0px;}
	.articleContent article img { width: 258px; }

	}