/* Style Sheet written and copyrighted by Sarah Jurina */
/* Jurina Enterprises, Inc 2019 - 2020 */


/* hierarchy for the browser reading css elements starts with regular body or p*/
/* then to class elements that begin with a period -- these override the regular elements*/
/* finally the one that beats all the others is an id... it goes: Tag, Class, ID*/

/* chaining is when you add a period after a class and specialize that class */
/* nesting elements means you can apply a class to only items within its parental element */
/* like this: .element p {} */

/* add together tags with commas that share the same characteristics */

@font-face {
    font-family: "historia";
    src:url(TheHistoriaDemo.ttf) format("truetype");
}


p {
  color: #24597b;
  font-family:  Candara, sans-serif;
  font-size: 20px;
  line-height: 1.2;
}

label {
	display: block;
	padding-bottom: 4px;
	color: #24597b;
    font-family:  Candara, sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

input, select, textarea {
  color: #636363;
  font-family:  Candara, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  padding: 8px;
  box-sizing: border-box;
  width: 300px;
  margin-bottom: 4px;
  border-radius: 5px;
}

textarea {
	height: 250px;
}

button  {
  color: white;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 1.3em;
  font-weight: 400;
  font-family:  Candara, sans-serif;
  background-color: #4682B4;
  border-radius: 5px;
}

img {
	  text-align: center;
	  margin-top: 20px;
	  margin-left: 25%;
	  margin-right: 25%;
	  height: auto;
	  overflow: hidden;
}

.homepage {
  margin: 20px auto;
  width: 70%;
}

.homepage img{
	width: 50%;
	margin: 0 25%;
	height: auto;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.homepage p{
	font-weight: 500;
	font-size: 1.2em;
}

.homepage h3 {
	letter-spacing: .08em;
	font-weight: 100;
	font-size: 1.7em;
	margin: 20px 25%;
}

a  {
	text-decoration: none;
	color: #2c2f31;
}

h3 {
  color: #24597b;
  font-family:  "historia", "Brush Script MT", "Goudy Old Style", sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 100;
}


.homepage h1 {
  color: #000000;
  font-family:  "historia", "Brush Script MT", "Goudy Old Style", sans-serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 100;
  text-align: center;
}

h2 {
  color: #000000;
  font-family:  Candara, sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 200;
  text-align: center;
}


h4 {
  color: #24597b;
  font-family:  Candara, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 200;

}

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #4f92be;
  overflow: hidden;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  font-family:  Candara, sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #185279;
  color: white;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #185279;
  color: white;
}

.topnav a.telephone {
  background-color: #185279;
  color: white;
  letter-spacing: .5em;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* certificates container */
.cert-container {
	width: 100%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;

}

.cert-item {
	width: 400px;
	height: 133px;
	margin: 10px;
	display: inline-block;
	font-size: 12px;
	vertical-align: top;
}

.certificates {
	vertical-align: top;
	text-align: center;

	}


.certificates a{
	float: left;
	display: block;
	margin-left: 15px;
	padding-left: 1px;

}

/*new footer */

.footer-container {
	width: 100%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;

}

.footer-background {
	background-image: url("Photos/venice-reef-charters-footer.jpg");
	width: 100%;
	height: auto;
	margin-left: -7px;
	margin-bottom: -17px;
	padding-right: 14px;
}

.footer-item {
	width: 400px;
	height: 200px;
	margin: 10px;
	display: inline-block;
	font-size: 12px;
	vertical-align: top;
}

.footer-item h3 {
	 color: white;
	 padding-left: 10%;
	 margin-top: 8px;
	 font-family:  Candara, sans-serif;
	 margin-bottom: 8px;
	 font-size: 2.2em;
	 background-color: rgba(070,130,180,.5);
	 padding: 10px;
 }

 .footer-item h4 {
	color: white;
	font-size: 1.5em;
	text-align: left;
	padding-left: 10%;
	font-weight: 500;
	padding-bottom: 10px;
}

.footer-item a 	{
	color: white;
	font-size: 1.5em;
	text-align: left;
	padding-left: 10%;
	font-weight: 500;
	padding-bottom: 0px;
	padding-top: 0px;
	font-family:  Candara, sans-serif;
	display: block;
}



.footer-item a:hover {
	text-decoration: underline-overline;
	font-weight: 800;
}

.social {
	vertical-align: top;
	text-align: center;

	}


.social a{
	float: left;
	display: block;
	margin-left: 15px;
	padding-left: 1px;

}


.container-prepare {
	width: 90%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}

.question {
	width: 220px;
	height: 130px;
	display: inline-block;
	margin: 15px;
	font-size: 12px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	vertical-align: top;
}

.question h3{
	color: black;
	font-size: 3em;
	font-weight: 100;
  background-color: rgba(240,248,255,.7);
  padding: 10px;
}

.question-background  {
  background-image: url("Photos/question-background.jpg");
  border-radius: 5%;
}




.answer {
	width: 410px;
	height: 130px;
	display: inline-block;
	margin: 15px;
	font-size: 12px;

	vertical-align: top;
}

.answer a {
	text-decoration: underline;
}

.answer a:hover {
	text-decoration: underline-overline;
	font-weight: 800;
}


.answer p {
	text-align: left;
	margin-left: 10px;
}

/* inline block is mostly for text so when you center it, you use text align.
This main width callout is to keep it responsive, only taking up 80% of the width before popping down onto the next line.
the font size = 0 will remove spaces in between...we can add a margin in the grid item to add a uniform space*/

.photos-container {
	width: 90%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;

}

.photos {
	width: 90%;
	height: auto;
	display: inline-block;
	margin: 10px;
	font-size: 14px;
	vertical-align: top;

}

.photos  img  {
	width: 50%;
	height: auto;
	margin-top: -10px;
	margin-bottom: -8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



.photos h3{
	font-size: 34px;
}

.photos h4 {
  color: #24597b;
  font-family:  Candara, sans-serif;
  font-size: 16px;
  line-height: 1.2;
}


.container {
	width: 90%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}

.grid-item {
	width: 400px;
	height: 475px;
	display: inline-block;
	margin: 10px;
	font-size: 12px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	vertical-align: top;
}


/* if making a grid-item large you can also use verticle-align: middle or :top to align the boxes in a separate class for large.*/

.grid-item h3{
  color: Black;
  font-family:  "historia", "Brush Script MT", "Goudy Old Style", sans-serif;
  font-size: 2.5em;
  font-weight: 100;
  line-height: .7em;
  text-align: center;
  word-spacing: .25em;
  letter-spacing: .1em;
  background-color: rgba(240,248,255,.5);
  padding: 10px;
}

.grid-item  p {
  color: Black;
  font-family:  Candara, sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px;
  text-align: left;
  word-spacing:;
  letter-spacing:;
}

.review p {
	font-size: 24px;
	color: #24597b;
	width: 90%;
	height: auto;
	margin: 0 auto;
}

.grid-item  a{
  color: white;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 1.3em;
  font-weight: 400;
  font-family:  Candara, sans-serif;
  background-color: #4682B4;
  border-radius: 5%;
}

.grid-item img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.intercoastal {
  background-image: url("Photos/fishing-charter-pricing-background-v2.jpg");
  border: 4px solid #e4e6f7;
}

.intercoastal img  {
	width: 50%;
	height: auto;
	margin-top: -10px;
	margin-bottom: -8px;
}

.nearshore {
  background-image: url("Photos/fishing-charter-pricing-background-v2.jpg");
  border: 4px solid #e4e6f7;
}

.nearshore img  {
	width: 50%;
	height: auto;
	margin-top: -10px;
	margin-bottom: -8px;
}


.offshore {
  background-image: url("Photos/fishing-charter-pricing-background-v2.jpg");
  border: 4px solid #e4e6f7;
}

.offshore img  {
	width: 50%;
	height: auto;
	margin-top: -10px;
	margin-bottom: -8px;
}


.deepoffshore {
  background-image: url("Photos/fishing-charter-pricing-background-v2.jpg");
  border: 4px solid #e4e6f7;
}

.deepoffshore img  {
	width: 50%;
	height: auto;
	margin-top: -10px;
	margin-bottom: -8px;
}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 24px;
  font-family: Candara, sans-serif;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}



/*  My small collection of media queries below...you know, to make it responsive */



 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  img {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	  text-align: center;
	  margin-top: 20px;
	  margin-left: 25%;
	  margin-right: 25%;
	  height: auto;
	  overflow: hidden;
}



.homepage {
  margin: 20px auto;
  width: 80%;
}

/* the following img is centered because the margin is pushing it FROM THE LEFT 20% within its width for the class/div of homepage
the percent is the second number in the callout to margin. IF my width is 70% then I take one-fourth of that amt and that is my second margin number
however the bigger I make the with of my homepage img, the smaller I make my margin percent because my image is getting bigger and I don't
need to push it as far left inside my div.*/
.homepage img{
	width: 80%;
	height: auto;
	margin: 0 8%;
	overflow: hidden;
	text-align: center;
}

.homepage p{
	font-weight: 500;
	font-size: 1.2em;
}

.homepage h3 {
	letter-spacing: .08em;
	font-weight: 100;
	font-size: 1.2em;
	margin: 20px 13%;
}

/* need to adjust the height for triptype in order to see the button on the bottom */

.triptype {
  background-image: url("Photos/fishing-charter-pricing-background-v2.jpg");
  display: block;
  border: 4px solid #e4e6f7;
  width: 80%;
  height: 700px;
  margin: 20px auto;
  padding-left: 28px;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 10px;
  font-size: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



.triptype img {
  margin: 0 10%;
  width: 70%;
  height: auto;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.triptype h3 {
  color: Black;
  font-family:  "historia", "Brush Script MT", "Goudy Old Style", sans-serif;
  font-size: 2.2em;
  font-weight: 100;
  line-height: 1;
  text-align: center;
  word-spacing: .25em;
  letter-spacing: .1em;
}

.triptype p {
  color: Black;
  font-family:  Candara, sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.2;
  word-spacing:;
  letter-spacing:;
}



.triptype a{
  color: white;
  margin: 20px auto;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  font-family:  Candara, sans-serif;
  background-color: #4682B4;
  border-radius: 5%;
}

.triptype a.button {
	margin: 10px 45%;

}



}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}