/* 
--------------------------------
KOLORY 

niebieski: #34C7E9
zielony: #A6D418

--------------------------------
*/

/* FONTY */
@font-face
{
	font-family: BankGothicBT-Light;
	src: url(../font/BankGothicBT-Light.otf);
} 

@font-face
{
	font-family: BankGothicBT-Medium;
	src: url(../font/BankGothicBT-Medium.otf);
}

@font-face
{
	font-family: Action_Man;
	src: url(../font/Action_Man.ttf);
} 

@font-face
{
	font-family: AndBasR;
	src: url(../font/AndBasR.ttf);
}  

@font-face {
	font-family: "Pacifico";
	src: url("../font/Pacifico.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}


/* wyzerowania domyslnych wartosci */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, bog, cite, code, img, ins, kbd, q, s, samp, small, strike, dl, dt, dd, ol, ul, il, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

ol, ul {list-style: none;}

table {border-collapse: collapse; border-spacing: 0;}

hr {display: none;}

img {border: 0;}

body { 
	background-color: #f5f5f5;
    color: #000;
    font-family: Tahoma,Verdana,ArialCE,HelveticaCE,Arial,Helvetica,sans-serif;
    font-size: 10px;
    margin: 0 auto;
}

/* HEDER */
#header { margin: 0px; padding: 0px; width:auto; background-color: #fff;}
#header-top { width:960px; height: 45px; margin: 0 auto;}
#header-bottom { background-color: #f5f5f5; height: 145px; border-top: 1px solid #efeded; border-bottom: 1px solid #bdbdbd;}
#header-linia { width:960px; height: 146px; margin: 0px auto; background: url(../images/cien-header.png) top left no-repeat;}
#header-content {  height: 146px; background: url(../images/logo-blask.png) 20% 100% no-repeat;}

/* FULLNAME */
#fullname { width: 403px; height:80px; padding: 40px 0px 0px 50px; float:left; }
h1 { color: #a6d418; font-size: 4em; font-family: BankGothicBT-Light; border-bottom: 2px solid #a6d418;}
span.podpis { color: /*#d7832a*/ #34c7e9; font-size: 2.3em; font-family: BankGothicBT-Medium;}

/*DOC-PDF*/
#doc-pdf { width: 403px; height:60px; float: right; margin-right: 30px;}
#content-doc-pdf { margin-left: 200px;}
#doc-pdf img { margin-top: 9px; margin-left: 10px; }


/* MENU */
#menu { width: 403px; height:80px; border: 0px solid red; float: right; margin-right: 30px; }
#menu ul { list-style:none;}
#menu ul li { float: left; /*width:93px;*/ margin: 0px; padding: 0px; background: url(../images/menu-button.png) top left no-repeat; width:93px; height:60px;}
#menu ul li a { display:block; margin:0px; font: 1.6em Arial, Helvetica, sans-serif; color: #727373; text-decoration: none; padding: 18px 0px 0px 20px; }
#menu ul li a:hover { display:block; margin:0px; font: 1.6em Arial, Helvetica, sans-serif; color: #727373; text-decoration: none; padding: 18px 0px 20px 20px; background: url(../images/menu-button-hover.png) top left no-repeat; }
/* MENU ostatni element menu*/
#menu ul li.linia-menu { background: url(../images/menu-button-last.png) top left no-repeat; height:60px;}
#menu ul li.linia-menu a:hover { background: url(../images/menu-button-hover.png) top left no-repeat; height:60px;}


/* WRAPPER I CONTENT*/
#wrapper { background: url(../images/wrapper-tlo.png) top left repeat; margin: 0px; padding: 20px 0px; border-top: 1px solid #FFF; border-bottom: 1px solid #bdbdbd; }

#content { width:960px; margin: 0px auto; background-color: #FFF; border: 1px solid #bdbdbd; background: url(../images/) }
#line-white { border: 1px solid #FFF; background: #FFF url(../images/shadow-top.png) top left repeat-x; }
#shadow-bottom { background: url(../images/shadow-bottom.png) bottom left repeat-x; padding: 50px; overflow:hidden;}
#shadow-bottom a { color: /*#ff2400*/ #ffff00; text-decoration: none; padding-right: 15px;}
#shadow-bottom a:hover { color: #ffff00; text-decoration: none;}

/*HOME*/
.projekt-duzy { float: left; width:859px; border: 1px solid #969696; border-radius: 5px; margin: 0px 0px 20px 0px; }
.projekt-maly{ width: 415px; height: 148px; margin: 0px; padding: 0px; border: 1px solid #969696; border-radius: 5px; }

.s1 { width: 474px; height: 149px; background: url(../images/projekty/min-home/projekt12.png) top left no-repeat;}
.s2 {  width: 385px; height: 149px; background: url(../images/projekt-duzy.png) top left no-repeat;}

#projekt-maly1 { width: 415px; height: 77px;  background: url(../images/projekty/min-home/projekt7.png) top left no-repeat; }
#projekt-maly2 { width: 415px; height: 77px; background: url(../images/projekty/min-home/projekt8.png) top left no-repeat; }
.d2 { width: 415px; height: 71px; background: url(../images/d2.png) top left no-repeat; }
.tytul { overflow:auto; color: #a6d418; font-size: 2.4em; font-family: BankGothicBT-Medium; margin-bottom: 5px; }
h4 { font-size: 1.em; float: left; display: block; width: 415px; height: 35px; background: url(../images/h4-shadow.png) bottom left no-repeat;}



/* FOOTER */
#footer { background: url(../images/footer-tlo.png) top left repeat; border-bottom: 1px solid #e6e6e6;}
#footer-content { width:960px; height:100px; margin: 0px auto; padding: 0px; background: url(../images/cien-header.png) 0% 80% no-repeat; }

#footer-content ul { float:right; list-style: none; width: 300px; margin: 0 auto; margin-top: 28px; margin-right: 190px;}
#footer-content ul li { display: inline;}
#footer-content ul li a { text-decoration: none; color: /*#a6d418 #8cb902*/ #8FBF00; font: 1.2em Verdana, Geneva, sans-serif; padding-right: 20px;} 

/*O MNIE*/
.o-mnie-left { float:left; width:650px; }
.o-mnie-right { float:right; width:200px; } 
.o-mnie-width100 { float:left; width: 100%; }
h5 { font: bold 1.2em Verdana, Geneva, sans-serif; margin-left: 10px; padding: 5px; line-height: 20px; }
.border-4px { border-left: 4px solid /*#a6d418*/ #34c7e9; margin: 4px; }
.daty, .czerwony { color: #a6d418; font: bold 1.2em Verdana, Geneva, sans-serif; margin-left: 10px; padding: 5px;  }
.o-mnie-right img { padding-top: 30px;}
.czerwony { color: #F00;}

/* KONTAKT*/
#dane-kontaktowe form { margin: 0px 0px 40px 0px; padding: 0px;}
#dane-kontaktowe form fieldset { border: 0px; width: 700px;}
#dane-kontaktowe form ul { margin: 20px 0px 20px 30px; padding: 0px; list-style: none;}
#dane-kontaktowe form ul li { margin: 0px; padding: 5px; list-style-image:none;}
#dane-kontaktowe form ul li label { margin: 0px; padding: 0px; display: block; width: 180px; float: left;}
#dane-kontaktowe form ul li textarea {margin: -15px 0px 5px 180px; }
#dane-kontaktowe form input, textarea{ border: 1px solid #7ce6ff; padding: 2px 0px;}
#wrapper #dane-kontaktowe form input#form-wyslij { float:right; background-color: #7ce6ff; padding: 5px 8px;  border: 1px solid #36adc8;}
#wrapper #dane-kontaktowe form input#form-wyslij:hover { background-color: #34c7e9;}
#dane-kontaktowe form h3 { margin: 0px 0px 0px 30px; padding: 0px; font-size: 1.3em; color: #61b4d6;}
#dane-kontaktowe { margin: 0px; padding: 0px 30px 15px 30px; border-bottom: 2px solid #cbc9c8;}

#dane-kontaktowe #form { font: bold  1em Verdana, Geneva, sans-serif; margin-left: 10px; padding: 5px; line-height: 20px; }

/* OPISY STRON*/
.projekty-stron { width: 200px; height: 201px; border: 3px solid #a6d418; margin-bottom: 20px;}
.opis1-stron { width: 600px;}
.opis2-stron { width: 100%;}
#shadow-bottom a.zielony{ color: #a6d418;}
#shadow-bottom ul { list-style:none;}
#shadow-bottom ul li { list-style-image: url(../images/strzalka-zielona.png); }
/*#shadow-bottom > div { clear:both; overflow:hidden; margin:0px; padding:0px;}*/
.clear-both { clear:both;}


h3 { margin: 0px 0px 10px 0px;}

.copyright { display: block; width: 200px; float:left; margin-top: 50px; margin-left: 30px; color: #a7a6a6;}
.portfolio { font: 80px BankGothicBT-Light; }
.right { float: right; }
.left { float: left;}
.border { border: 1px solid red;}
img:hover.flaga-polska { background: url(../images/flaga-polska-active.png) top left no-repeat; }
img:hover.flaga-angielska { background: url(../images/flaga-angielska-active.png) top left no-repeat; }

.left { float:left;}
.right { float:right;}
.d2-tekst { color: #FFF; font-size: 1.3em; font-family: Verdana, Geneva, sans-serif; margin-bottom: 5px;}
.status { padding-top: 8px; margin-left: 25px;}
.czas-realizacji { margin-left: 25px;}
.zadania { margin-left: 25px;}
.opis { margin-left: 25px; margin-top: 15px;}
.tekst { margin-right: 20px; font: 12px Verdana, Geneva, sans-serif; margin-bottom: }
.margin-top { margin-top: 10px;}
.margin-top2 { margin-top: 20px;}
.margin-top3 { margin-top: 8px;}
.margin-top4 { margin-top: 50px;}
.margin-left1 { margin-left:40px; }
.margin-left2 { margin-left:60px; }
.margin-left3 { margin-left:8px; }
.margin-topbottom { display:block; margin: 20px 0px;}
.margin-bottom { margin-bottom: 20px;}
.margin-ujemny { margin-top: -25px;}
.display { display: block;}
.strzalka { background: url(../images/strzalka.png) 100% 50% no-repeat; }
.color-black { color:#000;}
.hr { border-top: 2px solid #cbc9c8;}
.paski {  widrt: 100%; height:50px; background: url(../images/form.png) bottom left repeat-x;}
.projekty { width: 200px; height: 250px; border: 3px solid #a6d418; margin-bottom: 20px;}
.projekty-image { width: 200px; height: 200px;  margin: 0px; border-bottom: 2px solid #8bb114;}
.projekty-tytul { width: 200px; height: 50px; margin-bottom: 5px; background: url(../images/h4-shadow.png) 100% 50% no-repeat; background-color: #a6d418;}
.projekt-tekst {  font: bold 1em Verdana, Geneva, sans-serif; margin-left: 10px; padding: 5px; line-height: 20px; color: #454444;}
.a-font { font: 1.3em Verdana, Geneva, sans-serif;}
#wrapper .czarny { color: #454444;}
.tekst { color: #FFF; font-size: 1.3em; font-family: Verdana, Geneva, sans-serif; margin-bottom: 5px; line-height: 20px;}
.podpis-cv { margin-top: 15px; color: /*#d7832a*/ #34c7e9; font-size: 2.4em; font-family: BankGothicBT-Medium;}
.bold { font-weight:bold;}
.tytul-opis { font-size: 2.4em; font-family: BankGothicBT-Medium-opis;}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

/* PROJEKTY - BUTTONS */
.container-buttons { float:left; margin-left: 50px; width: 90%; height: auto; }

.button {
	width: 80px;
	height: 80px;
	border-radius: 50%; 
	background-color: #34c7e9;
	position:relative;
	float:left;
	margin-right: 50px;
	margin-left: 50px;
}

.button:after {
	content: "";
	display: block;
	width: 90px;
	height: 90px;
	border: 1px solid #34c7e9;
	position:relative;
	border-radius: 50%;
	top: -86px;
	left: -6px;
}

.button > div { 
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow:hidden;
}

.button > div > div { 
	width: 80px;
	height: 80px;
	border-radius: 50%;
	
	background-color: #A6D418;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transform-origin:left top;
	-moz-transform-origin:left top;
	-o-transform-origin:left top;
	-ms-transform-origin:left top;
	transform-origin:left top;
	 
	-webkit-transition-property:all;
	-moz-transition-property:all;
	-o-transition-property:all;
	-ms-transition-property:all;
	transition-property:all;

	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.button div a { 
	display: block;
	width: 57px;
	height: 30px;
	font-size: 1.6em;
	font-family: "Action_Man";
	padding-top: 28px;
	padding-bottom: 18px;
	padding-left: 9px;
	border-radius: 50%;
	color: #FF0; 
	text-align:center;
	position:relative;
	top: -80px;
	z-index: 10;
}
.container-buttons .button:nth-child(4) div a {
	padding-left: 2px
}

.container-buttons .button:nth-child(1) > div > div {
	background-color: #FF3D3D;
}
.container-buttons .button:nth-child(2) > div > div {
	background-color: #FFBB00;
}
.container-buttons .button:nth-child(3) > div > div {
	background-color: #A6D418;
}
.container-buttons .button:nth-child(4) > div > div {
	background-color: #ac59bb;
}

.button:hover > div > div {
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);

}

/* GRAFIKA */
.grafika { width: 90%; margin: 0 auto;}
.grafika ul li { 
	float:left; 
	
	margin: 25px;
	padding: 15px 15px 15px 15px;
	//border: 1px solid red;
	list-style:none !important;
	
	-webkit-box-shadow: 2px 2px 5px rgba(1,1,1,0.5);
	box-shadow: 2px 2px 5px rgba(1,1,1,0.5);
	-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-o-transform:rotate(2deg);
	-ms-transform:rotate(2deg);
	transform:rotate(2deg);
	
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	transition-property: all;
	
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	-o-transition-duration: 0.6s;
	-ms-transition-duration: 0.6s;
	transition-duration: 0.6s;

}

.grafika ul li:nth-child(3n+1){
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}
.grafika ul li:nth-child(2n+3){
	-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	-o-transform:rotate(-2deg);
	-ms-transform:rotate(-2deg);
	transform:rotate(-2deg);
}


.grafika ul li:hover {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
	
	z-index: 10;
}

.grafika ul li a { 
	margin: 0px;
	padding: 0px; 	
}

.grafika ul li a:after {
	content: attr(title);
	display:block; 
	//width: 300px;
	font-size: 2em;
	font-family: 'Pacifico';
	text-align:center;
	margin: 5px 0px;
	color: rgba(1,1,1,0.5);
	//border: 1px solid red;
}