html, body{
	background: #E8F9F9;
}

input[type="radio"], input[type="text"], input[type="tel"], .mm, .yy, button{
	appearance: none;
}

form label{
	background-color: #18BFD1;
	color: #FFFFFF;
	cursor: pointer;
	font-family: 'OpenSans';
	text-align: center;
}

input[type="text"], input[type="tel"], select, .divide{
	background-color: #FFFFFF;
	font-family: 'OpenSans';
}

#donoHero h1, #donateForm h1, input[type="text"], input[type="tel"], .thanks{
	color: #042033;
}

::placeholder, select, .divide{
	color: #ccc;
}

.letsGo, .submitCash{
	background-color: #18BFD1;
	color: #FFFFFF;
	position: relative;
	z-index: 10;
}

.skySwoop{
	transform: scaleX(1);
}

.thanks{
	display: none;
	text-align: center;
}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	#donoHero{
		background-image: url(../images/mobile/donohero_m.webp);
		margin-bottom: 21.428571428571429%;
		min-height: 100vh;
	}

	#donoHero .container{
		padding-bottom: 42.857142857142857%;
	}

	#donoHero h1{
		font-size: 14vw;
	}

	#donoHero h1:nth-of-type(1){
		padding-top: 28.571428571428571%;
	}

	#donoHero h1:nth-of-type(2){
		margin-bottom: 7.142857142857142%;
	}

	#donoHero h1:nth-of-type(2){
		margin-left: 35.714285714285714%;
	}

	.letsGo{
		margin-left: 19.642857142857143%;
	}

	.skySwoop{
		padding-top: 60%;
		top: -66vw;
	}

	#donateForm{
		margin-bottom: 50%;
	}

	form{
		margin-bottom: 14.285714285714286%;
	}

	#donateForm h1, .thanks{
		font-size: 3.5vw;
		letter-spacing: 8%;
		margin-bottom: 7.142857142857142%;
	}

	form label{
		border-radius: 2.5vw 0 2.5vw 0;
		display: inline-block;
		font-size: 3vw;
		padding: 3.5% 0 3.5% 0;
  		width: 28.571428571428571%;
	}

	input[type="radio"]{
		display: none;
	}

	.black{
		background-color: #000;
	}

	.ten, .twofive, .sevenfive, .hundred, .fn, .smallInput, .yy{
		margin-right: 7.142857142857142%;
	}

	.fifty{
		margin-right: 0;
	}

	.topRadios{
		margin-bottom: 3.571428571428571%;
	}

	.bottomRadios, input[type="tel"]{
		margin-bottom: 14.285714285714286%;
	}

	.customamount, .placefields .smallInput:nth-of-type(2){
		margin-right: 0;
	}

	input[type="text"], input[type="tel"], .placefields select{
		border: 2px solid #18BFD1;
		border-radius: 2.5vw 0 2.5vw 0;
		font-size: 3vw;
		padding: 2.5%;
	}

	.namefields input[type="text"], .cardcode{
		width: 46.428571428571429%;
	}

	.namefields, .longType, .placefields, .expcode{
		margin-bottom: 3.571428571428571%;
	}

	.longType{
		width: 100%;
	}

	.smallInput{
		width: 28.571428571428571%;
	}

	.mm{
		border: solid #18BFD1;
		border-radius: 2.5vw 0 0 0;
		border-width: 2px 0 2px 2px;
		font-size: 3vw;
		padding: 2.5%;
	}

	.divide{
		border: solid #18BFD1;
		border-width: 2px 0 2px 0;
		font-size: 4vw;
		padding-top: 2.5%;
	}

	.yy{
		border: solid #18BFD1;
		border-radius: 0 0 2.5vw 0;
		border-width: 2px 2px 2px 0;
		font-size: 3vw;
		padding: 2.5%;
		padding-right: 21.428571428571429%;
	}

	.submitCash{
		border: none;
		margin-left: 71.428571428571429%;
	}

	#donateForm .bigBub{
		left: 60%;
		top: 104%;
	}

	#donateForm .medBub{
		left: 2%;
		top: 100%;
	}

	#donateForm .smallBub{
		left: 30%;
		top: 114%;
	}
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}
	
	#donoHero{
		background-image: url(../images/tablet/donohero_t.jpg);
		margin-bottom: 10%;
		min-height: 100vh;
	}

	#donoHero .container{
		padding-bottom: 33.333333333333333%;
	}

	#donoHero h1{
		font-size: 10vw;
	}

	#donoHero h1:nth-of-type(1){
		margin-left: 8.611111111111111%;
		padding-top: 16.666666666666667%;
	}

	#donoHero h1:nth-of-type(2){
		margin-bottom: 3.333333333333333%;
		margin-left: 34.444444444444444%;
	}

	.letsGo{
		margin-left: 31.111111111111111%;
	}

	.skySwoop{
		padding-top: 60%;
		top: -55%;
	}

	#donateForm{
		margin-bottom: 40%;
	}

	form{
		margin-bottom: 6.666666666666667%;
	}

	#donateForm h1{
		font-size: 2.5vw;
		letter-spacing: 8%;
		margin-bottom: 3.333333333333333%;
		margin-left: 17.222222222222222%;
	}

	form label{
		border-radius: 2.25vw 0 2.25vw 0;
		display: inline-block;
		font-size: 2vw;
		line-height: 3.4vw;
		padding: 1.3% 0 1.3% 0;
  		width: 13.888888888888889%;
	}

	input[type="radio"]{
		display: none;
	}

	.ten, .twofive, .sevenfive, .hundred, .fn, .smallInput{
		margin-right: 3.333333333333333%;
	}

	.ten, .sevenfive, .fn, .longType, .cty, .expcode{
		margin-left: 25.833333333333333%;
	}

	.fifty{
		margin-right: 0;
	}

	.topRadios{
		margin-bottom: 1.666666666666667%;
	}

	.bottomRadios, input[type="tel"]{
		margin-bottom: 6.666666666666667%;
	}

	.customamount, .placefields .smallInput:nth-of-type(2){
		margin-right: 0;
	}

	input[type="text"], input[type="tel"], .placefields select{
		border: 2px solid #18BFD1;
		border-radius: 2.25vw 0 2.25vw 0;
		font-size: 2vw;
		padding: 1.388888888888889%;
	}

	.namefields input[type="text"]{
		width: 22.5%;
	}

	.cardcode{
		width: 30%;
	}

	.namefields, .longType, .placefields, .expcode{
		margin-bottom: 1.666666666666667%;
	}

	.longType{
		width: 48.333333333333333%;
	}

	.smallInput{
		width: 13.888888888888889%;
	}

	.mm{
		border: solid #18BFD1;
		border-radius: 2.25vw 0 0 0;
		border-width: 2px 0 2px 2px;
		font-size: 2vw;
		padding: 1.75%;
	}

	.divide{
		border: solid #18BFD1;
		border-width: 2px 0 2px 0;
		font-size: 2.5vw;
		padding-top: 1.75%;
	}

	.yy{
		border: solid #18BFD1;
		border-radius: 0 0 2.25vw 0;
		border-width: 2px 2px 2px 0;
		font-size: 2vw;
		margin-right: 4.333333333333333%;
		padding: 1.75%;
		padding-right: 11.25%;
	}

	.submitCash{
		border: none;
		margin-left: 56.5%;
	}

	#donateForm .bigBub{
		left: 62%;
		top: 102%;
	}

	#donateForm .medBub{
		left: 5%;
		top: 107%;
	}

	#donateForm .smallBub{
		left: 36%;
		top: 118%;
	}

	.thanks{
		font-size: 2.5vw;
		letter-spacing: 8%;
		margin-bottom: 3.333333333333333%;
	}

}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container{
		/*width:978px;*/
		width:95.5%;
	}

	#donoHero{
		background-image: url(../images/desktop/donohero_d.jpg);
		margin-bottom: 3.067484662576687%;
		min-height: 100vh;
	}

	#donoHero .container{
		padding-bottom: 42.94478527607362%;
	}

	#donoHero h1{
		font-size: 7.5vw;
	}

	#donoHero h1:nth-of-type(1){
		margin-left: 17.177914110429448%;
		padding-top: 12.269938650306748%;
	}

	#donoHero h1:nth-of-type(2){
		margin-bottom: 3.067484662576687%;
		margin-left: 34.355828220858896%;
	}

	.letsGo{
		margin-left: 28.834355828220859%;
		transition: 300ms;
	}

	.skySwoop{
		padding-top: 60%;
		top: -56%;
	}

	#donateForm{
		margin-bottom: 36.809815950920245%;
	}

	form{
		margin-bottom: 6.134969325153374%;
	}

	#donateForm h1{
		font-size: 1.85vw;
		letter-spacing: 8%;
		margin-bottom: 3.067484662576687%;
		margin-left: 17.177914110429448%;
	}

	#donateForm h1:nth-of-type(1){
		padding-top: 6.134969325153374%;
	}

	form label{
		border-radius: 1.5vw 0 1.5vw 0;
		display: inline-block;
		font-size: 1.5vw;
		padding: 1.4% 0 1.4% 0;
  		width: 14.110429447852761%;
	}

	input[type="radio"]{
		display: none;
	}

	.ten, .twofive, .sevenfive, .hundred, .fn, .smallInput{
		margin-right: 3.067484662576687%;
	}

	.ten, .sevenfive, .fn, .longType, .cty, .expcode{
		margin-left: 25.766871165644172%;
	}

	.fifty{
		margin-right: 0;
	}

	.topRadios{
		margin-bottom: 1.533742331288344%;
	}

	.bottomRadios, input[type="tel"]{
		margin-bottom: 6.134969325153374%;
	}

	.customamount, .placefields .smallInput:nth-of-type(2){
		margin-right: 0;
	}

	input[type="text"], input[type="tel"], .placefields select{
		border: 2px solid #18BFD1;
		border-radius: 1.5vw 0 1.5vw 0;
		font-size: 1.5vw;
		padding: 1%;
		transition: 300ms;
	}

	.namefields input[type="text"]{
		width: 22.699386503067485%;
	}

	.namefields, .longType, .placefields, .expcode{
		margin-bottom: 1.533742331288344%;
	}

	.longType{
		width: 48.466257668711656%;
	}

	.smallInput{
		width: 14.110429447852761%;
	}

	.mm{
		border: solid #18BFD1;
		border-radius: 1.5vw 0 0 0;
		border-width: 2px 0 2px 2px;
		font-size: 1.5vw;
		padding: 1%;
		padding-left: 1.4%;
	}

	.divide{
		border: solid #18BFD1;
		border-width: 2px 0 2px 0;
		font-size: 2vw;
		padding-top: 1.25%;
	}

	.yy{
		border: solid #18BFD1;
		border-radius: 0 0 1.5vw 0;
		border-width: 2px 2px 2px 0;
		font-size: 1.5vw;
		margin-right: 4.5%;
		padding: 1.34%;
		padding-right: 16.75%;
	}

	.cardcode{
		padding-left: 1.4% !important;
		width: 30%;
	}

	.submitCash{
		border: none;
		margin-left: 62.25%;
	}

	.mm:hover{
		border: solid #042033;
		border-width: 2px 0 2px 2px;
		transition: 350ms;
	}

	.thanks{
		font-size: 1.85vw;
		letter-spacing: 8%;
		margin-bottom: 3.067484662576687%;
	}

	input[type="text"]:hover, input[type="tel"]:hover, .placefields select:hover{
		border: 2px solid #042033;
		filter: drop-shadow(1px 1px 3px #042033);
		transition: 350ms;
	}

	.letsGo, .ten, .twofive, .sevenfive, .fifty, .hundred, .submitCash{
		transition: 300ms;
	}

	.letsGo:hover, .ten:hover, .twofive:hover, .sevenfive:hover, .fifty:hover, .hundred:hover, .submitCash:hover{
		background-color: #042033;
		filter: drop-shadow(1px 1px 3px #042033);
		transition: 350ms;
	}	

}