@charset "utf-8";
h1{
	color: #ffffff;
	font-size: 3.5em;
	padding-left:5px;
}
h2{
	color:#077782;
	font-size:3em;
	font-family: "Playfair-display";
	text-align: center 
}
h3{
	color:#ffffff;
	font-size:1em;
	font-family: "quicksand";
	text-align: center;
	font-weight:300
}
h4{
	text-align: left;
	color:#ffffff;
	font-size:1em;
	font-weight:300;
	font-family: "quicksand"
}
body{
	background-color:#ffffff;
	margin:0px;
}
p{
	font-family: "quicksand";
	font-size:.8em;
	font-weight:500
}
strong{
	font-size: 1.5em
}
li{
	font-family: "quicksand";
	font-size:.8em;font-weight:500
}

.cardclick3,
.cardclick4,
.cardclick5 {
  background: #077782;
  color: #ffffff;
  text-decoration: none;
  font-family: "quicksand";
  padding: 10px 20px;
  margin: 10px auto;
  display: inline-block;
  text-align: center;
}
.cardclick3:hover,
.cardclick4:hover,
.cardclick5:hover {
  color: #FFE433;
  background: #1BCCC9;
}

.locationlink{
	color:#000000;
	text-decoration: none}
.locationlink:hover{
	color:#ffffff;
	text-decoration: underline}
.locationlink:visited{
	color:#077782;
	text-decoration: none }
.titlelink{
	color:#077782;
	font-weight: 800;
	font-family:"Playfair-display";
	font-size:1.5em;
	text-decoration: none }
