@charset "utf-8";
/* CSS Document */

/* ###################################################################

  ITEM NAME  : HI-GRUPPE Tagespflege
  VERSION    : 1.0.001
  AUTHOR     : PROJEKT 77
  AUTHOR URI : http://projekt-77.de

################################################################### */

/* ###################################################################

  //  1.  SCREEN / DEFAULTS

  //  2.  HEADER

  //  3.  CONTENT

  //  4.   NAVIGATION

  //  5.   FOOTER

  //  6.  ELSE


################################################################### */


/* VERSION CONTROL
###################################################################

  // 02.02.18 CREATED


################################################################### */


/*
This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts:  http://www.fontshop.com
*/

@font-face {
  font-family:"Canaro W00 Medium";
    src:url("../font/b66b220f-c0f7-4e48-8cad-e2cff0e01a36.eot?#iefix");
    src:url("../font/b66b220f-c0f7-4e48-8cad-e2cff0e01a36.eot?#iefix") format("eot"),url("../font/fc7940b5-00c4-48a5-a568-f3dd0dca0e59.woff2") format("woff2"),url("../font/5eed710b-800c-4cca-a521-849b6edfe14b.woff") format("woff"),url("../font/9f52a572-8b0c-4647-ba0f-f3ee503cfee7.ttf") format("truetype");
}


/* 1. SCREEN / DEFAULTS
################################################################### */

.left {text-align: left;}

  .column.center,
  .columns.center {text-align: center;}

.right {text-align: right;}

  .column.right,
  .columns.right {text-align: right;}

red {
  color: rgba(171,46,76,1.00);
  font-weight: 700;
}

.green {
  color: rgba(110,158,29,1.00);
  text-align: right;
}

