@font-face {
    font-family: 'Bebas Neue';
    src: url('font/BebasNeue.otf') format('opentype');
    src: url('font/BebasNeue-webfont.eot'); /* IE9 Compat Modes */
    src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('font/BebasNeue-webfont.woff') format('woff'), /* Modern Browsers */
         url('font/BebasNeue-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('font/BebasNeue-webfont.svg#Bebas Neue') format('svg'); /* Legacy iOS */
}
body{
    background: url('images/stone_bg.jpg');
    color: #281c14;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 0.875em; /*14px/16px = 0.875 (14px is the target size. 16px is the base for all screensize.)*/
    line-height: 1.5em;
}
html{ 
    height: 100%;
}
* {
    margin: 0;
    padding: 0; 
}

/**************** HTML5 fix - do not edit/remove ****************/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section,
#rotator { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
}
iframe {
    display: block;
}
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
#component img {
}
p {
    text-align: justify;
}
br {
    margin-bottom: 0.2em;
}
hr, .item-separator{
    clear: both; 
    display: block;
    float: none; 
    width: 100%; 
    height: 2px;
    margin: 1.4em 0 1.8em;
    border-top: none;
    border-bottom: 1px solid #dcd9d1;
    border-left: none;
    border-right: none;
    box-shadow: 0 1px 0 #fff;  
}
.item-separator {
    margin: 2.2em 0 1.8em;
}
#component a {
    color: #899738;
    text-decoration: underline;
}
#component a:hover {
    color: #bd6952;
}
/**************** Font and Text Styling ****************/
#component p, #right p, #home_highlight p { 
    padding: 0;
    margin: 0 0 2em 0;    
}
img, fieldset {
    border: 0;
}
img.gen {
    float: left;
    margin: 0 15px 15px 0;
}
.extrabold {
    font-weight: 900;
}
strong, em, b, .bold {
    font-weight: 700;
}
.light {
    font-weight: 300;
}
.ultralight {
    font-weight: 200;
}
sup {
    vertical-align: baseline;
    position: relative;
    top: -0.65em;
    font-size: 70%;
}
sub {
    top: 0.4em;
}
ul, ol {
    margin: 0;
    padding: 0; 
}
#component ul, #component ol{ 
    padding: 0;
    margin: 0 0 2em 1em;    
}
#component ul ul, #component ol ul,
#component ul ol, #component ol ol{ 
    padding: 0;
    margin: 0 0 1em 0.5em;    
}
#component ul ul ul, #component ol ul ul{ 
    padding: 0;
    margin: 0 0 1em 2em !important;    
}
#component ol > li {
    list-style: decimal;
    margin-bottom: 10px;
    margin-left: 22px;
}
#component ul > li {
    list-style: none;
    background: url('images/icons/bullet-green.png') 0 5px no-repeat;
    margin-bottom: 10px;
    padding-left: 22px;
}
#component li li {
    list-style: none;
    background: none !important;
    margin-bottom: 10px;
    padding-left: 0;
}
#component li li:before {
    color:#6a7621; /* set color to red */
    content:"\2022"; /* /2022 is the numerical unicode for • */
    font-size:1.5em; /* set the font-size of the bullet if necessary. Make sure to use em or %*/
    padding-right:.25em; /* give the bullet some padding from the text Make sure to use em*/
    position:relative;
    top:.1em; /* set the vertical position of the bullet if necessary. Make sure to use em or % */
}

