/* Customized Portfolio Section */
.portfolio-h1 {
    font-size: 16px;
    margin-top: 10%;
    margin-left: 3%;
    margin-right: 3%;
}

.portfolio-h2 {
    font-size: 14px;
    margin-top: -1.5%;
    margin-left: 10%;
    margin-right: 10%;
}

.portfolio-paragraph {
    font-size: 13px;
    margin-top: -1.5%;
    margin-left: 10%;
    margin-right: 10%;
}

/*Hide search icon in the meun bar*/
.search-trigger-wrap {
    display: none;
}

/* Reduce size of logo  / 25406145-hc rm */
.custom-logo,
.site-header .logo {
  max-width: 100% !important;
  width: 100px !important;
  height: auto !important;
}

/*/////HOME PAGE CSS//////////*/

/* Added to hide home page title*/
.page-id-1055 .page-title {
    display: none;
}

/*Video edits*/
.animationVideo{
  width:100%;
    height: 100vh;
    position: absolute;
    object-fit: cover;
    top: 0px;
}

/* These force the video to take up the entire screen without behing hidden*/
.section1 {
    width:100%;
    height:100vh;
    margin: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.page-id-1055 #slideshow {
  color: #fff;
  font-size: 30px;
    width:100%;
    margin-bottom: 3%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


/*This forces the video to start from the type, the "video" being part of the content */
.page-id-1055 .site-content{
    padding-top: 0px !important;
}

/*Forces the animated video to the top of the page for all sizes*/
.page-id-1055 .entry-content {
    margin-top: 0;
}

/* Controls the positioning of the OLD button
.page-id-1055 .videoButton{
    position: relative;
    top: 75%;
    z-index: 1500;
    display: flex;
  align-items: center;
  justify-content: center;
}
*/

/* Removes page under the header between the video*/
.page-id-1055 #masthead.site-header {
    padding: 0;
}

/*Hides the space the page header takes header*/
.page-id-1055 .page-header {
    display: none;
}

.page-id-1055 .container.container-big{
    background-color: black;
}

/* CSS FOR THE INSPIRE TEXT BUTTON*/
/* FOR THE BUTTON BESIDE THE SLIDESHOW*/
.page-id-1055 .inspireText{
    display: inline-block;
    transform: rotate(270deg);
    font-size: 12px;
    white-space: nowrap;
    font-weight: 500;
    transform-origin: top left;
    align-self: end;
}


.page-id-1055 .downArrow{
    transform: rotate(270deg);
    display: inline-block;
    font-size: 50px;
    width: fit-content;
    align-self: baseline;
    padding-bottom: 15%;
}

/* This is the "insire design" sidebutton */
.page-id-1055 .workNav{
    display: inline-grid;
    grid-template-rows: 6fr 1fr;
    align-items: center;
    float: right;
    height: 94vh;
    width: 55px;
    grid-auto-columns: auto;
}

/* Makes the inspire text navigation on the video red on hovere */
.page-id-1055 .workNav:hover #inspireTextRed, .workNav:hover #downArrowRed{
    color: red !important;
}


.page-id-1055 .workNav:hover #downArrowRed {
  left: -20px;
}

.page-id-1055 #downArrowRed{
  position: relative;
  left: 0;
  transition: left ease 0.5s;
}

/* END OF CSS FOR THE INSPIRE TEXT BUTTON */

/**********CSS FOR THE SLIDESHOW*****/

.page-id-1055 .slideshow-container {
    position: relative;
  margin: auto;
    display: inline-grid;
  grid-template-columns: 82% 7%;
}

/*Hides the div element small_arrowControls */
.page-id-1055 .small_arrowControls{
    display: none;
}

/* Hides the slidesehow slides unless its the "active" one */
.page-id-1055 .mySlides {
  display: none;
}

/* Arrow button effects when mouse is hovering over them */
.page-id-1055 a.prev:hover,
.page-id-1055 a.next:hover,
.page-id-1055 a.pause:hover{
    cursor: pointer;;
}

