/* 2017 Portfolio Update
This update is to Chrsiopher Utterback's personal design portfolio. The following code is created by him.
The stylesheet is divided into Global Styles, Utility Classes, Specific Pages, and Breakpoints.
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: 1rem;}


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

p{
  width: 90%;
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.65;
  font-size: 16px;
  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;}

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

/*Type Utilities*/
.typeReverse{
  color: white;
}

.typeLight{
  color: #999;
}

.typeQuote{
  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; 
}


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

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

.displayBlock{
    display: block;
}


/*Page Layout*/

.projectContainer{
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

/*Color Segments*/
.backgroundColorPrimary{
  background-color: #555;
}

.textColorPrimary{
  color: #555;
}

.borderColorPrimary{
  border-color: #555;
}

.backgroundColorSecondary{
  background-color: #aaa;
}

.textColorSecondary{
  color: #aaa;
}

.borderColorSecondary{
  border-color: #aaa;
}

.textColorAccent{
    color: #222;
}

/*/////////////////////////////Utility Classes ////////////////////////////////*/
*{
  margin: 0px;
  padding: 0px;
}

.fullWidth{
  width: 100%;
}

.smDivide{
  margin-top: 12px;
}

.medDivide{
  margin-top: 28px;
}

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

.superxlDivide{
 margin-top: 200px;
}


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

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

/* ///////////////// Home Page //////////////*/
*{
  margin: 0px;
  padding: 0px;
}
#homeProjectView{
  width: 100%;
  height: auto;
min-height: 800px;
}

a{
text-decoration: none;
}

#homeHeader{
display: flex;
height: 150px;
}

#homeHeadline{
  padding-left: 20px;
  padding-top: 20px;
  color: #444;
  font-family: 'Domine', serif; 
font-size: 42px;
font-weight: 800;
  text-shadow: 1px 2px rgba(140,140,140,.4);
width: 80%;
}

#monogram{
    height:50px;
    width: 50px;
    padding: 20px;
    fill: #444; 
}


#homeProjectContainer{
  display: flex;
  width: 100%;
  //*max-width: 900px;*//
  min-width: 300px;
  height: auto;
  padding-top: 15vh;
  margin: auto;
  justify-content:space-between;
  flex-wrap: wrap;
}


.homePortfolioFlex{
flex: 0 1 100px;
width: 200px;
height: auto;
padding-top: 15px;
border-top: 0px solid #fff;
transition: border-top .4s ease;
}

.homePortfolioFlex h2{
font-size: 24px;
color: #444;
font-family: 'Karla', sans-serif; 
font-weight: 800;
width: 200px;
height: auto;
text-align: center;
text-shadow: 1px 2px rgba(140,140,140,.4);
}

#homeProjectContainer .homePortfolioFlex h6{
   display: none;
}

/*
#homeRapidfire:hover{
 border-top: 5px solid #E55A58;
}

#homeStrategy:hover{
 border-top: 5px solid #004881;
}

#homeHousecall:hover{
 border-top: 5px solid #26DABD;
}

#homeSales:hover{
 border-top: 5px solid #FF8F12;
} */

#homeProjectHero{
position:absolute;
top: 400;
left: 0;
right: 0;
margin: 0 auto;
width: 900px;
height:509px;
}

#homeContactView{
    width: 90%;
    height: 90vh;
    max-height: 1200px;
    min-height: 700px;
    background-color: #666;
    box-shadow: 0 5px 20px rgba(0,0,0,0.19), 0 -4px 22px rgba(0,0,0,0.23);
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 2;
    padding-top: 40px;
    padding-left: 40px;
    margin: 5%;
    margin-bottom: 2%;
}

#contactSocialContainer{
    width: 500px;
    height: auto;
}

#contactIntro{
    width: inherit;
    height: auto;
    padding: 20px;
    background-color: white;
}

    #contactIntro a{
        color:#03588C;
        text-decoration: underline;
        font-weight: 800;
    }


#homeContactView #contactIntro h1{
    margin-right: 0px;
    margin-left: 20px;
}

#homeContactView #contactIntro h3{
    margin-right: 0px;
    margin-left: 20px;
}

#homeContactView #contactIntro p{
    font-size: 1.1em;
}

.socialIcon{
    margin-top: 24px;
    margin-right: 24px;
    transition: all 0.4s ease-in-out;
    width: 100%;
    background: white;
    padding: 20px 0px 20px 40px;
    display: block;
    color: #333;
}

