@media (max-width: 1200px){
 .carousel-caption h1 {
        font-size: 48px;
    }
     .carousel-caption p {
        font-size: 17px;
    }
}
@media (max-width: 992px){
 .carousel-caption h1 {
        font-size: 36px;
    }
     .carousel-caption p {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .hs-icons-slider {
        font-size: 50px;
    }
    .navIcons p {
        font-size: 9px;
    }
    .carousel-caption h1 {
        font-size: 20px;
    }
    .carousel-caption p {
        font-size: 13px;
    }
    #hs-slider-container .carousel-caption a {
    font-size: 12px;
    padding: 8px 35px;
}
#hs-slider-container .carousel-caption {
    top: 24%;
    bottom: 24%; 
}
}
@media (max-width: 480px){
 .carousel-caption h1 {
        font-size: 16px;
    }
    #hs-slider-container .carousel-caption p {
    padding: 0 35px;
}
}
@media (max-width: 370px){
    #hs-slider-container .carousel-caption p {
    padding: 0 18px;
}
}
/*@media (max-width: 320px){
 .carousel-caption h1 {
        font-size: 13px;
    }
}*/
@media (min-width: 1200px){
.carousel-caption h1 {
        font-size: 56px;
    }
}
@media (min-width: 769px) {
    .hs-icons-slider {
        font-size: 70px;
    }
    .navIcons p {
        font-size: 14px;
    }
    /*.carousel-caption h1 {
        font-size: 56px;
    }*/
    .carousel-caption p {
        font-size: 18px;
    }
    .item {
        /*background-image: none!important;*/
        background-size: cover;
    }
}
@media (min-width: 767px){
   #hs-slider-container .carousel-caption a {
    font-size: 14px;
    padding: 15px 60px;
}
#hs-slider-container .carousel-caption {
    top: 18%;
    bottom: 18%; 
}  
}
@media (min-width: 480px){
    #hs-slider-container .carousel-caption p {
    padding: 0 60px;
}
}

#hs-slider-container {
    overflow: hidden;
    background-size: cover;
   /* min-height: 86vh;*/
    position: relative;
}

#hs-slider-video {
    position: absolute;
    left: 50%;
    margin-left: -960px;
    width: 100%;
    top: 50%;
    margin-top: -540px;
}

#hs-slider-container .item {
    height: 600px;
    /*transition-duration: 1s;*/
    transition-timing-function:linear;
}

#hs-slider-container .carousel-caption {
 /*   top: 18%;*/
    right: 18%;
    left: 18%;
   /* bottom: 18%;*/
    
}

#hs-slider-container .carousel-caption h1 {
    font-weight: bold;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 0 7px;
   
}

#hs-slider-container .carousel-caption p {
    font-weight: normal;
   /* padding: 0 60px;*/
}

#hs-slider-container .carousel-caption a {
    text-decoration: none;
    font-weight: bold;
   /* font-size: 14px;*/
    color: white;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 4px;
   /* padding: 15px 60px;*/
    position: absolute;
    bottom: 30px;
    -moz-transform: translate(-50%, 0); /* Firefox */
    -ms-transform: translate(-50%, 0); /* IE */
    -webkit-transform: translate(-50%, 0); /* Safari, Chrome, iOS */
    -o-transform: translate(-50%, 0); /* Opera */
    transform: translate(-50%, 0);
}

#hs-slider-container .carousel-caption a:hover {
    border: none;
    background-color: #ff9e15;
}

#hs-slider-container .carousel-control.left,
#hs-slider-container .carousel-control.right {
    background-image: none;
    top: 10%;
    width: 8%;
}

.hs-control-icon {
	position: absolute;
	top: 45%;
	z-index: 5;
	display: inline-block;
	width: 30px;
	height: 30px;
	font-size: 30px;
}

.carousel-control .icon-hs-right {
    right: 50%;
}

#hs-slider-container .carousel-indicators {
	top: 540px;
    height: 40px;
}

.navIconsContainer {
    max-width: 1200px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.navIcons {
    cursor: pointer;
    padding-top: 30px;
    padding-bottom: 20px;
    height: 150px;
}

.navIcons span {
    color: #ff9e15;
}

.navIcons p {
    color: #202020;
    margin-top: 16px;
    margin-bottom: 0;
}

.icon-active{
    background-color: #ff9e15;
}

.icon-hover {
    background-color: rgba(255, 158, 21, 0.5);
}

.icon-active span, .icon-hover span {
    color: #ffffff;
}

.icon-active p, .icon-hover p {
    color: #ffffff;
}
/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}