@import url("reset.css") screen;

@import url("animation.css") screen;



/*COMMON*/

html {
height: 100%;
}

body, table, td, th {
font-family: candara, helvetica;
font-size: 100%;
height: 100%;
background: #fbfbfb;
}

#content {
position: relative;
width: 100%; 
height: 100%;
}

#top {
position: relative;
width: 100%;
height: 8em;
background: #fbfbfb;
z-index: 4;
}

#chmurka {
width: 10%;
position: absolute;
z-index: 2;
left: -20%;
top: 10%;
opacity:0.5;
animation: plynie 60s linear infinite;	
animation-delay: 120s;
-webkit-animation: plynie 60s linear infinite;
-webkit-animation-delay: 120s;
}

#chmurkacont {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

/*LOGO*/

#logo {
position: absolute;
width: auto;
top: 5.8%;
left: 1.1%;
z-index: 4;
}

#logo a{
text-decoration: none;
}


#logo h1 {
font-size: 2em;
font-family: Arial black;
font-weight: bold;
color: #eeeeee;
position: relative;
width: auto;
height: auto;
}

#logo h2 {
position: relative;
top: 0%;
font-size: 1em;
font-family: Euphemia;
text-transform: uppercase;
color: #eeeeee;
}


#rozr {
position: absolute;
right: 1%;
top: 1%;
z-index: 4;
}

#goup {
width: 7%;
height: 7%;
position: fixed;
top: 3%;
right: 3%;
background: #efefef;
z-index: 3;
border: thin solid #000000;
opacity: 0.9;
}

#sm {
width: 100%;
height: 100%;
position: absolute;
}


#upbar {
position: absolute;
width: 80%;
left: 10%;
height: 2px;
top: 25%;
background: #676767;
}

#midbar {
position: absolute;
width: 80%;
left: 10%;
height: 2px;
top: 45%;
background: #676767;
}

#downbar {
position: absolute;
width: 80%;
left: 10%;
height: 2px;
top: 63%;
background: #676767;
}

#downbar2 {
position: absolute;
width: 80%;
left: 10%;
height: 10%;
top: 85%;
background: #676767;
opacity: 0.5;
}

/*MENU*/

#menu {
display: block;
width: 100%;
height: 35%;
position: relative;
top: 5em;
z-index: 4;
}

.header{
display: block;
position: absolute;
width: 30%;
height: 97%;
background:rgba(0,0,0,0.05);
bottom: 0%;
border-style: solid;
border-width: thin;
border-color: #999;
}

#about {
left: 1%;
}

#projects {
left: 35%;
}

#contact {
left: 69%;
}

#menu h2{
text-align: center;
position: relative;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
font-family: Candara, Helvetica;
font-weight: bold;
color: #000000;
top: 0.75em;
}

#menu a{
text-decoration: none;
}


/*GALERIA*/

#galeria {
position: relative;
top: 0%;
width: 100%;
height: auto;
overflow: hidden;
}

.ramka {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
left: 0%;
top: 0%;
}

.skalar{
position: relative;
width: 100%;
z-index: -2;
}

.doskalara{
position: relative;
width: 100%;
z-index: 1;
}

/*FOOTER*/

#footer {
display: block;
width: 100%;
height: 7%;
position: relative;
background: rgba(0,0,0,0.05);
margin-top: 1%;
}

#footer p{
position: relative;
display: block;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 0.5em;
}

#footer a {
text-decoration: none;
color: #000000;
}

/*PODSTRONY GALERII*/

#title{
position: fixed;
left: 0.5em;
top: 0.5em;
width: auto;
height: 1.4em;
z-index: 3;
background: rgba(239,239,239,0.7);
}

#title h1{
position: relative;
font-size: 0.8em;
}

#title h2 {
font-size: 0.5em;
}

#obrazek {
position: relative;
overflow: hidden;
width: 100%;
height: auto;
background: #ffffff;
-webkit-animation: fadein 0.4s;
-moz-animation: fadein 0.4s;
-ms-animation: fadein 0.4s
-o-animation: fadein 0.4s;
animation: fadein 0.4s;
}

.imgo{
width: 100%;
margin-bottom: -1%;
}

