/* *****************************************************************
 * css-datei zu mwi-interim-management.de
 *            
 ******************************************************************* */
/* *****************************************************************
 *  1. Definitionen html-tags (+ evtl. direkt zugehörige Klassen)          
 ******************************************************************* */
body {
  padding-top: 6em; /* navbar-fixed-top/ mwiHeader */
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;/*1.33vw;*/
  font-weight:400;
  color: #202020;
    background: -webkit-linear-gradient(left, #FFFFFF, #595959); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #FFFFFF, #595959); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #FFFFFF, #595959); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #FFFFFF, #595959); /* Standard syntax */   
}

h1,h2,h3 {
  font-family: 'Nunito', sans-serif;
  text-align: center;
  font-weight: 700;
  text-transform:uppercase; 
}

h1{
    font-size: 2em;
}

h2 {
    font-size:1.1em; /* h2 ist nur auf xs-Bildschirmen 1.1 em, sonst 1.75em */
    font-weight:400;    
}
h3 {
    font-size:1.1em; /* h3 hat immer 1.1em */
    font-weight:400;    
}

a {
   color:#202020;
}

a:hover, a:focus{
    color: #9a0a15;
    outline:none;
}
.mwi-active {
    cursor: pointer;
}

section {
    position:relative;
    margin-bottom: 10em;
}
.section-anchor{
    position:relative;
    top:-12em;
}
footer {
    position:relative;
    width:100%;
    height:4em;
    margin-top:4em;
    background-image: url("../images/skyline-footer2.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position-y:top;
    z-index:100;
    padding:1em;
}

ul {
    list-style-type: none;
    padding-left:0px;
    margin-bottom:1.5em;
    margin-right:1em;
}

/* *****************************************************************
 *  2. Headerbereich und Menü         
 ******************************************************************* */
#mwiHeader {
    float:none !important;
    background-color: #FFFFFF;
    height:6em;
    margin-right:-15px;
    margin-left:-15px;
}

.mwiHeaderContent { /* entspricht container von bootstrap! */
   position:relative;
   width:90%;
   margin:auto;
   pointer-events:none;
}

#mwiNavigation {
    font-size:1em;
    font-weight:300;
    width:25%;
    min-height:6em;
    min-width:12em;
    background-color:#FFFFFF;
    background-image: url("../images/mwi-logo-einfach-mit-rot.png");
    background-repeat:no-repeat;
    background-size:70%;
    background-position:1em 1em;
    padding: 1.5em 1.5em 2em 1.5em;
    border-bottom-left-radius:1em;
    border-bottom-right-radius:1em;
 /*   box-shadow: 4px 0px 5px gray;*/
    pointer-events:auto;    
}

/* *****************************************************************
 *  3. Inhaltsbereich - Allgemein     
 ******************************************************************* */
#bodyContent {
    position:relative;
    top: 1em;
    width:90%;
   
}
#bodyContentBackgroundFix1 {
    position:fixed;
    width:10%;
    top:42em;
}
#bodyContentBackgroundFix2 {
    position:fixed;
    width:10%;
    top:50em;  
}

.mwi-board {
    border-radius: 0em 2em 2em 2em;
    padding:1em 1em;
    color:#FFFFFF;
}
.mwi-text-position{
        width:100%;
        margin-left:0px;
    }
.mwi-row{
    margin-top:2em;
    margin-bottom: 2em;
}


.mwi-portrait {
    margin:auto;
    max-height:10em;
    margin-bottom:1em;
}

.mwi-portrait-small {
    margin:auto;
    max-height:10em;
    margin-bottom:1em;
}

.mwi-col p {
    margin: 0 1.5em 1em 1.5em;
}


/* *****************************************************************
 *  4. Inhaltsbereich - Definitionen für einzelne Abschnitte     
 ******************************************************************* */
#ueberMichBoard ul {
    list-style-type: circle;
    padding-left: 1.5em;
    margin-left:1.5em;
}
#leistungen, #arbeitsablauf, #impressum{
    width:100%;
    background-color: #FFFFFF;
}
#leistungen .mwi-board, #arbeitsablauf .mwi-board, #impressum .mwi-board, #kontakt .mwi-board{
    border-radius: 0em 0em 1em 1em;
    color:#202020;
}
#leistungen ul, #projekte ul {
   list-style:  circle outside;
   padding-left:2em;
   margin-right:0em;
  /* font-size:0.9em;*/
}
#leistungen .mwi-col{
    border-right: solid 1px #202020;
    padding-bottom:1em;
}
#leistungen .mwi-col.right{
    border-right: none;
}
#leistungen h3{
    margin-top: 0em;
}
#projekte .mwi-col{
    border-right: solid 1px #FFFFFF;
}

#projekte .mwi-col.right{
    border-right: none;
}
#ziel {
    position:absolute;
    top:24%;
    left:39%;
    width:16%;
    height:10%;
}
#bearbeitung {
    position:absolute;
    top:48%;
    left:30%;
    width:24%;
    height:15%;
}
#arbeitsablauf .button:hover { 
    border: #808080 2px solid;
    border-radius:2px;
    background-color: #808080;
    opacity: 0.5;
}
.popover {
    margin-top:0em;
    max-width:35%;
    margin-left:6em;
    font-size: 0.75em;
}
.popover>.arrow {
    display:none !important;
}
.popover li>p {
    padding-left:1em;
    margin-bottom:1.5em;
    margin-right:1em;
}
.popover-ebene2 {
    margin-left:3em;
}
#kontakt textarea{
    height: 6em;
}
#kontaktInfo {
    margin-top:5em;
}
.mwi-btn{
    margin-top: 1em;
    background-color: #FFFFFF;
    color: #202020;
}

