:root {
 --process-margin: 4px;
 --brand-size: 12vw;
}

#timeline {
 display: flex;
 flex-wrap: wrap;
 /* margin: var(--process-margin); */
}

header {
 margin: 8em auto 6vw auto;
 text-align: center;
}

@media only screen and (max-width: 680px) {
 header {
     margin-bottom: 8em
 }
}

header p {
 margin: auto;
 width: 80%;
 max-width: 520px;
}

.box {
 width: 50%;
 margin-bottom: var(--process-margin);
}

@media only screen and (max-width: 680px) {
 .box {
     display: flex;
     flex-direction: column;
     margin-bottom: 0;
 }
}

.box#a,
.box#c,
.box#d {
 display: flex;
 justify-content: flex-end;
}

@media only screen and (min-width: 681px) {
 .box#a,
 .box#c {
     width: 55%;
 }

 .box#b,
 .box#d {
     width: 45%;
 }
}


@media only screen and (max-width: 680px) {
 .box#a,
 .box#b {
     align-items: flex-end;
 }
}

.box#a { order: 1; }
.box#b { order: 2; }
.box#c { order: 3; }
.box#d { order: 4; }


@media only screen and (max-width: 680px) {
 .box#a { order: 2; }
 .box#b { order: 4; }
 .box#c { order: 1; }
 .box#d { order: 3; }
}

.process {
 position: relative;
 padding: 0.85%;
/*     height: 6vw; */
 height: 4.5vw;
 float: left;
} 

@media only screen and (min-width: 681px) {
 .process:hover {
     background-color: #555 !important;
 }
}

.process h7 {
 position: absolute;
 font-family: 'Montserrat Regular';
 font-size: 1.15vw;
 line-height: 1.15vw;
 letter-spacing: 0.05vw;
 color: #fff;
 font-weight: 800;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.the-buttons {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 3.67167% 0;
border-bottom: 1px solid #343434;
}

.this-button {
text-align: center;
border: solid 1px #343434;
background-color: #333;
/*
display: flex;
align-items: center;
justify-content: center;
*/
}

.timeline { width: calc(50% - 0.5%); }
.next { width: calc(25% - 0.5%); }
.previous { width: calc(25% - 0.5%); }

.this-button p {
 font-family: 'museo-sans', sans-serif !important;
 font-style: normal !important;
 font-weight: 300 !important;
 font-size: 1em !important;
 color: #fff !important;
padding: 1em 0.25em;
text-transform: uppercase;
}

@media only screen and (min-width: 681px) {
.this-button.timeline {
margin: 0 0.75%;
}
.this-button:hover {
background-color: #000;
}	
}    	

@media only screen and (max-width: 680px) {
.previous {
width: calc((100% / 2) - 0.5%);
margin-right: 1%;
order: 1;
}
.next {
width: calc((100% / 2) - 0.5%);
order: 2;
}
.timeline {
width: 100%;
margin: 1% 0 0;
order: 3;
}
}



@media only screen and (max-width: 680px) {
h1 {
 text-align: center !important;
}
}

.head {
margin: 0.65em 0 !important;
}

.head h1 {
font-size: 1.25em;
color: #fff;
line-height: 1.4em;
letter-spacing: 0.094em;
}


h1 {
font-weight: 800 !important;
text-transform: uppercase;
}

h2 {
margin-top: 0 !important;
}

h3 {
font-family: Garamond, serif; 
font-style: italic;
font-size: 1.15em;
font-weight: 100 !important;
color: #fdb713;
text-transform: initial;
}

@media only screen and (min-width: 1280px) {
 .process h7 {
  font-size: 0.9em;
  line-height: 1.1em;
 }
}

@media only screen and (max-width: 680px) {
 .process {
     display: flex;
     justify-content: center;
     align-items: center;

     height: 25vw;
     width: calc(100% - (var(--process-margin) / 2) ) !important;
     margin-bottom: var(--process-margin);
 }

 .process h7 {
     text-align: center;
     font-size: 3.15vw;
     line-height: 3.15vw;
     letter-spacing: 0.05vw;
 }
}

@media only screen and (max-width: 680px) {
.flex-container {
  flex-direction: column;
}
}


#welcome-home {
 width: 100%;
 background-color: #FFB808; 
 margin-bottom: var(--process-margin);
}

