/*
Theme Name: Nineteen Eighty-Seven
Theme URI: https://josephtafoya.com/
Author: joe!
Author URI: https://josephtafoya.com/
Description:Nineteen Eightyseven is a child theme based on Twenty Sixteen
Version: 2.8
Tested up to: 6.1
Requires at least: 4.4
Requires PHP: 5.2.4
Text Domain: nineteeneightyseven
*/


/**
 * Table of Contents
 *
 * 1.0 - Reset
 * 2.0 - Typography
 * 3.0 - Preloader & Page Transition
 * 4.0 - Header
 * 5.0 - Homepage
 *   5.1 - First Section
 *   5.2 - Logo Section
 *   5.1 - About Section
 *   5.2 - Portfolio Section
 *   5.2 - Journal Section
 * 6.0 - Projects Page
 *   6.1 - Single Project Page
 * 7.0 - Journal
 * 8.0 - Contact Page
 * 9.0 - Footer
 * 10.0 - Media Queries
 */


/*  1.0 RESET ------------------------------------ */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}


.clear {
    clear: left;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    cursor: url('/wp-content/themes/nineteeneightyseven/img/dot-cursor.svg'), auto;
    scroll-behavior: smooth;
}

html, body a:hover {
    cursor: url('/wp-content/themes/nineteeneightyseven/img/pointer-fill-cursor.svg'), pointer;
}

body {
    margin: 0px; 
    background-color: #fff;
}



/* 2.0 TYPOGRAPHY ------------------------------------ */


@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@900&family=Lato:wght@300;400;700;900&display=swap');

@import url("https://use.typekit.net/lwk7lax.css");

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=PT+Sans+Narrow:wght@400;700&family=Roboto+Condensed:wght@300;400&family=Source+Sans+3:ital,wght@0,300;0,400;1,300&display=swap');
	

#test {
    position: fixed;
    display: none;
}

h2 {
    line-height: 1.2;
}

/* 3.0 PRELOADER, PAGE TRANSITION, CURSOR --------------------- */

#transition {
  position: absolute;
  margin-top: -200px;
  height: 300%;
  width: 150%;
  background: #f05323;
  z-index: 99;
  border-radius: 0;
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
}

#preloader {
    position: fixed;
    left: 45%;
    top: 40%;
    opacity: 1;
    transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
}

#preloader img {
    width: 30%;
}

.cursor {
    position:absolute; 
    background: #f05323;; 
    opacity: .1;
    width: 80px; 
    height: 80px; 
    border-radius: 50px; 
    transform: translate(-45%,-45%);
    z-index: -100;
}


.cursor.active { animation:bounce .5s ease; }
@keyframes bounce {
 
 100%{ transform: translate(-50%,-50%) scale(2); opacity:0; }
  0%{ transform: translate(-50%,-50%) scale(1); opacity:1; }
}

.linkHover { 
    transform: scale(3); 
}



 
/* 4.0 HEADER ----------------------------------------- */

#plus {
    position: absolute;
    display: block;
    left: 10px;
    top: -3px;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 65px;
    color: #353d44;  
    z-index: -99;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

#plus-mobile {
    position: fixed;
    display: none;
    opacity: .9;
    left: 80%;
    top: 600px;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    color: #f05323;  
    z-index: 99;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

#plus:hover {
    color: #f05323; 
}
    
.dot {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/j!-circle.svg);
    background-size: cover;
    position: absolute;
    transition: 0.6s ease;
}

    
#tiddle {
    position:absolute;
    opacity: 1;
    left: 40px;
    top: 10px;
    width: 90px;
    height: 90px;
    border-radius: 700px;
    z-index: 8;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

    
.navigation {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    font-size: 70px;
    margin-left: 0px;
    margin-top: 100px;
}
    
.navigation a {
    text-decoration: none;
    color: #ffffff;
}
    
.nav-element {
    position: relative;
    margin-left: 30px;
    margin-top: 0px;
    transition: 0.6s ease;
    z-index: 99;
}
    
#top-nav {
    position: fixed;
    width: 200px;
    height: 80px;
    top: 0px;
    left: 0px;
    padding: 15px;
    z-index: 98;
    overflow: hidden;
    border-radius: 0;
    transition: 0.6s ease;
    background-color: transparent;
    opacity: 1;
}

#top-nav:hover #plus {
    font-size: 55px;
    color: #f05323; 
}

#top-nav:hover #tiddle {
    top: 15px;
    left: 45px;
    width: 80px;
    height: 80px;
}

#top-nav a {
     text-decoration: none;
}

/* 5.0 HOMEPAGE ------------------------------------- */

.home {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/site-BG.png);
    background-position: bottom right;
}

/* 5.1 HOMEPAGE - first section ---------------------- */
    
.top-header {
    width: 100vw;
    height: 100vh;
    background-image: url("/wp-content/themes/nineteeneightyseven/img/joe_portfolio-02.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: bottom right;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.intro {
    width: 50vw;
    height: 50vh;
    float: left;
}
    
.IM {
    opacity: 1;
    overflow: hidden;
}
    
.mission-copy {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f05323;
    width: 100px;
    height: 55px;
    font-size: 60px;
    margin-left: 45%;
    margin-top: 62vh;
    overflow: hidden;
}

.sell-it {
    position: absolute;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f05323;
    font-size: 50px;
    margin-left: 14%;
    margin-top: 221px;
    width: 40%;
    padding: 40px 0;
    transition: 1s ease .5s;
    -webkit-transition: 1s ease .5s;
    -moz-transition:    1s ease .5s;
    -o-transition:      1s ease .5s;
    -ms-transition:     1s ease .5s;
}

/* 5.2 HOMEPAGE - logo section --------------------- */
    
.second-section {
    width: 100vw;
    height: 55vh;
    overflow: visible;
}

.circle {
    position: absolute;
    opacity: 1;
    background-color: #f05323;
    width: 6.2vw;
    height: 6.2vw;
    border-radius: 700px;
    z-index: 2;
     transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

#j {
    left: 21.7vw;
    margin-top: -10%;
    opacity: 0;
    transition: 2s ease 0s;
    -webkit-transition: 2s ease 0s;
    -moz-transition:    2s ease 0s;
    -o-transition:      2s ease 0s;
    -ms-transition:     2s ease 0s;
}

#j-2 {
    left: 21.7vw;
    margin-top: -13%;
    transition: 2s ease 0s;
    -webkit-transition: 2s ease 0s;
    -moz-transition:    2s ease 0s;
    -o-transition:      2s ease 0s;
    -ms-transition:     2s ease 0s;
}

