@font-face {
  font-family: 'Gotham';
  src: url("../../fonts/fontface-g/gothambold.eot");
  src: url("../../fonts/fontface-g/gothambold.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontface-g/gothambold.woff") format("woff"), url("../../fonts/fontface-g/gothambold.ttf") format("truetype"), url("../../fonts/fontface-g/gothambold.svg#gothambold") format("svg");
  font-weight: 600;
  font-style: bold; }
@font-face {
  font-family: 'Gotham';
  src: url("../../fonts/fontface-g/gothammedium.eot");
  src: url("../../fonts/fontface-g/gothammedium.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontface-g/gothammedium.woff") format("woff"), url("../../fonts/fontface-g/gothammedium.ttf") format("truetype"), url("../../fonts/fontface-g/gothammedium.svg#gothammedium") format("svg");
  font-weight: 500;
  font-style: medium; }
@font-face {
  font-family: 'Gotham';
  src: url("../../fonts/fontface-g/gothambook.eot");
  src: url("../../fonts/fontface-g/gothambook.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontface-g/gothambook.woff") format("woff"), url("../../fonts/fontface-g/gothambook.ttf") format("truetype"), url("../../fonts/fontface-g/gothambook.svg#gothambook") format("svg");
  font-weight: 400; }
@font-face {
  font-family: 'Gill Sans';
  src: url("../../fonts/fontface-gs/gil.eot");
  src: url("../../fonts/fontface-gs/gil.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontface-gs/gil.woff") format("woff"), url("../../fonts/fontface-gs/gil.ttf") format("truetype"), url("../../fonts/fontface-gs/gil.svg#gil") format("svg");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'Gill Sans';
  src: url("../../fonts/fontface-gs/gillsansmtbold.eot");
  src: url("../../fonts/fontface-gs/gillsansmtbold.eot?#iefix") format("embedded-opentype"), url("../../fonts/fontface-gs/gillsansmtbold.woff") format("woff"), url("../../fonts/fontface-gs/gillsansmtbold.ttf") format("truetype"), url("../../fonts/fontface-gs/gillsansmtbold.svg#gillsansmtbold") format("svg");
  font-weight: 600;
  font-style: bold; }
.f-serif {
  font-family: serif;
  font-style: italic; }

body {
  -webkit-font-smoothing: antialiased; }
  body ::selection {
    background: #333;
    color: white; }
  body ::-moz-selection {
    background: #333;
    color: white; }

#topBar {
  transition: top 0.2s ease-in-out; }

.topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  height: 100px; }
  .topBar .topBar-up {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 10000; }
  .topBar .barInner {
    position: relative;
    margin: 0 auto;
    padding: 0 1.875em;
    display: block;
    height: inherit; }
    .topBar .barInner h1 {
      position: absolute;
      display: inline-block;
      text-indent: -9999px;
      width: 55px;
      height: 96px;
      margin: 30px 0 0 0;
      background: url(../img/logo-fokus_full.svg) no-repeat top left;
      background-size: 55px 96px !important; }
    .topBar .barInner h1:active {
      top: 2px;
      opacity: 0.9; }
    .topBar .barInner nav {
      position: relative;
      float: right;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
      .topBar .barInner nav a {
        opacity: 0.55;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        margin: 0;
        font-family: Gotham;
        font-weight: 500;
        letter-spacing: 2px;
        padding: 15px 15px;
        transition: 0.2s ease-in-out; }
        .topBar .barInner nav a:hover {
          opacity: 1; }
      .topBar .barInner nav a.joinUs {
        opacity: 1;
        transition: 0.2s ease-in-out;
        border: 1px solid rgba(255, 255, 255, 0.2); }
        .topBar .barInner nav a.joinUs:hover {
          border: 1px solid white; }

.redButtonLanding {
  background: #f12f38;
  border-radius: 40px;
  padding: 16px 18px;
  color: #fff;
  text-decoration: none;
  font-family: Gotham;
  font-weight: 600;
  font-size: 11px;
  line-height: 0.9;
  margin: 30px 0 0 0; }
  .redButtonLanding:hover {
    background: #ee1e28; }

header .foreground {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: url(../img/foreground1.png) no-repeat center center fixed;
  background-size: cover;
  pointer-events: none; }
header h2 {
  position: absolute;
  text-indent: -9999px;
  text-align: center;
  font-family: Gotham;
  font-size: 27px;
  width: 662px;
  height: 20px;
  z-index: 10000;
  background: url(../img/photandstory.png) no-repeat top left;
  top: 80%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-80%);
  -moz-transform: translateX(-50%) translateY(-80%);
  -ms-transform: translateX(-50%) translateY(-80%);
  -o-transform: translateX(-50%) translateY(-80%);
  transform: translateX(-50%) translateY(-80%); }
header .contenu {
  position: absolute;
  /*background-color: red;*/
  width: 190px;
  height: 332px;
  top: 25%;
  -webkit-transform: translateY(-25%);
  -moz-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  -o-transform: translateY(-25%);
  transform: translateY(-25%);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }
  header .contenu h1 {
    position: relative;
    width: 190px;
    height: 332px;
    font-size: 20px;
    margin: 0;
    letter-spacing: 20px;
    text-indent: -9999px;
    background: url(../img/logo.svg) no-repeat top left; }
header a.ok {
  text-indent: -9999px;
  position: absolute;
  background: url(../img/arrowBottom.svg) no-repeat center center;
  background-size: 62px 48px;
  bottom: 2.5%;
  z-index: 10000;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 80px;
  transition: 0.2s ease-in-out;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }
  header a.ok:hover {
    border: 2px solid white; }
header #show-keynav {
  display: inline-block;
  width: 50px;
  height: 40px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10000;
  background: url(../img/keyboardNav.svg) no-repeat top left;
  background-size: 50px; }

