/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*--------------------- PARALLAX -----------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}

/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
    width:100%;
}
.fullscreen,
.content-a {
    width:100%;
    min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
    height:100%;
    overflow:hidden;
}

/* content centering styles */
.content-a {
	display:table;
    max-width: 1600px;
    margin:0 auto;
}
.content-b {
	display:table-cell;
    position:relative;
	vertical-align:middle;
	text-align:center;
    max-width: 1600px;
    margin:0 auto;
}
body{
    margin:0;
	color:#ffffff;
  line-height: 1.25;
}
.not-fullscreen {
    height:50%;
}
   
/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*---------------------- GLOBAL ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

body, h1, h2, h3, h4, h5, h6, p, a, span, input {
    font-family: "Roboto", helvetica, sans-serif;
}
h1 {
  font-size: 34px;
  padding:0;
  margin:0;
}

input[type=checkbox]+label {
  margin-right: 0;
}

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

section.red {background:#a52931;}
section.grey {background:#222222;}
section.white {background:white;}

span.red {color:#a52931;}
span.white {color:white;}
span.grey {color:#222222;}
span.bold {text-transform: uppercase;font-weight: bold;}

.show-for-small-only {
  display: none;
}
.hide-for-small-only {
  display:block;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*---------------------- HEADER ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

img.mainLogo {
    width:50%;
    text-align: left;
    padding:20px;
    margin-left:1%;
}
.tagline {
    padding-top: 200px;
    display:block;
    max-width: 100%;
    margin-left: 26%;
}
.tag {
    display: block;
    margin:0;
    padding:0;
    font-size: 58px;
    color:#222222;
}
.plus {
    font-size: 42px;
    display: block;
    margin:0;
    padding:0;
    margin-left: 50px;
    color:#a52931;
}


/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*----------------------- MENU -------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

.navigation {
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  padding-top:10px;
  list-style: none;
  background: white;
  padding:0;
  margin:0;
}
.navigation img {
    padding:10px;
    width:70%;
    display:block;
    margin:0 auto;
}
.nav-item {
  width: 250px;
}
.nav-item a {
  display: block;
  padding: 30px 10px;
  background: white;
  color: #a52931;
  text-align: center;
  font-size: 1.3em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
  background: #a52931;
  color:white;
}
.site-wrap {
  height:100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  background-color: white;
  position: relative;
  top: 0;
  bottom: 100%;
  right: 0;
  z-index: 1;
}
.nav-trigger {
  position: fixed;
  clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
  position: fixed;
  right: 45px; top: 45px;
  z-index: 2;
  height:70px;
  width: 70px;
  cursor: pointer;
  background-image: url("menuCircle.png");
  background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: right 0.2s;
}
.nav-trigger:checked + label {
  right: 250px;
}
.nav-trigger:checked ~ .site-wrap {
  right: 250px;
}
body {
  overflow-x: hidden;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*----------------------- ABOUT ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#about {
    text-align: left;
    width:50%;
    max-width: 1600px;
    display: block;
    margin:0 auto;
    padding:120px 0;
    font-size: 18px;
}
h1.aboutTitle {
    margin-bottom: 50px;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*--------------------- SERVICES -----------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#services {
    display:block;
    width:96%;
    max-width: 1600px;
    margin:0 auto;
    padding:120px 0;
}
h1.servicesTitle {
    text-align: center;
    margin-bottom: 50px;
}
.serviceItem {
    display:inline-block;
    vertical-align: top;
    width:33%;
    margin-right: -4px;
}
.serviceItem img {
    display: block;
    width:50%;
    margin: 0 auto;
}
h1.serviceItemTitle {
    text-align: center;
    padding:10px 0;
}
.serviceItem li {
    color:white;
    padding-bottom:10px;
}
.serviceItem ul {
  padding:0 30px;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*--------------------- APPROACH -----------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#approach {
    display:block;
    width:60%;
    max-width: 1600px;
    margin:0 auto;
    padding:120px 0;
    font-size: 18px;
    color:white;
}
h1.approachTitle {
    margin-bottom: 50px;
    color:white;
}
img.infograph {
  display: block;
  margin: 50px auto;
  width:70%;
}


/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*----------------------- VALUES -----------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#values {
    width:60%;
    max-width: 1600px;
    display: block;
    margin:0 auto;
    padding:120px 0;
    padding-bottom: 50px;
    font-size: 18px;
    color:#222222;
    text-align: center;
}
h1.valuesTitle {
    text-align: center;
    margin-bottom: 70px;
    color:#a52931;
}
.valueBox {
    padding-top:10px;
    padding-bottom:70px;
    border-top:2px dashed grey;
}
.valueBox:last-child {
    padding-bottom:0;
}
.left, .right {
    display:inline-block;
    margin-right:-4px;
    vertical-align: top;
}
.left {
    width:30%;
    text-transform: uppercase;
}
.right {
    width:69%;
}
h2.valueTitle {
    padding:0;
    margin:0 20px;
    font-size: 26px;
    color:#a52931;
}
p.valueBlurb {
    padding:0;
    margin:0;
}
.addDiagonal:after {
  content:"";
  position:absolute;
  left:0;
  border-top:23px solid #a52931;
  width:100.5%;
  transform: rotate(5deg);
  transform-origin: 0% 0%;  
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*----------------------- STAFF ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#staff {
    color:black;
    text-align: left;
    width:60%;
    max-width: 1600px;
    display: block;
    margin:0 auto;
    padding:120px 0;
    padding-top: 180px;
    font-size: 18px;
}
.staffLeft, .staffRight {
  display:inline-block;
  margin-right: -4px;
  width:49%;
  vertical-align: middle;
  padding:20px;
}
img.staffImg {
  border-radius:50%;
  text-align: center;
  width: 50%;
  display:block;
  margin:0 auto;
}
h2.staffName {
  padding:0;
  margin:0;
  color:#a52931;
}
h3.staffTitle {
  padding:5px 0;
  margin:0;
  color:#555555;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*---------------------- CLIENTS -----------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#clients {
    display:block;
    width:60%;
    max-width: 1600px;
    margin:0 auto;
    padding:120px 0;
    font-size: 18px;
}
h1.clientsTitle {
    margin-bottom: 50px;
    color:#a52931;
    text-align: center;
}
.clientLogos {
  display: block;
  margin: 0 auto;
  width:100%;
}
.logoRow {
  padding-top:30px;
}
.logoBox {
  display: inline-block;
  width:33%;
  margin-right: -4px;
  text-align: center;
  padding:30px;
}
.logoBox img {
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: grayscale(100%);
}
.logoBox img.reduce {
  width:85%;
}
.mobileLogoBox {
  display: inline-block;
  width:50%;
  margin-right: -6px;
  text-align: center;
  padding:10px;  
}
.mobileLogoBox img {
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: grayscale(100%);
}
.mobileLogoBox img.reduce {
  width:85%;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*---------------------- CONTACT -----------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#contact {
    display:block;
    width:60%;
    max-width: 1600px;
    margin:0 auto;
    padding:0;
    padding:120px;
    font-size: 18px;
}
h1.contactTitle {
    margin-bottom: 50px;
    color:white;
    text-align: center;
}
.contactLeft, .contactRight {
  display: inline-block;
  margin-right:-4px;
  width:49%;
  vertical-align: top;
}
form label {
  color:white;
  font-size: 1em;
}
form p {
  color:#c60f13;
}
form .form-error {
  font-size: .8em;
}
form textarea {
  height:200px;
}
form input[type="text"], form input[type="email"] {
  height:45px;
}
form input[type="submit"] {
  display: block;
  text-align: center;
  color:white;
  background-color: #222222;
  border:2px solid white;
  padding:20px 50px;
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -ms-transition:all .3s ease;
  -o-transition:all .3s ease;
  transition:all .3s ease;
}
form input[type="submit"]:hover {
  background-color: #a52931;
  color:white;
  border:2px solid white;
  padding:20px 80px;
} 
.snapwidget-widget {
  border:none;
  display: block;
  margin:0 auto;
  margin-top:10px;
  overflow:hidden;
  width:90%;
  height:150px;
}
a.phoneNumber {
  display: block;
  text-align: center;
  margin-top: 60px;
  color:white;
  font-size: 2.5em;
  text-decoration: none;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -ms-transition:all .2s ease;
  -o-transition:all .2s ease;
  transition:all .2s ease;
}
a.emailAdd {
  display: block;
  text-align: center;
  margin-top: 60px;
  color:white;
  font-size: 1.75em;
  text-decoration: none;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -ms-transition:all .2s ease;
  -o-transition:all .2s ease;
  transition:all .2s ease;
}
a.phoneNumber:hover, a.emailAdd:hover {
  opacity: .4;
}
.socialIcons {
  text-align: center;
  display: block;
  width:100%;
  margin:0 auto;
  padding:60px 0;
}
.socialIcons a {
  margin:0 3px;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -ms-transition:all .2s ease;
  -o-transition:all .2s ease;
  transition:all .2s ease;
}
.socialIcons a:hover {
  opacity:.7;
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*----------------------- FORM -------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#formAction {
    display:block;
    width:60%;
    max-width: 1600px;
    margin:0 auto;
    padding:120px 0;
    font-size: 18px;
}
h3.sendSuccess {
  color:#a52931;
  text-align: center;
}
a.goBack {
  text-decoration: none;
  display: block;
  text-align: center;
  color:#a52931;
  background-color: white;
  border:2px solid #a52931;
  padding:20px 50px;
  margin:0 auto;
  max-width:350px;
}
a.goBack:hover {
  color:white;
  background-color:#a52931;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*---------------------- FOOTER ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/
.footer {
  background-color: #a52931;
  padding:40px 0;
  margin:0;
  color:white;
}
.footerInfo {
  padding:0;
  margin:0;
  text-align: center;
  font-size: 15px;
}
.footer a {
  color:white;
  text-decoration: none;
}
.footer a:hover {
  opacity: .7;
}



/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*---------------------- HEADER ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

#privacy {
    background-color: white;
    color:#222222;
    display:block;
    width:60%;
    max-width: 1600px;
    margin:0 auto;
    padding:120px 0;
    font-size: 15px;
}
h1.privacyTitle {
    text-align: left;
    margin-bottom: 70px;
    color:#222222;
}
#privacy h6 {
  font-size: 20px;
  padding:0;
  margin:0;
  margin-top:30px;
}
#privacy a {
  color:#a52931;
  text-decoration: none;
}












/*
#about
#staff
#services
#approach
#values
#clients
#contact
.footer
*/

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/*----------------------- MEDIA ------------------------*/
/*------------------------------------------------------*/
/*------------------------------------------------------*/

@media only screen and (max-width:100em) {
#staff, #clients {
  width:80%;
}
}



@media only screen and (max-width:90em) {
  
}



@media only screen and (max-width:80em) {
#about, #approach {
  width:70%;
}
#staff, #values, #contact, #clients {
  width:95%;
}
img.mainLogo {
    width:60%;
}
}



