/*
Author: Robert Fessling
E-Mail: kontakt@robertfessling.de

Customize your typography and color

####################

1. Basic
2. Header
    - Topbar
    - Navbar
    - Main Navigation
    - Main Navigation Mobile
3. Content
    - Button
    - Callout
    - Card
    - Iconbox
    - Images
    - Lists
    - Pricing Table
    - Tabellen
    - Widgets
    ...
4. Footer
    - Main Footer
    - Copyright

5. Usefull Classes
    - Sections
    - Colours
    - Margins
    - Paddings

*/

:root {
  /* Theme Color */
  --primary: #0F5A22;
  --primary-light: #147322;
  --secondary: #042506;
  --fontcolor: #444;
  --dark: #333333;
  --grey: #F0F2F4;
  --light: #fefefe;
  --light-brown: #F2E6D4;

  /* Font sizes */
  --font: 17px;
  --font-small: 13px;
  --font-big: 21px;
}

/*
* Local Font */

@font-face {
    font-family: 'Ubuntu-Light';
    src: url('../fonts/ubuntu/Ubuntu-Light.eot');
    src: local('ubuntu Light'), local('ubuntu-Light'),
        url('../fonts/ubuntu/Ubuntu-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ubuntu/Ubuntu-Light.woff2') format('woff2'),
        url('../fonts/ubuntu/Ubuntu-Light.woff') format('woff'),
        url('../fonts/ubuntu/Ubuntu-Light.ttf') format('truetype'),
        url('../fonts/ubuntu/Ubuntu-Light.svg#ubuntu-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: 'Ubuntu-Regular';
    src: url('../fonts/ubuntu/Ubuntu-Regular.eot');
    src: local('ubuntu Regular'), local('ubuntu-Regular'),
        url('../fonts/ubuntu/Ubuntu-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ubuntu/Ubuntu-Regular.woff2') format('woff2'),
        url('../fonts/ubuntu/Ubuntu-Regular.woff') format('woff'),
        url('../fonts/ubuntu/Ubuntu-Regular.ttf') format('truetype'),
        url('../fonts/ubuntu/Ubuntu-Regular.svg#ubuntu-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: 'Ubuntu-Medium';
    src: url('../fonts/ubuntu/Ubuntu-Medium.eot');
    src: local('ubuntu Medium'), local('ubuntu-Medium'),
        url('../fonts/ubuntu/Ubuntu-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ubuntu/Ubuntu-Medium.woff2') format('woff2'),
        url('../fonts/ubuntu/Ubuntu-Medium.woff') format('woff'),
        url('../fonts/ubuntu/Ubuntu-Medium.ttf') format('truetype'),
        url('../fonts/ubuntu/Ubuntu-Medium.svg#ubuntu-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: 'Ubuntu-Bold';
    src: url('../fonts/ubuntu/Ubuntu-Bold.eot');
    src: local('ubuntu Bold'), local('ubuntu-Bold'),
        url('../fonts/ubuntu/Ubuntu-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ubuntu/Ubuntu-Bold.woff2') format('woff2'),
        url('../fonts/ubuntu/Ubuntu-Bold.woff') format('woff'),
        url('../fonts/ubuntu/Ubuntu-Bold.ttf') format('truetype'),
        url('../fonts/ubuntu/Ubuntu-Bold.svg#ubuntu-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: fallback;
}

/*################################################
#################### 1. Basic ####################
##################################################*/

body {
  font-family: 'Ubuntu-Regular', sans-serif;
  font-size: var(--font);
  line-height: 26.25px;
  color: var(--fontcolor);
  background-color: var(--light);
}

h1, h2,
h3, h4,
h5, h6 {
  font-size: 27px;
  line-height: 33px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: #042506;
}

h1, h2,
h3, h4,
h5, h6, p {
  margin: 0 0 15px 0;
}

h1 + h2 {
  font-size: calc(var(--font) * 1.2);
  line-height: 1.6rem;
  font-weight: lighter;
}

p {
  font-weight: 300;
  line-height: 1.8rem;
}

a {
  color: var(--fontcolor);
}

a:hover {
  color: var(--primary);
}

p a:hover {
  text-decoration: underline;
}

/*################################################
#################### 2. Header ###################
##################################################*/

/* Header */
.header-topbar-bg {
  background-color: #f2e6d4;
  padding: 5px 0;
}

.header-topbar-bg ul a {
  color: #5A4433;
}

.topbar-right li,
.topbar-left li,
.topbar-right li:last-child,
.topbar-left li:first-child {
  border: 0;
}

.topbar-left li:hover {
  border-radius: 10px;
}

.header {
  background-color: rgba(255,255,255,.9);
}

.header .header-logo {
  width: 200px;
  height: auto;
}

/* Menu */
.desktop .menu-list-item {
  transition: all ease .3s;
  -moz-transition: all ease .3s;
  -webkit-transition: all ease .3s;
}
.desktop .menu-list-item.active,
.desktop .menu-list-item:hover {
  border-radius: 10px;
  background-color: #F2E6D4;
}
.menu-mobile .menu-list-item.active {
  background-color: #F2E6D4;
}

.menu-list-link {
  color: var(--fontcolor);
}

.menu-icon-wrap .menu-icon {
  top: 8px;
}

.menu-icon-wrap .menu-icon::before, .menu-icon-wrap .menu-icon::after {
  border-color: var(--primary);
}

.menu-mobile .menu-background {
  background-color: #fff;
}

.menu-mobile .menu-list-item {
  text-align: center;
  border-bottom: 1px solid #F2E6D4;
}

.menu-mobile .menu-list-link {
  display: inline-block;
  color: var(--fontcolor);
  border-bottom: 1px solid transparent;
}

.menu-list-link.active, .menu-list-link:hover {
  color: var(--fontcolor);
}

/* Breadcrumbs */
.breadcrumb ul {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.breadcrumb li, .breadcrumb li a:hover {
  color: var(--secondary);
  opacity: 1;
}

.breadcrumb li a {
  color: var(--fontcolor);
  opacity: .8;
}

/* Logo */
.header-logo-wrapper {
  font-size: 20px;
  line-height: 21px;
}

/*################################################
#################### 3. Content ##################
##################################################*/

.content-wrapper,
.with-sidebar .content .content-wrapper,
.with-sidebar .content .sidebar {
  padding-top: 150px;
}

/* Back2Top */
.back-to-top {
  border-radius: 10px;
}

/* Button */
.btn {
  font-size: var(--font);
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--primary-light);
  border: 0;
  border-radius: 10px;
  padding: 10px 20px;
}

.btn:hover {
  color: #fff;
  background-color: var(--primary);
}

.btn-clean {
  padding: 5px 0;
  background-color: transparent;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
}

.btn-clean i {
  margin-left: 3px;
}

.btn-clean:hover {
  background-color: transparent;
  color: #92641B;
}

.filter .btn {
  background-color: var(--light);
  border: 0;
  color: var(--fontcolor);
}

.filter .active .btn, .filter .btn:hover {
  font-weight: bold;
}

/* Callout */
.callout {
  border: 0;
}

.callout h3 {
  font-size: 27px;
  line-height: 28px;
  margin-bottom: 15px;
}

.callout h4 {
  font-size: 18px;
  line-height: 21px;
}

@media (min-width: 768px) {

  .callout h3 {
    font-size: 37px;
    line-height: 28px;
  }

  .callout h4 {
    font-size: 27px;
    line-height: 28px;
  }

  .callout a:hover h4 {
    color: var(--primary);
  }

}

/* Card */
.card {
  color: var(--fontcolor);
  background-color: #fff;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}

.card h3, .card h4, .card h5, .card h6 {
  font-size: var(--font-big);
  line-height: 1.7rem;
  color: var(--dark-);
}

.card dl {
  margin: 0 0 15px 0;
  padding: 0;
}

.card dl > dt,
.card dl > dd {
  padding: 5px 0;
  margin:0;
}

.card dl > dd {
  border-bottom: 1px solid #F2E6D4;
}

.card dl > dt {
  display: block;
  float: left;
  width:135px;
  font-weight:700;
}

.card dl > dd {
  padding-left: 135px;
}

.card dt,
.card dd {
  float: none;
}

.card-price .price {
  border-radius: 0 10px 10px 0;
  background-color: #5A4433;
}

.card-price .price span {
  font-size: calc(var(--font) + 5px);
  color: var(--light);
}

.card.card-verteiler .card-content {
  background-color: var(--primary-light);
  -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  -moz-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.card.card-verteiler:hover .card-content {
  background-color: var(--primary);
}

/* Iconbox */
.iconbox.iconbox-bg {
  background-color: #fff;
  border-radius: 10px;
}

.iconbox .iconbox-icon i {
  color: #F2E6D4;
}

/* Iconbar */
.iconbar.iconbar-small a, .iconbar.iconbar-small a span {
  border-radius: 10px;
}

/* Lists */
.list-check li::before,
.list-star li::before,
.list-dash li::before,
.list-arrow li::before,
.list-contact li::before {
  color: var(--primary);
}

.list-link li {
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 5px;
}

.list-link li::after {
  content: none;
}

.list-link li:first-child {
  border: 0;
}

.list-link li:hover {
  padding-left: 10px;
  background-color: var(--primary);
}

.list-link li:hover a {
  color: #fff;
  transition: all .3s;
}


/* Tabellen */
table thead {
  background-color: var(--light-brown);
  font-weight: bold;
}

table thead th,
table tbody td {
  border-right: 2px solid #fff;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  text-align: left;
}

table thead th:last-child,
table tbody td:last-child {
  border-right: 0;
}

table tbody tr td {
  border-bottom: 1px solid var(--light-brown);
}

/*################################################
#################### 4. Footer ###################
##################################################*/

/* Main Footer */
footer {
  background-color: #5A4433;
}

footer a {
  color: #F2E6D4;
}

footer a:hover {
  color: #fff;
}

footer .list-link .active {
  background-color: #F2E6D4;
}

/*################################################
#################### 5. Usefull Classes ##########
##################################################*/

/* Sections */
/* Section styles */
#section_one {
  background: #FFf;
}

#section_two {
  background-color: #F2E6D4;
}

#section_two .divider-pencil-large {
  -webkit-filter: invert(91%) sepia(29%) saturate(125%) hue-rotate(355deg) brightness(94%) contrast(90%);
  filter: invert(91%) sepia(29%) saturate(125%) hue-rotate(355deg) brightness(110%) contrast(90%);
}

#section_three {
  background: #fff;
}

#section_three .divider-pencil-large {
  top: -15px;
  -webkit-filter: invert(99%) sepia(2%) saturate(138%) hue-rotate(264deg) brightness(117%) contrast(100%);
  filter: invert(99%) sepia(2%) saturate(138%) hue-rotate(264deg) brightness(117%) contrast(100%);
}

#section_callout {
  background-color: #5A4433;
}