#component ol li {
    list-style: decimal;
}
.darkbrown  { color: #281c14; }
.brown  { color: #6d4b34; }
.orange { color: #984c37; }
.green  { color: #6a7621; }

/**************** Header Styling ****************/
h1, h2, h3, h4, h5, h6,
.contact_detail_block .position, .contact_form {
    font-family: 'Bebas Neue';
    font-weight: 300;
    text-transform: uppercase;
}
#component h1 {
    font-size: 2.625em; /*42/16=2.625*/
    line-height: 1.2em;
    margin-bottom: 0.5em;
}
.category_blog_view h1,
#component h2,
.article_title h4,
#right .widget h3,
.contact_detail_block .position{
    font-size: 2.375em !important; /*38/16=2.375*/
    line-height: 1em;
    margin-bottom: 0.5em;
}
#component h3, .contact_form {
    font-size: 2em; /*32/16=2*/
    line-height: 1em;
    margin-bottom: 0.5em;
    color: #4b392b;
}
#component h4, .cat-children h3 {
    font-size: 1.75em; /*28/16=2*/
    line-height: 1em;
    margin-bottom: 0.5em;
    color: #6d4b34;
}

/**************** CLEARFIX ****************/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    height: 0; }
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
    zoom: 1;
}
.clearfix:after, .clr {
    clear:both;
}
/**************** Element Styling ****************/
.global_wrap {
    width: 970px;
    margin: 0 auto;
    position: relative;
}
.global_wrap{
    content: "";
    display: table;
}
#top_header {
    margin-top: 20px;
    margin-bottom: 15px;
    overflow: hidden;
}
#logo {
    width: 60%;
    float: left;
    font-family: 'Bebas Neue';
    font-size: 3em;
    color: #43382b;
    line-height: 0.9em;
}
#logo br {
    margin: 0 !important;
}
#logo span {
    font-size: 55%;
}
#logo a {
    background: url('images/klpk-logo.png') 30px 0 no-repeat transparent;
    min-height: 90px;
    padding: 12px 0 0 140px;
    display: block;
    color: #43382b;
    text-decoration: none;
}
#top_right br { /*hack*/
    display: none;
}
#top_right li{
    list-style: none;
}
#top_right {
    width: 40%;
    padding-top: 40px;
    float: left;
    direction: rtl;
    text-align: right;
    font-size: 0.75em; /*12/16=0.75*/
    color: #43382b;
}
#top_right .widget{
    float: right;
    display: inline;
    margin-left: 15px;
}
#top_right .widget:first-child{
    margin-left: 15px;
}
#top_right a{
    color: #43382b;
    text-decoration: none;
    text-transform: uppercase;
}
#top_right a:hover{
    text-decoration: underline;
}
#container_shadow, #content_container, #footer, #copyright {
    padding: 15px;
    overflow: hidden;
}
#container_shadow {
    background: url('images/wood_innerbg.jpg') left top repeat;
}
#content_container {
    background: #fff;
    min-height: 500px;
}
#rotator {
    width: 100%;
    height: 400px;
    position: relative;
    z-index: 1;
}
#static_banner {
    width: 100%;
    height: 180px;
    position: relative;
    z-index: 2;
}
#home_highlight {
    width: 100%;
    overflow: hidden;
    color: #4b392b;
    background: url('images/circle_texture.jpg') left top repeat-x;
}
#home_highlight .widget {
    height: 245px;
    padding: 33px 33px 35px;
    overflow-y: auto;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    position: relative;
}
#component {
    width: 580px;
    padding: 25px;
    float: left;
}
#right {
    width: 238px;
    padding: 25px 33px 25px 21px;
    float: left;
}
#right .widget {
    display: block;
    margin-bottom: 50px;
}
#footer {    
    color: #6d4b34;
}
#copyright {
    color: #281c14;
}
#home_highlight, .liquid-box {    
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.liquid-box .row_container {
    display: block;
}
#footer .widget, .box_half, .box1, .box2, .box3, .box4 {
    overflow-y: auto;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
.box_half {
    -webkit-box-flex: 0.5;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0.5;         /* OLD - Firefox 19- */
    -webkit-flex: 0.5;          /* Chrome */
    -ms-flex: 0.5;              /* IE 10 */
    flex: 0.5;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#footer .widget, .box1 {    
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.box2 {
    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.box2-5 {
    -webkit-box-flex: 1.5;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1.5;         /* OLD - Firefox 19- */
    -webkit-flex: 1.5;          /* Chrome */
    -ms-flex: 1.5;              /* IE 10 */
    flex: 1.5;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.box3 {
    -webkit-box-flex: 3;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 3;         /* OLD - Firefox 19- */
    -webkit-flex: 3;          /* Chrome */
    -ms-flex: 3;              /* IE 10 */
    flex: 3;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.box4 {
    -webkit-box-flex: 4;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 4;         /* OLD - Firefox 19- */
    -webkit-flex: 4;          /* Chrome */
    -ms-flex: 4;              /* IE 10 */
    flex: 4;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#footer .widget {
    min-width: 150px;
    padding: 20px;
}
#copyright {
    font-size: 0.75em; /*12px/16px = 0.75*/
    text-align: center;
}