/* 2020 Portfolio Update
This update is to Chrsiopher Utterback's personal design portfolio. The following code is created by him.
Some style is enmbedded in the specific page headers, like project specific colors, as a way to make overrides easier.
If you have any questions, feel free to email me. */

/*/////////////////////////////Global Styling ////////////////////////////////*/

/*Type Styling*/

html {font-size: 16px;}

@media (max-width: 900px) {
  html { font-size: 16px; }
}
@media (max-width: 500px) {
  html { font-size: 15px; }
}


body {
  font-family: 'Karla', 'Helvetica', sans-serif;
  font-weight: 400;
  line-height: 1.61;
  color: #333;
overflow-x: hidden;
}

p{
  line-height: 1.65;
  font-size: 1rem;
  font-family: 'Karla', sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Domine', serif;
  font-weight: 400;
  line-height: 1.2;
}

h1 {
  font-size: 3.157rem;
}

h2 {font-size: 2.369rem;}

h3 {font-size: 1.777rem;}

h4 {font-size: 1.414rem;}

h5 {font-size: 1.15rem;
    font-family: 'Karla', sans-serif;
}

small, .fontSmall {font-size: 0.9rem;}

a{
    text-decoration: none;
}

/*///////////////// Browser Default Overrides ////////////////////*/

body button{
    background-color: white;
    font-weight: inherit;
    border-width: 0px; 
}

/*/////////////////////////Type Utilities////////////////////////*/

.typeReverse{
  color: white;
}

.typeLight{
  color: #999;
}

.typeMidGrey{
    color: #666;
}

.typeItalic{
  font-style: italic;
}

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

.typeCentered{
    text-align: center;
}

.typeMoreLineHeight{
    line-height: 1.5;
}

.typeWeightRegular{
    font-weight: 400 !important;
}

.typeWeightLight{
    font-weight:200 !important;
}

.typeWeightBold{
    font-weight:800 !important;
}

.typeNoDecoration{
    text-decoration: none;
}

.typeAllCaps{
   text-transform: uppercase; 
}

.typeShadow{
    text-shadow: 1px 1px 2px #666;
}

.typeEmphasis{
    font-size: 1.2em;
    font-weight: 600;
}

.typeBalanced{

}

.copyBlock{
width: 70%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}



.pullquote{
font-weight: 800;
text-align: center;
font-family: 'Domine', 'Georgia', serif !important;
}

.caption{
    font-size: .9rem;
    text-align: left;
    width: auto;
}

/*Type Utility Breakpoints*/

@media (max-width: 900px) {
  .caption { 
    width: 90%;
    }
    .copyBlock{
    width: 90%;
    }
    h1,h2,h3, h4{
    max-width: 90vw;
    }
    
    h1 {
  font-size: 2.8rem;
}
    
    h1.typeCentered ,h2.typeCentered ,h3.typeCentered {
    margin-right:auto;
    margin-left: auto;
    }
    
    
}

@media (max-width: 500px) {

}

/*///////////////////////  Color Utilities /////////////////////////*/

.backgroundColorPrimary{
  background-color: #555;
}

.textColorPrimary{
  color: #555;
}

.borderColorPrimary{
  border-color: #555;
}

.backgroundColorSecondary{
  background-color: #aaa;
}

.textColorSecondary{
  color: #aaa;
}

.borderColorSecondary{
  border-color: #aaa;
}

.textColorLight{
  color: #999;
}

.textColorGray{
 color: #666;
}


.textColorAccent{
    color: #222;
}

.textColorNegative{
   color:  #DB4649;
}


/*//////////////////////////////// Layout Utilities //////////////////////////// */

*{
    padding: 0px;
    margin: 0px;
}

.projectContainer{
  width: 100%;
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
position: relative;
z-index: 5;
background-color: white;
}

.objectCenter{
margin-left: auto;
margin-right: auto;
}

.objectCenterImportant{
margin-left: auto !important;
margin-right: auto !important; 
}

.displayBlock{
    display: block;
}


.fullWidth{
  width: 100%;
}

.constrainedWidth{
max-width: 100%;
}

.halfWidth{
    width: 50%;
}

