/* alters to adaptive visual and style to final client */
body{
    overflow-x: no-display;
}

label {
    font-weight:600;
}

.reguas_position1 {
    position:fixed;
    background-color:#000;
    opacity:0.1;
}			

#page-head{
    overflow:auto;    
}

.justify-content-center {
    border-top-right-radius:1.5em;
    opacity:0.7;
    padding-top:4em;
    padding-bottom:4em;
    margin-bottom:4em;
}
@media (max-width: 800px) {
    .justify-content-center{
        border-top-right-radius:1.5em;
        opacity:0.8;		
        margin-bottom:0;
    }
}

.features-icons {
  padding-top: 7rem;
  padding-bottom: 2rem;
  background-image: radial-gradient(#eee,#FFF);
}

.features-icons .features-icons-item {
  min-height: 20rem;  
}

.features-icons:hover {   
    background-color: #eee;
    -webkit-animation-name: color-features-icons;
    animation-name: color-features-icons;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

/*This is the animation used to change colors; In this instance, I made sure to have the same color at 0% as I did at 100% */
@-webkit-keyframes color-features-icons {
    0% {background-color: #eeeeee6a;}
    50% {background-color: #fff;}
    100% {background-color: #eeeeee6a;}        
}

@keyframes color-features-icons {
    0% {background-color: #eeeeee6a;}
    50% {background-color: #fff;}
    100% {background-color: #eeeeee6a;} 
}

.showcase{
    background-image: linear-gradient(180deg,transparent,#FF0E0C1C);
    
    -webkit-animation-name: color-showcase;
    animation-name: color-showcase;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
@-webkit-keyframes color-showcase {
    0%{background-color:#FF0E0C1A;}
    15% {background-color:#FF0E0C09;}
    45% {background-color:transparent;}
    100% {background-color:#FF0E0C2A;}         
}
@keyframes color-showcase {
    0%{background-color:#FF0E0C1A;}
    15% {background-color:#FF0E0C09;}
    45% {background-color:transparent;}
    100% {background-color:#FF0E0C2A;}
}


/* usos HOSTINGER buttons */
/* #673DE6 */
/* #673DFF */
/* #673DDF */
/* #673DA9 */
.btn-hostinger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #673DE6;
  --bs-btn-border-color: #673DE6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #673DFF;
  --bs-btn-hover-border-color: #673DFF;
  --bs-btn-focus-shadow-rgb: 103, 61, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #673DDF;
  --bs-btn-active-border-color: #673DDF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #673DA9;
  --bs-btn-disabled-border-color: #673DA9;
}

/* usos NUBANK buttons */
/* #820AD1 */
/* #820AFF */
/* #820ADF */
/* #8F5E9F */
.btn-nubank {
  --bs-btn-color: #fff;  
  --bs-btn-bg: #820AD1;
  --bs-btn-border-color: #820AD1;  
  --bs-btn-hover-color: #fff;  
  --bs-btn-hover-bg: #820AFF;
  --bs-btn-hover-border-color: #820AFF;  
  --bs-btn-focus-shadow-rgb: 130, 10, 255;  
  --bs-btn-active-color: #fff;  
  --bs-btn-active-bg: #820ADF;
  --bs-btn-active-border-color: #820ADF;  
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccc;  
  --bs-btn-disabled-bg: #8F5E9F;
  --bs-btn-disabled-border-color: #8F5E9F;
}

/* usos honey-a buttons */
/* honey-a #4396f9 */
/* #439DFF */
/* #439DDF */
/* #439DA9 */
.btn-honey-a {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4396f9;
  --bs-btn-border-color: #4396f9;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #439DFF;
  --bs-btn-hover-border-color: #439DFF;
  --bs-btn-focus-shadow-rgb: 103, 61, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #439DDF;
  --bs-btn-active-border-color: #439DDF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #439DA9;
  --bs-btn-disabled-border-color: #439DA9;
}

/* honey-b #a4b6ee */
/* #439DFF */
/* #439DDF */
/* #439DA9 */
.btn-honey-b {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a4b6ee;
  --bs-btn-border-color: #a4b6ee;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a4bDFF;
  --bs-btn-hover-border-color: #a4b6ee;
  --bs-btn-focus-shadow-rgb: 103, 61, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a4bDDF;
  --bs-btn-active-border-color: #a4bDDF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #a4bDA9;
  --bs-btn-disabled-border-color: #a4bDA9;
}

/* alterado em 02-2025 */
.masthead {
	padding-top: 74px;
	padding-bottom: 0;
	overflow-x:hidden;	    
}
.masthead .masthead-heading {
	font-size: 2.05rem;
	line-height: 2.50rem;
}
.masthead .masthead-subheading {
  font-size: 0.95rem;
}
.masthead .masthead-avatar {
	max-width:	15rem;
	width:	auto;
	height: auto;
	max-height:	8rem;
}

@media (min-width: 992px) {
	.masthead {
		padding-top: 104px;
		padding-bottom: 0;
	}
	.masthead .masthead-heading {
		font-size: 3.25rem;
		line-height: 3.5rem;
	}
	.masthead .masthead-subheading {
		font-size: 1.05rem;
	}
}

.headers-v251a {
	/* most cases on gradients is not supported */
	background: #1abc9c;
	
	/* to animation */
    background: linear-gradient(360deg, #1abc9c, #2c3e5080);
	
	-webkit-animation-name: headers-v251a-colors;
    animation-name: headers-v251a-colors;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
/*This is the animation used to change colors; In this instance, I made sure to have the same color at 0% as I did at 100% */
@-webkit-keyframes headers-v251a-colors {
	15% {background: linear-gradient(45deg, #1abc9c, #2c3e5080);} 
	30% {background: linear-gradient(90deg, #1abc9c, #2c3e5080);}	
	45% {background: linear-gradient(180deg, #1abc9c, #2c3e5080);}	
	60% {background: linear-gradient(225deg, #1abc9c, #2c3e5080);}
	75% {background: linear-gradient(270deg, #1abc9c, #2c3e5080);}
	90%{background: linear-gradient(315deg, #1abc9c, #2c3e5080);}	
}
@keyframes headers-v251a-colors {
    15% {background: linear-gradient(45deg, #1abc9c, #2c3e5080);} 
	30% {background: linear-gradient(90deg, #1abc9c, #2c3e5080);}	
	45% {background: linear-gradient(180deg, #1abc9c, #2c3e5080);}	
	60% {background: linear-gradient(225deg, #1abc9c, #2c3e5080);}
	75% {background: linear-gradient(270deg, #1abc9c, #2c3e5080);}
	90%{background: linear-gradient(315deg, #1abc9c, #2c3e5080);}	
}