/*:::::::::::GLOBAL STYLES:::::::::::::*/

html {
  overflow-y: scroll;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #282828;
}

.label {
  font-family: 'Roboto mono', monospace;
  color: #fff;
  font-size: 14px;
}

.project-label {
  font-family: 'Roboto mono', monospace;
  color: #00BA6B;
  font-size: 14px;
}

.global-dash {
  width: 100px;
  height: 2px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 6px;
  background-color: #00BA6B;
}

.small-dash {
  width: 30px;
  height: 2px;
  margin-left: 20px;
  margin-right: 20px;
  /*margin-top: 6px;*/
  background-color: #00BA6B;
}

h2 {
  font-size: 30px;
  color: #FFF;
  font-weight: 600;
  margin-bottom: 15px;
  margin-left: -1px;
}

p {
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  margin-bottom: 35px;
}

a {
  color: #777777;
  text-decoration: none;
  -webkit-transition: all .5s cubic-bezier(0.25,1,0.25,1);
  -moz-transition: all .5s cubic-bezier(0.25,1,0.25,1);
  -ms-transition: all .5s cubic-bezier(0.25,1,0.25,1);
  -o-transition: all .5s cubic-bezier(0.25,1,0.25,1);
  cursor: pointer;
}

  a:hover {
    color: #00BA6B;
  }

.bold {
  font-weight: 600;
}