/* #/# display */
.page-id-1055 .imageNumDisplay{
    display: inline-block;
  align-self: end;
  height: fit-content;
  transform: rotate(270deg);
  padding-left: 42%;
  padding-bottom: 75%;
}

/* Slideshow arrow controls */
.page-id-1055 .arrowControls{
    padding-left: 23%;
  font-size: 75%;
}

/* This positions the images in the slideshow, adds 5% padding to the top and bottm and 20% to the left and right */
.page-id-1055 .slideshow-container img{
    height: auto;
    padding-left: 23%;
    padding-top: 8%;
}
/*******END OF CSS FOR SLIDESHOW*****/



/*********CSS FOR NAV BAR**********/
.page-id-1055 .linkBar ul{
    display: flex;
  list-style-type: none;
  justify-content: left;
  padding-left: 10%;
    align-items: baseline;
    padding-top: 1.5%;
}

/* Default links are red so its changed to gray */
.page-id-1055 .linkBar a{
    color: gray;
}

.page-id-1055 .linkBar a:hover{
    cursor:pointer;
}

/* Adding space after each link in the nav bar */
.page-id-1055 .linkBar ul li{
    margin-right: 2%;
    font-size: 15px;
}

.page-id-1055 .linkBar ul li:first-child{
    margin-right: 4%;
    color: black;
  font-weight: bolder;
    font-size: 30px;
}

/*****End of CSS FOR NAV BAR*****/


/*********CSS FOR GRID **********/
.page-id-1055 .imageGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width:100%;
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    padding-left: 10%;
    padding-right: 10%;
}

.page-id-1055 .imageGrid img{
    width: 100%;
    height: auto;
    filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

.page-id-1055 .imageGrid img:hover{
    cursor: pointer;
    filter: none;
  -webkit-filter: grayscale(100%);
}

/*****MEDIA QUERIE EDITS******/

/* EDITS FOR THE SLIDESHOW */
/* This edits the slideshow layout for a screensize smaller than 1055px, i.e. tablets and phones */
@media only screen and (max-width: 1055px){
    .page-id-1055 .slideshow-container{
        grid-template-columns: 1fr;
    }

/* Removing the padding on the slideshow image so they take up the full screen on smaller screens */
    .page-id-1055 .slideshow-container img{
        padding-left: 0;
    }

/* Positioning the new layout for the arrow controls */
    .page-id-1055 .small_arrowControls{
    font-size: smaller;
    display: flex;
    justify-content: center;
        margin-top: 13%;
    }

/* Hiding the laptop arrowControl because the small_arrowControls are the ones being used */
    .page-id-1055 .arrowControls{
        display:none;
    }

/* Fixing the positioning of the #/# within the arrows */
    .page-id-1055 .smallNumDisplay{
    padding-left: 1%;
    padding-right: 1%;;
    }

    /* #/# display */
.page-id-1055 .imageNumDisplay{
    display: none;
}

/* Grid display padding when the screen is made smaller*/
    .page-id-1055 .imageGrid{
        padding-left: 2%;
        padding-right: 2%;
    }

/*Removes the inspire design button on the bottom right of the video on a tablet or phone*/
    .page-id-1055 .workNav{
        display: none;
    }

}
/* END OF EDITS FOR THE SLIDESHOW */


/*********CSS FOR GRID **********/
.page-id-1055 .imageGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width:100%;
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    padding-left: 10%;
    padding-right: 10%;
}

