Responsive CSS Modal A Pen by Amen Moja Ra.

index.html

<div class="container">
		<h2>Join Marriott Rewards</h2>
		<p></p>
		<p><a href="#modal" class="btn go">Join Now</a></p>
	</div>

	<div id="modal">
		<div class="modal-content">
			<div class="header">
				<h2>Sign Up</h2>
			</div>
			<div class="copy">
				<section class="l-xs-col-4 l-xs-last-col l-s-col-3 l-sm-col-3 l-m-col-3 l-mml-col-4 l-ml-col-4 l-mll-col-4 l-l-col-4 l-xl-col-4 l-xxl-col-4 l-xxxl-col-4">
				<h2>Member Information</h2>
				






















	
	
		
	

		

	
	
		
			
		
		
		
			
				
		
		
			
		
		
		<div>
			
				
				<label for="field-title">
					Salutation
				</label>
				<select name="title" id="field-title" class="l-margin-bottom"><option value="" selected="selected"></option>
					<option value="MR">Mr.</option>
					<option value="MRS">Mrs.</option>
					<option value="DR">Dr.</option>
					
						<option value="MS">Ms.</option>
					
					<option value="MISS">Miss</option></select>
			
			
			
				
				
					<label for="field-first-name" class="is-field is-required l-clear"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden-text">Required Field</span>First Name</label>
				
					
					
						<input type="text" name="firstName" maxlength="20" value="" id="field-first-name" class="is-field is-required l-margin-bottom l-width-max">
					<label for="field-middle-name" class="is-field l-clear">Middle Name</label>
				<input type="text" name="middleName" maxlength="20" value="" id="field-middle-name" class="is-field l-margin-bottom l-width-max">
					<label for="field-last-name" class="is-field is-required l-clear"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden-text">Required Field</span>Last Name</label>
				
					
					
						<input type="text" name="lastName" maxlength="20" value="" id="field-last-name" class="is-field is-required l-margin-bottom l-width-max">
				
					
						
						
						<label for="field-suffix">
							Suffix
						</label>
						<select name="suffix" id="field-suffix" class="l-margin-bottom"><option value="" selected="selected"></option>
							<option value="JR">Jr</option>
<option value="SR">Sr</option>
<option value="ESQ">Esq</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="MD">MD</option></select>
					
				
			
		</div>
	

				











































<input type="hidden" id="splitEndClass" value="l-xs-last-col l-s-last-col l-sm-last-col l-m-last-col l-mml-last-col l-ml-last-col l-mll-last-col l-l-last-col l-xl-last-col l-xxl-last-col l-xxxl-last-col">


	



	
	
		
	



	<h3>
		Address
	</h3>




<div id="js-form-address" data-inlanguage="" data-district-display="empty" data-town-display="IT" data-state-required="US" data-province-required="CA" data-zip-required="US" data-postal-required="CA" data-siteid="">
	
	
		
			
			
				<label for="field-country" class="is-field is-required"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden-text">Required Field</span>Country</label>
				
		    	<select name="country" id="field-country" class="is-field is-required l-margin-bottom l-width-max"><option value="" disabled="disabled"></option>
    				<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia Hercegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">BR Indian Ocean Terr</option>