.t-indent {
  text-indent: -9999px; }

#deux {
  position: relative;
  background: url(../img/tumblr_mwbmz6AZVB1qbowpxo1_1280.jpg) no-repeat center center;
  background-size: cover; }
  #deux h2 {
    position: absolute;
    text-align: center;
    font-size: 27px;
    width: 770px;
    height: 49px;
    z-index: 10000;
    background: url(../img/craftyourstory.png) no-repeat top left;
    top: 40%;
    -webkit-transform: translateY(-40%);
    -moz-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    -o-transform: translateY(-40%);
    transform: translateY(-40%);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
  #deux h2.f-serif {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 200;
    color: #fff;
    margin: 80px 0 0 0;
    background: none; }
  #deux h3 {
    text-align: center;
    width: 100%; }
  #deux ul {
    position: absolute;
    display: inline-block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
    #deux ul li {
      list-style: none;
      font-size: 22px;
      float: left;
      border: 1px solid #fff;
      font-style: italic;
      margin: 0px 20px;
      transition: 0.2s ease-in-out; }
      #deux ul li:hover {
        background: #f12f38;
        border: 1px solid #f12f38; }
      #deux ul li a {
        text-align: center;
        width: 180px;
        padding: 18px 0px;
        color: #fff;
        text-decoration: none;
        display: inline-block; }

.baseline-bottom {
  position: absolute;
  text-transform: uppercase;
  font-family: Gill Sans;
  letter-spacing: 5px;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }

#trois {
  position: relative;
  background: url(../img/15.jpg) no-repeat center center;
  background-size: cover; }
  #trois h2 {
    position: absolute;
    text-indent: -9999px;
    text-align: center;
    font-size: 27px;
    width: 500px;
    z-index: 10000;
    background: url(../img/focusedoncontent.png) no-repeat top left;
    background-size: 500px auto;
    bottom: 9%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
  #trois .video-container {
    position: relative;
    padding-bottom: 37%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    width: 66% !important;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%); }
  #trois iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  #trois a.test {
    position: absolute;
    z-index: 10000;
    bottom: 3%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    text-decoration: none;
    color: #fff;
    width: 640px;
    height: 24px;
    padding: 10px; }
    #trois a.test hr {
      bottom: 0;
      margin: 0px auto;
      width: 90%;
      border-top: 1px solid rgba(255, 255, 255, 0.7) !important; }
    #trois a.test span {
      position: absolute;
      text-indent: -9999px;
      left: 53.5%;
      -webkit-transform: translateX(-53.5%);
      -moz-transform: translateX(-53.5%);
      -ms-transform: translateX(-53.5%);
      -o-transform: translateX(-53.5%);
      transform: translateX(-53.5%);
      display: inline-block;
      margin-top: 0px;
      height: 24px;
      width: 31px;
      background: url(../img/playIcon.svg) no-repeat top left;
      background-size: 31px 24px; }
    #trois a.test h3 {
      position: relative;
      display: inline-block;
      line-height: 2;
      text-transform: uppercase;
      font-family: Gill Sans;
      letter-spacing: 5px;
      font-size: 13px;
      font-weight: 600;
      margin-top: 15px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%); }

#troisBis {
  text-align: center;
  padding: 120px 0px; }
  #troisBis h2 {
    font-family: Gotham;
    font-size: 35px;
    font-weight: 200;
    letter-spacing: 2px;
    color: #b4b4b4; }
  #troisBis h3 {
    width: 75%;
    font-family: serif;
    font-style: italic;
    line-height: 1.3;
    font-weight: 200;
    padding: 10px 0 0 0;
    font-size: 36px;
    opacity: 0.7;
    margin: 0 auto; }

