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

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}


/* Rodney Online styles */
html {
    z-index: -1;    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a3ff+0,00e5e5+100 */
    background: #00a3ff; /* Old browsers */
    background: -moz-linear-gradient(top, #00a3ff 0%, #FFF 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #00a3ff 0%,#FFF 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #00a3ff 0%,#FFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3ff', endColorstr='#FFF',GradientType=0 ); /* IE6-9 */            
    background-position-y: 107.5%, bottom, 0, bottom, 0;
    background-position-x: 45%, 0, center;
    background: /*url(../images/hilltop.png) 500px bottom repeat-x,*/ no-repeat linear-gradient(to bottom, #00A3FF 0%,#FFF 100%);
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}

a:visited {
     color: #0a4c05;
}

body {
	line-height: 1;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	padding-bottom: 0;
    width: auto;
}

#branding main section.hero,
#print main section.hero,
#web main section.hero,
#contact main section.hero {
    flex-direction: column;
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    align-content: center;
    align-self: flex-start;
}

.wrapper nav {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: auto;
    min-height: 200px;
    position: relative;
    margin-bottom: 20px;
    z-index: 99;
}

nav a, nav h2 {
	text-decoration: none;
	text-shadow: #1e2931 0 2px 4px;
	color: #ffd030;
	font: 600 2.3em/30px "Josefin Sans";
}

.wrapper .main-title {
    margin-top: 1em;
    display: flex;
    align-content: center;
    align-items: center;
    align-self: center;
}

.wrapper nav h2 {
    margin: 0 0.25em 0 0;
    line-height: 1em;
    text-align: center;
}

.wrapper nav .icon::after {
    content: '';
    background: url(../images/y.png) 15px 7px no-repeat,
                url(../images/hilltop.png) 510px 101.5% repeat-x,
                linear-gradient(to bottom, #00A3FF 0%,#e5e5e5 65%) repeat-x;
    background-size: 34px, 90px, 50px;
    display: block;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 7px solid #007d2d;
    margin: 0;
    box-sizing: content-box;
}

.wrapper nav ul {
    max-height: 550px;
    padding-left: 0;
    width: 92%;
}

.wrapper nav ul li {
    font-size: .8em;
    margin: 12px 0 0;
    background-color: #e5e5e5;
    border-radius: 10px;
    max-width: 85%;
    margin: 15px auto 0;
    min-width: 18%;
}

#comtact nav li.home a,
nav li.contact a {
    font-size: 3em;
    line-height: 1.8em;
    min-height: 1.5em;
}

.wrapper nav ul li.home,
.wrapper nav ul li.contact {
    min-width: 5.5em;
    min-height: 5em;
}

.wrapper nav a {
    text-shadow: none;
    color: #00a3ff;
	width: 100%;
    justify-content: center;
    align-items: center; 
    height: 100%;
    display: inline-flex;
    line-height: 2.2em;
}

nav a:hover,
#print nav li:nth-child(3) a,
#branding nav li:nth-child(2) a,
#web nav li:nth-child(4) a {
	color: #fff;
    cursor: pointer;
    opacity: 1;
}

#branding nav li:nth-child(2),
#print nav li:nth-child(3),
#web nav li:nth-child(4),
.wrapper nav li:hover,
#contact nav ul li.contact {
    background-color: #00A3FF;
    opacity: 1;
}

#branding .project a img,
#print .project a img,
#web .project a img {
    border: 5px solid #FFF;
    border-radius: .4em;
    background: #FFF;
}

#web .project .img-wrapper {
    background: #e5e5e5;
    border-radius: .4em;
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0.8em;
    justify-content: space-around;
}

#web .project .img-wrapper,
#web .project a img {
    margin: 0 auto;
}

#web article:first-child .project:first-child .img-wrapper {
    margin: 0 auto 0 0;
    flex-direction: column;
    width: 45%;
    display: flex;
    justify-content: center;
}

