html {
  overflow-y: scroll;
  overflow-x: hidden;
}
body{
	margin: 0;
	background-color: #f9f9f9;
	//background-color: green;
}

.linkzorjump{
	background-color: green;
	height:1px;
	top:-50px;
	opacity: 0;
	position:relative;
}
@media only screen and (max-device-width: 1100px) {
	.linkzorjump{
		background-color: green;
		height:1px;
		top:-120px;
		opacity: 0;
		position:relative;
	}
}
.logodiv{
	text-align: center;
	margin-top:110px;
	margin-bottom: 20px;
}
.logodiv > img{
	width: 60%;
	max-width: 600px;
	height: auto;
}
.sub{
	margin-left: 50%;
	width: 70%;
	max-width: 700px;
	text-align: center;
	transform: translateX(-50%);
	font-family: 'Open Sans', sans-serif;
	font-size: 80% !important;
	letter-spacing: .5px;
	color: #484848;
}
.navbar{
	position: fixed;
	width: 100%;
	height: 50px;
	background-color: #484848;
	top:0;
	left:0;
	font-family: 'Francois One', sans-serif;
	font-size: 16px;
	overflow:visible;
}
.navbarbox{
	display: block;
	width:50px;
	height:50px;
	position: relative;
	background-color:#ff0000;
	top:0;
	left:0;
	overflow:visible;
	cursor:pointer;
}
.navbar>a:first-child {
	top: 0;
}
.navbar>a {
    text-decoration: none;
	color: #fff;
	position: relative;
	white-space:nowrap;
	top:-36px;
	
}
#link1{
	margin-left: 70px;
}
#link2{
	margin-left: 30px;
}
#link3{
	margin-left: 30px;
}
#link4{
	margin-left: 30px;
}


@media only screen and (max-device-width: 1100px) {
		.logodiv{
			margin-top:200px;
		}
		.sub{
			max-width: 800px;
			font-size: 150% !important;
		}
		.navbar{
			height: 120px;
			font-size: 220% !important;
		}
		.navbarbox{
			width:13%;
			max-width:120px;
			height:120px;
		}
		.navbar>a {
			color: #fff;
			//color:green;
			top:-80px;
		}
		#link1{
			margin-left: 17%;
		}
		#link2{
			margin-left: 5%;
		}
		#link3{
			margin-left: 5%;
		}
		#link4{
			margin-left: 5%;
		}
}
.title {
	font-family: 'Francois One', sans-serif;
	color: #484848;
	text-align: left;
	font-size: 200%;
	margin-top: 60px;
	//margin-bottom: 30px;
}
.text-block{
	width: 90%;
	max-width: 750px;
	transform: translateX(-50%);
	margin-left:50%;
	margin-top: 30px;
	margin-bottom: 0px;
}
.animacja{
	width: 70%;
	max-width: 500px;
	transform: translateX(-50%);
	margin-left:50%;
	margin-top: 80px;
	margin-bottom: 50px;
}
@media only screen and (min-device-width: 1100px) {
	.animacja{
	max-width: 420px;
}
}
.animacja>img{
	position:absolute;
	width:100%;
	height:auto;
	
}
#kv1{
	animation-name: kv1anim;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
@keyframes kv1anim {
	0% {transform: translateY(0) rotateZ(0.1deg);}
	50% {transform: translateY(-10px) rotateZ(0.1deg);}
	100% {transform: translateY(0) rotateZ(0.1deg);}
}
#kv2{
	animation-name: kv2anim;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
@keyframes kv2anim {
	0% {transform: translateY(0) rotateZ(0.1deg);}
	50% {transform: translateY(13px) rotateZ(0.1deg);}
	100% {transform: translateY(0) rotateZ(0.1deg);}
}
#kv3{
	animation-name: kv3anim;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
