@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;600;700;800;900&display=swap');

/*** MISC ***/
* {
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
html {
  font-size: 14px; }
p {
  color: #161616;
  font-weight: 400;
  line-height: 2; }
a {
  color: #161616;
  text-decoration: underline; }
a:hover,
a:focus {
  color: #161616;
  text-decoration: none; }
p, body, h1, h2 {
  font-family: 'Nunito Sans', sans-serif; }
.btn, button {
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  outline: 0;
  outline-offset: 0;
  cursor: pointer;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  background-color: #1D71B8;
  border: 2px solid #1D71B8;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
  padding: 0.7rem 1.3rem; }
.btn:hover, button:hover,
.btn:focus, button:focus {
  color: #1D71B8;
  background-color: #FFF;
  border: 2px solid #1D71B8;
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none; }
img {
  max-width: 100%; }
.video {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; }
.container {
  width: auto;
  padding: 0 20px;
  max-width: 100%;
  width: 100%; }
.container-fluid {
  padding: 0 20px; }
.my-content,
.my-content-big {
  margin-top: 60px;
  margin-bottom: 60px; }
.fill-viewport {
  height: 100vh; }
.relative {
  position: relative; }

/*** HEADER ***/
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent; }

.hello {
  color: #1D71B8;
  z-index: 100;
  position: fixed;
  top: 50%;
  right: -20px;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); }

/*** HERO ***/
.hero {
  text-align: center;
  min-height: calc(100vh - 55px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 0; }
.hero:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(22, 22, 22, 0.6); }
.hero p.title {
  color: #FFFFFF;
  font-weight: 400;
  font-size: 1.27rem;
  line-height: 1.35;
  text-align: center;
  margin-bottom: 0.90rem; }
.navbar-brand {
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2; }
.navbar-brand img {
  width: 100px;
  height: 69px; }

/*** 404 ***/
body.e404 h1 {
  color: #161616;
  margin-bottom: 2rem; }
body.e404 .logo {
  display: inline-block;
  margin-bottom: 2rem; }

/*** CONTENT ***/
h1 {
  color: #FFFFFF;
  font-weight: 900;
  font-size: 3.63;
  line-height: 1;
  margin-bottom: 2.72rem; }
h1.black {
  color: #161616; }
blockquote cite {
  color: #161616;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.38;
  font-style: normal;
  display: block;
  margin-bottom: 15px; }
blockquote cite:before {
  content: '\2015';
  margin-right: 20px; }
blockquote p {
  color: #161616;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4; }
div.title {
  color: #161616;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.36;
  margin-bottom: 20px; }
.moving-mouse-holder {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin: auto;
  margin-top: 60px;
  margin-left: -10px;
  width: 20px; }
.moving-mouse-holder .mouse {
  width: 20px;
  height: 30px;
  position: relative;
  right: 0;
  border-radius: 18px;
  border: 2px solid #fff; }
.moving-mouse-holder .mouse-button {
  background-color: #fff;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -2px;
  -webkit-animation: mouse-scroll 1s infinite alternate;
          animation: mouse-scroll 1s infinite alternate; }

@-webkit-keyframes mouse-scroll {
  to {
    -webkit-transform: translate(0, 6px) scale(1, 0.8);
            transform: translate(0, 6px) scale(1, 0.8);
  }
}

@keyframes mouse-scroll {
  to {
    -webkit-transform: translate(0, 6px) scale(1, 0.8);
            transform: translate(0, 6px) scale(1, 0.8);
  }
}
  @-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
    60% {
      -webkit-transform: translateY(-7.5px);
      transform: translateY(-7.5px);
    }
  }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -ms-transform: translateY(-15px);
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
    60% {
      -ms-transform: translateY(-7.5px);
      -webkit-transform: translateY(-7.5px);
      transform: translateY(-7.5px);
    }
  }
  .bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite; }