<option value="VG">British Virgin Islands</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoro Islands</option>
<option value="CG">Congo</option>
<option value="CD">Congo, Dem. Republic</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curacao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FO">Faeroe Islands</option>
<option value="FK">Falkland Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Terr</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="XA">Gaza</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard &amp; McDonald Islands</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="XI">Indian Ocean Islands</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="CI">Ivory Coast</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Dem. Peoples</option>
<option value="KR">Korea, Republic Of</option>
<option value="CS">Kosovo</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LP">LAO P D&nbsp;R</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LW">Leeward Islands</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macau</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="AN">Netherland Antilles</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn Island</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="LC">Saint Lucia</option>
<option value="WS">Samoa, Ind. State of</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome-Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="GS">S Georgia-S Sandwich</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Soloman Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SH">St Helena</option>
<option value="KN">St Kitts-Nevis</option>
<option value="PM">St Pierre &amp; Miquelon</option>
<option value="VC">St Vincent &amp; The Grenadines</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard &amp; Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikstan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad &amp; Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks &amp; Caicos</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="UV">Upper Volta</option>
<option value="UY">Uruguay</option>
<option value="US" selected="selected">USA</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="WF">Wallis &amp; Futuna</option>
<option value="PS">West Bank</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option></select>
			
		
	
	
	<div id="dynamic-address" class="l-clear clearfix"><fieldset id="fieldset-street" class="l-clear">
				<legend class="is-hidden">Address</legend>
				
				<div class="l-clear clearfix">
					<p class="l-float-left clearfix l-margin-right-half l-margin-bottom-half">
						<input type="radio" name="addressType" value="H" checked="checked" id="field-address-type-h" class="l-float-left">
						<label for="field-address-type-h" class="l-float-left">
							Home
						</label>
					</p>
			
					<p class="l-float-left clearfix l-margin-bottom-half">
						<input type="radio" name="addressType" value="B" id="field-address-type-b" class="l-float-left">
						<label for="field-address-type-b" class="l-float-left">
							Business
						</label>
					</p>
				</div>
			
				
		
				<p id="street1-field">
					<label for="field-street1" class="is-field is-required"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden-text">Required Field</span>Address</label>
					
						
						
							<input type="text" name="street1" maxlength="32" value="" id="field-street1" class="is-field is-required l-margin-bottom l-width-max">
						
					
				</p>
		
				<p id="street2-field">
					<label for="field-street2" class="is-field is-hidden">Address Line 2</label>
	    			
						
						
							<input type="text" name="street2" maxlength="32" value="" id="field-street2" class="is-field l-margin-bottom l-width-max">
						
					
				</p><p id="street3-field">
					<label for="field-street3" class="is-field is-hidden" data-properties="{&quot;address3Label&quot;:&quot;Address Line 3&quot;,&quot;districtLabel&quot;:&quot;District&quot;}" style="display: none;"></label>
					
						
						
							<input type="text" name="street3" maxlength="32" value="" id="field-street3" class="is-field l-margin-bottom l-width-max">
						
					
				</p>
		
				
		
			</fieldset><fieldset id="fieldset-city" class="l-clear">
				<legend class="is-hidden">City</legend>
		
				<p id="city-field">
					<label for="field-city" class="is-field is-required" data-properties="{&quot;cityLabel&quot;:&quot;City&quot;,&quot;townLabel&quot;:&quot;Town&quot;}"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden">Required Field</span>City</label>
					
						
						
							<input type="text" name="city" maxlength="20" value="" id="field-city" class="is-field is-required l-margin-bottom l-width-max">
						
					
				</p>
		
			</fieldset><fieldset id="fieldset-state" class="l-xs-col-2 l-s-col-1 l-sm-col-1 l-m-col-1 l-mml-col-2 l-ml-col-2 l-mll-col-2 l-l-col-2 l-xl-col-2 l-xxl-col-2 l-xxxl-col-2">
				<legend class="is-hidden">State</legend>
				
				<p id="state-field">
					
						
						
							<label for="field-state" class="is-field" data-properties="{&quot;stateLabel&quot;:&quot;State&quot;,&quot;provinceLabel&quot;:&quot;Province&quot;,&quot;stateProvinceLabel&quot;:&quot;State/Province&quot;}"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden">Required Field</span>State</label>
							<select name="stateProvince" id="field-state" class="l-margin-bottom l-width-max js-state-select is-field"><option value="" selected="selected"></option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
						
					
				</p>
	
			</fieldset><fieldset id="fieldset-postal" class="l-xs-col-2 l-s-col-1 l-sm-col-1 l-m-col-1 l-mml-col-2 l-ml-col-2 l-mll-col-2 l-l-col-2 l-xl-col-2 l-xxl-col-2 l-xxxl-col-2 l-xs-last-col l-s-last-col l-sm-last-col l-m-last-col l-mml-last-col l-ml-last-col l-mll-last-col l-l-last-col l-xl-last-col l-xxl-last-col l-xxxl-last-col">
				<legend class="is-hidden">Postal code</legend>
			
				<p id="postal-field">
					
						
						
							<label for="field-zip" class="is-field" data-properties="{&quot;zipLabel&quot;:&quot;Zip code&quot;,&quot;postalLabel&quot;:&quot;Postal code&quot;,&quot;zipPostalLabel&quot;:&quot;Zip code/Postal code&quot;}"><i class="icon icon-asterisk t-form-asterisk"></i><span class="is-hidden">Required Field</span>Zip code</label>
	    				
	    			
					<input type="text" name="postalCode" maxlength="10" value="" id="field-postal" class="is-field l-margin-bottom l-width-max">
				</p>
		
			</fieldset></div>
	
</div>
				







<div>
	<label for="field-telephone-number" class="is-field l-clear">Phone</label>
	<input type="text" name="telephoneNumber" maxlength="16" value="" id="field-telephone-number" class="is-field l-margin-bottom l-xs-col-2 l-s-col-2 l-sm-col-2 l-m-col-2 l-mml-col-3 l-ml-col-3 l-mll-col-3 l-l-col-3 l-xl-col-3 l-xxl-col-3 l-xxxl-col-3">
	
	<label for="field-telephone-type" class="l-clear">
		Type
	</label>
	<select name="telephoneNumberType" id="field-telephone-type" class="l-margin-bottom l-xs-col-2 l-s-col-2 l-sm-col-2 l-m-col-2 l-mml-col-2 l-ml-col-2 l-mll-col-2 l-l-col-2 l-xl-col-2 l-xxl-col-2 l-xxxl-col-2"><option value="HT" selected="selected">Home</option>
		<option value="BT">Business</option>
		<option value="MT">Mobile</option></select>
