/* GRTC CSS */

		#top {
			font-family: 'Roboto';
			background: #663399; /* For browsers that do not support gradients */
    		background: linear-gradient(to left, rgba(102,51,153,0), rgba(102,51,153,1));
			
			}
		#top h3 {
			color: #ffffff;
			text-shadow: 1px 1px 2px rgba(0,0,0,1);
			padding-left: 1em;
			}

		.parallax {
			background-image: url('/coehs/grtc/images/main-pic.jpg');
			height: 100%; 
			background-attachment: fixed;
			background-position: center top;
			background-repeat: no-repeat;
			background-size: cover;
			
		}
		.parallax .item img {
			width:60%;
		}
		.overlay {
			background-color: rgba(242, 239, 244, .5);
			font-family: 'Roboto';
}
		.overlay h3 {
			padding-left: 20px;
			padding-top: .3em !important!;
			text-transform: uppercase;	
		}
		.overlay p {
			padding-left: 10px;
			padding-right: 10px;
		}
		.overlay span {
			position: relative;
    		padding-bottom: 5px;
		}
		.overlay span:after {
			position: absolute; 
			left: 0; 
			bottom: 0; 
			width: 100%; 
			height: 1px; 
			border-bottom: 5px solid #663399; 
			content: ""
}		
		.logo_container {
			display: flex;
			justify-content: space-around;
			padding: 30px;
		}
		.item {
			align-self: center;
		}
		.flex-grid {
		    display: flex;
  			justify-content: space-between;
		}
		.flex-grid .col1 {
		    width: 70%;

		}
		.text {
			padding: 20px;
			background-color: rgba(242, 239, 244, .8);
			border-radius: 5px;
}
		.flex-grid .col2 {
		    width: 30%;
		}
		.flex-grid .half {
		    width: 50%;
		}
		.button {
			background-color: #663399;
			color: #ffffff !important;
			border-radius: 8px;
			border: 2px solid #fc0; 
			 -webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
			padding: 10px;
			font-weight: bold;
			font-size: 3em;
			box-shadow: 0 12px 16px 0 rgba(0,0,0,0.15), 0 17px 50px 0 rgba(0,0,0,0.10);
		}
		.button:hover {
			background-color: #ffffff;
			color: #663399 !important;
		}
		.container {
			position: relative;
			text-align: center;
		}
		.centered {
			position: absolute;
			top: 50%;
			left: 70%;
			transform: translate(-50%, -50%);
		}
		hr {
		    height: 10px !important; 
			background-color: #663399 !important;
			border:none;	
			margin-bottom: 0;
		}
		.fas {
			color: #663399;
		}
		#top h3 a{
			color: #fcd116;
		}
		.half_container {
			font-family: 'Roboto';
			}
			.half_container h3 {
			padding-left: 20px;
			padding-top: .3em !important!;
			text-transform: uppercase;	
			}
			.half_container span {
			position: relative;
			padding-bottom: 5px;
			}
			.half_container span:after {
			position: absolute; 
			left: 0; 
			bottom: 0; 
			width: 100%; 
			height: 1px; 
			border-bottom: 5px solid #663399; 
			content: ""
			}	
			.half_container p {
			padding-left: 10px;
			padding-right: 10px;
			}
			.contact {
			background-color: #663399;
			color: #fff;
			}
			.contact .span_1_of_4 {
			margin: 0 !important;
			background-color: #663399;
			color: #fff;
			width: 25%;
			}
			.span_1_of_4 {
			text-align: center;
			}
			.contact .fas {
				color: #9C0 !important;
				}
				.far {
				color: #663399;
				}
				.quote{
				font-size: 1.4em !important;
				font-style:italic !important;
				color: #555555 !important;
				padding:1.2em 30px 1.2em 75px !important;
				border-left:8px solid #663399 !important;
				line-height:1.6 !important;
				position: relative !important;
				background:#EDEDED !important;
				}

				.quote::before{
				content: "\201C" !important;
				color:#663399 !important;
				font-size:4em !important;
				position: absolute !important;
				left: 10px !important;
				top:-10px;!important;
				}
				.quote::after{
				content: '' !important;
				}
				.quote span{
				display:block !important;
				color:#333333 !important;
				font-style: normal !important;
				font-weight: bold !important;
				margin-top:1em !important;
				}
				.quote span::after{
				border-bottom: none !important;
				}
@media only screen and (max-width: 700px) {
    .button {
        font-size: 2em;
    }
	.parallax .item img {
			width:100%;
		}
	.flex-grid {
		display: block;
	}
	.logo_container {
		display: block;
	}
	.logo_container img {
	   -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
		-moz-transform: scale(0.5); /* FF3.5+ */
		-ms-transform: scale(0.5); /* IE9 */
	    -o-transform: scale(0.5); /* Opera 10.5+ */
		transform: scale(0.5);
	}
	.item {
		text-align: center;
		margin-bottom: 1em;
}

		.flex-grid .col1 {
		    width: auto;
		}
		.flex-grid .col2 {
		    width: auto;
		}
		.contact .span_1_of_4 {
			width: 100% !important;
		}
	
}