@import url("fonts/stylesheet.css");

/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */


#terms {
	text-align: left;
	color:#666;
	margin-top: 20px;
}

#terms-contact {
	margin-top: 60px;
	color:black!important;
	font-size: 20px;
	text-align: center;
}

#terms-contact a {
	color:black;
	text-decoration: none;
	
	transition:all .2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all .2s ease-in-out;
}

#terms-contact a:hover {
	color:red;
}

#terms-contact ul li {
	display: inline-block;
	margin-right: 20px;
}

#terms-scroll {
	margin-top: 0px;
	color:white;
	text-align: center;
	margin-bottom: 60px;
}


	
#intro {
	height: 700px;
	background: #333;
	background-image: url(../images/blurred-bg2.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	text-align: center;
	z-index:999;
}	
	
#intro-logo img {
	margin: 0 auto;
	width:120px;
	height: auto;
	display: block;
	margin-top: 100px;
	margin-bottom:10px;
}	

#intro-copy {
	margin-top:70px;
	color:white;
}

#intro-scroll {
	margin-top: 0px;
	color:white;
	text-align: center;
}

#intro-contact {
	margin-top: 60px;
	color:white!important;
	font-size: 20px;
}

#intro-contact a {
	color:white;
	text-decoration: none;
	
	transition:all .2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all .2s ease-in-out;
}

#intro-contact a:hover {
	color:red;
}

#intro-contact ul li {
	display: inline-block;
	margin-right: 20px;
}
	
#section-title {
	margin-top: 60px;
	text-align: center;
}

.services {
	margin-top: 20px;
}

.services img {
	width: 80%;
	height: auto;
	display: block;	
	margin: 0 auto;
}

.services-copy {
	margin-top: 10px;
	text-align: left;
	padding-right: 20px;
	color:#888;
}





.products-list {
	margin-top: 20px;
}

.products-copy {
	margin-top: 10px;
	text-align: left;
	padding-right: 20px;
	color:#888;
	height: 300px;
}

.products-copy ul {
	margin-top: 10px;
	margin-bottom:20px;
}

#middle-line {
	border-right:1px solid #ddd;
}
	




/* Work ================================================== */	

#samples {
	background: #f7f7f7;
	margin-top: 60px;
	padding-bottom: 60px;	
}
	
.work {
	margin-top: 20px;
}

.work img {
	width: 100%;
	height: auto;
}	

.work-copy {
	background: white;
	padding-bottom: 5px;
	text-align: center;
	-webkit-box-shadow: 0 10px 10px -15px #666;
	   -moz-box-shadow: 0 10px 10px -15px #666;
	        box-shadow: 0 10px 10px -15px #666;

}

.work-copy img {
	opacity: 1;
	
	transition:all .2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all .2s ease-in-out;
}

.work-copy img:hover {
	opacity: 0.8;
}
	
	
/* Navigation Links ================================================== */	
	
#fix-nav {
	position:fixed;
	height:50px;
	background:white;
	z-index:950;
	top:0;
	border-bottom: 1px solid #f7f7f7;
}

#fix-nav img {
	width:40px;
	height:auto;
	display:inline-block;
	padding-top:9px;
}

#navigation-links {
	text-align:right;
	padding-top:15px;
}

#navigation-links a {
	text-decoration:none;
	font-size:16px;
	color:#888;
	margin: 0;
	font-weight: 400;
	
	transition:all .1s ease-in-out; 
    -o-transition:all .1s ease-in-out; 
    -moz-transition:all .1s ease-in-out; 
    -webkit-transition:all .1s ease-in-out; 
}

#navigation-links a:hover {
	color:#444;
}

#navigation-links a:active {
	color:red;
}

#navigation-links ul li{
	display:inline-block;
	font-size:inherit;
	margin-left:20px;
	letter-spacing: 0px;
}

#navigation-links ul {
	margin-left: 0px;
	padding: 0;
}	
	
#nav-logotype {
	font:normal 300 24px 'Raleway', sans-serif;
	margin-top: 8px;
	color:black;
}	

/* Profile ================================================== */	
	
#profile-image img {
	width: 90%;
	height: auto;
	margin-top: 20px;
}
	
#profile-image {
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}
	
#profile-copy {
	margin-top: 20px;
	padding-bottom: 60px;
}

/* Contact ================================================== */

#contact {
	background:#f7f7f7;
	padding-bottom: 60px;
}
	
#contact-copy {
	text-align: center;
	margin-top: 20px;
	font-size: 18px;
}

#contact-copy a {
	text-decoration: none;
	
	transition:all .2s ease-in-out; 
    -o-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    -webkit-transition:all .2s ease-in-out;
}

#contact-copy a:hover {
	color:red;
}

#contact-copy li {
	margin-bottom: 12px;
	height:20px;
}

/* Footer ================================================== */

#footer {
	background: #222;
	padding: 30px 0 40px 0;
	font-size: 14px;
	color:#ddd;
	text-align: center;
}

#footer a {
	color:#ddd;
}

#footer li {
	margin-bottom: 3px;
}

#footer a:hover {
	color:#d61f26;
}

/* Sitemap ================================================== */

#sitemap {
	text-align: center;
}

#sitemap a {
	text-decoration: none;
}

#sitemap a:hover {
	text-decoration: underline;
}
	
#sitemap ul li{
	display:inline-block;
	font-size:inherit;
	margin-right:20px;
	letter-spacing: 0px;	
}

#sitemap ul {
	margin-bottom: 0px;
}

.clear-space {
	display: inherit;
}

/* Social Icons ================================================== */
	
#social-list {
	margin-top: 20px;
}

#social-list ul li {
	display: inline-block;
}
	
#social-icons {
	text-align:center;
	font-family: 'juliefont';
}

#social-icons ul li {
	display: inline-block;
}

#social-icons a {
	text-decoration:none!important;
	font-size:26px;
	color:#aaa;
	letter-spacing: 5px;
	
	transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -webkit-transition:all .3s ease-in-out;
}

#social-icons a:hover {
	color:#d81921;
}


	
/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
	#middle-line {border-right:1px solid transparent;}
	.clear-space {display: none;}
	#fix-nav {display: none;}
	#intro-logo img {margin-top: 30px;}
	#intro-contact {font-size: 16px; margin-top: 40px;}
	#intro {height:600px;}
	#intro-copy {margin-top: 30px;}	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}
	

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

@font-face {
	    font-family: 'juliefont';
	    src: url('../fonts/juliefont.eot');
	    src: url('../fonts/juliefont.eot?iefix') format('eot'),
	         url('../fonts/juliefont.woff') format('woff'),
	         url('../fonts/juliefont.ttf') format('truetype'),
	         url('../fonts/juliefont.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
	    
::-moz-selection { background: red; color: white; text-shadow: none; }
::selection { background-color: red; color: white; text-shadow: none; }