/* **************************************************************************
 *  MEDIA MOTION AG															*
 ****************************************************************************

    Dateiname   base.css
    Funktion    Standard-CSS
    Author      
    Datum       

    �nderungen	
   
    
*****************************************************************************/

/***************************************************
Fonts:
font-family: 'Open Sans', sans-serif;
font-family: 'spirig-partner-spezial', sans-serif;

Colors:

brown:			  #3c3222			rgb(60, 50, 34)
light-brown 	#80715D			rgb(223, 220, 216)		
gold:			    #c1b05c			rgb(193, 176, 92)


**************************************************/
@font-face {
    font-family: 'spirig-partner-spezial';
    src: url('../fonts/Fjalla One regular-webfont.eot');
    src: url('../fonts/Fjalla One regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Fjalla One regular-webfont.woff2') format('woff2'),
         url('../fonts/Fjalla One regular-webfont.woff') format('woff'),
         url('../fonts/Fjalla One regular-webfont.ttf') format('truetype'),
         url('../fonts/Fjalla One regular-webfont.svg#fjalla_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/**
 * ALLGEMEIN
 * Allgemeine Tags
 *****************************************************/
html { overflow-y: scroll; } /* Scrollbalken immer anzeigen */
body {
  color:#3c3222;
  font-family: 'Open Sans', sans-serif;
  font-size: 80%;
  line-height: 1.5em;
}
h1 { 
  color: #3c3222;
  font-family: "spirig-partner-spezial",sans-serif;
  font-size: 150%;
  line-height: 140%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
} 
h2 { 
  color: #c1b05c;
  font-family: 'spirig-partner-spezial', sans-serif;
  font-size: 150%; 
  margin-top: -10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
h3 {
  font-size: 100%;
  font-weight: bold;
  margin: 0 -1px 10px 1px !important;
}
img { 
	border: 0;
	width: 100%;
}
a {	
  color:#3c3222;  
  text-decoration: underline; 
}
a:hover { text-decoration: none; }
p {color:#3c3222 !important;}
h1,h2,h3,h4,h5,h6,a,p,i,strong,label {margin-left:1px; margin-right:-1px;}
p a,
p strong,
p strong a {margin-left:0px;}
.ce_form label {
  padding-right: 30px;
  vertical-align: top;
}
/**
 * FRAMEWORK
 *****************************************************/
#wrapper {width: 100%}
#mainnavigation ul,
#main .inside,
#footer .inside {
	max-width: 800px;
	padding:0 10px;
	margin:0 auto;
}
#main {
    margin: 60px 0 40px;
    width: 100%;
}
.mod_article [class*="ce_"], 
.mod_article [class*="mod_"]{margin: 0 0 20px;}
.mod_article [class*="layout_"] > *, 
.mod_article [class*="event_"] > *  {margin: 0;}
	/**
	 * Home
	 *****************************************************/
	.home #main {
    margin: -1px 0 0;
    width: 100%;
  }
  .home #main .inside {
		max-width: 100%;
		width: 100%;
		padding:0;
	}
	.home .mod_article [class*="ce_"] {margin: 0}
	.home #claim {
		margin: 4% auto;
    max-width: 800px;
    padding: 0 10px;
	}
  .home #claim .ce_text {
    height: auto;
    margin-left: 7%;
    max-width: 500px;
  }
  .home #claim .ce_text:before {
    background-image:url('../../content/inhaltselemente/smiley.png');
    background-repeat: no-repeat;
    content:" ";
    height: 120px;
    position: absolute;
    width:100px;
  }

  .home #claim h1,
  .home #claim p {
    background: none repeat scroll 0 0 rgba(193, 176, 92, 0.6);
    color:white !important;
    display: inline-block; 
    font-family: 'spirig-partner-spezial', sans-serif;
    font-size:200%;
    letter-spacing: 0.05em;
    line-height: 120%;
    margin-bottom: 0;
    margin-left:100px;
    padding: 5px;
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
  }
  .home #claim h1 {
    margin-bottom: 4px;
    margin-top: 11px;
  }
  .home #claim p { 
    padding-left: 20px;
  }
