/* ============================================
   MASTER CUSTOM CSS - codymalick.com
   Applies to: index + all subpages
   Page-specific styles use body class selectors
   e.g. body.amazonhalo, body.avar, etc.
   ============================================ */


/*** IFRAME STYLES ***/

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*** GLOBAL STYLES ***/

a {
  letter-spacing: 0.02em;
  font-family: 'Open Sans', 'arial', sans-serif;
}

 a:focus {
  outline: none !important;
}

header a:active {
  color: #fff;
}

h1 {
  letter-spacing: .02em;
  font-size: 50px;
  font-weight: 700;
}

h2 {
  letter-spacing: .02em;
  font-weight: 600;
  line-height: 1.5em;
  font-size: 1.4em;
}

h3 {
  letter-spacing: .02em;
  font-size: 1.2em !important;
  color: #fff;
  font-weight: 1;
}

p {
  letter-spacing: 0.02em;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 100;
  font-size: 1em !important;
  line-height: 28px;
}

h5, h4 {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: 'Lato', 'arial', sans-serif;
  font-weight: 400 !important;
}

/**html, body {
  max-width: 100%;
  overflow-x: hidden;
}**/

body {
  background: #1d222d;
  overflow-x: hidden;
}

/*** SUBPAGE BODY BACKGROUNDS ***/

body.amazonhalo,
body.amazonmusic,
body.ubisoft,
body.nevaeh,
body.thewilds,
body.hearthstone,
body.bikehound,
body.avar,
body.pausefest,
body.illumination,
body.particles {
  background: #000;
}


/*** COLUMNS ***/

.col-lg-12, .col-sm-12 {
  padding-bottom: 3em;
}

.col-lg-6, .col-sm-6 {
  padding-bottom: 3em;
}

.col-lg-12 .col-sm-12 {
  padding: 2em 0;
}


/*** HEADER ***/

.pdeSketch {
  position: relative;
  margin: 0 auto;
  left: 0;
  width: 100vw;
  height: auto;
  overflow-x: hidden;
}

header .header-content .header-content-inner p {
  margin-bottom: 0px;
}

.mouseIcon {
  width: 100px;
  padding: 20px 0px 40px 0px;
}

#onboarding {
  padding: 200px 0px 200px 0px;
  position: relative;
}

header .header-content {
  margin: 0 auto;
  z-index: 20;
  pointer-events: none;
}

#homeHeading {
  position: absolute;
  top: 40%;
  width: 1024px;
  left: 50%;
  margin-left: -500px;
  opacity: 0;
  -webkit-transition: all cubic-bezier(.31,-0.27,.83,1.22) 1s;
  transition: all cubic-bezier(.31,-0.27,.83,1.22) 1s;
  padding: 0px 50px 0px 50px;
}

.instructions {
  padding-top: 20px;
}

.new-header {
  background-position: center;
  width: 100vw;
}

.header {
  background-color: transparent;
}

.heroImage {
  position: fixed;
  z-index: -10;
}

/*** PAGE-SPECIFIC HEADER BACKGROUNDS ***/

body.nevaeh .new-header,
body.thewilds .new-header {
  background: url('../img/nevaeh.PNG') repeat fixed 100%;
  background-position: center;
}

body.bikehound .new-header {
  background: url('../img/header.jpg') repeat fixed 100%;
  background-position: center;
}

body.hearthstone .new-header {
  background: url('../img/Header.avif') repeat fixed 100%;
  background-position: center;
}


/*** ANIMATIONS ***/

.fadeAway {
  opacity: 0;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}

.leftBounce {
  margin-left: -512px !important;
  opacity: 1 !important;
  -webkit-transition: opacity .25s (.31,-0.27,.83,1.22);
  transition: opacity .25s (.31,-0.27,.83,1.22);
}

.logo_leftBounce {
  width: 90px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  left: 25px !important;
  top: .4em !important;
  position: absolute !important;
  -webkit-transition: opacity .25s (.31,-0.27,.83,1.22);
  transition: opacity .25s (.31,-0.27,.83,1.22);
}

.carrot {
  padding-bottom: 20px;
  -webkit-animation: bounce 1s ease-in-out infinite running;
  -webkit-transition: all 0.2s ease;
}

