@import 'body/header.css';
@import 'body/firemans.css';
@import 'body/commix.css';

input, textarea {
  -webkit-appearance: none;
  border-radius: 0; }

@font-face {
  font-family: 'Apple Garamond Light';
  font-style: normal;
  font-weight: normal;
  src: local("Apple Garamond Light"), url("fonts/apple-garamond/AppleGaramond-Light.woff") format("woff"); }
@font-face {
  font-family: 'Apple Garamond';
  font-style: normal;
  font-weight: normal;
  src: local("Apple Garamond"), url("fonts/apple-garamond/AppleGaramond.woff") format("woff"); }
@font-face {
  font-family: 'Apple Garamond Light Italic';
  font-style: italic;
  font-weight: 100;
  src: local("Apple Garamond Light Italic"), url("fonts/apple-garamond/AppleGaramond-LightItalic.woff") format("woff"); }
@font-face {
  font-family: 'Apple Garamond Italic';
  font-style: normal;
  font-weight: normal;
  src: local("Apple Garamond Italic"), url("fonts/apple-garamond/AppleGaramond-Italic.woff") format("woff"); }
@font-face {
  font-family: 'Apple Garamond Bold';
  font-style: normal;
  font-weight: normal;
  src: local("Apple Garamond Bold"), url("fonts/apple-garamond/AppleGaramond-Bold.woff") format("woff"); }
@font-face {
  font-family: 'Apple Garamond Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local("Apple Garamond Bold Italic"), url("fonts/apple-garamond/AppleGaramond-BoldItalic.woff") format("woff"); }
.collapsing {
  -webkit-transition: none !important;
  transition: none !important; }

@media (max-width: 1100px) {
  header .navbar .navbar-collapse ul, header .navbar .collapsing ul {
    margin: 0;
    position: absolute;
    transition: 0s;
    left: -15px;
    top: 60px;
    display: block !important; }
    header .navbar .navbar-collapse ul li, header .navbar .collapsing ul li {
      display: block;
      float: left;
      clear: both; }
  header .navbar .navbar-collapse.collapsing, header .navbar .collapsing.collapsing {
    -webkit-transition: height 0s !important;
    -moz-transition: height 0s !important;
    -ms-transition: height 0s !important;
    -o-transition: height 0s !important;
    transition: height 0s !important; }
  header .navbar .collapse {
    display: block !important; }
    header .navbar .collapse ul {
      position: relative;
      display: none !important; }
  header .navbar-toggle {
    display: block !important; } }
header {
  width: 100%;
  z-index: 13000;
  position: relative;
  height: 130px; }
  header .navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    min-height: initial;
    margin-bottom: 0;
    background-color: transparent;
    border: 0 transparent;
    height: 70px; }
    header .navbar #burger {
      display: none !important;
      margin: 0;
      border: 0;
      width: 30px;
      height: 25px;
      float: left;
      margin-left: -30px;
      box-sizing: content-box;
      -webkit-box-flex: 0;
      -webkit-flex: 0 1 30px;
      -moz-box-flex: 0;
      -moz-flex: 0 1 30px;
      -ms-flex: 0 1 30px;
      flex: 0 1 30px;
      padding: 35px 30px 30px; }
      header .navbar #burger:hover {
        background-color: transparent;
        opacity: 0.7; }
    header .navbar .navbar-brand {
      padding: 0; }
      header .navbar .navbar-brand img {
        width: 16vw;
        min-width: 226px; }
    header .navbar #logo {
      margin: 0;
      padding: 0;
      width: 16%;
      min-width: 160px;
      -webkit-box-flex: 0;
      -webkit-flex: 0 1 16%;
      -moz-box-flex: 0;
      -moz-flex: 0 1 16%;
      -ms-flex: 0 1 16%;
      flex: 0 1 16%; }
      header .navbar #logo > img {
        max-width: 226px;
        width: 100%;
        height: 34px;
        padding: 0;
        margin: 22px 20px 20px 0; }
    header .navbar #header_menu {
      font-size: 18px;
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
      -moz-box-flex: 1;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      text-align: center;
      padding: 0;
      margin-top: 13px;
      border: 0;
      transition: 0s; }
      header .navbar #header_menu ul {
        display: none !important;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center; }
        header .navbar #header_menu ul li {
          -webkit-box-flex: 0;
          -webkit-flex: 0 1 auto;
          -moz-box-flex: 0;
          -moz-flex: 0 1 auto;
          -ms-flex: 0 1 auto;
          flex: 0 1 auto; }
          header .navbar #header_menu ul li a {
            text-decoration: none;
            color: #000; }
            header .navbar #header_menu ul li a:hover {
              text-decoration: underline; }
    header .navbar ul#language_menu {
      -webkit-box-flex: 0;
      -webkit-flex: 0 1 20vw;
      -moz-box-flex: 0;
      -moz-flex: 0 1 20vw;
      -ms-flex: 0 1 20vw;
      flex: 0 1 20vw;
      margin: 0;
      padding: 0;
      color: #000;
      margin-top: 13px; }
      header .navbar ul#language_menu li {
        margin: 0;
        padding: 0;
        float: right;
        margin-right: -10px; }
        header .navbar ul#language_menu li a {
          font-size: 1.2vw;
          color: #000;
          text-decoration: none; }
          header .navbar ul#language_menu li a:hover {
            text-decoration: underline; }
        header .navbar ul#language_menu li:last-of-type a {
          background-color: transparent;
          font-weight: bold;
          color: #000; }
  header #slogan {
    background-color: #f1c40f;
    color: #fff;
    padding: 20px;
    padding-top: 74px;
    position: absolute;
    top: 16.3vw;
    right: 0;
    min-width: 160px;
    width: 12vw;
    font-size: 1vw;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    letter-spacing: 1px; }
    header #slogan b {
      margin-top: 3px;
      display: block;
      font-weight: 500; }

@media (max-width: 768px) {
  header .navbar #burger {
    padding: 25px;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: 10px; }
  header .navbar .navbar-brand {
    width: 160px;
    height: 24px;
    min-width: initial;
    margin-left: 20px; }
    header .navbar .navbar-brand img {
      height: 100%; }
  header .navbar ul#language_menu {
    margin-top: 8px;
    margin-right: 15px; }
  header #slogan {
    top: calc( 100vh - 250px );
    right: 20px; } }
