.elementor-kit-6{--e-global-color-primary:#767676;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#000000;--e-global-color-accent:#0C9FDA;--e-global-typography-primary-font-family:"GT America";--e-global-typography-primary-font-size:2rem;--e-global-typography-primary-font-weight:normal;--e-global-typography-primary-line-height:2.6rem;--e-global-typography-secondary-font-family:"GT America";--e-global-typography-secondary-font-size:1.3333rem;--e-global-typography-secondary-font-weight:normal;--e-global-typography-secondary-line-height:1.77777rem;--e-global-typography-text-font-family:"GT America";--e-global-typography-text-font-size:1.16625rem;--e-global-typography-text-font-weight:normal;--e-global-typography-text-line-height:1.5rem;--e-global-typography-accent-font-family:"GT America";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:normal;color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-text );font-family:"GT America", Sans-serif;text-decoration:underline;}.elementor-kit-6 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-6 h2{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:calc(100vw - 54px * 2);}.e-con{--container-max-width:calc(100vw - 54px * 2);}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-6 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:calc(100vw - 54px * 2);}.e-con{--container-max-width:calc(100vw - 54px * 2);}}@media(max-width:767px){.elementor-kit-6{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-6 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:calc(100vw - 22px * 2);}.e-con{--container-max-width:calc(100vw - 22px * 2);}}/* Start custom CSS *//*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————GLOBAL——————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/

@media (min-width: 1025px){
.desktophide {display:none!important;}
}

@media (min-width: 768px) and (max-width: 1024px){
.tablethide {display:none!important;}
}

@media (max-width: 767px){
.mobilehide {display:none!important;}
}

/*Text with this class won't break lines akin to <nobr>*/
.nobr {white-space: nowrap;}

/*Apply to <br> tags to insert a line break only on sizes above the specified*/
@media (max-width: 1024px){
.desktopbreak {display:none;}}

/*hyphenate elements with this class*/
.hyphens {hyphens: auto;}

/*Hide elements with this class on the home page*/
body.home .homehide
{display:none;}

/*Make the font of text with this class a weight of 500 for Medium*/
.makefontweightmedium, .makefontweightmedium * {font-weight:500;}
.makefontweightregular, .makefontweightregular * {font-weight:400;}


/*Make img elements with this class square*/
.imgsquare img {
    aspect-ratio:1;
    object-fit: cover;
}

/*Make img elements with this class 4:3 landscape*/
.img43 img {
    aspect-ratio:4/3;
    object-fit: cover;
}

/*Make img elements with this class 3:4 portrait*/
.img34 img {
    aspect-ratio:3/4;
    object-fit: cover;
}

/*Make img elements with this class 4:5 portrait*/
.img45 img {
    aspect-ratio:4/5;
    object-fit: cover;
}

/*Make img elements with this class 5:4 landscape*/
.img54 img {
    aspect-ratio:5/4;
    object-fit: cover;
}




/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*————ARCHIVE PAGE & LOOP————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/

/*Break the intro paragraph to always allow room for the nav arrows.*/
.introparagraph .desktopbreak {
    display:none;}
/*...and set the max width for various screen sizes:*/
.introparagraph {
    width:1050px!important;
    max-width: calc(100% - 6rem - 32px);
}


 /*Code to enable the overlay of header text onto the archive items - (no longer used)*/
.archiveitemheading .elementor-widget-container
{
/*Make the heading container perfectly overlap the image above.*/
aspect-ratio:1;
margin-top:-100%;
/*Make the text bottom-align*/
display: flex;
align-items: flex-end;
/*Pad up from bottom by 16px, -0.2rem to account for the text baseline*/
padding-bottom: calc(16px - 0.2rem)!important;
/*Add the background gradient*/
background: linear-gradient(to bottom, transparent 0%, #00000080 50%, #00000080 100%);
}

/*Make it possible to click through the header's expanded container to the link on the image by disabling pointer events and then re-enabling them on the heading*/
.archiveitemheading .elementor-widget-container
{pointer-events: none;}
.archiveitemheading .elementor-widget-container div
{pointer-events: auto;}

/*Remove link underline from title text*/
.archiveitemheading a {text-decoration:none;}

/*Keep the description (no longer used) to only 3 lines followed by "..." */
.threelinesonly > div {
text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*use a div with this class to make a half-line divider*/
.halfline {height:0.5rem;}

/*Fix the alignment of images in the archive loop align with alt. loops (the intro text on mobile)*/
 .archiveloopitemsection .elementor-widget-image img {
    vertical-align: top;
}




/*Enable & style the horizontal scrolling*/
.archiveloopgrid .elementor-loop-container {
    
    display: block;
    
    width: 100%;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

.archiveloopgrid .elementor-loop-container > div {
    white-space: normal;
    float: none;
    display: inline-block;
    /*space between the Archive items. Total of 256px between each, split up this way to align to the 64px page border at the beginning.*/
    margin:0 192px 0 64px;
    /*Scale width up and down based on the screen size, with a hard cap at 240px and 600px. The scaling is set such that it acheives a width of 300px on a browser with a height of 823px, which just so happens to be my laptop when I was designing this. (This is not done in order keep the exact sizing that already looked good.)*/
    width:calc(300*100vh/823);
    max-width:600px;
    min-width: 240px;
}
::-webkit-scrollbar {
display: none;
}


/*Responsive*/

/*Hide the mobile/loop version of intro text slider on desktop/tablet*/
@media (min-width: 768px){
.archiveloopgrid .elementor-loop-container > div:first-of-type {
    display: none;
    }
}

/*Style the intro text slider for when it appears on mobile*/
.archiveloopgrid .elementor-loop-container > div:first-of-type {
    
    }
    
/*Mobile Adjustments*/
@media (max-width: 767px){

/*Style the rest of the sliders for mobile*/
.archiveloopgrid .elementor-loop-container.elementor-grid > div 
{
    white-space: normal;
    float: none;
    display: inline-block;
    zoom: 1;
    margin:0 0 0 32px;
    width:calc(100vw - (64px + 32px));
}
 
 /*Add space to the right of to the last one*/
.archiveloopgrid .elementor-loop-container.elementor-grid > div:last-of-type {
    margin-right:32px;
    }

/*Sroll Snapping!*/
.archiveloopgrid .elementor-loop-container 
{scroll-snap-type: x mandatory;}
.archiveloopgrid .elementor-loop-container > div 
{scroll-snap-align: center;}

}

/*Handle mobile landscape orintation:*/
@media (max-width: 767px) and (orientation:landscape) {
   
    .archiveloopgrid .elementor-loop-container.elementor-grid > div 
    {
        width:300px;
        margin:0 0 0 64px;
    }
   
   
}


/*Entrance Animation (class "animate" gets removed via js if page is already scrolled when loading, e.g. nav back)*/
body.animate .archiveloopgrid .elementor-loop-container {
    opacity: 0;
    animation: archiveSlideIn 1.25s forwards;
}

/*Custom slide-in animation*/
@keyframes archiveSlideIn {
    from {
        opacity: 0;
        transform:translateX(100%);
        overflow-x: hidden; /* Keep scrolling disabled during animation */
    }
    to {
        opacity: 1;
        transform: none;
        overflow-x: scroll; /* Enable scrolling after animation */
    }
}


/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*——————PORTFOLIO VIEW———————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/
/*———————————————————————————*/

/*Since all screen sizes are accounted for, disable scrolling on the viewer page. This makes swiping feel better on Apple devices with elastic overscroll*/
body.portfolios-template-default.single-portfolios {overflow:hidden;}

.portfolioviewcarousel img, .portfolioviewdescription {
    /*Set a consistent height for all images in the swiper. Same value as the section's min-height to yield maximum image size, minus an extra 20px to account for the column padding.*/
    max-height:calc(100vh - 2*(64px + 1.5rem + 10px));
    /*By also setting this same max height for the description text, it ensures the text can't be tall enough to push the images off the screen.*/
}
.portfolioviewcarousel img {
    /*Max width starts at 100%, then subtracts 3rem for the width of each arrow and 6px of extra padding on each side.*/
    max-width: calc(100% - 2*(3rem + 10px));
}

/*Remove the default inset on the swiper buttons*/
.portfolioviewcarousel .elementor-swiper-button-next{right:0!important;}
.portfolioviewcarousel .elementor-swiper-button-prev{left:0!important;}


.portfolioviewdescription {
    /*Same idea as above, with a little extra space (32px) between the text and arrows*/
    max-width:calc(100% - 2*(3rem + 32px));
    
    /*Set the regular width to a fixed pixel value so that it can stay a little tighter on large displays*/
    width:800px;
    
    /*Ensure the paragraph & line breaks are preserved.*/
    white-space: pre-wrap;
    
    margin:auto;
    
    text-align:left;
    font-family: var(--e-global-typography-secondary-font-family), sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    line-height: var(--e-global-typography-secondary-line-height);
    
}



/*pre-wrap the morelink expanded description too*/
.popupdescription {white-space: pre-wrap;}


/*Align whole swiper to vertical center*/
.portfolioviewcarousel .elementor-image-carousel.swiper-wrapper {
    display:flex;
    align-items:center;
}

/*Dot Icons*/

/*Size the dot icons down from their oversized start, using border in order to keep their click/touch targets large*/
.portfolioviewcarousel .swiper-pagination-bullet {
    border: 0.333rem solid white;
}

/*Make the first dot a square to denote the description:*/
.portfolioviewcarousel .swiper-pagination-bullet:first-of-type {
    border-radius: 0;
    /*set the icon for the description dot*/
background: url("/wp-content/uploads/description-wide.svg") center no-repeat !important;
background-size: cover!important;
border:0.3rem solid transparent; /*The desc icon needs a transparent border since it's a bg image and not a bg color*/

/*Since the icon comes in black and can't be changed as a backround image, use opacity to fake the minaccgrey color*/
opacity:calc(0.58 * 0.4)!important;

/*use a gradient to create the three-line effect to indicate text:*/
/*background: repeating-linear-gradient(to bottom, #767676 0% 20%, transparent 20% 40%)!important;*/
}

/*Make the opacity of the first description 'dot' respond to active*/
.portfolioviewcarousel .swiper-pagination-bullet:first-of-type.swiper-pagination-bullet-active
 {opacity:0.58!important;}
 
 /*Make each dot grow when active*/
 .portfolioviewcarousel .swiper-pagination-bullet-active
 {border: 0.25rem solid white;
     transition:all 500ms;
 }
 
 /*Make the didactic wrap if a single word is too long.*/
 .portfolioviewdidactic #image-title-display {
     word-wrap: break-word;
 }
 
 
/*RESPONSIVE*/

/*If the description runs too long for the screen size, this code enables it to fade out for the 'more' button to be added.*/

/*Apply the gradient to the bottom edge of the whole slide, so any overflowing text will fade out. The ".overflowing" class is added dynamically via JS.*/
.description-slide.overflowing {
    mask-image: linear-gradient(to bottom,
    transparent 0%, 
    #ffffff 2rem,
    #ffffff calc(100% - 3rem),
    transparent calc(100% - 1rem)); 
    /*Move content to the top*/
    display:flex;
    align-items:start;
}

/*Apply the scroll itself to the description itself, as well as space on the bottom to allow for scrolling past the gradient.*/
.description-slide.overflowing .portfolioviewdescription {
        overflow:scroll;
        padding-top: 2rem;
        padding-bottom: 3rem;
}


/*If the user's screen is taller than it is wide, change around the layout for a vertical orientation:*/
/*All Portrait (Desktop Included)*/
@media (orientation:portrait) {
/*Flip the order of the swiper and didactic in their column*/
.portfolioviewcolumn > div {
    display: flex;
    flex-direction: column-reverse;
}

/*Remove section padding*/
.portfolioviewsection {
    padding:0!important;
}
/*Set the swiper outer to full width*/
.portfolioviewcarousel {
    width:100%!important;
    max-width:100%!important;
}

/*Set the image max height with more space for the didactic. It's a large enough chunk taken out to no longer need the specific calculation from above.*/
.portfolioviewcarousel img {
    max-height:calc(100vh - 400px);
}


.portfolioviewdidactic {
/*Give the didactic text block a fixed height so that changes to it won't affect the centered placement*/
    height:0;
/*and add padding to fit it in with the images (same padding as on the images above)*/
    margin: 32px calc(3rem + 10px);
}


}


/*Tablet*/
@media (max-width: 1024px) {
.portfolioviewdescription {
    /*Make the description text smaller on tablet and below.*/
    font-size: 1rem;
    line-height: 1.333rem;/*Breaks the line height convention, but the extra space is needed here.*/
}
}

/*Mobile Portrait:*/
@media (max-width: 767px) and (orientation:portrait)  {

/*On mobile, fit the images into a square in the middle of the screen*/   
.portfolioviewcarousel img {
    width:100vw; max-width: 100vw;
    
    /*The 'box' that contains the images is a square in the middle of the mobile screen, but will scale down as necessary to always leave enough space above and below as to never push the didactic off the bottom of the screen*/
    height: calc(100vw + 32px);/*-32px to account for the top/bottom padding on the images*/
    max-height:calc((100svh) - 240px);
    object-fit:contain;
    
    padding:16px 0;
    /*a little padding on gives space so it can't run into the controls on mobile, while keeping it centered*/
}

/*Adjust the bounds of the description for mobile portrait.*/
.portfolioviewdescription {
    margin:0;
    width:100vw; max-width:100vw;
    padding: 16px 32px;
    
    height: calc(100vw + 32px);
    max-height:calc((100svh) - 240px); 

    display:flex;
    align-items:center;
}
/*Apply a fix to top-align the description- in mobile if overflowing*/
.description-slide.overflowing .portfolioviewdescription {
        align-items:start;
}


.portfolioviewdidactic {
    margin: 16px 32px;
    width:calc(100vw - 64px);/*full width on mobile*/
}

/*Position & size the swiper buttons*/
.portfolioviewcarousel .elementor-swiper-button {
    font-size:2rem!important;
    padding:8px!important;
    top:calc(100% - 11.5px)!important;
    right:calc(32px - 1.5rem / 2 - 10px)!important;
    /*extra 10px for padding*/
    
    /*bring above the swiper dots*/
    z-index:100!important;
    
    
}
/*make the arrows more visible and reactive on mobile*/
.portfolioviewcarousel .elementor-swiper-button svg {
    fill:var(--e-global-color-primary)!important;
    opacity:0.6;/*the only place using an opacity other than 40%*/
    transition:opacity 250ms;
}
.portfolioviewcarousel .elementor-swiper-button:active svg {opacity:1;}

.portfolioviewcarousel .elementor-swiper-button-prev {
    right:initial!important;
    margin-left:calc(100vw - 3rem - 16px - 32px - 8px);
    /*extra 10px for padding*/
}


/* Old version of mobile next button - enable to revert.
/*Hide the left swiper button on mobile
.portfolioviewcarousel .elementor-swiper-button-prev {display:none!important;}
.portfolioviewcarousel .elementor-swiper-button-next {
    /*calcualted to align with the top of the didactic
    top:calc(100% + 1.5rem + 16px)!important;
    /*calcualted to align 32px in from the edge, accounting for the graphic's size within its frame.
    right:calc(32px - 1.5rem / 2)!important;
    
}*/

/*Make the dots left-align*/
.portfolioviewcarousel .swiper-pagination-bullets {
    text-align:left;
    padding: 0 calc(32px - 3px);/*the 3px difference optically aligns to the 32px page border when accounting for the effects on the icon*/
    height:14.5px;/*set the height to optically align with the arrow icons to the right on mobile portrait*/
}

/*Set max width for the dots in mobile portrait so thay they don't run over the arrows*/
.swiper-pagination.swiper-pagination-bullets
{max-width:calc(100vw - 64px);}

}


/*Mobile Landscape – less tweaks are needed from the small desktop/tablet landscape*/
@media (max-width: 767px) and (orientation:landscape){
    
.portfolioviewcarousel img, .portfolioviewdescription {
    max-height:calc((100svh) - 64px);
    /*Make the image as wide as possible within the height constraint.*/
    min-width:calc(100% - 64px);
    object-fit:contain;
}
.portfolioviewcarousel {
    /*Expand into the extra empty space of the header.*/
    margin-top:calc(-1*(32px + 1.5rem));
}

/*Ensure the swiper is never so small that the image is invisible. This is the only case in the design where the image may run over the didactic, but it is already out of the designed range.*/
.portfolioviewcarousel{
    min-width:300px;
    margin-left:-300px;
}

/*Adjust the bounds of the description for mobile landscape*/
.portfolioviewdescription {
    margin:0;
    max-width:100%;
    padding: 0 32px;
}

/*Size down the arrows for this format*/
.portfolioviewcarousel .elementor-swiper-button{
    font-size:2rem!important;
    margin: 0 -16px!important;
}

/*Correct the left/right padding*/
.portfolioviewsection {padding: 0 32px!important;}


/*position the More button, should it be needed/made visible. The other screen sizes for this are done in the elementor position editor, but mobile landscape needs to be done here.*/
.morelink {
    left:calc(15rem + 16px + 32px)!important;
    bottom: 32px!important;
    
}

}

/*Portfolio View Animations:*/

@keyframes portfolioSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes portfolioSlideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes portfolioSlideOutReverse {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes portfolioSlideInReverse {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'GT America';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Regular.woff2') format('woff2'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Regular.woff') format('woff'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'GT America';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://cameraworks.org/wp-content/uploads/GT-America-Medium.woff2') format('woff2'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Medium.woff') format('woff'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'GT America';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Bold.woff2') format('woff2'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Bold.woff') format('woff'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'GT America';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Regular-Italic.woff2') format('woff2'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Regular-Italic.woff') format('woff'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Regular-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'GT America';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Bold-Italic.woff2') format('woff2'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Bold-Italic.woff') format('woff'),
		url('https://cameraworks.org/wp-content/uploads/GT-America-Standard-Bold-Italic.ttf') format('truetype');
}
/* End Custom Fonts CSS */