/* ********************************************************************************************** */
/* **************************          CSS | JC Web & Graphic          ************************** */
/* ********************************************************************************************** */

		/*  This is the intellectual property of JC Web and Graphic. All Rights Reserved.  */				

/* *******************************          WebFont Kits          ******************************* */

@font-face {
    font-family: 'robotothin';
    src: url('../fonts/roboto/roboto-thin-webfont.eot');
    src: url('../fonts/roboto/roboto-thin-webfont.eot%3F') format('embedded-opentype'),
         url('../fonts/roboto/roboto-thin-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-thin-webfont.woff') format('woff'),
         url('../fonts/roboto/roboto-thin-webfont.ttf') format('truetype'),
         url('../fonts/roboto/roboto-thin-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'hipstelveticaultralight';
    src: url('http://jcwebandgraphic.com/archive2/styles/fonts/hipstelvetica/hipstelvetica_ultralight-webfont.eot');
    src: url('http://jcwebandgraphic.com/archive2/styles/fonts/hipstelvetica/hipstelvetica_ultralight-webfont.eot?') format('embedded-opentype'),
         url('http://jcwebandgraphic.com/archive2/styles/fonts/hipstelvetica/hipstelvetica_ultralight-webfont.woff2') format('woff2'),
         url('http://jcwebandgraphic.com/archive2/styles/fonts/hipstelvetica/hipstelvetica_ultralight-webfont.woff') format('woff'),
         url('http://jcwebandgraphic.com/archive2/styles/fonts/hipstelvetica/hipstelvetica_ultralight-webfont.ttf') format('truetype'),
         url('http://jcwebandgraphic.com/archive2/styles/fonts/hipstelvetica/hipstelvetica_ultralight-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
	}

/* *******************************          Styles Reset          ******************************* */
* {
	margin: 0;
	padding: 0;
	line-height: 2.25em;
	letter-spacing: .125em;
	font-family: 'robotothin';

 	/* outline: 1px solid red; */
	}

html {
	background-color: #3A3940;
	}

/* ********************************************************************************************** */
/* *****************************          Mobile First CSS          ***************************** */
/* ********************************************************************************************** */

/* ***********************************          Menu          *********************************** */
nav {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: transparent;
	z-index: 600;
	}

	nav ul {
		width: 100%;
		}

		nav ul li {
			width: 25%;
			text-align: center;
			text-decoration: none;
			list-style-type: none;
			float: left;
			}

			nav ul li a {
				padding: 2%;
				text-decoration: none;
				font-size: .85em;
				color: #ffffff;
				}

			nav ul li a:hover {
				color: #ffffff;
				outline: 1px solid #ffffff;
				}

	#img-bkg1 {
		z-index: 500;
		}

/* ***********************************          Logo          *********************************** */
/* Logo */
#logo-container {
	width: 20%;
	margin: 15% 40% 7%;
	}

	#logo {
		width: 100%;
		}

/* ********************************          Scrollstop          ******************************** */
.scroll {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	}

	.scroll img {
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		visibility: visible;
		}

	.scroll img:first-child {
		opacity: 1;
		}

	.scroll img:nth-child(2) {
		opacity: 1;
		transition-duration: 1s;
		transition-timing-function: ease;
		}

/* ***********************************          Main          *********************************** */
body section:first-child {
	background-color: red;
	}

section {
	width: 95%;
	margin: 1%;
	padding: 1.5%;
	background-color: #696773;
	color: #ffffff;
	overflow: auto;
	opacity: .75;
	}

	section .subtitle {
		margin-bottom: 2.5%;
		font-family: 'robotothin';
		font-size: 1em;
		text-align: center;
		color: #ffffff;
		}

	section p {
		margin: 2.5%;
		}

		#services a {
			font-size: 1.25em;
			}

/* Footer Section Styles */
footer {
	margin-top: 10%;
	background-color: #3A3940;
	color: #ffffff;
	clear: both;
	}

	footer #copyright {
		padding-top: .5%;
		text-align: center;
		color: #ffffff;
		font-size: .75em;
		background-color: #3A3940;
		}

	footer a {
		padding: 0;
		color: #F26DA5;
		}

/* ********************************************************************************************** */
/* *************************          Responsive Media Queries          ************************* */
/* ********************************************************************************************** */

/* BreakPoint at Min Browser Width = 600px */
@media only screen and (min-width: 600px) {

	/* Forces .split-50 Class Elements to Two Column Layout */
	.split-50 {
		width: 45%;
		margin: 1%;
		padding: 1.5%;
		float: left;
		}	
	}

/* BreakPoint at Min Browser Width = 600px */
@media only screen and (max-width: 599px) {

	/* Forces .res-50 Class Elements to Two Column Layout */
	.res-50 {
		width: 45%;
		margin: 1%;
		padding: 1.5%;
		float: left;
		}	

	.res-100 {
		width: 98%;
		margin: 1%;
		padding: 1.5%;
		float: left;
		outline: 1px solid blue;
	}
}



/* *********************************           Palette          ********************************* */

/* 

	Pink	f26da5
	Green	50E5C0
	Grey	696773
	Brown	3A3940 

*/