/*
Theme Name:			Philboss Design
Theme URI:			https://www.philbossdesign.com.au
Description: 	    A custom designed WordPress theme for Philboss Design - a creative digital design agency based in Sydney's Eastern Suburbs.
Author: 			Phillip Peet
Author URI: 		https://www.philbossdesign.com.au
Version: 			5.43
*/


.va-feature-video {
    position: absolute;
    margin: auto;
    display: block;
    border-radius: 16px;
    width: 90%;
    left: 0;
    right: 0;
    top: 80px;
	box-shadow: 0 0 30px rgba(0,0,0,0.4)
	
}


.postid-252 .page-content .hero {
    margin: -50px 0 50px;
}


.shack-features-1 {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  max-width: 1280px;
  margin: 0 auto;
  padding:0 60px 60px;
  gap: 60px;
}

.shack-features-2 {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px 100px;
  gap: 60px;
	direction: rtl;
	 text-align: left;
}

.shack-features-2 > * {
  direction: ltr;
}


.shack-desktop-video{
	max-width: 928px; 
	border-radius: 12px; 
	border-bottom-right-radius: 0; 
	border-bottom-left-radius: 0; 
	top: 11%;
	position: absolute; 
	left: 0; 
	width: 72.5%; 
	right: 0; 
	margin: 0 auto
}

@media(max-width: 768px){
.shack-desktop-video{
	top: 10%;
	border-top-right-radius: 6px;
	border-top-left-radius: 6px
}
	
	.wv-video{
		top: 11% !important;
		border-radius: 8px !important
	}
	
}

@media(max-width: 499px){
.shack-desktop-video {
  width: 90%;
	border-radius: 8px
}
}

.shack-extra{
	max-width: 800px !important; 
	padding: 80px 40px !important; 
	margin: 0 auto !important;
}

@media(max-width: 599px){
.shack-extra{padding: 40px 20px !important}
}

.phone-header {
  position: absolute;
  top: 14px;
  z-index: 2;
  max-width: 230px;
	width: 82%;
  margin: 0 auto;
  left: 5px;
  right: 0;
  border-top-left-radius: 35px;
  border-top-right-radius: 35px;
}

@media(max-width: 1199px){
	.phone-mockup {display: none}
	
	.shack-features-1, .shack-features-2 {
  display: block;
  max-width: 800px;
		padding: 0 20px 60px
	}
	.shack-feature-1-content, .shack-feature-2-content{
		margin-top: 0 !important
	}
}

.phone-mockup {
  position: absolute;
  z-index: 1;
  max-width: 280px;
	width: 32%;
  bottom: 80px;
  right: 0;
}
.phone-video{
	max-width: 230px; 
	width: 83%;
	border-bottom-left-radius: 35px; 
	border-bottom-right-radius: 35px; 
	bottom: 15px; 
	right: 22px; 
	position: absolute;
}

.postid-29 .page-content .hero {
  margin: -40px 0 80px;
  position: relative;
  z-index: 999;
}

/* .postid-29 .page-content .hero img {
  max-width: 1200px;
} */

.shack-feature-1-creative video, .shack-feature-2-creative video {
  outline: 3px solid #f5f5f3;
  outline-offset: -2px;
  width: 100%;
}
.shack-feature-1-content, .shack-feature-2-content{
	margin-top: 60px
}


.postid-29 .page-content h2{max-width: 580px}


.postid-29 .page-content .container, .postid-29 .post-content .container{max-width: 820px}


.postid-1326 .cta.more .portfolio .feature img {
  padding: 50px 0 0;
  max-width: 500px;
}