#four {
  height: 100%;
  overflow: hidden; }
  #four ul#ulFour {
    position: relative;
    display: inline; }
    #four ul#ulFour li {
      height: 100%;
      list-style: none;
      float: left; }
    #four ul#ulFour li.f-left {
      width: 48%;
      position: relative;
      display: inline-block; }
      #four ul#ulFour li.f-left div.leftText {
        position: absolute;
        display: inline-block;
        width: 70%;
        top: 50%;
        left: 56%;
        -webkit-transform: translateX(-56%) translateY(-50%);
        -moz-transform: translateX(-56%) translateY(-50%);
        -ms-transform: translateX(-56%) translateY(-50%);
        -o-transform: translateX(-56%) translateY(-50%);
        transform: translateX(-56%) translateY(-50%); }
        #four ul#ulFour li.f-left div.leftText h3 {
          color: rgba(0, 0, 0, 0.65);
          font-size: 26px;
          font-family: Gotham;
          font-weight: 400;
          line-height: 1.5;
          margin-bottom: 20px;
          text-transform: uppercase; }
        #four ul#ulFour li.f-left div.leftText p {
          color: #666;
          font-size: 19px;
          line-height: 1.5;
          font-family: serif;
          margin: 0 0 65px 0; }
    #four ul#ulFour li.liFourRight {
      position: relative;
      width: 52%; }
      #four ul#ulFour li.liFourRight div.containeripad {
        position: absolute;
        top: 65%;
        -webkit-transform: translateY(-65%);
        -moz-transform: translateY(-65%);
        -ms-transform: translateY(-65%);
        -o-transform: translateY(-65%);
        transform: translateY(-65%); }
        #four ul#ulFour li.liFourRight div.containeripad img.mockup {
          opacity: 1;
          position: relative;
          width: 90%;
          z-index: 500;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%); }
        #four ul#ulFour li.liFourRight div.containeripad div.centerSquare {
          overflow: hidden;
          position: absolute;
          background: #f12f38;
          z-index: 100;
          top: 50%;
          left: 50%;
          -webkit-transform: translateX(-50%) translateY(-50%);
          -moz-transform: translateX(-50%) translateY(-50%);
          -ms-transform: translateX(-50%) translateY(-50%);
          -o-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          width: 60.5%;
          height: 67%; }
          #four ul#ulFour li.liFourRight div.containeripad div.centerSquare video {
            top: 0%;
            width: 100%; }

#fourBis {
  height: 100%;
  overflow: hidden; }
  #fourBis ul#ulFour2 {
    position: relative;
    display: inline; }
    #fourBis ul#ulFour2 li {
      height: 100%;
      list-style: none;
      float: left; }
    #fourBis ul#ulFour2 li.f-left {
      width: 40%;
      position: relative;
      display: inline-block; }
      #fourBis ul#ulFour2 li.f-left div.leftText {
        position: absolute;
        display: inline-block;
        width: 70%;
        top: 50%;
        left: 70%;
        -webkit-transform: translateX(-70%) translateY(-50%);
        -moz-transform: translateX(-70%) translateY(-50%);
        -ms-transform: translateX(-70%) translateY(-50%);
        -o-transform: translateX(-70%) translateY(-50%);
        transform: translateX(-70%) translateY(-50%); }
        #fourBis ul#ulFour2 li.f-left div.leftText h3 {
          color: rgba(0, 0, 0, 0.65);
          font-size: 26px;
          font-family: Gotham;
          font-weight: 400;
          line-height: 1.5;
          margin-bottom: 20px;
          text-transform: uppercase; }
        #fourBis ul#ulFour2 li.f-left div.leftText p {
          color: #666;
          font-size: 19px;
          line-height: 1.5;
          font-family: serif;
          margin: 0 0 65px 0; }
        #fourBis ul#ulFour2 li.f-left div.leftText ul.squareTools li {
          width: 35px;
          height: 35px;
          margin-right: 2px; }
        #fourBis ul#ulFour2 li.f-left div.leftText ul.squareTools .st1 {
          background: #f12f38 url(../img/tool1.svg) center center no-repeat;
          background-size: 18px; }
        #fourBis ul#ulFour2 li.f-left div.leftText ul.squareTools .st2 {
          background: #f12f38 url(../img/tool2.svg) center center no-repeat;
          background-size: 18px; }
        #fourBis ul#ulFour2 li.f-left div.leftText ul.squareTools .st3 {
          background: #f12f38 url(../img/tool3.svg) center center no-repeat;
          background-size: 18px; }
        #fourBis ul#ulFour2 li.f-left div.leftText ul.squareTools .st4 {
          background: #f12f38 url(../img/tool4.svg) center center no-repeat;
          background-size: 18px; }
    #fourBis ul#ulFour2 li.liFourRight {
      position: relative;
      width: 60%; }
      #fourBis ul#ulFour2 li.liFourRight div.containeripad {
        position: absolute;
        top: 35%;
        -webkit-transform: translateY(-35%);
        -moz-transform: translateY(-35%);
        -ms-transform: translateY(-35%);
        -o-transform: translateY(-35%);
        transform: translateY(-35%);
        z-index: 8000; }
        #fourBis ul#ulFour2 li.liFourRight div.containeripad img.mockup {
          position: relative;
          width: 90%;
          z-index: 500;
          cursor: pointer;
          left: 50%;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%); }
        #fourBis ul#ulFour2 li.liFourRight div.containeripad div.centerSquare {
          overflow: hidden;
          position: absolute;
          z-index: 100;
          top: 50%;
          left: 50%;
          -webkit-transform: translateX(-50%) translateY(-50%);
          -moz-transform: translateX(-50%) translateY(-50%);
          -ms-transform: translateX(-50%) translateY(-50%);
          -o-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          width: 56%;
          height: auto; }
          #fourBis ul#ulFour2 li.liFourRight div.containeripad div.centerSquare img {
            width: 100%; }
          #fourBis ul#ulFour2 li.liFourRight div.containeripad div.centerSquare video {
            top: 0%;
            width: 100%; }

