html {
  font-size:16px;
}

/* fix the body width to 300px at low screen resolutions to prevent any responsive content format 
changes below 300px screen width */
@media (max-width: 300px) {

    body {
      width: 300px;
    }
}

.container-fluid {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

.navbar .container-fluid {
  padding-left: 20px;
  padding-right: 15px;
}

@media (min-width: 400px) {

 .container-fluid {
    padding-left: 45px;
    padding-right: 45px;
  }

  .container-fluid.clients-container {
    padding-left: 5%;
    padding-right: 5%;
  }

}

@media (min-width: 461px) {

 .container-fluid {
    padding-left: 52px;
    padding-right: 52px;
  }

}

@media (min-width: 600px){

 .container-fluid {
    padding-left: 60px;
    padding-right: 60px;
  }

}

a:hover, a:focus {
  text-decoration: none;
}

/* The height of this div is set as a proportion of the screen width with the 
proportion being the relation between the height and width of the full-size background image. 
By setting the div's height, this solves an issue where the overlay header text was jumping on 
page-load as the div's height was not determined until the background image had been loaded. 
As 2 different images are used at different screen resolutions this is reflected in the styling
directly below */

#page-top {
  height: 43.0666vw;
}

@media (min-width: 621px){

    #page-top {
      height: 32.9333vw;
    }

}

.clickable-icon {
  cursor: pointer;
}

.clickable-icon:hover {
  opacity: 0.6;
}

.fa-twitter:hover {
  opacity: 0.6;
}

.fa-linkedin:hover {
  opacity: 0.6;
}

a.hover-fade:hover {
	  opacity: 0.6;
}

span.slant {
  position: relative;
  font-family:Lato;
  font-size: 16px;
  text-transform:uppercase;
  display: inline-block;
  padding: 0.8em 5.5em 0.8em 2.7em;
  overflow: hidden;
  color:#70BF08;
  line-height: 1.2;
  border-radius: 20px 0 0 20px;
}

span.slant.one-line {
  padding: 1em 5em 1em 2.7em;
}

span.slant.two-line {
  padding: 1em 5.7em 1em 2.7em;
  line-height: 1.3;
}

span.slant.three-line {
  padding: 1em  6.1em 1em 2.75em;
  line-height: 1.3;
}

span.slant:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:black;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}


.read {
  background-color: #036536; /* Green */
  border: none;
  color: #70BF08;
  padding: 15px 26px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  font-size: 14px;
}

.read:hover, .read:visited {
  color: #70BF08;
}

.logo-background {
  padding:1px;
  height: auto;
}


@media (max-width: 359px){

  .logo-background {
    width: 120px;
    height: auto;
  }
}

@media (min-width: 360px) and (max-width: 509px){

  .logo-background {
    width: 120px;
    height: auto;
  }

}


@media (min-width: 510px) and (max-width: 799px){

  .logo-background {
    width: 140px;
    height: auto;
  }

}

@media (min-width: 800px) and (max-width: 909px){

  .logo-background {
    width: 160px;
    height: auto;
  }

}

@media (min-width: 910px) and (max-width: 1000px){

  .logo-background {
    width: 175px;
    height: auto;
  }

}

@media (min-width: 1001px) and (max-width: 1199px){

  .logo-background {
    width: 190px;
    height: auto;
  }

}

@media (min-width: 1200px){

  .logo-background {
    width: 220px;
    height: auto;
  }

}

.clients-logo {
  width: 60%;
  margin-left:20%;
  margin-top:20px;
}

@media (min-width: 350px) {

  .clients-logo {
    width: 60%;
    margin-left:20%;
  }

}

@media (min-width: 470px) {

  .clients-logo {
    width: 50%;
    margin-left:25%;
  }
  
}

@media (min-width: 580px) {

  .clients-logo {
    width: 40%;
    margin-left:30%;
  }
  
}

@media (min-width: 650px) {

  .clients-logo {
    width: 30%;
    margin-left:35%;
  }
  
}

@media (min-width: 768px) {

  .clients-logo {
    width: 90%;
    margin-left:0;
    margin-top:60px;
  }
  
}