/* .postid-1473 .status{background: #355292} */
.postid-1473 .page-content{background: #E75625 !important}
.postid-1473 .page-content h6{color: #511F17}
.postid-1473 .page-content h2{color: #511F17; max-width: 1000px !important}
.postid-1473 .page-content h4{color: #511F17}

.postid-1473 .page-content .container, .postid-1473 .post-content .container{max-width: 850px}
	
.prestige .swiper-pagination{display: none; bottom: -50px !important}

/* .prestige .swiper-button-prev{display: none}
.prestige .swiper-button-next{cursor: url('images/prestige-icon-arrow.svg'), pointer; top: 0px !important; bottom: 0 !important; right: auto !important; left: 0 !important; background: none !important; height: 100% !important; width: 100% !important}
 */

.prestige .swiper-button-next{
bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
}
.prestige .swiper-button-prev{
    left: auto;
    right: 60px;
}


.prestige-mobile img{width: 50%}

.postid-1326 .page-content .hero{margin: -40px 0 80px; position: relative; z-index: 999}
.postid-1326 .page-content blockquote{max-width:1000px}



.class{position: fixed; bottom: 0; z-index: 2; width: calc(100% - 140px); padding: 20px; background: #fff; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 35px rgba(0,0,0,0.05)}
.class h6{margin: 0; font: normal 12px/22px 'Avenir LT Std 45 Book'}
.class p{padding: 0; font: 20px/32px 'Avenir LT Std 65 Medium'}
.class .button{font: 16px/62px 'Avenir LT Std 85 Heavy'; height: 62px; background: #670BFF; color: #fff; letter-spacing: 1px; cursor: pointer; transition: .5s; display: block; text-decoration: none; text-align: center; min-width: 240px; border-radius: 12px}
.class .button:after{display: none}
.price{padding-right: 20px}
.date-time, .location{border-left: 1px solid #ccc; padding-left: 20px}
del{opacity: 0.5}

.planner form ul li#field_3_8, .planner form ul li#field_3_9, .planner form ul li#field_3_36, .planner form ul li#field_3_37, .planner form ul li#field_3_38, .planner form ul li#field_3_39, .planner form ul li#field_3_18{width: 100%}


.planner form ul li#field_3_8, .planner form ul li#field_3_39{margin: 0}

.planner form ul li#field_3_9 .gfield_label, .planner form ul li#field_3_37 .gfield_label{display: none}

/* .planner form ul li#field_3_9 #input_3_9 li, .planner form ul li#field_3_9 #input_3_37 li, .planner form ul li#field_3_9 #input_3_38 li{width: 100%}
	.planner form ul li#field_3_9 #input_3_9 li label, .planner form ul li#field_3_37 #input_3_37 li label, .planner form ul li#field_3_38 #input_3_38 li label{width: calc(100% - 85px)} */

.planner form ul li#field_3_9 #input_3_9 li, .planner form ul li#field_3_37 #input_3_37 li, .planner form ul li#field_3_38 #input_3_38 li{width: 100%; float: none; margin: 0 0 10px; clear: none}

.planner form ul li#field_3_9 #input_3_9 li input, .planner form ul li#field_3_37 #input_3_37 li input, .planner form ul li#field_3_38 #input_3_38 li input{display: none}
.planner form ul li#field_3_9 #input_3_9 li label, .planner form ul li#field_3_37 #input_3_37 li label, .planner form ul li#field_3_38 #input_3_38 li label{position: relative; top: 0; left: 0; height: 50px; border: 2px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; margin: 0 10px 0 0; border-radius: 12px; color: #999; cursor: pointer; background: #fff url(images/icon-tick.svg) 10px 10px no-repeat; width: calc(100% - 65px)}

.planner form ul li#field_3_37 #input_3_37 li label{width: auto}

.planner form ul li#field_3_9 input:checked + label, 
.planner form ul li#field_3_37 input:checked + label, 
.planner form ul li#field_3_38 input:checked + label{background: #24BADF url(images/icon-tick-white.svg) 10px 10px no-repeat !important; border: 2px solid #24BADF !important; color: #fff !important}

.planner form #input_3_37 li{width: auto !important; float: left !important}
#input_3_18, #input_3_36, #input_3_38{height: 160px; line-height: 26px; padding: 20px 2.5%}

.view{color: #fff !important; text-decoration: none; background: #24BADF; padding: 0 15px; height: 40px; display: inline-block; right: 4px; border-radius: 8px; top: 5px; line-height: 44px; position: absolute !important; font-size: 12px}

.view:after{display: none}

.gchoice_3_9_4 .view{opacity: 0}


@media(max-width: 1199px){
.class .button{min-width: 120px}
}
@media(max-width: 999px){
	.class{width: calc(100% - 40px)}
	.date-time, .location{display: none}
	.class .button{min-width: 200px}
	#input_3_9 span{display: none}
}

html{-webkit-text-size-adjust: 100%}

*{margin: 0; padding: 0; outline: 0}
img{max-width: 100%; display: block; height: auto; margin: 0 auto}

::selection, ::-moz-selection{background: #31c6e6; color: #fff}

video{max-width: 100%}

body{background: #f2f2f2; letter-spacing: 0.5px; color: #333; font: 18px/32px 'Avenir LT Std 35 Light'}
body.disable{overflow: hidden}

h1{font:900 74px/98px 'Avenir LT Std 85 Heavy'; color: #333; margin: 0 0 20px}
h2{font: 900 28px/40px 'Avenir LT Std 85 Heavy'; color: #333; margin: 0 0 20px; transition: 0.5s}
h3{font: normal 22px/36px 'Avenir LT Std 65 Medium'; margin: 0 0 20px; color: #333; transition: 0.5s}
h4{font: normal 22px/36px 'Avenir LT Std 35 Light'; margin: 0 0 20px}
h5{font: normal 14px/24px 'Avenir LT Std 85 Heavy'; margin: 0 0 5px; text-transform: uppercase; color: #333; letter-spacing: 0.5px; transition: 0.5s}
h6{font: normal 12px/22px 'Avenir LT Std 85 Heavy'; margin: 0 0 10px; color: #666}
p{font: 18px/32px 'Avenir LT Std 35 Light'; color: #333; padding: 0 0 20px}

strong{font: normal 18px/32px 'Avenir LT Std 85 Heavy'}
em{font-style: normal}


.preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #222127; z-index: 5}

.badge{position: absolute; z-index: 1; top: 0; right: 0; text-align: center; line-height: 200px; left: 0; bottom: 0; width: 200px; height: 200px; margin: auto}

.design{background: url(images/decade-of-design.svg) center center no-repeat; animation: revolve 30s infinite linear; display: block; height: 200px; width: 200px}

.years{position: absolute; font: 900 60px/195px 'Avenir LT Std 85 Heavy'; color: #fff; left: 0; right: 0}

@keyframes revolve {

0% {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
}

.postid-870 .step-in-right{margin-right: 0 !important; margin-top: 20px !important}

.postid-870 .page-content .hero{margin: 0; padding: 0 0 100px}
.postid-870 header{background: #1b1c1e}
.postid-870 nav .menu, .postid-870 .cta{background: #1b1c1e}

.ww-image{float: right; width: 55%; margin: 40px 0 0; position: relative; z-index: 1}
.ww-container{max-width: 1100px; margin: 0 auto; padding: 0 40px}
.ww-content{float: left; width: 40%; margin: 260px 0 0}

.ws-image{float: left; width: 55%; margin: -50px 0 40px}
.ws-container{max-width: 1200px; margin: 0 auto; padding: 0 40px}
.ws-content{float: right; width: 40%; margin: 220px 0 0}

.wl-image{float: right; width: 50%; margin: -50px -50px 0 0}
.wl-container{max-width: 1100px; margin: 0 auto; padding: 0 40px}
.wl-content{float: left; width: 45%; margin: 40px 0 0}

.wv-container{background: #fff; position: relative; margin: 0 0 -10px}
.wv-tablet{margin: -10px 0 0}
.wv-video{position: absolute; max-width: 868px; left: 0; top: 12%; border-radius: 12px; width: 72.5%; right: 0; margin: 0 auto}

.wv-hands{position: absolute; z-index: 2}
.wv-wrapper{max-width: 1200px; margin: 0 auto; position: relative}

.live{position: absolute; background: #fff; padding: 10px 10px 0; width: 60px; right: 15%; top: 4%}
.live .pulse{position: relative; float: left}
.live .default{height: 10px; width: 10px; background: #39E11F; border-radius: 10px; border: 1px solid #fff; position: relative; z-index: 1}
.live .transition{width: 30px; height: 30px; position: absolute; top: -9px; left: -9px; background: #39E11F}
.live h6{color: #39E11F; float: right; font: normal 14px/14px 'Avenir LT Std 85 Heavy'}


@media(max-width: 1299px){
	.ws-image{margin: 100px 0 40px}
	.ww-content{margin: 180px 0 0}
	.ws-content{margin: 300px 0 0}
}
@media(max-width: 1099px){
	.ww-content{margin: 100px 0 0}
	.ws-image{margin: 50px 0 40px}
	.ws-content{margin: 120px 0 0}
	.wl-image{margin: 30px -20px 0 0}
}
@media(max-width: 768px){
	.ww-content{width: 100%}
	.ww-image{width: 100%; max-width: 650px}
	.ws-image{width: 100%}
	.ws-content{margin: 0px 0 60px; width: 100%}
	.wl-image{width: 100%; max-width: 600px; margin: 0 auto; float: none}
	.wl-content{width: 100%; margin: 40px 0}
	
	.wv-hands{display: none}
	.wv-tablet{padding-bottom: 50px}
	
/* 	.live h6{font: normal 12px/14px 'Avenir LT Std 85 Heavy'} */
	
}
@media(max-width: 499px){
	.ww-container, .ws-container, .wl-container{padding: 0 20px}
	.ww-content{margin: 50px 0 0}
	.ww-image{margin: 0}
/* 	.wv-video{top: 12.75%} */
	
	.wv-tablet{padding-bottom: 40px; visibility: hidden}
	.wv-video{width: 90%; border-radius: 10px}
	.wv-container{margin: -50px 0 0}
	.postid-1062 .wv-container{margin: 0; padding: 0 0 50px}
	
	.wl-image img{max-width: 160%; margin: 0 0 0 -30px}
	.live{right: 0; top: 5.5%}
	
	.ws-image img{max-width: 200%; margin: -80px 0 0 -200px}
	
	.hero img{max-width: 145%; margin: 0 0 0 -120px}
	
	.postid-1326 .hero img{max-width: 180%; margin: 0 0 0 -20px}
	.postid-29 .hero img{max-width: 180%; margin: 0 0 0 -20px}

}

.postid-1062 header{background: #101820}
.postid-1062 nav .menu, .postid-1062 .cta{background: #101820}

.postid-1062 .page-content .container, .post-content .container{max-width: 800px}
.postid-1062 .page-content .hero{margin: -20px auto 0; max-width: 1200px}
.postid-1062 .page-content h2{max-width: 500px}

.postid-1062 .page-content h6{color: #333}
.postid-1062 .page-content .status{background: #101820; color: #a2fecc}

.postid-1062 .cta.more .wp-post-image{max-width: 400px; margin: 80px auto 0}

.first-brand-section{background: #101820; display: flex; flex-direction: row-reverse; align-items: center; color: #fff !important}
.first-brand-animation{width: 50%}
.first-brand-content{width: calc(50% - 120px); padding: 60px; max-width: 600px; position: absolute; left: 0}

.first-staff-section{display: flex; align-items: center; background: #f5f4ef}
.first-staff-animation{width: calc(50% - 100px); padding: 50px; background: #fff}
.first-staff-content{width: calc(50% - 120px); padding: 60px; max-width: 600px}

@media(max-width: 999px){
	
	.first-brand-content{width: calc(50% - 60px); padding: 30px}
	
	.first-staff-section{background: #fff}
	.first-staff-animation{width: calc(50% - 40px); padding: 20px}
	.first-staff-content{background: #f5f4ef; width: calc(50% - 60px); padding: 30px}
	
	.prestige .swiper-pagination{display: block}

	
}

@media(max-width: 699px){
	.first-brand-section, .first-staff-section{display: grid}
	.first-brand-animation{width: 100%}
	.first-brand-content{width: calc(100% - 60px); position: relative}
	.first-staff-animation{width: calc(100% - 40px)}
	.first-staff-content{width: calc(100% - 60px)}
	
	.first-mobile{max-width: 700px; margin-left: -50px}
	
}

.status{background: #670BFF; padding: 2px 15px 0; border-radius: 6px; color: #fff; margin: 0 2px; display: inline-block; line-height: 30px}

.cost{background: #670BFF; /*background: #31c6e6;*/ padding: 2px 15px 0; border-radius: 6px; color: #fff; margin: 0 2px; display: inline-block; line-height: 30px; letter-spacing: 1px}

.post-content{margin-bottom: 0 !important; padding: 0 0 20px; background: #f7f7f7}
.post-content:after{content: ''; display: block; clear: both}

.post-content .elevator{height: 60vh}

.page-content{overflow: hidden}
.page-content .container, .post-content .container{width: auto; max-width: 900px; margin: 0 auto; padding: 0 40px}

.post-content .container h2{max-width: 740px}

.page-content h6 span:last-of-type{display: none}

.page-content .container .tags a, .post-content .container .tags a{text-decoration: none; color: #333}
.page-content .container .tags a:after, .post-content .container .tags a:after{display: none}

.page-content .hero{margin: -50px 0}
.page-content h2{max-width: 690px}

.postid-795 .page-content h2{max-width: 600px}

.postid-795 .page-content .hero{background: #2c3e50}
.postid-795 .page-content .hero img{position: relative; z-index: 1}

.postid-795 .panel{clear: both}
.postid-795 .panel:nth-of-type(2){background: #f2f2f2; padding: 150px 0 100px !important; padding-bottom: 0px; margin: -150px 0 0}

.postid-795 .panel.half img{float: left; max-width: 50%}



.page-content a, .post-content a, .bio a, .process a{color: #31c6e6; text-decoration: none; position: relative}
.page-content a:after, .post-content a:after, .bio a:after, .process a:after{background: #31c6e6; content: ''; position: absolute; display: block; height: 1px; width:0%; bottom: 0; left: 0; transition: 0.5s}
.page-content a:hover:after, .post-content a:hover:after, .bio a:hover:after, .process a:hover:after{width:100%; transition: 0.5s}


.page-content ul, .page-content ol, .post-content ul, .post-content ol{padding: 0 0 40px 40px}
.page-content h3, .post-content h3{padding-top: 20px}

.all article{float: left; width: calc(25% - 20px); margin: 20px 10px 0}


.page-content blockquote{padding: 100px 0; text-align: center; max-width: 650px; margin: 0 auto}
.page-content cite{font: 14px/28px 'Avenir LT Std 85 Heavy'; text-transform: uppercase; letter-spacing: 0.5px; color: #333; margin: 0 0 -20px; display: block}
.page-content blockquote .link{margin: 20px auto 0}

.post-content blockquote:before{content: ''; display: block; height: 1px; width: 150px; background: #333; margin: 60px auto 40px}
.post-content blockquote:after{content: ''; display: block; height: 1px; width: 150px; background: #333; margin: 40px auto 60px}

.post-content blockquote{text-align: center; max-width: 750px; margin: 0 auto}
.post-content blockquote p{font: 300 20px/36px 'Avenir LT Std 45 Book'; letter-spacing: 0.5px}

.post-content blockquote cite{font: 14px/28px 'Avenir LT Std 45 Book'; text-transform: uppercase; margin: 10px 0 -20px; display: block; color: #aaa}


label{position: absolute; top: -10px; left: 15px; background: #fff; font: 14px/14px 'Avenir LT Std 45 Book'; padding: 5px}

input[type=text], input[type=tel], input[type=email], input[type=button], input[type=submit], select, textarea{-webkit-appearance: none; -moz-appearance: none; border-radius: 0; width:95%; padding: 0 2.5%; font:20px/60px 'Avenir LT Std 45 Book'; letter-spacing: 0.5px; height:60px; margin: 0 0 10px; border:0; border: 2px solid #333; background: #fff; transition: 0.5s; border-radius: 12px}

/* input:focus, select:focus, textarea:focus{border:1px solid #424142; transition: 0.5s} */

input[type=submit]{font:16px/52px 'Avenir LT Std 85 Heavy'; height: 52px; border: 0; background:#333; color: #fff; width: 100%; padding: 0; letter-spacing: .5px; cursor: pointer; transition: .5s}
/* input[type=submit]:hover{box-shadow: inset 300px 0 0 0 #31c6e6; color: #fff; transition: .5s} */

.wrapper{max-width: 1920px; margin: 0 auto; position: relative}

header{position: fixed; z-index: 4; height: 100vh; width: 100px; background: #222127; text-align: center; overflow: hidden; border-right: 1px solid #2a2a2a; top: 0}
header .logo{position: absolute; left:0; right: 0; top: 20px; z-index: 1}
header button{position: absolute; left:0; right: 0; bottom: 0; z-index: 4}

.social{position: absolute; bottom: 0; right: 20px; font: 16px/32px 'Avenir LT Std 35 Light' }
.social ul{list-style: none}
.social ul li{float: left; padding: 30px 0}
.social ul li a{color: #fff; opacity: 0.2; text-decoration: none; height: 40px; line-height: 40px; display: block; padding: 0 25px 0 35px; transition: .5s}
.social ul li a:hover{opacity: 1; transition: .5s}

.social ul li a.linkedin{background: url(images/icon-linkedin.svg) 0 3px no-repeat}
.social ul li a.twitter{background: url(images/icon-twitter.svg) 0 3px no-repeat}
.social ul li a.instagram{background: url(images/icon-instagram.svg) 0 3px no-repeat}

.wrap{width: calc(100% - 100px); background: #fff; height: 100vh; position: relative}

nav{position: fixed; z-index: 3; width: calc(100% - 100px); margin-left: 100px; max-width: 1920px; height: 100vh; background: #f2f2f2; opacity: 0; visibility: hidden; transition: 0.5s ease; -webkit-transition-delay: 1s; transition-delay: 1s}
nav.reveal{opacity: 1; visibility: visible; transition: 0.5s ease}
nav .column{width: 50%; float: left; height: 100%; display: flex; align-items: center}
nav .menu{background: #222127}
nav .menu .container{width: calc(100% - 100px); padding: 0 50px}

nav .other{background: #fff}
nav .other .feature-posts{height: 80%}
nav .other .feature-posts article{border-bottom: 1px solid #f2f2f2; height: 50%; margin-top: -5%; border-radius: 0; box-shadow: none; border: 0}
nav .other .feature-posts article:nth-of-type(2){border-bottom: 0; margin-top: 5%}
nav .other .feature-posts article a{display: flex; height: 100%; align-items: center}

nav .column ul{list-style: none}
nav .column ul li a{text-decoration: none; color: #fff; font:900 55px/75px 'Avenir LT Std 85 Heavy'; letter-spacing: 0.5px; opacity: 0.1; display: block; /*width: 100%;*/ float: left; clear: both; transition: .25s ease}
nav .column ul li:last-child a{opacity: 1}

nav .column ul li a:hover{transform: scale(1.3) translateX(30px); opacity: 1; transition: .25s ease}
nav .column ul li:last-child a:hover{transform: none}


.home nav .column ul li.link-home a{opacity: 1}
.page-template-page-about nav .column ul li.link-about a{opacity: 1}

.category-work nav .column ul li.link-work a{opacity: 1}
.post-template-single-work nav .column ul li.link-work a{opacity: 1}

.category-blog nav .column ul li.link-blog a{opacity: 1}
.post-template-single-blog nav .column ul li.link-blog a{opacity: 1}

.page-template-page-contact nav .column ul li.link-contact a{opacity: 1}
.page-template-page-planner nav .column ul li.link-planner a{opacity: 1}

.tagline{position: absolute; transform: rotate(270deg); width: 100vh; display: block; top: 0; bottom: 0; left: 34px; opacity: .75; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; color: #fff}
.tagline span{height: 1px; width: 60px; background: #fff; display: inline-block; margin: 0 10px 3px}

main{margin-left: 100px; margin-bottom: 450px; position: relative; z-index: 2; background: #fff}
main:after{display: block; content: ''; clear: both}
/*main img{display: block}*/


.projects{background: #fff; position: relative; overflow: hidden}

.elevator{height: 100vh; display: flex; align-items: center; width: 100%; background: #222127; color: #fff; position: relative}
.elevator .container{width: calc(100% - 120px); padding: 0 60px; position: relative}
.elevator h1{color: #fff}


.home .swiper-container{padding: 0 40px 30px !important}

@media(max-width: 499px){
	.home .swiper-container{padding: 0 0 30px !important}
}


.swiper-button-prev{top: auto !important; bottom: 0; background: #f7f7f7 url(images/icon-prev.svg) center center no-repeat !important; height: 60px !important; width: 60px !important}

.swiper-button-next{top: auto !important; bottom: 0; right: auto !important; left: 80px !important; background: #f7f7f7 url(images/icon-next.svg) center center no-repeat !important; height: 60px !important; width: 60px !important}

/*.swiper-button-prev{right: auto !important; left: 80px !important}*/

.process .swiper-pagination{display: none}
.process .swiper-pagination-bullet{height: 12px; width: 12px}
.process .swiper-pagination .swiper-pagination-bullet-active{background: #31c6e6}


.page-template-page-about .elevator{background: #222127 url(https://www.philbossdesign.com.au/wp-content/uploads/about-background-desktop-phillip-peet.jpg) top right / cover no-repeat}

.page-template-page-about .bio{background: #f7f7f7; padding: 0 40px}
.page-template-page-about .bio .container{max-width: 1200px; margin: 0 auto; padding: 100px 0}
.page-template-page-about .bio .container section{float: left; width: 35%; margin: 10px 0 0 5%}
.page-template-page-about .bio .container section:nth-of-type(1){width: 20%; margin: 0}

.page-template-page-about .process{padding: 0 40px}
.page-template-page-about .process .container{max-width: 1000px; margin: 0 auto; padding: 120px 0}

.stage-content{float: left; width: 35%; margin: 60px 0 0}
.stage-image{float: right; width: 60%}

.page-template-page-about .services{background: #222127; padding: 0 40px}
.page-template-page-about .services .container{max-width: 1000px; margin: 0 auto; padding: 120px 0}
.page-template-page-about .services .container section{float: left; width: 45%; margin: 0 2.5%}
.page-template-page-about .services .container section ul{list-style: none; margin-left: -10px}
.page-template-page-about .services .container section ul li{background: url(images/icon-tick.svg) top left no-repeat; padding: 0 0 0 40px; color: #888}
.page-template-page-about .services .container section:nth-of-type(2) ul li{background: url(images/icon-cross.svg) top left no-repeat; padding: 0 0 0 40px}

.page-template-page-about .services h2{color: #fff; margin: 0}
.page-template-page-about .services h5{color: #fff; margin: 0 0 20px}

.page-template-page-about .gallery img{float: left}
.page-template-page-about .gallery .one-third{width:33.33%}
.page-template-page-about .gallery .two-third{width:66.66%}
.page-template-page-about .gallery .half{width:50%}

.page-template-page-about .gallery .panel:after{content: ''; display: block; clear: both}

.page-template-page-about .traits{background: #f7f7f7; padding: 0 40px; clear: both}
.page-template-page-about .traits .container{max-width: 1400px; margin: 0 auto; padding: 180px 0 120px}
.traits h5{margin: 15px 0 -10px}

.page-template-page-about .traits .container ul{list-style: none}
.page-template-page-about .traits .container ul li{float: left; width: 31.33%; margin: 0 1% 60px}

.page-template-page-about .traits .container ul li .emoji-icon{float: left; width: 20%}
.page-template-page-about .traits .container ul li .emoji-title{float: right; width: 75%}

.page-template-page-contact{height: 100vh; overflow: hidden; background: #fff}

.page-template-page-contact .page-content{margin-bottom: 0}

.info{height: 100vh; display: flex; align-items: center}
.info .container{width: calc(100% - 120px); max-width: 800px; padding: 0 60px; margin:0; position: relative}
.info h6{padding-left: 20px}

.availability{position: absolute; top: 4px}
.availability .default{width: 10px; height: 10px; position: relative; background: #8ab775; border: 1px solid #f7f7f7; border-radius: 50%; z-index: 1; display: block}

.transition{width: 20px; height: 20px; position:absolute; top:-4px; left: -4px; display:block; background:#8ab775; border-radius:50%; opacity:0; animation:pulse 2400ms ease-out infinite}

@keyframes pulse{
    0%{transform:scale(0.1); -ms-transform:scale(0.1); -webkit-transform:scale(0.1); opacity:0}
    50%{opacity:0.8}
    100%{transform:scale(1.2);-ms-transform:scale(1.2);-webkit-transform:scale(1.2);opacity:0}
}
/* 
.photo{float: right; width: 50%; height: 100vh; background: url(uploads/contact-office-phil-background.jpg) top left / cover no-repeat} */


.page-template-default:not(.home) main{margin-bottom: 0; padding: 150px 0}

.error404{background: #222127}
.error404 main{margin-bottom: 0}
.error404 main .elevator p{max-width: 900px; color: #aaa}
.error404 main a{color: #31c6e6; text-decoration: none; position: relative}
.error404 main a:after{background: #31c6e6; content: ''; position: absolute; display: block; height: 1px; width:0%; bottom: 0; left: 0; transition: 0.5s}
.error404 main a:hover:after{width:100%; transition: 0.5s}


.page-template-page-planner{background: #f7f7f7}
.page-template-page-planner .page-content{margin-bottom: 0}
.page-template-page-planner main{background: #f7f7f7}
/*.planner{height: 100vh; display: flex; align-items: center}*/
.planner{padding: 100px 60px 20px}

/*.planner .container{width: calc(100% - 120px); max-width: 1000px; padding: 60px; position: relative; background: #fff; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05)}*/
.planner .container{padding: 60px; background: #fff; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.05)}

.planner .container:after{content: ""; position: absolute; border-style: solid; border-color: #f0f0f0 #f7f7f7; border-width: 0 40px 40px 0; top: 0; right: 0}

.planner form{margin: 40px 0 0}
.planner form h2{margin: -40px 0 80px; max-width: 100%}

.planner form ul{list-style: none; padding: 0}

.planner form ul li:first-child{width: 100%; float: none}

.planner form ul li{position: relative; float: left; width: 48%; margin: 0 0 40px}
.planner form ul li:nth-child(odd){float: right}

.planner form .gform_body{min-height: 350px}
.planner form .gform_body:after{clear: both; content: ''; display: block}

/*.gform_page_footer{position: fixed; bottom: 0; width: 100%; max-width: 1000px; background: red; padding: 20px 0}*/

.gform_page_footer:after{clear: both; content: ''; display: block}


.gform_page_footer input[type=button]{font: 16px/62px 'Avenir LT Std 85 Heavy'; height: 62px; border: 0; background: #670BFF; color: #fff !important; width: 100%; padding: 0; margin: 40px auto 20px; letter-spacing: 0.5px; cursor: pointer; transition: .5s; display: inline-block; text-decoration: none; text-align: center; max-width: 280px; float: right; border-radius: 12px}
/* .gform_page_footer input[type=button]:hover{box-shadow: inset 300px 0 0 0 #31c6e6; color: #fff; transition: .5s} */

.gform_page_footer input[type=submit]{font: 16px/62px 'Avenir LT Std 85 Heavy'; height: 62px; border: 0; background: #670BFF; color: #fff !important; width: 100%; padding: 0; margin: 40px auto; letter-spacing: 0.5px; cursor: pointer; transition: .5s; display: inline-block; text-decoration: none; text-align: center; max-width: 280px; float: right; border-radius: 12px}
/* .gform_page_footer input[type=submit]:hover{box-shadow: inset 300px 0 0 0 #31c6e6; color: #fff; transition: .5s} */

.gform_page_footer input[type=button].gform_previous_button, .gform_page_footer input[type=button].gform_previous_button:hover{float: left; background: #f2f2f2;  color: #ccc !important; box-shadow: none}


@media(max-width: 767px){
	.gform_page_footer input[type=button].gform_previous_button, .gform_page_footer input[type=button].gform_previous_button:hover, .gform_page_footer input[type=submit], .gform_page_footer input[type="button"]{float: none; max-width: 100%; margin: 0 0 20px}

	
}

.newsletter .gform_ajax_spinner{display: none}
.gform_ajax_spinner{position: absolute; top: 50px; right: 50px; opacity: 0.5}


.gf_progressbar_wrapper{position: relative}
.gf_progressbar_title{display: none}

.gf_progressbar{background: #eee; height: 4px; position: absolute; width: 100%; max-width: 600px; top: 30px}

.gf_progressbar_percentage{background: #aaa; height: 4px; border-radius: 4px; border: 2px solid #fff; margin: -2px 0 0}

.gf_progressbar span{display: none}

.hidden_sub_label{display: none}


.planner form ul li#field_1_8{width: 100%; float: none; margin: 0; clear: both}
.planner form ul li#field_1_9{width: 100%; float: none}
.planner form ul li#field_1_9:after{clear: both; content: ''; display: block}

.planner form ul li#field_1_9 .gfield_label{display: none}
.planner form ul li#field_1_9 #input_1_9 li{width: auto; float: left; margin: 0 0 10px; clear: none}
.planner form ul li#field_1_9 #input_1_9 li input{display: none}
.planner form ul li#field_1_9 #input_1_9 li label{position: relative; top: 0; left: 0; height: 50px; border: 2px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; margin: 0 10px 0 0; border-radius: 12px; color: #999; cursor: pointer; background: #fff url(images/icon-tick.svg) 10px 10px no-repeat}

.planner form ul li#field_1_9 input:checked + label{background: #24BADF url(images/icon-tick-white.svg) 10px 10px no-repeat !important; border: 1px solid #24BADF !important; color: #fff !important}


.planner form ul li#field_1_11{width: 100%; float: none; margin: 0}
.planner form ul li#field_1_12{width: 100%; float: none; max-width: 800px}
.planner form ul li#field_1_12:after{clear: both; content: ''; display: block}

.planner form ul li#field_1_12 .gfield_label{display: none}
.planner form ul li#field_1_12 #input_1_12 li{width: auto; float: left; margin: 0 0 10px; clear: none}
.planner form ul li#field_1_12 #input_1_12 li input{display: none}
.planner form ul li#field_1_12 #input_1_12 li label{position: relative; top: 0; left: 0; height: 50px; border: 2px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; margin: 0 10px 0 0; border-radius: 12px; color: #999; cursor: pointer; background: #fff url(images/icon-tick.svg) 10px 10px no-repeat}

.planner form ul li#field_1_12 input:checked + label{background: #24BADF url(images/icon-tick-white.svg) 10px 10px no-repeat !important; border: 1px solid #24BADF !important; color: #fff !important}

/*.planner form ul li#field_1_13{float: none}*/

.planner form ul li#field_1_15 .gfield_label{display: none}
.planner form ul li#field_1_15{width: 100%; float: none; cursor: pointer}
.planner form ul li#field_1_15:after{clear: both; content: ''; display: block}

.planner form ul li#field_1_15 #input_1_15 li{width: 50%; float: left; margin: 0 0 10px}
.planner form ul li#field_1_15 #input_1_15 li input{display: none; position: absolute; height: 50px; width: 50%}
.planner form ul li#field_1_15 #input_1_15 li label{position: relative; top: 0; left: 0; height: 50px; border: 1px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #999; cursor: pointer; background: #fff url(images/icon-tick.svg) 10px 10px no-repeat; width: calc(100% - 65px); border-right: 0}

.planner form ul li#field_1_15 #input_1_15 li:last-child label{border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left: 0; border-right: 1px solid}

.planner form ul li#field_1_15 input:checked + label{background: #24BADF url(images/icon-tick-white.svg) 10px 10px no-repeat !important; border: 1px solid #24BADF !important; color: #fff !important}


.planner form ul li#field_1_16, .planner form ul li#field_1_17, .planner form ul li#field_1_19{float: none; width: 100%; clear: both}

.planner form ul li#field_1_18{float: none; width: 100%; clear: both}

.planner form ul li#field_1_18 textarea{height: 200px; padding: 25px 2.5%; font: 20px/36px 'Avenir LT Std 35 Light'; width: 95%}


#field_1_19{border: 2px dashed #ccc; text-align: center; cursor: pointer; border-radius: 12px}
#field_1_19:after{content: ''; clear: both; display: block}

#gform_browse_button_1_19{width: 100%; height: 100px; margin: 0 0 -20px; opacity: 0; cursor: pointer}
.gform_drop_instructions{position: absolute; left: 0; right: 0; top: 35px; color: #999}
.gform_drop_instructions:after{content: 'or click to select'}


.gform_fileupload_multifile{overflow: hidden}

.planner form .validation_message ul li{float: none; width: 100%; font-size: 12px;  margin: 0}


#gform_preview_1_19{margin: 0 0 20px}
#gform_preview_1_19:after{content: ''; clear: both; display: block}

.gform_delete{display: inline; position: relative; top: 3px}
#gform_preview_1_19 strong{font-size: 12px; display: inline; padding: 0 0 0 5px}


.planner form ul li#field_1_22{width: 100%; float: none; margin: 0 0 10px}
.planner form ul li#field_1_23{width: 100%; float: none; margin: 100px 0}
.planner form ul li#field_1_23 label{display: none}

.planner form ul li#field_1_23:after{content: ''; position: absolute;  top: -30px; left: 0; right: 0; text-align: center; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #f7f7f7; width: 0; height: 0; margin: 0 auto}

.planner form ul li#field_1_28{width: 100%; float: none; margin: 0 0 10px}
.planner form ul li#field_1_29{width: 100%; float: none; margin: 100px 0}

.planner form ul li#field_1_29 label{display: none}

.planner form ul li#field_1_29:after{content: ''; position: absolute;  top: -30px; left: 0; right: 0; text-align: center; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #f7f7f7; width: 0; height: 0; margin: 0 auto}


.rangeslider--horizontal{width: 100% !important; height: 4px !important; box-shadow: none !important}
.rangeslider__fill{background: #24BADF !important; box-shadow: none !important}

.rangeslider--horizontal .rangeslider__handle{top: -15px !important; background: #24badf !important; box-shadow: none !important; border: none !important}
.rangeslider--horizontal .rangeslider__handle:after{display: none}

.slider_prefix{position: absolute; left: 0; top: 50px; color: #ccc}
.slider_suffix{position: absolute; right: 0; top: 50px; color: #ccc}

.output:before{content: 'Approx. budget: $'}
.output{top: -90px; font: 18px/60px 'Avenir LT Std 35 Light' !important; width: 100%; text-align: center; padding: 0 !important; position: absolute; background: #f7f7f7; left: 0; right: 0; max-width: 300px; margin: 0 auto; height: 60px; border-radius: 30px}

#field_1_23 .output:after{content: ',000'}


.planner form ul li#field_1_24, .planner form ul li#field_1_30{width: 100%; float: none; margin: 0 0 10px}
.planner form ul li#field_1_25, .planner form ul li#field_1_31{width: 100%; float: none; margin: 0 0 40px}
.planner form ul li#field_1_25:after, .planner form ul li#field_1_31:after{content: ''; clear: both; display: block}


.planner form ul li#field_1_25 #input_1_25 li:first-child, .planner form ul li#field_1_31 #input_1_31 li:first-child{display: none}

.planner form ul li#field_1_25 label, .planner form ul li#field_1_31 label{display: none}
.planner form ul li#field_1_25 #input_1_25 li, .planner form ul li#field_1_31 #input_1_31 li{width: 50%; float: left; margin: 0 0 10px}
.planner form ul li#field_1_25 #input_1_25 li input, .planner form ul li#field_1_31 #input_1_31 li input{display: none; position: absolute; height: 50px; width: 50%}
.planner form ul li#field_1_25 #input_1_25 li label, .planner form ul li#field_1_31 #input_1_31 li label{position: relative; top: 0; left: 0; height: 50px; border: 2px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; color: #999; cursor: pointer; background: #fff url(images/icon-tick.svg) 10px 10px no-repeat; width: calc(100% - 65px); border-right: 0}

.planner form ul li#field_1_25 #input_1_25 li:last-child label, .planner form ul li#field_1_31 #input_1_31 li:last-child label{border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-right: 2px solid}

.planner form ul li#field_1_25 input:checked + label, .planner form ul li#field_1_31 input:checked + label{background: #24BADF url(images/icon-tick-white.svg) 10px 10px no-repeat !important; border: 2px solid #24BADF !important; color: #fff !important}


.planner form ul li#field_1_26, .planner form ul li#field_1_33{width: 100%; float: none; margin: 0 0 40px; clear: both}
.planner form ul li#field_1_26 select, .planner form ul li#field_1_33 select{width: 100%; background: url(images/icon-select.svg) right 8px no-repeat}

.planner form ul li#field_1_27, .planner form ul li#field_1_34{width: 100%; float: none; margin: 0 0 40px; clear: both}

.fineprint{text-align: center; padding: 0 0 50px}
.fineprint ul{list-style: none; padding: 0; margin: 0}
.fineprint ul li{display: inline}
.fineprint ul li a{font-size: 14px; text-decoration: none; color: #aaa}
.fineprint ul li a:after{display: none}

.validation_error{color: #f03; display: none}
.gfield_error label{color: #f03}
.gfield_error input, .gfield_error textarea{border: 2px solid #f03}
.gfield_error .validation_message{font-size: 14px; line-height: 20px; color: #f03; text-align: left; clear: both}


.gform_confirmation_message{text-align: center; max-width: 750px; margin: 0 auto 60px}
.gform_confirmation_message h2{max-width: 750px}
.gform_confirmation_message .success{width: 150px; margin: 80px auto 40px}

.gform_confirmation_message_2{font-size: 14px; margin: 10px auto 0}


.scroll-downs{position: absolute; right: 0; bottom:100px; left: -50px; margin: auto; width :36px; height: 55px; opacity: 0.2}
.scroll-downs .mousey{width: 1px; padding: 10px 17px 10px 15px; height: 35px; border: 1px solid #fff; border-radius: 25px}
.scroller{width: 4px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite}

@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; height: 5px }
  50% { transform: translateY(0); height: 15px; opacity: 1 }
  70% { transform: translateY(0); height: 15px; opacity: 1 }
  100% { transform: translateY(10px); height: 5px; opacity: 0 }
}

.container{width: 100%; position: relative}


.portfolio .step-in-right{margin-right: 50px}
.portfolio a:nth-of-type(1) .step-in-right{margin-right: 100px}

@media(max-width: 1199px){
	.portfolio a:nth-of-type(1) .step-in-right{margin-right: 50px}
}

.portfolio a{text-decoration: none; color: #222127; clear: both; display: block; position: relative; padding: 0 0 50px; transition: 0.5s}

.portfolio a:nth-child(even){background: #f7f7f7}
.portfolio a:nth-child(even) .excerpt{right: 0}
.portfolio a:nth-child(even) .feature{float: left}

.portfolio a:after{content:''; display: block; clear: both}

.feature{width: 65%; float: right}

.excerpt{width: 50%; margin: 25px 0 0; position: absolute}
.excerpt .inner{padding: 100% 0 0; transition: 0.5s}
.excerpt .inner .content{position: absolute; top: 0; max-width: 450px; bottom: 0; align-items: center; display: flex; padding: 0 150px}

.excerpt .inner .content h6 span:last-of-type{display: none}

.menu .arrow{color: #31c6e6}
.menu em:after, .menu .arrow:before, .menu .arrow:after{background: #31c6e6 !important}

.arrow{position: relative; font: 14px/32px 'Avenir LT Std 65 Medium'; color: #ccc; transition: 0.5s ease; letter-spacing: 1px}
.summary:hover .arrow, .excerpt:hover .arrow{color: #31c6e6}

em:after{height:2px; width:20px; display:block; content:''; background: #ccc; position: absolute; right:-30px; top:5px; transition: 0.5s ease}

.summary:hover em:after, .excerpt:hover em:after, .menu a:hover em:after{transform: translateX(10px); transition: 0.5s ease; background: #31c6e6}

.arrow:after{transform: rotate(135deg); height:2px; width:10px; display:block; content:''; background: #ccc; position: absolute; right:-33px; top:8px; transition: 0.5s ease}

.summary:hover .arrow:after, .excerpt:hover .arrow:after, .menu a:hover .arrow:after {transform: translateX(10px) rotate(135deg); transition: 0.5s ease; background: #31c6e6}

.arrow:before{transform: rotate(45deg); height:2px; width:10px; display:block; content:''; background: #ccc; position: absolute; right:-33px; top:2px; transition: 0.5s ease}

.summary:hover .arrow:before, .excerpt:hover .arrow:before, .menu a:hover .arrow:before{transform: translateX(10px) rotate(45deg); transition: 0.5s ease; background: #31c6e6}

.link{font:16px/62px 'Avenir LT Std 85 Heavy'; height: 62px; border: 0; background:#333; color: #fff !important; width: 100%; padding: 0; margin: 10px auto; letter-spacing: 1px; cursor: pointer; transition: .5s; display: inline-block; text-decoration: none; text-align: center; max-width: 280px; border-radius: 12px}
/* .link:hover{box-shadow: inset 300px 0 0 0 #31c6e6; color: #fff; transition: .5s} */
/* .link:hover{background: #31c6e6; color: #fff; transition: .5s} */
.link:hover{background: #670BFF; color: #fff; transition: .5s}

.link:after{display: none !important}

article{background: #fff; margin-bottom: 20px; transition: 0.5s; box-shadow: 0px 15px 15px rgba(0,0,0,0.05); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px}
article .mask img{border-top-left-radius: 8px; border-top-right-radius: 8px}

.category article{border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-right-radius: 8px; border-top-left-radius: 8px}
.category article .mask img{border-bottom-left-radius: 8px; border-top-right-radius: 0}

/*.page-content img{display: block; margin: 0 auto}*/

article a{text-decoration: none; color: #222127; transition: 0.5s; cursor: pointer}
article .summary{padding: 50px 30px}

article .summary h6{height: 32px; overflow: hidden}

.posts{background: #f7f7f7; padding: 40px 0 80px}
/* .posts .summary{border: 1px solid #f2f2f2; border-top: none} */

.posts .summary h2 {height: 80px; overflow: hidden}

.meta{margin: 0 0 40px}
.meta:after{content:''; clear: both; display: block}
.meta .profile{float: left; max-width: 60px}
.meta .profile img{border-radius: 60px}
.meta .author{float: left; padding: 10px 0 0 10px; font: 16px/20px 'Avenir LT Std 35 Light'}
.meta .author span{font: 12px/20px 'Avenir LT Std 35 Light'; display: block; opacity: 0.75}

.all{max-width: 1200px; margin: 0 auto; padding: 20px 60px}
.all article{width:100%; margin: 40px 0 0; display: flex}
.all article .mask{float: left; width: 40%}
.all article .summary{float: right; width: calc(60% - 80px); border: 0 !important; height: calc(60% - 80px)}
.all article .summary h2{height: auto}
.all article .summary p{height: 80px; overflow: hidden}

.all .arrow{position: absolute; bottom: 60px; line-height: 14px}

.all a:after{display: none}

.newsletter{background: #fff; text-align: center; padding: 100px 0; display: none}
.newsletter .container{padding: 0 50px; width: auto}

.newsletter form{width: 100%; max-width: 700px; margin: 0 auto}
.newsletter form ul{list-style: none}

.newsletter form .gform_body {float: left; width: 58%; margin: 0 1%; position: relative}
.newsletter form .gform_footer{width: 38%; float: right}


.container:after, .portfolio:after{content:''; clear:both; display: block}

.cta{position: fixed; bottom: 0; height: 450px; background: #222127; text-align: center; padding-left: 100px; width: calc(100% - 100px); max-width: 1820px; text-decoration: none}
.cta .container{padding: 70px; width: auto; max-width: 600px; margin: 0 auto}
.cta h5, .cta h2, .cta p{color: #fff}

.more .container{padding: 0 !important; max-width: 1000px}

.more .feature{width: 55%; margin: -20px 0 0}
.more .excerpt{width: 50%; margin: 0; height: 400px; text-align: left}

.more .inner .content{padding: 0}


.intro{background: #f7f7f7; padding: 80px 0 40px; position: relative}
.remainder{background: #fff; padding: 60px 0 40px; position: relative}


.gallery-columns-2 .gallery-item{width: 46% !important; padding: 2%}
.gallery img{border: 0 !important}

/* Portfolio - Shack */
.decor-container{position: absolute; width: 100%}
.decor-content{max-width: 1350px; margin: 0 auto; padding: 0 40px; position: relative}
.decor-inner{float: right; width: 38%; text-align: left; margin: -5% 0 0; position: relative; z-index: 1}
.decor-image{float: left; width: 60%}


/* Portfolio - Nerada Tea */
.pin{width: 60px; height: 60px; position: absolute; top: 231px; display: block; background: #ed961a; border-radius: 50%; opacity: 0; animation: pulsate 2400ms ease-out infinite; left: 266px}

@keyframes pulsate {
0% {transform: scale(0.1); -ms-transform: scale(0.1); -webkit-transform: scale(0.1); opacity: 0}
50% {opacity: 0.8}
100% {transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 0}
}

/* Portfolio - Emma */
.emma-intro{max-width:700px; margin:0 auto; padding:80px 20px 20px}
.emma-outer{max-width:1140px; margin:0 auto; padding: 0 20px}
.emma-left{float:left; width:35%; text-align:left; padding:180px 0 0}
.emma-right{float:right; width:65%}


@media(max-height:999px){
    .feature-posts .summary p{height: 80px; overflow: hidden}
}

@media(max-height:767px){

    nav .menu .container{margin: 0}
    nav .column ul li a{font: 900 36px/60px 'Avenir LT Std 85 Heavy'}

    nav .other .feature-posts article{height: 100%; border: 0}
    nav .other .feature-posts article:nth-child(2){display: none}

    .tagline{display: none}
	
	.postid-870 .step-in-right{margin: 20px auto !important}
    
}

@media(max-width:1920px){
    nav{background: #fff; width: 100%}
}

@media(max-width:1649px){
    .elevator h1{font:900 55px/75px 'Avenir LT Std 85 Heavy'}
    .error404 main .elevator p{max-width: 650px}
}

@media(max-width:1599px){

	.excerpt .inner .content{padding: 0 100px; max-width: 420px}
    
    .feature{width: 55%; margin: 50px 0 0}
    
    .post-contents article .summary{padding: 30px 20px}
    .post-contents .summary h2{height: 160px}
    
    .post-contents article .summary{padding: 40px}
    .all article .summary h2{height: auto}
/*    .all article{width: calc(33.33% - 20px)}*/
    
    .page-template-page-about .traits .container ul{margin: 0 auto; max-width: 1000px}
    .page-template-page-about .traits .container ul li{width: 46%; margin: 0 2% 60px}

}

@media(max-width:1399px){
    article .summary{padding: 40px 20px}
    .all article .summary{width: calc(60% - 40px)}
    
}

@media(max-width:1299px){
    .elevator h1{font:900 40px/60px 'Avenir LT Std 85 Heavy'}
    
}

@media(max-width:1199px){
    h1{font:900 55px/75px 'Avenir LT Std 85 Heavy'}
    h2{font:900 28px/40px 'Avenir LT Std 85 Heavy'}
    .post-contents .summary h2{height: 180px}
    .all article .summary h2{height: auto}
    .excerpt{width: 55%; margin: 0}
    .feature{width: 50%; margin: 70px 0 0}
    
    .all article .summary p{display: none}
    
    
    /* Portfolio - Shack */
    .decor-container{position: relative; margin-top: -120px}
    .decor-inner{float: none; width: 100%; text-align: center; max-width: 700px; margin: 0 auto; padding: 50px 0}
    .decor-content{padding: 0 20px}
    .decor-image{float: none; width: 100%}
    .shack-ui{max-width: 200%; left: -10%; position: relative}
    
    /* Portfolio - Nerada Tea */
    .pin{display:none}
    
}

@media(max-width:1099px){
    .process .swiper-container{padding: 0 0 60px}
    
    .page-template-page-about .elevator{background: #222127 url(https://www.philbossdesign.com.au/wp-content/uploads/about-background-tablet-phillip-peet.jpg) top right / cover no-repeat}
    
}

@media(max-width:999px){
    
    body{background:#fff}
    
	.excerpt .inner .content{padding: 0 50px}
	
    .page-content{padding: 100px 0 0; margin-bottom: 450px}
    
    .post-content{padding: 100px 0 20px}
	
	article .summary{padding: 20px}
	
    
    .page-template-page-contact{height: auto; overflow: scroll}
    .info{float: none; width: 100%; height: auto; padding: 100px 0}
    .info .container{width: 100%; max-width: 100%; padding: 0 40px}
    
/*     .photo{float: none; width: 100%; height: 150vh} */
    
    .planner{padding: 100px 40px 20px}
    .planner .container{padding: 40px}
    
    
/*    .block{display: block}*/
    
    header{transition: 0.5s; transition-delay: 1s}
    .disable header{background: rgba(0,0,0,0); transition: 0.5s}
    
    .hamburger{background: rgba(34,33,39,0); transition: 0.5s}
    .disable .hamburger{background: #222127; transition: 0.5s}
    
    .social{left: 30px; right: auto}
    
    .summary p{height: 80px; overflow: hidden}
    
    header{height: 100px; width:100%; background: rgba(34,33,39,0.98)}
    
    .page-template-page-about header{background: rgba(0,0,0,0.98)}
    .page-template-page-about header.open{background: #222127}
    
    header .logo{left: 15px; right: auto}
    
    header button{left: auto}
    
    .tagline{display: none}
    
    .elevator{height: 85vh}
    .elevator .container{width: calc(100% - 60px); padding: 0 30px}
    
    .scroll-downs{left: 0}
    
    nav{width: 100%; margin-left: 0}
    nav .menu .container{margin: -100px 0 0; width: calc(100% - 60px); padding: 0 30px}
    
    .wrap{width: 100%}
    
    .post-contents{padding: 0 0 0 20px}
    
    .all article{width: calc(100% - 20px)}
        
/*    .all{padding: 100px 10px 0}*/
    
    main{margin-left: 0}
    
    .category-work main{padding: 100px 0 0}
    
    .cta, .more{width: 100%; padding: 0}
/*    .cta .container{padding: 70px}*/
    
    .more .excerpt .inner .content{padding: 0 20px}
    
    .arrow{color: #31c6e6}
    em:after, .arrow:before, .arrow:after{background: #31c6e6}
    
    /* Portfolio - Shack */
    .shack-instagram{max-width: 150%; position: relative; left: -25%}
    
    /* Portfolio - Emma */
    .emma-intro{padding:40px 20px 20px}
	.emma-outer{padding: 80px 20px 0}
	.emma-left{float:none; width: 95%; text-align: center; padding: 0 2.5%; max-width: 600px; margin: 0 auto}
	.emma-right{float:none; width: 60%; margin: 0 auto}
    
    
    .page-template-page-about .elevator{background: #000 url(https://www.philbossdesign.com.au/wp-content/uploads/about-background-mobile-phillip-peet.jpg) bottom right / cover no-repeat}
    .page-template-page-about .elevator{background-position: 100% 80px}
    
    
    .page-template-page-about .bio .container section{width: 45%; margin: 50px 0 0 10%}
    .page-template-page-about .bio .container section:nth-of-type(1){width: 100%}
    .page-template-page-about .bio .container section:nth-of-type(2){margin-left: 0}
    
    .planner form h2{margin: -40px 0 20px}
    
    .gf_progressbar{display: none}
    
}

@media(max-width:899px){
    .all .arrow{bottom: 40px}
    /*    .all article{width: calc(50% - 20px)}*/
    .elevator h1{font: 900 32px/42px 'Avenir LT Std 85 Heavy'; letter-spacing: 0.5px}
    
    
    .page-template-page-about .traits{padding: 0 20px}
    .page-template-page-about .traits .container ul li{width: 48%; margin: 0 0 60px}
    .page-template-page-about .traits .container ul li:nth-of-type(even){float: right}
    
    .stage-image, .stage-content{float: none; width: 100%; margin: 20px 0 0}

    .process .swiper-button-next, .process .swiper-button-prev{display: none}
    .process .swiper-pagination{display: block}
    
    .page-template-page-about .services .container{padding: 120px 0 40px}
    .page-template-page-about .services .container section{float: none; width: 100%; margin: 0 0 80px}
    
    .planner form ul li#field_1_15 #input_1_15 li label{letter-spacing: 0 !important}
    
    .planner form ul li#field_1_25 #input_1_25 li label, .planner form ul li#field_1_31 #input_1_31 li label{letter-spacing: 0 !important}
    
    .more .feature{margin: 40px auto 0}
    
    nav .column ul li a:hover{transform: scale(1) translateX(0)}
    .link:hover, input[type=submit]:hover, .gform_page_footer input[type=button]:hover, .gform_page_footer input[type=submit]:hover{box-shadow: none}
    
    
}

@media(max-width:799px){
    .page-content .hero{margin: 0}
}

@media(max-width:767px){
    
    header{height: 60px}
/*    header{height: 60px; width:100%; background: rgba(34,33,39,0.98)}*/
    header .logo{left: 0; top:0; right: auto}
     
    header.nav-up{opacity: 0; visibility: hidden; transition: 0.5s; transform: translateY(-100px)}
    header.nav-down{opacity: 1; visibility: visible; transition: 0.5s; transform: translateY(0)}
    
    .hamburger{height: 60px !important; width: 60px !important}
    .hamburger-box{width: 35px !important}
    .hamburger-inner, .hamburger-inner:before, .hamburger-inner:after{width: 30px !important}
    .hamburger-inner:before{width: 25px !important}
    
    .is-active .hamburger-inner:before{width: 30px !important}
    
    .social{left: 10px}
    .social ul li{padding: 10px 0}
    
    nav .column{width: 100%}
    nav .other{display: none}
    
    .page-content{margin-bottom: 600px}

    .page-content{padding: 60px 0 0}
    .post-content{padding: 60px 0 40px}
    
    .post-content .elevator{height: 40vh}
    
    .all{padding: 0 10px}
    
    .all article{width: calc(50% - 22px); margin: 20px 10px 0}
    .all article .mask{float: none; width: 100%}
    .all article .summary{float: none; width: calc(100% - 40px)}
    .all article .summary h2{height: 180px}
    .all .arrow{position: relative; bottom: 0}
	
	.category article{border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-right-radius: 0}
	.category article .mask img{border-bottom-left-radius: 0; border-top-right-radius: 8px}
    
    .feature{width: 100%; margin: 25px 0 0; float: none}

    .excerpt{position: relative; width: 100%}
    .excerpt .inner{padding: 0}
	.waypoint-reveal:nth-of-type(1) .excerpt .inner, .waypoint-reveal:nth-of-type(3) .excerpt .inner{padding: 40px 0 0}
    .excerpt .inner .content{position: relative; margin: -40px auto 40px; text-align: center}
    
    .excerpt .inner .content .arrow{margin-left: -25px}
    
    .more .excerpt{width: 100%}
    .more .feature{margin: 0 auto}
    
    body.home main, body.page-template-page-about main{margin-bottom: 450px}
    .more{height: 600px}
    
    
    .category-work main{padding: 40px 0 0}
    
    .mobile{display: none}
    
    /* Portfolio - Shack */
    .shack-mobile{max-width: 149%}
    
    .elevator h1{max-width: 320px}
    
    
    .page-template-page-about .elevator .container{display: none}
    .page-template-page-about .elevator{background-position: 100% 40px}
    
    
    .scroll-downs{display: none}
    
    .page-template-page-about .traits .container{padding: 120px 0 60px}
    .page-template-page-about .traits .container ul{max-width: 350px}
    .page-template-page-about .traits .container ul li{width: 100%; margin: 0 0 20px}
    
    .page-template-page-about .bio h2{margin: 0 0 50px}
    .page-template-page-about .bio .container section{width: 100%; margin: 0}
    
    .process h2{margin: 0 0 20px}
    
    
    .planner form h2{max-width: 300px}
    
    .planner form ul li, .planner form ul li:nth-child(even){float: none; width: 100%; clear: both}
        
    
    .planner form ul li#field_1_15 #input_1_15 li{margin: 0; width: 100%}
    .planner form ul li#field_1_15 #input_1_15 li label{border-bottom-left-radius: 0; border-right: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 4px; letter-spacing: 0.5px !important}
    
    .planner form ul li#field_1_15 #input_1_15 li:last-child label{border-top-left-radius: 0; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 4px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc}
    
    
    .planner form ul li#field_1_25 #input_1_25 li, .planner form ul li#field_1_31 #input_1_31 li{margin: 0; width: 100%}
    .planner form ul li#field_1_25 #input_1_25 li label, .planner form ul li#field_1_31 #input_1_31 li label{border-bottom-left-radius: 0; border-right: 2px solid #ccc; border-bottom: 0; border-top-right-radius: 12px; letter-spacing: 0.5px !important}
    
    .planner form ul li#field_1_25 #input_1_25 li:last-child label, .planner form ul li#field_1_31 #input_1_31 li:last-child label{border-top-left-radius: 0; border-bottom-left-radius: 12px; border-top-right-radius: 0; border-bottom-right-radius: 12px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc}
    
    
    input[type="text"], input[type="tel"], input[type="email"], input[type="button"], select, textarea{font: 16px/50px 'Avenir LT Std 35 Light'}
    
    .planner form ul li#field_1_18 textarea{padding: 25px 5%; font: 16px/30px 'Avenir LT Std 35 Light'; width: 90%}
    
    
}


@media(max-width:599px){
    
    h1{font: 900 38px/46px 'Avenir LT Std 85 Heavy'; letter-spacing:1px}
/*    h2{font: 24px/34px 'frank_ruhl_libreblack'}*/
/*    h3{font: 20px/32px 'frank_ruhl_libreblack'}*/
    h4{font: 20px/32px 'Avenir LT Std 35 Light'}
    
/*    main{margin-left: 0; margin-bottom: 750px}*/
/*    .cta{width: 100%; padding: 200px 0 350px}*/
    .social ul li a{text-indent: -9999px; padding: 0 22px}
    
    nav .column ul li a{font: 900 36px/60px 'Avenir LT Std 85 Heavy'}
    nav .column ul li:last-child a:after, nav .column ul li:last-child a:before{display: none}
    
    .excerpt .inner .content{padding: 0 20px}
    
    .elevator .container{width: calc(100% - 30px); padding: 0 15px}
    
    .page-content .container, .post-content .container{padding: 0 20px}
    
    .home .posts, .single .posts{padding: 0 0 0 20px}
/*     .posts .summary h2{height: 160px} */
    
    .more .container{padding: 0 20px !important}
    .cta .container{padding: 50px 20px}
    .more .feature{width: 80%}
    .more .excerpt .inner .content{padding: 0}
    
    .newsletter .container{padding: 0 20px}        
    .newsletter .cta{padding: 0 20px}  
    
    .newsletter form ul{padding: 0}
    .newsletter form .gform_body, .newsletter form .gform_footer{width:100%; margin: 0 auto; max-width: 350px; float: none}
    
    .all article{width: calc(100% - 20px)}
    
    .all .summary h2, .all article .summary h2{height: auto}
    
    /* Portfolio - Emma */
    .emma-right{width: 100%}
    
    .page-template-page-about .bio{padding: 0 20px}
    
    .traits h2{font: 900 26px/44px 'Avenir LT Std 85 Heavy'}
    .traits h5{font: normal 12px/24px 'Avenir LT Std 85 Heavy'; margin: 5px 0 -10px}
    
    .page-template-page-about .process{padding: 0 20px}
    
    .page-template-page-about .services{padding: 0 20px}
    
    .page-template-page-about .gallery .panel{overflow: hidden}
    .page-template-page-about .gallery .full{width: 1400px; max-width: none}
    .page-template-page-about .gallery .one-third, .page-template-page-about .gallery .two-third, .page-template-page-about .gallery .half{width:100%}
    
    .info .container{padding: 0 20px}
/*     .photo{height: 100vh; background-position: top right} */
    
	
	.swiper-container{padding: 40px 0 100px !important}
    
    .planner{padding: 60px 20px 20px}
    .planner .container{padding: 20px !important}
    
    
    .planner form ul li#field_1_9 #input_1_9 li label, .planner form ul li#field_1_12 #input_1_12 li label{background: none; line-height: 40px; padding: 0 12px; margin: 0 5px 0 0; height: 40px}
    .planner form ul li#field_1_9 input:checked + label, .planner form ul li#field_1_12 input:checked + label{background: #24BADF !important} 
    
    .gform_page_footer input[type=button]{max-width: 100%}
    
    .gform_page_footer input[type=button].gform_previous_button{display: none}

    
    .gform_drop_instructions {font-size: 16px}
    
    
    .planner form ul li#field_1_15 #input_1_15 li label{background: #fff; padding: 0 5%; width: 90%; letter-spacing: 0 !important}
    
    .planner form ul li#field_1_15 input:checked + label{background: #24BADF !important}
    

    .planner form ul li#field_1_25 #input_1_25 li label, .planner form ul li#field_1_31 #input_1_31 li label{background: #fff; padding: 0 5%; width: 90%; letter-spacing: 0 !important}
    
    .planner form ul li#field_1_25 input:checked + label, .planner form ul li#field_1_31 input:checked + label{background: #24BADF !important} 
        
}   

@media(max-width:499px){
    .stage-image{max-width: 280px; margin: 0 auto}
    .more .feature{width: 100%}
/*     .photo{height: 80vh; background-position: bottom right} */
    
    .gallery-columns-2 .gallery-item{width: 100% !important; padding: 1% 0}
	
	.postid-795 .panel.half img{float: none; max-width: 100%}
	
/* 	.prestige-mobile{display: block !important}
	.prestige-mobile img{width: 100%} */
	
	 .postid-1326 .wv-container{margin: 0; padding: 50px 0}
    
}