/*
* 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
	    Navigation
	    Slider
	    Sections
	    Footer
	#Page Styles
	    Work
	#Media Queries   
	#IE Fixes */

/* #Site Styles
================================================== */
body    { border-top: 4px solid #3b83c1; margin: 0; padding: 0; }
header  { margin-top: 70px; }
.logo   { float: left; width: 70px; height: 70px; }

/* Navigation ------------------------------------ */
nav     { float: left; }
nav ul,
nav li { margin: 0; padding: 0; }
nav ul { margin-left: 35px;  }
nav li { float: left; margin-right: 28px; }

nav li a { font-size: 14px; line-height: 70px; text-decoration: none; }

header aside { float: right; }

header aside ul,
header aside li { margin: 0; padding: 0; line-height: 70px; }
header aside li { float: left; margin-left: 20px; }

/* Slider ---------------------------------------- */
.slider { position: relative; height: 680px; }
    
.slider-highlight {
    background: #fff; 
    background: rgba(255,255,255,0.6);
    position: relative; z-index: 2; 
    width: 100%; }

.slider-text { 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 36px;
    position: relative;
    z-index: 2; }

.slider-img { position: absolute; top: 0; right: -300px; z-index: 1; }
    
/* Sections -------------------------------------- */
.section-gray { 
    background: #f5f5f5; 
    border-top: 1px solid #ebebeb; 
    padding: 20px 0 100px; }
    
    .section-gray .floatRight { margin-top: 15px; }
    
.section-blue {
    background: #3b83c1 url(../../img/global/bg-blue.gif) repeat;
    color: #fff; 
    padding: 70px 0 90px; }
    
    .section-blue h2 { color: #fff; }
    
/* Footer ---------------------------------------- */
footer { 
    background: #232323 url(../../img/global/bg-footer.gif) repeat;
    color: #666;
    font-size: 12px; 
    padding: 50px 0;
    box-shadow: inset 0 12px 19px -11px rgba(0,0,0,0.3); }

footer ul,
footer li { margin: 0; padding: 0; }
footer ul { margin-left: 35px;  }
footer li { float: left; margin-right: 28px; }

footer li a,
footer li a:visited { color: #666; line-height: 30px; text-decoration: none; }
footer li a:hover   { color: #999; }
    
/* Back to top ----------------------------------- */
#back-top {
	position: fixed;
	bottom: 5px;
	margin-left: 50px; }

#back-top a {
    background: #ebebeb;
    color: #999;
    padding: 2px 15px;
	-webkit-transition: 1s;
	transition: 1s; }
    
    #back-top a:hover { background: #ccc; color: #999; }


/* #Page Styles
================================================== */
/* Work ------------------------------------------ */
#work-filter a { margin-right: 50px; }

.work-wrap { margin: 0; padding: 0; }

.work-wrap li {
    display: inline-block;
    margin: 20px;
    width: 300px; height: 300px; }
        
.work-item {
    cursor: default;
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    box-shadow: 
        inset 0 0 0 0 rgba(255,255,255, 0.4), 
        inset 0 0 0 10px rgba(255,255,255,0.75), 
        0 1px 2px rgba(0,0,0,0.1);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }

    .work-img-1 { background-image: url(../../img/projects/dwm.png); height: 300px; }
    .work-img-2 { background-image: url(../../img/projects/groomcity.png); height: 300px; }
    .work-img-3 { background-image: url(../../img/projects/optimarpm.png); height: 300px; }

.work-info {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 50%;
    text-align: center;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-backface-visibility: hidden; /*for a smooth font */ }

    .work-item:hover {
        box-shadow: 
            inset 0 0 0 150px rgba(0,0,0, 0.7), 
            inset 0 0 0 12px rgba(255,255,255,0.8), 
            0 1px 2px rgba(0,0,0,0.1); }

    .work-item:hover .work-info {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1); }

/* button */
.work-info a { float: none; margin-top: 45%; }

/*  works in chrome, ff
    need IE fix. opacity for button
*/


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

	/* Widescreen */
	@media only screen and (min-width: 1600px) {
		.slider-img { right: -200px; }
	}
	
	/* Smaller than standard 1200 (browsers) */
	@media only screen and (max-width: 1200px) {
		.slider-img { right: -350px; }
		#back-top { margin-left: 20px; }
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		#back-top,
		#back-top .button { margin-bottom: 0; }
	}

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

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* 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) {}


/* #IE Fixes
================================================== */