.red {
  color: rgba(171,46,76,1.00);
  text-align: right;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a {
  // color: rgba(175,159,156,1.00); 
  //  color: rgba(172,203,226,1.00);
  // color: rgba(134,180,213,1.00);
  color: rgba(101,158,196,1.00);
  }

  a:hover {
    // color: rgba(175,159,156,1.00);
    // color: rgba(172,203,226,1.00);
    // color: rgba(134,180,213,1.00);
  color: rgba(101,158,196,1.00);
    text-decoration: none;
  }


    .colored a {color: rgba(59,64,68,1.00);}

    .colored a:hover {
      color: rgba(59,64,68,1.00);
      text-decoration: none;
    }


/* 2. HEADER
################################################################### */

.header .twelve.columns {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 749px) {


.header .twelve.columns img:nth-of-type(1) {display: none;}

.header .twelve.columns img:nth-of-type(2) {
    width: 100%;
    max-width: 275px;
    height: auto;
    margin: 30px auto 0 auto;
    padding: 0;
  display: inherit;
}

  .stadtgarten img:nth-of-type(2) a {
      width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
      position: relative;
  }

}

@media (min-width: 750px) {

  .header .twelve.columns {
    width: 100%;
    height: auto;
    text-align: left;
    color: rgba(255,255,255,1.00);
    margin: 0;
    padding: 0;
  }

    .header .twelve.columns img:nth-of-type(1) {
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      display: inherit;
  }

    .header .twelve.columns img:nth-of-type(2) {display: none;}

    .stadtgarten a {display: none;}

  /*

  .stadtgarten a {
      width: 276px;
      height: 170px;
      top: 42px;
      right: 210px;
      margin: 20px auto 0 auto;
      padding: 0;
      position: absolute;
    }

  .header .twelve.columns img {display: none;}

    .header .twelve.columns.bg-1 {background: url(../graphic/bg/tagespflege-bad-oldesloe-1.jpg) top right no-repeat;}

    .header .twelve.columns.bg-2 {background: url(../graphic/bg/tagespflege-bad-oldesloe-2.jpg) top right no-repeat;}

    .header .twelve.columns.bg-3 {background: url(../graphic/bg/tagespflege-bad-oldesloe-3.jpg) top right no-repeat;}

    .header .twelve.columns.bg-4 {background: url(../graphic/bg/tagespflege-bad-oldesloe-4.jpg) top right no-repeat;}

    .header .twelve.columns.bg-5 {background: url(../graphic/bg/tagespflege-bad-oldesloe-5.jpg) top right no-repeat;}

    .header .twelve.columns.bg-6 {background: url(../graphic/bg/tagespflege-bad-oldesloe-6.jpg) top right no-repeat;}

  */


  .stadtgarten {
    margin: 17px 0 0 120px;
    padding: 0;
  }

}

/* 3. CONTENT
################################################################### */

.content {margin: 49px 0 0 0;}

  .colored {
    color: rgba(59,64,68,1.00);
    background-color: rgba(229,219,215,1.00);
    padding: 20px 20px 0 20px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .colored p:last-of-type {padding-bottom: 20px;}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1 {
  color: rgba(171,47,76,1.00);
  font-family:'Canaro W00 Medium';
  font-size: 180%;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
  line-height: 1.6;
  margin: -10px 0 0 0;
  padding: 0 0 30px 0;
}

h2 {
  font-size: 110%;
  line-height: 1.6;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  padding: 10px 0;
}

  .colored h2 {padding: 0 0 10px 0;}

h3 {
  font-size: 100%;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Fließtext
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.content p {
  line-height: 1.6;
    margin: 0;
    padding: 0 0 15px 0;
}


/* Lists
––––––––––––––––––––––––––––––––––––––––––––––––––

.content ul {list-style: circle inside;} */

.content ol {list-style: decimal inside;}

 .content ol,
  .content ul {
    line-height: 1.6;
      margin: 0 0 0 15px;
      padding: 0 0 15px 15px;
    list-style-position: outside;
  }

    .content .colored ol,
    .content .colored ul {padding: 0 0 15px 0;}


/* Tables Default
–––––––––––––––––––––––––––––––––––––––––––––––––– */

div.table-fit {
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
  margin: -20px 0 10px 0;
  padding: 0;
}

@media (max-width: 1199px) {

  div.table-fit {overflow-x: scroll;}

}

table tr td:nth-child(1),
.td-0 {text-align: left;}

table tr td:nth-child(2),
.td-1 {text-align: right;}

.wochenplan .td-1 {text-align: center;}
table.wochenplan td {text-align: center !important;}

  table {
    width: 100%;
    font-size: 90%;
    font-weight: 400;
    text-align: center;
    border-spacing: 0;
    box-sizing: border-box;
    border-collapse: collapse;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }

    tr:nth-of-type(even) {
      color: rgba(59,64,68,1.00);
      background-color: rgba(230,227,226,1.00);
    }

    tr:nth-of-type(odd) {
      color: rgba(59,64,68,1.00);
      background-color: rgba(245,243,243,1.00);
    }

      tr:nth-of-type(even):hover,
      tr:nth-of-type(odd):hover {background-color: rgba(74,60,57,0.10);}

      th {
        color: rgba(255,255,255,1.00);
        background-color: rgba(171,46,76,1.00);
        border: 3px solid rgba(255,255,255,1.00);
        font-weight: 400;
        margin: 0;
        padding: 0 10px;
        white-space: nowrap;
      }


.wochenplan th:nth-of-type(even) {
        color: rgba(255,255,255,1.00);
        background-color: rgba(171,46,76,0.80);
        font-weight: 700;
        padding: 10px;
       }

      .wochenplan th:nth-of-type(odd) {
        color: rgba(255,255,255,1.00);
        background-color: rgba(171,46,76,1.00);
        font-weight: 700;
        padding: 10px;
       }


      td {
        border: 3px solid rgba(255,255,255,1.00);
        font-weight: 400;
        margin: 0;
        padding: 5px 10px;
        white-space: nowrap;
      }

.wochenplan tr td {
      width: 13%;
      white-space: normal;
      color: rgba(0,0,0,1.00);
    }

      .wochenplan tr td:nth-of-type(1) {
        width: 22%;
        color: rgba(255,255,255,1.00);
        background-color: rgba(171,46,76,0.80);
        font-weight: 700;
      }


/* Gallerie
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html .seven.columns.main-c > .frame .ce-column,
html .seven.columns.main-c .csc-textpic-imagecolumn {
  width: 21%;
  min-width: 140px;
  height: 140px;
  color: #000;
  background-color: #ECEAE9;
  text-align: center;
  vertical-align: middle;
  margin: 1%;
  padding: 1%;
  position: relative;
  display: table;
  float: left;
}

  html .seven.columns.main-c .image,
  html .seven.columns.main-c .csc-textpic-image {
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }

    html .seven.columns.main-c > .frame .ce-column img,
    html .seven.columns.main-c .csc-textpic-imagecolumn img {
      width: auto;
      max-width: 160px;
      height: auto;
      max-height: 140px;
      border-radius: 0 !important;
      margin: auto;
      padding: auto;
         display: block;
    }

  html .seven.columns.main-c > .frame .ce-column:empty,
  html .seven.columns.main-c .csc-textpic-imagecolumn:empty {display: none;}


  /*.ce-outer .ce-inner,*/
  html .seven.columns.main-c .ce-outer,
  .csc-textpic-center-outer  {
    width: 100%;
    margin: 5px 0 20px 0;
    padding: 0;
    display: block;
    float: left;
  }

  html .seven.columns.img-rnd .img-gal-6 .csc-textpic-imagerow:nth-of-type(2) .csc-textpic-imagecolumn:nth-of-type(2),
  html .seven.columns.img-rnd .img-gal-6 .csc-textpic-imagerow:nth-of-type(2) .csc-textpic-imagecolumn:nth-of-type(3),
  html .seven.columns.img-rnd .img-gal-6 .csc-textpic-imagerow:nth-of-type(2) .csc-textpic-imagecolumn:nth-of-type(4) {display: none !important;}


/* iframe
–––––––––––––––––––––––––––––––––––––––––––––––––– */

iframe {
  width: 100%;
  max-width: 100%;
  min-height: 400px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 0;
}

/* 4. NAVIGATION
################################################################### */

#nav {display: none;}

#open-nav:hover+#nav,
#open-nav:active+#nav,
#open-nav:focus+#nav {display: block;}

#open-nav:hover #nav,
#open-nav:active #nav,
#open-nav:focus #nav {display: block;}

#open-nav:hover span span,
#open-nav:active span span,
#open-nav:focus span span {display: none !important;}

#open-nav {
  width: 100%;
  margin: 0 0 40px 0;
  padding: 0;
  display: block;
}

  #open-nav span {
    width: calc(100%-20px);
    color: rgba(255,255,255,1.00);
    background-color: rgba(171,47,76,1.00);
    margin: 0;
    padding: 10px;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
  }

    #open-nav span span {
      width: auto;
      margin: 0;
      padding: 0;
      display: inline;
    }

  #open-nav:hover span {
    color: rgba(255,255,255,1.00);
    background-color: rgba(171,47,76,1.00);
  }


