@font-face {
  font-family: 'socicon';
  src: url("../fonts/socicon.eot");
  src: url("../fonts/socicon.eot?#iefix") format("embedded-opentype"), url("../fonts/socicon.woff") format("woff"), url("../fonts/socicon.woff2") format("woff2"), url("../fonts/socicon.ttf") format("truetype"), url("../fonts/socicon.svg#sociconregular") format("svg");
  font-weight: normal;
  font-style: normal;
  text-transform: initial; }

.socicon {
  font-family: 'socicon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@-webkit-keyframes clouds {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(50%, 0);
    transform: translate(50%, 0); } }

@keyframes clouds {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(50%, 0);
    transform: translate(50%, 0); } }

* {
  box-sizing: border-box; }

body {
  font-family: 'Roboto Slab', serif;
  color: #ffffff;
  font-size: 18px; }

h1, h2 {
  margin: 0; }

h2 {
  font-size: 23px;
  margin-bottom: 10px; }

p {
  margin: 0; }

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: ' ';
    display: table;
    clear: both; }

.btn {
  display: inline-block;
  border: none;
  background: #fbbd5c;
  padding: 20px 40px;
  font-weight: bold; }
  .btn.btn-blue {
    background: #3ccab5; }

.ui-effects-wrapper {
  height: 48px !important; }

input {
  font-family: 'Roboto Slab', serif;
  color: #000;
  font-weight: 300;
  font-size: 13px;
  padding: 5px 10px;
  height: 28px !important;
  line-height: 28px !important;
  display: block;
  margin: 20px auto;
  width: 360px !important;
  border: none; }

.content {
  z-index: 100; }

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #53506a;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 60px;
  z-index: 1000; }
  header h1 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    header h1 a {
      display: block;
      width: 113px;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      background: transparent url(../img/logo.png) no-repeat center center;
      background-size: contain; }
  header ul {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none; }
  header nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    header nav a {
      color: #ffffff;
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.3s ease;
      outline: none;
      font-weight: 300; }
      header nav a:hover, header nav a:focus {
        color: #fbbd5c; }
    header nav .socials a {
      padding: 5px; }
    header nav .socials .social {
      display: none; }
    header nav .menu a {
      padding: 6px 0;
      margin-left: 44px;
      position: relative; }
      header nav .menu a:after {
        content: '';
        width: 0;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #fbbd5c;
        transition: width 0.3s ease; }
    header nav .menu .active a {
      color: #fbbd5c; }
      header nav .menu .active a:after {
        width: 100%; }
    header nav .lang-selector {
      margin-left: 50px; }
      header nav .lang-selector a {
        margin-right: 10px; }
        header nav .lang-selector a:last-child {
          margin-right: 0; }
    header nav .toggle-menu {
      position: absolute;
      display: none;
      width: 46px;
      right: 20px;
      top: 50%;
      margin-top: -16px;
      border-radius: 3px; }
      header nav .toggle-menu span {
        background-color: #ffffff;
        width: 100%;
        display: block;
        height: 5px;
        margin: 0 0 8px 0;
        border-radius: 50px;
        transition: all 0.3s ease; }
    header nav.active .toggle-menu span:nth-child(1) {
      -webkit-transform: rotate(135deg) translate(9px, -8px);
      transform: rotate(135deg) translate(9px, -8px);
      margin: 0; }
    header nav.active .toggle-menu span:nth-child(2) {
      opacity: 0; }
    header nav.active .toggle-menu span:nth-child(3) {
      -webkit-transform: rotate(-135deg) translate(5px, 4px);
      transform: rotate(-135deg) translate(5px, 4px);
      margin: 0; }

main > section {
  position: relative;
  padding-top: 72px;
  overflow: hidden; }

.section.main {
  background-color: #453096;
  transition: background-color 0.3s ease-in-out 0.6s; }
  .section.main .go-to-next-slide {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    text-decoration: none;
    display: block;
    background: #3ccab5;
    text-align: center;
    font-size: 20px;
    padding: 14px 0; }
  .section.main .clouds {
    display: block;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    position: absolute;
    background: transparent url(../img/page1_bg2.png) repeat-x 50% 50%;
    background-size: 50%;
    opacity: 0.1;
    -webkit-animation: clouds 10s linear infinite;
    animation: clouds 10s linear infinite; }
  .section.main .content {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    margin-top: -110px;
    text-align: center; }
    .section.main .content h2 {
      font-weight: normal; }

.section.what {
  background-color: #3ccab5; }
  .section.what .hand {
    background: transparent url(../img/page2_bg.png) no-repeat center center;
    background-size: contain;
    width: 435px;
    height: 600px;
    position: absolute;
    top: 50%;
    margin-top: -120px;
    right: 0; }
  .section.what .content {
    text-align: right;
    position: absolute;
    right: 580px;
    top: 50%;
    margin-top: -60px; }

.section.how {
  background-color: #dc4f4f; }
  .section.how .content {
    text-align: center;
    position: absolute;
    width: 748px;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -374px; }
    .section.how .content .boxes {
      display: block;
      width: 460px;
      margin: 40px auto;
      padding: 0;
      list-style: none; }
      .section.how .content .boxes li {
        width: 25%;
        float: left;
        display: block;
        height: 78px;
        background: transparent url(../img/page3_bg.png) no-repeat left top;
        background-size: 400%; }
        .section.how .content .boxes li:nth-child(2) {
          background-position: -115px 0; }
        .section.how .content .boxes li:nth-child(3) {
          background-position: -230px 0; }
        .section.how .content .boxes li:nth-child(4) {
          background-position: -345px 0; }

.section.who {
  background-color: #4f91c7; }
  .section.who .hand-left {
    width: 318px;
    height: 484px;
    background: transparent url(../img/page4_bg1.png) no-repeat left center;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -40px; }
  .section.who .hand-right {
    width: 400px;
    height: 662px;
    background: transparent url(../img/page4_bg2.png) no-repeat right center;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -260px; }
  .section.who .content {
    text-align: right;
    position: absolute;
    right: 580px;
    left: 0;
    padding-left: 400px;
    top: 50%;
    margin-top: -60px; }

.section.join {
  background-color: #fbbd5c; }
  .section.join .content {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    margin-top: -110px;
    text-align: center; }
    .section.join .content {
      margin-bottom: 10px; }

.section.contact {
  background-color: #453096; }
  .section.contact .people {
    width: 876px;
    height: 340px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -438px;
    background: transparent url(../img/page5_bg.png) no-repeat center center;
    background-size: contain; }
    .section.contact .people .name {
      position: absolute;
      font-size: 25px;
      text-transform: uppercase; }
      .section.contact .people .name:before {
        content: '';
        position: absolute;
        display: block; }
      .section.contact .people .name.name1 {
        left: 27px;
        top: 70px; }
        .section.contact .people .name.name1:before {
          top: 50%;
          left: 100%;
          width: 50px;
          height: 10px;
          margin-left: 10px;
          border-top: 1px solid #fff; }
      .section.contact .people .name.name2 {
        top: 10px;
        left: 134px; }
        .section.contact .people .name.name2:before {
          top: 50%;
          left: 100%;
          width: 90px;
          height: 20px;
          margin-left: 10px;
          border-top: 1px solid #fff;
          border-right: 1px solid #fff; }
      .section.contact .people .name.name3 {
        top: -24px;
        left: 258px; }
        .section.contact .people .name.name3:before {
          top: 50%;
          left: 100%;
          width: 20px;
          height: 20px;
          margin-left: 10px;
          border-top: 1px solid #fff;
          border-right: 1px solid #fff; }
      .section.contact .people .name.name4 {
        left: 412px;
        top: -12px; }
        .section.contact .people .name.name4:before {
          top: 100%;
          left: 50%;
          width: 20px;
          height: 14px;
          border-left: 1px solid #fff; }
      .section.contact .people .name.name5 {
        left: 520px;
        top: -32px; }
        .section.contact .people .name.name5:before {
          top: 100%;
          left: 50%;
          width: 20px;
          height: 30px;
          border-left: 1px solid #fff; }
      .section.contact .people .name.name6 {
        left: 663px;
        top: 30px; }
        .section.contact .people .name.name6:before {
          top: 50%;
          right: 100%;
          width: 30px;
          height: 30px;
          margin-right: 10px;
          border-top: 1px solid #fff;
          border-left: 1px solid #fff; }
      .section.contact .people .name.name7 {
        right: 0;
        top: 76px; }
        .section.contact .people .name.name7:before {
          top: 50%;
          right: 100%;
          width: 50px;
          height: 10px;
          margin-right: 10px;
          border-top: 1px solid #fff; }
  .section.contact .content {
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: 160px;
    width: 100%; }
    .section.contact .content a {
      color: #fbbd5c; }

.animate {
  opacity: 0;
  transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
  .animate.animate-top {
    -webkit-transform: translate(0, -80px);
    transform: translate(0, -80px); }
  .animate.animate-top-left {
    -webkit-transform: translate(-80px, -80px);
    transform: translate(-80px, -80px); }
  .animate.animate-top-right {
    -webkit-transform: translate(80px, -80px);
    transform: translate(80px, -80px); }
  .animate.animate-bottom {
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px); }
  .animate.animate-bottom-left {
    -webkit-transform: translate(-80px, 80px);
    transform: translate(-80px, 80px); }
  .animate.animate-bottom-right {
    -webkit-transform: translate(80px, 80px);
    transform: translate(80px, 80px); }
  .animate.animate-left {
    -webkit-transform: translate(-80px, 0);
    transform: translate(-80px, 0); }
  .animate.animate-right {
    -webkit-transform: translate(80px, 0);
    transform: translate(80px, 0); }
  .animate.visible {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }

.animate-delay-1 {
  transition-delay: 0.1s; }

.animate-delay-2 {
  transition-delay: 0.2s; }

.animate-delay-3 {
  transition-delay: 0.3s; }

.animate-delay-4 {
  transition-delay: 0.4s; }

.animate-delay-5 {
  transition-delay: 0.5s; }

.animate-delay-6 {
  transition-delay: 0.6s; }

.animate-delay-7 {
  transition-delay: 0.7s; }

.animate-delay-8 {
  transition-delay: 0.8s; }

.animate-delay-9 {
  transition-delay: 0.9s; }

.animate-delay-10 {
  transition-delay: 1s; }

.animate-delay-11 {
  transition-delay: 1.1s; }

.animate-delay-12 {
  transition-delay: 1.2s; }

.animate-delay-13 {
  transition-delay: 1.3s; }

.animate-delay-14 {
  transition-delay: 1.4s; }

.animate-delay-15 {
  transition-delay: 1.5s; }

.animate-delay-16 {
  transition-delay: 1.6s; }

.animate-delay-17 {
  transition-delay: 1.7s; }

.animate-delay-18 {
  transition-delay: 1.8s; }

.animate-delay-19 {
  transition-delay: 1.9s; }

.animate-delay-20 {
  transition-delay: 2s; }

.animate-delay-21 {
  transition-delay: 2.1s; }

.animate-delay-22 {
  transition-delay: 2.2s; }

.animate-delay-23 {
  transition-delay: 2.3s; }

.animate-delay-24 {
  transition-delay: 2.4s; }

.animate-delay-25 {
  transition-delay: 2.5s; }

.animate-delay-26 {
  transition-delay: 2.6s; }

.animate-delay-27 {
  transition-delay: 2.7s; }

.animate-delay-28 {
  transition-delay: 2.8s; }

.animate-delay-29 {
  transition-delay: 2.9s; }

.animate-delay-30 {
  transition-delay: 3s; }

.animate-delay-31 {
  transition-delay: 3.1s; }

.slides-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .slides-wrapper .main-page-slide.active .animate {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  .slides-wrapper .main-page-slide.slide-1 .family {
    width: 546px;
    height: 336px;
    display: block;
    position: absolute;
    bottom: 100px;
    left: 40%;
    margin-left: -446px;
    background: transparent url(../img/page1_bg1.png) no-repeat center center;
    background-size: contain; }
  .slides-wrapper .main-page-slide.slide-2 .moon {
    width: 435px;
    height: 440px;
    display: block;
    position: absolute;
    top: 50%;
    left: 5%;
    margin-top: -220px;
    background: transparent url(../img/page1_bg2_1.png) no-repeat center center;
    background-size: contain; }
  .slides-wrapper .main-page-slide.slide-2 .tree {
    width: 362px;
    height: 358px;
    display: block;
    position: absolute;
    bottom: 50px;
    right: 5%;
    background: transparent url(../img/page1_bg2_2.png) no-repeat center bottom;
    background-size: contain; }
  .slides-wrapper .main-page-slide.slide-3 .ice {
    width: 230px;
    height: 185px;
    display: block;
    position: absolute;
    bottom: 80px;
    left: 5%;
    background: transparent url(../img/page1_bg3_1.png) no-repeat center bottom;
    background-size: contain; }
  .slides-wrapper .main-page-slide.slide-3 .ship {
    width: 305px;
    height: 386px;
    display: block;
    position: absolute;
    bottom: 80px;
    right: 0;
    background: transparent url(../img/page1_bg3_2.png) no-repeat right bottom;
    background-size: contain; }

.error {
  margin: -10px 0 10px 0;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 0 3px #ff0000, 0 0 3px #ff0000, 0 0 3px #ff0000, 0 0 3px #ff0000, 0 0 3px #ff0000, 0 0 3px #ff0000, 0 0 3px #ff0000;
  display: none; }
  .error a {
    color: #ffffff;
    font-weight: bold; }

.success {
  margin: -10px 0 10px 0;
  font-size: 14px;
  color: #ffffff;
  display: none; }
  .success a {
    color: #ffffff;
    font-weight: bold; }

.referral {
  width: 100%;
  height: 100%;
  border: none;
  display: block; }

.ui-dialog {
  border-radius: 0;
  position: fixed;
  z-index: 1020 !important;
  padding: 0;
  font-family: 'Roboto Slab', serif;
  border: 2px solid #53506a; }
  .ui-dialog .ui-dialog-content {
    padding: 0; }
  .ui-dialog .ui-button {
    outline: none;
    border-radius: 0;
    border: none;
    background: transparent;
    padding: 0;
    position: absolute;
    overflow: hidden;
    right: 10px; }
    .ui-dialog .ui-button .ui-icon {
      background: none;
      display: block;
      transition: -webkit-transform 0.15s ease-out;
      transition: transform 0.15s ease-out; }
      .ui-dialog .ui-button .ui-icon:before, .ui-dialog .ui-button .ui-icon:after {
        content: '';
        display: block;
        position: absolute;
        width: 200%;
        left: -50%;
        height: 2px;
        background: #fff;
        top: 50%;
        margin-top: -1px; }
      .ui-dialog .ui-button .ui-icon:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
      .ui-dialog .ui-button .ui-icon:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg); }
    .ui-dialog .ui-button:hover .ui-icon {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); }
  .ui-dialog .ui-dialog-titlebar {
    border-radius: 0;
    color: #fff;
    background: #53506a;
    border: none;
    font-weight: 300; }

.ui-widget-overlay {
  background: #53506a;
  opacity: 0.5;
  z-index: 1010 !important; }

.mobile-link {
  display: block;
  margin: 20px auto;
  width: 125px; }
  .mobile-link img {
      display: block;
      width: 100%;
  }

.message {
  text-align: center;
  padding: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }
  .message > * {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .message .message-content {
    margin-bottom: 20px;
    padding-top: 40px;
    -webkit-flex-grow: 4;
    -ms-flex-positive: 4;
    flex-grow: 4; }
  .message p {
    margin-bottom: 10px; }
  .message ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .message ul li {
      display: inline-block;
      margin: 0 10px 0 0; }
      .message ul li:last-child {
        margin: 0; }
      .message ul li a {
        display: block;
        color: #fff;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50px;
        text-decoration: none; }
      .message ul li:nth-child(1) a {
        background-color: #3b5998; }
      .message ul li:nth-child(2) a {
        background-color: #2daae1; }
      .message ul li:nth-child(3) a {
        background-color: #cb2027; }
      .message ul li:nth-child(4) a {
        background-color: #dd4b39; }
      .message ul li .social {
        display: none; }

@media all and (max-width: 1300px) {
  .section.who .hand-left {
    width: 208px; }
  .section.who .hand-right {
    width: 338px; }
  .section.who .content {
    right: 430px;
    padding-left: 220px; } }

@media all and (max-width: 1100px) {
  .section.main .content {
    top: 35%; }
  .section.what .hand {
    width: 368px; }
  .section.what .content {
    right: 400px; }
  .section.how .hand-left {
    width: 208px; }
  .section.how .hand-right {
    top: inherit;
    bottom: 0;
    height: 480px; }
  .section.how .content {
    right: 0;
    padding-left: 0;
    text-align: center;
    padding-left: 0;
    top: 25%; }
  .slides-wrapper .main-page-slide.slide-1 .family {
    margin-left: -200px; } }

@media all and (max-width: 960px) {
  .content {
    position: inherit !important;
    margin: 30px 0 0 0 !important;
    text-align: center !important;
    width: 100% !important; }
  .btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    padding: 20px 0; }
  header nav .lang-selector {
    margin-left: 20px; }
  .section.main .slides-wrapper {
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
    position: relative;
    height: 370px; }
    .section.main .slides-wrapper .noinview {
      margin: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0; }
  .section.what .hand {
    float: right;
    position: inherit;
    width: 50%;
    height: 380px;
    background-position: right center;
    margin: 40px 0 0 0; }
  .section.who .hand-left {
    width: 50%;
    float: left;
    position: inherit;
    height: 250px;
    background-position: left center;
    margin-top: 80px; }
  .section.who .hand-right {
    width: 50%;
    float: left;
    position: inherit;
    height: 250px;
    background-position: right center;
    margin-top: 40px; }
  .section.who .content {
    right: 0;
    padding-left: 0;
    text-align: center;
    padding-left: 0;
    top: 25%; }
  .section.how .content {
    padding: 0; }
    .section.how .content .boxes {
      margin-top: 100px;
      width: 100%; }
      .section.how .content .boxes li {
        display: inline-block;
        float: none;
        width: 115px; }
  .section.contact .people {
    position: inherit;
    margin: 40px auto 0 20px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7); } }

@media all and (max-width: 960px) {
  .animate {
    opacity: 1;
    -webkit-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important; }
  main section {
    padding-top: 70px;
    padding-bottom: 70px; }
  .section.main .go-to-next-slide {
    display: none; }
  .section.contact .people {
    -webkit-transform: scale(0.5) !important;
    transform: scale(0.5) !important; }
  input {
    width: 80% !important;
    display: block;
    margin-left: auto;
    margin-right: auto; }
  header {
    height: 60px;
    padding-left: 20px;
    padding-right: 80px; }
    header nav .toggle-menu {
      display: block; }
    header nav .menu {
      position: fixed;
      left: 0;
      right: 0;
      top: 60px;
      display: block;
      background-color: rgba(83, 80, 106, 0.8);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease-in-out; }
      header nav .menu li {
        display: block;
        font-size: 15px;
        padding: 0 20px; }
        header nav .menu li a {
          margin: 10px 0;
          display: block; }
      header nav .menu .active a {
        color: #ffffff; }
        header nav .menu .active a:after {
          display: none; }
    header nav.active .menu {
      max-height: 1000px; }
  .slides-wrapper .main-page-slide .animate {
    opacity: 0; }
  .slides-wrapper .main-page-slide.slide-2 .moon {
    right: 50%;
    width: 50%;
    height: 75%; }
  .slides-wrapper .main-page-slide.slide-2 .tree {
    left: 50%;
    width: 50%;
    top: 25%;
    height: 75%;
    margin-top: 70px; }
  .slides-wrapper .main-page-slide.slide-3 .ice {
    right: 50%;
    width: 50%;
    top: 75%;
    height: 25%; }
  .slides-wrapper .main-page-slide.slide-3 .ship {
    left: 50%;
    width: 50%; } }

@media all and (max-width: 520px) {
  .section.contact .people {
    -webkit-transform: scale(0.3) !important;
    transform: scale(0.3) !important; } }