/* ----- Reset ----- */
* {padding:0; margin:0;}
.navburger-toggle {display: none;}


/* ----- Body ----- */
body {font-family: 'Roboto', sans-serif; font-size: 100%; color: #444; line-height: 1.6em; font-weight: 400; height:100%; background: #111;}

.maxwidth img {max-width: 600px;}

/* ----- Global structure ----- */
.container {width: 100%; padding:0; margin: 0; background: #fff; position: relative; right:0; z-index: 200;}
.content {}
.fixed {position:fixed; top:0;}

/* ----- Header ----- */
header {max-width:1155px; margin:0 auto; padding: 1em 2em 2em 2em; /*border-bottom: 1px solid rgba(0,0,0,0.05);*/}
section {max-width:1155px; margin:0 auto; padding:0 30px;}
.wide {max-width:100%!important; }
.projectWidth {max-width:800px;}
.logoBlack {margin-top: 0.7em; font-weight: 700!important; letter-spacing:-0.01em; font-size: 1.3em; color: #333!important; max-width: 260px!important; min-width: 160px!important; position: relative;}
/*.logoBlack img { padding-top: 3px;}*/
.logoBlack img {max-width: 160px;}
img.icon-social {height: 1.3em; cursor: pointer; vertical-align: middle;}
img.icon-social .linkedin {height: 1.4em;}
.imageCaption {font-family: 'Roboto Slab', serif; font-weight: 300; color: #999; font-size: 0.8em; line-height: 1.3em; padding-top: 1em; text-align: center; display: block;}
.sideBySide {margin: 0 auto; display: block; text-align: center;}
.sideBySideButton {display: inline-block; margin-right: 1em;}
.sideBySideButton:last {margin-right: 0;}
.profileJames {    display: flex;flex-direction: row;justify-content: center;}
.profileJames img {height:130px; text-align: center; display: block; padding-bottom:24px;}

/* ----- Nav Normal ----- */
.nav {/*text-transform: uppercase; *//*font-size: 0.9em;*/}
.nav p, .nav ul, .nav li {padding-bottom: 0; margin-bottom:0;}
.nav ul.navlinks {float: right; line-height: 3em; margin-left: 0;}
.nav ul.navlinks li {list-style: none; display: inline; float: left; margin: 0 0 0 1.8em;}
.nav ul.navlinks li:first-child {margin: 0;}
.nav ul.navlinks li.lessLeftMargin {margin: 0 0 0 10px;}
.nav ul.navlinks li.social {line-height: 50px; margin: 0 0 0 15px;}
/*.nav ul.navlinks li:last-child {margin: 0 0 0 10px;}*/

.nav ul.navlinks2 {float: right; /*line-height: 3em;*/ margin-left: 0;}
.nav ul.navlinks2 li {list-style: none; display: inline; float: left; margin: 0;}
.nav ul.navlinks2 li.social {line-height: 50px; margin: 0 0 0 15px;}
.nav ul.navlinks2 li a, .nav ul.navlinks2 li a:visited {color:#111;font-weight: 400;}

.nav ul li {list-style: none; display: inline; float: left; margin: 0;}
.nav ul li a, .nav ul li a:visited {font-size: 0.9em; margin-bottom:0; display: block; text-decoration: none; color: #444;}
.nav ul li a:hover, .nav ul li a.active {color: #4D9F74;}

ul li a.logo, ul a.logo {margin-left: 0;}

/* ----- Nav Hamburger ----- */
.navburger-toggle {/*line-height:41px;*/ float:right;}
.navburger-toggle li {list-style:none;}
img.burgernav {width: 24px; cursor: pointer; position: relative;}

.navburger-content {position:absolute; z-index: 1; top:38px; right:0; height:100%; background: #111; width:200px;}

.navburger-links {}
.nav-title {
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  padding-bottom: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.navburger-links li {list-style:none; display: block; float:none; margin-left:24px; margin-bottom:8px;}
.navburger-links li a, .navburger-links li a:visited {/*text-transform: uppercase;*/ display: block; text-decoration: none; color: #888; font-size: 1em; font-weight: 400;}
.navburger-links li a:hover, .navburger-links li a.active {color: #4D9F74;}

.movecontainer {right: 200px;}
.iconPadlock {height: 0.8em; margin-left: 0.1em; position: relative; top:0.03em;}
.iconPadlockSmall {height: .5em;
    margin-left: 0.1em;
    position: relative;
    top: -0.5em;}
.arrowBack {height: 9px;
    margin-right: 5px;}
.arrowForward {height: 9px;
    margin-left: 5px;}
.makeLinkColor {color:#4D9F74!important;}

/* ----- Typography ----- */
h1 {font-weight: 700; font-size: 2.2em; text-align: center; margin: 0 0 4% 0; color:#222;line-height: 1em;}
h2 {font-weight: 400; font-size: 1.7em; text-align: center; margin: 1% 0 2.5% 0; line-height: 1.2em;}
h3 {font-weight: 400; font-size: 1.2em; margin: 0 0 4% 0;}
h4 {font-family: 'Roboto Slab', serif; font-weight: 300; color: #666; font-size: 1.4em; line-height: 1.6em; text-align: center; margin: 0 0 2.5% 0;}
h5 {font-weight: 700; font-size: 1.1em; margin:0; text-transform: uppercase;}
h5.heading {font-weight: 700; font-size: 0.9em; margin:10px 0 7px 0; text-transform: uppercase;}
p, ul, li {color: #666; padding-bottom: 1.2em;}
p, ol, ul {font-size: 1em;}
p.margin-top {margin-top: 15px;}
.moreLineHeight {line-height: 1.8em;}
.casestudy {color: #398EAE; display: block;}
.highlight {background-color:#D9F0D5; color:#000;padding: 2px 4px;
    border-radius: 3px;  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;}

/* ----- Links ----- */
a {outline: none; outline:0; text-decoration: none; color: #4D9F74;}
a.fsp-close {color: #fff; font-size: 2em;}
.bold {color:#333; font-weight: 600; padding-bottom: 0.5em; display: block;}
.semibold {color:#333; font-weight: 500; padding-bottom: 0.5em; display: block;}
.boldNoBlock {color:#333; font-weight: 400; padding-bottom: 0.5em;}

/* ----- Content ----- */
img {max-width:100%; max-height:100%; border:0;}
img.profile {margin-bottom: 1em;}
.icon img {width:30px; margin-right: 20px;}
ol, ul, li {margin-left: 1em;}
ul.noMarginLeft, .noMarginLeft li {margin-left: 0em;}
li {padding-bottom: 10px;}
ul.with-bullets {padding: 15px 0;}
ul.with-bullets li {list-style: disc; padding-left: 15px; list-style-position: inside;}
ul.list li {text-align:left!important;}
.smaller_image {width:160px;}
.smaller_image_left {padding-right: 16px;width:160px;}
p.sidebyside {display:flex;}

.summaryBox {
    background-color: rgba(18, 110, 211, .05);
    padding: 12px 16px 12px 16px;
    margin-top: 24px;
    /* margin-bottom: 24px; */
    border-radius: 16px 16px 0 0;
    background-color: #333333;
    /* display: block; float: none; */
    }

p.summaryTitle {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: 500;
    color: #ffffff;
}

p.summarySubtitle {
    margin: 0;
    padding: 0;
    font-size: .8em;
    color: #aaaaaa;
}

.caseStudyBg {
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: 0 0 16px 16px;
}

.caseStudyDetailed {
  margin-top:2em;
  margin-bottom: 2em;
}

.logoAlign {display: flex!important;
    flex-direction: row;
    justify-content: space-evenly;}

.halfEmPaddingTop {padding-top: 0.5em}
.OneEmPaddingTop {padding-top: 1em;}
.TwoEmPaddingTop {padding-top: 2em;}
.padding2 {padding-top: 2em;}
.marginTop2em {margin-top: 2em!important;}
.halfEmPaddingBottom {padding-bottom: 0.5em}
.noMarginTop {margin-top: 0em!important;}
.noMarginBottom {margin-bottom: 0em!important;}
.noPaddingBottom {padding-bottom: 0em!important;}
.moreMarginTop {margin-top: 3em;}
.SomeMarginTop {margin-top: 1.5em;}
.MarginTop1em {margin-top: 1em!important;}
.MarginBottom1em {margin-bottom: 1em!important;}
.oneEmMarginBottom {margin-bottom: 1em;}
.margin0 {margin: 0 0;}
.threeQuartersEmMarginBottom {margin-bottom: .75em;}
.more-padding-top {padding-top: 2em;}
.centered {text-align: center;}
.left {text-align: left!important;}
.right {text-align: right;}
.image {margin: 0 auto; text-align: center;}
.italicSerif {font-style: italic; font-family: 'Roboto Slab', serif; font-weight: 300; color: #999;}
.italic {font-style: italic; padding-bottom: 0.5em; display:block; color: #777;}
.greyText {color: #ddd;}
.grey {background-color: #f2f2f2;}
.black {background-color:#222!important;}
.blue {background-color:#97d3e6;}
.divider {height:1px;}
.paddingTop40 {padding-top: 20px;}
.margin-bottom-2 {margin-bottom: 2%;}
.margin-bottom-4 {margin-bottom: 4%;}

.clients h5, .clients p, .clients .width-4 {text-align: center;}
.clients img {max-width: 240px;}

.yellowBoxContainer {display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: row; flex-wrap: wrap;
    padding: 1em 0 0 0;}

.aYellowBox {background-color: #f2f2f2; border-radius: 4px; margin-right:.5em; margin-bottom:.5em;}
.yellowBoxText {padding: 2px 8px;color: #666; font-size: 0.9em;}

.blueBox {background-color: #F0FBFF; color:#555; font-size: 0.9em; padding: 16px 24px; border-radius: 4px;}
.blueBox img {padding-right: 6px; width: 20px;  height:20px; max-width: 20px; max-height:20px;}
.blueBoxImageAndText {display: flex; flex-direction: column;align-items: flex-start; color: #398EAE;}
.blueBoxImage {    padding-top: 2px;
    padding-right: 6px;}
.blueBoxRow {display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-direction: row; }
.blueBoxText {display: block; padding-bottom: 8px; color:#444;}

/* ----- Buttons ----- */
a.button {
  background: #4D9F74;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  padding: 8px 20px;
  display: block;
  width: 170px;
  text-align: center;
  margin: 0 auto;
}

a.button.fullWidth {
  width: auto;
    min-width: 0;
    display: table;
    margin-top: 1em;
}

a.button.small {
  background: #4D9F74;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 4px;
  color: #fff;
  padding: 8px 20px;
  display: block;
  text-align: center;
  margin: 0;
  font-size: 0.9em;
}

button {
  background: none;
  outline: 0;
  border: 0;
  outline: none;
  display: block;
  margin: 40px auto;
}

a.buttonOutline {
background-color:#ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* color: #ffffff; */
    border: 1px solid #4D9F74;
    padding: 8px 20px;
    display: block;
    width: 170px;
    text-align: center;
    margin: 0 auto;
}

.projnav-left {background-image: url('images/arrow-projnav-left.png')!important; width: 30px; background-color: #fff!important; border:1px solid #ddd!important; color:#999!important; background-repeat: no-repeat!important; padding: 8px 20px 8px 30px!important; background-position: 15%!important; background-size: 8px!important; width:0px!important;}
.projnav-right {background-image: url('images/arrow-projnav-right.png')!important; width: 30px; background-color: #fff!important; border:1px solid #ddd!important; color:#999!important; background-repeat: no-repeat!important; padding: 8px 30px 8px 20px!important; background-position: 85%!important; background-size: 8px!important; width:0px!important;}


/* ----- Footer ----- */
footer {background: #111; margin:5em auto 0 auto; padding: 20px;}

/* ----- Footer nav ----- */
.footer-content {max-width: 1155px; margin: 0 auto; color:#666; font-size: 0.8em;}
.footer-content .col {margin:0 1%;}
.footer-content a, .footer-content a:visited {color:#666;}
.footer-content a:hover {color:#aaa;}
.footer-alignright {text-align: right;}

.footerContactUl {
    display: table;
    margin: 0 auto;
    line-height: 3em;
    padding: 0;
    float: none;
}

.footerContactLi li{
    list-style: none;
    display: inline;
    float: left;
    margin: 0 10px!important;
    padding: 0;
    text-align: left;
}
.footerContactLi li a{
    color:#ddd!important;
}

/* ----- Slider ----- */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.prev {float:left; text-align: right; background: url('images/arrow-left.png') no-repeat left; width:30px; height:30px; opacity:0.5; background-size: 30px;}
.next {float:right; text-align: left; background: url('images/arrow-right.png') no-repeat right; width:30px; height:30px; opacity:0.5; background-size: 30px;}
.prev:after, .next:after {clear:both;}
.prev, .next {
  margin: -37% 2% 0 2%;
  position: relative;
  z-index: 999999;
}

a:hover.prev, a:hover.next {opacity:1;}

.rslides1_tabs {
  text-align: center;
  margin: 0 auto;
  display: block;
}

.rslides1_tabs li{
  display: inline;
  float: left;
}

.rslides1_tabs li a {}

/* ----- Raccoon Grid ----- */

.raccoonGrid {
  clear: both;
/*  padding: 0px;*/
/*  margin: 0px;*/
}

.col {
  display: block;
  float:left;
  margin: 1.5% 1% 4% 1%;
}

.fullimage {
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
/*  background-attachment: fixed;*/
  background-position: 50% 50%;
  position: relative;
}

.fullimage-textblock {
  position: absolute;
  top: 50%;
  left:20px;
  right:20px;
  resize:vertical;
  overflow: auto;
  transform: translateY(-50%);
}

.fullimage h1, .fullimage h2 {
  color: #f2f2f2;
}

 .fullimage h3, .fullimage h4, .fullimage h5 {
  color: #bbb;
 }

.no-bottom-margin {margin-bottom: 0!important;}
.oneem-bottom-margin {margin-bottom: 1em!important;}
.halfem-top-margin {margin-top: 0.5em!important;}
.no-top-margin {margin-top: 0!important;}
.no-top-padding {padding-top: 0!important;}

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

.width-12 {
  width: 98%;
}

.short {width: 60%; margin:40px auto 30px auto; float: none;}
.short2 {width: 60%; margin:20px auto 40px auto; float: none;}
.short3 {width: 60%; margin:40px auto 0px auto; float: none;}
.full-width {width: 100%; margin:20px auto 20px auto; float: none;}

.width-11 {
    width: 89.7%;
}
.width-10 {
    width: 81.06%;
}

.width-9 {
    width: 73%;
}

.width-8 {
    width: 64.66%;
}

.width-7nav {
    width: 57%;
    margin-top: 0;
    margin-bottom: 0;
}

.width-7 {
    width: 56.5%;
}

.width-6 {
    width: 48%;
}

.width-5nav {
    width: 39%;
    margin-top: 0;
    margin-bottom: 0;
}

.width-5 {
    width: 39%;
}

.width-4 {
    width: 31.3%;
}

.width-3 {
    width: 23%;
}

.width-2 {
    width: 14.6%;
}

.width-1 {
    width: 6.3%;
}





.image {
  cursor: pointer;
}

/* The Modal (background) */
.modal {
  display: none;  /*Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(255,255,255); /* Fallback color */
  background-color: rgba(255,255,255,1); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
  background: #fff;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 5%;
  right: 5%;
  color: #222;
  font-size: 60px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}




/* -----------------------------------------------
   ------ Media queries from Small to Large ------
   ----------------------------------------------- */

/* ----- Mobile & Phablets in portrait----- */
@media only screen and (max-width: 415px) {
  h1 {padding: 15px;}
  h2 {margin-top: 3%;}
  h3 {font-size:1.3em;}
  h4 {font-size:1.1em;}
  .short {margin: 30px auto 30px auto; width:100%;}
  .logo {font-size: 1.2em;}
  img.logo {max-width:200px; display: block;}
  /*.imageCaption {padding-top: 4px;}*/
  .navlinks {display: none;}
  .navburger-toggle {display:block;}
  header {clear:both; margin:0; padding: 30px 30px 0 30px;}
  section {padding: 0 30px 0 30px;}
  ul.with-bullets li {padding:0;}
  .footer-content {text-align: center!important;}
  .footer-alignright {text-align: center;}
  .width-1, .width-2, .width-3, .width-4, .width-5, .width-6, .width-7, .width-8, .width-9, .width-10, .width-11, .width-12 {width: 100%;}
  .width-2, .width-4, .width-9, .width-10, h3 {width: 100%!important; text-align: center!important; margin-right: auto; margin-left: auto;}
/*  a.button {width:40%;}*/
  .sideBySideButton {margin-bottom: 1em;}
  .logoBlack {margin-top: 0;}
/*  .short.dino {margin-top: 0!important;}*/
.blueBox {width: 82%;}
.paddingTop40 {padding-top: 10px;}
/*.profileJames {display: flex;flex-direction: row;justify-content: center;}*/
.profileJames img {text-align: center; display: block;}
  a.button.small {margin: 0 auto 2em auto!important; width:auto;}
  .raccoonGrid.group.moreMarginTop.margin-bottom-4 {margin-top:0;}
  .sideBySideButton {margin-right:0;}
}

/* ----- Mobile & Phablets in landscape ----- */
@media only screen and (min-width: 416px) and (max-width: 767px) {
    h1 {padding-bottom: 15px;}
  img.logo {max-width:200px; display: block;}
  .navlinks {display: none;}
  .navburger-toggle {display:block;}
  header {clear:both; margin:0; padding: 30px 30px 10px 30px;}
  section {padding: 0 30px 0 30px;}
  h3 {font-size:1.4em;}
  h4 {font-size:1.2em;}
  ul.with-bullets li {padding:0;}
  .short {width:80%;}
  .width-2, .width-3, .width-4, .width-6, .width-8, .width-9, .width-10 {width: 80%!important;  margin-right: auto; margin-left: auto; float:none;}
  li {width: 100%!important;  margin-right: auto; margin-left: auto; float:none; text-align: left;}
  .logoBlack {margin-top: 0;}
/*  .short.dino {margin-top: 0!important;}*/
  .sideBySideButton {margin-bottom: 1em;}
  .paddingTop40 {padding-top: 10px;}
  .profileJames img {text-align: center; display: block;}
    a.button.small {margin: 0 auto 2em auto!important; width:auto;}
    .raccoonGrid.group.moreMarginTop.margin-bottom-4 {margin-top:0;}
    .sideBySideButton {margin-right:0;}
}

/* ----- Tablets in both views ----- */
@media only screen and (min-width: 768px) and (max-width: 1040px) {
  header {clear:both; margin:0; padding: 30px 30px 10px 30px;}
  .width-3, .width-9 {width: 80%!important; margin-right: auto; margin-left: auto; float:none;}
  .navlinks {display: none;}
  .navburger-toggle {display:block;}
  li {text-align: left;}
  .prev, .next {margin: -42% 2% 0 2%; position: relative; z-index: 999999;}
  .logoBlack {margin-top: 0;}
}