/*HOME*/
#home {background-image:url("./../assets/art-home-background.jpg");}
/*ARTIST*/
#artist {text-align:left;padding-top:128px;}
#artist .surrounder {margin:0 auto;position:relative;width:50%;}
#artist h1 {padding:32px 0 32px 5%;}
#artist p {padding:32px 32px 64px 0;}
#artist .portrait-image {height:360px;float:right;margin-top:8px;position:relative;z-index:20;}
#artist .portrait-image img {width:auto;height:100%;object-fit:contain;}
#artist .img-accent {position:absolute;width:100%;height:100%;background: rgb(81,91,118,0.2);}
#artist .design-accent {background:#515B76;}

/*GALLERY*/
#gallery h1 {padding-left:15%;text-align:left;}

#gallery .holder {
    width: 100%;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* FLEX LAYOUT */
#gallery .gallery-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* IMAGE HOLDER + HOVER EFFECTS */
#gallery .image-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#gallery .image-holder h2 {
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
}

#gallery .image-wrapper {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 384px;
}

#gallery .gallery-img {
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    display: block;
}

#gallery .shadow-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: box-shadow 0.3s ease;
}

#gallery .button {
    background: #775168;
    padding: 10px 20px;
    border-radius: 4px;
    scale: 0;
    transition: scale 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

#gallery .button p {
    color: #E8DADA;
    margin: 0;
    font-size: 14px;
}

#gallery .fullscreen-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    scale: 0;
    width: 32px;
    height: 32px;
    transition: scale 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

#gallery .fullscreen-icon:hover {
    opacity: 0.5;
}

/* ON HOVER */

#gallery .image-holder:hover .shadow-wrapper {
    box-shadow: inset 0 0 64px rgba(255,255,255,0.5);
}

#gallery .image-holder:hover .button,
#gallery .image-holder:hover .fullscreen-icon {
    scale: 1;
}

/*IMAGE-DIALOG*/
.image-dialog {display:none;background:rgba(255,255,255,0.8);height:100vh;z-index:300;position:fixed;top:0;left:0;bottom:0;right:0;justify-content:center;align-items:center;}
.image-dialog .dialog-banner {text-align:center;}
.image-dialog .dialog-banner img {max-width:80%;max-height:80vh;}

/*BRANDS*/
#brands .brands-holder {width:100%;margin:128px 0;}
#brands .brands-holder li {margin-right:64px;display:inline-block;}
#brands .brands-holder li img {width:128px;}
/*ORIGIN*/
#origin .big-p {font-size:48px;width:90%;margin:0 auto;padding:128px 0 32px 0;font-family:"Now",serif;text-align:center;}
#origin p {text-align:left;padding-bottom:128px;}
/*CALL-TO-ACTION*/
#call-to-action p {padding:32px 0;font-family:"Now",serif;font-size: 28px;}
#call-to-action .arrow-down {width:64px;height:64px;animation: jump 0.5s ease-in infinite;cursor: pointer;}
@keyframes jump {0% {transform: translateY(0);}50% {transform: translateY(-30%);}}

@media screen and (max-width: 1300px) {
    /*HOME*/
    #home .background-video {display:none;}
    /*GALLERY*/
    #gallery .design-background-line {width:95%;height:96px;}
    #gallery .image-wrapper .fullscreen-icon {scale:1;}
    #gallery .image-wrapper .button {scale:1;}
    #gallery .image-wrapper {height: 256px;}
    /*SERVICES*/
    #services h1 {margin:64px 0;}
    #services .background-design-text {font-size:96px;}
    /*ARTIST*/
    #artist .surrounder {width:70%;}
    /*BENEFITS*/
    #benefits li {width:50%;}
    #benefits .benefits-item .hover-content {height:60%;}
    #benefits .benefits-item:hover .hover-content {height:60%;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview li {width:50%;}
    #solutions-overview .faq-topic {height:384px;}
    #solutions-overview .design-arrow {opacity:1;right:32px;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:50%;}
}

@media screen and (max-width: 1000px) {
    /*GALLERY*/
    #gallery .image-wrapper {height: 192px;}
    #gallery .button {height:18px;padding:5px 10px;}
    #gallery .button p {font-size:12px;padding:0 2px;}
    /*QUOTE*/
    #quote .ceo-image {margin:-32px 64px 0 0;width:256px;float:right;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .design-arrow {width:32px;}
    /*services*/
    #services li {width:100%;margin-top:16px;}
    #services .faq-topic {height:420px;}
    /*BLOG-OVERVIEW*/
    #blog-overview .surrounder {width:100%;}
}
@media screen and (max-width: 800px) {
    /*SERVICES*/
    #services h1 {margin:32px 0;}
    #services li {width:100%;}
    /*QUOTE*/
    #quote .image-holder {width:100%;display: inline-block;text-align: center;}
    #quote .ceo-image {margin:-32px auto 0 auto;float:none;}
    #quote .quote {width:90%;}
    /*BENEFITS*/
    #benefits .info-text {margin:16px 0;}
    #benefits li {width:50%;}
    #benefits h3 {padding:16px 16px 0 16px;}
    #benefits .hover-content p {padding:16px 16px 0 16px;}
    /*STEP-BY-STEP*/
    #step-by-step .process-content {height:448px;}
    #step-by-step .step-by-step-slide {height:320px;}
    #step-by-step .prev, .next {width:40px;height:40px;cursor:pointer;padding-top:192px;font-weight: bold;font-size: 32px;transition: 0.6s ease;user-select: none;}
    #step-by-step .left {margin-left:2px;}
    #step-by-step .right {margin-right:2px;}
    /*SME*/
    #sme .content-div {width:100%;}
    #sme .separator {display:none;}
    #sme .left-div p {padding-left:0;}
    #sme .right-div p {padding-left:0;}
    /*ARTIST*/
    #artist .surrounder {width:90%;}
    /*ABOUT-US*/
    #about-us .content-div {width:100%;}
    #about-us .separator {display:none;}
    #about-us .left-div p {padding-left:0;}
    #about-us .right-div p {padding-left:0;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .faq-topic {width:100%;}
    #solutions-overview li {width:100%;}
    /*services*/
    #services .faq-topic {width:100%;}
    #services li {width:100%;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:100%;}
}

@media screen and (max-width: 600px) {
    /*ARTIST*/
    #artist .portrait-image {height:256px;}
    /*GALLERY*/
    #gallery .image-wrapper {height:128px;}
    /*STEP-BY-STEP*/
    #step-by-step .process-content {height:512px;}
    #step-by-step .step-by-step-slide {height:400px;}
    #step-by-step .prev, .next {width:32px;height:32px;padding-top:212px;}
    #step-by-step .left {margin-left:0;}
    #step-by-step .right {margin-right:0;}
    /*TECHNOLOGIES*/
    #technologies .content-holder {height:1024px;}
    #technologies h3 {margin-top:40px;}
    #technologies .info-text {width:90%;}
    #technologies .separator {width:90%;margin:0 0 0 5%;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .blog-entry {width:90%;}
    /*services*/
    #services .blog-entry {width:90%;}
    /*BLOG-OVERVIEW*/
    #blog-overview .blog-entry {width:90%;}
}