html,body {height: 100%;  font-family: 'Lato', sans-serif !important; color: #000; line-height: 1.53 !important; }
body { background: #fff; height: 100%;  margin: 0; font-size: 16px; line-height: 1.53 !important; }
h1,h2,h3,p { margin-top: 0; margin-bottom: 1em; }

h1 { color: #fff; font-weight:100; font-size: 4em; text-transform: uppercase; }
h2 { font-size: 3.5em; color: #000; font-weight:400; text-align: center;  border-bottom: #009fe3 1px solid; width: 40%; padding-bottom: .5em; margin: 0 auto 1em auto;}
h3 { font-size: 2.5em; text-align: center }

a {color: #009fe3 !important; transition: 0.5s all;}
a:hover {color: #047aad !important;}


.img-responsive {display: inline-block !important;}
figcaption {margin:1em 0;}
.opac {opacity: .5 !important;}
.bgRed{background: #cc2200 !important;}

#wrapper {height: 100%; width: 100%;}
#top {height: 110%; width: 100%; background: url("../img/bg.jpg") center top  no-repeat; background-size: cover; padding-top: 10%;}
#top #title {text-align: center; background: url("../img/jk-initials.png") center top no-repeat; padding-top: 150px;}
#top #title h1 {margin: 0;}
#top #title h1 span {font-weight: 300;}
#top #title p {font-size: 2em; color: #fff; font-weight: 300;}

#top #scrollDown { text-align: center; font-size: 3em; bottom: 30px; position: absolute; left: 48.2%;}
#top #scrollDown a {color: #fff !important; opacity: .6; display: block;}
#top #scrollDown a:hover {opacity: 1;}

#osobie { padding-top: 60px; padding-bottom: 90px;}
#osobie p {font-size: 1.3em;}
#osobie figure {text-align: center !important;}

#projekty { background: #f4faff; padding-top: 60px; padding-bottom: 60px;}
#projekty h3 span {display: block; color: #009fe3; font-size: 3em; margin-bottom: .2em;}
#projekty p {font-size: 1.2em;}
#projekty ul {margin-bottom: 3em; margin-left: 0; padding: 0;}
#projekty ul li { list-style: none !important; background: url("../img/li.png") left .4em no-repeat; padding-left: 30px; margin-left: 0;}

#probono {padding-top: 60px; padding-bottom: 90px;}
#probono p {font-size: 1.3em; text-align: center;}

#kontakt { background: #f4faff; padding-top: 60px; padding-bottom: 200px;}
#kontakt p {font-size: 1.3em; text-align: center;}
#kontakt a {font-size: 3em; margin: 0 .2em; vertical-align: text-top;}
#kontakt a:hover {}
#kontakt .credits, #kontakt .credits a {font-size: 11px;}

/* DotNav */
#dot-nav{
	right: -50px;
	top: 50%;
	margin-top: -50px;
	height: 100px;
	z-index: 999;
	opacity: 0;
}

#dot-nav ul {
	list-style: none;
	margin:0;
	padding: 0;
}
#dot-nav li {
	position: relative;
	background-color: rgba(255,255,255,0);
	border:2px solid #009fe3;
	border-radius: 15px 15px 15px 15px;
	cursor: pointer;
	padding: 5px;
	height: 10px;
	margin: 10px 10px 0px 0px;
	width: 10px;
	vertical-align:bottom;
}
#dot-nav li.active, #dot-nav li:hover {
	background-color: #009fe3;
}

#dot-nav a {
	outline: 0;
	vertical-align:top;
	margin: 0px 0px 0px 25px;
	position: relative;
	top:-5px;
}
.awesome-tooltip + .tooltip > .tooltip-inner {
    background-color: #009fe3;
    color: #f5f5f5;
    border: 1px solid #009fe3;
}
.awesome-tooltip + .tooltip.left > .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #009fe3;
}


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

}

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

	body {font-size: 13px !important;}
	h2 {width: 50%;}
	#osobie figure {margin-bottom: 30px;}
	#projekty ul {font-size: 1.2em;}
	#dot-nav {display: none !important;}

}

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

	h2 {width: 80%;}

}