#contactSocialContainer a:hover .socialIcon{
    box-shadow: 0 18px 26px rgba(0,0,0,0.25), 0 15px 22px rgba(0,0,0,0.4);
    color:#03588C;
}

.meBackground{
    background: url("../assets/contactMeBackground.jpg") no-repeat right;
    background-size: cover;
}

.noDimensions{
    width: 1px;
    height: 1px;
    opacity: 0;
}

#sketchLoad{
    background-image: url("assets/Rapidfire/Rapidfire-HomeHeroViewport.png");
}

#marketLoad{
    background-image: url("/assets/MarketingStrategy/MS-HomeHeroViewport.png");
}

#houseLoad{
    background-image: url("assets/Housecall/HC-HomeHeroViewport.png");
}

#salesLoad{
    background-image: url("assets/SalesPortfolio/Sales-HomeHeroViewport.png");
}

/* Tooltips */

a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #222222;
  background: #FFFFFF;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  box-shadow: 2px 2px 8px #333333;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #FFFFFF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

/* Experimental Homepage Additions */


#tilterContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 100px;
  width: 100%;
  height: auto;
}

#tilterContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 48px;
  width: 90%;
  height: auto; 
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10vh;
    overflow: hidden;
}

#tilterContainer a{
  display: flex;
  flex: 1 1 auto;
}

a:hover .tilter{
  box-shadow: 0 15px 20px rgba(35,32,39,0.6);
}

.tilter{
  display: block;
  flex: 1 1 auto;
    width: 250px;
  margin: 1em;
  color: #fff;
  box-shadow: 0 0px 0px rgba(35,32,39,0.5);
  transition: 1.5s ease-out;
transition-property: box-shadow;
  padding: 20px;
padding-top:30px;
padding-bottom: 30px;
}




.tilter * {
	pointer-events: none;
}

#tilterTrouble{
  background: url('../assets/UILanding/UIDesignTile.png') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}

#tilterRespite{
background: url('../assets/MSFTLanding/MSFTTileTexture.jpg') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}


#tilterAvarice{
background: url('../assets/TmobileLanding/T-MobileTileTexture.jpg') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}

#tilterSanguine{
  background:url('../assets/InteractionLanding/InteractionTile.jpg') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}

.tilterBox{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  height: 26em;
  fill: none;
  border: 0px;
}

.tilterBox h2{
font-family: 'Domine', 'Georgia', serif ;
  display: block;
  position: relative;
  width: 100%;
  top: 170;
  color: #fff;
font-size: 3.0em;
    text-shadow: 1px 1px 2px rgba(30,30,30,0.8);
    max-width: 100%;
}

.tilterBox h6{
  display: block;
  position: relative;
  top: 160;
    text-align: left;
}

/* Tiler Animations */

a:hover h6{
    opacity: 100%;
}

/* About Me drop interaction */

.aboutMeDrop{
    width: 10%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0px 0px 0px rgba(35,32,39,0.0);
    transition: .5s box-shadow ease;
}

.aboutMeDrop:hover{
    box-shadow: 5px 3px 8px rgba(35,32,39,0.4);
}

#aboutArrow{
    width: 40px;
    margin-left: auto;
    margin-right: auto;
    display: block;
} 


/* ///////////// Breakpoints! ///////////// */

@media screen and (max-width: 1450px) and (min-width: 980px) {
}

@media screen and (max-width: 900px) {
    
#homeProjectContainer .homePortfolioFlex{
flex: 0 1 auto;
width: 80%;
height: 200px;
margin-right: auto;
margin-left: auto;
margin-bottom: 48px;
background-color: white;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
padding-top: 0px;
}

#homeProjectContainer .homePortfolioFlex a{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: inherit;
    height: inherit;
    margin-left: auto;
    margin-right: auto;
}
    
#homeProjectContainer .homePortfolioFlex h2{
    flex: 0 1 auto;
    width: 80%;
}

#homeProjectContainer .homePortfolioFlex h6{
    display:inline;
    flex: 0 1 auto;
    width: 80%;
    color: #999;
    font-weight: 400;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
  
 #project-container{
   flex-direction: row;
  }
 
  #homeProjectView{
    height: auto;
  }
    
    #homeHeader{
        height: auto;
    }
    
    #homeProjectHero{
        display: none;
    }
    
    #homeHeader{
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    }
    
    #monogram{
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 0px;
    }
    #homeHeadline{
        width: 100%;
        display: block;
    }
    
    #homeContactView{
        height: auto;
        width: 100%;
        margin: 0px;
        padding-left: 0px;
        padding-right:0px;
        padding-bottom: 48px;
    }
    
    #headlineWrap{
        white-space: nowrap;
    }
    
    
   
    
