/* Reset styli 16.02.2014
================================================== */
html, body, div, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, sub, sup, var,
dl, dt, dd, ol, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	color: #fff;
    font-family: 'Narrow', sans-serif;
    font-size: 18px;
}

html {font-size: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%}
body {line-height:1;margin:0}
body, html {width:100%;height:100%;background:#fff}
article,footer,header,menu,nav,section {display:block}
nav ul {list-style:none}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;outline: 0}
a:active, a:hover {outline: 0}
b, strong {font-weight:bold}
p {line-height:28px}
p {margin:15px 0 17px}
table {border-collapse:collapse;border-spacing:0}
td {vertical-align:top}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}
img {border: 0;-ms-interpolation-mode: bicubic}
.clr {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height:0}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.justify{text-align:justify}
.fl {float:left}
.fr {float:right}
.none {list-style:none !important;margin:0 !important;padding:0 !important}
::-moz-selection {background: #b3d4fc;text-shadow: none}
::selection {background: #b3d4fc;text-shadow: none}

button, input, select, textarea {font-size: 100%;margin: 0;vertical-align: baseline;*vertical-align: middle}
button, input {line-height: normal}
button, select {text-transform: none}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button;cursor: pointer;*overflow: visible}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;padding: 0;*height: 13px;*width: 13px}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0;padding: 0}
textarea {overflow: auto;vertical-align: top}

