.btn {
    position: relative;
  
    display: block;
    margin: 16px auto;
    overflow: hidden;
  
    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    
    background-color: #2ecc71;
    color: #ecf0f1;
    font-family: 'Roboto', monospace;
    transition: background-color .3s;
  }
  
  .btn:hover, .btn:focus {
    background-color: #27ae60;
  }
  
  .btn > * {
    position: relative;
  }
  
  .btn span {
    display: block;
    padding: 8px 16px;
  }
  
  .btn:before {
    content: "";
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    display: block;
    width: 0;
    padding-top: 0;
      
    border-radius: 100%;
    
    background-color: rgba(236, 240, 241, .3);
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .btn:active:before {
    width: 120%;
    padding-top: 120%;
    
    transition: width .2s ease-out, padding-top .2s ease-out;
  }
  
  /* Styles, not important */
  *, *:before, *:after {
    box-sizing: border-box;
  }



  .btn-red {
    position: relative;
  
    display: block;
    margin: 16px auto;
    padding: 0;
  
    overflow: hidden;
  
    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    
    background-color:rgb(204, 46, 113);;
    color: #ecf0f1;
    font-family: 'Roboto', monospace;
    transition: background-color .3s;
  }
  
  .btn-red:hover, .btn-red:focus {
    background-color:rgb(204, 46, 113);;
  }
  

  
  .btn-red > * {
    position: relative;
  }
  
  .btn-red span {
    display: block;
    padding: 8px 16px;
  }
  
  .btn-red:before {
    content: "";
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    display: block;
    width: 0;
    padding-top: 0;
      
    border-radius: 100%;
    
    background-color: rgba(236, 240, 241, .3);
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .btn-red:active:before {
    width: 120%;
    padding-top: 120%;
    
    transition: width .2s ease-out, padding-top .2s ease-out;
  }
  
  /* Styles, not important */
  *, *:before, *:after {
    box-sizing: border-box;
  }

/* 
  .btn {
    position: relative;
  
    display: block;
    margin: 30px auto;
    padding: 0;
  
    overflow: hidden;
  
    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    
    background-color: #2ecc71;
    color: #ecf0f1;
    
    transition: background-color .3s;
  }
  
  .btn:hover, .btn:focus {
    background-color: #27ae60;
  }
  
  .btn > * {
    position: relative;
  }
  
  .btn span {
    display: block;
    padding: 8px 16px;
  }
  
  .btn:before {
    content: "";
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    display: block;
    width: 0;
    padding-top: 0;
      
    border-radius: 100%;
    
    background-color: rgba(236, 240, 241, .3);
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .btn:active:before {
    width: 120%;
    padding-top: 120%;
    
    transition: width .2s ease-out, padding-top .2s ease-out;
  }
  
  /* Styles, not important */
  /* *, *:before, *:after {
    box-sizing: border-box;
  } */ 


  .custom-select {
    position: relative;
    font-weight:bold;
    width: 40%;
    text-align: left;
    font-family: 'Handlee', 'monospace';
    border: 1px solid ivory;
    border-radius: 4px;
    }
  
  .custom-select select {
    display: none; /*hide original SELECT element: */
  }
  
  .select-selected {
    background-color: rgb(32, 32, 32);
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    content: "";
    top: 16px;
    right: 21px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: ivory transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: ivory transparent transparent transparent;
    top: 16px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    color: ivory;
    border: 2px solid ivory;
    border-radius: 4px;
    font-size: 18px;
    padding: 9px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: 'Cutive Mono', monospace;
  }
  

  /* Style items (options): */
  .select-items {
    position: absolute;
    color: ivory;
    background-color: rgb(32, 32, 32);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(16, 16, 16, 0.1);
  }