#arrow-down {
    margin-left: 30%;
    margin-top: 30%;
    opacity: 1;
    transition: 1.5s ease 0s;
    -webkit-transition: 1.5s ease 0s;
    -moz-transition:    1.5s ease 0s;
    -o-transition:      1.5s ease 0s;
    -ms-transition:     1.5s ease 0s;
}

#arrow-down img {
    width: 50%;
}

#exclaim {
    left: 61.7vw;
    margin-top: 43%;
    transition: 1.5s ease 0s;
    -webkit-transition: 1.5s ease 0s;
    -moz-transition:    1.5s ease 0s;
    -o-transition:      1.5s ease 0s;
    -ms-transition:     1.5s ease 0s;
}

#logo-full {
  margin-left: 20%;
  margin-top: 0px;
  transform: rotate(0deg);
  transition: 1s ease 0s;
    -webkit-transition: 1.5s ease 0s;
    -moz-transition:    1.5s ease 0s;
    -o-transition:      1.5s ease 0s;
    -ms-transition:     1.5s ease 0s;
}
    
#logo-full img {
    max-width: 60%;
}

/* 5.3 HOMEPAGE - about section -------------------------- */
    
.third-section {
    position: relative;
    width: 100%;
    height: auto;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.third-section[data-emergence=hidden] {
    padding: 250px 0 50px 0;
}

.third-section[data-emergence=visible] {
    padding: 200px 0 50px 0;
}

.icon-container {
    width: 100px;
    height: 100px;
    margin-bottom: 70px;
}

#intro-icon {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/intro-icon-3.png);
    background-size: contain;
    background-position: center center;
}

.circle-class {
    opacity: 1;
    background-color: #f05323;
    border-radius: 700px;
    z-index: 2;
     transition: 1s ease-in 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.circle-class[data-emergence=hidden] {
    width: 1%;
    height: 1%;
    margin-left: 20px;
}
.circle-class[data-emergence=visible] {
    width: 100%;
    height: 100%;
    margin-left: 0px;
}

#about-copy {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f05323;
    font-size: 48px;
    margin-left: 14%;
    margin-top: 0;
    width: 800px;
    padding: 40px 0;
    transition: 1s ease .5s;
    -webkit-transition: 1s ease .5s;
    -moz-transition:    1s ease .5s;
    -o-transition:      1s ease .5s;
    -ms-transition:     1s ease .5s;
}

.about-copy[data-emergence=hidden] {
    opacity: 0;
}

.about-copy[data-emergence=visible] {
    opacity: 1;
}

.get-goods {
    display: none;
    width: 350px;
    margin-top: 150px;
    margin-left: 6.5%;
    color: #353d44;
    font-family: 'Lato', gill sans, sans-serif;
    font-size: 22px;
    font-weight: 900;
    transform: rotate(90deg);
    transition: 1.2s ease .5s;
    -webkit-transition: 1.2s ease .5s;
    -moz-transition:    1.2s ease .5s;
    -o-transition:      1.2s ease .5s;
    -ms-transition:     1.2s ease .5s;
}

.get-goods img {
    max-width: 25px;
    margin: 22px 3%;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.get-goods:hover.get-goods img {
    margin: 22px 15%;
}

.get-goods[data-emergence=hidden] {
    opacity: 0;
}

.get-goods[data-emergence=visible] {
    opacity: 1;
}


.sub-CTA {
    color: #ffffff;
    padding: 0 15px 0 24px;
    border-radius: 40px;
    background-color: #353d44;
    font-family: 'Lato', gill sans, sans-serif;
    font-size: 19px;
    font-weight: 900;
    transition: 1.2s ease 0.2s;
    -webkit-transition: 1.2s ease 0.2s;
    -moz-transition:    1.2s ease 0.2s;
    -o-transition:      1.2s ease 0.2s;
    -ms-transition:     1.2s ease 0.2s;
}

.sub-CTA a {
    color: #ffffff;
}

.sub-CTA[data-emergence=hidden] {
    opacity: 0;
}

.sub-CTA[data-emergence=visible] {
    opacity: 1;
}

.more {
    float: left;
    margin-top: 12px;
}

.sub-CTA img {
    max-width: 25px;
    margin: 8px 0 8px 8%;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.sub-CTA:hover.sub-CTA img {
    margin: 8px 0 8px 20%;
}

#about-cta {
    width: 170px;
     margin-left: 14%;
}

#about-cta:hover {
    width: 210px;
}

.about-above-copy {
    margin-left: 14%;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #353d44;
    font-size: 36px;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.about-above-copy[data-emergence=hidden] {
    opacity: 0;
}

.about-above-copy[data-emergence=visible] {
    opacity: 1;
}

/* 5.4 HOMEPAGE - portfolio section ------------------ */
        
.fourth-section {
    width: 100%;
    height: auto;
    margin-bottom: 70px;
}

#portfolio-icon {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/portfolio-icon-2.png);
    background-size: contain;
    background-position: center center;
}