#contacts {
  display: block; }
  #contacts h2 {
    margin-bottom: 4%; }
  #contacts p {
    width: 70%;
    font-size: 82%;
    font-size: 1.4vw; }
  #contacts > div#contact_form {
    margin-top: 3.5%; }
    #contacts > div#contact_form .required::-webkit-input-placeholder {
      /* WebKit, Blink, Edge */
      color: #f1c40f; }
    #contacts > div#contact_form .required:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #f1c40f;
      opacity: 1; }
    #contacts > div#contact_form .required::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #f1c40f;
      opacity: 1; }
    #contacts > div#contact_form .required:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #f1c40f; }
    #contacts > div#contact_form form {
      width: 100%;
      padding-bottom: 10%; }
      #contacts > div#contact_form form.sended_twice .sended_succes {
        opacity: 1;
        display: block;
        transition: 0.3s; }
      #contacts > div#contact_form form .sended_succes {
        position: absolute;
        top: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        height: 401px;
        opacity: 0;
        display: none;
        transition: 0.3s; }
        #contacts > div#contact_form form .sended_succes > div {
          height: 400px;
          text-align: center;
          font-size: 200%;
          padding-top: 60px; }
          #contacts > div#contact_form form .sended_succes > div b {
            display: block;
            font-weight: normal;
            font-size: 25px;
            padding-bottom: 15px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
          #contacts > div#contact_form form .sended_succes > div img {
            height: 70%;
            cursor: pointer; }
      #contacts > div#contact_form form input, #contacts > div#contact_form form textarea {
        width: 100%;
        display: block;
        margin-bottom: 1%;
        padding: 0.5%;
        background-color: #fff;
        border: 1px solid #979797; }
      #contacts > div#contact_form form input {
        height: 5%;
        text-align: center; }
        #contacts > div#contact_form form input[type="button"] {
          background-color: #000;
          color: #fff;
          border: 0;
          padding: 1%;
          transition: 0.05s; }
          #contacts > div#contact_form form input[type="button"]:hover {
            background-color: #f1c40f; }
          #contacts > div#contact_form form input[type="button"].disabled {
            cursor: default; }
            #contacts > div#contact_form form input[type="button"].disabled:hover {
              background-color: #000; }
        #contacts > div#contact_form form input[disabled] {
          pointer-events: none;
          background-color: #777; }
      #contacts > div#contact_form form textarea {
        height: 150px;
        text-align: center; }
  #contacts #contacts_logo {
    display: none; }
  #contacts > div {
    width: calc(100% + 50px);
    margin-left: -25px;
    display: block;
    padding-bottom: 6%; }
    #contacts > div img#firemans {
      width: 100%; }
    #contacts > div > div {
      width: 50%;
      height: 100%;
      display: block;
      position: absolute;
      bottom: 0; }
      #contacts > div > div h3 {
        width: 43%;
        padding: 4%;
        background-color: #f1c40f;
        display: block;
        position: absolute;
        bottom: 0;
        font-size: 1.5vw;
        padding-top: 24%;
        font-weight: 300;
        color: #fff;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
        #contacts > div > div h3 b {
          display: block;
          font-size: 1.4vw; }
      #contacts > div > div .social_icons {
        width: 30%;
        position: absolute;
        bottom: 10px; }
        #contacts > div > div .social_icons li {
          width: calc( 100%/3 ); }
          #contacts > div > div .social_icons li a span {
            margin: 7%;
            width: 80%; }
      #contacts > div > div:first-of-type {
        left: 0; }
        #contacts > div > div:first-of-type h3 {
          left: 32%; }
      #contacts > div > div:last-of-type {
        right: 0; }
        #contacts > div > div:last-of-type .social_icons {
          right: 0; }
        #contacts > div > div:last-of-type h3 {
          right: 32%; }

@media (max-width: 768px) {
  #contacts h2 {
    float: right;
    padding-bottom: 10%;
    font-size: 28vw; }
  #contacts p {
    width: 90%;
    margin-left: 5%;
    padding-bottom: 10%;
    font-size: 82%; }
  #contacts form input {
    height: 8%;
    font-size: 7vw;
    margin-bottom: 2.5%; }
  #contacts form textarea {
    margin-bottom: 2.5%;
    font-size: 5vw;
    transition: 0.3s; }
    #contacts form textarea.empty {
      font-size: 7vw; }
    #contacts form textarea:focus {
      font-size: 5vw; }
  #contacts > div {
    height: 100vw; }
    #contacts > div:last-of-type {
      height: 100vw; }
    #contacts > div > img {
      display: none; }
    #contacts > div #contacts_logo {
      display: block;
      margin-top: 24vw;
      position: absolute;
      left: 50%;
      -ms-transform: translate(-50%, 50%);
      /* IE 9 */
      -webkit-transform: translate(-50%, 50%);
      /* Safari */
      transform: translate(-50%, 50%); }
    #contacts > div > div h3 {
      width: 80%;
      padding-top: 50%;
      bottom: 43vw;
      font-size: 4vw; }
      #contacts > div > div h3 b {
        font-size: 4vw; }
    #contacts > div > div .social_icons {
      bottom: 5%;
      width: 80%; }
    #contacts > div > div:first-of-type {
      left: 0; }
      #contacts > div > div:first-of-type h3 {
        left: 15%; }
      #contacts > div > div:first-of-type .social_icons {
        left: 15%; }
    #contacts > div > div:last-of-type {
      right: 0; }
      #contacts > div > div:last-of-type .social_icons {
        right: 15%; }
      #contacts > div > div:last-of-type h3 {
        right: 15%; } }
#portfolio_popup {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.2);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: block;
  opacity: 0;
  transition: 0.3s; }
  #portfolio_popup.show {
    opacity: 1; }
  #portfolio_popup .close_bg {
    position: absolute;
    width: 100%;
    height: 100%; }
  #portfolio_popup #modal-dialog {
    position: absolute;
    left: 50%;
    top: 44%;
    -ms-transform: translate(-50%, -50%);
    /* IE 9 */
    -webkit-transform: translate(-50%, -50%);
    /* Safari */
    transform: translate(-50%, -50%);
    width: 70%; }
    #portfolio_popup #modal-dialog.img {
      top: 50%; }
      #portfolio_popup #modal-dialog.img .close_x {
        margin-top: -7%; }
      #portfolio_popup #modal-dialog.img .popup_desc {
        width: 45%;
        margin-bottom: 0;
        margin-left: -50%; }
    #portfolio_popup #modal-dialog .popup_desc {
      width: 28%;
      bottom: 0;
      height: auto;
      padding: 2%;
      font-size: 80%;
      padding-top: 5%;
      font-weight: 600;
      position: fixed;
      margin-top: 40%;
      background-color: #f1c40f;
      color: #fff;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin-bottom: -21%; }
      #portfolio_popup #modal-dialog .popup_desc a {
        color: #fff;
        text-decoration: none; }
        #portfolio_popup #modal-dialog .popup_desc a:hover {
          text-decoration: underline; }
    #portfolio_popup #modal-dialog ul, #portfolio_popup #modal-dialog li {
      width: 100%;
      height: 100%; }
    #portfolio_popup #modal-dialog li {
      position: absolute;
      opacity: 0;
      transition: 0.3s; }
      #portfolio_popup #modal-dialog li img {
        height: 100%;
        position: absolute;
        left: 50%;
        -ms-transform: translate(-50%, 0);
        /* IE 9 */
        -webkit-transform: translate(-50%, 0);
        /* Safari */
        transform: translate(-50%, 0); }
      #portfolio_popup #modal-dialog li.current {
        opacity: 1; }
    #portfolio_popup #modal-dialog img.arrow {
      position: absolute;
      top: calc( 50% - 3vw );
      left: -5vw;
      padding: 2vw;
      width: 6vw;
      transition: 0.3s;
      opacity: 0.2;
      cursor: pointer; }
      #portfolio_popup #modal-dialog img.arrow:last-of-type {
        right: -5vw;
        left: auto; }
      #portfolio_popup #modal-dialog img.arrow:hover {
        opacity: 1; }
    #portfolio_popup #modal-dialog:hover img.arrow {
      opacity: 0.7; }
    #portfolio_popup #modal-dialog .close_x {
      color: #000;
      font-weight: 400;
      font-size: 1.2vw;
      float: right;
      margin-top: -4%;
      text-decoration: none; }
      #portfolio_popup #modal-dialog .close_x:hover {
        text-decoration: underline; }
    #portfolio_popup #modal-dialog div {
      position: absolute;
      height: 100%;
      width: 100%; }
    #portfolio_popup #modal-dialog #modal-body iframe {
      background-color: #000;
      width: 100%;
      height: 100%;
      border: 0; }

