/*  ---------------------------------------

    TYPOGRAPHY               

---------------------------------------- */


/*  
    Base font size corresponds to 16px.
    Here is the em => px conversion table:
    
    2.25em    =>  36px
    2em       =>  32px
    1.875em   =>  30px
    1.75em    =>  28px
    1.625em   =>  26px
    1.5em     =>  24px
    1.375em   =>  22px
    1.25em    =>  20px
    1.125em   =>  18px
    
    1em       =>  16px
    
    0.9375em  =>  15px
    0.875em   =>  14px
    0.8125em  =>  13px
    0.75em    =>  12px
    0.6875em  =>  11px
    0.625em   =>  10px
    0.5em     =>  8px
*/


/* General typography settings
---------------------------------------- */

html {
  font-size: 100.01%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: #f3f2f1;
  color: #444;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  line-height: 1.3em;
}

/* Texts
---------------------------------------- */

/* Headings */

h1, h2, h3 {
  font-family: 'LFT Etica', 'lft-etica', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
  color: #333;
  font-weight: 600;
  line-height: 1.3em;
}

h1 { font-size: 1.75em  /* 28px */; margin-bottom: 0.5em; }
h2 { font-size: 1.5em   /* 24px */; margin-bottom: 0.5em; }
h3 { font-size: 1.375em /* 20px */; margin-bottom: 0.5em; }
h4 { font-size: 1.25em  /* 18px */; margin-bottom: 0.5em; }
h5 { font-size: 1em     /* 16px */; margin-bottom: 0.5em; }
h6 { font-size: 1em     /* 16px */; margin-bottom: 0.5em; }

h1 small,
h2 small,
h3 small,
h4 small {
  color: #666;
  font-size: 80%;
  font-weight: 400;
}
h5 small,
h6 small {
  color: #666;
  font-size: 90%;
  font-weight: 400;
}

/* Body copy */

p {
  line-height: 1.3em;
  margin-bottom: 1em;
}

/* Links */

a {
  color: #26952e;
  text-decoration: none;
}
a:active,
a:hover {
  color: #1f8226;
}
a:active,
a:focus {
  outline: 1px dotted #26952e;
}

a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6 {
  color: #26952e;
}

/* Special spacing */

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

li p,
li ul,
li ol,
li li { margin-bottom: 0; margin-top: 0; }

/* Font sizes */

p,
li,
td,
th,
dt,
dd { font-size: 0.9375em; line-height: 1.4em; }

li p,
td p,
th p,
dt p,
dd p,
blockquote p,
li li { font-size: 1em; }

/* Transitions */

a,
p,
h1 a, h2 a, h3 a h4 a,
a h1, a h2, a h3, a h4 { transition: color 0.2s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; }

/* Alignment classes */

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

/* Misc. text elements */

b, strong { font-weight: 600; }
i, em { font-style: italic; }
small { font-size: 0.875em; }

p small,
li small,
td small,
th small,
dt small,
dd small {
  font-size: 0.9333333em;
}

blockquote {
  border-left: 5px solid #ddd;
  font-size: 1em;
  margin: 1.25em 0;
  padding: 10px 20px;
}
blockquote footer:before { content: "— "; }
blockquote footer { color: #999; font-size: 0.875em; }
blockquote cite { font-style: italic; }

address { font-style: normal; margin: 1.25em 0; }
abbr[title] { border-bottom: 1px dotted #999; cursor: help; }
pre { margin: 1.25em 0; white-space: pre; }
pre, code, tt { font-family: 'andale mono', 'lucida console', monospace; line-height: 1.5; }

.help { color: #999; font-size: 0.875em; font-style: italic; }


/* Alerts */

.alert {
  background: #eee;
  border-radius: 0;
  color: #fff;
  margin: 0 0 20px;
  padding: 10px 60px;
  position: relative;
  text-align: left;
}
.alert a { color: #fff; font-weight: 600; }

.alert.info { background: #0099bd; }
.alert.success { background: #26952e; }
.alert.error { background: #dd3131; }
.alert.warning { background: #f0b90f; }

.alert .alert-close {
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  background: transparent;
  color: inherit;
  display: inline-block;
  font-size: 1.5em;
  height: 22px;
  line-height: 1;
  opacity: 0.4;
  padding: 0;
  position: absolute;
  top: 50%;
  transition: opacity 0.2s ease-in-out;
  right: 10px;
  transform: translateY(-50%);
  width: 22px;
}
.alert .alert-close:hover { opacity: 1; }



/* Lists
---------------------------------------- */

ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
ul, ol {
  margin: 1.25em 0;
  padding: 0 0 0 1.5em;
}
li {
  margin: 0 0 0.5em;
}

li ul,
li ol {
  margin-top: 0.25em;
}
li li {
  margin-bottom: 0.25em;
}


.no-bullet {
  list-style: none;
  padding-left: 0;
}
.no-bullet .no-bullet {
  padding-left: 1.5em;
}


dl {
  margin: 0 0 1em;
}
dt {
  float: left;
  font-weight: 600;
  margin: 0 0.5em 0 0;
}
dd {
  margin: 0 0 0.5em;
}