/* If you like this, be sure to ❤️ it. */
.wrapper {
    height: 100vh;
    /* This part is important for centering the content */
    display: flex;
    align-items: center;
    justify-content: center;
    /* End center */
    background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
    background: linear-gradient(to right, #834d9b, #d04ed6);
  }
  
  .wrapper a {
    display: inline-block;
    text-decoration: none;
    padding: 15px;
    background-color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    color: #585858;
    font-family: 'Roboto', sans-serif;
  }
  
  .modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, .7);
    transition: all .4s;
  }
  
  .modal:target {
    visibility: visible;
    opacity: 1;
  }
  
  .modal__content {
    border-radius: 4px;
    position: relative;
    width: 500px;
    max-width: 90%;
    background: #fff;
    padding: 1em 2em;
  }
  
  .modal__footer {
    text-align: right;
    
  }
  .modal__footer a {
      color: #585858;
    }
    .modal__footer i {
      color: #d02d2c;
    }
  .modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #585858;
    text-decoration: none;
  }
  
  
  
  
  @import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
  
  
  
  .fa{
    line-height:30px;
    font-size:30px;
    display:inline-bloxk;
    width:35px;
    height:35px;
  }
  .hidden{
    display:none;
  }
  
  input[type=checkbox] + label {
    position:relative;
  } 
  
  input[type=checkbox]:checked + label {
    animation: closing 0.3s forwards ease-in-out,
               moving 0.3s forwards ease-in-out;
  } 
  .pointer-cursor{
     cursor: pointer; cursor: hand;
  }
  .close{
  
      float:right;
      color: #b94b45;
      cursor: pointer; cursor: hand;
  }
  
  .alert-message{
    background-color: #f2dede;
    border: 1px solid rgba(#34495e, 0.25);
    color: #b94b45;
    border-radius: 3px;
    line-height:30px;
    position: absolute;
    top: 0; left: 0;
    display:block;
    width:100%;
    padding: 12px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .9);
    box-shadow: 0px 10px 50px rgba(0,0,0,.6);
    background:#34495e;
  }
  
  @keyframes closing {
    from {
      opacity: 1; 
    }
    to {
      opacity: 0;
    }
  }
  
  @keyframes moving {
    0%, 90% { top: 0; left: 0; }
    100%  { top: -100px; left: 0; }
  }