/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
  text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
  font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
body{
  font-family: 'Montserrat', helvetica, sans-serif;
  color: #FFF;
}
h1{
  font-size: 6em;
}
p{
  font-size: 2em;
}
.content{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.button {
  text-transform: uppercase;
  border: 1px solid #FFF;
  color: #FFF;
  padding: 12px 21px;
  font-size: .9em;
  letter-spacing: 2px;
  transition: color .2s, background-color .2s;
  margin-top: 2em;
  display: inline-block;
}
.button:hover {
  color: #000;
  background-color: #FFF;
}
.button.purple {
  border-color: #526ab2;
  background-color: #526ab2;
  color: #FFF;
}
.button.purple:hover {
  background-color: transparent;
  color: #526ab2;
}

.content p span {
      opacity: 0;
       -webkit-transition: all, 550ms;
        -moz-transition: all, 550ms;
        -ms-transition: all, 550ms;
        transition: all, 550ms;
        -webkit-filter: blur(25px);
        -moz-filter: blur(25px);
        -ms-filter: blur(25px);
        filter: blur(25px);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
}

.content p.animate span {
      opacity: 1;
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
}


/* Page loader
 * --------------------------------------- */

#load {
  position: fixed;
  width: 100%;
  background: black;
  height: 100%;
  z-index: 98;
  bottom: 0;
  left: 0;
  right: 0;
}

#load .points {
  position: absolute;
  height: 60%;
  width: 60%;
  top: 15%;
  left: 20%;
}
#load .top {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translateX(-30%);
  transform: rotateY(-30%);
  width: 100%;
  height: 100%;
}

#load .top h5 {
  display: block;
  text-align: center;
  color: #FFF;
  margin-bottom: 1em;
}

#load .top #display {
  height: 20em;
}

svg circle {
    fill: white;
    opacity: 0.5;
}
svg line {
    stroke: white;
    stroke-width: 2px;
}
#load .bottom {
  position: absolute;
  bottom: 10px;
  display: block;
  left: 0;
  right: 0;
  text-align: center;
}
#load .bottom img {
  height: 40px;
}
#load .bottom p {
  font-size: .8em;
  color: #FFF;
}


/* Rotate your phone
 * --------------------------------------- */
#no-responsive {
  position: fixed;
  background-image: url(../img/seq1/ses1_1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  text-align: center;
  display: none;
}
#no-responsive .rotate {
  height: 20%;
  margin-top: 50%;
}
#no-responsive h5 {
  color: #FFF;
  text-transform: uppercase;
}
#no-responsive .bottom {
  position: absolute;
  bottom: 50px;
  width: 100%;
}
#no-responsive .bottom .logo-nr {
  position: absolute;
  left: 80px;
  bottom: -27px;
}
#no-responsive .bottom .title {
  position: absolute;
  right: 40px;
}

/* Navigation
 * --------------------------------------- */
#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: #FFF;
}
#fp-nav ul li .fp-tooltip {
  display: none;
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
  height: 14px;
  margin: -7px 0 0 -1.2px;
  border-radius: 0;
  width: 2px;
}

/* Fixed elements
 * --------------------------------------- */
 #fixed {
  position: fixed;
  display: flex;
  width: 100%;
  z-index: 99;
  justify-content: space-between;
  align-items: center;
  margin-top: .5em;
 }
 #fixed .copy {
   position: fixed;
   bottom: 30px;
   right: 20px;
   font-size: .8em;
   color: #FFF;
 }
 #fixed .left {
   display: flex;
   align-items: center;
   margin-left: 2em;
 }
 #fixed .left .logo {
   height: 30px;
 }
 #fixed img {
   vertical-align: middle;
 }
 #fixed .menu.icon {
  margin-left: 20px;
  width: 17px;
  cursor: pointer;
}
.title {
  font-weight: 100;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
}
.title b {
  font-weight: 900;
}
.title:before {
  position: absolute;
  content: "";
  width: 50px;
  height: 1px;
  background-color: #FFF;
  margin-top: 1.3em;
}

#fixed #speaker {
  margin-right: 2em;
  transition: all .2s;
}

#fixed #speaker.on {
  width: 1em;
}

#fixed #speaker.off {
  width: 1em;
  height: 5px;
  padding-top: 14px;
}

#fixed #speaker {
  cursor: pointer;
}

#fixed .corner {
  position: fixed;
  bottom: 30px;
  left: 20px;
  display: none;
}
#fixed .corner #mouse {
  height: 30px;
  background-image: url('../icons/mouse.svg');
  margin: 0 -10px;
}
#fixed .corner .arrow-down.icon {
  color: #FFF;
  position: absolute;
  background-color: currentColor;
  margin-left: .83em;
  margin-top: .2em;
}
#fixed .corner .arrow-down.icon:before {
  content: '';
  position: absolute;
  left: -5px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