@media (min-width: 750px) {

  #nav {display: inherit !important;}

#open-nav:hover+#nav,
#open-nav:active+#nav,
#open-nav:focus+#nav {display: inherit !important;}

#open-nav:hover #nav,
#open-nav:active #nav,
#open-nav:focus #nav {display: inherit !important;}

#open-nav span,
#open-nav span span {display: none !important;}


}

/* 4.1 FIRST LEVEL
###################################### */

ol.navigation {
  font-size: 100%;
  letter-spacing: 1px;
  line-height: 1;
  list-style: none;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

@media (min-width: 1000px) {

  ol.navigation {margin: -9px 0 0 0;}

}

  ol.navigation li {
    width: auto;
    font-family:'Canaro W00 Medium', "Open Sans", sans-serif;
    list-style: none;
    line-height: 1;
    margin: 0;
    padding: 0;
    display: block;
  }

    ol.navigation li a,
    ol.navigation li a:link,
    ol.navigation li a:visited {
      color: rgba(102,103,95,1.00);
      background-color: transparent;
      line-height: 1;
      margin: 8px 0;
      padding: 8px 10px 6px 10px;
      display: block;
      hyphens: auto;
      text-decoration: none;
    }

    ol.navigation li a:hover,
    ol.navigation li a:active,
    ol.navigation li a:focus,

    ol.navigation li.active a {
      color: rgba(75,75,75,1.00);
      // background-color: rgba(229,220,215,1.00);
      background-color: rgba(212,232,246,1.00);
      text-decoration: none;
      border-radius: 4px;
    }


/* 4.2 SECOND LEVEL
###################################### */

ol.navigation ol {
  font-size: 100%;
  letter-spacing: 0;
  list-style: none;
  text-transform: none;
  border-top: 0;
  margin: 10px 0 10px 0;
  padding: 0;
}

  ol.navigation li ol li {
    width: auto;
    list-style: none;
    border-bottom: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    display: block;
  }

    ol.navigation li ol li a,
    ol.navigation li ol li a:link,
    ol.navigation li ol li a:visited {
      color: rgba(102,103,95,1.00);
      background: transparent 0;
      font-weight: 400;
      margin: 0;
      padding: 7px 0 7px 10px;
      display: block;
      text-decoration: none;
    }

    ol.navigation li ol li a:hover,
    ol.navigation li ol li a:active,
    ol.navigation li ol li a:focus,

    ol.navigation li ol li.active a {
      // color: rgba(175,159,156,1.00);
      color: rgba(134,180,213,1.00);
      background: transparent 0;

      text-decoration: none;
    }

    ol.navigation li ol li.active a {font-weight: 400;}


/* 5. FOOTER
################################################################### */


/* .twelve.columns.footer {
  width: 100%;
  height: 297px;
  background: url(../graphic/bg/bg-footer.jpg) top center no-repeat;
  margin: 30px 0 0 0;
  padding: 0;
} */

.twelve.columns.footer {
  margin: 10px 0 0 0;
  padding: 0;
}

  .twelve.columns.footer img {
    width: 100%;
    border-radius: 0;
    height: auto;
    margin: 0;
    padding: 0;
  }

.twelve.columns.footer2 {
  width: 100%;
  font-size: 90%;
  // color: rgba(255,255,255,1.00);
  color: rgba(75,75,75,1.00); 
  // background-color: rgba(74,60,57,1.00);
  background-color: rgba(216,211,208,1.00);
  /* border-top: 2px solid rgba(255,255,255,1.00); */
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: 10px 0;
}


  .content .footer2 ol {
    width: auto;
    margin: 0 0 0 5%;
    padding: 0;
    list-style: none;
  }

    .footer2 ol li {
      list-style: none;
     
    }

	@media screen and (min-width: 860px)  {
      
    	.footer2 ol li {
      		list-style: none;
        	display: inline;
    	}
    }

      .footer2 ol li a,
      .footer2 ol li a:link,
      .footer2 ol li a:visited {
        // color: rgba(255,255,255,1.00);
        color: rgba(75,75,75,1.00); 
        background-color: transparent;
        line-height: 2;
        margin: 0 30px 0 0;
        padding: 0;
        white-space: nowrap;
        text-decoration: none;
      }

      .footer2 ol li a:hover,
      .footer2 ol li a:active,
      .footer2 ol li a:focus,

      .footer2 ol li a.active,
      .footer2 ol li a.active:link,
      .footer2 ol li a.active:visited,
      .footer2 ol li a.active:hover,
      .footer2 ol li a.active:active,
      .footer2 ol li a.active:focus {
        // color: rgba(255,255,255,1.00);
        color: rgba(75,75,75,1.00); 
        text-decoration: underline !important;
      }

/* 6. ELSE
################################################################### */