aside {position: fixed;bottom:60px;z-index: 1000;right:0}
aside ul {list-style: none outside none;margin: 0;padding: 0;}
aside a {color: #FFFFFF;display: block;font-size:28px;height:55px;line-height:56px;position: relative;text-align: center;width:55px}
aside a:hover {color: #FFFFFF}
aside a:before {font-family: "FontAwesome";font-style: normal;font-variant: normal;font-weight: normal;line-height: 1;text-align: center;text-transform: none;}
aside a span {right: -600%;font-size: 15px;height: inherit;line-height: 35px;margin-left: -5px;min-width: 80px;width: auto;}
aside a span:before {right: -4px;}
aside a span {width:0;-webkit-transition:opacity .3s, left .4s, right .4s, top .4s, bottom .4s;-moz-transition:opacity .3s, left .4s, right .4s, top .4s, bottom .4s;-ms-transition:opacity .3s, left .4s, right .4s, top .4s, bottom .4s;-o-transition:opacity .3s, left .4s, right .4s, top .4s, bottom .4s;transition:opacity .3s, left .4s, right .4s, top .4s, bottom .4s, width .4s;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);white-space:nowrap;opacity:0;position:absolute;z-index:-1;color:white;font-size:15px;line-height:56px}
aside a:hover span {right:100%;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";filter:alpha(opacity=1);margin-right:-5px;padding:0 13px 0 8px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px}

.Facebook, .Facebook span {background:#234999}
.Facebook:before {content:"\f09a"}

body #load {width: 100%;height: 100%;position: fixed;overflow: hidden;z-index: 1001;background-color: #ffffff}
#qLpercentage {font-size: 60px !important;font-weight: 700;line-height: 1}


/* Ikonki
================================================== */
[class^="icon-"], [class*=" icon-"] {font-family: FontAwesome;font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;*margin-right: .3em;font-size:2em}
[class^="icon-"]:before, [class*=" icon-"]:before {text-decoration: inherit;display: inline-block;speak: none;}
.circle {width: 130px;height: 130px;-webkit-border-radius:65px;-moz-border-radius:65px;border-radius: 65px;background:#282C36;margin:0 auto;line-height:130px;top:-40px;position:relative;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}
.icon-coffee:before {content: "\f0f4";}
.icon-magic:before {content: "\f0d0";}
.icon-cogs:before {content: "\f0ad";}
.icon-hdd:before {content: "\f0a0";}
.icon-rocket:before {content: "\f135";}
.icon-smile:before {content: "\f118";}
.icon-phone:before {content: "\f095";}
.icon-envelope-alt:before {content: "\f003";}
.icon-compass:before {content: "\f17e";}
.icon-chart:before {content: "\f080";}
.icon-like:before {content: "\f164";}


/* Header
================================================== */
#header {position:fixed;display:block;width:100%;height:60px;z-index:9;min-width:320px;}
#header .main {position:relative;z-index:3;}
#header .after {position:absolute;width:100%;height:100%;top:-60px;z-index:2;background-color:#fff;-webkit-box-shadow:0px 0px 65px 0px rgba(0,0,0,0.4);-moz-box-shadow:0px 0px 65px 0px rgba(0,0,0,0.4);box-shadow:0px 0px 65px 0px rgba(0,0,0,0.4);}

#header.sticky .after {top:0;-webkit-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.05);-moz-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.05);box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.05);}
#header.sticky #navigation li a {color:#000;}
#header.sticky #navigation ul li a {color:#fff;}
#header.sticky #navigation li span.border {background-color:#E80A3F;}
#header.sticky #logo .label {background-color:#282C36;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
#header.sticky #logo h1 {color:#fff;}


/* Menu
================================================== */
#navigation {float:right;font-size:0;position:relative;top:-25px;text-align:center;width:100%;}
#navigation li {display:inline-block;font-size:14px;width:120px;}
#navigation li a {display:block;position:relative;padding:23px 0;margin:0;color:#fff;text-transform:uppercase;font-size:1.2em;}
#navigation li span.arrow {position:relative;top:-1px;}
#navigation li span.border, #navigation li.current span.border {position:absolute;left:0;bottom:-5px;width:0;height:5px;background-color:#505462}
#navigation li a:hover span.border, #navigation li a.active span.border, #navigation li.current span.border {width:100%;}
#navigation ul li a:hover {background-color:#fff;color:#000!important;}


/* Menu
================================================== */
#logo {float:left;height:60px;font-size:30px;font-weight:800;font-family: 'Raleway', sans-serif;color:#000;line-height:57px;padding:0!important;margin:0;}
#logo h1 {position:relative;z-index:2;font-size:30px;width:120px;text-align:center;margin:25px 0 0 0;letter-spacing:-0.2rem;color:#fff;}
#logo .label {position:absolute;display:block;background-color:#282C36;top:-35px;left:0;width:120px;height:120px;z-index:1;}


/* Przejście
================================================== */
#logo, #navigation li a, #navigation li span.border, #header .after, #logo:after, #logo .label, #logo h1,
.nav-controls a {transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}


/* Obrót
================================================== */
.rotate {transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);}
.radius {border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}


/* Sekcje strony
================================================== */
#home {}
.sliderOverlay {height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 1;background:url('../../gfx/template/gridtile.png')}
.okno {position:relative}
.slide1 {background:url('../../gfx/template/welcome.jpg') no-repeat top center}
.slide2 {background:url('../../gfx/template/bg2.jpg') no-repeat top center} 
.slide3 {background:url('../../gfx/template/bg.jpg') no-repeat top center} 

.panel {height:100%;overflow: hidden;position: absolute;top:0;left:0;width: 100%;background-size:cover;text-align:center}
.swipe-icon {background: url('../../gfx/template/swipe-icon.png') no-repeat scroll left top transparent;background-size:contain;bottom: 20px;height: 41px;opacity: 0.5;position: absolute;right: 0px;left:0px;margin:0 auto;width: 44px;z-index: 6}
.swipe-icon:hover {opacity:1}
.grabbing {cursor:move}

.owl-carousel h2 {font-family: 'Open Sans', sans-serif;color: #fff;font-size:42px;font-weight:normal;text-transform:uppercase;position:relative;top:50%;z-index:2;border:2px solid white;border-top:0px;display:inline-block;padding:20px;background: url('../../gfx/template/border2.png') no-repeat top center}
.owl-carousel h2 {font-family: 'Open Sans', sans-serif;color: #fff;font-size:42px;font-weight:normal;text-transform:uppercase;position:relative;top:50%;z-index:2;border:2px solid white;border-top:0px;display:inline-block;padding:20px;background: url('../../gfx/template/border2.png') no-repeat top center}
.owl-carousel .owl-wrapper:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0}
.owl-carousel {display: none;position: relative;width: 100%;-ms-touch-action: pan-y}
.owl-carousel .owl-wrapper {display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper-outer {overflow: hidden;position: relative;width: 100%;}
.owl-carousel .owl-wrapper-outer.autoHeight {-webkit-transition: height 500ms ease-in-out;-moz-transition: height 500ms ease-in-out;-ms-transition: height 500ms ease-in-out;-o-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out}
.owl-carousel .owl-item {float: left}
.owl-controls .owl-page, .owl-controls .owl-buttons div {cursor: pointer;}
.owl-controls {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
.owl-carousel  .owl-wrapper, .owl-carousel  .owl-item {-webkit-backface-visibility: hidden;-moz-backface-visibility:    hidden;-ms-backface-visibility:hidden;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);}
.owl-pagination {z-index:10;position:absolute;text-align:center;left:30px;bottom:30px;width:70px}
.owl-controls .owl-page {float:left;zoom:1;width:20px}
.owl-controls .owl-page span {display:block;width:12px;height:12px;position:relative;margin:0 3px}
.owl-controls .owl-page span:after {content:'';width:4px;height:4px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:inline-block;position:absolute;top:5px;left:5px}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {width:12px;height:12px;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;border:1px solid #fff}
.owl-theme .owl-controls .owl-page.active span:after,.owl-theme .owl-controls.clickable .owl-page:hover span:after {display:none}
.owl-theme .owl-controls .owl-page span.owl-numbers {height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}

.container {width:980px;margin:0 auto}
.liquid {width:980px;margin:0 auto;text-align:center}
.liquid p {line-height:37px;padding-top:66px}
#jakdzialamy, #liczby {position: relative;background:url('../../gfx/template/pattern.jpg');padding-bottom:30px}
#zdanie {background:#282C36;padding-bottom:30px}
#zdanie {overflow: hidden;position: relative;background-attachment: fixed;background-size:cover;text-align:center;padding-bottom:65px}
#zdanie p {font-size:26px;color:#efefef;opacity:1}

.howto {text-align:center;padding:55px 0 35px}
.howto li {width:298px;background:#fff;display:inline-block;margin:10px;position:relative;margin-top:70px;margin-bottom:30px}
.howto h3 {font-size:28px;font-weight:normal;text-transform:uppercase;border-bottom:1px dotted #5a5c61;padding-bottom: 26px;margin-bottom:12px;line-height:3px;color:#E9343B}
.howto p {font-size:20px;color:#000;line-height:normal;padding:0 11px;margin-top:0;line-height:25px}
.howto li:hover .circle {background:#000}
.howto li:hover [class^="icon-"], .howto li:active [class^="icon-"] {color:white}

#portfolio, #kontakt {padding:0;background:white;position:relative;max-width: 100%;width: 100%;padding-top:0px}
#kontakt {padding-bottom:100px}

#portfolio h2, #kontakt h2, #jakdzialamy h2, #liczby h2 {font-family: 'Raleway', sans-serif;color:#181B23;font-size:48px;text-transform:uppercase;text-align:center;margin:30px 0 90px;font-weight:normal;padding-bottom:20px;letter-spacing: 0.02em;position:relative}
#jakdzialamy h2, #liczby h2 {color:white;margin-top:0;padding-top:100px;margin-bottom:60px}
#portfolio h2:after, #kontakt h2:after, #jakdzialamy h2:after, #liczby h2:after {border-bottom: 1px dotted transparent;bottom: 0;content: "";display: block;height: 1px;left: 50%;margin-left: -40px;position: absolute;width: 80px;}
#kontakt h2, #portfolio h2 {padding-top:100px;margin-top:0}
#portfolio h2:after {border-color:#181b23}
#jakdzialamy h2:after, #liczby h2:after {border-color:white}
#kontakt h2:after {border-color:#181b23}

.t-arrow {display: block;left:50%;border-top: 35px solid #282C36;border-top-color: #282C36;border-left: 35px solid transparent;border-right: 35px solid transparent;position: absolute;top:0;z-index: 5;margin-left:-35px}
.t-arrow-down {display: block;left:50%;border-top: 35px solid #fff;border-top-color: #fff;border-left: 35px solid transparent;border-right: 35px solid transparent;position: absolute;top:0;z-index: 5;margin-left:-35px}
.t-arrow-up {display: block;left:50%;border-bottom: 35px solid #FFF;border-top-color: #FFF;border-left: 35px solid transparent;border-right: 35px solid transparent;position: absolute;top:-35px;z-index: 5;margin-left:-35px;cursor:pointer}

#portfolio .item {width:20%;text-align:center; border:12px solid #fff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#portfolio .item img {height: auto;width: 100%;}
#portfolio .item h5 {font-family: 'Open Sans', sans-serif;color:#43474d;font-weight:normal;text-transform:uppercase;text-align:center;margin:20px 0 0}
#portfolio .item p {color:#999999;margin:0 0 20px;font-family: 'Open Sans', sans-serif;font-weight:300;font-size:14px}
#portfolio .item:hover {background:#282C36}
#portfolio .item:hover img {visibility:hidden}
#portfolio .item:hover h5, #portfolio .item:hover p {color:white}
#portfolio .item .online {display:none;border:2px solid white;padding:15px 10px;left:0;right:0;width:120px;top:150px;position:absolute;z-index:8;color:white;text-align:center;visibility:none;border-top:0px;background:url('../../gfx/template/border.png') no-repeat top center}
#portfolio .item:hover .online {visibility:visible;display:block;margin:0 auto}
#portfolio .item .online:hover {background:white;color:#282C36}

.contact {text-align:center;padding-top:40px}
.contact li {display:inline-block;width:300px;font-size:18px}
.contact i {display: inline-block;line-height: 75px;cursor: pointer;margin: 25px 0 0;width: 75px;
height: 75px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;text-align: center;position: relative;text-decoration: none;color: #fff !important;background:#E9343B}
.contact i:after {pointer-events: none;position: absolute;width: 100%;height: 100%;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;content:'';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.contact p {color:#181B23;font-size:20px}
#google-map {width:92%;height:350px;margin:0 auto}


#liczby {padding-bottom:100px}
#liczby ul li {list-style: none;float: left;width:32.3%}
#liczby ul li i {width: 200px;height: 140px;font-size: 88px;color: #fff;text-align: center;border: 2px solid #fff;border-top: 0;display: table;margin: 0 auto;background: url('../../gfx/template/border.png') no-repeat top center;line-height: 143px}
#liczby ul li h4, #liczby ul li h3 {text-transform: uppercase;margin:20px 0 0;text-align: center;color: #fff;font-family: 'Raleway', sans-serif;font-weight:400;font-size:16px}
#liczby ul li h3 {font-size:48px;font-weight:600;margin-top:10px}

footer {background:black;position:relative}


/* Animacje
================================================== */
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
.animated {opacity: 0}
.animation-visible {opacity: 1}
.animated, .animation {-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-duration: 1s;animation-duration: 1s}


/* Fonty
================================================== */
@font-face {
    font-family: 'FontAwesome';
    src: url('../../fonts/fontawesome-webfont.eot');
    src: url('../../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/fontawesome-webfont.woff') format('woff'),
         url('../../fonts/fontawesome-webfont.ttf') format('truetype'),
         url('../../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Narrow';
    src: url('../../fonts/PTN57F-webfont.eot');
    src: url('../../fonts/PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/PTN57F-webfont.woff') format('woff'),
         url('../../fonts/PTN57F-webfont.ttf') format('truetype'),
         url('../../fonts/PTN57F-webfont.svg#pt_sans_narrowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* RWD
================================================== */

@media screen and (max-width:1024px) {
	#portfolio .item {width: 33.3%}
	#zdanie .liquid {width:920px}
	.owl-carousel h2 {font-size:35px;top:45%}
}

@media screen and (max-width:1023px) {
	.liquid, #zdanie .liquid {width:640px}
	#portfolio .item {width: 50%}
	#liczby ul li i {width:150px}
}


@media screen and (max-width:735px) {
	.liquid, #zdanie .liquid {width:420px}
	#portfolio .item {width: 50%}
	#liczby ul {padding:0}
	#liczby ul li {margin-bottom:30px;float:none;width:auto}
	#liczby ul li:last-child {margin-bottom:0}
	#liczby {padding-bottom: 30px}
	aside {display:none}
}

@media screen and (max-width:450px) {
	.liquid, #zdanie .liquid {width:320px}
	#portfolio .item {width:100%}
	#navigation li {width:100px}
	#logo h1 {width:100px}
	#logo .label {height:100px;width:100px}
	#header.sticky #logo .label {height:120px}
	#zdanie p {font-size:22px;line-height:27px}
	#portfolio h2, #kontakt h2, #jakdzialamy h2, #liczby h2 {font-size:40px}
	.swipe-icon {bottom:10px}
}

@media screen and (max-width:568px) {

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	.mainmenu a {padding: 10px 20px;}
}