/*
Theme Name: Benjamin Swanson
Theme URI: https://www.bswnsn.com/
Author: Benjamin Swanson
Author URI: https://www.bswnsn.com/
Description: Custom portfolio site for Benjamin Swanson
Version: 1.2.2

Benjamin Swanson WordPress Theme © 2025 Benjamin Swanson
*/


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

:root {
--linksize: 43px;
--neutral1: #262626;
--neutral2: #999999;
--dark1: #273677;
--dark2: #492940;
--dark3: #664C08;
--dark4: #2F414C;
--accent1: #577FEB;
--accent2: #AB5FA6;
--accent3: #92A15D;
--accent4: #669885
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-y: scroll;
	word-wrap: break-word;
	height: 100%
}

body {
	background-color: #FFF;
	position: relative;
	height: 100%;
	padding: 0px;
	margin: 0px;
	font-family: 'Barlow', Arial, sans-serif;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	color: #000;
	-webkit-transition: background-color 2s ease 0s;
	-moz-transition: background-color 2s ease 0s;
	-o-transition: background-color 2s ease 0s;
	-ms-transition: background-color 2s ease 0s;  
	transition: background-color 2s ease 0s
}

a {
	-webkit-transition: color 0.2s ease 0s;
	-moz-transition: color 0.2s ease 0s;
	-o-transition: color 0.2s ease 0s;
	-ms-transition: color 0.2s ease 0s;  
	transition: color 0.2s ease 0s
}

a:link, a:visited, a:active {
	text-decoration: none; 
	color: #000
}

a:hover {
	text-decoration: none;
	color: var(--neutral2)
}
	
a img {
	border-width: 0
}
	
ul:before, ul:after {
	content: "";
	display: table
}

ul:after {
	clear: both
}

ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	*zoom: 1
}

div:before, div:after {
	content: "";
	display: table
}

div:after {
	clear: both
}

div {
	list-style: none;
	padding: 0px;
	margin: 0px;
	*zoom: 1
}

h1 {
	font-family: 'Barlow', Arial, sans-serif;
	font-size: 63px;
	line-height: 63px;
	font-weight: 400;
	padding: 0px;
	margin: 0px
}

h2 {
	font-family: 'Barlow', Arial, sans-serif;
	font-size: 45px;
	line-height: 45px;
	font-weight: 400;
	margin: 0px;
	padding: 0px
}

h3 {
	font-family: 'Barlow', Arial, sans-serif;
	font-size: 36px;
	line-height: 36px;
	font-weight: 400;
	margin: 0px;
	padding: 0px
}

h4, .text-wrapper, .intro-wrapper {
	font-family: 'Barlow', Arial, sans-serif;
	font-size: 27px;
	line-height: 27px;
	font-weight: 400;
	margin: 0px;
	padding: 0px
}

p {
	margin: 9px 0px 0px 0px;
	padding: 0px
}

/* Layout */

#layout {
	width: 100%;
	height: 100%
}

#layout.home {
	background-color: #FFF
}

#background {
	position: fixed;
	width: 100%;
	height: 100%
}

#layout-padding {
	position: relative;
	top: 50px;
	margin-left: 0px;
	margin-right: 0px;
	min-height: calc(100vh - 50px)
}

#column-A {
	background-color: #FFF;
	position: fixed;
	width: 100%;
	height: 81px;
	z-index: 20
}
	
#nav {
	font-weight: 500;
	font-size: 15px;
	line-height: 19px;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-top: 31px;
	padding-right: 63px;
	float: right
}

#nav li {
	float: left;
	margin-left: 15px
}

#nav a {
	font-weight: 400
}

#nav a:hover {
	color: #000
}

#column-B {
	background: rgba(255, 255, 255, 0.9);
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 63px;
	padding-bottom: 63px
}

#navigation {
	background-color: #FFF;
	width: 100%
}

