:root {
 	--pink: rgb(255, 0, 102);
    --dark-pink: rgb(214, 0, 86);
  	--main: rgb(251, 251, 251);
    --dark: #312d4a;
    --medium-grey: #908ca6;
    --light-grey: #e2e1ec;
    --white: #fff;
  	--shadow-color: 0deg 0% 62%;
  	--shadow-elevation-low:
    	0.2px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    	0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    	1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
    --shadow-elevation-medium:
        0.0px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
        0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
        5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
    --shadow-elevation-high:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
        1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
        2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
        4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
        7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
        11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
        17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
        25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

.borel-regular {
  font-family: "Borel", cursive;
  font-weight: 400;
  font-style: normal;
}

html{
	background: var(--main);
    font-size: 15px !important;
}

@media (max-width: 770px) {
   #home-hero {
       flex-direction: column;
   }
   .fill-height{
	height: auto !important;
	}
   .thumb-width{
       padding: 0 !important;
       margin: 1rem !important;
    }
    body{
       margin: 0 auto !important;
       padding-left: 2vw !important;
       padding-right: 2vw !important;
	}
    .horizontal-buttons{
        justify-content: center !important;
        gap: 16px;
        margin-top: 16px;
	}
    .primary-button, .secondary-button{
        height: 48px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        font-size: 1.05em;
	}
    .switch-button, .filter-expand{
		height: 44px !important;
        font-size: 1.05em !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
	}
}

.fill-height{
	height: 80vh;
}

.hide{
	display: none !important;
}

/**
 * Page-Navigation
 */

/**
 * mobile ----->
 */
.page-nav.is-mobile{
	flex-direction: column;
    padding: 40px 24px;
    background-color: rgba(251,251,251, .9);
    width: fit-content;
    min-width: 240px;
    border-radius: 24px;
    outline: 2px solid var(--light-grey);
    outline-offset: -2px;
    backdrop-filter: blur(3px);
    margin-top: 8px;
    margin-left: 8px;
    transition: background-color .5s;
    position: fixed;
}
.page-nav.is-mobile::before{
    display: none;
}
.page-nav.is-mobile.closed{
    background-color: rgba(251,251,251, 0.8);
    backdrop-filter: blur(10px);
    outline: none !important;
    width: 80px !important;
    border-radius: 100px;
    min-width: unset;
}
.page-nav.is-mobile.closed .nav-links-container{
    display: none;
    transition: .5s;
}
.page-nav.is-mobile a{
	font-size: 1.6em;
    min-width: 240px !important;
}
.page-nav.is-mobile .nav-links-container{
    flex-direction: column;
    padding-top: 16px;
}
.page-nav.is-mobile #LinkedIn{
	position: relative;
    right: inherit;
}
.page-nav.is-mobile .hamburger-lines {
  display: block;
  height: 25px;
  width: 32px;
  position: absolute;
  top: 28px;
  left: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-nav.is-mobile .hamburger-lines .line {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 10px;
  background: var(--dark);
}
.page-nav.is-mobile .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.page-nav.is-mobile .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}
.page-nav.is-mobile .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
.page-nav.is-mobile .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 22px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.page-nav.is-mobile input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}
.page-nav.is-mobile input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}
.page-nav.is-mobile input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}
.page-nav.is-mobile input[type="checkbox"]:checked ~ .page-nav.is-mobile {
  background-color: none;
  border: none;
}
/**
 * <------mobile
 */

