/* Default styles for all devices */

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles specific to smartphones */
  /* Adjustments for smaller screens */
    body { 
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        font-size: 14px; /* Adjust font size for better readability on smaller screens */
    }

    header { 
        background-color: #333;
        color: white;
        padding: 5px; /* Reduce padding for the header */
        text-align: center;
    }

    nav ul { /* Smartphones (portrait and landscape) */
        list-style: none;
        padding: 0;
    }

    nav li { /* Smartphones (portrait and landscape) */
        display: inline;
        margin: 0 10px;
    }

    nav a { /* Smartphones (portrait and landscape) */
        color: #ff5733; /* Change this to the desired color */
        text-decoration: none; /* Remove underlines from links */
    }

    nav a:hover { /* Smartphones (portrait and landscape) */
        text-decoration: underline;
        color: #e04000; /* Change this to the desired hover color */
    }

    section { /* Smartphones (portrait and landscape) */
        padding: 20px;
    }

    footer { /* Smartphones (portrait and landscape) */
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }

    /* Cookie Banner for smartphones*/
    #cookie-modal {
        display: none;
        position: fixed;
        z-index: 1000; /* Ensure modal appears on top of other content */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 78vw; /* Adjust width to 90% of viewport width */
        height: 78vh; /* Adjust height to 90% of viewport height */
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    /* Modal Content */
    .cookie-banner-modal-content {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    /* Title */
    .cookie-banner-modal-content h2 {
        font-size: 20px; /* Adjust the font size for the title */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the title */
        margin-bottom: 10px; /* Add margin below the title for separation */
        color: #3D4347;
    }

    /* Expanded Modal Content */
    .cookie-banner-modal-content.expanded {
        height: 400px; /* Adjust the height as needed */
        overflow-y: auto; /* Add vertical scrollbar if content exceeds height */
    }

    /* Text */
    .cookie-banner-modal-content p {
        font-size: 16px; /* Adjust the font size for the text */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the text */
        margin-bottom: 20px; /* Add margin below the text for separation */
        color: #3D4347;
    }

    /* Text */
    .cookie-banner-modal-content a {
        font-size: 16px; /* Adjust the font size for the text */
        color: #007bff; /* Bright blue color */
    }


    /* Close Button */
    .cookie-banner-close {
        position: absolute;
        top: 10px; /* Adjust the top position to position it higher */
        right: 10px; /* Adjust the right position as needed */
        font-size: 20px;
        cursor: pointer;
        background-color: #ccc; /* Grey circle background */
        color: #fff; /* White X */
        border: none;
        border-radius: 50%; /* Make the close button circular */
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .cookie-banner-modal-buttons {
        flex-direction: column; /* Stack buttons vertically for smaller screens */
        margin-top: 10px; /* Adjust margin for smaller screens */
        margin-bottom: 10px; /* Adjust margin for smaller screens */
    }

    .cookie-banner-modal-buttons button {
        padding: 10px 24px; /* Increase padding for taller buttons */
        width: 100%; /* Make buttons full-width for smaller screens */
        margin: 5px 0; /* Adjust margin for smaller screens */
        background-color: #007bff; /* Bright blue color */
        color: #fff; /* White text */
        border: none;
        border-radius: 20px; /* Rounded corners */
        font-size: 18px; /* Larger font size */
    }

    /* Reject All Button */
    .cookie-banner-modal-buttons .reject-button {
        background-color: #ccc; /* Grey background */
        color: #fff; /* White text */
    }

    /* Set Preferences Button */
    #set-preferences {
        background-color: #fff; /* White background */
        color: #007bff; /* Bright blue text */
    }

    /* Set Preferences Button Hover State */
    #set-preferences:hover {
        background-color: #f0f0f0;
        color: #007bff; 
    }

    /* Arrow Icon */
    .cookie-banner-arrow {
        margin-left: 5px;
        font-size: 12px;
    }

    /* Initially hide the Cookie Preferences section */
    .cookie-preferences {
        display: none;
    }

    /* Initially hide the "Save Preferences" button */
    #save-preferences-btn {
        display: none;
    }

    .cookie-option {
        display: block; /* Display cookie options as block elements for smaller screens */
        margin-bottom: 15px; /* Adjust margin for smaller screens */
    }

    .cookie-option label {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        color: #007bff; /* Set label color */
        font-size: 14px; /* Decrease font size for smaller screens */
    }

    .cookie-option .description {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        font-size: 12px; /* Decrease font size for smaller screens */
        color: #3D4347;
    }

    /* Portfolio grid for smartphones */
    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 5px; /* Increase gap for better spacing between thumbnails */
        max-width: 100%; /* Remove maximum width to allow the grid to fill the screen */
        margin: 0 auto;
    }

    .thumbnail {
        width: 100%; /* Adjust width to fit smaller screens */
        height: auto; /* Allow height to adjust based on width */
        border-radius: 8px;
        cursor: pointer;
    }

    .thumbnail:hover{
        transform: scale(0.98); /* Scale down the icon slightly on hover */
    }

    /* Porfolio Modal for smartphones*/
    .portfolio-modal { 
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .portfolio-modal-content {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0);
        text-align: center;
        width: 100%;
        height:auto;
        max-height: 100vh; /* Limit max height to viewport height */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds viewport height */
        box-sizing: border-box;
        padding: 0;
        z-index: 1001;
    }

    .portfolio-modal-inner-container {
        display: flex;
        flex-direction: column;
    }

    .portfolio-left-modal {
        flex: 1;
        width: 100%;
    }

    .portfolio-right-modal {
        background-color: white; /* Add white background behind the description text */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 0;
        width: 100%; /* Make the modal description occupy the full width */
    }

    #portfolio-modal-image {
        width: 100%;
        max-height: auto;/*calc(100vh - 100px);*/ /* Adjust maxium height for smaller screens */
        object-fit: contain;
        display: block;
        margin: auto;
        z-index: 10001;
    }

    /* Artwork Description Styles */
    #portfolio-image-caption {
        color: #3D4347;
        font-size: 14px;
        margin: 0;
        /*margin-top: 15px;*/
    }

    .close-portfolio-modal-container {
        background-color: white;
        padding: 20px 20px; /* Adjust padding as needed */
        display: flex;
        justify-content: space-between; /* Align close button to the right */
        align-items: center;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
    }

    .portfolio-modal-close {
        color: #3D4347;
        font-size: 32px;
        position: absolute;
        /*top: 10px;*/
        right: 16px;
        cursor: pointer;
        z-index: 10001;
    }

    /*home portfolio */
    #home-portfolio-container { 
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px; /* Adjust the gap between the columns */
        max-width: 840px;
        margin: 0 auto;
    }

    .slideshow-wrapper { 
        width: 280px; /* Width of the slideshow */
        overflow: hidden; /* Hide overflow */
        display: flex; /* Add display flex */
        justify-content: center; /* Center content horizontally */
        margin: 0 auto; /* Center the slideshow horizontally */
    }

    .slideshow-container {
        display: flex; /* Change display property to flex */
        width: 100%;
    }

    .home-thumbnail {
        flex: 0 0 auto; /* Prevent thumbnails from shrinking or growing */
        width: 280px; /* Adjust the width to your preference */
        height: 280px; /* Adjust the height to your preference */
        object-fit: cover; /* Maintain aspect ratio and cover the entire container */
        border-radius: 8px; /* Optional: Add rounded corners for a nicer look */
        margin-bottom: 10px;  /* Optional: Add spacing between thumbnails */
        cursor: pointer; /* Add a pointer cursor to indicate the clickable nature */
        position: relative;
        overflow: hidden;
    }

    .text-block {
        max-width: 100%; /* Ensure text block fills the available width */
        padding: 20px;
    }

    .home-news-content-wrapper { /* Desktops and laptops */
        width: 100%; /* Adjust width to fit smaller screens */
        margin: 0 auto; /* Center the content horizontally */
        /*padding: 20px;*/ /* Add padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .home-news-image-container { /* Desktops and laptops */
        padding-right: 10px; /* Reduce right padding for image container */
    }

    .home-news-image-container img { /* Desktops and laptops */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    #home-news .home-news-image-container {
        order: 1; /* Move image container above text container */
    }
    
    #home-news .text-block {
        order: 2; /* Move text container below image container */
    }

    /* about page */
    .about-container { /* Smartphones (portrait and landscape) */
        display: flex;
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        flex-direction: column; /* Arrange items vertically */
    }

    .about-content-wrapper { /* Smartphones (portrait and landscape) */
        width: 100%; /* Adjust width to fit smaller screens */
        margin: 0 auto; /* Center the content horizontally */
        /*padding: 20px;*/ /* Add padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .about-image-container { /* Smartphones (portrait and landscape) */
        padding-right: 10px; /* Reduce right padding for image container */
    }

    .about-image-container img { /* Smartphones (portrait and landscape) */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    .about-text-container { /* Smartphones (portrait and landscape) */
        padding-top: 10px; /* Reduce top padding for text container */
    }

    .about-text-container p { /* Smartphones (portrait and landscape) */
        margin-bottom: 20px; /* Add spacing between paragraphs */
        font-size: 14px; /* Adjust font size for better readability */
    }

    #about-me { /* Smartphones (portrait and landscape) */
        background-color: #f0f0f0; /* Light gray background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    #little-history { /* Smartphones (portrait and landscape) */
        background-color: #fff; /* White background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    #little-history .about-content-wrapper {
        display: flex;
        flex-direction: column; /* Ensure elements are stacked vertically */
    }

    #little-history .about-image-container {
        order: 1; /* Move image container above text container */
    }
    
    #little-history .about-text-container {
        order: 2; /* Move text container below image container */
    }

    #behind-scenes { /* Smartphones (portrait and landscape) */
        background-color: #f0f0f0; /* Light gray background */
        padding: 20px; /* Add padding to sections for spacing */
    }
}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles specific to iPads */
  /* Adjustments for tablet devices */
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        font-size: 14px; /* Adjust font size for better readability on smaller screens */
    }

    header {
        background-color: #333;
        color: white;
        padding: 5px; 
        text-align: center;
    }

    nav ul {
        list-style: none;
        padding: 0;
    }

    nav li { 
        display: inline;
        margin: 0 10px;
    }

    nav a {
        color: #ff5733; /* Change this to the desired color */
        text-decoration: none; /* Remove underlines from links */
    }

    nav a:hover {
        text-decoration: underline;
        color: #e04000; /* Change this to the desired hover color */
    }

    section {
        padding: 20px;
    }

    footer { 
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }


    /* Cookie consent banner styles for Ipads*/
    /* Cookie Banner */
    #cookie-modal {
        display: none;
        position: fixed;
        z-index: 1000; /* Ensure modal appears on top of other content */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 78vw; /* Adjust width to 90% of viewport width */
        height: 78vh; /* Adjust height to 90% of viewport height */
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    /* Modal Content */
    .cookie-banner-modal-content {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    /* Title */
    .cookie-banner-modal-content h2 {
        font-size: 20px; /* Adjust the font size for the title */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the title */
        margin-bottom: 10px; /* Add margin below the title for separation */
        color: #3D4347;
    }

    /* Expanded Modal Content */
    .cookie-banner-modal-content.expanded {
        height: 400px; /* Adjust the height as needed */
        overflow-y: auto; /* Add vertical scrollbar if content exceeds height */
    }

    /* Text */
    .cookie-banner-modal-content p {
        font-size: 16px; /* Adjust the font size for the text */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the text */
        margin-bottom: 20px; /* Add margin below the text for separation */
        color: #3D4347;
    }

    /* Text */
    .cookie-banner-modal-content a {
        font-size: 16px; /* Adjust the font size for the text */
        color: #007bff; /* Bright blue color */
    }


    /* Close Button */
    .cookie-banner-close {
        position: absolute;
        top: 10px; /* Adjust the top position to position it higher */
        right: 10px; /* Adjust the right position as needed */
        font-size: 20px;
        cursor: pointer;
        background-color: #ccc; /* Grey circle background */
        color: #fff; /* White X */
        border: none;
        border-radius: 50%; /* Make the close button circular */
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .cookie-banner-modal-buttons {
        flex-direction: column; /* Stack buttons vertically for smaller screens */
        margin-top: 10px; /* Adjust margin for smaller screens */
        margin-bottom: 10px; /* Adjust margin for smaller screens */
    }

    .cookie-banner-modal-buttons button {
        padding: 10px 24px; /* Increase padding for taller buttons */
        width: 100%; /* Make buttons full-width for smaller screens */
        margin: 5px 0; /* Adjust margin for smaller screens */
        background-color: #007bff; /* Bright blue color */
        color: #fff; /* White text */
        border: none;
        border-radius: 20px; /* Rounded corners */
        font-size: 18px; /* Larger font size */
    }

    /* Reject All Button */
    .cookie-banner-modal-buttons .reject-button {
        background-color: #ccc; /* Grey background */
        color: #fff; /* White text */
    }

    /* Set Preferences Button */
    #set-preferences {
        background-color: #fff; /* White background */
        color: #007bff; /* Bright blue text */
    }

    /* Set Preferences Button Hover State */
    #set-preferences:hover {
        background-color: #f0f0f0;
        color: #007bff; 
    }

    /* Arrow Icon */
    .cookie-banner-arrow {
        margin-left: 5px;
        font-size: 12px;
    }

    /* Initially hide the Cookie Preferences section */
    .cookie-preferences {
        display: none;
    }

    /* Initially hide the "Save Preferences" button */
    #save-preferences-btn {
        display: none;
    }

    .cookie-option {
        display: block; /* Display cookie options as block elements for smaller screens */
        margin-bottom: 15px; /* Adjust margin for smaller screens */
    }

    .cookie-option label {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        color: #007bff; /* Set label color */
        font-size: 14px; /* Decrease font size for smaller screens */
    }

    .cookie-option .description {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        font-size: 12px; /* Decrease font size for smaller screens */
        color: #3D4347;
    }

    /* Portfolio grid for Ipads */
    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Adjust the minmax value for smaller thumbnails */
        gap: 5px; /* Increase gap for better spacing between thumbnails */
        max-width: 100%; /* Remove maximum width to allow the grid to fill the screen */
        margin: 0 auto;
    }

    .thumbnail {
        width: 100%; /* Adjust width to fit smaller screens */
        height: auto; /* Allow height to adjust based on width */
        border-radius: 8px;
        cursor: pointer;
    }

    .thumbnail:hover{
        transform: scale(0.98); /* Scale down the icon slightly on hover */
    }

    /* Portfolio Modal for Ipads */
    .portfolio-modal { 
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .portfolio-modal-content {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0);
        text-align: center;
        width: 100%;
        height:auto;
        max-height: 100vh; /* Limit max height to viewport height */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds viewport height */
        box-sizing: border-box;
        padding: 0;
        z-index: 1001;
    }

    .portfolio-modal-inner-container {
        display: flex;
        flex-direction: column;
    }

    .portfolio-left-modal {
        flex: 1;
        width: 100%;
    }

    .portfolio-right-modal {
        background-color: white; /* Add white background behind the description text */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 0;
        width: 100%; /* Make the modal description occupy the full width */
    }

    #portfolio-modal-image {
        width: 100%;
        max-height: auto;/*calc(100vh - 100px);*/ /* Adjust maxium height for smaller screens */
        object-fit: contain;
        display: block;
        margin: auto;
        z-index: 10001;
    }

    /* Artwork Description Styles */
    #portfolio-image-caption {
        color: #3D4347;
        font-size: 14px;
        margin: 0;
        /*margin-top: 15px;*/
    }

    .close-portfolio-modal-container {
        background-color: white;
        padding: 20px 20px; /* Adjust padding as needed */
        display: flex;
        justify-content: space-between; /* Align close button to the right */
        align-items: center;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
    }

    .portfolio-modal-close {
        color: #3D4347;
        font-size: 32px;
        position: absolute;
        /*top: 10px;*/
        right: 16px;
        cursor: pointer;
        z-index: 10001;
    }

    /*home portfolio */
    #home-portfolio-container { 
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-columns: auto max-content; /* Adjust column sizes as needed */
        grid-gap: 20px; /* Adjust the gap between the columns */
        max-width: 840px;
        margin: 0 auto;
    }

    .slideshow-wrapper { 
        width: 280px; /* Width of the slideshow */
        overflow: hidden; /* Hide overflow */
        display: flex; /* Add display flex */
        justify-content: center; /* Center content horizontally */
        margin: 0 auto; /* Center the slideshow horizontally */
    }

    .slideshow-container {
        display: flex; /* Change display property to flex */
        width: 100%;
    }

    .home-thumbnail {
        flex: 0 0 auto; /* Prevent thumbnails from shrinking or growing */
        width: 280px; /* Adjust the width to your preference */
        height: 280px; /* Adjust the height to your preference */
        object-fit: cover; /* Maintain aspect ratio and cover the entire container */
        border-radius: 8px; /* Optional: Add rounded corners for a nicer look */
        margin-bottom: 10px;  /* Optional: Add spacing between thumbnails */
        cursor: pointer; /* Add a pointer cursor to indicate the clickable nature */
        position: relative;
        overflow: hidden;
    }

    .text-block {
        max-width: 100%; /* Ensure text block fills the available width */
        padding: 20px;
    }

    .home-news-content-wrapper { /* Desktops and laptops */
        width: 100%; /* Adjust width to fit smaller screens */
        margin: 0 auto; /* Center the content horizontally */
        /*padding: 20px;*/ /* Add padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .home-news-image-container { /* Desktops and laptops */
        padding-right: 10px; /* Reduce right padding for image container */
    }

    .home-news-image-container img { /* Desktops and laptops */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    #home-news .home-news-image-container {
        order: 1; /* Move image container above text container */
    }
    
    #home-news .text-block {
        order: 2; /* Move text container below image container */
    }

    /* about page */
    .about-container {
        display: flex;
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        flex-direction: column; /* Arrange items vertically */
    }

    .about-content-wrapper { 
        width: 90%; /* Adjust width to fit smaller screens */
        margin: 0 auto; /* Center the content horizontally */
        padding: 20px; /* Add padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .about-image-container { /* Smartphones (portrait and landscape) */
        padding-right: 10px; /* Reduce right padding for image container */
    }

    .about-image-container img { /* Smartphones (portrait and landscape) */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    .about-text-container { /* Smartphones (portrait and landscape) */
        padding-top: 10px; /* Reduce top padding for text container */
    }

    .about-text-container p { /* Smartphones (portrait and landscape) */
        margin-bottom: 20px; /* Add spacing between paragraphs */
        font-size: 14px; /* Adjust font size for better readability */
    }

    #about-me { /* Smartphones (portrait and landscape) */
        background-color: #f0f0f0; /* Light gray background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    #little-history { /* Smartphones (portrait and landscape) */
        background-color: #fff; /* White background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    #behind-scenes { /* Smartphones (portrait and landscape) */
        background-color: #f0f0f0; /* Light gray background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    

}