#navigation ul {
	margin-left: 27px;
	margin-right: 27px
}

#navigation li {
	width: 50%;
	margin: 27px 0 27px 0px;
	float: left
}

#prev, #next {
	height: 252px;
	text-align: center;
	margin: 27px
}

#prev img, #next img{
	padding-bottom: 27px
}

#prev a, #next a {
	display: block;
	height: 100%;
	opacity: .40
}

#prev a:hover, #next a:hover {
	opacity: .95
}

.button {
	width: 100%;
	float: left
}

.label {
	font-size: 8px;
	text-align: left
}

.label h2 {
	font-size: 14px;
	letter-spacing: auto;
	text-transform: none;
	line-height: 16px;
	padding: 0px 0px 18px 0px
}

#footer {
	background: rgba(255, 255, 255, 0.9);
	position: relative;
	width: 100%;
	height: auto;
	bottom: 0px;
	padding-top: 40px;
	padding-bottom: 108px
}

#footer a {
	color: #000
}

#footer a:hover {
	color: var(--neutral2)
}

.x-1, .x-2, .x-3 {
	height: auto;
	width: calc(100% - 30px);
	font-size: 12px;
	padding-bottom: 27px
}

.copyright {
	width: calc(100% - 30px);
	float: left;
	font-size: 8px;
}

/* Content/Template styles */

#title {
	margin-left: 27px;
	margin-right: 27px;
	margin-bottom: 27px
}

#subtitle {
	margin-left: 27px;
	margin-right: 27px;
	margin-bottom: 22px
}

#intro {
	margin-left: 27px;
	margin-right: 27px
}

#column-C {
	width: 100%;
	padding-bottom: 27px
}

#column-C.feature {
	margin-top: 27px;
	margin-bottom: 90px
}
	
.wrapper, .bgimage-wrapper {
	width: 100%;
	text-align: center
}

.wrapper img, .bgimage-wrapper img {
	display: block;
	max-width: 100%
}

.image-wrapper, .image-single-wrapper, .image-half-wrapper, .image-third-wrapper {
	position: relative;
	display: inline-block;
	margin-left: 27px;
	margin-right: 27px
}

.image, .single-image, .half-image, .third-image {
	width: 100%;
	margin: 27px 0px 0px 0px
}

.third-image a {
	opacity: .5
}

.third-image a:hover {
	opacity: .95
}

.text-wrapper {
	text-align: left;
	width: calc(100% - 54px);
	padding-top: 63px;
	margin-left: 27px;
	color: #FFF
}

.intro-wrapper {
	text-align: left;
	width: calc(100% - 30px);
	padding-top: 36px;
	margin-left: 15px;
	font-size: 27px;
	line-height: 33px;
	color: #000
}

.caption-wrapper {
	text-align: left;
	width: calc(100% - 54px);
	padding-top: 6px;
	margin-left: 27px;
	color: #FFF
}

.caption {
	position: absolute;
	bottom: 45px;
	right: 0px;
	width: 100%;
	text-align: right
}
.caption span {
	background: rgba(255, 255, 255, 0.95);
	color: #000;
	padding: 10px
}

/* Homepage Layout */

#background.home {
	background: ;
	max-height: 100%
}

#layout-padding.home {
	top: 0px;
	min-height: 100%;
	padding: 0px;
	z-index: 15
}

#touch, #window {
	position: absolute;
	display: table;
	width: 100%;
	min-height: calc(100vh - 75px);
	z-index: 0
}

#window {
	-webkit-transition: all .35s ease-in .2s;
	-moz-transition: all .35s ease-in .2s;
	-o-transition: all .35s ease-in .2s;
	-ms-transition: all .35s ease-in .2s;  
	transition: all .35s ease-in .2s
}

#window .frame {
	position: fixed;
	top: 92px;
	bottom: 92px;
	left: 30px;
	right: 30px;
	border: 10px solid #000;
	border-radius: 2px;
	z-index: -20
}