.meBackground{
    background: #333;
}
    
    #contactSocialContainer{
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    }
    
#contactIntro{
    width: auto;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}
    


    
    
   #homeContactView #contactIntro > h1,h3,p{
        width: 95%;
        margin-right: auto;
        margin-left: 10px;
    }
    
 #contactIntro >h3{
        width: 95%;
        margin-right: auto;
        margin-left: 10px;
    }
    
    #contactIntro > p{
        width: 95%;
        margin-right: auto;
        margin-left: 10px;
    }
    
    .noDimensions{
        display: none;
    }
    
    .aboutMeDrop{
        display: none;
    }
    
    #tilterContainer{
        width:100%;
        margin-top: 24px;
        overflow-x: hidden;
        flex-direction: column;
    }
    
    .tilter{
        flex: 0 1 auto;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .tilterBox{
        width: 80vw;
    }
    
    .tilterBox h2{
        text-align: center;
    }
    
    .tilterBox h6{
        text-align: center;
    }
    
    
#tilterTrouble{
  background: url('../assets/UILanding/UIDesignTile.png') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}

#tilterRespite{
  background: url('../assets/MSFTLanding/MSFTTileTexture.jpg') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}


#tilterAvarice{
background: url('../assets/TmobileLanding/T-MobileTileTexture.jpg') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}

#tilterSanguine{
  background:url('../assets/InteractionLanding/InteractionTile.jpg') no-repeat center center;
 background-size: cover;
    transition: background .5s ease;
}
    
    .socialIcon{
    width: auto;
    margin-right: 0px;
    }
}

/*/////////////////////////// Project Pages ////////////////////////////////*/

/* Project Overview */
.product-overview{
  display: flex;
  width:100%;
max-width: 1200px;
min-height: 700px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: stretch;
  padding-bottom: 0px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25), 0 10px 22px rgba(0,0,0,0.3);
    margin-right: auto;
    margin-left: auto;
    margin-top: 48px;
}

.product-overview .overviewDescription,.overviewImage{
  margin: 0px;
  padding: 0px;
}

.product-overview .overviewDescription{
  flex: 0 0 50%;
  background-color: #fff;
  order: 1;
  height: 85vh;
  min-height: 700px;
}

.product-overview .overviewImage{
  flex: 0 0 50%;
  height: 85vh;
  min-height: 700px;
  order: 2;
}

