@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');
* {
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
  padding: 0px;
  margin: 0;
}

.row {
  display: flex;
  position: relative;
  background-color: #47b2ac;
}

div.row div ul li a,
.inactive,
div.row div h3 {
  cursor: not-allowed;
}
div.row div a.ocean,
div.row div a.ocean h3.ocean {
  margin: 0 auto;
  margin-top: 3px;
  cursor: pointer;
  font-size: 20px;
}

/*----- MAIN BAR ---------------------------------------------------------*/

.info-header {
  background-color: white;
  min-height: 80px;
  color: black;
  font-family: 'Open Sans', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
    sans-serif;
  text-align: left;
  z-index: 1;
  font-size: 20px;
}

.info-description {
  padding-left: 20px;
  margin-top: 0;
  padding-top: 15px;
}

#profile-icon {
  width: 44px;
  height: 44px;
  background-color: rgb(162, 162, 162);
  color: black;
  position: absolute;
  right: 20px;
  top: 20px;
  padding-top: 10px;
  text-align: center;
  border-radius: 100%;
}

/* subscribe */
#subscribe-link {
  background-color: #b12647;
  color: white;
  width: 120px;
  height: 44px;
  padding-top: 10px;
  position: absolute;
  right: 80px;
  top: 20px;
  text-align: center;
  text-decoration: none;
}

#subscribe-link:hover {
  background-color: #350810;
}
/*----- LOGO ---------------------------------------------------------*/

#logo {
  display: flex;
}

.nav-logo {
  height: 80px;
}

.logo-link {
  text-decoration: none;
  color: black;
}

/*----- COLORS ---------------------------------------------------------*/
.grey {
  background-color: #e4e4e4;

  min-height: 50px;
}

a.dropdown.dropbtn:hover,
a.active.dropdown.dropbtn,
button.dropbtn:hover,
button.dropbtn.active {
  color: white;
}

.red {
  background: red;
}
a.dropdown.dropbtn.red:hover,
a.dropdown.dropbtn.red.active {
  background-color: red;
}
.orange {
  background: orange;
}
button.orange.dropbtn:hover,
button.active.orange.dropbtn {
  background-color: orange;
}
.yellow {
  background: goldenrod;
}
a.dropdown.dropbtn:hover,
a.dropdown.dropbtn.yellow.active {
  background-color: goldenrod;
}
.green {
  background: rgb(0, 167, 0);
}
button.green.dropbtn:hover,
button.active.green.dropbtn {
  background-color: rgb(0, 167, 0);
}
.darkgreen {
  background: darkgreen;
}
button.darkgreen.dropbtn:hover,
button.active.darkgreen.dropbtn {
  background-color: darkgreen;
}
.blue {
  background: darkblue;
}
button.blue.dropbtn:hover,
button.active.blue.dropbtn {
  background-color: darkblue;
}
.purple {
  background: purple;
}
button.purple.dropbtn:hover,
button.active.purple.dropbtn {
  background-color: purple;
}
/*----- TOGGLE ---------------------------------------------------------*/
#toggle-nav {
  display: none;
  position: absolute;
  right: 20px;
  top: 88px;
  z-index: 1;
  background-color: #47b2ac;
  font-size: 25px;
  color: black;
  text-align: center;
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
#toggle-nav:hover {
  color: #47b2ac;
  background-color: black;
}
/*----- NAVIGATION BAR ---------------------------------------------------------*/
.navbar {
  overflow: hidden;
  font-family: 'Open Sans', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
    sans-serif;
  width: 100%;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  padding-right: 10px;
  padding-left: 10px;
  width: 100%;
}

input[type='text'] {
  padding: 6px;
  font-size: 20px;
  border: 1px solid gray;
  border-radius: 25px;
  width: 250px;
}
.search-container {
  position: absolute;
  right: 200px;
  width: 270px;
  top: 25px;
}

/*----- DROPDOWN ---------------------------------------------------------*/
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: #e4e4e4;
  font: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  background-color: #e4e4e4;
  width: 100%;
  max-width: 1400px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content .header {
  padding: 5px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/*----- COLUMNS ---------------------------------------------------------*/

/* Create equal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}
/*----- COLUMN EQUALS ---------------------------------------------------------*/

.sixteen {
  width: 16.665%;
}
.thirds {
  width: 33.33%;
}

.fourths {
  width: 25%;
}

.fifty {
  width: 50%;
}
/* */
#primary-nav {
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(28, 17, 27, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}
#primary-nav li {
  list-style: none;
}

/*----- MEDIA  -----------------------------------*/

@media screen and (max-width: 809px) {
  #primary-nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease-out;
  }

  #primary-nav li {
    display: block;
    min-height: 34px;
  }
  .dropdown {
    float: none;
    width: 100%;
  }
  .dropbtn {
    width: 100%;
  }

  body.nav-open #primary-nav {
    grid-template-rows: 1fr;
  }
  .column {
    width: 100%;
    height: auto;
  }
  .row {
    flex-direction: column;
  }
  .inner {
    overflow: hidden;
  }
  #toggle-nav {
    display: block; /* display button beneath breakpoint */
  }

  body.nav-open .inner {
    margin-top: 50px;
  }
}

/* Responsive layout - makes the  columns stack on top of each other instead of next to each other */
@media screen and (max-width: 750px) {
  .search-container input {
    width: 200px;
  }
  .search-container {
    right: 220px;
    width: 200px;
  }
}
/* Responsive layout - makes the  columns stack on top of each other instead of next to each other */
@media screen and (max-width: 660px) {
  .search-container {
    top: 92px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
}