#ElgatoPagina , #ElgatoPagina *, #ElgatoPagina *:before, #ElgatoPagina *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    #ElgatoPagina { width: 100%; background: linear-gradient(to right, #505DFC, #82B2F5); position: relative; z-index: 0;}

    #ElgatoPagina img { width: 100%; }

    #ElgatoPagina h1 { font-size: 30px; } 

    #ElgatoPagina h2 { font-size: 25px; line-height: 40px; }

    #ElgatoPagina p { font-size: 16px; line-height: 24px; }

    #ElgatoPagina figure { margin: 0px; padding: 0px; }

    #ElgatoPagina a { color: #424242; }

    #ElgatoPagina .SeoBasisBlok a { font-size: 16px; line-height: 30px; }



    /* Header */

    #ElgatoPagina .nlLogo { display: inline-block; }



     /* Menu - Desktop */

     #ElgatoPagina #PortalMenu .row { background: #f0e820; align-items: center; justify-content: center; }

     #ElgatoPagina #PortalMenu .row div { width: 12%; }
 
     #ElgatoPagina #PortalMenu .row div a { display: block; text-align: center; padding: 1em; color: black;}
 
     #ElgatoPagina .UitklapVlak { position: absolute; padding: 0 !important; background: #e3da00; padding: 1em; display: flex; flex-direction: column;  margin-left: -15px;}
 
     @media screen and (max-width: 500px) { /* Mobile */

        #ElgatoPagina #PortalMenu .row { flex-direction: column; }

        #ElgatoPagina #PortalMenu .row div { width: 100%; }

        #ElgatoPagina .UitklapVlak { position: inherit; width: 100% !important; }

   }



   @media screen and (min-width: 501px) and (max-width: 1032px) { /* Tablet */

        #ElgatoPagina #PortalMenu .row div { width: 25%; }

        #ElgatoPagina .UitklapVlak { width: 25% !important; }

   }


    /* Vlakverdeling */

    #ElgatoPagina .SeoBasisBlok { display: flex; margin: 0 auto; }

    #ElgatoPagina .SeoBasisBlok:nth-child(even) { background: white; }

    #ElgatoPagina .SeoTekstvlak { width:100%; padding: 60px; display: flex; flex-direction: column; }



    #ElgatoPagina .SeoEnkelvlak { width: 100%; display: inline-flex; flex-direction: row-reverse; }

    #ElgatoPagina .SeoEnkelvlak div { width: 80%; align-self: center; flex: auto; }

    #ElgatoPagina .SeoEnkelvlakImg { width: 100%; padding: 0; }

    #ElgatoPagina .SeoEnkelvlakImg div { width: 100%; }

    #ElgatoPagina .SeoDubbelvlak { width: 50%; margin: 0 auto; padding: 30px; text-align: center; }

    #ElgatoPagina .infocenterarea { text-align: center; }

    #ElgatoPagina .infocenterarea > div { flex-wrap: wrap; }

    #ElgatoPagina .infocenterarea figure { width: 100%; }

    #ElgatoPagina .InfoLeftRightArea { flex-wrap: wrap; }   

    #ElgatoPagina .Inleiding { text-align: center; }




    /* Content */

    #ElgatoPagina .SeoBasisBlok, #ElgatoPagina .SeoDubbelvlak{  background: linear-gradient(to bottom, #000, #004196); color: white;}

    #ElgatoPagina .btn { color: white; background: #1652fe; width: fit-content; padding: 10px 20px 5px; transition: .3s linear; }
    #ElgatoPagina .btn:hover { transform: translateY(-3px); }

    #ElgatoPagina .InfoLeftRightArea:nth-child(4) .SeoEnkelvlak { flex-direction: column; background: #031255; text-align: center; }

    #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak { background: #194ffe; padding: 60px 20px; text-align: left; height: 250px; place-content: center; }

    #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak { background: #031255; padding: 30px; flex-direction: row;}

    #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak { background: #194ffe; padding: 20px !important; width: 77% !important; height: 426px; justify-content: center; margin-bottom: -24px;}

    #ElgatoPagina .bloklink{color: white !important; padding: 0; border-bottom: 1px solid white; padding-bottom: 2px}

    #ElgatoPagina .bloklink:hover{text-decoration: none;}



    @media screen and (min-width: 768px) and (max-width: 1032px) { 
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak { height: 300px; }
    }


   

    @media (max-width: 1275px){
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak{
            height: 407px;
        }
    }

    @media (max-width: 1260px){
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 270px;
        }
    }

    @media (max-width: 1200px){
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak{
            height: 383px;
        }
    }
    @media (max-width: 1160px){
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 300px;
        }
    }
    @media (max-width: 1100px){
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak{
            height: 347px;
            margin-bottom: -20px;
        }
    }

     @media (max-width: 1000px){
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak{
            height: 313px;
        }
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 340px;
        }
    }

    @media (max-width: 900px){
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak{
            height: 278px;
                margin-bottom: -17px;
        }
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 380px;
        }
    }

    @media (max-width: 800px){
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak{
            height: 244px;
                margin-bottom: -15px;
        }
    }

    @media (max-width: 767px){

        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 420px;
        }

        #ElgatoPagina .SeoDubbelvlak {padding: 10px;}
    }

    @media screen and (max-width: 667px) { /* Mobile */
        #ElgatoPagina .productoverzichtimg{display: none;}

        #ElgatoPagina .SeoEnkelvlak { flex-direction: column; }

        #ElgatoPagina .SeoDubbelvlak { width: 100%; padding: 10px; }

        #ElgatoPagina .SeoEnkelvlak div { width: 100%; }

        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak { padding: 30px !important; height: 260px; }

        #ElgatoPagina .nlLogo a { padding: 20px 21px 8px; }

        #ElgatoPagina iframe { margin: 17px auto; width: 100%; height: 200px; }

        #ElgatoPagina h1 { font-size: 25px; }

        #ElgatoPagina h3 { font-size: 22px; }

        #ElgatoPagina p { font-size: 14px; line-height: 23px;}



        #ElgatoPagina .navportal { flex-direction: column; width: 100%; }

        #ElgatoPagina .navportal .UitklapVlak { position: inherit; width: 100%; }

        #ElgatoPagina .SeoTekstvlak { padding: 20px; }

        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak { flex-direction: column !important; padding: 0; }
        #ElgatoPagina .SeoBasisBlok:last-child .SeoEnkelvlak .SeoTekstvlak { width: 100% !important; height: auto; }
    }

    @media screen and (max-width: 450px) {
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 300px;
        }
    }

    @media screen and (max-width: 425px) {
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 360px;
        }
    }

    @media screen and (max-width: 375px) {
        #ElgatoPagina .SeoDubbelvlak .SeoTekstvlak{
            height: 405px;
        }
    }

    /* Stream Deck Menu Styles */
    #ElgatoPagina #streamdeckmenu {
        padding: 60px 20px;
       background: linear-gradient(to bottom, #004196, #000);
    }

    #ElgatoPagina .streamdeck-title {
        text-align: center;
        color: white;
        font-size: 32px;
        margin: 0 0 40px 0;
        font-weight: 600;
    }

    #ElgatoPagina .streamdeck-container {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        gap: 40px;
        align-items: center;
    }

    #ElgatoPagina .streamdeck-buttons {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #ElgatoPagina .streamdeck-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        padding: 20px;
        background: #1a1a1a;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    #ElgatoPagina .streamdeck-grid-logo {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        padding: 10px 0 15px;
    }

    #ElgatoPagina .streamdeck-grid-logo img {
        max-width: 180px;
        height: auto;
    }

    #ElgatoPagina .streamdeck-btn {
        width: 140px;
        height: 140px;
        background: #2a2a2a;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        padding: 10px;
        transition: all 0.15s ease;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
    }

    #ElgatoPagina .streamdeck-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
        border-radius: 10px;
        pointer-events: none;
    }

    #ElgatoPagina .streamdeck-btn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;

        filter: opacity(0.8);
        transition: all 0.3s ease;
    }

    #ElgatoPagina .streamdeck-btn-label {
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 16px);
    font-size: 16px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    line-height: 1.2;
    /* max-height: 2.4em; */
    overflow: hidden;
    text-align: center;
    word-wrap: break-word;
    z-index: 2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    height: auto;
    }

    #ElgatoPagina .streamdeck-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        background: #3a3a3a;
    }

    #ElgatoPagina .streamdeck-btn:hover img {
        filter: opacity(1);
        transition: all 0.3s ease;
    }

    #ElgatoPagina .streamdeck-btn:active,
    #ElgatoPagina .streamdeck-btn.active {
        transform: translateY(2px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.3);
        background: #222;
    }

    #ElgatoPagina .streamdeck-btn.active {
        box-shadow: 0 0 0 2px #505DFC, 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    #ElgatoPagina .streamdeck-description {
        flex: 1 1 auto;
        min-width: 0;
        color: white;
        padding: 20px;
    }

    #ElgatoPagina .streamdeck-description h3 {
        font-size: 26px;
        margin: 0 0 20px 0;
        line-height: 1.3;
    }

    #ElgatoPagina .streamdeck-description p {
        font-size: 16px;
        line-height: 1.7;
        color: #ffffff;
        margin: 0 0 25px 0;
    }

    #ElgatoPagina .streamdeck-description .btn {
        display: inline-block;
        color: white;
        background: #1652fe;
        width: fit-content;
        padding: 10px 20px 5px;
        text-decoration: none;
        transition: 0.3s linear;
    }

    #ElgatoPagina .streamdeck-description .btn:hover {
        transform: translateY(-3px);
    }

    #ElgatoPagina .streamdeck-try-hint p {
        margin: 0px 0 0px 0;
    }

    #ElgatoPagina .streamdeck-try-hint {
        
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        color: #82B2F5;
        font-size: 14px;
        font-style: italic;
    }

    #ElgatoPagina .streamdeck-try-hint img {
        width: 30px !important;
        height: 30px !important;
        /* height: auto; */
        color: #fff;
        /* filter: invert(68%) sepia(52%) saturate(497%) hue-rotate(182deg) brightness(101%) contrast(92%); */
    }

    #ElgatoPagina .streamdeck-try-hint .arrow-left {
        animation: arrowLeft 2s ease-in-out infinite;
    }

    #ElgatoPagina .streamdeck-try-hint .arrow-down {
        animation: arrowDown 2s ease-in-out infinite;
    }

    @keyframes arrowLeft {
        0%, 50% {
            transform: translateX(0);
        }
        75% {
            transform: translateX(-5px);
        }
        100% {
            transform: translateX(0);
        }
    }

    @keyframes arrowDown {
        0%, 50% {
            transform: translateY(0);
        }
        75% {
            transform: translateY(5px);
        }
        100% {
            transform: translateY(0);
        }
    }

    #ElgatoPagina .streamdeck-try-hint .arrow-down {
        display: none;
    }

    #ElgatoPagina .streamdeck-try-hint .arrow-left {
        display: block;
    }

    #ElgatoPagina .streamdeck-content-wrapper {
        width: 100%;
        max-width: 1200px;
        margin: 50px auto 0;
    }

    #ElgatoPagina .streamdeck-content {
        background: #2a2a2a;
        border-radius: 12px;
        min-height: 450px;
        position: relative;
        overflow: hidden;
    }

    #ElgatoPagina .streamdeck-panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40px;
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 40px;
        justify-content: space-around;
    }

    #ElgatoPagina .streamdeck-panel.active {
        opacity: 1;
        visibility: visible;
    }

    #ElgatoPagina .streamdeck-panel-text {
    flex: 0 0 45%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    justify-content: center;
}

    #ElgatoPagina .streamdeck-panel img {
        width: 100%;
        max-width: 400px;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
        flex-shrink: 0;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #ElgatoPagina .streamdeck-panel.active img {
        opacity: 1;
        transform: translateY(0);
    }

    #ElgatoPagina .streamdeck-panel h3 {
        color: white;
        font-size: 24px;
        margin: 0 0 15px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    }

    #ElgatoPagina .streamdeck-panel.active h3 {
        opacity: 1;
        transform: translateY(0);
    }

    #ElgatoPagina .streamdeck-panel p {
        color: white;
        font-size: 16px;
        line-height: 1.6;
        margin: 0 0 25px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
    }

    #ElgatoPagina .streamdeck-panel.active p {
        opacity: 1;
        transform: translateY(0);
    }

    #ElgatoPagina .streamdeck-panel .btn {
        display: inline-block;
        color: white;
        background: #1652fe;
        width: fit-content;
        padding: 10px 20px 5px;
        text-decoration: none;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s, background 0.3s linear, color 0.3s linear;
    }

    #ElgatoPagina .streamdeck-panel.active .btn {
        opacity: 1;
        transform: translateY(0);
    }

