/*  ==========================================================================
    VARIABLES
    ========================================================================== */
.color__bg--tertiary {
  background: #F7F7F7; }
  .color__bg--tertiary h3 {
    color: #9F9F9F; }
  .color__bg--tertiary h2 {
    color: #1C1C1C; }
  .color__bg--tertiary p {
    color: #545454; }
  .color__bg--tertiary .btn {
    background: #FFFFFF;
    color: #000000; }
    .color__bg--tertiary .btn:hover, .color__bg--tertiary .btn:focus, .color__bg--tertiary .btn:active {
      background: #000000;
      color: #FFFFFF; }
.color__bg--septenary {
  background: #131313; }
  .color__bg--septenary h3 {
    color: #9F9F9F; }
  .color__bg--septenary h2 {
    color: #FFFFFF; }
  .color__bg--septenary p {
    color: #909090; }
  .color__bg--septenary .btn {
    background: #FFFFFF;
    color: #000000; }
    .color__bg--septenary .btn:hover, .color__bg--septenary .btn:focus, .color__bg--septenary .btn:active {
      background: #000000;
      color: #FFFFFF; }
.color__bg--ek {
  background: #FFFFFF;
  background: url(../images/bg-ek.svg) no-repeat top 100px center/60%; }
  .color__bg--ek h3 {
    color: #9F9F9F; }
  .color__bg--ek h2 {
    color: #1C1C1C; }
  .color__bg--ek p {
    color: #545454; }
  .color__bg--ek .btn {
    background: #F7F7F7;
    color: #000000; }
    .color__bg--ek .btn:hover, .color__bg--ek .btn:focus, .color__bg--ek .btn:active {
      background: #000000;
      color: #F7F7F7; }

.btn__ghost:hover, .btn__ghost:focus, .btn__ghost:active {
  background: #FFFFFF;
  color: #151515; }

@media (min-width: 600px) {
  .color__bg--ek {
    background: #FFFFFF;
    background: url(../images/bg-ek.svg) no-repeat center center/608px; } }
@media (min-width: 929px) {
  .color__bg--ek {
    background: #FFFFFF;
    background: url(../images/bg-ek.svg) no-repeat center center/929px; } }
/*  ==========================================================================
    NORMALIZE
    ========================================================================== */
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  height: 100%; }

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */
::selection {
  color: #fff;
  background-color: #328efd; }

::-moz-selection {
  color: #fff;
  background-color: #328efd; }

/* =============================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  margin: 0;
  padding: 0; }

blockquote {
  margin: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/* =============================================================================
   Lists
   ========================================================================== */
ul, ol {
  margin: 0;
  padding: 0; }

ul {
  list-style: none; }

dd {
  margin: 0 0 0 40px; }

nav ul,
nav ol {
  list-style: none;
  margin: 0;
  padding: 0; }

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

/*
 * Correct overflow displayed oddly in IE9
 */
svg:not(:root) {
  overflow: hidden; }

/* =============================================================================
   Figures
   ========================================================================== */
figure {
  margin: 0; }

/* =============================================================================
   Forms
   ========================================================================== */
form {
  margin: 0; }

fieldset {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label {
  cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */
legend {
  border: 0;
  *margin-left: -7px;
  padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

/* Select styling in Firefox */
@-moz-document url-prefix() {
  select {
    padding: 0.8em 0.75em; } }
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */
button,
input {
  line-height: normal; }

*:first-child + html input.button {
  overflow: visible;
  /* remove padding from left/right */
  width: auto !important; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible; }

/*
 * Consistent box sizing and appearance
 */
input[type="checkbox"],
input[type="radio"] {
  margin: 0;
  padding: 0; }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

/* Colors for form validity */
input:invalid,
textarea:invalid {
  background-color: #f0dddd; }

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  /* change background colour of autofill inputs in webkit */ }

input[type=button],
input[type=submit],
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=search],
select,
button,
textarea {
  margin: 0;
  cursor: pointer;
  outline: none;
  vertical-align: top;
  border: 1px solid #ccc; }

input[type=submit] {
  border: none 0;
  -webkit-appearance: none; }

input[type=radio],
input[type=checkbox] {
  margin: 0;
  padding: 0; }

input[type=text],
input[type=search],
select,
textarea {
  cursor: default; }

button {
  border: none 0; }

*:first-child + html input.button {
  overflow: visible;
  /* remove padding from left/right */
  width: auto !important; }

/* =============================================================================
   Tables
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  vertical-align: top; }

/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden; }

/*  ==========================================================================
    TYPOGRAPHY
    ========================================================================== */
body {
  font-family: "Montserrat", Georgia, Serif; }

header h1 {
  font-family: "Heebo", Georgia, Serif;
  font-weight: 900;
  font-size: 54px;
  line-height: 54px; }
header p {
  font-family: "Montserrat", Georgia, Serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px; }

section h3 {
  font-family: "Montserrat", Georgia, Serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 1px; }
section h2 {
  font-family: "Heebo", Georgia, Serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 48px; }
section p {
  font-family: "Montserrat", Georgia, Serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px; }

.ek li h4 {
  font-family: "Montserrat", Georgia, Serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px; }

.btn {
  font-family: "Montserrat", Georgia, Serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px; }

@media (min-width: 600px) {
  header h1 {
    font-size: 90px;
    line-height: 90px; }
  header p {
    font-size: 16px;
    line-height: 30px; }

  section h2 {
    font-size: 54px;
    line-height: 88px; } }
@media (min-width: 800px) {
  header h1 {
    font-size: 110px;
    line-height: 100px; }
  header p {
    font-size: 18px;
    line-height: 32px; }

  section h3 {
    font-size: 11px;
    line-height: 11px; }
  section h2 {
    font-size: 70px;
    line-height: 88px; }
  section p {
    font-size: 16px;
    line-height: 30px; }

  .ek li h4 {
    font-size: 18px;
    line-height: 26px; }

  .btn {
    font-size: 12px; } }
/*  ==========================================================================
    HEADER
    ========================================================================== */
header {
  background: #EA178C;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 190px; }
  header #logo {
    width: 64px;
    height: 64px;
    background: url(../images/logo.svg) no-repeat center center;
    margin: 0 auto;
    display: block;
    margin-bottom: 100px; }
  header h1 {
    display: block;
    color: #FFFFFF;
    margin: 0 auto;
    padding: 0;
    max-width: 300px;
    margin-bottom: 30px; }
  header p {
    display: block;
    color: #FFFFFF;
    margin: 0 auto;
    padding: 0;
    max-width: 300px; }

@media (min-width: 600px) {
  header {
    padding-bottom: 260px; }
    header #logo {
      margin-bottom: 140px; }
    header h1 {
      max-width: 560px; }
    header p {
      max-width: 560px; } }
@media (min-width: 800px) {
  header {
    padding-bottom: 200px; }
    header h1 {
      max-width: 770px;
      margin-bottom: 50px; }
    header p {
      max-width: 610px; } }
/*  ==========================================================================
    NAV
    ========================================================================== */
/*  ==========================================================================
    FOOTER
    ========================================================================== */
footer {
  padding: 50px 0; }
  footer ul {
    margin: 0 auto;
    display: inline-block; }
    footer ul li {
      margin: 0 auto;
      display: inline-block;
      position: relative;
      margin: 0 10px; }
  footer .footer__icon {
    display: inline-block;
    vertical-align: top;
    text-indent: -9999px; }
    footer .footer__icon--tw {
      background: url(../images/footer-twitter.svg) no-repeat center center;
      width: 24px;
      height: 20px; }
    footer .footer__icon--fb {
      background: url(../images/footer-facebook.svg) no-repeat center center;
      width: 11px;
      height: 24px; }
    footer .footer__icon--in {
      background: url(../images/footer-instagram.svg) no-repeat center center;
      width: 23px;
      height: 24px; }
    footer .footer__icon--li {
      background: url(../images/footer-linkedin.svg) no-repeat center center;
      width: 20px;
      height: 20px; }
    footer .footer__icon--dr {
      background: url(../images/footer-dribbble.svg) no-repeat center center;
      width: 26px;
      height: 25px; }
    footer .footer__icon--tw, footer .footer__icon--fb, footer .footer__icon--in, footer .footer__icon--li, footer .footer__icon--dr {
      transition: opacity .5s ease; }
      footer .footer__icon--tw:hover, footer .footer__icon--tw:focus, footer .footer__icon--tw:active, footer .footer__icon--fb:hover, footer .footer__icon--fb:focus, footer .footer__icon--fb:active, footer .footer__icon--in:hover, footer .footer__icon--in:focus, footer .footer__icon--in:active, footer .footer__icon--li:hover, footer .footer__icon--li:focus, footer .footer__icon--li:active, footer .footer__icon--dr:hover, footer .footer__icon--dr:focus, footer .footer__icon--dr:active {
        opacity: 0.6; }

/*  ==========================================================================
    BASE
    ========================================================================== */
img {
  width: auto;
  max-width: 100%;
  visibility: hidden;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transform: translateY(50px); }

.fadeintxt {
  visibility: hidden;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transform: translateY(50px); }

.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
  transform: translateY(0px); }

@-webkit-keyframes animat_show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.wrapper {
  position: relative;
  text-align: center;
  display: block;
  width: 100%; }
  .wrapper__inner {
    display: inline-block;
    padding: 0 40px;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    text-align: center; }

.btn {
  display: block;
  color: #151515;
  padding: 18px 49px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
  transition: all 0.5s ease; }

.figure {
  width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  margin-top: 50px; }
  .figure img {
    width: auto;
    max-width: 100%; }

section {
  padding: 60px 0px; }
  section h3 {
    margin-bottom: 20px; }
  section h2 {
    margin-bottom: 30px; }

.clients {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px; }
  .clients li {
    justify-content: center;
    align-self: center;
    width: 50%;
    margin-top: 40px;
    padding: 0 20px; }
    .clients li img {
      align-items: center;
      justify-content: center;
      padding: 10px 15px; }

.copy {
  max-width: 760px;
  margin: 0 auto;
  margin-bottom: 20px; }

.ek {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px; }
  .ek__img {
    min-height: 77px; }
  .ek li {
    width: 100%;
    padding: 0 20px;
    margin-top: 40px; }
    .ek li .ek__img {
      display: inline-block;
      vertical-align: top;
      width: 75px;
      margin-right: 25px; }
    .ek li .ek__copy {
      display: inline-block;
      width: calc(100% - 100px);
      text-align: left; }
    .ek li img {
      width: auto;
      max-width: 100%; }
    .ek li h4 {
      margin-top: 0px;
      margin-bottom: 5px; }

.flexslider {
  margin-top: 50px; }
  .flexslider .flex-viewport {
    max-width: 840px;
    margin: 0 auto;
    width: calc(100% - 100px); }
  .flexslider .flex-direction-nav {
    z-index: 99;
    height: 0; }
    .flexslider .flex-direction-nav .flex-nav-prev, .flexslider .flex-direction-nav .flex-nav-next {
      width: 45px;
      height: 45px; }
      .flexslider .flex-direction-nav .flex-nav-prev a, .flexslider .flex-direction-nav .flex-nav-next a {
        width: 45px;
        height: 45px; }
    .flexslider .flex-direction-nav .flex-nav-prev a {
      background: url(../images/arrow-left.svg) no-repeat center center;
      background-size: 45px; }
    .flexslider .flex-direction-nav .flex-nav-next a {
      background: url(../images/arrow-right.svg) no-repeat center center;
      background-size: 45px; }

@media (max-width: 601px) {
  .ek li:last-of-type {
    margin-bottom: 20px; }

  .clients li img {
    padding: 0; }

  .flexslider .flex-direction-nav .flex-nav-prev, .flexslider .flex-direction-nav .flex-nav-next {
    position: relative;
    display: inline-block;
    margin: 10px 10px 0 10px; }
    .flexslider .flex-direction-nav .flex-nav-prev a, .flexslider .flex-direction-nav .flex-nav-next a {
      position: relative;
      width: 45px;
      height: 45px; } }
@media (min-width: 600px) {
  .wrapper__inner {
    padding: 0 60px; }

  section {
    padding: 100px 0px; }
    section h3 {
      margin-bottom: 20px; }
    section h2 {
      margin-bottom: 40px; }

  .clients li {
    width: 33.333%;
    margin-top: 80px; }

  .ek {
    margin-top: 60px; }
    .ek li {
      width: 33.333%;
      margin-top: 0px; }
      .ek li .ek__img {
        display: block;
        vertical-align: top;
        width: 100%;
        margin: 0;
        text-align: center; }
      .ek li:nth-child(1) .ek__img img {
        max-width: 80px; }
      .ek li:nth-child(2) .ek__img img {
        max-width: 56px; }
      .ek li:nth-child(3) .ek__img img {
        max-width: 64px; }
      .ek li .ek__copy {
        width: 100%;
        text-align: center; }
      .ek li img {
        width: auto;
        max-width: 100%; }
      .ek li h4 {
        margin-top: 40px;
        margin-bottom: 20px; }

  .btn {
    margin-top: 50px; }

  .flexslider {
    margin-top: 80px; }
    .flexslider .flex-viewport {
      width: calc(100% - 120px); }
    .flexslider .flex-direction-nav .flex-nav-prev, .flexslider .flex-direction-nav .flex-nav-next {
      width: 50px;
      height: 50px; }
      .flexslider .flex-direction-nav .flex-nav-prev a, .flexslider .flex-direction-nav .flex-nav-next a {
        width: 50px;
        height: 50px; }
    .flexslider .flex-direction-nav .flex-nav-prev a {
      background-size: 50px; }
    .flexslider .flex-direction-nav .flex-nav-next a {
      background-size: 50px; } }
@media (min-width: 800px) {
  section {
    padding: 160px 0px; }
    section h3 {
      margin-bottom: 30px; }
    section h2 {
      margin-bottom: 50px; }

  .clients {
    margin-top: 0px; }
    .clients li {
      width: 25%;
      margin-top: 140px; }

  .ek {
    margin-top: 120px;
    margin-bottom: 70px; }
    .ek li:nth-child(1) .ek__img img {
      max-width: 100%; }
    .ek li:nth-child(2) .ek__img img {
      max-width: 100%; }
    .ek li:nth-child(3) .ek__img img {
      max-width: 100%; }
    .ek li p {
      margin: 0 auto;
      max-width: 300px; }

  .btn {
    margin-top: 50px; }
    .btn__extra {
      margin-top: 80px; }

  .flexslider {
    margin-top: 100px; } }

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