:root {
  --brand-off-white: #fefefe;
  --brand-mid: #dadada;
  --brand-gray: #2b2b2b;
  --brand-red: #b30000;
  --pure-white: #ffffff;
  --pure-black: #000000;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--brand-off-white);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--brand-red);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-red);
}

#all-title{
    margin:23px auto -6px auto;
}

#about-header{
    background-image:url("/resources/images/headers/brandon-greene-hooks.png");
    background-position:center right;
    background-color:var(--brand-red);
    height:439px;
    background-repeat:no-repeat;
    margin-top:20px;
    padding:0px;
    position:relative;
    left:0px;
    top:0px;
}

#bio{
    border-left:4px solid var(--brand-gray);
    font-size:24px;
    font-style:oblique;
    font-weight:600;
    padding:10px 0px 20px 20px;
    margin-top:20px;
}

#bio a:link{
    color:var(--brand-gray);
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#bio a:hover{
    text-decoration:underline solid;
}

#bio span{
    display:block;
}

#blog-header{
    background-image:url("/resources/images/headers/retrosupply-jLwVAUtLOAQ-unsplash.jpg");
    background-position:center;
    background-size:cover;

}

.blur{
    filter:blur(8px);
}

.brick-icon{
    background-color:var(--pure-white);
    border-top:1px solid var(--brand-mid);
    display: inline-block;
    font-size: 36px;
    left: 50%;
    padding: 5px 10px;
    position: absolute;
    top: 0px;
    transform: translate(-50%, -50%);
    z-index:2;
}

.brick-icon-half-border{
    background:var(--brand-mid);
    border:1px solid var(--brand-mid);
    font-size:36px;
    left:50%;
    padding:5px 10px;
    position:absolute;
    top:0%;
    transform:translate(-50%, -75%) scaleY(0.5);
    z-index:1;
}

.brick-image{
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;
    padding:0px;
    width:calc(100% - 0px);
    transition:background-size 0.5s ease;
}

.brick-image img{
    opacity:0;
    width:calc(100% - 0px);
}

.brick-text{
    background-color:var(--pure-white);
    border-top:1px solid var(--brand-mid);
    display:inline-block;
    left:0px;
    padding:30px 20px 20px 20px;
    position:relative;
    top:0px;
    width:calc(100% - 40px);
}

.brick-title{
    cursor:pointer;
    display:block;
    font-family:"Bebas Neue", sans-serif;
    font-size:24px;
    line-height:32px;
    margin-top:-5px;
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition:text-decoration .5s ease;
    word-spacing:3px;
}

.brick-title:hover{
    text-decoration:underline solid;
}

.brick-title:link{
    color:var(--brand-gray);
}

.brick-tag{
    color:var(--brand-red);
    cursor:pointer;
    display:inline-block;
    padding-top:5px;
    font-size:16px;
}

.brick-tag:nth-child(n+3){
    margin-left:10px;
}

#cart{
    color:var(--brand-red);
    cursor:pointer;
}

#excess{
    width:100%;
    height:20px;
}

#featured{
    background-attachment:fixed;
    background-image:url("/resources/images/headers/a-light-casting-shadows.png");
    background-position:50% calc(50% + 56px);
    background-repeat:no-repeat;
    background-size:cover;
    height:calc(100% - 122px);
    min-height:250px;
    left:0px;
    margin:20px auto 0px auto;
    position:relative;
    top:0px;
    width:calc(100% - 0px);
}

#featured-banner-bottom{
    bottom:40px;
    right:-2px;
    transform-origin:bottom right;
    white-space:nowrap;
}

#featured-banner-bottom, #featured-banner-top{
    position:absolute;
}

#featured-banner-bottom h3, #featured-banner-top h3{
    background:var(--pure-white);
    margin:0px;
    text-transform:uppercase;
}

#featured-banner-bottom .triangle{
    border-right: 90px solid white;
    border-bottom: 61px solid transparent;
}

#featured-banner-bottom .triangles{
    border-right: 2px solid #ffffff;
    left:4px;
    position:relative;
    top:0px;
}

#featured-banner-bottom .triangle:nth-child(2){
    border-bottom:0px;
    border-top:61px solid transparent;
}