/* Desktops and laptops */
@media only screen and (min-width: 1224px) {
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
    }

    header {
        background-color: #333;
        color: white;
        padding: 10px;
        text-align: center;
    }

    nav ul {
        list-style: none;
        padding: 0;
    }

    nav li {
        display: inline;
        margin: 0 10px;
    }

    nav a {
        color: #ff5733; /* Change this to the desired color */
        text-decoration: none; /* Remove underlines from links */
    }

    nav a:hover {
        text-decoration: underline;
        color: #e04000; /* Change this to the desired hover color */
    }

    section {
        padding: 20px;
    }

    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }


   /* Cookie Modal */
   #cookie-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 640px;
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    /* Modal Content */
    .cookie-banner-modal-content {
        position: relative;
        text-align: center; /* Center the content */
    }

    /* Title */
    .cookie-banner-modal-content h2 {
        font-size: 20px; /* Adjust the font size for the title */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the title */
        margin-bottom: 10px; /* Add margin below the title for separation */
        color: #3D4347;
    }

    /* Expanded Modal Content */
    .cookie-banner-modal-content.expanded {
        height: 400px; /* Adjust the height as needed */
        overflow-y: auto; /* Add vertical scrollbar if content exceeds height */
    }

    /* Text */
    .cookie-banner-modal-content p {
        font-size: 16px; /* Adjust the font size for the text */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the text */
        margin-bottom: 20px; /* Add margin below the text for separation */
        color: #3D4347;
    }

    /* Text */
    .cookie-banner-modal-content a {
        font-size: 16px; /* Adjust the font size for the text */
        color: #007bff; /* Bright blue color */
    }

    /* Close Button */
    .cookie-banner-close {
        position: absolute;
        top: 10px; /* Adjust the top position to position it higher */
        right: 10px; /* Adjust the right position as needed */
        font-size: 20px;
        cursor: pointer;
        background-color: #ccc; /* Grey circle background */
        color: #fff; /* White X */
        border: none;
        border-radius: 50%; /* Make the close button circular */
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    /* Cookie Modal Buttons */
    .cookie-banner-modal-buttons {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .cookie-banner-modal-buttons button {
        padding: 12px 24px; /* Adjust padding for larger buttons */
        margin: 0 10px;
        cursor: pointer;
        background-color: #007bff; /* Bright blue color */
        color: #fff; /* White text */
        border: none;
        border-radius: 20px; /* Rounded corners */
        font-size: 16px; /* Larger font size */
        min-width: 160px; /* Minimum width for the buttons */
    }

    /* Reject All Button */
    .cookie-banner-modal-buttons .reject-button {
        background-color: #ccc; /* Grey background */
        color: #fff; /* White text */
    }

    /* Set Preferences Button */
    #set-preferences {
        background-color: #fff; /* White background */
        color: #007bff; /* Bright blue text */
    }

    /* Set Preferences Button Hover State */
    #set-preferences:hover {
        background-color: #f0f0f0;
        color: #007bff; 
    }

    /* Arrow Icon */
    .cookie-banner-arrow {
        margin-left: 5px;
        font-size: 12px;
    }

    /* Initially hide the Cookie Preferences section */
    .cookie-preferences {
        display: none;
    }

    /* Initially hide the "Save Preferences" button */
    #save-preferences-btn {
        display: none;
    }

    .cookie-option {
        display: grid; /* Use grid layout */
        grid-template-columns: auto 1fr; /* First column for checkbox and label, second column for description */
        grid-gap: 5px 0; /* Gap between grid items */
        text-align: left;
        align-items: start; /* Align items vertically */
        margin-bottom: 20px;
    }

    /* Checkbox and Label */
    .cookie-option input[type="checkbox"] {
        justify-self: start; /* Align checkbox to the start of its grid cell */
    }

    .cookie-option label {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        font-size: 16px; /* Set font size to 16px */
        color: #007bff; /* Set label color */
        margin: 0; /* Remove any default margin */
    }

    /* Description */
    .cookie-option .description {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        grid-column: 1 / span 2; /* Span across both grid columns */
        margin: 0;
        color: #3D4347;
    }

    /* Portfolio Modal */
    .portfolio-modal {
        display: none;
        max-width: 100%;
        max-height: 90vh;
        position: fixed;
        z-index: 1000;
        left: 0%;
        top: 0%;
        transform: translate(calc((100vw - 100%) / 2), calc((100vh - 100%) / 2)); /* Shift to center */
    }

    /* Modal subcontainers */
    /* CSS for vertically organized subcontainer */
    .portfolio-modal-content {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
        height: 85vh;
    }

    /* CSS for horizontally organized subcontainer */
    .portfolio-modal-inner-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
    }

    .portfolio-modal-close { /* Desktops and laptops */
        color: #333;
        font-size: 30px;
        position: absolute;
        top: 10px;
        right: 15px;
        cursor: pointer;
        z-index: 4; /* Set the highest z-index for the close button */
    }

    .portfolio-left-modal {
        display: flex;
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
        background-color:black;
        padding: 0px;
        margin: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .portfolio-right-modal {
        width: 320px;
        height: 100%;
        background-color: white;
        padding: 0px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-top-right-radius: 4px; /* Adjust the radius for the top-right corner */
        border-bottom-right-radius: 4px; /* Adjust the radius for the bottom-right corner */
        margin: 0;
    }

    #portfolio-modal-image { 
        width: 100%; /* Occupy 100% of the modal-left container */
        height: auto; /* Automatically adjust the height while maintaining the aspect ratio */
        max-height: 85vh;
        object-fit: contain;
        display: block; /* Remove any default margins or padding */ 
        margin: auto; /* Center the image horizontally */
        z-index: 10001;
    }

     /* Artwork Description Styles */
     #portfolio-image-caption { /* Desktops and laptops */
        color: #333;
        font-size: 16px;
        margin: 16px;
        margin-top: 48px;
    }

    .portfolio-grid { /* Desktops and laptops */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 0px;
        max-width: 1000px; /* Set a maximum width for the grid */
        margin: 0 auto; /* Center the grid horizontally */
    }

    .thumbnail { /* Desktops and laptops */
        flex: 0 0 auto; /* Prevent thumbnails from shrinking or growing */
        width: 320px; /* Adjust the width to your preference */
        height: 320px; /* Adjust the height to your preference */
        object-fit: cover; /* Maintain aspect ratio and cover the entire container */
        border-radius: 8px; /* Optional: Add rounded corners for a nicer look */
        margin-bottom: 10px;  /* Optional: Add spacing between thumbnails */
        cursor: pointer; /* Add a pointer cursor to indicate the clickable nature */
        position: relative;
        overflow: hidden;
    }

    .thumbnail:hover{
        transform: scale(0.98); /* Scale down the icon slightly on hover */
    }

    #home-portfolio-container { /* Desktops and laptops */
        display: grid;
        grid-template-columns: auto max-content; /* Adjust column sizes as needed */
        grid-gap: 20px; /* Adjust the gap between the columns */
        max-width: 960px;
        margin: 0 auto;
        align-items: center; /* Center vertically */
    }

    .slideshow-wrapper { /* Desktops and laptops */
        width: 320px; /* Width of the slideshow */
        overflow: hidden; /* Hide overflow */
    }

    .slideshow-container { /* Desktops and laptops */
        display: flex; /* Change display property to flex */
    }

    .home-thumbnail { /* Desktops and laptops */
        flex: 0 0 auto; /* Prevent thumbnails from shrinking or growing */
        width: 320px; /* Adjust the width to your preference */
        height: 320px; /* Adjust the height to your preference */
        object-fit: cover; /* Maintain aspect ratio and cover the entire container */
        border-radius: 8px; /* Optional: Add rounded corners for a nicer look */
        margin-bottom: 10px;  /* Optional: Add spacing between thumbnails */
        cursor: pointer; /* Add a pointer cursor to indicate the clickable nature */
        position: relative;
        overflow: hidden;
    }

    .text-block { /* Desktops and laptops */
        padding: 20px;
        max-width: 400px; /* Adjust the max-width to your preference */
    }


    .home-news-content-wrapper { /* Desktops and laptops */
        display: flex;
        justify-content: center; /* Align content horizontally in the center */
        margin: 0 auto; /* Center the content horizontally */
        align-items: center; /* Horizontally center content */
        width: 60%; /* Set the width to 75% of the screen */
        height: 100%; /* Set the height of the wrapper to 100% of its parent container */
        padding: 20px; /* Add padding for spacing */
    }

    .home-news-image-container { /* Desktops and laptops */
        flex: 0 0 auto; /* Prevent the container from growing or shrinking */
        padding-right: 20px; /* Add margin to the right */
        padding-left: 20px; /* Add margin to the right */
        max-width: 30vw;
    }

    .home-news-image-container img { /* Desktops and laptops */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    .about-container { /* Desktops and laptops */
        display: flex;
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
    }


    .about-text-container { /* Smartphones (portrait and landscape) */
        padding-top: 10px; /* Reduce top padding for text container */
    }

    .about-text-container p { /* Smartphones (portrait and landscape) */
        margin-bottom: 20px; /* Add spacing between paragraphs */
        font-size: 14px; /* Adjust font size for better readability */
    }

    .about-content-wrapper { /* Desktops and laptops */
        display: flex;
        justify-content: center; /* Align content horizontally in the center */
        margin: 0 auto; /* Center the content horizontally */
        align-items: center; /* Horizontally center content */
        height: 100%; /* Set the height of the wrapper to 100% of its parent container */
        width: 60%; /* Set the width to 75% of the screen */
        padding: 20px; /* Add padding for spacing */
    }

    .about-image-container { /* Desktops and laptops */
        flex: 0 0 auto; /* Prevent the container from growing or shrinking */
        padding-right: 20px; /* Add margin to the right */
        padding-left: 20px; /* Add margin to the right */
        max-width: 30vw;
    }

    .about-image-container img { /* Desktops and laptops */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    .about-text-container { /* Desktops and laptops */
        flex: 1; /* Take up remaining space */
        padding-left: 20px; /* Add padding to the left */
        box-sizing: border-box; /* Include padding in the width */
    }

    #about-me {
        background-color: #f0f0f0; /* Light gray background */
    }

    #little-history {
        background-color: #fff; /* White background */
    }

    #behind-scenes {
        background-color: #f0f0f0; /* Light gray background */
    }

    .about-text-container p {
        margin-bottom: 20px; /* Add spacing between paragraphs */
    }

}