.work-content {
    margin-top: 100px;
    padding: 100px 0;
    margin-left: 14%;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.work-title  {
    color: #353d44;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.work-title[data-emergence=hidden] {
    opacity: 0;
}

.work-title[data-emergence=visible] {
    opacity: 1;
}

.work-copy {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f05323;
    font-size: 48px;
    width: 800px;
    padding: 40px 0;
    transition: 1s ease .5s;
    -webkit-transition: 1s ease .5s;
    -moz-transition:    1s ease .5s;
    -o-transition:      1s ease .5s;
    -ms-transition:     1s ease .5s;
}

.work-copy[data-emergence=hidden] {
    opacity: 0;
}

.work-copy[data-emergence=visible] {
    opacity: 1;
}

.projects-container {
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    
}

.project {
    overflow: hidden;
}


.portfolio-project {
    background-color: transparent;
    width: 100%;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.portfolio-project[data-emergence=hidden] {
    opacity: 0;
    margin-top: 150px;
}

.portfolio-project[data-emergence=visible] {
    opacity: 1;
    margin-top: 100px;
}

.portfolio-project a {
    text-decoration: none;
}

.portfolio-element {
    width: 50%;

}


.project-right {
    margin-left: 25%;
}


.portfolio-pic {
    position: relative;
    overflow: hidden;
    transition: 0.9s ease;
    z-index: 1;
    
}

.portfolio_img {
    width: 100%;
    opacity: 1;
    transition: 0.9s ease;       
}

.arrow-go {
    position: absolute;
    width: 30%;
    opacity: 1;
    padding: 0px;
    margin-left: 20%;
    transition: 0.9s ease 0s;
    z-index: 0;
}

    
.portfolio-element:hover .portfolio_img {
    margin-left: -130px;
}

.portfolio-element:hover .arrow-go {
    margin-left: 30%;
    opacity: 1;
}

.project-overlay {
    position: absolute;
    background-color: #353d44;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.portfolio-element:hover .project-overlay {
    opacity: .9;
    margin-left: -130px;
}


.project-info {
    position: absolute;
    padding: 15px 0;
    margin: 30% 0 0 10%;
    opacity: 0;
    transition: 0.9s ease;
    z-index: 2;
}

.project-info a {
    text-decoration: none;
}

.portfolio-element:hover .project-info {
    opacity: 1;
}
    
.name {
    color: #ffffff;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    margin-bottom: 10px;
}
    
.description {
    color: #ffffff;
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-transform: none;
}

#projects-cta {
    margin-left: 14%;
    width: 190px;
}

#projects-cta:hover {
    width: 230px;
}

/* ------- new project edits --------------------- */

 .child {
  scroll-snap-align: end;
}
    
.project-container-example {
    padding: 50px 0;
        
}
    
.project-example {
    width: 700px;
    height: 600px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    }
    
.project-example::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.project-example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
    
.project-inside {
     width: 200%;
    }
    
.project-image-example {
    width: 46%;
    height: 600px;
    float: left;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    }
    
.project-image-example img {
    width: 100%;      
    }
    
.project-info-example {
    position: relative;
    padding: 0px;
    width: 30%;
    height: 600px;
    background-color: #f05323;
    float: left;
    z-index: 1;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    }

.project-info-example a {
    text-decoration: none;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}
       
.project-info-copy-example {
    padding: 50% 17%;
}
    
.name-example {
    color: #ffffff;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    margin-bottom: 20px;
}
    
.description-example {
    color: #ffffff;
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-transform: none;
}
    
.pull-bar {
    background-color: #ffffff;
    width: 5px;
    height: 50px;
    margin: 250px 4%;
    border-radius: 700px;
    float: left;
}

.home-project-more {
    margin-top: 20px;
}

.home-project-more a {
    text-decoration: none;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.home-project-more img {
   margin-left: 2px;
   max-width: 12px;
   transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.home-project-more:hover.home-project-more img {
    margin-left: 30px;
}

    
.project-example:hover .project-image-example {
    margin-left: -25%;
}



#r2c-portfolio-image {
    background-image: url(img/r2c-computer-mock.png);
}

#cura-portfolio-image {
    background-image: url(img/cura-image.png);
}

#azure-portfolio-image {
    background-image: url(img/Azure-image-2.png);
}

#invirsa-portfolio-image {
    background-image: url(img/INVIRSA-computer.png);
}

#logobook-portfolio-image {
    background-image: url(img/Logobook-image.png);
}

#illustrations-portfolio-image {
    background-image: url(img/Illustrations-image.png);
}

#vp3-portfolio-image {
    background-image: url(img/VP3-computer.png);
}

#fal-portfolio-image {
    background-image: url(img/FAL-image.png);
}




/* 5.5 HOMEPAGE - journal section ------------------ */
        
.fifth-section {
    width: 100%;
    height: auto;
    margin-bottom: 100px;
}

#journal-icon {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/journal-icon.png);
    background-size: contain;
    background-position: center center;
}

.home-journal {
    margin: 40px 0 60px 0;
}

.home-journal a {
    text-decoration: none;
}

.home-journal-entry {
    width: 300px;
    margin-top: 60px;
    margin-right: 8%;
    margin-bottom: 60px;
    float: left;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.home-journal-entry[data-emergence=hidden] {
    opacity: 0;
}

.home-journal-entry[data-emergence=visible] {
    opacity: 1;
}

.home-journal-entry-image {
    width: 100%;
}

.home-journal-entry-copy {
    width: 100%;
    margin: 20px 0;
}

.home-journal-date {
    margin-right: 30px;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    color: #353d44;
}

.home-journal-category {
    margin-top: 20px;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.5;
    color: #f05323;
}

.home-journal-category a {
    color: #f05323;
    
}

.home-journal-title {
    margin-top: 5px;
    font-family: 'Lato', gill sans, sans-serif;
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
    color: #353d44;
}

.home-journal-description {
    margin-top: 10px;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    color: #353d44;
}

.home-journal-more {
    margin-top: 20px;
}

.home-journal-more a {
    text-decoration: none;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
    color: #f05323;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.home-journal-more img {
   margin-left: 2px;
   max-width: 12px;
   transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}

.home-journal-more:hover.home-journal-more img {
    margin-left: 30px;
}

#journal-cta {
    margin-left: 14%;
    width: 190px;
}

