@charset "UTF-8";
@import url("//hello.myfonts.net/count/37cb46");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

table, tbody, tfoot, tr, th, td, sup {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/**
 * @license
 * MyFonts Webfont Build ID 3656518, 2018-10-17T08:22:44-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Gilroy-Regular by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/regular/
 * Copyright: Copyright © 2016 by Radomir Tinkov. All rights reserved.
 * 
 * Webfont: Gilroy-RegularItalic by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/regular-italic/
 * Copyright: Copyright © 2015 by Radomir Tinkov. All rights reserved.
 * 
 * Webfont: Gilroy-Medium by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/medium/
 * Copyright: Copyright © 2016 by Radomir Tinkov. All rights reserved.
 * 
 * Webfont: Gilroy-Light by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/light/
 * Copyright: Copyright © 2016 by Radomir Tinkov. All rights reserved.
 * 
 * Webfont: Gilroy-ExtraBold by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/extra-bold/
 * Copyright: Copyright © 2016 by Radomir Tinkov. All rights reserved.
 * 
 * Webfont: Gilroy-Bold by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/bold/
 * Copyright: Copyright © 2016 by Radomir Tinkov. All rights reserved.
 * 
 * Webfont: Gilroy-Black by Radomir Tinkov
 * URL: https://www.myfonts.com/fonts/radomir-tinkov/gilroy/black/
 * Copyright: Copyright © 2016 by Radomir Tinkov. All rights reserved.
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3656518
 * Licensed pageviews: 500,000
 * 
 * © 2018 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: 'Gilroy-Regular';
  src: url("webfonts/37CB46_0_0.eot");
  src: url("webfonts/37CB46_0_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_0_0.woff2") format("woff2"), url("webfonts/37CB46_0_0.woff") format("woff"), url("webfonts/37CB46_0_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gilroy-RegularItalic';
  src: url("webfonts/37CB46_1_0.eot");
  src: url("webfonts/37CB46_1_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_1_0.woff2") format("woff2"), url("webfonts/37CB46_1_0.woff") format("woff"), url("webfonts/37CB46_1_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gilroy-Medium';
  src: url("webfonts/37CB46_2_0.eot");
  src: url("webfonts/37CB46_2_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_2_0.woff2") format("woff2"), url("webfonts/37CB46_2_0.woff") format("woff"), url("webfonts/37CB46_2_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gilroy-Light';
  src: url("webfonts/37CB46_3_0.eot");
  src: url("webfonts/37CB46_3_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_3_0.woff2") format("woff2"), url("webfonts/37CB46_3_0.woff") format("woff"), url("webfonts/37CB46_3_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gilroy-ExtraBold';
  src: url("webfonts/37CB46_4_0.eot");
  src: url("webfonts/37CB46_4_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_4_0.woff2") format("woff2"), url("webfonts/37CB46_4_0.woff") format("woff"), url("webfonts/37CB46_4_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gilroy-Bold';
  src: url("webfonts/37CB46_5_0.eot");
  src: url("webfonts/37CB46_5_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_5_0.woff2") format("woff2"), url("webfonts/37CB46_5_0.woff") format("woff"), url("webfonts/37CB46_5_0.ttf") format("truetype"); }

@font-face {
  font-family: 'Gilroy-Black';
  src: url("webfonts/37CB46_6_0.eot");
  src: url("webfonts/37CB46_6_0.eot?#iefix") format("embedded-opentype"), url("webfonts/37CB46_6_0.woff2") format("woff2"), url("webfonts/37CB46_6_0.woff") format("woff"), url("webfonts/37CB46_6_0.ttf") format("truetype"); }

html {
  margin-top: 0 !important; }

body {
  font-family: 'Gilroy-Regular';
  font-size: 1em;
  line-height: 1.5em; }

.site {
  text-align: center;
  margin: 0 auto;
  width: 900px; }
  @media screen and (max-width: 1000px) {
    .site {
      width: 90%; } }

.wpadminbar {
  display: none !important; }

.clear {
  clear: both; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

h2 {
  color: #206356;
  font-family: 'Gilroy-Bold';
  font-size: 3em;
  line-height: 1em;
  text-transform: uppercase; }

h3 {
  color: #206356;
  font-family: 'Gilroy-RegularItalic';
  font-size: 1.8em;
  line-height: 1em;
  margin-bottom: 1em; }

p {
  margin-bottom: 1em; }

strong {
  font-family: 'Gilroy-Bold'; }

.box {
  padding: 5em 0; }
  .box img {
    margin: 3em 0;
    width: 80%; }
  .box p {
    margin: 1em auto;
    width: 80%; }

.btn, section.bannerScreen .popupDrop span, section.bannerMobile .drop .popupDrop span, .contact form input.btn, .contact form textarea.btn {
  background: black url(layout/link.svg) no-repeat right center;
  background-size: auto 1em;
  border: 1px solid black;
  color: white;
  display: inline-block;
  font-family: 'Gilroy-Bold';
  font-size: 1.3vw;
  margin: 3em auto 0;
  padding: 1em 5em 1em 3em;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out; }
  .btn:hover, section.bannerScreen .popupDrop span:hover, section.bannerMobile .drop .popupDrop span:hover, .contact form input.btn:hover, .contact form textarea.btn:hover {
    background-color: white;
    background-image: url(layout/linkBlack.svg);
    color: black;
    cursor: pointer; }
  @media screen and (max-width: 800px) {
    .btn, section.bannerScreen .popupDrop span, section.bannerMobile .drop .popupDrop span, .contact form input.btn, .contact form textarea.btn {
      font-size: 2.1vw; } }

.alignRight {
  float: right;
  margin-left: 1em; }

header {
  background: #206356;
  padding: 1em 3%;
  position: fixed;
  width: 94%;
  z-index: 999; }
  @media screen and (max-width: 900px) {
    header {
      position: relative; } }
  header #burgerMenu {
    border-bottom: 1px solid white;
    display: none;
    float: left;
    padding-bottom: 1em;
    width: 100%; }
    header #burgerMenu .txt {
      background: url(layout/hashtagWhite.svg) no-repeat left 0.5em;
      background-size: auto 1em;
      color: white;
      float: left;
      font-family: 'Gilroy-Bold';
      padding-left: 2em;
      padding-top: 0.3em;
      text-transform: uppercase; }
    header #burgerMenu .lines {
      float: right;
      width: 2em; }
      header #burgerMenu .lines .line {
        background: #fff;
        -webkit-border-radius: 1em;
        border-radius: 1em;
        display: block;
        height: 0.2em;
        margin: 0.3em 0;
        width: 100%; }
    header #burgerMenu:hover .txt {
      color: #ffdd1e; }
    header #burgerMenu:hover .lines .line {
      background: #ffdd1e; }
    @media screen and (max-width: 900px) {
      header #burgerMenu {
        display: block; } }

.menuTop {
  display: block; }
  @media screen and (max-width: 900px) {
    .menuTop {
      display: none; } }

.menu {
  list-style: none; }
  .menu li {
    float: left;
    margin-right: 1em; }
    .menu li a {
      color: white;
      font-family: 'Gilroy-Bold';
      font-size: 0.8em;
      text-transform: uppercase;
      text-decoration: none;
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out; }
      .menu li a:hover {
        color: #ffdd1e; }
      @media screen and (max-width: 900px) {
        .menu li a {
          font-size: 2.5vw; } }
    .menu li:first-child a {
      background: url(layout/hashtagWhite.svg) no-repeat center center;
      background-size: auto 100%;
      display: block;
      height: 1.5em;
      opacity: 1;
      text-indent: -9999px;
      width: 1em; }
      .menu li:first-child a:hover {
        opacity: 0.5; }
  @media screen and (max-width: 900px) {
    .menu {
      padding: 4em 0 1em; }
      .menu li {
        float: inherit;
        text-align: center;
        width: 100%; }
        .menu li a {
          display: inline-block;
          padding: 1em 0; }
        .menu li:first-child {
          display: none; } }

.social-network {
  float: right;
  list-style: none; }
  .social-network li {
    display: inline-block;
    margin-right: 0.5em; }
    .social-network li a {
      background: no-repeat center center;
      background-size: 100% auto;
      display: block;
      height: 1em;
      opacity: 1;
      text-indent: -9999px;
      width: 1em;
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out; }
      .social-network li a:hover {
        opacity: 0.5; }
      .social-network li a.linkedin {
        background-image: url(layout/linkedin.svg); }
      .social-network li a.twitter {
        background-image: url(layout/twitter.svg); }
      .social-network li a.facebook {
        background-image: url(layout/facebook.svg); }
      .social-network li a.instagram {
        background-image: url(layout/instagram.svg); }
      .social-network li a.youtube {
        background-image: url(layout/youtube.svg); }
  @media screen and (max-width: 900px) {
    .social-network {
      clear: both;
      float: none;
      padding-top: 2em;
      text-align: center;
      width: 100%; }
      .social-network li {
        margin: 0 0.75em; }
        .social-network li a {
          height: 1.5em;
          width: 1.5em; } }

section.bannerScreen {
  background: #206356;
  padding: 6em 0 0;
  position: relative;
  width: 100%; }
  @media screen and (max-width: 900px) {
    section.bannerScreen {
      display: none; } }
  section.bannerScreen hgroup {
    float: left;
    left: 2em;
    position: absolute;
    top: 50%;
    width: 25%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    section.bannerScreen hgroup h1 img {
      width: 100%; }
    section.bannerScreen hgroup h2 {
      border-top: 2px solid white;
      border-bottom: 2px solid white;
      color: white;
      font-size: 1.1em;
      line-height: 1.5em;
      padding: 1em 0;
      text-transform: inherit; }
      section.bannerScreen hgroup h2 span {
        color: #208b98; }
  section.bannerScreen .popupDrop {
    color: white;
    display: none;
    opacity: 0;
    position: absolute;
    text-decoration: none;
    width: 20em;
    z-index: 30 !important;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    section.bannerScreen .popupDrop h2, section.bannerScreen .popupDrop h3 {
      color: white;
      font-family: 'Gilroy-Bold';
      font-size: 0.9em; }
    section.bannerScreen .popupDrop h2 {
      border-top: 1px solid white;
      padding: 1em;
      text-transform: inherit; }
    section.bannerScreen .popupDrop h3 {
      float: left;
      margin-bottom: 0;
      padding: 1em 1em 0;
      text-transform: uppercase; }
    section.bannerScreen .popupDrop p {
      font-size: 0.8em;
      line-height: 1.4em;
      margin: 0 1em 1em; }
    section.bannerScreen .popupDrop span {
      border: 0 none;
      float: right;
      font-size: 0.9em;
      margin-top: 0;
      padding: 0.5em 2em 0.5em 1em; }
    section.bannerScreen .popupDrop:hover span {
      background-color: white;
      background-image: url(layout/linkBlack.svg);
      color: black;
      cursor: pointer; }
    section.bannerScreen .popupDrop.yellow {
      color: black; }
      section.bannerScreen .popupDrop.yellow h2, section.bannerScreen .popupDrop.yellow h3 {
        color: black; }
      section.bannerScreen .popupDrop.yellow h2 {
        border-top: 1px solid black; }
  section.bannerScreen .dropsBox {
    float: right;
    overflow: hidden;
    padding-top: 45%;
    position: relative;
    width: 75%; }
    section.bannerScreen .dropsBox .drop {
      display: block;
      opacity: 0;
      position: absolute; }
      section.bannerScreen .dropsBox .drop.sizeS {
        width: 7%; }
      section.bannerScreen .dropsBox .drop.sizeXL {
        width: 55%; }
      section.bannerScreen .dropsBox .drop .linkDrops .mask, section.bannerScreen .dropsBox .drop .linkDrops .maskHover {
        background: no-repeat center center;
        background-size: 107% auto; }
      section.bannerScreen .dropsBox .drop .linkDrops .mask, section.bannerScreen .dropsBox .drop .linkDrops .maskHover, section.bannerScreen .dropsBox .drop .linkDrops .cover {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 4; }
      section.bannerScreen .dropsBox .drop .linkDrops .cover {
        opacity: 0;
        z-index: 3; }
      section.bannerScreen .dropsBox .drop .linkDrops .mask {
        background-image: url(layout/dropMask.svg); }
      section.bannerScreen .dropsBox .drop .linkDrops .maskHover {
        opacity: 0;
        z-index: 5;
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out; }
      section.bannerScreen .dropsBox .drop .linkDrops.yellow .maskHover {
        background-image: url("layout/dropMask-yellow.svg"); }
      section.bannerScreen .dropsBox .drop .linkDrops.orange .maskHover {
        background-image: url("layout/dropMask-orange.svg"); }
      section.bannerScreen .dropsBox .drop .linkDrops.saumon .maskHover {
        background-image: url("layout/dropMask-saumon.svg"); }
      section.bannerScreen .dropsBox .drop .linkDrops.pink .maskHover {
        background-image: url("layout/dropMask-pink.svg"); }
      section.bannerScreen .dropsBox .drop .linkDrops.magenta .maskHover {
        background-image: url("layout/dropMask-magenta.svg"); }
      section.bannerScreen .dropsBox .drop .linkDrops figure {
        overflow: hidden;
        position: relative;
        padding-top: 100%;
        width: 100%; }
        section.bannerScreen .dropsBox .drop .linkDrops figure img {
          left: 50%;
          opacity: 0;
          position: absolute;
          top: 50%;
          height: 100%;
          z-index: 2;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          animation: imgAppear 1s ease-in-out forwards;
          -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s; }
      section.bannerScreen .dropsBox .drop .linkDrops:hover .maskHover {
        opacity: 1; }
      section.bannerScreen .dropsBox .drop .linkDrops:hover .popupDrop {
        display: block;
        opacity: 1; }
  section.bannerScreen #drop1 {
    right: 0;
    top: 0;
    z-index: 1;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
    section.bannerScreen #drop1 .popupDrop {
      right: 10%;
      bottom: 5%; }
    section.bannerScreen #drop1 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 5s;
      animation-delay: 5s; }
  section.bannerScreen #drop2 {
    right: 45%;
    top: 25%;
    z-index: 2;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s; }
    section.bannerScreen #drop2 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop2:hover {
      z-index: 35; }
    section.bannerScreen #drop2 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 8s;
      animation-delay: 8s; }
  section.bannerScreen #drop3 {
    right: 80%;
    top: 0;
    z-index: 3;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s; }
    section.bannerScreen #drop3 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop3:hover {
      z-index: 35; }
    section.bannerScreen #drop3 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 14s;
      animation-delay: 14s; }
  section.bannerScreen #drop4 {
    right: 55%;
    top: 35%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop4 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop4:hover {
      z-index: 35; }
    section.bannerScreen #drop4 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 10s;
      animation-delay: 10s; }
  section.bannerScreen #drop5 {
    right: 63%;
    top: 20%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop5 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop5:hover {
      z-index: 35; }
    section.bannerScreen #drop5 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 8s;
      animation-delay: 8s; }
  section.bannerScreen #drop6 {
    right: 73%;
    top: 55%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop6 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop6:hover {
      z-index: 35; }
    section.bannerScreen #drop6 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop7 {
    right: 50%;
    top: 70%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop7 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop7:hover {
      z-index: 35; }
    section.bannerScreen #drop7 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop8 {
    right: 75%;
    top: 19%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop8 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop8:hover {
      z-index: 35; }
    section.bannerScreen #drop8 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop9 {
    right: 34%;
    top: 0;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop9 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop9:hover {
      z-index: 35; }
    section.bannerScreen #drop9 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop10 {
    right: 56%;
    top: 57%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop10 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop10:hover {
      z-index: 35; }
    section.bannerScreen #drop10 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop11 {
    right: 60%;
    top: 69%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop11 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop11:hover {
      z-index: 35; }
    section.bannerScreen #drop11 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop12 {
    right: 80%;
    top: 75%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop12 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop12:hover {
      z-index: 35; }
    section.bannerScreen #drop12 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop13 {
    right: 60%;
    top: 3%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop13 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop13:hover {
      z-index: 35; }
    section.bannerScreen #drop13 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop14 {
    right: 72%;
    top: 35%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop14 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop14:hover {
      z-index: 35; }
    section.bannerScreen #drop14 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop15 {
    right: 82%;
    top: 33%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop15 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop15:hover {
      z-index: 35; }
    section.bannerScreen #drop15 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop16 {
    right: 83%;
    top: 59%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop16 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop16:hover {
      z-index: 35; }
    section.bannerScreen #drop16 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop17 {
    right: 70%;
    top: 6%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop17 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop17:hover {
      z-index: 35; }
    section.bannerScreen #drop17 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop18 {
    right: 38%;
    top: 15%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop18 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop18:hover {
      z-index: 35; }
    section.bannerScreen #drop18 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop19 {
    right: 54%;
    top: 17%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop19 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop19:hover {
      z-index: 35; }
    section.bannerScreen #drop19 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop20 {
    right: 64%;
    top: 45%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop20 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop20:hover {
      z-index: 35; }
    section.bannerScreen #drop20 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop21 {
    right: 70%;
    top: 70%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop21 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop21:hover {
      z-index: 35; }
    section.bannerScreen #drop21 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }
  section.bannerScreen #drop22 {
    right: 79%;
    top: 46%;
    z-index: 4;
    animation: dropAppear 2s ease-in-out forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s; }
    section.bannerScreen #drop22 .popupDrop {
      left: 40%;
      top: 30%; }
    section.bannerScreen #drop22:hover {
      z-index: 35; }
    section.bannerScreen #drop22 .cover {
      animation: clickMe 12s ease-in-out infinite;
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

@keyframes imgAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes clickMe {
  0% {
    opacity: 0; }
  12.5% {
    opacity: 0.5; }
  25% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes dropAppear {
  0% {
    margin-top: -30%;
    margin-right: -60%; }
  70% {
    opacity: 0; }
  100% {
    margin-top: 0;
    margin-right: 0;
    opacity: 1; } }

section.bannerMobile {
  display: none;
  position: relative; }
  @media screen and (max-width: 900px) {
    section.bannerMobile {
      display: block; } }
  section.bannerMobile hgroup {
    width: 100%; }
    section.bannerMobile hgroup .maskSlider {
      background: url(layout/maskSlider.svg) no-repeat center center;
      background-size: 102% auto;
      left: 0;
      padding-top: 56.2%;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2; }
    section.bannerMobile hgroup h1 {
      left: 5%;
      position: absolute;
      top: 5%;
      width: 30%;
      z-index: 3; }
      section.bannerMobile hgroup h1 img {
        width: 100%; }
  section.bannerMobile .drop a {
    text-decoration: none; }
  section.bannerMobile .drop figure {
    overflow: hidden;
    padding-top: 56.2%;
    position: relative;
    width: 100%; }
    section.bannerMobile .drop figure img {
      left: 50%;
      position: absolute;
      top: 50%;
      width: 100%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    section.bannerMobile .drop figure .mask, section.bannerMobile .drop figure .maskHover, section.bannerMobile .drop figure .cover {
      display: none; }
  section.bannerMobile .drop .popupDrop {
    color: white;
    height: 40vw;
    text-decoration: none; }
    section.bannerMobile .drop .popupDrop h2, section.bannerMobile .drop .popupDrop h3 {
      color: white;
      font-family: 'Gilroy-Bold'; }
    section.bannerMobile .drop .popupDrop h2 {
      border-top: 1px solid white;
      font-size: 4vw;
      padding: 4vw 2vw 2vw;
      text-transform: inherit; }
    section.bannerMobile .drop .popupDrop h3 {
      float: left;
      font-size: 3vw;
      margin-bottom: 0;
      padding: 2vw 1em 0;
      text-transform: uppercase; }
    section.bannerMobile .drop .popupDrop p {
      font-size: 2.5vw;
      line-height: 4vw;
      margin: 0 1em 1em; }
    section.bannerMobile .drop .popupDrop span {
      border: 0 none;
      float: right;
      font-size: 3vw;
      margin-top: 0;
      padding: 0.5em 2em 0.5em 1em; }
    section.bannerMobile .drop .popupDrop:hover span {
      background-color: white;
      background-image: url(layout/linkBlack.svg);
      color: black;
      cursor: pointer; }
    section.bannerMobile .drop .popupDrop.yellow {
      color: black; }
      section.bannerMobile .drop .popupDrop.yellow h2, section.bannerMobile .drop .popupDrop.yellow h3 {
        color: black; }
      section.bannerMobile .drop .popupDrop.yellow h2 {
        border-top: 1px solid black; }
  section.bannerMobile .slick-arrow {
    background: no-repeat center center;
    background-size: 5vw 5vw;
    border: 0 none;
    height: 7em;
    opacity: 0.4;
    outline: none;
    position: absolute;
    text-indent: -9999px;
    top: 30%;
    width: 7em;
    z-index: 5;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    section.bannerMobile .slick-arrow.slick-prev {
      background-image: url(layout/prev.svg);
      left: 0; }
    section.bannerMobile .slick-arrow.slick-next {
      background-image: url(layout/next.svg);
      right: 0; }
    section.bannerMobile .slick-arrow:hover {
      opacity: 0.8; }

.grey {
  background-color: #F7F7F7; }

.green {
  background-color: #206356; }
  .green .drop {
    background-image: url(layout/dropGreen.svg); }

.blue {
  background-color: #208b98; }
  .blue .drop {
    background-image: url(layout/dropBlue.svg); }

.yellow {
  background-color: #ffdd1e; }
  .yellow .drop {
    background-image: url(layout/dropYellow.svg); }

.orange {
  background-color: #e59333; }
  .orange .drop {
    background-image: url(layout/dropOrange.svg); }

.saumon {
  background-color: #de7249; }
  .saumon .drop {
    background-image: url(layout/dropSaumon.svg); }

.pink {
  background-color: #cb5959; }
  .pink .drop {
    background-image: url(layout/dropPink.svg); }

.magenta {
  background-color: #b22351; }
  .magenta .drop {
    background-image: url(layout/dropMagenta.svg); }

#blog {
  line-height: 1.7em;
  padding-top: 90px;
  text-align: justify; }
  #blog h2 {
    margin-bottom: 1em;
    text-align: center; }
  #blog h3 {
    color: #208b98;
    margin-top: 2em; }
  #blog h4 {
    color: #208b98;
    font-family: 'Gilroy-RegularItalic';
    font-size: 1.3em; }
  #blog .img-top {
    margin-bottom: 1em;
    width: 100%; }
  #blog ul {
    margin: 0 2em 1em; }
  #blog a {
    color: #208b98; }
  #blog blockquote {
    border-top: 1px solid #ffdd1e;
    border-bottom: 1px solid #ffdd1e;
    margin: 2em 10%;
    padding: 2em 0;
    width: 80%; }
    #blog blockquote p {
      color: #208b98;
      font-family: 'Gilroy-RegularItalic'; }
    #blog blockquote cite {
      color: #ccc;
      font-size: 0.8em; }

ul.socialHow {
  float: left;
  width: 6em; }
  ul.socialHow li {
    display: block;
    float: left;
    padding-top: 60%;
    position: relative;
    width: 50%; }
    ul.socialHow li a {
      background: no-repeat center center;
      background-size: 40% auto;
      height: 100%;
      left: 0;
      position: absolute;
      text-indent: -9999px;
      top: 0;
      width: 100%;
      transition: all 0.25s ease-in-out;
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out; }
      ul.socialHow li a.linkedin {
        background-color: #A2BBD8;
        background-image: url(layout/linkedin.svg); }
      ul.socialHow li a.twitter {
        background-color: #77BBFF;
        background-image: url(layout/twitter.svg); }
      ul.socialHow li a.facebook {
        background-color: #2A6EB2;
        background-image: url(layout/facebook.svg); }
      ul.socialHow li a.instagram {
        background-color: #CE5B7A;
        background-image: url(layout/instagram.svg); }
      ul.socialHow li a:hover {
        background-size: 20% auto;
        background-color: #206356; }
  @media screen and (max-width: 900px) {
    ul.socialHow {
      float: none;
      width: 80%;
      margin: 0 auto; }
      ul.socialHow li {
        padding-top: 35%;
        width: 25%; } }

.canvas .site {
  padding: 3em 0;
  position: relative;
  text-align: left; }

.canvas .txt {
  float: left;
  padding: 0 5%;
  width: 60%; }
  .canvas .txt h2 {
    font-size: 1.3em;
    margin: 0.5em 0; }
  .canvas .txt p {
    line-height: 1.3em; }

.canvas img {
  bottom: 0;
  position: absolute;
  right: 0;
  width: 20%;
  -webkit-transform: rotate(9deg);
  -moz-transform: rotate(9deg);
  -o-transform: rotate(9deg);
  -ms-transform: rotate(9deg);
  transform: rotate(9deg); }

@media screen and (max-width: 900px) {
  .canvas .txt {
    clear: both;
    float: none;
    padding: 2em 5%;
    text-align: center;
    width: 90%; }
    .canvas .txt h2 {
      font-size: 3em; }
  .canvas img {
    bottom: inherit;
    margin: 1em 30%;
    position: relative;
    right: inherit;
    width: 40%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0); } }

.video {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  @media screen and (max-width: 800px) {
    .video {
      display: block; } }
  .video .boxVideo .btn, .video .boxVideo section.bannerScreen .popupDrop span, section.bannerScreen .popupDrop .video .boxVideo span, .video .boxVideo section.bannerMobile .drop .popupDrop span, section.bannerMobile .drop .popupDrop .video .boxVideo span, .video .txt .btn, .video .txt section.bannerScreen .popupDrop span, section.bannerScreen .popupDrop .video .txt span, .video .txt section.bannerMobile .drop .popupDrop span, section.bannerMobile .drop .popupDrop .video .txt span {
    margin-top: 0.5em; }
  .video .boxVideo {
    background: black;
    width: 70%; }
    .video .boxVideo .capsVideo {
      background: black;
      overflow: hidden;
      padding-top: 56.25%;
      position: relative;
      top: 50%;
      width: 100%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .video .boxVideo .capsVideo iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%; }
      .video .boxVideo .capsVideo img {
        min-height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%; }
    .video .boxVideo .capsImg {
      background: red;
      overflow: hidden;
      padding-top: 56.25%;
      position: relative;
      top: 50%;
      width: 100%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .video .boxVideo .capsImg img {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: auto; }
        @media screen and (max-width: 800px) {
          .video .boxVideo .capsImg img {
            height: auto;
            min-width: 100%; } }
      @media screen and (max-width: 800px) {
        .video .boxVideo .capsImg {
          padding-top: 56.25%;
          position: absolute; } }
    @media screen and (max-width: 800px) {
      .video .boxVideo {
        width: 100%;
        height: 0;
        margin-bottom: 2em;
        padding-top: 56.25%;
        position: relative;
        float: left;
        display: inline-block; }
        .video .boxVideo .capsVideo {
          background: inherit;
          height: 100%;
          left: 50%;
          padding-top: 0;
          position: absolute;
          top: 50%;
          width: 100%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          .video .boxVideo .capsVideo iframe, .video .boxVideo .capsVideo img {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%; } }
  .video .txt {
    padding: 3%;
    width: 24%; }
    .video .txt h2 {
      color: white;
      font-size: 4vw;
      line-height: 5vw;
      margin-bottom: 0.5em;
      text-transform: inherit; }
    @media screen and (max-width: 800px) {
      .video .txt {
        width: 94%;
        text-align: center; } }

.projects .slick-arrow {
  background: no-repeat center center;
  background-size: 3vw 3vw;
  border: 0 none;
  height: 3vw;
  opacity: 0.4;
  outline: none;
  position: absolute;
  text-indent: -9999px;
  top: 5vw;
  width: 3vw;
  z-index: 5;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out; }
  .projects .slick-arrow.slick-prev {
    background-image: url(layout/prevBlack.svg);
    left: 1vw; }
  .projects .slick-arrow.slick-next {
    background-image: url(layout/nextBlack.svg);
    right: 1vw; }
  .projects .slick-arrow:hover {
    opacity: 0.8; }

.projectBox .header {
  background: white;
  position: relative; }
  .projectBox .header .flag {
    background: no-repeat center center;
    background-size: 100% 100%;
    display: inline-block;
    height: 4vw;
    width: 6vw; }
    .projectBox .header .flag.malta {
      background-image: url("layout/flag-malta.png"); }
    .projectBox .header .flag.romania {
      background-image: url("layout/flag-romania.png"); }
    .projectBox .header .flag.slovakia {
      background-image: url("layout/flag-slovakia.png"); }
    .projectBox .header .flag.slovenia {
      background-image: url("layout/flag-slovenia.png"); }
    .projectBox .header .flag.poland {
      background-image: url("layout/flag-poland.png"); }
    .projectBox .header .flag.portugal {
      background-image: url("layout/flag-portugal.png"); }
  .projectBox .header .drop {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 15.4285714286vw;
    position: relative;
    width: 12vw; }
    .projectBox .header .drop div {
      background: url(layout/hashtagWhite.svg) no-repeat 1vw center;
      background-size: 2.5714285714vw;
      color: white;
      bottom: 10%;
      font-family: 'Gilroy-RegularItalic';
      font-size: 2.9142857143vw;
      left: 0;
      padding: 2.2285714286vw 0 1.7142857143vw 5.1428571429vw;
      position: absolute; }
  .projectBox .header hgroup {
    padding: 5vw 10vw;
    text-align: center; }
    .projectBox .header hgroup h3 {
      margin-bottom: 0; }
  .projectBox .header .drop, .projectBox .header .flag {
    top: 50%;
    position: absolute; }
  .projectBox .header .flag {
    border: 1px solid #ccc;
    left: 8vw;
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -o-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%); }
  .projectBox .header .drop {
    right: 6vw;
    z-index: 7;
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    transform: translateY(-30%); }

.projectBox .banner {
  background: #F7F7F7;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  @media screen and (max-width: 800px) {
    .projectBox .banner {
      display: block; } }
  .projectBox .banner .logo, .projectBox .banner .img {
    overflow: hidden;
    position: relative; }
    .projectBox .banner .logo img, .projectBox .banner .img img {
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    @media screen and (max-width: 800px) {
      .projectBox .banner .logo, .projectBox .banner .img {
        text-align: center img;
          text-align-left: 50%;
          text-align-position: relative;
          text-align-top: 50%;
        text-align--webkit-transform: translate(-50%, -50%);
        text-align--moz-transform: translate(-50%, -50%);
        text-align--o-transform: translate(-50%, -50%);
        text-align--ms-transform: translate(-50%, -50%);
        text-align-transform: translate(-50%, -50%); } }
  .projectBox .banner .logo {
    padding-top: 50%;
    width: 30%; }
    .projectBox .banner .logo img {
      width: 65%; }
    @media screen and (max-width: 800px) {
      .projectBox .banner .logo {
        width: 100%; }
        .projectBox .banner .logo img {
          height: 90%;
          width: auto; } }
  .projectBox .banner .img {
    width: 70%; }
    .projectBox .banner .img img {
      min-height: 100%;
      width: 100%; }
    @media screen and (max-width: 800px) {
      .projectBox .banner .img {
        padding-top: 56.25%;
        width: 100%; } }

.projectBox .video .txt h2, .projectBox .video .txt p {
  color: white; }

.projectBox .video .txt h2 {
  font-size: 1.5em;
  line-height: 1.2em;
  margin-bottom: 0.75em; }

.projectBox .article {
  background: white;
  padding: 6em 0 1em; }
  .projectBox .article .site {
    text-align: left;
    -webkit-column-count: 2;
    /* Old Chrome, Safari and Opera */
    -moz-column-count: 2;
    /* Old Firefox */
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px solid #707070;
    -moz-column-rule: 1px solid #707070;
    column-rule: 1px solid #707070; }
    @media screen and (max-width: 800px) {
      .projectBox .article .site {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        column-gap: 0;
        -webkit-column-rule: 0 none;
        -moz-column-rule: 0 none;
        column-rule: 0 none;
        text-align: center; } }
    .projectBox .article .site h3 {
      color: black;
      font-family: 'Gilroy-Bold';
      font-size: 1.6em; }
    .projectBox .article .site a {
      color: #206356; }

.projectBox .footer {
  background: white;
  padding: 1em 0 3em;
  text-align: center; }

.projectBox.yellow .drop {
  color: black; }
  .projectBox.yellow .drop div {
    background-image: url(layout/hashtagBlack.svg);
    color: black; }

.projectBox.yellow .video .txt h2, .projectBox.yellow .video .txt p {
  color: black; }

.greenBloc {
  background: #206356;
  color: white;
  margin-top: 2em;
  padding: 2em 0;
  text-align: center; }
  .greenBloc .site {
    text-align: left; }
    .greenBloc .site h3 {
      color: #ffdd1e; }
    .greenBloc .site ol {
      margin: 0 2em; }
      .greenBloc .site ol li {
        margin-bottom: 0.5em; }
    .greenBloc .site a {
      color: white; }
      .greenBloc .site a:hover {
        color: #ffdd1e; }

.moreProjects {
  margin-top: 3em;
  position: relative; }
  .moreProjects div {
    margin-right: 1px; }
    .moreProjects div a {
      color: white;
      display: block;
      height: auto;
      padding-top: 100%;
      position: relative;
      width: 100%; }
      .moreProjects div a hgroup {
        position: absolute;
        right: 3vw;
        top: -3vw;
        z-index: 10;
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out; }
        .moreProjects div a hgroup .drop {
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 9vw;
          position: relative;
          width: 7vw; }
          .moreProjects div a hgroup .drop div {
            background: url(layout/hashtagWhite.svg) no-repeat 1vw center;
            background-size: 1.5vw;
            color: white;
            bottom: 10%;
            font-family: 'Gilroy-RegularItalic';
            font-size: 1.7vw;
            left: 0;
            padding: 1.3vw 0 1vw 3vw;
            position: absolute; }
        .moreProjects div a hgroup .flag {
          background: no-repeat center center;
          background-size: 100% 100%;
          display: inline-block;
          height: 2vw;
          width: 3vw; }
          .moreProjects div a hgroup .flag.malta {
            background-image: url("layout/flag-malta.png"); }
          .moreProjects div a hgroup .flag.romania {
            background-image: url("layout/flag-romania.png"); }
          .moreProjects div a hgroup .flag.slovakia {
            background-image: url("layout/flag-slovakia.png"); }
          .moreProjects div a hgroup .flag.slovenia {
            background-image: url("layout/flag-slovenia.png"); }
          .moreProjects div a hgroup .flag.poland {
            background-image: url("layout/flag-poland.png"); }
          .moreProjects div a hgroup .flag.portugal {
            background-image: url("layout/flag-portugal.png"); }
        .moreProjects div a hgroup .flag, .moreProjects div a hgroup .drop {
          float: right; }
        .moreProjects div a hgroup .flag {
          margin-top: 5vw;
          margin-right: 1vw; }
      .moreProjects div a figure, .moreProjects div a span, .moreProjects div a img {
        height: 100%;
        left: 50%;
        position: absolute;
        top: 50%;
        width: auto;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .moreProjects div a figure {
        overflow: hidden;
        width: 100%;
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out; }
        .moreProjects div a figure img {
          margin: 0;
          min-height: 100%; }
      .moreProjects div a span {
        background: black;
        opacity: 0.4;
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out; }
      .moreProjects div a h3 {
        color: white;
        font-size: 1.7vw;
        left: 50%;
        line-height: 2.3vw;
        opacity: 1;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 70%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .moreProjects div a:hover hgroup {
        top: -0.5vw; }
      .moreProjects div a:hover figure {
        opacity: 0.3; }
      .moreProjects div a:hover span {
        height: 80%;
        width: 80%; }
      .moreProjects div a.yellow .drop {
        color: black; }
        .moreProjects div a.yellow .drop div {
          background-image: url(layout/hashtagBlack.svg);
          color: black; }
  .moreProjects .slick-arrow {
    background: black no-repeat center center;
    background-size: 3vw 3vw;
    border: 0 none;
    height: 100%;
    opacity: 0.4;
    outline: none;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 3vw;
    z-index: 5;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    .moreProjects .slick-arrow.slick-prev {
      background-image: url(layout/prev.svg);
      left: 0; }
    .moreProjects .slick-arrow.slick-next {
      background-image: url(layout/next.svg);
      right: 0; }
    .moreProjects .slick-arrow:hover {
      opacity: 0.8; }

.catProjects {
  list-style: none;
  width: 100%; }
  .catProjects li {
    background: #e59333;
    color: white;
    float: left;
    font-family: 'Gilroy-Bold';
    padding: 1em 2.5%;
    text-align: center;
    text-transform: uppercase;
    width: 20%; }
    @media screen and (max-width: 750px) {
      .catProjects li {
        width: 45%; } }
  .catProjects li + li {
    background: #ffdd1e; }
  .catProjects li + li + li {
    background: #de7249; }
  .catProjects li + li + li + li {
    background: #cb5959; }

.idea h2, .idea h3, .idea p {
  color: white; }

.project .video {
  bacgkround: #ffdd1e; }

.contact form {
  margin: 3em auto 0;
  text-align: left;
  width: 80%; }
  .contact form label {
    color: #A7A7A7;
    display: block;
    float: left;
    padding: 1.2em 0;
    text-transform: uppercase;
    width: 20%; }
  .contact form input, .contact form textarea {
    background: white;
    border: 0 none;
    font-family: 'Gilroy-Regular';
    font-size: 1.1em;
    margin-bottom: 1em;
    outline: none;
    padding: 1em 5%;
    width: 70%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    .contact form input.wpcf7-not-valid, .contact form textarea.wpcf7-not-valid {
      background: #ffdd1e; }
    .contact form input:focus, .contact form textarea:focus {
      background: #206356;
      color: white; }
    .contact form input.btn, .contact form textarea.btn {
      margin-left: 20%;
      width: auto; }
  .contact form .wpcf7-not-valid-tip {
    display: none; }
  .contact form .wpcf7-response-output {
    margin: 0 auto;
    width: 80%; }
  @media screen and (max-width: 900px) {
    .contact form {
      width: 100%; }
      .contact form p {
        width: 100%; } }

.contact .ninja-forms-req-symbol {
  display: none !important; }

.contact .nf-field-label {
  width: 20%; }

.contact .nf-field-element {
  width: 80% !important; }
  .contact .nf-field-element textarea {
    width: 100%; }

.contact .nf-form-fields-required {
  margin-bottom: 1em; }
  .contact .nf-form-fields-required .ninja-forms-req-symbol {
    display: inline-block !important; }

.contact .ninja-forms-field:focus {
  background: #206356 !important;
  color: white !important; }

.join {
  padding: 3em 0;
  text-align: center; }

footer {
  background: black;
  color: white;
  padding: 2em 5%;
  position: relative;
  width: 90%; }
  footer .top {
    background: #206356 url(layout/next.svg) no-repeat center center;
    background-size: 50% auto;
    display: block;
    height: 2em;
    position: absolute;
    right: 1em;
    top: -1em;
    width: 2em;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg); }
    footer .top:hover {
      background-color: #ffdd1e; }
  footer .site {
    text-align: left; }
  footer .norwayImg {
    width: 30%; }
    @media screen and (max-width: 900px) {
      footer .norwayImg {
        margin-left: 10%;
        width: 80%; } }
  footer a {
    color: white; }
  footer .logo, footer .initiative, footer .menu {
    float: left;
    margin-top: 4vw; }
    @media screen and (max-width: 900px) {
      footer .logo, footer .initiative, footer .menu {
        float: none; } }
  footer .logo {
    width: 15%; }
    @media screen and (max-width: 900px) {
      footer .logo {
        margin: 3em 25%;
        width: 40%; } }
  footer .initiative {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    font-size: 1.2vw;
    line-height: 1.5vw;
    margin-left: 10%;
    margin-right: 10%;
    padding: 2vw 0 1vw;
    width: 30%; }
    footer .initiative p {
      margin-bottom: 0; }
    @media screen and (max-width: 900px) {
      footer .initiative {
        font-size: 2.5vw;
        line-height: 3vw;
        margin: 0;
        padding: 4vw 0;
        text-align: center;
        width: 100%; } }
  footer .menu {
    width: 33%; }
    footer .menu li:first-child {
      display: none; }
    footer .menu li {
      float: left;
      margin-right: 0;
      margin-bottom: 1.2vw;
      width: 50%; }
      footer .menu li a {
        font-family: 'Gilroy-Bold';
        font-size: 0.9em;
        text-decoration: none;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out; }
        footer .menu li a:hover {
          color: #ffdd1e; }
    @media screen and (max-width: 900px) {
      footer .menu {
        width: 100%; }
        footer .menu li + li {
          width: 100%; }
        footer .menu li + li + li {
          width: 50%; }
        footer .menu li {
          text-align: center; } }