</div>
   			</section>
			</div>
			<div class="cf footer">
				<a href="#" class="btn">Close</a>
			</div>
		</div>
		<div class="overlay"></div>
	</div>

Responsive-CSS-Modal.markdown

Responsive CSS Modal

A Pen by Amen Moja Ra on CodePen.

License.

style.scss

@import "compass";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/********* CLEARFIX *********/
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

/******** DEMO STYLES ********/
.container {
	margin:0 auto;
	width:960px;
}

.btn {
	background-color: #f6f6f6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(246, 246, 246)), to(rgb(225, 225, 225)));
	background-image: -webkit-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
	background-image: -moz-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
	background-image: -o-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
	background-image: -ms-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
	background-image: linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f6f6f6', EndColorStr='#e1e1e1');
	border: 1px solid #ccc;
	color:#555;
	display:inline-block;
	padding:5px 15px;
	text-decoration:none;
	text-shadow:0 2px rgba(255,255,255,.9);
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	box-shadow:0 1px rgba(0,0,0,.35);
	-moz-box-shadow:0 1px rgba(0,0,0,.35);
	-webkit-box-shadow:0 1px rgba(0,0,0,.35);
}
	.btn:active {
		background-color: #f6f6f6;
		background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(246, 246, 246)), to(rgb(225, 225, 225)));
		background-image: -webkit-linear-gradient(bottom, rgb(246, 246, 246), rgb(225, 225, 225));
		background-image: -moz-linear-gradient(bottom, rgb(246, 246, 246), rgb(225, 225, 225));
		background-image: -o-linear-gradient(bottom, rgb(246, 246, 246), rgb(225, 225, 225));
		background-image: -ms-linear-gradient(bottom, rgb(246, 246, 246), rgb(225, 225, 225));
		background-image: linear-gradient(bottom, rgb(246, 246, 246), rgb(225, 225, 225));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f6f6f6', EndColorStr='#e1e1e1');
	}
	.btn.go {
		background-color: #3dda38;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(61, 218, 56)), to(rgb(39, 187, 63)));
		background-image: -webkit-linear-gradient(top, rgb(61, 218, 56), rgb(39, 187, 63));
		background-image: -moz-linear-gradient(top, rgb(61, 218, 56), rgb(39, 187, 63));
		background-image: -o-linear-gradient(top, rgb(61, 218, 56), rgb(39, 187, 63));
		background-image: -ms-linear-gradient(top, rgb(61, 218, 56), rgb(39, 187, 63));
		background-image: linear-gradient(top, rgb(61, 218, 56), rgb(39, 187, 63));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,EndColorStr='#3dda38', StartColorStr='#27bb3f');
		border: 1px solid #21ac1c;
		color:#fff;
		text-shadow:0 -1px rgba(0,0,0,.4);
	}
		.btn.go:active {
			background-color: #3dda38;
			background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(61, 218, 56)), to(rgb(39, 187, 63)));
			background-image: -webkit-linear-gradient(bottom, rgb(61, 218, 56), rgb(39, 187, 63));
			background-image: -moz-linear-gradient(bottom, rgb(61, 218, 56), rgb(39, 187, 63));
			background-image: -o-linear-gradient(bottom, rgb(61, 218, 56), rgb(39, 187, 63));
			background-image: -ms-linear-gradient(bottom, rgb(61, 218, 56), rgb(39, 187, 63));
			background-image: linear-gradient(bottom, rgb(61, 218, 56), rgb(39, 187, 63));
			filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,EndColorStr='#3dda38', StartColorStr='#27bb3f');
		}

body {
	background:#eee;
	font: 16px/24px Helvetica, sans-serif;
	padding: 30px 0;
}
p {
	margin-bottom:20px;
}

h2 {
	font:600 27px/33px Helvetica, sans-serif;
	margin-bottom:20px;
}

/* Normal styles for the modal */
#modal {
	left:50%;
	margin:-250px 0 0 -40%;
	opacity: 0;
	position:absolute;
	top:-50%;
	visibility: hidden;
	width:80%;
	box-shadow:0 3px 7px rgba(0,0,0,.25);
	box-sizing:border-box;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
	/* Make the modal appear when targeted */
	#modal:target {
		opacity: 1;
		top:50%;
		visibility: visible;
	}
#modal .header,#modal .footer {
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
}
	#modal .footer {
		border:none;
		border-top: 1px solid #e7e7e7;
		border-radius: 0 0 5px 5px;
	}
#modal h2 {
	margin:0;
}
#modal .btn {
	float:right;
}
#modal .copy,#modal .header, #modal .footer {
	padding:15px;
}
.modal-content {
	background: #f7f7f7;
	position: relative;
	z-index: 20;
	border-radius:5px;
}
#modal .copy {
	background: #fff;
}

#modal .overlay {
	background-color: #000;
	background: rgba(0,0,0,.5);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}