.page-nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 24px;
    justify-content: center;
    z-index: 4000;
    display:flex;
    gap: 40px;
    pointer-events: all;
}
.page-nav::before{
    position:absolute;
    bottom: -7vw;
    right: 0;
	height: 20vw;
    width: 100vw;
    margin: 0 auto;
    content: "";
    display: block;
    opacity: .85;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' width='1695.3297' height='337.7331' viewBox='0 0 1695.3297 337.7331'%3E%3Cg id='Layer_1-2'%3E%3Cpath d='M0 323.5808c36.0188 21.0814 89.411 18.3147 122.0204-6.3228 19.2452-14.5404 31.2479-35.1998 52.2265-47.9661 32.1957-19.5924 77.1764-15.656 114.6642-4.3583 37.4878 11.2977 72.4522 29.0421 111.6145 35.2445 11.9415 1.8913 24.702 2.6042 35.8897-1.3572 25.6917-9.0971 32.1545-37.6724 54.0643-52.0887 32.3802-21.3057 78.985-3.3145 115.4563 12.7546 34.6464 15.2651 70.6126 28.4486 107.5273 39.4145 10.0248 2.978 20.9768 5.8097 31.109 3.096 30.6939-8.2208 23.5623-55.1989 54.5941-62.4853 7.6887-1.8054 15.9474-.4111 23.4852 1.7923 31.6455 9.2504 54.7946 31.5582 82.4899 47.3196 27.6954 15.7614 68.297 23.9121 92.7858 4.8151 13.9038-10.8425 18.4475-27.3479 25.809-41.984 7.3615-14.6361 21.4197-29.6641 40.4585-29.4869 11.3832.106 21.4988 5.718 30.8582 11.1193 38.6202 22.2876 77.2404 44.5753 115.8605 66.8629 19.2559 11.1125 42.5335 22.7546 64.6339 16.2919 35.6811-10.4341 34.8732-56.606 66.6459-73.6951 25.846-13.9014 60.9656-1.8605 83.5095 15.5822 22.544 17.4427 39.6775 40.2421 66.2978 53.0878 6.9772 3.3668 14.8413 6.0224 22.88 5.5116 26.8429-1.7056 32.5409-32.1406 31.1033-54.5475-1.4375-22.407 6.5869-53.0206 33.5051-52.7082 7.1418.0829 13.9042 2.7051 19.9307 5.9005 32.9336 17.4622 57.2132 54.7121 95.91 50.454V0H0v323.5808Z' fill='%23fbfbfb'/%3E%3C/g%3E%3C/svg%3E");
}
.page-nav.mobile-nav .nav-block a{
   font-size: 1.6em; 
}
.page-nav.mobile-nav #LinkedIn{
    position: relative !important;
    right: inherit !important;
    padding-top: 8px;
}
.nav-links-container{
    justify-content: center;
    z-index: 100;
    display:flex;
    gap: 40px;
    justify-content: center;
}
.nav-block a{
    color: var(--dark) !important;
    font-size: 1.4rem;
    opacity: 1 !important;
    text-decoration: none !important;
}
.nav-block a.active-nav{
	font-weight: 600 !important;
    text-decoration: underline !important;
}
#LinkedIn{
	position: absolute;
    right: 32px;
}
#LinkedIn a{
    color: var(--medium-grey) !important;
}
.page-nav svg{
    display: block;
	width: 4rem;
    max-width: 50px;
    margin-bottom: 1rem;
}
.cls-1{
    fill:#4d4d4d;opacity:0.53;
}
.cls-2{
    fill:#fff;
}
.hello{
	font-family: "Borel", cursive !important;
    font-size: 3em !important;
}
/**
 * Timeline
 */