.titlelink:hover{color:#000000 }


.navlink{
	color: #ffffff;
	text-decoration: none;
}
.navlink:hover{
	color:#FFE433;
	text-decoration: underline
}
.navwrap{
	display:flex;
	flex-direction: column; 
	background:#077782;
	min-height:80px;
	width:100%;
	justify-content: center;
padding:10px 0
}
.navclickstyle{
	padding-left: 1em;
	padding-right: 1em;
	font-size: 1.2em; 
	font-family: "Quicksand", serif;
	font-weight: 400;font-style: normal;
	text-align:left;
	color:#ffffff;
}
.navlist{
	display:flex;
	list-style-type: none;
	align-self: center;
gap:1em;
padding-left:0;
flex-wrap: wrap
}


.hero{
	background-image:url("images/lobster3.png");
	width:100%;
	max-width:100%;
	height: 600px;
	background-repeat: no-repeat;
	background-size:cover;
	margin-top:20px;text-align: center;
}
.herowrap{display:flex;
	flex-direction: row;
	justify-content: center
}



div.categorycard3 {
  background-image: url("images/1.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
div.categorycard1{
  background-image: url("images/4.png"); 
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
div.categorycard2{
  background-image: url("images/2.png"); 	
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
div.categorycard4{
	background-image: url("images/5.png"); 
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
div.categorycard5{
	background-image: url("images/3.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
div.categorycard6{
	background-image: url("images/6.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
.catwrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}
.restwrap{display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}
.feautre1{
	background-image: url("images/7.png"); 
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
.feature2{
	background-image: url("images/8.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
.feautre3{
background-image: url("images/9.png");	
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}
.feautre4{
	background-image: url("images/10.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
}

.signupcta{
  background-image: url("images/sushi.png");
  width: 100%;
  max-width: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
}
.learnmore{
	color:#ffffff;
	text-align:left;
	margin-left: 20px;
	margin-top:10px;
}
.frkword{
	color:#ffffff;
	font-family:"quicksand";
	margin-left:20px
}
.behind{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
	  height:600px
}



.heroguides{
	background-image:url("images/salted-fork-guides-and-reviews.png");
	width:100%;
	max-width:100%;
	height: 600px;
	background-repeat: no-repeat;
	margin-top:20px;text-align: center;
}
.herowrapguide{
	display:flex;
	flex-direction: row;
	justify-content: center
}

.navbanner{
	width:100%;
	background: #FFE433;
	height: 30px;
	margin-top: 5px
}


.articlewrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}
.articlewrapper2{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}
.article1{
	background-image: url("images/weekend-foodie-dining.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
  padding: 10px;
}
.article2{
	background-image: url("images/best-soutcoast-cafes.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
  padding: 10px;
}
.article3{
	background-image: url("images/southcoast-seafood-fishing.png");
  width: 100%;
  max-width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px 6px;
  align-content: center;
  padding: 10px;
}
.articletext{
	width:400px;
	height:200px;
}
.article1wrapper{
  width: 100%;
  max-width: 800px;
  padding: 20px 20px 50px;
  margin: 0 auto;
}
.titletext{
	font-size:1.5em
}


.signmeup{
	background-image: url("images/salted-fork-subscribe-form.png");
	width:100%;
	max-width:600px;
	height:300px;
	background-repeat: no-repeat;
	padding:10px;
	margin-left:500px
}
.label {
	font-family:"quicksand";
}
.forkitover{
	font-size:2em;
	color:#ffffff;
	margin-bottom:.5px
}
.button{
	background-color:#ffe533; 
	color:#077782;
	text-align:center;
	font-size:1.2em;
	width:150px;
	height:50px;
	font-family:"quicksand";
	border-width: 0px;
	font-weight: 800;
	margin-top:5px
}
.embedshell{
	justify-content: center;
	margin: 20px auto;
}
.formwrapper{
	background: #FFE433;
}


.herowrapabout{background-image:url("images/salted-fork-about-me.png");
	width:100%;
	max-width:100%;
	height: 600px;
	background-repeat: no-repeat;
	margin-top:20px;text-align: center;
}
	
.behindthefork{
  align-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 100px auto;
}

.footnavigate{
	background-color:#077782;
	width:100%;
	min-height: 200px;
	display: flex;
	flex-direction:column;
	justify-content: center;
	margin-top:20px
}
.sclogo{
	margin-left:43%
}
.articletitle{
	font-size:.6em
}

@media screen and (min-width: 481px) and (max-width: 800px) {
  h1 {
    font-size: 2.6em;
  }

  h2 {
    font-size: 2.4em;
  }

  .hero,
  .heroguides,
  .herowrapabout {
    height: 450px;
  }

  .catwrapper,
  .restwrap,
  .articlewrapper,
  .articlewrapper2 {
    flex-wrap: wrap;
  }

  .article1wrapper {
    max-width: 700px;
    margin: 0 auto;
  }
}

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

 
  h1 { font-size: 2em; padding: 0 12px; }
  h2 { font-size: 2.2em; }
  h3, h4 { font-size: 0.95em; }

  
  .navwrap { padding: 16px 0; }
  .navlist {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .navclickstyle { font-size: 1.1em; text-align: center; }


  .hero,
  .heroguides,
  .herowrapabout {
    height: 340px;
    margin-top: 10px;
  }

  .catwrapper,
  .restwrap,
  .articlewrapper,
  .articlewrapper2,
  .behind {
    flex-direction: column;
    align-items: center;
  }

  .categorycard1,
  .categorycard2,
  .categorycard3,
  .categorycard4,
  .categorycard5,
  .categorycard6,
  .feautre1,
  .feature2,
  .feautre3,
  .feautre4,
  .article1,
  .article2,
  .article3 {
    width: 100%;
    max-width: 92vw;
    height: 320px;
    margin: 10px 0;
  }


  .signupcta {
    width: 100%;
    max-width: 92vw;
    height: auto;
    min-height: 420px;
    padding: 16px;
  }
  .learnmore { margin-left: 0; text-align: left; }
  .frkword { margin-left: 0; }

 
  .cardclick3,
  .cardclick4,
  .cardclick5 {
    margin: 12px auto;
    display: inline-block;
  }


  .formwrapper { padding: 16px 0; }
  .embedshell { margin: 0 auto; padding: 0 12px; }
  .signmeup {
    width: 100%;
    max-width: 92vw;
    height: auto;
    min-height: 320px;
  }
  .button { width: 100%; max-width: 240px; }

  .footnavigate { padding: 20px 10px; }
}