h6 {
  text-align: center;
  color: black;
  position: flex;
  font-size: 25px;
}

h5 {
  text-align: center;
  color: rgb(0, 0, 0);
  position: flex;
  font-family: "Bebas Neue", serif;
}

/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */
.accordion {
  width: 800px;
  margin: 90px auto;
  color: black;
  background-color: white;
  padding: 45px 45px;
  margin-top: 0%;
}

.accordion .container {
  position: relative;
  margin: 10px 10px;
}

/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */
.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 30px;
  color: black;
  cursor: pointer;
}

/* Positions the plus sign 5px from the right. Centers it using the transform property. */
.accordion .label::before {
  content: "+";
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);
}

/* Hides the content (height: 0), decreases font size, justifies text and adds transition */
.accordion .content {
  position: relative;
  background: white;
  height: 0;
  font-size: 17px;
  text-align: left;
  width: 780px;
  overflow: hidden;
  transition: 0.5s;
}

/* Adds a horizontal line between the contents */
.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}

/* Unhides the content part when active. Sets the height */
.accordion .container.active .content {
  height: 150px;
}

/* Changes from plus sign to negative sign once active */
.accordion .container.active .label::before {
  content: "-";
  font-size: 30px;
}

#Trees {
  margin-left: -170px;
  margin-top: 20px;
}

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

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

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

#Teambreak {
  float: left;
  margin-top: 50px;
  align-items: left;
  margin-left: 70px;
}

.item {
  order: 5; /* default is 0 */
  flex-grow: 4;
  flex-shrink: 3;
  flex-basis: auto;
}

#tricks {
  margin-top: 50px;
}

#newsroomheader {
  margin-top: 70px;
}

#YouTube {
  margin-top: 60px;
  margin-left: 10%;
}

#Fun-fact1 {
  margin-left: 150px;
  margin-top: 10px;
}

#Meet-Stan {
  margin-left: 260px;
  margin-top: 5%;
}

.column {
  float: left;
  padding-bottom: 80px;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  display: flex;
  perspective: 1000px;
  max-width: 300px;
  float: left;
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  flex-direction: row;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Safari */
  backface-visibility: hidden;
  flex-direction: column;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  color: black;
}

/* Style the back side */
.flip-box-back {
  color: white;
  transform: rotateY(180deg);
}

#btn {
  position: center;
}

.container .btn {
  margin-left: 35%;
  margin-bottom: 4%;
  background-color: rgb(187, 242, 242);
  color: rgb(0, 0, 0);
  font-size: 25px;
  font-family: "Yeseva One", serif;
  padding: 19px 35px;
  border: none;
  cursor: pointer;
  border-radius: 12px;
}

.container .btn:hover {
  background-color: rgb(133, 124, 229);
}

#newsroom {
  margin-top: 70px;
}

#socialmedia {
  margin-top: 300px;
}

#youtube {
  margin-left: 130px;
}

body {
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
}

.topnav a {
  float: right;
  font-family: "Yeseva One", serif;
  color: #0b5119;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #99d3a4;
  color: rgb(255, 255, 255);
}

.topnav a.active {
  background-color: #458F42;
  color: rgb(255, 255, 255);
}

.nav div.logo {
  width: 180px;
  height: 10px;
  position: absolute;
}

.home {
  width: 100%;
  height: 100vh;
  background-color: #ddd;
}

#btn {
  position: center;
}

.container .btn {
  margin-right: -7%;
  margin-top: -8%;
  margin-bottom: 10%;
  background-color: rgb(69, 143, 66);
  color: rgb(255, 255, 255);
  font-size: 25px;
  font-family: "Yeseva One", serif;
  padding: 19px 35px;
  border: none;
  cursor: pointer;
  border-radius: 12px;
}

.container .btn:hover {
  background-color: rgb(172, 235, 183);
}

#Paragraph1 {
  position: center;
  margin-left: 40px;
  margin-bottom: 5%;
}

#Paragraph2 {
  position: center;
  margin-left: 20px;
}

/* footer styles under here */
footer {
  color: rgb(59, 53, 53);
  text-align: left;
  margin-top: 10%;
  font-family: "Yeseva One", serif;
  font-size: 20px;
  padding: 40px 0;
}

.page-footer {
  background-color: rgb(255, 255, 255);
  color: rgb(71, 147, 62);
  text-align: center;
  margin-top: 0%;
  font-size: 20px;
  padding: 40px 0;
}

h1 {
  margin-top: 30px;
  font-family: "Shrikhand", serif;
  margin-left: -3%;
  font-size: 22px;
  padding-top: 70px;
  padding-bottom: 20px;
  display: center;
  text-align: center;
}

#one {
  font-family: "Yeseva One", serif;
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-align: justify;
  padding: 2px;
  margin-left: -15px;
}

h2 {
  font-size: 50px;
  margin-left: 40%;
  margin-bottom: 4%;
  color: rgb(12, 75, 50);
  font-family: "Shrikhand", serif;
  padding-bottom: 30px;
  display: flex;
  text-align: left;
}

H3 {
  font-size: 50px;
  margin-left: 40%;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 30px;
  display: flex;
  text-align: left;
}

H4 {
  font-size: 50px;
  margin-left: 40%;
  font-family: "Fjalla One", sans-serif;
  padding-bottom: 30px;
  display: flex;
  text-align: center;
}

h5 {
  font-size: 50px;
  margin-top: 70px;
  margin-left: 5%;
  font-family: "Shrikhand", serif;
  padding-bottom: 30px;
  text-align: center;
}

H6 {
  font-size: 35px;
  margin-left: 17%;
  font-family: "Yeseva One", serif;
  padding-bottom: 10px;
  display: flex;
  text-align: left;
}

#tips2 {
  margin-left: 17%;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-align: left;
  display: left;
}

#header1 {
  font-size: 35px;
  margin-left: 17%;
  font-family: "Yeseva One", serif;
  display: flex;
  text-align: left;
}

#tips3 {
  margin-left: 17%;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-align: left;
  display: left;
}

#tips4 {
  margin-left: 17%;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-align: left;
  display: left;
}

#two {
  font-family: "Fresca", sans-serif;
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-align: left;
}

#three {
  margin-top: 30px;
  font-family: "Shrikhand", serif;
  margin-left: -3%;
  font-size: 45px;
  padding-top: 70px;
  padding-bottom: 20px;
  display: center;
  text-align: center;
}

#youtube1 {
  font-family: "Fresca", sans-serif;
  font-size: 30px;
  margin-left: 570px;
}

.logo {
  height: 52px;
  width: 170px;
}

/* JOIN US FORM */
.starter-template-text-center {
  padding-right: 10%;
}

input[type=text], select, textarea {
  width: 50%; /* Full width */
  padding: 6px; /* Some padding */
  border-radius: 7px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 6px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
  position: left;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  font-family: "Fjalla One", sans-serif;
  font-size: 20px;
  color: white;
  background-color: rgb(133, 124, 229);
  padding: 20px 40px;
  border: none;
  padding: center;
  border-radius: 4px;
  cursor: pointer;
}

label, a {
  font-family: "Fjalla One", sans-serif;
  font-size: 20px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: rgb(187, 242, 242);
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  padding: 20px;
}

.join {
  text-align: center;
  padding-top: 100px;
}/*# sourceMappingURL=mystyles.css.map */