<STYLE type="text/css" media="screen">
  * {
	margin: 0px;
	padding: 0px;
  }

  body, html {
	font-family: verdana;
	font-size: 12pt;
	text-align: center;
	color: white;
}

	body {
		background-color: black;
		background-image:url("images/background.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		height: 100%;
		margin: 0px;
	}
	
	img.PITCO-logo {
		display: block; 
		margin-left: auto; 
		margin-right: auto;
		width: 60%;
	}
	
	a {
		color: grey;
	}
	
	h5 {
		text-align: left;
		font-size: 14pt;
		width: 93%;
		margin-left: 7%;
		color: black;
		font-weight: bold;	
	}

	h6 {
		text-align: left;
		font-size: 12pt;
		width: 90%;
		margin-left: 7%;
		color: black;
		font-weight: bold;
	}

	p {
		text-align: left;
		font-size: 1vw;
		width: 90%;
		margin-left: 7%;
		color: white;		
	}
	
	p.toggled {
		display: none;
		background: rgba(0, 0, 0, 0.5);
	}

	div {
		text-align: center;
		width: 90%;
		margin-left: 5%;
		padding: 10px 0px 10px 0px;
		font-size: 3vw;
		color: black;
	}

	.header {
		color: white;
	}
	
	.tagline {
		margin-top: 18px;
		margin-left: 25%;
		background-color: black;
		opacity: 0.8;
		color: white;
		/* text-shadow: 4px 4px 4px #aaa; */
		/* font-family: "Times New Roman", Times, serif; */
		font-family:  "Courier New", Courier, monospace;
		font-size: 1.5vw;
		width: 50%;
		text-align: left;
		padding-left: 10px;
	}

	.text_area {
		padding: 10px;
	}

	.black_band {
		background-color: black;
		color: white;
		opacity: 0.8;
		filter: alpha(opacity=70); /* For IE8 and earlier */
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		cursor:pointer;		
	}
	
	.black_band:hover {
		opacity: 1.0;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	
	.clear_band {
		color: white;
		opacity: 0.1;
		filter: alpha(opacity=50); /* For IE8 and earlier */
		font-size: 24px; /* for spacing purposes */
	}
		

	 /* Modals - background */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	.last {
		font-size: 2vw;
		background-color: black;
		color: white;
	}

	.footer {
		font-size: 10pt;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0px 0px 0px 0px;
		margin-left: 0;
	 	background-color: black;
		color: grey;
	}

	.fade-in {
		-webkit-animation: 2s ease-in fadein; /* Safari and Chrome */
		-moz-animation: 2s ease-in fadein; /* Firefox */
		-o-animation: 2s ease-in fadein; /* Opera */
		animation: 2s ease-in fadein;
		animation-fill-mode: forwards;
	}
	
	.animation-box {
		min-height: 400px;
	}

	/* modals */
	.modal-content {
		position: relative;
		background-color: #777;
		margin: 5% auto; /* 5% from the top and centered */
		padding: 20px;
		border: 2px solid #888;
		width: 30%; /* Could be more or less, depending on screen size */
		font-size: 1vw;
		color: dark blue;
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		animation-name: animatetop;
		animation-duration: 0.4s		
	}

	/* The Close Button */
	.close {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}

	.close:hover,
	.close:focus {
		text-decoration: none;
		cursor: pointer;
	}

	.form_title {
		font-size: 24px;
		font-weight: bold;
	}

	.subtitle {
		font-size: 24px;
	}

	/* Add Animation */
	@keyframes animatetop {
		from {top: -300px; opacity: 0}
		to {top: 0; opacity: 1}
	}
	
	input {
		width: 100%;
		border-radius: 4px;
		padding: 3px;
		margin: 6px 0 20px 0;
	}
	
	input:invalid {
		border: none;
		box-shadow: 0 0 5px 1px red;
	}

	input:valid {
		border: 2px solid black;
	}

	textarea {
		width: 100%;
		margin: 5px 0;
		border: 2px solid black;
		border-radius: 4px;
		padding: 3px;
	}
	
	button {
		background-color: #4CAF50; /* Green */
		border: none;
        border-radius: 8px;
		color: white;
		padding: 30px 32px;
		margin: 5% 0;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		width: 100%;
	}

	button:hover {
        transform: scale(1.1);
        transition: all ease 500ms;
    }

	.ContactUs {
		width: 50%;
    	box-shadow: 10px 10px 5px black;
		font-size: 70%;
		font-family: Tahoma, Geneva, sans-serif;
        cursor: pointer;
	}
	
	.CallNow {
		font-size: 32px;
	}


	/* Fade-in animation */
	@keyframes fadein { from { opacity:0.1; font-size: 24px;} to { opacity:1; font-size: 36px;}}


	/* ########################################################################################################################## */
	/* ########################################## responsive begin ############################################################## */
	/* @media screen and (max-width: 360px) { */
	@media screen and (max-width: 768px) {
		
		html {
			height: 100%; /* for: Android static background*/
		}
		
		body {
			background-image:url("images/background_360x640.jpg");
			font-size: 16px;
			padding: 0px 5px 0px 5px;
		}

		p {
			font-size: 3vw;
		}

		img.PITCO-logo {
			width: 95%;
		}
		
		div {
			color: white;
			text-align: center;
			margin-left: 5%;
			font-size: 14px;
			width: 100%;
		}

		.header {
			margin-top: 50px;
			margin-left: 0;
		}
		
		.tagline {
			font-size: 3vw;
			width: 87%;
			margin-left: 5%;
		}
	
		.text_area {
			margin-left: 0;
			width: 90%;
			padding: 10px 0px 10px 0px;
		}

		.black_band {
			background-color: black;
		}
		
		.clear_band {
			opacity: 0.1;
			margin-left: 0px;
		}
		
		.last {
			/* height: 100px; */
			font-size: 8px;
			padding: 10px 0px 10px 0px;
			background-color: black;
		}
		.footer {
			font-size: 12px;
			margin-left: 0;
			left: 0;
		}

		.form_title {
			font-size: 20px;
			color: black;
			font-weight: bold;
		}

		.subtitle {
			font-size: 18px;
			color: black;
		}

		 /* The Modal (background) */
		.modal {
			width: 90%;
			overflow: none; /* Enable scroll if needed */
		}

		/* Modal Content/Box */
		.modal-content {
			margin: 5% auto; /* 5% from the top and centered */
			padding: 5%;
			width: 90%; /* Could be more or less, depending on screen size */
			font-size: 16px;
		}
		
		.animation-box {
			min-height: 320px;
		}

		label {
			color: white;
		}
		input {
			width: 90%;
			height: 24px;
			margin-bottom: 20px;
		}
		
		textarea {
			width: 90%;
			margin: 5px 0;
		}
		
		button {
			width: 100%;
			padding: 30px 32px;
			margin: 5px 0;
			font-size: 16px;
		}

		.ContactUs {
			padding: 12px 16px;
			width: 90%;
			font-size: 5vw;
		}
		.CallNow {
			font-size: 16px;
		}

		/* Fade-in animation */
		@keyframes fadein { from { opacity:0.1; font-size: 4vw;} to { opacity:1; font-size: 6vw;}}


	} /* responsive code end */
</style>