#journal-cta:hover {
    width: 230px;
}

#contact-icon {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/contact-icon.png);
    background-size: contain;
    background-position: center center;
}

#contact-cta {
    margin-left: 0;
    width: 190px;
}

#contact-cta:hover {
    width: 230px;
}


#about-page-cta {
    margin-left: -10px;
    width: 190px;
}

#about-page-cta:hover {
    width: 230px;
}


/* 6.0 PROJECTS PAGE ----------------------------- */

.portfolio-page-content {
    margin-top: 100px;
    padding: 0;
    margin-left: 14%;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
}


.portfolio-title {
    width: 60%;
    margin-left: 5%;
    float: left;
}

.portfolio-title h1 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #353d44;
}

.portfolio-title h2 {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    color: #353d44;
}

.portfolio-page-container {
    margin-top: 100px;
}

.project-page-element {
    width: 70%;
}

.project-page-element:hover .portfolio_img {
    margin-left: -130px;
}

.project-page-element .arrow-go {
    margin-left: 40%;
}

.project-page-element:hover .arrow-go {
    margin-left: 45%;
    opacity: 1;
}

/* Logobook Page ----------------------------- */

.logobook-content {
    margin-top: 100px;
    margin-left: 10%;
  
}

.individual-logo {
    width: 300px;
    height: 300px;
    margin: 20px 4%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    float: left;
}

/* Individual Logos ----------------------------- */

#anthem-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/anthem-logo.png);
}

#barnai-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/barnai-logo.png);
}

#brtoner-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/br-logo.png);
}

#cura-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/cura-logo.png);
}

#dcs-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/dcs-logo.png);
}

#lionheart-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/lionheart-logo.png);
}

#orbit-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/orbit-logo.png);
}

#par-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/par-logo.png);
}

#tk-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/TK_logo-2.png);
}

#tootie-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/Tootie&Tone-logo.png);
}

#uncover-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/uncover-logo.png);
}

#wellday-logo {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/wellday-logo.png);
}



/* 6.1 PROJECTS PAGE Single Project Page --------------------- */

.interior-CTA {
    color: #ffffff;
    padding: 0 15px 0 24px;
    border-radius: 40px;
    background-color: #353d44;
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 18px;
    font-weight: 900;
    transition: 1.2s ease 0.2s;
    -webkit-transition: 1.2s ease 0.2s;
    -moz-transition:    1.2s ease 0.2s;
    -o-transition:      1.2s ease 0.2s;
    -ms-transition:     1.2s ease 0.2s;
}

.interior-CTA[data-emergence=hidden] {
    opacity: 0;
}

.interior-CTA[data-emergence=visible] {
    opacity: 1;
}

.interior-CTA img {
    max-width: 6%;
    margin: 0px 3%;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.interior-CTA:hover.interior-CTA img {
    margin: 0px 15%;
}

.interior-more {
    float: left;
    margin: 37px 0;
}

.interior-cta-copy {
    color: #353d44;
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 18px;
    font-weight: 500;
}


.casestudy {
    margin-left: 10%;
    margin-top: 50px;
    width: 70%;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    transition:         1s ease 0s;
}

.half-image {
    width: 50%;
    float: left;
}

.about-image {
    position: relative;
    z-index: -1;
}

.about-image img {
    max-width: 120%;
    margin-top: -350px;
    margin-left: -15%;
    
}

.uncover-work img {
    width: 80%;
}

.cura-work img {
    width: 60%;
}


.barnai-3 img {
    max-width: 70%;
}

.portfolio_vid {
    margin-top: 40px;
    margin-bottom: 40px;
    right: 0;
    bottom: 0;
    width: 100%;
    transition: 0.9s ease;
       
}


.project-title {
    width: 30%;
    margin-left: 5%;
    float: left;
}

.project-title h1 {
    margin-bottom: 10px;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #353d44;
}

.project-title h2 {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    color: #353d44;
}

.feature-desktop {
    display: block;
}

.feature-mobile {
    display: none;
}

.feature-mobile img {
    max-width: 100%;
}

.feature-image img {
    max-width: 65%;
    margin-top: -100px;
}

.feature-image-cura img {
    max-width: 75%;
    margin-top: -100px;
}

.feature-image-r2c img {
    max-width: 100%;
    margin-top: -250px;
    margin-left: -70px;
}

.studio-info {
    position: relative;
    width: 39%;
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 20%;
    float: left;
    z-index: 1;
}

.studio-info p {
    margin-bottom: 25px;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    color: #353d44;
}

.studio-info a {
    font-family: 'Lato', Gill sans, sans-serif;
    text-decoration: none;
    color: #f05323;
}

.studio-info h1 {
    margin-bottom: 5px;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    text-transform: uppercase;
    color: #353d44;
}

.project-old {
    margin-top: 50px;
    margin-left: 5%;
}

.project-old img {
    max-width: 30%;
}

.project-process {
    margin-left: 5%;
}

.project-process img {
    width: 100%;
    padding: 35px 0;
}


.top-project {
      margin-top: -200px;
}

.applications {
    margin-top: 50px;
    margin-left: -10%;
}

.inner-CTA {
    color: #ffffff;
    padding: 0 15px 0 24px;
    border-radius: 40px;
    background-color: #353d44;
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 18px;
    font-weight: 900;
    transition: 1.2s ease 0.2s;
    -webkit-transition: 1.2s ease 0.2s;
    -moz-transition:    1.2s ease 0.2s;
    -o-transition:      1.2s ease 0.2s;
    -ms-transition:     1.2s ease 0.2s;
}

.inner-CTA a {
    color: #ffffff;
}

.inner-CTA img {
    max-width: 25px;
    margin: 8px 0 8px 10%;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.inner-CTA:hover.inner-CTA img {
    margin: 8px 0 8px 20%;
}

#go-back {
    position: fixed;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #f05323;
    width: 100%;
    margin-left: 4%;
    top: 1200px;
    opacity: .9;
    transition: 1s ease;
    display: none;
}

#go-back a {
    text-decoration: none;
    color: #f05323;
}