.blur {
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  filter: blur(15px);
  transition: 0.3s; }

#our_work p {
  width: 46%;
  font-size: 1.4vw; }
#our_work .skip_game {
  float: right;
  margin-top: -5.5%;
  position: absolute;
  right: 10px;
  padding-bottom: 0.3vw; }
#our_work #memory_game_canvas {
  width: 100%;
  display: block;
  float: left;
  text-align: center;
  clear: both;
  margin-top: 1%; }
  #our_work #memory_game_canvas ul {
    width: 100%; }
    #our_work #memory_game_canvas ul li.flip-container {
      display: block;
      float: left;
      width: calc(100%/8);
      padding-bottom: calc(100%/8);
      position: relative; }
      #our_work #memory_game_canvas ul li.flip-container .flipperHover {
        perspective: 1000px;
        cursor: pointer;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 4%; }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover.first_init .flipper {
          -ms-transform: rotateY(0deg);
          /* IE 9 */
          -webkit-transform: rotateY(0deg);
          /* Safari */
          transform: rotateY(0deg); }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover.first_init.hover .flipper {
          transition-delay: 0s; }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover.hover .flipper, #our_work #memory_game_canvas ul li.flip-container .flipperHover.success .flipper {
          -ms-transform: rotateY(180deg);
          /* IE 9 */
          -webkit-transform: rotateY(180deg);
          /* Safari */
          transform: rotateY(180deg);
          transition-delay: 0s; }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover.hideCard {
          transition: 1s;
          opacity: 0;
          pointer-events: none; }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover .flipper {
          transition-delay: 0s;
          transition: 0.4s;
          transform-style: preserve-3d;
          position: relative;
          width: 100%;
          height: 100%;
          -ms-transform: rotateY(180deg);
          /* IE 9 */
          -webkit-transform: rotateY(180deg);
          /* Safari */
          transform: rotateY(180deg); }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover .front, #our_work #memory_game_canvas ul li.flip-container .flipperHover .back {
          -ms-backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%; }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover .front {
          z-index: 2;
          -ms-transform: rotateY(0deg);
          /* IE 9 */
          -webkit-transform: rotateY(0deg);
          /* Safari */
          transform: rotateY(0deg);
          background-color: #f1c40f;
          width: 100%;
          height: 100%; }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover .back {
          z-index: 1;
          -ms-transform: rotateY(180deg);
          /* IE 9 */
          -webkit-transform: rotateY(180deg);
          /* Safari */
          transform: rotateY(180deg); }
        #our_work #memory_game_canvas ul li.flip-container .flipperHover img {
          background-color: #fff;
          border: 1px solid #000;
          display: block;
          float: left;
          width: 100%; }
  #our_work #memory_game_canvas img {
    width: 100%; }

.iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.hover.first_init .flipper, .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.success.first_init .flipper {
  -ms-transform: rotateY(0deg);
  /* IE 9 */
  -webkit-transform: rotateY(0deg);
  /* Safari */
  transform: rotateY(0deg); }
  .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.hover.first_init .flipper .front, .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.success.first_init .flipper .front {
    -ms-transform: rotateY(180deg);
    /* IE 9 */
    -webkit-transform: rotateY(180deg);
    /* Safari */
    transform: rotateY(180deg); }
  .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.hover.first_init .flipper .back, .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.success.first_init .flipper .back {
    -ms-transform: rotateY(0deg);
    /* IE 9 */
    -webkit-transform: rotateY(0deg);
    /* Safari */
    transform: rotateY(0deg); }
.iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.first_init .flipper {
  -ms-transform: rotateY(180deg);
  /* IE 9 */
  -webkit-transform: rotateY(180deg);
  /* Safari */
  transform: rotateY(180deg); }
  .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.first_init .flipper .front {
    -ms-transform: rotateY(0deg);
    /* IE 9 */
    -webkit-transform: rotateY(0deg);
    /* Safari */
    transform: rotateY(0deg); }
  .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover.first_init .flipper .back {
    z-index: 1;
    -ms-transform: rotateY(180deg);
    /* IE 9 */
    -webkit-transform: rotateY(180deg);
    /* Safari */
    transform: rotateY(180deg); }
.iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover .flipper {
  -ms-transform: rotateY(0deg);
  /* IE 9 */
  -webkit-transform: rotateY(0deg);
  /* Safari */
  transform: rotateY(0deg);
  transition: 0.4s; }
  .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover .flipper .front {
    -ms-transform: rotateY(180deg);
    /* IE 9 */
    -webkit-transform: rotateY(180deg);
    /* Safari */
    transform: rotateY(180deg);
    transition: 0.4s; }
  .iOS #our_work #memory_game_canvas ul li.flip-container .flipperHover .flipper .back {
    z-index: 1;
    -ms-transform: rotateY(0deg);
    /* IE 9 */
    -webkit-transform: rotateY(0deg);
    /* Safari */
    transform: rotateY(0deg);
    transition: 0.4s; }

