@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900,400italic);

/**
  * Defaults
  */

::-moz-selection {
    text-shadow: none;
    background: #3a9ad9;
}

::selection {
    text-shadow: none;
    background: #3a9ad9;
}

body {
    font-size: 12px;
}

a {
    color: #3a9ad9;
}

h1, h2, h3 {
    font-family: 'Lato', sans-serif;
    color: #424242;
    text-transform: none;
}

p {
    font-family: 'Lato', sans-serif;
    color: #424242;
    font-size: 1.8em;
    line-height: 1.3em;
}

hr {
    border-color: #468965;
}

@media (max-width: 1200px) {
    br {
        display: none;
    }
}

/**
  *  Navbar
  */

.navbar-default {
    background-color: #59acd9;
    z-index: 1;
}

.navbar-default .navbar-toggle {
    background-color: transparent;
    border-color: #468965;
    border: none;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    color: #468965 !important;
}

.navbar-default .nav .nav-demo-button:hover {
    color: #ffffff !important;
}

.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #468965;
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a {
    background-color: transparent;
    color: #468965;
}

.navbar-default.navbar-shrink {
    background-color: #ffffff;
    -webkit-box-shadow: 0 8px 6px -6px #888888;
    -moz-box-shadow: 0 8px 6px -6px #888888;
    box-shadow: 0 8px 6px -6px #888888;
    padding: 10px 0
}

.nav-demo-button {
    display: none;
    background-color: #468965;
    border-color: #468965;
    border-radius: 3px;
    color: #ffffff !important;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    padding: 1.2em 1.6em !important;
    margin: 0.1em 0.7em 0 0.3em;
}

.nav-demo-button:hover,
.nav-demo-button:focus {
    background-color: #326649 !important;
    cursor: pointer;
}

#nav-logo-white, #nav-logo-white-index {
    width: 7em;
    height: auto;
    margin-top: -0.9em;
    margin-left: 1em;
}

#nav-logo-green, #nav-logo-green-index {
    width: 7em;
    height: auto;
    margin-top: -1.8em;
    display: none;
}

.translate {
    cursor: pointer;
}

@media (max-width: 768px) {

    .navbar-default .nav li a {
        color: #ffffff;
        text-align: right;
    }

    .navbar-default.navbar-shrink li a {
        color: #424242;
        text-align: right;
    }

    .navbar-default.navbar-shrink li a:hover,
    .navbar-default.navbar-shrink li a:focus {
        color: #468965 !important;
    }

    #nav-logo-white, #nav-logo-white-index {
        width: 3em;
        margin-top: 0;
        margin-left: 0.8em;
    }

    #nav-logo-green, #nav-logo-green-index {
        width: 3.5em;
        margin-left: 0.6em;
        margin-top: -0.6em;
    }
}

/**
  *  Index.html
  */

#banner {
    background-image: url(../img/waves-header.png);
    background-attachment: fixed;
    background-position: center center;
    background-color: #3a9ad9;
}

#banner h1 {
    margin-top: 5em;
    margin-bottom: 0.6em;
    color: #ffffff;
    font-size: 5em;
    font-weight: 300;
}

#banner h2 {
    margin-bottom: 2em;
    color: #ffffff;
    line-height: 1.2em;
    font-size: 1.8em;
    font-weight: 300;
}

.button-wrapper {
    text-align: left;
    margin-top: 5em;
}

.demo-button {
    background-color: #468965;
    border-color: #468965;
    color: #ffffff;
    border-radius: 3px;
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    padding: 1.2em 1.6em;
}

.demo-button:hover,
.demo-button:active,
.demo-button:focus {
    text-decoration: none;
    background-color: #326649;
    border-color: #326649;
    color: #ffffff;
}

#swimmer {
    position: absolute;
    margin-top: 30em;
    width: 700px;
    height: auto;
    z-index: 2;
}

.swim {
    animation-name: swim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;

    -webkit-animation-name: swim;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
}

@keyframes swim {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0.3em, 0.4em);
    }
}

@-webkit-keyframes swim {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0.2em, 0.3em);
    }
}

#fish {
    position: relative;
    margin-top: 52em;
    margin-left: 5em;
}

@media (max-width: 1320px) {
    #fish {
        margin-left: 7em;
    }
}