#go-back img {
    max-width: 70%;
}



.previous {
    float: left;
}

.previous img {
    transform: rotate(0deg);
    margin-right: 60px;
}

.next {
    float: left;
    margin-left: 70%;
    text-align: right;
}

.next img {
    transform: rotate(180deg);
    max-width: 70%;
    margin-left: 60px;
}

/* next project suggest section --------------------- */

.project-suggest {
    width: 100%;
    margin-top: 100px;
    padding: 5%;
}

.suggested-project {
    float: left;
    width: 25%;
    height: 400px;
    margin: 0 1%;
}

.back-to {
    float: left;
    width: 15%;
    height: 400px;
    margin: 0 7%;
    background-image: url(/wp-content/themes/nineteeneightyseven/img/arrow-back.png);
    background-repeat: no-repeat;
    background-size: 35%;
    background-position: center;
    transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.back-to-copy {
    margin: 300px 25%;
    text-align: center;
}

.back-to-copy {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 900;
    font-size: 14px;
    color: #f05323;
}


.suggested-project-header {
    padding: 2%;
    margin-left: 28%;
}

.more-project-mobile {
        display: none;
}
    
.more-project-desktop {
        display: block;
}

.suggested-project-header h2 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
    color: #353d44;
}

.project-one {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
}

.project-two {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* individual project ID's --------------------- */

#azure-suggest {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/Azure-image-2.png);
}

#invirsa-suggest {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/INVIRSA-computer.png);
}

#r2c-suggest {
    background-image: url(/wp-content/themes/nineteeneightyseven/img/r2c-computer-mock.png);
}

#vp3-suggest {
     background-image: url(/wp-content/themes/nineteeneightyseven/img/VP3-computer.png);
}

#cura-suggest {
    background-image: url(img/cura-image.png);
}

#illustration-suggest {
    background-image: url(img/Illustrations-image.png);
}

#logobook-suggest {
    background-image: url(img/Logobook-image.png);
}

/* 7.0 JOURNAL (blog page) ----------------------------- */

.page-title {
    display: none;
}

.taxonomy-description {
    display: none;
}

.journal-title {
    width: 30%;
    margin-top: 40px;
    margin-left: 14%;
    margin-bottom: 80px;
}

.journal-title h1 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #353d44;
    margin-bottom: 10px;
}

.journal-title h2 {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    color: #353d44;
}

.journal-page-title {
    width: 45%;
    margin-left: 0;
    margin-top: 50px;
    margin-bottom: 60px;
}

.journal-page-title h1 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #353d44;
    margin-bottom: 10px;
}

.journal-page-title h2 {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    color: #353d44;
    margin-bottom: 100px;
}

.journal-page-title a {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    color: #353d44;
}

.comments-area {
    display: none;
}

.site-content {
    width: 100%;
    height: auto;
    padding: 60px 0;
}

.site-content a {
   text-decoration: none;
}

.content-area {
    width: 80%;
    margin: 60px 14%;
    
}

.site-main 
    width: 100%;
}

.post {
    margin-bottom: 100px;
    border-bottom: solid 1px #000;
}

.post-thumbnail {
    display: none;
}

.entry-header h2 {
    width: 85%;
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #353d44;
    
}

.entry-header a {
    color: #353d44;
}

.entry-content {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #353d44;
    width: 80%;
    margin: 40px 0;
}

.entry-content p {
    margin: 10px 0;
}


.entry-content img {
    width: 100%;
}

.more-link {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
    color: #f05323;   
}

.more-link img {
    margin-top: 2px;
    margin-left: 1px;
    max-width: 12px;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    transition:         1s ease 0s;
  
}

.more-link:hover.more-link img {
    margin-left: 30px;
}

.posted-on {
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    color: #353d44;
    margin-bottom: 20px;
}

.posted-on a {
    color: #353d44;
}

.cat-links {
    margin-left: 2%;
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #353d44;
    margin-bottom: 20px;
}

.cat-links {
    display: none;
}

.byline {
    display: none;
}

.updated {
    display: none;
}

.comments-link {
    display: none;
}

.single-post .sidebar {
    display: none;
}

.sidebar {
    margin-left: 14%;
    margin-right: 5%;
    margin-bottom: 200px;
    margin-top: 60px;
}

.widget-area {
    font-family: 'Lato', Gill sans, sans-serif;
    width: 100%;
}

#block-9 h2{
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #353d44;
    margin-right: 2%;
    float: left;
    
}

.cat-item {
    margin-right: 2%;
    float: left;
}

.cat-item a {
    font-family: 'Lato', Gill sans, sans-serif;
    font-size: 16px;
    color: #353d44;
    
}

#block-7 .current-cat a {
    font-weight: 700;
    color: #f05323;
}


.pagination {
    width: 20%;
    height: 10px;
    display: inline;
}

.pagination .nav-links {
    display: inline;
}

.pagination .next {
    display: none;
}

.pagination .prev {
    display: none;
}

.pagination .page-numbers {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #353d44;
}

.pagination .current {
    color: #f05323;
}

/* 7.1 JOURNAL Entry (post page) ----------------------------- */


.content-bottom-widgets {
    display: none;
}

.journal-page-title a {
	text-decoration: none;
	font-family: "fatfrank", sans-serif;
    font-weight: 400;
	color: #f05323;
}