@media (max-width: 768px) {
  #our_work {
    padding-top: 10%; }
    #our_work h3 {
      font-size: 9vw; }
    #our_work h2 {
      font-size: 22vw;
      padding-bottom: 5%; }
    #our_work p {
      width: 100%;
      margin-left: 2vw; }
    #our_work #memory_game_canvas ul li.flip-container {
      width: 50%;
      padding-bottom: 50%; }
      #our_work #memory_game_canvas ul li.flip-container .flipperHover.hover .flipper {
        -ms-transform: rotateY(0deg);
        /* IE 9 */
        -webkit-transform: rotateY(0deg);
        /* Safari */
        transform: rotateY(0deg); }
      #our_work #memory_game_canvas ul li.flip-container .flipperHover .flipper .front {
        display: none; }
      #our_work #memory_game_canvas ul li.flip-container .flipperHover .flipper .back {
        width: 95%;
        z-index: 1;
        -ms-transform: rotateY(0deg);
        /* IE 9 */
        -webkit-transform: rotateY(0deg);
        /* Safari */
        transform: rotateY(0deg); }
    #our_work small {
      display: none; } }
ul#hangman_game_letters {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }
  ul#hangman_game_letters.correct li input {
    transition: 0.5s;
    transition-delay: 1s;
    color: #f1c40f; }
  ul#hangman_game_letters li {
    position: relative;
    margin: 1%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -moz-box-flex: 0;
    -moz-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }
    ul#hangman_game_letters li::before {
      content: " ";
      position: absolute;
      background-color: black;
      -webkit-border-radius: 12.5%;
      -moz-border-radius: 12.5%;
      border-radius: 12.5%;
      height: 6%;
      width: 100%;
      bottom: -6%; }
    ul#hangman_game_letters li.correct {
      transition: 1s;
      pointer-events: none; }
    ul#hangman_game_letters li.spice {
      tab-index: 0; }
      ul#hangman_game_letters li.spice input {
        pointer-events: none; }
      ul#hangman_game_letters li.spice::before {
        position: absolute;
        content: "";
        background-color: transparent; }
    ul#hangman_game_letters li input {
      font-size: 5vw;
      width: 100%;
      text-align: center;
      padding-bottom: 3%;
      border: 0; }
  ul#hangman_game_letters img {
    width: 50%; }

#where_next h3 {
  padding-right: 70px; }
#where_next p {
  float: right;
  width: 35%;
  text-align: right;
  font-size: 82%;
  font-size: 1.4vw; }
#where_next #hangman_game_canvas {
  display: block;
  float: left;
  margin-top: 3%;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  text-align: center; }
#where_next .skip_game {
  float: right;
  clear: both;
  margin-top: 3%; }

@media (max-width: 768px) {
  #where_next {
    display: none; } }
#about_us #crossword {
  clear: both; }
  #about_us #crossword::after {
    content: "";
    clear: both;
    display: block; }
  #about_us #crossword .skip_game {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 400; }
  #about_us #crossword #crossword_canvas {
    margin-right: 5%;
    float: right; }
    #about_us #crossword #crossword_canvas ul {
      width: calc(100% + 11px); }
      #about_us #crossword #crossword_canvas ul::after {
        content: "";
        clear: both;
        display: block; }
      #about_us #crossword #crossword_canvas ul li {
        width: calc( 100%/11 );
        padding: 0;
        margin: 0;
        padding-bottom: calc( 100%/11);
        display: block;
        float: left;
        font-weight: 400;
        font-size: 1.8vw;
        overflow: hidden;
        position: relative; }
        #about_us #crossword #crossword_canvas ul li.hold {
          pointer-events: none; }
        #about_us #crossword #crossword_canvas ul li.correct {
          background-color: rgba(241, 196, 15, 0.5); }
        #about_us #crossword #crossword_canvas ul li.rb {
          border-right: 1px solid #000; }
        #about_us #crossword #crossword_canvas ul li.lb {
          border-left: 1px solid #000; }
        #about_us #crossword #crossword_canvas ul li.bb {
          border-bottom: 1px solid #000;
          padding-bottom: calc( 100%/11 - 1px); }
        #about_us #crossword #crossword_canvas ul li.tb {
          border-top: 1px solid #000;
          padding-bottom: calc( 100%/11 - 1px); }
        #about_us #crossword #crossword_canvas ul li.bt.bb {
          padding-bottom: calc( 100%/11 - 2px); }
        #about_us #crossword #crossword_canvas ul li::before {
          content: attr(data-num);
          position: absolute;
          z-index: 3;
          font-size: 0.7vw;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          padding-left: 0.3vw;
          padding-top: 0.1vw; }
        #about_us #crossword #crossword_canvas ul li.black {
          background-color: black; }
        #about_us #crossword #crossword_canvas ul li input {
          background-color: transparent;
          width: 100%;
          margin: 0;
          position: absolute;
          text-align: center;
          height: 100%;
          line-height: 100%;
          vertical-align: middle;
          display: table-cell;
          padding: 4% 0 0;
          text-transform: uppercase;
          border: 1px solid #000;
          z-index: 2;
          box-sizing: border-box; }
          #about_us #crossword #crossword_canvas ul li input:disabled {
            color: #000;
            opacity: 1; }
  #about_us #crossword .left {
    width: 45%;
    margin-top: 1vw;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 45%;
    -moz-box-flex: 1;
    -moz-flex: 1 1 45%;
    -ms-flex: 1 1 45%;
    flex: 1 1 45%; }
    #about_us #crossword .left img {
      width: 100%; }
    #about_us #crossword .left .skip_game {
      display: block;
      float: right;
      margin-top: -5%;
      position: relative;
      z-index: 20; }
  #about_us #crossword .right {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-box-flex: 1;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    float: right;
    padding-left: 0;
    width: calc( (100vw - 60px )* 0.47 );
    font-size: 82%;
    font-size: 1.4vw;
    font-weight: normal; }
  #about_us #crossword label[for="crossword_1h"] {
    width: 16%; }
  #about_us #crossword label[for="crossword_2v"] {
    width: 13%; }
  #about_us #crossword label[for="crossword_3h"] {
    width: 21%; }
  #about_us #crossword label[for="crossword_4v"] {
    width: 19%; }
  #about_us #crossword label[for="crossword_1v"] {
    width: 21%; }
  #about_us #crossword label[for="crossword_5v"] {
    width: 9%; }
  #about_us #crossword label[for="crossword_6h"] {
    width: 15%; }
  #about_us #crossword label[for="crossword_7v"] {
    width: 12%; }
  #about_us #crossword label[for="crossword_4v"] {
    width: 12%; }
  #about_us #crossword ol {
    list-style: decimal; }
    #about_us #crossword ol li {
      list-style: decimal;
      position: relative;
      margin: 10px; }
      #about_us #crossword ol li label {
        position: relative;
        pointer-events: none;
        display: inline-block;
        margin: 0; }
        #about_us #crossword ol li label span.hidden_word {
          display: none; }
        #about_us #crossword ol li label::after {
          content: "";
          border-bottom: 2px dotted #000;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 5px; }
        #about_us #crossword ol li label input {
          border: 0;
          background-color: transparent;
          margin: 0 0 5px;
          width: 100%;
          font-size: 100%;
          font-size: 1.4vw;
          font-weight: normal; }
        #about_us #crossword ol li label.correct input {
          text-align: center;
          color: #000;
          width: 100%; }
        #about_us #crossword ol li label.incorrect {
          width: 100%; }
          #about_us #crossword ol li label.incorrect::before {
            display: block;
            content: attr(data-answer);
            position: absolute;
            border-bottom: 1px dotted #f00;
            margin-top: -3px;
            color: transparent;
            width: 100%; }
          #about_us #crossword ol li label.incorrect input {
            text-align: center; }

