/* ////////////////////////////////////////////////////   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: 1200px) { /*----------  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: 768px)  { /*----------  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.05;
  -webkit-font-smoothing: antialiased;
}

/* /////////////////////////////   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: 16px; }
}



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

.section{
  position: relative;
}

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

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

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

.section.btns, .section-btns{
  margin-top: 0 !important;
}
.section-btns + .no-margin{
  padding-bottom: 3% !important;
}
.section-btns > div > *{
  text-align: center !important;
  justify-content: center;
}

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

.section.margin-end{
  padding-bottom:7vw;
}

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

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

/* --------------------  Tla sekcji (na przemian)  ---------------------- */

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



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

.content{
	margin:0 auto !important;
  padding-left:0%; padding-right:0%;
	max-width:1000px;
}

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

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

.article{ padding:5% 1%; }
.article > div{ width:100%; }
.article.col-2 > div { width:47%; margin: 0% 3%; }
.article.w-full{ padding:5% 3%; }

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

@media only screen and (max-width: 1280px) { /*----------  HD+  ----------------*/
  .article.w-full { padding:6% 4%; }
}
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/
  .article { padding:6% 3%; }
}
@media only screen and (max-width: 1200px) { /*----------  DESKTOP  ------------*/
  .article, .article.w-full { padding:6% 4%; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
  .article, .article.w-full{ padding:8% 5%; }
  .article.col-2 > div{ width:100%; flex:none !important; margin: 4% 0%; }
  .article.col-left { align-content: flex-start; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .article, .article.w-full{ padding:10% 6%; }
}



/* ////////////////////////////////////////////////////   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%; }

/* --------------------- MARGINS ------------------------- */

.no-margin{ padding:0% !important; }
.no-margin > div { margin:0% !important; width:100% !important; }
.no-margin > div.img { display: flex; }

/* --------------------- 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: 1280px) { /*----------  HD+  ----------------*/ }
@media only screen and (max-width: 1250px) { /*----------  HD  -----------------*/ }
@media only screen and (max-width: 1200px) { /*----------  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  -------------*/
  .no-margin{ padding:0% !important; }
  .no-margin > div, .no-margin.col-2 > div, .no-margin.col-3 > div { margin:0% !important; width:100% !important; }
  .no-margin.col-4 > div { width:50% !important; }
}
@media only screen and (min-width: 768px)  { /*----------  MOBILE (down)  ------*/ }
@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   ////////////////////////////// */
/*
           ######   #######  ##       ##     ## ##     ## ##    ##  ######
          ##    ## ##     ## ##       ##     ## ###   ### ###   ## ##    ##
          ##       ##     ## ##       ##     ## #### #### ####  ## ##
          ##       ##     ## ##       ##     ## ## ### ## ## ## ##  ######
          ##       ##     ## ##       ##     ## ##     ## ##  ####       ##
          ##    ## ##     ## ##       ##     ## ##     ## ##   ### ##    ##
           ######   #######  ########  #######  ##     ## ##    ##  ######
*/

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

.col-2 .text{ flex:4; }
.col-2 .img{ flex:3; }
.col-2.img-L .img{ flex:5; }

.article.col-2, .article.col-3, .article.col-4{
  align-items: center;
}
.article.top{
  align-items: flex-start;
}
.article.col-left{
}

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

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

/* --------------------- marginesy kolumn ------------------------- */

.no-margin.col-2 > div { width:50% !important; }
.no-margin.col-3 > div { width:33.33% !important; }
.no-margin.col-4 > div { width:25% !important; }

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

@media only screen and (max-width: 880px)  { /*----------  Tablet  -------------*/

  .no-margin.col-2 > div { margin:0% !important; width:100% !important; }
  .no-margin.col-3 > div, .no-margin.col-4 > div { width:50% !important; }
}
@media only screen and (max-width: 768px)  { /*----------  MOBILE  -------------*/
	.col-2 .img{ text-align: center; }
	.col-2 img{ width:60vw; }

  .reverse-order.content > div:last-child { margin: 4% 0 0 0 !important; }
  .reverse-order.content > div:first-child { margin: 0 0 4% 0 !important; }
}
@media only screen and (max-width: 600px)  { /*----------  S  ------------------*/
  .article.col-2 > div{ width:100%; flex:none !important; margin: 5% 0%; }
  .col-2 img{ width:100%; }

  .reverse-order.content > div:last-child { margin: 5% 0 0 0 !important; }
  .reverse-order.content > div:first-child { margin: 0 0 5% 0 !important; }

  .no-margin{ padding:0% !important; }
  .no-margin > div, .no-margin.col-2 > div, .no-margin.col-3 > div, .no-margin.col-4 > div { margin:0% !important; width:100% !important; }
}



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

.baner{
  background-size: cover;
  background-position: 50% 50%;
}

h1.title{
  font-weight: 300 !important;
  font-size: 2.5em !important;
  margin-bottom: 30px;
}
h1.title span{
  font-weight: 600 !important;
}
.baner ul{
  margin:45px 0px;
}
.baner.parallax-window{
  min-height: 25vh !important;
}
.baner.parallax-window .content{
  min-height: 25vh !important;
  padding-top: 2% !important;
}



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

#footer{
	background: rgb(30, 40, 64);
}
#footer > div{
	padding: 4vw 6vw;
	margin: 0 auto !important;
	max-width: 1200px;

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

	color: rgba(255,255,255,0.5);
	font-size:0.8em;
}
#footer > div > div{
	margin:0 1em;
}
#footer strong{
	color: #ff0000;
	font-weight:700;
	font-size:1em;
	text-transform:uppercase;
}
#footer b{
	color: #fff;
  font-family: 'Roboto Slab';
	font-weight:600;
	font-size:1em;
}
.footer-logo{
	flex:2;
	display: flex;
	align-items: center;
}
.footer-logo img{
	width:250px;
}
.footer-menu{
	flex:1;
}
.footer-menu a{
	display: block;
	text-decoration: none;
	color: rgba(255,255,255,0.5);
	padding: 0.4em 2em;
}
.footer-menu a:hover{
	color: #fff;
	background-color: rgb(40, 50, 78);
}
.footer-menu a::before {
  content: '\f105';
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #ff0000;
}
.footer-contact{
	flex:1;
}
.footer-icons{
  display:flex;
  justify-content: center;
}
.footer-icons a{
  display: block;
  width:7em;
  height:7em;
  padding: 2em;
  margin: 0 0.4em;
  background: rgb(40, 50, 78);
  border-radius: 100px;
}
.footer-icons a:hover{
  background: #ff0000;
}
.footer-icons img{
  width:100%;
  height:auto;
}

#bottom{
  background-color: #fff;
	min-height:6vw;
}
#bottom.falka{
	background-image: url(../img/layout/foot.png);
  background-repeat: no-repeat;
	background-size: 85%;
	background-position: 50% 100%;
  height: auto;
	min-height:calc(8vw + 30px);

	display:flex;
	align-items: center;
	justify-content: center;
	flex-direction:column;

	overflow:hidden;
}
#bottom.falka.ue{
	background-image: url(../img/layout/foot-ue.png);
}
#bottom a{
  text-decoration: none;
}
#bottom a:hover{
  color:white;
}
#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; }
}



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

.hidden{ display:none !important; }

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

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