#five {
  height: 100%; }
  #five ul#ulFive {
    width: 100%;
    position: relative;
    display: inline; }
    #five ul#ulFive li.f-left {
      position: relative;
      display: inline-block;
      width: 33.33%;
      height: 100%; }
      #five ul#ulFive li.f-left div {
        position: absolute;
        width: 70%;
        text-align: center;
        color: #fff;
        top: 35%;
        -webkit-transform: translateY(-35%);
        -moz-transform: translateY(-35%);
        -ms-transform: translateY(-35%);
        -o-transform: translateY(-35%);
        transform: translateY(-35%);
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); }
        #five ul#ulFive li.f-left div span {
          margin: 0 auto;
          display: inline-block;
          width: 58px;
          height: 80px; }
        #five ul#ulFive li.f-left div .sp1 {
          background: url(../img/01.png) no-repeat center center; }
        #five ul#ulFive li.f-left div .sp2 {
          background: url(../img/02.png) no-repeat center center; }
        #five ul#ulFive li.f-left div .sp3 {
          background: url(../img/03.png) no-repeat center center; }
        #five ul#ulFive li.f-left div h4 {
          padding: 15px;
          font-size: 18px;
          font-family: Gotham;
          font-weight: 600;
          letter-spacing: 2px; }
        #five ul#ulFive li.f-left div p {
          font-size: 14px;
          line-height: 1.2;
          font-family: Gotham;
          font-weight: 500;
          text-transform: uppercase; }
    #five ul#ulFive .redClick {
      background: #f12f38 !important; }
    #five ul#ulFive #liFive-1:hover, #five ul#ulFive #liFive-2:hover, #five ul#ulFive #liFive-3:hover {
      background: #f12f38; }
    #five ul#ulFive #liFive-1 {
      background: url(../img/7582251028_4e6c740672_o.jpg) no-repeat center center;
      background-size: cover; }
    #five ul#ulFive #liFive-2 {
      background: #f12f38 url(../img/c24046ade710b158-SatChs2.jpg) no-repeat center center;
      background-size: cover; }
    #five ul#ulFive #liFive-3 {
      background: url(../img/02580001.jpg) no-repeat center center;
      background-size: cover; }

li#six {
  position: relative;
  background: #dfdcdc;
  height: 250px; }
  li#six a {
    position: relative;
    top: 50%;
    left: 44%;
    -webkit-transform: translateX(-44%);
    -moz-transform: translateX(-44%);
    -ms-transform: translateX(-44%);
    -o-transform: translateX(-44%);
    transform: translateX(-44%); }
    li#six a span {
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 400; }

.breakKeyb {
  height: 650px !important; }

.breakKeyb2 {
  height: 550px !important; }

li#seven {
  background: #1d1f1f;
  height: 200px; }
  li#seven ul li.liFooter {
    list-style: none;
    width: 20%;
    text-align: center;
    line-height: 172px; }
    li#seven ul li.liFooter a {
      color: #fff;
      text-decoration: none;
      font-family: Gotham;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 2px; }
      li#seven ul li.liFooter a:hover {
        color: rgba(255, 255, 255, 0.6); }

.f-left {
  float: left; }

.f-right {
  float: right;
  right: 0; }

#eight {
  position: relative;
  width: 100%;
  height: 100%; }
  #eight ul {
    position: relative;
    width: 100%;
    height: 100%;
    list-style: none; }
    #eight ul li:hover a {
      opacity: 0 !important; }
    #eight ul li {
      position: relative;
      list-style: none;
      display: inline-block;
      width: 25%;
      height: 25%;
      opacity: 0.8;
      z-index: 500;
      overflow: hidden; }
      #eight ul li:hover {
        background: #fff; }
      #eight ul li a {
        text-indent: -9999px;
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 500;
        background-size: 62px 48px;
        opacity: 1 !important; }
      #eight ul li div {
        opacity: 0;
        padding: 20px 0px;
        width: 100%;
        position: absolute;
        pointer-events: none;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%); }
        #eight ul li div h4 {
          padding-left: 10%;
          font-family: Gill Sans;
          font-size: 1.5em;
          font-weight: 400;
          padding-bottom: 5px;
          color: #252525 !important; }
        #eight ul li div p.previewPara {
          color: #b4b4b4 !important;
          font-family: Serif;
          font-style: italic;
          font-size: 1.2em;
          padding-left: 10%;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          display: -webkit-box !important;
          -webkit-line-clamp: 3 !important;
          -webkit-box-orient: vertical !important; }
        #eight ul li div span {
          font-size: 14px;
          display: inline-block;
          line-height: 1.3;
          padding: 20px 0 0 10%;
          max-width: 70%;
          color: #252525 !important; }
    #eight ul li:hover a {
      opacity: 0; }
    #eight ul li:hover div {
      opacity: 1; }