/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles specific to iPhone 4 */
  /* Adjustments for devices with higher pixel density */
    body { /* Smartphones (portrait and landscape) */
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        font-size: 14px; /* Adjust font size for better readability on smaller screens */
    }

    header { /* Smartphones (portrait and landscape) */
        background-color: #333;
        color: white;
        padding: 5px; /* Reduce padding for the header */
        text-align: center;
    }

    nav ul { /* Smartphones (portrait and landscape) */
        list-style: none;
        padding: 0;
    }

    nav li { /* Smartphones (portrait and landscape) */
        display: inline;
        margin: 0 10px;
    }

    nav a { /* Smartphones (portrait and landscape) */
        color: #ff5733; /* Change this to the desired color */
        text-decoration: none; /* Remove underlines from links */
    }

    nav a:hover { /* Smartphones (portrait and landscape) */
        text-decoration: underline;
        color: #e04000; /* Change this to the desired hover color */
    }

    section { /* Smartphones (portrait and landscape) */
        padding: 20px;
    }

    footer { /* Smartphones (portrait and landscape) */
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px;
    }

    /* Cookie consent banner styles for smartphones*/
    /* Cookie Banner */
    #cookie-modal {
        display: none;
        position: fixed;
        z-index: 1000; /* Ensure modal appears on top of other content */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 78vw; /* Adjust width to 90% of viewport width */
        height: 78vh; /* Adjust height to 90% of viewport height */
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    

    /* Modal Content */
    .cookie-banner-modal-content {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    /* Title */
    .cookie-banner-modal-content h2 {
        font-size: 20px; /* Adjust the font size for the title */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the title */
        margin-bottom: 10px; /* Add margin below the title for separation */
        color: #3D4347;
    }

    /* Expanded Modal Content */
    .cookie-banner-modal-content.expanded {
        height: 400px; /* Adjust the height as needed */
        overflow-y: auto; /* Add vertical scrollbar if content exceeds height */
    }

    /* Text */
    .cookie-banner-modal-content p {
        font-size: 16px; /* Adjust the font size for the text */
        font-family: "Ubuntu", sans-serif; /* Specify the font family for the text */
        margin-bottom: 20px; /* Add margin below the text for separation */
        color: #3D4347;
    }

    /* Text */
    .cookie-banner-modal-content a {
        font-size: 16px; /* Adjust the font size for the text */
        color: #007bff; /* Bright blue color */
    }


    /* Close Button */
    .cookie-banner-close {
        position: absolute;
        top: 10px; /* Adjust the top position to position it higher */
        right: 10px; /* Adjust the right position as needed */
        font-size: 20px;
        cursor: pointer;
        background-color: #ccc; /* Grey circle background */
        color: #fff; /* White X */
        border: none;
        border-radius: 50%; /* Make the close button circular */
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .cookie-banner-modal-buttons {
        flex-direction: column; /* Stack buttons vertically for smaller screens */
        margin-top: 10px; /* Adjust margin for smaller screens */
        margin-bottom: 10px; /* Adjust margin for smaller screens */
    }

    .cookie-banner-modal-buttons button {
        padding: 10px 24px; /* Increase padding for taller buttons */
        width: 100%; /* Make buttons full-width for smaller screens */
        margin: 5px 0; /* Adjust margin for smaller screens */
        background-color: #007bff; /* Bright blue color */
        color: #fff; /* White text */
        border: none;
        border-radius: 20px; /* Rounded corners */
        font-size: 18px; /* Larger font size */
    }

    /* Reject All Button */
    .cookie-banner-modal-buttons .reject-button {
        background-color: #ccc; /* Grey background */
        color: #fff; /* White text */
    }

    /* Set Preferences Button */
    #set-preferences {
        background-color: #fff; /* White background */
        color: #007bff; /* Bright blue text */
    }

    /* Set Preferences Button Hover State */
    #set-preferences:hover {
        background-color: #f0f0f0;
        color: #007bff; 
    }

    /* Arrow Icon */
    .cookie-banner-arrow {
        margin-left: 5px;
        font-size: 12px;
    }

    /* Initially hide the Cookie Preferences section */
    .cookie-preferences {
        display: none;
    }

    /* Initially hide the "Save Preferences" button */
    #save-preferences-btn {
        display: none;
    }

    .cookie-option {
        display: block; /* Display cookie options as block elements for smaller screens */
        margin-bottom: 15px; /* Adjust margin for smaller screens */
    }

    .cookie-option label {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        color: #007bff; /* Set label color */
        font-size: 14px; /* Decrease font size for smaller screens */
    }

    .cookie-option .description {
        font-family: 'Ubuntu', sans-serif; /* Use Ubuntu font */
        font-size: 12px; /* Decrease font size for smaller screens */
        color: #3D4347;
    }


    /* Portfolio grid for iphone 4 */
    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Adjust the minmax value for smaller thumbnails */
        gap: 5px; /* Increase gap for better spacing between thumbnails */
        max-width: 100%; /* Remove maximum width to allow the grid to fill the screen */
        margin: 0 auto;
    }

    .thumbnail {
        width: 100%; /* Adjust width to fit smaller screens */
        height: auto; /* Allow height to adjust based on width */
        border-radius: 8px;
        cursor: pointer;
    }

    .thumbnail:hover{
        transform: scale(0.98); /* Scale down the icon slightly on hover */
    }

    /* Porfolio Modal for iphone 4*/
    .portfolio-modal { 
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .portfolio-modal-content {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0);
        text-align: center;
        width: 100%;
        height:auto;
        max-height: 100vh; /* Limit max height to viewport height */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds viewport height */
        box-sizing: border-box;
        padding: 0;
        z-index: 1001;
    }

    .portfolio-modal-inner-container {
        display: flex;
        flex-direction: column;
    }

    .portfolio-left-modal {
        flex: 1;
        width: 100%;
    }

    .portfolio-right-modal {
        background-color: white; /* Add white background behind the description text */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin: 0;
        width: 100%; /* Make the modal description occupy the full width */
    }

    #portfolio-modal-image {
        width: 100%;
        max-height: auto;/*calc(100vh - 100px);*/ /* Adjust maxium height for smaller screens */
        object-fit: contain;
        display: block;
        margin: auto;
        z-index: 10001;
    }

    /* Artwork Description Styles */
    #portfolio-image-caption {
        color: #3D4347;
        font-size: 14px;
        margin: 0;
        /*margin-top: 15px;*/
    }

    .close-portfolio-modal-container {
        background-color: white;
        padding: 20px 20px; /* Adjust padding as needed */
        display: flex;
        justify-content: space-between; /* Align close button to the right */
        align-items: center;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
    }

    .portfolio-modal-close {
        color: #3D4347;
        font-size: 32px;
        position: absolute;
        /*top: 10px;*/
        right: 16px;
        cursor: pointer;
        z-index: 10001;
    }

    /*home portfolio */
    #home-portfolio-container { 
        display: grid;
        grid-template-columns: 1fr;
        /*grid-template-columns: auto max-content; /* Adjust column sizes as needed */
        grid-gap: 20px; /* Adjust the gap between the columns */
        max-width: 840px;
        margin: 0 auto;
    }

    .slideshow-wrapper { 
        width: 280px; /* Width of the slideshow */
        overflow: hidden; /* Hide overflow */
        display: flex; /* Add display flex */
        justify-content: center; /* Center content horizontally */
        margin: 0 auto; /* Center the slideshow horizontally */
    }

    .slideshow-container {
        display: flex; /* Change display property to flex */
        width: 100%;
    }

    .home-thumbnail {
        flex: 0 0 auto; /* Prevent thumbnails from shrinking or growing */
        width: 280px; /* Adjust the width to your preference */
        height: 280px; /* Adjust the height to your preference */
        object-fit: cover; /* Maintain aspect ratio and cover the entire container */
        border-radius: 8px; /* Optional: Add rounded corners for a nicer look */
        margin-bottom: 10px;  /* Optional: Add spacing between thumbnails */
        cursor: pointer; /* Add a pointer cursor to indicate the clickable nature */
        position: relative;
        overflow: hidden;
    }

    .text-block {
        max-width: 100%; /* Ensure text block fills the available width */
        padding: 20px;
    }

    .home-news-content-wrapper { /* Desktops and laptops */
        width: 100%; /* Adjust width to fit smaller screens */
        margin: 0 auto; /* Center the content horizontally */
        /*padding: 20px;*/ /* Add padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .home-news-image-container { /* Desktops and laptops */
        padding-right: 10px; /* Reduce right padding for image container */
    }

    .home-news-image-container img { /* Desktops and laptops */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    #home-news .home-news-image-container {
        order: 1; /* Move image container above text container */
    }
    
    #home-news .text-block {
        order: 2; /* Move text container below image container */
    }

    /* about page */
    .about-container { /* Smartphones (portrait and landscape) */
        display: flex;
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        flex-direction: column; /* Arrange items vertically */
    }

    .about-content-wrapper { /* Smartphones (portrait and landscape) */
        width: 90%; /* Adjust width to fit smaller screens */
        margin: 0 auto; /* Center the content horizontally */
        padding: 20px; /* Add padding for spacing */
        box-sizing: border-box; /* Include padding in the width */
    }

    .about-image-container { /* Smartphones (portrait and landscape) */
        padding-right: 10px; /* Reduce right padding for image container */
    }

    .about-image-container img { /* Smartphones (portrait and landscape) */
        display: block; /* Make the image a block element */
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    .about-text-container { /* Smartphones (portrait and landscape) */
        /*flex: 1; /* Take up remaining space */
        /*padding-left: 10px; /* Reduce left padding for text container */
        /*box-sizing: border-box; /* Include padding in the width */
        padding-top: 10px; /* Reduce top padding for text container */
    }

    .about-text-container p { /* Smartphones (portrait and landscape) */
        margin-bottom: 20px; /* Add spacing between paragraphs */
        font-size: 14px; /* Adjust font size for better readability */
    }

    #about-me { /* Smartphones (portrait and landscape) */
        background-color: #f0f0f0; /* Light gray background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    #little-history { /* Smartphones (portrait and landscape) */
        background-color: #fff; /* White background */
        padding: 20px; /* Add padding to sections for spacing */
    }

    #behind-scenes { /* Smartphones (portrait and landscape) */
        background-color: #f0f0f0; /* Light gray background */
        padding: 20px; /* Add padding to sections for spacing */
    }

}

/* Overlay */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* instagram icon*/
.instagram-icon-container {
    text-align: center;
    margin: 20px;
    position: relative; /* Position the image relative to its container */
    width: 50px; /* Set initial width of container */
    height: 50px; /* Set initial height of container */
}

.instagram-icon-container img {
    width: 100%; /* Make the image width fill the container */
    height: auto; /* Maintain aspect ratio */
}

.instagram-icon-container img:hover {
    transform: scale(1.1); /* Scale up the icon slightly on hover */
}

/* --- Image Loading Spinner ---*/
#loading-spinner {
    z-index: 1000;
}

@keyframes ldio-da9p0k310n8 { /* generated by https://loading.io/ */
    0% { background: #f8b26a }
    12.5% { background: #f8b26a }
    12.625% { background: #e15b64 }
    100% { background: #e15b64 }
  }
.ldio-da9p0k310n8 div {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #e15b64;
    animation: ldio-da9p0k310n8 1s linear infinite;
}
.loadingio-spinner-blocks-tp774uxwa5g {
    position: absolute;
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    /*background: #ffffff;*/
    }
.ldio-da9p0k310n8 {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.ldio-da9p0k310n8 div { box-sizing: content-box; }
/* --- Image Loading Spinner End ---*/