.page-id-1055 .imageGrid img{
    width: 100%;
    height: auto;
    filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

.page-id-1055 .imageGrid img:hover{
    cursor: pointer;
    filter: none;
  -webkit-filter: grayscale(100%);
  content: attr(alt);
}

/* Add Mouseover Text on CSS FOR GRID */
.mouseover_content {
    width: 100%;
    height: 99%;
    top:0;
    left:0;
    background: rgba(0,0,0,0.5);
    position: absolute;
    display: flex;
    justify-content: end;
    align-items:baseline;
    flex-direction: column;
    opacity:0;
    transition: 0.6s;
}

.mouseover_content:hover {
    cursor: pointer;
    opacity: 1;
}

.mouseover_content p {
    font-size: min(1.5vw, 1em);
    color:#ffffff;
    padding-block-end: 0.2em;
    margin-left: 0.7em;
}

div:has(>img) {
    position: relative;
}

/*****MEDIA QUERIE EDITS******/

/* EDITS FOR THE SLIDESHOW */

/* This edits the slideshow layout for a screensize smaller than 1055px, i.e. tablets and phones */
@media only screen and (max-width: 1055px){
    .page-id-1055 .slideshow-container{
        grid-template-columns: 1fr;
    }

/* Removing the padding on the slideshow image so they take up the full screen on smaller screens */
    .page-id-1055 .slideshow-container img{
        padding-left: 0;
    }

/* Positioning the new layout for the arrow controls */
    .page-id-1055 .small_arrowControls{
    font-size: smaller;
    display: flex;
    justify-content: center;
    }

/* Hiding the laptop arrowControl because the small_arrowControls are the ones being used */
    .page-id-1055 .arrowControls{
        display:none;
    }

/* Fixing the positioning of the #/# within the arrows */
    .page-id-1055 .smallNumDisplay{
    padding-left: 1%;
    padding-right: 1%;;
    }

    /* #/# display */
.page-id-1055 .imageNumDisplay{
    display: none;
}

/* Grid display padding when the screen is made smaller*/
    .page-id-1055 .imageGrid{
        padding-left: 2%;
        padding-right: 2%;
    }

/*Removes the inspire design button on the bottom right of the video on a tablet or phone*/
    .page-id-1055 .workNav{
        display: none;
    }

}
/* END OF EDITS FOR THE SLIDESHOW */

@media only screen and (max-width: 500px){
/* Grid display padding when the screen is made smaller*/
    .page-id-1055 .imageGrid{
        display: grid;
        grid-template-columns: 1fr;
      width:100%;
    justify-items: center;
    }
}

@media only screen and (max-width: 700px){
    /* Displays the Portfolio linkBar as a column when the screen is smaller*/
    .page-id-1055 .linkBar ul {
    display: list-item;
    list-style-type: none;
    padding-left: 10%;
    padding-top: 2%;
  }
}

/*Removes padding that makes the video smaller*/
@media only screen and (min-width: 150px){
    .page-id-1055 .container.container-small{
        max-width: 100%;
        padding: 0px 0px;
    }
}

@media only screen and (min-width: 150px) and (max-width: 100%){
    .page-id-1055 .container.container-small{
        max-width: 100%;
        padding: 0px !important;
        margin: 0px !important;
    }
}

@media only screen and (min-width: 150px){
    .page-id-1055 #content.site-content{
        padding-top: 0px;
    }
}
/******END OF MEDIA QUERY EDITS***/

/*//*****END OF HOME CSS***//*/

/*-Hide page titles on COVID and Studio and Contact and Logo and Team and Pandemic Design pages/ #25516804-hc KS -*/
.page-id-7 .page-title, .page-id-209 .page-title, .page-id-3955 .page-title, .page-id-3953 .page-title, .page-id-334 .page-title, .page-id-337 .page-title, .page-id-555 .page-title, .page-id-337 .page-title, .page-id-46 .page-title {
    display: none;
}

/* Make featured slider area background white - 25516804-hc */
.featured-slider-wrap {
    background-color: white;
}

/* Change Slideshow Block background color to white - 25516804-hc */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide {
    background: white !important;
}

/* Make pandemic menu item red - 25518833-hc */
.menu-item-347 a {
    color: #d42525;
}

