@charset "UTF-8";
/* CSS Document 

Created by elkgirl.com

Credits:
    Web Design: Elkgirl - http://elkgirl.com/
    Typefaces:
        Cicle: http://www.fontsquirrel.com/fonts/Cicle?q[term]=cicle&q[search_check]=Y
        Josefin Sans: http://www.fontsquirrel.com/fonts/Josefin-Sans?q[term]=josefin&q[search_check]=Y
    Web Font Generator: Font Squirrel - http://www.fontsquirrel.com/tools/webfont-generator
    Design Grid: 996 Grid - http://996grid.com/
    jQuery (http://jquery.com/) Assets: 
        AnchorScroll - http://www.binpress.com/app/anchorscroll/228
        Colorbox - http://www.jacklmoore.com/colorbox/
        LazyLoading - http://css-tricks.com/snippets/javascript/lazy-loading-images/
    Contact Form: Foxy Form - href="http://www.foxyform.com/ contact form
*/

/** GENERAL ******************************/
html, body, .container, #content{height:100%;}

body{
	background-color:#4682B4;
	background-image:url(../images/body_bkgd_y.png);
	background-attachment:fixed;
	background-position:bottom;
	background-repeat:repeat-x;
	font-family:'ciclesemi', Arial, Verdana, sans serif;
	font-size:1em;
	letter-spacing:0.08em;
	margin:0;
	padding:0;
}