#cp {
 width: calc(21%);
 background-color: #FFB808; 
}
#sd {
 width: calc(18% - var(--process-margin)); 
 background-color: #FFB808; 
}
#dd {
 width: calc(30% - var(--process-margin));
 background-color: #25484C; 
}
#cd {
 width: calc(31% - var(--process-margin));
 background-color: #25484C; 
}
#bid {
 width: calc(20% - var(--process-margin));
 background-color: #7D9195; 
}
#ca {
 width: calc(68% - var(--process-margin));
 background-color: #7D9195; 
 float: right; 
}
#intCP {
 width: calc(16% - var(--process-margin));
 background-color: #777; 
}
#intDD,
#intCD,
#intSD {
 width: calc(20.33% - var(--process-margin));
 background-color: #333; 
}
#intFS {
 width: calc(20.33% - var(--process-margin));
 margin-right: calc(47.67%);
 background-color: #AAA; 
}
@media only screen and (min-width: 681px) {
#intFS {
  margin-left: 3em !important;
}
}

@media only screen and (max-width: 680px) {
 #intFS {
     height: 35vw; 
     margin-bottom: calc(70vw - 34vw);
 }
 #intCP {
     height: 20vw; 
 }
 #intCD,
 #intDD,
 #intCD,
 #intSD {
     height: 33vw; 
 }
 #ca {
     height: 70vw; 
 }
 #dd,
 #cd {
     height: 50vw; 
 }
 #bid {
     margin-bottom: 18vw; 
 }
 #c {
     margin-top: auto;
 } 
}

@media only screen and (min-width: 681px) {
 .process:not(#cp) {
     margin-left: var(--process-margin);
 }
}

@media only screen and (max-width: 680px) {
 #what-to-expect.sm-columns-12x1,
 #what-we-need.sm-columns-12x1 {
     padding: 0 !important;
 }
}


.process-home {
margin: 1em 0;
}

.process-home a {
 font-family: 'Montserrat Regular';
 font-size: 1em;
line-height: 1.4em;
letter-spacing: 0.094em;
 color: #fff;
 font-weight: 500;
 text-transform: uppercase;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

@media only screen and (min-width: 681px) {
#example-projects,
#example-projects h1 {
margin-top: 0;
}
}

#example-projects h2 {
font-size: 1em;
color: #fff;
line-height: 1.4em;
letter-spacing: 0.094em;
text-transform: uppercase;
margin: 0 0 0.65em 0;
}


.phil.project {
padding: 0 !important;
}

@media only screen and (max-width: 680px) {
.project:nth-child(odd) {
float: left !important;
margin-left: 0 !important;
clear:both;
}
.project:nth-child(even) {
float: right !important;
margin-right: 0 !important;		
}
.window { display: block; }

.center {
margin-left: 0 !important;
margin-right: 0 !important;
}

.head p {
text-align: center;
}

#example-projects {
padding-top: 0;
}
}


@media only screen and (min-width: 681px) {
#what-we-need,
#what-to-expect {
padding-bottom: 5em !important;
}
}

/* Brand */

.brand {
display: flex;
position: fixed;
border-radius: 50%;

-webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
   -ms-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
       transition: all 0.15s linear;
}

.brand:hover {        
width: calc(var(--brand-size) + 9.5vw);
height: calc(var(--brand-size) + 9.5vw);
border-radius: 30% 100%;
}

#go-process {
display: flex;
text-decoration: none;
transform-origin: center;
margin: auto 1vw 1vw auto;
border-radius: 50%;
}

#go-process span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 0.3vw solid #000;
border-radius: 50%;
background-color: #FFF;
margin-left: -1vw;
color: #000;