.li-1 {
  background: url(../img/Kinfolk11_Home-Tours_Beach-House-8.jpg) no-repeat center center;
  background-size: cover; }

.li-2 {
  background: url(../img/bc74558c35abbc6a-40620008_crop.jpg) no-repeat center center;
  background-size: cover; }

.li-3 {
  background: url(../img/61ca5f6a6468ae60-_MG_6696_seachant.jpg) no-repeat center center;
  background-size: cover; }

.li-4 {
  background: url(../img/tumblr_mxpjkerbbu1qhzycvo1_1280.jpg) no-repeat center center;
  background-size: cover; }

.li-5 {
  background: url(../img/Iceland_AG_01_seachant.jpg) no-repeat center center;
  background-size: cover; }

.li-6 {
  background: url(../img/IMG_0010-1_o_brigi.Jdlallyphotography1.jpg) no-repeat center center;
  background-size: cover; }

.li-7 {
  background: url(../img/fa13d96576ec89ea-_MG_7430.jpg) no-repeat center center;
  background-size: cover; }

.li-8 {
  background: url(../img/tumblr_mz0wzmFOet1rutr4uo3_r1_1280.jpg) no-repeat center center;
  background-size: cover; }

.li-9 {
  background: url(../img/8683844704_96d10ebaff_k.jpg) no-repeat center center;
  background-size: cover; }

.li-10 {
  background: url(../img/454d2e3b516d03dd-Fred_LA_15.jpg) no-repeat center center;
  background-size: cover; }

.li-11 {
  background: url(../img/8677358143_c5e131a2cd_o.jpg) no-repeat center center;
  background-size: cover; }

.li-12 {
  background: url(../img/8407664421_d34a8f650d_o.jpg) no-repeat center center;
  background-size: cover; }

.li-13 {
  background: url(../img/6284743142_18d43229c7_o.jpg) no-repeat center center;
  background-size: cover; }

.li-14 {
  background: url(../img/562c902850a3cadd-kf_summer_52_carissagallo.jpg) no-repeat center center;
  background-size: cover; }

.li-15 {
  background: url(../img/791590bf9fa1c70d-Morse-101.jpg) no-repeat center center;
  background-size: cover; }

.li-16 {
  background: url(../img/5dd3d1581884825cc6e9c83fda5de40_kinfolkb.jpg) no-repeat center center;
  background-size: cover; }

@media screen and (min-width: 2000px) {
  #four h3 {
    font-size: 40px !important; }
  #four p {
    font-size: 24px !important;
    max-width: 690px; } }
@media screen and (min-width: 2300px) {
  #four h3 {
    font-size: 50px !important; }
  #four p {
    font-size: 28px !important;
    max-width: 690px; } }
@media screen and (max-width: 1280px) {
  #eight ul li:hover a {
    opacity: 0 !important; }
  #eight ul li {
    position: relative;
    list-style: none;
    display: inline-block;
    width: 33.333%;
    height: 20%;
    opacity: 0.8;
    z-index: 500;
    overflow: hidden; }
    #eight ul li div span {
      display: none; }
  #eight ul li:last-child {
    display: none; } }
@media screen and (max-width: 1280px) {
  #four div.leftText {
    width: 80% !important;
    top: 50% !important;
    left: 85% !important;
    -webkit-transform: translateX(-85%) translateY(-50%) !important;
    -moz-transform: translateX(-85%) translateY(-50%) !important;
    -ms-transform: translateX(-85%) translateY(-50%) !important;
    -o-transform: translateX(-85%) translateY(-50%) !important;
    transform: translateX(-85%) translateY(-50%) !important; } }
