/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800,300&subset=latin,latin-ext');*/
@CHARSET "UTF-8";

body, input {font-family: 'Open Sans', sans-serif;}
body {margin:0; padding:0;}
html, body{height:100%; margin:0; padding:0;}
a {text-decoration:none; color: #2d89ef;}
a:hover {color: #00a300;}
li {list-style: none;}
.nowrap {white-space: nowrap;}

/*HEADER*/
#header {width:100%; padding:20px 0px; margin:0px 0px 10px 0px; overflow-x: hidden}
#header .container {margin:0 auto}

/* LOGOWANIE */
.logo {float:left;}
.signIn {float:right; margin:10px 0px 0px 0px; width: 650px;}
.signIn > div {display: inline-block; padding-top:7px; width: 650px}
.signIn ul {margin:0; padding:0;}
.signIn ul li {margin:0px 0px 0px 10px; list-style:none; display:inline; font-size:1em; float:left}
.signIn ul li input {font-size:1.125em; font-weight:300;}
.signIn ul li.loginNow-out {float:right;}
.signIn ul li .loginNow {font-size:0.875em; margin-top:1px; float:right; background-color: #00a300; padding:5px; color:#fff; border: none;}
.signIn ul li a.loginNow {text-decoration:none;}
#blad_logowanie {color: red; text-align: left;}
/*NAWIGACJA*/
#nav {padding:10px 0px 10px 0px;}
#nav ul {padding:0; margin:0 auto 0 auto;}
#nav ul li {list-style:none; font-weight:300; color:#fff;}
#nav ul li a {color:#fff; text-decoration:none;}

/*BILLBOARD*/
.billboard .slogan {background-color: #00A000;	color:#fff;}
.billboard .slogan .title h3 {font-weight:400; font-size:1.625em; margin: 0;}
.billboard .slogan .text {font-weight:340; font-size:1em; margin:15px 0 0 0; text-align: left}

/*FUNKCJONALNOŚCI*/
#features {margin:0 auto;}
#features h1 {font-weight:300;}
#features ul#tabs {padding:0; margin:0;}
#features ul#tabs > li {text-align:left; list-style:none; text-align:center; font-weight:300; font-size:0.9em;}
#features ul#tabs > li a {display: block;}

/*TECHNOLOGIA*/ /*OUTSOURCING*/ /*FUNKCJONALNOŚĆ*/ /*INTEGRACJA*/ /*ROZWÓJ*/
.technologia, .outsourcing, .funkcjonalnosc, .integracja, .rozwoj,.chmura,.bezpieczny {margin:0px 0px 10px 0px; background-color:#2484ee; width:969px}
.technologia p, .outsourcing p, .funkcjonalnosc p, .integracja p, .rozwoj p,.chmura p, .bezpieczny p {color:#fff; padding:10px 19px 5px; font-weight:300; font-size:1.0em;  text-align:justify; margin: 10px 0px;}
.pogrubiony {font-weight:bold;}
.funkcjonalnosc ul ,.chmura ul {weight: 100%}
.outsourcing a {color: #ffffff; font-style: italic }
.funkcjonalnosc ul li,.chmura ul li,.outsourcing ul li ,.technologia ul li{background-image: url('../images/li-24-white.png'); background-repeat: no-repeat;  background-position: left center; background-size: 15px 15px; text-align:left; margin:0px 12px 5px 15px; font-weight:300; font-size:1.0em; padding-left:30px; list-style:none; padding-top:0px; color:#fff;}
.ikonka {width: 64px; height: 64px}
.obrazek {width: 600px; }
.ikonka_duza{width: 100px; height: 100px}
.outsourcing td { padding: 10px 19px 5px; color: #ffffff; font-weight: 300}
.lewa {width:85%; padding: 10px 19px 5px; color: #ffffff}
/*KONTAKT*/ /*DEMO*/ /*CENNIK*/ /*REFERENCJE*/ /*PRACA*/
#contact, #demo, #cennik, #references, #job {margin:0 auto;}
#contact  h1, #contact  h2, #demo h1, #demo h2, #cennik h1, #cennik h2, #references h1, #references h2, #job h1, #job h2 {font-weight:300; margin: 0px 0px 15px 0px;}
#contact  h1, #demo h1, #cennik h1, #references h1, #job h1 {font-size:2.250em;}
#contact  h2, #demo h2, #cennik h2, #references h2, #job h2 {font-size:1.750em;}
#contact  ul, #demo ul, #cennik ul, #references ul {padding:0; margin:0;}
#contact ul li, #cennik ul li, #references ul li, #job ul li {background-image: url('../images/li-24.png');background-size: 15px 15px; background-position:left center; background-repeat: no-repeat; text-align:left; margin:5px 12px 5px 0px; font-weight:300; padding-left:30px; list-style:none; box-sizing: border-box;}
#contact ul li, #cennik ul li, #contact div, #demo div {float:left;}
#references ul li, #contact ul li, #contact div, #demo div, #cennik .kalkulator, #job div, #job ul li {font-size:1.1em;}
#contact div, #demo div, #cennik .kalkulator, #job div {font-weight:300;}
#references ul li, #contact ul li, #references div, #job ul li, #job div {width:100%;}
#references ul li, #references div, #job div {float: none;}
#contact div, #demo div, #references div {margin:0px 0px 40px;}
#demo div {min-height:250px;  padding: 0 5px; box-sizing: border-box; width:50%;}

/*CENNIK*/ 
#div_tresc_podpowiedzi {padding:10px; border:1px #FAEE74 solid; background-color:#FFFEA9; font-size:0.875em; color:#000;}
.notice {font-size:0.875em;}
.summary {text-align:center; background-color:#3CB43C; color:#fff;}
#cennik .separator {width:100%; font-weight:bold; list-style:none !important; background:none !important;}
#cennik table {margin: 15px auto; width: 100%; border-right: none; border-spacing: 0px; border-color: gray; border-collapse: separate; border: 1px solid #cecece; clear: both;}
#cennik table tr td {padding:7px;}
label.sekcja {font-weight:bold;}
.akapit {text-align: justify}

/*PRACA*/
#job {width: 100%; box-sizing: border-box;}
#job ul {padding:0; margin:10px 0 30px; float:none; width:100%; box-sizing: border-box;}
#job div {margin:0px 0px 10px; box-sizing: border-box;}

/*FOOTER*/
footer {margin:20px auto 0 auto; border-top:1px #ccc solid;}


/**************************************Duży ekran****************************************/
@media screen and (min-width:799px) {
	img a {border:none !important;}
	img a:hover {border:none !important;}
	.noborder {border:none !important;}
	a {text-decoration:none;}	
	.last {margin:0px !important;}
	.fixed {position:fixed; top:70px;   width:100%; margin:0 auto 0 auto; z-index:100;}
	.fixedHeader {background-color:#fff; position:fixed; top:0; width:100%; margin:0 auto 0 auto; z-index:100;}
	.fixedHeader img {width:150px; height:28px;}
	.signInFixed {float:right; margin:0px 0px 0px 0px !important;}
	
	/*HEADER*/
	#header .container {width:970px; min-height: 52px;}
	
	/*NAWIGACJA*/
	#nav {background-color:#2d89ef;}
	#nav ul {width:970px;}
	#nav ul li {display:inline; margin:0 20px 0 20px; font-size:1.125em;}
	
	/*BILLBOARD*/
	.billboard {width:970px; height:300px; margin:20px auto 0; }
	.billboard  .slogan {position:relative; width:300px; height:210px; padding:15px; top:30px; left:0px;}
	.slider {width:970px; margin:20px auto 0 auto;}
	
	/*FUNKCJONALNOŚCI*/
	#features {width:969px;}
	#features h1 {font-size:2.250em; margin: 0px 0px 15px 0px;}
	#features ul#tabs li {width:13.75%; float:left; margin:0px 6px 0px 0px; min-height: 155px;}
	#features ul#tabs li a {text-decoration:none; padding:10px 10px;}
	#features ul#tabs li.active {background-color:#2484ee; color:#fff;}
	#features ul#tabs li.active a {color:#fff; text-decoration:none;}
	#features ul#tabs li.disabled {background-color:#e8e8e8; color:#333;}
	#features ul#tabs li.disabled a {color:#333; text-decoration:none;}
	#features .desktopV {display: none;}
	#features .mobileV {display: none!important;}
	#features ul#tabs a li {text-decoration:none;}
	 
	/*TECHNOLOGIA*/ /*OUTSOURCING*/ /*FUNKCJONALNOŚĆ*/ /*INTEGRACJA*/ /*ROZWÓJ*/
	.technologia,
	.outsourcing,
	.funkcjonalnosc,
	.integracja,
	.rozwoj,
	.chmura,
	.bezpieczny{float:left;}
	
	.funkcjonalnosc ul li:last-of-type {
		margin-bottom: 15px;
	}
	
	.top-section {
	width: 100%;	
	display: table;
	vertical-align: middle;
	padding-top: 20px;
	padding-bottom: 20px;
	table-layout: fixed;
	}
	
	/*REFERENCJE*/
	#references {width:970px;}
	
	/*KONTAKT*/
	#contact {width:970px;} 
	#contact  div {width:50%;}
	
	/*DEMO*/
	#demo {width:970px;}
	
	/*CENNIK*/
	#cennik {width:970px;}
	#cennik ul {font-weight:300; }
	#cennik ul li {text-decoration:none;} 
	#cennik .kalkulator {float:left; width:600px; margin:0px 0px 40px 0px;}
	#cennik  .tip {float:right; width:370px;  margin:23px 0px 40px 0px;}
	#div_tresc_podpowiedzi {float:right; margin:10px 0px 0px 30px;}
	.notice {text-align:left;}
	#cennik table {font-weight:300; font-size:0.875em;}
	
	/*PRACA*/
	#job {width:970px;}
	
	/*FOOTER*/
	footer {width:970px;}
	footer .copy, footer .madeby {color:#333; padding:0px 0px 20px; font-weight:300; text-align:justify; margin: 10px 0px}
	footer .copy {float:left; font-size:1em;}
	footer .madeby {float:right; font-size:0.813em;}
	footer .madeby a {text-decoration:none;}
}

/**************************** WERSJA RESPONSYWNA *********************************/
/*******************Sredni ekran********************/
@media only screen and (max-width:986px) {
	.container, #header .container {width: 100%;}
	.logo {float: none; text-align: center; display: block; width: 100%;}
	.signIn {float: none; display: block; text-align: center; width: 100%; margin-top: 30px;}
	.log-form {display: block; text-align: center; margin: 0 auto;}
	#nav ul {width: 100%; text-align: center;}
	.signIn ul li {float: none;	display: inline-block;}
	.signIn ul li.loginNow-out {float: none; vertical-align: bottom;}
	
	/*CENNIK*/
	#cennik {width: 100%; float: none;}	
	#cennik .kalkulator {float: none; margin: 0 auto 40px;}
}

@media only screen and (min-width:799px) and (max-width:986px) {
	/*FUNKCJONALNOŚCI*/ /*SLIDER*/ /*REFERENCJE*/ /*DEMO*/ /*PRACA*/ /*KONTAKT*/
	.slider, .billboard, #features, #references, #demo, #job, #contact, #cennik .kalkulator {width: 100%}	
	#features h1 {text-align: center;}
	#features ul#tabs li {display: inline-block; font-size: 1em; text-align: center; margin: 0px; width: 20%; border-right: 3px solid white; box-sizing: border-box;}
	#features ul#tabs li:last-of-type {border-right: none;}
	.billboard {background-size: contain;}
	
	/*CENNIK*/
	#cennik .kalkulator, #cennik .tip {display: inline-block; float: left;}
	#cennik .kalkulator.active {width: 50%;}	
	#cennik .tip {margin-top: 42px; width: 50%; box-sizing: border-box;}
	
	/*FOOTER*/
	footer {width: 100%;}
}

/**************************** WERSJA RESPONSYWNA *********************************/
/***********************maly ekran***********************/
@media screen and (max-width:798px) {	
	.desktop {display:none;}	
		
	/*HEADER*/
	#header .container {text-align:center;}
	#header	img {width:150px; height:28px;}
	
	/*NAWIGACJA*/
	#nav ul li {text-align:center; background-color:#2d89ef; padding:5px;  margin:0 0 1px 0; font-size:1.375em;}
	#nav ul li a {display: block;}
	
	/*LOGOWANIE */
	.signIn ul li {display: block; width: 100%; margin: 15px 0;}
	.signIn ul li label {margin-bottom: 5px; display: block;}
	.signIn ul li input {width: 100%; box-sizing: border-box; min-height: 35px;}
	.signIn ul li .loginNow {margin-bottom: 10px; display: block; float: none; padding: 7px 0; font-size: 1.1em; text-transform: uppercase;}
	
	/*BILLBOARD*/
	.billboard {margin:20px 0px 20px 0px; background: none !important;}
	.billboard  .slogan {padding: 20px;	min-height: 220px; box-sizing: border-box; text-align: center;}
	
	/*FUNKCJONALNOŚCI*/
	#features h1 {text-align:center; font-size:1.750em; margin: 20px 0px 0px 0px;}
	#features ul#tabs > li {margin:0px 0px 20px 0px; padding:10px 0;}
	#features ul#tabs > li.active {background-color:#fff; color:#333;}
	#features ul#tabs > li.disabled {background-color:#fff; color:#333;}
	#features .desktopV {display: none!important;}
	#features .mobileV {display: none}
	.infoBox {margin-top: 15px;}
		
	/*TECHNOLOGIA*/ /*OUTSOURCING*/ /*FUNKCJONALNOŚĆ*/ /*INTEGRACJA*/ /*ROZWÓJ*/
	.technologia, .outsourcing, .funkcjonalnosc, .integracja, .rozwoj {padding-bottom: 10px;}
	.funkcjonalnosc ul {padding: 0;}
	
	/*KONTAKT*/ /*DEMO*/ 
	#contact div, #demo div {width:100%;}	
	
	#demo {display: inline-block}
	
	/*CENNIK*/
	#cennik  h1 {text-align: center;}
	#cennik .tip { margin:10px 0 0;}
	#div_tresc_podpowiedzi {float:left; margin:0;}
	.notice {text-align:center;}
	#cennik table {font-size:0.875em;}
	
	/*FOOTER*/
	footer {width:100%; text-align: center; padding: 15px 0;}
	footer  p {color:#333; padding: 0px 0px 20px; font-weight:300; font-size:1em;  text-align:justify; margin: 10px 0px;}
	footer .copy {margin-bottom: 5px;}
}
	
@media screen and (max-width:455px) {
	.billboard  .slogan {min-height: 295px;}
}