@font-face {
  font-family: 'Handwriting';
  src: url('../fonts/Jellyka_Estrya_Handwriting.woff2') format('woff2'),
       url('../fonts/Jellyka_Estrya_Handwriting.woff') format('woff'),
       url('../fonts/Jellyka_Estrya_Handwriting.ttf') format('truetype');
}

* {margin:0;padding:0;}

h1, h3 {font-family: 'Handwriting', cursive;}
h2, h4 {font-family: 'Roboto', sans-serif;text-align: center;}
h2 {font-size: 18px; font-style: oblique;}
h3 {font-size: 60px}
h2 {font-size:16px}
ul {width:90%;margin:0 auto;}
li {list-style-type: none;font-size:12px;}
p {font-family: 'Roboto', sans-serif;}

@media screen and (max-width: 320px) {
	body {
		width:100%;
		height: 100%;
		background-image: url('../img/home_pope_mobile.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	#wrapper {
		width:100%;
		height: 100%;
		position:absolute;
	}

	header {
		width:100%;
	}

	header section {
		width:28rem;
		margin:0 auto;
		padding:1rem 0;
	}

	header section img {
		width:100%;
	}

	main {}

	.top {}

	.top section {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 70%;
	    margin: 0 auto;
	    border-radius: 10px;
	}

	.top section p {
		color: #323232;
	    font-size: 16px;
	    font-weight: 500;
	    text-align: center;
	    padding: .5rem;
	}

	.bottom {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 90%;
	    margin:0 auto;
	}

	.bottom section {}

	.bottom section:nth-of-type(1) {
		padding-top: 1rem;
	}

	.bottom section h3 {
		text-align: center;
    	margin-top: -2rem;
	}

	.bottom section h2 {
		font-size: 16px;
	    margin-top: -2rem;
	    padding-bottom: 1.5rem;
	}

	.bottom section p {
		font-size: 11px;
		padding:.5rem;
	}

	footer {}
	footer section {}

	.mobile, .tablet {display: block;}
	.web {display: none;}
}

@media screen and (min-width: 321px) and (max-width: 450px) {
	body {
		width:100%;
		height: 100%;
		background-image: url('../img/home_pope_mobile.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	#wrapper {
		width:100%;
		height: 100%;
		position:absolute;
	}

	header {
		width:100%;
	}

	header section {
		width:28rem;
		margin:0 auto;
		padding:1rem 0;
	}

	header section img {
		width:100%;
	}

	main {}

	.top {}

	.top section {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 70%;
	    margin: 0 auto;
	    border-radius: 10px;
	}

	.top section p {
		color: #323232;
	    font-size: 16px;
	    font-weight: 500;
	    text-align: center;
	    padding: .5rem;
	}

	.bottom {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 90%;
	    margin:0 auto;
	}

	.bottom section {}

	.bottom section:nth-of-type(1) {
		padding-top: 1rem;
	}

	.bottom section h3 {
		text-align: center;
    	margin-top: -2rem;
    	font-size: 75px;
	}

	.bottom section h2 {
		font-size: 16px;
	    margin-top: -2rem;
	    padding-bottom: 1.5rem;
	}

	.bottom section p {
		font-size: 11px;
		padding:.5rem;
	}

	footer {}
	footer section {}

	.mobile, .tablet {display: block;}
	.web {display: none;}
}

@media screen and (min-width: 451px) and (max-width: 770px) {
	body {
		width:100%;
		height: 100%;
		background-image: url('../img/home_pope_mobile770.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	#wrapper {
		width:100%;
		height:100%;
		position:absolute;
	}

	header {
		width:100%;
	}

	header section {
		width:28rem;
		margin:0 auto;
		padding:1rem 0;
	}

	header section img {
		width:100%;
	}

	main {}

	.top {}

	.top section {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 70%;
	    margin: 0 auto;
	    border-radius: 10px;
	}

	.top section p {
		color: #323232;
	    font-size: 16px;
	    font-weight: 500;
	    text-align: center;
	    padding: .5rem;
	}

	.bottom {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 90%;
	    margin:0 auto;
	}

	.bottom section {}

	.bottom section:nth-of-type(1) {
		padding-top: 1rem;
	}

	.bottom section h3 {
	    text-align: center;
    	margin-top: -2rem;
    	font-size: 75px;
	}

	.bottom section h2 {
		font-size: 16px;
	    margin-top: -2rem;
	    padding-bottom: 1.5rem;
	}

	.bottom section p {
		font-size: 11px;
		padding:.5rem;
	}

	footer {}
	footer section {}

	.mobile, .tablet {display: block;}
	.web {display: none;}
}

@media screen and (min-width: 771px) and (max-width: 1024px) {
	body {
		width:100%;
		background-image: url('../img/home_pope_tablet.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	h4 {
		font-size: 20px;
	}

	li {font-size:16px}

	#wrapper {
		width:100%;
		height: 100%;
		position:absolute;
	}

	header {
		width: 100%;
	    position: fixed;
	    background: rgba(50, 50, 50, .5);
	    z-index: 100;
	    margin-top: 1rem;
	}

	header section {
		padding: 1rem 2rem;
	}

	main {
		position: relative;
	    z-index: 0;
	    top: 13rem;
	}

	.top {}

	.top section {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 70%;
	    margin: 0 auto;
	    border-radius: 10px;
	}

	.top section p {
		color: #323232;
	    font-size: 16px;
	    font-weight: 500;
	    text-align: center;
	    padding: .5rem;
	}

	.bottom {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 55%;
	    margin-left:5%;
	}

	.bottom section {}

	.bottom section:nth-of-type(1) {
		padding-top: 1rem;
	}

	.bottom section h3 {
		text-align: center;
    	margin-top: -2rem;
    	font-size: 75px;
	}

	.bottom section h2 {
		font-size: 22px;
	    margin-top: -2rem;
	    padding-bottom: 1.5rem;
	}

	.bottom section p {
		font-size: 14px;
    	padding: 1rem 3rem;
	}

	footer {}
	footer section {}	

	.mobile, .tablet {display: block;}
	.web {display: none;}
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
	body {
		width:100%;
		height:100%;
		background-image: url('../img/home_pope_bkg.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	h4 {
		font-size: 20px;
	}

	li {font-size:16px}

	#wrapper {
		width:100%;
		height: 100%;
		position: absolute;
	}

	.bgwidth { width: 100%; }
	.bgheight { height: 100%; }

	header {
		width: 100%;
	    position: fixed;
	    background: rgba(50, 50, 50, .5);
	    z-index: 100;
	    margin-top: 1rem;
	}

	header section {
		padding: 1rem 2rem;
	}

	main {
		position: relative;
	    z-index: 0;
	    top: 13rem;
	}

	.top {}

	.top section {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 70%;
	    margin: 0 auto;
	    border-radius: 10px;
	}

	.top section p {
		color: #323232;
	    font-size: 16px;
	    font-weight: 500;
	    text-align: center;
	    padding: .5rem;
	}

	.bottom {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 50%;
	    margin-left:7%;
	}

	.bottom section {}

	.bottom section:nth-of-type(1) {
		padding-top: 1rem;
	}

	.bottom section h3 {
		text-align: center;
    	margin-top: -2rem;
    	font-size: 75px;
	}

	.bottom section h2 {
		font-size: 22px;
	    margin-top: -2rem;
	    padding-bottom: 1.5rem;
	}

	.bottom section p {
		font-size: 14px;
    	padding: 1rem 3rem;
	}

	input {}

	.name, .email, .number, .amount {
		margin-left: 3rem;
	    margin-bottom: 1rem;
	    width: 50%;
	    padding: 1rem;
	    color: #323232;
	}

	form h3 {
		text-align: left !important;
		margin-left: 3rem;
    	margin-bottom: -2rem;
	}

	form p {
		font-size: 20px !important;
	}

	.special {
		margin-left: 3rem;
	    padding-left: 1rem;
	    height: 15rem;
	    width: 34rem;
	    margin-bottom: 3rem;
	}

	#signUpForm {
		margin-left:3rem;
		margin-bottom:3rem;
	}

	button {
		margin-left: 3rem;
	    margin-bottom: 3rem;
	    padding: 1rem;
	    font-family: 'Roboto', sans-serif;
	    font-weight: 500;
	    background-color: #f2f2f2;
	    color:#323232;
	    border:none;
	}

	button:hover {
		background-color: #323232;
		color:#f2f2f2;
		border:none;
	}

	footer {}
	footer section {}	

	.mobile, .tablet {display: block;}
	.web {display: none;}
}

@media screen and (min-width: 1601px) {
	body {
		width:100%;
		height:100%;
		background-image: url('../img/home_pope_bkg.jpg');
		background-attachment: fixed;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	h4 {
		font-size: 20px;
	}

	li {font-size:16px}

	#wrapper {
		width:100%;
		height: 100%;
		position: absolute;
	}

	.bgwidth { width: 100%; }
	.bgheight { height: 100%; }

	header {
		width: 100%;
	    position: fixed;
	    background: rgba(50, 50, 50, .5);
	    z-index: 100;
	    margin-top: 1rem;
	}

	header section {
		padding: 1rem 2rem;
	}

	main {
		position: relative;
	    z-index: 0;
	    top: 13rem;
	}

	.top {}

	.top section {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 70%;
	    margin: 0 auto;
	    border-radius: 10px;
	}

	.top section p {
		color: #323232;
	    font-size: 16px;
	    font-weight: 500;
	    text-align: center;
	    padding: .5rem;
	}

	.bottom {
		background-color: rgba(246, 246, 246, .7);
		box-shadow: 0px 0px 10px #000000;
	    width: 50%;
	    margin-left:7%;
	}

	.bottom section {}

	.bottom section:nth-of-type(1) {
		padding-top: 1rem;
	}

	.bottom section h3 {
		text-align: center;
    	margin-top: -2rem;
    	font-size: 75px;
	}

	.bottom section h2 {
		font-size: 22px;
	    margin-top: -2rem;
	    padding-bottom: 1.5rem;
	}

	.bottom section p {
		font-size: 14px;
    	padding: 1rem 3rem;
	}

	footer {}
	footer section {}	

	.mobile, .tablet {display: block;}
	.web {display: none;}
}