@media (max-width: 768px) {
  #about_us {
    margin-bottom: 0;
    padding-top: 0; }
    #about_us h2 {
      padding-bottom: 8%;
      font-size: 25vw; }
    #about_us h3 {
      font-size: 10.5vw; }
    #about_us #crossword {
      padding-left: 3vw; }
      #about_us #crossword .left {
        display: none; }
      #about_us #crossword .right {
        width: calc( 100vw - 60px );
        padding-left: 10px;
        float: left;
        margin-left: 30px;
        padding-right: 0;
        padding-left: 0; }
        #about_us #crossword .right ol {
          list-style: none;
          padding: 0;
          margin: 0; }
          #about_us #crossword .right ol li {
            list-style: none;
            padding-bottom: 10px;
            font-size: 5vw;
            margin-right: 0; }
            #about_us #crossword .right ol li label {
              display: inline;
              cursor: text;
              font-size: 5vw; }
              #about_us #crossword .right ol li label::after {
                display: none; }
              #about_us #crossword .right ol li label span.hidden_word {
                display: inline;
                font-weight: normal;
                font-size: 5vw; }
              #about_us #crossword .right ol li label input {
                display: none; } }
canvas.hidden_canvas {
  opacity: 0;
  transition: .3s; }

#our_clients {
  z-index: 3000;
  position: relative; }
  #our_clients p {
    text-align: left; }
  #our_clients #find_word .left {
    width: 45%;
    font-size: 82%;
    font-size: 1.4vw;
    padding-top: 0.6%; }
    #our_clients #find_word .left ul#our_clients_logos {
      width: 100%;
      margin-top: 2.9%; }
      #our_clients #find_word .left ul#our_clients_logos li {
        padding: 1%;
        margin-bottom: 1.8%;
        width: 25%;
        display: block;
        float: left;
        opacity: 0;
        transition: 1.3s; }
        #our_clients #find_word .left ul#our_clients_logos li.correct {
          opacity: 1; }
        #our_clients #find_word .left ul#our_clients_logos li:nth-of-type(4n+1) {
          clear: both; }
        #our_clients #find_word .left ul#our_clients_logos li img {
          width: 100%; }
  #our_clients #find_word #our_clients_table {
    width: 55%;
    padding-left: 3%;
    text-align: left;
    position: relative; }
    #our_clients #find_word #our_clients_table ul {
      font-size: 1.2vw;
      cursor: url("../img/pencil.svg"), auto;
      position: relative;
      display: block; }
      #our_clients #find_word #our_clients_table ul::after {
        content: "1";
        font-size: 1px;
        margin-top: -10px;
        display: block;
        clear: both;
        color: transparent; }
      #our_clients #find_word #our_clients_table ul li {
        padding-bottom: calc( 100%/15 );
        width: calc( 100%/15 );
        display: block;
        float: left;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 100%;
        position: relative; }
        #our_clients #find_word #our_clients_table ul li::after {
          transition: .3s;
          content: "";
          border: 0 solid rgba(241, 196, 15, 0);
          position: absolute;
          width: 100%;
          height: 100%;
          pointer-events: none;
          margin: 0;
          z-index: -1; }
        #our_clients #find_word #our_clients_table ul li.correct::after {
          background-color: rgba(241, 196, 15, 0.5); }
        #our_clients #find_word #our_clients_table ul li.correct.border_top.border_left::after {
          -webkit-border-top-left-radius: 35%;
          -moz-border-top-left-radius: 35%;
          border-top-left-radius: 35%; }
        #our_clients #find_word #our_clients_table ul li.correct.border_top.border_right::after {
          -webkit-border-top-right-radius: 35%;
          -moz-border-top-right-radius: 35%;
          border-top-right-radius: 35%; }
        #our_clients #find_word #our_clients_table ul li.correct.border_bottom.border_left::after {
          -webkit-border-bottom-left-radius: 35%;
          -moz-border-bottom-left-radius: 35%;
          border-bottom-left-radius: 35%; }
        #our_clients #find_word #our_clients_table ul li.correct.border_bottom.border_right::after {
          -webkit-border-bottom-right-radius: 35%;
          -moz-border-bottom-right-radius: 35%;
          border-bottom-right-radius: 35%; }
        #our_clients #find_word #our_clients_table ul li.correct.border_top::after {
          margin-top: 5%;
          height: 95%;
          border-top: 0.2vw solid #f1c40f; }
        #our_clients #find_word #our_clients_table ul li.correct.border_bottom::after {
          margin-bottom: 5%;
          height: 95%;
          border-bottom: 0.2vw solid #f1c40f; }
        #our_clients #find_word #our_clients_table ul li.correct.border_left::after {
          margin-left: 5%;
          width: 95%;
          border-left: 0.2vw solid #f1c40f; }
        #our_clients #find_word #our_clients_table ul li.correct.border_right::after {
          margin-right: 5%;
          width: 95%;
          border-right: 0.2vw solid #f1c40f; }
        #our_clients #find_word #our_clients_table ul li.correct.border_left.border_right::after {
          width: 90%; }
        #our_clients #find_word #our_clients_table ul li.correct.border_top.border_bottom::after {
          height: 90%; }
        #our_clients #find_word #our_clients_table ul li > span {
          width: 100%;
          position: absolute;
          text-align: center;
          height: 100%;
          line-height: 100%;
          vertical-align: middle;
          display: table-cell;
          padding-top: 30%;
          border: 2px solid transparent; }
    #our_clients #find_word #our_clients_table #our_clients_score {
      display: block;
      clear: both;
      padding-top: 0;
      float: left;
      width: 100%;
      z-index: 10;
      line-height: 1;
      position: relative; }
      #our_clients #find_word #our_clients_table #our_clients_score b.skip_game {
        margin-right: calc( 100% / 45 );
        position: absolute;
        right: 0;
        top: 50%;
        -ms-transform: translate(0, -50%);
        /* IE 9 */
        -webkit-transform: translate(0, -50%);
        /* Safari */
        transform: translate(0, -50%); }
      #our_clients #find_word #our_clients_table #our_clients_score > span {
        pointer-events: none;
        margin-left: calc( 100% / 45 ); }
      #our_clients #find_word #our_clients_table #our_clients_score span {
        font-size: 6vw;
        padding-right: 15px; }
    #our_clients #find_word #our_clients_table img {
      width: 100%; }

