

#container {/*padding: 60px 40px 100px;*/ padding:0; margin:0 auto; min-height:280px;}
#container:after{ width:100%; height:0; clear:both; content:""; display:block;}
#main {/*margin-left: 420px; margin-top: -25px;overflow: hidden;*/ width:960px; margin:0 auto;}

.slider { margin: 0px auto 0px auto!important; position:relative;}
#carousel{ position:absolute; bottom:10px; right:100px; width:275px; z-index:9;}
#carousel li {margin-right: 5px;/* width:auto!important*/}
#carousel img {display: block; opacity: 1; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}

.flex-caption-outer{position:absolute; top:0; right:80px; height: 280px; opacity: 0.5; width: 320px; background:#000;}
.flex-caption{  box-sizing:border-box; padding:0 10px; font-family:; position:absolute; top:0; right:80px; height: 280px; width: 320px; }
.flex-caption h4{ color:#ffcc00; font-size:20px; font-weight:bold; line-height: 25px; }
.flex-caption .description p{ color:#fff!important; margin:5px 0; font-size:14px!important; line-height:20px;}
.flex-caption .description p a { color:#fff!important; font-size:14px!important; line-height:20px;margin:5px 0 0 0; display: inline-block; }
.flex-caption .description div{ color:#fff!important; margin:3px 0; font-size:14px!important; line-height:20px;}
.flex-caption .description div a { color:#fff!important; }
.flex-caption .description p.learnmore a{ color:#ffcc00!important; font-size:11px!important; font-weight:bold!important; background:url(../images/custom/learn-more.png) no-repeat right top; padding-right:10px; text-transform:uppercase; text-decoration:none;}
.flex-caption .description{ border-bottom:1px solid #202020; border-top:1px solid #202020; overflow-x: hidden; overflow-y: hidden; padding:5px 0;}
.flex-caption .description ul{ list-style:none; padding:0 0 0 15px;}
.flex-caption .description ul li{ list-style:none; font-size:14px; line-height:20px; color:#fff!important; padding:2px 0;}
.flex-caption .description ul li a{ color:#fff!important;}



.flex-container a:hover,.flex-slider a:hover,.flex-container a:focus,.flex-slider a:focus { outline: none;}
.slides,.slides > li,.flex-control-nav,.flex-direction-nav { margin: 0; padding: 0; list-style: none;}
.flex-pauseplay span { text-transform: capitalize;}

#carousel  .flex-active-slide{ border:3px solid #fff;}

.flex-direction-nav li{ list-style:none!important;}


/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li { position:relative; display: none; -webkit-backface-visibility: hidden;}
.flexslider .slides img { width: 100%; display: block;}
.flexslider .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .flexslider .slides { display: block;}
* html .flexslider .slides { height: 1%;}
.no-js .flexslider .slides > li:first-child { display: block;}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {margin:0 0 0px 0; background: #; position: relative; zoom: 1; }
.flexslider .slides { zoom: 1;}
.flexslider .slides img {
  height: auto;
}
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease;
transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.carousel li {margin-right: 5px;}
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%;  z-index: 10; overflow: hidden;
opacity: 1; cursor: pointer;color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;}
.flex-direction-nav a:before {  font-family: "flexslider-icon";  font-size: 40px;  display: inline-block;  content: "";  color: rgba(0, 0, 0, 0.8);  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }
.flex-direction-nav a.flex-next:before {  content: "";}

.flex-direction-nav .flex-prev{ text-indent:-999px; background:url(../images/custom/arrows-h.png) no-repeat; width:16px; height:17px; top:30px; left:10px; top:50%; display:none;}
.flex-direction-nav .flex-next{ text-indent:-999px; background:url(../images/custom/arrows-h.png) -55px -16px; width:16px; height:15px; top:30px; right:10px; top:50%; display:none;}

#carousel .flex-direction-nav .flex-prev { display:block; left: -20px;  background:url(../images/custom/arrows-h.png) no-repeat; width:16px; height:17px; top:30px; text-indent:-99999px;}
#carousel .flex-direction-nav .flex-next { display:block; right: -20px;  background:url(../images/custom/arrows-h.png) -55px -16px; width:16px; height:15px; top:30px; text-indent:-99999px;}



.flexslider:hover .flex-direction-nav .flex-prev {  opacity: 1; }
.flexslider:hover .flex-direction-nav .flex-prev:hover {  opacity: 1;}
.flexslider:hover .flex-direction-nav .flex-next {  opacity: 1;  right: 10px;}
.flexslider:hover .flex-direction-nav .flex-next:hover {  opacity: 1;}

.flex-direction-nav .flex-disabled {  opacity: 1!important;  filter: alpha(opacity=0);  cursor: default;}
.flex-pauseplay a {  display: block;  width: 20px;  height: 20px; position: absolute;  bottom: 5px;  left: 10px;  opacity: 0.8;  z-index: 10;  overflow: hidden;
  cursor: pointer;  color: #000;}
.flex-pauseplay a:before {  font-family: "flexslider-icon";  font-size: 20px;  display: inline-block;  content: '\f004';}
.flex-pauseplay a:hover {  opacity: 1;}
.flex-pauseplay a.flex-play:before {  content: '\f003';}
.flex-control-nav {  width: 100%;  position: absolute;  bottom: -40px;  text-align: center;}
.flex-control-nav li {  margin: 0 6px;  display: inline-block;  zoom: 1;  *display: inline;}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7);}
.flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default;}
.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li { width: 25%; float: left; margin: 0;}
.flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;
-ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.flex-control-thumbs img:hover { opacity: 1;}
.flex-control-thumbs .flex-active { opacity: 1; cursor: default;}



/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/

@media screen and (max-width: 980px) {
 #main{ width:100%;}
#container {min-height:inherit; height:auto;}

}




@media screen and (max-width: 960px) { 
 #carousel{ display:none;}
.flex-caption-outer{ display:; height:100%;}
.flex-caption{ display:;}
.flex-direction-nav .flex-prev{ display:block;}
.flex-direction-nav .flex-next{ display:block}
 
}
 
 
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev { opacity: 1; left: 10px; }
.flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}


@media screen and (max-width:768px){
.flex-caption-outer{ right:2%;}
.flex-caption{ right:2%;}
}



@media screen and (max-width:767px){
.flex-caption h4{ margin-top:3px!important; margin-bottom:3px!important;}
.flex-caption .description{ padding-top:2pz; padding-bottom:2px;}
.flex-caption .description p{ margin-bottom:2px; margin-top:2px;}
}



@media screen and (max-width: 599px){
.flex-caption-outer{ display:none;}
.flex-caption{ display:none;}
}


