@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/**
Theme Name: PinkPuma
Theme URI:
Author: Andrzej Dabrowski Kinaole Sp. z o.o.
Author URI:
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/**
 * Table of Contents
 *
 * 1.0 - Body,html
 * 1.1 - Global styles
 * 1.2 - Global wrappers and objects
 *
 * 2.0 - Header
 * 2.1 - Footer
 *
 * 3.0 - section#Start
 * 3.1 - section#Wedo
 * 3.2 - section#Forwho
 * 3.3 - section#Examples
 * 3.4 - section#How
 * 3.5 - section#Softw
 * 3.6 - section#Why
 * 3.7 - section#About
 * 3.8 - section#Opinions
 *
 * 4.0 - section#Values (O nas)
 * 4.1 - section#Mission (O nas)
 * 4.2 - section#Team (O nas)
 *
 * 5.0 - section.GroupX (Realizacje)
 * 5.1 - section.CatX (Biblioteka)
 *
 * 6.0 - Responsive mobile menu
 *
 * 7.0 - Responsive
 *
 * 8.0 - Animations
 *
 * 9.0 - UnderConstruction
 *
 */

 
 /**
 * 1.0 - Body,html
 *
 /////////////////////////////////////////////////*/
body, html {
width: 100%;
height: max-content;
margin: 0px;
padding: 0px;
background: #fff;
color: #1c2757;
font-size: 20px;
font-weight: 400;
font-family: "Roboto", sans-serif;
scroll-behavior: smooth;
image-rendering: -webkit-optimize-contrast; /* fix blury image resize in chrome & safari */;
}

/**
 * 1.1 - Global styles
 *
 /////////////////////////////////////////////////*/
img { -ms-interpolation-mode: bicubic; /* image-rendering: optimizeQuality; */ }

h1, h2, h3 { display: block; max-width: 830px; margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-weight: 800; line-height: 130%; }

h1 { margin: 0 0 24px !important; font-size: 3.2em; line-height: 120% !important; }

h2 { max-width: fit-content !important; margin: 0 0 32px; font-size: 2.3em; }

h3 { font-size: 1.3em; }

h4 { font-size: 1.2em; }

p { max-width: 746px; margin: 0 0 16px; line-height: 150%;  }
p.vbig, span.vbig { font-size: 1.4em; }
p.big, span.big { font-size: 1.1em; }
p.sml, span.sml { font-size: 0.9em; }

ul { margin: 0px; padding: 0px; list-style-type: none; }

a { width: max-content; color: #1c2757; } 
a, a:link, a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }

.bold { font-weight: 700; }
.shadow {  -webkit-filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); }

/* sup { font-size: 0.6em; } */


.clrfix { clear: both; }
.show, .dblock { display: block; }
.noshow { display: none !important; }
.view { opacity: 1 !important; }
.noview { opacity: 0 !important; height: 0px !important; overflow: hidden;  } 
.under { z-index: -1 !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; z-index: -1; }
.noscroll { overflow: hidden; }
	
/**
 * 1.2 - Global wrappers and objects
 *
 /////////////////////////////////////////////////*/

section, footer { position: relative; min-height: 180px; margin: 0 auto; }
section .wrapper.x-large, footer .wrapper.x-large { padding: 132px 12px 132px; }
section#wedo .wrapper.x-large  { padding: 120px 12px 144px; }

/*//////////////////////////////////////////////////////////// Wrappers /////*/ 
.wrapper { display: block; margin: 0 auto; }

.wrapper.x-large { max-width: var(--wrap-mw); padding: 0 12px; }
.wrapper.x-large .wrapper { margin: 0; }
.wrapper.med { max-width: var(--wrap-med); padding: 0 12px; }

body { 
--wrap-mw-full: 1320px;
--wrap-mw: 1296px;
/* --vw-margin: calc((100vw - (var(--wrap-mw-full) / 2)) / 2); */
--vw-margin: calc((100vw - var(--wrap-mw-full) + 48px) / 2);
--wrap-med: 764px;
} 


/*//////////////////////////////////////////////////////////// Flex /////*/ 
.flex { display: flex; align-items: center; }
.flex.start { align-items: start; }
.flex.wrap { flex-wrap: wrap; }
.flex.column { flex-direction: column; }
.flex.inline { display: inline-flex; }
.flex.space { justify-content: space-between; }
.flex.jcenter { justify-content: center; }
.flex.g80 { gap: 80px; }
.flex.g64 { gap: 64px; }
.flex.g48 { gap: 48px; }
.flex.g40 { gap: 40px; }
.flex.g32 { gap: 32px; }
.flex.g24 { gap: 24px; }
.flex.g16 { gap: 16px; }
.flex.g12 { gap: 12px; }
.flex.g8 { gap: 8px; }
.flex.g4 { gap: 4px; }
.flex.equal > * { flex: 1; }
.flex.top { align-items: flex-start !important; }
.flex.center { align-items: center !important; }
.flex.bottom { align-items: flex-end !important; }

