.next {
  background-color: #00a8f3;
  cursor: pointer;
  color: white;
  padding: 15px 25px;
  border-radius: 5px;
}

.next:hover {
color: #fff;
  background-color: #74bad9;
  color: white;
  padding: 15px 25px;
  border-radius: 5px;
}

.buttonerrada{
  padding: 15px 25px;
 
  text-align: center;
 
  outline: none;
  
  background-color: Yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #fff;
  
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:24px;
  text-align: center;
  text-decoration:none;
  background-color:#cc1717;
  display:block;
  position:relative;
  padding:20px 40px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #720505;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buttonerrada:hover {
color: #fff;
background-color:#cc1717;

}

.buttoncerta {
  padding: 15px 25px;
 
  text-align: center;
  
  outline: none;
  
  background-color: Yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #fff;
  
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:24px;
  text-align: center;
  text-decoration:none;
  background-color:#0ed145;
  display:block;
  position:relative;
  padding:20px 40px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #028628;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buttoncerta:hover {
color: #fff;
background-color:#0ed145;

}


.buttonlinksuteis {
  padding: 15px 25px;
 
  text-align: center;
  cursor: pointer;
  outline: none;
  
  background-color: Yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #fff;
  
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:20px;
  text-align: center;
  text-decoration:none;
  background-color:#b83dba;
  display:block;
  position:relative;
  padding:15px 10px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #8c378e;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buttonlinksuteis:hover {
color: #fff;
background-color:#b83dba;

}

.buttonlinksuteis:active {
  color: #fff;
  
   top:10px;
  background-color:#b83dba;
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #8c378e;
}

.buttonreferencias {
  padding: 15px 25px;
 
  text-align: center;
  cursor: pointer;
  outline: none;
  
  background-color: Yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #fff;
  
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:20px;
  text-align: center;
  text-decoration:none;
  background-color:#3f48cc;
  display:block;
  position:relative;
  padding:15px 10px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #262b75;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buttonreferencias:hover {
color: #fff;
background-color:#3f48cc;

}

.buttonreferencias:active {
  color: #fff;
  
   top:10px;
  background-color:#3f48cc;
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #262b75;
}

.buttongabarito {
  padding: 15px 25px;
 
  text-align: center;
  cursor: pointer;
  outline: none;
  
  background-color: Yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #fff;
  
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:20px;
  text-align: center;
  text-decoration:none;
  background-color:#0ed145;
  display:block;
  position:relative;
  padding:15px 10px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #028628;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buttongabarito:hover {
color: #fff;
background-color:#0ed145;

}

.buttongabarito:active {
  color: #fff;
  
   top:10px;
  background-color:#0ed145;
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #028628;
}


.buttonplay {
  padding: 15px 25px;
 
  text-align: center;
  cursor: pointer;
  outline: none;
  
  background-color: Yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #fff;
  
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:24px;
  text-align: center;
  text-decoration:none;
  background-color:#FFA12B;
  display:block;
  position:relative;
  padding:20px 40px;
  
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.buttonplay:hover {
color: #fff;
background-color:#F78900

}

.buttonplay:active {
  color: #fff;
  
   top:10px;
  background-color:#F78900;
  
  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #dedede; /* Set a background color */
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  
}

 
.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Blue */
.info1 {
  border-color: #2196F3;
  color: dodgerblue
}
.info1:hover {
  background: #2196F3;
  color: white;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #fff;
  border-color: var(--color-primary) transparent var(--color-primary) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}