@media screen and (max-width: 55em) {
  header span#show-keynav {
    display: none !important; }

  #four ul#ulFour {
    position: relative; }
    #four ul#ulFour li {
      position: relative;
      width: 100% !important; }
    #four ul#ulFour li:first-child {
      height: inherit !important; }
      #four ul#ulFour li:first-child div.leftText {
        margin-top: 80px !important;
        left: 50% !important;
        -webkit-transform: translateX(-50%) !important;
        -moz-transform: translateX(-50%) !important;
        -ms-transform: translateX(-50%) !important;
        -o-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important; }
        #four ul#ulFour li:first-child div.leftText h3 {
          font-size: 29px !important; }
        #four ul#ulFour li:first-child div.leftText p {
          margin-bottom: 40px !important; }
    #four ul#ulFour li.liFourRight {
      height: 50% !important;
      top: 55% !important;
      width: 80% !important;
      left: 50% !important;
      -webkit-transform: translateX(-50%) !important;
      -moz-transform: translateX(-50%) !important;
      -ms-transform: translateX(-50%) !important;
      -o-transform: translateX(-50%) !important;
      transform: translateX(-50%) !important; }
      #four ul#ulFour li.liFourRight div.containeripad {
        top: 65%; }

  #fourBis ul {
    position: relative; }
    #fourBis ul li {
      position: relative;
      width: 100% !important;
      height: 400px !important; }
    #fourBis ul li.f-left {
      z-index: 500; }
      #fourBis ul li.f-left div.leftText {
        padding: 30px 0 0 0;
        width: 80% !important;
        top: 10% !important;
        left: 50% !important;
        -webkit-transform: translateX(-50%) !important;
        -moz-transform: translateX(-50%) !important;
        -ms-transform: translateX(-50%) !important;
        -o-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important; }
        #fourBis ul li.f-left div.leftText h3 {
          font-size: 29px !important; }
        #fourBis ul li.f-left div.leftText p {
          margin-bottom: 20px !important; }
        #fourBis ul li.f-left div.leftText ul.squareTools {
          padding: 0px 0 0 0;
          position: relative;
          display: inline-block;
          left: 50% !important;
          -webkit-transform: translateX(-50%) !important;
          -moz-transform: translateX(-50%) !important;
          -ms-transform: translateX(-50%) !important;
          -o-transform: translateX(-50%) !important;
          transform: translateX(-50%) !important; }
          #fourBis ul li.f-left div.leftText ul.squareTools li {
            width: 40px !important;
            height: 40px !important; }
    #fourBis ul li.liFourRight {
      margin: 90px 0 0 0;
      z-index: 100;
      width: 90% !important;
      left: 50% !important;
      -webkit-transform: translateX(-50%) !important;
      -moz-transform: translateX(-50%) !important;
      -ms-transform: translateX(-50%) !important;
      -o-transform: translateX(-50%) !important;
      transform: translateX(-50%) !important; }

  #trois h2 {
    width: 100% !important;
    height: 39px !important;
    background: url(../img/focusedoncontent.png) no-repeat center center !important;
    background-size: 80% auto !important; }
  #trois a.test {
    position: absolute;
    z-index: 10000;
    top: 54%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-54%);
    -moz-transform: translateX(-50%) translateY(-54%);
    -ms-transform: translateX(-50%) translateY(-54%);
    -o-transform: translateX(-50%) translateY(-54%);
    transform: translateX(-50%) translateY(-54%); }

  #five {
    height: 100% !important; }
    #five ul#ulFive li {
      position: relative;
      display: block;
      width: 100% !important;
      height: 33.33% !important; }
      #five ul#ulFive li div {
        top: 25% !important;
        -webkit-transform: translateY(-25% !important);
        -moz-transform: translateY(-25% !important);
        -ms-transform: translateY(-25% !important);
        -o-transform: translateY(-25% !important);
        transform: translateY(-25% !important); }

  #eight ul li:hover a {
    opacity: 0 !important; }
  #eight ul li {
    position: relative;
    list-style: none;
    display: inline-block;
    width: 50%;
    height: 20%;
    opacity: 0.8;
    z-index: 500;
    overflow: hidden; }
    #eight ul li div span {
      display: none; }
  #eight ul li:last-child {
    display: block; } }
/* ----- FONTS ----- */
@font-face {
  font-family: 'lato';
  src: url("../fonts/lato-bold-webfont.eot");
  src: url("../fonts/lato-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-bold-webfont.woff") format("woff"), url("../fonts/lato-bold-webfont.ttf") format("truetype"), url("../fonts/lato-bold-webfont.svg#latobold") format("svg");
  font-weight: 800;
  font-style: 800; }
@font-face {
  font-family: 'lato';
  src: url("../fonts/lato-regular-webfont.eot");
  src: url("../fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg#latoregular") format("svg");
  font-weight: 400;
  font-style: 400; }
@font-face {
  font-family: 'lato';
  src: url("../fonts/lato-light-webfont.eot");
  src: url("../fonts/lato-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-light-webfont.woff") format("woff"), url("../fonts/lato-light-webfont.ttf") format("truetype"), url("../fonts/lato-light-webfont.svg#latolight") format("svg");
  font-weight: 100;
  font-style: 100; }
/* ----- ANIM ----- */
/*modif1*/
@keyframes slideRight {
  0% {
    transform: translateX(-150%);
    opacity: 0; }

  40% {
    opacity: 0; }

  100% {
    transform: translateX(0%);
    opacity: 1; } }
@-moz-keyframes slideRight {
  0% {
    -moz-transform: translateX(-150%);
    opacity: 0; }

  40% {
    opacity: 0; }

  100% {
    -moz-transform: translateX(0%);
    opacity: 1; } }