@media (max-width: 1280px) {
    #banner h1 {
        margin-top: 4em;
    }

    #swimmer {
        position: relative;
        margin-top: 27em;
        margin-bottom: 3em;
    }

    #fish {
        margin-top: 3em;
    }
}

@media (max-width: 990px) {
    #banner h1 {
        margin-top: 3em;
    }

    #swimmer {
        margin-top: 3em;
        margin-bottom: 3em;
    }

    #fish {
        display: none;
    }
}

@media (max-width: 768px) {
    #banner h1, #banner h2 {
        margin-left: 10px;
        margin-right: 10px;
    }

    #banner h1 {
        margin-top: 4em;
        font-size: 3em;
    }

    .button-wrapper {
        text-align: center;
    }

    .demo-button {
        display: block;
        font-size: 1.2em;
        padding: 1.2em 1.6em;
        width: 96%;
    }
}

/**
  *  Index.html -- Explain
  */

 #explain h1 {
     margin-bottom: 2em;
 }

 #explain h2 {
     font-size: 3.5em;
     line-height: 1.2em;
     color: #468965;
     font-weight: 300;
 }

 #explain img {
     width: 3.5em;
     height: auto;
 }

 @media (max-width: 768px) {
     #explain h1 {
         margin-bottom: 1em;
     }

     #explain img {
         width: 1.5em;
         height: auto;
     }

     #explain h2 {
         font-size: 1.9em;
         margin-left: 0.4em;
         margin-right: 0.4em;
     }
 }

/**
  *  Index.html -- How-it-works
  */

#how-it-works .row {
    margin-bottom: 20em;
}

#how-it-works .last {
    margin-bottom: 0;
}

#how-it-works h1 {
    font-size: 5em;
    font-weight: 300;
    margin-bottom: 2em;
}

#how-it-works h2 {
    color: #468965;
    font-size: 1.8em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0;
}

#how-it-works h3 {
    font-size: 3.5em;
    font-weight: 300;
    margin-bottom: 0.5em;
}

#how-it-works p {
    font-weight: 300;
}

.text-wrapper1 {
    margin-top: 4em;
}

.text-wrapper2 {
    margin-top: 4em;
}

.text-wrapper3 {
    margin-top: 4em;
}

#img-wrapper1 {
    margin-top: 3em;
}

#img-wrapper2 {
    margin-top: 3em;
}

#img-wrapper3 {
    margin-top: 3em;
}

@media (max-width: 768px) {
    #how-it-works .row {
        margin-bottom: 3em;
    }

    #how-it-works h2, #how-it-works h3, #how-it-works p {
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
    }

    #how-it-works h1 {
        font-size: 3em;
        margin-top: 0;
    }

    #how-it-works h3 {
        font-size: 2.6em;
    }

    #how-it-works p {
        font-size: 1.8em;
    }
}

/* Animated png spritesheets */
.in-view {
    -webkit-animation: slide 0.9s steps(5) forwards;
    animation: slide 0.9s steps(5) forwards;
}

​@-webkit-keyframes slide {
    from  { background-position: 0%; }
    /* width of spritesheet - last frame */
    to { background-position: -500%; }
}

@keyframes slide {
    from  { background-position: 0%; }
    /* width of spritesheet - last frame */
    to { background-position: -500%; }
}

/* for reasons unknown, this query is not pulled when
   being positioned after the actual class rules */
@media (min-width: 768px) and (max-width: 990px) {
    .step1-animation {
        background-position: 0 13px;
    }

    .step2-animation {
        background-position: 0 13px;
    }

    .step3-animation {
        background-position: 0 13px;
    }
}


.step2-animation {
    width: 31.6667em;
    height: 20.1667em;
    background-image: url('../img/Step-2-sprite-double-new.png');
    /*background-position: 0 0%;*/
    background-size: 600%;
    background-repeat: repeat-x;
}

.step3-animation {
    width: 31.6667em;
    height: 20.1667em;
    background-image: url('../img/Step-3-sprite-double.png');
    /*background-position: 0 0%;*/
    background-size: 600%;
    background-repeat: repeat-x;
}

.step1-animation {
    width: 31.6667em;
    height: 20.1667em;
    background-image: url('../img/Step-1-sprite-double.png');
    /*background-position: 0 0%;*/
    background-size: 600%;
    background-repeat: repeat-x;
}​