#web article:first-child .project:first-child .img-wrapper span {
    margin: 0 auto 0 0;
    max-width: 90%;
    height: 100%;
}

#web article .project .img-wrapper img {
    width: 99%;
    align-items: center;
    box-shadow: 0 0 0.35em rgba(0,0,0,0.5);
}

#web article .project .img-wrapper a img {
    margin-bottom: .5em;
}

#web article .project .img-wrapper a:last-child img {
    margin-bottom: 0;
}

#web article:first-child .project:first-child .img-wrapper img {
    max-height: 40%;
    height: auto;
}

#print .wrapper .project-body-wrapper a,
#branding .wrapper .project-body-wrapper a,
#web .wrapper .project-body-wrapper a {
    max-width: 30%;
}

#web .wrapper .project-body-wrapper .img-wrapper a {
    max-width: 100%;
}

#branding .eam {
    min-height: 2.5em;
    min-width: 12em;
}

#home .project {
    min-height: 18em;
    box-sizing: content-box;
}

#home .project .emphasis {
    font-size: 0.9em;
    margin-top: 0.5em;
    font-weight: 800;
    font-style: italic;
    color: #57791a;
}

#branding .project,
#print .project,
#web .project {
     background: linear-gradient(to bottom, #73b4e2 0%, #e5e5e5 100%);
}

.project a {
     font-size: 1.25em;
     text-decoration: none;
     text-shadow: #1e2931 0 2px 4px;
     color: #ffd030;
 }
  
#branding .project a,
#print .project a,
#web .project a {
    max-width: 60%;
    align-self: center;
    align-self: flex-start;
}
 
.project em,
.project p,
.project h1 {
    margin: 0 0 .5em 0;
}

.project h1:first-child {
    min-width: 100%;
}
 
#branding .project em,
#print .project em,
#web .project em {
    font-weight: 600;
    line-height: 1.1em;
}

.project p {
     display: inline;
     width: 100%;
     margin: 0.25em 0 0;
}

a:hover {
  opacity: 1;
}

article .footer {
  display: flex;
  flex-direction: row;
  z-index: 0;
  min-width: 280px;
  max-width: 280px;
  width: 2800px;
  overflow: hidden;
  margin: -4.6em 0 0 12%;
}

#branding article .footer,
#print article .footer,
#web article .footer {
  margin: -2em 0 2em 12%;
}

/* CONTACT FORM */

#contact  .project form {
    display: flex;
    flex-direction: column;
	font: 400 1.1em/1.5em "Josefin Sans";
}

.print #footer/*, .brands #footer, .web #footer*/ {
    top: 0;
}

#contact form button:hover {
    background-color: rgb(59	,112, 18);
    color: #fff;
}

#contact form button:active {
    background-color: #fff;
    color: #00a3ff;
    box-shadow: inset 0px 0px 15px rgba(0, 0, 0, .95);
}

#contact form button {
    background-color: #00a3ff;
    height: 60px;
    width: auto;
    align-self: flex-start;
    border-radius: 30px;
    border:  none;
    color: #eee;
    line-height: 1.7em;
    cursor: pointer;
    padding: 0 20px;
    z-index: 9;
}

#contact .project form input {
    padding: .15em;
}

#contact form textarea {
    min-height: 12.2em;
    max-width: 98%;
    padding: .3em;
    margin: 1em 0 .75em;
    opacity: .72;
}

/* END CONTACT FORM */

.green_hosting {
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 0px;
	background-color: #265608;
	width: 90px;
	height: 22px;
	padding-top: 3px;
	padding-left: 5px;
    z-index: 1;
    line-height: 1.3em;
    margin: 0 10px 0 0;
}

#copyright a {
	display: block;
	color: #65aa05;
	background-color: #265608;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	height: 22px;
	padding: 5px 6px 1px 10px;
	font: 600 12px "Josefin Sans";
    width: 110px;
    margin-right: -12px;    
}

