/* TODO: [required]::before { content "*"; *//* color: red; */
/*TODO: zunifikować kolory*/
/*TODO: w pewnych miejscach REMy zastąpić EMami*/




/*RESET CSS*/
a,abbr,address,article,aside,audio,blockquote,body,b,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,i,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline;font-weight:inherit;font-style:inherit;font-size:100%;}q:after,q:before{content:"";}a,ins,del{text-decoration:none;}ul,ol{list-style:none;}table{border-spacing:0;border-collapse:collapse;}caption,th{text-align:left;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, legend, menu, nav, section, summary {display: block;}
/*RESET CSS - END*/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 .clearfix:after {
    clear: both;
}

.visuallyhidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;   
}

.ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.break {
    -ms-word-break: break-all;
    word-break: break-all;
 
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
 
.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}

pre {
    white-space: pre-wrap;       /* Chrome & Safari */
    white-space: -moz-pre-wrap;  /* Mozilla since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
 
        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
        -webkit-filter: grayscale(100%);         /* Chrome + Safari 6 */
        -moz-filter: grayscale(100%);            /* Future proof */
        -ms-filter: grayscale(100%);             /* Future proof */
        -o-filter: grayscale(100%);              /* Future proof */
        filter: grayscale(100%);                 /* Future proof or polyfilled */
    }
 
    a {
        text-decoration: underline;
    }
 
    a[href]:after {
        content: " (" attr(href) ")";
    }
 
    a[href="#"],
    a[href="javascript:"] {
        content: "";
    }
}


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    /* Your retina specific stuff here */
}



/*HACKS*/
html{
    font-size: 16px;
}
body{
    overflow-y: scroll;
    font-family: sans-serif;
}
/*HACKS - END*/

/*------------------------------------------------------------------NAVIGATION*/
/*HORIZONTAL NAV*/
.hfast{
    
}

.hfast ul, ul.hfast, .fast .hast ul, .hfast ul.fast .fast.hfast ul, .hfast.fast ul, .fast ul.hfast{
    overflow: auto;
    width: 100%;
/* height: 2.5rem; */
    background: -moz-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,0.75) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* W3C */
    background-size: auto 2.5rem;
    box-shadow: inset 0 1px 0 0 rgba(160,160,160,0.5), inset 0 -1px 0 0 rgba(160,160,160,0.5), inset 0 2px 0 0 rgba(255,255,255,0.5), 0 1px 0 0 rgba(255,255,255,0.5);
    list-style-type: none;
    text-shadow: 0px 1px 1px #fff;
    line-height: 2.5rem;
}

.hfast li{
    float: left;
/* margin-left: -1px; */
/* padding-bottom: 1px; */
/* box-shadow: 0 0 0 1px rgba(160,160,160,0.5), 1px 1px 0 1px rgba(255,255,255,0.5); */
box-shadow: inset -1px -1px 0 0 rgba(160,160,160,0.5), 1px 1px 0 0 rgba(255,255,255,0.5);
}

.hfast a{
    display: block;
    padding: 0 1rem;
    height: 100%;
    color: rgb(65, 105, 225);
}

.hfast a:hover, .hfast a:focus{
    background: rgba(235, 235, 235, 0.75);
}

.hfast a:active{
    background: rgba(235, 235, 235, 0.75);
    color: rgb(25, 25, 112);
}

/*HORIZONTAL NAV - END*/
/*VERTICAL NAV*/
.vfast{
    
}

.vfast ul, .vfast .fast ul, .vfast ul.fast{
    overflow: auto;
    margin-bottom: 1rem;
    width: 100%;
    box-shadow: 0 0 0 1px rgba(160,160,160,0.5);
    text-shadow: 0px 1px 1px #fff;
}

.vfast li, .fast .vfast li, .vfast li.fast{
    display: block;
    overflow: hidden;
    min-height: 1.1rem;
    background: -moz-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,0.75) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* W3C */
    box-shadow: 0 0 0 1px rgba(160,160,160,0.5);
    line-height: 1.1rem;
}