@media (max-width: 460px) {
    .step1-animation {
        background-position: 0 1px;
    }

    .step2-animation {
        background-position: 0 1px;
    }

    .step3-animation {
        background-position: 0 1px;
    }
}

@media (max-width: 412px) {
    .step1-animation {
        background-position: 0 10px;
    }

    .step2-animation {
        background-position: 0 10px;
    }

    .step3-animation {
        background-position: 0 10px;
    }
}

@media (max-width: 375px) {
    .step1-animation {
        background-position: 0 22px;
    }

    .step2-animation {
        background-position: 0 22px;
    }

    .step3-animation {
        background-position: 0 22px;
    }
}

@media (max-width: 360px) {
    .step1-animation {
        background-position: 0 27px;
    }

    .step2-animation {
        background-position: 0 27px;
    }

    .step3-animation {
        background-position: 0 27px;
    }
}

@media (max-width: 320px) {
    .step1-animation {
        background-position: 0 39px;
    }

    .step2-animation {
        background-position: 0 39px;
    }

    .step3-animation {
        background-position: 0 39px;
    }
}

/**
  *  Index.html -- Unique Selling Points
  */

#usp {
    background-color: #354458;
}

#usp h1, #usp h2 {
    color: #ffffff;
}

#usp h1 {
    font-size: 5em;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.5em;
}

#usp h2 {
    font-size: 1.9em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0.7em;
}

#usp p {
    color: #dce7e6;
    font-weight: 300;
    margin-top: 1.1em;
}

#usp img {
    margin-bottom: 2.5em;
}

.usp-icon {
    height: 9.2em;
    width: auto;
}

@media (max-width: 768px) {
    #usp h2, #usp p {
        margin-left: 10px;
        margin-right: 10px;
    }

    #usp h1 {
        font-size: 3em;
    }

    #usp img {
        margin-top: 1.5em;
        margin-bottom: 2.5em;
    }

    #usp p {
        margin-bottom: 2.8em;
    }

    #usp .last {
        margin-bottom: 0;
    }

    .usp-icon {
        height: 7.2em;
    }
}

/**
  *  Index.html -- Testimonials
  */

/* whole section is temporarily deprecated */
#testimonials {
    display: none;
}

#testimonials h1 {
    font-size: 5em;
    font-weight: 300;
    margin-bottom: 2em;
}

/* Carousel */
.carousel-indicators .active {
    background-color:  #468965;
}

.carousel-control {
    width: 0;
}

.carousel-control.left {
    top: 6%;
    left: 115%;
}

.carousel-control.right {
    top: 6%;
    right: -20%;
}

.carousel-control.left span,
.carousel-control.right span {
	background-color: #ffffff;
    color: #424242;
}

.carousel-control.left span:hover,
.carousel-control.right span:hover {
	opacity: .7;
	filter: alpha(opacity=70);
}

.testimonials-text {
    position: absolute;
    left: 82%;
    top: 18%;
    height: 25em;
    width: 25em;
    background-color: rgba(255, 255, 255, 0.5);
}

.testimonials-text p,
.testimonials-text-fallback p {
    padding: 1em;
    font-weight: 400;
    font-size: 1.4em;
}

.testimonials-text span,
.testimonials-text-fallback span {
    padding: 1.5em;
}

.testimonial-name {
    color: #424242;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 300;
    padding: 1.5em;
    margin-top: 4em;
}

#testimonials-container-fallback {
    display: none;
}

.testimonials-text-fallback {
    margin-top: 3em;
    background-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1200px) {
    .testimonials-text {
        top: 12%;
    }

    .carousel-control.left {
        top: 0;
        left: 123%;
    }

    .carousel-control.right {
        top: 0;
        right: -28%;
    }
}

@media (max-width: 990px) {
    .testimonials-text {
        height: 20em;
        width: 20em;
        top: 10%;
        left: 75%
    }

    .testimonials-text p {
        font-size: 1.2em;
    }

    .testimonial-name {
        font-size: 1.1em;
    }

    .carousel-control.left,
    .carousel-control.right {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    #testimonials h1 {
        font-size: 3em;
    }

    .carousel-control.left {
        top: 106%;
        left: 92%;
    }

    .carousel-control.right {
        top: 106%;
        right: 4%;
    }
}

@media (max-width: 500px) {
    .carousel-control.left {
        left: 88%;
    }
}