.timeline-point{
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.timeline-image{
	height: 80px;
    width: 80px;
    overflow: hidden;
    border-radius: 100px;
}

/**
 * Content
 */

body {
	background-color: #fff;
	color: #000;
    padding-bottom: 200px;
}
.thumbnails{
	margin-bottom: 200px;
}
.project-content{
 	max-width: 900px;
    margin: 0 auto;
}
.project-content > img{
	width: 100% !important;
    height: auto !important;
}
.project-content .centered-img > img {
	max-width: 100% !important;
    height: auto !important;
}
.thumb-width-container.magen{
	background-color: var(--main);
    padding-left: 2.2rem;
    padding-right: 1rem;
    position:relative;
}
.thumb-width-container.about{
	position:absolute;
    width: 100vw;
    margin-left: 0 !important;
    left: 0;
    top: 0;
}
body.mobile .about-padder{
	min-height: 280px !important;
}
body.mobile .thumb-width-container{
    padding-left: 0;
}
body.mobile .home-gallery{
	margin-left: -2vw;
}
.about-padder{
	height: 30vh;
    min-height: 145px;
}
.about-content{
}
.about-inner-content{
    max-width: 1000px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    margin: 0 auto;
}
#home-hero{
	background-color: var(--main);
    color: var(--dark);
    padding-bottom: 90px;
    min-height: 28vh;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: -30px;
    mix-blend-mode: darken;
}
#home-hero h1{
	color: var(--dark);
}
.me-avatar{
	padding: 12px;
    flex: 32%;
    text-align: center;
}
.me-avatar img{
	width: 100% !important;
    height: 100% !important;
    max-width: 260px;
    max-height: 260px;
    object-fit: cover;
}
#me-sketch{
    flex: 70% !important;
    padding: 0;
}
#me-sketch img{
    max-width: 400px !important;
    max-height: 400px !important;
}
.me-text{
	flex: 68%;
}
.user-quote{
	font-family: "Diatype Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
    line-height: 1.65em;
    border-left: 3px solid var(--light-grey);
    margin: 16px
}

