.region-hero {
  /*float: left;*/
  clear: both;
}


body.front .hero-slider .slide-container {
  padding-top: 100px;
}

#block-views-slideshow-block-3 div.banner-slide.wrapper.image-left h1 {
    font-size: 84px;
    letter-spacing: 1px;
}

@media only screen and (min-width: 320px ) and (max-width: 400px) {

    .hero-slider .flex-control-nav {
        text-align: center;
    }

    .hero-slider .flexslider .slides > li {
        height: 600px!important;
    }
}

@media only screen and (max-width: 910px){
    .hero-slider .flexslider {
      position: relative;
      /*background: #cc0000;*/
    }

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

    .hero-slider .banner-slide.image-left .slide-content {
        position: relative;
        padding-top: 0!important;
        -webkit-transform: translateY(0%)!important;
        -ms-transform: translateY(0%)!important;
        transform: translateY(0%)!important;
    }

    .hero-slider .flexslider .slides > li {
        /*height: auto!important;*/
    }

    #block-views-slideshow-block-3 div.banner-slide.wrapper.image-left h1 {
        font-size: 45px !important;
    }

    #block-views-slideshow-block-3 div.banner-slide.wrapper.image-left p {
        font-size: 21px !important;
    }
}


.hero-slider .flexslider:before, .flexslider:after {
  content: "";
  display: table;
}

.hero-slider .flexslider .slides > li {
    height: 400px;
}

.hero-slider .flexslider:after {
  clear: both;
}

.hero-slider .flexslider .slides {
  margin: 0;
  height: 400px;
}

.hero-slider .flexslider .slides .slide-container {
  background-position: center;
  height: 480px;  /* fixed height to make sure the height won't change between diff content, keep the full-size bg-color */
}

/* Banner sections and orientations */

.banner-slide {
  margin-top: 100px;
  padding: 20px;
  /*background: #CC0000;*/
}

.hero-slider .banner-slide.image-left .slide-content {
    position: relative;
    padding-top: 44%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hero-slider .banner-slide.image-right .slide-content {
    position: relative;
    padding-top: 44%;
    -webkit-transform: transformslateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.banner-slide.image-left .field {
  float: right;
}

.banner-slide.image-right .field {
  float: left;
}

.banner-slide .field {
  float: left;
}

.banner-slide h3 {
  font-size: 26px;
  margin: 0;
  /*text-transform: uppercase;*/
  /*color: #fff;*/
  line-height: 1.2;
}

.banner-slide p {
    font-size: 18px;
    line-height: 30px;
    /*color: #fff;*/
}

.banner-slide .btn {
    margin-top: 0px!important;
}

.banner-slide.color-block p{
    color: #646565!important;
}

.banner-slide.color-white p {
    color: #ffffff!important;
}

.banner-slide .image {
  display: none;
}

/* Elements */

.color-red {
	color: #CC0000;
}

.color-red:hover {
    color: white!important;
    background:#cc0000;
}

.color-black {
	color: #000000;
}

.color-white {
	color: #ffffff;
}

.color-white:hover {
    color: #cc0000!important;
}

a.color-white:hover {
    background: #fff!important;
}

.back-red {
	background-color: #CC0000;
}

.back-black {
	background-color: #000000;
}

.back-white {
	background-color: #ffffff;
}

.border-red {
	border: 3px solid #CC0000;
}

.border-black {
	border: 3px solid #000000;
}

.border-white {
	border: 3px solid #ffffff;
}

.border-white:hover {
    border-color: #ffffff;
}




/* flexslider customized for hero-slider */

/* Control Nav */
.hero-slider .flex-control-nav, .carousel-control-paging {
  padding-left: 0;
}

.hero-slider .flex-control-nav {
  width: 98%;
  text-align: right;
  position: absolute;
  bottom: 15px;
  z-index: 9;
}

.hero-slider .flex-control-nav li, .carousel-control-paging li {
  margin: 0 10px; display: inline-block; zoom: 1; *display: inline;
}

.hero-slider .flex-control-paging li a, .carousel-control-paging li a {
  width: 21px;
  height: 21px;
  display: block;
  background: none;
  border: 1px solid #fff;
  cursor: pointer;
  text-indent: 9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

.hero-slider .flex-control-paging li a:hover, .carousel-control-paging li a:hover {
  background: #e8e8e8;
}

.hero-slider .flex-control-paging li a.flex-active, .carousel-control-paging li a.carousel-active {
  background: #fff;
  cursor: default;
}

.carousel-controls {
  position:relative;
}

.carousel-control-paging {
  width:100%;
  text-align:center;
  margin:0;
}

.carousel-control-paging {
  position:absolute;
  z-index:100;
  left:0;
  top:400px;
}

.front .navbar-primary.divider-bottom {
	margin-bottom: 40px;
    /*display: none;*/
}


@media screen and (min-width: 820px) {

  .hero-slider .flexslider {
      /*background: #cc0000;*/
      position: relative;
  }

  .banner-slide {
    margin-top: 0;
    padding: 0;
  }

  .banner-slide .image {
    width: 50%;
    height: 300px;
    padding-top: 50px;
    float: left;
    display: block;
  }

  .banner-slide .slide-content {
    float: left;
    width: 50%;
  }

  .banner-slide.image-left .image img {
    float: right;
  }

    .banner-slide.image-right .image img {
    float: left;
  }

  .banner-slide.image-left .slide-content {
    width: 48%;
    float: left;
    padding-left: 2%;
  }

    .banner-slide.image-right.slide-content {
        width: 48%;
        float: left;
        padding-right: 2%;
    }


  .banner-slide.image-right-wide .image {
    width: 630px;
  }

  .banner-slide.image-right-wide .slide-content {
    width: 300px;
    margin-right: 30px;
  }

  .banner-slide.image-top .image, .banner-slide.image-top .slide-content {
    width: 960px;
    height: auto;
  }

  .color-red p, .color-red h3 {
  	color: #CC0000 !important;
  }

  .color-black p, .color-red h3 {
  	color: #000000 !important;
  }

  .color-white p , .color-white h3 {
  	color: #ffffff !important;
  }
}