#copyright a:hover {
	color: #265608;
	background-color: #65aa05;
}

.green_hosting a img {
    border-radius: 6px;
}

.est p {
	font: italic 1em "Josefin Slab";
	font-weight: 600;
    margin: 5px 0 0;
}

.wrapper nav ul li:hover,
#branding .wrapper nav ul li:nth-child(2),
#print .wrapper nav ul li:nth-child(3),
#web .wrapper nav ul li:nth-child(4),
#contact nav li:nth-child(5) {
        box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
}


/* Box sizing rules */

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

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}


/* Rodney Online styles */
html {
    z-index: -1;    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a3ff+0,00e5e5+100 */
    background: #00a3ff; /* Old browsers */
    background: -moz-linear-gradient(top, #00a3ff 0%, #FFF 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #00a3ff 0%,#FFF 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #00a3ff 0%,#FFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3ff', endColorstr='#FFF',GradientType=0 ); /* IE6-9 */            
    background-position-y: 107.5%, bottom, 0, bottom, 0;
    background-position-x: 45%, 0, center;
    background: /*url(../images/hilltop.png) 500px bottom repeat-x,*/ no-repeat linear-gradient(to bottom, #00A3FF 0%,#FFF 100%);
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}

a:visited {
     color: #0a4c05;
}

body {
	line-height: 1;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	padding-bottom: 0;
    width: auto;
}

#branding main section.hero,
#print main section.hero,
#contact main section.hero {
    flex-direction: column;
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    align-content: center;
    align-self: flex-start;
}

.wrapper nav {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: auto;
    min-height: 200px;
    position: relative;
    margin-bottom: 20px;
    z-index: 99;
}

nav a, nav h2 {
	text-decoration: none;
	text-shadow: #1e2931 0 2px 4px;
	color: #ffd030;
	font: 600 2.3em/30px "Josefin Sans";
}

.wrapper .main-title {
    margin-top: 1em;
    display: flex;
    align-content: center;
    align-items: center;
    align-self: center;
}

.wrapper nav h2 {
    margin: 0 0.25em 0 0;
    line-height: 1em;
    text-align: center;
}

.wrapper nav .icon::after {
    content: '';
    background: url(../images/y.png) 15px 7px no-repeat,
                url(../images/hilltop.png) 510px 101.5% repeat-x,
                linear-gradient(to bottom, #00A3FF 0%,#e5e5e5 65%) repeat-x;
    background-size: 34px, 90px, 50px;
    display: block;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 7px solid #007d2d;
    margin: 0;
    box-sizing: content-box;
}

.wrapper nav ul {
    max-height: 550px;
    padding-left: 0;
    width: 92%;
}

.wrapper nav ul li {
    font-size: .8em;
    margin: 12px 0 0;
    background-color: #e5e5e5;
    border-radius: 10px;
    max-width: 85%;
    margin: 15px auto 0;
    min-width: 18%;
}

#comtact nav li.home a,
nav li.contact a {
    font-size: 3em;
    line-height: 1.8em;
    min-height: 1.5em;
}

.wrapper nav ul li.home,
.wrapper nav ul li.contact {
    min-width: 5.5em;
    min-height: 5em;
}

.wrapper nav a {
    text-shadow: none;
    color: #00a3ff;
	width: 100%;
    justify-content: center;
    align-items: center; 
    height: 100%;
    display: inline-flex;
    line-height: 2.2em;
}

nav a:hover,
#print nav li:nth-child(3) a,
#branding nav li:nth-child(2) a {
	color: #fff;
    cursor: pointer;
    opacity: 1;
}

#branding nav li:nth-child(2) a,
#print nav li:nth-child(3) a
.wrapper nav li:hover {
    background-color: #00A3FF;
    opacity: 1;
}

.project {
     font: 2em/1.5em "Josefin Slab";
     color: #000;
     font-weight: 400;
     margin: 0 7.5% 1.5em;
     padding: 1em 3% 1em 5%;
     background: url(../images/hilltop-rodney.png) 0 100% repeat-x,
                 linear-gradient(to bottom, #73b4e2 0%, #e5e5e5 100%);
     background-size: 100%;
     border: .4em solid #fff;
     border-radius: 1em;
     font-size: 1.5em;
     min-height: 20em;
     height: auto;
     width: auto;
     display: flex;
     flex-direction: column;
}

#branding .project a img,
#print .project a img {
    border: 5px solid #FFF;
    border-radius: .4em;
    background: #FFF;
    max-width: 93%;
}

#print .wrapper .project-body-wrapper a {
    max-width: 30%;
}