#impressum p, table {
    margin:1em 2em 1em 2em;
}
/* *****************************************************************
 * board-rotate
 * ***************************************************************** */
.board-rotate {
  -webkit-perspective: 1000px; /* Chrome, Safari, Opera */
  perspective: 1000px;
}

.turnaround {
    transform: none;
    transition:  transform 1.5s /* Die Drehung soll 0,75 Sekunden dauern */;
    -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
   position: relative;
   height: 100%;
}
.mwi-front, .mwi-back {
  /*  -webkit-backface-visibility: hidden;
   backface-visibility: hidden /* Die Rückseite von Elementen soll unsichtbar sein */;
}

.mwi-front { 
   /* z-index: 2;*/
   opacity:1;
 }

.mwi-back {
   transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
   -ms-transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
  /* z-index: 1;*/
    opacity:0;
    display:none;
}

/* *****************************************************
 * Anpassung von bootstrap-Ids und Classes:            *
 ***************************************************** */
#navbar {
    font-family: 'Nunito', sans-serif;
    font-size:1em;
    text-transform:uppercase;
    margin-top:6em;
    margin-bottom:1em;
    border-bottom-left-radius:1em;
    border-bottom-right-radius:1em;
}
#navbar ul{
    float:none;
    padding-bottom:1em;
}
#navbar ul>li{
    float:none;
}
#navbar ul>li.active{
    font-weight:400;
}
.navbar-nav {
    margin:0;
}
.container {
    padding-left:0px;
    padding-right:0px;
}
.navbar-fixed-top .navbar-collapse {
    max-height:500px;
    border-width:0px;
}

.nav>li>a{
    padding: 1.5em 0em 0em 0em;
    
}
.nav>li>a:focus, .nav>li>a:hover{
    background-color:transparent;
}
.navbar-toggle {
    margin-top:0em;
    margin-right:0px;
    background-color:#ffffff;
}
.navbar-toggle .icon-bar {
    background-color:#9A0A15;
    width:2em;
    height:4px;
}
button.navbar-toggle{
}
.navbar-collapse {
    padding:0;
}

/* *****************************************************
 * Text-Formatierung, Farben                           *
 ***************************************************** */
.mwi-small {
    font-size: 0.6em;
}
.mwi-smaller {
    font-size: 0.8em;
} 
.mwi-text-normal {
    text-transform: none;
}
.mwi-text-title{
    font-family: 'Nunito', sans-serif;
    text-transform:uppercase; 
}
.mwi-h2-type {
    font-size:1.5em;    
}
.mwi-h3-type {
    font-size:1.1em;    
}
.mwi-text-light{
    font-weight:300;
}
.mwi-rot{
    color: #9a0a15;
}
.mwi-bg-red{
    background-color: rgba(192,2,2,0.8); /*#9a0a15;*/
}
.mwi-border-red{
    border: solid 2px #9a0a15;
}
.mwi-gruen{
    color:#009245;
}
.mwi-bg-green{
    background-color: rgba(0,146,69,0.8); 
}
.mwi-border-green {
    border: solid 2px #009245;
}
.mwi-schrift{
    color: #202020;
}
/* *****************************************************
 * Media-Queries                                       *
 ***************************************************** */


@media (min-width: 769px) {
    body {
        padding-top:12em;
        border-right:2em solid #009245;
    }
    h1 {
        font-size: 2.5em;
    }
    h2,.mwi-h2-type {
        font-size: 1.75em;
    }
    #mwiHeader {
        border-right:2em solid #009245;
    }
    .mwi-board-wrapper-red{
        padding:1.9em 0px 0px 2.1em;
        background-image:url("../images/wuerfelRot.png");
        background-repeat: no-repeat;
        background-size: 4.2em;
    }
    .mwi-board-wrapper-green{
        padding:1.9em 0px 0px 2.1em;
        background-image:url("../images/wuerfelGruen.png");
        background-repeat: no-repeat;
        background-size:4.2em;
    }
    .mwi-board {
        border-radius: 0em 2em 2em 2em;
        padding:2em 2em;
        color:#FFFFFF;
    }
    .mwi-portrait {
        margin:auto;
        max-height:14em;
        margin-bottom:1em;
    }
    #mwiHeader {
        float:none !important;
        background-image: url("../images/skyline-ausschnitt2.jpg");
        background-repeat:no-repeat;
        background-size:cover;
        background-position:bottom;
        height:12em;
    }
    #mwiNavigation {
        box-shadow: 4px 0px 5px gray;
    }
    #navbar {
        margin-top:16em;/* Höhe des headers 12em  + Abstand 4em! */
    }
    .mwi-text-position{
        width:72.5%;
        margin-left:27.5%;
    }
}


@media (max-width: 992px) {
    #leistungen .mwi-col, #projekte .mwi-col {
        border-right:none;
    }
}
@media (min-width: 1200px) {
    body {
        font-size:16px;
    }
    .mwiHeaderContent, #bodyContent{
        width: 1080px;                       /* ab Bildschirmbreite 1200px, bleibt der Inhaltsbereich bei 1080px! */
     }
     #mwiNavigation {
        width:270px;
    }       
}