/*

micro.css framework v.0.1

author: lukasz@insimo.pl

*/

@charset "UTF-8";

body,
html { width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { font-size: 12px; background-color: white; color: #4e4e4e; font-family: sans-serif; }

a:link,
a:visited  { text-decoration: none; color: blue; border-bottom: 1px dashed; }

ul { list-style-type: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; }

h1 { font-size: 250%; letter-spacing: -1px; }
h2 { font-size: 220%; letter-spacing: -1px; }
h3 { font-size: 200%; }
h4 { font-size: 180%; }
h5 { font-size: 160%; }
h6 { font-size: 140%; }

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color: red; }

p  { font-size: 120%; line-height: 1.3em; }

p.medium1 { font-size: 140%; }
p.medium2 { font-size: 150%; }

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p { margin-top: 0; }

div > h1,
div > h2,
div > h3 { margin-top: 0; }


/* -------------------------------------------------------- layout */

.section { position: relative; }

.boxed1  { max-width: 1269px; margin: 0px auto; position: relative; }
.boxed2  { max-width: 1365px; margin: 0px auto; position: relative; }
.boxed3  { max-width: 1900px; margin: 0px auto; position: relative; }

.clear { clear: both; }

.col { position: relative; box-sizing: border-box; }

.valign .col { display: inline-block; vertical-align: middle; float: none; }

.col5  { width: 100%; }
.col10 { width: 100%; }
.col15 { width: 100%; }
.col20 { width: 100%; }
.col25 { width: 100%; }
.col30 { width: 100%; }
.col33 { width: 100%; }
.col35 { width: 100%; }
.col40 { width: 100%; }
.col45 { width: 100%; }
.col50 { width: 100%; }
.col55 { width: 100%; }
.col60 { width: 100%; }
.col66 { width: 100%; }
.col70 { width: 100%; }
.col80 { width: 100%; }
.col90 { width: 100%; }

/* -------------------------------------------------------- padding */

.pad15  { padding: 15px; }
.pad30  { padding: 15px; }
.pad50  { padding: 15px; }
.pad75  { padding: 30px; }
.pad100 { padding: 30px; }

.pad0015  { padding: 0px 15px; }
.pad1530  { padding: 15px 30px; }
.pad1550  { padding: 15px 15px; }
.pad3050  { padding: 15px 15px; }
.pad50100 { padding: 30px 30px; }
.pad10050 { padding: 30px 30px; }
.pad10030 { padding: 30px 15px; }




/* -------------------------------------------------------- positioning */

.top-left     { top: 0; left: 0; }
.top-right    { top: 0; right: 0; }
.bottom-left  { bottom: 0; left: 0; }
.bottom-right { bottom: 0; right: 0; }

.top15    { top: 15px; } .right15  { right: 15px; } .bottom15 { bottom: 15px; } .left15   { left: 15px; }
.top30    { top: 30px; } .right30  { right: 30px; } .bottom30 { bottom: 30px; } .left30   { left: 30px; }
.top50    { top: 50px; } .right50  { right: 50px; } .bottom50 { bottom: 50px; } .left50   { left: 50px; }


/* -------------------------------------------------------- ordering */

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }


/* -------------------------------------------------------- helpers */

.spacer15  { height: 15px; }
.spacer25  { height: 25px; }
.spacer30  { height: 30px; }
.spacer50  { height: 50px; }
.spacer75  { height: 75px; }
.spacer100 { height: 100px; }
.spacer150 { height: 150px; }

.aleft   { text-align: left; }
.aright  { text-align: right; }
.acenter { text-align: center; }
.justify { text-align: justify; }

.no-overflow { overflow: hidden; }

.separate-bg-element1 { background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: relative; box-sizing: border-box; }

.border1 { border: 1px solid #d5d5d5; box-sizing: border-box; }


a#back-to-top:link,
a#back-to-top:visited { position: fixed; background-color: #a78f68; color: white; padding: 10px 15px; font-size: 200%; z-index: 1; border: 1px solid; border-color: #a78f68; display: none; }
a#back-to-top:hover   { background-color: white; color: #a78f68; }

a#back-to-top:link i,
a#back-to-top:visited i { color: white; }

a#back-to-top:hover i { color: #a78f68; }


/* -------------------------------------------------------- buttons */

a.button:link,
a.button:visited { display: inline-block; vertical-align: middle; padding: 8px 25px; border-radius: 5px; background-color: #f5f5f5; color: #888888; border: 1px solid #d5d5d5; }
a.button:hover   { background-color: #e5e5e5; }

a.button { vertical-align: middle; }
a.button * { vertical-align: middle; }
a.button i { padding: 0px 5px; }

a.button.primary:link,
a.button.primary:visited { background-color: #ff0000; color: white; border: 0; }
a.button.primary:hover   { background-color: #ff3f3f; }

a.button.medium1 { font-size: 120%; }
a.button.large1  { font-size: 140%; }


/* -------------------------------------------------------- forms */

form { }
form label      { display: block; position: relative; }
form label span { display: block; }

form label.medium1 { font-size: 120%; }

label + label { margin-top: 15px; }

input, textarea { box-sizing: border-box; margin: 0; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea { padding: 5px 15px; width: 99%; border: 1px solid #d5d5d5; font-size: 120%; }
textarea { height: 16em; }

label input[type="checkbox"],
label input[type="radio"]           { position: absolute; left: 0; top: 3px; }
input[type="checkbox"] + span,
input[type="radio"]    + span       { margin-left: 20px; padding-right: 10px; margin-bottom: 5px; }
input[type="checkbox"] + span:hover,
input[type="radio"]    + span:hover { cursor: pointer; }

input:focus,
textarea:focus { outline: none !important; border: 1px solid blue; border-left: 5px solid blue; }

input[type="submit"],
button[type="submit"] { display: inline-block; vertical-align: middle; padding: 8px 25px; border-radius: 5px; background-color: #f5f5f5; color: #888888; border: 1px solid #d5d5d5; }


/* -------------------------------------------------------- media query */

@media screen and (min-width: 1024px)
{
   .col   { float: left; }

   .col5  { width: 5% }
   .col10 { width: 10% }
   .col15 { width: 15% }
   .col20 { width: 20% }
   .col25 { width: 25% }
   .col30 { width: 30% }
   .col33 { width: 33.333% }
   .col35 { width: 35% }
   .col40 { width: 40% }
   .col45 { width: 45% }
   .col50 { width: 50% }
   .col55 { width: 55% }
   .col60 { width: 60% }
   .col66 { width: 66.666% }
   .col70 { width: 70% }
   .col80 { width: 80% }
   .col90 { width: 90% }

   .pad15  { padding: 15px; }
   .pad30  { padding: 30px; }
   .pad50  { padding: 50px; }
   .pad75  { padding: 75px; }
   .pad100 { padding: 100px; }

   .pad1530  { padding: 15px 30px; }
   .pad1550  { padding: 15px 50px; }
   .pad3050  { padding: 30px 50px; }
   .pad50100 { padding: 50px 100px; }
   .pad10050 { padding: 100px 50px; }
   .pad10030 { padding: 100px 30px; }

   .rpad50  { padding-right: 50px; }
   .rpad100 { padding-right: 100px; }

   .lpad50  { padding-left: 50px; }
   .lpad100 { padding-left: 100px; }

   h1 { font-size: 300%; letter-spacing: -1px; }
   h2 { font-size: 250%; letter-spacing: -1px; }
   h3 { font-size: 220%; }
   h4 { font-size: 200%; }
   h5 { font-size: 180%; }
   h6 { font-size: 140%; }

}