#ElgatoPagina .streamdeck-panel .btn:hover {
    transform: translateY(-3px);
}

@media screen and (max-width: 900px) {
    #ElgatoPagina .streamdeck-container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0px;
    }

    #ElgatoPagina .streamdeck-buttons,
    #ElgatoPagina .streamdeck-description {
        flex: none;
        width: 100%;
    }

    #ElgatoPagina .streamdeck-description {
        text-align: center;
    }

    #ElgatoPagina .streamdeck-try-hint {
        justify-content: center;
        flex-direction: column-reverse;
    }

    #ElgatoPagina .streamdeck-try-hint .arrow-left {
        display: none;
    }

    #ElgatoPagina .streamdeck-try-hint .arrow-down {
        display: block;
    }

    #ElgatoPagina .streamdeck-btn {
        width: 120px;
        height: 120px;
    }

    #ElgatoPagina .streamdeck-btn-label {
        font-size: 14px;
    }
}
    #ElgatoPagina .mobile {
        display: none;
    }
@media screen and (max-width: 900px) {
    #ElgatoPagina .streamdeck-panel img {
        max-width: 220px !important;
    }
    #ElgatoPagina .desktop {display: none;}
    #ElgatoPagina .mobile {display: block;}
    #ElgatoPagina .streamdeck-content-wrapper {
        width: 100%;
        max-width: none;
        display: flex;
        justify-content: center;
    }

    #ElgatoPagina .streamdeck-content {
        min-height: auto;
        overflow: visible;
        width: 100%;
    }

    #ElgatoPagina .streamdeck-grid {
        width: 100%;
    }

    #ElgatoPagina .streamdeck-btn {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    #ElgatoPagina .streamdeck-panel {
        position: static;
        display: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 20px;
        opacity: 1;
        visibility: visible;
    }

    #ElgatoPagina .streamdeck-panel.active {
        display: flex;
    }

    #ElgatoPagina .streamdeck-panel.active img,
    #ElgatoPagina .streamdeck-panel.active h3,
    #ElgatoPagina .streamdeck-panel.active p,
    #ElgatoPagina .streamdeck-panel.active .btn {
        opacity: 1;
        transform: translateY(0);
    }

    #ElgatoPagina .streamdeck-panel > div:first-child {
        padding-top: 0;
    }

    #ElgatoPagina .streamdeck-panel-text {
        align-items: center;
    }
}

@media screen and (max-width: 500px) {
    #ElgatoPagina .streamdeck-grid {
        gap: 12px;
        padding: 15px;
    }

    #ElgatoPagina .streamdeck-btn-label {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    #ElgatoPagina .streamdeck-grid {
        gap: 8px;
        padding: 12px;
    }
}