@-ms-keyframes slideRight {
  0% {
    -ms-transform: translateX(-150%);
    opacity: 0; }

  40% {
    opacity: 0; }

  100% {
    -ms-transform: translateX(0%);
    opacity: 1; } }
@-o-keyframes slideRight {
  0% {
    -o-transform: translateX(-150%);
    opacity: 0; }

  40% {
    opacity: 0; }

  100% {
    -o-transform: translateX(0%);
    opacity: 1; } }
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-150%);
    opacity: 0; }

  40% {
    opacity: 0; }

  100% {
    -webkit-transform: translateX(0%);
    opacity: 1; } }
@media screen and (max-width: 1024px) {
  ul.key {
    height: 100%; }

  ul li.keyb {
    list-style: none; }

  .dotstyle,
  .download,
  .intro,
  #iphone-video,
  #phone,
  #iphone-video1,
  #iphone-video2,
  #iphone-video3,
  .promo,
  #show-keynav,
  #modal-12,
  #video,
  #bef-af {
    display: none; }

  .formobile {
    display: block; }

  #mixio {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 25px;
    left: 50%;
    margin-left: -50px; }

  #typo,
  #brightness,
  #exposure,
  #before-after {
    padding-bottom: 68px;
    text-align: center; }

  #typo {
    padding: 68px 0 68px 0; }

  .info h1 {
    color: #474747;
    width: 90%;
    font-size: 30px;
    font-size: 3rem;
    margin: 42px auto 24px auto;
    line-height: 1.2; }

  .info p {
    color: #666766;
    width: 90%;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 12px auto 48px auto;
    text-align: left; }

  #typo .info img,
  #brightness .info img,
  #exposure .info img,
  #before-after .info img {
    width: 70%;
    height: auto;
    margin: 0 auto; }

  .keyb #before-after .info .icon {
    position: absolute;
    left: 50%;
    margin-left: -19px;
    width: 38px;
    height: 38px;
    background: url(../img/icon_download_safari.png) no-repeat; }

  .keyb footer {
    position: relative;
    text-align: center;
    text-decoration: none;
    padding: 48px 0; }

  .keyb footer p, .keyb footer p a {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #414141;
    text-decoration: none;
    padding-bottom: 3px; }

  .keyb footer p a {
    border-bottom: 1px dotted #414141;
    font-weight: bold; }

  .footer #logo_footer {
    margin-bottom: 48px; } }
/* ----- CSS ----- */
html, body {
  width: 100%;
  height: 100%; }

.wrapper {
  position: relative;
  width: 940px;
  height: 100%;
  margin: 0 auto; }

.formobile {
  display: none; }

/* ----- MENU ----- */
.dotstyle {
  position: fixed;
  right: 20px;
  height: 176px;
  top: 50%;
  margin-top: -88px;
  opacity: 0;
  z-index: 20000; }

.dotstyle ul {
  width: 16px;
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.dotstyle li {
  position: relative;
  display: block;
  float: left;
  margin: 16px 0;
  width: 10px;
  /*mod1*/
  height: 10px;
  /*mod1*/
  border-radius: 5px;
  background: #e0e0e0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.dotstyle li a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  text-indent: -999em;
  pointer-events: none;
  position: absolute; }

.dotstyle li a:focus {
  outline: none; }

.dotstyle .active {
  background-color: rgba(0, 0, 0, 0.4); }

/* ----- POPUP ----- */
.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 190000;
  visibility: hidden;
  background: white;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.md-show {
  visibility: visible; }

.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 180000;
  opacity: 0;
  background: white;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible; }

/* Content styles */
.md-content {
  color: #fff;
  background: white;
  position: relative;
  border-radius: 3px;
  margin: 0 auto;
  text-align: center; }

.md-content h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
  font-family: 'lato', Helvetica, Arial, 'Sans-serif';
  font-size: 25px;
  font-weight: 400;
  color: #474747;
  line-height: 63px;
  letter-spacing: 2px;
  /*3px*/
  word-spacing: 6px;
  text-transform: uppercase; }

.md-content p {
  margin: 0 0 32px 0;
  padding: 10px 0;
  font-weight: 100;
  font-size: 20px;
  line-height: 1.5;
  color: #666766; }

.md-content ul {
  margin: 0;
  margin: 64px 0 72px 0; }

.md-content ul li {
  display: inline-block;
  font-weight: 400;
  color: #666766;
  margin-right: 84px;
  padding: 64px 0 0 0; }

.md-content ul li:nth-child(1) {
  background: url("../img/mobile.png") no-repeat;
  background-size: 38px 38px;
  background-position: center top; }

.md-content ul li:nth-child(2) {
  background: url("../img/icon_download_safari.png") no-repeat;
  background-size: 38px 38px;
  background-position: top center; }

.md-content ul li:nth-child(3) {
  background: url("../img/add_to_homescreen.png") no-repeat;
  background-size: 38px 38px;
  background-position: top center; }

.md-content ul li:nth-child(4) {
  width: 68px;
  background: url("../img/hipster.png") no-repeat;
  background-size: 38px 38px;
  background-position: center top;
  margin-right: 0; }

.md-content a {
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #666766;
  padding: 16px 24px;
  border: 3px solid #666766; }

.md-content a:hover {
  background: #666766;
  color: white; }

/* Individual modal styles with animations/transitions */
/* Effect 12:  Just me */
.md-effect-12 .md-content {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show.md-effect-12 ~ .md-overlay {
  background: white; }

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
  background: transparent; }

.md-show.md-effect-12 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

/* ----- TAILLE SECTION ----- */
#un,
#deux,
#trois,
#four,
#five,
#six {
  overflow: hidden;
  height: 100%; }

/* ----- HEADER ----- */
#div1 {
  position: relative; }