.carrotAnimation {
  -webkit-animation: homeanim 2.5s ease;
}

@keyframes bounce {
  0% { transform: translateY(0em); }
  100% { transform: translateY(1em); }
}

@keyframes homeanim {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


/*** NAVBAR ***/

.navbar-default {
  height: auto;
}

.affix-top {
  top: -100px;
 /* background-color:#fff;*/
}

#logo {
  width: 300px;
  opacity: 0;
  position: absolute;
  margin: 0 auto;
  left: 50%;
  margin-top: 10em;
  margin-left: -130px;
  pointer-events: none;
  -webkit-transition: all cubic-bezier(.12,.76,.54,1.01) .4s;
  transition: all cubic-bezier(.12,.76,.54,1.01) .4s;
}

.navbar-default.affix #logo {
  opacity: 0;
  width: 90px;
  left: 25px;
  margin-top: 0;
  top: .4em;
  margin-left: 0;
  pointer-events: none;
}

.logo_leftBounce {
  width: 90px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  left: 25px !important;
  top: .4em !important;
  position: absolute !important;
  -webkit-transition: opacity .25s (.31,-0.27,.83,1.22);
  transition: opacity .25s (.31,-0.27,.83,1.22);
}


.navbar-default.affix #logo {
  width: 90px;
  left: 25px;
  margin-top: 0;
  top: .4em;
  margin-left: 0;
  pointer-events: none;
}

body.amazonhalo .navbar-default.affix #logo,
body.amazonmusic .navbar-default.affix #logo,
body.ubisoft .navbar-default.affix #logo,
body.nevaeh .navbar-default.affix #logo,
body.thewilds .navbar-default.affix #logo,
body.hearthstone .navbar-default.affix #logo,
body.bikehound .navbar-default.affix #logo,
body.avar .navbar-default.affix #logo,
body.pausefest .navbar-default.affix #logo,
body.illumination .navbar-default.affix #logo,
body.particles .navbar-default.affix #logo {
  width: 60px;
  left: 1em;
  margin-top: -16px;
  margin-left: 0;
  top: -.4em;
}

.logo_circle {
  z-index: -4;
  position: absolute;
  left: 10px;
  top: -1em;
  background-color: white;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  margin: 20px;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,.25);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,.25);
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,.25);
}

.navbar-default .navbar-toggle {
  border: none;
}

.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
  color: #ad4f4c !important;
}

.navbar-default.affix .nav > li > a:hover {
  color: #333 !important;
}


.navbar-default .nav>li.active>a,
.navbar-default .nav>li.active>a:focus {
  color: #ad4f4c !important;
  background-color: transparent;
}

.page-scroll {
  color: #ad4f4c;
}

body.amazonhalo .page-scroll,
body.amazonmusic .page-scroll,
body.ubisoft .page-scroll,
body.nevaeh .page-scroll,
body.thewilds .page-scroll,
body.hearthstone .page-scroll,
body.bikehound .page-scroll,
body.pausefest .page-scroll,
body.particles .page-scroll,
body.avar .page-scroll,
body.illumination .page-scroll {
  color: #000;
}

.navbar-brand span {
  color: #343434;
}

@media (min-width: 768px) {
  .navbar-default .navbar-header .navbar-brand {
    color: white;
  }
  .navbar-default.affix {
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,.25);
    font-size: 14px;
  }
}


/*** COLORS ***/

.bg-primary {
  background-color: white;
  color: inherit;
}

.bg-primary p {
  color: #777;
}

.bg-secondary {
  background-color: #f2f2f2;
}

.accent-color {
  border-color: #993333;
}

body.amazonhalo .accent-color,
body.amazonmusic .accent-color,
body.nevaeh .accent-color,
body.thewilds .accent-color,
body.bikehound .accent-color,
body.pausefest .accent-color {
  border-color: #498d91;
}

body.avar .accent-color {
  border-color: #26aae1;
}

.text-primary {
  color: #498d91;
}

.white-text {
  color: #fff !important;
  font-weight: 100;
}

#work {
  background: #fff;
  padding: 20px 0;
}

.bg-third {
  background-color: #498d91 !important;
  color: white;
}

body.avar .bg-third {
  background-color: #26aae1 !important;
}

.bg-third h1 {
  font-size: 3em;
  font-weight: 600;
}

