2 Replies - 341 Views - Last Post: 29 December 2017 - 07:46 PM

#1 Redbird5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 80
  • Joined: 07-July 12

SCSS Menu breaking when I change colors

Posted 28 December 2017 - 07:16 PM

I have been working on learning SCSS. This evening I changed the hexadecimal code under the $gray:#35302D; item in scss and everything that was working broke. My only conclusion is that something happened in the CSS. This is the tutorial I've been working on. This is the code I have for the menu. What am I doing and why is this happening? I'm using Dreamweaver CC 2018 and I have defined the site properly. I've been banging my head against a wall trying to figure out what is going wrong here and I can't figure it out. Please help!

SCSS
/* Scss Document */
body{
	background:#DFD8D9;
}
*, :before, :after{ box-sizing: border-box; }
//Fonts
$sans: 'Source San Pro', Helvetica, Arial, sans-serif;
//Colors
$gold:#d7b73a;
$gray:#35302D;
$gray-shine:#3C3735;
$white-off:#DFD8D9;
//Reusable Styles
.unstyle {list-style: none; padding: 0; margin:0;
	a {text-decoration:none;}
}
.list-inline{overflow:hidden;
	
	li{float:left;}
	
}

//Header Styles

.header {
	position:fixed;
	left: 0; top:0; bottom:0;
	width: 17.7em;
	background:$gray;
}
.logo {
	text-transform: lowercase;
	font: 300 2em $sans;
	text-align: center;
	padding: 0;margin:0;


a {
	display:block;
	padding: 1em 0;
	color:$white-off;
	text-decoration: none;
	transition: .15s linear color;

&:hover {
	color:#fff;
	span { color:$gold;}
 }
}
span {
	font-weight:700;
	transition:.15s linear color;
  }
}	
// MAIN NAV
.main-nav {
	ul {
		border-top:solid 1px $gray-shine;
	}
	
	li{border-bottom: solid 1px $gray-shine;}
	
	a{
		padding: 1.1em 0; 
		color:$white-off;
		font:400 1.125 $sans;
		text{
			align:center;
			transform:lowercase;
		}
		
		&:hover{
			color:#fff;
		}
	}
}
// SOCIAL LINKS
.social-links {
	border-bottom: solid 1px $gray-shine;
	
	li{
	width:25%;
	border-left:solid 1px $gray-shine;
	&:first-child {border:none;}
	}
		a{
			display: block;
			height:5.5em;
			text-align: center;
			color:$gray-shine;
			font:0.75em/5.5em $sans;
			&:hover {
				color:$white-off;
			}
		}
	
}

// HOVER SLIDE EFFECT
.list-hover-slide
{
	li{
		position: relative;
		overflow: hidden;
	}
	a{
		display:block;
		position: relative;
		z-index: 1;
		transition: .35s ease color;
		
		&:before {content:'';
		display: block;
		z-index: -1;
	  position:absolute;
	left:-100; top:0;
	width:100%;
	height:100%; 
	border-right:solid 5px $gold;
	background:$gray-shine;
	transition: .35s ease left; 
		}
		&.is-current,&:hover {
			
			&:before{
				left:0;
			}
		  }
		}
	}
#copy {
	color:$gold;
	width:100%;
}

