/* ------------------------------- TEMPLATES -------------------------------- */
/* ########################################################################## */
/* text */
/* ########################################################################## */
/* TEST */
/* @media screen and (max-width: 600px) { } */
/* -------------------------------------------------------------------------- */



/* ########################################################################## */
/* Rahmen um Module */
/* Entfernt module border */
/* ########################################################################## */

.card {
  border: 0px solid #dfe3e7 !important;
}

/* ########################################################################## */
/* Agenda Rahmen, Position, Hintergrund  */
/* ########################################################################## */

/* Style */
div.lobagenda {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  font-size: 90%;  border: 1px solid #dfe3e7;
  /* background-color: #fafdff; */
  background-color: #e6f6ff;
}

/* Position */
.newsflash-item {
  margin-top: -40px;
  margin-bottom: 20px;
}

/* ########################################################################## */
/* Body font */
/* ########################################################################## */

/* default body font */
body {
    color: #404040;
    background-color: #ffffff;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    color: black;
}

/* ########################################################################## */
/* Homepage 2-spaltig */
/* ########################################################################## */

/* Homepage 2 columns floating */
.columns_2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* ########################################################################## */
/* Homepage 4-spaltig */
/* ########################################################################## */

/* Homepage 4 columns floating */
.columns_4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* ########################################################################## */
/* Spalten auf mobile resize */
/* ########################################################################## */

@media only screen and (max-width: 768px) {
  .col-lg-4 {
    width: 100%;
  }

  .col-lg-3 {
    width: 50%;
  }
  .col-lg-6 {
    width= 100%;
    padding: 0px;
  }
}

 
/* ########################################################################## */
/* HEADER: Logo, Position, Hintergrund */
/* ########################################################################## */

/* Image als Logo setzen */
.container-header {
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
  background-color: #434178;
  background-image: url("https://stadtmusik-laufen.ch/images/SML/UI/sml_banner.jpg");
}

/* Logo zentrieren */
div.navbar-brand {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -40px;
}

/* Logo Position für Mobiles */
@media screen and (max-width: 768px) {
  div.navbar-brand {
    display: block;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: -30px;
  }
}

/* Korrektur Hamburgermenu <-> horizontalmenu */
@media (min-width:768px) and (max-width:992px) {
  .container-header .mod-menu {
    display:flex;
    flex: 1 1 0%;
    flex-direction: row
  }
}

/* ########################################################################## */
/* GLOBAL: h2 = h3 = h1 */
/* ########################################################################## */

h1 {
  font-size: 1.4em;
}

h2 {
  font-size: 1.17em;
}

/* ########################################################################## */
/* Format Buttons width 150px
/* ########################################################################## */

.button150 {
  width: 150px;
  background-color: 4E5481;
}

/* ########################################################################## */
/* News (category blog) */
/* ########################################################################## */

/* Überschrift */
div.page-header {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 2px solid #dfe3e7;
  border-bottom: 2px solid #dfe3e7;
  margin-bottom: 10px;
}

/* News (category blog) gesamter Content */
div.item-content {
}

/* Desktop: pading-right/left 10px */
@media screen and (min-width: 600px) {
  div.item-content {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  div.com-content-article__body {
    padding-right: 10px;
    padding-left: 10px;
  }
}

/* ########################################################################## */
/* Sidebar Fotogalerie */
/* ########################################################################## */

.card-header {
  background-color: #ffffff !important;
  margin-top: -30px;
}  

.nav-item {
  margin-top: -5px;
}

/* Menu Fotogalerie sidebar */
.sidebar_gallery {
  
}

/* ########################################################################## */
/* Position bottom-a full width (footer)
/* ########################################################################## */

.container-bottom-a
{
    grid-column: full-start/full-end;
}


.div.jdscf-submit-btn jdscf-col-md-auto {
  margin-top 100px;
}


/* recaptcha position */
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 0px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

/* Projekt */
@media only screen and (min-width: 768px) {
  div.lobprojektdirektion {
    padding-left: 120px;
    padding-right: 100px;
  }
}

/* Letzte Aktivitäten spacing */
div.main-bottom.card {
  margin-top: -20px;
}

/* 2 spaltig */
#wrap {
   width:100%;
   margin:0 auto;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}