/* Color Reference */
/* html { font-size: calc(1em + .3vw); } */

body{
  /* display: flex;
  flex-direction: column; */
  /*justify-content: space-around;*/
  background-color: #fafafa;   /*day mode is fafafa, night mode is #0c0c0c*/
  hyphens: auto;
}

p{
  font-family: 'Karla', sans-serif;
  size: 0.4em;
  line-height: 1.6em;
  hyphens: auto;
}

li,a{
  font-family: 'Karla', sans-serif;
}

h1,h2,h3,h4{
  font-family: 'Lora', serif;
  margin-bottom: 30px;
  margin-top: 50px;
}

h1{
  font-size: 5.1em;
}

h2{
  text-align: center;
  color: #0c0c0c;
  font-size: 2.7em;
  font-weight: 500;
  margin-bottom: 7vh;

}

h3{
  font-size: 2em;
  font-weight: 400;
  /* font-family: 'Karla', sans-serif;
  font-size: 1.7em;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase; */
}

/* large size */
#main-two{
  margin-right: 40px;
  margin-top: 40vh;
  width: 500px;
  float:left;
}
#main-one{
  margin-right: -20px;
  margin-top: -480px;
  width: 300px;
  float:right;
}

#top-main{
  margin-top: 100px;
  margin-right: 20px;
}


#main-quote-three{
  margin-top: 90vh; margin-left: 10vw; padding-right: 10vw;font-size: 1.8em;
  font-family: 'Lora', serif; padding-top: 10vh;
}

#sub-main-text{
  color: gray;
  margin-top: 7px;
  font-family: Karla, sans-serif;
  font-weight: 400;
  hyphens: none;
  font-size: 1.6em;
}

/* main page responsive */

@media (max-width: 1600px) {
  h1{
    font-size: 5.0em;
  }
  #sub-main-text{
    font-size: 1.6em;
  }
  #main-two{
    width: 450px;
  }
  #main-one{
    width: 260px;
    margin-top: -420px;
  }
  #top-main{
    margin-top: 80px;
  }
}
@media (max-width: 1540px) {
  h1{
    font-size: 4.9em;
  }
  #sub-main-text{
    font-size: 1.4em;
  }
  #main-two{
    width: 350px;
  }
  #main-one{
    width: 230px;
    margin-top: -350px;
  }
  #top-main{
    margin-top: 70px;
  }
}
@media (max-width: 1366px) {
  h1{
    font-size: 4.7em;
  }
  #main-quote-three{
    font-size: 1.5em;
  }
}
@media (max-width: 1280px) {
 h1{
   font-size: 4.5em;
 }
 #main-two{
  width: 300px;
}
#main-one{
  width:190px;
  margin-top: -300px;
}
}
/* main page responsive end */

/* table css */
.tg  {border-collapse:collapse;border-spacing:0; hyphens:none ;}
.tg td{overflow:hidden;padding:5px 5px;word-break:normal; width: 18vw;}
.tg th{font-weight:normal; overflow:hidden;padding:5px 5px;word-break:normal; width: 30vw;}
.tg .tg-0lax{text-align:left;vertical-align:top; font-family: 'Karla', sans-serif;}
#table-header-text{width: 10vw;font-weight: bold; padding-right: 20px;}

/* Link Hover State */
a:hover{
  text-decoration: none;
}

hr{
  margin-left: 4vw;
  margin-right: 4vw;
}

div{
  display: flex;
}

*.white{
  color: #fafafa
}

*.black{
  color: #0c0c0c
}

.container{
  margin: auto;
  padding: 30px;
}

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

div.padded-bottom{
  padding-bottom: 5vh;
}

#svgs-main{
  max-width: 80%;
  max-height: 80%;
}

#sq-all-red, #sq-all-blue, #sq-all-green, #sq-all-yellow, #sq-all-magenta{
  opacity: 0.3;
  -webkit-transition: opacity 0.05s;
  transition: opacity 0.05s;
}

#sq-all-red:hover, #sq-all-blue:hover, #sq-all-green:hover, #sq-all-magenta:hover{
  opacity: 1;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
  stroke: #ed1c24 !important;
}

svg|a:link, svg|a:visited {
  cursor: pointer;
}

img.icon{
  border: 4px solid transparent;
  max-width: 50%;
  height: auto;
  max-height: 50%;
  border-radius: 50%;
}

img.contain{
  object-fit: contain;
}

img.cover{
  object-fit: cover;
}

img.fill{
  object-fit: fill;
}

img.carrie{
  border-color: #2e3192;
}
img.nate{
  border-color: #ed1c24;
}
img.jane{
  border-color: #009245;
}
img.anya{
  border-color: #ff00ff;
}
img.victoria{
  border-color: #fcee21;
}

img.carrie:hover, img.nate:hover, img.jane:hover, img.anya:hover, img.victoria:hover{
  transform: scale(1.05);
}

img.no-interaction{
  pointer-events: none;
}

/* Pull Quote CSS */
#carrie, #carrie-active:hover{
  border-left-color: #2e3192;
}

#carrie-active:hover{
  color: #2e3192;
}

#nate, #nate-active:hover{
  border-left-color: #ed1c24;
}
#nate-active:hover{
  color: #ed1c24;
}

#jane, #jane-active:hover{
  border-left-color: #009245;
}
#jane-active:hover{
  color: #009245;
}