#branding .eam {
    min-height: 2.5em;
    min-width: 12em;
}

#home .project {
    min-height: 18em;
    box-sizing: content-box;
}

#branding .project,
#print .project {
     background: linear-gradient(to bottom, #73b4e2 0%, #e5e5e5 100%);
}

.project a {
     font-size: 1.25em;
     text-decoration: none;
     text-shadow: #1e2931 0 2px 4px;
     color: #ffd030;
 }
  
#branding .project a,
#print .project a {
    max-width: 60%;
    align-self: center;
    align-self: flex-start;
}
 
.project em,
.project p,
.project h1 {
    margin: 0 0 .5em 0;
}

.project h1:first-child {
    min-width: 100%;
}

.project span h1:first-child {
   font-size: .85em;
}

.project span:nth-child(2) h1 {
   margin-top: 1em;
}
 
#branding .project em,
#print .project em {
    font-weight: 600;
    line-height: 1.1em;
}

.project p {
     display: inline-block;
     width: 100%;
     margin: 0.75em 0 0;
}

a:hover {
  opacity: .75;
}

article .footer {
  display: flex;
  flex-direction: row;
  z-index: 0;
  min-width: 280px;
  max-width: 280px;
  width: 2800px;
  overflow: hidden;
  margin: -4.6em 0 0 12%;
}

#branding article .footer, #print article .footer {
  margin: -2em 0 2em 12%;
}

/* CONTACT FORM */

#contact  .project form {
    display: flex;
    flex-direction: column;
	font: 400 1.1em/1.5em "Josefin Sans";
}

.print #footer/*, .brands #footer, .web #footer*/ {
    top: 0;
}

#contact form button:hover {
    background-color: rgb(59	,112, 18);
    color: #fff;
}

#contact form button:active {
    background-color: #fff;
    color: #00a3ff;
    box-shadow: inset 0px 0px 15px rgba(0, 0, 0, .95);
}

#contact form button {
    background-color: #00a3ff;
    height: 60px;
    width: auto;
    align-self: flex-start;
    border-radius: 30px;
    border:  none;
    color: #eee;
    line-height: 1.7em;
    cursor: pointer;
    padding: 0 20px;
    z-index: 9;
}

#contact .project form input {
    padding: .15em;
}

#contact form textarea {
    min-height: 12.2em;
    max-width: 98%;
    padding: .3em;
    margin: 1em 0 .75em;
    opacity: .72;
}

/* END CONTACT FORM */

.green_hosting {
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 0px;
	background-color: #265608;
	width: 90px;
	height: 22px;
	padding-top: 3px;
	padding-left: 5px;
    z-index: 1;
    line-height: 1.3em;
    margin: 0 10px 0 0;
}

#copyright a {
	display: block;
	color: #65aa05;
	background-color: #265608;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	height: 22px;
	padding: 5px 6px 1px 10px;
	font: 600 12px "Josefin Sans";
    width: 110px;
    margin-right: -12px;    
}

#copyright a:hover {
	color: #265608;
	background-color: #65aa05;
}

.green_hosting a img {
    border-radius: 6px;
}