font-family: 'Montserrat Regular';
font-size: 1.15vw;
line-height: 1.15vw;
letter-spacing: 0.05vw;
color: #000;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.brand,
#upBrand,
#go-process span {
width: var(--brand-size);
height: var(--brand-size);
transform-origin: top left;
}

.brand:hover,
#upBrand:hover,
#go-process:hover {
animation: expand 1s;
transform: scale(1.2);
}

#upBrand {
position: absolute;
transition: none;
border-radius: 0 0 50%;        

-webkit-animation-name: shimmy;
       animation-name: shimmy;
-webkit-animation-duration: 10s;
       animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
       animation-timing-function: linear;
-webkit-animation-delay: 0s;
       animation-delay: 0s;
}

@keyframes shimmy {
92%  { transform: translate3d(-4px, 0, 0); }
93%  { transform: translate3d( 4px, 0, 0); }
94%  { transform: translate3d(-3px, 0, 0); }
95%  { transform: translate3d( 3px, 0, 0); }
96%  { transform: translate3d(-2px, 0, 0); }
97%  { transform: translate3d( 2px, 0, 0); }
98%  { transform: translate3d(-1px, 0, 0); }
99%  { transform: translate3d( 1px, 0, 0); }
100% { transform: translate3d(   0, 0, 0); }
}

@keyframes expand {
0% { transform: scale(1) }
25% { transform: scale(1.35) }
40% { transform: scale(1.15) }
60% { transform: scale(1.3) }
80% { transform: scale(1.18) }
100% { transform: scale(1.2) }
}

/* Mailchimp Styles */
#mc_embed_signup {
 text-align: center;
 padding: 6vw 0;
}

@media only screen and (max-width: 680px) {
 #mc_embed_signup {
     padding-bottom: 0;
 }
}

#mc_embed_signup #mc_embed_signup_scroll {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

#mc_embed_signup_scroll h2 {
 font-family: 'museo-sans', sans-serif;
 font-style: normal;
 font-size: 1em;
 color: #fff;
 line-height: 1.4em;
 letter-spacing: 0.094em;
 text-transform: uppercase;
 margin: 0.65em 0;
 font-weight: 800 !important;
 text-transform: uppercase;
}
#mc_embed_signup_scroll p {
 margin: 0.65em 0;
}

@media only screen and (min-width: 681px) {
 #mc_embed_signup_scroll p {
     width: 75%;
 }
}

#mc_embed_signup .input-info {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
}

@media only screen and (max-width: 680px) {
 .input-info {
     flex-direction: column;
 }
}

#mc_embed_signup .mc-field-group label {
 font-family: 'museo-sans', sans-serif;
 font-style: normal;
 font-weight: 100;
 color: #b0b0b0;
 font-size: 0.8em;
 line-height: 1.4em;
 letter-spacing: 0.094em;
}

@media only screen and (min-width: 681px) {
 .mc-field-group {
     margin-right: 0.65em
 }
}

@media only screen and (max-width: 680px) {
 .mc-field-group {
     width: 100%;
 }
}

#mc_embed_signup #mce-EMAIL {
 padding: 0.4em;
 font-family: 'museo-sans', sans-serif;
 font-style: normal;
 font-weight: 700;
 font-size: 1em;
 line-height: 1.4em;
 letter-spacing: 0.094em;
 -webkit-font-smoothing: antialiased;
 outline: none;
 border: none;
}

@media only screen and (min-width: 681px) {
 .clear,
 #mce-EMAIL {
     width: 12em;
 }
}

@media only screen and (max-width: 680px) {
 .clear,
 #mce-EMAIL {
     width: 100%;
 }
}

#mc_embed_signup #mce-responses {
 display: none;
}

#mc_embed_signup .button {
 text-align: center;
 border: none;
 background-color: #333;
 font-family: 'museo-sans', sans-serif !important;
 font-style: normal !important;
 font-weight: 300 !important;
 font-size: 1em !important;
 color: #fff !important;
 padding: 0.5em 0.25em;
 text-transform: uppercase;
 width: 100%;
}
@media only screen and (max-width: 680px) {
 #mc_embed_signup .button {
     margin-bottom: 4%;
 }
}