@keyframes kv3anim {
	0% {transform: translateY(0) rotateZ(0.1deg);}
	50% {transform: translateY(-15px) rotateZ(0.1deg);}
	100% {transform: translateY(0) rotateZ(0.1deg);}
}
#kv4{
	animation-name: kv4anim;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: ease;
}
@keyframes kv4anim {
	0% {transform: translateY(0) rotateZ(0.1deg);}
	50% {transform: translateY(17px) rotateZ(0.1deg);}
	100% {transform: translateY(0) rotateZ(0.1deg);}
}
.text{
	font-family: 'Open Sans', sans-serif;
	margin-top: 30px;
	margin-bottom: 0px;
	font-size: 85% !important;
	color: #484848;
	/*overflow: hidden;*/
	height: auto;
}

/* @media only screen and (max-device-width: 1100px) {
.text{ 
	font-family: 'Open Sans', sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 85% !important;
	overflow: hidden;
	color: red;
	}
}*/

.rozwin{
	text-align: center;
	margin-top: 50px;
	cursor: pointer;
}
.rozwin > img{
	width: 80%;
	max-width: 289px;
	height:auto;
}
.about-off{
	display: none;
}

#aboutme1 .dot {
	display: none;
}

#btn1{
	display:inline-block;
}

#btn2{
	display:none;
}

.barpack{
	width: 100%;
	max-width: 800px;
	margin-left:50%;
	transform: translateX(-50%);
	overflow:hidden;
}
.bar{
	width:100%;
	height: 40px;
	background-color:#ececec;
	overflow:hidden;
}
@media only screen and (min-device-width: 1100px) {
	.bar{
	width:100%;
	height: 30px;
	background-color:#ececec;
}
}
.barfill{
	position:relative;
	height:100%;
	left:0;
	background-color:#8a8a8a;
}
#fill1{
	width:80%;
}
#fill2{
	width:85%;
}
#fill3{
	width:90%;
}
#fill4{
	width:55%;
}
#fill5{
	width:60%;
}
#fill6{
	width:90%;
}
#fill7{
	width:85%;
}
#fill8{
	width:85%;
}
#fill9{
	width:85%;
}
#fill10{
	width:75%;
}
#fill11{
	width:70%;
}
#fill12{
	width:10%;
}
#fill13{
	width:90%;
}
#fill14{
	width:55%;
}
#fill15{
	width:17%;
}
#fill16{
	width:70%;
}
#fill17{
	width:50%;
}
#fillgpt{
	width:80%;
}
#fillscripting{
	width:60%;
}




.barslider{
	position:relative;
	width:40px;
	transform: translateX(-2px);
	height:100%;
	left:100%;
	top:0;
	background-color:#ff0000;
}
.barname{
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	margin-bottom: 10px;
	margin-top: 30px;
	font-size: 85% !important;
	color: #484848;
}
.bartext{
	font-family: 'Open Sans', sans-serif;
	margin-top: 15px;
	font-size: 85% !important;
	color: #484848;
}
.triangleout{
	width:150%;
	height:100%;
	animation: triangleanim2 0.6s infinite linear;
	margin-left:0px;
	overflow: visible;
	//background-color: green;
}
.bar-triangle { 
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent; 
	border-left: 10px solid #ff0000; 
	border-bottom: 5px solid transparent; 
	left: 80%;
	top: 50%;
	transform: translateY(-50%);
	position: relative;
	float:left;
	margin-right:2px;
}

@keyframes triangleanim2{
	0% {margin-left:0px;}
	50% {margin-left:6px;}
	100% {margin-left:0px;}
}
#skrzynka{
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	//margin-top: 5px;
	font-size: 85% !important;
	color: #484848;
	cursor:pointer;
}
.contacts{
	width:100%;
	text-align: center;
	margin-top: 50px;
	
}
.contacts>a{
	width:100%;
	//text-align: center;
	//margin-top: 50px;
	margin: 20px;
	margin-bottom:0;
	//position:relative;
}