#links-wrapper {
	position: relative;
	display: inherit;
	z-index: 0
}

#name, #links {
	display: block;
	width: 100%;
	float: left;
	font-family: 'Barlow', Arial, sans-serif;
	font-size: var(--linksize);
	font-weight: 400;
	line-height: calc(var(--linksize)*.6);
	color: #000;
	z-index: 5
}

#name {
	margin-top: 27px
}

#name ul, #links ul {
	text-align: left;
	float: left
}

#name li, #links li {
	display: block;
	float: left;
	height: calc(var(--linksize)*.6);
	margin: 29px 0px 30px 0px
}

#name li:after {
    content: "\00A0"
}

#name li:last-child:after {
    content: ""
}

.word {
	-webkit-transition: all .15s ease-in 0s;
	-moz-transition: all .15s ease-in 0s;
	-o-transition: all .15s ease-in 0s;
	-ms-transition: all .15s ease-in 0s;  
	transition: all .15s ease-in 0s
}

.word:hover {
  	padding-top: 18px;
	padding-bottom: 18px
}

.bar {
	background: #000;
	position: relative;
	height: 5px;
	margin: 11px 12px 8px 12px;
	border-radius: 1px
}

#name .word:hover {
  	padding-top: 0px;
	padding-bottom: 0px
}

#name .bar {
	display: inherit;
}

#type {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow-y: hidden;
	overflow-x: hidden
}

#topnav, #botnav {
	position: fixed;
	width: 100%;
	height: 50px;
	z-index: 20
}

#topnav {
	background: rgba(255, 255, 255, 1.0);
	top: 0px
}

#topnav ul {
	float: left;
	height: 32px;
	font-size: 10px;
	line-height: 14px;
	width: 50%;
	text-align: right;
	color: #000;
}

#topnav li {
	display: inline-block;
	text-align: right;
	padding-top: 18px
}

#topnav a {
	color: #000
}

#topnav a:hover {
	color: var(--neutral2)
}

#topnav a:after {
    content: ",";
    margin-right: 10px
}

#topnav a:last-child:after {
    content: "";
    margin-right: 0px
}

.current-menu-item a{
	color: #333
}

#botnav {
	background: rgba(255, 255, 255, 1.0);
	bottom: 0px
}
#botnav ul {
	height: 32px;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-align: center;
	color: #000
}
#botnav li {
	display: inline-block;
	width: 25%;
	text-align: center;
	padding-top: 18px
}

/* About Page Layout */

#experience {
	padding-bottom: 90px
}

.row {
	width: 100%
}

.cell {
	padding-bottom: 27px
}

.tab-1 {
	display: inline-block;
	float: left;
	width: calc(100% - 30px)
}

.tab-2 {
	display: inline-block;
	float: left;
	width: calc(100% - 30px)
}

/*
.tab-3 {
	text-indent: calc(100%/4)
}
*/

.border-1, .border-2, .border-3, .border-4, .border-5 {
	margin-left: 15px;
	margin-right: 15px
}

.leading-1 {
	margin-top: 54px
}

.leading-2 {
	margin-top: 18px
}

.leading-3 {
	margin-top: 54px
}

.leading-4 {
	margin-top: 13px;
	margin-bottom: 13px
}

.leading-5 {
	margin-top: 54px
}

.empty {
	display: none
}


@media /*(min-height:929px) and*/ (min-width:768px) {
	
:root {
  --linksize: 90px
}

#layout-padding {
	top: 62px;
	min-height: calc(100vh - 62px)
}

#navigation ul {
	margin-left: calc(((100% - 126px)/9) + 63px);
	margin-right: calc(((100% - 126px)/9) + 63px)
}

#navigation li {
	width: 50%
}

#prev, #next {
	height: 360px;
	margin: 27px
}

#prev img, #next img{
	max-width: 360px;
	padding-top: 27px;
	padding-bottom: 27px
}