/**
  *  Index.html -- Security
  */

#security {
    padding-bottom: 0;
}

#security h1 {
    font-size: 5em;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.4em;
}

#security img {
    width: 80%;
}

@media (max-width: 768px) {
    #security h1 {
        font-size: 3em;
    }

    #security img {
        width: 60%;
    }
}

@media (max-width: 540px) {
    #security img {
        width: 90%;
    }
}

/**
  *  Index.html -- Partners
  */

#partners h1 {
    font-size: 5em;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.4em;
}

#partners img {
    width: 11em;
    height: auto;
}

@media (max-width: 768px) {
    #partners h1 {
        font-size: 3em;
    }

    #partners img {
        margin-bottom: 2.5em;
    }
}

/**
  *  Index.html -- Call to action
  */

#cta {
    background-image: url(../img/waves-cta.png);
    background-color: #dce7e6;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0 11em;
    -webkit-background-size: cover;
    background-size: cover;
}

#cta h1 {
    margin-top: 1em;
    margin-bottom: 0.6em;
    color: #ffffff;
    font-size: 5em;
    font-weight: 300;
}

#cta h2 {
    margin-bottom: 4em;
    color: #ffffff;
    font-size: 1.8em;
    font-weight: 300;
}

.button-wrapper {
    margin-bottom: 3em;
}

#cta img {
    position: relative;
    margin-top: -1em;
    margin-right: 4em;
}

@media (max-width: 1280px) {
    #cta h2 {
        margin-bottom: 2em;
    }
}

@media (max-width: 990px) {
    #cta h1 {
        font-size: 3em;
    }
}

@media (max-width: 768px) {
    #cta {
        background-position: 0 6em;
    }

    #cta h1, #cta h2 {
        margin-left: 10px;
        margin-right: 10px;
    }

    #cta h1 {
        margin-top: 0;
    }

    #cta img {
        margin-top: 5em;
        margin-right: 10em;
    }
}

/**
  *  Contact
  */

#contact {
    background-color: #dce7e6;
}

.social-media {
    margin-top: 2em;
}

.footer-links {
    margin-top: 3em;
    margin-bottom: 2em;
}

.footer-links li + li::before {
    content: "|";
    padding-right: 1em;
    vertical-align: top;
    color: #999999;
}

#contact p {
    color: #999999;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
}

#contact li > a {
    color: #999999;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
}

#contact li > a:hover {
    color: #354458;
    text-decoration: none;
}

#contact img {
    width: 35px;
    height: auto;
}

@media (max-width: 768px) {
    .social-media {
        margin-top: 2em;
    }
}

/**
  *  Demo.html
  */

#demo-banner {
    background-image: url(../img/Waves-header.png);
    background-color: #3a9ad9;
    background-repeat: none;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

#demo-banner h1 {
    color: #ffffff;
    font-weight: 300;
    font-size: 4em;
    margin-top: -2em;
    margin-bottom: 1em;
}

#demo-banner label {
    font-family: 'Lato', sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    margin-top: 1em;
}

#demo-banner input {
    height: 2.5em;
    border-radius: 0;
}

.form-group {
    margin-left: 1em;
    margin-right: 1em;
}

.submit-button {
    width: 100%;
    height: 4em !important;
    border-radius: 3px !important;
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 0.125em;
    background-color: #468965;
    color: #ffffff;
    margin-top: 2em;
    margin-bottom: 2em;
    border-style: none;
}

.submit-button:hover, .submit-button:focus {
    background-color: #326649;
}

#demo-hi-five {
    position: fixed;
    width: 30em;
    height: auto;
    margin-left: 69em;
    margin-top: 30em;
}

@media (max-width: 1200px) {
    #demo-hi-five {
        display: none;
    }
}

@media (max-width: 540px) {
    #demo-banner .row {
        margin-left: -4em;
        margin-right: -4em;
    }

    .form-group {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    #demo-banner h1 {
        font-size: 2.5em;
    }
}

/* Thanks Modal */
.modal-content {
    background-image: url(../img/Waves-header.png);
    background-color: #3a9ad9;
    background-repeat: none;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

/* --- styles "X" to close modal --- */
.lr, .rl {
  background: #ffffff !important;
}

#thanks-text {
    color: #ffffff;
    font-weight: 300;
    font-size: 4em;
    margin-top: 4em;
}

