/*
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: 			1.0
*/

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: #555; font: 18px/32px 'Avenir LT Std 35 Light'}
body.disable{overflow: hidden}

h1{font:900 74px/98px 'Frank Ruhl Libre'; color: #333; margin: 0 0 20px}
h2{font: 900 38px/52px 'Frank Ruhl Libre'; 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: 1px; transition: 0.5s}
h6{font: normal 12px/22px 'Avenir LT Std 35 Light'; margin: 0 0 10px; text-transform: uppercase; color: #787878; letter-spacing: 1px}
p{font: 18px/32px 'Avenir LT Std 35 Light'; color: #555; padding: 0 0 20px}

strong{font: normal 18px/32px 'Avenir LT Std 35 Light'}
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 'Frank Ruhl Libre'; color: #fff; left: 0; right: 0}

@keyframes revolve {

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

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



.status{background: #31c6e6; padding: 6px 8px 4px; border-radius: 3px; color: #fff; letter-spacing: 1px; margin: 0 2px; display: inline}

.post-content{margin-bottom: 0 !important; padding: 0 0 20px}
.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: #787878}
.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: 700px}

.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: 1px; color: #555; 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: #555; margin: 60px auto 40px}
.post-content blockquote:after{content: ''; display: block; height: 1px; width: 150px; background: #555; margin: 40px auto 60px}

.post-content blockquote{text-align: center; max-width: 750px; margin: 0 auto}
.post-content blockquote p{font: 300 20px/36px 'Frank Ruhl Libre'; 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; font-size: 14px; top: -10px; left: 10px; background: #fff; line-height: 14px; 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/50px 'Avenir LT Std 35 Light'; letter-spacing: 1px; height:50px; margin: 0 0 10px; border:0; border: 1px solid #ccc; background: #fff; transition: 0.5s}

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; text-transform: uppercase; width: 100%; padding: 0; letter-spacing: 1.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%}
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 'Frank Ruhl Libre'; letter-spacing: 1px; 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: .5; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; color: #787878}
.tagline span{height: 1px; width: 60px; background: #787878; 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}


.swiper-container{cursor: grab}
.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(uploads/about-background-desktop.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{float: left; width: 50%; height: 100vh; display: flex; align-items: center}
.info .container{width: calc(100% - 120px); max-width: 600px; padding: 0 60px; 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/52px 'Avenir LT Std 85 Heavy'; height: 52px; border: 0; background: #333; color: #fff !important; text-transform: uppercase; width: 100%; padding: 0; margin: 40px auto 20px; letter-spacing: 1.5px; cursor: pointer; transition: .5s; display: inline-block; text-decoration: none; text-align: center; max-width: 280px; float: right}
.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/52px 'Avenir LT Std 85 Heavy'; height: 52px; border: 0; background: #333; color: #fff !important; text-transform: uppercase; width: 100%; padding: 0; margin: 10px auto; letter-spacing: 1.5px; cursor: pointer; transition: .5s; display: inline-block; text-decoration: none; text-align: center; max-width: 280px; float: right}
.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}


.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: 1px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; margin: 0 10px 0 0; border-radius: 4px; 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: 1px solid #ccc; display: inline-block; line-height: 50px; padding: 0 20px 0 45px; margin: 0 10px 0 0; border-radius: 4px; 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: 1px dashed #ccc; text-align: center; cursor: pointer}
#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: 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_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: 4px; border-bottom-right-radius: 4px; border-right: 1px 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: 1px 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: 1px solid #f03}
.gfield_error .validation_message{font-size: 14px; margin: -10px 0 0; color: #f03; text-align: left}


.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{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 35 Light'; text-transform: uppercase; color: #ccc; transition: 0.5s ease; letter-spacing: 2px}
.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/52px 'Avenir LT Std 85 Heavy'; height: 52px; border: 0; background:#333; color: #fff !important; text-transform: uppercase; width: 100%; padding: 0; margin: 10px auto; letter-spacing: 1.5px; cursor: pointer; transition: .5s; display: inline-block; text-decoration: none; text-align: center; max-width: 280px}
.link:hover{box-shadow: inset 300px 0 0 0 #31c6e6; color: #fff; transition: .5s}
.link:after{display: none !important}

article{background: #fff; transition: 0.5s}

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

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

.posts{background: #fff; padding: 0 20px}
.posts .summary{border: 1px solid #f2f2f2; border-top: none}

.posts .summary h2 {height: 220px; 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.5}

.all{max-width: 1200px; margin: 0 auto}
.all article{width:100%; margin: 20px 0 0; border: 1px solid #f2f2f2; 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: 40px; 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}
.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 'Frank Ruhl Libre'}

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

    .tagline{display: none}
    
}

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

@media(max-width:1649px){
    .elevator h1{font:900 55px/75px 'Frank Ruhl Libre'}
    .error404 main .elevator p{max-width: 650px}
}

@media(max-width:1599px){

    .excerpt .inner .content{padding: 0 50px}
    
    .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 'Frank Ruhl Libre'}
    
}

@media(max-width:1199px){
    h1{font:900 55px/75px 'Frank Ruhl Libre'}
    h2{font:900 32px/44px 'Frank Ruhl Libre'}
    .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}
    .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(uploads/about-background-tablet.jpg) top right / cover no-repeat}
    
}

@media(max-width:999px){
    
    body{background:#fff}
    
    .page-content{padding: 100px 0 0; margin-bottom: 450px}
    
    .post-content{padding: 100px 0 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(uploads/about-background-desktop.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 'Frank Ruhl Libre'; letter-spacing: 1px}
    
    
    .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 20px}
    
    .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}
    
    .feature{width: 100%; margin: 25px 0 0; float: none}

    .excerpt{position: relative; width: 100%}
    .excerpt .inner{padding: 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: 1px !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: 1px solid #ccc; border-bottom: 0; border-top-right-radius: 4px; letter-spacing: 1px !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: 4px; border-top-right-radius: 0; border-bottom-right-radius: 4px; border-right: 1px solid #ccc; border-bottom: 1px 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 'Frank Ruhl Libre'; letter-spacing:2px;}
/*    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 'Frank Ruhl Libre'}
    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 'Frank Ruhl Libre'}
    .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}
    
    
    .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}
    
}