.wrap { padding: 1em; }
@media (min-width: 43.75em) {

.wrap { padding: 2em; }
}

      
.modal {
  display: block;
  padding: 0 1em;
  text-align: left;
  width: 100%;
}
@media (min-width: 43.75em) {

.modal {
  padding: 1em 0em;
  text-align: left;
  
}
}
    
      
      .modal > label {
        background: #000;
       color: whitesmoke;
        cursor: pointer;
        font-size: 12px;
        display: inline-block;
        
        font-weight: 300;
        padding: 0.3em 1em;
        -webkit-transition: all 0.55s;
        transition: all 0.55s;
       
      }
      @media only screen and (max-width : 707px) {
        .modal {
        display: none;
        }  }
      
      .modal > label:hover {
        -webkit-transform: scale(0.97);
        -ms-transform: scale(0.97);
        transform: scale(1.2);
        animation: fadeIn 0.5s;

	
	
	    }
	    @keyframes fadeIn {
	      from {
		  opacity: 0;
	      }}

     
      
      .modal input {
        position: absolute;
        right: 50px;
        top: -30px;
        z-index: 10;
      }
      
      .modal__overlay {
      color: rgb(192, 10, 10);
        opacity: 0;
        bottom: 0px;
        left: 0;
        position: fixed;
        right: 0px;
        text-align: center;
        top: 0;
        z-index: -800;
      
      }
      
      .modal__box {
   
        background-color: white;
   
        position: absolute;
  
        max-width: 800px;
        width: 100%;
      }
      @media (min-height: 37.5em) {
      
      
        .modal__box {
          left: 45%;
          position: absolute;
          top: 45%;
          -webkit-transform: translate(-50%, -80%);
          -ms-transform: translate(-50%, -80%);
          transform: translate(-50%, -50%);
        }
        }
        @media (min-width: 50em) {
        
        .modal__box { padding: 0.75em; }
        }
      
      .modal__box label {
    
        color: rgb(130, 130, 130);
        cursor: pointer;
        display: inline-block;
        height: 4em;
        line-height:3.5em;
        position: fixed;
        left: 0.5em;
        bottom: -4.5em;
       
        
      }
      
      .modal__box h2 {
        color: #b40e0e;
        padding-top: 100px;
        margin-bottom: 1em;
        text-transform: uppercase;
      }
      
      .modal__box p {
        color: whitesmoke;
        padding-top: 100px;
        text-align: left;
      }
      
      .modal__overlay {
      background-color: white;
      
        overflow: hidden;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(1.0);
        transform: scale(1.5);
        -webkit-transition: all 1.75s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
      }
      
      input:checked ~ .modal__overlay {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 800;
      }
      
      input:focus + label {
        -webkit-transform: scale(0.97);
        -ms-transform: scale(0.97);
        transform: scale(0.97);
      }