.wwd p {
  color: #161616;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4; }
.steps {
  position: relative; }
.steps .stick {
  display: none; }
.steps .pic {
  padding-bottom: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
.steps .text::-webkit-scrollbar {
  display: none; }
.steps div.title {
  color: #1D71B8;
  font-weight: 400;
  font-size: 1.27rem;
  line-height: 1.35;
  margin-bottom: 10px; }
.steps p {
  color: rgba(22, 22, 22, 0.5);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.36; }
.steps p.title {
  color: #161616;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.37;
  margin-bottom: 15px; }
.icos-boxes {
  text-align: center; }
.icos-boxes img {
  height: 50px;
  margin-bottom: 20px; }
.icos-boxes p {
  color: #161616;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.35; }
.cta {
  text-align: center; }
.cta p {
  color: #161616;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 30px; }
.cta p a {
  font-weight: 900;
  text-decoration: none; }

/*** ICO's ***/
[class^="ico-"] {
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

/*** FOOTER ***/
footer {
  text-align: center;
  position: relative;
  background-color: #161616;
  padding: 60px 0; }
footer .logo img {
  width: 90px;
  height: 62.1px;
  margin-bottom: 30px; }
footer p.big,
footer p.big a {
  color: #FFFFFF;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.37; }
footer p.big a {
  color: #FCD905; }
footer .copy-legals p,
footer .copy-legals a {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.37; }
footer .copy-legals p {
  margin: 0; }
footer .scroll-up {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 30px;
  height: 30px;
  background-image: url('../images/up-arrow.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

@media (min-width: 768px) {

 .hero {
  min-height: 100vh; }
.steps .text {
  /* position: absolute; */
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: auto;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: 0;
  padding-top: 18%;
  padding-right: 7%;
  padding-bottom: 15% }
.steps .stick {
  top: 0px;
  right: 0px;
  position: absolute;
  display: block;
  width: 50%; }
.steps .pic {
  margin: 25px 0; }
.icos-boxes .box {
  padding: 0 8%; }
.icos-boxes p {
  font-size: 1.27rem; }
footer {
  text-align: left; }
footer .logo img {
  margin-bottom: 0; }
footer .copy-legals {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }
footer .copy-legals a {
  margin-right: 15px; }
}

@media (min-width: 992px) {

  html {
    font-size: 22px; }


}

@media screen and (min-width: 1024px) {

  .container {
    padding-left: 4.4rem;
    padding-right: 4.4rem; }
  .my-content {
    margin-top: 100px;
    margin-bottom: 100px; }
  .my-content-big {
    margin-top: 170px;
    margin-bottom: 170px; }
  footer .scroll-up {
    right: 40px;
    bottom: 40px; }
}

@media (min-width: 1200px) {

  .navbar-brand {
    top: 40px; }
}

@media screen and (min-width: 1440px) {
  .moving-mouse-holder {
    bottom: 60px; }
  blockquote cite {
    margin-bottom: 30px; }
  .steps div.title {
    margin-bottom: 15px; }
  .steps p.title {
    margin-bottom: 30px; }
  .icos-boxes .box {
    padding: 0 20%; }
  .icos-boxes img {
    height: 80px;
    margin-bottom: 40px; }
  footer .logo img {
    width: 140px;
    height: 95.94px; }
  .steps p.title,
  .cta p {
    font-size: 1.8rem; }
  footer p.big,
  footer p.big a {
    font-size: 1.5rem; }
  .wwd p,
  blockquote p {
    font-size: 1.45rem; }

}

@media screen and (min-width: 1550px) {

  .container {
    padding-left: 5.2rem;
    padding-right: 5.2rem; }
  .navbar-brand img {
    width: 200px;
    height: 137.06px; }
  .cta p {
    margin-bottom: 60px; }
  footer {
    background-color: #161616;
    padding: 120px 0 90px 0; }
}

@media screen and (min-width: 1770px) {

  .container {
    max-width: 1920px;
    padding-left: 120px;
    padding-right: 120px; }
  .my-content {
    margin-top: 180px;
    margin-bottom: 180px; }
  .my-content-big {
    margin-top: 320px;
    margin-bottom: 320px; }
  .moving-mouse-holder {
    bottom: 80px; }
  .navbar-brand {
    top: 60px; }

}