.seventyWidth{
    width: 70%;
}

.partialWidth{
    width: 80%;
}

.smDivide{
  margin-top: 12px;
}

.medDivide{
  margin-top: 28px;
}

.lgDivide{
  margin-top: 64px;
    
}
.xlDivide{
 margin-top: 120px;
}

.xxlDivide{
 margin-top: 200px;
}

.smDivideBottom{
 margin-bottom: 12px;
}

.medDivideBottom{
  margin-bottom: 28px;
}

.lgDivideBottom{
  margin-bottom: 64px;
    
}

.medPadding{
padding-top: 28px;
}

.boxShadow{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.raisedContainer{
    position: relative;
    width: 100vw;
    height: auto;
    /*margin-left: -50%;
    margin-right:-50%;*/
    z-index: 10;
    padding-top: 24px;
}

/*Layout Utility Breakpoints*/

@media (max-width: 900px) {
  .projectContainer{ 
    width: calc(100vw - 48px);
    margin-right: 24px;
    margin-left: 24px;
    }
    
    .mobileLgDivide{
     margin-top: 64px;
    }
    
    body{
    overflow-x: hidden;
    }

}

@media (max-width: 500px) {
.projectContainer{
    width: calc(100vw - 24px);
    margin-right: 12px;
    margin-left: 12px;
    }

    .partialWidth{
    width: 100%;
    }
    
}



/*////<><><><><><><><><><><><><> Page Components <><><><><><><><><><><><><>////*/


/*///////////////////////////// Header Components///////////////////////////////*/

.buttonBackHome{
    display: flex;
    align-items: center;
    align-content: center;
    position: absolute;
    left: 10vw;
    top: 30;
    width: 10vw;
    min-width: 200px;
}

.buttonBackHome i{
    margin-right: 24px;
}

.projectHero{
    height: calc(95vh - 142px);
    min-height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
}


.projectHeroTitle{
    position:relative;
    top: 20vh;
    left:10vw;
    width: 40%;
    max-width:500px;
    height: auto;
    padding: 40px;
    z-index: 5;
}

.projectHeroTitle h1{
    font-size: 4.2rem;
    font-weight: 800;
}

.projectHeroTitle h6{
    font-size: 1rem;
    font-family: 'Karla', 'Helvetica', sans-serif;
}

.projectHeroTitle p{
    font-size: .9rem;
}

.heroTitleCard{
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    left:0;
    z-index: -1;
    backdrop-filter: blur(100px);
     -webkit-backdrop-filter: blur(100px);
    opacity: .85;
    
    
}

#projectHeroComp{
    position: absolute;
    left: 50vw;
    top: 5vh;
    color: white;
  text-align: center;
  padding-top: 0vh;
  color: #aaa;
    max-width: 900px;
    width: 90%;
    height: auto;
    display: block;
}

/*Header Breakpoints*/

@media (max-width: 900px) {
  #projectHeroComp{  
    left: 5vw;
    top: 40vh;
    width: 80%;
}
    
    .projectHeroTitle h6{
    padding-left: 8px;
    }
.projectHeroTitle h1{
    font-size: 3.5rem;
padding: 0px 8px 0px 8px
}

    .projectHeroTitle p{
        padding: 0px 8px 0px 8px
    }
.projectHeroTitle{
    width: 90%;
        top:1vh;
    left: auto;
    right: auto;
    margin: 0 auto;
    padding: 10px;
}

    .buttonBackHome{
        display: none;
    }
}

@media (max-width: 900px) {
      #projectHeroComp{  
    top: 60vh;
    width: 90%;
}
}

/*/////////////////////////// Navigation Components///////////////////////////*/

#navIntro{
    padding-top: 24px;
}

#projectNav{
  background-color: white;
  box-shadow: 0px 13px 20px #aaa;
  padding-bottom: 16px;
position: relative;
    z-index: 100;
}

#projectNav ul{
  display: flex;
  width: 90%;
  max-width: 1200px;
  list-style-type: none;
  justify-content: center;
}

#projectNav li{
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  text-align: center;
  font-family: "Karla", sans-serif;
  text-transform: uppercase;
  font-size: 1.2em;
}

