body{
  background: -webkit-linear-gradient(#1d023b, #002b53, rgb(43, 1, 78), rgb(54, 1, 65)); 
  height: expand-view-port;
}

@keyframes hide {
  from { opacity: 1 }
  to   { opacity: 0 }
}

.Qalert-box {
  animation: hide 2s 2s forwards;
  padding: 15px;
  margin-bottom: 20px;
  color: rgb(255, 255, 255);
  background: -webkit-linear-gradient(#21ad3fe1 -20% ,#13550296 60%);
  border: 1px solid transparent;
  border-radius: 4px;
}

.btnSRCPR{
  background-color:#FF75A0; 
  color:#ffffffcc; 
  position:relative;
  margin: 0px auto;
  border: none;
  width:100%; 
  text-align: center;
  text-decoration: none;
  display: block;
  /*font-size: 16px;
  margin: 4px 2px; 
  padding: 12px; */
  transition-duration: 0.4s;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 500;
  max-width:540px; 
  padding:21px 0px; 
  letter-spacing:1px;
}


.maoMC{
  text-align:center;
  font-size:1.4rem;
  color:#ffffffcc;
  letter-spacing:2.1px;
  font-weight: 600;
  font-family: 'Dosis', sans-serif;
  margin:96px auto 6px;
  /*barlow*/
}

.letterSRCPR2{
  font-weight:400; 
  color:#ffffffdd;
}

.btnSRCPR2{
  background-color:#01C5C4;
  /*FF5DA2rosachiclete-867AE9 LILAS BONITINHO*/
  color:#ffffff; 
  position:relative;
  border: none;
  width:100%; 
  text-align: center;
  text-decoration: none;
  display: block;
  transition-duration: 0.4s;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 500;
  max-width:540px; 
  letter-spacing:1px;
  padding: 27px 0px;
  margin:0px auto 3px;
}


.sticky-msg {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding: 9px;
}

.buttonMC-msg {
  position:relative;
  margin-left: auto;
  margin-right: auto;
  border: none;
  background-color: #a48bd6af;
  color: #ffffffb5;
  
  width:86vw; 
  padding: 12px;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  display: block;
  transition-duration: 5s;
  animation: stick-msgColor 33.3s infinite ease-in-out;
  cursor: cell;
  font-size: 0.9rem;
  font-weight: 500;

}

@keyframes stick-msgColor {
  0%   {background-color:#a48bd6af; }
  25%  {background-color:#7724c5d5; }
  50%  {background-color:#612d92cc; }
  75%  {background-color:#c264dfbe;}
  100% {background-color:#a48bd6af;}
}


.buttonMC-msg:hover {
  background-color: #008CBA;
  color: white;
  text-decoration: none !important;
} 


.buttonMC:focus, .buttonMC:active, .buttonMC:hover {
  background-color: #008CBA;
  color: white;
  text-decoration: none;
}

.buttonMC {
  position:relative;
  margin-left: auto;
  margin-right: auto;
  border: none;
  background-color: #a48bd654;
  color: #ffffffb5;
  
  width:86vw; 
  padding: 18px;
  text-align: center;
  text-decoration: none;
  display: block;
  /*font-size: 16px;
  margin: 4px 2px; 
  padding: 12px; */
  transition-duration: 0.4s;
  cursor: pointer;
  margin-bottom: 15px;
  font-size: 1.3rem;
  font-weight: 510;
}

.btnMC2{
  background-color: #08e1afbf;
  color:#ffffffde;
}

#slidenavT {
    display : block;
    width:50%;
    height:100%;

    
}

.material-icons {
  font-size: 14px;
  color:#ffffff62;
  line-height:0;
}




.Qsuccess {
  color: #ffffffd8;
  background-color: #caa4ee9f;
  border-color: #d6e9c6;
  margin: 5px;
  text-align: center;
  padding: 5px;
  vertical-align:middle;
  padding-top: 1px
}

.Qerror {
  color: #690448;
  background-color: #63065ea8;
  border-color: #d6e9c6
}

/* --------------------------QUIZ PROGRESS BAR */

.progressQuizC{
  background-color: #ccf124;
  background: #9b0356;
  width: 100%;
  height: 25px;
  display: inline-block;
}

.progress-container2 {
  
  width: 100%;
  height: 20px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar2 {
  display: inline-block;
  height: 80px;
  
  width: 0%;
  text-align: center;
  margin: remove;
  
}



.uk-dotnav>*>* {
  background: #ccf124;
}

.slidecontainer {
  /*width: 100%; /* Width of the outside container */
  /* background: #ce7d04; */
  height: 35px; /* Specified height */
  margin: 10px;
  margin-left: -12px;
  position: inherit;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  
  appearance: none;
  width: 100%;  /* Full-width */
  height: 15px; /* Specified height */
  background: -webkit-linear-gradient(left, rgb(230, 14, 133), rgba(230, 14, 133, 0));  /* Grey background */
  background-position: bottom;
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  /*-webkit-transition: .2s; /* 0.2 seconds transition on hover */
  /*transition: opacity .2s;*/
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 30px; /* Set a specific slider handle width ou 60,44 85,28*/
  height: 42.33px; /* Slider handle height */
  background: url('/../static/img/icon/mc-slider-quizW.svg');
  background-repeat: no-repeat;
  align-self: right;
  
  
  
  
  /* background: #04AA6D;  Green background */
  /* cursor: pointer; Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 35px; /* Set a specific slider handle width */
  height: 35px; /* Slider handle height */
  background: url('/../static/img/icon/iconTorax.svg');
  fill: rgb(67, 221, 6);
  cursor: pointer; /* Cursor on hover */
}

/* FIM------------------------ QUIZ PROGRESS BAR */



.gridemproc1{
  display: flex;
  flex-direction: row;
  position:relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  
  padding: 6vw;
  padding-bottom: 0px;
  align-self: center;  
}



.imgemproc1{
  position:relative;
  padding-left: 3vw;
  padding-right: 3vw;
  flex:40%;
  /* opacity: 100%;
  mix-blend-mode:hard-light; */
}

.subLogin{
  display: flex;
  flex-direction: row;
  position:relative;
  margin-left: auto;
  margin-right: 0px;
  justify-content: flex-end;
  
  padding: 3vw;
  padding-top: 10px;
  
}

.subflex{
  display: flex;
  flex-direction: row;
  position:relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  justify-content: space-around;
  
  padding: 6vw;
  padding-top: 10px;
  
}

.subflex div {
  text-align: center;
  flex: 33%;
  font-size: 21px;
  
  background: -webkit-linear-gradient(left, #1f013800 3%,#3a036d 100%);
  margin: 5px;
}

.subLogin div{
  text-align: center;
  flex: 63%;
  font-size: 1rem;
  border-left: 9px solid rgba(202, 118, 241, 0.788);
  border-right: 6px solid rgba(202, 118, 241, 0.603);
  background: -webkit-linear-gradient(left, #1f013800 3%,#3a036d 100%);
  margin: 3px;
}

.subLogin div p {
  text-decoration: none;
  text-decoration-color: none;
  text-decoration-line: none;
  margin-bottom: 0px;
  padding: 6px;
  color: rgb(198, 150, 236);
}

.subflex div p {
  text-decoration: none;
  text-decoration-color: none;
  text-decoration-line: none;
  margin-bottom: 0px;
  border-left: 12px solid rgb(118, 192, 241);
  padding: 6px;
  color: rgb(198, 150, 236);
}

.subflex div:hover, .subLogin div:hover {
  background: -webkit-linear-gradient(left, #1f013800 12%,#844abb 100%);
  
}

.subflex div a p i{
  color: rgb(152, 68, 221);
  margin-right: 9px;
}

.subLogin div a p i{
  color: rgb(152, 68, 221);
  /* margin-right: 9px; */
  padding-top: 3px;
}

.msgemproc1{
  flex:60%;
  color: #ffffff;
  padding: 3vw;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 200;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient( #1f013800 12%,#3a036d 51%, #1f013800 90%);
  margin-top: 0px;
  
}

.msgaprovado{
  flex:40%;
  color:#b7dbf3ce;
  padding: 1vw;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 400;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient( #1f013800 12%,#09499c 130%);
  margin-top: 0px;
  
}

@media (max-width: 800px){
  .gridemproc1  {
    flex-direction: column;
    text-align: center;
  }

}

@media (max-width: 700px){
  .subflex  {
    flex-direction: column;
    text-align: center;
  }

}

.boaideia2{
  color: #e770f7a4;
  width: 81vw;
  position:relative;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.3rem;
  background: -webkit-linear-gradient( #1f01380a 12%,#3a036d 110%);
  padding: 18px;
  text-align: center;
  display: block;
  
}


.boaideia{
  color: #e770f7a4;
  width: 81vw;
  position:relative;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  background: -webkit-linear-gradient( #1f01380a 12%,#3a036d 110%);
  padding: 18px;
  text-align: center;
  display: block;
  
}




h1{  
  color: #faf9f9d3;
  font-size: xx-large;
  font-weight: 600;
  font-family: 'Dosis', sans-serif;
}

h4{
  color:#0c035eec;
  font-size: 18px;
  font-weight: 100;
  line-height: 120%;
  font-family: 'Barlow', sans-serif;
}


h3{
  color:#0c035eec;
  font-size: 33px;
  font-weight: bold;
  font-family: 'Dosis', sans-serif;
  text-shadow: 2px 2px 4px #4bd1fa67;
}

.tListSub{
  color: #ffffff;
  font-size: large;
  font-weight: 400;
  font-family: 'Dosis', sans-serif;
  
  
}



.uk-modal-close-full{
  background-color: #ffffff00;
}



.tListSub2{
  color: #137ab6;
  font-size: large;
  font-weight: 400;
  font-family: 'Dosis', sans-serif;
  text-decoration: wavy;
  text-decoration-line:initial;
  text-decoration-style:solid;
  text-decoration-color:#43dd06 ;

  
  
}



.txtCard, span.txtCard{
  color:#ffffffea;
  font-size: 13.5px;
  font-weight: 500;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.693);  
}

.txtCard2, span.txtCard2{
  color:#ffffff;
  font-size: 13px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.693);  
}

.boxLeg{
  padding: 0;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;  
  bottom:0;
}

.boxRef{
  
  width: 100%;
  height: 100%;
  mix-blend-mode:overlay;
  border-width: 3px;
  
  /* padding-top: 10px;
  padding-bottom: 10px; 
  line-height: 1; */ 
  
}

.boxHack{
  
  width: 100%;
  height: 100%;
  mix-blend-mode:color-dodge;
  border-width: 3px;
  
  
  /* opacity: 0.81;
  padding-top: 10px;
  padding-bottom: 10px; 
  line-height: 1; */ 
  
}


.cboxHack{
  background: -webkit-linear-gradient(#1f01382c -20%,#3a036d 60%);
}

.cboxLegTS1{
  background: -webkit-linear-gradient(#ee638f69 -20%,#e75382d3 60%);
  color: #2f054bd3;  
}

.cIconMCapT{
  fill:#dd067c;
  color:#dd067c;
}

.cIconMCapA{
  fill: #ce7d04;
  color:#ce7d04;
}

.cIconMCapMS{
  fill:rgb(0,137,140);
  color:rgb(0,137,140);
}

.cIconMCapMI{
  fill:rgb(8, 121, 187);
  color:rgb(8, 121, 187);
}

.cIconMCapEA{
  fill:rgb(255,209,0);
  color:rgb(255,209,0);
}

.cIconMCapN{
  fill:rgb(5, 226, 160);
  color:rgb(5, 226, 160);
}



.cboxLegTS2{
  background: -webkit-linear-gradient(#c5065577 -20%,#c506569c 60%);
}

.cboxLegTS3{
  background: -webkit-linear-gradient(#7e075077 -20%,#7e0750a4 60%);
}

.cboxLegTS4{
  background: -webkit-linear-gradient(#e01c6e77 -20%,#e01c6ec0 60%);
}


.cboxVid{
  background: -webkit-linear-gradient(#da149e2c -20%,#9b0356 60%);
}

.boxConteinerTop{
  vertical-align: bottom;
}
.boxConteiner{
  vertical-align: bottom;
}


.uk-grid>*{
  /* padding-left:5px ; */
  padding:5px;
} 

.uk-navbar-container{
  background: -webkit-linear-gradient(#090125b9,#09012546);
  height: 80px;  
  }




.uk-navbar-container:not(.uk-navbar-transparent) {
  background: -webkit-linear-gradient(#00092ea1, #00092e7a);
    
}

.uk-lightbox-button {
  background: none;
  height: 400px;
}



.uk-position-medium {
  margin: 0px;
}

/* .uk-navbar-nav>li{
  
} */

.uk-navbar-nav>{
  vertical-align: auto;
}

/* .uk-section-primary{
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12));
  
} */

.uk-navbar-item{
  color: rgba(255, 255, 255, 0.651);
  font-size: large;
  font-family: 'Barlow', sans-serif;
}

 .iconLogo {
  height: 99px;
  width: 99px;
  border: 10px;
} 

.iconTeste{
  fill:#ce7d04
}

.iconLogoRP{
  height: 60px;
  width: 60px;
  border: 10px;
}

.st1{
  fill: #dd067c;
  color: #ce7d04;
}

circle#elip2{
  fill: rgb(173, 226, 49);
  fill-opacity: inherit;
  r:199;

}

circle#elip2:hover {
  fill: rgba(158, 20, 140, 0.5);
  stroke-width: 6;
  stroke: rgba(12, 225, 233, 0.5);  
  r: 66;  
}

polyline#seta{
  fill: #9b0356;
}

svg.iconTeste.uk-svg>switch>g>circle.st1{
  fill:rgb(0, 225, 255);
  r:195;
  stroke:#dd067c;
}



svg.iconTeste.st1.uk-svg{
  fill:rgb(0, 225, 255);
  r:95;
  stroke:#dd067c;
}



/* ---bicicleta
body{ overflow:hidden; }

.icon {
  --size: 70px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  transition: .12s;
  
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-bike {
  background: black;
  animation: 4s frames infinite linear;
  
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
}

@keyframes frames {
  0% { transform:translatex(100vw) }
  25% { background: red; }
  75% { background: lime; }
  100% { transform:translatex(-100%) }
}

---bicicleta no html
<i class="icon icon-bike" style="--size:150px"></i>



.icon {
  width: 50px;
  height: 50px;
}

body {
  padding: 30px;
}

.expand-link {
  display: inline-block;  
}
.expand-link:hover,
.expand-link:active {
  transform: rotate(90deg)  scale(1.4);
}
.expand-link:hover svg,
.expand-link:active svg {
  fill: red;
} */


/* .iconTorax:hover{ --funciona tbm, mas so quando passa em cima do fill, por isso é melhor usar no container
  fill:#e431d5;
  ---tem que mudar o nome no arquivo svg para funcionar

  .ossos{
  fill:#e431d5
}

.uk-navbar-item:hover, .uk-navbar-item:focus, .uk-navbar-item:active, .uk-navbar-item>.uk-active{
  fill: #14dcf7;
}
.uk-navbar-nav>li.uk-active>a{
  color: rgb(253, 234, 56);
  fill:#2b025a;
}

.uk-navbar-nav>.iconTorax>a:hover{
  fill:#7b10f5;
}
} */

/* svg>.uk-navbar-item>.uk-active>.uk-svg{
  fill:#e4d93e;
} */

/* .uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a.uk-open, .uk-navbar-nav>li>a:focus{
  color: rgb(163, 10, 156);
} */