@media only screen and (max-width:70em) {
#staff, #about, #approach, #values, #clients, #contact {
  font-size: 16px;
}  
img.mainLogo {
    width:70%;
}
.tagline {
    padding-top: 150px;
    margin-left: 20%;
}
img.infograph {
  width:95%;
}
}



@media only screen and (max-width:60em) {
#about {
  width:80%;
}
#staff, #about, #approach, #values, #clients, #contact {
  font-size: 15px;
}
.serviceItem {
  width:80%;
  padding:0;
  display: block;
  margin:0 auto;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom:5px solid #a52931;
} 
.serviceItem ul {
  width:80%;
  display: block;
  margin:0 auto;
}
img.mainLogo {
    width:80%;
    padding:20px 0;
}
.tagline {
    padding-top: 150px;
    margin-left: 15%;
}
.tag {
    font-size: 50px;
}
.plus {
    font-size: 38px;
    margin-left: 40px;
}
.logoRow {
  padding-top:20px;
}
.logoBox {
  padding:20px;
}
}



@media only screen and (max-width:50em) {
#about, #approach, #privacy {
  width:95%;
}
#staff {
  width:80%;
}
#about, #staff, #services, #approach, #values, #clients, #contact, .footer, #privacy {
  padding:80px 0;
}
.staffLeft, .staffRight {
  width:100%;
  padding:0;
}
#staff img {
  padding-bottom:20px;
  padding-top: 50px;
}
.serviceItem {
  width:90%;
}
.serviceItem ul {
  width:80%;
}   
.left {
  width:100%;
}
.right {
  width:100%;
}
h2.valueTitle {
  padding-bottom:10px;
}
p.valueBlurb {
  width:80%;
  display:block;
  margin:0 auto;
}
.valueBox {
  padding-bottom:20px;
}
.contactLeft, .contactRight {
  display: block;
  margin-right:-4px;
  width:100%;
}
form input[type="submit"] {
  margin:0 auto;
}
label[for="nav-trigger"] {
  right: 30px; 
  top: 30px;
}
}