.projectDescription{
  width: 90%;
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  padding-top: 30%;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.projectDescriptionBackgroundWrap{
    background-color:#333;
    position: relative;
    width:100%;
    height: 85vh;
    min-height: 700px;
    z-index: -10;
    top: 0px;
    left:0px;
    padding-top: 20px;
    background-blend-mode: multiply;

}

.projectDescription h6{
    color: #aaa;
    font-weight: 800;
}

.projectDescription h1{
  flex: 1 1 100%;
  font-weight: 800;
}

.overviewDescription h4{
  font-family:'Karla', sans-serif;
  flex: 1 1 100%;
  font-style: italic;
}

.overviewDescription p{
    padding-top: 10px;
}

.problemSolution{
  flex: 1 1 200px;
}

.problemSolution h3{
  border-left: solid 5px;
border-color: inherit;
  padding-left: 20px;
  margin-left: none;
  font-family: 'Karla', 'Helvetica', sans-serif;
  font-weight: 800;
}

.overviewImage{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;  
}

.projectHeroAspectWrap{
display: none;
}

.projectHeroImage{
    max-width: 500px;
    max-height: 500px;
    width: 100%;
}

.merryHeroImage{
   max-width: 400px; 
    width: 100%;
    height: auto;
}

/* Project Container */

.projectContainer{
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
    padding-top: 48px;
}

.projectContainer h1 ,h2 ,h3 ,h4 {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 850px;
}

.projectContainer p{
  margin-left: auto;
  margin-right: auto;
}

.projectContainer h1{
  text-align: center;
  font-weight: 800;
}


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

.compFlexImage{
  flex: 0 1 60%;
  width: 60%;
display: block;
  order: 1;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.compFlexText{
  flex 0 1 30%;
  width: 30%;
  height: auto;
  order: 2;
}

.projectContainer h4, .compFlexText h4{
    font-family: 'Karla', sans-serif;
    font-weight: 800;
}

.compFlexbox > .compOrderLeft{
    order:1;
}

.compFlexbox > .compOrderRight{
    order: 2;
}

.aspectRatio{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.aspectRatio iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

.projectContainer ul{
width: 90%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.projectContainer ul > li{
list-style: none;
padding-top: 24px;
}

/* CTA and Next Project */

#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 20px 30px rgba(0,0,0,0.3), 0 22px 40px rgba(0,0,0,0.5);
}


.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;
}


.sequenceFlexContainer{
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.sequenceModule{
  flex: 1 1 200px;
  display: flex;
  flex-flow: column nowrap;
}

.sequenceModule img{
    margin-left: auto;
    margin-right: auto;
}

.sequenceModule h3{
  text-align: center;
  font-size: 180%;
  font-family: 'Karla','Helvetica', sans-serif;
  padding-bottom: 15px;
}

.sequenceModule p{
  width: 100%;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Karla","Helvetica", sans-serif;
  font-size: 110%;
  padding-top: 15px;
  padding-bottom: 36px;
}

.image{
  background-color: #555;
  margin-left: auto;
  margin-right: auto;
}


/* ///////////// Catagory Pages //////////
These are larger pages that give overviews of related items. Really simple, CTA to get people to click into it. /////////*/

.catagoryHeroImage{
  height: calc(100vh - 142px);
  min-height: 500px;
  max-height: 800px;
  width: 100%;
 margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;  
}

#MSFTHero{
      background: url('../assets/MSFTLanding/beachBackgroundBlu.jpg') center center no-repeat;
 background-size: cover;
background-attachment:fixed;
}

#TMobileHero{
      background: url('../assets/TmobileLanding/TMobileLanding.jpg') center center no-repeat;
 background-size: cover;
height: 50vh;
}

#UIHero{
      background: url('../assets/UILanding/UIHero.jpg') center center no-repeat;
 background-size: cover;
    background-attachment:fixed;
}

#InteractionHero{
      background: url('../assets/InteractionLanding/InteractionHero.jpg') center center no-repeat;
 background-size: cover;
background-attachment:fixed;
}



#catagoryHeroTitle{
  font-size: 20rem;
    color: white;
  text-align: center;
  padding-top: 0vh;
  color: #aaa;
  mix-blend-mode: hard-light;
    max-width: 800px;
    width: 90%;
    height: auto;
    display: block;
    z-index: 100;
    flex: 0 1 auto;
    opacity: .9;
}

#catagoryNav{
  background-color: white;
  box-shadow: 0px 13px 20px #aaa;
  padding-bottom: 24px;
}

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

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

#catagoryNav.liDivide{
  padding: 0px;
  
}

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

#catagoryNav 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;
}

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

.catagoryFlexText{
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{

}


.catagoryButton{
padding: 15px;
max-width: 150px;
text-align: center;
font-size: 1.3em;
color: white;
font-family: "Domine", serif;
}

.catagoryButtonReverse{
    background-color: white;
    border: 2px solid;
padding: 15px;
max-width: 150px;
text-align: center;
font-size: 1.3em;
color: white;
font-family: "Domine", serif;
}

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

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

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



/*///////////// Project Specific CSS ///////////////////////*/

/*Best Practices*/

#bestPracticesPainpoints{
width: 90%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

#bestPracticesPainpoints li{
list-style: none;
padding-top: 24px;
}

#bestPracticesPainpoints li .fa-li{
    padding-top: 27px;
}

.painpointTitle{
    font-weight:700;
    font-size: 110%;
}

#bestPracticesFormFlex{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%; 
}

#bestPracticesFormFlex img{
flex: 0 0 auto;
margin-bottom: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#marketingPhotoSpread{
    background: url(../assets/Textures/topography.png) repeat #2F5D81;
    background-blend-mode:soft-light;
}

#MSProto{
    max-width: 800px;
    min-width: 300px;
    width: 100%;
    height: auto;
}

#MSProtoInherit{
    width: inherit;
    height: auto;
}


/*Housecall*/ 

.housecallFlex{
display: flex;
justify-content: space-around;
width: 90%;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}

