/********************/
/* CUSTOM STYLE CSS */
/********************/
/*
Place your custom CSS and CSS overrides in this file after renaming it to
custom-style.css or another name, and configure the filename and path in
the theme's settings page.

Steps for customizing your theme:
1. Incorporate your custom CSS into this file.
2. Uncomment various examples below and adjust the data to your preferences.
3. Clear cached data at /admin/config/development/performance or use
   "Flush all caches" in the Admin Menu, then press CTRL+F5.
*/
:root {
  --oetk-blue: #178ED3;
  --oetk-green: #B3CD34;
  --oetk-white: #FFFFFF;
}

#top_bg,.themed-block {
    background-color: var(--oetk-white) !important;
    background-image: -webkit-linear-gradient(bottom,#f2efea 0%,#fff 180px) !important;
    background-image: linear-gradient(to top,#f2efea 0%,#fff 180px) !important;
}

/*
#section2 {
    background-color: #fff;
    background-image: -webkit-linear-gradient(bottom,#fff 0%,#f2efea 150px);
    background-image: linear-gradient(to top,#fff 0%,#f2efea 150px);
}
*/

#name-and-slogan {
  background-color: var(--oetk-blue) !important;
  color: var(--oetk-white) !important;
}


#site-name,
#site-name a {
  color: var(--oetk-white) !important;
  font-style: normal !important;
}

.site-slogan {
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--oetk-green) !important;
  font-style: normal !important;
}

#main-primary {
  margin-top: 25px;

}



/* Erase or comment the lines below to get rid of the image in the right
   sidebar and the brand image at the bottom */
#middlecontainer {
  background: transparent url(../images/_sidebarimg.png) 99% 99% no-repeat;
}

#brand {
  background: url(../images/_brand.png) 50% 0 no-repeat;
  margin: 0 auto 1em;
  height: 50px;
}

#slider {
  margin-top: 35px !important;

}

.person-card {
  min-width: 250px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
  border: solid 1px var(--oetk-blue-color-menu-ho);

  height: 100%;
}

.person-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;

  transition: transform .4s ease;
}

.person-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--oetk-blue) !important;
  background-color: rgb(161, 193, 221);
  margin: 21px;
  border-radius: 8px;
}

.person-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--oetk-blue) !important;
  background-color: rgb(161, 193, 221);
  margin: 21px;
  border-radius: 8px;
}

.person-desc,
.person-desc p,
.person-desc a,
.person-desc p a {
  font-size: 1.0rem;
  font-weight: 600;
  padding-left: 5px;
  padding-right: 5px;
  color: var(--text-light) !important;
  margin-bottom: 5px;
  height: 100%;
}



/* f�r die Touren ansicht */
.tour-wrap {
  margin: 10px 20px;

}

.tour-title {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--oetk-blue) !important;
  margin: 21px;

}

.tour-text {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.65;
}


.tour-header-title,
.tour-header-title p {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--oetk-blue) !important;
  background-color: rgb(161, 193, 221);
  margin: 21px;
  border-radius: 8px;


}


/* wide laptop and PC */
@media screen and (max-width: 64em) {

  #site-name,
  #site-name a {
    display: none;
  }


  .logoimg {
        margin: 0 .7em 0 0;
        width: 70px;
        height: 70px;
    }

  .site-slogan {
    font-size: 2.0rem;
    font-weight: 300;
    color: var(--oetk-green);
    font-style: normal;
    display: block;
  }

  .tour-title {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--oetk-blue) !important;
  }
}

@media screen and (max-width: 48em)  {

  #site-name,
  #site-name a {
    font-size: 1.0rem;
    font-weight: 300;
    display: block;
  }

  .site-slogan {
    font-size: 0.8rem;
    font-weight: 200;
    color: var(--oetk-green);
    font-style: normal;
  }

  .logoimg {
        margin: 0 .7em 0 0;
        width: 45px;
        height: 45px;
    }

  .tour-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--oetk-blue) !important;
  }
}

/*
@media screen and (min-width: 1200px) {

  #site-name,
  #site-name a {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
  }

  .site-slogan {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--oetk-green);
    font-style: normal;
  }
}
  */