.est p {
	font: italic 1em "Josefin Slab";
	font-weight: 600;
    margin: 5px 0 0;
}

.wrapper nav ul li.home {
    background: #e5e5e5 url('../images/home.svg') no-repeat center .9em;
    background-size: 3em;
}

.wrapper nav ul li.home:hover {
    background-color: #00a3ff;
    background-position: center -4.2em;
}

.wrapper nav ul li.contact {
    background: #e5e5e5 url('../images/phone.svg') no-repeat center .5em;
    background-size: 3.5em;
}

.wrapper nav ul li.contact:hover,
#contact nav ul li.contact {
    background-color: #00a3ff;
    background-position: center -5.5em;
}

.wrapper nav ul li:hover,
#branding .wrapper nav ul li:nth-child(2),
#print .wrapper nav ul li:nth-child(3),
#web .wrapper nav ul li:nth-child(4),
#contact nav li:nth-child(4) {
        box-shadow: 0 0 0.6emrgba(0,0,0,0.5);
}


@media (max-width: 40em) {
    
    #branding .project a img,
    #print .project a img {
        min-width: 20%;
        display: flex;
        margin:  0 0 .5em;
    }
    
    #branding .wrapper nav h2,
    #print .wrapper nav h2,
    #contact .wrapper nav h2 {
        font-size: 4.5em;
    }
        
    #home .wrapper nav h2 {
        font-size: 2.3em;
    }

    .wrapper nav h2 {
        font-size: 3em;   
        margin: 0 0 .35em 0;
    }
    
    #contact .wrapper .hero article {
        width: 100%;
        margin: 0;
    }
    
    .contact article .footer {
        margin: -2.4em 0 0 12%;
    }
    
    .wrapper .main-title {
        flex-direction: column;
        align-items: center;
    }
    
    .wrapper nav .icon::after {
        background-position: 20px 7px, 100% 100%, top center;
        background-size: 50px, 150px, 100%;
        width: 90px;
        height: 90px;
    }
        
    #contact main.wrapper section.hero article .project {
        width: 82%;
        height: 26em;
    }
    
    .wrapper nav ul {
         width: 90%;
    }
    
    .wrapper nav ul li.home {
        background-position-y:0;
        background-size: 12%;
    }
    .wrapper nav ul li.home:hover {
        background-position-y: 165%;
    }
    
    .wrapper nav ul li.contact {
        background-position-y: -38%;
        background-size: 13.5%;
    }
    .wrapper nav ul li.contact:hover {
        background-position-y: 135%;
        background-size: 13.5%;
    }
    
    #branding .project a img,
    #print .project a img,
    #web .project a img {
        width: 90%;
    }

}

/* GRID=SPECIFIC MEDIA QUERIES   !!!!!!!  FIX DUPED MEDIA QUERIES !!!!!!! */

@media (min-width: 40em) {
    
    .wrapper {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .wrapper nav h2,
    .wrapper nav icon {
        display: inline-block;
    }
    
    .wrapper nav h2 {
      font-size: 3em;
    }
        
    #branding .project-body-wrapper,
    #print .project-body-wrapper {
        display: flex;
        align-items: center;
    }
    
    .project {
        font-size: 1.8em;
    }

    #contact .wrapper .hero article .project {
        min-height: 28em;
    }
    
    #branding .project, #print .project {
        justify-content: flex-start;
        margin-bottom: 1.5em;
    }
        
    #branding .project.wide-img .project-body-wrapper,
    #print .project.wide-img .project-body-wrapper {
        flex-direction: column;
        justify-content: space-between;
        min-height: 11em;
    }
    
    #branding .project a, #p .project a {
        width: 50%;
    }
    
    .project p {
         display: inline-flex;
         margin: 0 0 0 .75em;
    }
    
    #branding main.wrapper .hero .article-wrapper article .project:nth-child(2) p,
    #print main.wrapper .hero .article-wrapper article .project:nth-child(2) p {
        margin-left: 0;
    }
    
    #branding article .footer, #print article .footer {
        margin: -5.5em 0 0 12%;
    }
}