@media (min-width: 992px) {

  .clients-logo {
    width: 100%;
    margin-left:0;
    margin-top:60px;
  }
  
}

@media (min-width: 1250px) {

  .clients-logo {
    width: 80%;
    margin-left:10%;
  }
  
}

@media (min-width: 1500px) {

  .clients-logo {
    width: 70%;
    margin-left:15%;
  }
  
}


.navbar-right {
	margin-right: 20px;
}

@media (min-width: 1300px) {

      .navbar-right { 
          margin-right: 50px;
      }
}

@media (max-width: 767px) {

	.navbar-right {
		margin-right: 0px;
	}
}

.margin-top-15px {
    margin-top: 15px;
}

.margin-top-20px {
    margin-top: 20px;
}

.margin-top-30px {
    margin-top: 30px;
}

.margin-top-40px {
    margin-top: 40px;
}

.margin-top-50px {
    margin-top: 50px;
}

.margin-top-80px {
    margin-top: 80px;
}

.margin-bottom-20px {
    margin-bottom: 20px;
}

.margin-bottom-40px {
    margin-bottom: 40px;
}

.margin-bottom-50px {
    margin-bottom: 50px;
}

.margin-bottom-60px {
    margin-bottom: 60px;
}

.margin-bottom-90px {
    margin-bottom: 90px;
}

.margin-bottom-110px {
    margin-bottom: 110px;
}

.margin-left-60px {
    margin-left: 60px;
}

#studies {
  margin-bottom:50px;
}

#solutions img:hover, #studies img:hover {
  opacity: 0.6;
}

#offers {
  margin-left:60px;
  margin-bottom:30px;
}

.twitter-block {
  display: none; 
}

.icon-grid-container a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.icon-grid-container p {
  font-size: 150%;
  text-align: left;
  font-family: sans-serif;
  margin: 0px 10px 10px;
}

.icon-grid-element {
  height: 130px;
}

.icon-grid-text {
  font-family:Lato;
  font-style:italic; 
  color: #333333; 
  font-weight:bold;
  font-size: 18px;
}

.icon-grid-image {
  width: 90%;
  height:auto;
}

@media (min-width: 355px){

  .icon-grid-element {
    height: 140px;
  }

}

@media (min-width: 460px){

  .icon-grid-element {
    height: 170px;
  }

  .icon-grid-text {
      font-size: 20px;
  }

}

@media (min-width: 550px){

    .icon-grid-element {
    height: 180px;
  }

  .icon-grid-text {
      font-size: 20px;
  }

}

@media (min-width: 650px){

    .icon-grid-element {
      height: 200px;
    }
}

@media (min-width: 861px) and (max-width: 899px){

    .icon-grid-element {
      height: 220px;
    }
}

@media (min-width: 900px) and (max-width: 991px){

    .icon-grid-element {
      height: 240px;
    }
}

@media (min-width: 992px) and (max-width: 1150px){

    .icon-grid-element {
      height: 180px;
    }

}

@media (min-width: 1151px) and (max-width: 1199px){

  .icon-grid-element {
    height: 220px;
  }

}

@media (min-width: 1200px) and (max-width: 1479px){

  .icon-grid-element {
    height: 180px;
  }

}

/* The icon image width is fixed beyond this breakpoint as if the percentage width as used at 
narrower screen widths was continued, the images would start to be stretched beyond their natural width of 250px. This 1480px 
breakpoint is based on the image occupying 90% of it's containing div's width and also the grid-container filling 75% width 
of the containing container-fluid div */

@media (min-width: 1480px){

  .icon-grid-image {
      height:150px;
      width: 250px;
  }
}

p.contact-footer {
  margin: 0;
}