#opisowy {
display: block;
position: fixed;
height: 20%;
width: 100%;
background: rgba(239,239,239,0.5);
bottom: -20%;
z-index: 2;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}

#opisowypion {
display: block;
position: fixed;
height: 11.65%;
width: 100%;
background: rgba(239,239,239,0.5);
bottom: -20%;
z-index: 2;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}

.igorny {
vertical-align: super;
font-size: 0.8em;
}


#obrazek:hover #opisowy{
bottom: 0%;
}

#obrazek:target #opisowy{
bottom: 0%;
}

#obrazek:hover #opisowypion{
bottom: 0%;
}

#obrazek:target #opisowypion{
bottom: 0%;
}

#minis {
position: absolute;
width: 98%;
height: 55%;
left: 1%;
bottom: 20%;
}

#minis li{
display: block;
float: left;
position: relative;
margin-left: 1%;
width: 9.3%;
height: 100%;
border-style: solid;
border-width: thin;
}

#minis img{
width: 100%;
height: auto;
}

.current {
border-color: red;
}

#aleft {
position: absolute;
width: 10%;
height: 99%;
left: 0%;
opacity: 0;
top: 0%;
background: pink;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}

#aright {
position: absolute;
width: 10%;
height: 99%;
right: 0%;
opacity: 0;
top: 0%;
background: pink;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}


#aleft:hover{
opacity: 0.5;
}

#aright:hover{
opacity: 0.5;
}


#opiswsuw {
display: none;
position: absolute;
width: 100%;
top: 19%;
max-width: 50em;
background: rgba(239,239,239,0.9);
min-height: 6.5em;
-webkit-animation: fadein 0.4s;
-moz-animation: fadein 0.4s;
-ms-animation: fadein 0.4s
-o-animation: fadein 0.4s;
animation: fadein 0.4s;
}

.opis {
text-align: justify;
text-indent: 1em;
font-size: 0.8em;
margin: 2%;
}

#short {
position: absolute;
width: 100%;
height: 100%;
}

#opiswsuw:target{
display: block;
}

/*PROJEKTY*/

.square-box{
position: relative;
width: 98%;
overflow: hidden;
background: #c2c2c2;
border: thin solid #999;
left: 1%;
}

.przerwa {
margin-bottom: 1%;
}

.square-box:before{
content: "";
display: block;
padding-top: 50%;
}

.square-content{
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #00000;
}

.square-content div {
display: table;
width: 100%;
height: 100%;
}

.wysrod {
display: table-cell;
text-align: center;
vertical-align: middle;
}

.square-content a {
font-size: 1em;
text-transform: uppercase;
text-decoration: none;
color: #000000;
}

.proimg {
position: absolute;
left: 0%;
top: 0%;
opacity: 0.2;
}

.proimg:hover {
opacity: 0.5;
}



/*LOADER*/

#loader {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 16.8%;
height: 20%;
margin: -10% 0 0 -10%;
border-radius: 50%;
border: medium solid transparent;
border-top-color: #3498db;
z-index: -1;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5%;
left: 5%;
right: 5%;
bottom: 5%;
border-radius: 50%;
border: medium solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}

#loader:after {
content: "";
position: absolute;
top: 11%;
left: 11%;
right: 11%;
bottom: 11%;
border-radius: 50%;
border: medium solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}

#formul {
min-height: 44em;
}

/*ABOUT*/

#abo {
position: relative;
top: 0%;
width: 98%;
margin: 0 auto;
max-width: 940px;
}

#bubu {
position: relative;
width: 100%;
height: 30%;
max-width: 295px;
float: left;
top: 0.5em;
margin-bottom: 1em;
margin-right: 5.5em;
}

.fota {
position: absolute;
height: 100%;
top: 0%;
right: -2%;
border: thin solid #c2c2c2;
}

#t_cont {
position: relative;
left: 0%;
height: 100%;
width: 11em;
display: inline-block;
margin-right: 1em;
}

#abo h1{
text-transform: uppercase;
font-weight: bold;
font-size: 180%;
text-align: right;
color: #eeeeee;
}

#abo h2{
text-transform: uppercase;
font-weight: bold;
font-size: 260%;
text-align: right;
color: #d7c9bb;
}