/**
 * HEADER
 *****************************************************/
#header {
	background: none repeat scroll 0 0 #fff;
  height: 243px;
}
.logo {
	padding: 40px 0;
  text-align: center;
  width: auto;
}
.logo img { max-width: 300px; }
/**
 * NAVIGATION - Main
 *****************************************************/
#mainnavigation {
	background: none repeat scroll 0 0 #3c3222;
  font-family: "spirig-partner-spezial",sans-serif;
  font-size: 126%;
  height: 100px;
  letter-spacing: 0.05em; 
}
#mainnavigation ul {
	margin-top: 30px;
	padding:0;
}
#mainnavigation ul li { 
	display: inline;
  margin-right: 10px; 
}
#mainnavigation ul li.first { margin-left: -10px; }
#mainnavigation ul li.last { 
    margin-right: 0px; 
}
#mainnavigation ul li strong,
#mainnavigation ul li span {
	color: white;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  border-top: 1px solid #3c3222 ;
	padding: 10px
}
#mainnavigation ul li strong.trail,
#mainnavigation ul li a.trail span,
#mainnavigation ul li strong.active,
#mainnavigation ul li strong:hover,
#mainnavigation ul li span:hover {
	color:#c1b05c;
	border-top: 1px solid #c1b05c ;
	padding-top: 10px;
  font-weight: 100;
}
    /**
     * NAVIGATION - Main 2. Ebene
     *****************************************************/
    #mainnavigation ul ul {
      display:none;
      z-index: 999;
    }
    #mainnavigation ul ul li { margin-right: -16px}
    #mainnavigation ul ul li strong:after,
    #mainnavigation ul ul li span:after { 
      content: " | ";
      padding-left: 5px;
    }
    #mainnavigation ul ul li.last strong:after,
    #mainnavigation ul ul li.last span:after { content: "";}
    #mainnavigation ul li.active ul,
    #mainnavigation ul li.trail ul {
      display: block;
      left: 50%;
      margin-left: -400px;
      position: absolute;
      text-align: center;
      width: 800px;
    }
    #mainnavigation ul ul li strong,
    #mainnavigation ul ul li span { 
      border: medium none;
      color: #3c3222;
      font-size: 75%;
      text-align: center;
      text-transform: none;
    }
    #mainnavigation ul ul li strong.trail,
    #mainnavigation ul ul li span.active,
    #mainnavigation ul ul li a.trail span,
    #mainnavigation ul ul li strong:hover,
    #mainnavigation ul ul li span:hover {
      color:#c1b05c;
      border-top: 0px solid #c1b05c ;
      padding-top: 10px
    }
/**
 * NAVIGATION - Mobil
 *****************************************************/
