./* -- --------kolory  -- */
.pomarancz {color:#ff9933; }
.jasny {color:#C2C8DB; }
.niebieski {color:#6E80AC; }
.granat {color:#1C3060; }



html, body, * {padding:0; 	margin:0;}
body{	background-color: #C2C8DB;	text-align: center; font-family: 'Cuprum', Tahoma,Helvetica,Arial CE,sans-serif; 	font-size: 16px; 	line-height: 1.55em; background-image:url(img/bg-1.png); 	}



.zaokraglony {border-radius:10px; background:white; padding:1em;}
#main {	padding:0;	width:595px; margin:0 120px 0 291px;	background-image:url(images/prawy-bg.jpg);	background-repeat:no-repeat;	background-position:top left;	text-align:left;	float:left;}

a, a:link { color: #6E80AC; text-decoration: underline; }
a:hover { color:#ff9933; text-decoration: none;}

h1 {	 	font-weight: bold; 	font-size: 400%; 	padding-top: 1em; 	padding-bottom: .5em;}
h2 { 	 font-weight: bold; 	font-size: 300%;  margin:10px 0 25px 0;}
h3 {		font-size: 130%;  padding: 1em;}
h4 {	font-size: 105%; margin:6px 0 16px 0;  padding: 1em;}
h1, h2, h3, h4, h5 {color:#6E80AC; font-weight: 700; 	line-height: 1.55em; }
p {	font-size: 90%;	margin-bottom:1em; line-height:2.25em; text-align: justify;  }
code {	font: 1.1em 'Courier New', Courier, Fixed;}
acronym, abbr{	font-size: 0.9em;	letter-spacing: .07em;}
a img {	border: none;}
.img-responsive > img {  display: block;  max-width: 100%;  height: auto;}
h3 a:link, h3 a:hover, h3 a:visited{	/*color: #577a9a;*/	color:#37536c;	text-decoration:none;}
.czysc {clear:both}

/* -- --------GRID----------- -- */

.container {  display: grid;
  grid-template-columns: 75% 025%;
  grid-template-rows: 200px 300px 1fr 0.3fr;
  grid-auto-rows: 1fr;
  row-gap: 28px ;
  grid-auto-flow: row;
  grid-template-areas:
    "header header"
    "jumbotron jumbotron"
    "content sidebar"
    "footer footer";
}

.header { grid-area: header;  grid-column-end: span 2;}
.jumbotron { grid-area: jumbotron;  grid-column-end: span 2; }
.content { grid-area: content; }
.sidebar { grid-area: sidebar; }
.content, .sidebar{ margin:0 16px 0 16px; }

.footer { grid-area: footer; grid-column-end: span 2; }

@media screen and (max-width: 850px) {.container {  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 200px 200px 1fr 1fr 0.4fr;
  grid-auto-rows: 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "header"
    "jumbotron"
    "content"
		"sidebar"
    "footer";
} 
}

./* -- --------header---------- -- */

.header {  display: flex;  margin: 0 0;  padding: 0;  text-align: left;  background-color: #F00;}

.header {	display:flex; margin:0 0;	padding:0;	text-align:left; background-color:#FFF; }

.logo .brand img {	float:none;	padding:0 ; height:200px; padding-left: 28px; }
@media screen and (max-width: 850px) {.logo .brand img {	float:none;	padding:0 ; height:180px; padding-left: 10px; } }
@media screen and (max-width: 650px) {.logo .brand img {	float:none;	padding:0 ; height:90px; padding-left: 0; } }

@media screen and (max-width: 650px) {  .sub-menu .menu-item .logo .brand img {	float:none;	padding:0 ; height:150px; padding-left: 8px; }
}

.setka {width: 100%; }


.jumbotron {  padding-top: 32px;  padding-bottom: 32px; background-color:#C2C8DB; overflow: hidden; }
.jumbotron h1, .jumbotron h2, .jumbotron h3 {  padding: 0.25rem;   }
@media screen and (max-width: 650px) {.jumbotron h1, .jumbotron h2, .jumbotron h3 {  padding: 0.1rem;   }}
@media screen and (max-width: 650px) {.jumbotron h1 {  font-size: 40px;   }}

./* -- --------MENU----------- -- */
.menu {  height: 4rem;}
.menu ol {  list-style-type: none;  margin: 0 auto;  padding: 0;}
.menu > ol {  max-width: 1000px;  padding: 0 2rem;  display: flex;}
.menu > ol > .menu-item {  flex: 1;  padding: 0.75rem 0;}
.menu > ol > .menu-item:after {  content: "";  position: absolute;  width: 4px;  height: 4px;  border-radius: 50%;  bottom: 5px;  left: calc(50% - 2px);  background: #FECEAB;
  will-change: transform;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.menu > ol > .menu-item:hover:after {  transform: scale(1);}
.menu-item {  position: relative;  line-height: 2.5rem;  text-align: center;}
.menu-item a {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  display: block;  color: #1C3060;}
.sub-menu .menu-item {  padding: 0.75rem 0;  background: #1C3060;  opacity: 0;  transform-origin: bottom;  animation: enter 0.2s ease forwards;}
.sub-menu .menu-item:nth-child(1) {
  animation-duration: 0.2s;
  animation-delay: 0s;
}
.sub-menu .menu-item:nth-child(2) {
  animation-duration: 0.3s;
  animation-delay: 0.1s;
}
.sub-menu .menu-item:nth-child(3) {
  animation-duration: 0.4s;
  animation-delay: 0.2s;
}
.sub-menu .menu-item:hover {  background: #6E80AC; }
.sub-menu .menu-item a {  padding: 0 0.75rem;}
@media screen and (max-width: 850px) {  .sub-menu .menu-item {    background: #1C3060;  }
}

@media screen and (max-width: 850px) {  .menu {    position: relative;  margin-left:-100px;  }
  .menu:after {    content: "";    position: absolute;    top: calc(50% + 30px);    right: 2rem;    width: 30px;    height: 4px;    background: #1C3060;
    box-shadow: 0 10px #1C3060, 0 -10px #1C3060;
  }
  .menu > ol {    display: none;    background: #C2C8DB;    flex-direction: column;    justify-content: center;    height: 100vh;    animation: fade 0.2s ease-out;  }
  .menu > ol > .menu-item {    flex: 0;    opacity: 0;    animation: enter 0.3s ease-out forwards;  }
  .menu > ol > .menu-item:nth-child(1) {
    animation-delay: 0s;
  }
  .menu > ol > .menu-item:nth-child(2) {
    animation-delay: 0.1s;
  }
  .menu > ol > .menu-item:nth-child(3) {
    animation-delay: 0.2s;
  }
  .menu > ol > .menu-item:nth-child(4) {
    animation-delay: 0.3s;
  }
  .menu > ol > .menu-item:nth-child(5) {
    animation-delay: 0.4s;
  }
  .menu > ol > .menu-item + .menu-item {
    margin-top: 0.75rem;
  }
  .menu > ol > .menu-item:after {
    left: auto;
    right: 1rem;
    bottom: calc(50% - 2px);
  }
  .menu > ol > .menu-item:hover {    z-index: 1;  }
  .menu:hover > ol {    display: flex;  }
  .menu:hover:after {    box-shadow: none;  }
}

.sub-menu {  position: absolute;  width: 100%;  top: 100%;  left: 0;  display: none;  z-index: 1;}
.sub-menu a {  color:#FFF; }
.menu-item:hover > .sub-menu {  display: block;}

@media screen and (max-width: 850px) {
  .sub-menu {
    width: 100vw;
    left: -2rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

* {  box-sizing: border-box;}
*:before, *:after {  box-sizing: inherit;}

a {  text-decoration: none;}

@keyframes enter {
  from {
    opacity: 0;
    transform: scaleY(0.98) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade {
  from {    opacity: 0;  }
  to {    opacity: 1;  }
}




/* -- --------sidebar----------- -- */
.sidebar {	display:flex; margin:0 0;	 background-color:#FFF;  flex-wrap:wrap; }
.sidebar div {	margin:1em; }


/* -- --------stopka----------- -- */


.footer { display: flex; background-color: #FFF; flex-wrap: wrap;}
.footer p {	text-align: center; font-size:14px;}



.footer { position:relative;  background-color:#fff }
.footer .wrapper { padding-top:25px; padding-bottom:60px; margin-right:auto; margin-left:auto; display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start}
@media screen and (min-width:700px) and (max-width:1250px) {
 .footer .wrapper {  width:100%;  padding-right:50px;  padding-left:50px }
}
@media screen and (max-width:700px) {
 .footer .wrapper {  width:100%;  padding-right:25px;  padding-left:25px }
}
@media screen and (min-width:1250px) { .footer .wrapper {  width:1200px }
}
.footer .logo { width:120px; display:block; margin-right:16px;}
.footer .logo svg { width:100%}
.footer .container-list { display:flex; flex-flow:row wrap; align-items:flex-start}
.footer .container-list ul {
 width:120px;
 list-style:none
}
.footer .container-list ul:not(:last-child) {
 margin-right:60px
}
.footer .container-list ul li:not(:last-child) {
 margin-bottom:8px}

.footer .container-list ul li a { text-decoration:none;  color:#6E80AC; transition:all .25s ease}
@media screen and (min-width:2000px) {
 .footer .container-list ul li a {
  font-size:14px;
  line-height:21px }
}
@media screen and (min-width:1250px) and (max-width:2000px) {
 .footer .container-list ul li a {
  font-size:14px;
  line-height:21px }
}
@media screen and (min-width:700px) and (max-width:1250px) {
 .footer .container-list ul li a {
  font-size:14px;
  line-height:21px }
}
@media screen and (max-width:700px) {
 .footer .container-list ul li a {
  font-size:14px;
  line-height:21px }
}
}
@media screen and (min-width:700px) and (max-width:1250px) {
 .footer .logo {
  width:180px }
 }
 .footer .container-list ul:not(:last-child) {
  margin-right:20px
 }
 .footer .container-contact {
  margin-top:35px
 }
}
@media screen and (max-width:700px) {
 .footer .wrapper {
  padding-top:45px;
  border:none }
 }
 .footer .wrapper:before {
  content:"";
  background-color:#eaeaea;
  position:absolute;
  left:50%;
  top:0;
  height:1px;
  width:calc(100% - 50px);
  transform:translateX(-50%)
 }

.footer .logo { width:195px;  display:block; margin-bottom: 60px;}

.footer .container-list {
 display:flex;
 flex-flow:row wrap;
 align-items:flex-start
}
.footer .container-list ul { width:120px; list-style:none, margin-bottom:26px;}
.footer .container-list ul:not(:last-child) {
 margin-right:60px
}
.footer .container-list ul li:not(:last-child) {
 margin-bottom:8px
}
.footer .container-list ul li a {
 text-decoration:none;
 font-family:SF-Pro-Text-Regular;
 color:#1C3060;
 transition:all .25s ease
}
@media screen and (min-width:2000px) {
.footer .container-list ul li a {  font-size:14px;  line-height:21px }
}
@media screen and (min-width:1250px) and (max-width:2000px) {
.footer .container-list ul li a {  font-size:14px;  line-height:21px }
}
@media screen and (min-width:700px) and (max-width:1250px) {
.footer .container-list ul li a {  font-size:14px;  line-height:21px }
}
@media screen and (max-width:700px) {
.footer .container-list ul li a {
  font-size:14px;
  line-height:21px
 }
}
.footer .container-list ul li:hover a {
 color:#101010
}

.copyright{color:#777; font-size: smaller; }



@media screen and (max-width:700px) {
.galeria {	width: 90%;	float:none;	}
 }
.galeria img {  width: 100%;}
div >  .galeria {  width: 45%;  float: left;  padding: 15px;}