/* Portfolio grid / 25518833-HC (MI) */
@media only screen and (min-width: 768px) {
    .layout-three-columns .masonry [class*="col-"] {
        padding-left: 13px; /* 5px */
        padding-right: 13px; /* 5px */
        /* margin: 0 0 2.5em; */
    }
}

.layout-three-columns .site-main .jetpack-portfolio {
    margin-bottom: 26px; /* 10px */
}

/* Make portfolio featured images on homepage b&w - 25518833-hc */
.site-main .portfolio-item {
    position: relative;
}

/* Default Mouseover White Background */
@media only screen and (min-width: 1025px) {
    .featured-image a:before, .gallery-size-full[data-carousel-extra] .gallery-item .gallery-icon:before, .masonry .portfolio-item .featured-image a:after, .shuffle-layout .portfolio-item .featured-image a:after  {
        background-color: transparent ;
    }
}

@media only screen and (min-width: 1025px) {
    .featured-image a:after, .gallery-size-full[data-carousel-extra] .gallery-item .gallery-icon:after {
        background-color: transparent ;
    }
}

/* .site-main .portfolio-item .featured-image {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
} */

/* .site-main .portfolio-item .featured-image img:hover{
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(50%);
} */

/* Change hover effect on portfolio pages / #25575963-HC JB */
/* .masonry .portfolio-item .featured-image a:after {
    visibility: hidden;
} */

.entry-header, .post-thumbnail, .entry-content, .author-bio, .widget-area {
    margin-top: 0px;
    margin-bottom: 0px;
}

@media only screen and (max-width: 1024px) {
    .portfolio-item .entry-header {
        margin-top: 0px;
    }
}

@media only screen and (min-width: 1025px) {
    .masonry .portfolio-item .featured-image + .entry-header, .shuffle-layout .portfolio-item .featured-image + .entry-header {
        max-height: 105%;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
    }
}

.masonry .entry-header {
    /* visibility: hidden; */
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background: rgba(0,0,0,0.5);
    position: absolute;
    display: flex;
    justify-content: end;
    align-items:baseline;
    flex-direction: column-reverse;
    opacity:0;
    transition: 0.6s;
    pointer-events: none;
}

.masonry .entry-header:hover {
    cursor: pointer;
    opacity: 1;
}

.masonry .entry-header h2>a {
    font-size: min(1.5vw, 0.7em);
    color:#ffffff;
    font-weight: normal;
}

.masonry .entry-header h2 {
    margin-left: 0.7em;
}


.site-main .portfolio-item {
    position: relative;
}

.masonry .entry-header .entry-meta {
    visibility: hidden;
}

/* .masonry .portfolio-item .featured-image:hover {
    filter: none;
} */

/* End change hover effects */

/* Hide the logo on the homepage only / #25575963-HC JB */
.home .site-branding {
    display: none;
}

/* Adjust scroll down button texts / NL-25577647-HC */
#scrollDownBtn {
    font-size: 0;
}

#scrollDownBtn:after {
    content: 'inspired Design - for everyone. ';
    font-size: 11.25px;
}

/* Edit sub-category menu / 3493795-zen rw */
.category-filter a:hover, .category-filter a:active, .category-filter .cat-active a {
    color: #a1a1a1;
    text-decoration: underline;
}

/* Make Selection Highlight Red */
::selection {
  background-color: #d42525;
  color: #ffffff;
}

/* Adjust the grid gap on page Team -- 26179340-HC */

.page-id-46 .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small {
    grid-gap: 10px;
}

/* Hide featured images inside portfolio items | JC-26219422-hc */
.single-jetpack-portfolio .featured-image  {
  display: none;
}

/* Hide title inside portfolio items | JC-26219422-hc */
.single-jetpack-portfolio .entry-header {
  display: none;
}