@media (max-width: 768px) {
    #thanks-text {
        font-size: 3em;
    }
}

/**
  *  Team.html
  */

.team {
    background-color: #ffffff;
}

.team li a {
    color: #424242 !important;
}

#team-banner {
    background-image: url(../img/waves-cta.png);
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0 45em;
    -webkit-background-size: cover;
    background-size: cover;
}

#team-banner h1 {
    margin-top: 3em;
    margin-bottom: 1.6em;
    margin-left: -0.3em;
    color: #424242;
    font-size: 5em;
    font-weight: 300;
}

#team-banner br {
    display: inline-block;
}

#team-banner h2 {
    margin-bottom: 2em;
    color: #424242;
    line-height: 1.2em;
    font-size: 1.8em;
    font-weight: 300;
}

#team-beach {
    position: relative;
    margin-top: -20em;
}

@media (max-width: 1600px) {
    #team-beach {
        margin-top: -15em;
    }
}

@media (max-width: 1200px) {
    #team-beach {
        margin-top: -10em;
    }
}

@media (max-width: 768px) {
    #team-banner {
        background-position: 0 20em;
    }

    #team-beach {
        margin-top: 5em;
    }

    #team-banner h1, #team-banner h2 {
        margin-left: 10px;
        margin-right: 10px;
    }

    #team-banner h1 {
        margin-top: 3em;
        font-size: 3em;
    }

    #team-banner h2 {
        color: #ffffff;
    }
}

@media (min-width: 480px) {
    #team-banner {
        background-position: 0 31em;
    }
}

/**
  *  Team.html -- Management
  */

#team-management {
    background-color: #2F9AD5;
}

#team-management h1 {
    font-size: 5em;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 1em;
}

/* Flipping cards */
.card-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 1.5em;
    text-align: center;
    -webkit-perspective: 900px;
    perspective: 900px;
}

.card {
    position: relative;
    width: 27em;
    height: 33em;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.front, .back {
    position: fixed;
    background: #ffffff;
    top: 0;
    left: 0;
    width: 27em;
    height: 33em;
    color: #424242;
    box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.front {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.card-container:hover .card,
.card-container:focus .card,
.card-container:active .card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.portrait {
    margin-top: 0.8em;
}

.front h2 {
    font-size: 1.8em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 0.6em;
}

.front p {
    font-size: 1.2em;
    text-transform: uppercase;
}

.team-social a {
    color: #000000;
}

.team-social a:hover,
.team-social a:focus {
    color: #2F9AD5;
}

.team-social-links {
    margin-top: 2.1em;
    margin-bottom: 1.5em;
}

/* Team.html -- Management fallback for small screens */
#team-management-2 {
    background-color: #2F9AD5;
}

#team-management-2 h1 {
    font-size: 5em;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 1em;
}

.fallback-card {
    background-color: #ffffff;
    height: 26.5em;
    width: 20em;
    padding: 1.4em 1.3em;
    margin: 0 auto;
    box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}

#team-management-2 h2 {
    font-size: 1.2em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 0.6em;
    margin-bottom: 0;
}

#team-management-2 p {
    font-size: 1em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    #team-management-2 h1 {
        font-size: 3em;
    }

    .fallback-card {
        margin-bottom: 2em;
    }
}

/**
  *  Team.html -- Values
  */

#team-values {
    background-color: #354458;
}

#team-values h1, #team-values h2 {
    color: #ffffff;
}

#team-values h1 {
    font-size: 5em;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.5em;
}

#team-values h2 {
    font-size: 1.9em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0.7em;
}

#team-values p {
    color: #dce7e6;
    font-weight: 300;
    margin-top: 1.1em;
}

@media (max-width: 768px) {
    #team-values h2, #team-values p {
        margin-left: 10px;
        margin-right: 10px;
    }

    #team-values h1 {
        font-size: 3em;
    }

    #team-values p {
        margin-bottom: 2.8em;
    }

    #team-values .last {
        margin-bottom: 0;
    }
}


/**
  *  Team.html -- Join
  */

#team-join {
    background-image: url(../img/circles2.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center 18em;
    -webkit-background-size: contain;
    background-size: contain;
}

#team-join h1 {
    margin-top: 4em;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 3.5em;
    font-weight: 300;
    color: #ffffff;
}

