/* GLOBAL STYLES
-------------------------------------------------- */

body {
  height: 100%;
  width: 100%;
  padding-bottom: 40px;
  font-family: 'Roboto Condensed', sans-serif;
  margin-bottom: 60px;
  font-size: 14px;
  letter-spacing: .9px;
  line-height: 24px;
  color: #737272;
  font-weight: 400;
  
}

a {
  color: #666666;
}

a:focus,
a:hover {
  color: #1f2021;
  text-decoration: underline;
}

h1 {
  margin-bottom: 40px;
  color: #1f2021;  
  font-weight: 700;
  line-height: 1.1;
  font-size: 28px;
}

.fancy {
  border: 2px solid #576C11;
  padding: 20px;
}

.container {
  width: 960px;
}

.content-container {
  padding-top: 120px;
}

.services .fa {
  
  color: #fff;
  font-size: 30px;
  padding-top: 5px;
}

.fa.pull-left {
  width: 40px;
}

h3 {
  color: #1f2021;
  font-weight: 500;
}

.services h3 {
  color: #fff;
  font-weight: 500;
}

.services h4 {
  overflow: hidden;
  color: #fff;
}

.services .white-border-col {
  border-bottom: 2px solid #fff;
}

.slideanim {
  visibility: hidden;
}

.slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
}


/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */

@keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

.navbar-default {
  background-color: #fff;
}

.navbar-default .navbar-nav>li>a {
  color: #666666;
  font-weight: bold;
  font-size: 15px
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #1f2021 !important;
  background-color: #fff !important;
  border-bottom: 2px solid #69941b;
}

.navbar-collapse {
  padding-top: 20px;
}

.navbar-brand {
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar-header .navbar-brand {
  background: rgba(0, 0, 0, 0) url("http://www.freshecho.com/img/1_FE.jpg") no-repeat scroll center center / cover;
  display: block;
  transition: background 0s ease 0s;
}

.navbar-header .navbar-brand {
  height: 108px;
  width: 316px;
}

.navbar-brand,
.navbar-nav>li>a {
  
  padding-left: 30px;
  padding-right: 30px;
  text-transform: uppercase;
}

.navbar-nav {
  border-radius: 4px;
  background-color: #fff;
}


/* MARKETING CONTENT
-------------------------------------------------- */


/* Center align the text within the three columns below the carousel */

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vcenter {
  display: flex;
  align-items: center;
}

.content-section {
  padding-top: 60px;
}

.contact-section {
  background-color: #f6f6f6;
  font-size: 22px;
  color: #1f2021;
}

.contact-section .pipe {
  position: absolute;
  top: 0;
  right: -1px;
  width: 0;
  border-right: 2px solid #1f2021;
  height: 100%;
}

.clientquote-section {
  background-color: #f8f9fa;
  
  padding-top: 20px;
  padding-bottom: 20px;
}

.clientquote-section p {
  font-size: 22px;
}

.clientquote-section p>.large-type {
  font-size: 30px;
  color: #f4511e;
  font-weight: bold;
}

.member {
  position: relative;

}

.member hr {
  width: 50%;
  height: 2px;
  border: none;
  background: #2d2d2d;
  margin: 10px auto;
}

.member h3 {
  margin: 10px 0 0;
  font-size: 24px;
  letter-spacing: 1px;
  font-family: "atrament-web", Helvetica, arial, sans-serif;
  font-weight: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.sep-section {
  border-bottom: 2px solid #eaeaea;
  height: 2px;
}

.services {
  background-color: #69941b;
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer {
  position: absolute;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 150px;
  background-color: #B2B2B2;
  line-height: 16px
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 15px;
}

.totop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 104400;
}

.totop a,
.totop a:visited {
  display: block;
  width: 40px;
  height: 40px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  border-radius: 45px;
}

.totop a {
  background: #69941b none repeat scroll 0 0;
}

.totop a:visited {
  background: #69941b none repeat scroll 0 0;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* Carousel base class */

.carousel {
  height: 493px;
  margin-bottom: 40px;
  padding-top: 108px;
}

.carousel-control {
  padding-top: 100px;
}

.carousel-control.right,
.carousel-control.left {
  background-image: none;
  color: #f4511e;
  margin-bottom: -150px;
}

.carousel-indicators {
  bottom: -40px;
}

.carousel-indicators li {
  border-color: #f4511e;
}

.carousel-indicators li.active {
  background-color: #f4511e;
}


.carousel-caption {
  z-index: 10;
}

.carousel .item {
  height: 493px;
  background-color: #fff;
}

.carousel-inner > img {
  margin: auto;
}

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  /*min-width: 100%;*/
  height: 493px;
  left: -9999px;
  /*important */
  right: -9999px;
  /*important */
  margin: 0 auto;
  /*important */
  max-width: 1385px;
  /*important */
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next,
.carousel-control .icon-prev {
  top: 65%;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  /* The navbar becomes detached from the top, so we round the corners */
  /*.navbar-wrapper .navbar {
    border-radius: 4px;
  }*/
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
}