@charset "UTF-8";
/*
Theme Name: Edukacja3D
Theme URI: 
Author: Merlo Marketing Studio
Author URI: https://merlo.studio/
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edukacja3D
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {margin: 0; padding: 0;}
html {overflow-y: scroll;}


/* Reset styles */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, /* sup, */ tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0;}
body {line-height: 1; color: #000;}
strong {font-weight:700}



/* General styles */
body {width:100%; height:100vh; margin:0; padding:0; background-color: #fff;}
body, p {color:#000; font-family:'Montserrat', arial, tahoma, verdana; font-weight: 300; font-size:16px; line-height:140%;}
p {margin: 15px 0;}
h1, h2, h3, h4, h5, h6 {font-family:'Raleway', arial, tahoma, verdana;}
input, select, textarea, button {font-family:'Montserrat', arial, tahoma, verdana;}
img {border:0px;}
ul, ol {list-style-position: inside;}


*::before, *::after {box-sizing: border-box;}
:focus-visible, input:focus, select:focus, button:focus, input::placeholder:focus {outline: 0px dashed black; outline-offset: 2px; background-color: var(--blue)!important; color: #fff!important;}
a {text-decoration:none; color:var(--blue); font-size:16px; font-weight:700;}
a, a span, a strong, li, a img, button, .button {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
a:hover {color:var(--dark); text-decoration: none;}
h1 {margin: 0px; padding: 0px;}
h2 {font-size: 50px; font-weight: 700; line-height: 110%;}
h3 {font-size: 50px; font-weight: 700; line-height: 110%;}
h4 {font-size: 38px; font-weight: 700; line-height: 110%;}




/* General classes */
.skip-link {display: none;}
.center {margin: 0 auto; max-width: 1280px; width: 100%; display: block; box-sizing: border-box; padding-left: 20px; padding-right: 20px;}
.mw {max-width: 1600px; margin: 0 auto;}
.flex {display: flex;}
.flexCenter {justify-content: center;}
.column {flex-direction: column;}
.onlyMobile {display: none!important;}
.gap40 {gap: 40px;}


/* Halfpage styles */
.halfpage {width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;}
.halfpage a {display: flex; align-self: flex-start; align-items: center; gap:10px; margin-top: 30px; color: #000;}
.halfpage a:hover {color: var(--blue);}
.halfpage ul {/*list-style: none;*/ padding: 0px; margin: 20px 0 0 0;}
.halfpage ul li {/*display: flex; gap: 15px;*/ align-items: center;}
.halfpage h4 {color: var(--blue);}




/* Color variables */
.white              {color: var(--white);}
.blue               {color: var(--blue);}
.darkblue           {color: var(--darkblue);}
.gray               {color: var(--gray);}
.lightgray          {color: var(--lightgray);}
.dark               {color: var(--dark);}


/* Colors */
:root {
    --white:        #ffffff;
    --blue:         #0094C9;
    --darkblue:     #06385E;
    --gray:         #5C5C5C;
    --lightgray:    #B3B3B3;
    --dark:         #151515;
}




/* Main styles */
#topbar {display: block;}
    #topbar a {display: block; color: #fff; font-size: 12px; font-weight: 500; text-align: center; width: 100%; padding: 5px 0; box-sizing: border-box; background-color: var(--dark);}
        #topbar a:hover {background-color: var(--blue);}




#logo {width: 100%; display: flex; justify-content: center; margin: 20px 0;}
    #logo a {display: flex;}
    #logo #toggle {display: none;}





header {display: block; width: 100%; background-color: var(--darkblue);}
.headerCorinth {background: transparent url(images/headerCorinth.jpg) no-repeat center center; background-size: cover;}
.headerZspace {background: transparent url(images/headerZspace.jpg) no-repeat center center; background-size: cover;}
.headerSciobot {background: transparent url(images/headerSciobot.jpg) no-repeat center center; background-size: cover;}
.headerGogle {background: transparent url(images/headerGogle.jpg) no-repeat center center; background-size: cover;}

.tekstowa {background: #0C5A9A; background: linear-gradient(0deg, rgba(12, 90, 154, 1) 0%, rgba(2, 148, 201, 1) 100%);}
.tekstowa .video-container {min-height: 350px;}


    header nav {display: flex; justify-content: center; width: 100%; position: absolute; top: 0px; z-index: 9000;}
        header nav ul {display: flex; list-style: none; padding: 0px; margin: 0px;}
            header nav ul li {background-color: #fff;}
                header nav ul li a {display: block; color: var(--gray); font-size: 16px; font-weight: 600; line-height: 34px; padding: 8px 18px; position: relative; overflow: hidden; transition: color 0.3s ease;}
                header nav ul li a::after {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: #0094C9; transition: width 0.3s ease-out;}
                header nav ul li a:hover {color: var(--blue);}
                header nav ul li.current-menu-item a, header nav ul li.current_page_parent a {color: var(--blue);}
                header nav ul li.current-menu-item a::after, header nav ul li.current_page_parent a::after {width: 100%;}
                header nav ul li a:hover::after {width: 100%;}

        header nav::before {content: ''; display: block; width: 82px; height: 50px; background-image: url('images/navLeft.svg'); background-size: cover; background-repeat: no-repeat;}
        header nav::after {content: ''; display: block; width: 82px; height: 50px; background-image: url('images/navRight.svg'); background-size: cover; background-repeat: no-repeat;}



    #headerText {display: flex; flex-direction: column; align-items: center; position: absolute; top: 50%; transform: translateY(-46%); left: 0; right: 0; z-index: 9001;}
        #headerText h2 {display: block; text-align: center; color: #fff; font-size: 60px; line-height: 110%; font-weight: 900; width: 70%; margin-bottom: 20px;}
        #headerText h3 {display: block; text-align: center; color: #fff; font-size: 40px; line-height: 110%; font-weight: 900; width: 70%; margin-bottom: 0px;}
            #headerText h2 .underline {padding-bottom: 6px; background: transparent url(images/underline.svg) no-repeat bottom center; background-size: contain;}
        #headerText p {display: block; text-align: center; color: #fff; font-size: 26px; line-height: 140%; font-weight: 300; width: 70%; margin: 5px 0;}
        #headerText.subpage h2 {margin-bottom: 40px;}
        #headerText.subpage p {font-size: 20px;}
        .headerLogo {margin: 0 0 30px 0;}
        .headerBackBtn {color: #fff; font-size: 14px; font-weight: 700; display: flex; justify-content: center; align-items: center; margin-bottom: 10px;}
        .headerBackBtn:hover {color: var(--white);}
        .headerBackBtn img {margin-right: 10px;}



    #goDown {display: inline-block; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); z-index: 9002; cursor: pointer;}
        #goDown img {display: block;}
        #goDown .buttonTxtPosition {position: absolute; bottom: 0px; left: 50%; width: 100%; font-size: 18px; font-weight: 700; color: #000; transform: translateX(-50%); text-align: center;}
        #goDown:hover .buttonTxtPosition {color: var(--blue);}



    .homepage-hero-module {border-right: none; border-left: none; position: relative;}
        .no-video .video-container video, .touch .video-container video {/*display: none;*/}
        .no-video .video-container .poster, .touch .video-container .poster {display: block !important;}
        .video-container {min-height: 650px; position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; display: flex; align-items: center;}
        .video-container .poster img {width: 100%; bottom: 0; position: absolute;}
        .video-container .filter {z-index: 100; position: absolute; background: rgba(0, 0, 0, 0.4); width: 100%;}
        .video-container video {position: absolute; z-index: 0; /*bottom: 0;*/}
        .video-container video {background-position: center; -o-object-fit: cover; opacity: 1; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; -webkit-filter: blur(0); filter: blur(0); height: 100%; transition: -webkit-filter .35s ease-in-out; transition: filter .35s ease-in-out; transition: filter .35s ease-in-out,-webkit-filter .35s ease-in-out; width: 100%;}
        .video-container video.fillWidth {width: 100%; opacity: 0.5;}






#logotypes {display: flex; width: 100%; margin: 50px auto; max-width: 1600px;}
    .logos-wrapper {
  position: relative;
  width: 100%;
}

.logos-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
    #logotypes a {display: block; padding: 0 15px}
        #logotypes a:hover img {opacity: 0.7;}





/* Tylko dla ekranów 1024px i mniejszych: przewijanie */
@media (max-width: 1024px) {
  .logos-track {
    flex-wrap: nowrap;
    width: max-content;
    animation: scrollLeft 30s linear infinite;
  }
    
    .onlyMobile {display: block!important;}

  .logos-wrapper {
    overflow: hidden;
  }

  @keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}









#products {display: block; width: 100%; padding-bottom: 120px;}
    #products h3 {display: block; width: 70%; margin-top: 100px;}
    #products p {display: block; width: 70%; margin-bottom: 100px;}

    .productBox {display: block; width: 100%; border-radius: 14px; max-height: 450px; box-sizing: border-box; padding: 40px; position: relative; background-size: cover!important; margin: 20px 0;}

        .boxLogo, .boxTitle, .boxDesc {margin-left: 0px; transition: margin-left 0.4s ease;}
        .productBox:hover .boxLogo, .productBox:hover .boxTitle, .productBox:hover .boxDesc {margin-left: 20px;}
        .productBox:hover .boxLogo {transition-delay: 0s;}
        .productBox:hover .boxTitle {transition-delay: 0.1s;}
        .productBox:hover .boxDesc {transition-delay: 0.2s;}


        .boxLogo {display: block; margin-bottom: 100px;}
        .boxTitle {display: block; font-family: 'Raleway', arial, tahoma, verdana; font-size: 36px; line-height: 110%; color: #fff;}
        .boxDesc {display: block; font-family: 'Montserrat', arial, tahoma, verdana; font-size: 20px; line-height: 140%; color: #fff; font-weight: 300; width: 70%;}
        .boxCta {display: flex; align-items: flex-end; position: absolute; bottom: 0px; right: -1px;}
            .boxCtaStart {display: block;}
                .boxCtaStart img {display: block; position: relative; right: -1px;}
            .boxCtaMiddle {display: flex; height: 70px; background-color: #fff; color: #000; font-size: 20px; font-weight: 600; align-items: center; gap: 10px; white-space: nowrap;}
                .boxCtaMiddle img {display: block;}
            .boxCtaEnd {display: block;}
                .boxCtaEnd img {display: block; position: relative; left: -1px;}

    #boxCorinth {background: #4A3169 url(images/box_bg_corinth.jpg) no-repeat center center;}
    #boxZspace {background: #107AD1 url(images/box_bg_zspace.jpg) no-repeat center center;}
    #boxSciobot {background: #0075FF url(images/box_bg_sciobot.jpg) no-repeat center center;}
    #boxVrexpert {background: #543929 url(images/box_bg_vrexpert.jpg) no-repeat center center;}








#blog {display: block; background-color: #151515; width: 100%; padding: 100px 0 150px 0; position: relative;}
    #blog h3 {display: block; width: 70%;}
    #blog p {display: block; width: 70%; margin-bottom: 0px;}
    #blog .allButton {display: flex; align-items: flex-end; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);}



    /* --------------------------- BLOG ----------------------------  */
    #blogHolder {width: 100%; display: flex; justify-content: space-between; margin-top: 100px;}
        #blogContent {padding-right: 40px; box-sizing: border-box; width: 70%; flex-direction: column;}
            #blogContent p {color: #000;}

            /*#blogContent .entry .entry-header {margin: 20px 0 0 0;}*/
            #blogContent .entry .post-thumbnail {margin: 0;}
            #blogContent .entry .entry-title:before {display: none;}
            #blogContent .entry-header h3 {color: var(--blue); font-size: 30px; line-height: 110%; font-weight: 700; margin-top: 30px;}
            #blogContent .entry .entry-title a {color: var(--blue); font-size: 26px; line-height: 26px; font-weight: 700;}
                #blogContent .entry .entry-title a:hover {color: #000;}
            #blogContent .entry .entry-content, #blogContent .entry .entry-summary {max-width: 100%; margin: 0px; padding: 10px 0 0 0;}
                #blogContent .entry .entry-content p, #blogContent .entry .entry-summary p {width: 100%;}
            #blogContent .entry .entry-footer, #blogContent .entry .entry-content span, #blogContent .entry .entry-content span a {opacity: 0.7; text-decoration: none;}
            #blogContent .entry .entry-footer a, #blogContent .entry .entry-meta a, #blogContent .entry .entry-content span, #blogContent .entry .entry-content span a {font-size: 11px;}
            #blogContent .entry .entry-content span {margin-right: 1rem; display: inline-block;}
            #blogContent .entry .entry-footer {display: flex; gap: 10px;}
            #blogContent .entry .entry-footer span {display: flex; gap: 3px; align-items: center;}


            /* ARTICLE CONTENT */
            #blogContent .entry .entry-content h3 {color: #000; font-size: 2.4em; margin: 40px 0 30px 0;}
            #blogContent .entry .entry-content h4 {font-size: 2.1em; margin: 60px 0 30px 0;}
            #blogContent .entry .entry-content h5 {color: #000; font-size: 1.8em; margin: 60px 0 30px 0;}
            #blogContent .entry .entry-content h6 {color: #000; font-size: 1.2em; margin: 40px 0 20px 0;}
            #blogContent .entry .entry-content p {color: #000; font-size: 1em; margin: 15px 0;}
            #blogContent .entry .entry-content p a, #blogContent .entry .entry-content li a {color: var(--blue); font-size: 1em; text-decoration: none;}
            #blogContent .entry .entry-content ul, #blogContent .entry .entry-content ol {margin: 20px 0; padding-left: 20px;}
            #blogContent .entry .entry-content ul li, #blogContent .entry .entry-content ol li {color: #000; font-size: 1em;}
            #blogContent img {width: 100%; height: auto; display: block; border-radius: 14px;}

            #blogContent article {margin-bottom: 80px;}
            article header {background: none;}
            article footer {border: none; padding: 0px; margin: 10px 0 0 0;}


        #blogCategories {margin: 0px 40px 0 0; width: 20%;}
            #blogCategories h4 {color: var(--darkblue);}
            .categoryList {width: 100%; display: flex; flex-direction: column; margin-top: 20px;}
                .categoryList a {width: 100%; color: var(--blue); font-size: 14px; padding: 3px 0;}



        .image-filters-enabled .entry .post-thumbnail:after {background: none;}
        .image-filters-enabled .entry .post-thumbnail .post-thumbnail-inner {filter:none;}
        .has-background-dim {display: none!important;}


        .navigation.post-navigation {text-align: center;}
        .meta-nav {font-size: 12px; color: var(--darkblue);}










#formularzHP {display: block; width: 100%; margin: 100px 0; background: #fff url(images/formBg.jpg) no-repeat right center; background-size: contain;}
    #formularzHP h3 {width: 60%;}
    #formularzHP p {margin-top: 5px; width: 60%;}

        /* Home / Formularz */
        #formularzHP .wpcf7-form {display: flex; flex-direction: column; margin-top: 50px; width: 50%;}
        #formularzHP .wpcf7-form p {display: block; margin: 0px; width: 100%;}
        #formularzHP .wpcf7-form label {display: block; font-size: 16px; color: var(--dark); font-weight: 600;}
        #formularzHP .wpcf7-form input {display: block; background-color: var(--white); border-radius: 8px; border: 1px solid #bcbcbc; opacity: 0.8; margin: 10px 0 20px 0; padding: 15px 25px; font-size: 16px;}
        #formularzHP .wpcf7-form select {display: block; background-color: var(--white); border-radius: 8px; border: 1px solid #bcbcbc; opacity: 0.8; margin: 10px 0 20px 0; padding: 15px 25px; font-size: 16px;}
        #formularzHP .wpcf7-form textarea {display: block; background-color: var(--white); border-radius: 8px; border: 1px solid #bcbcbc; opacity: 0.8; margin: 10px 0 20px 0; padding: 15px 25px; height: 100px; font-size: 16px;}
        #formularzHP .wpcf7-form input:placeholder-shown, #formularzHP .wpcf7-form textarea:placeholder-shown {font-size: 16px;}
        #formularzHP .wpcf7-form .smallLabel {font-size: 11px; font-weight: 400;}
        #formularzHP .wpcf7-form input, #formularzHP .wpcf7-form select, #formularzHP .wpcf7-form textarea {width: 90%;}
            .wpcf7-not-valid-tip {font-size: 11px; font-weight: 300; position: relative; top: -15px;}
            .wpcf7-spinner {display: none;}
            .wpcf7 form .wpcf7-response-output {margin: 0px; padding: 7px 20px; border: 1px solid #ff0000; font-size: 12px; line-height: 130%; border-radius: 8px;}
            .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {border-color: #ff0000;}

        #formularzHP .wpcf7-form .wpcf7-submit {display: inline-block; padding: 13px 30px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px; width: auto;}
        #formularzHP .wpcf7-form .wpcf7-submit {background-color: var(--blue); color: var(--white); border: 1px solid var(--blue);}
        #formularzHP .wpcf7-form .wpcf7-submit:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}

            .checkagree {text-align: left; margin-bottom: 20px;}
                .checkagree p {display: flex!important; align-items: center; gap: 10px; font-size: 12px; line-height: 16px;}
                .checkagree span.wpcf7-list-item {margin: 0px;}
                .checkagree .wpcf7-form-control-wrap {display: inline-block;}
                .checkagree .wpcf7-not-valid-tip {display: none;}
                .checkagree .agree {margin-right: 10px;}
                .checkagree input {width: 20px!important; height: 20px!important; display: block!important; position: static!important; left: auto!important; margin: 0px!important;}
                    .checkagree .wpcf7-not-valid {border: 1px solid #ff0000; padding: 2px; display: block;}
                .checkagree {font-size: 12px; line-height: 16px; font-weight: 500;}
                    .checkagree a {font-size: 12px; line-height: 16px; font-weight: 500;}
                .agreeTxt {font-size: 12px;}









#newsletter {display: block; width: 100%; margin: 100px 0;}
    #newsletterForm {display: block; width: 100%; padding: 40px; background: var(--blue) url(images/newsletterBg.jpg) no-repeat center center; border-radius: 14px; position: relative; box-sizing: border-box; text-align: center;}
        #newsletterForm p {margin-top: 5px;}

        .mailpoet_paragraph  {position: relative; width: 600px; margin: 20px 0 0 0; display: flex; align-items: center; border: 1px solid #4B4B4B; border-radius: 8px; background-color: #fff; padding: 10px 20px; box-sizing: border-box;}
            /*.mailpoet_paragraph .iconMail {width: 40px; min-width: 40px; height: 40px; background: transparent url(images/iconMail.svg) no-repeat center center; background-size: 20px 20px; display: block; margin-left: 10px;}*/
            #mailpoet_form_1 {text-align: center!important;}
            #newsletterForm #form_email_1 {flex-grow: 1; color: var(--dark); padding: 18px; padding-left: 0; border: none; outline: none; background-color: transparent; font-size: 16px;}
            #newsletterForm #form_email_1:focus {background-color: transparent!important; color: var(--dark)!important;}

        #newsletterCheckbox {display: flex; margin-top: 15px; color: #fff; font-size: 11px;}
            #newsletterCheckbox a {display: inline-block; color: #fff; font-size: 11px; margin-left: 3px;}
            #newsletterCheckbox input {margin-right: 10px; width: 20px; height: 20px;}

        #newsletterForm button {background-color: transparent; border: none; cursor: pointer;}
        #newsletterForm button .boxCtaMiddle img {transition: transform 0.5s ease-in-out;}
        #newsletterForm button:hover .boxCtaMiddle img {transform: rotate(360deg);}

        #mailpoet_form_1 .mailpoet_paragraph {margin-bottom: 5px!important; display: inline-block;}
        #mailpoet_form_1 .mailpoet_paragraph.last {background: none; border: 0px; padding: 0px; margin: 0px;}
        #mailpoet_form_1 .mailpoet_paragraph.last input {background: #000; color: #fff; border: 0px; padding: 13px 30px!important; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px;}











/* Styles for subpages ================================ */
    #intro {display: block; width: 100%; margin: 100px 0;}




    #galeriaHP {display: block; width: 100%; margin: 100px 0;}
        #galeriaHP h4 {display: block; width: 100%; margin-bottom: 20px; text-align: center;}
        #galeriaHP iframe {display: block; width: 100%; margin-bottom: 20px; text-align: center;}




    #dlaczegoMy {display: block; width: 100%; padding: 80px 0;}
    #dlaczegoMy {background: #0C5A9A; background: linear-gradient(0deg, rgba(12, 90, 154, 1) 0%, rgba(2, 148, 201, 1) 100%);}
        #dlaczegoMy h4 {text-align: center; margin-bottom: 50px;}

        .dlaczegoHolder {display: flex; flex-direction: row; gap: 50px;}
            .dlaczegoBox {display: flex; flex: 1; flex-direction: column; box-sizing: border-box; align-items: flex-start;}
                .dlaczegoBox h5 {display: block; color: #fff; margin-top: 20px; font-weight: 700; font-size: 26px; line-height: 120%;}
                .dlaczegoBox p {display: block; color: #fff; margin: 10px 0;}
                .dlaczegoBox p strong {font-weight: 500;}




    .szkoleniaSwitch {display: block; width: 100%; padding: 100px 0; background-color: #F0F0F0;}
    .szkoleniaSwitch .flex {align-items: center; justify-content: space-between;}
        .szkoleniaButtons {display: flex; width: 50%; flex-direction: column;}
            .szkoleniaButtons > h4 {margin-bottom: 30px; color: var(--blue);}
            .szkoleniaButtons > a {color: #000; font-size: 16px; font-weight: 400; border: 1px solid #F0F0F0; padding: 20px 30px; border-radius: 14px; background-color: #F0F0F0; box-sizing: border-box; margin: 2px 0;}
            .szkoleniaButtons > a:hover {background-color: #fff;}
            .szkoleniaButtons > a:hover h4 {color: #000;}
            .szkolenieActive {background-color: #fff!important;}
                .szkoleniaTitle {color: #5C5C5C; font-size: 16px; font-weight: 700; display: block; margin-bottom: 5px;}
                .szkolenieActive .szkoleniaTitle {color: var(--red);}

        .szkoleniaInfo {width: 45%; position: relative;}
            .szkoleniaOpis {position: absolute; left: 0; bottom: -30px; background-color: var(--blue); border-radius: 4px; padding: 30px; width: 60%;}
                .szkoleniaOpis h3, .szkoleniaOpis p, .szkoleniaOpis a {color: #fff;}
                .szkoleniaOpis p {font-weight: 300; margin-bottom: 20px;}
                .szkoleniaOpis h3 {line-height: 110%;}

                .szkolenieContent {display: none; height: auto; display: none; opacity: 0; transition: opacity 0.4s ease;}
                .szkolenieContent.visibleOn {opacity: 1; display: block;}
                .szkolenieContent img {display: block; border-radius: 14px; width: 90%; float: right;}




    #nieczekaj {display: block; width: 100%; padding: 0 0 100px 0; background-color: #F0F0F0;}
        #nieczekaj div {display: flex; flex-direction: column; justify-content: center; align-items: center;}
        #nieczekaj h6 {text-align: center; font-size: 20px; font-weight: 700;}

        #nieczekaj a {display: inline-block; padding: 13px 30px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px; width: auto; margin-top: 20px;}
        #nieczekaj a {background-color: var(--blue); color: var(--white); border: 1px solid var(--blue);}
        #nieczekaj a:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}



    #blogall {display: block; width: 100%; padding: 50px 0 0 0; background-color: #fff;}
        #blogall div {display: flex; flex-direction: column; justify-content: center; align-items: center;}
        #blogall h6 {text-align: center; font-size: 20px; font-weight: 700;}

        #blogall a {display: inline-block; padding: 13px 30px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px; width: auto; margin-top: 20px;}
        #blogall a {background-color: var(--blue); color: var(--white); border: 1px solid var(--blue);}
        #blogall a:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}




    #produkty1, #produkty2 {display: block; width: 100%; margin: 100px 0;}
    #produkty1 h3, #produkty2 h3 {margin-bottom: 50px; text-align: center;}
    #produktyMore {display: block; width: 100%; padding: 0 0 100px 0; background-color: #fff;}
        #produktyMore div {display: flex; flex-direction: column; justify-content: center; align-items: center;}
        #produktyMore h6 {text-align: center; font-size: 20px; font-weight: 700;}

        #produktyMore a {display: inline-block; padding: 13px 30px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 16px; width: auto; margin-top: 20px;}
        #produktyMore a {background-color: var(--blue); color: var(--white); border: 1px solid var(--blue);}
        #produktyMore a:hover {background-color: var(--darkblue); color: var(--white); border: 1px solid var(--darkblue);}








/* Slider wrapper */
    .slider-track::-webkit-scrollbar {display: none; /* Chrome/Safari */}
    .slider-wrapper {position: relative; margin: 0px; width: 100%;}
    .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: calc((100% - 60px) / 4);}
    .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: calc((100% - 40px) / 3);}
    .slider-wrapper[data-items="1"] .slider-track {grid-auto-columns: 100%; gap: 0;}

        /* Slider content styles  */
        .slider-track {display: grid; grid-auto-flow: column; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 10px; scrollbar-width: none; border-radius: 8px;}
            .slider-track a {scroll-snap-align: start; display: flex; flex-direction: column; background: transparent; overflow: hidden; text-decoration: none; color: var(--white); position: relative;}
            .slider-track .rekomendacjaBox {scroll-snap-align: start; display: flex; flex-direction: column; background: transparent; overflow: hidden; text-decoration: none; color: var(--white); position: relative;}
            .slider-track a:hover {opacity: 0.8;}
                .slider-track a > img {display: block; width: 100%; height: auto; max-height: 225px; overflow: hidden; margin-bottom: 20px; box-sizing: border-box; border-radius: 14px;}
                .slider-track a .blogDate {display: flex; align-items: center; width: 100%; font-size: 12px; font-weight: 300;}
                .slider-track a .blogDate img {display: block; margin-right: 10px;}
                .slider-track a .blogTitle {display: block; width: 100%; font-size: 30px; line-height: 110%; font-weight: 600; font-family: 'Raleway', arial, tahoma, verdana; margin: 10px 0;}
                .slider-track a .blogDesc {display: block; width: 100%; font-size: 16px; line-height: 160%; font-weight: 300;}
                .slider-track a .blogButton {display: flex; width: 100%; font-size: 16px; font-weight: 500; margin-top: 30px;}
                .slider-track a .blogButton img {display: block; margin-left: 10px; transition: margin-left 0.4s ease;}
                .slider-track a:hover .blogButton img {margin-left: 30px;}

                .slider-track .blogQuote {display: block; width: 100%; font-size: 16px; line-height: 160%; font-weight: 300; font-style: italic; color: var(--white); opacity: 0.7;}
                .slider-track .blogAuthor {display: block; width: 100%; font-size: 16px; line-height: 160%; font-weight: 500; margin-top: 30px; color: var(--white);}

        /* Slider arrows styles  */
        .slider-controls {display: flex; justify-content: flex-end; gap: 0px; margin-bottom: 20px;}
            .arrow {padding: 0px; width: 60px; height: 60px; cursor: pointer; background-color: var(--blue); border: none; display: flex; align-items: center; justify-content: center;}
            .arrow.left {-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
            .arrow.right {-webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
            .arrow:hover {background-color: #fff;}
            .arrow:focus {background-color: #fff!important;}
            .arrow:hover svg path {stroke: var(--blue);}
            .arrow:focus svg path {stroke: var(--blue);}

        /* Slider counter styles  */
        .slider-counter {position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 4px 10px; font-size: 14px; border-radius: 6px; z-index: 9005; pointer-events: none;}


        /* Slider galllery custom styles */
        .gallery .slider-wrapper .slider-track {border-radius: 8px; padding: 0px;}
        .gallery .slider-wrapper .slider-track > img {display: block; width: 100%;}
        .gallery .slider-controls {position: absolute; margin-bottom: 0px; top: 50%; width: 100%;}
        .gallery .slider-controls .arrow {width: 100px; border-radius: 8px; position: absolute; z-index: 9005; top: 50%; transform: translateY(-50%);}
        .gallery .slider-controls .arrow.left {left: -30px; justify-content: left; padding-left: 30px;}
        .gallery .slider-controls .arrow.right {right: -30px; justify-content: right; padding-right: 30px;}
        .gallery .slider-counter {width: 100px; padding: 0px; height: 100px; bottom: -1px; top: auto; left: -1px; background: transparent url(images/counterBg.svg) no-repeat bottom left;}
        .gallery .slider-counter {display: flex; align-items: flex-end; color: var(--blue); font-size: 14px; line-height: 110%; font-family: 'Montserrat', arial; font-weight: 400;}



    @media (max-width: 1280px) {
        .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: calc((100% - 60px) / 3);}
        .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: calc((100% - 20px) / 2);}
    }
    @media (max-width: 960px) {
        .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: calc((100% - 20px) / 2);}
        .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: calc((100% - 20px) / 2);}
    }
    @media (max-width: 640px) {
        .slider-wrapper[data-items="4"] .slider-track {grid-auto-columns: 100%; gap: 0;}
        .slider-wrapper[data-items="3"] .slider-track {grid-auto-columns: 100%; gap: 0;}
    }















footer {display: block; margin-top: 100px; padding: 30px 0 0 0; border-top: 1px solid var(--lightgray);}
#footerNav {display: block; padding: 50px 0;}
    .footerLeft {width: 60%;}
    .footerRight {width: 40%; display: flex; align-items: flex-end; flex-direction: column;}

        .footerDetails {display: flex; gap:60px; align-items: flex-end; margin-top: 24px;}
            .footerDetails p {font-size: 14px; line-height: 160%; font-weight: 300; color: var(--gray); margin: 0px;}
            .footerDetails a {font-size: 14px; line-height: 160%; font-weight: 300; color: var(--gray); display: flex;}
                .footerDetails a:hover {color: var(--blue);}
                .footerDetails a > img {margin-right: 10px;}


        /*#goTop {display: flex; font-size: 11px; font-weight: 600; color: var(--gray); align-items: center; cursor: pointer;}
        #goTop > img {margin-left: 10px; display: block;}*/

        #goTop {display: flex; align-items: center; color: var(--gray); font-size: 11px; font-weight: 600; align-items: center; position: relative; height: 40px; overflow: hidden; padding-right: 20px; cursor: pointer; gap: 6px; text-decoration: none; opacity: 0.7;}
            #goTop:hover {opacity: 1;}
            #goTop svg {fill: var(--gray);}
            #goTop svg {position: absolute; bottom: 0; right: 0; top: 12px; transition: transform 500ms ease-in-out; width: 16px; height: 17px;}
                #goTop:hover svg {animation: fly-in-out 500ms ease-in-out;}

                @keyframes fly-in-out {
                    0% { transform: translateY(0); }
                    25% { transform: translateY(-100%); visibility: hidden; /* Obrazek niewidoczny */}
                    75% { transform: translateY(100%); visibility: hidden; /* Obrazek niewidoczny */}
                    100% { transform: translateY(0); visibility: visible; /* Obrazek widoczny */}
                }



        .footerSocial {display: flex; margin-top: 20px; gap:10px;}
            .footerSocial a {display: flex; width: 40px; height: 40px; border: 1px solid #3C3C3B; justify-content: center; align-items: center; border-radius: 40px;}
                .footerSocial a:hover {background-color: #E2E2E2;}
                .footerSocial a > img {display: block;}


        #footerNavPrimary, #footerNavSecondary {display: block;}
            #footerNavPrimary ul, #footerNavSecondary ul {display: block; list-style: none; padding: 0px; margin: 0px;}
                #footerNavPrimary ul li, #footerNavSecondary ul li {display: inline-block;}
                    #footerNavPrimary ul li a {display: inline-block; color: var(--gray); font-size: 14px; font-weight: 600; margin-right: 20px;}
                    #footerNavSecondary ul li a {display: inline-block; color: var(--lightgray); font-size: 12px; font-weight: 500; margin-right: 20px;}
                        #footerNavPrimary ul li a:hover, #footerNavSecondary ul li a:hover {color: var(--blue);}


        .author {text-align: right; color: var(--lightgray); font-size: 12px; line-height: 140%; font-weight: 400;}












/* nav hamburger styles -------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------- */

.button_container {position: relative; height: 27px; width: 35px; cursor: pointer; /*z-index: 901;*/ -webkit-transition: opacity .25s ease; transition: opacity .25s ease; }
.button_container:hover {opacity: .7;}
.button_container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background: var(--blue);}
.button_container.active .middle { opacity: 0; background: var(--blue);}
.button_container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background: var(--blue);}
.button_container span {background: #000; border: none; height: 4px; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition: all .35s ease; transition: all .35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) {top: 11px; /* width: 60%; */}
.button_container span:nth-of-type(3) {top: 22px; /* width: 90%; */}

.overlay {z-index: 90000; position: fixed; background: #111; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; }
.overlay.open {opacity: .98; visibility: visible; height: 100%; /*max-height:900px;*/ z-index: 90000;}
.overlay .navFlex {display: flex; justify-content: center; align-items: center; height: 100%;}

.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
          animation-delay: .55s;
}

.overlay.open ul#menu-subnav-1 li, .overlay.open ul#menu-subnav_pl li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .65s;
          animation-delay: .65s;
}

.overlay nav {}
.overlay ul {margin-top: 20px; list-style: none; padding: 0; display: inline-block; position: relative; float: right; clear: both;}
.overlay ul li { display: block; position: relative; opacity: 0; }
.overlay ul li a { display: block; position: relative; color: #FFF; text-decoration: none; font-size: 40px; line-height: 60px; font-weight: 700; text-align: center; font-family: 'Raleway';}
.overlay ul li.current-menu-item a {color: var(--blue);}
.overlay ul li.current_page_parent a {color: var(--blue);}
.overlay ul li a:hover, .overlay ul#menu-subnav-1 li a:hover, .overlay ul li.current-menu-item a, .overlay ul li.current-page-ancestor a {}

@-webkit-keyframes fadeInRight {
  0% {opacity: 0; left: 20%;}
  100% {opacity: 1; left: 0;}
}

@keyframes fadeInRight {
  0% {opacity: 0; left: 20%;}
  100% {opacity: 1; left: 0;}
}














/* --------------------------- Anikacje pojawiania się na scenie ----------------------------  */
.has-scroll-reveal { opacity: 0; animation-play-state: paused; }

.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; animation-play-state: running;
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2.5rem, 0);
    transform: translate3d(0, 2.5rem, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}









/* Media queries */
@media all and (max-width: 1024px) {
    .center {padding-left: 40px; padding-right: 40px;}
    #headerText h2 {font-size: 50px;}
    #headerText h2 br {display: none;}
    #headerText p, #headerText.subpage p {font-size: 18px;}
    #site-navigation {display: none;}
    #logo .flexCenter {justify-content: space-between; align-items: center;}
    #logo .flexCenter h1 {display: block;}
    #logo #toggle {display: block; z-index: 90001;}
    #formularzHP {background: none;}
    #formularzHP > div {display: flex; flex-direction: column; align-items: center; width: 100%;}
    .wpcf7 {display: block; width: 70%;}
    #formularzHP .wpcf7-form {display: flex; flex-direction: column; align-items: center; width: 100%;}
    #formularzHP h3, #formularzHP p {width: 100%; text-align: center;}
    .formHolder {width: 80%;}
    #footer .flex, #footerNav .flex {flex-direction: column;}
    #footer .footerRight {flex-direction: column-reverse;}
    #footerNavSecondary ul li a:last-child {margin-right: 0px;}
    #goTop {margin-top: 30px;}
    .footerDetails {flex-direction: column; gap: 0px;}
    .author {text-align: center; margin-top: 30px;}
    .footerLeft, .footerRight {width: 100%; text-align: center; display: flex; justify-content: center; flex-direction: column; align-items: center;}
    .productBox {max-height: none; padding-bottom: 80px;}
    .boxLogo {margin-bottom: 40px;}
    #newsletterForm {padding-bottom: 80px;}
    #newsletterEmailWrapper {width: 100%;}
    .halfpage {width: 100%; text-align: center;}
    .halfpage a {justify-content: center; align-self: center;}
    #intro > div {flex-direction: column;}
    .szkoleniaInfo {display: none;}
    .szkoleniaButtons {width: 100%;}
    #products h3, #products p {width: 100%; text-align: center;} 
    #products h3 br, #formularzHP h3 br {display: none;}
    .boxCtaMiddle, #goDown .buttonTxtPosition {font-size: 16px;}
    .dlaczegoHolder {flex-direction: column;}
    .dlaczegoBox {justify-content: center; text-align: center; align-items: center;}
    .szkoleniaButtons > a {width: 100%; text-align: center;}
    .szkoleniaButtons > h4 {text-align: center;}
    #blogHolder {flex-direction: column;}
    #blogContent, #blogCategories {width: 100%;}
    .categoryList {flex-direction: row; flex-wrap: wrap;}
    .categoryList a {width: auto; padding: 3px 10px;}
    .byline .author {margin: 0px;}
    #blogContent .entry .entry-footer {flex-wrap: wrap;}
}



@media all and (max-width: 800px) {
    .center {padding-left: 20px; padding-right: 20px;}
    #footerNavPrimary ul, #footerNavSecondary ul {display: flex; flex-direction: column; gap: 10px;}
    #footerNavPrimary ul li a, #footerNavSecondary ul li a {margin: 0px;}
    #footerNavSecondary {margin-top: 20px;}
    .formHolder {width: 100%;}
    #dlaczegoMy h4 br, #blog h3 br {display: none;}
    #blog h3 {width: 100%;}
    h3 {font-size: 36px;}
    h4 {font-size: 30px;}
    .productBox {padding: 20px 20px 120px 20px;}
    #newsletterForm {padding: 20px 20px 80px 20px;}
    .boxDesc {width: 100%;}
}