.journal-page-title a:hover {
	color: #353d44;   
}

h1.entry-title {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #353d44;    
}

.post .entry-content p {
	font-size: 20px; 
}

.post .entry-content p.cite {
	font-size: 12px; 
}

.post .entry-content p.subhead {
	font-weight: 900; 
}

.post .entry-content h3 {
	margin: 20px 0;
  font-size: 30px; 
}

.post .entry-content h4 {
		margin: 40px 0;	
    font-size: 24px;   
	 font-weight: 900;
}

.post .entry-content a {
	color: #f05323;
	text-decoration: none;
}

.post .entry-content a:hover {
	color: #353d44;
	text-decoration: none;
}

.post-navigation a {
		float: left;
		margin-bottom: 40px;
		font-size: 20px;
    color: #f05323;
	transition: 1.2s ease 0s;
    -webkit-transition: 1.2s ease 0s;
    -moz-transition:    1.2s ease 0s;
    -o-transition:      1.2s ease 0s;
    -ms-transition:     1.2s ease 0s;
}

.post-navigation a:hover {
    color: #353d44;
}

.post-navigation .nav-previous a {
	margin-right: 50%;
}











/* 8.0 CONTACT ----------------------------------------*/

.contact {
    padding: 50px 0;
    margin-top: 100px;
    margin-left: 14%;
}

.contact-info {
    margin-top: 60px;
}

.contact-info a {
    text-decoration: none;
    color: #f05323;
}

.contact-info h1 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #353d44;
    font-size: 36px;
}

.contact-info h3 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f05323;
    font-size: 48px;
    padding: 30px 0;
}

.contact-info h4 {
    font-family: "fatfrank", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f05323;
    font-size: 24px;
}

.contact-form {
    padding: 30px 0;
}

/* --- contact form -------------------------------------*/




.wpcf7 {
    font-family: 'Lato', Gill sans, sans-serif;
}


.wpcf7 input[type="text"],
.wpcf7 input[type="email"]
{
    background-color: #fff;
    border-color: #353d44;
    color: #f05323;
    font-weight: 700;
    width: 25%;
    margin: 20px 1.5% 0 0;
    padding: 15px;
    float: left;
    
}

.wpcf7 textarea {
    padding: 15px;
    margin: 20px 0;
    background-color: #fff;
    border: solid 2px #353d44;
    color: #f05323;
    width: 53.5%;
    height: 250px;
    font-family: 'Lato', Gill sans, sans-serif;
    font-weight: 400;
 
}

.wpcf7-form-control.wpcf7-submit{
    margin-left: 0px;
    margin-right: 14%;
    background-color: #353d44;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    font-weight: 900;
    border: none;
    border-radius: 700px;
    width: 150px;
    float: left;
    transition: 1s ease;
}

.wpcf7-form-control.wpcf7-submit:hover{
    background-color: #f05323;
    width: 170px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #f05323 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f05323 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f05323 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #f05323 !important;
    opacity: 1;
}

.wpcf7 form .wpcf7-response-output {
    color: #f05323;
    border: none;
}

.wpcf7-not-valid-tip {
    color: #f05323;
    width: 250px;
    margin-left: 32%;
}

/* 9.0 FOOTER ---------------------------------- */

footer {
    margin-bottom: 0px;
}

.footy {
  padding: 70px 12% 0px 12%;
  width: 100vw;
  height: 100px;
}   

.copyright {
    margin-top: 5%;
    font-size: 12px;
    font-weight: 100;
}

.copyright2 {
    margin-top: 5%;
    font-size: 12px;
    font-weight: 100;
    display: none;
    text-align: center;
}

.footer-content {
    width: 33%;
    float: left;
    font-family: 'Lato', Gill sans, sans-serif;
    color: #353d44;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    transition:         1s ease 0s;
}

.social {
    margin-top: 5%;
}

.social-icon {
    margin: 7px;
    transition: 1s ease 0s;
    -webkit-transition: 1s ease 0s;
    -moz-transition:    1s ease 0s;
    -o-transition:      1s ease 0s;
    -ms-transition:     1s ease 0s;
    transition:         1s ease 0s;
}

.social a {
    color: #353d44;
    text-decoration: none;
}

.social a:hover {
    color: #f05323;
}

.logo-btm {
    
}

.logo-btm img {
    max-width: 100px;
}



/* 10.0 MEDIA QUERIES --------------------------------------*/

/* 10.1 Header ---------------------------------------*/

@media only screen and (max-width: 868px) {
    
    #tiddle {
        width: 60px;
        height: 60px;
    }

}


/* 10.2 Homepage ------------------------------------*/

@media only screen and (max-width: 1377px) {
        
        .home-journal-entry {
            margin-right: 4%;
       
        }
        
}

@media only screen and (max-width: 1190px) {
        
        .home-journal-entry {
            margin-right: 2%;
       
        }
        
}

/* ---- sell it responsive -------------------*/

@media only screen and (max-width: 1096px) {

.sell-it {

    font-size: 40px;
    margin-left: 14%;
    margin-top: 121px;
    width: 30%;

}
}

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

.sell-it {

    font-size: 40px;
    margin-left: 14%;
    margin-top: 221px;
    width: 60%;

}
}

@media only screen and (max-width: 494px) {

.sell-it {

    font-size: 30px;
    margin-left: 14%;
    margin-top: 221px;
    width: 60%;

}
}





/* ---- shift left margin -------------------*/