/* Reduce spacing between the menu and the first element on the page / 26325350-hc pj */
@media only screen and (min-width: 768px) {
    .blog .site-content,
    .single .site-content,
    .page:not(.page-id-207) .site-content,
    .archive .site-content,
    .search .site-content,
    .tag.archive .site-content,
    .error404 .site-content,
    .split-layout .site-content {
        padding-top: 0;
    }
    body:not(.page-id-207) #masthead {
        padding-bottom: 0;
    }
}


/* Move site logo in the footer / KS / #26366107-hc */
#colophon .site-info {
    width: 100%;
    text-align: center;
}
.footer-site-branding {
    max-width:100px;
    margin-left: auto;
    margin-right: auto;
}

/* Padding-bottom adjustment / io / #26325800-hc */
.page .site-content {
    padding-bottom: 5%;
}

.site-footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* change text color for follow link to #ffffff | #26361160-hc eD */
#socMenuTrig {
    color: #ffffff;
}

/* Adjust the menu toggle position / io / #26325800-hc */
@media only screen and (max-width: 1024px) {
    .menu-toggle {
    right: 10px;
    }
}

/* Remove post navigation arrows from links / #26415959-HC JB */
.nav-previous, .nav-next {
    display: none;
}

/* change color of right side text on header | 26415959 -hc */
a#inspireTextRed, a#downArrowRed {
    color: grey !important;
}

/* Set selection background to white and text color to black TM-26417281-hc */
.page-id-1055 ::selection {
  background-color: #fff;
  color: #000;
}

/**********INDIVIDUAL PROJECT SLIDESHOW*****/

.single-jetpack-portfolio .slideshow-container {
    position: relative;
  margin: auto;
    display: inline-grid;
  grid-template-columns: 100% 7%;
  /* make it wider */
  left: calc(-27vw + 50%);
  width: 54vw;
}

/*Hides the div element small_arrowControls */
.single-jetpack-portfolio .small_arrowControls{
    display: none;
}

/* Hides the slidesehow slides unless its the "active" one */
.single-jetpack-portfolio .mySlides {
  display: none;
}

/* Arrow button effects when mouse is hovering over them */
.single-jetpack-portfolio a.prev:hover,
.single-jetpack-portfolio a.next:hover,
.single-jetpack-portfolio a.pause:hover{
    cursor: pointer;;
}

/* #/# display */
.single-jetpack-portfolio .imageNumDisplay{
    display: inline-block;
  align-self: end;
  transform: rotate(270deg);
    height: 25%;
  padding-top: 65%;
}

/* Slideshow arrow controls */
.single-jetpack-portfolio .arrowControls{
    padding-left: 0%;
  font-size: 140%;
}

/*******END OF CSS FOR SLIDESHOW*****/


/*****MEDIA QUERIE EDITS******/

/* EDITS FOR THE SLIDESHOW */
/* This edits the slideshow layout for a screensize smaller than 1055px, i.e. tablets and phones */
@media only screen and (max-width: 1055px){
    .single-jetpack-portfolio .slideshow-container{
        grid-template-columns: 1fr;
    }


/* Removing the padding on the slideshow image so they take up the full screen on smaller screens */
    .single-jetpack-portfolio .slideshow-container img{
        padding-left: 0;
    }

/* Positioning the new layout for the arrow controls */
    .single-jetpack-portfolio .small_arrowControls{
    font-size: smaller;
    display: flex;
    justify-content: center;
    }

/* Hiding the laptop arrowControl because the small_arrowControls are the ones being used */
    .single-jetpack-portfolio .arrowControls{
        display:none;
    }

/* Fixing the positioning of the #/# within the arrows */
    .single-jetpack-portfolio .smallNumDisplay{
    padding-left: 1%;
    padding-right: 1%;;
    }

/* display */
.single-jetpack-portfolio .imageNumDisplay{
    display: none;
}
}
/**********END OF INDIVIDUAL PROJECT SLIDESHOW*****/

/* image hover transition KG-26500715-hc */
.bw-hover {
  filter: grayscale(1);
  transition: all 0.3s ease;
}
.bw-hover:hover {
  filter:none;
  transition: all 0.3s ease;
}

