@import url(https://fonts.googleapis.com/css?family=Barlow:100,200,400,400i,700,700i);
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/*********************
VARIABLES
*********************/
/*********************
BREAKPOINTS
*********************/
/*********************
MIXINGS
*********************/
/*********************
ESTRUTURA
*********************/
.row {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }
  .row::after {
    clear: both;
    content: "";
    display: block; }
  .row .row-inner {
    float: left;
    display: block;
    margin-right: 0.95016%;
    width: 49.52492%;
    margin-left: 33.65005%; }
    .row .row-inner:last-child {
      margin-right: 0; }

.container {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto; }
  .container::after {
    clear: both;
    content: "";
    display: block; }
  .container::after {
    clear: both;
    content: "";
    display: block; }
  .container .container-inner {
    float: left;
    display: block;
    margin-right: 0.95016%;
    width: 49.52492%;
    margin-left: 33.65005%; }
    .container .container-inner:last-child {
      margin-right: 0; }
  @media screen and (min-width: 1701px) and (max-width: 1920px) {
    .container {
      max-width: 70%;
      margin-left: auto;
      margin-right: auto; }
      .container::after {
        clear: both;
        content: "";
        display: block; }
      .container::after {
        clear: both;
        content: "";
        display: block; } }
  @media screen and (min-width: 1000px) and (max-width: 1365px) {
    .container {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto; }
      .container::after {
        clear: both;
        content: "";
        display: block; }
      .container::after {
        clear: both;
        content: "";
        display: block; } }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .container {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto; }
      .container::after {
        clear: both;
        content: "";
        display: block; }
      .container::after {
        clear: both;
        content: "";
        display: block; } }
  @media screen and (min-width: 1366px) and (max-width: 1400px) {
    .container {
      max-width: 80%;
      margin-left: auto;
      margin-right: auto; }
      .container::after {
        clear: both;
        content: "";
        display: block; }
      .container::after {
        clear: both;
        content: "";
        display: block; } }
  @media screen and (max-width: 640px) {
    .container {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto; }
      .container::after {
        clear: both;
        content: "";
        display: block; }
      .container::after {
        clear: both;
        content: "";
        display: block; } }

.negrito {
  font-weight: 700; }

.sublinhado {
  text-decoration: underline; }

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

svg {
  background-color: transparent;
  fill: currentColor;
  width: 24px;
  height: 24px; }

/*********************
BODY
*********************/
html {
  top: 0;
  margin-top: 0; }

