html {
    color: #fff;
    margin:auto;
    margin: 0;
}

body {
    color: #999;
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.wrapper {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #e7e7e7;
}

a:link, a:visited {
    color:#2ea1ce;
    text-decoration: none;
}

a:hover{
    color:#8ab319;
    text-decoration: none;
}

.description p {
    color: #999;
    letter-spacing: .6px;
    font-weight: 200;
    font-size: 14px;
    margin: 0;
    letter-spacing: 1.5px;
    line-height: 1.8;
    text-align: center;
}

h1 {
    font-size: 1.75em;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    color: #777;
    padding: 0;
    margin: 0;
}

h2 {
    font-size: 1.2em;
    line-height: 1.7em;
    font-family: 'Roboto', sans-serif;
    color: #777;
    font-weight: 200;
    padding: 0;
    margin: 0;
}

.header-text h2 {
    font-size: 1.45em;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    color: #78577c;
    text-align: center;
    padding-top: 50px;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1em;
}

p {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #777;
    padding: 5px 0 30px 0;
    margin: 0;
    font-size: .9em;
    line-height: 1.7em;
    text-align: center;
}

.header-text p {
    font-size: .8em;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    color: #ceb9ce;
    text-align: center;
    margin: auto;
    padding: 5px 0 0 0;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1em;
}

h3 {
    font-size: 1em;
    line-height: 1.7em;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    letter-spacing: 2px;
    color: #777;
    padding-top: 5px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.img {
    text-decoration:none;
}

.clear {
    clear: both;
}


/* intro and header */

.head-wrapper {
    width: 100%;
    background-color:#fff;
    position: absolute;
    z-index: 10;
    top: 0;
}

/* The hero image */
.hero-image {
    /* The image used */
    background-image: url("../img/hero.jpg");
    /* Set a specific height */
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 300px;
    width: 100%;
    z-index: -100;
}

.hero img {
    text-align: center;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #e7e7e7;
}

.header {
    width:100%;
    text-align: center;
    padding: 20px 0 20px 0;
    background-image: url("../img/uxme-logo.svg");
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.content {
    color: #777;
    padding:20px 0 40px 0;
    width:90%;
    text-align: center;
    margin: auto;
}

.content-intro {
    color: #777;
    padding:40px 0 40px 0;
    width:90%;
    text-align: left;
    margin: auto;
}

.center-title {
    width:100%;
    text-align:center;
    padding-top:20px;
}


/* Logos */

.square {
    position: relative;
    width: 33%;
    height: auto;
    margin: auto;
    border-radius: 2px;
    min-height: 300px;
}

.bg {
    background-repeat: no-repeat;
}

.project {
    width:90%;
    max-width: 600px;
}


.description {
     padding-bottom:4%;
     width:100%;
     text-align: center;
     margin:1%;  
}


/* footer */

#footer {
    width:100%;
    text-align: center;
    color: #999;
    font-size: 14px;
    margin-top: 60px;
    border-top: 1px solid #e7e7e7;
    padding:20px 0 10px 0;
    margin-bottom: 10px;
}




/* media queries */

@media only screen and (min-width: 600px) {
    

    
    h2 {
    font: 1.1em;
    line-height: 1.7em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    }
    
    .header-text h2 {
    font-size: 2.75em;
    padding-top: 100px;
}
    
    .hero-image {
    height: 400px;
} 
    
.header-text p {
    font-size: 1em;
}
    
    
p {
    font-size: 1em;
    line-height: 1.9em;
}
    
    
}

@media only screen and (min-width: 960px) {
    
.hero-image {
    height: 600px;
}
    

    
.content {
    color: #777;
    padding:30px 0 30px 0;
    width:960px;
    text-align: center;
    margin: auto;
}
    
    
h1 {
    font-size: 3em;
}

    
.header-text h2 {
    font-size: 3.25em;
    padding-top: 170px;
}

    
h2 {
    font-size: 1.3em;
    line-height: 1.7em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    }
    
    
}