.weblink-box {
  background-color:#fcfcf3;
  background: -webkit-linear-gradient(#fbfbef, #fcfcf3); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fbfbef, #fcfcf3); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fbfbef, #fcfcf3); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fbfbef, #fcfcf3);
  border-radius: 25px;
  padding: 20px 30px 40px;
  border: 1px solid #036536;
}

.weblink-box h3 {
  text-align:center; 
  color:#4c4a4a; 
  text-align:center;
  margin-bottom:25px;
}

.weblink-box h3 a {
  color:#4c4a4a; 
}

.weblink-box p {
  text-align:center; 
  font-size:1.15rem;
  line-height:1.5;
}

.weblink-box p a {
  color:#4c4a4a;
}

.weblink-box a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.weblink-box a:visited, .weblink-box a:focus {
  text-decoration: none;
}

@media (min-width: 370px){

  .weblink-box p {
    font-size:1.3rem;
  }

}

.weblink-box div {
  width:220px; 
  margin:25px auto 0;
}

/* This solves a problem where because Mindshare quote and the Director's job title are very long, 
the containing div was being extended and causing a following quote block to be floated to right rather than left */
@media (min-width: 768px) and (max-width: 880px) {
  .quotes-container-communities {
      height: 660px;
  }
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 150px;
  bottom: -40px;
  border: 20px solid;
  border-color: #036536 #036536 transparent transparent;
}
.tri-right.btm-right-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 158px;
  bottom: -20px;
  border: 12px solid;
  border-color: lightyellow lightyellow transparent transparent;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -8px;
  bottom: -40px;
  border: 20px solid;
  border-color: #036536 #036536 transparent transparent;
}
.tri-right.btm-right:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 0px;
  bottom: -20px;
  border: 12px solid;
  border-color: lightyellow lightyellow transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -40px;
  top: 30px;
  bottom: auto;
  border: 20px solid;
  border-color: #036536 transparent transparent #036536;
}
.tri-right.right-in:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 38px;
  bottom: auto;
  border: 12px solid;
  border-color: lightyellow transparent transparent lightyellow;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -40px;
  top: -8px;
  bottom: auto;
  border: 32px solid;
  border-color: #036536 transparent transparent transparent;
}
.tri-right.right-top:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: -20px;
  top: 0px;
  bottom: auto;
  border: 20px solid;
  border-color: lightyellow transparent transparent transparent;
}

/* CSS talk bubble */
.talk-bubble {
  display:table;
  position: relative;
  height: 310px;
  background-color: lightyellow;
  width:90%;
  margin:0 auto;
}

@media (min-width: 460px) {

  .talk-bubble {
      width:80%;
  }

}

@media (min-width: 570px) {

  .talk-bubble {
      width:70%;
  }

}

@media (min-width: 720px) {

  .talk-bubble {
      width:60%;
  }

}

@media (min-width: 768px) {

  .talk-bubble {
      width:100%;
  }

}

@media (min-width: 768px) and (max-width: 880px){

  .talk-bubble {
      height:400px;
  }

}

@media (min-width: 992px) and (max-width: 1059px){

  .talk-bubble {
      height:440px;
  }

}

@media (min-width: 1060px) and (max-width: 1240px){

  .talk-bubble {
      height:400px;
  }

}

/* talk bubble contents */
.talktext {
  display: table-cell; 
  vertical-align: middle; 
  text-align:center;
  padding: 1em;
  line-height: 1.5em;
}