#featured-banner-intro{
    box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.16);
    display:inline-block;
    font-size:18px;
    font-weight:600;
    padding:10px 20px;
}

#featured-banner-title{
    box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.16);
    display:inline-block;
    font-family:"Bebas Neue", sans-serif;
    font-size:90px;
    height:82px;
    padding:20px 20px;
    word-spacing:12px;
}

#featured-banner-title-offset{
    left:0px;
    position:relative;
    top:-15px;
}

#featured-banner-top{
    left:-2px;
    top:40px;
}

#featured-banner-top .triangle{
    border-left: 39px solid white;
    border-bottom: 22px solid transparent;
}

#featured-banner-top .triangle:nth-child(2){
    border-bottom:0px;
    border-top:22px solid transparent;
}

#featured-banner-title a:link{
    color:var(--brand-gray);
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#featured-banner-title a:hover{
    text-decoration:underline solid;
}

.filter-tag{
    background-color:var(--brand-red);
    color:var(--brand-off-white);
    display:inline-block;
    font-size:14px;
    left:0px;
    margin:10px 0px 0px 30px;
    padding:5px 10px;
    position:relative;
    top:0px;
}

.filter-tag:before {
	content: "";
	position: absolute;
	display: block;
	left: -14px;
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 14px solid var(--brand-red);
    top:0px;
}

/* Makes the circle */
.filter-tag:after {
	content: "";
	background-color: var(--brand-off-white);
	border-radius: 50%;
	width: 4px;
	height: 4px;
	display: block;
	position: absolute;
	left: -6px;
	top: 12px;
}

.filter-tag:first-child{
    margin-left:0px;
}

.filter-tag span{
    cursor:pointer;
    font-weight:800;
    padding-left:5px;
}

#first-name{
    color:var(--brand-off-white);
    position:absolute;
    left:-7px;
    margin:0px;
    bottom:0px;
    padding:20px;
}

#first-name, #last-name{
    font-family:"Bebas Neue", sans-serif;
    font-size:128px;
    line-height:103px;
}

#four-oh-four{
    text-align:center;
    overflow:hidden;
    padding-top:20px;
    position:relative;
    top:0px;
    left:0px;
    height:calc(100vh - 175px);
}

#four-oh-four h2{
    color:var(--brand-mid);
    font-weight:800;
    font-size:512px;
    line-height:400px;
    margin-top:-27px;
    margin-bottom:20px;
    display:block;
}

#four-oh-four #group{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#four-oh-four button{
    background-color:transparent;
    border:none;
    font-size:16px;
    color:var(--brand-red);
    cursor:pointer;
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    font-family:"Open Sans", sans-serif;
    padding:0px;
    margin:0px;
}

#four-oh-four button:hover{
    text-decoration: underline solid;
}

#four-oh-four span{
    font-size:16px;
}

#gutter{
    border:20px solid var(--brand-off-white);
    height:calc(100% - 40px);
    left:0px;
    pointer-events:none;
    position:fixed;
    top:0px;
    width:calc(100% - 40px);
    z-index:98;
}

h1, h2{
    display:inline-block;
    font-weight:400;
    margin:0px;
    padding:0px;
}

header{
    height:calc(100% - 35px);
    min-height:372px;
    margin:auto;
    overflow:hidden;
    padding:20px 20px 10px 20px;
    text-align:center;
    width:calc(100% - 160px);
}

header.short{
    height:unset;
    min-height:unset;
}

#header-title{
    bottom:20px;
    color:var(--brand-off-white);
    display:inline-block;
    font-family:"Bebas Neue", sans-serif;
    font-size:64px;
    font-weight:800;
    line-height:53px;
    left:20px;
    margin:0px;
    position:relative;
    text-transform:uppercase;
}

html, body{
    background:var(--brand-off-white);
    color:var(--brand-gray);
    font-family:"Open Sans", sans-serif;
    font-size:0px;
    font-weight:400;
    height:100%;
    margin:0px;
    min-height:270px;
    padding:0px;
    width:100%;
}

.icon-description{
    border-bottom:2px dotted var(--brand-red);
    display:inline-block;
    font-size:8px;
    font-weight:600;
    padding:0px 0px 5px 0px;
    text-transform:uppercase;
}

