/* browser-sync start --server --files "*.html, css/*.css" */
/* sass --watch main.scss:main.css */
/* CMYK 10 10 0 90 */
/* CMYK 0 0 15 82 */
* {
  box-sizing: border-box; }

.undercon {
  z-index: 100;
  color: #89fffd;
  font-size: 2em;
  font-weight: bolder;
  text-align: center;
  position: fixed;
  left: 50%;
  transform: translateX(-50%); }

body,
html {
  font-size: 16px;
  height: 100%; }

.container {
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto; }

a {
  color: #2E2E27;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid #89fffd; }

h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-size: 2.2em;
  letter-spacing: .2em;
  color: #2E2E27; }
  h1 span,
  h2 span,
  h3 span {
    /*font-weight: 400;
    font-variant: small-caps;*/ }

li a {
  /* menu items */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  letter-spacing: .15em;
  font-size: 1.2em;
  color: #2E2E27; }
  li a span {
    /*font-weight: 400;
    font-variant: small-caps;*/ }

p,
.supporting-page__content li {
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  line-height: 1.5; }

.hide {
  display: none; }

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto; }

.hero {
  width: 100%;
  position: relative;
  /*  &::before {
    	content: "";
    	position: absolute;
    	height: 100%;
    	width: 100%;
    	top: 0;
    	left: 0;
    	background: rgba(10,10,10,.5);
    }*/ }
  .hero .img-container {
    display: flex;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle; }
    .hero .img-container img {
      width: 100%;
      height: auto; }
  .hero .header-band-top,
  .hero .header-band {
    position: absolute;
    height: 8em;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #d3d3d3;
    /*		background: -webkit-linear-gradient(to right, $aqua, $purple);
    		background: linear-gradient(to right, $aqua, $purple);*/ }
  .hero .header-band-top {
    top: 0; }
  .hero .supporting-page {
    background: #d3d3d3; }

.services {
  overflow: auto;
  position: relative;
  background: white; }
  .services h1,
  .services p {
    color: #2E2E27; }
  .services .service {
    width: 100%;
    text-align: center;
    padding: 4em;
    /*.text {
    	p span {
    		color: $purple;
    		font-weight: bold;
    	}
    }*/ }
    .services .service .icon {
      margin: 3em 0; }
      .services .service .icon img {
        width: 100%;
        height: auto; }

.parallax {
  /* The image used */
  /*background-image: url('../img/beach2.jpg');*/
  /*background-image: url('../img/Vesper_HealthCare_Marketing_White_RGB.svg');*/
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.parallax-supporting-page {
  /* The image used */
  /*background-image: url('../img/grad.jpg');*/
  background-image: url("../img/beach2.jpg");
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.clients {
  padding: 4em;
  text-align: center;
  background: #d3d3d3; }
  .clients .row {
    clear: both;
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap; }
    .clients .row .row--item__logo {
      width: 25%;
      padding: 2em;
      align-items: center;
      justify-content: center; }
      .clients .row .row--item__logo a {
        border-bottom: none; }
        .clients .row .row--item__logo a:hover {
          border-bottom: none; }
        .clients .row .row--item__logo a img {
          display: block;
          width: 100%;
          margin: auto;
          height: auto;
          filter: grayscale(100%); }
          .clients .row .row--item__logo a img:hover {
            filter: grayscale(0%); }

footer {
  position: relative;
  background: #2E2E27;
  height: 100%;
  min-height: 400px;
  color: #d3d3d3;
  padding: 8em 0;
  text-align: center; }
  footer a {
    font-size: 1.25em;
    color: #d3d3d3;
    display: inline-block;
    border-bottom: none; }
  footer a:after {
    content: '';
    display: block;
    height: 2px;
    width: 0;
    background: transparent;
    transition: width .3s ease, background-color .3s ease; }
  footer a:hover:after {
    width: 100%;
    background: #ef32d9; }
  footer h1 {
    color: #d3d3d3; }
  footer p {
    font-size: .75em; }
  footer .footer-col {
    position: relative;
    display: inline-block;
    float: left;
    width: calc(100% / 3); }
  footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: linear-gradient(to right, #89fffd, #ef32d9); }
  footer .footer-logo {
    content: "";
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 4em;
    width: 40px;
    height: auto;
    transform: translateX(-50%); }
    footer .footer-logo img {
      width: 100%;
      height: auto; }

/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
/*@media only screen and (max-device-width: 1024px) {

	p {
		font-weight: 400;
	}

  .parallax-two {
  	background-image: url('../img/Vesper_HealthCare_Marketing_Black_Outline_MOBILE.svg');
  }

}*/
video {
  position: fixed;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  z-index: -100;
  background-size: cover;
  filter: grayscale(100%); }

.VesperTagAni {
  filter: drop-shadow(3px 3px 2px #656556); }

/* ############

		About

		########### */
.supporting-page {
  position: relative;
  height: 50vh;
  margin: 0; }
  .supporting-page .supporting-page__half--top {
    position: absolute;
    display: flex;
    content: "";
    left: 0;
    height: 100%;
    width: 100%;
    top: 0;
    background: transparent;
    align-items: center;
    justify-content: center; }
  .supporting-page h1 {
    text-align: center;
    /*font-size: 4em;*/
    filter: drop-shadow(3px 3px 2px #9a9a87); }
  .supporting-page .circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    transform: translate(-50%, 50%); }
    .supporting-page .circle img {
      width: 100%;
      height: auto; }

.supporting-page__content {
  position: relative;
  overflow: auto;
  z-index: -1;
  background: url("../img/balance.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
  padding: 12em 0; }
  .supporting-page__content::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    background: #2E2E27;
    opacity: .9; }
  .supporting-page__content h2,
  .supporting-page__content h3,
  .supporting-page__content p,
  .supporting-page__content li {
    color: white; }
  .supporting-page__content h2 {
    text-align: center; }
  .supporting-page__content .row {
    width: 60%;
    margin: 0 auto; }
    .supporting-page__content .row .col {
      display: inline-block;
      width: 50%;
      float: left; }
  .supporting-page__content .services-page .services-page__service .services-page__service--img {
    text-align: center; }

#privacy {
  display: none; }

/* Icon 3 */
.icon-three {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 6.25em;
  height: 5.5em;
  cursor: pointer; }

.hamburger {
  top: 50%;
  left: 25%;
  width: 3em;
  height: .25em;
  background: #ef32d9;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #89fffd, #ef32d9);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #89fffd, #ef32d9);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: absolute;
  box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.4);
  transition: 0.5s; }

.hamburger:before {
  top: -1em; }

.hamburger:after {
  top: 1em; }

.hamburger-three:before,
.hamburger-three:after {
  content: '';
  position: absolute;
  width: 3em;
  height: .25em;
  background: #ef32d9;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #89fffd, #ef32d9);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #89fffd, #ef32d9);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.4);
  transition: 0.5s; }

.icon-three.active-three .hamburger-three {
  background: transparent;
  box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0); }

.icon-three.active-three .hamburger-three:before {
  top: 0;
  transform: rotate(135deg); }

.icon-three.active-three .hamburger-three:after {
  top: 0;
  transform: rotate(225deg);
  box-shadow: 0 -0.125em 0.3125em rgba(0, 0, 0, 0.4); }

.hide.body-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  color: #2E2E27;
  background: #89fffd; }
  .hide.body-menu ul {
    list-style-type: none;
    display: inherit;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: 100%; }
    .hide.body-menu ul li {
      margin: .5em 0;
      font-size: 2em;
      text-align: center;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%; }
      .hide.body-menu ul li:hover {
        -webkit-transform: skew(-10deg);
        transform: skew(-10deg);
        /*        -webkit-transform: translateX(8px);
                transform: translateX(8px);*/ }
      .hide.body-menu ul li a {
        display: inline-block;
        border-bottom: none; }
      .hide.body-menu ul li a:after {
        content: '';
        display: block;
        height: 2px;
        width: 0;
        background: transparent;
        transition: width .3s ease, background-color .3s ease; }
      .hide.body-menu ul li a:hover:after {
        width: 100%;
        background: #ef32d9; }

@media only screen and (max-device-width: 569px) {
  .icon-three {
    font-size: .65em; }

  .hide-sm {
    display: none !important; }

  h1 {
    font-weight: 100; }

  .container {
    width: 93.75%;
    max-width: 300px; }

  .hero {
    /*background-image: url('../img/beach2.jpg');*/
    background: white;
    display: flex;
    vertical-align: middle;
    border-bottom: 4em solid #d3d3d3; }
    .hero .img-container {
      padding: 4em 0;
      width: 90%;
      margin-left: auto;
      margin-right: auto; }

  .service {
    border-bottom: 2em solid #89fffd; }

  .clients {
    width: 100%;
    padding: 2em 0; }
    .clients .row {
      width: 100%; }
      .clients .row .row--item__logo {
        display: inline-block !important;
        float: left;
        width: 50%; }
        .clients .row .row--item__logo a {
          display: inline-block !important;
          float: left !important; }
          .clients .row .row--item__logo a img {
            display: inline-block !important;
            width: 100% !important;
            height: auto; }

  footer {
    height: 100%; }
    footer .footer-col {
      display: inline-block;
      float: left;
      width: 100%;
      text-align: center; }

  /*
  	 ###########
  		ABOUT
  	 ###########
  */
  .supporting-page__content {
    padding: 4em 0; }
    .supporting-page__content .row {
      width: 90%; }
      .supporting-page__content .row .col {
        width: 100%; } }
@media only screen and (min-device-width: 570px) and (max-device-width: 694px) {
  /* ####    INBETWEEN     #### */
  .icon-three {
    font-size: .75em; }

  .hide-sm {
    display: none !important; }

  h1 {
    font-weight: 200; }

  .hero {
    /*background-image: url('../img/beach2.jpg');*/
    background: white;
    display: flex;
    vertical-align: middle;
    border-bottom: 4em solid #d3d3d3; }
    .hero .img-container {
      padding: 4em 0;
      width: 60%;
      margin-left: auto;
      margin-right: auto; }
      .hero .img-container img {
        width: 100%;
        height: auto; }

  .container {
    width: 93.75%;
    max-width: 534px; }

  .service {
    border-bottom: 2em solid #89fffd; }

  .clients .row .row--item__logo {
    float: left;
    width: 50%; }

  footer {
    height: 100%; }
    footer .footer-col {
      display: inline-block;
      float: left;
      width: 100%;
      text-align: center; }

  footer {
    margin-top: 8em; }

  /* About */
  .supporting-page-content {
    padding: 4em 0; }
    .supporting-page-content .row {
      width: 90%; }
      .supporting-page-content .row .col {
        width: 50%; }
      .supporting-page-content .row .col:first-child {
        padding-right: 1em; }
      .supporting-page-content .row .col:nth-child(2) {
        padding-left: 1em; } }
@media only screen and (min-device-width: 695px) and (max-device-width: 819px) {
  /* ####    MEDIUM     #### */
  .icon-three {
    font-size: 1em; }

  .hide-lg {
    display: none !important; }

  h1 {
    font-weight: 200; }

  .hero {
    /*background-image: url('../img/beach2.jpg');*/
    display: flex;
    vertical-align: middle;
    /*border-bottom: 4em solid $lightgrey;*/ }
    .hero .img-container {
      padding: 4em 0;
      width: 80%;
      margin-left: auto;
      margin-right: auto; }

  .container {
    width: 93.75%;
    max-width: 768px; }

  .service {
    border-bottom: 2em solid #89fffd; }
    .service .icon img {
      width: 50% !important;
      margin-left: auto;
      margin-right: auto; }

  .clients .row .row--item__logo {
    float: left;
    width: 50%; }

  footer {
    height: 100%;
    margin-top: 8em; }
    footer .footer-col {
      display: inline-block;
      float: left;
      width: 100%;
      text-align: center; }

  /* About */
  .supporting-page-content {
    padding: 4em 0; }
    .supporting-page-content .row {
      width: 90%; }
      .supporting-page-content .row .col {
        width: 50%; }
      .supporting-page-content .row .col:first-child {
        padding-right: 1em; }
      .supporting-page-content .row .col:nth-child(2) {
        padding-left: 1em; }

  footer {
    margin-top: 8em; } }
@media only screen and (min-device-width: 820px) {
  /* LARGE */
  .hide-lg {
    display: none !important; }

  .container {
    width: 93.75%;
    max-width: 1003px; }

  .hero .img-container {
    width: 80%;
    height: 100%; }
    .hero .img-container img {
      width: 100%;
      height: auto; }

  .services {
    padding: 4em 0;
    position: relative; }
    .services .service {
      width: calc(100% / 3);
      display: inline-block;
      float: left;
      margin-left: auto;
      margin-right: auto;
      /*.text {
      	p span {
      		color: $black;
      		font-weight: bold;
      	}
      }*/ }
      .services .service::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1em;
        background: linear-gradient(to right, #89fffd, #ef32d9); }

  .row .col:first-child {
    padding-right: 1em; }
  .row .col:nth-child(2) {
    padding-left: 1em; }

  footer {
    margin-top: 8em; }

  	/* ##########
  
  	Services
  
  	############*/
  .supporting-page__content .services-page .services-page__service {
    /* col */
    width: 100%;
    padding: 4em 0; }
    .supporting-page__content .services-page .services-page__service .services-page__service--text {
      display: inline-block;
      float: left;
      width: 60%; }
    .supporting-page__content .services-page .services-page__service .services-page__service--img {
      display: inline-block;
      float: left;
      width: 40%; } }
@media only screen and (min-device-width: 1070px) {
  .container {
    max-width: 1237px;
    margin-right: auto;
    margin-left: auto; }

  .services .row {
    /* row as container for the services */
    max-width: 1237px;
    margin-right: auto;
    margin-left: auto; } }

/*# sourceMappingURL=main.css.map */