/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
.res{
    font-size: 1rem !important;
  }
   .modal-content {
    margin: 10% auto;
    width: 60% !important;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.5s;
  }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */ 
/**************************/
@media (max-width: 75em) {
	/* text-fill */
	.res
	{font-size:3.3rem !important;}
	.modal-content {
    margin: 10% auto;
    width: 60% !important;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.5s;
  }

}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
.res{
    font-size:6.6rem;
}
.modal-content {
    margin: 10% auto;
    width: 60% !important;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.5s;
  }
}


/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
	
	.res{
    font-size:4.4rem;
}
.modal-content {
    margin: 10% auto;
    width: 60% !important;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.5s;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/
@media (max-width: 34em) {
.res{
      font-size:2.4rem;
  }
        
  .modal-content {
    margin: 10% auto;
    width: 100% !important;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.5s;
  }

  
}


/**************************/
/* BELOW 375px (Phones) */
/**************************/
@media (max-width: 24em) {
.res{
      font-size:2.2rem;
  }
        
  .modal-content {
    margin: 10% auto;
    width: 100% !important;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 0.5s;
  }

  
}