@media (min-width: 50em) {
    
    .wrapper {
        grid-gap: 1em;
        grid-template-columns: 1fr;
    }
    
    .wrapper nav h2 {
         font-size: 3.5em;    
    }
    
    article .footer {
        margin: -5.4em 0 0 12%;
    }
}


@media (min-width: 60em) {
    .wrapper nav h2 {
         font-size: 3.8em;
    }
    
    #contact main.wrapper section.hero article span.project {
        min-height: 32em;
    }
    
    .wrapper nav .icon::after {
        background: url(../images/y.png) 30px 18px no-repeat,
                    url(../images/hilltop.png) 530px 100% repeat-x,
                    linear-gradient(to bottom, #00A3FF 0%,#e5e5e5 65%) repeat-x;
        background-size: 48px, 150px, 100%;
        width: 105px;
        height: 105px;        
    }
    
    .wrapper nav .icon::after {
        margin: 0;
    }
    
    .project {
      min-height: 15em;
      margin: 0 10%;
     }

    .wrapper nav ul {
         display: flex;
         align-self: center;
         justify-content: space-evenly;
         min-width: 90%;
    }
     
    .wrapper nav ul li {
         font-size: .8em;
         margin: 12px 0 0;
         background-color: #e5e5e5;
    }

}

@media (min-width: 69.5em) {
    #home .project {
        padding-right: 25%;
    }
    
}

@media (min-width: 76em) {

    .wrapper nav h2 {
         letter-spacing: .2em;
    }
    
    #branding article,
    #print article {
        width: 43%;
    }
    
    #branding .article-wrapper,
    #print .article-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 0 auto 0 11.5%;
        max-width: 75%;
    }

    #branding .project, #print .project {
        width: 105%;
        padding: 1em;
        margin: 0 25em 1.5em;
    }
    
    #contact main.wrapper section.hero article span.project {
        min-height: 33em;
        padding: 1em 33% 0 1.15em;
        max-width: 82%;
        background-position-y: 120%;
        }

    #branding .project:first-child,
    #print .project:first-child {
        margin-left: 0;
    }
}

@media (min-width: 82em) {

    #home .project {
        background-position-y: 2em, 0;
        width: 48%;
    }    
}

@media (min-width: 102em) {
    
    .project {
        font-size: 2.1em;
        padding: 1em 25% 0 1.25em;
        margin: 0 auto 0;
        min-height: 20em;
    }
    
    .wrapper nav h2 {
         letter-spacing: .35em;
    }
    
    .wrapper nav ul li {
        min-width: 22em;
        max-width: 22em;
    }
    
    article .footer {
        margin: -2.6em 0 0 13%;
    }
}

@media (min-width: 122em) {

    .project {
        background-position-y: 0%;
    }
    
    #branding .project, #print .project {
        min-height: 82%;
        max-width: 85%;
        margin: 0 0 2.5em 0;
    }
    
    #branding .article-wrapper, #print .article-wrapper {
        max-width: 82.7%;
    }
    
    #home .project {
        max-width: 48%;
        width: 48%;
        height: 18em;
    }
    
    #branding article, #print article {
        /*! width: 33%; */
        max-width: 41.5em;
    }
   
}

