body {
    background-color: #eee;
    background: -webkit-linear-gradient(bottom right, #fff, #eee) fixed;
    background: -o-linear-gradient(left top, #fff, #eee) fixed;
    background: -moz-linear-gradient(left top, #fff, #eee) fixed;
    background: linear-gradient(left top, #fff, #eee) fixed;
    min-height: 100%;
	padding: 0;
	margin: 0;
    width: 100%;
    margin: 0;
	}

#home {
    background-color: #eee;
    background: -webkit-linear-gradient(bottom right, #fff, #eee) fixed;
    background: -o-linear-gradient(left top, #fff, #eee) fixed;
    background: -moz-linear-gradient(left top, #fff, #eee) fixed;
    background: linear-gradient(left top, #fff, #eee) fixed;
    min-height: 100%;
    }

#work {
    background-color: #eee;
    background: -webkit-linear-gradient(bottom right, #fff, #eee) fixed;
    background: -o-linear-gradient(left top, #fff, #eee) fixed;
    background: -moz-linear-gradient(left top, #fff, #eee) fixed;
    background: linear-gradient(left top, #fff, #eee) fixed;
    min-height: 100%;
}

#about {
    background-color: #eee;
}

#main {
	margin: 0;
    width: 100%;
    float: left;
}

.about-img {
  background-image: url(img/tara-desktop.jpg);
  height: 100%;
  width: 100%;
  position: fixed;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.contact-img {
  background-image: url(img/desk-desktop.jpg);
  height: 100%;
  width: 100%;
  position: fixed;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

#nav {
    background-color: #fff;
	float: left;
    width: 9.4%;
    width: 20vh;
    height: 100%;
    padding: 5%;
    padding: 10vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
	}

#nav-container {
	width: 100%;
    height: 75%;
    width: 20vh;
	height: 80vh;
    position: relative;
	}

#logo, #about-logo, #contact-logo {
	float: left;
	background: url(img/logo.svg);
	background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 100%;
    padding-bottom: 0vh;
    width: 20vh;
	height: 20vh;
	}


#logo:hover, #logo:focus, #logo:active, #about-logo:hover, #about-logo:focus, #about-logo:active, #contact-logo:hover, #contact-logo:focus, #contact-logo:active {
	background: url(img/logo-color.svg);
	background-size: contain;
	}

hr {
    width: 100%;
}

#links {
	position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

#links ul {
	float: left;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#content {
	float: right;
    width: 50%;
    padding: 5%;
    padding: 10vh;
	}

#content-container {
    float: right;
    width: 75%;
	width: 80vh;
	height: 80vh;
	}

#work-container {
    float: right;
    width: 75%;
	width: 80vh;
	min-height: 100%;
    padding: 0vh;
	}

#about-container {
    background-color: #fff;
    float: right;
    width: 75%;
	width: 70vh;
	min-height: 100%;
    padding: 5vh;
	}

#contact-container {
    background-color: #fff;
    float: right;
    width: 75%;
	width: 70vh;
    padding: 5vh;
	}

.square {
    width: 25%;
    padding-bottom: 25%;
    padding-bottom: 0vh;
    width: 20vh;
	  height: 20vh;
	  float: left;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.square:hover, .square:focus, .square:active {
	-moz-filter: none;
         -o-filter: none;
    -webkit-filter: none;
    filter: none;
    filter: none;
    outline: 2px solid #19e5e5;
}

.square-1 {
	background: url(img/revelry-logo.png);
    background-size: cover;
	background-position: center;
    margin-bottom: 12.5%;
	margin-right: 12.5%;
    margin-bottom: 10vh;
	margin-right: 10vh;
}

.square-2 {
	background: url(img/ouidad-logo.png);
	background-size: cover;
	background-position: center;
	margin-bottom: 12.5%;
	margin-right: 12.5%;
    margin-bottom: 10vh;
	margin-right: 10vh;
}

.square-3 {
	background: url(img/retirable-logo.png);
	background-size: cover;
	background-position: center;
	margin-bottom: 12.5%;
    margin-bottom: 10vh;
}

.square-4 {
	background: url(img/ted-logo.png);
	background-size: cover;
	background-position: center;
    margin-bottom: 12.5%;
	margin-right: 12.5%;
    margin-bottom: 10vh;
	margin-right: 10vh;
}

.square-5 {
	background: url(img/inom-logo.png);
	background-size: cover;
	background-position: center;
	margin-bottom: 12.5%;
	margin-right: 12.5%;
    margin-bottom: 10vh;
	margin-right: 10vh;
}

.square-6 {
	background: url(img/switch-logo.png);
	background-size: cover;
	background-position: center;
	margin-bottom: 12.5%;
    margin-bottom: 10vh;
}

.square-7 {
	background: url(img/honeywell-logo.png);
	background-size: cover;
	background-position: center;
	margin-right: 12.5%;
    margin-right: 10vh;
}

.square-8 {
	background: url(img/buildium-logo.png);
	background-size: cover;
	background-position: center;
    margin-right: 12.5%;
    margin-right: 10vh;
}

.square-9 {
	background: url(img/beladora-logo.png);
	background-size: cover;
	background-position: center;
}


img {
    width: 100%;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
}

#tags {
    list-style-type: none;
    margin-bottom: 10%;
    padding: 0;
}

#tags li {
    display: inline;
    border: 1px solid #666;
    color: #666;
    padding: .5em;
    margin-right: .5em;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: .75em;
    letter-spacing: 0.06em;
}

