:root {
  /* Knuffi Bär Colors */
  --main: #4d1c1c;
  --main-o: #FFFFF1;

  --minor: #FFFFF1;
  --minor-o: #4d1c1c;

  --accent: #0F6674;
  --accent-o: #FFFFF1;

  /* Black and White */
  --white: #ffffff;
  --black: #000000;
  --light-gray: #f2f3e2;

  /* Bootstrap Elements Colors */
  --pirmary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;

}

/* ------------ BACKGROUNDS --------------*/
.bg-salinia { /* DEPRECATED */
  background-color: var(--main) !important;
  color: var(--main-o);
}

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

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

.bg-lightgray { /* DEPRECATED */
  background-color: var(--light-gray);
}

/* ----------- TEXT COLORS --------------*/
.text-salinia { /* DEPRECATED */
  color: var(--main) !important;
}

.text-main {
  color: var(--main) !important;
}

.text-main-o {
  color: var(--main-o) !important;
}

.text-accent {
  color: var(--accent) !important;
}


/* --------------- BASIS CSS -------------- */

body {

  font-size: 1.1em !important;
  font-family: Candara, sans-serif;
  color:var(--secondary);
}
@media (min-width: 1600px) {
  .container {
      max-width: 1500px;
  }
  }
@media (min-width: 992px) { 
  body {
    background-image: url('salinia-3.png'), url('salinia-3.jpg');
    background-size: clamp(20%, 1245px, 75%), cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top, center top;
    background-color: var(--main-o);
    font-size: 1.1em !important;
    font-family: Candara, sans-serif;
    color:var(--secondary);
  }
 }

.container-main {
    background-color: var(--main-o);

}

/* ---------------- HR ------------------------------------*/

hr {
  border-top: 1px dotted var(--main);
}
/*----------------------- Headlines --------------------------*/
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.1em !important;
}
h1 {
  font-size: 1.9em;
  font-weight: 100;
  font-family: 'Times New Roman', Garamond, Serif;
  line-height: 0.9em;
  margin-bottom: 0.4em !important;
}
h2 {
  font-size: 1.6em;
  font-weight: 100;
  font-family: 'Times New Roman', Garamond, Serif;
  color: var(--main);
}
.alert-contact h2 {
  border-bottom: 1px solid;
  margin-bottom: 0.5em !important;
}
h3 {
  font-size: 1.3em;
  font-weight: 100;
  font-family: 'Times New Roman', Garamond, Serif;
  margin-block-start: 0em;
    margin-block-end: 0em;
}


.profile h2 {
  color: var(--main) !important;
  font-size: 1.4em;
}
.poll h3 {
  color: var(--main) !important;
  font-size: 1.2em;
}
/*----------------------- Subtitles --------------------------*/

.subtitle {
  font-family: Candara;
  font-weight: 500;
  font-size: 85%;
  color: var(--accent);

}


/* --------- BLOCKQUOTES -------------- */
blockquote {
  border-left: 1em solid var(--main);
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: 10%;
  padding: 1em;
  width: 80%;
  background-color: var(--secondary);
  color: var(--main-o);
}


/*----------------------- Links --------------------------*/
section p a, section li a {
  color: var(--main) !important;
  font-style: italic;
}
section p a:hover, section li a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  {
  text-decoration: none;
  border-bottom: 1px dashed;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: var(--main) !important;
}

 a.btn-facebook, a.btn-pinterest, a.btn-twitter, a.btn-whatsapp, a.btn-eventinfo {
  color: lightgray !important;
}
 a:hover.btn-facebook  {
  color: rgb(66, 66, 197) !important;
  border-bottom: none;
}
a:hover.btn-pinterest  {
  color:#E60023 !important;
  border-bottom: none;
}
a:hover.btn-twitter  {
  color:#1A91DA !important;
  border-bottom: none;
}
a:hover.btn-whatsapp  {
  color:#49C857 !important;
  border-bottom: none;
}
a:hover.btn-clickSearch {
  background-color:  var(--main);
  color: var(--main-o);
  border-bottom: none;
}

