@charset "UTF-8";
@font-face {
  font-family: "BreeSerif";
  src: url("../fonts/BreeSerif-Regular.otf") format("woff2"), url("../fonts/BreeSerif-Regular.otf") format("woff"), url("../fonts/BreeSerif-Regular.otf") format("truetype"); }

@font-face {
  font-family: "myfont";
  src: url("../../fonts/myfont.woff2") format("woff2"), url("../../fonts/myfont.woff") format("woff"), url("../../fonts/myfont.ttf") format("truetype"); }

.icon-darrow:before, .icon-fontello:before, .icon-hamburger:before {
  font-family: "myfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none; }

.icon-darrow:before {
  content: ""; }

.icon-fontello:before {
  content: ""; }

.icon-hamburger:before {
  content: ""; }

* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif; }

.title {
  text-transform: uppercase;
  font-family: "BreeSerif";
  font-size: 30px; }

.title-span {
  text-transform: uppercase;
  color: #53a665; }

.title--body {
  font-size: 24px;
  font-weight: 400; }

.header {
  background-color: #fdfdfd;
  padding: 1em 0; }

.header-container {
  padding: 0 9em;
  max-width: 1020px;
  margin: 0 auto;
  display: flex; }

.logo {
  text-transform: uppercase; }

.nav {
  margin-left: auto;
  display: flex; }

.nav-list {
  display: flex;
  list-style: none;
  line-height: 40px; }

.nav-hamburger {
  visibility: hidden;
  width: 0; }

.nav-list__link {
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "BreeSerif";
  color: black; }

.navlist-selected {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  bottom: -5px;
  left: 25%; }

.nav-list__link:hover {
  color: #808080; }

.nav-list__item-span {
  margin: 0 0.7em; }

.main {
  min-height: 420px;
  background-image: linear-gradient(180deg, #333333 25%, #b0b0b0 25%, #b0b0b0 50%, #333333 50%, #333333 75%, #b0b0b0 75%, #b0b0b0 100%);
  display: flex; }

.maincontainer {
  padding: 0 9em;
  max-width: 1020px;
  margin: 0 auto;
  display: flex; }

.maincontainer-left {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2em 1em 0 1em;
  margin-right: 3em; }

.maincontainer-left__title {
  color: #53a665;
  font-size: 24px;
  font-family: "BreeSerif";
  font-weight: 400;
  margin-bottom: 10px; }

.maincontainer-left__paragh {
  margin-bottom: 2em; }

.maincontainer-left__paragh-green {
  color: #53a665;
  text-decoration: underline; }

.btn {
  color: white;
  background-color: #53a665;
  padding: 0 1px;
  max-width: max-content;
  text-decoration: none;
  color: white; }
  .btn:hover {
    background-color: #84be91; }

.icon-darrow {
  font-size: 10px; }

.btn--right {
  width: 80px;
  margin-left: auto; }

.btn--center {
  margin: 0.5em auto; }

.maincontainer-right {
  padding: 5em 0;
  margin-left: auto; }

.maincontainer-right__video {
  background-image: url("../images/video player.png");
  position: relative;
  display: inline-block;
  width: auto;
  padding-bottom: 1em;
  margin-left: auto; }

.maincontainer-right__video-title {
  position: absolute;
  top: 35%;
  right: 50%;
  transform: translate(50%);
  text-transform: uppercase; }

.maincontainer-right__video-subtitle {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%); }

.threecolls {
  background-color: #f7f7f7; }

.threecolls-container {
  padding: 0 9em;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 8em;
  display: flex; }

.threecolls-container__item {
  padding: 2em 1.5em;
  text-align: center; }

.footer {
  background-color: #f7f7f7; }

.footcontainer {
  padding: 0 9em;
  max-width: 1020px;
  margin: 0 auto;
  display: flex; }

.footcontainer-left {
  padding: 0.5em 0;
  border-top: 1px solid #cccccc;
  flex-basis: 50%; }

.footcontainer-left__copyright {
  font-family: "Verdana", sans-serif;
  font-size: 10px; }

.footcontainer-right {
  padding: 0.5em 0;
  border-top: 1px solid #cccccc;
  flex-basis: 50%;
  text-align: right; }

.footcontainer-right__img {
  margin: 0 0.2em; }

.active {
  color: #53a665; }

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .header-container {
    padding: 0 2em; }
  .title {
    font-weight: 400; }
  .main {
    background-image: none;
    background-color: #f7f7f7; }
  .maincontainer {
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap; }
  .maincontainer-left {
    order: 2;
    margin: 0 10em;
    padding: 1.5em 2.5em; }
  .maincontainer-left__title,
  .maincontainer-left__paragh {
    margin-bottom: 1em; }
  .maincontainer-right {
    text-align: center;
    min-width: 100%;
    background-image: linear-gradient(180deg, #333333 25%, #b0b0b0 25%, #b0b0b0 50%, #333333 50%, #333333 75%, #b0b0b0 75%, #b0b0b0 100%); }
  .maincontainer-right__video {
    background-repeat: no-repeat; }
  .threecolls-container {
    padding: 1em 0 0; }
  .threecolls-container__item {
    padding: 2em 1em 1em; }
  .footcontainer {
    padding: 0 2em; } }

@media only screen and (max-width: 767px) {
  .header {
    padding: 0 1em;
    line-height: 40px; }
  .header-container {
    padding: 0; }
  .title {
    font-size: 20px; }
  .nav-list {
    background-color: #fdfdfd;
    padding: 1em;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 2.5em;
    left: 0;
    background-color: #fff;
    transition: 0.5s ease-out;
    transform: translateY(100%);
    flex-wrap: wrap;
    z-index: 99; }
    .nav-list.visible {
      transform: translateY(0); }
  .nav-list__item {
    flex: 1 1 100%; }
  .nav-list__item-span {
    display: none; }
  .nav-hamburger {
    visibility: visible;
    padding-right: 1em;
    margin-left: auto; }
  .maincontainer {
    padding: 1.2em;
    background-color: #b0b0b0; }
  .maincontainer-left {
    margin: 0;
    padding: 1em;
    transform: translateY(0); }
  .maincontainer-left__title {
    font-size: 20px;
    margin-bottom: 0.5em; }
  .maincontainer-left__paragh {
    font-size: 14px;
    margin-bottom: 0.5em; }
  .maincontainer-right {
    display: none; }
  .threecolls-container {
    display: block; }
  .footcontainer {
    text-align: center;
    display: block; }
  .footcontainer-right {
    border: none;
    text-align: center; } }