@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

@font-face {
  font-family: helveticaneue;
  src: url('HelveticaNeueLTStd-UltLt.otf');
}
:root{
  --amarelo: #FFCC00;
  --cinza: #999999;
}

a {
  color: #FFF !important;
}
.menu{
 width: 100%;
 height: 2%;
 float: right;
 display: flex;
 justify-content: flex-end;
 margin-bottom: -2%;
 margin-top:-2%;
}

.btmn {
margin-top: 60px;
margin-bottom: 8%;
margin-left: 1px;
margin-right: 10px;
}
.btmne {
margin-top: 60px;
margin-bottom: 8%;
margin-left: 1px;
margin-right: 8%; /* 105px */
}

.corpo{
width: 100%;
height: 20%;
background-color: #0f0;
}

.cont{
  height: 340px;
  margin-bottom: 76px;
}

.conteudo{
width: 75%;
height: 20%;
margin-top: 1%;
text-align: center;
/* font-family: Arial, helveticaneue, Helvetica, sans-serif; */
font-family: 'Roboto', sans-serif;
font-size: 18pt;
color: var(--cinza);
}

.carousel--cont{ 
  color:white;
  font-size: 46,5pt;
  font-family: Helvetica, sans-serif;
}
.carousel--cont+p{
  color:white;
}

.contate{
  background-color: var(--amarelo);
  font-size: 22pt;
  width: 320px;
}

html body {
height: 100%;
margin: 0;

 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 font-family: 'Quicksand', sans-serif;
 overflow-x: hidden;
 position: relative;
 /* top: -2.5rem; */
 background-image: url("../img/fundo.jpg");
 background-size: cover;
}

.card-carousel {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 margin-top: -1%;
}

.card-carousel .my-card {
 height: 300px; 
 width: 300px;
 position: relative;
 z-index: 1;
 -webkit-transform: scale(0.6) translateY(-2rem);
 transform: scale(0.6) translateY(-2rem);
 opacity: 0;
 cursor: pointer;
 pointer-events: none;
 transition: 1s;
}

.card-carousel .my-card:after {
 content: '';
 position: absolute;
 width: 100%;
 border-radius: 100%;
 background-color: rgba(0,0,0,0.3);
 bottom: -5rem;
 -webkit-filter: blur(4px);
 filter: blur(4px);
}

.card-carousel .my-card:nth-child(0):before {
 content: '0';
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 font-size: 3rem;
 font-weight: 300;
 color: #fff;
}
.card-carousel .my-card:nth-child(1) {
  background-image: url("img/icones/tributos.png");
}

.card-carousel .my-card:nth-child(2) {
  background-image: url("img/icones/pagamentos.png");
}

.card-carousel .my-card:nth-child(3) {
  background-image: url("img/icones/teste_o_calculo.png");
}

.card-carousel .my-card:nth-child(4) {
  background-image: url("img/icones/documentos_eletronicos.png");
}

.card-carousel .my-card:nth-child(5) {
  background-image: url("img/icones/reinf.png");
}

.card-carousel .my-card:nth-child(6) {
  background-image: url("img/icones/sped.png");
}
 
.card-carousel .my-card:nth-child(1).active {
  background-image: url("img/icones/tributos_selecionado.png");
}

.card-carousel .my-card:nth-child(2).active {
  background-image: url("img/icones/pagamentos_selecionado.png");
}

.card-carousel .my-card:nth-child(3).active {
  background-image: url("img/icones/teste_o_calculo_selecionado.png");
}

.card-carousel .my-card:nth-child(4).active {
  background-image: url("img/icones/documentos_eletronicos_selecionado.png");
}

.card-carousel .my-card:nth-child(5).active {
  background-image: url("img/icones/reinf_selecionado.png");
}

.card-carousel .my-card:nth-child(6).active {
  background-image: url("img/icones/sped_selecionado.png");
}
/* ################################### */


/* ################################### */

.my-card {
 display: flex;
 justify-content: center;
}

.my-card span.text {
 display: inline;
 transition: all 0.5 ease;
}

.my-card.active span.text {
 display: none;
 transition: all 0.5 ease;
}
.my-card:not(.active) {
 position: relative;    
}



.my-card span.text {
 position: absolute;
 text-transform: capitalize;
 bottom: 40px;
 font-size: 2rem;
 font-weight: 600;
}

.card-carousel .my-card.active {
 z-index: 3;
 -webkit-transform: scale(1) translateY(0) translateX(0);
 transform: scale(1) translateY(0) translateX(0);
 opacity: 1;
 pointer-events: auto;
 transition: 1s;
}

.card-carousel .my-card.prev, .card-carousel .my-card.next {
 z-index: 2;
 -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
 transform: scale(0.8) translateY(-1rem) translateX(0);
 opacity: 0.6;
 pointer-events: auto;
 transition: 1s;
}

.content {
min-height: 100%;
}
.footer {
/* position: fixed; */
left: 0;
bottom: 0;
width: 100%;
background-color: #999999;
color: white;
text-align: center;
font-family: 'Roboto', sans-serif;

/* font-family:  arial, Helvetica,  sans-serif;  */
/* font-family: Arial, helveticaneue, Helvetica, sans-serif;  */

font-size: 12pt;
}


/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed;
/*  position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}

@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 2px 16px;
background-color: #fff;
color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
padding: 2px 16px;
background-color: #333;
color: white;
}

.modalz{
z-index:800;

}
.titulo{
  color:green !important;
  font-size: 2pt;
}
.bg-tr{
  background: transparent !important; 
  color:snow !important;
}
.font-snow{
  color:snow !important;
}

.bt-form{
  background: transparent !important; 
  color:snow !important;
  padding: 100% 100px;
}