#fixed .corner span {
  display: block;
  margin-top: 42px;
  transform: rotate(90deg);
  text-transform: uppercase;
  color: #676868;
  font-size: .70em;
  margin-left: -7.5px;
}

#fixed .corner #mouse {
    background-size: cover;
    height: 3em;
    width: 3em;
}

@-webkit-keyframes cool {
  0% {
    height: 1.2vh; }
  50% {
    height: 0; }
  100% {
    height: 1.2vh; } }

@keyframes cool {
  0% {
    height: 1.2vh; }
  50% {
    height: 0; }
  100% {
    height: 1.2vh; }
  }

#fixed .corner #mouse::before {
  content: "";
  position: relative;
  display: block;
  height: 1.2vh;
  width: 1px;
  background-color: white;
  margin: 3vh auto;
  -webkit-animation: cool 2s infinite;
  animation: cool 2s infinite;
  opacity: 100;
  top: 48px;
  right: 1px;
}


/* Background (video / img)
 * --------------------------------------- */
.background-full {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
}
video.background-full,
.background-opa {
  opacity: .5;
}

/* About
* --------------------------------------- */
#about {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: #0b1b34;
  overflow: hidden;
  transition: 0.5s;
  width: 0%;
}
#about.visible {
  width: 60%;
}
#about .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .8em 2.4em .3em 2.4em;
}
#about h2 {
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  font-size: 1.2em;
}
#about h5 {
  font-weight: 100;
  margin-top: 2em;
  color: #FFF;
  margin-left: 2.1em;
  font-size: .6em;
  margin-bottom: .7em;
}
#about .top .left img {
  height: 28px;
}
#about .top .right {
  display: flex;
  align-items: center;
}
#about .top .right img {
  height: 20px;
  margin-left: 20px;
}

#about .container {
  margin: 0 2em;
}

#about .container h3 {
  color: #FFF;
  padding-top: 1em;
  padding-bottom: .5em;
  font-family: serif;
  font-size: 1.3em;
}
#about .container p {
  font-weight: 300;
  font-size: 0.9em;
  text-align: justify;
}
#about .container .quote {
  font-size: 1.1em;
  padding-top: .8em;
  display: block;
}

#about .bottom {
  margin: 0 2em;
}

#about .bottom .button {
  margin-bottom: .3em;left: 50%;
	bottom: 20%;
}
#about .bottom span {
  font-size: .8em;
  display: block;
}

/* Section *
 * --------------------------------------- */
.section {
  background-color: #000;
}

/* Continue Buttons *
 * --------------------------------------- */

.btn-container {
  text-align: center;
  margin-top: 3em;
}

.continue-btn {
  text-transform: uppercase;
  border: 1px solid #FFF;
  color: #FFF;
  padding: 12px 21px;
  font-size: .9em;
  letter-spacing: 2px;
  transition: color .2s, background-color .2s;
  margin-top: 2em;
}

.continue-btn:hover {
  background: white;
  outline-color: transparent;
  color: black;
}

/* Scroll Down Animation *
 * --------------------------------------- */

.scroll-down {
	margin: 2em auto;
	display: none;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  z-index: 9;
  left: 50%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}

.scroll-down:hover {
  cursor: pointer;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}

/* Details bloc (for details sections) */
.details {
  width: 32%;
  position: absolute;
  text-align: justify;
}
.details h3 {
  font-size: 1.7em;
  color: #FFF;
  text-transform: uppercase;
  margin-bottom: .6em;
}
.details p {
  width: 70%;
  font-size: .75em;
  display: block;
  margin-left: 8.5em;
  margin-top: 1em;
}
.details p:before {
  content: "";
  position: absolute;
  background: #FFF;
  width: 18em;
  height: 1.5px;
  margin-top: -1em;
}

/* Section 1
 * --------------------------------------- */
#section1 .points-bg {
  height: 70%;
  width: 70%;
  vertical-align: middle;
  position: absolute;
  top: 15%;
  transform: translateY(-15%);
  left: 50%;
  transform: translateX(-50%);
}
#section1 h1 {
  color: #fff;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 5em;
}
#section1 h1 span {
  font-weight: 600;
  display: block;
}
#section1 h1 b {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  unicode-bidi:bidi-override;
  direction:rtl;
  display: inline-block;
  font-weight: 200;
}
#section1 p {
  opacity: 0.8;
  font-size: .8em;
  margin-top: 1.2em;
  margin-bottom: 1em;
}

#launch-btn, {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

#launch-btn:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
  background: transparent;
  color: white;
}

/* Sections background
 * --------------------------------------- */
#section15,
#section17,
#section19 {
  background: #142c6c;
}


/* Sections paragraphs
 * --------------------------------------- */
#section2 p,
#section4 p,
#section6 p,
#section8 p,
#section10 p,
#section12 p,
#section14 p,
#section16 p,
#section18 p,
#section20 p,
#section22 p,
#section24 p {
  width: 60%;
  font-size: 1em;
  display: block;
  margin: 0 auto;
  position: relative;
}