body {
  height: 100vh;
  position: relative;
  z-index: 1;
  -o-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-family: 'Barlow', sans-serif;
  color: black;
  background: #6db9d8;
  background: linear-gradient(180deg, #6db9d8 0%, #47c090 100%); }

a {
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  color: white;
  text-decoration: none;
  outline: 0; }

a:hover, a:active, a:focus {
  outline: 0; }

/*********************
PARAGRAFO
*********************/
p {
  font-size: 1em;
  line-height: 1.8em;
  margin-top: 0;
  margin-bottom: 1em;
  font-weight: 300;
  color: black;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }
  @media screen and (max-width: 640px) {
    p {
      font-size: .9em; } }
  @media screen and (min-width: 1701px) and (max-width: 1920px) {
    p {
      font-size: 1em; } }

h1, h2 {
  color: white;
  font-family: 'Barlow', sans-serif;
  line-height: 1.1em; }

h3, h4, h5 {
  color: white;
  font-family: 'Barlow', sans-serif;
  line-height: 1.1em;
  font-weight: 500; }

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

.clear, .clearfix {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

h1 {
  display: none; }

::-webkit-input-placeholder {
  font-size: .7em;
  color: #01605B;
  font-family: 'Barlow', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px; }

:-moz-placeholder {
  font-size: .7em;
  color: #01605B;
  font-family: 'Barlow', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase; }

::-moz-placeholder {
  font-size: .7em;
  color: #01605B;
  font-family: 'Barlow', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase; }

:-ms-input-placeholder {
  font-size: .7em;
  color: #01605B;
  font-family: 'Barlow', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase; }

section {
  margin: 2em 0;
  float: left;
  width: 100%; }

h2.titulos {
  font-size: 3em;
  margin-bottom: 1em;
  font-weight: 400;
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 2em; }
  h2.titulos span {
    display: block;
    border-bottom: 5px solid #3DAEB5;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    margin-top: 18px;
    opacity: 0;
    animation: fadeIn 1s ease-in both; }
  @media screen and (max-width: 640px) {
    h2.titulos {
      font-size: 2em; } }

h3.titulos {
  font-size: 2.2em; }

h3.subtitulos {
  color: #01605B;
  font-weight: 600;
  font-size: 1.8em;
  width: 100%;
  float: left;
  margin-bottom: 10px; }

/*********************
HEADER
*********************/
header {
  width: 100%;
  float: left;
  padding: 2em 0; }
  @media screen and (max-width: 640px) {
    header {
      padding: 2em 0 1em 0; } }

.logo {
  background: url(../images/kaisa-logo.png) center top no-repeat;
  background: url(../images/kaisa-logo.svg) center top no-repeat;
  background-size: contain;
  position: relative;
  margin: 0 auto;
  width: 15%;
  height: 120px;
  text-align: center;
  margin-top: 5%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }
  @media screen and (max-width: 640px) {
    .logo {
      margin-top: 0; } }

.site-nav {
  width: 100%;
  float: left;
  margin-top: -8em; }
  .site-nav ul {
    text-align: center; }
    .site-nav ul li {
      display: inline-block;
      width: 15%;
      text-transform: uppercase;
      font-weight: 400;
      position: relative;
      font-size: .9em;
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .site-nav ul li:nth-child(3) {
        width: 25% !important;
        border: none; }
      .site-nav ul li a {
        color: white;
        letter-spacing: 2px; }
        @media screen and (min-width: 1000px) and (max-width: 1365px) {
          .site-nav ul li a {
            letter-spacing: 0; } }
        .site-nav ul li a:hover {
          color: black; }
        .site-nav ul li a:after {
          content: '';
          display: block;
          width: 0;
          height: 2px;
          background: #3DAEB5;
          transition: width .3s; }
        .site-nav ul li a:hover:after {
          width: 100%; }

nav ul li:nth-child(3) {
  width: 25% !important;
  border: none; }

.site-nav {
  transition: clip-path ease-in-out 700ms;
  position: relative;
  z-index: 99999; }
  .site-nav ul {
    width: 100%; }
  @media screen and (max-width: 640px) {
    .site-nav {
      display: none; } }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .site-nav {
      display: none; } }

.site-nav--open {
  clip-path: circle(250% at top right);
  display: block;
  z-index: 99;
  background: #01605B;
  float: right;
  position: absolute;
  margin-right: 0;
  width: 100%;
  right: 0;
  top: 115px;
  border-top: 0;
  padding: 1em; }
  @media screen and (max-width: 640px) {
    .site-nav--open {
      display: block; } }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .site-nav--open {
      display: block; } }
  .site-nav--open a {
    color: white !important;
    text-decoration: none !important; }
  .site-nav--open nav {
    width: 100% !important; }
  .site-nav--open li {
    width: 100%;
    margin: 0;
    padding: 0 !important; }
    .site-nav--open li a {
      padding: 10px; }
      .site-nav--open li a:hover {
        color: white;
        text-decoration: none !important; }

.site-nav--open.fechar {
  display: none; }

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 40px;
  right: 10px;
  cursor: pointer;
  display: none; }
  @media screen and (max-width: 640px) {
    .menu-toggle {
      display: block; } }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .menu-toggle {
      display: block; } }

.site-nav--icon {
  display: none; }
  @media screen and (max-width: 640px) {
    .site-nav--icon {
      display: block; } }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .site-nav--icon {
      display: block; } }

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: #01605B;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms; }

.hamburger::before {
  transform: translateY(-6px); }

.hamburger::after {
  transform: translateY(3px); }

.open .hamburger {
  transform: rotate(45deg); }

.open .hamburger::before {
  opacity: 0; }

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg); }

/*********************
DESTAQUE
*********************/
#destaque {
  text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.25em 2.5em;
  z-index: 200; }
  #destaque h2 {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 5em; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-moz-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.fade-in {
  opacity: 0;
  opacity: 1 \9;
  /*just in case ie*/
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s; }

.fade-in.one {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s; }

.fade-in.two {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  animation-delay: .3s; }

.fade-in.three {
  -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  animation-delay: .6s; }

.fade-in.four {
  -webkit-animation-delay: .9s;
  -moz-animation-delay: .9s;
  animation-delay: .9s; }

.fade-in.five {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s; }

/*********************
OUTROS
*********************/
@media only screen and (min-device-width: 300px) and (max-device-width: 1000px) {
  .site-nav li {
    display: inline-block;
    border: none;
    padding: 1em 0; }

  .site-nav a {
    padding: 10px 0; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles for tablet */ }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  /* Don't forget your Retina CSS! */ }