#section_callout .divider-pencil-large {
  top: -15px;
  -webkit-filter: invert(26%) sepia(13%) saturate(1025%) hue-rotate(346deg) brightness(97%) contrast(91%);
  filter: invert(26%) sepia(13%) saturate(1000%) hue-rotate(346deg) brightness(80%) contrast(91%);
}

#section_callout .divider-pencil-large:last-child {
  bottom: -10px;
  top: unset;
}

/* Grid */
.end-xs {
  justify-content: flex-end!important;
}

/* Colours */
.bg-primary {
  background-color: var(--primary)!important;
}

.bg-secondary {
  background-color: var(--secondary)!important;
}

.bg-tertiary {
  background-color: var(--secondary)!important;
}

.bg-dark {
  background-color: var(--dark)!important;
}

.bg-grey {
  background-color: var(--grey)!important;
}

.bg-light {
  background-color: var(--light)!important;
}
.bg-light-brown {
  background-color: var(--light-brown)!important;
}

.bg-transparent {
  background-color: transparent!important;
}

.bg-secondary-mobile {
  background-color: var(--secondary);
}

@media (min-width:768px) {
  .bg-secondary-mobile {
    background-color: transparent;
  }
}

.font-primary {
  color: var(--primary)!important;
}

.font-secondary {
  color: var(--secondary)!important;
}