@media (max-width: 768px) {
  #our_clients {
    font-size: 5vw;
    padding-top: 45px; }
    #our_clients #find_word .left {
      font-size: 5vw; }
    #our_clients h2 {
      font-size: 18vw;
      padding-bottom: 2%; }
    #our_clients h3 {
      font-size: 8.5vw; }
    #our_clients h2, #our_clients h3 {
      padding-left: 3vw; }
    #our_clients div#FindWordGame {
      padding-left: 3vw; }
      #our_clients div#FindWordGame .right {
        display: none; }
      #our_clients div#FindWordGame .left {
        width: 100%;
        font-size: 5vw; } }
#experience h2 {
  line-height: 67%; }
#experience p {
  text-align: right;
  float: right;
  font-size: 1.4vw;
  width: 50%;
  padding-left: 15%; }
#experience .skip_game {
  float: right;
  position: absolute;
  right: -89%; }

#years25 {
  display: none; }

#DotsGame {
  position: relative; }
  #DotsGame > canvas {
    width: 115%;
    height: 115%;
    margin-left: -7.5%;
    margin-top: -7.5%; }

#connect_the_dots {
  display: block;
  float: left;
  clear: none;
  width: 53%;
  position: initial; }
  #connect_the_dots small {
    margin-bottom: 0;
    margin-top: 1vw; }
  #connect_the_dots #connect_the_dots_canvas {
    clear: both;
    width: 100%;
    text-align: center;
    padding: 0; }
    #connect_the_dots #connect_the_dots_canvas .dots_text {
      fill: #aaa;
      pointer-events: none;
      cursor: pointer; }
    #connect_the_dots #connect_the_dots_canvas svg {
      width: 100%;
      margin-left: auto;
      margin-right: auto; }
  #connect_the_dots #connect_the_dots_clients {
    margin-top: -34%;
    position: absolute;
    width: 36%;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
    #connect_the_dots #connect_the_dots_clients li {
      padding-bottom: 12%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row; }
      #connect_the_dots #connect_the_dots_clients li:nth-of-type(odd) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 36%;
        -moz-box-flex: 0;
        -moz-flex: 0 0 36%;
        -ms-flex: 0 0 36%;
        flex: 0 0 36%; }
      #connect_the_dots #connect_the_dots_clients li:nth-of-type(even) {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -moz-box-flex: 0;
        -moz-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        text-align: right; }
        #connect_the_dots #connect_the_dots_clients li:nth-of-type(even) img {
          float: right; }
      #connect_the_dots #connect_the_dots_clients li a {
        display: block;
        float: left;
        -webkit-align-self: center;
        -moz-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        width: 100%; }
        #connect_the_dots #connect_the_dots_clients li a img {
          width: 100%;
          display: block;
          float: left; }

@media (max-width: 768px) {
  #experience {
    padding-top: 0; }
    #experience h3 {
      font-size: 8vw; }
    #experience h2 {
      font-size: 20vw;
      padding-bottom: 2%; }
    #experience p {
      font-size: 4.5vw;
      width: 97%;
      text-align: right; }
    #experience #years25 {
      display: block;
      text-align: center;
      color: #f1c40f;
      font-size: 23vw;
      margin-bottom: 4vw; }
    #experience #connect_the_dots #connect_the_dots_canvas {
      display: none; } }
.fireman {
  width: 100%;
  position: relative;
  clear: both;
  z-index: 10000;
  pointer-events: none;
  margin-bottom: 46%; }
  .fireman li {
    width: 100%;
    position: relative;
    padding-bottom: 70%; }
    .fireman li div {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      background: no-repeat 50% 50%;
      background-size: auto 100%; }
    .fireman li:last-of-type {
      width: 400%;
      background-color: #f1c40f;
      margin-left: -150%;
      z-index: 200;
      padding-bottom: 30%;
      position: absolute;
      overflow: hidden; }
      .fireman li:last-of-type div {
        height: 200%;
        margin-top: -3%; }

  .fireman.jorge.first {
    margin-top: 5vw;
    margin-bottom: 35%; }
    .fireman.jorge.first li:first-of-type div {
        background-position-x: 50%; }
    .fireman.jorge.first li:last-of-type {
      margin-top: -10%;
      -ms-transform: rotate(19deg);
      /* IE 9 */
      -webkit-transform: rotate(19deg);
      /* Safari */
      transform: rotate(19deg);
      padding-bottom: 40%; }

  .fireman.second {
    margin-top: 7%; }
    .fireman.second li {
      padding-bottom: 35%; }
      .fireman.second li div {
        background-size: auto 200%;
        background-position-y: 45%; }
    .fireman.second.elena {
      padding-top: 7.5%;
      margin-bottom: 40%; }
      .fireman.second.elena li {
        -ms-transform: rotate(-14deg);
        /* IE 9 */
        -webkit-transform: rotate(-14deg);
        /* Safari */
        transform: rotate(-14deg); }
    .fireman.second.jorge {
      margin-top: 15%; }
      .fireman.second.jorge li {
        -ms-transform: rotate(14deg);
        /* IE 9 */
        -webkit-transform: rotate(14deg);
        /* Safari */
        transform: rotate(14deg); }
        .fireman.second.jorge li div {
          -ms-transform: rotate(-12deg);
          /* IE 9 */
          -webkit-transform: rotate(-12deg);
          /* Safari */
          transform: rotate(-12deg);
          background-size: auto 175%;
          background-position: 50% 70%; }
  .fireman.treed {
    margin-top: 10%; }
    .fireman.treed li {
      padding-bottom: 35%; }
      .fireman.treed li div {
        background-size: auto 200%;
        background-position-y: 45%; }
    .fireman.treed.elena {
      margin-bottom: 54%; }
      .fireman.treed.elena li {
        -ms-transform: rotate(-14deg);
        /* IE 9 */
        -webkit-transform: rotate(-14deg);
        /* Safari */
        transform: rotate(-14deg); }
        .fireman.treed.elena li div {
          background-size: auto 215%;
          background-position: 53% 80%; }
    .fireman.treed.jorge {
      margin-top: 10%;
      margin-bottom: 48%; }
      .fireman.treed.jorge li {
        -ms-transform: rotate(14deg);
        /* IE 9 */
        -webkit-transform: rotate(14deg);
        /* Safari */
        transform: rotate(14deg); }
        .fireman.treed.jorge li div {
          -ms-transform: rotate(-12deg);
          /* IE 9 */
          -webkit-transform: rotate(-12deg);
          /* Safari */
          transform: rotate(-12deg);
          background-size: auto 165%;
          background-position: 50% 110%; }

