@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');/**
Theme Name: Kalkulator Dostępności 
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 - main
 * 2.1.1 - main - form
 * 2.1.2 - main - results
 * 2.1.2.1 - main - results - losses (only @warning)
 * 2.1.2.2 - main - results - als
 * 2.1.2.3 - main - results - als group (only @warning)
 * 2.1.2.4 - main - results - issues (only @warning)
 * 2.1.2.5 - main - results - explain als
 *
 * 2.3 - footer
 * 2.4 - preloader
 *
 * 3.0 - Responsive
 *
 */

 
 /**
 * 1.0 - Body,html
 *
 /////////////////////////////////////////////////*/
body, html {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
color: #fff;
font-size: 1rem;
font-weight: 400;
font-family: "Mulish", sans-serif;
background-color: #000;
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; margin: 0; padding: 0; font-weight: 800; line-height: 130%; }


h1 { margin: 72px 0 0 !important; font-size: 3.9rem; line-height: 120% !important; }
h2 { font-size: 2.4rem; }
h3 { font-size: 1.3rem; }

p { max-width: 600px; margin: 16px 0 0; line-height: 140%;  }
p.vbig, span.vbig, dd.vbig { font-size: 1.4em; }
p.big, span.big, dd.big { font-size: 1.1em; }
p.sml, span.sml { font-size: 0.9em; }
p.vsml, span.vsml { font-size: 0.8em; }

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

a { width: max-content; color: #fff; }
section.bg-deepblue a:not(section.bg-deepblue a.button) { color: #fff; }  
a, a:link, a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }
a[role="button"] { text-decoration: none; cursor: pointer; }


.sbold { font-weight: 600; }
.bold { font-weight: 700; }
.black { font-weight: 800 !important; }
.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)); }
.upper { text-transform: uppercase; }
.lspace8 { letter-spacing: 2.56px; }
	
.w100 { width: 100%; }

.pad-b-24 { padding-bottom: 24px; }
.pad-b-48 { padding-bottom: 48px; }
.pad-t-24 { padding-top: 24px; }
.pad-t-48 { padding-top: 48px; }
.pad-l-80 { padding-left: 80px; }
.pad-r-80 { padding-right: 80px; }


.font-vbig { font-size: 1.9rem !important; }
.font-big { font-size: 1.6rem !important; }
.font-bigsml { font-size: 1.5rem !important; }
.font-med { font-size: 1.3rem !important; }
.font-medsml { font-size: 1.2rem !important; }
.font-sml { font-size: 0.85rem !important; }

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

.big-circle { width: max-content; padding: 8px 22px; border-radius: 180px; }

/* hidden */
.hidden{ display:none !important; }
	
/**
 * 1.2 - Global wrappers and objects
 *
 /////////////////////////////////////////////////*/

section { position: relative; min-height: 180px; margin: 0 auto; }
section { min-height: 180px; }
/* section .wrapper.x-large, section .wrapper.v-sml { padding: 140px 12px 180px; } */


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

.wrapper.v-sml { max-width: 480px; padding: 0 12px; }
.wrapper.large { max-width: 914px; padding: 0 48px; }
.wrapper.large-alt { max-width: 1080px; }
.wrapper.x-large { max-width: 992px; padding: 0 104px; }
.wrapper.x-large-alt { max-width: 1056px; padding: 0 72px; }
.wrapper.x-large .wrapper { margin: 0; }

