/*
Theme Name:		 Saatchi Social Website
Theme URI:		 https://pixelatedorange.com
Description:	 Theme by Pixelated Orange
Author:			 Pixelated Orange
Author URI:		 https://pixelatedorange.com
Template:		 twentyseventeen
Version:		 1.0
Text Domain:	 Saatchi Social
-------------------------------------------------------------- */

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

/* =CUSTOM */

body{height: auto!important}

body, .site-content-contain{background-color: #f2f2f2; font-family: sofia-pro, sans-serif; color: #282828}

/* =FONTS */

.league{font-family: "league-gothic",sans-serif;}

.uppercase{text-transform: uppercase}

.large{font-size: 100px; line-height: 104px}

.site-content{z-index: 1; background-color: #f2f2f2; margin-bottom:341px; position: relative}


/* =BUTTONS */

a.button{padding: 10px 20px 14px; border-radius: 20px; background-color: #595959; display: inline-block; color: #ffffff!important; position: relative; overflow: hidden; z-index: 1; font-size: 16px;line-height: 16px; box-shadow: none!important; min-width: 160px; text-align: center}



a.button i{margin-left:10px}

a.button i.fa-arrow-left{margin-left:0px; margin-right:10px}

a.pink-button{background-color: #ff63aa}

a.pink-button:hover i{color: #ff63aa}

.buttonfx{position: relative; display: inline-block; cursor: pointer; text-decoration: none; overflow: hidden; transition: all .5s; }

.buttonfx:before, .buttonfx:after{content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: 100%; background: #595959; z-index: -1; transform: translate3D(0,-100%,0); transition: all .5s; border-radius: 100px}

.slideleft:after{top: 0; z-index: -1; transform: translate3D(-101%,0,0);}

.slideleft:hover:after{transform: translate3D(0,0,0); transition: all .5s;}


/* =ANIMATE */

a.button i, .home-talent-single a .talent-circle, .home-talent-single a .table, .home-talent-single a .cell h3 i, .facetwp-radio:before, .header-bg, .work-entry a .table, .work-entry a h3 {-webkit-transition: all 0.4s!important; transition: all 0.4s!important;}

/* =COLOURS */

.dark-text{color: #595959}

.darker-text{color: #282828}

.pink-text{color: #ff63aa}

.white-text{color: #ffffff}


.dark-bg{background-color: #595959}

.pink-bg{background-color: #ff63aa}

.white-bg{background-color: #ffffff}


/* =LAYOUTS */

.lh0{line-height: 0}

.relative{position: relative}

.oh{overflow: hidden}

.full img{width: 100%}

.pd40{padding: 40px}

.pd8040{padding: 80px 40px}

.mb0{margin-bottom:0px}

.pt0{padding-top:0px}


i.mr{width: 20px}

.z1{z-index: 1}

.z2{z-index: 2}

.z3{z-index: 3}

.absolute{position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px}

.table{display: table; width: 100%; height: 100%}

.cell{display: table-cell}

.vat{vertical-align: top}

.vam{vertical-align: middle}

.vab{vertical-align: bottom}

.tal{text-align: left}

.tac{text-align: center}

.tar{text-align: right}

/* =FLEX */

.flex{display: flex; flex-wrap: wrap}


/* =HEADER + MENU */

.site-header{position: fixed; top: 0px; left: 0px; right: 100px; padding: 40px; z-index: 9999999999; background-color: transparent}

.header-bg{position: fixed; top: 0px; left: 0px; right: 0px; height: 121px; z-index: 1000; background-color: #282828; opacity: 0}

.header-bg-solid{ opacity: 0.4}

.logo{max-width: 340px}

.rmp-menu-wrap{display: table!important; width: 100%; height: 100%!important}

.rmp-menu{display: table-cell!important; vertical-align: middle; padding: 0px 80px!important}

.rmp-menu a{padding: 10px 0px!important; font-size: 80px!important; line-height: 80px!important; font-family: "league-gothic",sans-serif!important; height: auto!important; text-transform: uppercase}

.rmp-menu a:hover{padding-left:20px!important}

.rmp-menu li.current-post-parent a.rmp-menu-item-link{color: #ff63aa!important}


/* =CONTACT */

.contact-popup .fbx-inner{width: 100%!important; margin-left:0px!important; left: 0px!important; right: 0px; bottom: 0px!important; top: auto!important}

.fbx-close{top: 48px!important; right: 80px!important; width: 40px!important; height: 40px!important}

.fbx-flat .fbx-loader .fbx-icon, .fbx-flat:not(.fbx-phone) .fbx-btn-shadow .fbx-icon{filter: none!important}

.fbx-icon{color: #ff63aa!important; width: 40px!important; height: 40px!important}

.contact-popup-inner{padding: 40px 40px 40px 36px; margin-left:40px; margin-right:40px; position: relative}

.contact-popup-inner h2{margin-bottom:40px}

.contact-popup-inner:before{content: ''; position: absolute; left: 0px; top: 0px; bottom: 40px; width: 4px; background-color: #ff63aa}

.contact-form-holder input, .about-content input{line-height: 30px; padding: 0px 0px 5px 0px!important; border: none; border-bottom: 2px solid #595959; border-radius: 0px}

.contact-form-holder textarea, .about-content textarea{border: 2px solid #595959; border-radius: 0px; line-height: 30px; padding-right:180px}

.contact-form-holder label, .about-content label{font-family: "league-gothic",sans-serif; text-transform: uppercase; color: #595959; font-weight: normal!important; font-size: 30px!important}

#gform_1{position: relative}

.gform_footer{position: absolute; bottom: 0px; left: auto; right: 0px; padding: 0px!important; }

.gform_footer input{margin-bottom:0px!important; padding: 20px 40px!important; font-family: "league-gothic",sans-serif; font-weight: normal!important; text-transform: uppercase; font-size: 40px; line-height: 50px}


.gfield_required{vertical-align: top; padding-top:1px; font-size: 24px!important}

.about-content a{color: #ff63aa}


/* =FOOTER */

.site-footer{background-color: #7f7f7f; margin-top:0px!important; border-top: 4px solid #ffffff; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 0}

.site-footer .wrap{max-width: 100%!important; padding: 40px 40px 20px}

.footer-logo{margin-bottom:40px}

.footer-logo:before{position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 4px solid #ff63aa; content: ''; z-index: 5}

.footer-logo a{max-width: 200px; display: inline-block; width: 100%; padding-right:10px; background-color: #7f7f7f; position: relative; z-index: 10}


.footer-signup{flex: 1}

.footer-menu{display: inline-block; vertical-align: top}

.footer-menu:first-child{margin-right:80px}

.site-footer h2{color: #ffffff; text-transform: uppercase; font-size: 30px}

.footer-menu li{list-style: none}

.footer-menu .footer-menu-nav{margin-bottom:40px}

.footer-menu a{color: #ffffff}




.footer-copyright{border-top: 1px solid #ffffff; padding-top:20px}

.footer-copyright-text{flex: 1; color: #ffffff}

#menu-footer-legal{margin-bottom:0px}

#menu-footer-legal li{list-style: none; display: inline-block}

#menu-footer-legal li:first-child{margin-right:36px}

#menu-footer-legal li a{color: #ffffff}



.footer-signup-form, .mc4wp-form, .mc4wp-form-fields{max-width: 400px; display: flex}

.mc4wp-form{width: 100%}

.mc4wp-form-fields{flex: 1; background-color: transparent; border: none; border-bottom: 1px solid #ffffff; border-radius: 0px; padding: 0px 0px 10px}

.mc4wp-form-fields input{border-radius: none; border: none; background-color: transparent; padding: 0px}

.mc4wp-form-fields input[type=submit]{text-transform: uppercase; padding: 0px!important; font-family: "league-gothic",sans-serif; font-size: 20px!important; color: #ffffff}




/* =FRONT PAGE */

/* =HEADER */

.home-header {position: relative; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2; pointer-events: none; overflow: hidden;}

.home-header iframe {width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}


/* =ABOUT BLOCK */

.about-left{width: 30%; position: relative; padding: 40px; padding-left:0px}

.about-left:after{content: ''; position: absolute; right: 0px; top: -40px; bottom: -20px; border-right: 4px solid #ff63aa; z-index: 1}

.about-left h1{margin-bottom:0px}


.about-right{width: 70%; padding: 40px 40px 40px 80px}

.about-right p{font-size: 20px}


.about-button-holder{width: 100%; padding-left:30%; margin-left:-90px; padding-bottom:40px}

.about-button-holder .button{width: 180px; text-align: center; }

.about-button-holder .button:hover{}


.talent-right-carousel-holder{margin-left: -120px; margin-right:-40px}

.home-talent-single a .table, .work-entry a .table{background-color: rgba(0, 0, 0, 0.4)}

.home-talent-single a .cell{padding: 20px}

.home-talent-single a .cell h3{margin-bottom:0px; font-size: 30px!important; line-height: 32px; display: flex; align-items: center}

.home-talent-single a .cell h3 i{font-size: 16px; margin-left:10px; color: #ff63aa}

.home-talent-single a:hover .cell h3 i{margin-left:20px}


.home-circle{position: absolute; z-index: 1; border-radius: 50%}

.talent-circle{width: 500px; height: 500px; border-radius: 50%; background-color: #ff63aa; position: absolute; top: auto; left: auto; right: -200px; bottom: -200px; position: absolute; opacity: 0}

.home-talent-single a:hover .talent-circle{opacity: 0.2; width: 700px; height: 700px; bottom: -300px; right: -300px}

.home-talent-single a:hover .table{background-color: rgba(0, 0, 0, 0.2)}


/* =SPECIALISTS BLOCK */

.specialists-block h4{font-size: 30px;  line-height: 30px; font-weight: normal}

.specialists-block h4 span{padding-right:10px}

.specialists-block h4:after{content: ''; bottom: 6px; height: 4px; left: 50px; right: 0px; background-color: #ffffff; z-index: 1; position: absolute}


.specialists-items{margin-top:80px; justify-content: flex-start; gap: 40px; margin-right:-40px}

.specialists-item{width: calc(33.333% - 40px); align-items: flex-start; align-content: flex-start;}

.specialists-item .icon{padding-right:10px; width: 40px!important}

.specialists-item .icon i{font-size: 24px; padding-top:2px}

.specialists-item .title{flex:2; font-size: 30px!important; line-height: 30px}

.specialists-item .content{margin-top:10px; width: 100%}


/* =FULL IMAGE BLOCK */

.full-image-block-fixed{height: 80vh; background-size: cover}

.full-image-block img{width: 100%}


/* =WORK WITH BLOCK */

.work-with{padding-left:38px; padding-right:38px}

.work-with h2 span:before{content: ''; position: absolute; bottom: 0px; left: 0px; right: 2px; height: 4px; background-color: #ff63aa}

.work-entry{width: 25%; border: 2px solid #ffffff}



.work-entry h3{font-size: 30px!important; border: 1px solid transparent; padding: 20px; display: inline-block}

.work-entry a:hover .table{background-color: rgba(0, 0, 0, 0.6)}

.work-entry a:hover h3{border: 4px solid #ff63aa; padding: 10px 28px}


/* =SOCIAL FEED */

.feed-holder{border: 4px solid #ff63aa; padding: 20px}

.feed-holder .flex{justify-content: space-between; align-items: center; margin-bottom:20px}

.feed-holder .flex a, .feed-holder .flex i{font-size: 24px}



.news-feed{padding: 40px}

/* =TALENT CATEGORY */

.filter{padding: 40px 40px 0px}

.facetwp-facet{margin-bottom:0px!important}

.facetwp-radio{display: inline-block; background-image: none!important; text-transform: uppercase; font-size: 30px; line-height: 30px; padding-left:0px!important; font-family: "league-gothic",sans-serif; position: relative; margin-bottom:14px!important}

.facetwp-radio:before{position: absolute; content: ''; left: 0px; bottom: -7px; right: 31px; height: 4px; background-color: #f2f2f2}

.facetwp-radio.checked:before, .facetwp-radio:hover:before{position: absolute; content: ''; left: 0px; bottom: -7px; right: 31px; height: 4px; background-color: #ff63aa}

.facetwp-radio:after{content: '/'; padding: 0px 10px; color: #595959!important}

.facetwp-radio:last-child:after{content: none!important}

.facetwp-radio.checked:last-child:before{right: 0px}

.facetwp-radio:last-child:before{right: 0px}

.facetwp-counter{display: none!important}

.archive .site-content{padding-top:0px}

.archive .site-header{float: none}

.archive .page-header, .page-template-news .page-header, .page-template-about .page-header{width: 100%!important; float: none!important; padding: 160px 40px 40px; position: relative}

.archive .page-header:after, .page-template-news .page-header:after, .page-template-about .page-header:after{content: ''; position: absolute; top: 0px; bottom: 0px; left: auto;right: 0px; width: 40px; background-color: #ff63aa	}

.archive .page-header span:after, .page-template-news .page-header span:after, .page-template-about .page-header span:after{position: absolute; bottom: 10px; left: 3px; right: -2000px; height: 4px; background-color: #ffffff; content: ''}

.archive-talent{padding: 40px 38px}

.archive-single{width: 25%; border: 2px solid #ffffff}



/* =TALENT SINGLE */

.single-post .content-area{max-width: 100%!important; margin-left:0px; margin-right:0px}

.single-post .site-content{padding-top:0px!important}

.talent-entry-header{padding-bottom:0px!important; height: 90vh; background-size: cover; background-repeat: no-repeat}

.talent-name{margin-left:40px; padding-left:34px; padding-bottom:30px}

.talent-name:before, .single-post .talent-left:before{position: absolute; left: 0px; top: 13px; bottom: 0px; width: 4px; background-color: #ff63aa; content: ''}

.talent-entry-content{margin: 0px 40px!important}

.single-post .talent-left{width: 45%; padding: 40px 40px 80px 36px}

.single-post .talent-left p{margin-bottom:20px}

.single-post .talent-left p strong, .talent-categories, .about-content p strong{font-family: "league-gothic",sans-serif; font-weight: normal; font-size: 24px; line-height: 30px}

.single-post .talent-left p:last-child{padding-bottom:40px}

.single-post .talent-left:before{top: 0px; bottom: 40px}

.single-post .talent-right{width: 55%; text-align: center}

.talent-enquire-button-holder{margin-left:-60px; padding-top:20px}


.social-stats-inner{padding-top:40px; }

.social-stat a{box-shadow: none!important}

.socials{width: 50%;margin: 0px auto; justify-content: center; max-width: 300px}

.social-stat{width: 50%; margin-bottom:20px}

.social-stats-inner h2{font-size: 30px}

.social-stat i{font-size: 40px}

.stat{font-size: 40px}


.talent-pink-circle:after{content: ""; display: block; padding-bottom: 100%;}



.talent-categories a{text-decoration: none!important; box-shadow: none!important; text-transform: capitalize}

.talent-categories a:hover{color: #ff63aa}

.talent-categories a:after{content: ' | '; color: #000000!important}

.talent-categories a:last-child:after{content: none}



/* =NEWS */

.page-template-news .site-content, .page-template-about .site-content{padding: 0px!important; width: 100%!important}


/* =ABOUT */



.about-content{width: 50%; padding-right:40px}

.about-feed{width: 50%}

.about-feed .work-entry{width: 100%; }

.about-right-stick{position: sticky; top: 161px}

.about-content .gform_wrapper{position: relative; padding: 20px 0px 0px}

.about-content .gform_wrapper:before{content: ''; position: absolute; left: -40px; right: calc(-100% - 120px); background-color: #ffffff; top: 0px; bottom: -40px}

/* =IPAD LANDSCAPE
------------------------------------------------------- */
@media only screen and (min-width:911px) and (max-width: 1024px){


/* =FONTS */

.large{font-size: 80px; line-height: 84px}

/* =BUTTONS */

/* =LAYOUTS */

/* =HEADER + MENU */

/* =CONTACT */

/* =FOOTER */


/* =FRONT PAGE */

.home-circle{width: 400px; height: 400px; top: -50px; left: -100px}

/* =HEADER */

/* =ABOUT BLOCK */

/* =SPECIALISTS BLOCK */

.specialists-block h2{margin-bottom:0px!important}

/* =FULL IMAGE BLOCK */

/* =WORK WITH BLOCK */

.work-entry{width: 33.333%}

.work-entry h3{width: 80%;line-height: 34px}

/* =SOCIAL FEED */

/* =TALENT CATEGORY */



.home-talent-single a:hover .talent-circle{opacity: 0.2; width: 600px; height: 600px; bottom: -300px; right: -300px}

/* =TALENT SINGLE */

.single-post .talent-left{width: 55%; padding-bottom:100px}

.single-post .talent-right{width: 45%}

.talent-pink-circle{left: 50%; margin-left:-200px; width: 500px; height: 500px; top: -100px}

.talent-entry-content{margin-right:0px!important; }


/* =NEWS */


}



/* IPAD PORTRAIT */
@media only screen and (min-width:641px) and (max-width: 910px)  {

/* =FONTS */

.large{font-size: 80px; line-height: 82px}

/* =BUTTONS */

/* =LAYOUTS */

/* =HEADER + MENU */

/* =CONTACT */

/* =FOOTER */

.footer-signup{padding-right:40px}

.footer-menu:first-child{margin-right:40px}


/* =FRONT PAGE */

/* =HEADER */

/* =ABOUT BLOCK */

.about-left{width: 40%; padding-top:0px}

.about-right{width: 60%; padding: 0px 0px 40px 40px}

.about-right p:last-child{margin-bottom:0px}

.about-button-holder{padding-left:40%}

.home-circle{width: 300px; height: 300px; top: -60px; left: -70px;}

/* =SPECIALISTS BLOCK */

.specialists-item{width: calc(50% - 40px)}

.specialists-block h2{margin-bottom:0px!important}

/* =FULL IMAGE BLOCK */

/* =WORK WITH BLOCK */

.work-with h2 span:before{right: 122px}

.work-entry{width: 50%}

/* =SOCIAL FEED */

/* =TALENT CATEGORY */

.archive-single{width: 33.333%}

/* =TALENT SINGLE */

.talent-entry-content{margin-right:0px!important}

.single-post .talent-left{width: 100%; padding-bottom:0px}

.single-post .talent-left:before{bottom: 0px}

.single-post .talent-right{margin-left:0px; width: 100%!important; padding-left:30%; position: relative; border-left: 4px solid #ff63aa}

.single-post .talent-entry-content:before{content: ''; width: 50px; height: 50px; position: absolute; bottom: 0px; left: -10px; background-color: #f2f2f2; z-index: 10}



.single-post .talent-pink-circle{top: 0px; left: auto; right: -20px; width: 520px; height: 520px}


/* =NEWS */

}

/* =IPHONE
------------------------------------------------------- */
@media only screen and (max-width: 640px) {

/* =FONTS */

.large{font-size: 70px; line-height: 74px}

/* =BUTTONS */

/* =LAYOUTS */

.pd40, .pd8040{padding: 20px}

.site-content{margin-bottom:476px}

/* =HEADER + MENU */

.site-header{padding: 20px}

.logo img{max-width: 200px}

.rmp_menu_trigger{top: 0px!important; right: 12px!important}

.header-bg{height: 64px}



.rmp-menu{padding: 40px 20px!important}

.rmp-menu a{font-size: 60px!important; line-height: 64px!important}

/* =CONTACT */

.contact-popup-inner{margin-left:20px; margin-right:20px; padding: 20px}

.contact-popup-inner h2{margin-bottom:20px; font-size: 50px!important; line-height: 52px!important}

.contact-form-holder label{font-size: 24px!important}

.gform_wrapper.gravity-theme .gfield textarea.medium{height: 120px!important}

.contact-popup-inner:before{bottom: 20px}

.gform_footer{position: relative; left: 0px; }

.gform_footer input{padding: 10px 20px!important; font-size: 26px; line-height: 30px!important; width: 100%}

.fbx-close{left: auto!important; right: 22px!important; top: 12px!important; background-color: transparent!important}

/* =FOOTER */



.site-footer .wrap{padding: 30px 20px 20px}

.footer-flex, .footer-copyright{display: block}

.footer-menus{padding-top:20px; display: flex}

.footer-menus .footer-menu{flex: 1; margin-right:0px}

.footer-menu .footer-menu-nav{margin-bottom:20px}

.site-footer h2{margin-bottom:16px}

#menu-footer-legal{display: flex; justify-content: space-between}

#menu-footer-legal li{margin-right:0px!important}


/* =FRONT PAGE */

.home-header, .home-header iframe{height: 35vh; min-height: 35vh}

/* =HEADER */

/* =ABOUT BLOCK */

.about-left, .about-right{width: 100%; padding: 0px}

.about-left h1{margin-bottom:0px}

.about-right{padding-right:20px;position: relative}

.about-right:after{content: ''; position: absolute; right: 0px; width: 4px; top: 0px; bottom: -70px; background-color: #ff63aa}

.about-button-holder{margin-left:0px; text-align: right; margin-right: -16px; padding-left:0px; width: calc(100% + 16px)}


.talent-right-carousel-holder{margin-left:-16px; margin-right:-36px}

.home-circle{width: 300px; height: 300px; top: -40px; left: -70px;}

.talent-right{padding-bottom:20px}


.home-talent-single a .cell h3{align-items: flex-end}

.home-talent-single a .cell h3 i{height: 22px}

/* =SPECIALISTS BLOCK */

.specialists-block h2{margin-bottom:0px!important}

.specialists-block h4:after{right: 0px}

.specialists-items{margin: 20px 0px; gap: 20px}

.specialists-item{width: 100%; margin-bottom:0px!important}

.specialists-item p:last-child{margin-bottom:0px}

/* =FULL IMAGE BLOCK */

/* =WORK WITH BLOCK */

.work-entry{width: 50%}

.work-entry h3{font-size: 20px!important; padding: 10px; width: 90%}

.work-with h2 span:before{right: 107px}

.work-entry a:hover h3{padding: 10px 10px}

/* =SOCIAL FEED */

.instagram-feed{padding-top:0px}

/* =TALENT CATEGORY */

.archive .page-header, .page-template-news .page-header{padding: 80px 20px 20px}

.filter{padding: 20px 20px 0px}

.facetwp-radio{font-size: 20px; line-height: 20px}

.facetwp-radio.checked:before, .facetwp-radio:hover:before{right: 29px}

.facetwp-radio:last-child:hover:before{right: 0px}

.archive-talent{padding: 20px 18px}

.archive-single{width: 50%}

.home-talent-single a:hover .cell h3 i{margin-left:10px}

/* =TALENT SINGLE */

.talent-entry-header{overflow: hidden; height: 400px}

.desktop-image img{object-fit: cover; height: 400px;}

.talent-name{margin-left:20px; padding-left:20px; padding-bottom:20px;padding-right:20px}

.talent-name:before{top: 9px}

.single-post .talent-left{padding-right:0px!important}

.single-post .talent-left p:last-child{padding-bottom:0px}


.talent-entry-content{margin: 0px 20px!important}

.single-post .talent-left{width: 100%; padding: 20px}

.talent-enquire-button-holder{margin-left:-34px}

.single-post .talent-right{width: calc(100% + 40px); margin-left:-20px; margin-right:-20px}

.socials{width: 70%}

.talent-pink-circle{left: 50%; top: 0px; ; width: 500px; height: 500px; margin-left:-250px}


/* =NEWS */

.news-feed{padding: 20px}


/* =ABOUT */

.about-content{width: 100%; padding-right:0px}

.about-content .gform_wrapper:before{right: -20px; left: -20px}

.about-feed{width: calc(100% + 4px); padding-top:20px; margin-left:-2px; margin-right:-2px}
}