* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

.bgslider {
 background-image: url("../images/logo-gbs15.png"); 
/* background-image: url("../images/gbslogo.png"); */
/* background-repeat: no-repeat; */
background-size: 1280px 630px; 
/* background-size: cover; */
/*height: 70%;*/
/*width: 70%;*/
}
.bgslider2 {
background-repeat: no-repeat; 
background-size: 400px 400px;
max-width: 700px; 
background-color: #ffff00;
position: relative;
top: 50px;
margin: auto;
/* background-size: cover; */
/*height: 70%;*/
/*width: 70%;*/
}
/* Slideshow container */
.slideshow-container {
  max-width: 600px;
  position: relative;
  top:100px;
  margin: auto;
}

/* Slideshow container */
.slideshow-container2 {
  max-width: 600px;
  position: relative;
  top:50px;
  margin: auto;
}

.over-marg1 {
  margin-left: 15%;
  margin-bottom: -10%;
}

.over-marg2 {
  margin-bottom: -10%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Title text */
.titletext {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.titletext2 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 12px 8px 25px;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.titletext3 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 12px 8px 35px;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.titletext4 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px 8px 35px;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.titletext5 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px 8px 65px;
  position: absolute;
  top: 0;
  width: 100%;
/*  text-align: center; */
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  white-space: pre-wrap;
}

/* Caption text */
.text {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px; 
  width: 100%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.text2 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px; 
  width: 100%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.text5 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px; 
  width: 85%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* Number text (1/3 etc) */
.numbertext {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.numbertext2 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.numbertext5 {
/*  color: #f2f2f2; */
  color: #ffff00;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  position: relative;
  top: 100px;
  margin: 0 2px;
/*  background-color: #bbb; */
  background-color: #808080;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dotgroup {
  margin-left: 25%;
  margin-right: 25%;
}

.active, .dot:hover {
/*  background-color: #717171; */
  background-color: #ffff00;  
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

#rectangle {
   width: 600px;
   height: 300px;
   background: blue;
}
.gbs-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.gbs-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.gbs-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.gbs-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.gbs-animate-top-rev{position:relative;animation:animatetoprev 0.4s}@keyframes animatetoprev{from{top:0;opacity:1} to{top:-300px;opacity:0}}
.gbs-animate-left-rev{position:relative;animation:animateleftrev 0.4s}@keyframes animateleftrev{from{left:0;opacity:1} to{left:-300px;opacity:0}}
.gbs-animate-right-rev{position:relative;animation:animaterightrev 0.4s}@keyframes animaterightrev{from{right:0;opacity:1} to{right:-300px;opacity:0}}
.gbs-animate-bottom-rev{position:relative;animation:animatebottomrev 0.4s}@keyframes animatebottomrev{from{bottom:0;opacity:1} to{bottom:-300px;opacity:0}}