/* KG-26500715-hc */

/* Social icons / 26526904-HC (MI) */
 .wp-social-link svg {
    color: #000;
}

/* Navigation menu - current page bottom border / 26526904-hc kp */
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
  border-bottom: 1px solid #d42525;
}

/* Social links / 26526904-HC (MI) */
.entry-content a.wp-social-link {
  border-bottom:0;
}

/* Remove Portfolio Title */
.page-template-portfolio-page .page-header h2.page-title {
    display: none;
}
/* Change social menu background color NP #26527615-hc */
.menu-social-container .social-menu-trig {
    background-color: #d42525;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: 0.1}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.1}
  to {opacity: 1}
}


.root {
  max-width: calc(var(--maxWidth) * 1px);
}

.wrapper {
  position: relative;
  height: 0;
  padding-top: calc(var(--height) / var(--width) * 100%);
  background: #f6f7f8;
  background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
  background-size: 1000px 640px;
  animation: placeHolderShimmer 1.8s linear infinite forwards;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

/* Changing the caption text size in page "Pandemic design" page | 27397515-HC | (MA) */
.page-id-337 figcaption {

        font-size: 0.8rem;
}

/* Changing the caption text size in page "Services" page | 27397515-HC | (MA) */
.page-id-3953 figcaption {

        font-size: 0.7rem;
}


/* Remove page title from Portfolio items pages | 27397515-HC | (MA) */

.tax-jetpack-portfolio-type .page-header h2.page-title {
    display: none;
}

/*Preventing img jumping*/

.wrapper_div {
  position: relative;
  height: 0;
  padding-top: calc(675 / 1200 * 100%);
}

.wrapper_div_homepage {
  position: relative;
  height: 0;
  padding-top: calc(625 / 1200 * 100%);
}


.wrapper_img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/*End of Preventing img jumping*/

/* Makes the "Intermediate Technologist Project Manager" paragraph on https://fabrikarchitects.ca/team/ hoverable - #27448549-hc */
p.popmake-4226:hover {
    color: #d42525;
}

/* align copyright text in Desktop | 27513973-HC-SJ */

@media screen and (min-width: 768px) {
.col-sm-7 {
width:100%;
}

.col-sm-6.widget-area {
  text-align:center;
  width: 500px;
  float:none;
}
.col-sm-6.widget-area p {
  text-align:center;
  width: 390px;
}
}

/* Allign News Category and Date */
.listing .entry-header .entry-meta {
    text-align: center;
    margin-bottom: 2.8rem;
}

/* Copyright center mobile */
@media screen and (max-width: 768px){
    .textwidget {
    margin-left: 16%;
    text-align: center
}
}

/* News Spacing */
.listing .hentry{
    margin-bottom: 8rem;
}


/* Mobile - News Spacing */
@media screen and (max-width: 768px){
.listing .hentry{
    margin-bottom: 0rem;
}
}

/* Mobile - COpyright Center */
.widget.widget_text p{
    margin-right: 10%
}

/* Changes the style of the Instagram Icon in the Contact page - #28091968-hc */
.page-id-7 .wp-block-social-links li:first-child svg {
    background-color: #000;
    fill: #fff;
    border-radius: 4px 4px;
}

.contact-form label.grunion-field-label {
    font-weight: bold;
}

/* Align Checkbox in the Contact form Left */
/* .contact-form label.checkbox, .contact-form label.checkbox-multiple, .contact-form label.radio {
    color: #000000;
    float: left;
}

label.checkbox, input[type="checkbox"] + label, #respond input[type="checkbox"] + label, form.contact-form label.checkbox, form.contact-form input[type="checkbox"] + label, label.radio, input[type="radio"] + label, form.contact-form label.radio, form.contact-form input[type="radio"] + label {
    color: #000000;
    float: left;
} */



    img {
        cursor: zoom-in;
    }

    .slick-arrow {
        position: absolute;
        top: -0.1px;
        width: 100%;
        height: inherit;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .slick-arrow.slick-button div{
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-color: transparent !important;
        width: 5%;
        height: inherit;
    }

    .slick-arrow.slick-button div:hover {
        background: transparent !important;
    }

    .slick-button.prev  {
        padding-right: 8%;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 10%;
    }

    .slick-button.prev img {
        cursor: pointer;
        width: auto;
        height: fit-content;
        margin-left: 2vh;
        transform: scaleX(-1);
    }

    .slick-button.next  {
        padding-left: 8%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        width: 10%;
    }

    .slick-button.next img {
        cursor: pointer;
        width: auto;
        height: fit-content;
        margin-right: 2vh;
    }

    .FIVNumDisplay {
        display: inline-block;
        align-self: center;
        height: fit-content;
        /* transform: rotate(270deg); */
        /* padding-left: 42%; */
        /* padding-bottom: 75%; */
    }

    .FIVNumDisplay p{
        color: white;
    }

    #FullImageView {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 1.0);
        text-align: center;
        overflow-y: hidden;
    }

    [name="FullI"] + img {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .transition {opacity: 1;}

    #FullImage {
        cursor: default;
        /* padding: 24px; */
        width: auto;
        height: inherit;
        max-width: 100%;
        max-height: 100%;

        animation: fadeIn 5s;
        -webkit-animation: fadeIn 5s;
        -moz-animation: fadeIn 5s;
        -o-animation: fadeIn 5s;
        -ms-animation: fadeIn 5s;
    }

    #FullImage {
        cursor: default;
        /* padding: 24px; */
        width: auto;
        height: inherit;
        max-width: 100%;
        max-height: 100%;

        animation: fadeIn 5s;
        -webkit-animation: fadeIn 5s;
        -moz-animation: fadeIn 5s;
        -o-animation: fadeIn 5s;
        -ms-animation: fadeIn 5s;
    }

    @media screen and (max-width:480px) {
        #FullImage {
            cursor: default;
            /* padding: 24px; */
            width: inherit;
            height: auto;
            max-width: 100%;
            max-height: 100%;

            animation: fadeIn 5s;
            -webkit-animation: fadeIn 5s;
            -moz-animation: fadeIn 5s;
            -o-animation: fadeIn 5s;
            -ms-animation: fadeIn 5s;
        }
    }

    #CloseButton {
        position: absolute;
        top: 2vh;
        right: 5vh;
        font-size: 2rem;
        color: black;
        cursor: pointer;
    }

    .stop-scroll {
      margin: 0;
      height: 100%;
      overflow: hidden;
    }



/********** FullScreen Slideshow  **********/
    img {
        cursor: zoom-in;
    }

    .slick-arrow {
        position: absolute;
        top: -0.1px;
        width: 100%;
        height: inherit;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .slick-arrow.slick-button div{
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-color: transparent !important;
        width: 5%;
        height: inherit;
    }

    .slick-arrow.slick-button div:hover {
        background: transparent !important;
    }

    .slick-button.prev  {
        padding-right: 8%;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 10%;
    }

    .slick-button.prev img {
        cursor: pointer;
        width: auto;
        height: fit-content;
        margin-left: 2vh;
        transform: scaleX(-1);
    }

    .slick-button.next  {
        padding-left: 8%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        width: 10%;
    }

    .slick-button.next img {
        cursor: pointer;
        width: auto;
        height: fit-content;
        margin-right: 2vh;
    }

    .FIVNumDisplay {
        display: inline-block;
        align-self: center;
        height: fit-content;
        /* transform: rotate(270deg); */
        /* padding-left: 42%; */
        /* padding-bottom: 75%; */
    }

    .FIVNumDisplay p{
        color: white;
    }


.stop-scroll {
    margin: 0;
    height: 100%;
    overflow: hidden;
}