.wrapper.bg { width: 100%; height: 100%; background: linear-gradient(0deg, rgba(45, 145, 79, 0.00) 14.36%, #377D51 83.93%); }
#container-page {
max-width: 1200px;
min-height: 90vh;
margin: 40px auto;
padding: 0;	
border-radius: 1.5rem;
background: linear-gradient(0deg, rgba(45, 145, 79, 0.00) 14.36%, #377D51 83.93%);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}	


/*//////////////////////////////////////////////////////////// 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.g42 { gap: 42px; }
.flex.g40 { gap: 40px; }
.flex.g32 { gap: 32px; }
.flex.g24 { gap: 24px; }
.flex.g20 { gap: 20px; }
.flex.g16 { gap: 16px; }
.flex.g12 { gap: 12px; }
.flex.g8 { gap: 8px; }
.flex.equal > * { flex: 1; }
.flex.top { align-items: flex-start !important; }
.flex.center { align-items: center !important; }
.flex.bottom { align-items: flex-end !important; }
.flex-half { flex: 0 50% !important; }

.half { width: 50%; }

.inline { display: inline; }

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

/*////////////////////////////////////////////////////////////  Text colors /////*/ 
.txt-white { color: #fff !important; }
.txt-black, section.txt-black a { color: #000; }
section.txt-black a:hover { text-decoration: none; color: #000 !important; } 
.txt-navy { color: #1c2757; }  
.txt-deepblue { color: #381c84; } 
.txt-red { color: #d93058; }
/*////////////////////////////////////////////////////////////  Backround/border colors /////*/ 
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-vlblue { background-color: #f4f9ff; }
.bg-lblue { background-color: #e3efff; }
.bg-blue { background-color: #28529f; }
.bg-deepblue { background-color: #381c84; }
.bg-navy { background-color: #1c2757; }
.bg-dnavy { background-color: #161127; }
.bg-pink { background-color: #a1119a; }
.bg-lpink { background-color: #eccfeb; } 
.bg-orange { background-color: #f6921f; }
.bg-pastel { background-color: #179aaa; }
.bg-green { background-color: #377d51; }
.bg-lgreen { background-color: #1de280; }
.bg-pgreen { background-color: #13b2a2; }
.bg-lpgreen { background-color: #d0f0ec; }
.bg-lbrown { background-color: #f1dfce; }
.bg-pbrown { background-color: #b76009; }

.border-navy { border-color: #1c2757; }
.border-white { border-color: #fff; }

/*////////////////////////////////////////////////////////////  Borders /////*/ 
.border-top { border-top: 1px solid; }
.border-bottom { border-bottom: 1px solid; }

.bor-r-16 { border-radius: 16px; }

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

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

.button.big { font-size: 1.2rem; font-weight: 800; }

a.button.bg-orange:hover { background-color: #ffb056;  }
a.bg-pastel:hover { background-color: #24BED2;  }


/*////////////////////////////////////////////////////////////  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, section#resultWrap.state-ok a:focus-visible  { outline: solid 3px #62e280; outline-offset: 6px; }
section#resultWrap a:focus-visible { outline: solid 2px #b00020; }

.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: 4; 
position: absolute;
border-radius: 32px; 
transform: translateY(-200%);
-webkit-transform: translateY(-200%); 
width: max-content; 
padding: 16px 32px; 
line-height: 130%;
font-weight: 800;
font-size: 1.1rem;
text-decoration: none !important; 
background-color: #62e280; 
}
.skip-link:focus { 
top: 8px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2; 
transform: translateY(0%); 
outline: solid 2px #62E280; 
outline-offset: 3px; 
}
.skip-link, header .skip-link:link, header .skip-link:visited, header .skip-link:hover { color: #000; }



/**
 * 2.0 - header
 *
 /////////////////////////////////////////////////*/
header a.logo { position: absolute; display: block; margin-top: -16px; }

header div#lang { position: relative; display: block; width: max-content; margin-left: auto; margin-right: -24px; padding-top: 40px; font-size: 1.1rem; }
/*///////////////////////////////// div#lang dropdown (hidden - not used) */
div#lang a[role=button] { cursor: pointer; margin-left: auto; padding: 12px 8px 12px 14px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; }
div#lang a img { width: 28px; height: auto; }
div#lang a.open { border-radius: 8px 8px 0 0; }
div#lang a.open img.open { transform: rotate(90deg) rotate(90deg); }

div#lang ul.submenu { 
position: absolute;
z-index: 98;
display: none;
width: 99%; 
background: #377D51;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 0 0 8px 8px; 
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.10);
}
div#lang ul.submenu li a { display: block; width: calc(100% - 36px); padding: 12px 16px 12px 20px; text-decoration: none; border-radius: 0 0 8px 8px;  }
div#lang a[role=button]:hover, div#lang a:hover { background: #2B6F43; } 
div#lang ul.submenu li:not(div#lang ul.submenu li:first-of-type) { margin: 8px 0 0; }
div#lang ul.submenu li:last-of-type { margin: 0; }

/*///////////////////////////////// div#lang select */
header div#lang select {
appearance: none;          /* Standard */
-webkit-appearance: none;  /* Safari */
-moz-appearance: none;     /* Firefox */
cursor: pointer; 
margin-left: auto; 
padding: 16px 32px 16px 16px;
font-size: 1.1rem; 
text-decoration: none; 
font-weight: 600;
color: #fff; 
border: 1px solid rgba(255,255,255,0.4);
border-radius: 8px;
background-color: transparent !important;
background-image: url("images/arrow-down-white.svg"); 
background-repeat: no-repeat; 
background-position: right 8px center;
background-size: 28px;   
}  
header div#lang select option { font-size: 1rem; color: rgba(25, 63, 39, 0.80); }	



/**
 * 2.1 - main
 *
 /////////////////////////////////////////////////*/
.wrapper.options {
padding: 52px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.wrapper.options:first-of-type { padding: 80px 0 64px; }

.wrapper.options.more { padding: 24px 0; border-bottom: none; }

.wrapper.options a:first-of-type img { width: 38px; height: auto; margin-left: 4px; }


/**
 * 2.1.1 - main - form
 *
 /////////////////////////////////////////////////*/
form { position: relative; margin-bottom: 24px; }

img.orn { position: absolute; width: 420px; height: auto; right: -64px; top: -104px; }

input, select {
border-radius: 0.5rem;
border: 1px solid rgba(16, 39, 22, 0.40);
color: rgba(25, 63, 39, 0.80);
font-family: Mulish;
font-style: normal;
line-height: normal;
background: #FFF;
}

label[for="url"] { margin-bottom: 8px; font-weight: 700; }
input#url { width: 78vw; max-width: 520px; padding: 16px; font-size: 1.125rem; font-weight: 700; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }

a#business { max-width: 100%; cursor: pointer; }
a#business.open img { transform: rotate(90deg) rotate(90deg); }
fieldset { margin: 0; padding: 0; border: none; }
form label { margin-bottom: 4px; font-weight: 500; }
form input, form select { width: 240px; background-color: #eaf3ed; font-size: 0.95rem; font-weight: 600; }
form input { padding: 16px; }
form select { }
label span, span span { display: block; }
span.info { padding-left: 22px; font-size: 0.95rem; font-weight: 300; background-image: url("images/icon-help.svg"); background-size: 18px; background-repeat: no-repeat; background-position: 0 1px; }
fieldset span.info { font-size: 0.85rem !important; }

div#more1 { display: none; }

form button {
cursor: pointer;	
border: none; 
padding: 16px 24px; 
border-radius: 64px;
font-family: Mulish;
font-style: normal;
line-height: normal;
font-weight: 800;
color: #000;
}
form button.send { background: #1de280; font-size: 1.5rem; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }
form button.clear { background: #b2b2b2; font-size: 1.125rem; }

form select {
appearance: none;          /* Standard */
-webkit-appearance: none;  /* Safari */
-moz-appearance: none;     /* Firefox */
width: 274px;  
padding: 16px 12px 16px 12px; 
cursor: pointer; 
background-image: url("images/arrow-down-sml-green.svg"); 
background-repeat: no-repeat; 
background-position: right 8px center;
background-size: 32px;   
}  
	


/**
 * 2.1.2 - main - results
 *
 /////////////////////////////////////////////////*/

section#resultWrap div#resultCont { padding-top: 56px; padding-bottom: 80px; color: #000; border-radius: 24px; background: #fde2e3; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);  }
section#resultWrap a { color: #000; }
section#resultWrap.state-ok div#resultCont { color: #fff; background: #193f27; }
section#resultWrap.state-ok div#resultCont a { color: #fff; }

section#resultWrap div#resultText { max-width: 600px; padding: 32px 0; line-height: 140%; /* border-bottom: 1px solid rgba(0,0,0,0.2); */ }
section#resultWrap.state-ok div#resultCont div#resultText { border-bottom: 1px solid rgba(255,255,255,0.2); }
section#resultWrap div#resultText p { margin: 0; }
section#resultWrap div#resultText span { display: block; margin-bottom: 8px; font-size: 1.1rem; font-weight: 800; }
section#resultWrap.state-ok div#resultCont div#resultText { color: #1de280; } 

section#resultWrap span.state, section#resultWrap span#resultPill { padding-left: 48px; font-size: 1.9rem; font-weight: 800; color: #b00020; background-image: url("images/icon-attention.svg"); background-repeat: no-repeat; background-position: left center;  }
section#resultWrap.state-ok div#resultCont span.state, section#resultWrap.state-ok div#resultCont span#resultPill { color: #1de280; font-weight: 700; background-image: url("images/icon-ok.svg"); }

section#resultWrap div.results { padding: 32px 0 16px; border-bottom: 1px solid rgba(0,0,0,0.2); }
section#resultWrap.state-ok div#resultCont div.results { padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
section#resultWrap div.results:last-of-type { border-bottom: none; }


/**
 * 2.1.2.1 - main - results - losses (only @warning)
 /////////////////////////////////////////////////*/
section#resultWrap div#lossRow { padding: 32px 24px 48px; color: #fff; border-radius: 24px; background: #b00020; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }
section#resultWrap.state-ok div#resultCont div#lossRow, section#resultWrap.state-ok div#issuesPanel { display: none; }
section#resultWrap div#lossRow h3 {
margin: 0 0 16px;
font-size: 1.8rem;
font-weight: 800;	
/*
background-image: url("images/icon-attention-white.svg");
background-repeat: no-repeat;
background-position: left top;
background-size: 30px;
padding-left: 36px;
*/
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.4);
}

section#resultWrap div#lossRow div span:first-of-type { padding-right: 8px; }


/**
 * 2.1.2.2 - main - results - als
 /////////////////////////////////////////////////*/
section#resultWrap div.results.als { color: #b00020; }
section#resultWrap.state-ok div#resultCont div.results.als { color: #1de280; }

section#resultWrap div.results.als div span:first-of-type { padding-right: 8px; }

section#resultWrap a#t_groupsTitle img.white { display: none; }
section#resultWrap a#t_groupsTitle img.black { display: block; }
section#resultWrap.state-ok div#resultCont a#t_groupsTitle img.black { display: none; }
section#resultWrap.state-ok div#resultCont a#t_groupsTitle img.white { display: block; }
a#t_groupsTitle.open img { transform: rotate(90deg) rotate(90deg); }



/**
 * 2.1.2.3 - main - results - als group
 *
 /////////////////////////////////////////////////*/
#groupsGrid { display: none; margin-top: 24px; }
.groupItem{
  width: 60vw;
  max-width: 50%; 
  margin-bottom: 16px;  
  /* border:1px solid rgba(255,255,255,.10); */
  background:rgba(139,17,17,.06);
  border-radius:8px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
section#resultWrap.state-ok #groupsGrid .groupItem { background:rgba(0,0,0,.14); }


.groupName{font-weight:700}
.groupPct{font-weight:700}
.bar{
  height:8px;
  border-radius:999px;
  background:rgba(139,17,17,.12);
  overflow:hidden;
  flex:1 1 auto;
  min-width:120px;
  margin:0 10px;
}
section#resultWrap.state-ok div#resultCont #groupsGrid .bar { background:rgba(255,255,255,.10); }


.bar > span{
  display:block;
  height:100%;
  width:0%;
  background: #b00020;
}
section#resultWrap.state-ok div#resultCont #groupsGrid .bar > span { background:rgba(29,226,128,1); }


/**
 * 2.1.2.4 - main - results - issues (only @warning)
 *
 /////////////////////////////////////////////////*/
#issuesList { display: none; margin-top: 24px; }
a#t_topIssues.open img { transform: rotate(90deg) rotate(90deg); }
#issuesList ul {
  margin: 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.10);
}
#issuesList li{
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size: 0.9rem;
}
#issuesList .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(139,17,17,.07);
  font-size: 0.85rem;
  margin-right: 12px;
  white-space:nowrap;
  max-width:100%;
}
#issuesList .sev{ font-weight:900; color: #b00020; }
#issuesList .addmore { margin-top: 6px; padding-left: 20px; font-size: 0.85rem; opacity: .8; background-image: url("images/icon-attention-black.svg"); background-repeat: no-repeat; background-position: left center; }


/**
 * 2.1.2.5 - main - results - explain als
 *
 /////////////////////////////////////////////////*/
h3#t_alsExplainTitle {
margin: 32px 0 4px;
font-weight: 700;	
background-image: url("images/icon-help-black.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 20px;
padding-left: 24px;
}
section#resultWrap.state-ok div#resultCont h3#t_alsExplainTitle { background-image: url("images/icon-help.svg"); }

h3#t_alsExplainTitle ~ p { margin: 0; }


/**
 * 2.1.2.6 - main - results - contact
 *
 /////////////////////////////////////////////////*/
.wrapper.large.contact { position: relative; margin: 48px auto 32px; padding: 56px 48px; border-radius: 24px; }
.wrapper.large.contact h2, .wrapper.large.contact a { margin-left: 180px; }
.wrapper.large.contact h2 { margin-bottom: 32px; }
.wrapper.large.contact img.orn { position: absolute; width: 160px; height: auto; top: 40px; left: 24px; right: auto; }



/**
 * 2.3 - footer
 *
 /////////////////////////////////////////////////*/
footer { padding: 24px 0; color: rgba(255,255,255,0.85); }
footer img { display: block; }
footer a { color: rgba(255,255,255,0.85); text-decoration: none !important;  }
footer a:hover { text-decoration: underline !important; }

footer .wrapper.flex a { margin-bottom: 8px; } 
footer .wrapper.x-large:last-of-type { font-size: 0.95em; }

footer a.gototop { z-index: 9; position: absolute; bottom: auto; right: 24px; }
footer a.gototop img { width: 48px; height: 48px; }


/**
 * 2.4 - preloader
 *
 /////////////////////////////////////////////////*/
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index:9999;
  padding:18px;
}
.overlay[hidden]{ display:none !important; }
.overlayCard{
  width:min(520px, 100%);
  border-radius:24px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 64px 32px;
}
.overlayRow{ display:flex; gap:14px; align-items:center; }
.spinner{
  width:42px;height:42px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.16);
  border-top-color: rgba(29, 226, 128, 1);
  animation: spin 1s linear infinite;
  flex:0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlayTitle{ margin:0; font-size: 1.1rem; font-weight: 800;}
.overlayHint{ margin:8px 0 0; font-size:0.85rem; }




/**
 * 3.0 - Responsive
 *
 /////////////////////////////////////////////////*/

/*///////////////////////////////// width > 3840px */
@media only screen and (min-width: 3840px)   {

}

/*///////////////////////////////// width > 2560px */
@media only screen and (min-width: 2560px)   {

.groupItem { max-width: 860px; }
div#lang ul.submenu { width: 97%; }
}

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

}

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

body, html { font-size: 0.95rem; }
h1 { font-size: 3.2rem; }
.font-vbig { font-size: 1.6rem !important; }

#container-page { max-width: 768px; }

form > .wrapper.options:first-of-type { padding: 0 0 52px; }
img.orn { position: relative; top: auto; right: 0; left: 0; display: block; width: 320px; height: auto; margin: 24px auto; }

form button.send { font-size: 1.6rem; }
form button.clear { font-size: 1.2rem; }

section#resultWrap .title.wrapper { flex-direction: column; align-items: start !important; gap: 24px; }
section#resultWrap div#resultText { padding: 40px 0 52px; }
.groupItem { max-width: 80%; }

}

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



}

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

header div#lang { margin-right: 0; }
.wrapper.x-large, .wrapper.large { padding: 0 48px; }
img.orn { width: 260px; }
.wrapper.options { padding: 32px 0; }
div#actions { padding-bottom: 32px !important; }
section#resultWrap { margin: 0 8px 0; padding-top: 0; padding-bottom: 0; }

.wrapper.large.contact { margin: 32px auto 24px; padding: 40px 24px; }
.wrapper.large.contact h2, .wrapper.large.contact a { margin-left: 0; }
.wrapper.large.contact h2 { margin-bottom: 24px; }
.wrapper.large.contact img.orn { position: relative; left: auto; right: auto; top: 0; }

}

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


.wrapper.x-large, .wrapper.large { padding: 0 24px; }
#container-page { margin: 24px auto; }
a.logo img { width: 140px; height: auto; }
header div#lang select { font-size: 1rem; }
div#lang a[role=button] { padding: 8px 8px 8px 14px; }
h1 { margin: 24px 0 0 !important; font-size: 3rem; }
span#input-info span { display: inline-block; }
div#actions { flex-direction: column; margin: 0 auto; padding-top: 32px !important; }
h2 { font-size: 2.2rem; }
section#resultWrap span.state { font-size: 1.8rem; }
.groupItem { width: 80vw; }

section#resultWrap div#lossRow h3 { font-size: 1.6rem; }
span#lostRevenue { display: block; }

}

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

.wrapper.x-large { padding: 0 16px; }
.groupItem { max-width: 100%; padding: 16px 8px; }


}

/*///////////////////////////////// height < 530px */
@media only screen and (max-height: 530px)   {


}