@media only screen and (max-width: 1115px) {
    
        .mission-copy {
            margin-left: 25%;
            margin-top: 700px;
        }
    
        .second-section {
            margin-top: 20px;
        }
    
        #j-2 {
            left: 12.3vw;
        }
    
        #exclaim {
            left: 57.4vw;
        }
    
        #logo-full {
            margin-left: 10%;
        }
    
        .work-content {
            margin-left: 6%;
        }
    
        .about-above-copy {
            margin-left: 6%;
        }
    
         #about-copy {
            margin-left: 6%;
        }
    
        #about-cta {
            margin-left: 6%;
        }
    
        #projects-cta {
            margin-left: 6%;
        }
    
        #journal-cta {
            margin-left: 6%;
        }
    
        .portfolio-element {
            width: 60%;
        }
    
        .arrow-go {
            width: 35%;
            margin-left: 35%;
        }
    
        .portfolio-element:hover .arrow-go {
            margin-left: 40%;
        }
        
        .home-journal-entry {
            margin-right: 2%;
       
        }
        
}

@media only screen and (max-width: 987px) {
    
     .work-content {
            margin-left: 10%;
        }
    
        .about-above-copy {
            margin-left: 10%;
        }
    
         #about-copy {
            margin-left: 10%;
        }
    
        #about-cta {
            margin-left: 10%;
        }
    
        #projects-cta {
            margin-left: 10%;
        }
    
        #journal-cta {
            margin-left: 10%;
        }
    
        .portfolio-page-content {
             margin-left: 6%;
        }
    
        .portfolio-page-container .portfolio-element {
            width: 80%;
         }
    
        .portfolio-page-container .arrow-go {
            width: 45%;
        }
    
        .portfolio-element {
            width: 65%;
        }
    
        .arrow-go {
            width: 35%;
            margin-left: 35%;
        }
    
        .portfolio-element:hover .arrow-go {
            margin-left: 40%;
        }
    
}


@media only screen and (max-width: 702px) {
    
    
        #j-2 {
            left: 12.3vw;
        }
    
        #exclaim {
            left: 57.4vw;
        }
    
        #logo-full {
            margin-left: 10%;
        }
    
        .work-content {
            margin-left: 8%;
        }
    
        .about-above-copy {
            margin-left: 8%;
        }
    
         #about-copy {
            margin-left: 8%;
        }
    
        #about-cta {
            margin-left: 8%;
        }
    
        #projects-cta {
            margin-left: 8%;
        }
    
        #journal-cta {
            margin-left: 8%;
        }
        
}

/*----- adjust header image and logo section margin ----*/

@media only screen and (max-width: 881px) {
    
    .top-header {
        background-size: 150%;
        background-position: top right;
    }
    
    .mission-copy {
        margin-left: 28%;
        margin-top: 67vh;
    }
    
    .circle {
        width: 10.2vw;
        height: 10.2vw;
    }
    
    #j-2 {
        margin-top: -23%;
    }
    
    #exclaim {
        left: 73.9vw;
    }
    
    #logo-full img {
        max-width: 82%;
    }
    
        
}

@media only screen and (max-width: 686px) {
    
    .top-header {
        background-size: 150%;
        background-position: top right;
    }
    
    .mission-copy {
        margin-left: 25%;
        margin-top: 55vh;
    }
    
    .second-section {
        width: 100vw;
        height: 40vh;
    }
    
    .circle {
        width: 10.2vw;
        height: 10.2vw;
    }
    
    #j-2 {
        margin-top: -38%;
    }
    
    #exclaim {
        left: 73.9vw;
    }
    
    #logo-full img {
        max-width: 82%;
    }  
        
}

/*-------- portfolio projects responsive ---------*/

@media only screen and (max-width: 992px) {
        
        .project-right {
            margin-left: 0%;
       
        }
        
}

@media only screen and (max-width: 774px) {
        
        .project-example {
            width: 90%;
    }
        
}

@media only screen and (max-width: 654px) {
        
    .project-example {
        width: 90%;
        height: 400px;
    }
    
    .project-image-example {
        height: 400px;
    }
    
     .project-info-example {
        height: 400px;
    }
    
    .pull-bar {
        margin: 150px 4%;
    }
    
    .project-info-copy-example {
        padding: 25% 17%;
    }
        
}

@media only screen and (max-width: 500px) {
        
    .name-example {
        font-size: 18px;
    }
    
    .description-example {
        font-size: 18px;
        line-height: 22px;
    }
    
    .project-info-copy-example {
        padding: 35% 17%;
    }
        
}


/*----- adjust section top and bottom spacing for mobile ----*/

@media only screen and (max-width: 450px) {
    
    .third-section[data-emergence=visible] {
        padding: 50px 0 25px 0;
    }
    
    .work-content[data-emergence=visible] {
    padding: 50px 0;
    }
    
    .work-copy {
        padding: 40px 0 40px 0;
    }
    
    .fourth-section {
        margin-bottom: 40px;
    }
    
    .contact {
        padding: 10px 0;
    }
}

/*---------- home journal section responsive ----------*/

@media only screen and (max-width: 1018px) {
        
    .home-journal-entry {
        margin-right: 1%;
       
     }       
}

@media only screen and (max-width: 987px) {
        
    .home-journal-entry {
        width: 100%; 
        margin-top: 40px;
        margin-right: 0;
     }
    
    .home-journal-entry-image {
        width: 330px;
        height: 250px;
        float: left;
    }
    
    .home-journal-entry-copy {
        width: 50%;
        margin: 1px 0;
        float: left;
    }
    .home-journal-category {
        margin-top: 5px;
    }
    
    .home-journal-description {
        margin-bottom: 20px;
    }
    
    .home-journal-more {
        width: 580px;
       
    }
}

@media only screen and (max-width: 702px) {
        
    .home-journal-entry {
        width: 85%; 
        margin-top: 40px;
        margin-right: 8%;
     }
    
    .home-journal-entry-image {
        width: 100%;
        height: auto;
        float: none;
    }
    
    .home-journal-entry-image img {
        width: 100%;
        height: 100%;
    }
    
    .home-journal-entry-copy {
        width: 100%;
        margin: 20px 0;
        float: none;
    }
    .home-journal-category {
        margin-top: 5px;
    }
    
    .home-journal-description {
        margin-bottom: 20px;
        font-size: 18px;
    }
    
    .home-journal-more {
        width: 580px;
       
    }
    
    .type-post  {
    width: 90%;
	float: none;
	margin-right: 0;
	margin-bottom: 40px;
}
    
}

