/* CSS */
@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Roboto+Condensed:wght@700&display=swap');

/* ------------------------------------------------------------------------------------------------ALL---------- */
body {background-color:#ffffff; margin: 0; padding: 0; height: 100%}

a {font:14px/22px Verdana, Geneva, sans-serif; text-decoration:none;}
a:hover {text-decoration: none;}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}

font-main {font:18px/26px 'Montserrat', sans-serif;}
p {font:18px/26px 'Montserrat', sans-serif;}
b, strong {font-weight:bold}
i {font-style:italic}

.lista {list-style-type:disc; list-style-position:outside; font:18px/26px 'Montserrat', sans-serif;}

.condens {font-family: 'Roboto Condensed', sans-serif;}
.font-2 {font:17px/26px 'Montserrat', sans-serif;}

.centerThis {text-align:center}
.justifyThis {text-align:justify}
.upcaseThis {text-transform:uppercase}



/* --------------------------------------- palette -----------------------------------------------*/
.clr-white {color:#FFFFFF}		.clrbg-white {background-color:#FFFFFF}
.clr-black {color:#000000} 	.clrbg-black {background-color:#000000}

.clr-f {color:#575757} /*main font color*/

.clr-1 {color:#148cf4}		.clrbg-1 {background-color: #148cf4}		.brdr-1 {border:solid #148cf4 2px;}	/*Blue old-cyan-009FE3*/
.clr-2 {color:#9d9c9c}		.clrbg-2 {background-color: #9d9c9c}		.brdr-2 {border:solid #9d9c9c 4px;}		 /*Grey*/
.clr-3 {color:#f5f5f5}		.clrbg-3 {background-color: #f5f5f5}		.brdr-3 {border:solid #f5f5f5 4px;}	 .brdr-4 {border:solid #9d9c9c 1px;}	 /*Light Grey*/

.glass-bg-white {background-color: rgba(255, 255, 255, 0.8);}
.glass-bg-blue {background-color: rgba(39, 52, 138, 0.8);}
.glass-bg-black {background-color: rgba(0, 0, 0, 0.8); padding:20px 20px 20px 20px}

/* ----------------------------------------- form ------------------------------------------------*/
.formularz {border:#1960ab solid 2px; margin-top:40px; margin-bottom:40px; background-color:#ffffff;}

.form-label {font:14px/14px Verdana, Geneva, sans-serif; color:#1960ab; padding:0; font-weight:bold}
.form-field {	font:17px/22px Verdana, Geneva, sans-serif; color:#1960ab;
						padding:10px 10px 10px 10px; margin-bottom:10px;
						background-color:#a5d5cb; border:none}
.form-submit { font:22px/24px Verdana, Geneva, sans-serif; color:#ffffff; cursor:pointer;
							padding:40px 10px 20px 10px; margin-bottom:40px; margin-top:40px;
							background-color:#1960ab; border:#a5d5cb solid 2px}
.form-submit:hover { color:#1960ab; background-color:#a5d5cb}
.form-error {		font:22px/24px Verdana, Geneva, sans-serif; color:#ffffff;
							padding:40px 10px 40px 10px; margin-bottom:40px; margin-top:0px;
							background-color:#FF0000; border:none}
.form-success {	font:22px/24px Verdana, Geneva, sans-serif; color:#ffffff;
								padding:40px 10px 40px 10px; margin-bottom:40px; margin-top:0px;
								background-color:#1960ab; border:none}

/* ------------------------------------ stylish both ---------------------------------------------*/
.rounded {
    -moz-border-radius-bottomright: 2px;
	-moz-border-radius-bottomleft: 2px;
	-moz-border-radius-topright: 2px;
	-moz-border-radius-topleft: 2px;
	border-bottom-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-top-right-radius: 2px;
	border-top-left-radius: 2px;
	-webkit-border-bottom-right-radius: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-webkit-border-top-right-radius: 2px;
	-webkit-border-top-left-radius: 2px;
	-khtml-border-bottom-right-radius: 2px;
	-khtml-border-bottom-left-radius: 2px;
	-khtml-border-top-right-radius: 2px;
	-khtml-border-top-left-radius: 2px;
}
.shadow {
	-moz-box-shadow: 0px 0px 2px 2px;
	-webkit-box-shadow: 0px 0px 2px 2px;
	box-shadow: 0px 0px 2px 2px;
}
.txt-shadow {text-shadow: 2px 2px 2px #000000;}

/* -------------------------------------- settings -----------------------------------------------*/
img {max-width: 100%; height: auto;}

* {box-sizing: border-box;}

[class*="col-"] {float: left; padding: 0px;}

.row::after {content: ""; clear: both; display: block;}

/* ============================================================================= */
/* ------------------------------------------------------------------------------------------------MOBILE---------- */

[class*="col-"] {width: 100%;}

.visonly-desk {display:none}
.visonly-mob {display:block}

h1 {font:40px/42px 'Montserrat', sans-serif;}
h2 {font:40px/42px 'Roboto', sans-serif;}
h5 {font:40px/42px 'Allura', cursive;}

.section {background-repeat:no-repeat; overflow:auto;  background-size: cover}
.section-with-bg {background-repeat:no-repeat; background-size:cover;}
.sec-gap {border-top:#000000 solid 2px}
.r-gap {padding:0}
.l-gap {padding:0}

.top {padding-top: 0px;}

.menu {padding-right:0px}
.logo {padding-left:0px; text-align:center}

.paragraph {clear:both; padding-top:20px; padding-left:5px; padding-right:5px; text-align:left}
.paragraph-c {clear:both; padding-top:20px; padding-left:40px; padding-right:40px; text-align:center}
.paragraph-l {clear:both; padding-top:20px; padding-left:5px; padding-right:5px; text-align:center}
.paragraph-l-o {clear:both; padding-top:20px; padding-left:5px; padding-right:5px; text-align:left}
.paragraph-r {clear:both; padding-top:20px; padding-left:5px; padding-right:5px; text-align:center}

.paragraph-c-1 {clear:both; padding-top:10px; padding-bottom:4px; padding-left:5px; padding-right:5px; text-align:center; position:absolute; width:100%}
.paragraph-c-2 {clear:both; padding-top:8px; padding-bottom:8px; padding-left:0px; padding-right:0px; text-align:center}
.paragraph-c-3 {clear:both; padding-top:10px; padding-bottom:4px; padding-left:5px; padding-right:5px; text-align:center; position:absolute; width:100%}

.headline {clear:both; padding-top:20px; padding-left:5px; padding-right:5px; text-align:center}
.headline-comm {clear:both; padding-top:0px; padding-left:5px; padding-right:5px; padding-bottom:20px; text-align:center}

.lista {padding-top:20px; padding-left:20px; padding-right:0px; text-align:left}
.lista-sub {padding-left:15px; padding-top:20px;}


.footer {margin-top:0px; padding-top:30px}
.footer p {padding:20px 0 30px 0; font:14px/20px Verdana, Geneva, sans-serif;}
.footer-sw {text-align:center}

/* ---------------------------------------- tiles ---------- */
.tile {}

.tile div p {text-decoration: none; transition: 2s;}
.tile:hover {text-decoration:underline}



/* ----------------------------------------mainmenu mob---------- */
ul.topnav {	list-style-type: none;
					margin: 2px auto 0 auto;
					padding: 0;
					overflow: hidden;}

ul.topnav li {float: none; border-bottom:#FFFFFF solid 1px}
ul.topnav li:first-child {padding-left:0}

ul.topnav li a {	display: block;
							text-align: center;
							padding: 14px 14px;
							text-decoration: none;
							transition: 0.8s;
							font-size: 17px;}

ul.topnav li a:hover {text-decoration:underline}

/* ------------------------------- hamburger mob ---------------------------------------*/
.toggle-menu ul{display:table; width:25px; text-align:center}
.toggle-menu ul li{width:100%; height:3px; background-color:#003A14; margin-bottom:4px;}
.toggle-menu ul li:last-child{margin-bottom:0px;}

input[type=checkbox] {position: absolute; top: -9999px; left: -9999px; background:none;}
input[type=checkbox]:focus{background:none;}
label {float:none; padding:8px 0px; display:inline-block; cursor:pointer;}
input[type=checkbox]:checked ~ nav {display:block;}

nav{display:none;}

/* ============================================================================== */

/* ------------------------------------------------------------------------------------------------DESKTOP---------- */
@media only screen and (min-width: 768px){


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


.visonly-desk {display:block}
.visonly-mob {display:none}

h1 {font:40px/42px 'Montserrat', sans-serif;}
h2 {font:64px/66px 'Roboto', sans-serif;}
h5 {font:48px/50px 'Allura', cursive;}

.section {background-repeat:no-repeat; overflow:auto;  background-size: cover}
.section-with-bg {background-repeat:no-repeat; background-size:cover;}
.sec-gap {border-top:#000000 solid 2px}
.r-gap {padding-right:2px}
.l-gap {padding-left:2px}

.top {padding-top: 20px;}

.menu {padding-right:100px}
.logo {padding-left:100px; text-align:left}

.paragraph {clear:both; padding-top:20px; padding-left:100px; padding-right:100px; text-align:justify}
.paragraph-c {clear:both; padding-top:20px; padding-left:100px; padding-right:100px; text-align:center}
.paragraph-l {clear:both; padding-top:20px; padding-left:100px; padding-right:50px; text-align:justify}
.paragraph-l-o {clear:both; padding-top:20px; padding-left:100px; padding-right:45px; text-align:justify}
.paragraph-r {clear:both; padding-top:20px; padding-left:20px; padding-right:100px; text-align:justify}

.paragraph-c-1 {clear:both; padding-top:10px; padding-bottom:4px; padding-left:20px; padding-right:0px; text-align:left; position:absolute; width:auto}
.paragraph-c-2 {clear:both; padding-top:8px; padding-bottom:8px; padding-left:20px; padding-right:20px; text-align:center}
.paragraph-c-3 {clear:both; padding-top:50px; padding-bottom:4px; padding-left:0px; padding-right:0px; text-align:center; position:absolute; width:50%}

.headline {clear:both; padding-top:20px; padding-left:100px; padding-right:5px; text-align:left}
.headline-comm {clear:both; padding-top:0px; padding-left:100px; padding-right:5px; padding-bottom:20px; text-align:left}

.lista {padding-top:20px; padding-left:120px; padding-right:5px; text-align:left}
.lista-sub {padding-top:20px; padding-left:40px; padding-right:40px;}


.footer {margin-top:0px; padding-top:30px}
.footer-sw {text-align:left}

/* ---------------------------------------- tiles ---------- */
.tile {}

.tile div p {text-decoration: none; transition: 2s;}
.tile:hover {text-decoration:underline}




/* ----------------------------------------mainmenu desk---------- */
						
.topnav {	position:relative;
					clear:both;
					overflow: hidden;
					display: flex;
					justify-content: right;}
 
.topnav a {	flex: 1;
					text-align: center;
					padding: 14px 12px;
					text-decoration: none;
					transition: 0.8s;
					font-size: 17px;
					color:#575757;}

ul.topnav li {float: left; border-bottom:none}

ul.topnav li a:hover {text-decoration:underline}

} /* ************* /desktop ***************** */