/* ////////////////////////////////////////////////////   HELP   ////////////////////////////// */
/*
          ##     ## ######## ##       ########
          ##     ## ##       ##       ##     ##
          ##     ## ##       ##       ##     ##
          ######### ######   ##       ########
          ##     ## ##       ##       ##
          ##     ## ##       ##       ##
          ##     ## ######## ######## ##

FLEX:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CHARSET:
https://www.toptal.com/designers/htmlarrows/
ASCII TEXT ART:
http://patorjk.com/software/taag/#p=display&h=0&f=Banner3&t=GALLERY
FontAwesome	-	https://fontawesome.bootstrapcheatsheets.com/
*/

/* RWD: */

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 1280px) { /*----------  HD+  ----------------*/ }
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/ }
@media only screen and (max-width: 1080px) { /*----------  DESKTOP  ------------*/ }
@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/ }
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/ }
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/ }
@media only screen and (min-width: 769px)  { /*----------  MOBILE (down)  ------*/ }
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/ }
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/ }

/* ////////////////////////////////////////////////////   GENERAL   ////////////////////////////// */
/*
           ######   ######## ##    ## ######## ########     ###    ##
          ##    ##  ##       ###   ## ##       ##     ##   ## ##   ##
          ##        ##       ####  ## ##       ##     ##  ##   ##  ##
          ##   #### ######   ## ## ## ######   ########  ##     ## ##
          ##    ##  ##       ##  #### ##       ##   ##   ######### ##
          ##    ##  ##       ##   ### ##       ##    ##  ##     ## ##
           ######   ######## ##    ## ######## ##     ## ##     ## ########
*/
html{
  scroll-behavior: smooth;
}

*{ min-height: 1px; min-width: 1px; } /* Zabezpieczenie dla IE11 - problemy z flexbox */
*, ::after, ::before  {box-sizing: border-box;}
* > :first-child { margin-top: 0 !important; margin-left: 0 !important;}
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }

