@charset "UTF-8";

/*Box Sizing*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*Mobile Standard Sizing--------------------------------*/
body {
    font-family: 'gandhi_sansregular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    color: #333333;
    font-size: 15px;
    min-width: 320px; 
}
h1 {
    font-family: 'gandhi_sansbold', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.70em; 
    color: #87b4e8;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
    margin-top: 20px;
}
h2 {
    font-family: 'gandhi_sansregular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.40em; 
    color: #87b4e8;
    text-align: center;
    margin-bottom: 45px;
}
h3 {
    font-family: 'gandhi_serifbold_italic', 'Helvetica Neue', 'Helvetica', 'Arial', serif;
    font-style: italic;
    font-size: 1.125em; /*16/18*/
    color: #ffffff;
}
h4 {
    margin-top: 60px;
    color: #87b4e8;
}
p {
    text-align: left;
    font-size: 1em;/*16/14*/
    line-height: 1.7142857142857142em; /*16/14*/
}
.door-stop {
    clear: both;    
}
/*Hero-----------------------------------------------------------------*/
#hero {
    background-image: url(../images/hero-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 86.875%; /*278/320*100*/
    z-index: 1;
    position: relative;
}
#hero-logo {
    width: 30.625000000000004%;
    z-index: 5;
    position: absolute;
    bottom: 40%;
    right:  7%;
}
#hero-logo div {
        background-image: url(../images/logo.svg);
        background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 112.24489796%;
}
.hero-text {
    display: none;
}
/*Navagation-----------------------------------------------------------*/

/*Nav Home----------------*/
#nav {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 26px;
    margin-bottom: 45px;
}
#nav ul a{
    font-family: 'gandhi_sansregular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #500a3c;
}
#nav li{
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
}