#div1 .info {
  position: absolute; }

#phone {
  position: fixed;
  z-index: 3000;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  z-index: 3000;
  opacity: 0;
  -webkit-transition: all .8s ease-in;
  -moz-transition: all .8s ease-in;
  -ms-transition: all .8s ease-in;
  -o-transition: all .8s ease-in;
  transition: all .8s ease-in;
  pointer-events: none; }

.section {
  position: relative; }

#brightness {
  background: #f8f8f8; }

.info {
  position: absolute;
  float: left;
  width: 470px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  overflow: hidden; }

.info_yes {
  left: 24px;
  -webkit-transition: left 1000ms all 0.5s;
  -moz-transition: left 1000ms all 0.5s;
  -ms-transition: left 1000ms all 0.5s;
  -o-transition: left 1000ms all 0.5s;
  transition: left 1000ms all 0.5s; }

.slideRight {
  opacity: 0;
  visibility: visible !important; }

ul.key {
  height: 100%; }

ul li.keyb {
  list-style: none;
  width: 100%;
  height: 100%; }

ul li.keyb.footer {
  height: 20% !important; }

/* ----- HEADER ----- */
#un {
  position: relative;
  background: rgba(0, 0, 0, 0.7) url(../img/background1.jpg) center center no-repeat fixed;
  height: 100%;
  color: #fff;
  z-index: 10000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }

/* ----- ECRANS ----- */
.fade {
  opacity: 1; }

section .info {
  margin-left: 450px; }

/*specifique au ecrans*/
section .info p {
  font-size: 20px;
  line-height: 1.5;
  color: #666766;
  width: 450px;
  font-weight: 100; }

section .info h1 {
  font-family: 'lato', Helvetica, Arial, 'Sans-serif';
  font-size: 25px;
  font-weight: 400;
  color: #474747;
  line-height: 63px;
  letter-spacing: 2px;
  /*3px*/
  word-spacing: 6px;
  text-transform: uppercase; }

/*mod1*/
span.icons {
  margin-top: 20px;
  display: block;
  width: 250px;
  height: 42px; }

/* TEXT */
/*mod1*/
span.icon-text {
  background: url(../img/icon-text.png) no-repeat center center; }

span.icon-img {
  background: url(../img/icon-img.png) no-repeat center center; }

/* VIDEO */
#video {
  position: relative;
  background: rgba(0, 0, 0, 0.7) url(../img/bgvideo1.jpg) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 21000; }

.big-vid {
  position: absolute;
  margin: 0 auto;
  width: 960px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8);
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

/* BEFORE/AFTER */
#before-after {
  background: #f8f8f8;
  position: relative;
  z-index: 10000; }

#bef-af {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  left: 15.2%;
  width: 286px;
  height: 600px;
  -webkit-transition: all .4s ease-in;
  -moz-transition: all .4s ease-in;
  -ms-transition: all .4s ease-in;
  -o-transition: all .4s ease-in;
  transition: all .4s ease-in;
  z-index: 6000; }

#bef-af img {
  position: relative;
  z-index: 2000;
  pointer-events: none; }

.full {
  position: relative;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  width: 84%;
  height: 425px; }

.droite {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/droite1.jpg);
  margin: 89px 0px 0px 24px;
  overflow: hidden;
  height: 425px; }

.gauche {
  height: 425px;
  position: relative;
  background: transparent;
  background-image: url(../img/gauche.jpg);
  width: 50%; }

.tools {
  position: relative;
  float: right; }

.tools nav ul {
  position: absolute;
  bottom: 0; }

.tools nav ul li a {
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 25px; }

footer {
  position: relative;
  text-align: center;
  padding: 80px;
  text-decoration: none;
  z-index: 25000;
  text-transform: uppercase;
  background: #fff; }

footer h1 {
  margin: 0 0 70px 0; }

.heart {
  font-size: 15px;
  color: lightpink; }

footer p, footer p a {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-family: 'lato', Helvetica, Arial, Sans-serif;
  font-size: 12px;
  color: #AAAAAA;
  font-weight: 400;
  text-decoration: none; }

footer p a:hover {
  color: #666; }