.talktext p {
  /* remove webkit p margins */
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

.person-text {
  margin-top:15px;
  margin-bottom: 50px;
  padding: 10px 0 0;
  text-align: center;
  z-index: -1;
}
.person-text a {
  color: #036536;
  display: block;
  font-size: 16px;
  margin-top: 3px;
  text-decoration: none;
}
.person-text i {
  color: #fff;
  font-family: Georgia;
  font-size: 13px;
}

.border {
  border: 8px solid #036536;
}

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

h3.featurette-heading {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-left: 0;
  margin-bottom: 1em;
  /*color: #333;*/
}

h3.featurette-heading.case-studies {
  margin-top:40px;
}

p.featurette-text {
  font-size:1.10rem; 
  line-height: 2.0;
  text-align:justify; 
  font-family:sans-serif; 
  margin: 40px 30px 10px 40px;
}

.featurette-paragraph {
  font-size:100%; 
  text-align:justify; 
  font-family:sans-serif; 
  margin: 10px 30px 10px 30px;
}

.list-description {
  margin-top: 30px;
}


p.how-works-text {
  margin-bottom:0px;
}

ul.featurette-list {
  list-style-image: url('img/bullet-point-4ea82c.png'); 
  font-size:1.10rem; 
  text-align:left; 
  font-family:sans-serif; 
  margin: 40px 50px 10px 10px;
}

ul.case-studies-list {
  list-style-image: url('img/bullet-point-4ea82c.png'); 
  font-size:100%; 
  text-align:left; 
  font-family:sans-serif;
  margin-top: 30px;
}

.case-studies-list-large-text {
  font-size:120%;
}

ul.how-works-list {
  margin-top:0px;
}

ul.featurette-list li {
  margin: 20px 0px;
}

ul.case-studies-list li {
  margin: 15px 0px;
}

.paragraph-list {
  list-style:none; 
  font-family:sans-serif; 
  text-align: left; 
  margin-top:40px;
}

/*
.reduce-container-width {
  margin-left: 0px;
  margin-right: 45px;
}

@media (min-width: 800px) {
  
  .reduce-container-width {
    margin-left: 10px;
    margin-right: 45px;
  }
}

@media (min-width: 1050px) {
  
  .reduce-container-width {
    margin-left: 17px;
    margin-right: 55px;
  }
}

@media (min-width: 1300px) {
  
  .reduce-container-width {
    margin-left: 40px;
    margin-right: 60px;
  }
}

@media (min-width: 1500px) {
  
  .reduce-container-width {
    margin-left: 60px;
    margin-right: 80px;
  }

}
*/

.studies-img {
    width:85%;
}

@media (min-width: 360px) {

    .studies-img {
        width:75%;
    }
  }

@media (min-width: 430px) {

    .studies-img {
        width:60%;
    }
  }

  @media (min-width: 530px) {

    .studies-img {
        width:50%;
    }
  }

   @media (min-width: 630px) {

    .studies-img {
        width:45%;
    }
  }

     @media (min-width: 710px) {

    .studies-img {
        width:40%;
    }
  }

  @media (min-width: 768px) {

    .studies-img {
        width:70%;
    }
  }

  @media (min-width: 890px) and (max-width: 991px) {

    .studies-img {
        width:65%;
    }
  }

  @media (min-width: 992px) and (max-width: 1090px) {

    .studies-img {
        width:80%;
    }
  }

.email-entry {
  width:80%; 
  color: #6FBE08; 
  text-align:center; 
  font-size: 1.0rem;
  padding: 10px;
  border: solid 1px #6FBE08;
  -webkit-transition: box-shadow 0.3s, border 0.3s;
  -moz-transition: box-shadow 0.3s, border 0.3s;
  -o-transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
}

@media (min-width: 530px) {

  .email-entry {
    font-size: 1.1rem;
  }

}

@media (min-width: 650px) {

  .email-entry {
    width:60%;
  }

}

@media (min-width: 790px) {

  .email-entry {
    width:40%;
    font-size: 1.15rem;
  }

}

@media (min-width: 1000px) {

  .email-entry {
    width:35%;
  }

}

.twitter-block-new {
     margin: 37px 15% 0px 15%;
}

@media (min-width: 340px) {

      .twitter-block-new {
          margin: 37px 10% 0px 10%;
      }
}

@media (min-width: 440px) {

      .twitter-block-new {
          margin: 37px 5% 0px 5%;
      }
}

@media (min-width: 700px) {

      .twitter-block-new {
          margin: 37px 0 0px 0;
      }
}


@media (max-width: 1199px) {
      .twitter-block-homepage {
          display: none;
      }
}

@media (min-width: 1200px) {

      .twitter-block-homepage {
          margin: 37px 0px 0px 0px;
      }
}


@media (max-width: 1199px) {

    .dotted-border-gridposition1 {
      border-bottom:1px dotted #ADD8E6;
      padding-bottom: 25px;
    }

     .dotted-border-gridposition2 {
        border-bottom:1px dotted #ADD8E6;
        padding-bottom: 25px;
     }
}

@media (min-width: 768px) {

    .dotted-border-gridposition2, .dotted-border-gridposition4 {
        border-left:1px dotted #ADD8E6;
    }

    .twitter-block {
          display: block;
          float: right !important; 
          max-width: 100%; 
          height: auto; 
          margin: 10px 30px 10px 60px;
      }

    .paragraph-list {
      text-align: justify;
    }

    h3.featurette-heading {
        font-size: 1.65rem;
      }

      p.featurette-text {
        font-size:1.20rem;
        line-height: 2.1;
      }

      ul.featurette-list {
        font-size:1.20rem; 
      }

}

@media (max-width: 767px) {
      .dotted-border-gridposition3 {
          border-bottom:1px dotted #ADD8E6;
          padding-bottom: 25px;
      }
}


@media (min-width: 1200px) {

      .dotted-border-gridposition3 {
          border-left:1px dotted #ADD8E6;
      }

      h3.featurette-heading {
        font-size: 1.80rem;
      }

      p.featurette-text {
        font-size:1.30rem;
        line-height: 2.2;
      }

      ul.featurette-list {
        font-size:1.30rem; 
      }

}

/* This css for the twitter-block-homepage was relevant when the twitter block was in the sidebar at these
screen widths - it has since been moved to below the icons grid at these screen widths */

/*
@media (min-width: 768px) and (max-width: 991px)  {

      .twitter-block-homepage {
          height: 1333px;
      }
}

@media (min-width: 992px) {

      .twitter-block-homepage {
          height: 745px;
          overflow: hidden;
      }
}
*/

h2.iwin a {
  font-family: 'Permanent Marker', cursive;
  font-size:1.3em;
  color: #f95610;
  opacity: 0.9;
  text-shadow: 2px 2px 1px rgba(30, 30, 30, 1);
}

h2.iwin a:hover {
  opacity: 0.6;
}

@media (min-width: 500px) {

    h2.iwin a {
    font-size:1.6em;
  }

}

@media (min-width: 768px) {

    h2.iwin a {
    font-size:1.8em;
  }

}

@media (min-width: 1100px) {

    h2.iwin a {
    font-size:2.1em;
  }

}


/********* NAVIGATION SECTION ***********************/

.navbar {
  margin-bottom: 0;
  padding-bottom: 20px;
  position: absolute;
  z-index: 9999;
  width: 100%;
}


@media (max-width: 409px) {
  .navbar-brand {
    padding:5px 0px;
  }
}

.navbar-default {
  background-color: transparent;
  border-bottom:1px solid black;
  border-style:none;
  color:white;
  }

  .navbar-default .navbar-brand {
    color:#fed136;
    font-family:"Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
  }

  .navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:active,.navbar-default .navbar-brand.active {
    color:#fec503;
  }

  .navbar-default .navbar-collapse {
    /*border-color:rgba(255,255,255,.02);*/
    border-style:none;
    /*border-bottom:1px solid #036536;*/
  }

  .navbar-default .navbar-toggle {
    background-color:black;
    border-color:black;
  }

  .navbar-default .navbar-toggle .icon-bar {
    background-color:#FFF;
  }

  .navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {
    background-color:black;
  }

  .navbar-default .nav li a {

      background-color:#FFF;
      color:#615c58;
      font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 10px;
      text-decoration:none; 
      /*text-shadow: -1px -1px 0 rgba(0,0,0,0.3);*/
      text-align:center;
      letter-spacing:1px;
      line-height: 1.5;
      width: 13em;
      margin-top: 0.5em;
      margin-left:1.5em;
      padding:8px;
      outline:0;
      box-shadow: 0.7px 0.7px #333;
      border: 1px solid #333;
      display:inline-block;

      -webkit-border-radius: 1em; 
      -moz-border-radius: 1em;
      border-radius: 1em;
  }

/*
   .navbar-default .nav.second-nav li a {
      margin-top: 0em;

   }
*/

  .navbar-default .nav li a:hover, .navbar-default .nav li a:focus {

       box-shadow: none;
       color: black;
       /*border: 2px solid #615c58;*/
       border: 2px solid #528c06;

       background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2e6dc));
       background-image: -webkit-linear-gradient(top, #ffffff, #f2e6dc);
       background-image: -moz-linear-gradient(top, #ffffff, #f2e6dc);
       background-image: -ms-linear-gradient(top, #ffffff, #f2e6dc);
       background-image: -o-linear-gradient(top, #ffffff, #f2e6dc);
       background-image: linear-gradient(to bottom, #ffffff, #f2e6dc);

       filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#f2e6dc);
  }

  @media (max-width: 767px) {

      .navbar-default .nav li a {
        float: right;
        clear: right;
      }
  }

    @media (min-width: 600px) {

      .navbar-default .nav li a {        
          font-size: 11px;     
      }
    }

  @media (min-width: 768px) {

      .navbar-default .nav li a {        
          margin-top:20px;
          width:10em;
          padding: 0.8em 0.4em 0.8em 0.4em;
          font-size: 9px;     
      }
      /*
      .navbar-default .nav.second-nav li a {
          margin-top: 0em;
       }
       */

      /* removing the bootstrap default left padding for this class of 15px */
      .navbar-collapse {
          padding-right: 0;
      }
    }

    @media (min-width: 900px) {

        .navbar-default .nav li a { 
            font-size: 10px;        
            width:11em;
        }
    }

    @media (min-width: 1015px) {

      .navbar-default .nav li a { 
          font-size: 11px;        
          width:11em;
          padding: 1em 0.5em 1em 0.5em; 
      }
  }

  @media (min-width: 1300px) {

      .navbar-default .nav li a { 
          font-size: 12px;        
          width:11.5em;
          padding: 1em 0.5em 1em 0.5em; 
      }
  }

  @media (min-width: 1600px) {

      .navbar-default .nav li a { 
          font-size: 12px;        
          width:12em;
          padding: 1.1em 0.5em 1.1em 0.5em;
      }
  }

  .navbar-default .navbar-nav>.active>a {
  border-radius:0;
  color:#fff;
  background-color:#fed136
}
.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus {
  color:#fff;
  background-color:#fec503;
}
 
  .navbar-fixed-top {
    background-color:transparent;
    min-height:100px;
    /*border-style:none;*/
  }

  
/*  .navbar-fixed-top .nav li a {
  color:#70BF08;
  font-size:20px;
  text-shadow: 2px 2px 4px black;
}*/


.navbar-default.navbar-shrink .nav li a {      
      text-shadow: none;
      box-shadow: none;      
}

  
  @media (min-width:768px) {
    .navbar-default {
      /*padding:25px 0;*/
      -webkit-transition:padding .3s;
      -moz-transition:padding .3s;
      transition:padding .3s;
      /*border:0*/
    }

    .navbar-default .navbar-brand {
      font-size:2em;
      -webkit-transition:all .3s;
      -moz-transition:all .3s;
      transition:all .3s
    }
    .navbar-default .navbar-nav>.active>a {
      border-radius:3px
    }
    .navbar-default.navbar-shrink {
      /*background-color:#70BF08;*/
      background-color:rgba(0, 90, 90, 0.5);
      /*background-color:#CFF799;*/
      text-shadow: none;
      border-bottom:1px solid black;
      padding:10px 0
    }
    
    .navbar-default.navbar-shrink.nav li a{
      color:black;
    }
    
    .navbar-default.navbar-shrink .navbar-brand {
      font-size:1.5em
    }
    
  }
  
  @media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

  .navbar-default.navbar-shrink.nav li a {
      text-align:center;
    }
    
    .navbar-default.navbar-shrink{
      border-bottom:1px solid black;
    }
  
  /*nav.navbar.navbar-default.navbar-fixed-top.shrink.navbar-shrink {

      border-bottom:1px solid black;

    }*/
}


@-webkit-keyframes typing {
    from { width: 0 }
    to { width:20.5em;}
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:20.5em; }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white }
}

p.blink { 
    font-size:150%;
    width:20.5em;
  /*width:auto;*/
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid white;
    
    -webkit-animation: typing 5s steps(60, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 5s steps(60, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}

/********* END OF NAVIGATION SECTION ***********************/

footer li {
  list-style: none;
}

.affiliated-logo {
    margin-top:25px;
}

.ireach-global-logo {
    margin-top:25px;
}

.ireach-global-logo a:hover {
    opacity: 0.6;
}

.irc-logo {
    margin-top: 25px;
    margin-bottom: 10px;
}

.irc-logo a:hover {
    opacity: 0.6;
}


/* Custom Horizontal Rule */

hr.small {
    max-width: 100px;
}

hr.small {

  margin-bottom:0;
}

hr.small-lower {
  
  margin-bottom:20px;
}

.resources-text {
   font-size:125%;
   text-align:left; 
   font-family:sans-serif;
   margin-left: 6%;
   margin-right: 6%;
   line-height: 1.5;
}

/* On the case studies page, there's no need for the left and right 
margins at low screen resolutions */
@media (max-width: 599px) {

  div.case-studies-text .resources-text {
       margin-left: 0;
       margin-right: 0;
  }
}

@media (min-width: 450px) {

  .resources-text {
     text-align: justify;
  }

}

@media (min-width: 600px) {

  .resources-text {
     font-size:150%;
  }

}

@media (min-width: 1200px) {

  .resources-text {
      margin-left: 3%;
      margin-right: 2%;
  }

}

@media (min-width: 1300px) {

  .resources-text {
      margin-left: 3%;
      margin-right: 3%;
  }

}

@media (min-width: 1480px) {

  .resources-text {
      margin-left: 5%;
      margin-right: 5%;
  }

}

@media (min-width: 1650px) {

  .resources-text {
      margin-left: 6%;
      margin-right: 6%;
  }

}

/* OVER-RIDING SOME OF THE BOOTSTRAP DEFAULTS */
div.col-xs-12.services-pages-main-content {
  padding-left: 0;
  padding-right: 30px;
  margin-bottom: 40px;
}

@media (min-width: 992px) {

  div.col-xs-12.services-pages-main-content {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {

    div.case-studies-grid div.portfolio-item {
        border-bottom: 2px dotted #9aebcd;
       /*border-bottom: 2px dotted #ffebcd; */
        padding-bottom: 70px;
        padding-top: 20px;
    }

    div.case-studies-grid div.portfolio-item.studies-4 {
        border-bottom: none;
        padding-bottom: 0px;
    }

        div.case-studies-grid div.portfolio-item.studies-1 {
        padding-top: 0px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {

    div.case-studies-grid div.portfolio-item.studies-1 {
         border-bottom: 2px dotted #9aebcd;
         border-right: 2px dotted #9aebcd;
         padding-bottom: 70px;
    }

    div.case-studies-grid div.portfolio-item.studies-2 {
         border-bottom: 2px dotted #9aebcd;
         padding-bottom: 70px;
    }

    div.case-studies-grid div.portfolio-item.studies-3 {
         border-right: 2px dotted #9aebcd;
         padding-top: 30px;
    }

    div.case-studies-grid div.portfolio-item.studies-4 {
         padding-top: 30px;
    }
}

.panels-elements {
    position: relative;
}

@media (min-width: 1200px){
  .panels-text {
      position:absolute; 
      top:50%; 
      left:50%; 
      transform: translateY(-50%); 
  }
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  border-radius: 10px;
}

@media (min-width:1200px){
  .videoWrapper {
    position: relative;
    padding-bottom: 28.125%; /* 16:9 */
  }
}

.videoWrapper iframe {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}
/*
@media (min-width:992px) and (max-width:1199px){

  .videoWrapper iframe {
      height: 60%;
    }
}

@media (min-width:1200px){

  .videoWrapper iframe {
      height: 90%;
    }
}
*/


/* The following rule is to cover IE10 when used with Windows 8 - if our site was 'snapped' to a sidebar, the 
viewport metatag would no longer apply - in that case the following rule would set the viewport attributes */
@-ms-viewport {
    width: device-width;
}

/*
@media (min-width: 1200px) {

    div.case-studies-grid div.portfolio-item {
        border-right: 2px dotted #9aebcd;
    }

    div.case-studies-grid div.portfolio-item.studies-4 {
        border-right: none;
    }

}
*/

/*
@media (max-width: 900px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
*/