@media (max-width: 40em) {
    
    #branding .project a img,
    #print .project a img {
        min-width: 20%;
        display: flex;
        margin:  0 0 .5em;
    }
    
    #branding .wrapper nav h2,
    #print .wrapper nav h2,
    #web .wrapper nav h2,
    #contact .wrapper nav h2 {
        font-size: 4.5em;
    }
        
    #home .wrapper nav h2 {
        font-size: 2.3em;
    }

    .wrapper nav h2 {
        font-size: 3em;   
        margin: 0 0 .35em 0;
    }
    
    #contact .wrapper .hero article {
        width: 100%;
        margin: 0;
    }
    
    .contact article .footer {
        margin: -2.4em 0 0 12%;
    }
    
    .wrapper .main-title {
        flex-direction: column;
        align-items: center;
    }
    
    .wrapper nav .icon::after {
        background-position: 20px 7px, 100% 100%, top center;
        background-size: 50px, 150px, 100%;
        width: 90px;
        height: 90px;
    }
        
    #contact main.wrapper section.hero article .project {
        width: 82%;
        height: 26em;
    }
    
    .wrapper nav ul {
         width: 90%;
    }
    
    .wrapper nav ul li.home,
    .wrapper nav ul li.contact {
        background-position-y: .9em;
        background-size: 3em;
    }
    .wrapper nav ul li.home:hover {
        background-position-y: -4em;
    }
    
    #contact nav ul li.contact,
    .wrapper nav ul li.contact:hover {
        background-position-y: -4.85em;
        background-size: 3.2em;
    }

}

/* GRID=SPECIFIC MEDIA QUERIES */
@media (min-width: 40em) {
    
    .wrapper {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .wrapper nav h2,
    .wrapper nav icon {
        display: inline-block;
    }
    
    .wrapper nav h2 {
      font-size: 3em;
    }
        
    #branding .project-body-wrapper,
    #print .project-body-wrapper,
    #web .project-body-wrapper {
        display: flex;
        align-items: flex-start;
    }
    
    .project {
        font-size: 1.8em;
    }

    #contact .wrapper .hero article .project {
        min-height: 28em;
    }
    
    #branding .project, #print .project, #web .project {
        justify-content: flex-start;
        margin-bottom: 1.5em;
    }
        
    #branding .project.wide-img .project-body-wrapper,
    #print .project.wide-img .project-body-wrapper,
    #web .project.wide-img .project-body-wrapper,
     {
        flex-direction: column;
        justify-content: space-between;
        min-height: 11em;
    }
    
    #branding .project a, #p .project a {
        width: 50%;
    }
    
    .project p {
         display: inline-flex;
         margin: 0 0 0 .75em;
    }
    
    #branding main.wrapper .hero .article-wrapper article .project:nth-child(2) p,
    #print main.wrapper .hero .article-wrapper article .project:nth-child(2) p,
    #web main.wrapper .hero .article-wrapper article .project:nth-child(2) p {
        margin-left: 0;
    }
    
    #branding article .footer,
    #print article .footer,
    #web article .footer {
        margin: -5.5em 0 0 12%;
    }
}

@media (min-width: 50em) {
    
    .wrapper {
        grid-gap: 1em;
        grid-template-columns: 1fr;
    }
    
    .wrapper nav h2 {
         font-size: 3.5em;    
    }
    
    article .footer {
        margin: -5.4em 0 0 12%;
    }
}


@media (min-width: 60em) {
    .wrapper nav h2 {
         font-size: 3.8em;
    }
    
    #contact main.wrapper section.hero article span.project {
        min-height: 32em;
    }
    
    .wrapper nav .icon::after {
        background: url(../images/y.png) 30px 18px no-repeat,
                    url(../images/hilltop.png) 530px 100% repeat-x,
                    linear-gradient(to bottom, #00A3FF 0%,#e5e5e5 65%) repeat-x;
        background-size: 48px, 150px, 100%;
        width: 105px;
        height: 105px;        
    }
    
    .wrapper nav .icon::after {
        margin: 0;
    }
    
    .project {
      min-height: 15em;
      margin: 0 10%;
     }

    .wrapper nav ul {
         display: flex;
         align-self: center;
         justify-content: space-evenly;
         min-width: 90%;
    }
     
    .wrapper nav ul li {
         font-size: .8em;
         margin: 12px 0 0;
         background-color: #e5e5e5;
    }

}

@media (min-width: 69.5em) {
    #home .project {
        padding-right: 25%;
    }
    
}

