/* The container */
.containerForm {
    cursor: pointer;
  }
  
  /* Hide the browser's default checkbox */
  .containerForm input {
    position: relative;
    opacity: 0;
    cursor: pointer;
    height: 30;
    width: 30;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: black;
    border-radius:5px;
    margin-right:30px;
    
  }
  
  /* On mouse-over, add a grey background color */
  .containerForm:hover input ~ .checkmark {
    background-color: #343434;
    
  }
  
  /* When the checkbox is checked, add a background */
  .containerForm input:checked ~ .checkmark {
    background-color: black;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .containerForm input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .containerForm .checkmark:after {
    left: 10px;
    top: 7px;
    width: 7px;
    height: 14px;
    border: solid rgb(76, 175, 80);
    border-width: 0 4px 4px 0;

    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }


  /* Floating screenshots */

  .theForce {
   position:relative;
    -webkit-animation:glide 0.5s ease-in-out alternate 10 ;
 }
 
 @-webkit-keyframes glide  {
    from {
       left:0px;
       top:0px;
    }

    
    to {
       left:2px;
       top:0px;
    }
 
 }