#team-join-button {
    margin-right: 3em;
}

#team-join br {
    display: inline-block;
}

@media (max-width: 1200px) {
    #team-join {
        background-position: center 25em;
    }

    #team-join h1 {
        font-size: 3em;
        margin-top: 6em;
    }
}

@media (max-width: 990px) {
    #team-join {
        margin-top: -10em;
        margin-bottom: 0em;
        background-position: center 14em;
    }

    #team-join h1 {
        margin-top: 5em;
    }
}

@media (max-width: 768px) {
    #team-join {
        -webkit-background-size: cover;
        background-size: cover;
    }

    #team-join h1 {
        font-size: 2.5em;
        margin-top: 6em;
        margin-right: 0em;
    }

    #team-join-button {
        margin: 0 auto;
        width: 70%;
    }
}

@media (max-width: 500px) {
    #team-join {
        background-position: -25.5em 18em;
    }

    #team-join-button {
        width: 60%;
    }
}

/**
  *  Jobs.html
  */

.jobs {
    background-color:  #dce7e6;
}

.jobs li a {
    color:  #468965 !important;
}

#jobs-navbar-toggle .icon-bar {
    background-color: #468965 !important;
}

#jobs-banner {
    background-image: url(../img/waves-jobs.png);
    background-color: #dce7e6;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center bottom;
    -webkit-background-size: contain;
    background-size: contain;
}

#jobs-banner h1 {
    margin-top: 6em;
    margin-bottom: 3em;
    color: #ffffff;
    font-size: 6em;
    font-weight: 300;
}

#jobs-ladder {
    position: relative;
    margin-top: 15em;
    width: 50%;
}

#jobs-fish {
    position: absolute;
    margin-top: -6em;
}

@media (max-width: 1600px) {
    #jobs-ladder {
        margin-top: 13em;
    }
}

@media (max-width: 1280px) {
    #jobs-banner {
        background-position: center 21em;
        -webkit-background-size: cover;
        background-size: cover;
    }

    #jobs-banner h1 {
        margin-top: 4em;
    }

    #jobs-ladder {
        margin-top: 17em;
        width: 60%;
    }
}

@media (max-width: 990px) {
    #jobs-banner {
        background-position: left 10em;
        /*-webkit-background-size: cover;
        background-size: cover;*/
    }

    #jobs-banner h1 {
        margin-top: 2em;
    }

    #jobs-fish {
        display: none;
    }
}

@media (max-width: 768px) {
    #jobs-ladder {
        width: 20%;
        margin-top: -28em;
        margin-left: 0;
    }
}

#jobs-offers {
    padding-bottom: 3em;
}

/* Accordion style is based on
 * https://maxalley.wordpress.com/2015/02/20/bootstrap-style-the-accordion/
 */

a.panel-heading {
    display: block;
}

.panel-default .panel-heading[aria-expanded="false"],
.panel-default .panel-heading a:hover,
.panel-default .panel-heading a:focus,
.panel-default a.panel-heading:hover,
.panel-default a.panel-heading:focus {
	background-color:  #dce7e6;
    border-radius: 0;
}
.panel-default .panel-heading[aria-expanded="true"],
.panel-default .panel-heading a:hover,
.panel-default .panel-heading a:focus,
.panel-default a.panel-heading:hover,
.panel-default a.panel-heading:focus {
	background-color: #468965;
    color: #ffffff;
}

.panel-group .panel,
.panel-group .panel-heading {
	border: none !important;
}
.panel-group .panel-body {
	border: 1px solid #ddd !important;
	border-width: 0 1px 1px 1px !important;
}
.panel-group .panel-heading a,
.panel-group a.panel-heading {
	outline: 0;
}
.panel-group .panel-heading a:hover,
.panel-group .panel-heading a:focus,
.panel-group a.panel-heading:hover,
.panel-group a.panel-heading:focus {
	text-decoration: none;
}

.panel-text {
    font-family: 'Lato', sans-serif;
    font-size: 1.8em;
    font-weight: 300;
}

.toggle-icon {
    text-align: right;
}

#jobs-offers h2 {
    font-size: 2em;
    font-weight: 300;
    margin-bottom: 0.8em;
}

.white {
    color: #ffffff;
}