#projectNav.liDivide{
  padding: 0px;
  
}

.sticky {
  position: fixed !important;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

#projectNav a{
   -webkit-transition-property: border;
  transition-property: border;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

#JumpOne,#JumpTwo,#JumpThree{ 
padding-top: 80px;
}

/*#JumpOne .imageCompFlexImage,#JumpTwo .imageCompFlexImage,#JumpThree .sketchCompFlexImage{ 
max-width: 800px;
} */



#penFix{
    max-width: 600px !important;
    margin-right: 60px;
}

#ctaButtonContainer{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height:auto;
padding-top: 48px;
}

#ctaButtonContainer a{
flex: 0 1 280px;
max-width: 280px;
height: 80px;
margin-bottom: 48px;
text-decoration: none;
}

.projectButton{
    width: inherit;
    height: inherit;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    transition: box-shadow 0.4s ease-in-out
}

#ctaButtonContainer a:hover .projectButton{
    box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 11px 20px rgba(0,0,0,0.3);
}


.projectButton h6{
    color: #999;
    text-align: inherit;
    width: 100%;
}

.projectButton h4{
    margin-left: 0px;
    margin-right: 0px;
    text-align: inherit;
    width: 100%;
}

.Previous{
    text-align: right;
    padding-right: 20px;
}

.Next{
    text-align: left;
    padding-left: 20px;
}

.homeButton{
    text-align: center;
}

/*Navigation Breakpoints*/

@media (max-width: 900px) {

    #projectNav{
        display: none;
    }  
    .projectHero{
        height: 95vh;
    }
    
    #ctaButtonContainer{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: auto;
padding-top: 48px;
}

#ctaButtonContainer a{
flex: 1 1 auto;
width: 100%;
max-width: 250px;
height: 100px;
text-decoration: none;
    margin-left: auto;
    margin-right: auto;
}

    .projectButton{
    margin-left: auto;
    margin-right: auto;  
    }

.Previous h4{
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

    .Previous{
        text-align: center;
        padding: 0px;
    }
    
    .Next{
        text-align: center;
        padding: 0px;
    }

    .Next h4, .Next h6{
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    }
    
    .projectButton h6{
    width: 150px;
    margin-left: auto;
    margin-right: auto; 
    }

.homeButton{
    text-align: center;
    padding: 0px;
}
}

/*////////////////////// Content Grouping Components ///////////////////////////*/


.roleHighlightModule{
   display: flex;
   height: auto;
    width: auto;
    justify-content: flex-start;
    align-items: center;  
}

.roleHighlightIcon object{
 width: 100px;
height: 100px;
}
.roleHighlightText{
    align-self: center;
}

.projectContainer .iconListContainer{
    width: 45%;
    min-width: 300px;
    height: auto;
    display: inline-block;
    margin: 0 auto;
}


.projectContainer .iconListContainer .iconListSubhead{
    margin-left: -28px;
    font-weight: 600;
    
}

.iconListItem{
    display:flex;
    width: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    height: auto;
    font-size: 1.1em;
    font-weight: 200;
    margin-bottom: 16px;
}

.iconListItem i{
    padding-top: 5px;
}

.iconListControl{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.iconListControl h5{
    font-weight: 400;
}

/* Flex Balanced List*/

.projectContainer .balancedListSingleLine{
    width: 60%;
    display: block;
    margin: 0 auto;
}

.balancedListItem{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
}

.balancedListItem .balancedListLeft{
    width: 10%;
    margin-right: 12px;
    text-align: right;
}

.balancedListItem .balancedListRight{
    width: 80%;
    text-align: left;
}

/* Horizontal Slider Component*/

.sliderContainer{
  width: 100%;
margin: 0 auto;
  padding-top: 40px;
}

.sliderContainer h3{
  text-align: center;
  width: inherit;
}

.sliderIconContainer{
  display: grid;
  min-height: 150px;
  max-height: 300px;
  width: 100%;
  grid-template-columns: 40px repeat(4, [Icon Start] 1fr 12px) 40px;
  grid-template-rows: 50px 1fr 16px 24px;
}

#icon1{
  grid-area: 2 / 2 / span 1 / span 1;
}