#anya, #anya-active:hover{
  border-left-color: #ff00ff;
}
#anya-active:hover{
  color: #ff00ff;
}

#victoriagrace, #victoriagrace-active:hover{
  border-left-color: #fcee21;
}
#victoriagrace-active:hover{
  color: #fcee21;
}
/* End Pull Out Quote CSS */

/*Bio Splash Header CSS*/
.bio-subtext{
  color: lightgray;
  margin-top: 7px;
  font-family: Karla, sans-serif;
  font-weight: 400;
}

#bio-splash-nate{
  background-image: url("images/bios/nate-splash-dark.jpg");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

#bio-splash-jane{
  background-image: url("images/bios/jane-splash-dark.jpg");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

#bio-splash-vg{
  background-image: url("images/bios/vg-splash-dark.jpg");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

#bio-splash-carrie{
  background-image: url("images/bios/carrie-splash-dark.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#bio-splash-anya{
  background-image: url("images/bios/anya-splash-dark.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/*End Bio Splash Header CSS*/

img.icon:hover{
  cursor: pointer;
}

.section1 {
  height: 100vh;
}

.navbar{
  margin:0;
  padding: 0;
}

.nav-container{
  margin-top: 0px;
  height: 50px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  width: 100vw;
  z-index: 99 !important;
}

.nav-container-bio{
  margin-top: 0px;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #101010;
  width: 100vw;
  z-index: 99 !important;
  transition: background-color 0.33s !important;
  /*box-shadow: 0px 25px 5px 5px #0c0c0c;*/
}

.nav-container-bio.scrolled{
  transition: background-color 0.33s !important;
  background-color: #fafafa;
  /* box-shadow: 0px 5px 5px 5px #fafafa; */
}

.nav-link{
  color: #A1A2A3;
}

:hover.nav-link{
  color: #0c0c0c;
}

.nav-link.active {
  color: #0c0c0c !important;
}


.flex-column{
  width: 100%;
}

.col-md-6,.col-md-2{
  padding-left:0;
}


.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
}

.blockquote-footer{
  font-family: 'Karla', sans-serif;
}

#bq{
  font-family: 'Lora', serif;
}


.footer{
  /*opacity: 100%;*/
  justify-content: center;
  align-items: center;
  text-align: center;
  color: lightgray;

}


#squiggle-footer{
  opacity: 0.3;
  margin-top: 5px;
  max-height: 50px;
  object-fit: contain;
  pointer-events: none;
}

.footer-link{
  margin-bottom: 0;
  color: black;
}

.footer-link:hover{
  color: #0c0c0c;
}

#footer-ppl{
  color: grey;
}

#footer-ppl:hover{
  color: #0c0c0c;
}

#end-links{
  margin-top: 5vh;
}

/*Carousel CSS for Nate's Bio*/
.carousel-dark:hover{
  background: #0c0c0c;
  opacity: 0.5;
  transition: 0.5s;
}
.figure-caption{margin-top: 10px;}

.carousel-dark{
  transition: 1s;
}

 .img-wrapper{
   width: 100%;
   /* background-image: url("images/main-splash-3.jpg"); */
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }

 @media (max-width: 1000px) {
  .phase-img{
    height: 20px;
  }
}
/*
 .phase1-sticky{
  background-image: url("images/process-images/framework-2.jpg");
 } */
/*
.phase1-facebook{
  background-image: url("images/process-images/Ad\ mockup\ 8.png");
}

.phase2-audience{
  background-image: url("images/process-images/phase1-stickies.png");
}

.phase2-switch{
  background-image: url("images/process-images/advance.png");
}

.phase3-ideation{
  background-image: url("images/process-images/interview.jpg");
}

.phase4-storyboard{
  background-image: url("images/process-images/storyboard\ \(2\).png");
}
.phase4-touchpoint{
  background-image: url("images/biopages/nate/sample_website_touchpoint_2.png");
}
.phase4-finalconcept{
  background-image: url("images/process-images/IMG_3180\ 1\ \(1\).png");
} */

 li{
   padding: .5em;
 }

 .blockquote{
   font-size: 1.1em;

 }

/* Image Focus Element CSS */
#focused-image-wrapper{
 position: fixed;
 height: 100vh;
 width: 100vw;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
 background-color: hsla(360, 0%, 0%, 0.8);
 z-index: 300;
 visibility: hidden;
 transition: visibility 0.1s;
}

#img-focus{
  max-width: 80%;
}


/* Exception class--use this if you do not want
your image to be zoomed-in on click*/
.no-zoom{}

/* End Image Focus Element CSS*/

.phases{
  object-fit: cover;
}

.img-wrapper{
  width: 100%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}






/* Custom Scroll Bar */
/* http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
https://gist.github.com/wookiehangover/811763 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  margin-top: 0;
}

/* Reference for Scroll bar: https://css-tricks.com/css-scrollbar-with-progress-meter/ */
:root {
  --shadow: black;
  --scrollbarBG: #fafafa;
  --thumbBG: black;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 0px 5px black;
}


/* View Port Adjustments  */

@media (max-width: 795px) {
  .nav-container{
    display: none;
    /* eventually change this so that nav bar adjusts to smaller viewport */
  }
  .footer{
    display: none;
  }
}

@media (max-width: 980px) {
    #image-chunk{
      display: none;
    }
}