.housecallFlex h4{
    flex: 1 1 300px;
    width: 30%;
    margin-right: 20px;
    margin-left: 20px;
}

.housecallFlex img{
    flex: 0 1 auto;
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
}

#housecallTextureSpread{
    background: url(../assets/Textures/gplaypattern.png) repeat #C387D0;
    background-blend-mode: multiply;
}

/* Sketch Rapidfire */

.sketchCompFlexbox{
  display: flex;
  width: 100%;
  flex-wrap: no-wrap;
  justify-content: space-around;
  align-items: center;
  height: 667px;
padding-top: 10vh;
padding-bottom: 10vh;
}

.sketchCompFlexImage{
  flex: 0 1 auto;
  width: auto;
  order: 1;
}

.sketchCompFlexText{
  flex: 0 1 20%;
  width: 350px;
  height: auto;
align-self: flex-end;
  order: 2;
}

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

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

.sketchCompFlexText .sketchDescription{
    font-size: .8em;
    color: #666;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

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

.sketchCompFlexbox > .sketchCompOrderLeft{
    order:1;
}

.sketchCompFlexbox > .sketchCompOrderRight{
    order: 2;
}

#sketchTextureSpread{
    background: url(../assets/Textures/geometry.png) repeat, linear-gradient(135deg, #F5515F 0%,#A1051D 100%);
    background-blend-mode: multiply;
}

.rapidfireGifContainer{
    box-shadow: 
        inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;
    width: 100%;
    height: 360px;
    overflow: hidden;
    display: flex;
    flex-wrap:nowrap;
    justify-content: center;
    align-content: center;
}

.rapidfireGifContainer img {
    z-index:-1;
    position: relative;
}

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


/* #signupGradient{
background: linear-gradient(to bottom right,#fadf60, #f8af3e);
background-attachment: fixed;
}*/

/* Sales Portfolio */

#salesTextureSpread{
    background: url(../assets/Textures/bright_squares.png) repeat #FB964D;
    background-blend-mode: multiply;
}

.collateralPhoto{
    width: 80%;
    height: auto;
    display: block;
}

.pullquoteContainer{
    position: relative;
    width: 200%;
    height: auto;
    margin-left: -50%;
    margin-right:-50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.55), 0 -3px 14px rgba(0,0,0,0.22);
    z-index: 4;
    z-index: 4;
}

.pullquoteContainer h3{
    padding-top: 3em;
    padding-bottom: 3em;
    width: 40%;
    line-height: 1.3;
}

/* Partner Network */

#partnerTextureSpread{
    background: url(../assets/PartnerNetwork/funky-lines.png) repeat #004CA4;
    background-blend-mode: screen;
}

.partnerPadding{
    padding-top: 20%;
}

.projectContainer .partnerValuePropContainer{
    width: 35%;
    max-width: 600px;
    min-width: 300px;
    height: auto;
    margin: 24px;
    display: inline-block;
}

.partnerValueProp{
    display:flex;
    width: auto;
    align-items: flex-start;
    height: auto;
    font-size: 1.1em;
    font-weight: 400;
}

.valueControl{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
/*/////////////// T-Mo Projects //////////////*/

/* Merry Match */
.gameplayResearch{
    max-width: 1200px;
    min-width: 300px;
    width: 100%;
    height: auto;
}

.gameplayPhoto{
    max-width: 800px;
    width: 100%;
}

.designPhoto{
    max-width: 1200px;
    width: 100%;
}

.photoContainerInherit{
    width: inherit;
    height: auto;
}

#merryTextureSpread{
    background: url(../assets/Textures/wet_snow.png) repeat #004CA4;
    background-blend-mode: hard-light;
}

/*///////////// Breakpoints - Project Portfolio ////////////////*/

