/*-- banner section --*/
section.banner {
    margin-top:0px;
	background-color:#ffffff;
}
#slideshow-controller {
  position: absolute;
  bottom: 10px; left:48%;
}
#slideshow-banner ul { 
	position: relative; 
}
#slideshow-banner ul .slideshow-item { 
	position: absolute; 
}
#controller-left {
  position: absolute;
  left: 2%;
  top: 45%;
  cursor: pointer;
}
#controller-right {
  position: absolute;
  right: 2%;
  top: 45%;
  cursor: pointer;
}
.controller-item {
  display: inline-block;
  /*-- w3 --*/
  width: 10px;
  height: 10px;
  background: #007845;
  margin-right: 10px;
  border-radius: 10px;
  opacity: 0.5;
  cursor: pointer;
}
.controller-item-hover {
  opacity: 1;
  background: #ccc;
}

div#slideshow-banner { 
	height:480px; 
	width:100%; 
	max-width:1344px;
	overflow:hidden; 
	position:relative; 
	margin:0px auto; 
}
div#slideshow-banner ul ,div#slideshow-banner ul li { 
	width:100%; 
	height:100%; 
}
div#slideshow-banner ul li img{
	width:100%;
	height:100%;
} 
ul li {
	list-style-type:none;
}
/*-- /banner section --*/


/* 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;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}


@media (max-width:1440px) {
div#slideshow-banner {
    height: 500px;
}
section.banner {
    margin-top:0px;
}
#slideshow-controller {
  position: absolute;
  bottom: 10px; left:47%;
}
}

@media (max-width:1080px) {

div#slideshow-banner {
    height: 378px;
}
#slideshow-controller {
  position: absolute;
  bottom: 10px; left:46%;
}
}

@media (max-width: 1024px) {
div#slideshow-banner {
    height: 358px;
}
}

@media (max-width: 768px) {
div#slideshow-banner {
    height: 269px;
}

}

@media (max-width: 425px) {
div#slideshow-banner {
    height: 149px;
}
#slideshow-controller {
  position: absolute;
  bottom: 10px; left:42%;
}
}

@media (max-width: 375px) {
div#slideshow-banner {
    height: 131px;
}
}