a:hover .icon-description{
    border-bottom:2px solid var(--brand-red);
}

#image-preloader{
    display:none;
}

#image-preview-lightbox{
    left:50%;
    position:fixed;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:10;
}

#image-preview-lightbox img{
    height:auto !important;
    height:calc(100vh - 80px);
    left:50%;
    max-width:calc(100% - 40px);
    max-height:calc(100vh - 80px);
    position:absolute;
    padding:20px;
    top:50%;
    transform:translate(-50%, -50%);
    width:auto;
    z-index:12;
}

#image-side{
    left:80px;
    overflow:hidden;
    position:fixed;
    top:20px;
}

#image-side, #text-side{
    background-color:black;
    display:inline-block;
    height:calc(100vh - 40px);
    width:calc(50vw - 90px);
}

#last-name{
    position:relative;
    left:-7px;
    top:0px;
    margin:-15px 0px 0px 0px;
}

main{
    margin:10px auto 10px auto;
    width:calc(100% - 160px);
}

main.nomargin{
    margin:0px auto 0px auto;
}

#masonry{
    
}

.masonry-brick{
    box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.16);
    margin-top:20px;
    transition:box-shadow 0.5s ease;
}

.masonry-brick:hover{
    box-shadow:0px 0px 8px 1px rgba(0, 0, 0, 0.24);
}

.masonry-brick:hover .brick-image{
    cursor:zoom-in;
    background-size:105%;
}

.masonry-column{
    display:inline-block;
    vertical-align:top;
    width:calc(25% - 16px);
}

.masonry-column:nth-child(n+2){
    margin-left:20px;
}

#navigation{
    height:calc(100% - 40px);
    padding:20px;
    position:fixed;
    right:0px;
    text-align:center;
    top:0px;
    width:40px;
    z-index:1;
}

#navigation i, #social i{
    display:block;
    font-size:32px;
}

.navigation-link, .social-link{
    display:inline-block;
    margin-top:10px;
}

#navigation .navigation-link:first-child{
    margin-top:0px;
}

.navigation-link a:link, .social-link a:link{
    color:var(--brand-red);
    text-decoration:none;
}

.overlay-black, .overlay-color{
    background-color:var(--pure-black);
    height:100%;
    left:0px;
    opacity:0.5;
    position:absolute;
    top:0px;
    width:100%;
    z-index:1;
}

.overlay-color{
    mix-blend-mode:lighten;
    opacity:0.4;
    z-index:2;
}

#portfolio-item{
    display:inline-block;
    height:calc(100% - 40px);
    left:0px;
    position:relative;
    top:0px;
    width:calc(100% - 0px);
    margin:20px 0px 0px 0px;
}

#portfolio-item-background{
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:cover;
    filter:blur(2px);
    position:relative;
    left:-2px;
    top:-2px;
    height:calc(100% + 4px);
    width:calc(100% + 4px);
}

#portfolio-item-details{
    border-bottom:1px solid var(--brand-gray);
    border-top:1px solid var(--brand-gray);
    display:block;
    font-size:16px;
    margin-top:20px;
    padding:10px 0px;
}

.portfolio-item-details-icon{
    padding-right:8px;
}

.portfolio-item-content-title, .portfolio-item-content-title-2{
    background-color:var(--brand-gray);
    color:var(--brand-off-white);
    display:block;
    font-family:"Bebas Neue", sans-serif;
    font-size:32px;
    line-height:20px;
    margin:20px 0px 20px 0px;
    padding:16px 10px 14px 10px;
    text-transform:uppercase;
}

.portfolio-item-content-title-2{
    background-color:var(--brand-gray);
    width:calc(50% - 30px);
    display:inline-block;
    padding:10px 10px 14px 10px;
}

.portfolio-item-content-title-2 a:link{
    color:var(--brand-off-white);
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.portfolio-item-content-title-2 a:hover{
    text-decoration: underline solid;
}

#next-title{
    margin-left:20px;
    text-align:right;
}

#portfolio-item-content{
    font-size:16px;
    padding-bottom:20px;
    border-bottom:1px solid var(--brand-gray);
}