.divider-squiggle-bottom, .divider-squiggle-top, .divider-squiggle{
	width: 100vw;
    height: 8vw;
    position: absolute;
    left: 0;
    text-align: center;
    margin-top: -8vw;
}
.divider-squiggle::before{
    height: 11vw;
    width: 95vw;
    margin: 0 auto;
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='23.9438in' height='2.3083in' viewBox='0 0 1723.9537 166.198'%3E%3Cpath d='M1711.0238 75.3245c-38.6967 4.2581-62.9764-32.9918-95.91-50.454-6.0265-3.1954-12.7888-5.8176-19.9307-5.9005-26.9181-.3124-34.9426 30.3012-33.5051 52.7082 1.4375 22.407-4.2604 52.842-31.1033 54.5475-8.0388.5108-15.9029-2.1448-22.88-5.5116-26.6203-12.8456-43.7538-35.6451-66.2978-53.0878-22.544-17.4427-57.6636-29.4835-83.5095-15.5822-31.7727 17.0891-30.9648 63.261-66.6459 73.6951-22.1003 6.4627-45.378-5.1793-64.6339-16.2919-38.6202-22.2876-77.2404-44.5753-115.8605-66.8629-9.3595-5.4013-19.475-11.0133-30.8582-11.1193-19.0388-.1773-33.0969 14.8507-40.4585 29.4869-7.3615 14.6361-11.9052 31.1416-25.809 41.984-24.4888 19.0969-65.0904 10.9463-92.7858-4.8151-27.6954-15.7614-50.8444-38.0692-82.4899-47.3196-7.5378-2.2034-15.7965-3.5976-23.4852-1.7923-31.0318 7.2864-23.9002 54.2645-54.5941 62.4853-10.1322 2.7137-21.0843-.118-31.109-3.096-36.9147-10.9659-72.8809-24.1494-107.5273-39.4145-36.4713-16.0691-83.0761-34.0604-115.4563-12.7546-21.9098 14.4164-28.3726 42.9916-54.0643 52.0887-11.1876 3.9614-23.9481 3.2484-35.8897 1.3572-39.1623-6.2024-74.1267-23.9468-111.6145-35.2445-37.4878-11.2977-82.4685-15.2341-114.6642 4.3583-20.9786 12.7664-32.9813 33.4257-52.2265 47.9661-32.6094 24.6375-86.0016 27.4042-122.0204 6.3228' fill='none' stroke='%23f06' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");;
}
.divider-squiggle-bottom::after, .divider-squiggle-top::after, .divider-squiggle::after{
    position: relative;
    content: "";
	height: 40px;
    display: block;
}
.divider-squiggle-top{
    height: 20vw !important;
    margin-top: -8vw !important;
}
.divider-squiggle-top::after{
    z-index: -30;
    height: 20vw;
    width: 100vw;
    margin: 0 auto;
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' width='1695.3297' height='337.1462' viewBox='0 0 1695.3297 337.1462'%3E%3Cg id='Layer_1-2'%3E%3Cpath d='M0 114.1102c36.0188 21.0814 89.411 18.3147 122.0204-6.3228 19.2452-14.5404 31.2479-35.1998 52.2265-47.9661 32.1957-19.5924 77.1764-15.656 114.6642-4.3583 37.4878 11.2977 72.4522 29.0421 111.6145 35.2445 11.9415 1.8913 24.702 2.6042 35.8897-1.3572 25.6917-9.0971 32.1545-37.6724 54.0643-52.0887 32.3802-21.3057 78.985-3.3145 115.4563 12.7546 34.6464 15.2651 70.6126 28.4486 107.5273 39.4145 10.0248 2.978 20.9768 5.8097 31.109 3.096 30.6939-8.2208 23.5623-55.1989 54.5941-62.4853 7.6887-1.8054 15.9474-.4111 23.4852 1.7923 31.6455 9.2504 54.7946 31.5582 82.4899 47.3196 27.6954 15.7614 68.297 23.9121 92.7858 4.8151 13.9038-10.8425 18.4475-27.3479 25.809-41.984 7.3615-14.6361 21.4197-29.6641 40.4585-29.4869 11.3832.106 21.4988 5.718 30.8582 11.1193 38.6202 22.2876 77.2404 44.5753 115.8605 66.8629 19.2559 11.1125 42.5335 22.7546 64.6339 16.2919 35.6811-10.4341 34.8732-56.606 66.6459-73.6951 25.846-13.9014 60.9656-1.8605 83.5095 15.5822 22.544 17.4427 39.6775 40.2421 66.2978 53.0878 6.9772 3.3668 14.8413 6.0224 22.88 5.5116 26.8429-1.7056 32.5409-32.1406 31.1033-54.5475-1.4375-22.407 6.5869-53.0206 33.5051-52.7082 7.1418.0829 13.9042 2.7051 19.9307 5.9005 32.9336 17.4622 57.2132 54.7121 95.91 50.454v280.7893H0V114.1102Z' fill='%23e2e1ec'/%3E%3C/g%3E%3C/svg%3E");
}
.divider-squiggle-bottom::after{
    z-index: -30;
    height: 20vw;
    width: 100vw;
    margin: 0 auto;
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' width='1695.3297' height='337.7331' viewBox='0 0 1695.3297 337.7331'%3E%3Cg id='Layer_1-2'%3E%3Cpath d='M0 323.5808c36.0188 21.0814 89.411 18.3147 122.0204-6.3228 19.2452-14.5404 31.2479-35.1998 52.2265-47.9661 32.1957-19.5924 77.1764-15.656 114.6642-4.3583 37.4878 11.2977 72.4522 29.0421 111.6145 35.2445 11.9415 1.8913 24.702 2.6042 35.8897-1.3572 25.6917-9.0971 32.1545-37.6724 54.0643-52.0887 32.3802-21.3057 78.985-3.3145 115.4563 12.7546 34.6464 15.2651 70.6126 28.4486 107.5273 39.4145 10.0248 2.978 20.9768 5.8097 31.109 3.096 30.6939-8.2208 23.5623-55.1989 54.5941-62.4853 7.6887-1.8054 15.9474-.4111 23.4852 1.7923 31.6455 9.2504 54.7946 31.5582 82.4899 47.3196 27.6954 15.7614 68.297 23.9121 92.7858 4.8151 13.9038-10.8425 18.4475-27.3479 25.809-41.984 7.3615-14.6361 21.4197-29.6641 40.4585-29.4869 11.3832.106 21.4988 5.718 30.8582 11.1193 38.6202 22.2876 77.2404 44.5753 115.8605 66.8629 19.2559 11.1125 42.5335 22.7546 64.6339 16.2919 35.6811-10.4341 34.8732-56.606 66.6459-73.6951 25.846-13.9014 60.9656-1.8605 83.5095 15.5822 22.544 17.4427 39.6775 40.2421 66.2978 53.0878 6.9772 3.3668 14.8413 6.0224 22.88 5.5116 26.8429-1.7056 32.5409-32.1406 31.1033-54.5475-1.4375-22.407 6.5869-53.0206 33.5051-52.7082 7.1418.0829 13.9042 2.7051 19.9307 5.9005 32.9336 17.4622 57.2132 54.7121 95.91 50.454V0H0v323.5808Z' fill='%23e2e1ec'/%3E%3C/g%3E%3C/svg%3E");
}
.story{
    padding-top: 20vw !important; /*make room for squiggle*/
	padding-bottom: 16vw !important; /*make room for squiggle*/

}
.grey-background .story{
	padding-top: min(15vw, 200px) !important;
    padding-bottom: min(15vw, 200px) !important;
}
.grey-background{
	position: relative;
}
.grey-background::after{
	content: "";
    z-index: -40;
    background-color: var(--light-grey);
    display: block;
    width: 200vw;
    height: 100%;
    position: absolute;
    left: -50vw;
    top: 0;
}
.story img{
	width: 100% !important;
    height: auto !important;
}
.crop-gif img{
	outline: 3px solid var(--main);
    outline-offset: -2px;
    border-radius: 8px;
    width: 100% !important;
    height: auto !important;
}
.shadow img{
	/*outline-color: var(--light-grey) !important;*/
    border-radius: 8px;
    box-shadow: var(--shadow-elevation-medium);
}
.spacer-tall{
	height: 20vw;
    max-height: 400px;
}
.spacer-small{
	height: 5vw;
    max-height: 100px;
}