.vfast a, .fast .vfast a, .vfast a.fast{
    display: block;
    padding: 0.7rem;
/*TODO: hypens in nav?*/
    height: 100%;
    color: rgb(65, 105, 225);
    text-decoration: none;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.vfast a:hover, .vfast a:focus{
    background: rgba(235,235,235,0.75);
}

.vfast a:active{
    background: rgba(235,235,235,0.75);
    color: rgb(25, 25, 112);
}
/*VERTICAL NAV - END*/
/*BREADCRUMBS*/
.bfast{
    
}

.bfast ul{
    width: 100%;
    height: 2.5em;
    background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* W3C */
    box-shadow: 0 0 0 1px rgba(160,160,160,0.5);
    text-shadow: 0px 1px 1px #fff;
    line-height: 2.5em;
}

.bfast li{
    position: relative;
    float: left;
    margin-left: 1px;
    list-style: none;
}

.bfast li:hover{
    background: rgba(235,235,235,1);
}

.bfast li:after{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 1.76rem;
    height: 1.76rem;
    border-top: 1px solid rgba(160,160,160,0.5);
    border-right: 1px solid rgba(160,160,160,0.5);
    background: -moz-linear-gradient(left top, rgba(250,250,250,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(left top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    
    background: -o-linear-gradient(left top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(left top, rgba(250,250,250,1) 0%,rgba(220,220,220,1) 100%); /* W3C */
/* background: greenyellow; */
/*TODO: add browser spec prefixes*/
    content: " ";
    -moz-transform: translate(0.95rem, 0.34rem) rotate(45deg);
/*TODO: old webkit syntax*/
    background-image: -webkit-gradient(
	linear,
	left top,
	right bottom,
	color-stop(0.33, rgb(28,248,73)),
	color-stop(0.67, rgb(56,255,103))
    );
}

.bfast li:hover:after{
    background: rgba(235,235,235,1);
}

.bfast a, .fast .bfast a, .bfast a.fast{
    display: block;
    padding: 0 1.4em 0 3em;
    height: 100%;
    color: rgb(65, 105, 225);
    text-decoration: none;
}

.bfast a:after{
    border: none !important;
}

.bfast li:first-child a{
    padding: 0 1.4em 0 1.4em;
}
/*BREADCRUMBS - END*/
/*--------------------------------------------------------------NAVIGATION-END*/

/*---------------------------------------------------------------------CONTENT*/
/*HEADERS*/
.fast hgroup, hgroup.fast{
    
}
.fast h1, h1.fast{
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.75);
    color: rgba(0,0,0,0.95);
    font-size: 1.8rem;
    line-height: 0.85em;
}
.fast h2, h2.fast{
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    color: rgba(0,0,0,0.9);
    font-size: 1.6rem;
    line-height: 0.85em;
}
.fast h3, h3.fast{
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.85);
    font-size: 1.4rem;
    line-height: 0.85em;
}
.fast h4, h4.fast{
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.8);
    font-size: 1.2rem;
    line-height: 0.85em;
}
.fast h5, h5.fast{
    margin-bottom: 0.5rem;
    color: rgba(0,0,0,0.755);
    font-size: 1.1rem;
    line-height: 0.85em;
}
.fast h6, h6.fast{
    margin-bottom: 0.5rem;
    color: rgba(0,0,0,0.75);
    font-size: 1rem;
    line-height: 0.85em;
}

.fast h1~.fast h2, h1.fast~h2.fast, .fast h2~.fast h3, h2.fast~h3.fast,
.fast h3~.fast h4, h3.fast~h4.fast, .fast h1~.fast h1, h1.fast~h1.fast,
.fast h2~.fast h2, h2.fast~h2.fast, .fast h3~.fast h3, h3.fast~h3.fast,
.fast h4~.fast h4, h4.fast~h4.fast{
    border-bottom: none;
}
/*TODO: h1~h1 h2~h2 etc...*/

/*FIXME: only for headers with links*/
.fast h1 a, h1.fast a,
.fast h2 a, h2.fast a,
.fast h3 a, h3.fast a,
.fast h4 a, h4.fast a,
.fast h5 a, h5.fast a,
.fast h6 a, h6.fast a{
    text-decoration: none;
}
/*HEADERS - END*/

/*BLOCK ELEMENTS*/
.fast p, p.fast{
    margin-bottom: 1em;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.fast p:empty, p.fast:empty{
    margin: 0;
}

/*TODO: style blockqoute's cite parameter in :after element*/
.fast blockquote, blockquote.fast{
   margin-bottom: 1rem;
   padding-left: 10px;
   border-left: 10px solid rgba(128, 128, 128, 0.3);
   font-style: italic;
}

.fast pre, pre.fast{
    text-overflow:ellipsis;
    font-family: monospace;
}

.fast hr, hr.fast{
    margin-bottom: 1rem;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
/*BLOCK ELEMENTS - END*/

/*INLINE ELEMENTS*/
.fast b, b.fast{
    font-weight: bold;
}

.fast strong, strong.fast{
    font-weight: bold;
}

.fast i, i.fast{
    font-style: italic;
}

.fast em, em.fast{
    font-style: italic;
}

.fast a, a.fast{
    position: relative;
    color: rgb(65, 105, 225);
    
    text-decoration: underline;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    text-decoration-style: dotted;
    text-decoration-color: rgba(65, 105, 225, 0.5);
    
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: dotted;
    -moz-text-decoration-color: rgba(65, 105, 225, 0.5);
/*    FIXME: make correct shorthand*/
/* -moz-text-decoration: underline dotted rgba(65, 105, 225, 0.5); */
/*    TODO: working with Chrome*/
/* -webkit-text-decoration: underline dotted red; */

/*FIXME:    change all to color and border!!!*/
}

.fast a:hover, .fast a:focus, a.fast:hover, a.fast:focus{
    color: rgb(0, 0, 255);
    text-decoration-color: rgba(0, 0, 255, 0.75);
}

.fast a:active, a.fast:active{
    color: rgb(25, 25, 112);
    text-decoration-color: rgba(25, 25, 112, 1);
}

.fast a[target="_blank"]:after, a[target="_blank"].fast:after{
    content: '➚';
}

.fast a[href$=".pdf"]:before, a[href$=".pdf"].fast:before{
    content: '⎙ ';
}

.fast a[href^="mailto:"]:before, a[href^="mailto:"].fast:before{
    content: '✉ ';
}




.fast a:hover:after, .fast a:focus:after, a.fast:hover:after, a.fast:focus:after{
/*TODO: after :after is done :)*/
}

.fast a:active:after, a.fast:active:after{
/*TODO: after :after is done :)*/
}

.fast strike, strike.fast{
    text-decoration: line-through;
}

/*TODO: add :after element with datatime parameter*/
.fast del, del.fast{
    text-decoration: line-through;
}

.fast code, code.fast{
    font-family: monospace;
}

/*TODO: add parameter cite in :after element*/
.fast q, q.fast{
    font-style: italic;
}

.fast cite, cite.fast{
    font-style: italic;
}

.fast mark, mark.fast{
    background-color: rgba(255,255,0,0.4);
}

.fast abbr, abbr.fast{
    letter-spacing: 0.2em;
    font-variant: small-caps;
    cursor: help;
}

/*FIXME - color, perspective, shadow*/
.fast abbr:before{
    position: absolute;
/* width: 100px; */
    height: 30px;
    background: red;
    content: ""attr(data-title)"";
    letter-spacing: normal;
    font-variant: normal;
    opacity: 0;
    -moz-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

.fast abbr:hover:before{
    opacity: 1;
}

.fast acronym, acronym.fast{
    letter-spacing: 0.2em;
    font-variant: small-caps;
    cursor: help;
}

.fast small, small.fast{
    font-size: 0.8em;
}

.fast sup, sup.fast{
    vertical-align: super;
    font-size: 0.6em;
    line-height: 0;
}

.fast sub, sub.fast{
    vertical-align: sub;
    font-size: 0.6em;
    line-height: 0;
}

.fast dfn, dfn.fast{
    font-style: italic;
}

/*INLINE ELEMENTS - END*/

/*LISTS*/
/*Unordered list*/
.fast ul, ul.fast{
    margin-bottom: 1rem;
    list-style: inside disc;
}

.fast ul li, ul.fast li{
/* display: list-item; */
}

.fast ul li::marker, ul.fast li::marker{
    content: normal /* initial value */;
}

.fast ul ul, ul ul.fast{
    margin-bottom: 0;
    padding-left: 1rem;
    list-style: inside circle;
}

.fast ul ul ul, ul ul ul.fast{
    list-style: inside square;
}

/*Ordered list*/
.fast ol, ol.fast{
    margin-bottom: 1em;
    counter-reset: item;
}

.fast ol li:before{
    content: counters(item, ".") ". ";
    counter-increment: item;
}

.fast ol ol, ol ol.fast{
    margin-bottom: 0;
    padding-left: 1rem;
}

/*Definition list*/
.fast dl, dl.fast{
    margin-bottom: 1rem;
}

.fast dl dt, dl.fast dt{
    
}

.fast dl dd, dl.fast dd{
    
}
/*LISTS - END*/

/*TABLE*/
.fast table, table.fast{
    margin-bottom: 1em;
/*for merge cells*/
    border-collapse: collapse;
}

.fast table tr:nth-child(even), table.fast tr:nth-child(even){
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.3);
}

.fast table th, table.fast th{
    padding: 4px;
    border: 1px solid rgba(0,0,0,0.5);
    background: -moz-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,0.75) 100%);
    background: -webkit-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,0.75) 100%);
    background: linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,0.75) 100%);
    text-align: center;
    font-weight: bold;
}

