.close {
  color:#FFFFFF;
  text-align:left;
  padding: 5px;
  cursor:pointer;
    position: absolute;
  top:0;
  right:0;
  z-index:902;
}

#cta {text-align:left;}
  a.btn {
    line-height: 2em;
    padding: 0.5em;
    background: #008099;
    width: 10em;
    border-radius: 0;
    width: 15em;
    font-size: 0.8em;
    color: #FFFFFF;
    text-decoration:none;
    padding:10px 21px 10px;
    text-transform:uppercase;
    text-align:left;
	text-decoration: none;
}
  a:hover.btn, a:active.btn, a:focus.btn  {    
    background:#00596B;
}

#modal {
  background: rgb(24,23,23);
  color:#FFF;
  padding:2em;
  z-index:901;
  display:none;
  filter: drop-shadow(0 0 0.75rem #0080998f);
}
 #modal ul li {
    color:#fff;
    list-style:none;
    line-height:30px;
    font-size:18px;
	background: url(https://www.precor.com/sites/default/files/icons/check-white-20x15.png) left center no-repeat;
	padding-left: 2em;
   text-align:left;
  }
	#overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index:900;
    display:none;
}

	.close {
		position: absolute;
		top:0;
		right:0;
		z-index:1000;
		padding:0.5em
		}
@media only screen and (min-width : 800px) {
    #modal {
      width: 650px;
      position: fixed;
      top: 30%; 
      left: 50%;
      left: calc(50% - 180px);
      margin-top: -100px;
      margin-left: -150px;
      background: url(https://www.precor.com/sites/default/files/site-features/opt-in-background.jpg) #1e262a top left;
      background-repeat: no-repeat;
      border-radius: 5px;
      padding:2em;
      z-index: 901; /* 1px higher than the overlay layer */
	  overflow: visible;
	  background: url(https://www.precor.com/sites/default/files/site-features/precor-at-home-ad-bg.jpg);
      background-color: #1e262a;
      background-position: 65% 0%;
  }
  #modal h1 {
    color:#fff;
    text-align:left;
    padding:0;
    margin:0;
    font-size: 32px;
  }
  #modal p .subhead {
    color:#fff;
    text-align:left;
    padding:0;    
    font-size:18px;
  }
   #modal ul li {
    color:#fff;
    list-style:none;
    line-height:30px;
    font-size:18px;
	background: url(https://www.precor.com/sites/default/files/icons/check-white-20x15.png) left center no-repeat;
	padding-left: 2em;
  }
  p.subhead {width: 390px;}
}
@media only screen and (max-width : 480px) {
  #modal {
      width: 100%;
      position: fixed;
      top: 10%;
      left:0;
      text-align: center;
      z-index: 901; /* 1px higher than the overlay layer */
      background: url(https://www.precor.com/sites/default/files/site-features/opt-in-background.jpg) #1e262a top left;
   }
   #modal h1 {
    color:#fff;
    text-align:left;
    padding:0;
    margin:0;
  }
   #modal p.subhead {
    color:#fff;
    text-align:left;
    padding:0;    
    font-size:18px;
  }
	.close {
		right:0;
		z-index:902;
	}
	#overlay {
	    z-index:900;
    }
    a.btn {font-size:0.7em;}
}
@media only screen and (min-width : 481px) and (max-width : 799px) {
  #modal {
      width: 100%;
      position: fixed;
      top: 10%; 
      left:0;
      text-align: center;
      z-index: 901; /* 1px higher than the overlay layer */
      background: url(https://www.precor.com/sites/default/files/site-features/opt-in-background.jpg) #1e262a top left;
      
      background: url(https://www.precor.com/sites/default/files/site-features/precor-at-home-ad-bg.jpg);
      background-position: 67% 0%;
   }
  #modal h1 {
    color:#fff;
    text-align:left;
    padding:0;
    margin:0;
  }
   #modal p.subhead {
    color:#fff;
    text-align:left;
    padding:0;    
    font-size:18px;
  }
	.close {
		right:0;
		z-index:902;
	}
	#overlay {
	z-index:900;
 }
}
@media only screen and (max-height : 480px) {
    #modal {top:0;}
}