@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;800&display=swap');

*, *::before, *::after {box-sizing: border-box;}
html, body { height: 100%;}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {  margin: 0; }
ul[role='list'], ol[role='list'] {  list-style: none;}
html {  scroll-behavior: smooth; font-family: 'Work Sans', sans-serif; font-size:20px; }
body {  min-height: 100vh;  text-rendering: optimizeSpeed;  line-height: 1.5; -webkit-text-size-adjust: 100%; overflow-x:hidden; background-color:#fdfdfd;}
a:not([class]) {  text-decoration-skip-ink: auto;}
:any-link {  text-decoration: none;   color: var(--glowny-kolor-tla);   font-weight: 600; }
*, *::before, *::after { 	margin: 0;     padding: 0; 	box-sizing: border-box;}
:root {	-moz-tab-size: 4;	tab-size: 4;}
img,picture {  max-width: 100%;  display: block;}
input,button,textarea,select {  font: inherit;}
p {margin-bottom: 1rem}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {   scroll-behavior: auto;  }
  *, *::before, *::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}

:root {
  --nieb:#005682;
  --szar:#C0C4C7;
}

body { display: flex; flex-direction: column;}
#layout-content {flex: 1 0 auto; padding-bottom:3rem;}
#layout-footer {flex-shrink: 0;}
.center {text-align:center; margin:2rem 0;}
small {	font-size: 80%;}
h2, h3 {margin: 2rem 0}
h2 {font-size:1.2rem; font-weight:400}
h3 {font-size:1.1rem}
.container {    margin: 0 auto;    position: relative;    width: 95%; }
.biobg { background: url("../images/o-nas-bg.jpg") no-repeat; background-position: right bottom; }
@media (max-width: 86em) {    .biobg { background: none; }        }
#captcha {margin: 3rem; display: block;}
.text-duzy {font-size:1.2rem; text-align: center; margin-block: 3rem;}
.sukces {background: limegreen; padding: 2rem; color:#fff; }
.g-recaptcha { margin-top: 2rem;}
.kukie-button {background-color:var(--nieb); padding: 1rem 2rem; color:#fff}

/* Naglowek */
#ng {display:flex; margin-bottom:2rem; flex-wrap:wrap; }
#ng img {width:30rem; padding: 1rem 0; }
.head-lewa { display:flex; flex-direction:column; padding:1rem;  }
#logo {font-size:2.8rem; font-weight:800; color: var(--nieb);}
#podpis {font-size:2.2rem; font-weight:800; width:90%; }
.head-prawa { background: url("../images/glowna-head.jpg") no-repeat; background-size: cover; width:100%}
#_lista {font-size:1.5rem; font-weight:600; margin-top:3rem; color:#fff; padding: 1rem;}

/* Naglowek default */
#naglowek {display: flex; justify-content:space-between; align-items:center; margin-top:1rem }
#logo-def {font-size:2.1rem; font-weight:800; color: var(--nieb);  }
#logo-def img {width:12rem; height: 6rem;}
#menu {display:flex; 0; justify-content:space-between; gap:2rem }
#menu li { list-style:none; font-size:1.2rem;  display:block; text-align:center; }
#menu li:hover { color: var(--nieb); }
.mobile-nav-toggle { display:none;}

@media (max-width: 35em) {
    #menu {
        position:fixed;
        inset: 0 0 0 30%;
        flex-direction:column;
        padding:min(30vh, 10rem) 2rem;
        background:#000;
        color:#fff;
        backdrop-filter:blur (1rem);
        transform: translateX(100%);
        transition: transform 350ms ease-out;
        z-index:99999;
    }
    
    #menu[data-visible="true"] { transform: translateX(0%); 	}
    	
    .mobile-nav-toggle {
        display:block;
        position:absolute;
        z-index:9999;
        background-color:transparent;
        background-image:url("../images/hamburger_icon.svg");
        background-repeat:no-repeat;
        border:0;
        width:2rem;
        aspect-ratio: 1;
        top:1rem;
        right:0;      
    }
    
    .mobile-nav-toggle[aria-expanded="true"] {    		background-image:url("../images/hamburger_icon_x.svg");    	}    
}

@media (max-width: 380px) {
#logo {font-size:2.3rem; }
#logo-def {font-size:1.6rem; }
.mobile-nav-toggle { top:0.4rem; }
}


/* Tresc */
.tekst-wiekszy {font-size:1.2rem; font-weight:600; }
ul, ol {padding-left:2rem;}
.grid {display:flex; flex-direction:column; gap:1rem; text-align:center; } 
.card {background:var(--nieb); color:#fff; padding:.8rem; width:100%; aspect-ratio:4/2; display:flex; flex-direction: column;}
.card:hover {background:#fff; color:var(--nieb);  transition: 0.5s; }
.card a {display:inline-block;    width:100%;    height:100%;}
.card-title {font-size:2rem; font-weight:600; transition: 0.5s;}
.card-subtitle { margin-top:auto;  width:100%; font-size:1rem }

.card-glowna {background:var(--nieb); color:#fff; padding:.8rem; width:100%; transition: 0.5s;}
.card-glowna:hover {background:#fff; color:var(--nieb); outline:1px solid var(--nieb); }
.card-title-glowna {font-size:2rem; font-weight:600; }


/* Kursy */
.kursy-grid {display:flex; flex-direction:column; gap:1rem; margin-bottom: 2rem}
.kurs-card {background:var(--nieb); color:#fff; padding:1rem;  transition: 0.5s; }
.kurs-card-nazwa {font-size:1.3rem }
.kurs-card-cena { font-size:1rem; font-weight:400; }
.kurs-card-termin { text-align:center; font-size:1rem; border-top:1px solid #fff; margin-top:0.5rem; padding:0.5rem 0; }
.kurs-card:hover {background:#fff; color:var(--nieb); outline:1px solid var(--nieb); transition: 0.5s;  }
/* Pojedynczy kurs */
.poj-kurs {margin-bottom:4rem;}
.opis-kursu { line-height:2rem; margin-bottom:2rem; border-bottom:1px solid var(--nieb); padding-bottom:1rem}
.kurs-info { display:flex; flex-direction:row; margin-bottom:2rem; gap: .5rem; flex-wrap:wrap; align-items: center; }
.lewa { font-size:1rem; }
.prawa { font-size:1.2rem; font-weight:600;}
.rabat {font-size:1.2rem; font-weight:600; line-height:1.7rem; outline: 4px solid var(--nieb); padding:.5rem; text-align:center; margin-block:2rem}
.prowadzacy .prawa {font-size:1rem;  line-height:3rem}

/* Formularz */
form {margin-top:3rem}
.button2 {background:var(--nieb); color:#fff; padding:1rem; text-align:center; font-size:1.4rem; margin-top:2rem; transition: 0.5s;}
.button2:hover {background:#fff; color:var(--nieb);outline:1px solid var(--nieb); transition: 0.5s;  }
summary::marker {    content: "";}
summary {background:var(--nieb); padding:1rem; text-align:center; color:#fff; font-size:1.4rem; margin-top:2rem; transition: 0.5s;}
summary:hover {background:#fff; color:var(--nieb);outline:1px solid var(--nieb); transition: 0.5s;  cursor:pointer; }

details[open] > div {    -webkit-animation-name: slideDown;            animation-name: slideDown;    -webkit-animation-duration: 1.3s;            animation-duration: 1.3s;
    -webkit-animation-fill-mode: forwards;            animation-fill-mode: forwards;}
@-webkit-keyframes slideDown {  from {    opacity: 0;          }  to {    opacity: 1;     }}
@keyframes slideDown {  from {    opacity: 0;    }  to {    opacity: 1;    }}

.form-group {margin-bottom:2rem;}
label { display:block; margin-bottom:.3rem}
input[type="text"], textarea { width:98%; display:block; border: none; padding: 7px; background: transparent;}
input[type="text"]:focus { border:none; outline:none; border-bottom: 3px solid var(--nieb);  transition: 0.2s linear;}
textarea:focus { outline: 3px solid var(--nieb);  transition: 0.2s linear ;}
input[type="text"] { width:98%; display:block; border: none; border-bottom: 1px solid #ccc;}
input[type="checkbox"] { display:inline-block; }
textarea {outline:1px solid #ccc; ;}
h4 span {font-weight:400; margin-bottom:1rem; display:block;  font-size:0.8rem}
h3 span {font-weight:400; margin-bottom:1rem; display:block; font-size:0.8rem}
.form-check-label {width:90%; }
.fk-grid {display:flex; margin-bottom:2rem;flex-direction:column-reverse; padding:0; gap:3rem  } 

/* Base for label styling */
[type="checkbox"]:not(:checked),[type="checkbox"]:checked {    position: absolute;    left: -9999px;}
[type="checkbox"]:not(:checked) + label,[type="checkbox"]:checked + label {    position: relative;    padding-left: 32px;
    cursor: pointer;    margin-bottom: 4px;    display: inline-block;    font-size: 17px;}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,[type="checkbox"]:checked + label:before {    content: '';
    position: absolute;    left: 0px; top: 0px;    width: 22px; height: 22px;    border: 2px solid #cccccc;
    background: #ffffff;    border-radius: 4px;    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,[type="checkbox"]:checked + label:after {    content: '\2713';    position: absolute;
    top: 0px; left: 5px;    font-size: 20px;    line-height: 1.2;    color:var(--nieb);    transition: all .2s;}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {    opacity: 0;    transform: scale(0);}
[type="checkbox"]:checked + label:after {    opacity: 1;    transform: scale(1);}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,[type="checkbox"]:disabled:checked + label:before {    box-shadow: none;    border-color: #999999;    background-color: #dddddd;}
[type="checkbox"]:disabled:checked + label:after {    color: #999999;}
[type="checkbox"]:disabled + label {    color: #aaaaaa;}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,[type="checkbox"]:not(:checked):focus + label:before {    border: 2px dotted #0000ff;}
/* hover style just for information */
label:hover:before {    border: 2px solid #4778d9!important;    background: #ffffff}

/* Instruktorzy */
#instruktorzy {margin:2rem 0; display:flex; flex-direction:column; gap:1rem;  }
.instruktor-card {background:var(--nieb); color:#fff; padding:1rem; transition: 0.5s; display:flex; flex-direction:column; align-items:start; gap:1rem}
.instruktor-card:hover {background:#fff; color:var(--nieb); outline:1px solid var(--nieb); transition: 0.5s;  }
.imie {font-weight:400; font-size: 1.2rem; width:100%}
.button1 {margin-left:auto; font-size:1.1rem;}
#onas-zalozenia {margin-bottom:3rem}

/* Instruktor */
.grid-instruktor {display:flex; flex-direction:column; gap:2rem; } 
.specjalnosc {font-weight:600; font-size:1.2rem; margin-bottom:2rem;}
.bio-prawa {display:none}
.powrot {background:var(--nieb); color:#fff; padding:1rem; margin:2rem 0; display:block; width: max-content; font-size:.8rem; margin:auto; margin-bottom:3rem}

/* kontakt */
.fk-grid { display:flex; flex-direction:column-reverse; gap:1rem; margin-bottom:3rem; } 
.fk-grid input[type="text"], .fk-grid textarea { width:100%; display:block; border: none; padding: 7px; background: transparent;}
.fk-grid input[type="text"] { width:100%; display:block; border: none; border-bottom: 1px solid #ccc;}
.fk-grid .button2 { width:80%; margin:auto; display:block;}


/* Stopka */
#layout-footer {background:var(--szar);}
#zdjecie-stopy {display:none}
#stopka { display:flex; flex-direction:column; padding:1rem}
#stopka ul {list-style:none; padding:0;}
#stopka li {margin-bottom:1rem}
#stopka h4 {color:#fff; font-weight:600; margin: 1rem 0; letter-spacing:.1rem}
#partnerzy { display:flex; flex-direction:column;  }
#partnerzy a {display:block;}
#partnerzy a:hover {color:#555}
#pp {color:#fff; font-weight:400; margin:2rem 0;  }
#pp a {font-weight:400 }



/* media queries ---------------------------------------- */

@media (min-width: 576px) { 
/* Naglowek */

/* Naglowek default */
#logo-def {font-size:1.5rem;}
#menu {gap:1.2rem }
#menu li { font-size:1rem;}
.mobile-nav-toggle { display:none;}


/* Tresc */
.tekst-wiekszy {font-size:1.3rem; }
.card {aspect-ratio:6/2; }
.card-title {font-size:3rem; }
.card-subtitle { font-size:1.5rem }
/* Kursy */

/* Pojedynczy kurs */

/* Formularz */

/* Instruktorzy */

/* Instruktor */

/* kontakt */
.fk-grid { flex-direction:row; gap:3rem; margin-bottom:3rem; } 
.fk-lewa { width:50%}

/* Stopka */

}


@media (min-width: 768px) { 
/* Naglowek default */
#logo-def {font-size:1.8rem;}
#menu {gap:1.5rem }
#menu li { font-size:1rem;}
}


@media (min-width: 992px) { 
/* Naglowek */
#ng { margin-bottom:2rem; flex-wrap:nowrap; }
#ng >* {width:100% }
.head-lewa {padding:0; }
#logo {font-size:2.8rem; }
#podpis {font-size:2rem; }
#_lista {font-size:1.2rem; }

/* Tresc */
.grid {width:100%; display:flex; flex-direction:row; justify-content:space-between; gap:2rem; } 
.card-title {font-size:2.4rem; }
.card-subtitle { font-size:1rem }
/* Kursy */

/* Pojedynczy kurs */

/* Formularz */
input[type="text"], textarea { width:60%;}
input[type="text"] { width:60%;}
.form-check-label {width:80%; }
/* Instruktorzy */

/* Instruktor */

/* kontakt */
.fk-grid { flex-direction:row; gap:3rem; margin-bottom:3rem; } 
.fk-lewa { width:50%}

/* Stopka */
#stopka { display:flex; flex-direction:row; gap:1rem}
#zdjecie-stopy {display:block; width:40%; align-self:end}
#mini-kontakt {width:40%; }

}


@media (min-width: 1200px) { 
/* Naglowek */
#ng { margin-bottom:4rem; flex-wrap:nowrap; }
#ng >* {width:100% }
.head-lewa {padding:2rem 0; }
#logo {font-size:3.8rem; }
#podpis {font-size:3rem; }
#_lista {font-size:1.6rem; }

/* Naglowek default */
#logo-def {font-size:2.8rem;}
#menu {gap:2rem }
#menu li { font-size:1.4rem;}

/* Formularz */
input[type="text"], textarea { width:50%;}
input[type="text"] { width:50%;}
.form-check-label {width:100%; }
/* Instruktor */
.grid-instruktor { flex-direction:row; justify-content:space-between; gap:5rem; align-items:center; } 
.bio-lewa {align-self:start}
.specjalnosc {font-weight:600; font-size:1.4rem; margin-bottom:2rem;}
.bio {width:80ch}
.powrot {font-size:1rem; background:var(--nieb); color:#fff; padding:1rem; margin:2rem 0; display:block; width: max-content;}
.bio-prawa {display:block; align-self:end}
}


@media (min-width: 1400px) { 
.container { width: 75%;}
/* Naglowek */
#ng {gap:1rem}
.head-lewa {padding:0;}
#logo {font-size:3rem;  }
#podpis {font-size:3rem;  }

#glowna-grid {display:flex; flex-direction:row; max-width:100%; gap:1rem}
#glowna-grid > * {width:100%}
#glowna-grid-lewa { }
#glowna-grid-prawa {}


/* Naglowek default */
#logo-def {font-size:2.8rem;}
#menu {gap:2rem }
#menu li { font-size:1.4rem;}


/* Tresc */

.grid {width:100%; display:flex; flex-direction:column; gap:1rem; } 
.card {aspect-ratio:8/1; }
.card-title {font-size:2.4rem; }
.card-subtitle { font-size:1rem }
.imie {font-size:1.8rem}
.specjalnosc-card {font-size:1.6rem}
}


.sr-only {	border: 0 !important;	clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important;		clip-path: inset(50%) !important; height: 1px !important;	margin: -1px !important;
	overflow: hidden !important;	padding: 0 !important;	position: absolute !important;	width: 1px !important;	white-space: nowrap !important;            }
.sr-only-focusable:focus,.sr-only-focusable:active {	clip: auto !important;	-webkit-clip-path: none !important;		clip-path: none !important;	height: auto !important;	margin: auto !important;	overflow: visible !important;
	width: auto !important;	white-space: normal !important;}
	
.alert {position: absolute; top:0; left:calc(40% - 4rem); background-color: #eee; padding:2rem; color:#fff; }
.alert p {margin-top:2rem;}
.alert-success {background-color: limegreen;}
.close { background:none; aspect-ratio: 1; border:none; position: absolute;  right: 1rem;  top: 1rem; size:3rem; width: 2rem;  color:#fff; font-size: 2rem; cursor: pointer; }