.fast table td, table.fast td{
    padding: 4px;
    border: 1px solid rgba(0,0,0,0.2);
}

.fast table td:nth-child(even), table.fast td:nth-child(even){
    background: rgba(235,235,235,0.75);
}

.fast table td:nth-child(odd), table.fast td:nth-child(odd){
    background: rgba(245,245,245,0.75);    
}

.fast table td:first-child, table.fast td:first-child{
    border-left: 1px solid rgba(0,0,0,0.5);
}

.fast table td:last-child, table.fast td:last-child{
    border-right: 1px solid rgba(0,0,0,0.5);
}

.fast table tr:last-child td, table.fast tr:last-child td{
    border-bottom: 1px solid rgba(0,0,0,0.5);
}

/*TABLE - END*/

/*FORMS*/
.fastHalf.fast input[type="text"], .fastHalf.fast button{
    width: 50%;
    
}
.fastQuarter{
/* width: 400px; */
}


/* button::-moz-focus-inner{padding:0; */


/* border:none; */

.fastQuarter.fast input[type="text"], .fastQuarter.fast button{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
    margin: 0 -5px 0 1px !important;
    padding: 0 !important;
    width: 20%;
/* border-right: 10px solid rgba(0,0,0,0); */
/* border-left: 10px solid rgba(0,0,0,0); */
/* background-clip: padding-box; */
    -ms-box-sizing: border-box;
}

