/* Theme Name: Trusz Author: Joshua Trusz Description: Theme for the Trusz Creative Website Version: 1.0.0 */ /* ========================= reset =========================*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height:1;} article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block;} nav ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none} ins {background-color:#ff9; color:#000; text-decoration:none;} mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;} table {border-collapse:collapse; border-spacing:0;} hr {display:block; height:2px; border:0; border-top:1px solid #e4e0e0; margin:10px 0 10px 0; padding:0; clear:both } input, select {vertical-align:middle;} .clear {clear: both;} .hidden {opacity:0;} .visible {opacity:1;} /*********************************************************************** Structure ************************************************************************/ html, body {height:100%; width:100%; margin:0; text-align: left; font-size: 125%; background-color: #19150e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility !important; scroll-behavior: smooth; background-image: url("https://trusz.com/wp-content/themes/trusz/assets/images/bg_texture5.jpg"); background-position: top center; background-repeat: repeat; background-size: contain; color-scheme: dark;} body {height:100%; width:100%; margin:0; text-align: left; font-size: 50%; color:#fff; display: flex; flex-direction: column; font-family: 'Open Sans', sans-serif; font-weight: 400; } body.noscroll {position: fixed; overflow-y:scroll } #wrapper {overflow: hidden; position: relative; flex: 1 0 auto;} /*********************************************************************** Typography ************************************************************************/ p {font-size: 1.6em; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 2.2em; margin-bottom:30px; } h1 {font-size: 4.6em; font-family: 'Merriweather', serif; letter-spacing: 0.05em; line-height: 1.3em; font-weight: 300} h2 {font-size: 1.8em; font-family: 'Open Sans', sans-serif; letter-spacing: 0.1em; font-weight: 400} h3 {font-size: 1.5em; font-family: 'Open Sans', sans-serif; letter-spacing: 0.1em; font-weight: 400; text-transform: uppercase;} h4 {font-size: 2.4em; font-family: 'Merriweather', serif; letter-spacing: 0.0em; font-weight: 300; letter-spacing: 0.1em; line-height: 40px;} h5 {font-size: 1.6em; font-family: 'Merriweather', serif; letter-spacing: 0.07em; text-transform: uppercase;} .link {color:#348ac3; text-decoration: none; } .link:hover {color:#eb636a} strong, .strong {font-weight: 700;} @media (max-width: 1400px) { h1 {font-size: 3.28vw;} h4 {font-size: 1.71vw; line-height: 2.86vw;} p {font-size: calc(10px + 0.6em)} } @media (max-width: 1024px) { h1 {} h4 {font-size: 2.4vw; line-height: 3.4vw;} } @media (max-width: 768px) { h1 {font-size: 4.0vw;} h2 {font-size: 3.0vw;} h4 {font-size: 3.4vw; line-height: 5vw;} } @media (max-width: 640px) { h1 {font-size: 6.0vw;} h2 {font-size: 3.5vw;} h4 {font-size: 4.25vw; line-height: 6vw;} } @media (max-width: 500px) { h4 {font-size: 5vw; line-height: 7.5vw;} } /*********************************************************************** Colors ************************************************************************/ .white {color: #fff;} .black {color: #000;} .blue {color: #42B1E1} .grey {color: #b2b2b2} .green {color: #33716C} .red {color: #DF2526} .bg_white {background-color: #fff;} .bg_blue {background-color: #42B1E1;} .bg_grey {background-color:rgba(10,8,7,0.5);} ::selection {background: #454545;} ::-moz-selection {background: #454545;} /*********************************************************************** Horizontal Rules ************************************************************************/ hr.red_short {border: 0; height: 0; border-top: 2px solid rgba(223, 37, 38, 1.0); width:100px; float:left; clear:both;} hr.white_short {border: 0; height: 0; border-top: 2px solid rgba(255, 255, 255, 1.0); width:24px; } /*********************************************************************** Alignments ************************************************************************/ .align-left {display: inline-block; float: left; margin-right: 1.5em; } .align-right {display: inline-block; float: right; margin-left: 1.5em; } .align-center {margin:0 auto} .text-align-left {text-align: left} .text-align-center {text-align: center} .text-align-right {text-align: right} /*********************************************************************** Padding ************************************************************************/ .padding-top-xsmall {padding-top:20px;} .padding-top-small {padding-top:40px;} .padding-top-medium {padding-top:60px;} .padding-top-large {padding-top:90px;} .padding-top-xlarge {padding-top:120px;} .padding-bottom-xsmall {padding-bottom:20px;} .padding-bottom-small {padding-bottom:40px;} .padding-bottom-medium {padding-bottom:60px;} .padding-bottom-large {padding-bottom:90px;} .padding-bottom-xlarge {padding-bottom:120px;} @media (max-width: 1400px) { .padding-top-large {padding-top:6.43vw;} .padding-top-xlarge {padding-top:8.57vw;} .padding-bottom-large {padding-bottom:6.43vw;} .padding-bottom-xlarge {padding-bottom:8.57vw;} } /*********************************************************************** Single Column Row ************************************************************************/ .one-column-bucket {vertical-align: top; margin-bottom: 0px; margin-left: 20px; margin-right: 20px; width: 96%; } @media (max-width: 768px) { .one-column-bucket, .one-column-bucket-60, .one-column-bucket-50 { vertical-align: top; margin-left: 20px; margin-right: 20px; width: 90%; } } /*********************************************************************** Two Column Row ************************************************************************/ .two-column-bucket {vertical-align: top; margin-top: 0px; margin-bottom: 0px; margin-left: 20px; margin-right: 30px; width: 50%; } .two-column-image {vertical-align: top; margin-top: 0px; margin-bottom: 0px; margin-left: 20px; margin-right: 30px; width: 50%; } .two-column-copy {vertical-align: top; margin-top: 0px; margin-bottom: 0px; margin-left: 20px; margin-right: 30px; width: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .two-column {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 6em; -moz-column-gap: 6em; column-gap: 6em; } .vertically-centered {position: relative; top: 50%; transform: translateY(-50%);} @media (max-width: 768px) { .two-column-bucket {width: 100%; margin-left: 0px; margin-right: 0px; } .two-column-image {width: 75%; margin:0 auto 0px auto; order:1 } .two-column-copy {width: 100%; order:2; margin-left: 0px; margin-right: 0px; } } @media (max-width: 640px) { .two-column {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 6em; -moz-column-gap: 6em; column-gap: 6em; } } /*********************************************************************** Logo / Main Nav ************************************************************************/ #topNav {position: relative; display: flex; justify-content: space-between;} #top.sticky {position: fixed; height:65px; top: 0; width: 100%; background-color:rgba(10,8,7,0.8); z-index: 1; backdrop-filter: blur(10px);} #logo {top:24px; width:100px; height:60px; position: relative; z-index: 15} #logo_mark {width:24px; height:27px; position: absolute;} #logo_word {left:7px; width:66px; height:14px; position: absolute; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #logo_word_container {width:75px; height:14px; position: absolute; left:24px; top:7px; overflow: hidden;} #top.sticky #logo_word {left:-100px; } #top.sticky #logo:hover #logo_word {left:7px} #nav {position: relative; top:12px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #nav ul {display:inline-block; list-style: none;} #nav ul li {display:inline-block; margin:20px 15px; cursor: pointer;} #nav ul li a {font-size: 1.4em; color:#fff; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; position: relative; font-family: 'Open Sans', sans-serif; font-weight: 400; padding-bottom:4px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #nav li.current-menu-item a {border-bottom: 2px solid #DF2526;} #nav li.current-menu-item.work a {border-bottom: none} .work #nav li.current-menu-item a {border-bottom: none;} .work #nav li.work a {border-bottom: 2px solid #DF2526;} .single-projects #nav li.work a {border-bottom: 2px solid #DF2526;} #nav li a:after {content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; border-bottom: 2px solid #DF2526; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out} #nav li:hover a:after {width: 100%;} #nav_contact {position: relative; top:27px; font-family: 'Open Sans', sans-serif; font-weight: 400; width:100px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; margin-right:20px; height:20px;} #contact_circle_outer {position: absolute; width:18px; height:18px; border: solid 2px #ccc; border-radius: 50%; top:0px;} #contact_circle_inner {position: absolute; width:6px; height:6px; top:6px; left:6px; border-radius: 50%; z-index: 2; background-color: #DF2526} #contact_text {font-size: 1.4em; color:#fff; text-transform: uppercase; position: absolute; left:30px; white-space: nowrap; top:4px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #box {width:4px; height:2px; background: #DF2526; position: absolute; top:8px; left:11px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; opacity:0;} #triangle {width: 0; height: 0; border-top: 4px solid transparent; border-left: 5px solid #DF2526; border-bottom: 4px solid transparent; position:absolute; top:5px; left:12px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; opacity:0;} #nav_contact:hover #contact_text {left:34px;} #nav_contact:hover #box {width:16px; opacity:1} #nav_contact:hover #triangle {left:24px; opacity:1} #header_social {text-align: center; padding-top:0px; padding-bottom:50px; position: absolute; left:-16px; top:36vh; z-index: 2; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; opacity:1} #header_social ul {list-style: none; display: flex; flex-direction: column; position: relative;} #header_social li {display: inline-block; padding:10px; width:26px; height:26px; text-align: center; margin:0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; vertical-align: middle; border-radius: 100%; margin:0 5px;} #header_social li a {color:#fff; font-size: 2.4em; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } #header_social li:hover {} #header_social li:hover .social_icon {fill:#DF2526;} #top.sticky #header_social {opacity:0; } .page-home #top.sticky #header_social, .page-about-me #top.sticky #header_social {opacity: 1} .header_social_list svg {width:30px; height:30px; } .header_social_list svg.linkedin {width:24px; height:24px; margin:-16px 0 0 0px} .header_social_list svg.twitter {width:34px; height:34px; margin:-8px 0 0 0px} .header_social_list svg.instagram {width:24px; height:24px; margin:-16px 0 0 0px} .header_social_list .social_icon {fill:#fff; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #mobile-hamburger { right:20px; width: 24px; height: 20px; position: absolute; top:30px; z-index: 1000; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; cursor: pointer; display:none; } #mobile-hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } #mobile-hamburger span:nth-child(1) { top: 0px; width: 60%; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #mobile-hamburger span:nth-child(2) { top: 6px; width: 80%; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #mobile-hamburger span:nth-child(3) { top: 12px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #mobile-hamburger:hover span:nth-child(1) { top: 0px; width: 70%; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #mobile-hamburger:hover span:nth-child(2) { top: 6px; width: 90%; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #mobile-hamburger.active span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -1px; left: 3px; width: 100%; } #mobile-hamburger.active span:nth-child(2) { width: 0%; opacity: 0; width: 100%; } #mobile-hamburger.active span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 16px; left: 3px; } @media (max-width: 768px) { #header_social {display: none;} } @media (max-width: 640px) { #top.sticky #logo_word {left:7px; } #top.sticky {height:65px; top: 0; width: 100%; z-index: 1} #top.sticky #nav {top:-100px;} #top #nav {top:-100px;} #top #nav_contact {right:-150px; display:none;} #mobile-hamburger {display:inline;} } .nav_overlay {position: fixed; background: #0a0807; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index: 10; display:flex; justify-content: center; align-items: center; flex-direction: column; } .nav_overlay.open {height:100%; visibility: visible; opacity:0.95} #mobile_nav {margin-bottom:80px;} #mobile_nav ul {list-style: none;} #mobile_nav ul li {text-align: center; margin:40px 0; display:block; position: relative; } #mobile_nav ul li a {font-size: 6.5vw; color:#fff; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 300; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; padding-bottom:4px; width:auto; position: relative;} #mobile_nav ul li a:after {content: ''; position: absolute; bottom:0px; left:0; width: 0%; border-bottom: 2px solid #DF2526; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out} #mobile_nav ul li:hover a:after {width: 100%;} /*********************************************************************** Common ************************************************************************/ .mainContent {max-width:1520px; margin: 0 auto; position: relative; overflow: visible; padding:0 20px; border:solid 0px #fff} .innerContent {max-width:1300px; margin: 0 auto; position: relative; overflow: visible; padding:0 105px; border:solid 0px #fff} .outerContent {max-width:1400px; margin: 0 auto; position: relative; overflow: visible; padding:0 66px; border:solid 0px #fff} .fullWidthContent {max-width:100%; margin: 0 auto; position: relative; overflow: visible; padding:0px; } .flex {display: flex; justify-content: center;} .hide-on-mobile {display:block;} .show-on-mobile {display:none;} .button {cursor: pointer; display:inline-block; color:#fff; padding:12px 40px 12px 20px ; text-transform: uppercase; border-radius: 6px; font-size: 1.5em; letter-spacing: 0.03em; background-color: #DF2526; background-image: url("https://trusz.com/wp-content/themes/trusz/assets/images/icon_arrow_white.svg"); background-repeat: no-repeat; background-size:30px 15px; background-position: 96% 50%; text-align: left; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; white-space:nowrap; width:auto; } .button a {color:#fff;} .button:hover {box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4); margin:-2px 0 2px 0 } .title_separator {margin:0 auto; position: relative; display: flex; text-align: left; flex-direction: column;} .title_separator.centered {margin:0 auto; position: relative; display: flex; text-align: center; align-items: center; flex-direction: column;} .title_separator p {max-width:950px; width:90%;} .title_separator h3 {width: auto; border-bottom: 2px solid #DF2526; padding-bottom:10px; margin-bottom:30px;} @media (max-width: 1500px) { .fullWidthContent {max-width:100%; padding:0 20px;} .innerContent {padding:0 7.5vw;} } @media (max-width: 768px) { .innerContent {max-width:100%; margin:0; padding:0 20px;} .outerContent {max-width:100%; padding:0 20px;} } @media (max-width: 640px) { .button {padding:10px 35px 10px 15px ; font-size: 1.3em; background-size:24px 12px; background-position: 96% 50%; } } /*********************************************************************** Home ************************************************************************/ #top {-moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #home-header {position: relative; margin-top:120px;} #top.sticky + #home-header {margin-top:185px;} #home-header h1 {max-width:850px; margin:0 auto} #selfie {margin:0 auto 40px auto; width:160px; height:160px; border-radius: 100%; background-size: cover; background-position: center;} #featured_projects {display: flex; flex-direction: column; margin-bottom:50px; align-items: stretch;} .project_item {width:1296px; height:729px; border-radius: 10px; background-color: #000; background-repeat: no-repeat; background-size: cover; background-position: center; margin:10px 0 60px 0; border:solid 2px #494949; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; display:flex; align-items: stretch; } .project_item a {color:#fff; display: block; width:100%;} .project_item h4 {-webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; margin-bottom:20px; text-transform: uppercase;} .project_item .project_cats {font-size: 1.6em; display: inline-block; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; text-transform: uppercase; background-color: #292929; padding:10px 20px; border-radius: 20px; margin:15px 15px 0 0; float:right} .project_item:hover {border:solid 2px #DF2526; box-shadow: 0px 15px 60px rgba(0, 0, 0, 0.8); margin:5px 0 65px 0;} .project_item:hover .project_description {height:auto; opacity: 1} .project_item:hover .project_cats {background-color: #DF2526} #more_projects {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin-bottom:100px; align-items: stretch;} #more_projects .project_item {width:520px; height:293px; margin:10px 0; flex-grow: 1; } #more_projects .project_item:hover {margin:5px 0 15px 0; flex-grow: 1} #more_projects .project_item:nth-child(even) {margin-left:10px;} #more_projects .project_item:nth-child(odd) {margin-right:10px;} #more_projects .project_item:last-child {margin-right:0px;} #random_projects {margin-bottom:100px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } #random_projects .project_item {width:400px; height:400px; margin:10px 0; flex-grow: 1;} #random_projects .project_item:hover {margin:5px 0 15px 0; flex-grow: 1} #random_projects .project_item div {width:100%; height:100%; border-radius: 8px;} #random_projects .project_item:nth-child(3n + 3) {margin-left:20px;} #random_projects .project_item:nth-child(3n + 1) {margin-right:20px;} .random_image {background-size: cover; background-repeat: no-repeat; background-position: center;} .project_cats .Featured {display:none;} @media (max-width: 1520px) { .project_item {width:auto; height:46.15vw; } } @media (max-width: 1400px) { #home-header h1 {max-width:60.71vw;} #home-header {margin-top:10vw;} #selfie {margin:0 auto 2.86vw auto; width:11.43vw; height:11.43vw;} #top.sticky + #home-header {margin-top:14vw;} .project_item {margin:10px 0 4.29vw 0;} .project_item:hover {margin:5px 0 4.64vw 0;} #more_projects .project_item {width:34vw; height:20.93vw;} #random_projects .project_item {width:auto; height:25.57vw;} } @media (max-width: 1024px) { #top.sticky + #home-header {margin-top:14.5vw} #selfie {margin:0 auto 4vw auto; width:15vw; height:15vw;} } @media (max-width: 768px) { .project_item {width:auto; height:44vw; margin:10px 0 20px 0; border-radius: 6px;} #home-header h1 {max-width:80vw;} #home-header {margin-top:15vw} #top.sticky + #home-header {margin-top:23vw} #selfie {margin:0 auto 5.5vw auto; width:20vw; height:20vw;} .project_item:hover {margin:5px 0 25px 0;} .project_item .project_cats {font-size: 1.2em; padding:6px 8px; border-radius: 20px; margin:7px 7px 0 0; } } @media (max-width: 640px) { #home-header h1 {max-width:80vw;} #home-header {margin-top:13vw} #top.sticky + #home-header {margin-top:23vw} .project_item:hover {box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.8); margin:10px 0 20px 0;} .project_item .project_cats {font-size: 1.0em; padding:6px 8px; border-radius: 20px; margin:7px 7px 0 0; } #more_projects .project_item {margin:5px 0;} #more_projects .project_item:hover {margin:5px 0 5px 0;} #more_projects .project_item:nth-child(even) {margin-left:5px;} #more_projects .project_item:nth-child(odd) {margin-right:5px;} #more_projects .project_item:last-child {margin-right:0px;} #random_projects .project_item {margin:5px 0;} #random_projects .project_item:nth-child(3n + 3) {margin-left:10px;} #random_projects .project_item:nth-child(3n + 1) {margin-right:10px;} } @media (max-width: 500px) { #home-header {margin-top:10vw} #top.sticky + #home-header {margin-top:20vw} #selfie {margin:0 auto 5.5vw auto; width:25vw; height:25vw;} } @media (max-width: 420px) { #home-header {margin-top:0vw} #top.sticky + #home-header {margin-top:25vw} } /*********************************************************************** About ************************************************************************/ #about {margin-top:130px;} #top.sticky + #about {margin-top:190px;} #about_basics {display: flex; flex-direction: row; justify-content: space-between;} #about_image_container {width:45%; border-radius:100%; display: flex; justify-content: center;} #about_image {border-radius:100%; width:400px; height:400px; background-position: center; background-repeat: no-repeat; background-size: cover;} #about_copy {width:50%;} #stats {display: flex; flex-direction: row; justify-content: center; margin:30px 0 60px 0} .stat_outer {width:250px; min-height:360px; padding:24px; border-radius: 20px; background-color: #171717; margin:0 15px;} .stat_inner {width:250px; min-height:360px; border-radius: 12px; border: solid 1px #444444; display: flex; justify-content: center; flex-direction: column; align-items: center;} .stat_icon {height:60px; width:auto; } .stat_number {font-size: 8.0em; font-family: 'Merriweather', serif; font-weight: 300; margin:50px 0 30px 0} .stat_title {font-size: 2.2em; text-align: center; padding:0 40px; line-height: 32px;} #quote {display: block; margin:150px 0; text-align: center; position: relative;} .quote {font-size: 3.0em; font-family: 'Merriweather', serif; font-weight: 300; letter-spacing: 0.1em; line-height: 46px; padding:0 40px 20px 40px;} .quote_attribute {font-size: 1.8em; line-height: 24px} #quote::before {content: '“'; font-size: 7.0em; font-family: 'Merriweather', serif; font-weight: 300; position: absolute; left:15%; top:0px; } #quote::after {content: '”'; font-size: 7.0em; font-family: 'Merriweather', serif; font-weight: 300; position: absolute; right:15%; top:0px;} #history {display: flex; flex-direction: column; margin-bottom:100px;} .job {background-color: #0f0d08; border-radius: 14px; padding:30px; width:auto; margin:15px 0; display: flex; flex-direction: row; color:#fff; justify-content: space-between; align-items: center;} .years {font-size: 2.0em; font-family: 'Merriweather', serif; letter-spacing: 0.0em; font-weight: 300; letter-spacing: 0.1em; line-height: 40px; width:25%; text-align: right;} .company_icon {height:60px; width:auto; margin-right:10px; } .company_container {display: flex; flex-direction: column; width:65%;} .company {font-size: 2.8em; font-weight: 600; margin-bottom:10px;} .position {font-size: 2.0em; font-weight: 300;} #history2 {grid-template-columns: repeat(12,1fr);display: grid; padding: 4em 0; row-gap: 1em;} #history2 div {padding:20px;} .history_item1 {grid-column: 1/span 3; grid-row: 4/4; background: #fff} .history_item2 {grid-column: 4/span 4; grid-row: 3/3; background: #ccc} .history_item3 {grid-column: 6/span 3; grid-row: 2/2; background: #cc0} .history_item4 {grid-column: 9/span 4; grid-row: 1/1; background: #c5c5c5} @media (max-width: 1400px) { #quote {margin:10.71vw 0;} #about_image {width:28.57vw; height:28.57vw; } .quote {font-size: 2.14vw; line-height: 3.28vw; padding:0 2.86vw 2.86vw 2.86vw;} #quote::before {font-size: 5vw; top:-2.86vw; } #quote::after {font-size: 5vw; bottom:-2.86vw;} .years {font-size: 1.42vw;} .company_icon {height:4.28vw;} .company {font-size: 2.0vw;} .position {font-size: 1.43vw;} } @media (max-width: 1024px) { #quote {margin:15vw 0;} .quote {font-size: calc(10px + 2.0vw); line-height: 5vw; padding:0 3vw 3vw 3vw;} #quote::before {font-size: calc(10px + 5vw); top:-2.86vw; } #quote::after {font-size: calc(10px + 5vw); bottom:-2.86vw;} .years {font-size: 2.0vw;} .company_icon {height:5.25vw;} .company {font-size: 2.4vw;} .position {font-size: 1.8vw;} } @media (max-width: 768px) { #about {margin-top:60px;} #top.sticky + #about {margin-top:120px;} #about_basics {flex-direction: column; } #about_image_container {width:100%; margin-bottom:8vw; } #about_image {width:30vw; height:30vw;} #about_copy {width:100%;} #quote {margin:15vw 0 20vw 0; } .quote_attribute {font-size: 1.6em;} .company_container {width:60%;} .job {border-radius: 10px; padding:20px; margin:5px 0; } .years {font-size: 2.6vw; width:35%} .company_icon {height:6.5vw; margin-right:10px;} .company {font-size: 2.6vw; margin-bottom:8px;} .position {font-size: 2.4vw;} } @media (max-width: 500px) { #about {margin-top:40px;} #top.sticky + #about {margin-top:100px;} .quote {font-size: calc(10px + 1.6vw); line-height: 6.5vw; } .job {border-radius: 10px; padding:10px 15px; margin:5px 0; } .years {font-size: 3.2vw; width:40%} .company_icon {height:6.5vw; margin-right:10px;} .company_container {display: flex; flex-direction: column; width:55%;} .company {font-size: 3.0vw; margin-bottom:6px;} .position {font-size: 2.8vw;} } @media (max-width: 400px) { #about {margin-top:0px;} #top.sticky + #about {margin-top:100px;} } /*********************************************************************** Project ************************************************************************/ #project_deepdive {margin-top:60px;} #project_deepdive h1 {font-size: 6.0em; text-transform: uppercase;} #project_deepdive h2 {font-size: 2.4em} #top.sticky + #project_deepdive {margin-top:120px;} #project_header_image {width:auto; max-width:100%; height:480px; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 10px; } #overview {display: flex; flex-direction: row; align-items: center; justify-content: center;} .column_left {width:50%; margin-right:10%;} .column_left p {line-height: 30px} .column_right {width:50%;} .body_copy {max-width: 800px; width:80%; margin: 0 auto;} .overview_stats {margin-bottom:40px; display: flex; flex-direction: column; justify-content: flex-start;} .overview_stats .stat_title {font-size: 1.4em; color:#9A9A9A; text-transform: uppercase; text-align: left; padding:0; letter-spacing: 0.05em} .overview_stats .stat_copy {font-size: 2.4em; text-align: left;} .stat_copy a {font-size: 1.0em; color:#fff; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} .stat_copy a:hover {color:#DF2526;} #contributors {display: flex; justify-content: center; } #contributors h4 {font-size: 1.4em; color:#9A9A9A; text-transform: uppercase; text-align: center; padding:0; letter-spacing: 0.05em; font-family: 'Open Sans', sans-serif; font-weight: 400; } .contributor_item {width:200px;} .project_image_container {margin-bottom:40px; text-align: center;} .project_image {height:auto; width:auto; max-width: 100%; border-radius: 10px; margin-bottom:10px;} .image_meta {font-size: 1.4em; letter-spacing: 0.1em;} .image_slider {height:729px; text-align: center;} .image_slider .slider_image {max-width:1296px; height:729px; border-radius: 10px; background-position: center; background-size: cover; background-repeat: no-repeat;} .slick-slider {margin-bottom:60px !important;} @media (max-width: 1550px) { .image_slider {height:47.03vw;} .image_slider .slider_image {max-width:83.62vw; height:47.03vw;} #project_header_image {width:90.32vw; height:30.97vw; } } @media (max-width: 1400px) { #project_deepdive h1 {font-size: 4.29vw;} #project_deepdive h2 {font-size: 1.71vw} } @media (max-width: 1024px) { #project_deepdive h1 {font-size: 6vw;} #project_deepdive h2 {font-size: 3vw} /*.project_image {height:47.03vw;} */ } @media (max-width: 768px) { .image_slider .slider_image {max-width:100%; height:53.38vw;} .project_image_container {margin-bottom:10px; } /*.project_image {height:53.38vw;} */ } @media (max-width: 640px) { #overview {flex-direction: column;} .column_left {width:100%; margin-right:0%;} .column_right {width:100%;} } /*********************************************************************** Coming Soon ************************************************************************/ #logo_coming_soon {width:100%; text-align: center} #logo_coming_soon img {width:70%; max-width: 700px; margin-top: 200px} #error_container {} #error_container img {max-width: 350px; border-radius: 100%; margin:0 0 40px 0; width:80%;} /*********************************************************************** Footer ************************************************************************/ footer {border-bottom:solid 15px #DF2526; bottom:0; flex-shrink: 0;} #footer_cta {text-align: center; font-size: 1.0em; width: auto;} #footer_cta a {color:#fff; font-size: 3.2em; display:inline-block; margin-bottom:15px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; letter-spacing: 0.1em} #footer_cta a:hover {color:#DF2526} .CTA_title {font-size: 2.8em; font-weight: 700; text-transform: uppercase; margin-bottom:30px; display:block} .address {font-size: 1.8em; color:#7B7B7B; text-transform: uppercase; display:block; margin-bottom:10px; letter-spacing: 0.1em} .phone {font-size: 1.8em; display:block; letter-spacing: 0.2em; margin-bottom:50px; } #footer_social {text-align: center; padding-top:0px; padding-bottom:50px;} #footer_social ul {list-style: none} #footer_social li {display: inline-block; padding:10px; width:26px; height:26px; text-align: center; margin:0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; vertical-align: middle; background: #fff; border-radius: 100%; margin:0 5px;} #footer_social li a {color:#fff; font-size: 3.5em; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } #footer_social li:hover {background: #DF2526} #footer_social li:hover .social_icon {fill:#fff;} .social_icon {vertical-align: middle;} .footer_social_list svg {width:30px; height:30px; } .footer_social_list svg.linkedin {width:24px; height:24px; margin:-16px 0 0 0px} .footer_social_list svg.twitter {width:34px; height:34px; margin:-8px 0 0 0px} .footer_social_list svg.instagram {width:24px; height:24px; margin:-16px 0 0 0px} .social_icon {fill:#555; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} #footer_brand p {font-size: 1.4em; color:#7B7B7B;} @media (max-width: 768px) { .CTA_title {font-size: calc(14px + 2.2vw); margin-bottom:2vw; } .address {font-size: calc(14px + 0.6vw); } .phone {font-size: calc(14px + 0.6vw); margin-bottom:6.5vw; } #footer_cta a {font-size: 4.17vw;margin-bottom:15px;} } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*! By André Rinas, www.andrerinas.de Documentation, www.simplelightbox.de Available for use under the MIT License Version 2.8.0 */ body.hidden-scroll { overflow: hidden; } .sl-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: 0.7; display: none; z-index: 1035; } .sl-wrapper { z-index: 1040; width: 100%; height: 100%; left: 0; top: 0; position: fixed; } .sl-wrapper * { box-sizing: border-box; } .sl-wrapper button { border: 0 none; background: transparent; font-size: 28px; padding: 0; cursor: pointer; } .sl-wrapper button:hover { opacity: 0.7; } .sl-wrapper .sl-close { display: none; position: fixed; right: 30px; top: 30px; z-index: 10060; margin-top: -14px; margin-right: -14px; height: 44px; width: 44px; line-height: 44px; font-family: Arial, Baskerville, monospace; color: #fff; font-size: 2rem; } .sl-wrapper .sl-counter { display: none; position: fixed; top: 30px; left: 30px; z-index: 1060; color: #fff; font-size: 1rem; } .sl-wrapper .sl-navigation { width: 100%; display: none; } .sl-wrapper .sl-navigation button { position: fixed; top: 50%; margin-top: -22px; height: 44px; width: 22px; line-height: 44px; text-align: center; display: block; z-index: 10060; font-family: Arial, Baskerville, monospace; color: #fff; } .sl-wrapper .sl-navigation button.sl-next { right: 5px; font-size: 2rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 5px; font-size: 2rem; } @media (min-width: 35.5em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 10px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 10px; font-size: 3rem; } } @media (min-width: 50em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 20px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 20px; font-size: 3rem; } } .sl-wrapper.sl-dir-rtl .sl-navigation { direction: ltr; } .sl-wrapper .sl-image { position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000; } .sl-wrapper .sl-image img { margin: 0; padding: 0; display: block; border: 0 none; width: 100%; border-radius:10px; height: auto; } @media (min-width: 35.5em) { .sl-wrapper .sl-image img { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image img { border: 0 none; } } .sl-wrapper .sl-image iframe { background: #000; border: 0 none; } @media (min-width: 35.5em) { .sl-wrapper .sl-image iframe { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image iframe { border: 0 none; } } .sl-wrapper .sl-image .sl-caption { display: none; padding: 10px; color: #fff; background: rgba(0, 0, 0, 0.8); font-size: 1rem; position: absolute; bottom: 0; left: 0; right: 0; } .sl-wrapper .sl-image .sl-caption.pos-top { bottom: auto; top: 0; } .sl-wrapper .sl-image .sl-caption.pos-outside { bottom: auto; } .sl-wrapper .sl-image .sl-download { display: none; position: absolute; bottom: 5px; right: 5px; color: #000; z-index: 1060; } .sl-spinner { display: none; border: 5px solid #333; border-radius: 40px; height: 40px; left: 50%; margin: -20px 0 0 -20px; opacity: 0; position: fixed; top: 50%; width: 40px; z-index: 1007; -webkit-animation: pulsate 1s ease-out infinite; -moz-animation: pulsate 1s ease-out infinite; -ms-animation: pulsate 1s ease-out infinite; -o-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite; } .sl-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .sl-transition { transition: -moz-transform ease 200ms; transition: -ms-transform ease 200ms; transition: -o-transform ease 200ms; transition: -webkit-transform ease 200ms; transition: transform ease 200ms; } @-webkit-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @keyframes pulsate { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @-moz-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @-o-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @-ms-keyframes pulsate { 0% { transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('https://trusz.com/wp-content/themes/trusz/assets/css/../images/ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('https://trusz.com/wp-content/themes/trusz/assets/css/../fonts/slick.eot'); src: url('https://trusz.com/wp-content/themes/trusz/assets/css/../fonts/slick.eot?#iefix') format('embedded-opentype'), url('https://trusz.com/wp-content/themes/trusz/assets/css/../fonts/slick.woff') format('woff'), url('https://trusz.com/wp-content/themes/trusz/assets/css/../fonts/slick.ttf') format('truetype'), url('https://trusz.com/wp-content/themes/trusz/assets/css/../fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -30px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 10px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 5px; content: '•'; text-align: center; opacity: .25; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: white; }