@media screen and (max-width: 1200px) {
   
    .projectDescriptionBackgroundWrap{
        padding-top: 0px;
        height: auto;
    }
    
    .product-overview{
        margin-top: 0px;
        height: auto;
        max-height: 4000px;
        box-shadow: 0px;
        padding-bottom: 0px; 
}
    

}
@media screen and (max-width: 900px) {
    
/*Project Pages*/
  .projectContainer{
    width: calc(100% - 30px);
    margin-left: auto;
  margin-right: auto;
  }
  .product-overview{
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
    width: 100%;
    box-shadow: 0px 0px;
  }

  .product-overview .overviewDescription{
  flex: 1 1 auto;
  background-color: #fff;
  order: 2;
  height: auto;
  width: 100%;
  box-shadow: inset 0 0 0px #fff;
}

.product-overview .overviewImage{
  flex: 0 1 100%;
  width: 100%;
  height: 300px;
  max-height: 300px;
  min-height: 0px;
  order: 1;
}
  .projectDescription{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
padding-top: 48px;
}
  .problemSolution{
    flex: 1 1 280px;
  }

    .projectDescription h6{
        margin-left: 0px;
        margin-right: 0px;
        width: 90%
    }
    
  p{
  width: 80%;
  }


  .compFlexbox{
  flex-wrap: wrap;
  flex-direction: column;
}

.compFlexImage{
  width: 90%;
height: auto;
  order: 2;
}

.compFlexText{
  flex: 1 1 auto;
  width: 90%;
  height: auto;
  order: 1;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;
}
.compFlexText p{
  width: 90%;
}
    
.compFlexbox > .compOrderLeft{
    order:2;
    margin-top: 24px;
}

.compFlexbox > .compOrderRight{
    order: 1;
}

.pullquote{
width: 80%;
}
    
#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,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;
}
    

/* Marketing Strategy */
    
    #bestPracticesPainpoints{
        width:65%;
    }

    #bestPracticesFormFlex img{
       max-width:100%;
    flex: 1 0 auto;
        height: auto;
        
    }
/* Housecall */

.demographicFlex{
width: 90%;
}
    
.demographicFlex h4{
    flex: 1 1 300px;
    width: 90%;
}
    
    .housecallFlex img{
        width: 100%;
        display: block;
        height: auto;
    }

/* Sketch Rapidfire */
    
.sketchCompFlexbox{
  flex-wrap: wrap;
  flex-direction: column;
height: auto;
padding-top: 10vh;
padding-bottom: 10vh;
}

.sketchCompFlexImage{
  flex: 0 1 auto;
  width: 90%;
  order: 1;
margin-left: auto;
margin-right: auto;
max-width: 400px;
}

.sketchCompFlexText{
 flex: 0 1 auto;
 max-width: 300px;
width: auto;
 height: auto;
 order: 2;
 margin-left: auto;
 margin-right: auto;
 margin-top: 22px;
}

.sketchCompFlexText h4{
margin-left: 0px;
margin-right: 0px;
text-align: center;
width: auto;
}

.projectContainer .sketchCompFlexText p{
margin-left: 0px;
margin-right: 0px;
    padding-left: 20px;
    padding-right: 20px;
text-align: center;
width: auto;
font-size: .9em;
}
    .sketchCompFlexbox > .sketchCompOrderLeft{
    order:2;
}

.sketchCompFlexbox > .sketchCompOrderRight{
    order: 1;
}
    
.rapidfireGifContainer{
    display: none;
}

.rapidfireGifContainer img {
    z-index:0;
    position: relative;
}
    
/*Sales Portfolio*/

    .pullquoteContainer h3{
    padding-top: 3em;
    padding-bottom: 3em;
    width: 50%;
    font-size: 110%;
}
    
    .sequenceModule img{
        width: 90%;
        height: auto;
    } 
    
.sketchCompFlexbox{
  flex-wrap: wrap;
  flex-direction: column;
height: auto;
padding-top: 5vh;
padding-bottom: 5vh;
}
    
/* Partner Network */
    
    .compFlexbox .imageMobile{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
/*Merry Match */
    
.merryHeroImage{
   max-width: 250px; 
    width: 100%;
    height: auto;
}

/* Catagory Pages */

#catagoryNav{
display: none;
}
    

    
 .catagoryFlexText h4, .catagoryFlexText p{
    text-align: center;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
     width: 100%;
 }
    
.catagoryFlexText h4{
 margin-top: 36px;
 }
    
.catagoryHeroImage{
    min-height: 450px;
    height: 80vw;
}


.superxlDivide{
margin-top: 80px;
}
    
.catagoryButton, .catagoryButtonReverse{
    margin-left: auto;
    margin-right: auto;
}
    


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

#JumpOne .sketchCompFlexImage,#JumpTwo .sketchCompFlexImage,#JumpThree .sketchCompFlexImage{ 
background-color: none;
width: 100%;
margin-right: auto;
margin-left: auto;
}
    
#penFix{
    margin-right: 0px;
}
}