.fastQuarter.fast button::-moz-focus-inner {
/*TODO: WTF?*/
}

.fast form, form.fast{
/* margin: 20px auto; */
/* padding: 30px 0; */

/* border-radius: 10px; */
/* background: rgba(245,245,245,0.5); */
/* background: #FFF; */

/* background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(255,255,255)),
        color-stop(0.41, rgb(217,217,217)),
        color-stop(1, rgb(255,255,255))
        ); */

/* background: -moz-linear-gradient(
        center bottom,
        rgb(255,255,255) 0%,
        rgb(217,217,217) 41%,
        rgb(255,255,255) 100%
        ); */

/* box-shadow: 0 0 7px 0px rgba(0,0,0,0.5) inset, 0 0 16px 0px rgba(0,0,0,0.5); */
/* box-shadow: 0 0 5px 0px rgba(0,0,0,0.5); */
}

.fast form > button, form.fast > button{
/* box-sizing: content-box; */
/*FIXME: margin out!*/
/* margin: 0 -2px; */
}

.fast fieldset, fieldset.fast{
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 5px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 5px;
    background: rgba(245,245,245,0.5);
/* -webkit-box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3); */
/* -moz-box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3); */
/* box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3); */
/* -o-box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3); */
}

.fast legend, legend.fast{
    margin: 0 -5px 0 -5px;
    padding: 5px;
    width: 100%;
    border-radius: 5px;
    background: -moz-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(250,250,250,0.75)), color-stop(0.5, rgba(220,220,220,1)), to(rgba(220,220,220,0)));
    background: -webkit-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: -o-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: -ms-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