#rationale h2, #rationale p {
  color: #000;
}

.bg-dark {
  background: #fff;
}


/*** H3 COLOR OVERRIDES ***/

body.amazonhalo h3,
body.amazonmusic h3,
body.nevaeh h3,
body.thewilds h3,
body.bikehound h3,
body.pausefest h3,
body.ubisoft h3,
body.hearthstone h3,
body.illumination h3,
body.particles h3 {
  font-size: 1.6em;
  color: #498d91;
}

body.avar h3 {
  font-size: 1.6em;
  color: #26aae1;
}


/*** BUTTONS ***/

.myButton, .myButton:visited {
  pointer-events: auto;
  font-size: 16px !important;
  font-weight: 600;
  color: #333 !important;
  background: #fff;
  border: solid 1px white;
  text-decoration: none;
  text-transform: none;
  margin-top: 0px;
  margin-bottom: 20px;
  display: inline-block;
  transition: all .5s ease;
}

.btn-xl {
  padding: 10px 26px;
}

.myButton:hover {
  background: rgb(255,255,255);
  color: white !important;
  background: transparent;
}

.myButton:active {
  background: #fff !important;
  color: #333 !important;
}

.myButton a {
  font-size: 12px;
  color: #fff;
}

#POC .btn {
  margin-top: 20px;
}

.btn:active {
  color: #fff !important;
}

.row .col-lg-12 .btn {
  margin-top: 100px;
  border: 1px solid black;
}


/*** PORTFOLIO ***/

.portfolio-box {
  color: #fff;
  max-width: 1920px !important;
  max-height: 1080px !important;
}

.portfolio-box-caption {
  color: #222;
  text-align: left;
}

.portfolio-box .portfolio-box-caption {
  transition: all .25s ease;
  background: rgba(39,39,39,0.8);
}

.portfolio-box a:hover {
  transform: scale(1.2);
}

a:focus, a:hover {
  background-color: #fff;
  color: #333;
  text-decoration: none;
}

a {
  color: #7b7b7b !important;
}

a:hover {
  color: #343434;
}


/*** DEMO REEL ***/

#demoReel {
  background: #fff;
  height: 720px;
  padding: 0 !important;
}

.fullvid {
  padding: 0px;
  display: block;
  width: 100%;
}

body.avar .fullvid,
body.illumination .fullvid,
body.particles .fullvid,
body.ubisoft .fullvid {
  background: #000;
  display: block;
  width: 100%;
  height: 720px;
}

.img-responsive {
  margin: 0 auto;
  width: 100%;
}

.vp-center {
  height: auto !important;
}

.sectionTitle {
  height: 100px;
  background: white;
}


/*** PROJECT NAME ***/

.project-name {
  line-height: 1em;
  margin-top: 0px;
  margin-bottom: 10px;
}

.project-name p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.myIntro {
  margin-top: 10px;
  margin-bottom: -5px;
  font-weight: 100;
  letter-spacing: .04em;
}

.myQuote {
  margin-top: -40px;
  padding: 50px 0px 20px 0px;
}


/*** DIVIDERS ***/

.divider_white img {
  padding: 30px 0px 0px 0px;
  width: 200px;
}

.divider_black img {
  margin: 0 auto;
  width: 200px;
}

.divider_black {
  margin: 0 auto;
  margin-bottom: 3em;
  margin-top: 3em;
}


/*** IMAGES ***/

.logo img {
  width: 100%;
  display: inline-block;
}

#bhLogo {
  margin-bottom: 50px;
  height: 167px;
  width: 182px;
}

.sketchInfo {
  opacity: .6;
}

.sketchInfoDiv {
  top: 99%;
  position: absolute;
  padding: 0px 50px 0px 50px;
}

.imgHalfsize {
  margin: 0 auto;
  width: 50%;
}

.img-fluid {
  width: 100%;
}

.img-center {
  margin: 0 auto;
  height: auto;
  width: 40%;
  padding-bottom: 2em;
}


/*** AVAR SPECIFIC ***/

.avarIcons {
  width: 137px;
  height: 131px;
  margin: 0 auto;
  margin-bottom: -26px;
  margin-top: -48px;
  transition: 1s ease;
}