@media (min-width: 76em) {

    .wrapper nav h2 {
         letter-spacing: .2em;
    }
    
    #branding article,
    #web article,
    #print article {
        width: 43%;
    }
    
    #branding .article-wrapper,
    #print .article-wrapper,
    #web .article-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 0 auto 0 11.5%;
        max-width: 75%;
    }

    #branding .project,
    #print .project,
    #web .project {
        width: 105%;
        padding: 1em;
        margin: 0 25em 1.5em;
    }
    
    #contact main.wrapper section.hero article span.project {
        min-height: 33em;
        padding: 1em 33% 0 1.15em;
        max-width: 82%;
        background-position-y: 120%;
        }

    #branding .project:first-child,
    #print .project:first-child,
    #web .project:first-child {
        margin-left: 0;
    }
}

@media (min-width: 82em) {

    #home .project {
        background-position-y: 2em, 0;
        width: 48%;
    }    
}

@media (min-width: 102em) {
    
    .project {
        font-size: 2.1em;
        padding: 1em 25% 0 1.25em;
        margin: 0 auto 0;
        min-height: 20em;
    }
    
    .wrapper nav h2 {
         letter-spacing: .35em;
    }
    
    .wrapper nav ul li {
        min-width: 22em;
        max-width: 22em;
    }
    
    article .footer {
        margin: -2.6em 0 0 13%;
    }
}

@media (min-width: 122em) {

    .project {
        background-position-y: 0%;
    }
    
    #branding .project, #print .project, #web .project {
        min-height: 30em; // CLEAN UP DUPES. FIX FTP. UPDATE SITE. 
        max-width: 85%;
        margin: 0 0 2.5em 0;
    }
    
    #branding .article-wrapper, #print .article-wrapper, #web .article-wrapper {
        max-width: 82.7%;
    }
    
    #home .project {
        max-width: 48%;
        width: 48%;
        height: 18em;
    }
    
    #branding article, #print article {
        /*! width: 33%; */
        max-width: 41.5em;
    }
   
}


/*         TOOLTIPS         */

/* Add this attribute to the element that needs a tooltip */
[tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[tooltip]:before,
[tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[tooltip]:before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -90px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 10px;
  background-color: #000;
  background-color: hsla(0, 0, 0, 0.99);
  color: #FFD017;
  content: attr(tooltip);
  text-align: center;
  font: 300 1.65em/1.2em "Josefin Sans";
}

/* Triangle hack to make tooltip look like a speech bubble */
[tooltip]:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[tooltip]:hover:before,
[tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* CSS BOX

.cssbox{
    display:inline-block
}
.cssbox_full{
    position:fixed;
    height:100%;
    width:100%;
    background-color:rgba(0,0,0,.8);
    top:0;
    left:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s linear
}
.cssbox_full img{
    position:fixed;
    background-color:#fff;
    margin:0;
    padding:0;
    max-height:90%;
    max-width:90%;
    top:50%;
    left:50%;
    margin-right:-50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 20px #000
}
a.cssbox_close,
a.cssbox_prev,
a.cssbox_next{
    position:fixed;
    text-decoration:none;
    visibility:hidden;
    color:#fff;
    font-size:36px;
}
a.cssbox_close{
    top:1%;
    right:1%
}
a.cssbox_close::after{
    content:'\00d7'
}
a.cssbox_prev,a.cssbox_next{
    top:50%;
    transform:translate(0%,-50%)
}
a.cssbox_prev{
    left:5%
}
a.cssbox_next{
    right:5%
}
a:target~a.cssbox_close,
a:target~a.cssbox_prev,
a:target~a.cssbox_next{
    visibility:visible
}
a:target>img.cssbox_thumb+span.cssbox_full{
    visibility:visible;
    opacity:1;
    pointer-events:initial
}
span.cssbox_full{
    cursor:initial
}
 */