@media only screen and (max-width:40em) {
#staff {
  width:95%;
}  
.serviceItem {
  width:95%;
}
.serviceItem ul {
  width:100%;
}
label[for="nav-trigger"] {
  right: 0; 
  top: 20px;
}
.tagline {
    padding-top: 50px;
    margin-left:0;
    text-align: center;
    width:95%;
    display: block;
    margin:0 auto;
}
.tag {
    font-size: 40px;
}
.plus {
    font-size: 28px;
    margin-left:0;
}
.navigation {
  width: 150px;
  padding-top:10px;
}
.navigation img {
    padding:0;
    padding-top: 30px;
    width:95%;
}
.nav-item {
  width: 150px;
}
.nav-item a {
  padding: 20px 10px;
  font-size: 1.1em;
}
.nav-trigger:checked + label {
  right: 150px;
}
.nav-trigger:checked ~ .site-wrap {
  right: 150px;
}
.logoRow {
  padding-top:15px;
}
.logoBox {
  padding:5px;
}
.show-for-small-only {
  display:block;
}
.hide-for-small-only {
  display: none;
}
}



@media only screen and (max-width:30em) {
p.valueBlurb {
  width:100%;
}  
.socialIcons img {
  width:40px;
}
label[for="nav-trigger"] {
  top:10px;
}
img.mainLogo {
    width:75%;
}
}



@media only screen and (max-width:25em) {
label[for="nav-trigger"] {
  top:0px;
}  
}