/* box-shadow: 0 0 0 1px #000; */
}

/*TODO: sizes in EM (not REM) in some cases*/
/*FIXME: one def of SELECT element*/
.fast input[type=text], input[type=text].fast,
.fast input[type=password], input[type=password].fast,
.fast input[type=email], input[type=email].fast,
.fast input[type=url], input[type=url].fast,
.fast input[type=number], input[type=number].fast,
.fast input[type=range], input[type=range].fast,
.fast textarea, textarea.fast,
.fast select, select.fast{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 1rem 0;
    padding: 0 0.3em;
    width: 100%;
    height: 2em;
    border: none;
    border-radius: 5px;
    background: rgba(245,245,245,0.75);
    -webkit-box-shadow: inset 0 0 5px 1px rgba(120,120,120,0.5), 0 1px 0 0 rgba(255,255,255,0.5), 0 -1px 0 0 rgba(160,160,160,0.5);
    -moz-box-shadow: inset 0 0 5px 1px rgba(120,120,120,0.5), 0 1px 0 0 rgba(255,255,255,0.5), 0 -1px 0 0 rgba(160,160,160,0.5);
    box-shadow: inset 0 0 5px 1px rgba(120,120,120,0.5), 0 1px 0 0 rgba(255,255,255,0.5), 0 -1px 0 0 rgba(160,160,160,0.5);
    font-family: monospace;
    line-height: 2em;
    -webkit-transition: box-shadow 500ms linear;
    
    -moz-transition: box-shadow 500ms linear;
    -o-transition: box-shadow 500ms linear;
    transition: box-shadow 500ms linear;
    -o-box-shadow: inset 0 0 5px 1px rgba(120,120,120,0.5), 0 1px 0 0 rgba(255,255,255,0.5), 0 -1px 0 0 rgba(160,160,160,0.5);
    -webkit-appearance: none;
}

.fast input[type=text]:hover, input[type=text].fast:hover,
.fast input[type=email]:hover, input[type=email].fast:hover,
.fast input[type=url]:hover, input[type=url].fast:hover,
.fast textarea:hover, textarea.fast:hover{
    box-shadow: inset 0 0 5px 1px rgba(50,100,165,0.7), 0 1px 0 0 rgba(255,255,255,0.5), 0 -1px 0 0 rgba(160,160,160,0.5);
}

.fast input[type=text]:focus, input[type=text].fast:focus,
.fast input[type=email]:focus, input[type=email].fast:focus,
.fast input[type=url]:focus, input[type=url].fast:focus,
.fast textarea:focus, textarea.fast:focus{
    box-shadow: inset 0 0 5px 1px rgba(50,100,165,0.9), 0 1px 0 0 rgba(255,255,255,0.5), 0 -1px 0 0 rgba(160,160,160,0.5);
}

.fast textarea, textarea.fast{
    height: auto;
}