.extendfull, .extendleft{
	padding-left:3000px;
	margin-left:-3000px;
}
.extendfull, .extendright{
	padding-right:3000px;
	margin-right:-3000px;
}
a:link{color:#4682B4;text-decoration:none;border:0;outline:none;}
a:visited, a:active{color:#4682B4;}
a:hover{color:#666;}

span{color:#4682B4;}
/** FONTS ********************************/
@font-face {
    font-family:'ciclesemi';
    src: url('../fonts/cicle_semi-webfont.eot');
    src: url('../fonts/cicle_semi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cicle_semi-webfont.woff') format('woff'),
         url('../fonts/cicle_semi-webfont.ttf') format('truetype'),
         url('../fonts/cicle_semi-webfont.svg#ciclesemi') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'josefin_sanssemibold';
    src: url('../fonts/josefinsans-semibold-webfont.eot');
    src: url('../fonts/josefinsans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinsans-semibold-webfont.woff') format('woff'),
         url('../fonts/josefinsans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/josefinsans-semibold-webfont.svg#josefin_sanssemibold') format('svg');
    font-weight:normal;
    font-style:normal;
}
            
/** NAV **********************************/
nav{
	background-color:#000;
	border-bottom:3px solid #4682B4;
	color:#fff;
	height:60px;
	position:fixed;
	width:inherit;
	z-index:100;
}
nav p, nav ul{display:inline;}
nav p{
	float:left;
	font-family:'josefin_sanssemibold', Arial, san serif;
	font-size:1.7em;
	margin:10px 0 0 20px;
}
nav ul{float:right;margin:22px 10px 0 0;}
nav ul li{display:inline;letter-spacing:0.08em;list-style-type:none;padding-left:1.5em;}
nav ul li a:link, nav p a:link{color:#fff;text-decoration:none;border:0;outline:none;}
nav ul li a:visited, nav ul li a:active, nav p a:visited, nav p a:active{color:#fff;}
nav ul li a:hover, nav p a:hover{color:#4682B4;}

/** HEADER *******************************/
header{
	background-image:url(../images/banner.jpg);
	border-bottom:3px solid #4682B4;
	height:227px;
	overflow:hidden;
	position:fixed;
	top:63px;
	width:inherit;
}
header.shadow {
   -moz-box-shadow:    inset 0 0 10px #000;
   -webkit-box-shadow: inset 0 0 10px #000;
   box-shadow:         inset 0 0 10px #000;
}
header ul{
	color:#ecf2f7;
	margin:186px 0 0 0;
	padding:0;
	text-align:center;
	width:100%;
}
header ul li{
	display:inline;
	font-family:'josefin_sanssemibold', Arial, san serif;
	font-size:2.5em;
	list-style-type:none;
	text-shadow:3px 0 0 #333, 6px 0 0 #000;
	padding-right:1.5em;
}
header ul li:last-child{padding-right:0;}

/** SECTIONS *****************************/
div.triangle{
	border-top:40px solid #333;
	border-left:80px solid transparent; 
	border-right:80px solid transparent;
	height:0;
	width:0;
	margin-left:40px;
}
p.labels{
	color:#fff;
	font-family:'josefin_sanssemibold', Arial, san serif;
	font-size:1.2em;
	letter-spacing:0.05em;
	position:relative;
	left:45px;
	top:-65px;
	text-align:center;
	width:150px;
	z-index:10;
}						
section{
    /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(transparent));
    background: -webkit-linear-gradient(top, #fff 10em, transparent);
    background: -moz-linear-gradient(top, #fff 10em, transparent);
    background: -ms-linear-gradient(top, #fff 10em, transparent);
    background: -o-linear-gradient(top, #fff 10em, transparent);
    background-image:linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
    */
    background-color:#fff;
    
    border-top:25px solid #333;
    margin-left:0px;margin-right:0px;
    min-height:100%;
    overflow-y:scroll;
    overflow-x:hidden;
    padding-bottom:2em;
    position:relative;
    top:293px;
}
section:last-child{padding-bottom:0;}
section div{padding:0 2px;}
section div.divider{border-right:2px solid #4682B4;}
section p{padding:0;}
section p span{font-weight:bold;margin-right:10px;}
section .marginTop{margin-top:2.5em;}
section h2{margin-top:0;}

/** SECTION:PORTFOLIO ********************/
section#portfolio h2{text-align:center;width:100%;}
section#portfolio p.text{padding:0 2em 1em 2em; text-align:justify;}
div#honeycomb{margin:0 1%; text-align:center;}
div#honeycomb a{margin:0;}
div#honeycomb a:nth-child(1),
div#honeycomb a:nth-child(26),
div#honeycomb a:nth-child(54)
    {margin-left:4%;}

/** SECTION:ABOUT ************************/
section#about img{
	position:relative;
	top:-70px;
	height:100%;
	width:100%;
}
section#about a:link{font-weight:bold;}


/** SECTION:CONTACT **********************/
section#contact p.stuff{
    position:relative;
    left:200px;
    top:-70px;
    width:40%;
}
section#contact p#quote{
    float:right;
    margin-right:4.5em;
    text-align:right; 
    width:30%;
}
section#contact a#linkedIn{
	background:url(../images/linkedin-hex.png) 0 0 no-repeat; 
	display:block;
	height:87px;
	width:100px;
	content:"";
    position:relative;
    left:-30px;
    top:-40px;
    z-index:10;
}
section#contact a#linkedIn:hover{background:url(../images/linkedin-hex.png) 0 -87px no-repeat;}

section#contact div#contactForm{
    background:url(../images/contactForm_bkgd.png) no-repeat;
    height:593px;
    padding:110px 0 0 165px;
    position:relative;
    left:240px;
    top:-160px;
    width:58%;
}
section#contact p#copyright{
	font-size:0.75em;
    text-align:center;
	position:relative;
	bottom:1em;
}
/** COLORBOX JQUERY **********************/
/* Colorbox Core Style: the following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:1000;overflow:hidden;}
#cboxOverlay{position:fixed; width:100%;height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;border-top:2px solid #4682B4;padding-top:1.5em;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left;margin:auto;border:1px solid #000;display:block;max-width:none;-ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%;height:100%;display:block;border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox. They are
    ordered and tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background-color:#333;}
#colorbox{outline:none;}
    #cboxContent{background:#fff;overflow:hidden;}
		.cboxIframe{background:#fff;}
		#cboxError{padding:50px;border:1px solid #ccc;}
		#cboxLoadedContent{margin-bottom:5em;}
		/*#cboxCurrent{position:absolute;bottom:0;left:0;text-align:center;width:100%;color:#666;font-size:0.8em;border-bottom:2px solid #4682B4;padding-bottom:4px;}*/
		/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
		#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none;}
		/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
		#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active{outline:none;}
		#cboxSlideshow{position:absolute;bottom:6px;right:42px;}
		#cboxPrevious{position:absolute;bottom:6px;left:60px;}
		#cboxNext{position:absolute;bottom:6px;left:130px;}
		#cboxClose{position:absolute;bottom:6px;right:60px;display:block;}
		#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose, #cboxTitle{color:#666;font-size:0.8em;}
		#cboxTitle{color:#000;position:absolute;bottom:20px;left:0;text-align:center;width:100%;height:28px;font-size:1em;}
/*outline:0; = none;
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

@media (max-width:999px) {
    div#honeycomb a:nth-child(1),
    div#honeycomb a:nth-child(26),
    div#honeycomb a:nth-child(54)
        {margin-left:0;}
    div#honeycomb a.hexagon img{margin-bottom:2%;}
    section#contact p#quote{margin-right:2.5em;}
    
    section#contact div#contactForm{left:40px;width:75%;}
    section#contact p.stuff{left:180px;}
}
@media (max-width:767px) {
    section div.divider{border-right:0;}
    div.grid_8.omega.divider p{width:95%;}
    img.image-hide{display:none;}
    div.grid_4 h2{margin-top:2em;}
    section#contact p.stuff{left:130px;}
    section#contact div#contactForm{left:10px;width:80%;}
}
@media (max-width:699px) {
    header ul{margin:196px 0 0 0;}
    header ul li{font-size:1.9em; padding-right:1em;}
    section#contact p.stuff{left:60px;top:-40px;width:50%;}
    
    section#contact div#contactForm{
        background:none;
        padding:0;
        left:120px;
        top:-130px;
    }
}
@media (max-width:549px) {
    nav p, nav ul{display:block;}
    nav p {font-size:1.2em;}
    nav ul{font-size:.8em;margin:16px 10px 0 0;padding-left:0;}
    nav ul li{padding-left:.5em;}
    header ul{background-color:#000; margin:205px 0 0 0;}
    header ul li{font-size:1em; padding-right:.6em;}
    section{
        background: -webkit-gradient(linear, 0% 25%, 50% 100%, from(#fff), to(transparent));
        background: -webkit-linear-gradient(top, #fff 80em, transparent);
        background: -moz-linear-gradient(top, #fff 80em, transparent);
        background: -ms-linear-gradient(top, #fff 80em, transparent);
        background: -o-linear-gradient(top, #fff 80em, transparent);
    }
    section#contact p#quote{float:none;margin:0 auto; text-align:left; width:90%;}
    section#contact p.stuff{
        position:relative;
        left:50px;
        top:10px;
        width:80%;
    }
    section#contact div#contactForm{left:25px;top:-30px;}
    #cboxTitle{font-size:.7em;}
}
@media (max-width:399px) {
    nav p {margin-left:10px;}
    section{
        background: -webkit-gradient(linear, 0% 50%, 70% 100%, from(#fff), to(transparent));
        background: -webkit-linear-gradient(top, #fff 120em, transparent);
        background: -moz-linear-gradient(top, #fff 120em, transparent);
        background: -ms-linear-gradient(top, #fff 120em, transparent);
        background: -o-linear-gradient(top, #fff 120em, transparent);
    }
    section#contact div#contactForm{left:5px;top:-40px;}
}
@media (max-width:369px) {
    nav p {font-size:1em;margin-top:10px;}
    nav ul{font-size:.7em;margin-top:44px;}
    nav ul li{padding-left:.2em;}
    section#contact div#contactForm{left:-12px;}
}