@media (max-width: 768px) {
  .fireman.first {
    margin-left: 0; }
    .fireman.first.elena {
      margin-top: 0;
      height: 195vw; }
      .fireman.first.elena li:first-of-type {
        -ms-transform: rotate(0);
        /* IE 9 */
        -webkit-transform: rotate(0);
        /* Safari */
        transform: rotate(0);
        margin-left: 0; }
        .fireman.first.elena li:first-of-type div {
          background-size: auto 110%;
          padding-bottom: 170%; }
      .fireman.first.elena li:last-of-type {
        padding-bottom: 60%;
        margin-top: 80%; }
        .fireman.first.elena li:last-of-type div {
          background-size: auto 120%;
          margin-top: -6%; }
    .fireman.first.jorge {
      margin-top: 30vw;
      margin-bottom: 80vw; }
      .fireman.first.jorge li:first-of-type {
        display: none; }
      .fireman.first.jorge li:last-of-type {
        padding-bottom: 60%; }
        .fireman.first.jorge li:last-of-type div {
          background-position-y: 194%;
          background-size: auto 120%; }
  .fireman.second {
    margin-top: 15%;
    margin-bottom: 75%; }
    .fireman.second.elena li, .fireman.second.jorge li {
      padding-bottom: 55%; }
      .fireman.second.elena li div, .fireman.second.jorge li div {
        background-position-y: 100%;
        background-position-x: 53%;
        background-size: auto 135%; }
    .fireman.second.jorge {
      margin-bottom: 65%; }
      .fireman.second.jorge li div {
        background-position-y: 230%;
        background-position-x: 50%;
        background-size: auto 115%; }
  .fireman.treed {
    margin-bottom: 65%; }
    .fireman.treed.elena li {
      padding-bottom: 60%; }
      .fireman.treed.elena li div {
        background-position-y: 100%;
        background-position-x: 55%;
        background-size: auto 140%; }
    .fireman.treed.jorge {
      display: none; } }
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

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

#awwwards {
  margin-top: 70px; }

small {
  clear: both;
  font-size: 1.2vw;
  font-style: italic;
  display: block;
  margin-bottom: 50px;
  padding-top: 3%; }

body, h1, h2, h3 {
  font-family: 'Apple Garamond', 'Georgia', serif;
  margin: 0;
  padding: 0; }

html {
  overflow: hidden;
  overflow-y: scroll; }

body {
  width: 100%;
  position: relative;
  overflow-x: hidden; }
  body #container {
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    position: relative; }

.canvasInAPerfectWorld {
  width: 110%;
  height: 110%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 2;
  margin-left: -5%;
  margin-top: -5%;
  cursor: url("../img/pencil.svg"), auto; }

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

a {
  color: #f1c40f;
  text-decoration: underline; }
  a:hover {
    color: #b8960b;
    transition: 0.2s; }

.skip_game {
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #000;
  color: black;
  padding: 0.4vw 0.8vw;
  font-size: 1.3vw;
  -webkit-border-radius: 0.6vw;
  -moz-border-radius: 0.6vw;
  border-radius: 0.6vw;
  transition: 0.1s;
  background-color: white;
  line-height: 1.5; }
  .skip_game:hover {
    text-decoration: none;
    color: #000;
    background-color: #f1c40f; }
  .skip_game[disabled] {
    pointer-events: none;
    opacity: 0;
    translate: 0.3s; }

ul.social_icons {
  display: block;
  float: left;
  overflow: hidden; }
  ul.social_icons.twice {
    width: 13%; }
    ul.social_icons.twice li {
      width: 50%; }
  ul.social_icons li {
    float: left;
    overflow: hidden;
    display: block; }
    ul.social_icons li a {
      display: block;
      float: left;
      width: 100%; }
      ul.social_icons li a span {
        float: left;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #000;
        margin: 8%;
        display: inline-block; }
        ul.social_icons li a span img {
          width: 100%;
          display: inline-block;
          float: left; }
      ul.social_icons li a:hover span {
        background-color: #f1c40f;
        transition: 0.2s; }

.game.right ul.social_icons {
  float: right;
  margin-right: -1%; }

.game {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  font-size: 1.7vw;
  z-index: 400; }
  .game::after {
    content: "";
    clear: both;
    display: block; }
  .game h3 {
    font-size: 5.5vw;
    color: #f1c40f;
    clear: both; }
  .game h2 {
    font-size: 14.3vw;
    color: #000;
    clear: both;
    line-height: 64%;
    margin-bottom: 8vw; }
  .game p {
    clear: both; }
  .game > div {
    width: 100%;
    position: relative;
    display: block;
    clear: both; }
    .game > div .left {
      display: block;
      float: left;
      text-align: left; }
    .game > div .right {
      display: block;
      float: left;
      padding-left: 30px; }
  .game.right h3 {
    float: right; }
  .game.right h2 {
    float: right;
    line-height: 44%; }

@media (min-width: 1366px) {
  header #slogan {
    top: 221px; }

  .game {
    font-size: 23px; }
    .game h3 {
      font-size: 6vw; }
    .game h2 {
      font-size: 14vw; } }