This is the css.
/* Scss Document */
body {
  background: #DFD8D9; }

*, :before, :after {
  box-sizing: border-box; }

.unstyle {
  list-style: none;
  padding: 0;
  margin: 0; }
  .unstyle a {
    text-decoration: none; }

.list-inline {
  overflow: hidden; }
  .list-inline li {
    float: left; }

.header {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17.7em;
  background: #35302D; }

.logo {
  text-transform: lowercase;
  font: 300 2em "Source San Pro", Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 0;
  margin: 0; }
  .logo a {
    display: block;
    padding: 1em 0;
    color: #DFD8D9;
    text-decoration: none;
    transition: .15s linear color; }
    .logo a:hover {
      color: #fff; }
      .logo a:hover span {
        color: #d7b73a; }
  .logo span {
    font-weight: 700;
    transition: .15s linear color; }

.main-nav ul {
  border-top: solid 1px #3C3735; }
.main-nav li {
  border-bottom: solid 1px #3C3735; }
.main-nav a {
  padding: 1.1em 0;
  color: #DFD8D9;
  font: 400 1.125 "Source San Pro", Helvetica, Arial, sans-serif; }
  .main-nav a text {
    align: center;
    transform: lowercase; }
  .main-nav a:hover {
    color: #fff; }

.social-links {
  border-bottom: solid 1px #3C3735; }
  .social-links li {
    width: 25%;
    border-left: solid 1px #3C3735; }
    .social-links li:first-child {
      border: none; }
  .social-links a {
    display: block;
    height: 5.5em;
    text-align: center;
    color: #3C3735;
    font: 0.75em/5.5em "Source San Pro", Helvetica, Arial, sans-serif; }
    .social-links a:hover {
      color: #DFD8D9; }

.list-hover-slide li {
  position: relative;
  overflow: hidden; }
.list-hover-slide a {
  display: block;
  position: relative;
  z-index: 1;
  transition: .35s ease color; }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: -100;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #d7b73a;
    background: #3C3735;
    transition: .35s ease left; }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0; }

#copy {
  color: #d7b73a;
  width: 100%; }

/*.masonry-list {
  left: 50%;
  margin: -320px 0 0 -480px;
  position: absolute;
  top: 50%;
  width: 960px;
  li {
    float: left;
    height: 320px;
    overflow: hidden;
    padding: 0 1px 1px 0;
    width: 320px;
    &:focus,
    &:hover {
      a::after {
        opacity: 1;
        @include transform3d(translate3d(0,0,0));
      }
      .tile-primary-content img {
        @include scale3d(1.2,1.2,0);
        @include transform-origin(50%, 50%);
        @include transition(transform 15000ms cubic-bezier(0, 0, .80, .90));
      }
      p,
      h2,
      .tile-secondary-content {
        opacity: 1;
      }
    }
    a {
      &::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY1ODk4MTY1MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1ODk4MTY2MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjMwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNjQwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6XrhZfAAAAiUlEQVR42qzT0QmAIBQFUJP8aYh2ah0XaYZogtzGJfrsdQUpi6z3tAtXUfHgjw0RqRiNbqogOs4GnVBbgii8xKAznbHhdZKGoUMdXWOlSDWULgK0lED3DS7UJ+f+SeZAnwgHYiFfEBt5g0RIDhqlSA46EM38HSs6oO7psM1c6lEv/cVV+QXZBRgAnat44PE4W1oAAAAASUVORK5CYII=');
        bottom: 40px;
        content: '';
        display: block;
        height: 17px;
        opacity: 0;
        position: absolute;
        right: 40px;
        width: 17px;
        @include transform3d(translate3d(-10px,-10px,0));
        @include transition(all 150ms ease-out);
      }
    }
    &.tile-job,
    &.tile-facebook,
    &.tile-twitter {
      &:focus,
      &:hover {
        .tile-primary-content p {
          @include translate3d(150%,0,0);
          @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
        }
        .tile-secondary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
        }
      }
      .tile-primary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
      }
      .tile-secondary-content p {
        opacity: 1;
        @include translate3d(-150%,0,0);
        @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
      }
    }
    &.tile-job {
      .tile-primary-content {
        background-color: #71964f;
      }
    }
    &.tile-facebook {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAtCAYAAACqCZtVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzcwNjIyOTMwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzcwNjIyOTIwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjkwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNkEwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz61fp6rAAAA6klEQVR42uyUvQrCMBRGk1rcHHQQ3XVyESdx1CdwcPLxnH0H8QGcVKiDIOJkFezqT/wiXVp6k1bJIveDAy1ND7e5uZVKKVEwFVAGr/g+As/0Ij+HqAQmYAoGoJax5gHOIAR7sBC6YgNtsFLFMzdV3AJL0BDFs/aIBxLMvpTqbCnxCPTF99lQ4vEP0jsIqD3u5ZTcwDE+bnXQBLuPnDgNB0vXAzAEXuq9Kujqa0kMSBQPApWObpDpUyixbRylbY884SgsTohVBrYoAydXFYeuxBdX4iuLE83zibnnfwWLWcxiFrOYxX8rfgswAKPozlRQdflcAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 45px;
        opacity: 1;
        width: 22px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #3b539b;
      }
    }
    &.tile-twitter {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAlCAYAAADWSWD3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM2NjFBNUYzMDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM2NjFBNUY0MDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzY2MUE1RjEwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzY2MUE1RjIwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64QIJqAAADBklEQVR42syYS0hVURSG773aQxOxIsiyJOiBZTXsgZoURDRoEvQgokESTYygoCAQGtWkBlHWoFkFSUIFOimpKKyghF4SlBphpL0oeyikefpWLGEn55x7zr373nt++PB4Xvxn3bX3XnvFHceJZVF5UA2roBQmwltog8cQzIyYzgIT4AD0O97qhu0Qd3m+GI5A+b8gGxcKoRHyLBueAXed4GqGAvVRDWdgAG6OvdN8+W59qNGi4Wnw0gmvHvhu/D8IC9xMXzduOmUp4s1O+hqBrfo+8TQzYaT3UuO4Hi7D5DQGXQ1sTnPgfoQ6GILT8BBGzKh8c/nKZ1CRYpSbLER52Dj+BSvGp0efx4Ny837ID2E44RGEVCUe1rvl9O0kD3bCxoCmyywalmlytfl+M6fbkuTXYmiFJ7ArSb5PtbggVcF980TcWBFnwRtdpYLoB7TAVWiH98a12fDOkukSGPAyLToGh1N8eS88VbP90AAJC6YLdfbwNC1RvqO1QRQ0qvXKf0oYhUyTFjOb4FZETPe6nRwz/QdqdTDKjWWBK67MqsvPtOiR/pVZYaGkTgRMv0hmuiUWPbW7nTQHYqH+HKURGoSSpn1+kR6EPRHJZdEDN8Mxl3lUUuRgRExf8boQ99gj7tRSsDhHhmUxmQufg0R6TBdgEZyATzkwfcnLsF+kD0G5ftQ8WAv5WTI8rMVZl9cNXkZ64HiOUuO8n2G/SMe1BqnJsmHZXi3xSw2/nJYv2WGxvAyqfckMx5KUjmJ4DXRmyfBFLdqsdJgmQQN8dTKnDm0WBdqDxkP08go0x1fCFh3hNvRKf9H+oA+E2VkMaQEjC06FJcOvYV0Yw2EakJIie6HXYkrc0z5f6J6K30Xpc1TBSfhg0ewonNVApNRuk8WlErbBby1PpTSdD8thSga2T9LmupHWW9R9JVzTKGRC0m06CkU2urHjTyyDc9oPtqHnUA8lNnveXlOe7BM3KLUh9ow/oUN38616bF1B5+kinZfnwHSj7SUV2Redsrq10BrN9NL5V4ABAAD4zZE8N0pmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 37px;
        opacity: 1;
        width: 45px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #00afe0;
      }
    }
    &.tile-case,
    &.tile-client,
    &.tile-person {
      .tile-primary-content {
        padding: 0;
      }
      .tile-secondary-content {
        background-color: hsla(0,0%,0%,.7);
        @include transition(opacity 100ms ease-out);
      }
    }
    &.tile-client {
      a {
        &::after {
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFQzVFRUY1MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFQzVFRUY2MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODFBODJDMDAwN0Q2MTFFMzk5MTVCODIwM0E0MEVCQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEVDNUVFRjQwN0Q5MTFFMzk5MTVCODIwM0E0MEVCQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz48Qmb2AAAAuklEQVR42uyTMQ7CMAxF7QTlpJygZ2DNyAILA4ip3I8Bgi3Z1A20IVRIDPnSX9Lk/Z8mwZQSiBz5DsuEwrkpkOXJJ3JcCN6Rj8IDoOaefE6DIu+m0kjeGwbzvJOUYBp0lTvQxmszdtXm7EDu01jxi8asg/wNsBNrA2bBObwmoAh+B58K2GRztiXwFFwDLhnAfi+C2WgeUa7wPPXhVqjsopU+mpdrNAPPIfjB+EgOfqgGb/AG/2f4Q4ABALW94ZuwtKIxAAAAAElFTkSuQmCC');
          height: 22px;
          width: 23px;
          @include translate3d(0,0,0);
        }
        &:focus,
        &:hover {
          .tile-primary-content {
            background-color: transparent;
            img {
              @include scale3d(1,1,1);
            }
          }
        }
      }
      .tile-primary-content {
        background-color: #604951;
        @include transition(background-color 250ms ease-out);
      }
    }
    &.tile-person {
      text-align: center;
      .tile-secondary-content {
        display: table;
        height: 100%;
        padding: 0;
        width: 100%;
      }
      .tile-secondary-container {
        display: table-cell;
        vertical-align: middle;
      }
      h2 {
        font-size: 24px;
        position: static;
      }
      p {
        color: #a18e5c;
        font-family: 'Georgia', serif;
        font-size: 17px;
        margin: .2em;
        text-transform: none;
      }
    }
  }
  a,
  button {
    color: hsl(0,0%,100%);
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .tile-primary-content,
  .tile-secondary-content {
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 40px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .tile-primary-content {
    background-color: #a49058;
    img {
      width: 100%;
      @include scale3d(1,1,1);
      @include transition(transform 200ms ease-out);
    }
  }
  .tile-secondary-content {
    opacity: 0;
    @include transition(opacity 250ms ease-out);
    p,
    h2 {
      opacity: 0;
      @include transition(opacity 200ms 100ms ease-in);
    }
  }
  p,
  h2 {
    text-transform: uppercase;
  }
  h2 {
    font-size: 12px;
    margin: 0;
    position: absolute;
  }
  p {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1em;
    margin: 1em 0 0;
  }
}



// Meta

*, 
*:before, 
*:after {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: hsl(0,0%,14%);
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}*/
/* Scss Document */
body {
  background: #DFD8D9; }

*, :before, :after {
  box-sizing: border-box; }

.unstyle {
  list-style: none;
  padding: 0;
  margin: 0; }
  .unstyle a {
    text-decoration: none; }

.list-inline {
  overflow: hidden; }
  .list-inline li {
    float: left; }

.header {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17.7em;
  background: #35302D; }

.logo {
  text-transform: lowercase;
  font: 300 2em "Source San Pro", Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 0;
  margin: 0; }
  .logo a {
    display: block;
    padding: 1em 0;
    color: #DFD8D9;
    text-decoration: none;
    transition: .15s linear color; }
    .logo a:hover {
      color: #fff; }
      .logo a:hover span {
        color: #d7b73a; }
  .logo span {
    font-weight: 700;
    transition: .15s linear color; }

.main-nav ul {
  border-top: solid 1px #3C3735; }
.main-nav li {
  border-bottom: solid 1px #3C3735; }
.main-nav a {
  padding: 1.1em 0;
  color: #DFD8D9;
  font: 400 1.125 "Source San Pro", Helvetica, Arial, sans-serif; }
  .main-nav a text {
    align: center;
    transform: lowercase; }
  .main-nav a:hover {
    color: #fff; }

.social-links {
  border-bottom: solid 1px #3C3735; }
  .social-links li {
    width: 25%;
    border-left: solid 1px #3C3735; }
    .social-links li:first-child {
      border: none; }
  .social-links a {
    display: block;
    height: 5.5em;
    text-align: center;
    color: #3C3735;
    font: 0.75em/5.5em "Source San Pro", Helvetica, Arial, sans-serif; }
    .social-links a:hover {
      color: #DFD8D9; }

.list-hover-slide li {
  position: relative;
  overflow: hidden; }
.list-hover-slide a {
  display: block;
  position: relative;
  z-index: 1;
  transition: .35s ease color; }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: -100;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #d7b73a;
    background: #3C3735;
    transition: .35s ease left; }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0; }

#copy {
  color: #d7b73a;
  width: 100%; }

/*.masonry-list {
  left: 50%;
  margin: -320px 0 0 -480px;
  position: absolute;
  top: 50%;
  width: 960px;
  li {
    float: left;
    height: 320px;
    overflow: hidden;
    padding: 0 1px 1px 0;
    width: 320px;
    &:focus,
    &:hover {
      a::after {
        opacity: 1;
        @include transform3d(translate3d(0,0,0));
      }
      .tile-primary-content img {
        @include scale3d(1.2,1.2,0);
        @include transform-origin(50%, 50%);
        @include transition(transform 15000ms cubic-bezier(0, 0, .80, .90));
      }
      p,
      h2,
      .tile-secondary-content {
        opacity: 1;
      }
    }
    a {
      &::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY1ODk4MTY1MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1ODk4MTY2MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjMwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNjQwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6XrhZfAAAAiUlEQVR42qzT0QmAIBQFUJP8aYh2ah0XaYZogtzGJfrsdQUpi6z3tAtXUfHgjw0RqRiNbqogOs4GnVBbgii8xKAznbHhdZKGoUMdXWOlSDWULgK0lED3DS7UJ+f+SeZAnwgHYiFfEBt5g0RIDhqlSA46EM38HSs6oO7psM1c6lEv/cVV+QXZBRgAnat44PE4W1oAAAAASUVORK5CYII=');
        bottom: 40px;
        content: '';
        display: block;
        height: 17px;
        opacity: 0;
        position: absolute;
        right: 40px;
        width: 17px;
        @include transform3d(translate3d(-10px,-10px,0));
        @include transition(all 150ms ease-out);
      }
    }
    &.tile-job,
    &.tile-facebook,
    &.tile-twitter {
      &:focus,
      &:hover {
        .tile-primary-content p {
          @include translate3d(150%,0,0);
          @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
        }
        .tile-secondary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
        }
      }
      .tile-primary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
      }
      .tile-secondary-content p {
        opacity: 1;
        @include translate3d(-150%,0,0);
        @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
      }
    }
    &.tile-job {
      .tile-primary-content {
        background-color: #71964f;
      }
    }
    &.tile-facebook {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAtCAYAAACqCZtVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzcwNjIyOTMwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzcwNjIyOTIwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjkwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNkEwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz61fp6rAAAA6klEQVR42uyUvQrCMBRGk1rcHHQQ3XVyESdx1CdwcPLxnH0H8QGcVKiDIOJkFezqT/wiXVp6k1bJIveDAy1ND7e5uZVKKVEwFVAGr/g+As/0Ij+HqAQmYAoGoJax5gHOIAR7sBC6YgNtsFLFMzdV3AJL0BDFs/aIBxLMvpTqbCnxCPTF99lQ4vEP0jsIqD3u5ZTcwDE+bnXQBLuPnDgNB0vXAzAEXuq9Kujqa0kMSBQPApWObpDpUyixbRylbY884SgsTohVBrYoAydXFYeuxBdX4iuLE83zibnnfwWLWcxiFrOYxX8rfgswAKPozlRQdflcAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 45px;
        opacity: 1;
        width: 22px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #3b539b;
      }
    }
    &.tile-twitter {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAlCAYAAADWSWD3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM2NjFBNUYzMDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM2NjFBNUY0MDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzY2MUE1RjEwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzY2MUE1RjIwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64QIJqAAADBklEQVR42syYS0hVURSG773aQxOxIsiyJOiBZTXsgZoURDRoEvQgokESTYygoCAQGtWkBlHWoFkFSUIFOimpKKyghF4SlBphpL0oeyikefpWLGEn55x7zr373nt++PB4Xvxn3bX3XnvFHceJZVF5UA2roBQmwltog8cQzIyYzgIT4AD0O97qhu0Qd3m+GI5A+b8gGxcKoRHyLBueAXed4GqGAvVRDWdgAG6OvdN8+W59qNGi4Wnw0gmvHvhu/D8IC9xMXzduOmUp4s1O+hqBrfo+8TQzYaT3UuO4Hi7D5DQGXQ1sTnPgfoQ6GILT8BBGzKh8c/nKZ1CRYpSbLER52Dj+BSvGp0efx4Ny837ID2E44RGEVCUe1rvl9O0kD3bCxoCmyywalmlytfl+M6fbkuTXYmiFJ7ArSb5PtbggVcF980TcWBFnwRtdpYLoB7TAVWiH98a12fDOkukSGPAyLToGh1N8eS88VbP90AAJC6YLdfbwNC1RvqO1QRQ0qvXKf0oYhUyTFjOb4FZETPe6nRwz/QdqdTDKjWWBK67MqsvPtOiR/pVZYaGkTgRMv0hmuiUWPbW7nTQHYqH+HKURGoSSpn1+kR6EPRHJZdEDN8Mxl3lUUuRgRExf8boQ99gj7tRSsDhHhmUxmQufg0R6TBdgEZyATzkwfcnLsF+kD0G5ftQ8WAv5WTI8rMVZl9cNXkZ64HiOUuO8n2G/SMe1BqnJsmHZXi3xSw2/nJYv2WGxvAyqfckMx5KUjmJ4DXRmyfBFLdqsdJgmQQN8dTKnDm0WBdqDxkP08go0x1fCFh3hNvRKf9H+oA+E2VkMaQEjC06FJcOvYV0Yw2EakJIie6HXYkrc0z5f6J6K30Xpc1TBSfhg0ewonNVApNRuk8WlErbBby1PpTSdD8thSga2T9LmupHWW9R9JVzTKGRC0m06CkU2urHjTyyDc9oPtqHnUA8lNnveXlOe7BM3KLUh9ow/oUN38616bF1B5+kinZfnwHSj7SUV2Redsrq10BrN9NL5V4ABAAD4zZE8N0pmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 37px;
        opacity: 1;
        width: 45px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #00afe0;
      }
    }
    &.tile-case,
    &.tile-client,
    &.tile-person {
      .tile-primary-content {
        padding: 0;
      }
      .tile-secondary-content {
        background-color: hsla(0,0%,0%,.7);
        @include transition(opacity 100ms ease-out);
      }
    }
    &.tile-client {
      a {
        &::after {
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFQzVFRUY1MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFQzVFRUY2MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODFBODJDMDAwN0Q2MTFFMzk5MTVCODIwM0E0MEVCQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEVDNUVFRjQwN0Q5MTFFMzk5MTVCODIwM0E0MEVCQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz48Qmb2AAAAuklEQVR42uyTMQ7CMAxF7QTlpJygZ2DNyAILA4ip3I8Bgi3Z1A20IVRIDPnSX9Lk/Z8mwZQSiBz5DsuEwrkpkOXJJ3JcCN6Rj8IDoOaefE6DIu+m0kjeGwbzvJOUYBp0lTvQxmszdtXm7EDu01jxi8asg/wNsBNrA2bBObwmoAh+B58K2GRztiXwFFwDLhnAfi+C2WgeUa7wPPXhVqjsopU+mpdrNAPPIfjB+EgOfqgGb/AG/2f4Q4ABALW94ZuwtKIxAAAAAElFTkSuQmCC');
          height: 22px;
          width: 23px;
          @include translate3d(0,0,0);
        }
        &:focus,
        &:hover {
          .tile-primary-content {
            background-color: transparent;
            img {
              @include scale3d(1,1,1);
            }
          }
        }
      }
      .tile-primary-content {
        background-color: #604951;
        @include transition(background-color 250ms ease-out);
      }
    }
    &.tile-person {
      text-align: center;
      .tile-secondary-content {
        display: table;
        height: 100%;
        padding: 0;
        width: 100%;
      }
      .tile-secondary-container {
        display: table-cell;
        vertical-align: middle;
      }
      h2 {
        font-size: 24px;
        position: static;
      }
      p {
        color: #a18e5c;
        font-family: 'Georgia', serif;
        font-size: 17px;
        margin: .2em;
        text-transform: none;
      }
    }
  }
  a,
  button {
    color: hsl(0,0%,100%);
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .tile-primary-content,
  .tile-secondary-content {
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 40px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .tile-primary-content {
    background-color: #a49058;
    img {
      width: 100%;
      @include scale3d(1,1,1);
      @include transition(transform 200ms ease-out);
    }
  }
  .tile-secondary-content {
    opacity: 0;
    @include transition(opacity 250ms ease-out);
    p,
    h2 {
      opacity: 0;
      @include transition(opacity 200ms 100ms ease-in);
    }
  }
  p,
  h2 {
    text-transform: uppercase;
  }
  h2 {
    font-size: 12px;
    margin: 0;
    position: absolute;
  }
  p {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1em;
    margin: 1em 0 0;
  }
}



// Meta

*, 
*:before, 
*:after {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: hsl(0,0%,14%);
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}*/
/* Scss Document */
body {
  background: #DFD8D9; }

*, :before, :after {
  box-sizing: border-box; }

.unstyle {
  list-style: none;
  padding: 0;
  margin: 0; }
  .unstyle a {
    text-decoration: none; }

.list-inline {
  overflow: hidden; }
  .list-inline li {
    float: left; }

.header {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17.7em;
  background: #35302D; }

.logo {
  text-transform: lowercase;
  font: 300 2em "Source San Pro", Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 0;
  margin: 0; }
  .logo a {
    display: block;
    padding: 1em 0;
    color: #DFD8D9;
    text-decoration: none;
    transition: .15s linear color; }
    .logo a:hover {
      color: #fff; }
      .logo a:hover span {
        color: #d7b73a; }
  .logo span {
    font-weight: 700;
    transition: .15s linear color; }

.main-nav ul {
  border-top: solid 1px #3C3735; }
.main-nav li {
  border-bottom: solid 1px #3C3735; }
.main-nav a {
  padding: 1.1em 0;
  color: #DFD8D9;
  font: 400 1.125 "Source San Pro", Helvetica, Arial, sans-serif; }
  .main-nav a text {
    align: center;
    transform: lowercase; }
  .main-nav a:hover {
    color: #fff; }

.social-links {
  border-bottom: solid 1px #3C3735; }
  .social-links li {
    width: 25%;
    border-left: solid 1px #3C3735; }
    .social-links li:first-child {
      border: none; }
  .social-links a {
    display: block;
    height: 5.5em;
    text-align: center;
    color: #3C3735;
    font: 0.75em/5.5em "Source San Pro", Helvetica, Arial, sans-serif; }
    .social-links a:hover {
      color: #DFD8D9; }

.list-hover-slide li {
  position: relative;
  overflow: hidden; }
.list-hover-slide a {
  display: block;
  position: relative;
  z-index: 1;
  transition: .35s ease color; }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: -100;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #d7b73a;
    background: #3C3735;
    transition: .35s ease left; }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0; }

#copy {
  color: #d7b73a;
  width: 100%; }

/*.masonry-list {
  left: 50%;
  margin: -320px 0 0 -480px;
  position: absolute;
  top: 50%;
  width: 960px;
  li {
    float: left;
    height: 320px;
    overflow: hidden;
    padding: 0 1px 1px 0;
    width: 320px;
    &:focus,
    &:hover {
      a::after {
        opacity: 1;
        @include transform3d(translate3d(0,0,0));
      }
      .tile-primary-content img {
        @include scale3d(1.2,1.2,0);
        @include transform-origin(50%, 50%);
        @include transition(transform 15000ms cubic-bezier(0, 0, .80, .90));
      }
      p,
      h2,
      .tile-secondary-content {
        opacity: 1;
      }
    }
    a {
      &::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY1ODk4MTY1MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1ODk4MTY2MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjMwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNjQwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6XrhZfAAAAiUlEQVR42qzT0QmAIBQFUJP8aYh2ah0XaYZogtzGJfrsdQUpi6z3tAtXUfHgjw0RqRiNbqogOs4GnVBbgii8xKAznbHhdZKGoUMdXWOlSDWULgK0lED3DS7UJ+f+SeZAnwgHYiFfEBt5g0RIDhqlSA46EM38HSs6oO7psM1c6lEv/cVV+QXZBRgAnat44PE4W1oAAAAASUVORK5CYII=');
        bottom: 40px;
        content: '';
        display: block;
        height: 17px;
        opacity: 0;
        position: absolute;
        right: 40px;
        width: 17px;
        @include transform3d(translate3d(-10px,-10px,0));
        @include transition(all 150ms ease-out);
      }
    }
    &.tile-job,
    &.tile-facebook,
    &.tile-twitter {
      &:focus,
      &:hover {
        .tile-primary-content p {
          @include translate3d(150%,0,0);
          @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
        }
        .tile-secondary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
        }
      }
      .tile-primary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
      }
      .tile-secondary-content p {
        opacity: 1;
        @include translate3d(-150%,0,0);
        @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
      }
    }
    &.tile-job {
      .tile-primary-content {
        background-color: #71964f;
      }
    }
    &.tile-facebook {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAtCAYAAACqCZtVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzcwNjIyOTMwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzcwNjIyOTIwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjkwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNkEwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz61fp6rAAAA6klEQVR42uyUvQrCMBRGk1rcHHQQ3XVyESdx1CdwcPLxnH0H8QGcVKiDIOJkFezqT/wiXVp6k1bJIveDAy1ND7e5uZVKKVEwFVAGr/g+As/0Ij+HqAQmYAoGoJax5gHOIAR7sBC6YgNtsFLFMzdV3AJL0BDFs/aIBxLMvpTqbCnxCPTF99lQ4vEP0jsIqD3u5ZTcwDE+bnXQBLuPnDgNB0vXAzAEXuq9Kujqa0kMSBQPApWObpDpUyixbRylbY884SgsTohVBrYoAydXFYeuxBdX4iuLE83zibnnfwWLWcxiFrOYxX8rfgswAKPozlRQdflcAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 45px;
        opacity: 1;
        width: 22px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #3b539b;
      }
    }
    &.tile-twitter {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAlCAYAAADWSWD3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM2NjFBNUYzMDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM2NjFBNUY0MDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzY2MUE1RjEwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzY2MUE1RjIwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64QIJqAAADBklEQVR42syYS0hVURSG773aQxOxIsiyJOiBZTXsgZoURDRoEvQgokESTYygoCAQGtWkBlHWoFkFSUIFOimpKKyghF4SlBphpL0oeyikefpWLGEn55x7zr373nt++PB4Xvxn3bX3XnvFHceJZVF5UA2roBQmwltog8cQzIyYzgIT4AD0O97qhu0Qd3m+GI5A+b8gGxcKoRHyLBueAXed4GqGAvVRDWdgAG6OvdN8+W59qNGi4Wnw0gmvHvhu/D8IC9xMXzduOmUp4s1O+hqBrfo+8TQzYaT3UuO4Hi7D5DQGXQ1sTnPgfoQ6GILT8BBGzKh8c/nKZ1CRYpSbLER52Dj+BSvGp0efx4Ny837ID2E44RGEVCUe1rvl9O0kD3bCxoCmyywalmlytfl+M6fbkuTXYmiFJ7ArSb5PtbggVcF980TcWBFnwRtdpYLoB7TAVWiH98a12fDOkukSGPAyLToGh1N8eS88VbP90AAJC6YLdfbwNC1RvqO1QRQ0qvXKf0oYhUyTFjOb4FZETPe6nRwz/QdqdTDKjWWBK67MqsvPtOiR/pVZYaGkTgRMv0hmuiUWPbW7nTQHYqH+HKURGoSSpn1+kR6EPRHJZdEDN8Mxl3lUUuRgRExf8boQ99gj7tRSsDhHhmUxmQufg0R6TBdgEZyATzkwfcnLsF+kD0G5ftQ8WAv5WTI8rMVZl9cNXkZ64HiOUuO8n2G/SMe1BqnJsmHZXi3xSw2/nJYv2WGxvAyqfckMx5KUjmJ4DXRmyfBFLdqsdJgmQQN8dTKnDm0WBdqDxkP08go0x1fCFh3hNvRKf9H+oA+E2VkMaQEjC06FJcOvYV0Yw2EakJIie6HXYkrc0z5f6J6K30Xpc1TBSfhg0ewonNVApNRuk8WlErbBby1PpTSdD8thSga2T9LmupHWW9R9JVzTKGRC0m06CkU2urHjTyyDc9oPtqHnUA8lNnveXlOe7BM3KLUh9ow/oUN38616bF1B5+kinZfnwHSj7SUV2Redsrq10BrN9NL5V4ABAAD4zZE8N0pmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 37px;
        opacity: 1;
        width: 45px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #00afe0;
      }
    }
    &.tile-case,
    &.tile-client,
    &.tile-person {
      .tile-primary-content {
        padding: 0;
      }
      .tile-secondary-content {
        background-color: hsla(0,0%,0%,.7);
        @include transition(opacity 100ms ease-out);
      }
    }
    &.tile-client {
      a {
        &::after {
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFQzVFRUY1MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFQzVFRUY2MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODFBODJDMDAwN0Q2MTFFMzk5MTVCODIwM0E0MEVCQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEVDNUVFRjQwN0Q5MTFFMzk5MTVCODIwM0E0MEVCQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz48Qmb2AAAAuklEQVR42uyTMQ7CMAxF7QTlpJygZ2DNyAILA4ip3I8Bgi3Z1A20IVRIDPnSX9Lk/Z8mwZQSiBz5DsuEwrkpkOXJJ3JcCN6Rj8IDoOaefE6DIu+m0kjeGwbzvJOUYBp0lTvQxmszdtXm7EDu01jxi8asg/wNsBNrA2bBObwmoAh+B58K2GRztiXwFFwDLhnAfi+C2WgeUa7wPPXhVqjsopU+mpdrNAPPIfjB+EgOfqgGb/AG/2f4Q4ABALW94ZuwtKIxAAAAAElFTkSuQmCC');
          height: 22px;
          width: 23px;
          @include translate3d(0,0,0);
        }
        &:focus,
        &:hover {
          .tile-primary-content {
            background-color: transparent;
            img {
              @include scale3d(1,1,1);
            }
          }
        }
      }
      .tile-primary-content {
        background-color: #604951;
        @include transition(background-color 250ms ease-out);
      }
    }
    &.tile-person {
      text-align: center;
      .tile-secondary-content {
        display: table;
        height: 100%;
        padding: 0;
        width: 100%;
      }
      .tile-secondary-container {
        display: table-cell;
        vertical-align: middle;
      }
      h2 {
        font-size: 24px;
        position: static;
      }
      p {
        color: #a18e5c;
        font-family: 'Georgia', serif;
        font-size: 17px;
        margin: .2em;
        text-transform: none;
      }
    }
  }
  a,
  button {
    color: hsl(0,0%,100%);
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .tile-primary-content,
  .tile-secondary-content {
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 40px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .tile-primary-content {
    background-color: #a49058;
    img {
      width: 100%;
      @include scale3d(1,1,1);
      @include transition(transform 200ms ease-out);
    }
  }
  .tile-secondary-content {
    opacity: 0;
    @include transition(opacity 250ms ease-out);
    p,
    h2 {
      opacity: 0;
      @include transition(opacity 200ms 100ms ease-in);
    }
  }
  p,
  h2 {
    text-transform: uppercase;
  }
  h2 {
    font-size: 12px;
    margin: 0;
    position: absolute;
  }
  p {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1em;
    margin: 1em 0 0;
  }
}



// Meta

*, 
*:before, 
*:after {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: hsl(0,0%,14%);
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}*/
/* Scss Document */
body {
  background: #DFD8D9; }

*, :before, :after {
  box-sizing: border-box; }

.unstyle {
  list-style: none;
  padding: 0;
  margin: 0; }
  .unstyle a {
    text-decoration: none; }

.list-inline {
  overflow: hidden; }
  .list-inline li {
    float: left; }

.header {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17.7em;
  background: #35302D; }

.logo {
  text-transform: lowercase;
  font: 300 2em "Source San Pro", Helvetica, Arial, sans-serif;
  text-align: center;
  padding: 0;
  margin: 0; }
  .logo a {
    display: block;
    padding: 1em 0;
    color: #DFD8D9;
    text-decoration: none;
    transition: .15s linear color; }
    .logo a:hover {
      color: #fff; }
      .logo a:hover span {
        color: #d7b73a; }
  .logo span {
    font-weight: 700;
    transition: .15s linear color; }

.main-nav ul {
  border-top: solid 1px #3C3735; }
.main-nav li {
  border-bottom: solid 1px #3C3735; }
.main-nav a {
  padding: 1.1em 0;
  color: #DFD8D9;
  font: 400 1.125 "Source San Pro", Helvetica, Arial, sans-serif; }
  .main-nav a text {
    align: center;
    transform: lowercase; }
  .main-nav a:hover {
    color: #fff; }

.social-links {
  border-bottom: solid 1px #3C3735; }
  .social-links li {
    width: 25%;
    border-left: solid 1px #3C3735; }
    .social-links li:first-child {
      border: none; }
  .social-links a {
    display: block;
    height: 5.5em;
    text-align: center;
    color: #3C3735;
    font: 0.75em/5.5em "Source San Pro", Helvetica, Arial, sans-serif; }
    .social-links a:hover {
      color: #DFD8D9; }

.list-hover-slide li {
  position: relative;
  overflow: hidden; }
.list-hover-slide a {
  display: block;
  position: relative;
  z-index: 1;
  transition: .35s ease color; }
  .list-hover-slide a:before {
    content: '';
    display: block;
    z-index: -1;
    position: absolute;
    left: -100;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: solid 5px #d7b73a;
    background: #3C3735;
    transition: .35s ease left; }
  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
    left: 0; }

#copy {
  color: #d7b73a;
  width: 100%; }

/*.masonry-list {
  left: 50%;
  margin: -320px 0 0 -480px;
  position: absolute;
  top: 50%;
  width: 960px;
  li {
    float: left;
    height: 320px;
    overflow: hidden;
    padding: 0 1px 1px 0;
    width: 320px;
    &:focus,
    &:hover {
      a::after {
        opacity: 1;
        @include transform3d(translate3d(0,0,0));
      }
      .tile-primary-content img {
        @include scale3d(1.2,1.2,0);
        @include transform-origin(50%, 50%);
        @include transition(transform 15000ms cubic-bezier(0, 0, .80, .90));
      }
      p,
      h2,
      .tile-secondary-content {
        opacity: 1;
      }
    }
    a {
      &::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY1ODk4MTY1MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1ODk4MTY2MDNBQTExRTNBN0U2RjUyQkFDMTgxQjI1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjMwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNjQwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6XrhZfAAAAiUlEQVR42qzT0QmAIBQFUJP8aYh2ah0XaYZogtzGJfrsdQUpi6z3tAtXUfHgjw0RqRiNbqogOs4GnVBbgii8xKAznbHhdZKGoUMdXWOlSDWULgK0lED3DS7UJ+f+SeZAnwgHYiFfEBt5g0RIDhqlSA46EM38HSs6oO7psM1c6lEv/cVV+QXZBRgAnat44PE4W1oAAAAASUVORK5CYII=');
        bottom: 40px;
        content: '';
        display: block;
        height: 17px;
        opacity: 0;
        position: absolute;
        right: 40px;
        width: 17px;
        @include transform3d(translate3d(-10px,-10px,0));
        @include transition(all 150ms ease-out);
      }
    }
    &.tile-job,
    &.tile-facebook,
    &.tile-twitter {
      &:focus,
      &:hover {
        .tile-primary-content p {
          @include translate3d(150%,0,0);
          @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
        }
        .tile-secondary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
        }
      }
      .tile-primary-content p {
          @include translate3d(0,0,0);
          @include transition(transform 300ms 150ms cubic-bezier(0, 0, .40, 1));
      }
      .tile-secondary-content p {
        opacity: 1;
        @include translate3d(-150%,0,0);
        @include transition(transform 300ms cubic-bezier(0, 0, .40, 1));
      }
    }
    &.tile-job {
      .tile-primary-content {
        background-color: #71964f;
      }
    }
    &.tile-facebook {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAtCAYAAACqCZtVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzcwNjIyOTMwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzcwNjIyOTIwM0FFMTFFM0E3RTZGNTJCQUMxODFCMjUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjU4OTgxNjkwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjU4OTgxNkEwM0FBMTFFM0E3RTZGNTJCQUMxODFCMjUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz61fp6rAAAA6klEQVR42uyUvQrCMBRGk1rcHHQQ3XVyESdx1CdwcPLxnH0H8QGcVKiDIOJkFezqT/wiXVp6k1bJIveDAy1ND7e5uZVKKVEwFVAGr/g+As/0Ij+HqAQmYAoGoJax5gHOIAR7sBC6YgNtsFLFMzdV3AJL0BDFs/aIBxLMvpTqbCnxCPTF99lQ4vEP0jsIqD3u5ZTcwDE+bnXQBLuPnDgNB0vXAzAEXuq9Kujqa0kMSBQPApWObpDpUyixbRylbY884SgsTohVBrYoAydXFYeuxBdX4iuLE83zibnnfwWLWcxiFrOYxX8rfgswAKPozlRQdflcAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 45px;
        opacity: 1;
        width: 22px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #3b539b;
      }
    }
    &.tile-twitter {
      a::after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAlCAYAAADWSWD3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM2NjFBNUYzMDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM2NjFBNUY0MDM2QjExRTM4MUJDQzRENjgzQjYxOEVGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzY2MUE1RjEwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzY2MUE1RjIwMzZCMTFFMzgxQkNDNEQ2ODNCNjE4RUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64QIJqAAADBklEQVR42syYS0hVURSG773aQxOxIsiyJOiBZTXsgZoURDRoEvQgokESTYygoCAQGtWkBlHWoFkFSUIFOimpKKyghF4SlBphpL0oeyikefpWLGEn55x7zr373nt++PB4Xvxn3bX3XnvFHceJZVF5UA2roBQmwltog8cQzIyYzgIT4AD0O97qhu0Qd3m+GI5A+b8gGxcKoRHyLBueAXed4GqGAvVRDWdgAG6OvdN8+W59qNGi4Wnw0gmvHvhu/D8IC9xMXzduOmUp4s1O+hqBrfo+8TQzYaT3UuO4Hi7D5DQGXQ1sTnPgfoQ6GILT8BBGzKh8c/nKZ1CRYpSbLER52Dj+BSvGp0efx4Ny837ID2E44RGEVCUe1rvl9O0kD3bCxoCmyywalmlytfl+M6fbkuTXYmiFJ7ArSb5PtbggVcF980TcWBFnwRtdpYLoB7TAVWiH98a12fDOkukSGPAyLToGh1N8eS88VbP90AAJC6YLdfbwNC1RvqO1QRQ0qvXKf0oYhUyTFjOb4FZETPe6nRwz/QdqdTDKjWWBK67MqsvPtOiR/pVZYaGkTgRMv0hmuiUWPbW7nTQHYqH+HKURGoSSpn1+kR6EPRHJZdEDN8Mxl3lUUuRgRExf8boQ99gj7tRSsDhHhmUxmQufg0R6TBdgEZyATzkwfcnLsF+kD0G5ftQ8WAv5WTI8rMVZl9cNXkZ64HiOUuO8n2G/SMe1BqnJsmHZXi3xSw2/nJYv2WGxvAyqfckMx5KUjmJ4DXRmyfBFLdqsdJgmQQN8dTKnDm0WBdqDxkP08go0x1fCFh3hNvRKf9H+oA+E2VkMaQEjC06FJcOvYV0Yw2EakJIie6HXYkrc0z5f6J6K30Xpc1TBSfhg0ewonNVApNRuk8WlErbBby1PpTSdD8thSga2T9LmupHWW9R9JVzTKGRC0m06CkU2urHjTyyDc9oPtqHnUA8lNnveXlOe7BM3KLUh9ow/oUN38616bF1B5+kinZfnwHSj7SUV2Redsrq10BrN9NL5V4ABAAD4zZE8N0pmAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        height: 37px;
        opacity: 1;
        width: 45px;
        @include translate3d(0,0,0);
      }
      .tile-primary-content {
        background-color: #00afe0;
      }
    }
    &.tile-case,
    &.tile-client,
    &.tile-person {
      .tile-primary-content {
        padding: 0;
      }
      .tile-secondary-content {
        background-color: hsla(0,0%,0%,.7);
        @include transition(opacity 100ms ease-out);
      }
    }
    &.tile-client {
      a {
        &::after {
          background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBFQzVFRUY1MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBFQzVFRUY2MDdEOTExRTM5OTE1QjgyMDNBNDBFQkE1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODFBODJDMDAwN0Q2MTFFMzk5MTVCODIwM0E0MEVCQTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEVDNUVFRjQwN0Q5MTFFMzk5MTVCODIwM0E0MEVCQTUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz48Qmb2AAAAuklEQVR42uyTMQ7CMAxF7QTlpJygZ2DNyAILA4ip3I8Bgi3Z1A20IVRIDPnSX9Lk/Z8mwZQSiBz5DsuEwrkpkOXJJ3JcCN6Rj8IDoOaefE6DIu+m0kjeGwbzvJOUYBp0lTvQxmszdtXm7EDu01jxi8asg/wNsBNrA2bBObwmoAh+B58K2GRztiXwFFwDLhnAfi+C2WgeUa7wPPXhVqjsopU+mpdrNAPPIfjB+EgOfqgGb/AG/2f4Q4ABALW94ZuwtKIxAAAAAElFTkSuQmCC');
          height: 22px;
          width: 23px;
          @include translate3d(0,0,0);
        }
        &:focus,
        &:hover {
          .tile-primary-content {
            background-color: transparent;
            img {
              @include scale3d(1,1,1);
            }
          }
        }
      }
      .tile-primary-content {
        background-color: #604951;
        @include transition(background-color 250ms ease-out);
      }
    }
    &.tile-person {
      text-align: center;
      .tile-secondary-content {
        display: table;
        height: 100%;
        padding: 0;
        width: 100%;
      }
      .tile-secondary-container {
        display: table-cell;
        vertical-align: middle;
      }
      h2 {
        font-size: 24px;
        position: static;
      }
      p {
        color: #a18e5c;
        font-family: 'Georgia', serif;
        font-size: 17px;
        margin: .2em;
        text-transform: none;
      }
    }
  }
  a,
  button {
    color: hsl(0,0%,100%);
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .tile-primary-content,
  .tile-secondary-content {
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 40px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .tile-primary-content {
    background-color: #a49058;
    img {
      width: 100%;
      @include scale3d(1,1,1);
      @include transition(transform 200ms ease-out);
    }
  }
  .tile-secondary-content {
    opacity: 0;
    @include transition(opacity 250ms ease-out);
    p,
    h2 {
      opacity: 0;
      @include transition(opacity 200ms 100ms ease-in);
    }
  }
  p,
  h2 {
    text-transform: uppercase;
  }
  h2 {
    font-size: 12px;
    margin: 0;
    position: absolute;
  }
  p {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1em;
    margin: 1em 0 0;
  }
}



// Meta

*, 
*:before, 
*:after {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: hsl(0,0%,14%);
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}*/



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to N99Design 2018</title>
<link rel="stylesheet" type="text/css" href="styles/scsstest-styles.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather" rel="stylesheet" type="text/css">
</head>

<body>
	<header class="header" role="banner">
  <h1 class="logo">
    <a href="#">Eric <span>Nevitt</span></a>
  </h1>
  <div class="nav-wrap">
    <nav class="main-nav" role="navigation">
      <ul class="unstyled list-hover-slide">
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        
      </ul>
    </nav>
    <ul class="social-links list-inline unstyled list-hover-slide">
      <li><a href="https://www.linkedin.com/in/eric-nevitt/">LinkedIn</a></li>
		<li><a href="facebook.com">Facebook</a></li>
		<li><a href="tel:2178556536">217-855-6536</a></li>
      <li><a href="#">Resume</a></li>
    </ul>
  </div>
		<div id="copy">&copy;  <script type="text/javascript">
document.writeln(new Date().getFullYear());
</script>N99design All Rights Reserved</div>
</header>
	<article>


Is This A Good Question/Topic? 0
  • +

Replies To: SCSS Menu breaking when I change colors

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5241
  • View blog
  • Posts: 14,037
  • Joined: 18-April 07

Re: SCSS Menu breaking when I change colors

Posted 28 December 2017 - 11:16 PM

Your CSS file there is showing the same styles multiple times and large portions of it are commented out. I don't think you are wanting to do that. For instance lines 2, 342, 682 and 1022 are all the same body style. So rather than have four sets of definitions, cut it down to one set. Then cut out all the commented CSS styles. See if that helps things out.

:)
Was This Post Helpful? 0
  • +
  • -

#3 Redbird5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 80
  • Joined: 07-July 12

Re: SCSS Menu breaking when I change colors

Posted 29 December 2017 - 07:46 PM

Unfortunately, it wasn't that easy of a fix.

Edit: It was an easy fix. I just replaced the code with working code and changed the code in the CSS and not the SCSS.

This post has been edited by Redbird5: 30 December 2017 - 12:21 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1