/*  
Theme Name: Studio 313 v2018
Theme URI: studio313.com.au
Description:
Version: v2020
Author: Studio 313
Author URI: studio313.com.au
*/

/** RESET **/

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

/* box-sizing border box */
html {-webkit-box-sizing: border-box; box-sizing: border-box;}
*, *:before, *:after {  -webkit-box-sizing: inherit;  box-sizing: inherit; }


/* fonts

font-family: 'Josefin Sans', sans-serif;
font-family: 'Fredoka One', sans-serif;
*/


/** SITE STYLES **/

html { overflow-x: hidden !important; }
body { position: relative; -webkit-text-size-adjust: none; font-size:18px; overflow-x: hidden !important; background-color: #f5f5f5; }
body.about {/*background: #008476; background: -moz-radial-gradient(center, ellipse cover, #008476 0%, #0f6670 100%); background: -webkit-radial-gradient(center, ellipse cover, #008476 0%,#0f6670 100%); background: radial-gradient(ellipse at center, #008476 0%,#0f6670 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008476', endColorstr='#0f6670',GradientType=1 );*/ background:#F4BE29;}


body.notes {/*background: #008476; background: -moz-radial-gradient(center, ellipse cover, #008476 0%, #0f6670 100%); background: -webkit-radial-gradient(center, ellipse cover, #008476 0%,#0f6670 100%); background: radial-gradient(ellipse at center, #008476 0%,#0f6670 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008476', endColorstr='#0f6670',GradientType=1 );*/ background:#F4BE29;}
body.projects, body.projects header.sticky { background: #222;}
body.work { background: #f5f5f5;}
body.article { background: #dedede;}
body.landing header{ background: #F4BE29;}
body.contact {background: #222;}

body.home header.sticky { background: #222;}
body.about header.sticky { background:#F4BE29;}
body.notes header.sticky { background: #F4BE29;}
body.work header.sticky { background: #f5f5f5;}
body.work-det header.sticky { background: #F4BE29;}
body.work header.sticky ul.navbar-nav a { color: #fff !important;}
body.work-det header.sticky ul.navbar-nav a { color: #fff !important;}
body.article header.sticky{ background: transparent;}
body.landing header.sticky{ background: #333;}
body.contact header.sticky { background: #222;}


h1, h2, h3, h4 {  font-family: 'Fredoka One', sans-serif; margin:0; padding:0; text-decoration:none; outline:none; border:none; line-height:1.4;}

h1 { font-size: 24px; color:#545454; margin:0 0 20px 0;}
h2 { font-size: 22px; color:#545454; margin:0 0 15px 0;}
h3 { font-size: 20px; color:#545454; margin:0 0 10px 0;}
h4 { font-size: 18px; color:#545454; margin:0 0 10px 0;}

p, a, li, blockquote { font-family: 'Josefin Sans', sans-serif; font-weight: 400; margin:0; padding:0; text-decoration:none; border:none; font-weight: 400;}
p, li { color:#545454; line-height:1.5;}
p { margin:0 0 25px 0;}

a { text-decoration:none; color:#545454; border:none;}
a, button { text-decoration:none; color:#077673; border:none; -webkit-transition:all .4s ease-out; transition:all .4s ease-out;}
a { position: relative; border-bottom: 2px solid transparent;}
a:hover { text-decoration:none; color:#545454; border-bottom: 2px solid #077673;}
a, a:focus, a:active, button:focus, button:active { outline: none !important;}

ul, ol { margin-left:30px; margin-bottom:10px;}
ul { list-style:disc;}
ol { list-style:decimal;}
ol li ol { list-style: lower-roman;}
ul li ul { list-style: circle;}

table { margin:20px auto;}
th { text-transform:uppercase; border-bottom:2px solid #aaa !important;}
th, td { padding:10px; border:1px solid #ccc;}
table tr:nth-of-type(even) { background:#f2f2f2;}
@media screen and (max-width: 600px) {table { overflow-x: auto; display: block; border-right:1px dashed #ccc; padding:30px 0; }}

b, strong { font-family: 'Josefin Sans', sans-serif; font-weight: 700;}
em, i { font-family: 'Josefin Sans', sans-serif; font-style: italic;}
em b, i b, em strong, i strong { font-family: 'Josefin Sans', sans-serif; font-style: italic; font-weight: 700;}

@media only screen and (min-width :700px) {
body, p, a, li { font-size:20px;}
h1 { font-size: 26px;}
h2 { font-size: 24px;}
h3 { font-size: 22px;}
h4 { font-size: 20px;}
}

@media only screen and (min-width :1200px) {
body, p, a, li { font-size:22px;}
h1 { font-size: 28px;}
h2 { font-size: 26px;}
h3 { font-size: 24px;}
h4 { font-size: 22px;}
    ul, ol { margin-left:40px; margin-bottom:20px;}
}

.container-fluid { padding-left: 0; padding-right: 0;}
.container { width: 100%; max-width: 1600px;}


.preload, .preload img { position: absolute !important; left: -9999px !important; height: 0 !important; width: 0 !important;}

img { max-width: 100%; height: auto; color:#000 !important; font-size:1px !important;}
	
::-moz-selection, ::selection { color: white;  background: #545454; }

/** HEADER **/
	header { position:fixed; top: 0; left: 0; margin:0; padding:0; z-index: 888; width: 100%; -webkit-transition:all 1.0s ease-out; transition:all 1.0s ease-out; z-index: 5000 !important;}

	
	/* nav */
.menu-313 { padding-left: 0; padding-right: 0; position: relative; z-index: 5000 !important;}	
.menu-313 a.navbar-brand { height:55px; width: 55px; -webkit-transition:all .4s ease-out; transition:all .4s ease-out; margin-bottom: 10px; margin-left: 10px; padding: 0;}
.menu-313 a.navbar-brand .logo-icon { background: url(images/logos/logo-313-white-2019-dave.svg) center center no-repeat; background-size: cover; height: 55px; width: 55px; -webkit-transition:all .4s ease-out; transition:all .4s ease-out; }
.menu-313 a.navbar-brand:hover .logo-icon { opacity: 1;}

.menu-313 a.navbar-brand:hover { opacity: 1;}
.menu-313 ul.navbar-nav a.nav-link { text-transform: uppercase; font-size: 16px; font-weight: 400; outline: none; position: relative; z-index: 5000 !important;}
.menu-313 ul.navbar-nav i { padding-right: 10px !important; position: relative; top: 2px; -webkit-transition:all .4s ease-out; transition:all .4s ease-out;}
.menu-313 button.navbar-toggler { margin-right: 10px;}
.menu-313 button.navbar-toggler i { font-size: 24px; color: #545454; -webkit-transition:all .4s ease-out; transition:all .4s ease-out;}
.menu-313 button.navbar-toggler:hover i { color: #8dc63f;}

.menu-313 ul.navbar-nav:hover > li.nav-item a { opacity: 0.3;}
.menu-313 ul.navbar-nav:hover > li.nav-item a:hover { opacity: 1;}

header.sticky { position: fixed; top: 0; width: 100%; background: #f5f5f5; z-index: 2000 !important;  -webkit-transition:all 1.0s ease-out; transition:all 1.0s ease-out;}   

@media only screen and (max-width :990px) {
    .navbar-collapse { background: #333; padding: 10px;}
    .navbar-collapse a { color: #fff !important;}
}

/* menu-white */
.menu-white .menu-313 ul.navbar-nav a.nav-link { color: #fff !important;}
.menu-white .menu-313 button.navbar-toggler i, .menu-white .menu-313 button.navbar-toggler i:active, .menu-white .menu-313 button.navbar-toggler i:focus {color: #fff;}
.menu-white .menu-313 button.navbar-toggler:hover i { color: #fff;}

body.work header.sticky.menu-white .menu-313 button.navbar-toggler i,
body.work-det header.sticky.menu-white .menu-313 button.navbar-toggler i { color: #fff !important;}

@media only screen and (min-width :990px) {
    .menu-313 { padding-left: 20px; padding-right: 20px;}	
    .menu-313 ul.navbar-nav { margin-top: 10px;}
    .menu-313 ul.navbar-nav a  { font-size: 18px;}  
    .menu-313 ul.navbar-nav a.nav-link { padding-left: 20px !important; padding-right: 20px !important;}
    .menu-313 ul.navbar-nav i { padding-left: 10px !important; padding-right: 10px !important; position: relative; top: 4px;}
    
    
    .menu-313 a.navbar-brand { width: 60px; height:60px;}
    .menu-313 a.navbar-brand .logo-icon { width: 60px !important; height:60px;}
    
    .sticky a.navbar-brand {background-size: cover; width: 60px; height: 60px; -webkit-transition:all .9s ease-out; transition:all .9s ease-out; overflow: hidden;}
}


@media only screen and (min-width :1200px) {
    .menu-313 ul.navbar-nav a  { font-weight: 20px;} 
    .menu-313 a.navbar-brand { width: 70px; height:65px;}
    .menu-313 a.navbar-brand .logo-icon { width: 70px !important; height:65px;}
    
	.sticky a.navbar-brand {width: 70px; height: 65px;}
	.sticky .menu-313 a.navbar-brand .logo-icon { opacity: 0.5;}
	.sticky .menu-313 a.navbar-brand:hover .logo-icon { opacity: 1;}
}

 
.st313-abilities-grid a,
.st313-abilities-grid a:hover,
footer a, footer a:hover,
header a, header a:hover,
.folio-grid-sq a, .folio-grid-sq a:hover,
.notes-filter a, .notes-filter a:hover,
.notesfeed-pag a, .notesfeed-pag a:hover,
.modalchat-wrap a, .modalchat-wrap a:hover { border-bottom: 0 !important; }


@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}
.menu-313 a.wiggle-me:hover .logo-icon {-ms-animation:wiggle .3s 2;-moz-animation:wiggle .3s 2;-webkit-animation:wiggle .3s 2;animation:wiggle .3s 2;}

/** CONTENT **/

/* home */
.hme-wrap { position:relative; z-index:1010;}
.home-land { position: relative; width: 100%; height: 100vh; min-height: 500px; /*background: radial-gradient(#EE7752, #E73C7E, #23A6D5, #008476); background-size: 800% 800%; -webkit-animation: Gradient 60s ease infinite; -moz-animation: Gradient 60s ease infinite; animation: Gradient 60s ease infinite;*/ background:#F4BE29; }

@-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
@-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
@keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }

.home-txt { position: relative; height: calc(100vh - 200px); top: 100px; z-index: 1000;}
.home-txt div {position: absolute;  top: 50%; transform: translateY(-50%); left: 0%; padding: 20px; padding-top: 100px;  }
.home-txt div p, .home-txt div p span { font-size: 20px; color: #333; font-weight: 400; margin-bottom: 20px; font-style:normal !important;}
.home-txt div p#lblGreetings { font-weight: 300; color: rgba(255,255,255,1);}
.home-txt div p#lblGreetings { font-family: 'Fredoka One', sans-serif; font-size: 28px;}

.hme-arrow { display: none; border: 2px solid transparent; position: absolute; bottom: -100px;  left: 50%; transform: translateX(-50%); padding: 60px; width: 60px; height: 60px; border-radius: 50%;}
.hme-arrow i { color: #fff; font-size: 30px; position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}

@media only screen and (min-width :700px) {
    .home-txt div {max-width: 600px; top: 50%;}
     .home-txt div p, .home-txt div p span { font-size: 32px; color: #333; font-weight: 400; font-style:normal !important;}
    
    .hme-arrow { border: 2px solid transparent; position: absolute; bottom: 0;  left: 50%; transform: translateX(-50%); padding: 60px; width: 60px; height: 60px; border-radius: 50%;}
    .hme-arrow:hover {padding: 40px; width: 40px; height: 40px; bottom: 20px; border: 2px solid rgba(255,255,255,0.2);}
    .home-txt div p#lblGreetings { font-size: 34px;}
}

@media only screen and (min-width :1000px) {
    .home-land:before { display: none;}
    .home-txt div { top: 50%; max-width: 650px;}
    .home-txt div p#lblGreetings { font-size: 45px; }
    .home-land:before { background: url(images/313-home-bg-trans-3.png) bottom right no-repeat; background-size: cover; position: absolute; top:  0; left: 0; width: 100%; height: 100%; display: block; content: ''; z-index: 1;}
}

@media only screen and (min-width :1200px) {
    .home-txt div p, .home-txt div p span { font-size: 35px; font-style:normal !important;}
    .home-txt div {max-width: 800px; top: 50%;}
    .home-txt div p#lblGreetings { font-size: 60px; }
    .hme-arrow { display: block; bottom:-50px;}
    .hme-arrow:hover { bottom: -30px;}
}

@media only screen and (min-width :1400px) {
    .home-txt div p, .home-txt div p span { font-size: 40px; margin-bottom: 30px; font-style:normal !important;}
    .home-txt div {  max-width: 900px;}
    .home-txt p#lblGreetings { font-size: 80px;}
}


.hme-intro {width: 100%; height: auto; max-width: 700px; padding: 100px 20px; background: #222; position: relative;}
.hme-intro p {color: rgba(255,255,255,0.5); font-size: 20px; font-family: 'Josefin Sans', sans-serif; position: relative; font-weight: 400;}
.hme-intro p.hme-intro-txt {font-size: 30px; color: rgba(255,255,255,0.8); font-weight: 400;}
.hme-intro p a {color: rgba(255,255,255,0.8) !important;}
/*.hme-intro p a:after { display: inline-block; content: 'lets go'; color: #0F6670; opacity: 0; -webkit-transition:all 1.0s ease-out; transition:all 1.0s ease-out;}*/
.hme-intro p a, .hme-intro p a:focus, .hme-intro p a:active, .hme-intro p a:hover { border-bottom: 0;}
.hme-intro p a:hover:after { opacity: 1; margin-left: 20px;}


@media only screen and (min-width :700px) {
    
    .hme-intro { max-width: inherit; min-height: 100vh; padding: 50px 100px; }
    .hme-intro p {font-size: 24px; max-width: 700px; }
    .hme-intro p.hme-intro-txt {font-size: 40px;}
    .hme-intro p a {color: rgba(255,255,255,0.8); font-size: 24px;}
        .hme-intro .c-h { max-width: 80%; left: 10%;}

}


@media only screen and (min-width :1200px) {
    .hme-intro .c-h { left: 20%;}
    
    .hme-intro p {font-size: 28px; max-width: 800px; }
}


.hm-wk-wrap { margin: 0 !important; padding: 5px !important; background: #222;}
.hm-wk-wrap ul { position: relative; margin: 0; padding: 0; margin-bottom:40px; list-style: none; font-size: 0;}
.hm-wk-wrap ul li { width: 100%; height: 40vh; display: inline-block; position: relative; padding: 5px; vertical-align:top ; margin-bottom:60px !important;}

.hm-wk-wrap ul li .hme-wk-img { height: calc(100% - 40px); height:100%; width: 100%; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; opacity: 1; position: relative; border-radius: 6px; -webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.hm-wk-wrap ul li .hme-wk-img:hover {border-radius: 40px; }


.hm-wk-wrap ul li p { position:relative; color: rgba(255,255,255,1); z-index: 100; font-size: 18px; padding:15px 20px 0px; margin-bottom:0; text-transform:uppercase;  font-family: 'Fredoka One', sans-serif;}
.hm-wk-wrap ul li span,
.hm-wk-wrap ul li a span { color: rgba(255,255,255,0.5); font-family: 'Josefin Sans', sans-serif; font-weight:400 !important; border-bottom:0; font-size:14px; text-transform:lowercase; padding:0px 20px; margin-bottom:20px; display:block;}

.projects .hm-wk-wrap ul { margin-top:5%;}

@media only screen and (min-width :700px) {
    .hm-wk-wrap ul li { width: 50%; height: 33vh; }
	.hm-wk-wrap ul li { width: 50%; height: 33vh;}
}

@media only screen and (min-width :1000px) {
	.hm-wk-wrap ul { margin-bottom:80px;}
    .hm-wk-wrap ul li { width: 50%; height: 33vh; display: inline-block; position: relative; padding: 5px; }
    
    .projects .hm-wk-wrap ul { max-width:2000px; margin-left:auto; margin-right:auto;}
	/*.projects .hm-wk-wrap ul li { width: 50%; height: 50vh; }*/
	
	.hm-wk-wrap ul li p { font-size:20px;}
	.hm-wk-wrap ul li span,
	.hm-wk-wrap ul li a span { font-size:16px; margin-bottom:50px !important;}
}

@media only screen and (min-width :1300px) {
    .hm-wk-wrap ul li { width: 33.333%; /*height: calc(50vh - 50px); display: inline-block; position: relative;*/ padding: 5px;}
  
	/*.projects .hm-wk-wrap ul li { width: 50%; height: 60vh; }*/
	.hm-wk-wrap ul li p { font-size:24px;}
	.hm-wk-wrap ul li span,
	.hm-wk-wrap ul li a span { font-size:18px;}
}



/* INTERNAL DEFAULT */
.bdy-wp { min-height: 600px;}
.folio, .bdy-notes { padding: 100px 20px 50px;}
.pg-heading,
.pg-subheading, .landing-bdy { font-family: 'Fredoka One', sans-serif;}

@media only screen and (min-width :700px) {
    .folio, .bdy-notes, .landing-bdy { padding: 125px 20px 100px;}
    
    .c-c {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .c-h {position: absolute; top: 50%; transform: translateY(-50%);}
}

@media only screen and (min-width :992px) {
    .folio, .bdy-notes { padding: 200px 20px 150px;}
}

@media only screen and (min-width :1200px) {
    .folio, .bdy-notes { padding: 300px 20px 100px;}
}



/* about */
.about { padding-top: 75px; /*background: #008476; background: -moz-radial-gradient(center, ellipse cover, #008476 0%, #0f6670 100%); background: -webkit-radial-gradient(center, ellipse cover, #008476 0%,#0f6670 100%); background: radial-gradient(ellipse at center, #008476 0%,#0f6670 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008476', endColorstr='#0f6670',GradientType=1 );*/ background:#F4BE29;}
.st313-about { padding-bottom: 0px;}
.st313-about p.pg-heading { font-size: 48px; line-height: 60%; margin-bottom: 30px; color: #333; z-index: 1; position: relative; font-family: 'Fredoka One', sans-serif; margin-left: 20px;}
.st313-about p.pg-heading span { opacity: 0.5; font-size: 40%;}
.st313-about p.pg-subheading { font-size: 24px; line-height: 1.3; color: #bcbec0; margin-bottom: 30px;}

.st313-about-in { padding: 0 20px;}
.st313-about-in p.pg-subheading { color: #333; font-size: 20px; max-width: 800px; margin-bottom: 30px; font-weight: 700; z-index: 1; position: relative; font-family: 'Josefin Sans', sans-serif;}

.st313-about-cols p { color: #333;font-weight: 00;}
.st313-about-cols p strong { color: #333; font-weight: 400;}
.st313-about-cols p:first-of-type { font-weight: 500; color: #333; font-size: 110%;}


.team .container { padding: 0 20px;}
.team ul { position: relative; list-style: none; margin: 0; padding: 0; font-size: 0;}
.team ul li { display: inline-block; width: calc(50% - 10px); margin: 0px 10px 20px; padding: 0; vertical-align: top; text-align: center;}
.team ul li img { margin-bottom: 10px;}
.team ul li h1 { color: #333; font-size: 16px; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1.5; text-align: left; margin-bottom: 5px; text-align: left;}
.team ul li h1 cite { color:#333; font-size: 14px; text-transform: capitalize; display: block; font-weight: 400;}
.team h2 { color: #fff; margin-top: 40px; font-family: 'Josefin Sans', sans-serif;}
.team h3 { color: #fff; margin-top: 20px; font-family: 'Josefin Sans', sans-serif;}	

.team .row a { color: rgba(255,255,255,0.3); font-size: 14px; margin: 0 8px 0 0;}
.team .row a:hover { color: rgba(255,255,255,0.5);}

.arw-dwn { display: block; text-align: right; margin-right: 13%; margin-bottom: 80px; color: rgba(255,255,255,0.5); font-size: 32px;}

.sp-team { font-size: 0; position: relative; z-index: 1;}
.sp-team img { width: 100%; height: auto;}

@media only screen and (max-width :767px) {
    .team ul li:nth-of-type(odd) {margin-left: 0;}
    .team ul li:nth-of-type(even) {margin-right: 0;}
}

@media only screen and (min-width :767px) {
    .about { padding-top: 100px;}
    .st313-about p.pg-heading { font-size: 80px; margin-bottom: 40px;}  
    .st313-about-in p.pg-subheading { font-size: 24px;}
    
    .team ul li { width: calc(33.333% - 15px); margin: 0px 10px 20px;}
    .team .row ul li { width: calc(50% - 15px); margin: 0px 10px 20px;}
}

@media only screen and (max-width :992px) {
    .team ul li:nth-of-type(3n+1) {margin-left: 0;}
    .team ul li:nth-of-type(3n+3) {margin-right: 0;}
}

@media only screen and (min-width :992px) {
    
    .st313-about p.pg-heading { font-size: 100px; }
    .st313-about p.pg-subheading { font-size: 30px;} 
    .st313-about-in p.pg-subheading { font-size: 30px; margin-bottom: 50px;}
    
    .team ul li { width: calc(25% - 15px); margin: 0px 10px 20px;}
    .team ul li h1 { font-size: 18px;}
    .team ul li h1 cite { font-size: 16px;}
    
    .st313-about-cols div { padding-left: 60px; padding-right: 60px; border: 1px solid transparent;}
    .st313-about-cols div:nth-of-type(1) { padding-left: 20px;}
    .st313-about-cols div:nth-of-type(2) { padding-right: 20px;}
    
    .about-btm-cols-top { max-width: 1100px;}
}


@media only screen and (min-width :1024px) {
    .team ul li { position: relative;}
	.team ul li div { position: relative; width: 100%; height: 100%;}
    .team ul li div h1 { position: relative;}
}

@media only screen and (max-width :1200px) {
    .team ul li:nth-of-type(4n+1) {margin-left: 0;}
    .team ul li:nth-of-type(4n+4) {margin-right: 0;}
}


@media only screen and (min-width :1200px) {
    .about { padding-top: 200px;}
    .st313-about-in { padding-left: 10%; padding-right: 10%;}
    .st313-about p.pg-heading { font-size: 150px; }
    .st313-about p.pg-subheading { font-size: 42px;}
    .st313-about-in p.pg-subheading { font-size: 42px;}
    
    .team .container { max-width: 1270px; padding: 0;}
    .team ul li:nth-of-type(5n+1) {margin-left: 0;}
    .team ul li:nth-of-type(5n+5) {margin-right: 0;}
    
    .team ul li { width: calc(20% - 17px); margin: 0px 10px 20px;}
}


.about-img { height: 25vh; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;}


@media only screen and (min-width :900px) {
    .about-img { height: 50vh;}
}


/* abilities */
.abilities-wrap { background: #f5f5f5; margin-top: -2px;}
.st313-abilities { position: relative; z-index: 9;}
.st313-abilities p.pg-heading { font-family: 'Fredoka One', sans-serif; font-size: 48px; line-height: 100%; margin-bottom: 30px; padding-left: 20px; color: #545454;}
.st313-abilities p.pg-subheading {font-family: 'Josefin Sans', sans-serif; font-size: 20px; line-height: 1.3; color: #0F6670; margin-bottom: 30px; max-width: 1000px; font-weight: 400;}
.st313-abilities-in { padding: 0 20px;}
.st313-abilities-grid div { margin-bottom: 50px;}
.st313-abilities-grid h1, .st313-abilities-grid h1 a { font-family: 'Josefin Sans', sans-serif; font-weight: 700; margin-bottom: 20px; color:  #EE9C49; text-align: left; text-transform: lowercase;}
.st313-abilities-grid .col-md-6:nth-of-type(2) h1, .st313-abilities-grid .col-md-6:nth-of-type(2) h1 a { color: #b6399d;}
.st313-abilities-grid .col-md-6:nth-of-type(3) h1, .st313-abilities-grid .col-md-6:nth-of-type(3) h1 a { color: #2C6FB6;}
.st313-abilities-grid .col-md-6:nth-of-type(4) h1, .st313-abilities-grid .col-md-6:nth-of-type(4) h1 a { color: #B0C153;}
.st313-abilities-grid p { font-weight: 400; color: #333;}
.st313-abilities-grid ul { list-style: none; position: relative; margin: 0; padding: 0; text-align: left; margin-bottom: 10px;}
.st313-abilities-grid ul li, .st313-abilities-grid ul li a { display: inline-block; margin-bottom: 5px; text-transform: lowercase; position: relative; font-size: 16px; vertical-align: top;  color: rgba(69,69,69,0.5); line-height: 1.2; font-weight: 400; word-wrap: break-word; width: 100%;}

.st313-abilities-grid i { color: #545454; font-size: 30px; display: block;}

.st313-abilities-grid img { width: 60px; height: auto; margin-bottom: 10px; opacity: 0.5;}


@media only screen and (min-width :767px) {
    .st313-abilities p.pg-heading { font-size: 80px; margin-bottom: 40px;}
    
    .st313-abilities-grid { padding-top: 50px;}
    .st313-abilities-grid div { margin-bottom: 70px;}
    .st313-abilities-grid h1 a { font-size: 24px;}
    .st313-abilities-grid p {font-size: 18px;}
    .st313-abilities-grid ul li { width: 45%;}
}


@media only screen and (min-width :992px) {
    .st313-abilities { padding-left: 0px !important; padding-right: 0px !important;}
    .st313-abilities p.pg-heading { font-size: 100px; line-height: 100%;}
    .st313-abilities p.pg-subheading { font-size: 24px;}
    
    .st313-abilities-grid div { margin-bottom: 90px; padding-left: 60px; padding-right: 60px; border: 1px solid transparent;}
    .st313-abilities-grid div:nth-of-type(odd) { padding-left: 20px;}
    .st313-abilities-grid div:nth-of-type(even) { padding-right: 20px;}
    
    .st313-abilities-grid img { width: 75px; margin-bottom: 20px;}
    .st313-abilities-grid p { font-size: 22px;}
    .st313-abilities-grid h1 a { font-size: 28px;}
    
    .st313-abilities-grid p {font-size: 20px;}
	
	.st313-abilities-grid ul li, .st313-abilities-grid ul li a {font-size: 18px;}
}



@media only screen and (min-width :1200px) {
    .st313-abilities { margin-top: 0px; padding-bottom: 200px;}
    .st313-abilities-in { padding-left: 10%; padding-right: 10%;}
    .st313-abilities p.pg-heading { font-size: 150px; }
    .st313-abilities p.pg-subheading { font-size: 28px;}
    
    .st313-abilities-grid div { margin-bottom: 110px;}
    .st313-abilities-grid ul li, .st313-abilities-grid ul li a {font-size: 20px;}
    .st313-abilities-grid ul li:nth-of-type(n + 2):before {padding: 0 10px;}
    
    .st313-abilities-grid img { width: 100px; margin-bottom: 20px;}
    
    .st313-abilities-grid p {font-size: 22px;}
}


/* FOLIO */

.projects, .projects .folio-grid-sq { background: #222;}
.folio { padding-bottom: 30px !important; background: #222; position:relative; z-index:1001 !important;}
.folio h1.pg-heading { font-size: 45px; line-height: 100%; margin-bottom: 0px;  font-family: 'Fredoka One', sans-serif; color: #F4BE29;}
.folio h1.pg-heading span:nth-of-type(1) { color: #cf8848;}
.folio h1.pg-heading span:nth-of-type(2) { color: #a79948;}
.folio h1.pg-heading span:nth-of-type(3) { color: #4aa97e;}


@media only screen and (min-width : 700px) {
    .folio { padding-bottom: 50px;}
    .folio h1.pg-heading { font-size: 50px; line-height: 100%;}
}

@media only screen and (min-width : 1000px) and (max-width : 1099px) {
    .folio h1.pg-heading { font-size: 70px; margin-bottom: 0px; max-width: 700px;}
}

@media only screen and (min-width : 1100px) {
    .folio h1.pg-heading { font-size: 80px; max-width: 900px; margin-bottom: 0px;}
    .folio { padding-bottom: 75px;}
}

@media only screen and (min-width : 1200px) {
    .folio { padding-bottom: 100px;}
    .folio h1.pg-heading { font-size: 120px; max-width: 1250px; margin-bottom: 0px;}
}



/* work */
.wk-wrap { position: relative; height: auto; background:#fafafa;}
.wk-head { width: 100%; max-width: 100%; height: 100vh; left: 0; position: relative; -webkit-transition:all 1.5s ease; transition:all 1.5s ease; z-index:1800;}

.wk-head-img { width: 100%; max-width: 100%; height: 100vh; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; background-attachment: relative !important; }
.wk-head-img:before { display: block; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.1); }

.wh-head-olay {display: block; content: ''; width: 100%; height: 100%;  position: absolute; top: 0; left: 0;  -webkit-transition:all 1.6s ease; transition:all 1.6s ease; opacity: 0.6;}

.wk-head-txt { width: 90%; max-width: 600px; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); -webkit-transition:all 2.0s ease; transition:all 2.0s ease; z-index: 10;}
.wk-head-txt h1 { font-size: 32px; font-weight: 700; color: rgba(255,255,255,1); letter-spacing: 1px;}
.wk-head-txt p { font-weight: 300; color: rgba(255,255,255,0.7);}
.wk-head-txt ul { list-style: none; position: relative; margin: 0; padding: 0;}
.wk-head-txt li { display: inline-block; padding: 0 10px; text-transform: lowercase; font-size: 14px; color: rgba(255,255,255,0.3); font-weight: 300;}
.wk-head-txt li:first-of-type { padding-left: 0;}

.wk-bdy-head { margin-top: 200px; opacity: 1; -webkit-transition:all 1.6s ease; transition:all 1.6s ease; opacity: 0.6;}


/*.wk-head-sml { opacity: 0;}*/
.wk-head-sml .wh-head-olay { opacity: 1;}
.wk-head-sml .wk-head-txt { top: 60%; opacity: 0;}

.wk-bdy-sml .wk-bdy-head { margin-top: 0px;}

.bk-olay { position: relative;}
.bk-olay:before { content: ''; display: block; background: 0,0,0,0.5; width: 100%; height: 100%; position: relative; top: 0; left: 0; z-index: 1;}


@media only screen and (min-width : 992px) {
    .wk-head-txt h1 { font-size: 50px;}
    .wk-head-txt p { font-size: 24px;}
    .wk-head-txt li { font-size: 16px; }
    
    .wk-head-txt { width: 100%; max-width: 600px; position: fixed; top: 45%; left: 40%; transform: translate(-50%, -50%); -webkit-transition:all 2.0s ease; transition:all 2.0s ease; }
}

@media only screen and (min-width : 1025px) {
    .wk-head-img { background-attachment: fixed !important;}
}

.wk-bdy { padding:75px 0px 0; margin-left: auto; margin-right: auto; position: relative; z-index: 100; background: #f5f5f5;}
.wk-bdy h2, .wk-bdy p { color: #545454; opacity: 1;}
.wk-bdy-txt { max-width: 1200px; padding: 20px 20px 30px;}
.wk-bdy-txt h2 { margin-bottom: 80px; font-size: 30px;}
.wk-bdy-txt p { font-weight: 300;}
.wk-bdy-txt h4 { opacity:1; color:#FDD45F; font-family: 'Josefin Sans', sans-serif;  font-weight:400 !important;}
.wk-bdy-txt h4:last-of-type { margin-bottom:30px;}

.wk-bdy-txt blockquote { position: relative; color:#057974;}
.wk-bdy-txt cite { font-family: 'Josefin Sans', sans-serif; font-size: 16px; color: #EE9C49;}

.wk-bdy-img { width: 100% !important; height: auto; /*max-width: 2000px;*/ margin: 0 auto; font-size: 0; line-height: 0;}
.wk-bdy-img img { width: 100%; height: auto; min-width:100%;}

@media only screen and (min-width : 700px) {
	.wk-bdy-txt blockquote:before { position: absolute; display: block; content: ""; background: url(images/blockquote.svg) center no-repeat; background-size: contain; width: 150px; height: 150px; left: -90px; top: -50px; z-index: 0; opacity: 0.05;}
}


@media only screen and (min-width : 1025px) {
    .wk-bdy-txt h2 { margin-bottom: 100px; font-size: 50px;}
}

@media only screen and (min-width : 1200px) {
    .wk-bdy-txt { padding: 40px 20px 60px;}
    .wk-bdy { padding:150px 0px 0;}
    .wk-head-txt h1 { font-size: 70px;}
    .wk-bdy-txt cite { font-size: 20px;}
    .wk-head-txt li { font-size: 20px; }
   .wk-bdy-txt blockquote:before { width: 250px; height: 250px; left: -190px; top: -50px; z-index: 0; opacity: 0.05;}
}

@media only screen and (min-width : 1600px) {
    .wk-head-txt li { font-size: 24px; }
}





.wk-foot-feed { height: auto; position:relative; z-index:2500;}
.wk-foot-item { height: 40vh; padding: 0; margin: 0; position: relative;}
.wk-foot-item div { display: block; height: 100%; position: relative; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; background: #333;}
.wk-foot-item a { display: block; height: 100%; width:100%; position: relative;}
.wk-foot-item span { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center;}
.wk-foot-item .wk-foot-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 25%; width: 100%; max-width: 40%; z-index: 10; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; opacity: 0;-webkit-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }
.wk-foot-item:hover .wk-foot-logo { opacity: 1; }


@media only screen and (max-width : 500px) {
    .wk-foot-item:nth-of-type(-n+3) { display: none;}
}

@media only screen and (max-width : 768px) {
    .wk-foot-item:nth-of-type(-n+2) { display: none;}
}


@media only screen and (min-width : 1200px) {
}

@media only screen and (min-width : 1600px) {
}

/* NOTES */

.notes { /*background: #008476; background: -moz-radial-gradient(center, ellipse cover, #008476 0%, #0f6670 100%); background: -webkit-radial-gradient(center, ellipse cover, #008476 0%,#0f6670 100%); background: radial-gradient(ellipse at center, #008476 0%,#0f6670 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008476', endColorstr='#0f6670',GradientType=1 );*/ background:#F4BE29; z-index:1010;}
.notes-head h1.pg-heading { font-size: 32px; line-height: 100%; margin-bottom: 30px;  font-family: 'Fredoka One', sans-serif; color: #fff}
.notes-feed { padding-top: 25px; }

.notes-feed ul { list-style: none; padding: 0; margin: 0; text-align: center;}
.notes-feed ul li { width: 100%; height: auto; margin-bottom: 30px; position: relative; min-height: 300px; border-radius: 0 0 15px 15px !important; background: rgba(255,255,255,0.1); vertical-align: top; text-align: left;}
.notes-feed ul li .notes-feed-img { position: relative; font-size: 0;}
.notes-feed ul li .notes-feed-img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 25% 100%, 30% 75%, 0% 75%); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 25% 100%, 30% 75%, 0% 75%); width: 100%; height: 100%; object-fit: cover; -webkit-transition:all 1s ease-out; transition:all 1s ease-out;}
.notes-feed ul li .notes-feed-txt { position: relative; padding: 20px 30px;}
.notes-feed ul li .notes-feed-txt h1, .notes-feed ul li .notes-feed-txt p { color: #fff; font-family: 'Josefin Sans', sans-serif; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
.notes-feed ul li .notes-feed-txt h1 { text-transform: uppercase; font-weight: 700; margin-bottom: 0; font-size: 18px;}
.notes-feed ul li .notes-feed-txt p { color: rgba(255,255,255,0.7) !important; margin-bottom: 0;}

.notesfeed-pag { margin-top: 30px;}
.notesfeed-pag a { display: block; text-align: center; padding: 10px 20px; margin-bottom: 20px;}
.notesfeed-pag div:nth-of-type(1) a:before { content: '\2190  older'; display: block; font-size: 16px; color: #fff;}
.notesfeed-pag div:nth-of-type(2) a:before { content: 'newer \2192'; display: block; font-size: 16px; color: #fff;}

p.notes-date { font-weight: 300; font-size: 12px; margin-top: 10px;}

.notes-filter { margin-bottom: 30px;}
.notes-filter button { -webkit-appearance: none;  -moz-appearance: none; background: none; width: 100%; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 10px; color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: 16px;}
.notes-filter button:focus, .notes-filter button:active { outline: none !important;}
.notes-filter .dropdown-menu { width: 100%; border-radius: 0; border: 0; background-color: rgba(255,255,255,0.85); padding: 0; margin-top: -1px;}
.notes-filter .dropdown-menu a { padding: 10px 15px; font-size: 16px;}
.notes-filter .dropdown-menu a:hover { background: #0A6F72; color:#fff;}


@media only screen and (min-width : 700px) {
    
    .notes-feed { padding-top: 25px;}
    .notes-feed-txt h1 { font-size: 22px;}
    .notes-feed-txt-in p { font-size: 14px;}
    
    .notes-feed ul { font-size: 0;}
    .notes-feed ul li { width: calc(50% - 10px); display: inline-block;}
    .notes-feed ul li:nth-of-type(odd) { margin-right: 20px;}
    
    .notesfeed-pag a { padding: 10px 0px;}
    .notesfeed-pag div:nth-of-type(1) a { text-align: left;}
    .notesfeed-pag div:nth-of-type(2) a { text-align: right;}
    
    .notesfeed-pag div:nth-of-type(1) a:before { content: '\2190 back'; display: block; font-size: 16px; color: #fff;}
    .notesfeed-pag div:nth-of-type(2) a:before { content: 'more \2192'; display: block; font-size: 16px; color: #fff;}
}

@media only screen and (min-width : 1000px) {
    
    .notes-head h1.pg-heading { font-size: 70px; line-height: 100%; max-width: 725px;}
    .notes-feed-txt { position: relative; padding: 20px 40px;}
    .notes-feed-txt-in p { font-size: 16px;}
    
    .notesfeed-pag div:nth-of-type(1) a:before { content: '\2190 back'; display: block; font-size: 16px; color: #fff;}
    .notesfeed-pag div:nth-of-type(2) a:before { content: 'more notes \2192'; display: block; font-size: 16px; color: #fff;}
    
    .notes-filter button, .notes-filter .dropdown-menu a { font-size: 18px;}
}

@media only screen and (min-width : 1200px) {
    
    .notes-head h1.pg-heading { font-size: 120px; max-width: 1050px; margin-bottom: 75px;}
    
    .notes-feed ul li { width: calc(33% - 10px); display: inline-block; -webkit-transition:all 1s ease-out; transition:all 1s ease-out;}
    .notes-feed ul li:hover { background: rgba(255,255,255,0.25);}
    .notes-feed ul li:hover .notes-feed-img img { -webkit-filter: grayscale(0%); filter: grayscale(0%);}
    .notes-feed ul li:nth-of-type(odd) { margin-right: 0px;}
    .notes-feed ul li:nth-of-type(3n + 2) { margin-left: 20px; margin-right: 20px;}
}



/* articles */
.article-head { width: 100%; height: 50vh; min-height: 250px; position: fixed; border-radius: 0 ; z-index: 5;  -webkit-transition:all 1.0s ease; transition:all 1.0s ease;}
.article-head:before { position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.7); -webkit-transition:all 1.0s ease; transition:all 1.0s ease; z-index: 1;} 

.article-hd-img {width: 100%; height: 100%; background-position: center 25% !important; background-repeat: no-repeat !important; background-size: cover !important;  position: absolute; -webkit-transition:all 1.0s ease; transition:all 1.0s ease; }




.article-hd-txt { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; z-index: 2; -webkit-transition:all 1.0s ease; transition:all 1.0s ease; padding: 20px;}
.article-hd-txt h1 { margin-bottom: 0; color: #fff; font-size: 24px; line-height: 1; -webkit-transition:all 1.0s ease; transition:all 1.0s ease; font-family: 'Josefin Sans', sans-serif; margin-bottom: 20px;}
.article-hd-txt p { color: rgba(255,255,255,0.5); font-size: 16px; font-weight: 400; opacity: 1; margin: 0; -webkit-transition:all 1.0s ease; transition:all 1.0s ease;}
.article-hd-txt p i { position: relative; top: 2px; padding-left: 20px; padding-right: 20px;}

.article-bdy {  background: #f5f5f5; padding-top: calc(50vh + 50px); padding-bottom: 60px;}
.article-bdy p,
.article-bdy a,
.article-bdy li { font-weight: 400;}
.article-bdy blockquote { max-width: 100%; margin: 20px 0 40px 0; line-height: 1.6; background: #077673; padding: 30px; color: #fff;}
.article-foot { background: #dedede; padding-top: 50px;  padding-bottom: 60px;}
.article-foot h1.foot-heading { color: #545454; text-align: center; display: block; max-width: 400px; margin-left: auto; margin-right: auto;}
.article-foot-feed { padding-top: 40px; }

.article-foot-feed .notes-feed-img { position: relative; font-size: 0; padding-bottom: 0px;}
.article-foot-feed .notes-feed-img img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 25% 100%, 30% 75%, 0% 75%); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 60% 75%, 25% 100%, 30% 75%, 0% 75%); width: 100%; height: 250px;}
.article-foot-feed .col-xl-4 { margin-bottom: 30px; padding: 10px; -webkit-transition:all 0.25s ease; transition:all 0.25s ease;}
.article-foot-feed .col-xl-4:hover .notes-feed-img img { -webkit-filter: grayscale(0%); filter: grayscale(0%);}
.article-foot-feed .notes-feed-txt { position: relative; }
.article-foot-feed .notes-feed-txt h1, .notes-feed-txt p { color: #545454; font-family: 'Josefin Sans', sans-serif; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
.article-foot-feed .notes-feed-txt h1 { text-transform: uppercase; font-weight: 700; margin-bottom: 0; font-size: 18px; color: rgba(69,69,69,0.8);}
.article-foot-feed .notes-feed-txt p { color: rgba(69,69,69,0.5) !important; margin-bottom: 0; padding-bottom: 0px;}



@media only screen and (min-width : 1200px) {
    .article-bdy blockquote { float: left; max-width: 40%; margin: 0 40px 20px 0;}
    .article-bdy blockquote.bq-right { float: right; max-width: 40%; margin: 0 0 20px 40px;}
}


    /* sml header versions */
    .article-head-sml { height: 0vh; min-height: 75px;}
    .article-head-sml .article-hd-txt { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2;}
    .article-head-sml .article-hd-img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}
    .article-head-sml:before {background: rgba(0,0,0,0.85);}
    .article-head-sml .article-hd-txt h1, .article-head-sml .article-hd-txt p { font-size: 0px; opacity: 0; line-height: 0;}

@media only screen and (min-width : 700px) {
    .article-bdy {  background: #f5f5f5; padding-top: calc(50vh + 100px);}
    .article-foot-feed .notes-feed-img { position: relative; font-size: 0;}
    .article-foot-feed .notes-feed-txt p { padding-bottom: 40px;}
    .article-foot-feed .col-md-6:nth-of-type(3) { display: none;}
    
    .article-hd-txt { max-width: 600px;}
    .article-hd-txt h1 { font-size: 28px;}
    .article-head-sml .article-hd-txt h1 { font-size: 24px;}
    
    .article-foot { padding-bottom: 100px;}
}

@media only screen and (min-width : 992px) {
    .article-head-sml { height: 0vh; min-height: 80px;}
    .article-bdy {  background: #f5f5f5; padding-top: calc(50vh + 100px);}
    .article-hd-txt { max-width: 800px;}
    .article-hd-txt h1 { font-family: 'Fredoka One', sans-serif; font-size: 40px; margin-bottom: 20px;}
    .article-foot { padding-top: 75px; padding-bottom: 100px;}
    .article-foot h1.foot-heading { font-size: 40px;}
}

@media only screen and (min-width : 1100px) {
    .article-head-sml { height: 0vh; min-height: 90px;}
    .article-hd-txt { max-width: 1000px;}
    .article-hd-txt h1 { font-family: 'Fredoka One', sans-serif; font-size: 60px;}
        
    /* sml header versions */
    .article-head-sml { height: 50px;}
    .article-head-sml .article-hd-txt h1 { font-size: 40px; font-family: 'Fredoka One', sans-serif;}
}


@media only screen and (min-width : 1200px) {    
    .article-foot-feed .col-md-6:nth-of-type(3) { display: inline-block;}
    .article-foot { padding-top: 100px; padding-bottom: 150px;}
}


/* share buttons */
.cta-char-wrap { border-top: 1px dashed #ccc; margin-top: 60px; padding-top: 60px;}
.cta-share { height: 25px; width: 280px;  display: block; margin-left: auto; margin-right: auto;  text-align: center;-webkit-transition:all 0.5s ease; transition:all 0.5s ease; overflow: hidden;}
.cta-share p { margin: 0; margin-bottom: 10px; padding: 0; line-height: 1; text-transform: uppercase;}
.cta-share p i { color: #B11212; padding: 0 10px;}
.cta-share ul { list-style: none; position: relative; margin: 0; padding: 0; text-align: center; }
.cta-share ul li { display: inline-block; margin:0 5px;}
.cta-share ul li a { padding: 0 5px; color: #aaa;}

.cta-share:hover, .cta-share.hover_effect {  height: 60px; cursor: pointer;}
.cta-share ul li:nth-of-type(1) a:hover { color: #567CA0;}
.cta-share ul li:nth-of-type(2) a:hover { color: #cc9137;}
.cta-share ul li:nth-of-type(3) a:hover { color: #CE6AAD;}
.cta-share ul li:nth-of-type(4) a:hover { color: #15B7B7;}

/*modal default*/
.close-btn { float: right; font-size: 1.5rem; font-weight: 300; line-height: 1; color: #f5f5f5 !important; text-shadow: 0 1px 0 transparent; opacity: .5; z-index: 2000;}
.close-btn i { color: #f5f5f5 !important;}
.close-btn:not(:disabled):not(.disabled) { cursor: pointer; }
.close-btn:not(:disabled):not(.disabled):hover, .close-btn:not(:disabled):not(.disabled):focus { color: #000; text-decoration: none; opacity: .75; }
button.close-btn { padding: 0; top: 20px; right: 20px; position: absolute; font-size: 14px; font-family: 'Josefin Sans', sans-serif; background-color: transparent; border: 0; -webkit-appearance: none; }	

.modal-full { min-width: 100%; margin: 0; }
.modal-full .modal-content { border-radius: 0; border: 0; box-shadow: none; min-height: 100vh; }

.modal-body { padding: 0 !important; padding-top: 0 !important; }
.modal-body img { width: 100%; max-width: 200px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 30px;}
.modal-body i { font-size: 24px; color: #8dc63f; margin-bottom: 10px;}
.modal-body button { top: -20px;}
.modal-body button i { color: #545454;}

@media only screen and (min-width : 700px) {
    .modal-body { padding: 0 !important;}
    button.close-btn { font-size: 15px;}
}

@media only screen and (min-width : 1000px) {
    .modal-body { padding: 0 !important; }
    button.close-btn { font-size: 16px;}
    .modal-body button { top: 0px;}
}


/* landing */
.landing-head { width: 100%; height: 100vh; min-height: 400px; position:relative; border-radius: 0 ; z-index: 5;  -webkit-transition:all 1.0s ease; transition:all 1.0s ease;}
.landing-head:before { position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.6); -webkit-transition:all 1.0s ease; transition:all 1.0s ease; z-index: 1;} 

.landing-hd-img {width: 100%; height: 100%; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;  position: absolute; -webkit-transition:all 1.0s ease; transition:all 1.0s ease; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(100%); }

.landing-hd-txt { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; z-index: 2; -webkit-transition:all 1.0s ease; transition:all 1.0s ease; padding: 20px;}
.landing-hd-txt h1 { margin-bottom: 0; color: #fff; font-size: 42px; margin-bottom: 30px; line-height: 1; font-family: 'Fredoka One', sans-serif;}

.landing-hd-txt p { margin-bottom: 0; color: #fff; font-size: 16px; line-height: 1.6; font-family: 'Josefin Sans', sans-serif; max-width: 600px; padding: 0 30px; margin: 0 auto; font-weight:400;}

.landing-hd-txt ul { list-style: none; position: relative; margin: 20px 0 0; padding: 0; text-align: center;}
.landing-hd-txt ul li { padding: 0; margin: 0 auto; margin-bottom: 15px; width: 280px;}
.landing-hd-txt ul li a { margin: 0 auto; width: 100%;}

.landing-hd-txt a { display: inline-block; background: #F19435; color: #fff; padding: 20px 60px 15px !important; margin-top: 40px; font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 0; -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0); -webkit-transition:all 1.0s ease; transition:all 1.0s ease; position: relative; border-radius: 7px; line-height: 1; overflow: hidden;}
.landing-hd-txt a span { position: relative; z-index: 1;}
.landing-hd-txt a:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0%; height: 0%; display: block; content: ''; background: #EDB13E; -webkit-transition:all 1.0s ease; transition:all 1.0s ease;-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0;}
.landing-hd-txt a:hover:before { width: 800px; height: 800px; opacity: 1;}

.landing-bdy {  background: #f5f5f5; padding-top: 75px;}



.land-sec-wrp { padding: 50px 0px;}
.land-sec-wrp:nth-of-type(even) { /*background: #fff !important; -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%); clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);*/padding: 75px 0px;}
.land-sec-wrp .row { padding: 30px 0; max-width: 1600px; display: block; margin-left: auto; margin-right: auto;}

.land-sec-wrp .land-sec-item h1 { text-align:center;}
.land-sec-wrp:nth-of-type(1) .land-sec-item h1 { color: #D0E44C !important;}
.land-sec-wrp:nth-of-type(2) .land-sec-item h1 { color: #196776 !important;}
.land-sec-wrp:nth-of-type(3) .land-sec-item h1 { color: #699287 !important;}
.land-sec-wrp:nth-of-type(4) .land-sec-item h1 { color: #8FCE7A !important;}
.land-sec-wrp:nth-of-type(5) .land-sec-item h1 { color: #D0E44C !important;}

.land-sec-wrp h2 { color: #0A6F72 !important;}
.land-sec-wrp p  { font-weight:400 !important;}
.land-sec-wrp img { margin-bottom: 20px;}

.land-wk-feed { text-align: center; padding: 50px 0px;}

@media only screen and (min-width : 700px) {
    .landing-head { height: 75vh;}
    .landing-hd-txt { max-width: 600px;}
    .landing-hd-txt h1 { font-size: 44px;}
    .landing-hd-txt p  { font-size: 18px;}
    
    .landing-hd-txt ul li { display: inline-block; margin:30px 10px 0;}
    
    .land-sec-wrp, .land-wk-feed { padding: 75px 0px;}
    .land-sec-wrp:nth-of-type(even) { padding: 125px 0px;}
    
}

@media only screen and (min-width : 992px) {
    
    .article-hd-txt { max-width: 800px;}
    .landing-hd-txt h1 { font-family: 'Fredoka One', sans-serif; font-size: 50px;}
    
    .landing-hd-txt a { font-size: 22px; padding: 20px 60px;}
    
    .land-sec-wrp, .land-wk-feed { padding: 100px 0px;}
    
        .land-sec-wrp:nth-of-type(odd) .row { display: flex;}
		.land-sec-wrp:nth-of-type(odd) .row div:first-of-type { order: 0;}
		.land-sec-wrp:nth-of-type(even) .row { display: flex;}
		.land-sec-wrp:nth-of-type(even) .row div:first-of-type { order: 0;}
	
	.land-sec-wrp .land-sec-item h1 { font-size:40px !important; text-align:right !important;}
	
	.landing-hd-txt p  { font-size: 20px;}
}

@media only screen and (min-width : 1100px) {
    .landing-hd-txt { max-width: 1000px;}
    .landing-hd-txt h1 { font-family: 'Fredoka One', sans-serif; font-size: 70px;}
    
    .landing-hd-txt ul li { display: inline-block; margin:60px 10px 0;}
    
    .land-sec-wrp, .land-wk-feed { padding: 125px 0px;}
	
	.land-sec-wrp .land-sec-item h1 { font-size:50px !important;}
	.landing-hd-txt p  { font-size: 24px;}
}


@media only screen and (min-width : 1200px) {    
    .land-sec-wrp { padding: 150px 0px;}
	.land-sec-wrp .land-sec-item h1 { font-size:70px !important;}
}

.land-wk-feed h2, .land-wk-feed p { max-width: 800px; display: block; margin-left: auto; margin-right: auto;}

.land-wk-feed ul { list-style: none; position: relative; margin: 30px 0 0; padding: 15px; text-align: center; font-size: 0; display: flex; flex-direction: column; justify-content: space-between;}
.land-wk-feed ul li { display: inline-block; width: 100%; height: 250px; text-align: left; position: relative; padding-bottom: 20px; margin-bottom: 30px;}
.land-wk-feed .hme-wk-img { height: calc(100% - 20px); width: 100%; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; position:relative; }
.land-wk-feed .hm-wk-wrap h2 { margin-bottom: 40px; font-size: 20px; line-height: 1; color: #ccc; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase;}
.land-wk-feed .hme-wk-txt p { text-transform: uppercase; font-size: 13px; padding: 10px 0px;}

    .land-wk-feed .hme-wk-txt { position: relative; top: 0%; left: 0%; -webkit-transition:all 0.9s ease; transition:all 0.9s ease; width: 100%; height: 100%; opacity: 1; padding: 30px; display: block;}
    .land-wk-feed .hme-wk-txt p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 16px; -webkit-transition:all 0.9s ease; transition:all 0.9s ease; text-transform: none; color: rgba(255,255,255,0); font-family: 'Josefin Sans', sans-serif;}
    .land-wk-feed ul li:hover .hme-wk-txt p { color: rgba(255,255,255,1);}

@media only screen and (min-width :700px) {
    .land-wk-feed ul li { height: 350px; margin-bottom: 40px;}
    .land-wk-feed h2 { margin-bottom: 50px; font-size: 25px;}
    .land-wk-feed .hme-wk-txt p { font-size: 15px;}
}

@media only screen and (min-width :992px) {
    .land-wk-feed .container { position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%);}
    .land-wk-feed ul {flex-direction: row; justify-content: space-between; margin: 50px 0 0; padding:20px;}
    .land-wk-feed ul li { width: 33.33%; margin-bottom: 20px;}
    .land-wk-feed h2 { font-size: 25px;}
    .land-wk-feed .hme-wk-txt p { font-size: 20px;}
}


@media only screen and (min-width :1200px) {
    .land-wk-feed ul li { width: 33.33%; height: 350px; padding-bottom: 0;}
    .land-wk-feed ul li a img { opacity: 0;}
    .land-wk-feed h2 { font-size: 35px;}
    .land-wk-feed .hme-wk-img { height:100%; position:relative;}
    .land-wk-feed .hme-wk-txt { position: relative; top: 0%; left: 0%; -webkit-transition:all 0.9s ease; transition:all 0.9s ease; width: 100%; height: 100%; opacity: 1; padding: 30px; display: block;}
    .land-wk-feed .hme-wk-txt p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 28px; -webkit-transition:all 0.9s ease; transition:all 0.9s ease; text-transform: none; color: rgba(255,255,255,0);}
    .land-wk-feed ul li:hover .hme-wk-txt p { color: rgba(255,255,255,1);}
}




/* modal - chat */
#modal-chat .modal-content, .modalchat-top { background: #222;}
.modalchat-top .row { max-width: 1400px; margin-left: auto; margin-right: auto;}

.modalchat-wrap { position: relative;}
.modalchat-intro { text-align: center; margin-bottom: 30px; margin-top: 40px !important; position: relative;}
.modalchat-intro p { font-size: 20px; color: #f5f5f5; font-weight: 400; max-width: 500px; display: block; margin-left: auto; margin-right: auto;}
.modalchat-intro img { width: 100px; height: auto;}
.modalchat-intro p#lblGreetingschat { font-size: 24px; color: #057B74; font-family: 'Fredoka One', sans-serif; margin-top:40px;}

.modalchat-dets { padding: 30px 0 10px; text-align: center; max-width: 1000px; position: relative; z-index: 1;}
.modalchat-dets h3, .modalchat-dets p { color: #f5f5f5;}
.modalchat-dets h3 { font-size: 20px;}
.modalchat-dets p { font-weight: 400;}
.modalchat-dets p span { font-size: 14px;}

.modalchat-dets .col-4 .chat-ic { width: 50px; height: 50px; position: relative;  margin-left: auto; margin-right: auto; margin-bottom: 20px; opacity: 0.2;}
.modalchat-dets .col-4 .chat-ic i {color: #f5f5f5; font-size: 30px;}


.modalchat-form {padding:30px 0 30px; position: relative; min-height: 400px; }
.modalchat-form h3 { text-align: center; color: #fff; font-family: 'Josefin Sans', sans-serif;}				
.modalchat-form-in {max-width: 1000px; display: block; margin-left: auto; margin-right: auto; padding: 0 20px;}	

@media only screen and (min-width : 700px) {
    .modalchat-intro p#lblGreetingschat { font-size: 36px; font-family: 'Fredoka One', sans-serif;}
}

@media only screen and (min-width : 992px) {
    .modalchat-intro p#lblGreetingschat { font-size: 48px; font-family: 'Fredoka One', sans-serif; background: linear-gradient(to right, #f7941d 0%, #fc7f01 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top:80px;}
    .modalchat-intro p { font-size: 28px; max-width: 700px;}
	.modalchat-form { padding-top:80px;}
}


/* social list */

.home-social { position: absolute; bottom: 40px; display: block; width: 100%; z-index: 2;}
.home-social ul { list-style: none; position: relative; margin: 0; padding: 0; text-align: center;}
.home-social ul li { display: inline-block; padding: 0 5px;}
.home-social ul li a {color: rgba(255,255,255,1); font-size: 14px; font-weight: 400; letter-spacing: 2px;}
.home-social ul li a:hover {color: #333; border-bottom:2px solid white !important;}



				
/** FOOTER **/
footer {  background: transparent url(images/bgs/bg-footer.svg) top center no-repeat; background-size: cover; padding:80px 10px 20px; position:relative; position: relative; height: 180px; }
footer p, footer p a {font-size:14px; color: #545454; text-align: center; font-weight: 400;}

footer ul { list-style: none; position: relative; padding: 0; margin: 0 auto 20px; text-align: center;}
footer ul li { display: inline-block; padding: 0 5px;}
footer ul li a {color: #545454; font-size: 14px;}
footer ul li a:hover{ color: #018175;}

.about footer { background-color:#f5f5f5; }
	
	@media only screen and (min-width :700px) {
        .home-social ul li, footer ul li { padding: 0 10px;}
        .home-social ul li a, footer ul li a {font-size: 16px;}
        
        body.home footer { position: absolute; bottom: 0; left: 0;}
	}

/* misc */
	
/* form */
.gform_wrapper label.gfield_label { font-size:16px; font-family: 'Josefin Sans', sans-serif; color:#057974; font-weight:400; padding:0 0 3px 0; margin:10px 0 0 0;}
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper textarea, .gform_wrapper input[type=submit], .gform_wrapper input[type=number], .gform_wrapper input[type=tel] { border-radius: 0; background:none; padding:7px !important; resize:none; border:0; border-bottom: 1px solid #fff; width:100%; margin:0 0 0 0; font-size:20px; font-family: 'Josefin Sans', sans-serif; color:rgba(255,255,255,0.6); font-weight:400;}

.gform_wrapper input:focus, .gform_wrapper textarea:focus {border-bottom:1px solid #333; color:#333 !important;}
.gform_wrapper input[type=submit] {  color:#222 !important; background:#fff; font-weight:800; width:100%; max-width:400px; font-size:20px; font-family: 'Josefin Sans', sans-serif; cursor:pointer; margin:0; -webkit-appearance: none; border-bottom:0; padding:15px 40px 10px !important; display:block; border-radius:10px;  -webkit-transition:all .4s ease-out; transition:all .4s ease-out;}
.gform_wrapper input[type=submit]:hover {  color:#fff !important; background:#008476; }


.gform_confirmation_wrapper, .gform_confirmation_wrapper h1, .gform_confirmation_wrapper p { color:#333 !important;}
.gform_confirmation_wrapper { font-size:20px; font-family: 'Josefin Sans', sans-serif; color:#333;}
.gform_confirmation_wrapper, .gform_confirmation_wrapper p { font-weight:400;}

	
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload input {font-size:18px !important; font-weight:400 !important;}
body .gform_wrapper .button.gform_button_select_files { height: 39px !important; background-color:#464e0a !important; color:#333 !important; }

.ginput_container_select { background: url(https://studio313.com.au/313/wp-content/uploads/2019/10/313-select-arrow.png) no-repeat 98% center;  height: 48px; border-radius: 0; border:0; overflow: hidden; width: 100%; border-bottom: 1px solid  #fff; font-size:20px !important; font-family: 'Josefin Sans', sans-serif !important; color:#333 !important; font-weight:400 !important; margin-top:30px !important; margin-bottom:30px;}
.ginput_container_select select { background: transparent; border: none; border-radius: 0; height: 48px;  padding:10px 7px !important;  width: calc(100% + 30px); -webkit-appearance: none;  -moz-appearance: none; font-size:20px; font-family: 'Josefin Sans', sans-serif; color:#333; font-weight:400;}
.ginput_container_select select option { color:#222 !important; padding:7px 0 !important;}
	
.gform_wrapper ::-webkit-input-placeholder, .gform_wrapper select::-webkit-input-placeholder { font-size:20px !important; font-family: 'Josefin Sans', sans-serif !important;color: #333; opacity:1; font-weight:400;}
.gform_wrapper ::-moz-placeholder, .gform_wrapper select::-moz-placeholder { font-size:20px !important; font-family: 'Josefin Sans', sans-serif !important;color: #333; opacity:1; font-weight:400;}
.gform_wrapper :-ms-input-placeholder, .gform_wrapper select:-ms-input-placeholder { font-size:20px !important; font-family: 'Josefin Sans', sans-serif !important;color: #333; opacity:1; font-weight:400;}
.gform_wrapper :-moz-placeholder, .gform_wrapper select:-moz-placeholder { font-size:20px !important; font-family: 'Josefin Sans', sans-serif !important;color:#333; opacity:1; font-weight:400;}

	
.gform_wrapper label {color: rgba(255,255,255,0.4); font-weight:400;}
	
	
body img.gform_ajax_spinner { display: none !important; }

input[type="checkbox"]:checked + label { font-weight:400 !important; color:#333 !important;}	
.gfield_checkbox li {position: relative;padding-left: 40px !important;}
.gfield_checkbox li label { padding-left: 25px !important;}
.gfield_checkbox li label:after { content: ""; background: #333; border:1px solid #A7A9AC; width: 15px; height: 15px; display: block; position: absolute; left: 0; top: 5px; border-radius: 3px; z-index: 0;}
.gfield_checkbox li label:before { content: ""; display: block; position: absolute; width: 6px; height: 15px; border: solid #333; border-width: 0 3px 3px 0; left: 6px; top: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; z-index: 1; transition: all 100ms;}
input[type="checkbox"] { opacity: 0; outline: none; z-index: 100; width: 15px; height: 25px; top: 0; left: 0; position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
input[type="checkbox"] + label { cursor: pointer;}
input[type="checkbox"]:checked + label:before { opacity: 1; top: 3px;}

	.no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.no-r-pad { padding-right:0 !important;}
	.no-l-pad { padding-left:0 !important;}
	.hidden {display:none; height:0; width:0;}
	.display {display:block;}

.validation_message { color:#fff !important; font-weight:400 !important;}

@media only screen and (min-width : 993px) {
	.d-no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.d-no-r-pad { padding-right:0 !important;}
	.d-no-l-pad { padding-left:0 !important;}
	}

@media only screen and (min-width : 700px) and (max-width : 992px) {
	.t-no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.t-no-r-pad { padding-right:0 !important;}
	.t-no-l-pad { padding-left:0 !important;}
}

@media only screen and (max-width : 699px) {
	.m-no-s-pad { padding-left:0 !important; padding-right:0 !important;}
	.m-no-r-pad { padding-right:0 !important;}
	.m-no-l-pad { padding-left:0 !important;}
	}

.priv-cont label,
.gf-pay { max-width:1000px !important;}
.gf-pay, .gf-pay p, #gform_wrapper_3.gform_wrapper .gfield_description { color:#f5f5f5;}
#gform_wrapper_3.gform_wrapper input[type=text] { color:#545454;}

#gform_wrapper_3 #field_3_13 { position: absolute !important; left:-9999; font-size:0;}

#gform_wrapper_3 .gfield_description { font-weight:400;}

#gform_wrapper_3.gform_wrapper input[type=text],
#gform_wrapper_3.gform_wrapper input[type=email],
#gform_wrapper_3.gform_wrapper textarea,
#gform_wrapper_3.gform_wrapper select,
#gform_wrapper_3.gform_wrapper option,
#gform_wrapper_3.gform_wrapper input[type=submit],
#gform_wrapper_3.gform_wrapper input[type=number],
#gform_wrapper_3.gform_confirmation_wrapper,
#gform_wrapper_3.gform_confirmation_wrapper h1,
#gform_wrapper_3.gform_confirmation_wrapper p .gform_confirmation_wrapper { color:#f5f5f5 !important; border:0; border-bottom:1px solid #ccc; }

#gform_wrapper_3.gform_wrapper .ginput_total { color:#f5f5f5;}

#gform_wrapper_3.gform_wrapper input:focus, #gform_wrapper_3.gform_wrapper textarea:focus {border-bottom:1px solid #FB8509;}

#gform_wrapper_3 .ginput_card_expiration_container { background: url(/images/select.png) no-repeat 98% 0;  height: 39px; border-radius: 0; overflow: hidden; width: 99%; border-bottom:1px solid #ccc; font-size:20px !important; font-family: 'Josefin Sans', sans-serif !important; color:#545454 !important; font-weight:400 !important; margin-top:30px !important;}
#gform_wrapper_3 .ginput_card_expiration_container select { background: transparent; border: none; border-radius: 0; height: 39px; padding: 5px 0 !important;  width: calc(100% + 30px); -webkit-appearance: none;  -moz-appearance: none; font-size:20px; font-family: 'Josefin Sans', sans-serif; color:#545454; font-weight:400;}

#gform_wrapper_3.gform_wrapper input[type=submit], #gform_wrapper_3.gform_wrapper input[type=submit]:hover {  color:#222 !important;}

#gform_confirmation_wrapper_3 { min-height:100vh; padding:10% 0; color:#545454 !important;}


#gform_wrapper_3.gform_wrapper .gform_confirmation_wrapper { color:#545454 !important;}
#gform_wrapper_3.gform_wrapper .gfield_error { background:#F5F5F5 !important;}
#gform_wrapper_3.gform_wrapper .validation_message, #gform_wrapper_3.gform_wrapper .validation_error { color:#FB8509 !important; font-weight:700 !important; text-transform:uppercase; border:2px solid #FB8509 !important; padding:10px 20px !important; text-align:center !important;}

#gform_wrapper_3 .gfield_required { color:#222; position:relative;}
#gform_wrapper_3 .gfield_required:after {color:#ccc; content:'[ required ]'; font-size:12px; font-family: 'Josefin Sans', sans-serif; text-transform:uppercase;}

.modal {z-index: 3000 !important;}



.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}



.folio-grid-sq { z-index:1010; background:#222;}
.folio-grid-sq ul { list-style: none; position: relative; margin: 0; padding: 0; text-align: center; width: 100%; font-size: 0; margin-top: 0px; margin-bottom: 100px; z-index:1010;}
.folio-grid-sq ul li { display: inline-block; text-align: center; width: 100% !important; height: 150px; position: relative; margin: 0; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; overflow: hidden; border:1px solid #222;}
.folio-grid-sq ul li a { display: block; width: 100%; height: 100%; background: #222; -webkit-transition:background 1.5s ease; transition:background 1.5s ease;}
.folio-grid-sq ul li img { width: 70%; max-width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transition:all 0.75s ease; transition:all 0.75s ease;}

.folio-grid-sq ul:hover > li img { opacity: 0.1; -webkit-transition:all 0.75s ease; transition:all 0.75s ease;}
.folio-grid-sq ul:hover > li a:hover img { opacity: 0.9; -webkit-transition:all 0.75s ease; transition:all 0.75s ease;}

.folio-grid-sq ul li:hover img { -webkit-filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); }


@media only screen and (max-width : 700px) {
.folio-grid-sq ul li { display: inline-block !important; width: 150px !important; height: 150px; margin: 0;}
.folio-grid-sq ul li:nth-child(n+9) { display: none; height: 0; width: 0;}
}

@media only screen and (min-width : 700px) {
    .folio-grid-sq ul li { width: 220px !important; height: 150px; margin: 0;}
}

@media only screen and (min-width : 700px) and (max-width : 992px) {
.folio-grid-sq ul li:nth-child(n+10) { display: none; height: 0; width: 0;}
}

@media only screen and (min-width : 992px) {
    .folio-grid-sq ul { margin-top: 0px; margin-bottom: 200px;}
    .folio-grid-sq ul li { width: 230px !important; height: 200px;}
	.folio-grid-sq ul li a:hover img {filter: drop-shadow(0px 0px 15px #44A89C); -webkit-transition:all 0.75s ease; transition:all 0.75s ease;}
	
	.folio-grid-sq ul li a[href*="sportette"]:hover img {filter: drop-shadow(0px 0px 25px #44A89C);}
    .folio-grid-sq ul li a[href*="bench"]:hover img {filter: drop-shadow(0px 0px 25px #000);}
    .folio-grid-sq ul li a[href*="asa"]:hover img {filter: drop-shadow(0px 0px 25px #D59F38);}
    .folio-grid-sq ul li a[href*="cork"]:hover img {filter: drop-shadow(0px 0px 25px #459798);}
    .folio-grid-sq ul li a[href*="goodwork"]:hover img {filter: drop-shadow(0px 0px 25px #162D93);}
    .folio-grid-sq ul li a[href*="avanser"]:hover img {filter: drop-shadow(0px 0px 25px #44A89C);}
    .folio-grid-sq ul li a[href*="reed"]:hover img {filter: drop-shadow(0px 0px 25px #D88530);}
    .folio-grid-sq ul li a[href*="strategic"]:hover img {filter: drop-shadow(0px 0px 25px #165CA6);}
    .folio-grid-sq ul li a[href*="fresh"]:hover img {filter: drop-shadow(0px 0px 25px #84A351);}
    .folio-grid-sq ul li a[href*="fierce"]:hover img {filter: drop-shadow(0px 0px 25px #C61D77);}
    .folio-grid-sq ul li a[href*="fluid"]:hover img {filter: drop-shadow(0px 0px 25px #DF4A28);}
    .folio-grid-sq ul li a[href*="colas"]:hover img {filter: drop-shadow(0px 0px 25px #303940);}
    .folio-grid-sq ul li a[href*="nexus"]:hover img {filter: drop-shadow(0px 0px 25px #11547F);}
    .folio-grid-sq ul li a[href*="bronx"]:hover img {filter: drop-shadow(0px 0px 25px #9F0E1E);}
}

@media only screen and (min-width : 1100px) {
    .folio-grid-sq ul li { width: 255px !important; height: 205px;}
}

@media only screen and (min-width : 1200px) {
    .folio-grid-sq ul li { width: 280px !important; height: 240px;}
}

@media only screen and (min-width : 1300px) {
    .folio-grid-sq ul li { width: 305px !important; height: 245px;}
}


@media only screen and (min-width : 1400px) {
    .folio-grid-sq ul li { width: 330px !important; height: 250px;}
}

@media only screen and (min-width : 1500px) {
    .folio-grid-sq ul li { width: 355px !important; height: 275px;}
}

@media only screen and (min-width : 1600px) {
    .folio-grid-sq ul li { width: 380px !important; height: 290px;}
}





/* instagram */
.insta-grid-sq { margin-bottom: 50px;}

@media only screen and (min-width : 700px) {
    .insta-grid-sq { margin-bottom: 50px;}
}

@media only screen and (min-width : 992px) {
    .insta-grid-sq { margin-bottom: 100px;}
}

@media only screen and (min-width : 1200px) {
    .insta-grid-sq { margin-bottom: 150px;}
}


/* contact modal caro */
.modal, .modal-dialog { z-index:9999 !important;}
	.carousel-inner { height: 100%; min-height:650px !important;}
.modalchat-form p.form-head { font-family: 'Fredoka One', sans-serif; font-size: 24px; text-align: center; margin-bottom: 40px;}
.carousel .carousel-item { min-height: 250px;}
.carousel .carousel-item .carousel-caption { text-align: center; width: 100%; height: 100%; min-height:650px !important; left: 0; top: 0;}
.caro-top p a { font-size: 18px; font-weight: 700;}
.caro-top p, .caro-top p i {color:#087473; -webkit-transition:all .4s ease-out; transition:all .4s ease-out;}
.caro-top p i { position: relative; top: 2px; margin-right: 7px;}
.caro-bottom { display: block; margin-top: 40px;}
.caro-bottom a { display: inline-block; padding: 10px 0; margin-bottom: 10px; font-size: 20px;}
.caro-bottom a i { color: rgba(255,255,255,0.1); margin-left: 10px; font-size: 24px; -webkit-transition:all .4s ease-out; transition:all .4s ease-out;}
.caro-bottom a:hover i { color:#087473;}
.caro-bottom a:hover, .caro-top p:hover { cursor: pointer;}
.caro-top p:hover i { color: #fff;}

p.contact-sml { font-family: 'Josefin Sans', sans-serif; color:#f5f5f5; font-weight:400; font-size:22px;}

@media only screen and (min-width : 700px) {
    .modalchat-form p.form-head { font-size: 30px;}
    .caro-bottom a { font-size: 24px;}
}

@media only screen and (min-width : 992px) {
    .modalchat-form p.form-head { font-size: 36px;}
    .caro-bottom a { font-size: 30px;}
    .caro-bottom a i { font-size: 34px;}
}

@media only screen and (min-width : 1200px) {
    .modalchat-form p.form-head { font-size: 42px;}
    .caro-bottom a { font-size: 36px;}
}
	
	
	.div-404 { padding:38vh 20px; text-align:center; background:#f5f5f5;}
	.div-404 h1 { color:#333;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

a.insta-link {text-align:right; margin-bottom:20px; display:block; font-weight:400; text-decoration:none !important; border-bottom:0 !important;}
a.insta-link:hover { text-decoration:none !important; border-bottom:0 !important; color:#fff;}

li.active a { opacity:0.5 !important; }

.priv-cont { padding-bottom:150px;}
.priv-cont p { font-weight:400 !important;}


.gform_wrapper div.validation_error {
color: #fff !important;
font-size: 100% !important;
font-family: 'Josefin Sans', sans-serif !important;
font-weight: normal !important;
border: 0px !important;
padding: 0 !important;
}

body .gform_wrapper li.gfield.gfield_error, body .gform_wrapper li.gfield.gfield_error.gfield_contains_required {
border-color: transparent !important;
color: #444 !important;
background-color: #222 !important; 
}

.gform_wrapper .gfield_error .gfield_label, .gform_wrapper .validation_message {
color: #FFFFFF !important;
}

.gform_wrapper li.gfield_error input[type="email"],
.gform_wrapper li.gfield_error input[type="number"],
.gform_wrapper li.gfield_error input[type="password"],
.gform_wrapper li.gfield_error input[type="tel"],
.gform_wrapper li.gfield_error input[type="text"],
.gform_wrapper li.gfield_error input[type="url"],
.gform_wrapper li.gfield_error textarea {
border: 1px solid #000;
}

a.abilities-cta { display:inline; color:#077673; font-weight:400; text-align:right;}
a.abilities-cta i { float:right; margin-left:10px; color:#077673;}

/** base contact **/
.btm-contact { display:none !important; height:0px; width:0px;}
.bdy-wp { z-index: 100;}

/* contact pg */

.contact-wrap { background: #222; min-height: calc(100vh - 70px); width: 100%; position:relative; z-index:1000;}

.contact-blk, .contact-main-top, .contact-main-loc, .contact-main-form { padding: 0px 20px 0px;}

.contact-in {/*background: #008476; background: -moz-radial-gradient(center, ellipse cover, #008476 0%, #0f6670 100%); background: -webkit-radial-gradient(center, ellipse cover, #008476 0%,#0f6670 100%); background: radial-gradient(ellipse at center, #008476 0%,#0f6670 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008476', endColorstr='#0f6670',GradientType=1 );*/ background:#FDD45F; padding: 70px 0px 0px; position: relative;}

.cont-blk-in p { float:left; margin-bottom: 10px; font-family: 'Fredoka One', sans-serif; font-size: 30px; color: #333; letter-spacing: 1px;}

.contact-main-top p { color: #333; font-weight: 400; margin-bottom: 10px;}
.contact-main-top p.contact-ph { position: relative; text-align: center; margin-bottom: 20px; display: inline-block; left: 10%;}
.contact-main-top p.contact-ph a { font-family: 'Fredoka One', sans-serif; font-size: 35px; position: relative; margin-bottom: 20px; letter-spacing: 1px; color: #fff; line-height: 1;}
.contact-main-top p.contact-ph i { color: rgba(255,255,255,0.3); position: absolute; font-size: 65px; top: -10px; left: -40px;}

.contact-main-loc { background: #222; padding: 20px 80px 20px 20px;}
.contact-main-loc p { text-align: right; font-family: 'Fredoka One', sans-serif; font-size: 22px; letter-spacing: 1px; color: #008476; position: relative; margin: 0; z-index: 2;}
.contact-main-loc p i { position: absolute; top: -0px; right: -45px; color: rgba(255,255,255,0.1); font-size: 65px; z-index: 1;}

.contact-main { clear: both;}

.contact-main-form { padding: 30px 20px;}
.contact-main-form h6 {font-family: 'Fredoka One', sans-serif; font-size: 22px; letter-spacing: 1px; color:#fff; margin-bottom: 20px;}

@media only screen and (min-width : 700px) {
    .contact-in { background: #222; display: flex;}
    .contact-blk, .contact-main { width: 40vw; min-height: calc(100vh - 70px); align-content: flex-start; padding-top: 40px;}
	.contact-main { width: 60vw; }
    .contact-blk { background: url(images/contact-pooch.svg) bottom left no-repeat; background-size: 80%;}
    .cont-blk-in p { text-align: right; display: block; float: right; color: #f97d21; font-size: 34px;}
    
    .contact-main-top, .contact-main-loc, .contact-main-form { padding-left: 20%;}
    
    .contact-main { position: relative; background-color: #FDD45F;  padding-top: 70px; background-image: url(images/contact-curve.png); background-position: center left; background-repeat: no-repeat; background-size: contain;}
    .contact-main-top p { max-width: 400px;}
    .contact-main-top p.contact-ph { left: 0%;}
    
    .contact-main-top, .contact-main-loc, .contact-main-form { max-width: 800px;}
	
	.contact-main-loc { border-radius:0 30px 30px 0;}
}

@media only screen and (min-width : 1000px) {
    .cont-blk-in p { font-size: 40px;}
    .contact-main-top p { margin-bottom: 25px;}
    .contact-blk, .contact-main-top { padding-top: 60px;}
    .contact-main-top p.contact-ph { margin-top: 30px; margin-bottom: 50px;}
    .contact-main-top p.contact-ph a { font-size: 45px !important;}
    
    .contact-main-loc { padding: 40px 80px 40px 20px;}
    .contact-main-loc p, .contact-main-form h6 { font-size: 30px;}
    .contact-main-form h6 { margin-bottom: 30px;}
    .contact-main-loc p i { font-size: 90px;}
}

@media only screen and (min-width : 1200px) {
    .contact-blk { background-size: 70%; }
     .cont-blk-in p { font-size: 50px;}
    .contact-main-top, .contact-main-loc, .contact-main-form { padding-left: 12%;}
	.contact-main-loc { padding: 40px 120px 40px 20px;}
    .contact-main-top p.contact-ph { left: 5%;}
    .contact-main-form { padding-top: 50px;}
    .contact-main-form h6 { margin-bottom: 40px;}
}

.work-bk-cta a { text-align:center; font-size:24px; color:#545454;}