#icon2{
  grid-area: 2 / 4 / span 1 / span 1;
}

#icon3{
  grid-area: 2 / 6 / span 1 / span 1;
}

#icon4{
  grid-area: 2 / 8 / span 1 / span 1;
}

.sliderIcon{
  display: flex;
  flex-direction: column;
  max-width: 180px;
min-width: 100px;
  justify-content: center;
  align-items: center;
  place-self: center;
  text-decoration: none;
    width: 15vw;
    background-color: white;
    border-radius: 2px;
    transition: all .5s ease;
}

.sliderIcon:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transform:translate(1px,2px)
}

.sliderIcon img{
  width: 64px;
height:auto;
}

.sliderIcon img.lgImage{
  width: 100px;
height:auto;
}

.sliderIcon h5{
    padding-bottom: 8px;
}



.arrowUp {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-bottom: 30px solid #00a2ed;
}

#arrowPosition{
  grid-area: 4 / 2 / span 1 / span 1;
  justify-self: center;
  transition: grid-area .8s ease;
}

.sliderDescription{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #eee;
  border-top: 15px solid #00a2ed;
}

.sliderDescription .carouselContent{
  position: absolute;
  transition: opacity 0.8s ease;
padding-top: 5vh;
}

.SliderDescription .imageCompFlexImage{
}

.SliderDescription .imageCompFlexText h5{
    font-family: 'Karla', sans-serif;
    font-weight: 800;
    margin-left: 0px;
}

.SliderDescription .imageCompFlexText p{
    font-family: 'Karla', sans-serif;
    margin-left: 0px;
}



.sliderDescription .descriptionHidden{
  opacity: 0;
}

.sliderDescription .visibilityHidden{
opacity: 0;
position: relative;
}


/*Content Grouping Breakpoints*/