#browser-top {
    float: left;
    width: 100%;
    height: 1em;
    margin: 0;
    background-color: #ccc;
    border: 1px solid #ccc;
}

#browser-top img {
    float: left;
    height: .5em;
    width: auto;
    margin: .25em;
}

.browser {
    border: 1px solid #ccc;
}

#portfolio-nav {
    float: left;
    width: 100%;
    margin-top: 6.25%;
    margin-top: 5vh;
}

#portfolio-nav-left {
    float: left;
    width: 33%;
    height: 5%;
    background-image: url(img/arrow-left.svg);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

#portfolio-nav-left:hover {
    background-image: url(img/arrow-left-hover.svg);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}

#portfolio-nav-center {
    float: left;
    width: 33%;
    height: 5%;
    background-image: url(img/grid1.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
}

#portfolio-nav-center:hover {
    background-image: url(img/grid-hover.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#portfolio-nav-right {
    float: left;
    width: 33%;
    height: 5%;
    background-image: url(img/arrow-right.svg);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: right;
}

#portfolio-nav-right:hover {
    background-image: url(img/arrow-right-hover.svg);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
}

.button {
font-size: 1em;
padding: .75em;
font-family: 'Raleway', sans-serif;
font-weight: 500;
letter-spacing: 0.06em;
border: 1px solid #333;
border-radius: 0;
background: #fff;
color: #333;
float: left;
margin-top: -3.125%;
margin-top: -2.5vh;
margin-bottom: 6.25%;
margin-bottom: 5vh;
}

.button:hover, .button:active {
border: 1px solid #19e5e5;
color: #19e5e5;
}

h1 {
    margin-top: 0;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    font-size: 2em;
}

h2 {
    margin-top: 0;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    letter-spacing: 0.03em;
    color: #333;
    font-size: 4em;
}

h3 {
    width: 100%;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 1em;
}

p {
    width: 100%;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 1em;
}

li a {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 1.25em;
    text-decoration: none;
}

.current {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 1.25em;
    text-decoration: none;
    cursor: default;
}

a {
    color: #837DFF;
    text-decoration: none;
}

a:hover, a:active {
    color: #19e5e5;
}

.copyright {
    float: left;
    margin-top: 6.25%;
    margin-top: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: #999;
    font-size: .75em;
    cursor: default;
}

.portrait-copyright {
    display: none;
}