.label {
	font-size: 14px
}

.label h2 {
	font-size: 27px;
	line-height: 30px
}

#footer {
	padding-bottom: 180px
}

.x-1, .x-2, .x-3 {
	width: calc((100% - 30px)/3);
	float: left;
	font-size: 15px;
}

.copyright {
	width: calc(100% - 63px);
	font-size: 12px
}

#title {
	width: calc(((100% - 126px)/3)*2);
	margin-left: 63px;
	margin-right: 63px;
	margin-bottom: 27px
}

#subtitle {
	margin-left: 63px;
	margin-right: 63px
}

#intro {
	width: calc(((100% - 126px)/3)*2);
	margin-left: 63px;
	margin-right: 63px
}

#column-C {
	padding-bottom: 90px
}

.image-wrapper {
	margin-left: 63px;
	margin-right: 63px
}

.image-single-wrapper {
	margin-left: calc((((100% - 126px)/9)*2) + 63px);
	margin-right: calc((((100% - 126px)/9)*2) + 63px)
}

.image-half-wrapper {
	margin-left: calc((((100% - 126px)/9) + 63px) - 27px);
	margin-right: calc(((100% - 126px)/9) + 63px)
}

.image-third-wrapper {
	margin-left: 62px;
	margin-right: 62px
}

.image-third-wrapper ul {
	width: 100%
}

.image {
	min-width: 100%;
	margin: 27px 0px 0px 0px
}

.single-image {
	min-width: 100%
}

.half-image {
	width: calc((100% - 54px)/2);
	margin: 27px 0px 0px 27px;
	float: left
}

.third-image {
	width: calc((100% - 6px)/3);
	margin: 27px 1px 0px 1px;
	float: left
}

.text-wrapper {
	width: calc(((100% - 126px)/3)*2);
	padding-top: 90px;
	margin-left: 63px
}

.intro-wrapper {
	width: calc(((100% - 30px)/6)*5);
	margin-left: 15px;
	font-size: 36px;
	line-height: 45px
}

.caption-wrapper {
	width: calc((100% - 126px)/2);
	padding-top: 9px;
	margin-left: 63px
}

#topnav, #botnav {
	height: 62px
}

#topnav ul, #botnav ul {
	font-size: 15px;
	line-height: 19px
}

#botnav li {
	padding-top: 22px
}

.border-5 {
	margin-left: 0px;
	margin-right: 0px
}

}

@media (min-width:1000px) {

:root {
  --linksize: 63px
}

body {
	font-size: 18px;
	line-height: 18px
}

h1 {
	font-size: 63px;
	line-height: 63px
}

h2 {
	font-size: 54px;
	line-height: 54px
}

h3 {
	font-size: 36px;
	line-height: 36px
}

h4, .text-wrapper {
	font-size: 27px;
	line-height: 27px
}

.intro-wrapper {
	width: calc(((100% - 60px)/6)*5);
	margin-left: 30px;
	font-size: 27px;
	line-height: 27px
}

p {
	margin: 18px 0px 0px 0px
}

.x-1, .x-2, .x-3 {
	width: calc((100% - 60px)/3)
}

#name, #links {
	float: left
}

#name {
	width: calc(100%/3);
	margin-top: 29px
}

#links {
	width: calc((100%/3)*2)
}

#name li {
	height: var(--linksize);
	margin: 0px 0px 0px 0px
}

#links li {
	margin: 29px 30px 30px 30px
}

.bar {
	margin: 11px 30px 4px 30px
}

#name .bar {
	display: none;
}

.cell {
	padding-bottom: 0px
}

.tab-1 {
	width: calc((100% - 120px)/2)
}

.tab-2 {
	width: calc((100% - 60px)/2)
}

.border-1, .border-3 {
	margin-left: 30px;
	margin-right: 30px
}

