body {
   width:98%;
   margin:auto;
   margin-top: 8px;
   background-color:#f2f2f2;
   box-shadow:0 0 2px 4px lightgray;
   border-radius:4px;
   color:black;
}

header {
   background-color: #c3e4f1;
   padding-left: 0;
   padding-top: 16px;
   padding-right: 0;
   padding-bottom: 16px;
}

.container-fluid {
  display: grid;
  background-color: #39b1a4;  
  grid-template-columns: 25% 25% 25% 25%;
  padding: 10px;
  font-color: black;
}

.container-fluid > div {
  background-color: #fffff0;
  padding: 10px;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  margin: 2px 4px 4px 2px;
}

.ns-margin:hover {
	background-color:powderblue;
}

a {
  color: darkblue;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  text-decoration: none;
  text-shadow: 1px 1px 2px;
}

@media screen and (max-width: 960px) {
	.container-fluid {
		grid-template-columns: 33% 34% 33%;
	}
}

@media screen and (max-width: 768px) {
	.container-fluid {
		grid-template-columns: 50% 50%;
	}
}

/* Ajusta cor de fundo, padding e fonte do rodapé */
footer {
   background-color: #c3e4f1;
   padding: 14px;
   font:status-bar;
   display: flex;
}

.rod-esq {
 width: 50%;  
 text-align: left;
}

.rod-dir {
 width: 50%;  
 text-align: right;
}

@media screen and (max-width: 780px) {
  .container-footer {
   flex-wrap: wrap;
   }
  .rod-dir , .rod-esq {
   width: 100%;
   text-align: center;
   }
}

* {box-sizing: border-box;}

/* body {font-family: Verdana, sans-serif; margin:0} */
.mySlides {display: none;}
img {vertical-align: middle;}
       
/* Slideshow container */
.slideshow-container {
   background-color: #f2f2f2;
   max-width: 1000px;
   position: relative;
   margin: auto;
}

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

/* 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);
}

/* Caption text */
.text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
}

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

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

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

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

@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}
}