input[type=email].fast{
/*TODO: icon with email*/
}

.fast button, button.fast,
.fast input[type=submit], input[type=submit].fast,
.fbutton{
    box-sizing: border-box;
    margin: 0 0 1rem 0;
    padding: 0em 0.8em;
    width: 100%;
    height: 2em;
    border: 0;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    
    border-radius: 0.3em;
    
    background: -moz-linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background: -o-linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(220,220,220,0.8)), color-stop(0.2, rgba(200,200,200,0.8)), color-stop(0.7, rgba(255,255,255,0.8)), to(rgba(255,255,255,0.8)));
    background: -webkit-linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background: linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background-position: center bottom;
    background-clip: padding-box;
    
    background-size: 100% 130%;
    -webkit-box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
    
    -moz-box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
    box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
    text-shadow: 0 0 2px #fff;
    line-height: 2em;
    cursor: pointer;
    -webkit-transition: all 200ms linear;
    
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;

    -moz-background-clip: padding-box;
    -o-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    -o-box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
}

.fbutton{
    display: inline-block;
    padding: 0;
    width: 100%;
}

.fast button:hover, button.fast:hover,
.fast button:focus, button.fast:focus,
.fast input[type=submit]:hover, input[type=submit].fast:hover,
.fast input[type=submit]:focus, input[type=submit].fast:focus,
.fbutton:hover, .fbutton:focus{
    background-position: center top;
}

.fast button:active, button.fast:active,
.fast input[type=submit]:active, input[type=submit].fast:active,
.fbutton:active{
    -webkit-box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
    -moz-box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
    box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
    -o-box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
}

.fast select, select.fast{
    box-sizing: border-box;
/* margin: 0; */
    padding: 0.2em 0.3em;
    width: 100%;
    height: 2em;
    border: 0;
    
    border: 1px solid rgba(128, 128, 128, 0.5);
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    
    border-radius: 0.3em;
    
    background: -moz-linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background: -o-linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background: -webkit-linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background: linear-gradient(top, rgba(220,220,220,0.8) 0%, rgba(200,200,200,0.8) 20%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.8) 100%);
    background-position: center bottom;
    background-clip: padding-box;
    
    background-size: 100% 130%;
    -webkit-box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
    
    -moz-box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
    box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
    text-shadow: 0 0 2px #fff;
    line-height: 2em;
    cursor: pointer;
    -webkit-transition: background 200ms linear;
    
    -moz-transition: background 200ms linear;
    -o-transition: background 200ms linear;
    transition: background 200ms linear;

    -moz-background-clip: padding-box;
    -o-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    -o-box-shadow: 0 0 4px 0 rgba(100,100,100,0.8), inset 0 -1px 0 0 rgba(100,100,100,0.8), inset 0 1px 0 0 rgba(255,255,255,0.8);
}

select.fast:hover, select.fast:focus{
    background-position: center top;
}

select.fast:active{
    -webkit-box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
    -moz-box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
    box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
    -o-box-shadow: 0 0 0 0 rgba(100,100,100,0.8), inset 0 0 3px 1px rgba(100,100,100,0.8);
}

fieldset.fast div{
    position: relative;
}

input.fast~span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;
    color:transparent;
    content: "x";
}

input.fast:checked~span{
    color:white;
    content: "LOADA";
}


input.fast:valid {
    border-color:#0f0;
}
input.fast:invalid {
    border-color:#f00;
}


/*RADIO BUTTONS*/
/* #foo:checked::before,
input[type="checkbox"] {
    position:absolute; */
/* clip: rect(0,0,0,0); */
/* clip: rect(0 0 0 0); */
/*}*/

#foo:checked,
input[type="checkbox"] + label::before {
    content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
    content: url('checkbox-checked.png');
}

/*FORMS - END*/





/*IMAGES*/
.fast figure, figure.fast{
    margin-right: -10px;
    margin-bottom: 1rem;
}