.font-dark {
  color: var(--dark)!important;
}

.font-grey {
  color: var(--grey)!important;
}

.font-light {
  color: var(--light)!important;
}

/* Shadow */
.shadow-xs { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.shadow-outline { box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); }
.shadow-none { box-shadow: none; }

/* Devider */
.divider-pencil {
  position: relative;
  width: 200px;
  height: 10px;
  margin-bottom: 10px;
  background-image: url('../img/divider-pencil.svg');
  background-repeat: no-repeat;
  -webkit-filter: invert(40%) sepia(26%) saturate(1173%) hue-rotate(356deg) brightness(90%) contrast(92%);
  filter: invert(40%) sepia(26%) saturate(1173%) hue-rotate(356deg) brightness(90%) contrast(92%);
}

.divider-center {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

.divider-pencil-large {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 65px;
  background-image: url('../img/divider-pencil-large.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

/* Layout Classes */
.flex {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Z-Index */
.z_1 { z-index: 1; }
.z_2 { z-index: 2; }
.z_3 { z-index: 3; }
.z_4 { z-index: 4; }
.z_5 { z-index: 5; }

/* Margin and Padding */

/* Margin */
.nm  { margin: 0!important; }
.nmt { margin-top: 0!important; }
.nmr { margin-right: 0!important; }
.nmb { margin-bottom: 0!important; }
.nml { margin-left: 0!important; }
.nmy { margin-top: 0!important; margin-bottom: 0!important; }
.nmx { margin-right: 0!important; margin-left: 0!important; }

.my_xs, .my_sm, .my_md, .my_lg, .my_xl { margin-top: 15px!important; margin-bottom: 15px!important; }
.mx_xs, .mx_sm, .mx_md, .mx_lg, .mx_xl { margin-left: 15px!important; margin-right: 15px!important; }
.mt_xs, .mt_sm, .mt_md, .mt_lg, .mt_xl { margin-top: 15px!important; }
.mb_xs, .mb_sm, .mb_md, .mb_lg, .mb_xl { margin-bottom: 15px!important; }

/* Margin Negative */
.-mt_xs { margin-top: -15px!important; }
.-mt_sm { margin-top: -30px!important; }
.-mt_md { margin-top: -60px!important; }

.-mb_xs { margin-bottom: -15px!important; }
.-mb_sm { margin-bottom: -30px!important; }
.-mb_md { margin-bottom: -60px!important; }

/* Margin Mobile */
.mt_xs-m { margin-top: 15px!important; }
.mt_sm-m { margin-top: 30px!important; }
.mt_md-m { margin-top: 60px!important; }

.mb_xs-m { margin-bottom: 15px!important; }
.mb_sm-m { margin-bottom: 30px!important; }
.mb_md-m { margin-bottom: 60px!important; }

.-mt_xs-m { margin-top: -15px!important; }
.-mt_sm-m { margin-top: -30px!important; }
.-mt_md-m { margin-top: -60px!important; }

.-mb_xs-m { margin-bottom: -15px!important; }
.-mb_sm-m { margin-bottom: -30px!important; }
.-mb_md-m { margin-bottom: -60px!important; }

/* Padding */
.np  { padding: 0!important; }
.npt { padding-top: 0!important; }
.npr { padding-right: 0!important; }
.npb { padding-bottom: 0!important; }
.npl { padding-left: 0!important; }
.npy { padding-top: 0!important; padding-bottom: 0!important; }
.npx { padding-left: 0!important; padding-right: 0!important; }

.py_xs, .py_sm, .py_md, .py_lg, .py_xl { padding-top: 45px!important; padding-bottom: 30px!important; }
.px_xs, .px_sm, .px_md, .px_lg, .px_xl { padding-left: 15px; padding-right: 15px!important; }
.pt_xs, .pt_sm, .pt_md, .pt_lg, .pt_xl { padding-top: 15px!important; }
.pb_xs, .pb_sm, .pb_md, .pb_lg, .pb_xl { padding-bottom: 15px!important; }

  /* Padding Mobile only */
  .py_xs-m { padding-top: 15px!important; padding-bottom: 15px!important; }
  .py_sm-m { padding-top: 30px!important; padding-bottom: 30px!important; }
  .px_xs-m { padding-left: 15px!important; padding-right: 15px!important; }
  .px_sm-m { padding-left: 30px!important; padding-right: 30px!important; }
  .px_md-m { padding-left: 30px!important; padding-right: 30px!important; }
  .pt_xs-m { padding-top: 15px!important; }
  .pt_sm-m { padding-top: 30px!important; }
  .pt_md-m { padding-top: 60px!important; }
  .pb_xs-m { padding-bottom: 15px!important; }
  .pb_sm-m { padding-bottom: 30px!important; }
  .pb_md-m { padding-bottom: 60px!important; }

@media (min-width: 768px) {

  /* Margin Mobile */
  .mt_xs-m, .mt_sm-m, .mt_md-m { margin-top: 0!important; }
  .mb_xs-m, .mb_sm-m, .mb_md-m { margin-bottom: 0!important; }

  .-mt_xs-m { margin-top: 0!important; }
  .-mt_sm-m { margin-top: 0!important; }
  .-mt_md-m { margin-top: 0!important; }

  .-mb_xs-m { margin-bottom: 0!important; }
  .-mb_sm-m { margin-bottom: 0!important; }
  .-mb_md-m { margin-bottom: 0!important; }

  /* Margin */
  .my_xs { margin-top: 15px!important; margin-bottom: 15px!important; }
  .my_sm { margin-top: 30px!important; margin-bottom: 30px!important; }
  .my_md { margin-top: 60px!important; margin-bottom: 60px!important; }
  .my_lg { margin-top: 120px!important; margin-bottom: 120px!important; }
  .my_xl { margin-top: 200px!important; margin-bottom: 200px!important; }

  .mx_xs { margin-left: 15px!important; margin-right: 15px!important; }
  .mx_sm { margin-left: 30px!important; margin-right: 30px!important; }
  .mx_md { margin-left: 60px!important; margin-right: 60px!important; }
  .mx_lg { margin-left: 120px!important; margin-right: 120px!important; }
  .mx_xl { margin-left: 200px!important; margin-right: 200px!important; }

  .mt_xs { margin-top: 15px!important; }
  .mt_sm { margin-top: 30px!important; }
  .mt_md { margin-top: 60px!important; }
  .mt_lg { margin-top: 120px!important; }
  .mt_xl { margin-top: 200px!important; }

  .mb_xs { margin-bottom: 15px!important; }
  .mb_sm { margin-bottom: 30px!important; }
  .mb_md { margin-bottom: 60px!important; }
  .mb_lg { margin-bottom: 120px!important; }
  .mb_xl { margin-bottom: 200px!important; }

  /* Padding Mobile only */
  .py_xs-m, .py_sm-m { padding-top: 0!important; padding-bottom: 0!important; }
  .px_xs-m, .px_sm-m { padding-left: 0!important; padding-right: 0!important; }
  .pt_xs-m, .pt_sm-m, .pt_md-m { padding-top: 0!important; }
  .pb_xs-m, .pb_sm-m, .pb_md-m { padding-bottom: 0!important; }

  /* Padding */
  .py_xs { padding-top: 15px!important; padding-bottom: 15px!important; }
  .py_sm { padding-top: 30px!important; padding-bottom: 30px!important; }
  .py_md { padding-top: 60px!important; padding-bottom: 60px!important; }
  .py_lg { padding-top: 120px!important; padding-bottom: 120px!important; }
  .py_xl { padding-top: 200px!important; padding-bottom: 200px!important; }

  .px_xs { padding-left: 15px!important; padding-right: 15px!important; }
  .px_sm { padding-left: 30px!important; padding-right: 30px!important; }
  .px_md { padding-left: 60px!important; padding-right: 60px!important; }
  .px_lg { padding-left: 120px!important; padding-right: 120px!important; }
  .px_xl { padding-left: 200px!important; padding-right: 200px!important; }

  .pt_xs { padding-top: 15px!important; }
  .pt_sm { padding-top: 30px!important; }
  .pt_md { padding-top: 60px!important; }
  .pt_lg { padding-top: 120px!important; }
  .pt_xl { padding-top: 200px!important; }

  .pb_xs { padding-bottom: 15px!important; }
  .pb_sm { padding-bottom: 30px!important; }
  .pb_md { padding-bottom: 60px!important; }
  .pb_lg { padding-bottom: 120px!important; }
  .pb_xl { padding-bottom: 200px!important; }

  .fullheight { height: 100vh; }
}