.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
    pointer-events: none;
}

.cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 8px solid gray;
    border-radius: 50%;
    opacity: .5;
    top: -8px;
    left: -8px;
    animation: cursorAnim2 .5s infinite alternate;
}

@keyframes cursorAnim {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.7);
    }
}

@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.4);
    }
}

@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid red;
}
  

  
  div.a {
  text-align: center;
  }
  

  
  div.b {
  text-align: left;
  }
  

  
  hr {
  border: 0;
  clear:both;
  display:block;
  width: 96%;               
  background-color:#FFFF00;
  height: 1px;
  }
  

  

.form-control:focus {
    
    border-color: #8A99A3;
    -webkit-box-shadow: 0 8px 4px -4px #75818A !important;
    -moz-box-shadow: 0 8px 4px -4px #75818A !important;
    box-shadow: 0 8px 4px -4px #75818A !important;
}

  

  
  /*----------- CAJA ----------- */
  .caja { 
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
  color: #ffffff; 
  width: 800px;
  /*height: 600px;*/
  height: auto;
  font-size: 18px; 
  font-weight: 400; 
  text-align: center; 
  background-color: #455363; 
  margin: 20px auto; 
  overflow: hidden; 
  padding: 5px;  
  /*----------- border: 5px solid #e5e9ed; */
  }
  

  
  /*----------- HEADER ----------- */
  .header { 
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
  color: #ffffff; 
  width: auto;
  height: auto;
  font-size: 18px; 
  font-weight: 400; 
  text-align: center; 
  background-color: #455363; 
  background-image: url('../images/fc.png');
  margin: 20px auto; 
  overflow: hidden; 
  padding: 5px; 
  z-index:-2; 
  position:relative;
  display:block;
  /*----------- border: 5px solid #e5e9ed; */
  }
  

  
  /*----------- OPTION BOX ----------- */
  .optionbox { 
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
  color: #ffffff; 
  width: auto;
  height: auto; 
  line-height: 300%;
  text-align: center; 
  background-color: #1f2935; 
  margin: 0px 20px auto 20px; 
  overflow: hidden; 
  padding: 20px;  
  border: 1px solid #FFFF00; 
  position: relative;
  }

  .optionbox:after {
   content:"";
   position:absolute;
   right:-13px;
   border-right:13px solid transparent;
   border-left:13px solid transparent;
   border-top:13px solid #1f2935;
  }

  .optionbox2 { 
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
  color: #ffffff; 
  width: auto;
  height: auto; 
  text-align: center; 
  background-color: #1f2935; 
  margin: 0px 20px auto 20px; 
  overflow: hidden; 
  padding: 20px;  
  border: 1px solid #FFFF00; 
  position: relative;
  }

  
  /*----------- STATUS BOX ----------- */
  .statusbox-success { 
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
  color: #ffffff; 
  font-size: 12px; 
  font-weight: 400; 
  text-align: center;
  background: #3CB371; 
  margin: 0px 100px 0px 100px; 
  overflow: hidden; 
  padding: 10px;  
  }

  .statusbox-error { 
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
  color: #ffffff; 
  font-size: 12px; 
  font-weight: 400; 
  text-align: center;
  background: tomato; 
  margin: 0px 100px 0px 100px; 
  overflow: hidden; 
  padding: 10px;  
  }