#portfolio-item-content-gallery>div{
    aspect-ratio:1;
    border:2px solid var(--brand-gray);
    padding:10px;
    display:inline-block;
    width:calc(25% - 39px);
    margin-right:20px;
}

#portfolio-item-content-gallery div div{
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    cursor:pointer;
    margin:10px;
    width:calc(100% - 20px);
    height:calc(100% - 20px);
}

#portfolio-item-content-gallery div:nth-child(4n){
    margin-right:0px;
}

#portfolio-item-content-gallery div:nth-child(n+5){
    margin-top:20px;
}

.portfolio-item-content-video{
    aspect-ratio:16/9;
    width:100%;
}

#portfolio-item-content p{
    margin:10px 0px;
}

#portfolio-item-content p:last-child{
    margin-bottom:0px;
}

#portfolio-item-gallery-main{
    /*background-color:var(--pure-white);*/
    border:4px solid var(--pure-white);
    left:50%;
    max-height:calc(100% - 88px);
    max-width:calc(50% - 88px);
    padding:20px;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:3;
    cursor:zoom-in;
}

#portfolio-item-gallery-main img{
    width:calc(100% - 40px);
    padding:20px;
    background-color:white;
}

#portfolio-item-content-gallery, #portfolio-item-content-related{
    border-bottom:1px solid var(--brand-gray);
    padding:20px 0px;
}

.item-preview{
    width:100%;
    overflow:hidden;
    position:relative;
    top:0px;
    left:0px;
    vertical-align:top;
}

.item-preview-background{
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-color:var(--pure-black);
    width:calc(100% + 4px);
    height:calc(100% + 4px);
    position:absolute;
    top:-2px;
    left:-2px;
    filter:blur(2px);
}

.item-preview img{
    width:50%;
    padding:25%;
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%, 0%);
    z-index:3;
}

#portfolio-item-title{
    background-color:var(--brand-gray);
    color:var(--brand-off-white);
    display:block;
    font-family:"Bebas Neue", sans-serif;
    font-size:64px;
    line-height:41px;
    padding:18px 10px 15px 10px;
    position:relative;
    text-transform:uppercase;
}

#portfolio-item-content-next, #portfolio-item-content-previous{
    display:none;
    width:calc(50% - 10px);
    margin-left:20px;
    margin-top:20px;
    vertical-align:top;
}

#portfolio-item-content-previous{
    margin-left:0px;
}

#posts{
    width:100%;
}

.post{
    width:100%;
}

.post img{
    height:auto;
    margin-top:20px;
    width:100%;
}

.post-contents a:link, #portfolio-item-content a:link{
    color:var(--brand-red);
    text-decoration: underline dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.post-contents a:hover, #portfolio-item-content a:hover{
    text-decoration: underline solid;
}

.post-contents h4{
    font-family:"Bebas Neue", sans-serif;
    font-size:32px;
    font-weight:800;
    margin:10px 0px 0px 0px;
}

.post-title{
    border-bottom:1px solid var(--brand-mid);
    font-size:48px;
    font-weight:800;
    margin:0px;
    padding:0px 0px 20px 0px;
    text-transform:uppercase;
}

.post-title span{
    background-color:var(--brand-mid);
    color:var(--brand-off-white);
    display:inline-block;
    padding:10px;
}

.post-contents h5{
    font-size:18px;
    font-weight:600;
    line-height:18px;
    margin:0px;
    text-transform:uppercase;
}

.post-contents p{
    font-size:16px;
}

.post-contents p:first-of-type{
    margin-top:10px;
}

.post-contents p:last-child{
    margin-bottom:0px;
}


#recent, #all{
    text-align:center;
}

.recent-icon{
    background:var(--pure-white);
    font-size:36px;
    left:50%;
    padding:5px 10px;
    pointer-events:none;
    position:absolute;
    top:75%;
    transform:translate(-50%, -50%);
}

#recent-title{
    margin:-2px auto -6px auto;
}

#recent-title, #all-title{
    display:block;
    font-family:"Bebas Neue", sans-serif;
    font-size:30px;
    font-weight:400;
    left:0px;
    padding:0px;
}