.btn-success, .btn-danger, .btn-secondary, .btn-warning, .btn-info {
  color: var(--main-o) !important;
}
/*--------------------- Navigation-------------------------*/
@keyframes example {
  from {background-color: var(--main);}
  to {background-color: var(--main-o);}
}
.nav-link {
  color:var(--main-o) !important;
  font-size: 1.1em;
  font-family: Candara, sans-serif;
  font-weight: 100;
}
.nav-link:hover, .nav-link:hover a {
  border-bottom: none;
  background-color: var(--main-o);
  animation-name: example;
  animation-duration: 0.8s;
  color: var(--main) !important;

}
/*----------------------- Images --------------------------*/
.img-crop img {
  object-fit: none; /* Do not scale the image */
  object-position: top; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}
.gallery-crop img {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 155px;
  margin-bottom: 1rem;
}
.gallery-crop-24 img {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  margin-bottom: 1rem;
}
.newsblock-crop img {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  height: 340px;
}
.blogroll-crop img {
  object-fit: cover; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 70%;
  min-height: 120px;
  max-height: 120px;
  margin-bottom: 1rem;
  float: right;
}
.bgimg-crop {
  width: 100%;
  height: 300px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
.galbgimg-crop {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.galimg {
  position: absolute;
  bottom: 0;
  background-color:var(--main);
  color: var(--main-o);
  padding: 0.3em 1em;
  width: 100%;
  font-family: Candara, sans-serif;
  font-size: 1.3em;
  text-align: right;
  font-weight: 100 !important;
}
.galimg a {
  color: var(--main-o) !important;
  font-family: Candara, sans-serif !important;
  font-weight: 100 !important;
}
/*------------------------LIST-----------------------------*/
.poll ul {
padding-left: 1em;
  /* Rotate from top left corner (not default) */

}

/*-----------------------TABLES----------------------------*/
.table-borderless {
  th, td,
  thead th,
  tbody + tbody {
    border: 0;
  }
}
/*-----------------------ALERTS----------------------------*/
.alert-outline-accent {
  border-color: var(--accent);

}
.alert-outline-secondary {
  border-color: var(--secondary);

}


/*----------------------- EXTRAS --------------------------*/
.johojo {
  display: none;
}

.shadow-top {
  -moz-box-shadow: -5px -5px 5px 5px rgba(41, 41, 41, 0.822);
  -webkit-box-shadow: -5px -5px 5px 5px rgba(41, 41, 41, 0.815);
  box-shadow: -10px -2px 10px 2px rgba(41, 41, 41, 0.767);
  }


  .month {
    font-family: Candara;
    font-size: 29pt;
    font-weight: 100;
    line-height: 1.1;
    display:block;
  }
  .day {
    display: block;
    font-size: 50pt;
    font-weight: 100;
    line-height: 1.1;
    font-family: Candara;
  }

  .daymonth {
    font-family: Candara;
    font-size: 18pt;
    font-weight: 100;
    display:block;
  }

  .dayname {
    font-family: Candara;
    font-size: 1.2em;
    font-weight: 100;
    line-height: 1.1;
    display:block;
  }
  .daynumber {
    font-family: Candara;
    font-size: calc(1.1em + 1.6vw);
    font-weight: 100;
    line-height: 1.1;
    display:block;
  }
  .scorenumber {
    font-family: Candara;
    font-size: 1.6em;
    font-weight: 100;
    line-height: 1.1;
    display:block;
  }
  .event:hover {
    background-color: var(--light-gray);
    color:var(--main);
  }
  .event:hover a {
    color:var(--main) !important
  }
  .event:hover img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    }
    .caption-3 figcaption {
      position: absolute;
      bottom: 10%;
      right: 0;
      max-width: 80%;
    }
    .caption-3 h2, .caption-3 p {
      font-family: Candara, sans-serif;
    }
    .caption-3 h2 {
      font-weight: 400 !important;
    }

    .flex-video {
      position: relative;
      padding-top: 25px;
      padding-bottom: 67.5%;
      height: 0;
      margin-bottom: 16px;
      overflow: hidden;
  }

  .flex-video.widescreen {
    padding-bottom: 57.25%;
}

.alert .img-thumbnail {
  height: 280px;
  margin-bottom: .75em;
}



.lh-1 {
  line-height: 1.1em;
}

.title-smaller {
 font-size: 1.2em;
}

.card-img-preview {
  width: 100% !important;
  height: auto !important;
}