@font-face {
    font-family: 'ubuntubold';
    src: url('ubuntu-bold-webfont.eot');
    src: url('ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-bold-webfont.woff') format('woff'),
         url('ubuntu-bold-webfont.ttf') format('truetype'),
         url('ubuntu-bold-webfont.svg#ubuntubold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ubuntu';
    src: url('ubuntu-regular-webfont.eot');
    src: url('ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('ubuntu-regular-webfont.woff') format('woff'),
         url('ubuntu-regular-webfont.ttf') format('truetype'),
         url('ubuntu-regular-webfont.svg#ubunturegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body { background: green; margin: 0px; padding: 0px; font: 1.1em ubuntu; background: url('images/bg_grid.jpg') 50% 50%; font-size: 16px; font-family: ubuntu, Arial, Verdana, Sans-Serif; }

ul, div, li, p, span { list-style-type: none; margin: 0; padding: 0; }
div, p, form { display: block; position: relative; }

img { border: 0; }

A:link, A:visited { color: #5e8cb7; text-decoration: none; }
A:hover { color: #1789F3; }

.header, .footer, .form_pos { max-width: 960px; width: 100%; float: none; margin: auto; }

.header { height: 146px; margin-top: -1px; }
.logo { width: 100%; display: block; float: left; }
.logo img { max-width: 320px; height: auto; display: block; }
form .logo { position: relative; top: -2px; margin-bottom: -2px; border-left: 1px solid #c7c7c7; border-right: 1px solid #c7c7c7; padding-bottom: 2%; vertical-align: top; }

strong { font-weight: normal; font-family: ubuntubold; }

.content { display: block; }
.form_wrap { background: #e2e2e2; float: left; width: 100%; }
form { background: #f5f5f5; width: 100%; border-top: 2px solid #fff; border-bottom: 2px solid #bcdaf5; display: block; float: left; }
.formaline { padding: 2% 10% 2%; width: 80%; display: block; float: left; height: auto; text-shadow: 1px 1px 1px #fff; border-left: 1px solid #c7c7c7; border-right: 1px solid #c7c7c7; }
.formaline.file { padding-bottom: 4%; }
.formaline.bottom { background: #5e8cb7 url('images/shadow_formaline_bot.png'); background-repeat: repeat-x; text-shadow: 1px 1px 1px #3c5975; border-color: #3c5975; height: 145px; padding: 0 10%; }
.formaline.bottom div { width: 60%; display: table-cell; float: left; vertical-align: middle; margin-top: 6%; }
.formaline.bottom .caption { color: #fff;  display: block; font-size: 0.76em; line-height: 1.6em; width: 80%; float: left; clear: none; margin-left: 15px; }
.error { text-align: center; background: rgb(219, 85, 85); color: #fff; display: block; padding: 3%; text-shadow: none; }
.error.ok {

-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;

background: rgb(119, 197, 122); }

@keyframes fadein {
    from { opacity: 0; }
        to   { opacity: 1; }
        }

        /* Firefox < 16 */
        @-moz-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
        }

        /* Safari, Chrome and Opera > 12.1 */
        @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
        }

        /* Internet Explorer */
        @-ms-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
        }

        /* Opera < 12.1 */
        @-o-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
        }

.current { text-align: center; background: #f5f5f5; border-top: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7; padding: 6% 10%; }
.current p { font-size: 1.55em; }

.butt_holder { width: 60%; }

input[type=submit] { background: transparent; border: 0px; }
input[type=checkbox] { display: block; width: 1.5em; height: 1.5em; float: left; }
#zgoda{float: none; margin-left: 50%; transform: translateX(-50%); width: 100px; height: 100px}
input[type=text] { border: 0; background: #797e83; color: #fff; width: calc(100% - 4%) !important; padding: 0 2%; font-family: ubuntu; font-size: 1.8em; display: block; height: 2em; line-height: 2em; float: left; }
input[type=text]:focus { background-color: #5e8cb7; }
input[type=file] { padding-top: 1%; display: block; float: left; height: 2em; }
input[type=image] { height: 182px; width: 320px; display: block; position: absolute; bottom: -37px; right: 10%; }


input[type=file]
{
    visibility: hidden;
    width:100%;
    position: relative;
    padding-top: 4em;
    float: left;
    display: block;
}

/*width: 100%;*/

input[type=file]:before, .misstake {
content: 'Wybierz plik';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
visibility: visible;
position: absolute;
left: 0;
right: 0;
top: 0;
font-size: 1.8em;
text-align: center;
padding: 2%;
line-height: 2em;
}

.input_file{
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
visibility: visible;
position: absolute;
left: 0;
right: 0;
top: 0;
font-size: 1.8em;
text-align: center;
padding: 2%;
line-height: 2em;
}

.misstake { position: relative; font-size: 0.76em; }

label { width: 40%; display: block; float: left; }
.label { color: #3b3b3b; font: 1.55em ubuntubold, Arial; line-height: 1.55em; display: block; float: left; clear: both; }
.caption { color: #737373; font: 0.8em ubuntu, Verdana; line-height: 1.2em; display: block; float: left; clear: both; }

.footer { float: left; }
.footer ul { display: block; float: left; background: #527799; color: #fff; margin: 3% 3% 3% 0%; width: 26%; font: 0.9em ubuntu; text-shadow: 1px 1px 1px #3c5975; }
.footer ul li { margin: 3% 4%; }

.formaline.next input[type=file] { width: 100%; }
.formaline.next input[type=file]:before { content: 'Wybierz kolejny plik'; }
.formaline.next .label { width: 100%; text-align: center; margin-bottom: 20px; }

.status{float: left;width: calc(100% - 10px);background: #008000;color: #fff;display: none;margin: 8px 0;padding: 5px;text-shadow: none;text-align: center}
.progress{float: left; display: none; margin: 10px auto;position: relative;width: 100%}
.bar{background: #008DE6;height: 30px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;transition: width 0.3s ease 0s;width: 0}
.percent{color: #333;left: 50%;transform: translateX(-50%) translateY(-50%);position: absolute;top: 50%;text-shadow: none;color: #fff}

@media screen and ( max-width: 767px ) 
{
body { font-size: 1em; }
/*.header, .footer, .form_wrap, .form_pos { width: 100%; }*/
.header { display: block; height: auto; float: left; }
.logo img { max-width: 900px; width: 90%; float: none; margin: 0px auto; }

.butt_holder { width: 100%; }

.content { background: transparent; }
.form_wrap { padding-top: 10%; background: #f5f5f5; border-top: 2px solid #fff; border-bottom: 2px solid #bcdaf5; padding-top: 0; }
form { background: transparent; border: 0; }
.formaline { padding: 3%; width: 94%; border: 0; position: relative; }
.formaline .caption { line-height: 1.2em; }
.formaline.bottom { height: auto; padding: 3%; }
.formaline.bottom div { width: 100%; }
.formaline.bottom div p { width: 100%; }
.formaline.bottom .caption { position: relative; width: 85%; float: left; display: block; padding-bottom: 3%; top: 0; left: 0; clear: none; margin-left: 4%; }
input[type=text] { width: 96%; }
input[type=checkbox] { float: left; position: relative; display: block; top: 0; left: 0; }
label { width: 100%; height: auto; margin-bottom: 3%; }
/*.label { font: 4em ubuntubold; }
.caption { font: 2.5em ubuntu; }*/
input[type=image] { max-width: 900px; width: 90%; height: auto; display: block; float: none; margin: 0 auto 5%; position: relative; top: 0; right: 0; }
/*
input[type=checkbox] {
-ms-transform: scale(4); /* IE */
-moz-transform: scale(4); /* FF */
-webkit-transform: scale(4); /* Safari and Chrome */
-o-transform: scale(4); /* Opera */ 
*/
float: none; margin: 0 auto;
margin-bottom: 5%;
}

input[type=file]
{
    width:100%;
    padding-top: 20%;
}

input[type=file]:before {
font-size: 3em;
text-align: center;
padding: 3%;
}

.misstake { font-size: 0.5em; }


.footer ul { width: 90%; display: block; float: none; margin: 3% auto; font-size: 1em; }
.footer ul li { padding: 3%; }
}