/**
 * BUTTONS
 */

.horizontal-buttons{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.filters {
	position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding-top: 24px;
    background: linear-gradient(to top, rgba(251,251,251,1) 5%, rgba(251,251,251,.6) 60%, rgba(251,251,251,.3) 80%, rgba(251,251,251,0) 99%);
}

.switch-outer{
    cursor: pointer;
    margin-right: 0.3rem;
    display: inline-block;
    margin-top:0.3rem;
    margin-bottom: .4rem;
}

input:checked + .switch-button {
  	opacity: 1;
    background-color: var(--dark);
    outline: none !important;
    color: white;
    transition: opacity .2s;
}
.switch-button {
	outline: 1px solid var(--light-grey);
}
.switch-button:hover, .filter-expand:hover{
	cursor: pointer;
    background-color: var(--light-grey);
    transition: opacity .2s;
    outline: 1px solid var(--dark);   
}

.switch-outer input { 
  	opacity: 0;
    display: none;
  	width: 0;
  	height: 0;
  	padding: 0;
    margin: 0;
}

.switch-button, .primary-button, .secondary-button, .filter-expand{
    transition: opacity .2s;
	color: var(--dark);
    opacity: 1;
    background-color: var(--main);
    padding: 0.5em 1em;
    border-radius: 2em;
    text-transform: uppercase;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
a.primary-button, a.secondary-button{
	padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap;
}
.primary-button, .secondary-button, .filter-expand{
    font-family: inherit;
	border: 0px;
    margin-right: .3em;
    display: flex;
    align-items: center;
    margin-bottom: .6em;
    text-decoration: none !important;
    height: 36px;
}
.primary-button, .filter-expand{
    background-color: var(--pink);
    color: #fff !important;
}
.secondary-button {
	color: var(--dark-pink)!important;
    background-color: var(--main) !important;
    border: 1px solid var(--pink) !important;
}

.primary-button:hover, .secondary-button:hover, .filter-expand:hover{
    background-color: var(--dark-pink) !important;
    color: #fff !important;
}

.footer{
    padding-top: 20px;
    height: 15vh;
}

.homepage .page_content{
	padding-left: 0;
    padding-right: 0;
}

.page_content{
    padding-top: 120px;
	padding-right:15vw;
    padding-left:15vw;
    min-width:400px;
}
body.mobile .page_content{
    padding-right: 2vw;
    padding-left: 2vw;
    min-width: 0px !important;
}
body.mobile .page_content .magen{
    width: 100vw !important;
}
.page_content .centered-img{
	text-align: center;
}

.page-project-title{
	text-align: center;
    padding: 20px 0;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

.grid-center-vertical{
	height:100%;
    margin: auto 0;
}
.grid-center-horizontal{
	margin-left: auto;
    margin-right: auto;
    text-align: center;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.1em;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	line-height: 1.3em;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(255, 11, 108);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.2);
	text-decoration: underline;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Work Sans", Icons;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.85);
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] h2 {
	font-family: "Work Sans", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 1.9rem;
	line-height: 1.2;
	}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1.3;
	font-family: "Nitti Grotesk", Icons;
	font-style: normal;
	font-weight: 200;
	color: rgba(0, 0, 0, 0.35);
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 1);
	border-bottom-width: 0em;
}

