/* Theme Name: Moxy Management Theme 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: moxymanagement -------------------------------------------------------------- */ @import url("https://use.typekit.net/xio6uih.css"); /* = GLOBAL */ body{font-family: poppins, sans-serif; font-weight: 300; color: #231F20; font-size: 16px} .site-content-contain{padding-top:0px; margin-bottom:160px} .site-content{z-index: 10; position: relative; background-color: #ffffff; border-bottom: 2px solid #ffffff} .wrap{max-width: 100%; padding: 0px} .site-content{padding: 0px!important} .responsive-video {position: relative; padding-bottom: 56.25%; height: 0;} .responsive-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .hide{opacity: 0} .offset-div{height: 143px} //lenis html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* = FLEX */ .flex{display: flex; flex-wrap: wrap} .flex1{flex: 1} .block{display: block} .full{width: 100%} .gap2{gap: 2px} .gap10{gap: 10px} .gap20{gap: 20px} .gap40{gap: 40px} .gap80{gap: 80px} .justify-between{justify-content: space-between} .justify-evenly{justify-content: space-evenly} .justify-left{justify-content: flex-start} .justify-right{justify-content: flex-end} .align-top{align-items: flex-start} .align-center{align-items: center} .align-bottom{align-items: flex-end} .self-top{align-self: flex-start} .self-bottom{align-self: flex-end} .half{width: 50%} .third{width: 40%} .twothirds{width: 60%} .gap40 .third{width: calc(40% - 20px)} .gap40 .twothirds{width: calc(60% - 20px)} /* = FONTS / TEXT */ .tal{text-align: left} .tac{text-align: center} .tar{text-align: right} .uppercase{text-transform: uppercase} strong, .bold{font-weight: 600} h1{font-size: 80px; font-weight: 600; line-height: 1.2em} h2.big-h2, h1.big-h2{font-size: 57px; line-height: 1.2em} p:last-child{margin-bottom:0px} .first-bold p:first-child{font-weight: 700} /* = COLOURS */ .pink-bg{background-color: #FFD6DD} .cream-bg{background-color: #DEC7B4} .grey-bg{background-color: #CCC3C1} .blue-bg{background-color: #687785} .white-bg{background-color: #ffffff} .orange-bg{background-color: #db9880} .white, .white ._number{color: #ffffff!important} .purple, .item-1 .white ._number, .item-1 .white{color: #52484D!important} .blue{color: #687785} .orange{color: #db9880} .pink{color: #FFD6DD} .cream{color: #DEC7B4} .moxy-m{width: 40px; display: inline-block; margin-right:20px} /* = SPACING / PADDING */ .pd20{padding: 20px} .pd40{padding: 40px} .pt40{padding-top:40px} .pd2040{padding: 20px 40px} .pr60{padding-right:60px} .mt20{margin-top:20px} .mt40{margin-top:40px} .mb0{margin-bottom:0px} .mt10{margin-top:10px} .mb10{margin-bottom:10px} .mb20{margin-bottom:20px} .mb40{margin-bottom:40px} .mlr40{margin-left:40px; margin-right:40px} .pt0{padding-top:0px} .pt20{padding-top:20px} .pb0{padding-bottom:0px} .mg40{margin: 40px} .height100vh{height: 100vh; } .pr40{padding-right:40px} .pr0{padding-right:0px} /* = POSITIONING */ .relative{position: relative} .absolute{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px} .table{display: table; width: 100%; height: 100%} .cell{display: table-cell} .vat{vertical-align: top} .vam{vertical-align: middle} .vab{vertical-align: bottom} .lh0, .lh0 img{line-height: 0} .lh0 img{width: 100%!important} .cover{background-size: cover} .centercenter{background-position: center center} .topcenter{background-position: center top} .bottomcenter{background-position: center bottom} .z10{z-index: 10} .z20{z-index: 20} .z100{z-index: 100} .z2000{z-index: 2000} .stick{position: sticky; top: 155px} .ilb{display: inline-block!important} .oh{overflow: hidden} .pink-line-top{border-top: 4px solid #FFD6DD} /* = BUTTONS */ a.button, button.button, button.gform_button{text-transform: uppercase; color: #52484D; font-size: 16px; font-weight: 700; position: relative; display: inline-block;} button.gform_button{background-color: transparent!important; color: #52484D!important; font-size: 14px!important; font-weight: 700!important; text-transform: uppercase!important; border: none!important; border-radius: 0px!important; width: 100%!important; box-shadow: none!important; position: relative!important; height: auto!important; padding: 0px!important} a.button-white{color: #ffffff} /* = BUTTON LINES */ a.button:before, a.button:after, button.gform_button:before, button.gform_button:after{position: absolute; top: 0px; bottom: 0px; content: ''!important; z-index: 10} a.button:before, button.gform_button:before{left: 0px; right: 10px; border-bottom: 2px solid #52484D; border-left: 2px solid #52484D} a.button:after, button.gform_button:after{left: 10px; right: 0px; border-top: 2px solid #52484D; border-right: 2px solid #52484D} a.button:hover:before, button.gform_button:hover:before{right: 0px} a.button:hover:after, button.gform_button:hover:after{left: 0px} a.button-white:before, a.button-white:after{border-color: #ffffff} /* = BUTTON INNER */ a.button span.outer, button.gform_button span.outer{padding: 10px 10px 6px; display: inline-block; position: relative; z-index: 8; width: 100%; height: 100%!important} a.button:hover span.outer, button.gform_button:hover span.outer, button.gform_button:hover span.outer span{color: #ffffff} button.gform_button span.outer span{padding-top:6px; display: block; padding-bottom:6px} a.button:hover span.outer:before, button.gform_button span.outer:before{right: 0px} a.button span.outer span, button.gform_button span.outer span{position: relative; z-index: 8} a.button span.outer:after, button.gform_button span.outer:after{ content: ''; position: absolute; width: 0; height: 100%; display: block; top: 0px; right: 0; background: #52484D;} a.button:hover span.outer:after, button.gform_button:hover span.outer:after{width: 100%; left: 0; background: #52484D;} a.button-white:hover span.outer, button.gform_button:hover span.outer{color: #52484D} a.button-white span.outer:after, a.button-white:hover span.outer:after{background: #ffffff} /* = ANIMATE */ a, .talent-title-holder:before, .talent-title-holder:after, .logo, a.button:before, a.button:after, .item a .talent-title-holder-inner, button.gform_button:before, button.gform_button:after, .single-talent-left .owl-dot span, .stats-flex a i, .view-profile, section.horizontal .item a .cat-intro{-webkit-transition: all 0.4s!important; transition: all 0.4s!important;} a.button span.outer:after, a.button span.outer span, button.gform_button span.outer:after, button.gform_button span.outer span{-webkit-transition: all 0.4s ease-in-out 0.4s !important; transition: all 0.4s ease-in-out 0.4s !important;} /* = FOOBOX */ .fbx-modal{font-family: poppins, sans-serif!important;} .contact-popup.fbx-show{-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);} .contact-popup .fbx-inner{margin-left:0px!important; left: auto!important; right: 0px!important; height: 100vh!important; margin-top:0px!important; top: 0px!important; bottom: 0px!important; border-width: 20px!important} .contact-popup input[type=text], .contact-popup input[type=email], .contact-popup input[type=tel]{border: none!important; border-radius: 0px!important; border-bottom: 2px solid #CCC3C1!important; padding: 0px 0px 10px!important; box-shadow: none!important; box-shadow: none!important} .contact-popup input[type=text]:focus, .contact-popup input[type=email]:focus, .contact-popup input[type=tel]:focus{border-radius: 0px; border-bottom: 2px solid #687785!important; box-shadow: none!important} input:focus, select:focus, textarea:focus{box-shadow: none!important;} .contact-popup .gfield_label{text-transform: uppercase; font-size: 12px; font-weight: 600!important} .gform_required_legend{display: none!important} .contact-popup select, .contact-popup textarea{border-radius: 0px!important; border: 2px solid #CCC3C1!important} .contact-popup select:focus, .contact-popup textarea:focus{box-shadow: none!important; border-color: #687785!important} body.fbx-active{overflow: hidden} /* = HEADER */ .site-header{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1000; border-bottom: 2px solid #ffffff} .logo{max-width: 200px; width: 100%} .logo a{display: block!important; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px} .logo object{margin-bottom:0px!important} .scrolled-header .logo{max-width: 120px} .menu li{list-style: none} .header-menu ul{display: flex; gap: 40px; margin-bottom:0px} .header-menu ul a{font-weight: 600; display: inline-block; padding: 10px 0px; position: relative; color: #52484D} .header-menu ul a:hover, .footer-legal-menu a:hover, .footer-contact-menu a:hover{color: #687785} .header-menu ul a:after{ content: ''; position: absolute; width: 0; height: 2px; display: block; margin-top: 5px; right: 0; background: #231F20; transition: width .4s ease; -webkit-transition: width .4s ease;} .header-menu ul a:hover:after, .header-menu ul li.current-menu-item a:after{width: 100%; left: 0; background: #231F20;} /* = MOBILE MENU */ .rmp-container{z-index: 1999!important} .rmp-menu-wrap{display: table!important; height: 100%!important; width: 50%!important} .rmp-menu{display: table-cell!important; vertical-align: bottom!important; padding: 40px!important} .rmp-menu a{text-transform: uppercase!important; font-weight: 600!important} .menu-contact i{display: none} /* = FOOTER */ .site-footer{border: none; margin:0px; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 1; box-sizing: border-box;} .site-footer:before{content: ''; position: absolute; top: -50px; bottom: 100%; left: 0px; right: 0px; background-color: #FFD6DD; width: 100%; height: 50px} .footer-logo{max-width: 160px} .footer-contact-menu ul, .footer-social-menu ul{margin-bottom:0px; display: flex; gap: 10px} .footer-contact-menu li:not(:last-child) a:after{content: '/'; padding-left:10px} .footer-contact-menu a i{margin-right:5px} .footer-social-menu ul a{color: #687785} .footer-social-menu ul a i{font-size: 30px} .footer-legal-menu a{text-transform: uppercase; font-weight: 700; font-size: 12px} .copyright{font-size: 12px} /* = HOME */ /* = HOME HEADER */ .home-header{padding-top:155px; overflow: hidden} .home-header .self-top{min-height: 262px} .home-header h1 p{margin-bottom:0px; margin-right:-100%; display: block} .home-header:after{content: ''; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; background-color: #ffffff; z-index: 5} .home-header .third{margin-bottom:140px} .lined-corners:before, .lined-corners:after{width: 30px; height: 30px; position: absolute; content: '';} .lined-corners:before{top: -10px; left: -10px; border-left: 2px solid #231F20; border-top: 2px solid #231F20} .lined-corners:after{bottom: -10px; right: -10px; border-bottom: 2px solid #231F20; border-right: 2px solid #231F20} .header-carousel-cover{position: absolute; top: 0px; bottom: auto; height: 100%; left: 0px; right: 0px; background-color: #FFD6DD; z-index: 100; animation-name: carouselcover; animation-duration: 1s; animation-delay: 5s; animation-fill-mode: forwards; overflow: hidden} .header-carousel-cover:before{content: '\e1d4'; position: absolute; top: 50%; left: 50%; font-family: "Font Awesome 6 Pro"; font-size: 30px; animation-name: preloader; animation-duration: 6s; animation-fill-mode: forwards; margin-left:-15px; margin-top:-20px} @keyframes carouselcover { 0% {height: 100%;} 100% {height: 0px;} } @keyframes preloader { 0% {rotate: 0deg; opacity: 1} 80% {rotate: -360deg; opacity: 1} 100% {opacity: 0; rotate: -360deg} } /* = HOME INSTAGRAM */ .moxy-grams-link i, .latest-posts .owl-next i, .home-talent-carousel .owl-next i, .home-talent-carousel .owl-prev i{font-size: 40px} /* = HOME NEWS */ .moxy-news-feed{max-width: calc(50% - 1px)} .latest-left, .latest-right{width: calc(50% - 10px)} .latest-posts .owl-prev{display: none} .latest-posts .owl-next{position: absolute; top: -80px; right: 0px} /* = HOME COLLABS */ .collabs{position: relative; margin-bottom:40px; padding-bottom:40px} .collabs h2{margin-left:40px} .collabs:after{content: ''; position: absolute; left: 40px; bottom: 0px; border-bottom: 4px solid #FFD6DD; right: 40px;} .slide-group{display: flex; flex-wrap: wrap; gap: 40px} .collabs-rtl{margin-bottom:20px} .collabs-gallery .owl-stage, .collabs-gallery .owl-stage{display: flex; flex-wrap: wrap} .collabs-gallery .owl-item{display: flex; flex-wrap: wrap; align-items: center} /* = HOME TALENT FEED */ section.horizontal {overflow-x: hidden; padding-top:0px; padding-bottom:40px} section.horizontal .pin-wrap, section.horizontal .animation-wrap {display: flex; position: relative; z-index: 1; gap: 40px} section.horizontal .item, .talent-spacer{position: relative; flex: 0 0 35%;} section.horizontal .item{height: calc(100vh - 410px); background-size: cover; overflow: hidden;} section.horizontal .item a{height: 100%} section.horizontal .item:nth-child(odd){margin-top:80px} .item a:hover .talent-title-holder-inner{padding-top:80px; padding-bottom:80px} section.horizontal .item a .cat-intro{opacity: 0; height: auto; max-height: 1px} section.horizontal .item a:hover .cat-intro{opacity: 1; max-height: 300px} section.horizontal .animation-wrap.to-right{counter-reset: item; float: left; padding-left:100px} section.horizontal .animation-wrap .item:nth-child(2n+2) {align-items: flex-start;} section.horizontal .animation-wrap .item:nth-child(4n+4) {align-items: flex-end;} .horizontal {position: relative;} .pin-wrap {position: relative;} .sticky-title {position: absolute; top: -140px; left: 0; width: 100%; background: white; z-index: 10; padding: 10px 40px;} .talent-spacer{flex: 0 0 40px;} .arrows{position: absolute; z-index: 100; width: 80px; text-align: center; background-color: #ffffff; left: 0px; top: 0px; bottom: 0px; overflow: hidden; padding-top:0px} .arrows i{font-size: 40px} /* = HOME TALENT FEED CAROUSEL */ .home-talent-carousel .owl-stage{padding-left:40px!important} .home-talent-carousel .owl-stage .owl-item:nth-child(odd){margin-top:80px} .home-talent-carousel .owl-next, .home-talent-carousel .owl-prev{position: absolute; top: -80px} .home-talent-carousel .owl-next{right: 40px} .home-talent-carousel .owl-prev{right: 100px} /* = TALENT ARCHIVE */ .talent-archive-title-holder{width: 40%; padding-top:155px} .talent-archive-title-holder .intro-and-link{padding-right: 100px} .archive-talent-right{width: 60%; padding-top:115px} .archive-talent-feed{padding: 40px; margin-left:-200px; padding-left:100px; overflow-x: hidden} .archive-talent-feed article{width: calc(50% - 20px)!important; float: none!important} .archive-talent-feed article:nth-child(odd){opacity: 0; margin-left:-100px; margin-right:100px} .archive-talent-feed article:nth-child(even){opacity: 0; margin-right:-100px; margin-left:100px} .view-profile{position: absolute; bottom: 20px; right: 40px; color: #ffffff; opacity: 0; text-transform: uppercase; font-weight: 600; font-size: 16px} article a:hover .view-profile{opacity: 1; right: 20px} /* = TALENT FEED */ .home-talent article{width: 30%} .talent-title-holder:before{position: absolute; top: 0px; bottom: 0px; left: 0px; right: 10px; border-bottom: 2px solid #ffffff; content: ''; z-index: 10; border-left: 2px solid #ffffff} .talent-title-holder:after{position: absolute; top: 0px; bottom: 0px; left: 10px; right: 0px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; content: ''; z-index: 100!important} .item-1 .talent-title-holder:before, .item-1 .talent-title-holder:after{border-color: #52484D} article a:hover .talent-title-holder:before{right: 0px} article a:hover .talent-title-holder:after{left: 0px} .talent-title-holder-inner{-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);; overflow: hidden} .talent-title-holder-inner h2, .member-content h2{text-transform: uppercase; font-weight: 700; margin-bottom:0px; color: #ffffff; font-size: 22px} .talent-title-holder-inner .cat-intro{color: #ffffff} .item-1 h2, .item-1 .cat-intro{color: #52484D} .owl-carousel .owl-item *::before, .owl-carousel .owl-item *::after { opacity: 0.999; /* Forces browser to paint */ transform: translateZ(0); /* GPU acceleration */ will-change: opacity, transform; } /* = SINGLE TALENT */ .single-talent-left{padding-left:40px; width: 45%; padding-top:155px} .single-talent-right{width: 55%} .talent-title-intro h1{margin-left:-120px} .single-talent-left .owl-dots{position: absolute; left: 10px; right: 0px; bottom: 10px} .single-talent-left .owl-dot span{width: 6px; height: 6px; background-color: #ffffff; display: inline-block; margin: 0px 10px 0px 0px; border-radius: 3px} .single-talent-left .owl-dot.active span{width: 30px; background-color: #FFD6DD; position: relative} @keyframes grow { from {width: 0;} to {width: 100%;} } .single-talent-carousel .owl-dot.active span:before{position: absolute; top: 0px; bottom: 0px; left: 0px; right: 100%; background-color: #52484D; animation: grow 5s linear forwards; content: ''; border-radius: 3px} .talent-title-intro:before{content: ''; position: absolute; left: -1000px; top: -110px; bottom: 0px; right: 0px; background-color: #DEC7B4; z-index: 5} .single-biog{max-width: 800px; margin-left:0px; margin-right:auto} .stats-flex a i, .quote-mark i{font-size: 80px} .stats-flex a:hover i{color: #52484D} .stat-text{margin-top:10px} ._number{color: #687785!important} ._number span{width: auto!important} .collab-logo{width: calc(25% - 30px)} .quote-mark i{margin-top:-10px} .quotes-holder{width: calc(100% - 120px)} .quote-text{font-weight: 700; font-size: 1.375rem} .quote-text p{color: #52484D} .large-stat{font-weight: 700} .large-count, .large-stat{font-size: 80px!important} .large-stat ._number{color: #DEC7B4!important} ._number, ._number > div{width: 10px} .large-count ._number, .large-count ._number > div{width: 47px!important; font-weight: 700} .stat{width: calc(50% - 20px)} .percentage{font-size: 40px; padding-left:5px} .stat h3{margin-top:-20px; background-color: #ffffff; z-index: 100; position: relative; padding-bottom:20px} /* = NEWS ARCHIVE*/ .archive-title-holder{padding:155px 40px 40px; width: 100%!important; float: none!important} .archive-first-post{margin-top:-80px} .archive-first-post, .archive-second-loop{width: calc(50% - 20px)} .archive-loop article{width: 100%!important; float: none!important} .archive-second-loop article{width: calc(50% - 20px)!important} .archive-third-loop article{width: calc(25% - 30px)!important} /* = SINGLE NEWS*/ .news-title-intro:before{background-color: #CCC3C1;} .news-title-intro h1{margin-left:0px; font-size: 57px} .share-holder{padding-bottom:20px; border-bottom: 4px solid #FFD6DD; margin-bottom:60px} .nav-previous a, .nav-next a{display: flex; gap: 20px; align-items: center; box-shadow: none!important} .nav-previous a span, .nav-next a span{box-shadow: none!important} .nav-previous a{justify-content: flex-start} .nav-next a{justify-content: flex-end} .nav-previous a .pag-text{order: 2} .nav-thumbnail{width: 100px} .post-navigation{padding-left:40px; padding-right:40px} .nav-links{padding: 40px 0px 0px!important; border-top: 4px solid #FFD6DD} .nav-title-icon-wrapper{display: none!important} .nav-subtitle{color: #db9880; font-size: 1rem!important; margin-bottom:0px!important; letter-spacing: 0px!important} .nav-title{font-size: 1.625rem!important; color: #687785!important} /* = ALTERNATE NEWS PAGE*/ .instagram-feed{margin-top:-80px} /* = ABOUT PAGE*/ .approach{border-bottom: 2px solid #ffffff; border-top: 2px solid #ffffff} .about-header{height: 100vh; overflow: visible} .about-twothirds{margin-top:-40px} .header-group{flex: 1; display: inline-block;overflow: hidden; height: calc(100vh + 400px)} .scroll-container {display: flex; flex-direction: column; align-items: center;} .header-image{width: 100%; text-align: center; line-height: 0px; margin-bottom:40px} .header-image img{line-height: 0px} .third-about-height{} .about-white-text{max-width: calc(100% - 40%); padding-top:40px!important; padding-left:80px} .about-white-text h3, .approach-quote{font-size: 24px; font-weight: 700} .about-white-text h3 p{font-size: 20px; font-weight: 400} .team-third{min-height: 500px} .team-member{margin-bottom:40px} .team-member:last-child{margin-bottom:0px} .team-member .member-image{width: 30%; opacity: 0; margin-left:-40px; margin-right:40px} .team-member-bottom{opacity: 0; margin-left:40px; margin-right:-40px} .team-members{margin-left:-40%} .member-image-popup{width: 30%} .about-quotes .quote-text{padding-right: 40%} /* =IPAD LANDSCAPE ------------------------------------------------------- */ @media only screen and (min-width:911px) and (max-width: 1024px){ /* = GLOBAL */ .site-content-contain{margin-bottom:220px} /* = FLEX */ /* = FONTS / TEXT */ h1{font-size: 60px; } .home-header .third{margin-bottom:0px} .home-header:after{display: none} .header-menu-right{padding-right:60px} .header-menu-right li.menu-item-type-taxonomy, .hide-responsive{display: none} /* = SPACING / PADDING */ /* = POSITIONING */ /* = BUTTONS */ /* = BUTTON LINES */ /* = BUTTON INNER */ /* = HEADER */ .logo{max-width: 180px} .rmp_menu_trigger{top: 24px!important; right: 21px!important} .rmp-menu a.rmp-menu-item-link{font-size: 24px!important} .rmp-menu-additional-content{position: absolute; bottom: 40px; left: 50%; right: 0px; z-index: 20} /* = FOOTER */ /* = HOME */ /* = HOME HEADER */ .home-header{overflow: hidden} /* = HOME TALENT FEED */ /* = HOME COLLABS */ .collabs{margin-top:40px} /* = TALENT ARCHIVE */ .item a:hover .talent-title-holder-inner{padding-top:40px; padding-bottom:60px} /* = TALENT FEED */ /* = HOME NEWS */ .home-insta-news{flex-wrap: wrap} .moxy-grams, .moxy-news-feed{width: 100%; flex: none; max-width: 100%} .latest-posts .owl-stage, .latest-posts .owl-item{display: flex; flex-wrap: wrap} .latest-posts .owl-item{align-items: flex-end} /* = SINGLE TALENT */ .collab-logo{width: calc(33.333% - 27px)} .stat-numbers{width: 100%} .stat h3{margin-bottom:0px; padding-bottom:0px} /* = ABOUT PAGE */ .about-twothirds .header-gallery{gap: 20px} .about-twothirds .header-gallery .header-image{margin-bottom:20px} .about-white-text{max-width: 100%; padding-right:80px} .approach .third{width: calc(45% - 20px)!important} .approach .twothirds{width: calc(55% - 20px)!important} .about-quotes{gap: 20px} .about-quotes .quotes-holder{width: 100%} .about-quotes .quote-text{padding-right: 20%} .about-quotes .quote-text p{font-size: 20px ; line-height: 28px} .team-members{margin-left:-30%} .team-member .member-image{width: 60%} .member-content{flex: none; width: 100%; padding-left:24%; margin-top:-100px; position: relative; z-index: 100} } /* IPAD PORTRAIT */ @media only screen and (min-width:641px) and (max-width: 910px) { /* = GLOBAL */ .site-content-contain{margin-bottom:250px} /* = FLEX */ /* = FONTS / TEXT */ /* = SPACING / PADDING */ /* = POSITIONING */ /* = BUTTONS */ /* = BUTTON LINES */ /* = BUTTON INNER */ /* = HEADER */ .header-menu-right{padding-right:60px} .header-menu-right li.menu-item-type-taxonomy{display: none} .rmp_menu_trigger{top: 28px!important; right: 20px!important} .rmp-menu a.rmp-menu-item-link{font-size: 24px!important} .rmp-menu-additional-content{position: absolute; bottom: 40px; left: 50%; right: 0px; z-index: 20} .rmp-menu-additional-content #menu-footer-contact-menu{flex-wrap: wrap} .rmp-menu-additional-content #menu-footer-contact-menu li{width: 100%} .footer-contact-menu li:not(:last-child) a:after, .hide-responsive{display: none} /* = FOOTER */ .site-footer .half{width: 100%} .site-footer .half:first-child{margin-bottom:20px} .footer-row-social{width: auto!important} /* = HOME */ .home-insta-news{flex-wrap: wrap} .moxy-grams, .moxy-news-feed{width: 100%; flex: none; max-width: 100%} .latest-posts .owl-stage, .latest-posts .owl-item{display: flex; flex-wrap: wrap} .latest-posts .owl-item{align-items: flex-end} /* = HOME HEADER */ .home-header .twothirds{order: 1; width: 100%} .home-header .third{width: 100%; order: 2; margin-top:-120px; margin-bottom:0px} h1{font-size: 74px} .home-header h1 p{margin-left:20px; margin-right:-100px} .home-header .self-top{min-height: auto; margin-bottom:40px} .home-header:after{display: none; content: none} .home-header{margin-bottom:40px} /* = HOME TALENT FEED */ section.horizontal .item{flex: 0 0 65%} /* = TALENT ARCHIVE */ .talent-archive-title-holder{width: 100%; padding-bottom:80px} .talent-archive-title-holder .stick{display: flex; flex-wrap: wrap; gap: 40px; position: relative; top: 0px} .archive-talent-right{width: 100%; padding-top:0px; margin-top:-80px} .archive-talent-feed{margin-left:0px; padding-left:40px; margin-top:-90px} /* = TALENT FEED */ .single-talent-left{width: 80%} .archive-talent-right{margin-top:0px} .talent-title-intro:before{top: -600px} .archive-talent-right h1{padding-left:120px} /* = ABOUT PAGE */ .about-header{display: flex; flex-wrap: wrap} .about-header .third{order: 1; margin-top: 120px} .about-twothirds{order: 2; margin-top:-800px} .about-header .header-gallery{gap: 20px} .about-header .header-gallery .header-image{margin-bottom:20px} .about-header-text{background-color: #DEC7B4; max-width: 66%; padding: 20px 20px 0px 0px} .about-white-text{padding-left:40px; max-width: 66%} .approach .third, .approach .twothirds{width: 100%} .approach .gap40{gap: 0px} .approach .third .stick{position: relative; top: 0px} .about-quotes{gap: 20px} .about-quotes .quotes-holder{width: 100%} .about-quotes .quotes-holder .quote-text{padding-right:80px} .team-members{margin-left:-80px} .team-member .member-image{width: 100%} .team-member-bottom{padding-top:20px} .member-content{padding-left:80px; margin-top:-110px; position: relative; z-index: 100} .popup-inner{padding: 20px} .fbx-social-toggle, .fbx-close{display: none!important} /* = SINGLE NEWS */ .single-talent-left{width: 100%; padding-right:40px} .archive-talent-right h1{padding-left:0px} } /* =IPHONE ------------------------------------------------------- */ @media only screen and (max-width: 640px) { /* = GLOBAL */ .hide-responsive{display: none} .site-content-contain{margin-bottom:360px} /* = FLEX */ /* = FONTS / TEXT */ h1{font-size: 40px; line-height: 42px} h2.big-h2, h1.big-h2{font-size: 40px} .moxy-m{width: 27px; margin-right:10px} /* = SPACING / PADDING */ .pd2040{padding: 20px 20px} .pd40{padding: 20px} .pr60{padding-right:0px} .mlr40{margin-left:20px; margin-right:20px} .mt40{margin-top:20px} .mgap0{gap: 0px} .popup-inner{padding-bottom:40px!important} /* = POSITIONING */ /* = BUTTONS */ /* = BUTTON LINES */ /* = BUTTON INNER */ /* = HEADER */ .logo{max-width: 160px} .site-header .pd2040{padding: 16px 20px!important} .menu-contact span{display: none} .menu-contact i{display: block; font-size: 32px; margin-top:-2px} .header-menu-right{margin-right:40px} #rmp_menu_trigger-98{right: 0px!important} .rmp-menu a.rmp-menu-item-link{font-size: 24px!important} .rmp-menu-wrap{width: 100%!important} .rmp-menu{padding: 20px 20px 240px!important} .rmp-menu-additional-content{position: absolute; bottom: 20px; left: 20px; right: 0px; z-index: 20} .rmp-menu-additional-content #menu-footer-contact-menu{flex-wrap: wrap} .rmp-menu-additional-content #menu-footer-contact-menu li{width: 100%} .footer-contact-menu li:not(:last-child) a:after, .hide-responsive{display: none} /* = FOOTER */ .site-footer .half{width: 100%} .site-footer .half:last-child{margin-top:10px} #menu-footer-contact-menu-1{gap: 0px} .footer-contact-menu{margin-top:10px} .footer-contact-menu ul{flex-wrap: wrap} .footer-contact-menu ul li{width: 100%} .footer-contact-menu ul li a:after{display: none} .copyright, .footer-legal-row{width: 100%; flex: none} #menu-footer-legal-menu li{width: auto} /* = HOME */ /* = HOME HEADER */ .home-header{padding-top:90px} .home-header h1{margin-right:0px; margin-left:0px} .home-header .third{order: 2; width: 100%; margin-top:0px; margin-bottom:0px; padding-bottom:0px} .home-header .twothirds{order: 1; width: calc(100% + 40px); margin-left:-20px; margin-right:-20px} .home-header .self-top{min-height: auto; margin-bottom:40px} .home-header .twothirds .lined-corners:before, .home-header .twothirds .lined-corners:after{display: none} .home-header:after{display: none} .collabs{padding-top:20px; margin-bottom:20px; padding-bottom:20px} .collabs h2{margin-left:20px; } /* = HOME TALENT FEED */ section.horizontal .animation-wrap.to-right{padding-left:40px} section.horizontal .item, .talent-spacer{flex: 0 0 80%} .talent-spacer{flex: 0 0 10px} .sticky-title{padding: 10px 20px; top: -92px} section.horizontal{padding-bottom:0px} section.horizontal .item{height: calc(100vh - 296px)} .item a .talent-title-holder-inner{padding: 20px 20px 60px!important} .view-profile{opacity: 1!important; right: 20px!important} .offset-div{height: 92px} .moxy-news-feed{max-width: 100%!important; flex: none} .latest-posts .owl-next{top: -70px} .home-talent-carousel .owl-stage{padding-left:20px!important} .home-talent-carousel .cat-intro{display: none} .home-talent-carousel .owl-next, .home-talent-carousel .owl-prev{top: -61px} .home-talent-carousel .owl-next{right: 20px} .home-talent-carousel .owl-prev{right: 80px} .collabs:after{left: 20px; right: 20px} /* = TALENT ARCHIVE */ .talent-archive-title-holder{width: 100%; padding-top: 92px} .intro-and-link{padding-right:0px!important} .archive-talent-right{width: 100%; padding-top:0px} .archive-talent-feed{padding: 20px; margin-left:0px; overflow: hidden; gap: 20px} .archive-talent-feed article{width: 100%!important; margin-left:0px!important; margin-right:0px!important} .archive-talent-feed article .cat-intro{display: none!important} /* = SINGLE TALENT */ .single-talent-left{width: calc(100%); padding-left:20px; padding-right:20px; padding-top:112px; padding-bottom:20px} .single-talent-right h2{margin-top:20px} .talent-title-intro{overflow: hidden} .talent-title-intro h1{padding-left: 120px; margin-right: -300px} .stats-flex a{width: calc(50% - 10px)} .stats-flex a i, .quote-mark i{font-size: 60px} .collab-logo{width: calc(50% - 20px)} .quotes-holder{width: 100%} .stats-flex{gap: 20px} .stat{width: 100%} .stat h3{margin-bottom:0px; padding-bottom:0px} /* = NEWS PAGE */ .archive-title-holder{padding: 102px 20px 80px} .archive-title-holder .gap40{gap: 0px} .archive-title-holder .flex1{flex: none; width: 100%} .archive-title-holder h1{margin-bottom:0px} /* = ABOUT PAGE */ .header-gallery{gap: 5px; padding: 5px} .header-image{margin-bottom:5px} .about-header{padding-top:120px} .about-header .third{position: absolute; top: auto; bottom: -250px; left: 0px; right: 0px; background-color: #dac8b6} .about-header .third .about-header-text{padding: 20px 20px 0px; background-color: #dac8b6} .about-header .third-about-height h1 p{font-size: 50px; line-height: 52px; margin-right: 0px; padding-left:20px} .about-white-text-holder{margin-top: 240px} .about-white-text{max-width: 100%} .about-white-text h3{margin-bottom:0px} .about-white-text h3 p{font-size: 16px; line-height: 1.66} .about-header .third .self-top{margin-bottom:0px} .approach .gap40{gap: 20px} .approach .third, .approach .twothirds{width: 100%} .approach .third .stick{position: relative; top: 0px;} .approach h2{margin-bottom:0px} .team .twothirds{width: 100%} .about-quotes{gap: 0px; padding-top:0px} .quote-text{padding-right:0px!important} .team-third{width: 100%} .team-members{margin-left:0px; overflow: hidden} .team-member{gap: 0px} .team-member .member-image{width: 70%; margin-left:0px!important} .team-member .member-content{flex: none; width: 100%; margin-top:-60px; position: relative; z-index: 100} .team-member .member-content h2, .team-member .member-content h3{margin-left:20px} .popup-inner{padding: 20px} .fbx-social-toggle{display: none!important} .fbx-close{background-color: transparent!important; width: 50px!important; left: auto!important; right: 20px!important; top: 10px!important} /* = NEWS ARCHIVE */ .archive-top-loops{gap: 20px} .archive-first-post, .archive-second-loop, .archive-third-loop{width: 100%} .archive-second-loop, .archive-third-loop{gap: 20px} .archive-second-loop article, .archive-third-loop article{width: calc(50% - 10px)!important} /* = SINGLE NEWS */ .single-post-holder{overflow-x: hidden} .single-talent-right .talent-title-intro h1{padding-left:110px; font-size: 36px; line-height: 38px; margin-right:0px} .post-navigation{margin-top:20px; margin-bottom:20px; padding-left:20px; padding-right:20px} }