/* Navigation
////////////////////////////////////////////////// */
body.home > header {position: fixed; z-index: 999; top: 0; left: 0; right: 0; width: 100%; border-top:4px solid #79CC9A;}
/* .navbar-border{} */
.navbar { width: 100%; height: 58px; overflow: hidden;}
.navbar ul {margin-bottom:0; margin:18px 0px;}
.navbar ul li {float:left; margin-bottom:0; list-style-type:none; padding-right: 40px;}
.navbar ul li:last-child {padding-right: 20px;}
.navbar ul li a {font-size: 16px; color:#79CC9A; text-decoration: none;}
.navlink-selected {color:#F7D379 !important;}
#navlink-linkedin {border:1px solid #79CC9A; padding: 3px 4px 2px 5px; border-radius:30px;}
#navlink-linkedin:hover {border-color: #45a076;}

#text-logo {top:5px; position: relative; padding-right: 0px; display: block;}
.nine.column.w50until600,.three.column.w50until600 {width: 50%; margin-left: 0;}
.navbar-logo{margin:10px 0px 10px 15px;}
.logo-up{-ms-transform:rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg)}

@media (max-width: 900px) {
.navbar ul li {padding-right: 30px;}
.navbar ul li:last-child {padding-right: 15px;}
}

@media (max-width: 768px) {
.navbar ul li {padding-right: 15px;}
.navbar ul li:last-child {padding-right: 15px;}
}

@media (max-width: 480px) {
.navbar ul li {padding-right: 20px;}
.navbar ul li:last-child {padding-right: 10px;}
}

/*toggle switch*/
/* .toggle-switch-on{this class has no content is added to the page on load and removed with the switch, it is used to control other selectors}*/
/*.toggle-switch-off{this class is paired with the toggle-switch-on classh} */

.toggle-switch {width:60px; height:30px; background-color:#999; border-radius: 25px; box-shadow: inset 3px 3px 3px rgba(0,0,0,0.25); overflow:none; border-bottom:1px solid rgba(255,255,255,0.25); cursor:pointer;}
.switch-on {background-color:#439C72; /*green*/}
.switch-off {background-color:#DEB857; /*gold*/}

.switch-off .toggle-knob {left:31px !important;}
.toggle-knob {top:1px; left:1px; position:relative; width:28px; height:28px; background-color:#FFF; border-radius:25px; box-shadow:2px 2px 2px rgba(0,0,0,0.25);}

body.toggle-switch-on .view-1 {display:block !important; visibility: visible !important;}
body.toggle-switch-off .view-1 {display:none !important; visibility: hidden !important;}

body.toggle-switch-on .view-2 {display:none !important; visibility: hidden !important;}
body.toggle-switch-off .view-2 {display:block !important; visibility: visible !important;}

/* Project Page
////////////////////////////////////////////////// */
body.project {margin: 15px;}

/*project border*/
.project-border {background-color: #EEEEEE; position: fixed; z-index: 1999;}
.project-border.top {width: 100%; top: 0; height: 15px; box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.5);}
.project-border.right {width: 15px; height: 100%; top: 0; right: 0; box-shadow: inset 10px 0px 10px -10px rgba(0,0,0,0.5);}
.project-border.bottom {width: 100%; bottom: 0; height: 15px; box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.5);}
.project-border.left {width: 15px; height: 100%; top: 0; left: 0; box-shadow: inset -10px 0px 10px -10px rgba(0,0,0,0.5);}
.project-border.topleft {width: 15px; height: 15px; top: 0px; left: 0px; overflow: hidden; position: fixed; z-index: 2000;}
.project-border.topleft>.topleft-inner {position: absolute; width: 25px; height: 25px; top: 25px; left: 25px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}
.project-border.topright {width: 15px; height: 15px; top: 0px; right: 0px; overflow: hidden; position: fixed; z-index: 2000;}
.project-border.topright>.topright-inner {position: absolute; width: 25px; height: 25px; top: 25px; right: 25px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}
.project-border.bottomleft {width: 15px; height: 15px; bottom: 0px; left: 0px; overflow: hidden; position: fixed; z-index: 2000;}
.project-border.bottomleft>.bottomleft-inner {position: absolute; width: 25px; height: 25px; bottom: 25px; left: 25px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}
.project-border.bottomright {width: 15px; height: 15px; bottom: 0px; right: 0px; overflow: hidden; position: fixed; z-index: 2000;}
.project-border.bottomright>.bottomright-inner {position: absolute; width: 25px; height: 25px; bottom: 25px; right: 25px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}

body.project #close {z-index: 10; top: 0px; right: 0px; width: 100%; position: relative; cursor: default;}
/* body.project #close:hover > a > .close-btn-icon {display: block; text-indent: -9999px; width: 35px; height: 35px; background: url(../images/ui/close-icon-x-hoverB-2x.png); background-size: 50px 50px; background-repeat: no-repeat; position: absolute; right: 10px; top: 10px; z-index: 11;} */
.close-btn-icon {display: block; text-indent: -9999px; width: 35px; height: 35px; background: url("../images/ui/close-1.svg"); background-size: 35px 35px; background-repeat: no-repeat; position: absolute; right: 10px; top: 10px; z-index: 11;}
.close-btn-icon:hover {display: block; text-indent: -9999px; width: 35px; height: 35px; background: url("../images/ui/close-2.svg"); background-size: 35px 35px; background-repeat: no-repeat; position: absolute; right: 10px; top: 10px; z-index: 11;}
/* .close-btn-bg {display: block; text-indent: -9999px; width: 70px; height: 70px; background: url(../images/ui/close-icon-bg-2x.png); background-size: 70px 70px; background-repeat: no-repeat; position: absolute; right: 0px; top: 0px; z-index: 10;} */

section.project-title {background-color: #081721; position:relative; display: block; width: 100%; text-align: center;  padding: 40px 0 35px; }
.project-name {color:#79cc9a; line-height: 1.4em; padding: 0; margin: 0;}
.project-category {color:#FFF; font-size: 2.8em; line-height: 1.4em; padding: 0 0 .33em;}
.project-focus {color:#FFF; padding: 0 0 .66em; line-height: 1.4em; }

.project-tags {color:#59997B;}
.project-tags ul {list-style: none; display: inline-block; margin: 0 auto; padding: 0 20px 0 20px;}
.project .project-tags ul li {padding: 0px 0px 0px 0px;}
.project-tags ul li {display: inline-table; padding: 0 8px 2px 8px;}
/* .project .project-tags ul li:hover {color:#555;} */
.project .project-tags ul li:after {color:#2B5249; margin-left:10px; margin-right:10px; content:"|";}
.project-tags ul li:last-child:after {margin-left:0px; margin-right:0px; content:"";}

/*homepage only hover effects*/
.project-cover.cover-1 {background: url("https://www.joeraz.com/images/project/gtm/project-cover-gtm-min.jpg");}
.project-cover.cover-2 {background: url("/images/ui/cover-2.jpg");}
.project-cover.cover-3 {background: url("/images/ui/cover-3.jpg");}
.project-cover.cover-4 {background: url("/images/ui/cover-4.jpg");}
.project-cover.cover-5 {background: url("/images/ui/cover-5.jpg");}
.project-cover.cover-6 {background: url("/images/ui/cover-6.jpg");}


/* .home .project-tags ul li, .project-tags ul li{cursor: default;}
.home .project-tags ul li:hover>span {background-color: #F7DB92 !important; box-shadow: inset 3px 3px 3px rgba(0,0,0,0.25); border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;}
.home .project-tags ul li:after {margin-left:5px; margin-right:5px; content:"\2022"; color: #999;}
.home .project-tags ul li:last-child:after {margin-left:0px; margin-right:0px; content:"";} */

body.project > .project-hero, .project-copy, .project-gallery, .project-nav  {padding: 0 60px;}
body.project > .project-copy {max-width:660px; margin: 0 auto;}

.project-hero{position: relative; display: block; /*height: 532px;*/ width: 1000px;}
.hero-background{position: absolute; height: auto;}
.hero-background-image {background: url(../images/ui/hero-background.jpg); background-position: center bottom; background-size:100% 60%; background-repeat: no-repeat;}
.hero-overlay {z-index: 9; position: absolute; top: 0; left: 0;}
.hero-overlay img {width:100%;}
.hero-background {width: 72%; left: 14%; top: 6.85%; right: 0; bottom: 0;}
.hero-bg-vid{z-index: 8; position: absolute; width:100%; max-width: 750px; left: 0; top: 0; right: 0; bottom: 0;}
.project-video {display: block; border:1px solid #EAEAEA; box-shadow:0px 4px 12px rgba(0,0,0,0.12); max-width: 900px; width: 90%; margin: 0 auto;}


@media (max-width: 600px) {
	.nine.column.w50until600,.three.column.w50until600 {width: auto; margin: auto;}
	.navbar ul {padding-left:0;}
}

.fivex3-ratio-height {max-height: 532px;}

.link-active {font-weight: 700; opacity: 1;}
.link-inactive {font-weight: 400; color:#6a6a6a;}
a.link-active {color: #121212 !important; cursor:default !important;}
.link-inactive:hover {opacity: 1;}
.sub-project-nav > a {display: inline-block; padding:0 20px; line-height: 40px;}
.sub-project-nav > a.link-inactive {color:#6a6a6a; font-weight: 400;}
.sub-project-nav > a.link-inactive:hover {color: #439C72;}
.sub-project-nav > a.link-active {position: relative; color: #121212 !important;}
/* .sub-project-nav .tab-active {position:absolute; width: 80%; left: 10%; right:10%; top:30px; border-top-right-radius: 5px; border-top-left-radius: 5px; z-index: 999; height:5px; background-color:red; display:block;} */
.sub-project-nav > a.link-active:after {content:""; background-color:#F7D379; position:relative; width: 100%; top:0px; z-index: 999; height:4px; display:block; border-top-left-radius: 4px; border-top-right-radius: 4px; }

.project-nav a {padding:0 12px; line-height: 2;}
.project-nav a > span {white-space: nowrap;}
.previous-project {position: relative; width: 43%; float: left; white-space: nowrap;}
.previous-project-icon {display: block; text-indent: -9999px; width: 20px; height: 30px; background: url(../images/ui/icon-previous-project-2x.png); background-size: 20px 30px; background-repeat: no-repeat; float: left;}
.previous-project span {line-height:30px !important; padding-left: 5px;}
.close-project {position: relative; width: 14%; float: left; vertical-align: middle;} 
.close-project span {line-height:30px !important; height: 30px; line-height: 30px;}
.close-project-icon {display: block; text-indent: -9999px; width: 24px; height: 24px; background: url(../images/ui/icon-close-project-2x.png); background-size: 24px 24px; background-repeat: no-repeat;}
.next-project {position: relative; width: 43%; float: left; vertical-align: middle;}
.next-project span {line-height:30px !important; padding-right: 5px;}
.next-project-icon {display: block; text-indent: -9999px; width: 20px; height: 30px; background: url(../images/ui/icon-next-project-2x.png); background-size: 20px 30px; background-repeat: no-repeat; float: right;}

.previous-project a:hover > .previous-project-icon {display: block; text-indent: -9999px; width: 20px; height: 30px; background: url(../images/ui/icon-previous-project-hover-2x.png); background-size: 20px 30px; background-repeat: no-repeat; float: left;}
.close-project a:hover > div > .close-project-icon {display: block; text-indent: -9999px; width: 24px; height: 24px; background: url(../images/ui/icon-close-project-hover-2x.png); background-size: 24px 24px; background-repeat: no-repeat;}
.next-project a:hover > .next-project-icon {display: block; text-indent: -9999px; width: 20px; height: 30px; background: url(../images/ui/icon-next-project-hover-2x.png); background-size: 20px 30px; background-repeat: no-repeat; float: right;}

.project-nav-header {position: absolute; top: 25px; left: 25px; z-index: 9; width: 72px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.project-nav-header > .previous-project, .project-nav-header > .next-project {width:50%;}

.project-nav-header > .previous-project > a > .previous-project-icon {display: block; text-indent: -9999px; width: 24px; height: 36px; background: url(../images/ui/header-icon-previous-project-2x.png); background-size: 24px 36px; background-repeat: no-repeat; float: left; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.project-nav-header > .next-project > a > .next-project-icon {display: block; text-indent: -9999px; width: 24px; height: 36px; background: url(../images/ui/header-icon-next-project-2x.png); background-size: 24px 36px; background-repeat: no-repeat; float: left; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.project-nav-header > .previous-project > a:hover > .previous-project-icon {display: block; text-indent: -9999px; width: 24px; height: 36px; background: url(../images/ui/header-icon-previous-project-hover-2x.png); background-size: 24px 36px; background-repeat: no-repeat; float: left; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.project-nav-header > .next-project > a:hover > .next-project-icon {display: block; text-indent: -9999px; width: 24px; height: 36px; background: url(../images/ui/header-icon-next-project-hover-2x.png); background-size: 24px 36px; background-repeat: no-repeat; float: left; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}


/* hero section
////////////////////////////////////////////////// */
#hero {overflow:hidden; display: flex; flex-wrap: wrap; min-height: 660px; height: 90vh;}
#hero img {margin:0 auto; align-items: center; max-width: 900px; width:100%; padding:100px 5% 0 5%;}

@media (max-width: 900px) {
/* #hero {height: 750px;} */
}

@media (max-width: 768px) {
#hero {min-height: 600px; height: 80vh;}
#hero img {padding:88px 0 0 0;}
}

@media (max-width: 600px) {
#hero {height: 580px;}
}

/* About section
////////////////////////////////////////////////// */
#profile-image{max-width: 336px;}
#icon-adobe, #icon-responsive, #icon-code, #icon-prototype{max-width: 180px;}

/* Work section
////////////////////////////////////////////////// */
.project-title{text-align: center; display: table-cell; vertical-align: middle; position: absolute;}
.project-desc{text-align: center; display: table-cell; vertical-align: middle; position: absolute;}

/*hp project card hover*/
a.myui_project_thumb_top4:hover > .project-card-content{visibility: visible; transition: background-color .4s; background-color: rgba(77,181,133,.90);}
a.myui_project_thumb_top4 > .project-card-content {transition: background-color .4s; background-color: rgba(77,181,133,0);}
a.myui_project_thumb_top4:hover > .project-card-content > div {transition: opacity .2s; opacity: 1;} 
a.myui_project_thumb_top4 > .project-card-content > div {transition: opacity .2s;opacity: 0;}
/*project card styles*/
a.myui_project_thumb, a.myui_project_thumb_top4 {text-decoration: none; border: 1px solid #FFF; display: block; text-align: center;}
a.myui_project_thumb, a.myui_project_thumb_top4 {background: #4db585; background: -moz-linear-gradient(top, #4db585 0%, #439c72 100%); background: -webkit-linear-gradient(top, #4db585 0%,#439c72 100%); background: linear-gradient(to bottom, #4db585 0%,#439c72 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db585', endColorstr='#439c72',GradientType=0 );}
/*top4 thumbs*/
a.myui_project_thumb_top4 .heading2, a.myui_project_thumb_top4 .copyLarge {font-family: 'montserrat',Helvetica,Arial,Lucida,sans-serif; font-weight: 300; color: #FFF !important; text-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;}
a.myui_project_thumb_top4 .heading4 {font-family: "montserrat",Georgia,"Times New Roman",serif; letter-spacing: 1px; color: #FFF !important; text-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;}
/*other projects*/
a.myui_project_thumb .heading4, a.myui_project_thumb .copySmall {font-family: 'montserrat',Helvetica,Arial,Lucida,sans-serif; font-weight: 300; color: #FFF !important; text-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;}
a.myui_project_thumb .heading6 {font-family: "montserrat",Georgia,"Times New Roman",serif; letter-spacing: 1px; color: #FFF !important; text-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;}
.myui_checkmark {display: none; visibility: hidden; background-image: url(''); width: 47px; height: 53px; position: absolute; top: 20px; right: 20px;}

/*visited*/
a.myui_project_thumb:hover .heading2, a.myui_project_thumb:hover .heading4, a.myui_project_thumb:hover .heading6, a.myui_project_thumb:hover .copySmall,
a.myui_project_thumb_top4:hover .heading2, a.myui_project_thumb_top4:hover .heading4, a.myui_project_thumb_top4:hover .heading6, a.myui_project_thumb_top4:hover .copyLarge {color: #265942 !important; text-shadow: 0px -1px rgba(255,255,255,0.1) !important;}
a.myui_project_thumb:hover .myui_checkmark {display: block !important; visibility: visible !important;}
a.project-cover:hover .heading2, a.project-cover:hover .heading4, a.project-cover:hover .heading6, a.project-cover:hover .copySmall, a.project-cover:hover .copyLarge {color: #FFF !important; text-shadow: 0px 1px 2px rgb(0, 0, 0, .66) !important;}
.project-cover {background-size:cover !important; background-position-x: center !important; background-position-y: center !important;}

/*end project thumbnail*/


/* Contact Form 
////////////////////////////////////////////////// */
.contactform-container{max-width: 768px; box-sizing: border-box;}
.contactform-wrapper {text-align: center; border-width: 1px; border-style: solid; padding: 30px 30px 35px; box-sizing: border-box;}
.mycontactform {max-width: 600px; margin: 0 auto; box-sizing: border-box;}
.mycontactform label {text-align:left; max-width: 600px; padding-bottom: 10px; box-sizing: border-box;}
.mycontactform input, .mycontactform textarea {width: 100%; max-width: 600px; box-sizing: border-box;}

.mycontactform input {height: 60px; padding: 10px;}
.mycontactform textarea {height: 250px; padding: 10px;}

/*overwrite template*/
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {border-radius: 0px; border-style: solid; border-width: 1px; border-color: transparent;}

@media (max-width: 480px) {
.contactform-wrapper {padding: 20px 20px 35px 20px;}
}

.pw-left h1 {font-size: 66px; text-rendering: optimizeLegibility;}
.pi-projectname, .pi-year, .pi-description, .pi-link {font-size: 22px; font-weight: 300; letter-spacing: .2px; line-height: 1.4; text-rendering: optimizeLegibility;}
.projectnav-prev, .projectnav-next {font-size: 22px; font-weight: 300; letter-spacing: .2px; line-height: 0; font-family: 'montserrat', "HelveticaNeue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility;}
.project-close {font-size: 22px; font-weight: 300; letter-spacing: .2px; line-height: 0; font-family: 'montserrat', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility;}

/* terms
////////////////////////////////////////////////// */
.terms {width:100%; padding: 10px 10px 5px 10px; overflow: hidden;}

/* Media Queries
////////////////////////////////////////////////// */
/* small to large mobile */
@media (min-width: 320px) {
  .projectwindow-scroller{margin-bottom: 270%;}
}

/* small to large mobile */
@media (min-width: 360px) {
  .projectwindow-scroller{margin-bottom: 300%;}
}

/* Larger than mobile */
@media (min-width: 400px) {
  .project-thumb-container > div, .project-title, .project-desc {width: 100%;}
  .projectwindow-scroller{margin-bottom: 280%;}
}

@media (min-width: 450px) {
  .projectwindow-scroller{margin-bottom: 240%;}
} 

@media (min-width: 500px) {
  .projectwindow-scroller{margin-bottom: 220%;}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  .project-thumb-container > div {width: 50%;}
	.project-link{height: 275px;}
  .projectwindow-scroller{margin-bottom: 195%;}
}

@media (min-width: 600px) {
  .projectwindow-scroller{margin-bottom: 180%;}
}

@media (min-width: 650px) {
  .projectwindow-scroller{margin-bottom: 170%;}
}

@media (min-width: 700px) {
  .projectwindow-scroller{margin-bottom: 160%;}
}

/* Larger than tablet */
@media (min-width: 750px) {
  .project-thumb-container > div {width: 33.333%;}
	.project-thumb-container:nth-child(even) {clear: none;}
  .projectwindow-scroller{margin-bottom: 150%;}
}

@media (min-width: 768px) {
  .pw-left {float: left; width: 40%; max-width: 488px;}
  .pw-right {float: right; clear: none; width: 57%;}
  .projectwindow-scroller {margin-bottom: 85%;}
  /*.pw-right img {margin-top: 8%;}*/
}

/* Larger than desktop */
@media (min-width: 800px) {
  .pw-left {float: left; width: 36%; max-width: 488px;}
  .pw-right {float: right; clear: none; width: 61%;}
  .projectwindow-scroller {margin-bottom: 80%;}
}

/* Larger than desktop */
@media (min-width: 900px) {
  .pw-left {float: left; width: 36%; max-width: 488px;}
  .pw-right {float: right; clear: none; width: 61%;}
  .projectwindow-scroller {margin-bottom: 75%;}
}

/* Larger than desktop */
@media (min-width: 1000px) {
  .projectwindow-scroller {margin-bottom: 65%;}
}

@media (min-width: 1200px) {
  .projectwindow-scroller {margin-bottom: 56%;}
}

/* Larger than Desktop HD */
@media (min-width: 1400px) {
  .project-thumb-container > div {width: 466.667px;}
  .projectwindow-scroller {margin-bottom: 50%;}
}

@media (max-width: 900px) {
  body.project > .project-hero, .project-copy, .project-gallery, .project-nav  {padding: 0 45px;}

}

@media (max-width: 768px) {
  body.project > .project-hero, .project-copy, .project-gallery, .project-nav  {padding: 0 35px;}
}

@media (max-width: 600px) {
  /* Project Page
  ////////////////////////////////////////////////// */
  body.project > .project-hero, .project-copy, .project-gallery, .project-nav  {padding: 0 25px;}
  body.project {margin: 10px;}

  /*project border*/
  .project-border {background-color: #FFFFFF; position: fixed; z-index: 19;}
  .project-border.top {width: 100%; top: 0; height: 10px; box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.5);}
  .project-border.right {width: 10px; height: 100%; top: 0; right: 0; box-shadow: inset 10px 0px 10px -10px rgba(0,0,0,0.5);}
  .project-border.bottom {width: 100%; bottom: 0; height: 10px; box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.5);}
  .project-border.left {width: 10px; height: 100%; top: 0; left: 0; box-shadow: inset -10px 0px 10px -10px rgba(0,0,0,0.5);}
  .project-border.topleft {width: 10px; height: 10px; top: 0px; left: 0px; overflow: hidden; position: fixed; z-index: 20;}
  .project-border.topleft>.topleft-inner {position: absolute; width: 15px; height: 15px; top: 20px; left: 20px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}
  .project-border.topright {width: 10px; height: 10px; top: 0px; right: 0px; overflow: hidden; position: fixed; z-index: 20;}
  .project-border.topright>.topright-inner {position: absolute; width: 25px; height: 25px; top: 20px; right: 20px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}
  .project-border.bottomleft {width: 10px; height: 10px; bottom: 0px; left: 0px; overflow: hidden; position: fixed; z-index: 20;}
  .project-border.bottomleft>.bottomleft-inner {position: absolute; width: 25px; height: 25px; bottom: 20px; left: 20px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}
  .project-border.bottomright {width: 10px; height: 10px; bottom: 0px; right: 0px; overflow: hidden; position: fixed; z-index: 20;}
  .project-border.bottomright>.bottomright-inner {position: absolute; width: 25px; height: 25px; bottom: 20px; right: 20px; box-shadow: 0px 0px 10px 12.5px rgba(0,0,0,0.5);}

  body.project #close {z-index: 10; top: 0px; right: 0px; width: 100%; position: relative; cursor: default;}
  body.project #close:hover > a > .close-btn-icon {display: block; text-indent: -9999px; width: 25px; height: 25px; background-size: 25px 25px; background-repeat: no-repeat; position: absolute; right: 12px; top: 12px; z-index: 11;}
  .close-btn-icon {display: block; text-indent: -9999px; width: 25px; height: 25px; background-size: 25px 25px; background-repeat: no-repeat; position: absolute; right: 12px; top: 12px; z-index: 11;}
  .close-btn-icon:hover {display: block; text-indent: -9999px; width: 25px; height: 25px; background-size: 25px 25px; background-repeat: no-repeat; position: absolute; right: 12px; top: 12px; z-index: 11;}
  /* .close-btn-bg {display: block; text-indent: -9999px; width: 52px; height: 52px; background: url(../images/ui/close-icon-bg-2x.png); background-size: 52px 52px; background-repeat: no-repeat; position: absolute; right: 0px; top: 0px; z-index: 10;} */

	.project-nav-header {position: absolute; top: 18px; left: 18px; width: 56px;}
	.project-nav-header > .previous-project > a > .previous-project-icon, .project-nav-header > .next-project > a > .next-project-icon {width: 18px; height: 27px;}
  .project-nav-header > .previous-project > a > .previous-project-icon, .project-nav-header > .next-project > a > .next-project-icon, 
  .project-nav-header > .previous-project > a:hover > .previous-project-icon, .project-nav-header > .next-project > a:hover > .next-project-icon 
  {background-size: 18px 27px !important;}

  section.project-title { padding: 35px 0 25px;}
  .project-name {padding: 0 10px;}
  .project-focus {padding: 0 0 10px;}
  .project-tags ul {padding: 0 15px 0 15px; cursor: default;}
  .project-tags ul li:after {margin-left:8px; margin-right:8px;}
}
@media (max-width: 540px) {
.mobile-btn {margin:0 20px !important;}
}

@media (max-width: 480px) {
	body.project > .project-hero, .project-copy, .project-gallery, .project-nav  {padding: 0 15px;}
	.close-project-icon {margin-top:5px; display: block; text-indent: -9999px; width: 20px; height: 20px; background: url(../images/ui/icon-close-project-2x.png); background-size: 20px 20px; background-repeat: no-repeat;}
	.close-project a:hover > div > .close-project-icon {margin-top:5px; display: block; text-indent: -9999px; width: 20px; height: 20px; background: url(../images/ui/icon-close-project-hover-2x.png); background-size: 20px 20px; background-repeat: no-repeat;}
}

@media (min-width: 1px) and (max-width: 320px) {
  body.project > .project-hero, .project-copy, .project-gallery, .project-nav  {padding: 0 10px;}
}