h3 {
	margin-top: 0;
}

/**
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(251, 251, 251)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 2rem /*!main_margin*/;
	padding-bottom: 2rem /*!main_margin*/;
	padding-left: 2rem /*!main_margin*/;
	padding-right: 2rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
    max-width:1000px;
    text-align: center;
    margin: 0 auto;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.5rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -1rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

body.mobile .thumnail.title{
	color: white;
}

.thumb-width-container.l-grey{
    background-color: #fbfbfb;
}
.thumb-width{
    max-width: 1000px;
    padding: 2rem 2.2rem 1rem;
    margin: 0 auto;
    /*width: 95vw;*/
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
    z-index: 1;
}

.thumbnail:hover img{
	opacity: .3;
    transition: opacity .25s ease-in-out;
}

.thumbnail:hover .title{
    opacity: 1;
    transition: opacity .25s ease-in-out;	
}
.thumbnail:hover .tags{
	opacity: 1;
    transition: opacity .25s ease-in-out;	
}
.thumbnail {
	position: relative;
    text-align: center;
}
.thumbnail.hide{
	display:none;
}
.thumbnail .image-link{
    position: relative;
}
.thumbnails .title {
    /*display: none;*/
    z-index: 5;
    position: absolute;
    bottom: calc(50%);
    text-align: center;
    width: 100%;
	padding: 0 1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    
    font-size: 1.3em;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Work Sans", Icons;
	font-style: normal;
	line-height: 1.1;
    opacity: 0;
}
.thumbnails .title span{
	vertical-align: bottom;
}
.thumbnails .tags {
    position: absolute;
    top: calc(50% + .6rem);
    width: calc(100% - 1rem);
    padding: 0 1em;
    text-align: center;
    font-size: .9rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
	line-height: 1.2;
    z-index: 5;
    opacity: 0;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */


[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
    top: 3rem /*!site_menu_button*/;
	left: 3rem /*!site_menu_button*/;
}
#site_menu_wrapper.mobile_only .page_content{
	height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    max-width: 260px;
}
body.mobile #site_menu_button {
	margin: -6px;
    font-size: 34px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;*/
    font-family: "Work Sans", Icons;
	background: rgba(255, 255, 255, 0.9);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
    gap: 16px;
    z-index: 8000;
}
body.mobile #site_menu:after {
    position: absolute;
    bottom: 40px;
}
body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(0, 0, 0, 0.75);
}

#site_menu .set-link > a {
	color: rgba(0, 0, 0, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(0, 0, 0, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/*
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 2rem /*!shop_button*/;
	right: 2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/*
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
  opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.85) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-weight: 400;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: white;
}


/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.image-gallery .gallery_card img{
	height: auto !important;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}


/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}