#avMetal { background: url('../img/icons/avMetal.png') no-repeat; }
#avMetaball { background: url('../img/icons/avMetaball.png') no-repeat; }
#avIcosa { background: url('../img/icons/avIcosa.png') no-repeat; }

#brain {
  background: url('../img/icons/brain.png') no-repeat;
  width: 137px;
  height: 131px;
  margin: 0 auto;
  margin-bottom: -26px;
  margin-top: -48px;
  transition: 1s ease;
}

#people {
  background: url('../img/icons/people.png') no-repeat;
  width: 336px;
  height: 257px;
  margin: 0 auto;
  margin-bottom: -26px;
  margin-top: -48px;
  transition: 1s ease;
}

.rowCentered {
  padding-left: 300px;
  padding-right: 300px;
}

.avarColor {
  position: fixed;
  opacity: .8;
  z-index: -1;
  background: #1f232c;
}

body.avar .research-parallax,
body.illumination .research-parallax,
body.particles .research-parallax,
body.ubisoft .research-parallax {
  background: #1f232c;
}

body.avar #research2 span { color: #26aae1; }

body.illumination #research2 span,
body.particles #research2 span,
body.ubisoft #research2 span { color: #ff7106; }


/*** SKETCHES PARALLAX ***/

.sketches-parallax {
  background: url('../img/sketches.jpg') fixed 100%;
  background-position: center !important;
}

.sketches-parallax h2 {
  padding: 200px;
}

body.avar .sketches-parallax,
body.illumination .sketches-parallax,
body.ubisoft .sketches-parallax {
  background: url('../img/moodboard4.png') no-repeat fixed;
  background-size: 50%;
  width: 80%;
  background-position: center !important;
}

body.particles .sketches-parallax {
  background: #fff;
  margin: 0 auto;
}

body.particles .sketches-parallax h2 {
  padding-bottom: 40px;
}


/*** RESEARCH ***/

#research2 h2 {
  margin-bottom: -150px;
  font-weight: 700;
  padding-top: 200px;
  padding-bottom: 200px;
}

#research2 h4 {
  padding-bottom: 20%;
}

#research2 span {
  color: #35da64;
}


/*** NESTOR ***/

.nestor {
  border-radius: 100%;
}

body.avar .nestor,
body.illumination .nestor,
body.particles .nestor,
body.ubisoft .nestor {
  border-radius: 5%;
}

@media (max-width: 768px) {
  .nestor {
    margin-left: 0px;
    margin-bottom: 40px;
    width: 60%;
  }
}

@media (min-width: 768px) {
  .nestor {
    margin-left: 40px;
    width: 80%;
  }
}


/*** TARGET AUDIENCE ***/

.cropper {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 1000%;
}

.cropper img {
  display: inline;
  margin: 0 auto;
  height: 140%;
  width: auto;
}

.cropper2 {
  margin: 0 auto;
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 1000%;
}

.cropper2 img {
  display: inline;
  margin: 0 auto;
  height: 140%;
  width: auto;
}

.rosamaria {
  position: absolute;
  left: -150px;
}

.target-box { width: 100%; }

.gibby {
  position: absolute;
  left: -30px;
}

.rotate {
  position: absolute;
  left: -50px;
  top: -40px;
}

#musicLovers {
  position: absolute;
  left: -60px;
  top: -50px;
}

.gaelan {
  position: absolute;
  left: -60px;
}

#sam {
  position: absolute;
  right: -100px;
  top: 0px;
}

#openHand {
  position: absolute;
  left: -60px;
  top: -50px;
}

.hands { width: 100%; }

#sizzle {
  padding: 0px;
  margin-top: -250px;
}

#player {
  position: absolute;
  top: -200px !important;
}

#explain { margin: 0 auto; }

.wireframes-container {
  width: 72%;
  margin: 0 auto;
}

.wireframesImage {
  display: block;
  margin-top: -150px;
  margin-bottom: -150px;
  background: url('../img/wireframes.png') center no-repeat;
  height: 616px;
  background-size: contain;
}

.wireframes .row .section-heading {
  margin-bottom: 70px;
  padding-top: 10%;
}

