@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}
:root {
  --w: tan(atan2(var(--_w),1px));
  --h: tan(atan2(var(--_h),1px));
}

#stories {
	width: 70vw;
	height: 80vh;
	display: grid;
	overflow-y: hidden;
	overflow-x: scroll;
	padding: 0 0;
	border-radius: 20px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* Hide scrollbar in Firefox */
  	scrollbar-color: transparent transparent; /* Optional: Ensure thumb/track are invisible */
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);
	margin: auto auto;
	/* bug do chrome */
	overscroll-behavior-x: none;
	outline: none;

	grid-auto-columns: 100%;
}

#stories::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}

.story {
	width: 100%;
	/*width:  350px;*/
	margin: 0px;
	padding: 0 0;
	grid-row: 1;
	scroll-snap-align: start;
	vertical-align: middle;
	font-family: "TheSans_6_SemiBold_Plain";
	font-size: 1.0em;
	color: #444444;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: left top;
	background-size: cover;
	justify-content: center;
}

#splash {
	background-color: #ffffff;
}

.cardDestaques {
	background-image: url("/img/pexels-quang-nguyen-vinh-222549-2135677.jpg");
}
.cardAquisicoes {
	background-image: url("/img/208.jpg");
}
.cardSistemas{
	background-image: url("/img/pexels-tkirkgoz-11512424.jpg");
}
.cardCidadao{
	background-image: url("/img/pexels-karola-g2-6465.jpg");
}

.cardInformacao {
	background-image: url("/img/47949.jpg");
}
.cardServicos {
	background-image: url("/img/pexels-tomfisk-1595108.jpg");
}
.cardNormas {
	background-image: url("/img/pexels-pixabay-265216.jpg");
}

.cardVemai {
	background-image: url("/img/pexels-mvdheuvel-2284170.jpg");
}

.natal {
	background-image: url("/img/pexels-george-dolgikh-551816-1303081.jpg");
}

.svgIMG {
   display: inline;
   margin-left: auto; 
   margin-right: auto; 
   height: 32px;
   vertical-align: middle;
}

.month {
	font-size: 1.4em;
	color: #fff;
	margin-left: 0px;
	margin-top: 0px;
	text-shadow: 2px 2px #808080;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 20px 0px 20px 0px;
	background-color: rgba(0, 128, 12, 0.70);
	
}
#backButton{
	cursor: pointer;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 40px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #083160;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  font-size: 30px;
  color: #fff;
  text-align: center;
}

#forwardButton{
	cursor: pointer;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 40px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #083160;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  font-size: 30px;
  color: #fff;
  text-align: center;
}

.animateButton {
  animation: pulse 3s infinite;
  animation-timing-function: ease-out;
}

#forwardButton:focus, #forwardButton:active, #forwardButton:hover{
	animation: none;
}

.fwdIcon {
  display: inline-block;
  vertical-align: middle;
}

@keyframes pulse {
    0%,100% {
	background-color: #003A70;
    }
    50% {
	background-color: #3d9b35;
    }
}
a {
	color: #3d9b35;
}

.bwdIcon {
  display: inline-block;
  vertical-align: middle;
  transform: scale(-1, 1);
}


@media only screen and (max-width: 450px) {
	#backButton{
		display: none;
	}
	#forwardButton{
		display: none;
	}

	#stories{
		position: absolute;
		top: 20px;
		height: calc(100% - 40px);
		width: 100%;;
		grid-auto-columns: 100%;
		box-shadow: none;
	}
	.story {
		width: var(--w);
	}

       .svgIMG {
          /*display: block; */
          margin-left: auto; 
          margin-right: auto; 
          margin-bottom: 10px; 
          width: 20%;
         /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         border-radius: 50%;*/
       }

}

@media screen and (min-width: 1990px) {
    body, html {font-size: 2vh;}

	#stories{
	border-radius: 4vh;
	}
.svgIMG {
   height: 3vh;
}

#backButton{
  left: 4vh;
  width: 6vh;
  height: 6vh;
  border-radius: 3vh;
  font-size: 4.5vh;
}

#forwardButton{
  right: 4vh;
  width: 6vh;
  height: 6vh;
  border-radius: 3vh;
  font-size: 4.5vh;
}
.month {
	font-size: 3vh;
	text-shadow: 0.2vh 0.2vh #808080;
	padding-left: 2vh;
	padding-right: 2vh;
	border-radius: 2vh 0px 2vh 0px;
	background-color: rgba(0, 128, 12, 0.70);
	
}
}