@media only screen and (max-width: 450px) {

.home-journal-more a {
		font-size: 10px;
	}
}

/*---------- section headers responsive ----------*/

@media only screen and (max-width: 869px) {
    
    .work-copy {
        font-size: 40px;
        width: 90%;
    }
    
    .work-title {
        font-size: 30px;
    }
    
    #about-copy {
        font-size: 40px;
        width: 90%;
    }
    
    .about-above-copy {
        font-size: 30px;
    }
    
    .contact-info h1 {
        font-size: 30px;
    }

    .contact-info h3 {
        font-size: 40px;
}   
          
}

@media only screen and (max-width: 450px) {
    
    .work-copy {
        font-size: 30px;
        width: 90%;
    }
    
    .work-title {
        font-size: 25px;
    }
    
    #about-copy {
        font-size: 30px;
        width: 90%;
    }
    
    .about-above-copy {
        font-size: 25px;
    }
    
     .contact-info h1 {
        font-size: 25px;
    }

    .contact-info h3 {
        font-size: 30px;
}   
          
}

/*---------- portfolio section responsive ----------*/


@media only screen and (max-width: 702px) {
    
    .project-right {
        margin-left: 0;
    }
    
    .portfolio-element {
        width: 85%;
    }
    
    .arrow-go {
        width: 50%;
        margin-left: 40%;
    }
    
    .portfolio-element:hover .arrow-go {
        margin-left: 42%;
        opacity: 1;
    }
    
    
}
    
@media only screen and (max-width: 768px) {
        
        .casestudy {
            margin-left: 0%;
            margin-top: 100px;
            width: 95%;
        }
        
        .applications {
            margin-left: 0%;
        }   
    
      .project-title {
        width: 80%;
        margin-left: 7%;
        float: none;
    }

        
    }

@media only screen and (max-width: 500px){

    .studio-info {
        width: 80%;
    }
}

@media only screen and (max-width: 500px){
    

    
    .navigation {
        font-size: 60px;
        margin-left: 0px;
    }
    
    .feature-mobile {
        display: block;
    }
    
    .feature-desktop {
        display: none;
    }
    
    
    .project-title {
        width: 80%;
        margin-left: 7%;
        float: none;
    }
    
    .feature-image img {
        max-width: 150%;
    }
    
    .feature-image-cura img {
        max-width: 150%;
    }
    
    .feature-image-r2c img {
        max-width: 150%;
        margin-top: -100px;
    }

    .studio-info {
        width: 80%;
        margin-top: 10px;
        margin-bottom: 50px;
        margin-left: 8%;
        float: left;
    }
        
    .contact {
        margin-left: 5%;
    }
}

@media only screen and (max-width: 425px) {
    
    .single {
        width: 100%;
        }
        
    .double {
        width: 100%;
        }
    
    .casestudy {
        margin-left: 0%;
        margin-top: 100px;
        width: 90%;
        }
        
    .footy {
        padding: 0px;
        }
        
    .footer-content {
        width: 100%;
        margin-bottom: 40px;
        }
        
    .copyright, .logo-btm, .social {
        text-align: center;
        }
        
    .copyright {
        display: none;
        }
        
    .copyright2 {
        display: block;
        }
        
    .contact {
        margin-left: 5%;
        }
        
}

@media only screen and (max-width: 986px) {
    
    .about-image img {
        max-width: 170%;
        margin-top: -350px;
        margin-left: -15%;
    
    }
}

@media only screen and (max-width: 500px) {
    
    .about-image img {
        max-width: 200%;
        margin-top: 50px;
        margin-left: 0;
    
    }
}


    
@media only screen and (max-width: 375px) {
    
        
     .contact {
         margin-left: 5%;
    }
}

@media only screen and (max-width: 320px) {
        
    .contact {
        margin-left: 1%;
    }
}

/*---------- suggested project responsive ----------*/

@media only screen and (max-width: 852px) {
    
    .suggested-project {
        float: left;
        width: 45%;
        height: 400px;
        margin: 0 1%;
}
    
    .back-to {
        width: 85%;
        background-size: 15%;
    }
    
    .suggested-project-header {
        padding: 2%;
        margin-left: 0%;
    }
    
    .more-project-mobile {
        display: block;
    }
    
    .more-project-desktop {
        display: none;
    }    
        
}

@media only screen and (max-width: 500px) {
    
    .project-suggest {
        margin-top: 10px;
    }
    
    .suggested-project {
        float: left;
        width: 85%;
        height: 250px;
        margin: 10px 1%;
    }   
    
     .back-to {
        background-size: 25%;
    }
    
    .back-to-copy {
    margin: 200px 25%;
    text-align: center;
    }
          
}


/*---------- contact page responsive ----------*/

@media only screen and (max-width: 987px) {
    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"]
    {

    width: 42%;
    }

    .wpcf7 textarea {
    width: 90%;
    }
    
    .wpcf7-not-valid-tip {
    margin-left: 52%;
    }
    
}

@media only screen and (max-width: 768px) {
    
    .contact {
        margin-left: 6%;
    }
    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"]
    {
        width: 90%;
    }

    .wpcf7 textarea {
        width: 90%;
    }

    .wpcf7-form-control.wpcf7-submit{
        margin: 0px;
        width: 95%;
    }
    
    .wpcf7-form-control.wpcf7-submit:hover{
        width: 95%;
}
    
    .wpcf7-not-valid-tip {
    margin-left: 2%;
    }
   
}

@media only screen and (max-width: 450px) {

    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"]
    {
        width: 85%;
    }

    .wpcf7 textarea {
        width: 85%;
    }
   
}