@import url('https://fonts.googleapis.com/css?family=Orbitron');

html {
    height: 100%;
}

body{ color: #FFF; 
font-family: 'Orbitron', sans-serif;
letter-spacing: 2px;
background: #000 url( i/circuit-board-frame-green.gif ) 50% 50%; background-size: cover;
padding-bottom: 50px;
height: 100%;
overflow-x: hidden;
}

#circuts{
	background: #000000;
	background: -moz-radial-gradient(center, ellipse cover, #000000 rgba(8,22,33,0.98), #081621 100%);
	background: -webkit-radial-gradient(center, ellipse cover, #000000 53%,rgba(8,22,33,0.98) 100%);
	background: radial-gradient(ellipse at center, #000000 53%,rgba(8,22,33,0.98) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#081621',GradientType=1 );
}

#circuts.circuts3{
	background: #000000;
	background: -moz-radial-gradient(center, ellipse cover, #000000 rgba(8,22,33,0.85), #081621 100%);
	background: -webkit-radial-gradient(center, ellipse cover, #000000 53%,rgba(8,22,33,0.85) 100%);
	background: radial-gradient(ellipse at center, #000000 53%,rgba(8,22,33,0.85) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#081621',GradientType=1 );
}

.b{ font-weight: bold }
.red{ color: #F77 }

.bf{ border: #2b4067 1px solid; border-radius: 2px; -webkit-box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); -moz-box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); }

/*  Glowne zdjecie  */
.mainpic{ background: url( i/cv_photo.jpg ) 50% 50% no-repeat; background-size: cover; min-height: 600px; margin-top: 8px; padding: 0}
.mainpic.evil{  background: url( i/cv_photo2.jpg ) 50% 50% no-repeat;}
.mainpic.busy{  background: url( i/cv_photo3.jpg ) 50% 50% no-repeat;}
.MainPicDesc{  position: absolute; bottom: 0; left:0; right:0; padding: 20px; background: rgba( 10, 10, 10, 0.3) }
.MainPicDesc h1{ font-size: 1.6em; margin-top: 0 }
.mainpic .interlace{ position: absolute; width: 100%; height: 100%; min-height: 600px; background: url( i/interlace.png ) 50% 50%; margin:0; padding: 0; ; opacity: 0.3; animation-name: opacityfade2; animation-duration: 0.2s; animation-iteration-count: infinite;}
.mainpic .noise{ width: 100%; height: 100%; min-height: 600px; background: url( i/d404.gif ) 50% 50%; margin:0; padding: 0; opacity: 0.1; animation-name: opacityfade; animation-duration: 16s; animation-iteration-count: infinite;}
.buffer{ width: 1px; height: 1px; opacity: 0.01; overflow: hidden }
#hiretime{ position: relative; top: 24px; text-align: right; font-size: 0.9em; color: #F77 }

.perk .brick{ background: rgba( 0,0,0, 0.6); margin: 8px 0; text-transform: uppercase; height: 50px; line-height: 50px;
	border: #2b4067 1px solid; border-radius: 2px; -webkit-box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); -moz-box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33);
	background: #3d3d3d;
	background: -moz-linear-gradient(-45deg, #3d3d3d 0%, #0e0e0e 100%);
	background: -webkit-linear-gradient(-45deg, #3d3d3d 0%,#0e0e0e 100%);
	background: linear-gradient(135deg, #3d3d3d 0%,#0e0e0e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#0e0e0e',GradientType=1 );
 }
.perk .brick:hover{ 
	background: #494f4d;
	background: -moz-linear-gradient(-45deg, #494f4d 0%, #0e0e0e 100%);
	background: -webkit-linear-gradient(-45deg, #494f4d 0%,#0e0e0e 100%);
	background: linear-gradient(135deg, #494f4d 0%,#0e0e0e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494f4d', endColorstr='#0e0e0e',GradientType=1 );
 }
 
 
.perk .brick .icon{ width: 50px; height: 49px; float: left; margin-right: 20px;
	border: #2b4067 1px solid; border-radius: 2px; 
	background: #3d3d3d;
	background: -moz-linear-gradient(-45deg, #3d3d3d 0%, #0e0e0e 100%);
	background: -webkit-linear-gradient(-45deg, #3d3d3d 0%,#0e0e0e 100%);
	background: linear-gradient(135deg, #3d3d3d 0%,#0e0e0e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#0e0e0e',GradientType=1 );
}
.icon .programming{ width: 100%; height: 100%; background: transparent url('i/icon_programming.png') 150% 150% no-repeat; background-size: 40px 40px; }
.icon .analysing{ width: 100%; height: 100%; background: transparent url('i/icon_analysing.png') 150% 150% no-repeat; background-size: 40px 40px; }
.icon .engineering{ width: 100%; height: 100%; background: transparent url('i/icon_engineering.png') 150% 150% no-repeat; background-size: 40px 40px; }
.icon .idea{ width: 100%; height: 100%; background: transparent url('i/icon_idea.png') 150% 150% no-repeat; background-size: 40px 40px; }
.icon .improvisation{ width: 100%; height: 100%; background: transparent url('i/icon_improvisation.png') 150% 150% no-repeat; background-size: 40px 40px; }
.icon .inteligence{ width: 100%; height: 100%; background: transparent url('i/icon_inteligence.png') 150% 150% no-repeat; background-size: 40px 40px; }

.perk .brick .icon div{
	animation-name: slidecornerback;
    animation-duration: 0.5s;
	animation-iteration-count: 1;
	 background-position: 150% 150%; 
}

.perk .brick:hover .icon div{
	animation-name: slidecorner;
    animation-duration: 0.5s;
	animation-iteration-count: 1;
	 background-position: 50% 50%; 
}
#bricktitle{ min-height: 30px; font-size: 0.8em; margin-top: 10px }



.MainPicDesc{
	-webkit-animation-name: fadein; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: fadein;
    animation-duration: 4s;
}

@keyframes slidecorner {
    from { background-position: 150% 150%; }
    to { background-position: 50% 50%; }
}
@keyframes slidecornerback {
    from { background-position: 50% 50%; }
    to { background-position: 150% 150%; }
}

@-webkit-keyframes fadein {
    from { opacity: 0.1 }
    to { opacity: 1.0 }
}
@keyframes fadein {
    from { opacity: 0.1 }
    to { opacity: 1.0 }
}

@keyframes opacityfade {
    0%   { opacity: 0 }
    25%  { opacity: 0.03 }
    50%  { opacity: 0.07 }
    75%  { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes opacityfade2 {
    0%   { opacity: 0.09 }
    25%  { opacity: 0.15 }
    50%  { opacity: 0.17 }
    70%  { opacity: 0.12 }
	50%  { opacity: 0.17 }
    100% { opacity: 0.09 }
}


.skills{ margin-bottom: 20px }
.skillhead h3{ text-transform: uppercase; height: 50px; line-height: 50px; text-align: center; margin-top: 0; padding-top: 0 }
.skills .box { margin-bottom: 4px }

.Project h3{ color: #236aa7 }

}
.skills .box .name { text-transform: uppercase; height: 25px; line-height: 25px; text-align: center; white-space: nowrap }
.skills .box .level { background: rgba( 20,20,20, 0.6); text-transform: uppercase; height: 25px; line-height: 25px; text-align: center }
.skills .box .fill { 
background: #1f497c;
background: -moz-linear-gradient(left, #1f497c 0%, #17285b 100%);
background: -webkit-linear-gradient(left, #1f497c 0%,#17285b 100%);
background: linear-gradient(to right, #1f497c 0%,#17285b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f497c', endColorstr='#17285b',GradientType=1 );
text-transform: uppercase; height: 25px; float: left; margin-left: -15px; text-align: left; padding: 0 0 0 30px;
}
.skills .box .fill .years{
	font-size: 0.7em;
	opacity: 0.5;
}
.skills .box .lock { 
background: url(i/locked.png) 0 0 no-repeat;
text-transform: uppercase; height: 25px; float: left; margin-left: -15px;
width: 25px;
opacity: 0.3;
}
.skills .box:hover  .lock{ opacity: 0.5 }


/* karty textowe */
fieldset{ background: url( i/interlace2.gif ) 50% 50%; margin: 15px 0; padding: 0 15px 15px 15px }
fieldset legend{ position: relative; top: -18px; border: 0; color: #FFF; width:auto; margin: 15px 0 0 0;
background: -moz-linear-gradient(top, rgba(50,151,229,0) 0%, rgba(36,107,177,1) 68%, rgba(30,87,153,1) 99%);
background: -webkit-linear-gradient(top, rgba(50,151,229,0) 0%,rgba(36,107,177,1) 68%,rgba(30,87,153,1) 99%);
background: linear-gradient(to bottom, rgba(50,151,229,0) 0%,rgba(36,107,177,1) 68%,rgba(30,87,153,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003297e5', endColorstr='#1e5799',GradientType=0 );
}
fieldset legend .text{padding: 4px 20px;}
.noised{ width: 100%; height: 100%; background: url( i/d404.gif ) 50% 50%; margin:0; padding: 0; opacity: 0.05; position: absolute }
.scrollable{ max-height: 500px; overflow-y: scroll }
.favgame{ padding-right: 50px;  }
#zgoda{ margin-top: 20px; font-size: 0.8em; opacity: 0.6; }
.sttr_btn{ margin-top: 20px; font-size: 0.8em; padding: 5px 10px; float: right;  border: #2b4067 1px solid; cursor: pointer; -webkit-box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); -moz-box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33); box-shadow: 0px 0px 5px 1px rgba(181,255,255,0.33);  }


/*  Minigierka statek matka */
.MotherShip{ width: 80px; height: 40px; position: absolute; background: url(i/mothership.gif) 50% 50% no-repeat; background-size: 64px 28px; }
.MotherShip.fly{ left: -10%;  animation-name: motherfly; animation-duration: 8s; animation-iteration-count: 1; }
@keyframes motherfly {
    from { left: -10%; rotate(0.02deg); }
    to { left: 120% ; rotate(0.01deg); }
}

.MotherShipPoints{ width: 64px; height: 28px; position: absolute; font-size: 15px; color: #FFF; animation-name: points; animation-duration: 3s; animation-iteration-count: 1; opacity: 0 }
@keyframes points {
    0%   { opacity: 1 }
    50%  { opacity: 0 }
    100% { opacity: 0 }
}
#SCORE{ display: none; position: fixed; bottom: 4px; left: 4px; font-size: 15px; color: #FFF; }


	/* Large Devices, Wide Screens */
	@media only screen and (max-width : 1200px){
		#hiretime{ font-size: 0.8em }
	}

	/* Medium Devices, Desktops */
	@media only screen and (max-width : 992px){
		.skillhead h3{ height: 100px }
		#mainpic{ margin-bottom: 40px }
	}

	/* Small Devices, Tablets */
	@media only screen and (max-width : 768px){
		.skills .box{ font-size: 1em; white-space:nowrap }
		.bf{width: calc( 100% - 10px);}
		.skillhead h3{ height: auto }
	}

	/* Extra Small Devices, Phones */
	@media only screen and (max-width : 480px){
		
	}

	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
		
	}