.fade-down {
  position: relative;
  z-index: 4000;
  height: 50px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#282828+0,282828+100&1+0,0+100 */ /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(top, rgba(40,40,40,1) 0%,rgba(40,40,40,0) 100%);
  background: linear-gradient(to bottom, rgba(40,40,40,1) 0%,rgba(40,40,40,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#00282828',GradientType=0 ); /* IE6-9 */
}

.fade-up {
  position: relative;
  z-index: 4000;
  height: 50px;
  top: 617px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,282828+100&0+0,1+100 */ /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(40,40,40,0) 0%,rgba(40,40,40,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(top, rgba(40,40,40,0) 0%,rgba(40,40,40,1) 100%);
  background: linear-gradient(to bottom, rgba(40,40,40,0) 0%,rgba(40,40,40,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}

/*:::::::::::PRELOADER STYLES:::::::::::::::*/

#preloader-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background-color: #282828;
}

  .preloader {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding-top: 25%;
  }

/*:::::::::::HEADER/NAVIGATION STYLES:::::::::::::*/

nav {
  width: 100%;
  padding: 40px;
}

nav .nav-container {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

nav .nav-container .logo {
  width: 60px;
  height: auto;
}

nav ul.nav-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

nav ul.nav-items li a {
  color: #777777;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

nav ul.nav-items li a:hover {
  color: #00BA6B;
}

nav ul.nav-items li a.selected {
  color: #00BA6B;
}

/*nav ul.nav-items li:first-child {
  padding-right: 40px;
}*/

/*:::::::::::HOME PAGE CARD STYLES:::::::::::::*/

.card-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 75vh;
}

  .card-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
	  
  }

  .card-container .card-dash {
    width: 100px;
    height: 2px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 25px;
    background-color: #00BA6B;
  }

  .card-container h1 {
    font-size: 62px;
    font-weight: 600;
    color: #fff;
	-webkit-transform: rotateY(35deg);
	        transform: rotateY(35deg);
  }

  .card-container ul.descriptors li {
    color: #777777;
    font-size: 28px;
    padding-top: 15px;
    padding-bottom: 15px;
	-webkit-transform: rotateY(-40deg);
	        transform: rotateY(-40deg);
  }


/*:::::::::::ABOUT PAGE STYLES:::::::::::::*/

.about-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

 .about-wrapper .about-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
       -ms-flex-direction:column;
           flex-direction:column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   width: 800px;
 }

  .about-wrapper .about-container .section-title {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
     margin-bottom: 50px;
   }

   .about-wrapper .about-container .section {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      height: auto;
      margin-bottom: 100px;
    }

    .about-wrapper .about-container .section .image {
       margin-top: 5px;
     }

     .about-wrapper .about-container .section .column {
        width: 380px;
      }

    .about-wrapper .about-container .section ul.clients {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
       -webkit-box-pack: justify;
           -ms-flex-pack: justify;
               justify-content: space-between;
     }

       .about-wrapper .about-container .section ul.clients li {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          width: 200px;
          height: 200px;
          margin-left: 1px;
          margin-right: 1px;
          margin-bottom: 90px;
        }

        .about-wrapper .about-container .section ul.clients li.sony {
          background-color: #7C8285;
        }

        .about-wrapper .about-container .section ul.clients li.samsung {
          background-color: #1428A0;
        }

        .about-wrapper .about-container .section ul.clients li.redbull {
          background-color: #CC1C4A;
         }

        .about-wrapper .about-container .section ul.clients li.lilly {
          background-color: #D52B1E;
        }

        .about-wrapper .about-container .section ul.clients li.bayer {
          background-color: #0090C5;
        }

        .about-wrapper .about-container .section ul.clients li.novartis {
          background-color: #0460A9;
        }

        .about-wrapper .about-container .section ul.clients li.astrazenica {
          background-color: #830051;
        }

        .about-wrapper .about-container .section ul.clients li.teva {
          background-color: #01A585;
        }

        .about-wrapper .about-container .section ul.clients li.janssen {
          background-color: #019CDC;
        }


/*:::::::::::WORK PAGE STYLES:::::::::::::*/

.work-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /*align-items: center;*/
}

.work-wrapper .work-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 1100px;
}

.work-wrapper .work-container .project-selection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 50vh;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.project-selection ul li {
	-webkit-transform: rotateY(10deg);
	        transform: rotateY(10deg);
}

.work-wrapper .work-container .project-list {
  height: 75vh;
  overflow: visible;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.work-wrapper .work-container .project-list ul li{
  -webkit-transform: rotateY(-25deg);
          transform: rotateY(-25deg);		
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 90px;
}

.work-wrapper .work-container .project-list a {
  font-size: 52px;
  font-weight: 600;
  color: #FFF;
}

  .work-wrapper .work-container .project-list a:hover {
    color: #00BA6B;
  }


  /*:::::::::::PROJECT PAGE STYLES:::::::::::::*/

  .project-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

   .project-wrapper .project-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient:vertical;
     -webkit-box-direction:normal;
         -ms-flex-direction:column;
             flex-direction:column;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
     width: 1100px;
   }

    .project-wrapper .project-container .section-title,
    .project-wrapper .project-container .bio-container {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-orient: horizontal;
       -webkit-box-direction: normal;
           -ms-flex-direction: row;
               flex-direction: row;
       margin-bottom: 50px;
     }

     .project-wrapper .project-container .bio-container {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }

     .project-wrapper .project-container .bio-container .project-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
      }


     .project-wrapper .project-container .section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        height: auto;
        margin-bottom: 100px;
      }

      .project-wrapper .project-container .screenshots {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
             -ms-flex-direction: row;
                 flex-direction: row;
         -webkit-box-pack: center;
             -ms-flex-pack: center;
                 justify-content: center;
         -ms-flex-wrap: wrap;
             flex-wrap: wrap;
         height: auto;
         margin-bottom: 50px;
       }

       .project-wrapper .project-container .end-links {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
        }

       .project-wrapper .project-container .end-links ul {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          width: 500px;
          margin-bottom: 100px;
        }


      .project-wrapper .project-container .section .image {
         /*margin-left: -30px;*/
         margin-right: 60px;
       }

      /*.project-wrapper .project-container .section .bio {
         margin-top: 145px;
      }*/

      .project-wrapper .project-container .section .bio ul {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
             -ms-flex-direction: row;
                 flex-direction: row;
         -webkit-box-pack: justify;
             -ms-flex-pack: justify;
                 justify-content: space-between;
         font-size: 20px;
         color: #fff;
         line-height: 30px;
      }

.project-wrapper .project-container .screenshots .mask {
   width: 1024px;
   height: auto;
   background-color: #FFF;
   border-radius: 6px;
   margin-bottom: 100px;
   -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.45);
           box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.45);
   overflow: hidden;
 }

   .project-wrapper .project-container .screenshots .mask img,
   .project-wrapper .project-container .screenshots .mask video {
      width: 1024px;
      height: auto;
    }

/*:::::::::::FOOTER STYLES:::::::::::::*/

footer {
  width: 100%;
  padding: 40px;
  position: fixed;
  bottom: 0;
}

footer .dash {
  width: 30px;
  height: 2px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 6px;
  background-color: #00BA6B;
}

footer .footer-container {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

footer .social-container,
footer .contact-container {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

  footer .social-container ul.social-icons {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

    footer .social-container ul.social-icons li {
      padding-right: 15px;
    }


footer .contact-container a {
  /*color: #777777;*/
  font-size: 14px;
  /*text-decoration: none;*/
}

  /*footer .contact-container a:hover {
    color: #00BA6B;
  }*/