.bikearmed h2 { margin-top: -80px; }
.bikes-quote { color: #fff; }
.container { padding: 0; }
#friendsBike p { margin-top: 2em; }
.sherlock { width: 70%; }

.fortified {
  margin-left: -30px;
  width: 70%;
}

.row {
  padding-top: 30px;
}

.research-parallax {
  width: 100vw;
  background-position: center;
  background: url('../img/bike_warehouse.jpg') fixed 100%;
}


/*** CONTAINER FLUID ***/

@media (min-width: 768px) {
  .container-fluid {
    padding-left: 150px;
    padding-right: 150px;
  }
}


/*** CONTACT SECTION ***/

#contact {
  background-color: transparent;
  padding: 50px 15px 20px 15px;
}

@media (min-width: 768px) {
  #contact {
    padding: 50px 150px 20px 150px;
  }
}

body.amazonhalo #contact,
body.amazonmusic #contact,
body.ubisoft #contact,
body.nevaeh #contact,
body.thewilds #contact,
body.hearthstone #contact,
body.bikehound #contact,
body.avar #contact,
body.pausefest #contact,
body.illumination #contact,
body.particles #contact {
  background-color: #1d222d;
  padding: 50px 0 20px 0;
}


/*** FOOTER ***/

footer {
  padding: 200px 0;
  float: left;
  width: 100%;
  color: #3d3d3d;
  text-align: center;
  text-decoration: none;
}

footer h1 {
  font-size: 2em;
  font-weight: 100;
  color: #fff;
}

footer h3 {
  color: #fff;
}

.footer_info {
  float: left;
}

.icons {
  padding-top: 40px;
  float: right;
  width: auto;
  margin: 0 auto;
  list-style: none;
}

.icons li {
  padding: 20px;
  padding-top: 0px;
  float: left;
}

.icons li .fa {
  text-align: center;
}

footer a {
  margin-top: 10px;
  text-decoration: none;
  font-weight: 100;
  color: #fff;
  border-radius: 15px;
}

footer ul li a {
  color: #fff;
}

footer a:hover {
  color: #7de2f9;
  text-decoration: none;
}


/*** ============================================
     MOBILE STYLES (max-width: 767px)
     ============================================ ***/

@media (max-width: 767px) {

  /**html, body {
    overflow-x: hidden;
    max-width: 100%;
  }**/

  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden;
  }

  #contact {
    padding: 50px 15px 20px 15px !important;
  }

  nav {
    width: 100vw;
  }

  .pdeSketch {
    height: 100%;
    width: auto;
    overflow-x: hidden !important;
  }

  .new-header {
    width: 100vw;
    height: auto;
    overflow: hidden;
  }

  header .header-content {
    top: 20%;
    position: absolute;
  }

  #homeHeading {
    width: 100vw;
    left: 0;
    top: 20%;
    margin-left: 0 !important;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .myQuote {
    width: 310px;
    width: auto;
    margin-bottom: 20px !important;
  }
  
  .myIntro {
      margin-left: 0 !important;
  }

  .project-name {
    text-align: center;
  }

  .imgHalfsize {
    margin: 0 auto;
    width: 100%;
  }

  .logo_circle {
    display: none;
  }

  .navbar-default.affix #logo {
    width: 70px;
    margin-top: -.6em;
    left: .5em;
  }

  .fullvid {
    height: 100%;
    margin-top: 20px;
  }

  footer {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 40px 15px !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  .footer_info {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  ul.icons {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  ul.icons li {
    float: none !important;
    display: inline-block !important;
  }

  .navbar-collapse {
    margin-top: -2px;
    background-color: white;
    height: 100%;
    width: 100vw;
  }

  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle {
    background-color: none;
    border-width: 0;
  }

  .navbar-toggle {
    border: 0px none;
    padding: 5px 5px;
    background-color: white !important;
  }

  .myButton {
    margin-top: -20px;
  }

  .image1 { display: none; }
  .image2 { display: block; }

  .nestor {
    margin-left: 0px;
    margin-bottom: 40px;
    width: 60%;
  }
}

@media (max-width: 1024px) {
  header .header-content {
    padding: 0px;
    position: absolute;
  }
}

@media (min-width: 768px) {
  header {
    min-height: auto !important;
  }
}

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {

  header .header-content {
    top: 30%;
    position: absolute;
  }

  .homeHeading {
    top: 50%;
  }

  /**body {
    overflow-x: hidden !important;
  }**/
}