body
{

font-family: 'Raleway', sans-serif;

margin: 0 !important;
}

.clearfix{
	
clear:both;	
}
.wh{
	background-color: white;
	
}
#calosc{
width: 100%;
margin: 0px auto;
display: block;
}


#header{
background: url(tlo.jpg);
	background-repeat: no-repeat;
	background-position: top;
	width: 100%;
height: 470px;
background-size: cover;
text-align: center;
color: #800000;
}

#header2{
background: url(tlo2.jpg);
	background-repeat: no-repeat;
	background-position: top;
	width: 100%;
height: 470px;
background-size: cover;
text-align: center;
}

#header3{
background: url(tlo5.jpg);
	background-repeat: no-repeat;
	background-position: top;
	width: 100%;
height: 460px;
background-size: cover;
text-align: center;
}

#menu{
padding: 10px;
width: 90%;
color: #800000;
	
}

a.left, a.right {
  position: fixed;
  bottom: .5em;
  font-family: monospace;
}
a.left { left: 1ch; }
a.right { right: 1ch; }



.download{
border-color: black;
	display: block;
	padding: 30px;
	width: 40%;
	text-align: left;
	font-family: 'Raleway', sans-serif;
	margin-right: 1%;
font-size: 23px;


}
.download a{
	 text-decoration: none; 
color: white;
}
	
.download a:hover{
	
	color:white;
}


.download1{

	height: 20px;
	display:inline-block;
	float:right;
	border: 1px solid;
	padding: 10px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
font-size: 13px;
	margin-RIGHT: 50px;
}


.download1:hover{
	
	color: #800000;
}


.download2 {
	color: #800000;
	height: 40px;
	display: block;
margin-bottom: 10px;

width: 90%;
	text-align: center;
	font-family: 'Raleway', sans-serif;
font-size: 20px;
font-style: bold;


}
.download2 a{
	display: block;
	text-decoration: none;
	color: black;
	border-color: black;
	margin: 10px;
	width: 20%;
	font-style: bold;
	
}
.download:hover{
	border-color: #800000;
	color: #800000;
	
}


.download2:hover a{
	border-color: #800000;
	color: #800000;

}

.download:hover {
background-color:white;
border-color: #800000;
}

.download:hover a {
	color: #800000;
}

.ltekst{
	display: inline-block;
	width: 50%;
	float: left;
margin-top: 10px;
margin-bottom: 10px;

}

.tekst{
	display: inline-block;
	width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}

.rtekst{

	display: inline-block;
	width: 50%;
	float: right;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
	
}

.email{
	float: left; 
	text-align: center;
	width: 50%;
	height: 200px;
	}
.phone{
		float: right; 
	text-align: center;
	width: 50%;	
	height:200px;
	
}
.p1{
	
	display: block;
	width: 100%;
	margin-top: 0px;
float:left;
margin-bottom: 20px;
}
.p2{
	
	display: inline-block;
	width: 30%;
	margin-top: 0px;
	margin-left: 40px;
float:left;
}
.p3{
	
	display: inline-block;
	width: 30%;
	margin-top: 0px;
		margin-left: 40px;
float:left;
}


.sticky{
	position: fixed;
	left: 0;
	top: 0;

}


.education{
	
font-family: 'Raleway', sans-serif;
overflow:auto;
display: inline-block;
padding-top: 10px;
padding-bottom: 5px;
width: 100%;
}

.oferta{
display: block;
font-family: 'Raleway', sans-serif;
overflow:auto;
padding-top: 20px;
width: 100%;
}


#naglowek{
	font-size: 80px;
	padding-top: 180px;



font-weight: lighter;
margin: 0;
}

h1{
	
font-size: 34px;
margin-left: auto;
margin-right: auto;
color: BLACK;
text-align: left;
}

hr{
    width: 80px;
    text-align: left;
    background-color: #800000;
    height: 3px;
    float: left;
    border: 0;
}

h2{
font-size: 23px;	
margin: 0;

}


h3{
	color: #AAAAAA;
	font-size: 20px;
}

.container{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}


.opis{
	
height: 500px;
position: static;
background-color: #F3F3F3;
top: 1000px;

}

#footer{
	background: url(solar.jpg);
	height: 250px;
	text-align: center;
	width: 100%;
}

#footer2{
		color: white;
	background: url(footer.png);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	height: 250px;
	width: 100%;
	padding: 0;	
	text-align: center;
}

#footer3{
	background: url(footer2.png);
		background-repeat: no-repeat;
		background-position: top;
		background-size: cover;
	height: 250px;
	text-align: center;
	width: 100%;
	padding: 0;	
}


#colorskills{
	color:white;
}

.kwadrat1{

text-align: center;
	width:220px;
	height:220px;
	background-color: #EDEFF5;
	float:left;

	z-index: 1;
	
}
.kwadrat1:hover{
	
	background-color:#8A99B3;
}

.kwadrat2:hover{
	
	background-color:#8A99B3;
}
.kwadrat2{
	width:220px;
	height:220px;
text-align: center;

	background-color: #BBC8DD;
	float:left;

	z-index: 1;
}

h4{
	color:#800000;
}

#hblue{
	height: 400px;
	width: 50%;
	background-color: #2E4975;
	display: inline-block;
	float: left;
	color: white;

}

#lewytekst{
float: right;
width: 70%;

margin-top: 60px;
}

#form{
float: left;
width: 70%;
margin-top: 60px;
margin-left: 60px;

}

#dane1{
    float: LEFT;
    width: 40%;
    height: 230px;
	
}

#dane2{
    display: inline-block;
    color: white;
    width: 40%;
    float: left;
	
}
input{
	border-bottom: 2px solid #2E4975;
	border-top: none;
	border-right: none;
	border-left: none;
	background-color: #D0D5EF;
	margin-right: 30px;
}
textarea{
	border-bottom: 2px solid #2E4975;
	border-top: none;
	border-right: none;
	border-left: none;
	background-color: #D0D5EF;
}

#gblue{

	background-color: #D0D5EF;
	height: 400px;
	width: 50%;
	display: inline-block;
	float: left;

}
#koniec
{
	text-align:center;
}

@media (max-width: 600px) {
	.container{
	width: 85%;
		
	}
	
  .ltekst{
	width:100%;
    display: block;
  }
    .rtekst{
	width:100%;
    display: block;
  }
  
    .phone{
	  width:100%;
    display: block;
  }  
  
      .email{
	  width:100%;
    display: block;
  }

  .download{
width:	100%;  
	  
  }
  
  h1{
font-size: 27px;	  
	  
  }
  .tekst{
	  margin-top: 5px;
	  margin-bottom: 50x;
	  
	  
  }
  
}