/*Nav Projects----------------*/
#inner-nav {
    background-color: #500a3c;
    padding-top: 30px;
    padding-bottom: 50px;
    min-height: 74px;
    width: 100%;
}
#inner-nav ul {
    float: right;
}
#inner-nav a {
    font-family: 'gandhi_sansregular','Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #ffffff;
}
#inner-nav li{
    display: inline-block;  
    padding-left: 10px;
    padding-right: 10px;
}
.logo {
    width: 35px;
    padding-bottom: 35px;
    background-image: url(../images/iso-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}
.intro-para {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 45px;
    }
/*Projects-------------------------------------------------------------*/
.project-intro h1 {
    color: #500a3c;
    font-size: 1.8666666666666667em;
}
.project-intro p {
    margin-bottom: 30px;
}
.project-intro h3 {
    color: #666666;
    font-family: 'gandhi_sansbold', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.15em;
    margin-bottom: 15px;
}
.project-intro li {
    list-style-image: url(../images/check.svg);
    padding-bottom: 10px;
    margin-left: 20px;
}
.project-intro {
    margin-bottom: 30px;
}


a.launch-project {
    color: #500a3c;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #500a3c;
    border-radius: 3px;
    font-family: 'gandhi_sansbold', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.125em; /*16/18*/
    width: 73%;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}
a.marketing-plan{
    color: #500a3c;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #500a3c;
    border-radius: 3px;
    font-family: 'gandhi_sansbold','Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.125em; /*16/18*/
    width: 73%;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}
.project-contents h3 {
    font-family: 'gandhi_sansbold','Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.8666666666666667em;
    color: #666666;
    margin-bottom: 32px;
}
.project-display-scrump {
    width: 100%;
    padding-bottom: 66.666666667%;
    background-image: url(../images/scrumptious-display-sm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    margin-top: 73px;
}
.project-display-atmo {
    width: 100%;
    padding-bottom: 66.666666667%;
    background-image: url(../images/atmosphere-mocup-sm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    margin-top: 73px;
}
.project-display-envy {
    width: 100%;
    padding-bottom: 66.666666667%;
    background-image: url(../images/envy-display-sm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    margin-top: 73px;
}
.project-display-lfwt {
    width: 100%;
    padding-bottom: 66.666666667%;
    background-image: url(../images/lfwt-display-sm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    margin-top: 73px;
}
.project-display-quill {
    width: 100%;
    padding-bottom: 66.666666667%;
    background-image: url(../images/thequill-display-sm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    margin-top: 73px;
}
.project-display-lfwt {
    width: 100%;
    padding-bottom: 66.666666667%;
    background-image: url(../images/lfwt-display-sm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
    margin-top: 73px;
}
.project-screen-1 {
    width: 100%;
    margin-bottom: 48px;   
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
}
.project-screen-2 {
    width: 100%;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
}
.project-screen-2-responsive {
    width: 100%;
}
.project-tablet {
    width: 100%;
    margin-bottom: 60px;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px 
    rgba(0,0,0,0.08);
}
.project-mobile {
    width: 100%;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
}
.app-project {
    width: 100%;
}
.video-wrapper {
    position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.divider {
    width: 100%;
    height: 1px;
    background-color: #500a3c;
    margin-top: 72px;
    margin-bottom: 72px;
}
.color-table {
    width: 100%;
}
/*The Quill colors------------------------------*/
.color-lfwt-1 {
    background-color: #3e9f92;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-lfwt-2 {
    background-color: #a7c462;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-lfwt-3 {
    background-color: #ff685d;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-lfwt-4 {
    background-color: #f2f2f2;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-lfwt-5 {
    background-color: #ffffff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
/*The Quill colors------------------------------*/
.color-thequill-1 {
    background-color: #e35980;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-thequill-2 {
    background-color: #49aec0;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-thequill-3 {
    background-color: #ffffff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-thequill-4 {
    background-color: #fb7a54;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-thequill-5 {
    background-color: #ffffff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
/*Envy colors------------------------------*/
.color-envy-1 {
    background-color: #000000;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-envy-2 {
    background-color: #ffd600;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-envy-3 {
    background-color: #fff9d5;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-envy-4 {
    background-color: #fffced;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-envy-5 {
    background-color: #ffffff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
/*atmosphere colors------------------------------*/
.color-atmo-1 {
    background-color: #004880;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-atmo-2 {
    background-color: #2b6fb8;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-atmo-3 {
    background-color: #f2f8ff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-atmo-4 {
    background-color: #ffffff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-atmo-5 {
    background-color: #ffa100;
    float: left;
    width: 20%;
    padding-top: 20%;
}
/*scrumptious colors------------------------------*/
.color-scrump-1 {
    background-color: #82beca;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-scrump-2 {
    background-color: #f0fdff;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-scrump-3 {
    background-color: #fd4364;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-scrump-4 {
    background-color: #fc9d9a;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.color-scrump-5 {
    background-color: #feb7b4;
    float: left;
    width: 20%;
    padding-top: 20%;
}
.sub-head {
    font-size: 0.5333333333333333em;
    font-family: 'gandhi_sansbold', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
}
.font-choices {
    margin-top: 60px;
}
.font-image {
    width: 60%;
    margin-bottom: 60px;
}
.wire-screen-1 {
    width: 100%;
    margin-bottom: 60px;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
}
.wire-screen-2 {
    width: 100%;
    margin-bottom: 60px;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
}
.wire-screen-2-responsive {
    width: 100%;
    margin-bottom: 60px;
}
.wire-tablet {
    width: 100%;
    float: left;
    margin-bottom: 60px;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px 
    rgba(0,0,0,0.08);
}
.wire-mobile {
    width: 100%;
    float: left;
    -webkit-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    -moz-box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
    box-shadow: 5px 1px 20px 1px rgba(0,0,0,0.08);
}
/*Testimonials----------------------*/
.project-thumb {
    margin-top: 10px;
    
}
.project-thumb img {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #DFE0E0;
}
/*Content--------------------------------------------------------------*/
#wrapper {
    width: 95%; 
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
.intro {
    margin-bottom: 45px;
}
/*Project Thumbnails---------------------------------------------------*/
.alt-text {
    display: none;
}
.thumbnails {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    max-width: 95%;
}
.thumbnail-1 {
    background-image: url(../images/lfwt-thumb-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 100%;
}
.thumbnail-2 {
    background-image: url(../images/atmosphere-thumb-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 100%;
}
.thumbnail-3 {
    background-image: url(../images/thequill-thumb-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 100%;
}
.thumbnail-4 {
    background-image: url(../images/envy-thumb-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 100%; 
}
.thumbnail-5 {
    background-image: url(../images/scumptious-thumb-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 100%;
}
.thumbnail-6 {
    width: 100%;
    text-align: center;
    background-color: #500a3c;
    position: relative;
    padding-bottom: 100%;
}
.text {
    position: absolute;
    width: 100%;
    height: 100%;
}
.text-table {
    display: table;
    width: 100%;
    height: 100%;
}
.text-cell {
    display: table-cell;
    vertical-align: middle;
}
.text h3 {
    margin-bottom: 30px;
}
a.mail {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    text-decoration: none;
    color: #ffffff;
    font-family: 'gandhi_sansbold','Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 0.625em; /*16/10*/
    display:inline-block;
}
/*Social Media Icons---------------------------------------------------*/
ul.social-icons {
    margin-bottom: 30px;
}
.social-icons li {
    display: inline-block;
}
.discriptor {
    display: none;
}
.instagram {
    background-image: url(../images/instagram-reg.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.twitter {
    background-image: url(../images/twitter-reg.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.linkedin {
    background-image: url(../images/linkedin-reg.png);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

/*Resume CTA----------------------------------------------------------*/
h1.fancy {
    margin-top: 0;
}
h1.fancy:before {
    content: "";
    display: block;
    border-top: 2px solid #87b4e8;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    z-index: 1;
}
h1.fancy span {
    background: white;
    padding: 0 10px;
    position: relative;
    z-index: 5;
}
.resume-cta {
     text-align: center;
     margin-top: 55px;
     margin-bottom: 65px;
}
.resume-cta h1 {
    margin-bottom: 55px;
}
a.resume {
    color: #500a3c;
    text-decoration: none;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #500a3c;
    border-radius: 3px;
    font-family: 'gandhi_sansbold','Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.125em; /*16/18*/
    margin-right: auto;
    margin-left: auto;
}
/*Footer----------------------------------------------------------------*/
#footer {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #500a3c;
    color: #ffffff;
    font-size: 0.75em; /*16/12*/
    font-family: 'gandhi_sansregular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
}
#footer ul {
    display: none;
}

/*Responsive Styles-----------------------------------------------*/


/*Tablet-------------------------------------------------------------------------------------------*/
@media (min-width:600px) {
    body {
        font-size: 18px;
    }
    p {
        text-align: left;
        margin-bottom: 45px;
        font-size: 1em;/*16/14*/
        line-height: 1.7142857142857142em; /*16/14*/

    }
    /*Hero  -----------------------------------------------*/
    #hero {
        background-image: url(../images/hero-medium.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 78.666666667%; /*472/600*100*/
        z-index: 1;
        position: relative;
    }
    #hero-logo {
        width: 15.5%;
        z-index: 5;
        position: absolute;
        bottom: 50%;
        right: 25%;
        padding-bottom: 0;
        margin: 0;

    }
    #hero-logo div {
        width: 100%;
        height: 100%;
        padding-bottom: 118%;
        margin-left: 50%;
    }
    .hero-text {
        display: block;
        position: absolute;
        width: 40%;
        right: 25%;
        bottom: 6%;
        color: white;
    }
    .hero-text div {
        margin-left: 50%;
        width: 100%;
    }
    .hero-text h1, h2{
        color: white;
    }
    .intro-header {
        display: none;
    }
    /*Navagation-----------------------------------------------*/
    #nav {
        margin-left: auto;
        margin-right: auto;
        text-align: right;
        padding-top: 26px;
        margin-bottom: 45px;
    }
    #inner-nav ul {
        float: right;
        margin-top:5px;
    }
    #inner-nav a {
        font-family: 'gandhi_sansregular', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        font-size: 1em;
        text-decoration: none;
        color: #ffffff;
    }
    #inner-nav li{
        margin-right: 20px;
    }
    .logo {
        width: 170px;
        background-image: url(../images/logo-long.svg);
         margin-left: 20px;
    }
    /*Intro Header Styles-----------------------------------------------*/
    .intro {
        float: right;
        margin-top: -250px;  
        width: 35%;
    }
    .intro h1 {
        font-size: 1.875em; /*30/16*/
        line-height: 1.25em;
        color: #ffffff;
    }
    .intro h2 {
        font-size: 1.125em; /*18/16*/
        color: #ffffff;
    }
    .project-intro {
        margin-top: 65px;
    }
    .project-intro h1 {
        text-align: left;
    }
    .project-intro h2 {
        text-align: left;
        color: #87b4e8;
    }
    .intro-para {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    a.launch-project {
        width: 35%;
        display: block;
        margin-right: 0;
        margin-left: 0;
    }
    a.marketing-plan{
        width: 35%;
        display: block;
        margin-bottom: 15px;
        margin-right: 0;
        margin-left: 0;
    }
    .project-display-scrump {
        background-image: url(../images/scrumptious-display-lrg.jpg);
    }
    .project-display-atmo {
        background-image: url(../images/atmosphere-display-lrg.jpg);
    }
    .project-display-envy {
        background-image: url(../images/envy-display-lrg.jpg);
    }
    .project-display-lfwt {
        background-image: url(../images/lfwt-display-lrg.jpg);
    }
     .project-display-quill {
        background-image: url(../images/thequill-display-lrg.jpg);
    }
    .project-screen-1 {
        width: 48%;
        margin-bottom: 48px;
        float: left;
    }
     .project-screen-2 {
        width: 48%;
        margin-bottom: 48px;
        float: right;
    }
    .project-tablet {
        width: 28%;
        float: left;
        margin-bottom: 60px;
        margin-right: 20px;
        margin-left: 20px;
    }
    .project-mobile {
        width: 16%;
        float: left;
    }
    .wire-screen-1 {
        width: 48%;
        margin-bottom: 48px;
        float: left;
    }
    .wire-screen-2 {
        width: 48%;
        margin-bottom: 48px;
        float: right;
    }
    .wire-screen-2-responsive {
        width: 48%;
        margin-bottom: 48px;
        float: right;
    }
    .wire-tablet {
        width: 60%;
        float: left;
        margin-bottom: 60px;
        margin-right: 20px;
    }
    .wire-mobile {
        width: 30%;
        float: left;
    }
    /*Thumbnails------------------------------------------------------------*/
    
    .thumbnail-container {
        width: 50%;
        float: left;
    }
    
    .thumbnail-container a {
        display: block;   
    }
    
    .thumbnail-1 {
        background-image: url(../images/lfwt-thumb-small.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 100%;
    }
    
    .thumbnail-2 {
        background-image: url(../images/atmosphere-thumb-small.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 100%;
    }

    .thumbnail-3 {
        background-image: url(../images/thequill-thumb-small.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 100%;
    }
    
    .thumbnail-4 {
        background-image: url(../images/envy-thumb-small.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 100%;
    }
    
    .thumbnail-5 {
        background-image: url(../images/scumptious-thumb-small.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 100%;
    }
    
    .thumbnail-6 {
        width: 100%;
        padding-bottom: 100%;
        text-align: center;
        background-color: #500a3c;
        position: relative;
    }
    
    .text h3 {
        margin-bottom: 30px;
    }
    
    a.mail {
        display:inline-block;
    }    
    /*Social Media Icons---------------------------------------------------*/
    ul.social-icons {
        margin-bottom: 30px;
    }
    .instagram {
        background-image: url(../images/instagram-reg.png);
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }
    .twitter {
        background-image: url(../images/twitter-reg.png);
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }
    .linkedin {
        background-image: url(../images/linkedin-reg.png);
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }
    .resume-cta {
        width: 83.33333333333334%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 100px;
        padding-bottom: 50px;
        clear: both;
    }
    
    /**/
    /*Footer-----------------------------------------------------------------*/
    #footer h5 {
        float: left;
        padding-left: 50px;
        
    }
    #footer ul {
        display: block;
        float: right;
        padding-right: 50px;
    }
    #footer li {
        display: inline-block;
        padding-left: 20px;
    }
    #footer a {
        text-decoration: none;
        color: #ffffff;
    }
}

/*Desktop----------------------------------------------------------------------------------------------*/
@media (min-width:900px) {
    body {
        font-size: 20px;
    }
    /*Hero  -----------------------------------------------*/
    #hero {
        background-image: url(../images/hero-large.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 53.416666667%; /*641/1200*100*/
    }
  /*Navagation---------------------------------------------------------*/
    #nav ul {
        padding-right: 5%;
        text-align: right;
    }
    #nav ul a:hover{
        color: #87b4e8;
    }
    .logo {
        margin-left: 40px;
    }
    #inner-nav a:hover {
    color: #87b4e8;
    }
  /*Intro Header Styles-----------------------------------------------*/
    .intro {
        float: right;
        margin-top: -250px;  
        width: 45%;
    }
    .intro h1 {
        font-size: 1.875em; /*30/16*/
        line-height: 1.25em;
        color: #ffffff;
    }
    .intro h2 {
        font-size: 1.125em; /*18/16*/
        color: #ffffff;
    }
    .intro-para {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /*thumbnails---------------------------------------------------------------------------------------*/
    .thumbnail-container {
        width: 33.333333333333%;
        float: left;
    }
    .thumbnail-1 {
        -webkit-filter: grayscale(0);
  	    filter: grayscale(0);
    }
    .thumbnail-1:hover {
        background-image: url(../images/lfwt-thumb-small.jpg);
        -webkit-filter: grayscale(100%);
  	    filter: grayscale(100%);
    }
    .thumbnail-2 {
        -webkit-filter: grayscale(0);
  	    filter: grayscale(0);
    }
    .thumbnail-2:hover {
        background-image: url(../images/atmosphere-thumb-small.jpg);
        -webkit-filter: grayscale(100%);
  	    filter: grayscale(100%);
    }
    .thumbnail-3 {
        -webkit-filter: grayscale(0);
  	    filter: grayscale(0);
    }
    .thumbnail-3:hover {
        background-image: url(../images/thequill-thumb-small.jpg);
        -webkit-filter: grayscale(100%);
  	    filter: grayscale(100%);
    }
    .thumbnail-4 {
        -webkit-filter: grayscale(0);
  	    filter: grayscale(0);
    }
    .thumbnail-4:hover {
        background-image: url(../images/envy-thumb-small.jpg);
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    .thumbnail-5 {
        -webkit-filter: grayscale(0);
  	    filter: grayscale(0);
    }
    .thumbnail-5:hover {
        background-image: url(../images/scumptious-thumb-small.jpg);
        -webkit-filter: grayscale(100%);
  	     filter: grayscale(100%);
    }

    .text h3 {
        margin-bottom: 60px;
    }
    .project-tablet {
        width: 26%;
        float: left;
        margin-bottom: 60px;
        margin-right: 30px;
        margin-left: 30px;
    }
    .project-mobile {
        width: 19%;
        float: left;
    }
    /*Social Media Icons---------------------------------------------------*/
    .social-icons li {
        margin-right: 15px;
    }
    .instagram {
        background-image: url(../images/instagram-reg.png);
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }
    .instagram:hover {
         background-image: url(../images/instagram-invert.png);
    }
    .twitter {
        background-image: url(../images/twitter-reg.png);
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }
    .twitter:hover {
        background-image: url(../images/twitter-invert.png);
    }
    .linkedin {
        background-image: url(../images/linkedin-reg.png);
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }
    .linkedin:hover {
        background-image: url(../images/linkedin-invert.png);
    }
    a.mail {
        margin-top: 30px;    
    }
    .hvr-fade-white {
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          overflow: hidden;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: color, background-color;
          transition-property: color, background-color;
    }
    .hvr-fade-white:hover, .hvr-fade-white:focus, .hvr-fade-white:active {
          background-color: #ffffff;
          color: #500a3c;
    }
    
    /*Resume CTA-----------------------------------------------------------*/
    .resume-cta {
        width: 83.33333333333334%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 100px;
        padding-bottom: 50px;
        clear: both;
    }
    
    .hvr-fade {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      overflow: hidden;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: color, background-color;
      transition-property: color, background-color;
    }
    .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
      background-color: #500a3c;
      color: white;
    }
    .project-intro {
        width: 38%;
        margin-bottom: 60px;
    }
    .project-display-atmo-desktop {
        width: 56%;
        padding-bottom: 57.377807%;
        background-image: url(../images/atmosphere-display-desktop.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        float: right;
        margin-top: 0px;
        margin-bottom: 120px;
    }
    .project-display-scrump-desktop {
        width: 56%;
        padding-bottom: 57.377807%;
        background-image: url(../images/scrumptious-display-desktop.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        float: right;
        margin-top: 0px;
        margin-bottom: 120px;
    }
    .project-display-envy-desktop {
        width: 56%;
        padding-bottom: 57.377807%;
        background-image: url(../images/envy-display-desktop.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        float: right;
        margin-top: 0px;
        margin-bottom: 120px;
    }
    .project-display-lfwt-desktop {
        width: 56%;
        padding-bottom: 57.377807%;
        background-image: url(../images/lfwt-display-desktop.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        float: right;
        margin-top: 0px;
        margin-bottom: 120px;
    }
     .project-display-quill-desktop {
        width: 56%;
        padding-bottom: 57.377807%;
        background-image: url(../images/thequill-display-desktop.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        float: right;
        margin-top: 0px;
        margin-bottom: 120px;
    }
    .project-display-atmo {
        display: none;
    }
    .project-display-scrump {
        display: none;
    }
    .project-display-envy {
        display: none;
    }
     .project-display-lfwt {
        display: none;
    }
    .project-display-quill {
        display: none;
    }
    .project-contents {
        margin-top: 80px;
    }
}

@media (min-width:1200px) {
    #wrapper {
        max-width: 1200px;
    }
    a.launch-project {
        width: 25%;
    }
    a.marketing-plan{
        width: 25%;
    } 
}