.recent-work{
    aspect-ratio:16/9;
    background-origin:content-box;
    background-position:center;
    background-repeat:no-repeat;
    background-size:50%;
    display:inline-block;
    left:0px;
    padding:20px;
    position:relative;
    top:0px;
    vertical-align:bottom;
    width:calc(100%/3 - 40px/3 - 40px);
}

.recent-work.loading{
    background:var(--brand-mid);
}

.recent-work.loading .recent-icon{
    display:none;
}

.recent-work.loading .ribbon{
    display:none;
}

.recent-work.loaded a{
    display:block;
    height:100%;
    width:100%;
}

.recent-work.loaded .recent-icon{
    display:none;
}

.recent-work.loaded .loader{
    display:none;
}


.recent-work.loaded .ribbon{
    background:var(--pure-white);
    box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.16);
    display:none;
    height:20px;
    left:50%;
    pointer-events:none;
    position:absolute;
    top:75%;
    transform:translate(-50%, -50%);
    width:calc(100% + 4px);
} 

.recent-work:nth-child(2){
    margin:20px 20px 0px 20px; 
}

.recent-work .loader{
    top:50%;
    transform: translate(0%, -50%);
}

#social{
    align-items:flex-end;
    bottom:0px;
    display:flex;
    left:0px;
    height:calc(100% - 40px);
    padding:20px;
    position:fixed;
    text-align:center;
    width:40px;
    z-index:1;
}

#social.shadowed, #navigation.shadowed{
    background-color:var(--brand-off-white);
}

#shadow-box{
    background-color:var(--pure-white);
    height:100vh;
    opacity:0.9;
    width:calc(100vw - 160px);
    z-index:11;
    cursor:zoom-out;
}

.short-header{
    align-items:flex-end;
    display:flex;
    height:400px;
    margin-top:20px;
    width:100%;
}

.closed #shadow-box{
    height:0;
    left:0px;
    opacity:0;
    position:absolute;
    top:0px;
    width:0;
}

#site-description{
    display:inline-block;
    margin:10px auto 0px auto;
    transform-origin:center left;
    white-space:nowrap;
}

#site-description, #site-logo{
    max-width:1280px;
}

#site-description-left, #site-description-middle, #site-description-right{
    font-size:24px;
    font-weight:600;
    text-transform:uppercase;
}

#site-description-middle{
    background:var(--brand-red);
    color:var(--brand-off-white);
    padding:5px 10px;
    margin:0px 10px;
}

#site-logo{
    margin:0px auto -5px auto;
}

#site-logo a:link{
    text-decoration:none;
}

#site-logo a:link #site-logo-left{
    color:var(--brand-gray);
}

#site-logo a:link #site-logo-right{
    color:var(--brand-red);
}

#site-logo-left, #site-logo-right{
    font-size:61px;
    font-family:"Bebas Neue", sans-serif;
    letter-spacing:-1px;
    line-height:27px;
    margin-bottom:20px;
    position:relative;
    text-transform:uppercase;
    top:12px;
}

#tags-filter{
    display:inline-block;
}

#text-side{
    background-color:var(--brand-off-white);
    margin-left:calc(50vw - 70px);
}

#tools img{
    background-color:var(--brand-gray);
    width:auto;
    height:32px;
    margin-top:20px;
    margin-right:10px;
    padding:8px;
}

#tools img:nth-child(1):hover{
    background-color:#f16529;
}

#tools img:nth-child(2):hover{
    background-color:#2965f1;
}

#tools img:nth-child(3):hover{
    background-color:#f5e01f;
}

#tools img:nth-child(4):hover{
    background-color:#8892bf;
}

#tools img:nth-child(5):hover{
    background-color:#69614d;
}

#tools img:nth-child(6):hover{
    background-color:#021d26;
}

#tools img:nth-child(7):hover{
    background-color:#251300;
}

#tools img:nth-child(8):hover{
    background-color:#1f0040;
}

#tools img:nth-child(9):hover{
    background-color:#156a6a;
}

#tools img:nth-child(10):hover{
    background-color:#002835;
}

#tools img:nth-child(11):hover{
    background-color:#0049b1;
}

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

/*-1234567890;=*/