.border-2 {
	margin-left: 0px;
	margin-right: 30px
}

.border-4 {
	margin-left: 30px;
	margin-right: 30px;
}

.leading-1 {
	margin-top: 63px
}

.leading-2 {
	margin-top: 20px
}

.leading-3 {
	margin-top: 83px
}

.leading-4 {
	margin-top: 75px
}

.leading-5 {
	margin-top: 85px
}

.empty {
	display: inherit
}

}

@media (min-width:1440px) {

:root {
  --linksize: 90px
}
	
body {
	font-size: 20px;
	line-height: 20px
}

h1 {
	font-size: 100px;
	line-height: 100px
}

h2 {
	font-size: 80px;
	line-height: 80px
}

h3 {
	font-size: 60px;
	line-height: 60px
}

h4, .text-wrapper {
	font-size: 40px;
	line-height: 40px
}

.intro-wrapper {
	width: calc(((100% - 80px)/6)*5);
	padding-top: 34px;
	margin-left: 40px;
	font-size: 40px;
	line-height: 40px
}

p {
	margin: 20px 0px 0px 0px
}

.x-1, .x-2, .x-3 {
	width: calc((100% - 120px)/3)
}

.tab-1 {
	width: calc((100% - 120px)/3)
}

.tab-2 {
	width: calc(((100% - 120px)/3)*2)
}

.border-1, .border-3 {
	margin-left: 40px;
	margin-right: 40px
}

.border-2 {
	margin-left: 0px;
	margin-right: 40px
}

.border-4 {
	margin-left: 40px;
	margin-right: 40px;
}

.leading-1 {
	margin-top: 59px
}

.leading-2 {
	margin-top: 45px
}

.leading-3 {
	margin-top: 80px
}

.leading-4 {
	margin-top: 65px
}

.leading-5 {
	margin-top: 87px
}

}

@media /*(min-height:1200px) and*/ (min-width:1800px) {
	
:root {
  --linksize: 108px
}
	
body {
	font-size: 25px;
	line-height: 25px
}

h1 {
	font-size: 125px;
	line-height: 125px
}

h2 {
	font-size: 100px;
	line-height: 100px
}

h3 {
	font-size: 75px;
	line-height: 75px
}

h4, .text-wrapper {
	font-size: 50px;
	line-height: 50px
}

.intro-wrapper {
	width: 1400px;
	padding-top: 27px;
	margin-left: 60px;
	font-size: 50px;
	line-height: 50px
}

p {
	margin: 25px 0px 0px 0px
}

#layout-padding {
	top: 64px;
	min-height: calc(100vh - 64px)
}

#title, #intro {
	width: 1116px
}
	
.image-wrapper, .image-single-wrapper, .image-half-wrapper, .image-third-wrapper {
	position: relative;
	display: inline-block;
	margin-left: 63px;
	margin-right: 63px
}

.text-wrapper, .caption-wrapper {
	width: 1116px
}

#name {
	margin-top: 49px
}

#links {
	margin-top: 0px
}

#links li {
	margin: 49px 30px 50px 30px
}

.bar {
	margin: 11px 30px 4px 30px
}

#topnav, #botnav {
	height: 64px
}

.x-1, .x-2, .x-3 {
	width: calc((100% - 120px)/3)
}

.tab-1 {
	width: calc((100% - 180px)/3)
}

.tab-2 {
	width: calc(((100% - 180px)/3)*2)
}
	
.border-1, .border-3 {
	margin-left: 60px;
	margin-right: 60px
}

.border-2 {
	margin-left: 0px;
	margin-right: 60px
}

.border-4 {
	margin-left: 60px;
	margin-right: 60px
}

.leading-1 {
	margin-top: 61px
}

.leading-2 {
	margin-top: 140px
}

.leading-3 {
	margin-top: 88px
}

.leading-4 {
	margin-top: 60px
}

.leading-5 {
	margin-top: 87px
}
	
}