/*
 * Author: Carlos Alvarez
 * URL: http://Alvarez.is
 * 
 * Project Name: NYC Design
 * Version: 1.0
 * Date: 04-20-2014
 * Yes, thanks for looking; This is Court Crawford's portfolio, and I built on Carlos' template.
    There are numerous modifications to the template to enable responsive breakpoints, and portfolio-
    specific colors, typography, and layout.
 */


/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url('https://fonts.googleapis.com/css?family=Khula');

::-moz-selection {
    background: #f2c2c9;
    color: #a4003a;
    text-shadow: none;
}

::selection {
    background: #16a085;
    //color: #a4003a;
    color: #fff;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.centered {
	text-align: center
}

.mt {
	margin-top: 80px;
}

.mb {
	margin-bottom: 80px;
}

/* ==========================================================================
   General styles
   ========================================================================== */


body {
    font-family: 'Khula', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color:#0A1E33;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6, #nav {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}


.navbar-brand {
	font-weight: 700;
}

.navbar-default .navbar-brand {
	color: #F16624;
}

.navbar-default {
	background-color: transparent;
	border-color: transparent;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #F16624;
	background-color: transparent;
	border-bottom: 2px solid #F16624
}
.navbar-right{
    background-color:#f8f8f8;;
}
.navbar-default .navbar-nav > li > a {
	color: #F16624;
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	background: url(../img/back.jpg) no-repeat center top;
	margin-top: -70px;
	padding-top: 250px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
}

#headerwrap h4 {
	font-weight: 400;
	color: #ffffff
}

#social {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #f2f2f2;
}

#social i {
	font-size: 40px;
	color: #4a4a4a
}

#social i:hover {
	color: #1abc9c
}

#footerwrap {
	padding-top: 70px;
	padding-bottom: 50px;
	background-color: #0A1E33;
}

#footerwrap p {
	color: #f2f2f2;
	margin-left: 10px;
}

#workwrap {	
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#workwrap.readmin {
    background: url("../img/portfolio/readmin.jpg") no-repeat center top;
    margin-top: 0px;
    padding-top: 80px;
    }
#workwrap.ozbike {
    background: url("../img/portfolio/ozbike-banner.jpg") no-repeat center center;
    margin-top: -70px;
    padding-top: 250px;
    }
#workwrap.ga {
    background: url("../img/portfolio/ga.jpg") no-repeat center center;
    margin-top: 0px;
    padding-top: 115px;
}
#workwrap.MSFT-ECO-MGR, #workwrap.ols {
    background: url("../img/portfolio/MSFT-ECO-MGR-bg.jpg") no-repeat -112px -248PX;
    margin-top: 0px;
    padding-top: 12em;
}
#workwrap.premera {
    background: url("../img/portfolio/blink-hp-hero.jpg") no-repeat center;
    background-color: #ccc;
    margin-top: 0px;
    padding-top: 115px;
}
#workwrap.ctf {
    background: url("../img/portfolio/babel.jpg") no-repeat center right;
    background-size:177vw;
    margin-top: -148px;
    margin-bottom:-142px;
    padding-top: 12em;
    width:111%;
}
#workwrap.edmentum {
    background-image: url("../img/portfolio/edmentum.png");
    background-size: cover;
    background-position: top;
    }

#workwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 40px;
	font-weight: bold;
}

#workwrap h4 {
	font-weight: 400;
	color: #ffffff
}

#aboutwrap {	
	background: url(../img/about.jpg) no-repeat center top;
	margin-top: 0px;
	padding-top: 0px;
	text-align:center;
	background-attachment:local;
	background-position: center center;
	min-height: 550px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap, #workwrap{
        text-shadow:#0A1E33 2px 2px;
}

/* Gallery */
.gallery {
	margin-top: 30px;min-width:360px;align-content: center;text-align: center;height:360px;
}

.gallery img:hover {
	opacity: 0.4;
}
.gallery:hover span{
    display:block;
    visibility:visible;
}
.gallery span{
    visibility:hidden;
    position:absolute;
    background-color:white;
    width:80%;
    left:10%;
    top:0;
}
#navName, .navbar-default .navbar-brand{color:transparent;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
    color:#16a085;
}

@media screen and (min-width:420px){
    #workwrap.ctf{
        margin-bottom:0;
    }
    #workwrap.premera {
        background-image: url("../img/portfolio/blink-hp-hero.jpg");
        background-size: cover;
        background-position: center 0px;}
}
/*smallish screen*/
@media screen and (min-width:768px){
   #workwrap.readmin {
        background: url("../img/portfolio/readmin.jpg") no-repeat -60vh 0;
        margin-top: 0px;
        padding-top: 233px;
    }
    #headerwrap h1, #workwrap h1 {
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 20px;
	letter-spacing: 4px;
	font-size: 80px;
	font-weight: bold;
    }

    .navbar-right{
        background-color:transparent;
    }
    #workwrap.ctf{
        width:100vw;
        background-size:100vw;
    }
    #workwrap.premera {
        background-size:cover;
    }
}
/*medium screen*/
@media screen and (min-width:1200px){
    #workwrap.ozbike {

    }
    #workwrap.readmin {
        background: url("../img/portfolio/readmin.jpg") no-repeat 1vh 0;
        margin-top: 0px;
        padding-top: 80px;
    }
    #workwrap.ga {
    }
    #workwrap.ctf{
        margin-top:-104px;
        padding-top:9em;
    }
    #workwrap.premera {
        background-size:cover;
    }
    #workwrap.edmentum {
    background-size:cover;
    }
}
/*large screen*/
@media screen and (min-width: 1500px){
    #workwrap.ozbike {

    }
    #workwrap.readmin {
        background: url("../img/portfolio/readmin.jpg") no-repeat 5px 0;
        background-size:120vw;
    }
    #workwrap.ga {
        background-size:100vw;
    }
    #workwrap.MSFT-ECO-MGR{
        background-position:0 -78px;
        padding-top:13em;
    }
}