@media (max-width: 900px) {
.projectContainer .iconListContainer{
    width: 90%;
    }

.projectContainer .balancedListSingleLine{
    width: 80%;
}
.balancedListItem{
    flex-direction: column;
}
    
.balancedListItem .balancedListLeft{
    width: 10%;
    margin-right: 0px;
    text-align: left;
}

.balancedListItem .balancedListRight{
    width: 100%;
    text-align: left;
}
}
@media (max-width: 650px) {
    .sliderIconContainer{
    display: none;
    }
   .sliderDescription .descriptionHidden{
    opacity: 1;
    }
.sliderDescription .carouselContent{
  position: relative;
}
    .sliderDescription{
        background-color: #fff;
        border-top: 0px;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .sliderDescription .visibilityHidden{
        display: none;
    }
}
/*//////////////////////////// Image Components ///////////////////////////////*/

/* Utility classes for fading in images on load. Add 'fade' to an element to use */

.fade{
    opacity: 0;
    transform: translate(0,0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

body .fadeIn{
  transition: opacity .3s ease;
  opacity: 1;
}




/* Role Icon Container, sometimes used for non-role icon blocks*/
.roleIconContainer{
   display: flex;
    width: 100%;
    height:auto;
    flex-direction: row;
    flex: 1 1 150px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.roleIconContainer .roleIcon{
    margin: 16px;
    min-width: 150px;
    width: 12%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.roleIconContainer .roleIcon object{
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.roleIconContainer .roleIcon h5{
    width: 100%;
    text-align: center;
}


.projectContainer .roleIconTighten{
 justify-content: space-evenly;
}

.projectContainer .roleIconCentered{
 justify-content: center;
}


.fullImage{
    width:100%;
    height: auto;
}

.fullImage img{
    margin:0 auto;
    display: block;
    width: inherit;
}

.ninetyWidthImage{
    width: 90%;
    height: auto;
}

.ninetyWidthImage img{
    margin:0 auto;
    display: block;
}

.partialWidthImage{
    width: 80%;
    height: auto;
}

.partialWidthImage img{
    margin:0 auto;
    display: block;
    width: 100%;
}

.noMarginContainer{
    position: relative;
    height: auto;
    min-height: 800px;
    overflow: hidden;
}

.imageNoMargin{
    height:auto;
    min-height: 800px;
    max-width:1920px;
    min-width: 800px;
    background-size: cover;
    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%) }
}



.imageFlexbox{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  height: auto;
}

.imageFlexText{
flex: 0 1 50%;
height: auto;
align-self: center;
order: 2;
margin-bottom: 40px;
}

.catagoryFlexText h4, .catagoryFlexText p{
margin-right: 0px;
margin-left: 0px;
}

.catagoryFlexText h4{
font-size: 2em;
text-transform: uppercase;
margin-bottom: 12px;
}


.catagoryFlexText p{

}

/*/// Image Comp - for responsive text chunks next to photos ///*/

.imageCompFlexbox{
  display: flex;
  width: 100%;
  flex-wrap: no-wrap;
    flex-direction: row;
  justify-content: space-around;
  align-items: center;
padding-bottom: 5vh;
position: relative;
}
body .noPaddingFlexbox{
    margin-bottom: -5.5vh;
}

.imageCompFlexImage{
  flex: 0 1 auto;
  width: 50%;
  order: 1;
}

.imageCompFlexImage.smallerImageComp{
    width: 35%;
}

.imageCompFlexText{
  flex: 0 1 20%;
  min-width: 350px;
  height: auto;
  order: 2;
}

.imageCompFlexText.biggerFlexText{
  flex: 0 1 40%;
  min-width: 350px;
  height: auto;
  order: 2;
}


.projectContainer .imageCompFlexText h4{
    font-family: 'Karla', sans-serif;
    font-weight: 800;
    margin-left: 0px;
}

.projectContainer .imageCompFlexText p{
    font-family: 'Karla', sans-serif;
    margin-left: 0px;
}

.imageCompFlexText .imageDescription{
    font-size: 1rem;
    color: #666;
    margin-left: auto;
    margin-right: auto;
}

.imageCompShadow{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.leftFloat{
    margin-left:-20vw;
    width:90%;
    height:auto;
}


.imageCompReverse > .imageCompFlexImage{
    order:2;
}

.imageCompReverse > .imageCompFlexText{
    order: 1;
}

/*/// Image Split - balance two photos of equal size ///*/

.projectContainer .imageSplitFlexbox{
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 100%;
}

.imageSplitFlexbox .ImageSplitFlexImage{
    flex: 0 1 45%;
    width: 50%;
    height: auto;
    
}


/*Image Breakpoints*/

@media (max-width: 900px) {
    .fullImage img{
        width: calc(100vw - 48px);
        }
    
.partialWidthImage{
        width: calc(100vw - 24px);
 }

        .imageCompFlexbox{
        flex-direction: column;
        }
    

    .imageCompReverse > .imageCompFlexImage{
        order:1;
    }

    .imageCompReverse > .imageCompFlexText{
        order: 2;
    }
    .noPaddingFlexbox > .imageCompFlexText{
        order: 1 !important;
    }
    .noPaddingFlexbox > .imageCompFlexImage{
        order: 2 !important;
        width: 90%;
    }
    .imageCompFlexImage{
      flex: 0 1 auto;
      width: 90%;
      order: 1;
    }
    
    .imageCompFlexImage.smallerImageComp{
        width: 90%
    }

    .imageCompFlexText{
      flex: 0 1 80%;
      width: 80%;
      height: auto;
      order: 2;
    }
    .imageCompFlexText .imageDescription{
    width: 100%;
    }
    
    .projectContainer .imageCompFlexText p{
    margin-left: auto;
}
        .projectContainer .imageSplitFlexbox{
        flex-direction: column;
    }
    
    .imageSplitFlexbox .ImageSplitFlexImage{
    flex: 0 1 auto;
    width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

}

@media (max-width: 500px) {
    
.projectContainer .iconColumnResponsive{
   flex-wrap: nowrap;
flex-direction: column;
align-items: center;
}
    
.fullImage img{
    width: calc(100vw - 24px);
    }
    
.imageSplitFlexbox .ImageSplitFlexImage{
    flex: 0 1 auto;
    width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto;
    }


}