/* Sections details
 * --------------------------------------- */
#section3 .details {
  top: 20%;
  left: 15%;
}

#section5 .details {
  top: 15%;
  left: 32%;
}

#section7 .details {
  top: 10%;
  left: 42%;
}

#section9 .details {
  top: 55%;
  left: 30%;
}

#section11 .details {
  top: 30%;
  left: 20%;
}

#section13 .details {
  top: 20%;
  left: 40%;
}

#section15 .details {
  top: 25%;
  left: 50%;
}

#section17 .details {
  top: 32%;
  left: 50%;
}

#section19 .details {
  top: 40%;
  left: 25%;
  width: 40%;
}

#section21 .details {
  top: 15%;
  left: 10%;
  width: 30%;
}

#section23 .details {
  top: 20%;
  left: 10%;
  width: 30%;
}

#section23 .details h3 {
  text-align: left;
}

#section25 .details {
  top: 25%;
  left: 10%;
  width: 40%;
}

#section21 .details p,
#section23 .details p,
#section25 .details p {
  margin-left: 0;
}

#section21 .btn-container,
#section23 .btn-container {
  text-align: left;
}

/* Sections Details paragraphs
 * --------------------------------------- */

#section15 .details p,
#section17 .details p,
#section19 .details p,
#section21 .details p,
#section23 .details p,
#section25 .details p, {
  margin-left: 0;
}

#section17 .details p {
  width: 90%;
}

#section19 .details p,
#section21 .details p,
#section23 .details p,
#section25 .details p, {
  width: 80%;
}

/* Section 25
* --------------------------------------- */

#section25 .details h3 {
  font-weight: bold;
  margin-bottom: .7em;
}

/* SideNav
* --------------------------------------- */

.sidenav {
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    background-color: #0b1b34;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Scroll Mouse Animation
* --------------------------------------- */

.icon-scroll,
.icon-scroll:before {
  position: absolute;
  left: 50%;
}

.icon-scroll {
  width: 25px;
  height: 50px;
  margin-left: -15px;
  bottom: 2.5em;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
}
.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  top: 8px;
  border-radius: 4px;
  margin-left: -4px;
  animation: scroll infinite 1.5s;
}

@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(23px);
  }
}

/* MediaQueries
* --------------------------------------- */

@media (orientation: portrait) {
  #no-responsive {
    display: block;
  }
}
@media (max-width: 850px) {
  h1 {
    font-size: 4em!important;
  }
  #load .top {
    top: 14%!important;
  }
  #load .top h5 {
    margin-bottom: 0;
  }
  #load .top #display {
    height: 13em!important;
  }
  #load .bottom {
    bottom: 5px!important;
  }
  #load .bottom p {
    font-size: .75em!important;
  }
  .details {
    top: 19%!important;
    margin-top: 1em;
    left: 5%!important;
    width: 87%!important;
  }
  .details p {
    font-size: .4em!important;
  }
  #section13 .details,
  #section15 .details,
  #section21 .details,
  #section23 .details,
  #section25 .details {
    font-size: .9em;
  }
  #section3 .details p,
  #section7 .details p,
  #section13 .details p,
  #section15 .details p,
  #section21 .details p,
  #section23 .details p,
  #section25 .details p {
    width: auto!important;
    margin-left: 3em!important;
    margin-top: -1em!important;
  }
  .corner {
    display: none!important;
  }
  #section2 {
    background-image: url(../img/mobile/Sequence1.jpg);
  }
  #section4 {
    background-image: url(../img/mobile/Sequence2.jpg);
  }
  #section6 {
    background-image: url(../img/mobile/Sequence3.jpg);
  }
  #section8 {
    background-image: url(../img/mobile/Sequence4.jpg);
  }
  #section10 {
    background-image: url(../img/mobile/Sequence5.jpg);
  }
  #section14 {
    background-image: url(../img/mobile/Sequence6.jpg);
  }
  #section16 {
    background-image: url(../img/mobile/Sequence7.jpg);
  }
  #section18 {
    background-image: url(../img/mobile/Sequence8.jpg);
  }
  #section20 {
    background-image: url(../img/mobile/Sequence9.jpg);
  }
  #section24 {
    background-image: url(../img/mobile/Sequence10-11-12.jpg);
  }
  #section2 video,
  #section4 video,
  #section6 video,
  #section8 video,
  #section10 video,
  #section14 video,
  #section16 video,
  #section18 video,
  #section20 video,
  #section24 video {
    display: none;
  }

}
@media (max-width: 800px) {
  .details p:before {
    display: none!important;
  }
  .details .btn-container {
    margin-top: 1.7em!important;
    margin-left: 3em;
    text-align: left!important;
  }
}
@media (max-height: 1050px) {
  #about {
    overflow: scroll;
  }
}
@media (max-height: 650px) {
  #about.visible {
    width: 100%!important;
  }
}
@media (max-height: 530px) {
  #fp-nav {
    display: none;
  }
}