html, body{
    height: 100%;
}
.progress-bar-score{
    --progress: 0;
    height: 30px;
    background-color:gray;
    display: flex;
  }
  
  .progress-bar-score::before{
    content: "";
    width: calc(var(--progress) * 1%);
    background-color: hsl( calc(var(--progress) * 1.2) , 80%, 45%);
    transition: all 1s ease;
  }
.background-gradient{
    background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,12,64,1), rgba(168,85,137,1));
}

.shadow-nav{
    box-shadow: 0px 3px 6px #797979;
}

.box-principal{
    border: 2px solid #ffffff6c;
    border-radius: 15px 15px 15px 15px;
    opacity: 1;
}

.opacidade{
    opacity: 1;
}
.img-width{
    width: auto;
    opacity: 1;
    border-radius: 15px 0px 0px 15px;
}

.icones{
    animation: color-change 5s infinite;
}

a#link-contato{
    color: white;
}
a#link-contato:hover{
    color: transparent;
    -webkit-text-stroke: 2px rgba(168,85,137,1);    
}

.hr3 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, rgb(255, 255, 255), transparent);  
  }

@keyframes color-change {
    0% { color: transparent;
        -webkit-text-stroke: 1px #FC5C7D; }
    25% { color: transparent;
        -webkit-text-stroke: 1px #FC5C7D;     }
    50% { color: transparent;
        -webkit-text-stroke: 1px #6A82FB;     }
    75% { color: transparent;
            -webkit-text-stroke: 1px #6A82FB;     }
    100% { color: transparent;
            -webkit-text-stroke: 1px #FC5C7D;     }
  }

  .btn-wi {
	box-shadow:inset 0px 1px 0px 0px #ffffff00;
	background:linear-gradient(to bottom, #ffffff00 5%, #f6f6f600 100%);
	background-color:#ffffff00;
	border-radius: 0px 8px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 35px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff00;
}
.btn-wi:hover {
    color:rgba(168,85,137,1)
	/*background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;*/
}
.btn-wi:active {
	position:relative;
	top:1px;
}

.btn-wi-card {
	box-shadow:inset 0px 1px 0px 0px #ffffff00;
	background:linear-gradient(to bottom, #ffffff00 5%, #f6f6f600 100%);
	background-color:#ffffff00;
	border-radius: 0px 8px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff00;
}
.btn-wi-card:hover {
    color:rgba(168,85,137,1)
	/*background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;*/
}
.btn-wi-card:active {
	position:relative;
	top:1px;
}

.citacao{
	position: relative;
	top: 25%;
	left: 25%;
	width: 50%;
	height: auto;
	text-align: center;
}

@media screen and (max-width: 767px) {

	.box-principal{
		border: none;
	}
	.esconder-elemento{
	  display: none;
	}
	.img-width{
		width: auto;
		opacity: 1;
		border-radius: 0px;
		border: 1px solid rgba(255, 255, 255, 0.541);
	}
  }