#sidenavigation {
  display: none;
  position: absolute;
  right: 14px;
  top: 5px;
}
#sidenavigation span {
  background: url("../img/menu-open.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  display: block;
  height: 32px;
  width: 32px;
}
.mm-wrapper_opening #sidenavigation span {
  background: url("../img/menu-close.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  display: block;
  height: 32px;
  width: 32px;
}
.mm-list > li > strong, .mm-list > li > span {color:#3c3222;}

 /**
     * Cookie BAR
     *****************************************************/
     
.cookie-bar{
	font-family: "spirig-partner-spezial",sans-serif;
    font-size: 0.9rem;
    height: 100px;
    padding: 3rem;
    background-color: rgba(60,50,34,0.95);
    width: 420px;
    right: 0px;
    position: fixed;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    z-index: 999;
    bottom: 0px;
    text-align: center;
    animation: cookieFadeIn .8s 1s both;
}

@media  (max-width: 680px){
	.cookie-bar{
		margin-bottom: 0;
		width: 100%;
	    height: 22%;
	    padding: .8rem 0.4rem;
	}
	.cookie-bar p{
		font-size: 0.8rem;
		margin: .4rem 2rem;
		margin-top: 7%;
	}
}

@media  (max-width: 540px){
	.cookie-bar{
		height: 24%;
	}
}

.cookie-bar p{margin-bottom: 1.6rem;text-align: center;}

.cookie-bar p, .cookie-bar a{
	color: white !important;
}

.cookie-bar a{cursor: pointer;}

.cookie-button{
	font-family: "spirig-partner-spezial",sans-serif;
	text-decoration: none;
	font-size: 1rem;
	border: 1px solid #c1b05c;
	padding: .5rem;
}
@keyframes cookieFadeIn{
	0%{
		opacity: 0;
		transform: translateY(4300px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}  
/**
 * CONTENT
 *****************************************************/
    /**
     * SPECIALS
     *****************************************************/

     /**
     * Meilensteine
     ******************************************************/

        #meilensteine td:nth-child(2) { width: 20px; }
        #meilensteine td:nth-child(1) { text-align: right; }
        /**
         * Angepasstes Gridsystem
         *****************************************************/
        .ce_gallery li {
          max-width: 32%;
          margin-right:2%;
        }
         .ce_gallery .image_container a {height:1px;}
        .ce_gallery.zweibilder li {
            margin-right: 2%;
            max-width: 49%;
        }
        .ce_gallery.zweibilder .col_last,
        .ce_gallery li.col_2 {margin-right:0;}
        .event .ce_gallery > ul li {
          float: left;
          padding-bottom: 2%;
        }
        .rs-column.-large-col-3-2 { width: 64%; }
        .rs-column {margin-right: 4%;}
        .rs-column.-large-col-3-1 {
          width: 32%;
        }
        .rs-column.-medium-first-row {margin-top: 0}
        /**
        * TEAM
        *****************************************************/
        .container {
          margin: 0 auto;
          max-width: 800px;
          padding: 0;
          position: relative;
          width: 100%;
        }
        .portfolio .list li {
          background: none;
          float: left;
          margin: 0 2% 0% 0;
          width: 31.3%;
        }
       .portfolio .list .thumb {
          height: 280px !important;
          width: 100%;
        }
        .portfolio .mod_article [class*="ce_"], 
        .portfolio .mod_article [class*="mod_"] {margin: 0 !important}
        .colio-link p {
          color:#3c3222;
          text-decoration: none !important;
          text-align: center;
        }
        .colio-link img {
          position: relative;
          z-index:9999;
        }
        a.colio-link:hover {background:rgba(60, 50, 34, 0.9);}
      /**
      * STELLEN
      *****************************************************/
      .stellen { margin-bottom: 40px }
      .stellen .subheadline { margin-bottom: 20px; }
      .back a,
      .stellen .more a,
      .stellen p strong a {
        color: #3c3222;
        text-decoration: underline;
      }
      .stellen h2 {font-size: 87.5%}
      .stellen .teaser {width: 64%}
      /**
      * AKTUELLES
      *****************************************************/
      .aktuelles { margin-bottom: 20px; }
      .aktuelles .left {
        float:left;
        margin-right:4%;
        width: 32%
      }
      .aktuelles .right {
        float:left;
        margin-right:0;
        width: 64%
      }
      .aktuelles .more a,
      .aktuelles .headline a {color: #3c3222;}
      .aktuelles .headline { margin-bottom: 0; }
      .mod_newsreader .aktuelles h1 {margin-top: 20px}
      .mod_newsreader .aktuelles h2 {margin-bottom: 32px}
      .mod_newsreader .aktuelles .teaser {margin: 30px 0}
      .mod_newsreader .aktuelles p {width: 64%}
      .mod_newsreader .back a {
        background: none repeat scroll 0 0 #3c3222;
        color: white;
        padding: 3px 5px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
      }
      .mod_newsreader .aktuelles a {
        color:#3c3222;
        text-decoration: underline;
      }
      /**
      * PROJEKTE / OBJEKTE
      *****************************************************/
      .event-wrapper {
        float:left;
        margin-right:2%;
        min-height: 260px;
        width: 31.33%;
      }
      .event-wrapper .event.layout_teaser {
        font-size: 11px;
        height: 30px;
        position: relative;
        text-align: center;
      }
      .event-wrapper  a {
        color:#3c3222;
      }
      .event-wrapper .image_container.float_above { margin-bottom: -10px; }
      .event.layout_full h2 {margin-bottom: 32px}
      .mod_article .mod_eventreader [class*="ce_"], 
      .mod_article .mod_eventreader [class*="mod_"] { margin: 0 0 20px !important; }
      .mod_eventreader .back a {
        background: none repeat scroll 0 0 #3c3222;
        color: white;
        padding: 3px 5px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
      }
      .event.layout_full table td:first-child { font-weight: bold; }
      .event.layout_full table td:nth-child(2) {
        padding-left: 5px;
        width: 10px;
      }
      /**
      * FORMULAR
      *****************************************************/
      .ce_form .widget.widget-text {
        clear: both;
        height: 39px;
      }
      .ce_form.widget.widget-textarea {
        clear:both;
      }
      .ce_form .widget.widget-text label {
        float: left;
        padding: 0;
        vertical-align: top;
        width: 30%;
      }
      .ce_form .widget.widget-textarea label {
        clear: both;
        display: block;
        float: none;
        position: relative;
        width: 100%;
      }
      .ce_form .widget.widget-text input {
        float:right;
        width: 70%;
      }
      .ce_form .widget-submit button {
        background-color: #3c3222;
        background-image: none;
        background-repeat: repeat-x;
        border: medium none;
        border-radius: 0;
        color: white;
        cursor: pointer;
        display: inline-block;
        float: right;
        font-size: 80%;
        margin-bottom: 0;
        margin-top: 10px;
        padding: 3px 5px;
        text-align: center;
        text-transform: uppercase;
        transition: background 0.15s linear 0s;
        vertical-align: middle;
      }
      .kontakt table {     
        margin-bottom: 0;
        margin-top: -14px;
        width: 100%;
      }
      .widget>label {
	      font-weight: normal;
      }
      /**
      * MAP
      *****************************************************/
      .overlay {
        background: none repeat scroll 0 0 white;
        height: 40px;
        margin-top: -40px;
        position: relative;
      }
      .overlay a {
        float:right;
        color:#3c3222;
      }
      /**
      * Lightbox
      *****************************************************/
      #mbOverlay {background-color: #3c3222}
      #mbOverlay[style] {opacity: 0.8 !important}
      #mbTitle {display:none !important;}
      #mbCenter {background-color: #3c3222 !important}
      
      /**
      * Slick-Slider
      *****************************************************/
      .header-slider {
	      z-index: -999999;
	      position: fixed !important;
	      top: 0;
	      left: 0;
	      width: 100%;
	      height: 100%;
      }
      .header-slider .slick-list,
      .header-slider .slick-track {
	      height: 100%;
      }
      .header-slider li {
	      max-width: none;
	      margin-right: 0;
	      width: 100%;
	      height: 100%;
	      background-size: cover;
	      background-position: center;
      }
/**
 * FOOTER
 * Um den Footer immer zu unterst anzeigen zu lassen
 * wie in diesem Beispiel: http://ryanfait.com/sticky-footer/
 * bitte diese Anleitung nehmen:
 * http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
 *****************************************************/
* { margin: 0; }					       /* wichtig f�r sticky-footer*/
html, body { height: 100%; }		 /* wichtig f�r sticky-footer*/
.mm-page {
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  position: relative;
}
#wrapper {
	min-height: 100%;
	height: auto !important; 
	height: 100%;
	margin: 0 auto -221px;
}
.sticky-footer, .push {
	font-family: "spirig-partner-spezial",sans-serif;
	min-height: 221px;
  letter-spacing: 0.05em;
} 
.sticky-footer { background:#dfdcd8; }
.sticky-footer,
.sticky-footer a,
.sticky-footer p {
	color: #80715d !important;
	text-decoration: none
}
.sticky-footer table {width: 100%}
.sticky-footer table td:first-child {width: 45px}
.footerclaim {
	font-size: 242%;
  padding-top: 63px;
  text-transform: uppercase;
}
.facebook {
  font-family: 'Open Sans', sans-serif;
}
.facebook p {
  font-size: 80%;
  line-height: 140%;
}
.home .rs-column.-medium-first-row {
    margin-top: 0;
}
.home .rs-column.-large-col-2-1 {
    width: 46.1539%;
}
.home .rs-column.-large-first-row {
    margin-top: 0;
}
.home .rs-column.-large-first {
    clear: left;
}
.home .rs-column.-large-last {
    margin-right: -5px;
}
.home .rs-column {
    margin-right: 4%;
}
.home .rs-column {
    float: left;
    margin-right: 7.69231%;
    margin-top: 7.69231%;
    width: 100%;
}
.home .rs-columns {
    clear: both;
    display: inline-block;
    width: 100%;
}
.home .sticky-footer {background: none repeat scroll 0 0 white;}
#footer .inside {padding-top: 40px}

/**
 * Angepasstes Gridsystem
 *****************************************************/
@media  (max-width: 880px) {
      #mainnavigation {display:none;}
      #sidenavigation {
        display: block;
      }
      #header {
        background: none repeat scroll 0 0 #fff;
        border-bottom: 15px solid;
        height: auto;
      }
}
@media  (max-width: 720px) {
      .portfolio .list .thumb {
        height: 260px !important;
        width: 100%;
      }
}
@media  (max-width: 660px) {
      .portfolio .list .thumb {
        height: 240px !important;
        width: 100%;
      }
}
@media  (max-width: 600px) {
      .portfolio .list .thumb {
        height: 280px !important;
        width: 100%;
      }
}
@media  (max-width: 600px) {
      .portfolio .list .thumb {
        height: 280px !important;
        width: 100%;
      }
}
@media  (max-width: 600px) {
      .ce_gallery li {
        margin-right: 0;
        max-width: 100%;
        width: 100%;
      }
      .ce_gallery li.col_2 {margin-right:0;}
      .ce_gallery > ul li {
        float: left;
        padding-bottom: 10px;
      }
      .rs-column.-large-col-3-2 {
        width: 100%;
      }
      .rs-column {margin-right: 0%;}
      .rs-column.-large-col-3-1 {
        width: 100%;
      }
      .sticky-footer .rs-column {width: 100%}
      .sticky-footer .rs-column .rs-column {width: 50%}
      .sticky-footer .footerclaim {
        float: left;
        padding-top: 10px;
      }
      .sticky-footer .footerclaim p[style] {text-align: left !important}
      .sticky-footer .rs-column.-medium-first-row {margin-top: 0}

      .portfolio .list li {
        background: none;
        float: left;
        margin: 0 2% 0% 0;
        width: 48%;
      }
      .portfolio .list .thumb {
        height: 300px !important;
        width: 100%;
      }
      .stellen .teaser {width: 100%}
      .aktuelles .left {
        float:none;
        margin-right:0%;
        width: 100%
      }
      .aktuelles .right {
        float: none;
        margin-bottom: 10px;
        margin-right:0;
        width: 100%
      }
      .mod_newsreader .aktuelles p {width: 100%}
      .ce_form .widget.widget-text label, 
      .ce_form .widget.widget-text input {width:100%;}
}
@media  (max-width: 480px) { 
  .portfolio .list li {
    background: none;
    float: left;
    margin: 0 0% 0% 0;
    width: 100%;
  }
  .portfolio .list .thumb {
    height: 460px !important;
    width: 100%;
  }
  .home .rs-column.-large-col-2-1 {width: 100%}
  .event-wrapper {
    float: left;
    margin-right: 2%;
    min-height: 260px;
    width: 48%;
  }
}
@media  (max-width: 360px) { 
  .event-wrapper {
    float: left;
    margin-right: 0%;
    min-height: 310px;
    width: 100%;
  }
  .event-wrapper .event.layout_teaser { top: 10px; }
/*For worst IE Browsers*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .event-wrapper .image_container.float_above { margin-bottom: 0px; }
  .ce_gallery li { margin-bottom: 2%; }
}