.fast figure img, figure.fast img{
    margin:0 10px 10px 0;
    padding: 4px;
    border: 1px solid rgba(200,200,200,0.75);
    background: rgba(255,255,255,0.5);
    box-shadow: 0 3px 5px 1px rgba(50,50,50,0.25);
}

.fast figure img:before, figure.fast img:before{
    width: 300px;
    height: 300px;
    border: 3px solid #f00;
    border-radius: 50px;
    background: green;
    box-shadow: 0 3px 5px 1px rgba(50,50,50,0.25);
    content: '';
}

.fast figcaption, figcaption.fast{
    font-style: italic;
    font-size: 0.6rem;
}

/*Single Image*/
/*TODO: merge in single class, but how?*/
.sifast{
    margin-right: -10px;
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5), 0 -10px 10px -10px rgba(0,0,0,0.5);
    text-align: center;
}

.sifast img{
    margin: 2rem 0 0 0 !important;
/* border: none !important; */
}

.sifast figcaption{
    line-height: 2rem;
}

/*images in text without captions*/
img.fast{
    float: right;
    clear: right;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid rgba(200,200,200,0.75);
    background: rgba(255,255,255,0.5);
}
/*IMAGES - END*/

/*MICROFORMATS*/
/*MICROFORMATS - END*/
/*---------------------------------------------------------------CONTENT - END*/

/*---------------------------------------------------------ADDITIONAL ELEMENTS*/

/*GRIDS*/
/*For Mobiles we can use media query:
display:table - main div
display:table-row - for cells
problem with .fastGrid > div*/
.fastGrid{
    display: table;
    margin-bottom: 1rem;
    width:100%;
/* border-spacing: 0.75rem; */
    table-layout: fixed;
}

.fastGrid > *{
    display: table-row;
}

.fastGrid > * > *{
    display: table-cell;
    overflow: hidden;
    padding: 0 0.75rem;
    box-shadow: -2px 0 0 -1px rgba(128,128,128,0.3);
}

.fastGrid > div > *:first-child{
    box-shadow: none;
}

/*GRIDS - END*/

/*WINDOWS*/
/*MESSAGE*/
.fmsg{
    box-sizing: border-box;
    margin-bottom: 1rem;
    padding: 5px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 5px;
    background: rgba(245,245,245,0.5);
}
/*MESSAGE - END*/


/*Error Window*/
.fastError{
    padding: 0.3rem;
    border-radius: 0.3rem;
/* background: rgba(255,255,255,0.3); */
    background: -moz-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,0.75) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,0.75) 100%); /* W3C */
    box-shadow: 0 3px 5px 1px rgba(50, 50, 50, 0.25);
    
}

.fastError h1{
    position: relative;
    margin: -0.3rem -0.3rem 0.5rem -0.3rem;
    padding: 0.3rem;
    border: none;
    border-radius: 0.3rem;
    background: rgba(255,0,0,0.7);
    box-shadow: 0 1px 1px 0px rgba(50, 50, 50, 0.5);
    font-size: 1.4rem;
}

.fastError h1:after{
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.3rem;
    background: rgba(255,255,255,0.2);
    color: #f00;
    content: 'X';
    text-align: center;
    font-size: 1rem;
    line-height: 1.2rem;
}

.fastError p{
    
}

.frame{
    margin: 0 5px 0 5px;
    padding: 5px;
/* width: 100%; */
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    background: yellow;
    background: -moz-linear-gradient(top, rgba(250,250,250,0.75) 0%, rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(250,250,250,0.75)), color-stop(0.5, rgba(220,220,220,1)), to(rgba(220,220,220,0)));
    background: -webkit-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: -o-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: -ms-linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
    background: linear-gradient(top, rgba(250,250,250,0.75) 0%,rgba(220,220,220,1) 50%, rgba(220,220,220,0) 100%);
}
/*WINDOWS - END*/

/*---------------------------------------------------ADDITIONAL ELEMENTS - END*/