body{
	margin:0px;
	padding:0px;
	color: rgb(40, 50, 78);
	font-family: "Roboto", sans-serif;
	font-size: 18px;
  font-weight:300;
  line-height:1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  body{ font-size: 16px; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
	body{ font-size: 18px; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  body{ font-size: 16px; }
}
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/
  body{ font-size: 14px; }
}



/* ////////////////////////////////////////////////////   SECTION   ////////////////////////////// */
/*
           ######  ########  ######  ######## ####  #######  ##    ##
          ##    ## ##       ##    ##    ##     ##  ##     ## ###   ##
          ##       ##       ##          ##     ##  ##     ## ####  ##
           ######  ######   ##          ##     ##  ##     ## ## ## ##
                ## ##       ##          ##     ##  ##     ## ##  ####
          ##    ## ##       ##    ##    ##     ##  ##     ## ##   ###
           ######  ########  ######     ##    ####  #######  ##    ##
*/

.section{
  position: relative;
  padding: 5vw;
}

/* -------------------------  Margins  -------------------------- */

.section.no-margin{ padding:0 !important; width:100% !important; }
.section.no-margin > *{ width:100% !important; max-width: none; }
.section.no-margin .text{ padding: 5vw; }

.no-margin{ margin:0 !important; }
.no-margin > * { margin:0 !important; }
.no-margin .cards .card { margin:0 !important; }
.no-margin > div.img { display: flex; }

.section.margin-end{ padding-bottom:5vw !important; }

.section.margin-wide{ }

/* -------------------------  Title  -------------------------- */

.section:not(.title) .section-title, .baner:not(.title) .section-title{
  display:none;
}
.section-title{
  padding-bottom: 0 !important;
}
.section-title > div{
  width: 100% !important;
}
.section.no-margin .section-title{
  padding: 5vw 5vw 0 5vw;
}
.section.no-margin .section-title > div {
  width: 100% !important;
}
.title .section-title + .no-margin {
  padding-top: 3% !important;
}
.section-title > div > *{
  text-align: center !important;
}

/* -------------------------  Buttons  -------------------------- */

.section-btns > div > *{
  text-align: center !important;
  justify-content: center;
}

/* -------------------------  Tło sekcji  -------------------------- */

.section:nth-child(even) { background-color: #f1f1f1; }
.section:nth-child(odd) { background-color: #f8f8f8; }

.section.img{
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.section.fixed{
  background-attachment: fixed !important;
  padding-bottom:8vw;
}

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  .section, .section.no-margin .text{ padding: 6vw; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .section, .section.no-margin .text{ padding: 6vw 8vw; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .section, .section.no-margin .text{ padding: 8vw 10vw; }
}



/* ////////////////////////////////////////////////////   CONTAINERS   ////////////////////////////// */
/*
           ######   #######  ##    ## ########    ###    #### ##    ## ######## ########
          ##    ## ##     ## ###   ##    ##      ## ##    ##  ###   ## ##       ##     ##
          ##       ##     ## ####  ##    ##     ##   ##   ##  ####  ## ##       ##     ##
          ##       ##     ## ## ## ##    ##    ##     ##  ##  ## ## ## ######   ########
          ##       ##     ## ##  ####    ##    #########  ##  ##  #### ##       ##   ##
          ##    ## ##     ## ##   ###    ##    ##     ##  ##  ##   ### ##       ##    ##
           ######   #######  ##    ##    ##    ##     ## #### ##    ## ######## ##     ##
*/

.content{
	margin:4vw auto !important;
	max-width:1100px;
}
.content:first-of-type{ margin-top: 0 !important; }
.content:last-of-type{ margin-bottom: 0 !important; }

/* --------------------  TEXT (inner container)  ---------------------- */

.content > .text { margin-top:2em; }
.content > .text:first-of-type { margin-top:0; }

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  .content{ margin:5vw auto !important; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .content{ margin:6vw auto !important; }
  .article.col-left { align-content: flex-start; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .content{ margin:8vw auto !important; }
}



/* ////////////////////////////////////////////////////   LAYOUT   ////////////////////////////// */
/*
          ##          ###    ##    ##  #######  ##     ## ########
          ##         ## ##    ##  ##  ##     ## ##     ##    ##
          ##        ##   ##    ####   ##     ## ##     ##    ##
          ##       ##     ##    ##    ##     ## ##     ##    ##
          ##       #########    ##    ##     ## ##     ##    ##
          ##       ##     ##    ##    ##     ## ##     ##    ##
          ######## ##     ##    ##     #######   #######     ##
*/

/* --------------------- DIMENSIONS ------------------------- */

.w-full{
	width:100% !important;
	max-width:none;
}

.h-full{
display: flex;
align-items:center;
justify-content: center;
	height:100%;
	width:100%;
}
.h-half{
  display: flex;
  min-height:50vh;
	align-items:center;
  justify-content: center;
	width:100%;
}
.h-100{ display: flex; min-height:100vh; align-items:center; justify-content: center;	width:100%; }
.h-90{ display: flex; min-height:90vh; align-items:center; justify-content: center;	width:100%; }
.h-80{ display: flex; min-height:80vh; align-items:center; justify-content: center;	width:100%; }
.h-70{ display: flex; min-height:70vh; align-items:center; justify-content: center;	width:100%; }
.h-60{ display: flex; min-height:60vh; align-items:center; justify-content: center;	width:100%; }
.h-50{ display: flex; min-height:50vh; align-items:center; justify-content: center;	width:100%; }
.h-40{ display: flex; min-height:40vh; align-items:center; justify-content: center;	width:100%; }
.h-32{ display: flex; min-height:32vh; align-items:center; justify-content: center;	width:100%; }
.h-30{ display: flex; min-height:30vh; align-items:center; justify-content: center;	width:100%; }
.h-20{ display: flex; min-height:20vh; align-items:center; justify-content: center;	width:100%; }
.h-10{ display: flex; min-height:10vh; align-items:center; justify-content: center;	width:100%; }

/* --------------------- ALIGN ------------------------- */

.center{
	display:flex;
	align-items: center;
  justify-content: center;
	flex-direction:column;
}
.center > * { margin-bottom:0; text-align: center; }
.center > p, .center > h1, .center > h2, .center > h3, .center > h4, .center > h5, .center > h6 { width: 100%; }
.center > .btns { justify-content: center; width: 100%; }
.left  { text-align: left; }
.right  { text-align: right; }

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .center{ align-items:stretch; }
  .center > *{ text-align: center; }
}
@media only screen and (max-width: 480px)  { /*----------  XS  -----------------*/ }


/* ////////////////////////////////////////////////////   COLUMNS   ////////////////////////////// */
/*
           ######   #######  ##       ##     ## ##     ## ##    ##  ######
          ##    ## ##     ## ##       ##     ## ###   ### ###   ## ##    ##
          ##       ##     ## ##       ##     ## #### #### ####  ## ##
          ##       ##     ## ##       ##     ## ## ### ## ## ## ##  ######
          ##       ##     ## ##       ##     ## ##     ## ##  ####       ##
          ##    ## ##     ## ##       ##     ## ##     ## ##   ### ##    ##
           ######   #######  ########  #######  ##     ## ##    ##  ######
*/


.content > div{ width:100%; }

.col-2, .col-3, .col-4{
	display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

/* --------------------- Article ------------------------- */

.article.col-2 { align-items: center; }
.article.col-2 > div { width:46%; margin: 0% 4%; }
.article.col-2 .text{ flex:4; }
.article.col-2 .img{ flex:3; }
.article.col-2.img-L .img{ flex:5; }

.article.top{ align-items: flex-start; }

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .article.col-2 > div{ width:100%; flex:none !important; margin: 6% 0%; }
	.article.col-2 .img{ text-align: center; }
	.article.col-2 img{ width:60vw; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .article.col-2 > div{ margin: 8% 0%; }
  .article.col-2 img{ width:100%; }
}

/* --------------------- Cards ------------------------- */

.cards > .card.m0-left { margin-left: 0 !important; }
.cards > .card.m0-top { margin-top: 0 !important; }

        /* wyznaczanie marginesów wewnetrznych pomiędzy kartami
           - parametr column-count wyznacza liczbę kart w wierszu
           - na użytek funkcji checkCardsMargins()
        */
.cards > .card{ margin-left: 30px !important; margin-top: 30px !important; width:100%; column-count:1; }
.cards.col-2 > div { width:calc((100% - 1 * 30px) / 2); column-count:2; }
.cards.col-3 > div { width:calc((100% - 2 * 30px) / 3); column-count:3; }
.cards.col-4 > div { width:calc((100% - 3 * 30px) / 4); column-count:4; }
.no-margin .cards > .card:not([class*="bg-"]) { padding-bottom:0 !important; }
.no-margin .cards > .card:not([class*="bg-"]):not([class*="gallery"]):last-of-type { padding-bottom:40px !important; }

@media only screen and (max-width: 1080px) { /*----------  DESKTOP  ------------*/
  .cards.col-4 > div  { width:calc((100% - 2 * 30px) / 3); column-count:3; }
}
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/
  .cards.col-3 > div,
  .cards.col-4 > div{ width:calc((100% - 1 * 30px) / 2); column-count:2; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .cards.col-2 > div{ width:100%; flex:none; column-count:1; }
}
@media only screen and (max-width: 600px)  { /*----------  MOBILE  -------------*/
  .cards.col-3 > div,
  .cards.col-4 > div{ width:100%; flex:none; column-count:1; }
}

/* poszerzony margines pomiędzy kartami */

.margin-wide.cards > .card.m0-left, .margin-wide .cards > .card.m0-left { margin-left: 0 !important; }
.margin-wide.cards > .card.m0-top, .margin-wide .cards > .card.m0-top { margin-top: 0 !important; }

.margin-wide.cards > .card, .margin-wide .cards > .card{ margin-left: 60px !important; margin-top: 60px !important; }
.margin-wide.cards.col-2 > div, .margin-wide .cards.col-2 > div { width:calc((100% - 1 * 60px) / 2); }
.margin-wide.cards.col-3 > div, .margin-wide .cards.col-3 > div { width:calc((100% - 2 * 60px) / 3); }
.margin-wide.cards.col-4 > div, .margin-wide .cards.col-4 > div { width:calc((100% - 3 * 60px) / 4); }

@media only screen and (max-width: 1080px) { /*----------  DESKTOP  ------------*/
  .margin-wide.cards.col-4 > div, .margin-wide .cards.col-4 > div  { width:calc((100% - 2 * 60px) / 3); }
}
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/
  .margin-wide.cards.col-3 > div, .margin-wide .cards.col-3 > div { width:calc((100% - 1 * 60px) / 2); }
  .margin-wide.cards.col-4 > div, .margin-wide .cards.col-4 > div { width:calc((100% - 1 * 60px) / 2); }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .margin-wide.cards.col-2 > div, .margin-wide .cards.col-2 > div { width:100%; flex:none; column-count:1; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .margin-wide.cards.col-3 > div, .margin-wide .cards.col-3 > div { width:100%; flex:none; column-count:1; }
  .margin-wide.cards.col-4 > div, .margin-wide .cards.col-4 > div { width:100%; flex:none; column-count:1; }
}

/* --------------------- no-margin ------------------------- */
.no-margin.cards.col-2 > div, .no-margin .cards.col-2 > div { width:50%; }
.no-margin.cards.col-3 > div, .no-margin .cards.col-3 > div { width:33.33%; }
.no-margin.cards.col-4 > div, .no-margin .cards.col-4 > div { width:25%; }

@media only screen and (max-width: 1080px) { /*----------  DESKTOP  ------------*/
  .no-margin.cards.col-4 > div, .no-margin .cards.col-4 > div { width:33.33%; }
}
@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/
  .no-margin.cards.col-3 > div, .no-margin .cards.col-3 > div { width:50%; }
  .no-margin.cards.col-4 > div, .no-margin .cards.col-4 > div { width:50%; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .no-margin.cards.col-2 > div, .no-margin .cards.col-2 > div { width:100%; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .no-margin.cards.col-3 > div, .no-margin .cards.col-3 > div { width:100%; }
  .no-margin.cards.col-4 > div, .no-margin .cards.col-4 > div { width:100%; }
}

/* --------------------- odwrócona kolejność kolumn ------------------------- */

.reverse-order.content{ flex-direction: row-reverse !important; }
.reverse-order.content > div:last-child { margin: 0 4% 0 0 !important; }
.reverse-order.content > div:first-child { margin: 0 0 0 4% !important; }

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .reverse-order.content > div:last-child { margin: 6% 0 0 0 !important; }
  .reverse-order.content > div:first-child { margin: 0 0 6% 0 !important; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .reverse-order.content > div:last-child { margin: 8% 0 0 0 !important; }
  .reverse-order.content > div:first-child { margin: 0 0 8% 0 !important; }
}



/* ////////////////////////////////////////////////////   BANER   ////////////////////////////// */
/*
          ########     ###    ##    ## ######## ########
          ##     ##   ## ##   ###   ## ##       ##     ##
          ##     ##  ##   ##  ####  ## ##       ##     ##
          ########  ##     ## ## ## ## ######   ########
          ##     ## ######### ##  #### ##       ##   ##
          ##     ## ##     ## ##   ### ##       ##    ##
          ########  ##     ## ##    ## ######## ##     ##
*/

.baner{
  background-size: cover;
  background-position: 50% 50%;
  padding: 5vw;
  display: flex;
}
.baner ul{
  margin:45px 0px;
}

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  .baner{ padding: 6vw; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .baner{ padding: 6vw 8vw; }
  .baner ul{ margin:30px 0px; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .baner{ padding: 8vw 10vw; }
  .baner ul{ margin:20px 0px; }
}



/* ////////////////////////////////////////////////////   FOOTER   ////////////////////////////// */
/*
          ########  #######   #######  ######## ######## ########
          ##       ##     ## ##     ##    ##    ##       ##     ##
          ##       ##     ## ##     ##    ##    ##       ##     ##
          ######   ##     ## ##     ##    ##    ######   ########
          ##       ##     ## ##     ##    ##    ##       ##   ##
          ##       ##     ## ##     ##    ##    ##       ##    ##
          ##        #######   #######     ##    ######## ##     ##
*/

#footer{
	background: #222629 url(../img/bg/bg-foot.png);
  background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 0;
}
#footer > div{
	padding: 4vw 6vw 0;
	margin: 0 auto !important;
	max-width: 1100px;

	display:flex;
	align-items: stretch;
	justify-content: space-between;
	overflow:hidden;

	color: rgba(255,255,255,0.5);
	font-size:0.8em;
}
#footer > div > div{
	margin:0 1em;
}
#footer strong{
	color: #97be0d;
	font-weight:700;
	font-size:1em;
	text-transform:uppercase;
}
#footer b{
	color: #fff;
  font-family: 'jost';
	font-weight:600;
	font-size:1em;
}
.footer-logo{
	display: flex;
	align-items: center;
}
.footer-logo img{
	width:250px;
}
.footer-menu{
}
.footer-menu a{
	display: block;
	text-decoration: none;
	color: rgba(255,255,255,0.5);
	padding: 0.4em 2em;
}
.footer-menu a:hover, .footer-contact a:hover{
	color: #fff;
}
.footer-menu a::before {
  content: '\f105';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #97be0d;
}
.footer-contact{
}
.footer-icons{
  display:flex;
  justify-content: center;
}
.footer-icons a{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  width: 12em;
  height: 12em;
  padding: 1em;
  margin: 0 0.4em;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #f4e01d;
  text-decoration: none;
}
.footer-icons a:hover{
  background: #97be0d;
}
.footer-icons img{
  width:5em;
  height:auto;
}

#bottom{
  background-color: #222629;
	min-height:6vw;
}
#bottom a{
  text-decoration: none;
}
#bottom a:hover{
  color:white;
}
#cityline{
	background: #222629 url(../img/layout/cityline.png);
  background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 0;
  width: 100vw;
  height: 15vw;
}
#copyright{
	padding: 2em 0;
	color: rgba(255,255,255,0.3);
	font-size: 0.8em;
	text-align: center;
}
#bottom-mail{
	display: block;
	height: 4vw;
	margin: 3.6vw 0 2.4vw 0 !important;
}
#bottom-mail img{ height: 100%; }

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 992px)  { /*----------  Laptop  -------------*/
  #footer-logo img{ width:100%; }
  #footer-logo{ flex:1; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  #footer > div{
    font-size:1em;
    flex-direction: column;
  }
  #footer > div div{ padding: 1em 0; margin:0; text-align: left !important; }
  #footer > div > div{ width: 100%; }
  .footer-logo{ order:1; flex:auto; }
  .footer-menu{ order:2; flex:auto; }
  .footer-contact{ order:3; flex:auto; }
  .footer-icons{ order:4; flex:auto; }

  #footer-logo img{ width:40vw; }
  #bottom.falka {
    padding: 1em;
  }
  #bottom-mail{
    height: 5vw;
    margin: 3.4vw 0 calc(2vw - 1em) 0 !important;
  }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  #footer-logo img{ width:60vw; }
  .footer-icons{
    justify-content: center;
    flex-direction: column;
  }
  .footer-icons a{
    flex-direction: row;
    width: 100%;
    height: 30vw;
    padding: 10px !important;
    margin: 10px 0px !important;
  }
  .footer-icons img {
    width: auto;
    height: 20vw;
  }
  #copyright{
  	padding: 2em 0 6em;
  }
}



/* ////////////////////////////////////////////////////   VISIBILITY   ////////////////////////////// */
/*
          ##     ## ####  ######  #### ########  #### ##       #### ######## ##    ##
          ##     ##  ##  ##    ##  ##  ##     ##  ##  ##        ##     ##     ##  ##
          ##     ##  ##  ##        ##  ##     ##  ##  ##        ##     ##      ####
          ##     ##  ##   ######   ##  ########   ##  ##        ##     ##       ##
           ##   ##   ##        ##  ##  ##     ##  ##  ##        ##     ##       ##
            ## ##    ##  ##    ##  ##  ##     ##  ##  ##        ##     ##       ##
             ###    ####  ######  #### ########  #### ######## ####    ##       ##
*/

.hidden{ display:none !important; }

/* /////////////////////////////   RESPONSIVE   ///////////////////////////// */

@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .m-hide, .m-hide-img .img{ display:none !important; }
  .m-hide-img .text{ margin-bottom: 0 !important; }
}
@media only screen and (min-width: 769px)  { /*----------  MOBILE (down)  ------*/
	.m-show{ display:none !important; }
}