/* General */

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  color: #212121;
  font-family: 'Titillium Web', sans-serif;
}

section {
  width: 100%;
  margin: auto;
  height: auto;
  padding: 70px 5rem 10vh;
  display: block;
  max-width: 70%;
  box-sizing: content-box;
}

a { text-decoration: none; }

video { width: 100%; }

.bg {
  height: calc(47vw - 120px);
  width: 100%;
  position: relative;
  background-attachment: fixed;
  overflow: hidden;
}

.bg::after {
  width: 100vw;
  content: " ";
  display: block;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.2);
}

.bg h1 {
  font-size: 6rem;
  color: white;
  margin: auto;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Permanent Marker', sans-serif;
  width: 100%;
  text-align: center;
  text-shadow: 2px 6px 5px black;
}

@keyframes TopDown {
  0% { top: -50%; }
  100% { top: 50%; }
}

main {
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

header div,
main div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: auto;
}

.wrapper {
  flex-flow: row wrap;
  padding-bottom: 10vh;
}

/* Header */

header {
  overflow: visible;
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
  background-color: #fff;
  box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 50%);
  height: 120px;
  transition: top .4s ease;
}

.navigation-bar {
  display: block;
  position: relative;
  height: inherit;
}


.navigation-bar > .navigation-login {
  height: 50px;
  position: absolute;
  top: 0;
  transition: top .4s ease;
  background-image: linear-gradient(45deg, #001835, #006d73);
  z-index: 1;
}

.navigation-bar > .navigation-login > .navigation-container { justify-content: flex-end; }

.navigation-bar > .navigation-login > .navigation-container ul {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0;
}

.navigation-bar > .navigation-login > .navigation-container ul li {
  display: flex;
  padding: 0 1rem;
  height: 30px;
}

.navigation-bar > .navigation-login > .navigation-container ul li:not(:last-child) { border-right: 1px solid #97db4f; }

.navigation-bar > .navigation-login > .navigation-container ul li:last-child { padding-right: 0; }

.navigation-bar > .navigation-login > .navigation-container ul li a {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  color:#8bc34a;
  font-size: .8rem;
  font-family: 'Lato', Helvetica, sans-serif;
}

.navigation-bar > .navigation-login > .navigation-container ul li a:hover { color: white; }

.navigation-bar > .navigation-login > .navigation-container ul li a span  { cursor: pointer; }

.navigation-bar > .navigation-login > .navigation-container ul li a figure {
  margin: 0;
  display: block;
  max-height: 30px;
  margin-right: .5rem;
}

.navigation-bar > .navigation-login > .navigation-container ul li a figure img {
  width: 30px;
  height: 30px;
}

.navigation-bar > .navigation-login > .navigation-container,
.navigation-bar > .navigation-menu > .navigation-container { max-width: 90%; }

@media (min-width: 1400px) {
  .navigation-bar > .navigation-login > .navigation-container,
  .navigation-bar > .navigation-menu > .navigation-container { max-width: 75%; }
}

.navigation-bar > .navigation-menu {
  background-color: white;
  position: relative;
  top: 50px;
  transition: top .4s ease;
  z-index: 1;
}

/* Logo */

.logo { flex: 0 1; }

.logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-family: Rezland, "Trebuchet MS", Helvetica, sans-serif;
  color: #276e6a;
  position: relative;
  width: inherit;
  height: 70px;
}

.logo a:focus { min-width: 200px; }

.logo a span,
.logo a img {
  position: absolute;
  transition: 
    top .4s ease, 
    left .4s ease,
    font-size .4s ease,
    height .4s ease;
 }
 
.logo a span:first-child { left: 0; }
.logo a span:last-child { left: 137px; }

.logo a img {
  width: auto;
  height: 70px;
  margin: auto;
  top: -21px;
  left: 104px;
}

.logo.resized a { font-size: 2rem; }
.logo.resized a span:last-child { left: 111px; }
.logo.resized a img {
  height: 42px;
  top: 7px;
  left: 88px;
}

/* Menu */

.menu {
  flex: 1 1;
  height: 100%;
  justify-content: flex-end;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu ul li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 0 .5rem;
}

.menu > ul > li {
  padding-bottom: 1rem;
  margin-top: 1rem;
}

.menu > ul > li:not(:first-child)::before {
  content: " ";
  width: 1px;
  height: 1px;
  display: block;
  border-radius: 100%;
  border: 2px solid #97db4f;
  background-color: #97db4f;
  margin-right: 1rem;
}

.menu li a {
  display: block;
  color: #313131;
  text-align: center;
  font-size: 13px;
  font-family: 'Lato', Helvetica, sans-serif;
  cursor: pointer;
  margin: 0 12px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

/* On hover change the color of the link */

.menu > ul > li > a:hover,
.menu > ul > li > a:focus,
.menu .active { border-color: #52b5af; }

/* Dropdown Menu */

.menu .dropdown { position: relative; }
.menu .dropdown span { display: none; }

/* Dropdown Content */

.menu .dropdown-content,
.menu .dropdown-content .subdropdown-content {
  display: none;
  position: absolute;
  top: 2rem;
  left: 41px;
  z-index: 2;
  background-color: white;
  width: max-content;
  padding: .5rem 1rem;
  border-radius: 4px;
}

.menu .dropdown-content li {
  margin: .25rem 0;
  padding: 0;
}

/* Subdropdown content*/

.menu .dropdown-content .subdropdown-content {
  top: 0;
  left: 175px;
}

/* Style of submenus links */

.menu .dropdown-content a:hover,
.menu .dropdown-content a:focus,
.menu .subdropdown-content a:hover,
.menu .subdropdown-content a:focus {border-color: #52b5af;}

/* Add some space after the element to prevent the submenu to disappear */

.menu .dropdown-content > li::after,
.menu .dropdown-content > .dropdown li::after {
  content: " ";
  display: flex;
  width: 5px;
  height: 36px;
  position: absolute;
  left: 170px;
}

/* When the dropdown element is hovered show the content */

.menu .dropdown:hover .dropdown-content,
.menu .dropdown:focus .dropdown-content { 
  display: flex;
  flex-flow: column nowrap;
  box-shadow: 0 0 5px 1px grey;
}

/* When the dropdown-content element is hovered show the sub content */

.menu .dropdown-content li:hover > .subdropdown-content,
.menu .dropdown-content li:focus > .subdropdown-content {
  display: block;}

/* Search Bar */

.search_icon svg {
  width: 100%;
  margin-left: 1rem;
  max-width: 1.1rem;
  fill: #2d2d2d;
  transition: fill .2s ease;
  cursor: pointer;
}

.search_bar svg {
  fill: white;
  margin-left: 1rem;
}

.search_icon span {
  display: none;
  margin-left: 12px;
  font-size: 13px;
  font-family: 'Lato', Helvetica, sans-serif;
  cursor: pointer;
  color: white;
}

.search_icon svg:hover { fill: #757575; }

.search_bar {
  height: 70px;
  overflow-y: hidden;
  position: relative;
  top: -100px;
  z-index: 0;
  transition: top .4s ease;
}

.search_bar form {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: white;
  border-radius: 40px;
  padding: .5rem 2rem;
  box-sizing: content-box;
  box-shadow: 0px 2px 5px 1px #929292;
}

.search_bar form label { display: none; }

.search_bar form input[type="search"] {
  color: #212121;
  padding: .5rem;
  width: 100%;
  border: none;
  border-bottom: 1px solid #17c6e2;
  font-size: 1rem;
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
}

.search_bar form input[type="search"]:focus { outline: none; }

.search_bar form input[type="submit"] {
  border: none;
  background-image: url('/assets/img/icon/search.svg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.1rem;
  background-color: transparent;
  cursor: pointer;
  margin-left: 1rem;
}

.search_bar.active {}
.search_bar.hidden { display: flex; }

/* Burger Menu */

.burger-menu {
  display: none;
  cursor: pointer;
  z-index: 1;
  width: auto;
  margin-right: 1rem;
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 5px;
  background-color: #212121;
  margin: 6px 0;
  transition: all 0.4s ease;
}

.burger-menu.change { display: inline-block; }

.change .bar1,
.change .bar3  { background-color: white; }

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 { opacity: 0; }

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/* Footer */
footer {
  background-image: linear-gradient(45deg, #001835, #006d73);
  display: block;
  font-family: 'Titillium Web', sans-serif;
}

footer > div div {
  display: block;
  color: white;
}

footer > div:first-child {
  width: 100%;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  padding: 2rem 0;
}

footer #footer_logo { display: block; }

footer #footer_logo h5 {
  font-weight: 400;
  font-size: 1.1rem;
}

footer .logo a {
  font-size: 3.5rem;
}

footer .logo a img {
  height: 90px;
  left: 149px;
  top: -34px;
}

footer .logo a span:last-child { left: 193px; }

footer p {
  color: #b5b5b5;
  font-size: .7rem;
  margin: 0;
  margin-right: 2rem;
}

footer p a {
  color: #b5b5b5;
  transition: color .2s ease;
}
footer p a:hover { color: white; }

footer #footer_data { margin: 0 1rem 0 3rem; }

footer #footer_logo,
footer #footer_data { min-width: 300px; }

footer #footer_data p { margin: .15rem 0; }

footer #footer_links { flex: 0 1 25%; }

footer #footer_links p { margin: .15rem 0 .15rem 2rem; }

footer #footer_links p a,
#footer_social p a {
  display: flex;
  align-items: center;
  font-size: .8rem;
}

#footer_social {
  flex-flow: column nowrap;
  flex: 0 0;
}

#footer_social p { margin: .5rem 0; }

#footer_social img {
  height: 35px;
  margin-right: 1rem;
}

/* Title */

.title {
  display: block;
  padding-bottom: 3rem;
}

.title h1,
.title h2,
.title h3,
.title h4,
.title h5 {
  width: 100%;
  display: flex;
  align-items: center;
  color: #009e95;
  text-transform: uppercase;
  font-size: 2.5rem;
  line-height: inherit;
  margin: 0;
  font-family: 'Permanent Marker';
  word-break: break-word;
}

.title h3 { font-size: 2rem; }
.title h4 { font-size: 1.5rem; }
.title h5 { font-size: 1.3rem; }

.button {
  padding: .8rem 1.5rem;
  color: white;
  background-color: #29ad77;
  background-image: linear-gradient(45deg, #2af598, #009efd);
  display: block;
  margin-left: 0;
  max-width: max-content;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: 'Titillium Web', sans-serif;
  transition: background-color .6s ease;
}

.button:hover {
  background: none;
  background-color: #005e82;
}