@media (max-aspect-ratio: 4/3), (max-device-width: 1024px) {

    #about {
    background-color: #fff;
    background-image: url(img/tara-mobile.jpg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    }

    #contact {
    background-color: #fff;
    background-image: url(img/desk-mobile.jpg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    }

    .about-img, .contact-img {
    display: none;
}

    #nav {
    background-color: #fff;
	width: 100%;
    height: auto;
    padding: 0;
    position: relative;
    z-index: 0;
	}

    #about #nav,  #contact #nav{
    background: none;
	}

    #nav-container {
	width: 80%;
    height: auto;
    float: left;
    margin: 10%;
	}

    #logo {
	width: 25%;
    height: auto;
	padding-bottom: 25%;
	}

    #about-logo, #contact-logo {
	float: left;
	background: url(img/logo-white.svg);
	background-size: contain;
	width: 25%;
    height: auto;
	padding-bottom: 25%;
    margin-bottom: 25%;
	}

  #about-logo {
    filter: drop-shadow(2px 2px 2px #333);
  }

    #links hr {
    display: none;
    }

    #links {
	position: relative;
    float: right;
    width: 75%;
    text-align: right;
}

    #links ul {
    width: 100%;
    }

    .copyright {
    display: none;
}

    #content {
    float: left;
    padding: 0;
    width: 100%;
    }

    #content-container {
    float: left;
	width: 100%;
    height: auto;
    margin: 10% 10% 0 10%;
    padding: 0;
	}

    #work-container {
    float: left;
	width: 80%;
    height: auto;
    margin: 3% 10% 0 10%;
    padding: 5% 0 0 0;
	}

    #about-container {
    float: left;
	width: 80%;
    height: auto;
    margin: 3% 10% 0 10%;
    padding: 5% 0 0 0;
	}

    #contact-container {
    float: left;
	width: 80%;
    height: auto;
    margin: 3% 10% 0 10%;
    padding: 5% 0 0 0;
	}

    .square {
	width: 20%;
	height: auto;
	padding-bottom: 20%;
    width: 20vw;
    height: 20vw;
    padding-bottom: 0vw;
    }

    .square-1 {
	margin-bottom: 10%;
	margin-right: 10%;
    }

    .square-2 {
	margin-bottom: 10%;
	margin-right: 10%;
    }

    .square-3 {
	margin-bottom: 10%;
    }

    .square-4 {
	margin-bottom: 10%;
	margin-right: 10%;
    }

    .square-5 {
	margin-bottom: 10%;
	margin-right: 10%;
    }

    .square-6 {
	margin-bottom: 10%;
    }

    .square-7 {
	margin-right: 10%;
    }

    .square-8 {
	margin-right: 10%;
    }

    .portrait-copyright {
    display: inline;
    float: left;
    margin: 6.25% 0 6.25% 0;
    margin: 5vh 0 5vh 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: #999;
    font-size: 1em;
    }

    p {
    width: 100%;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 1.5em;
    }

    h1 {
    color: #666;
    }

}

@media (max-device-width: 768px) {

    h1 {
    font-size: 3em;
    }

    p {
    width: 100%;
    margin-bottom: 6.25%;
    margin-bottom: 5vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 2em;
    }

    li a {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 2em;
    text-decoration: none;
    }

    .current {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.75;
    color: #333;
    font-size: 2em;
    text-decoration: none;
}

.about li a {
    color: #fff;
    text-shadow: 1px 1px 3px #333;
}

.about .current {
color: #fff;
text-shadow: 1px 1px 3px #333;
}

    .portrait-copyright {
    display: inline;
    float: left;
    margin: 6.25% 0 6.25% 0;
    margin: 5vh 0 5vh 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: #999;
    font-size: 1.5em;
    }
}

/*
 * CSS Animations
 * Don't forget to add vendor prefixes!
 */
.m-scene .scene_element {
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
}

.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
  -webkit-animation-direction: alternate-reverse;
  -moz-animation-direction: alternate-reverse;
  -o-animation-direction: alternate-reverse;
}

/*
 * Keyframes
 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}