.half { width: 50%; }
.inline { display: inline; }

/*//////////////////////////////////////////////////////////// centered ver. & hor. /////*/ 
.centered { margin: 0 auto; }
.hor-cent {
position: absolute; 
left: 0; 
right: 0;  
top: 40%; 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}	
div.center { text-align: center; }
div.mwidth { width: max-content !important; }

/*////////////////////////////////////////////////////////////  Text colors /////*/ 
.txt-white { color: #fff; }
.txt-navy { color: #1c2757; }  
/*////////////////////////////////////////////////////////////  Backround colors /////*/ 
.bg-white { background-color: #fff; }
.bg-vlblue, .alt-bg-white { background-color: #f4f9ff; }
.bg-lblue { background-color: #e3efff; }
.bg-blue { background-color: #28529f; }
.bg-navy { background-color: #1c2757; }
.bg-pink { background-color: #d93058; } 
.border-navy { border-color: #1c2757; }

/*////////////////////////////////////////////////////////////  Buttons /////*/ 
.button { display: block; width: max-content; padding: 14px 28px; border-radius: 64px; line-height: 130%; font-family: 'Montserrat', sans-serif; font-size: 0.9em; font-weight: 700; text-decoration: none !important; border: none; }
.button.med { padding: 12px 32px; } 
.button.sml { padding: 12px 24px; } 
.button.shadow { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
.button.arrow { padding-right: 64px; background-image: url("images/arrow-next-white.svg"); background-repeat: no-repeat !important; background-position: right 32px center !important; }
.button.nwindow { padding-right: 52px; background-image: url("images/icon-white-newwindow.svg"); background-repeat: no-repeat !important; background-position: right 32px top 16px !important; }
.button.download { padding-left: 56px; background-image: url("images/arrow-download.svg"); background-repeat: no-repeat !important; background-position: left 24px center !important; }

.button.borders { border: 2px solid; } 

/*////////////////////////////////////////////////////////////  Button hovers /////*/ 
a.button.bg-pink { border: 2px solid #d93058; }
a.button.bg-pink:hover { color: #d93058; background: transparent; }
a.button.bg-pink.nwindow:hover { background-image: url("images/icon-pink-newwindow.svg"); }
a.button.bg-pink.download:hover { background-image: url("images/arrow-pink-download.svg"); }
a.button.bg-pink.arrow:hover { background-image: url("images/arrow-next-pink.svg"); }

a.button.bg-navy { border: 2px solid #1c2757; }
a.button.bg-navy:hover { color:  #1c2757; background: transparent; }
a.button.bg-navy.nwindow:hover { background-image: url("images/icon-navy-newwindow.svg"); background-repeat: no-repeat;}
a.button.bg-navy.arrow:hover { background-image: url("images/arrow-next-navy.svg"); }


/*////////////////////////////////////////////////////////////  Yt videos /////*/ 

.wrapper.yt-video  {
	position:relative; 
	padding-bottom:61.34%;
	margin: 0 0 24px !important;
}
.wrapper.yt-video iframe {
	width:100%;
	height:100%;
	position:absolute;
	border-radius: 10px;
	aspect-ratio: 1.63 / 1;
	box-shadow: 0px 3px 4px 2px rgba(0, 0, 0, 0.10);
}

/* iframe.yt-video { aspect-ratio: 16 / 9; width: 100%; } */


/*//////////////////////////////////////////////////////////// a11y */
:focus-visible { outline: solid 3px #d93058; outline-offset: 6px; }
.txt-white a.button:focus-visible, .txt-white a:focus-visible { outline: solid 2px #fff; }

.sr-only {
position: absolute !important;
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important; 
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;  
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
white-space: nowrap !important;           
overflow: hidden !important;
}

.skip-link { 
z-index: 5; 
position: absolute; 
transform: translateY(-200%);
-webkit-transform: translateY(-200%); 
width: max-content; 
padding: 16px 32px; 
line-height: 130%; 
font-weight: 600;
font-size: 0.95em; 
text-decoration: none !important; 
background-color: #d93058; 
border-radius: 64px; 
}
.skip-link:focus { 
top: 8px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2; 
transform: translateY(0%); 
outline: solid 2px #d93058; 
outline-offset: 2px; 
}
.skip-link, header .skip-link:link, header .skip-link:visited, header .skip-link:hover { color: #fff }


/*///////////////////////////////// gototop */
a#gototop {
z-index: 10;
opacity: 1;
position: fixed;
bottom: 32px;
right: 32px;
padding: 8px 11px;
border-radius: 360px;
background-color: #1c2757;
}
a#gototop img { position: relative; margin: 0 auto; width: 32px; }



/**
 * 2.0 - Header
 *
 /////////////////////////////////////////////////*/
header {
/*
position: relative;
z-index: 4;	
*/
height: auto;
margin: 0 auto 64px !important;
padding: 0 !important;
font-family: 'Montserrat', sans-serif;
background: transparent;
}
header div.langbar { width: 100%; padding: 12px 0; }
header div.pages.wrapper.x-large:not(header div.langbar div.pages.wrapper.x-large) { padding-top: 42px; }
header a.logo.dblock img { /* width: 300px; */ width: 320px; }
header ul.links a { font-size: 1em; font-weight: 700; text-decoration: none; }
header ul.links a:hover { color: #4071cf; }


/*///////////////////////////////// nav#lang */
nav#lang { position: relative; }
nav#lang a { margin-left: auto; text-decoration: none; font-weight: 700; }
nav#lang a img.open { transform: rotate(90deg) rotate(90deg); }

nav#lang ul.submenu { 
position: absolute;
z-index: 98;
top: 28px;
right: -5px;
display: none; 
padding: 16px;
background: #fff;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.10);
}
nav#lang ul.submenu li { display: block; }
nav#lang a:hover { color: #4071cf; } 
nav#lang ul.submenu li:not(nav#lang ul.submenu li:last-of-type) { margin: 0 0 12px; }
nav#lang ul.submenu li:last-of-type { margin: 0; }


/*///////////////////////////////// current page */
[aria-current]:not([aria-current="false"]) {
padding-bottom: 5px;
border-bottom: 4px solid #4071cf;
/* border-bottom: 4px solid #c1d2e8; */
}

header .mobile { display: none; }


/**
 * 2.1 - Footer
 *
 /////////////////////////////////////////////////*/
footer { color: #fff; background: #1c2757; }
footer div.wrapper.x-large { padding-bottom: 32px !important; }
footer a { color: #fff; }
footer h2 { margin-bottom: 104px; font-size: 2em; }
footer h3 { font-size: 1.2em; }
footer h3 span:first-of-type { margin-bottom: 32px; }
footer img.dblock { width: 160px; }
footer .wrapper.flex div.wrapper.reg span { margin-top: 16px; }
footer .wrapper.flex div.wrapper.intouch { max-width: 480px; }
footer .wrapper.flex div.wrapper.intouch h3 { margin-bottom: 40px; }
footer .wrapper.flex div.wrapper.intouch a { margin-bottom: 16px; padding: 12px 0 12px 52px; background-repeat: no-repeat; background-position: left; }
footer .wrapper.flex div.wrapper.intouch a.email { background-image: url("images/icon-pink-mail.svg");  }
footer .wrapper.flex div.wrapper.intouch a.linkedin { background-image: url("images/icon-pink-linkedin.svg");  }
footer .wrapper.copy { margin-top: 120px !important; font-size: 0.9em; }

/**
 * 3.0 - section#Start
 *
 /////////////////////////////////////////////////*/
section#start {
height: auto;
padding: 0;
margin: 0 0 64px;
}
section#start div.wrapper.x-large { padding: 0 12px !important; }
section#start div.welcome { width: 55%; padding-bottom: 64px; }
section#start p.big { max-width: 636px; margin: 0 0 32px; font-weight: 500; }
section#start img.dblock { width: 100%; height: auto; max-width: 620px; flex-grow: 0; flex-shrink: 1; }
section#start a.next { display: none; position: absolute; left: 0; right: 0; bottom: 16px; margin: 0 auto; } 

section#start.pages { margin: 0 0 48px; }
section#start.pages img.dblock { width: 45%; /* max-width: 480px; */ max-height: 430px; } 

/**
 * 3.1 - section#Wedo
 *
 /////////////////////////////////////////////////*/
section#wedo h2, section#wedo p { max-width: 526px; }
section#wedo ul { flex: 0 50%; }
section#wedo ul li { flex: 0 0 calc(50% - 24px); }
section#wedo ul li span { display: block; }
section#wedo ul li span:first-of-type { margin: 0 0 4px; font-family: "Montserrat", sans-serif; font-weight: 800; }
section#wedo ul li span:last-of-type { font-size: 0.8em; font-weight: 700; color: #4a5d7d; }


/**
 * 3.2 - section#Forwho
 *
 /////////////////////////////////////////////////*/
section#forwho div.wrapper.x-large { padding: 168px 12px 136px; background-image: url("images/bg-orn-arrow-lblue.svg"); background-repeat: no-repeat; background-position: left top; }
section#forwho ul { margin: 32px 0 0; }
section#forwho ul li { flex: 0 0 calc(25% - 24px); min-width: 300px; padding: 16px 0; }
section#forwho ul li img { width: 72px; }
section#forwho ul li span { font-family: "Montserrat", sans-serif; }
section#forwho span.big { margin: 80px 0 0; }


/**
 * 3.3 - section#Examples
 *
 /////////////////////////////////////////////////*/
 
section#examples div.wrapper.x-large { position: relative; z-index: 2; padding-top: 120px !important; background-image: url("images/bg-orn-arrow-white.svg"); background-repeat: no-repeat; background-position: right top; }
section#examples h2 { text-align: center; margin-bottom: 96px !important; } 
section#examples ul { margin: 0 0 48px; }
section#examples ul li { flex: 0 0 calc(33.3% - 24px); min-width: 280px; }
section#examples ul li div.pict { margin: 0 0 24px;  }
section#examples ul li div.pict img { display: block; width: 100%; height: auto; aspect-ratio: 1.63 / 1; object-fit: cover; border-radius: 8px; box-shadow: 0px 3px 4px 2px rgba(0, 0, 0, 0.10); }
section#examples ul li h3 { 
margin: 0 0 16px; 
height: 2.5em;	
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
section#examples ul li p { 
height: 6em;	
font-size: 0.9em; 
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* number of lines to show */
line-clamp: 4;
-webkit-box-orient: vertical;
}
section#examples ul li .button { margin-bottom: 16px; margin-left: auto; font-size: 0.85em; }
section#examples div.bg-orn { position: absolute; z-index: 1; right: 0; bottom: -100px; } 


/**
 * 3.4 - section#How
 *
 /////////////////////////////////////////////////*/
section#how div.wrapper.x-large { background-image: url("images/bg-orn-arrow-lblue.svg"); background-repeat: no-repeat; background-position: left top; }
 
section#how div.wrapper.flex .item { flex-grow: 0; flex-shrink: 0; flex-basis: 55%; max-width: 746px; }
section#how div.wrapper.flex img.item { flex-grow: 0; flex-shrink: 1; width: calc(45% - 24px); height: auto; max-width: 520px; padding-top: 120px; }

section#how div.wrapper.flex .item ul { margin-top: 32px; }
section#how div.wrapper.flex .item ul li { margin: 0 0 24px; padding: 0 0 16px; border-bottom: 1px solid rgba(42,53,98,0.3); }
section#how div.wrapper.flex ul li span { padding-right: 48px; font-family: "Montserrat", sans-serif; }
section#how div.wrapper.flex .item ul li:last-of-type { margin: 0; }
section#how div.wrapper.flex .item ul li a { width: 100%; text-decoration: none; background-image: url("images/arrow-down-pink.svg"); background-repeat: no-repeat; background-position: right 8px center;  }
section#how div.wrapper.flex .item ul li a.hide { background-image: url("images/arrow-up-pink.svg"); }
section#how div.wrapper.flex .item ul li div.content.noview { margin: 0; } 
section#how div.wrapper.flex .item ul li div.content { margin: 24px 0 0; }


/**
 * 3.5 - section#Softw
 *
 /////////////////////////////////////////////////*/
section#softw div.wrapper.x-large { position: relative; z-index: 2; }
section#softw div.wrapper.content  { flex-grow: 0; flex-shrink: 0; flex-basis: 60%; max-width: 746px; }
section#softw div.wrapper img { width: 100%; height: auto; max-width: 400px; }

section#softw div.wrapper ul.weuse { margin: 0 0 32px; }
section#softw div.wrapper ul.weuse li { padding: 12px 16px; font-size: 0.9em; font-weight: 500; border-radius: 12px; background: #213874; }
section#softw div.wrapper p { font-size: 0.95em; }
section#softw div.wrapper h3 { margin: 52px 0 16px; font-size: 1.8em; }
section#softw div.bg-orn { position: absolute; z-index: 1; left: 0; top: -100px; } 


/**
 * 3.6 - section#Why
 *
 /////////////////////////////////////////////////*/
section#why div.wrapper.x-large { position: relative; z-index: 2; }
section#why div.wrapper img.item { flex-grow: 0; flex-shrink: 1; width: calc(43% - 24px); height: auto; max-width: 470px; }
section#why div.wrapper.content { flex-grow: 0; flex-shrink: 0; flex-basis: 57%; max-width: 856px; }
section#why div.wrapper.content h2, section#why div.wrapper.content p { max-width: 746px; }
section#why ul { margin: 42px 0 0; }
section#why ul li { flex: 0 0 calc(50% - 24px); padding: 12px 0; }
section#why ul li span { font-family: "Montserrat", sans-serif; }
section#why div.bg-orn { position: absolute; z-index: 1; right: 0; bottom: -200px; } 


/**
 * 3.7 - section#About
 *
 /////////////////////////////////////////////////*/
section#about p { margin-bottom: 24px !important; }
section#about div.pict img { display: block; width: 100%; height: auto; max-width: 520px; aspect-ratio: 1.63 / 1; object-fit: cover; border-radius: 8px; box-shadow: 0px 3px 4px 2px rgba(0, 0, 0, 0.10); }


/**
 * 3.8 - section#Opinions
 *
 /////////////////////////////////////////////////*/
section#opinions div.wrapper.x-large { position: relative; z-index: 2; }  
section#opinions p { margin-bottom: 16px !important; }
section#opinions ul { margin: 64px 0 0; }
section#opinions ul li { 
flex: 0 0 calc(33.3% - 24px);
padding-bottom: 58px;
background-image: url("images/bg-orn-bott-cloud.svg"); background-repeat: no-repeat; background-position: right 32px bottom;
}
section#opinions ul li div.wrapper { min-width: 300px; padding: 24px 32px 48px; background-color: #f3f8ff; border-radius: 24px; }
section#opinions ul li div.wrapper p {
height: 14em;	
font-size: 0.9em; 
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 9; /* number of lines to show */
line-clamp: 9;
-webkit-box-orient: vertical;
}
section#opinions ul li div.wrapper span { display: block; }
section#opinions ul li div.wrapper span:last-of-type { margin-top: 4px; font-size: 0.85em; font-weight: 500; line-height: 140%; color: #536381; } 
section#opinions div.bg-orn { position: absolute; z-index: 1; left: 0; top: -100px; } 


/**
 * 4.0 - section#Values (O nas)
 *
 /////////////////////////////////////////////////*/
section#values div.wrapper.x-large { position: relative; z-index: 2; padding-top: 142px !important; padding-bottom: 88px !important; background-image: url("images/bg-orn-arrow-white.svg"); background-repeat: no-repeat; background-position: right top; }
section#values div.wrapper h2 { flex-grow: 0; flex-shrink: 1; width: 100%; height: auto; max-width: 550px; }
section#values ul { flex-grow: 0; flex-shrink: 0; flex-basis: 58%; max-width: 856px; }
section#values ul li { flex: 0 0 calc(50% - 24px); padding: 12px 0; }
section#values ul li span { font-family: "Montserrat", sans-serif; }
section#values div.bg-orn { position: absolute; z-index: 1; left: 0; top: -100px; } 


/**
 * 4.1 - section#Mission (O nas)
 *
 /////////////////////////////////////////////////*/
section#mission .wrapper.x-large { padding-top: 0 !important; } 
section#mission div.wrapper.flex .item { flex-grow: 0; flex-shrink: 0; flex-basis: 55%; max-width: 746px;  }
section#mission div.wrapper.flex img.item { flex-grow: 0; flex-shrink: 1; width: calc(45% - 40px); height: auto; max-width: 600px; max-height: 580px; }


/**
 * 4.2 - section#Team (O nas)
 *
 /////////////////////////////////////////////////*/
section#team div.wrapper.x-large { position: relative; z-index: 2; padding-top: 120px !important; background-image: url("images/bg-orn-arrow-vlblue.svg"); background-repeat: no-repeat; background-position: right top; }
section#team h2 { margin-bottom: 80px; font-size: 2.6em ; }
section#team h3 { margin-bottom: 32px; font-size: 1.9em ; }
section#team h3 { margin-bottom: 16px; }

section#team .wrapper.g80 img { width: 100%; height: 100%; max-width: 325px; }
section#team div.cooperation { margin-top: 96px; }
section#team div.cooperation h3 { margin-bottom: 48px; }
section#team div.cooperation ul li {flex: 0 0 calc(33.3% - 24px);}
section#team div.cooperation h4 { margin: 32px 0 18px; } 
section#team div.cooperation span.bold { display: block; margin-bottom: 16px; font-size: 0.9em; color: #172c52; }
section#team div.bg-orn { position: absolute; z-index: 1; right: 0; bottom: 40%; } 


/**
 * 5.0 - section.GroupX (Realizacje)
 *
 /////////////////////////////////////////////////*/
section.groupx div.wrapper.x-large { position: relative; z-index: 2; padding-top: 80px !important;  background-repeat: no-repeat; background-position: right top; }
section.groupx.bg-lblue div.wrapper.x-large { background-image: url("images/bg-orn-arrow-white.svg"); }
section.groupx.bg-vlblue div.wrapper.x-large { background-image: url("images/bg-orn-arrow-lblue.svg"); }
section.groupx.bg-white div.wrapper.x-large { background-image: url("images/bg-orn-arrow-vlblue.svg"); }

section.groupx div.wrapper.x-large h2 { margin-bottom: 64px; }
section.groupx ul.flex { flex-wrap: wrap; }
section.groupx ul li:not(ul.range li) { flex: 0 0 calc(33.3% - 16px); flex-wrap: wrap; min-width: 340px; margin-bottom: 24px; border-radius: 10px; background-color: #fff; }
section.groupx ul li div.pict { border-bottom: 1px solid #dddfee; }
section.groupx ul li div.pict img { display: block; width: 100%; height: auto; aspect-ratio: 1.63 / 1; object-fit: cover; border-radius: 10px 10px 0 0; }

section.groupx ul li .wrapper.yt-video { margin-bottom: 0 !important; }
section.groupx ul li .wrapper.yt-video iframe { border-radius: 10px 10px 0 0; box-shadow: none; }

section.groupx ul li div.wrapper.content { padding: 24px; }
section.groupx ul.range li { padding: 4px 12px; font-size: 0.8em; font-weight: 500; background-color: #dddfee; border-radius: 64px; } 
section.groupx span.softw { margin: 16px 0 8px; font-size: 0.8em; font-weight: 700; color: #495279; } 
section.groupx h3 {
height: 4.2em;	
margin-bottom: 16px; 
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
line-clamp:3;
-webkit-box-orient: vertical;
}
section.groupx div.button-wrapper { min-height: 55px; }
section.groupx .button { margin-left: auto; font-size: 0.8em; }
section.groupx div.bg-orn { position: absolute;  z-index: 1; left: 0; top: -100px; } 



/**
 * 5.1 - section.CatX (Biblioteka)
 *
 /////////////////////////////////////////////////*/
section.pages a.button.sml.txt-navy:hover { color: #4071cf; border-color: #1c2757; }
section.catx div.wrapper.x-large { position: relative; z-index: 2; padding-top: 80px !important;  background-repeat: no-repeat; background-position: right top; }
section.catx.bg-lblue div.wrapper.x-large, section.catx.bg-white div.wrapper.x-large.alt-vlblue { background-image: url("images/bg-orn-arrow-vlblue.svg"); }
section.catx.bg-vlblue div.wrapper.x-large, section.catx.alt-bg-white div.wrapper.x-large.alt-white { background-image: url("images/bg-orn-arrow-white.svg"); }
section.catx.bg-white div.wrapper.x-large { background-image: url("images/bg-orn-arrow-lblue.svg"); }
 
section.catx div.wrapper.x-large h2 { margin-bottom: 16px; }
section.catx div.wrapper.x-large h2 ~ p { margin-bottom: 32px; }
section.catx ul.flex { flex-wrap: wrap; }

section.catx ul li .wrapper.yt-video { margin-bottom: 0 !important; }
section.catx ul li .wrapper.yt-video iframe { border-radius: 10px; }

section.catx ul li { flex: 0 0 calc(33.3% - 16px); flex-wrap: wrap; min-width: 340px; margin-bottom: 32px;  }
section.catx ul li div.pict img { display: block; width: 100%; height: auto; aspect-ratio: 1.63 / 1; object-fit: cover; border-radius: 10px; }
section.catx ul li span.action { display: inline-block; margin: 16px 0; padding: 6px 16px; color: #fff; font-size: 0.85em; background-color: #59638a; border-radius: 64px; }   
section.catx ul li h3 { 
height: 4.2em;	
margin-bottom: 0; 
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
line-clamp:3;
-webkit-box-orient: vertical;
}
section.catx ul li .button { margin-left: auto; font-size: 0.8em; }
section.catx div.bg-orn { position: absolute;  z-index: 1; left: 0; top: -100px; } 


/**
 * 6.0 - Responsive mobile menu
 *
 /////////////////////////////////////////////////*/
@media only screen and (max-width: 1200px) {
header { z-index: 1; position: relative; }

header .wrapper.mobile.flex { display: block; position: relative; z-index: 9; display: flex; gap: 24px; flex-wrap: nowrap !important; justify-content: space-between !important; }
header .wrapper.mobile.flex a.logo.mobile { display: block; }
header a.logo.mobile img { object-fit: contain; width: 100%; height: auto; }
header nav#main a.logo { display: none; }

header a#mobile-show img, header a#mobile-close img { width: auto; height: auto; }
header a#mobile-show, header a#mobile-close, header a#mobile-show.visible, header a#mobile-close.visible { visibility: hidden; } 
header a#mobile-show { position: relative; z-index: 9; visibility: visible !important; width: auto; height: auto; right: 0; }
header a#mobile-show.invisible { position: absolute; visibility: hidden !important; }
header a#mobile-close { position: absolute; z-index: 9; right: 0; }
header a#mobile-close.visible { position: relative; visibility: visible !important; }

header nav#main {
opacity: 0;
visibility: hidden;	
display: flex;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
top: 180px;	
width: fit-content;
height: 100%;
margin: 0 auto;
padding: 0 !important;
background: #fff;
pointer-events: none;	
}
header nav#main.show { 
z-index: 8;	
opacity: 1;
visibility: visible;
height: auto;
pointer-events: all;
}

header div.pages.wrapper.x-large:not(header div.langbar div.pages.wrapper.x-large) { padding-top: 24px; }

nav#lang { margin-right: 12px; }
nav#lang ul.submenu { padding: 24px 24px 32px 24px; }
nav#lang ul.submenu li:not(nav#lang ul.submenu li:last-of-type) { margin: 0 0 24px; }
header nav#main ul.links { flex-direction: column; gap: 48px !important; }
header nav#main ul.links a, header nav#lang a { font-size: 1.3em; }
header nav#main ul.links a:not(header nav#main ul.links a.button) { padding: 16px 0; }

a.skip-link.halt, main.halt, footer.halt, header a.halt { display: none; }

/*///////////////////////////////// current page */
[aria-current]:not([aria-current="false"]) {
padding-bottom: 0;
border-bottom: none;
}


}
@media only screen and (max-width: 575px)   { header a.logo.mobile img { max-width: 220px; } }	


/**
 * 7.0 - Responsive
 *
 /////////////////////////////////////////////////*/

/*///////////////////////////////// width > 3840px */
@media only screen and (min-width: 3840px)   {
body, html { font-size: 26px !important; }
p  { max-width: 1280px !important; }
}

/*///////////////////////////////// width > 2560px */
@media only screen and (min-width: 2560px)   {
body { --wrap-mw-full: 1600px; --wrap-mw: 1576px; } 
	
body, html { font-size: 24px !important; }
p { max-width: 1020px; }
section#wedo ul { flex: 0 50%; }
section#softw div.wrapper.content { max-width: none; }

footer.pages { padding: 80px 0 128px !important; }
}

/*///////////////////////////////// width < 1400px */
@media only screen and (max-width: 1400px)   {
body { --wrap-mw-full: 1200px; --wrap-mw: 1176px; } 
body { font-size: 18px; }

section#start a.next { display: block !important; }

section.groupx h3 { height: 5em; -webkit-line-clamp: 4; line-clamp: 4; }

}

/*///////////////////////////////// width < 1200px */
@media only screen and (max-width: 1200px)   {
body { font-size: 16px; }
body { --wrap-mw-full: 100vw; --wrap-mw: calc(100vw - calc(48px * 2)); --vw-margin: calc((100vw - var(--wrap-mw-full) + calc(56px * 2)) / 2); } 

/* header { margin: 0 auto 120px !important; } */
header.pages { margin: 0 auto 80px !important; }
section#start img.dblock { max-width: 550px; }
section#forwho ul li { min-width: 240px; }
section#forwho .wrapper.x-large .wrapper.flex { justify-content: center; }
section#opinions div.bg-orn, section.groupx div.bg-orn, section#values div.bg-orn, section.catx div.bg-orn { top: -50px; }

}

/*///////////////////////////////// width < 1024px */
@media only screen and (max-width: 1024px)   {

.button { width: fit-content; }

.skip-link { padding: 8px 24px; }

.wrapper.x-large .wrapper.flex, section#softw div.wrapper ul.weuse, section#team div.cooperation ul  { flex-wrap: wrap; }
section .wrapper.x-large, section#wedo .wrapper.x-large, footer .wrapper.x-large, section#examples div.wrapper.x-large, section.groupx div.wrapper.x-large { padding: 88px 18px !important; }

footer .wrapper.x-large .wrapper.flex { justify-content: flex-start; align-items: center !important; gap: 48px !important; }
footer .wrapper.x-large .wrapper.flex img.dblock { width: 120px; }
footer .wrapper.x-large .wrapper.flex h3 span:first-of-type { margin-bottom: 12px; }
section#wedo ul, section#how div.wrapper.flex .item, section#softw div.wrapper.content, section#why div.wrapper.content, section#mission div.wrapper.flex .item { flex-basis: 100% !important; }
section#examples ul li, section#opinions ul li { flex: 0 0 calc(50% - 24px); }

section#start div.welcome { width: 100%; }
section#start a.next { display: none !important; }
section#start img.dblock, section#how div.wrapper.flex img.item, section#why div.wrapper img.item, section#mission div.wrapper.flex img.item  { margin: 0 auto; max-width: 500px; }

section#start.pages div.welcome { width: auto; padding-bottom: 0; }
section#start.pages img.dblock { width: 90vw; max-width: 400px; } 

section#forwho ul li { flex: 0 auto; }

section#wedo ul, section#why ul, section#values .wrapper.flex, section#mission .wrapper.flex { justify-content: center; }
section#wedo ul li, section#why ul li { min-width: 300px; }

section#team .wrapper.g80 { gap: 32px; }
section#team .wrapper.g80 img, section#team div.cooperation img { max-width: 280px; margin: 0 auto; }

section#examples ul li div.pict { max-width: 400px;  }
section#examples div.bg-orn { display: none; }
section#how div.wrapper.flex img.item { padding-top: 0px; }
section#softw div.wrapper img { max-width: 300px; }
section#why div.wrapper img.item { order: 2; }

footer .wrapper.copy { margin-top: 64px !important; }

section#start.pages .button.border { font-size: 1em !important; }
}

/*///////////////////////////////// width < 767px */
@media only screen and (max-width: 767px) {
a#gototop { position: absolute; right: 64px; padding: 0; border-radius: 0; }
section#examples ul li, section#opinions ul li { flex: 0 0 calc(100% - 24px); max-width: 400px; }
section#why div.bg-orn { display: none; }
section#examples ul li .button { margin: 0 auto 30px; }
section#softw .bg-orn img { width: 90px; }
section#opinions div.bg-orn img, section.groupx div.bg-orn img, section.catx div.bg-orn img { width: 120px; } 
.wrapper.x-large .wrapper.flex:not(section#start .wrapper.x-large .wrapper.flex):not(footer .wrapper.flex) { justify-content: center; }
footer h2 { margin-bottom: 64px; }
footer .wrapper.flex img.dblock { display: none; }
footer .copy span { order: 3; }

section#values div.wrapper.x-large, section.groupx div.wrapper.x-large, section.catx div.wrapper.x-large { background-image: none !important; }
section#values ul.wrapper.flex { flex-direction: column; }

section#values div.bg-orn { display: none; }

section.groupx div.wrapper.x-large h2, section.catx h2 ~ p { margin-bottom: 24px !important; }
section.groupx ul, section.catx ul { gap: 16px; }
section.catx ul { justify-content: center; }
section.groupx ul li:not(ul.range li) { margin-bottom: 0 !important; }
section.groupx h3 { height: 5.2em; -webkit-line-clamp: 4; line-clamp: 4; }

}

/*///////////////////////////////// width < 575px */
@media only screen and (max-width: 575px)   {
body { --wrap-mw-full: 100vw; --wrap-mw: calc(100vw - calc(18px * 2)); --vw-margin: calc((100vw - var(--wrap-mw-full) + calc(24px * 2)) / 2); } 
h1 { font-size: 2.6em; }
h2 { font-size: 2em; }

.skip-link:focus { left: 24px; right: auto; margin: 0; }

a#gototop { bottom: auto; right: 16px; top: 32px; }
section#start img.dblock, section#how div.wrapper.flex img.item, section#why div.wrapper img.item, section#mission div.wrapper.flex img.item { width: 80vw; }
/* header, header.pages { margin: 0 auto 40px !important; } */
header nav#lang a { font-size: 1.2em; }
section#start div.welcome { padding-bottom: 32px; }
section#opinions ul li div.wrapper { min-width: auto; }
section#opinions ul li div.wrapper p { height: 16em; -webkit-line-clamp: 10; /* number of lines to show */ line-clamp: 10; }
footer .wrapper.copy { flex: 16px !important; }

section#team div.cooperation ul { justify-content: center; }
section#team div.bg-orn { display: none; }

section.catx div.wrapper.x-large { padding-top: 40px !important; }

section.groupx ul li div.wrapper.content { padding: 16px; }
section.groupx ul li:not(ul.range li), section.catx ul li { min-width: 300px; }

}

@media only screen and (max-width: 350px) {
h1 { hyphens: auto; }
}

/**
 * 8.0 - Animations
 *
 /////////////////////////////////////////////////*/

/*///////////////////////////////// objects */
header a.logo.dblock  {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/*///////////////////////////////// :hover animations */
/* header a.logo.dblock:hover { transform: scale(0.9); } */


/**
 * 9.0 - UnderConstruction
 *
 /////////////////////////////////////////////////*/

div.wrapper.uc { text-align: left; } 
div.wrapper.uc h1 { margin-bottom: 64px !important; padding-top: 16px; text-align: center; font-size: 2em; font-weight: 700; }
div.wrapper.uc h1 span { display: block; margin-bottom: 32px; font-size: 2em; font-weight: 800; }
div.wrapper.uc img.logo { width: auto; height: 80px; }

/*///////////////////////////////// width < 768px */
@media only screen and (max-width: 768px)   {
div.wrapper.flex.uc { flex-direction: column; } 
div.wrapper.uc h1 { font-size: 1.6em; }
div.wrapper.uc img.logo { width: auto; height: auto; }
}