#jobs-offers p, #jobs-offers li {
    font-family: 'Lato', sans-serif;
    color: #424242;
    font-size: 1.7em;
    font-weight: 300;
}

#jobs-offers ul {
    list-style: none;
    padding: 0;
}

#jobs-offers li {
    padding-left: 1.3em;
    margin-bottom: 0.8em;
}
#jobs-offers li:before {
    content: "\f105";
    color: #468965;
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;
}

.btn-group-apply {
    margin-top: 2.5em;
    margin-bottom: 2em;
}

.btn-apply {
    background-color: #468965;
    border-color: #468965;
    color: #ffffff;
    border-radius: 3px;
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    padding: 1.2em 0;
    margin-right: 1em;
    width: 35%;
}

.btn-apply:hover,
.btn-apply:active,
.btn-apply:focus {
    background-color: #326649;
    border-color: #326649;
    color: #ffffff;
}

.btn-recommend {
    background-color: #59ACD9;
    border-color: #59ACD9;
    color: #ffffff;
    border-radius: 3px;
    font-size: 1.2em;
    font-weight: 400;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    padding: 1.2em 0;
    width: 35%;
}

.btn-recommend:hover,
.btn-recommend:active,
.btn-recommend:focus {
    background-color: #2487CC;
    border-color: #2487CC;
    color: #ffffff;
}

@media (max-width: 768px) {
    .panel-text {
        font-size: 1.4em;
    }

    #jobs-offers h2 {
        font-size: 1.6em;
    }

    #jobs-offers p, #jobs-offers li {
        font-size: 1.3em;
    }

    .btn-apply, .btn-recommend {
        width: 100%;
        margin-bottom: 1em;
        font-size: 1em;
    }
}

@media (max-width: 470px) {
    .btn-apply, .btn-recommend {
    }
}

@media (max-width: 370px) {
    .btn-apply, .btn-recommend {
        font-size: 0.8em;
        padding: 1em 1.2em;
    }
}

/**
  * Jobs.html -- Tools
  */

#jobs-tools {
    padding-top: 0;
}

#jobs-tools h1 {
    font-size: 2.2em;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 1.4em;
}

#jobs-tools img {
    width: 12em;
    height: auto;
}

/* Display 7 columns evenly,
   cf. http://stackoverflow.com/questions/21955088/7-equal-columns-in-bootstrap*/
@media (min-width: 768px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    }
}

@media (min-width: 992px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    }
}

@media (max-width: 768px) {
    #jobs-tools h1 {
        font-size: 3em;
    }

    #jobs-tools img {
        margin-bottom: 2.5em;
    }
}

/**
  * Jobs.html -- Unique Selling Points
  */

#jobs-usp {
    background-color: #468965;
}

#jobs-usp h1, #jobs-usp h2 {
    color: #ffffff;
}

#jobs-usp h1 {
    font-size: 5em;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.5em;
}

#jobs-usp h2 {
    font-size: 1.9em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0.7em;
}

#jobs-usp p {
    color: #dce7e6;
    font-weight: 300;
    margin-top: 1.1em;
}

@media (max-width: 768px) {
    #jobs-usp h2, #jobs-usp p {
        margin-left: 10px;
        margin-right: 10px;
    }

    #jobs-usp h1 {
        font-size: 3em;
    }

    #jobs-usp p {
        margin-bottom: 2.8em;
    }

    #jobs-usp .last {
        margin-bottom: 0;
    }
}

/**
  *  Impressum.html
  */

#impressum-banner {
    background-image: url(../img/waves-header.png);
    background-attachment: fixed;
    background-position: center center;
    background-color: #3a9ad9;
}

#impressum-banner h1 {
    position: relative;
    margin-top: 5em;
    margin-bottom: 3em;
    color: #ffffff;
    font-size: 5em;
    font-weight: 300;
    z-index: 1;
}

#impressum-contact {
    background-color: #dce7e6;
}

#impressum-contact p {
    color: #999999;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
}

#impressum-contact li > a {
    color: #999999;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
}

#impressum-contact li > a:hover {
    color: #354458;
    text-decoration: none;
}

#impressum-contact img {
    width: 35px;
    height: auto;
}

@media (max-width: 768px) {
    #impressum-banner h1 {
        font-size: 3em;
    }

    #impressum h4 {
        font-size: 1.3em;
    }

    #impressum p {
        font-size: 1.2em;
    }
}