/*-----------------------------------------------------------------------------------*/
/*	MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/
@media (min-width: 1366px) {
  header .navbar .navbar-brand img {
    width: 226px; }
  header .navbar ul#language_menu li a {
    font-size: 16px; }

  .game h2 {
    font-size: 192px;
    margin-bottom: 110px; }

  .game h3 {
    font-size: 75px; }

  #about_us #crossword .right {
    font-size: 19px;
    width: 617px; }
  #about_us #crossword ol li label input {
    font-size: 19px; }
  #about_us #crossword #crossword_canvas ul li {
    font-size: 25px; }
    #about_us #crossword #crossword_canvas ul li::before {
      font-size: 12px;
      padding-left: 6px;
      padding-top: 3px; }
    #about_us #crossword #crossword_canvas ul li.incorrect::before {
      margin-top: -3px; }

  .skip_game {
    font-size: 18px; }

  #our_clients #find_word #our_clients_table ul li {
    font-size: 17px; }
  #our_clients #find_word #our_clients_table #our_clients_score span {
    font-size: 82px; }
  #our_clients #find_word .left {
    font-size: 19px; }

  #experience p {
    font-size: 19px; }

  small {
    font-size: 17px; }

  #our_work p {
    font-size: 19px; }

  #where_next p {
    font-size: 19px; }

  #contacts > div > div h3 {
    font-size: 21px; }
    #contacts > div > div h3 b {
      font-size: 19px; }
  #contacts p {
    font-size: 19px; } }
@media (max-width: 768px) {
  body small {
    font-size: 60%; }
  body header {
    height: 100px; }
    body header .navbar ul#language_menu {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 38%;
      -moz-box-flex: 0;
      -moz-flex: 0 0 38%;
      -ms-flex: 0 0 38%;
      flex: 0 0 38%; }
      body header .navbar ul#language_menu li a {
        font-size: 3vw;
        font-size: 130%; }
    body header .navbar .navbar-brand {
      width: 50vw;
      height: 5.5vw;
      margin-top: 20px; }
  body #container {
    padding-left: 0;
    padding-right: 0; }
    body #container .skip_game {
      display: none !important; }
  body #about_us #elena_first {
    height: 165vw; }
    body #about_us #elena_first li:first-of-type {
      padding-bottom: 50%; }
      body #about_us #elena_first li:first-of-type div {
        background-size: auto 100%;
        padding-bottom: 110%;
        background-position-y: 0%; }
    body #about_us #elena_first li:last-of-type {
      margin-top: 55%;
      padding-bottom: 70%; }
      body #about_us #elena_first li:last-of-type div {
        background-size: auto 140%;
        background-position: 58% 90%;
        margin-top: -5%; }
  body #our_clients #jorge_first {
    margin-bottom: 93vw; }
  body #our_clients h2, body #our_clients h3 {
    padding-left: calc( 3vw + 5px); }
  body #our_clients #find_word #FindWordGame {
    padding-left: 0;
    margin-left: 0; }
    body #our_clients #find_word #FindWordGame #FindWord_description {
      padding-left: calc( 6vw + 5px);
      margin-left: 0;
      padding-right: 3vw;
      font-size: 5vw; }
    body #our_clients #find_word #FindWordGame ul#our_clients_logos {
      margin-top: 10%;
      padding-left: 6vw;
      padding-right: 3vw; }
      body #our_clients #find_word #FindWordGame ul#our_clients_logos li {
        opacity: 1; }
  body .game {
    font-size: 5vw;
    position: relative;
    padding: 0; }
    body .game h3 {
      font-size: 11vw; }
    body .game h2 {
      font-size: 27vw;
      padding-bottom: 38%;
      line-height: 70%; }
    body .game h3, body .game h2 {
      margin-right: 6vw;
      margin-left: 3vw; }
    body .game ul.social_icons {
      position: absolute; }
      body .game ul.social_icons li a span {
        border: 2px solid #000; }
      body .game ul.social_icons.twice {
        width: 40%;
        position: relative; }
  body #experience {
    padding-bottom: 50%; }
    body #experience .fireman.second.elena {
      margin-bottom: 65%;
      padding-top: 1px; }
    body #experience #connect_the_dots {
      width: calc( 100% - 12vw );
      left: 6vw;
      position: absolute;
      bottom: 0; }
      body #experience #connect_the_dots small {
        clear: both;
        font-size: 3.2vw; }
      body #experience #connect_the_dots #connect_the_dots_clients {
        width: 100%;
        margin-top: -60%; }
        body #experience #connect_the_dots #connect_the_dots_clients li {
          padding-bottom: 7%; }
          body #experience #connect_the_dots #connect_the_dots_clients li a img {
            width: 85%;
            float: right; }
        body #experience #connect_the_dots #connect_the_dots_clients li:nth-of-type(odd) {
          flex: 0 0 25%; }
        body #experience #connect_the_dots #connect_the_dots_clients li:nth-of-type(even) {
          flex: 0 0 27%; }
    body #experience p {
      font-size: 5vw;
      width: calc( 100% - 12vw );
      padding: 0;
      margin: 0;
      margin-right: 6vw;
      margin-left: 6vw;
      text-align: right; }
  body #jorge_second {
    margin-bottom: 70%; }
  body #our_work {
    padding-top: 1px; }
    body #our_work .social_icons {
      margin-left: 6vw;
      width: 30%; }
    body #our_work h3 {
      margin-bottom: 2vw; }
    body #our_work h2, body #our_work h3 {
      padding-left: calc( 3vw + 5px); }
    body #our_work h2 {
      padding-bottom: 0%; }
    body #our_work p {
      display: none; }
    body #our_work div#memory_game_canvas {
      margin-top: 0;
      padding-left: 3vw;
      padding-right: 4vw; }
      body #our_work div#memory_game_canvas li.flip-container {
        opacity: 1;
        width: calc( 100%/3 );
        padding-bottom: calc( 100%/3 ); }
        body #our_work div#memory_game_canvas li.flip-container:nth-child(n+13) {
          display: none; }
      body #our_work div#memory_game_canvas ul li.flip-container .flipperHover .flipper {
        -ms-transform: rotateY(0deg);
        /* IE 9 */
        -webkit-transform: rotateY(0deg);
        /* Safari */
        transform: rotateY(0deg); }
  body #elena_treed {
    margin-top: 20%;
    margin-bottom: 95%; }
  body #contacts p {
    margin-left: 8vw; }
  body #contacts > div > div:first-of-type > h3 {
    width: calc(100% - 12vw);
    left: 6vw; }
  body #contacts > div > div:last-of-type > h3 {
    width: calc(100% - 12vw);
    right: 3vw; }
  body #contacts > div > div:last-of-type .social_icons {
    right: 9vw; }
  body #contacts #contact_form {
    margin-left: 3vw;
    margin-right: 3vw;
    width: calc( 100% - 6vw ); } }
@media (max-height: 768px) {
  header #slogan {
    top: calc( 100vh - 190px ); } }
@media (max-height: 1200px) {
  header #slogan {
    top: 50vh; } }
@media (max-width: 992px) {
  #slogan {
    top: 50vh; } }
@media (max-width: 568px) {
  body header .navbar .navbar-brand {
    width: 50vw;
    height: 7.5vw;
    margin-top: 0; }
  body header .navbar ul#language_menu li {
    margin: 0; }
  body header .navbar ul#language_menu li a {
    padding: 2vw;
    padding-top: 3vw;
    font-size: 130%; }
  body header {
    height: 80px; }
  body .game h3, body .game h2 {
    margin-right: 6vw;
    margin-left: 3vw; }
  body #about_us {
    margin-top: 0; }
    body #about_us h2 {
      padding-bottom: 0; }
    body #about_us #crossword {
      margin-top: -50px; } }
@media (max-height: 420px) {
  body #about_us #elena_first {
    height: 90vw; }
    body #about_us #elena_first li:first-of-type {
      padding-bottom: 70%; }
      body #about_us #elena_first li:first-of-type div {
        padding-bottom: 80%; }
    body #about_us #elena_first li:last-of-type {
      margin-top: 0;
      padding-bottom: 35%; }
      body #about_us #elena_first li:last-of-type div {
        background-size: auto 140%;
        background-position: 50% 130%;
        margin-top: 0; } }
@media (max-width: 375px) {
  body header #slogan {
    dispaly: none; }
  body header .navbar .navbar-brand {
    margin-left: -15px; }
  body header .navbar ul#language_menu li a {
    font-size: 5vw; }
  body .game {
    font-size: 7vw; }
  body #about_us h2 {
    padding-bottom: 2%;
    font-size: 24vw; }
  body #about_us h3 {
    font-size: 10.5vw; }
  body #about_us .right {
    padding-left: 0; }
  body #our_work #memory_game_canvas ul li.flip-container {
    width: 50%;
    padding-bottom: 50%; } }