#cvresume {
position: relative;
float: left;
margin-right: 1em;
width: 100%;
max-width: 300px;
margin-top: 0.5em;
}

.left {
float: left;
}

.right {
float: right;
}

#tekst {
position: relative;
text-indent: 5em;
text-align: justify;
font-size: 100%;
color: #676767;
top: 0.75em;
}

#bazinga {
position: relative;
float: left;
border-bottom: thin solid #c2c2c2;
border-top: thin solid #c2c2c2;
margin-bottom: 1em;
margin-top: 1em;
}

#F {
position: relative;
width: 20%;
max-width: 100px;
left: 80%;
}

.male {
position: relative;
font-size: 80%;
width: 15em;
z-index: 2;
margin: 0 auto;
}


/*BADZIEWIA*/

.col {
position: relative;
max-width: 400px;
float: left;
margin-right: 2.5%;
margin-bottom: 0.7em;
min-width: 5.9em;
}


h4 {
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
color: #000000;
}

em {
font-size: 0.7em;
color: #676767;
}

.cvtext {
color: #000000;
font-size: 0.9em;
text-align: justify;
}

.pro {
color: green;
text-transform: uppercase;
font-weight: bold;
}

.prog5{
font-size: 1em;
}

.prog4{
font-size: 0.9em;
}

.prog3{
font-size: 0.8em;
}

.prog2{
font-size: 0.7em;
}

.prog1{
font-size: 0.6em;
}

.arch {
color: #f58bf4;
}

.lay2d {
color: #3498db;
}

.mod3d{
color: #e74c3c;
}

.opensource{
font-style: italic;
}

.tyci {
font-size: 0.9em;
}

#programosy {
position: relative;
top: 0.5em;
margin-bottom: 1em;
}

#programosy li {
display: inline-block;
font-size: 0.8em;
color: #676767;
padding-left: 0.2em;
}

.koleczko {
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
background: green;
}

.kmod3d{
background: #e74c3c;
}

.klay2d {
background: #3498db;
}

.karch {
background: #f58bf4;
}

#cvend {
position: relative;
width: 100%;
height: 1em;
border-top: thin solid #c2c2c2;
}

strong {
font-weight: bold;
}

/*SLIDER*/

#slider {
position: relative;
width: 500%;
top: 0;
left: 0;
overflow: visible;
}

#slider ul {
position: relative;
}

#slider li{
position: relative;
float: left;
width: 20%;
}

/* PROGRESS BAR */

#progress {
position: absolute;
width: 10%;
height: 4%;
right: 1%;
top: 0;
}

.progress-bar { 
position:relative;
top:0%;
height:10%;
background:rgba(0,0,0,0.3);
-moz-animation:fullexpand 5s ease-out infinite;
-webkit-animation:fullexpand 5s ease-out infinite;
animation:fullexpand 5s ease-out infinite;
}

.minimini {
position: absolute;
width: 12%;
height: 40%;
border-radius: 50%;
border: thin solid rgba(0,0,0,0.5);
top: 30%;
z-index: 2;
}

.pierw {
left: 0%;
}

.dru {
left: 22%;
}

.trze {
left: 44%;
}

.czwar {
left: 66%;
}

.pia {
left: 88%;
}

#srod {
position: absolute;
width: 12%;
height: 40%;
border-radius: 50%;
border: thin solid transparent;
background: orange;
top: 30%;
z-index: 1;
animation: kolorki 25s ease-out infinite;
}

/*ANIMACJA*/
.firstanimation {
-moz-animation:cycle 25s linear infinite;	
-webkit-animation:cycle 25s linear infinite;
animation:cycle 25s linear infinite;	
}

#slider .tooltip {
background:rgba(0,0,0,0.7);
width: 40%;
height:2em;
position:absolute;
bottom:-2em;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out; 
transition:all 0.3s ease-in-out;
}

#slider .tooltip h1 {
color:#ffffff;
font-size:1em;
line-height:2em;
padding-left:5%;
}


#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
bottom:0em;
}

#slider:hover~#progress #srod,
#slider:hover~#progress .progress-bar,
#slider:hover{
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
}

#first,
#second,
#third,
#fourth,
#fifth {
display: block;
}