/*--------------------------------------------------
** Global Rules */
/*@media screen {*/

    html {  font-size: 12px; }

    body { margin: 0; padding: 0; overflow: hidden; font-family: 'Lato', sans-serif;}

    h1, h2, h3, h4 { color: #32485D; text-transform: uppercase; letter-spacing: 1px;}
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem;}
    h3 { font-size: 2rem;}
    h4 { font-size: 1.1rem;}

    p{  font-size: 1rem; line-height: 1.7; color:#737373; }

    a {  font-size: 0.8rem; color: inherit  }

    strong {color: #32485D;}

    textarea{ resize: none; }
    textarea:focus,
    input:focus {outline: none}

    /* Our Grouping */

    .ueberUns, .service, .philosophie, .team, .overlay-kontakt {padding:50px 0 80px 0}

    header {
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }

    .nav > li > .ueberUns .description button,
    .philosophie .feat .column, .philosophie .feat h4,
    .philosophie .feat i, .team .person img,
    .team .person .social i, .kontakt form button,
    footer .copyright a, #scroll-top {
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out
    }

/* Our Grouping */

/* Media Query */

    @media only screen  and (min-width: 500px){  html{  font-size: 12px;  }  }
    @media only screen  and (min-width: 768px){  html{  font-size: 14px;  }  }
    @media only screen  and (min-width: 992px){  html{  font-size: 16px;  }  }
    @media only screen  and (min-width: 1200px){  html{  font-size: 18px;  }  }
    @media only screen  and (min-width: 1400px){  html{  font-size: 20px;  }  }

/* </ Media Query */

/*}*/
/* </ Global Rules
-------------------------------------------------- */

/*--------------------------------------------------
** My Framework */
/*@media screen {*/

    .mainColor{  color: #32485D;  }
    .headingColor{  color: #646464 !important;  }
    .linkColor{ color: #d7d7d7; }
    .backgroundColor{ color: #ecf0f1; }

    .active { color:#DBDBDB;  border-bottom: 2px solid #d7d7d7  }

    .overlay{ width:100%;  height: 100% }

    .heading{ position:relative; margin-bottom: 80px}
    .heading:after {
        content:"";
        position: absolute;
        display:block;
        top:50px;
        left: 47%;
        width:80px;
        border-bottom: 4px solid #646464
    }

/* Media Query */

    @media (max-width: 768px) {

        .heading:after { display: none}

    }

/* </ Media Query */

/*}*/
/* </ My Framework
-------------------------------------------------- */

/*--------------------------------------------------
** Overriding Bootstrap */
/*@media screen {*/

/* Navbar */

    .navbar-brand {height: auto}
    .navbar-brand:hover,
    .navbar-brand:focus {color: inherit;}

    .navbar-collapse {padding-right:50px}
    .navbar-collapse ul{ margin-top: 25px; }
    .navbar-collapse ul li {margin-left: 15px}

    .navbar-collapse ul li a {
        padding: 20px 0 10px 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 1.2rem;
        border-bottom: 2px solid transparent;
        letter-spacing: 1px;
        color: #32485D;
    }

    .nav > li > a:hover,
    .nav > li > a:focus { background:none; }
    .nav > li > a:hover {  color:#DBDBDB;  background:none; border-bottom: 2px solid #d7d7d7 }

/* </ Navbar */

/* Media Query */

    @media only screen  and (min-width: 768px){

        .navbar-collapse ul li:first-child {margin-left: 0;}

    }

    @media only screen  and (max-width: 768px){

        .navbar-collapse ul { text-align:  center}
        .navbar-collapse a {  font-size: 1.1rem;  padding: 0;}
        .navbar-collapse ul li a {  padding: 0px 0 10px 0; }

    }

/* </ Media Query */

/*}*/
/* </ Overriding Bootstrap
-------------------------------------------------- */

/*--------------------------------------------------
** Header */
/*@media screen {*/

    header { background: url('../images/header/bg2.png');  color: #d7d7d7;  position: relative;  overflow: hidden;}

    header .overlay-header {  background-color: rgba(134, 139, 144, 0.8);  }

    header img{  width: 80%;  }

    header p{ color: #d7d7d7; }

    header .intro h2 { color : #d7d7d7;  }
    header .intro .element-parent { font-size: 1.3rem; margin-top: 20px;  margin-bottom:15px  }

    header .arrow {
        position: absolute;
        bottom: 1px;
        left:0;
        width:100%;
        cursor:pointer
    }
    header .arrow i{
        -webkit-animation-duration: 3s;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-duration: 3s;
        -moz-animation-delay: 2s;
        -moz-animation-iteration-count: infinite;
        -o-animation-duration: 3s;
        -o-animation-delay: 2s;
        -o-animation-iteration-count: infinite;
        animation-duration: 3s;
        animation-delay: 2s;
        animation-iteration-count: infinite;
    }

/* Media Qeury */

    @media (max-width: 768px) {

        header a img{  width: 50%;  }

    }

    @media only screen  and (max-width:1200px) and (min-width:768px) {

        header a img{  width: 70%;  }

    }
/* </ Media Qeury */

/*}*/
/* </ Header
-------------------------------------------------- */

/*--------------------------------------------------
 ** Second Navbar */
/*@media screen {*/

    .second-nav {
        background-color: #32485D;
        display: none;
        position: fixed;
        top: -24px;
        left: 0;
        width: 100%;
        height: 86px;
        border-bottom: 1px solid #FFFFFF;
        z-index: 100;
    }

    .second-nav .navbar {margin:8px auto; width: 85%}

    .second-nav .navbar-collapse ul li a {  padding: 8px 0 8px 0; color:#FFFFFF;  font-size: 1rem; }

    .second-nav .nav > li > a:hover,
    .second-nav .nav > li > a:focus {  color:#FFFFFF;  background:none;  }

    @media only screen  and (min-width: 768px) and (max-width: 780px){
        .second-nav .navbar-collapse ul li a {  padding: 8px 0 8px 0; color:#FFFFFF;  font-size: 0.5rem; }
    }

/*}*/
/* </ Second Navbar
-------------------------------------------------- */

/*--------------------------------------------------
** Über uns */
/*@media screen {*/

    .ueberUns {  background-color: #ecf0f1 ; }
    .ueberUns .description h3 {  padding:10px 0 10px 15px;  border-left: 6px solid #32485D;  margin-bottom: 30px;  }

/* Media Query */

/* </ Media Query */

/*}*/
/* </ Über uns
-------------------------------------------------- */

/*--------------------------------------------------
** Service */
/*@media screen {*/

    #accordion section,
    #accordion .pointer,
    #accordion h4,
    #accordion p{
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
    }

    .service{ background-color: #F7F7F7; }
    .service h2 { margin-bottom: 60px; }

    #accordion  {  background-color: #ECF0F1; }

    #accordion section {
        overflow: hidden;
        /*height: 440px;*/
        height: auto;
        border:1px #646464 solid;
        border-bottom: none;
    }
    #accordion section:last-child{  border:1px #646464 solid; }

    #accordion section.ac_hidden p:not(.pointer) {  color:#fff;  }
    #accordion section.ac_hidden {  height: 50px; }

    #accordion h4 {
        cursor: pointer;
        background-color: #646464;
        margin:0;
        color: #FFFFFF;
        padding: 15px 15px 15px 30px;
        border: 1px solid #FFFFFF;
    }
    #accordion p {  padding: 10px 10px 0 10px;  margin-top: 0px;  }

    #accordion .pointer {
        padding:0;
        margin:13px 0 0 6px;
        width:13px;
        position:absolute;
        color: #FFFFFF;
    }
    #accordion section:not(.ac_hidden) h4 {  background-color: #32485D;}

    #accordion section:not(.ac_hidden) .pointer {
        display:block;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform:rotate(90deg);
        transform:rotate(90deg);
        padding:0;
    }

/* Media Query */

    @media (max-width: 768px){

        #accordion h4{ font-size: 0.8rem }

        #accordion section.ac_hidden {  height: 42px;  }

    }

    @media (max-width: 992px) and (min-width: 768px){

        #accordion section.ac_hidden {  height: 48px;  }

    }

/* </ Media Query */

/*}*/
/* </ Service
-------------------------------------------------- */

/*--------------------------------------------------
** Philosophie */
/*@media screen {*/

    .philosophie { background-color: #ecf0f1; }

    .philosophie p {  margin-top: 40px; }

    .philosophie .feat .column {
        margin-top:60px;
        border-bottom:4px solid #acacac;
        border-radius:5px;
        background-color:#f7f7f7
    }
    .philosophie .feat .column:hover {border-bottom: 4px solid #32485D}
    .philosophie .feat .column p {  padding: 0 5px 0 5px;  }


    .philosophie .feat i {
        margin-bottom: 10px;
        margin-top: -40px;
        width:85px;
        height:85px;
        line-height:85px;
        border:2px solid #32485D;
        border-radius:50%;
        background-color:#FFFFFF;
        color:#ababab
    }
    .philosophie .feat:hover i {color:#32485D; border:2px solid #32485D}
    .philosophie .feat i:hover  {
        background-color:#32485D;
        border:2px solid #32485D;
        color:#FFFFFF;
        cursor: pointer
    }

    .philosophie .feat h4 {  margin-top:20px;  margin-bottom:20px;  }
    .philosophie .feat h4:hover {cursor: pointer;color:#32485D;}


/* Bootestrap */

    .philosophie .col-md-3{padding-left: 5px; padding-right: 5px}

/* </ Bootestrap */

/*}*/
/* </ Philosophie
-------------------------------------------------- */

/*--------------------------------------------------
** Kontakt */
/*@media screen{*/

    .kontakt { background: url('../images/kontakt/bg.jpg'); background-attachment: fixed}
    .kontakt h2 {color:#d7d7d7; margin-bottom: 20px;}
    .kontakt .overlay-kontakt {  background-color:rgba(0, 0, 0, 0.8);  }

    .kontakt p {  margin-top: 50px;  margin-bottom: 40px;  }

    .kontakt form input {  margin-bottom: 20px;  color: #32485D;  }

    .kontakt form button {
        margin-top: 20px;
        background-color: #32485D;
        padding: 8px 20px;
        border:1px solid #32485D;
        color: #FFFFFF;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .kontakt form button:hover {  background-color: transparent;  color:#32485D;  border-color: #32485D;  }

    .kontakt .information { margin-top:80px }

    .kontakt .information .info>i {
        margin-bottom: 10px;
        width:85px;
        height:85px;
        line-height:85px;
        border:2px solid #32485D;
        border-radius:50%;
        background-color:#FFFFFF;
        color: #32485D;
    }
    .kontakt .information .info >i:hover {
        background-color: #32485D;
        border: 2px solid #32485D;
        color: #FFFFFF;
        cursor: pointer
    }
    .kontakt .information .info >i:hover {
        background-color: #32485D;
        border: 2px solid #32485D;
        color: #FFFFFF;
        cursor: pointer
    }

    .kontakt .information .info p>i:hover{
        color: #32485D;
        cursor: pointer
    }

    .kontakt .information .info h4 {
        font-weight:bold;
        text-transform: uppercase;
        color: rgb(215, 215, 215);
        margin-top:20px
    }
    .kontakt .information .info p {
        margin-top: 15px;
        color: rgba(215, 215, 215, 0.7);
    }

    .kontakt .embed-responsive-item {  border: 1px solid #32485D;}

    .kontakt .marouane-margin{margin-top: 60px; }

/* Media Query */

    @media only screen and (max-width: 768px) {

        .kontakt .information .info>i{ margin-top: 20px; }

    }

    @media only screen and (min-width: 768px) {

        .kontakt .map,
        .kontakt .embed-responsive-item{  height: 400px; }

    }

/* </ Media Query */

/*}*/
/* </ Kontakt
-------------------------------------------------- */

/* Footer
-------------------------------------------------- */
/*@media screen {*/

    footer {background-color:#232428; padding: 20px 0; border-top: 1px solid #FFF;}
    footer .copyright p{  color: #DBDBDB; }
    footer .copyright img{ width: 4%;}

/*}*/
/* </ Footer
-------------------------------------------------- */

/*--------------------------------------------------
** Loading Screen */
/*@media screen {*/

    .loading-overlay {
        background-color: #eaecfa;
        /*background-color: #8BDCCC;*/
        /*background-color: #00B1FF;*/
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index: 99999
    }
    .spinner {
        width: 50px;
        height: 50px;
        position: relative;
        margin: 30% auto;
    }
    .double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #32485D;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;

        -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
        -moz-animation: sk-bounce 2.0s infinite ease-in-out;
        -o-animation: sk-bounce 2.0s infinite ease-in-out;
        animation: sk-bounce 2.0s infinite ease-in-out;
    }
    .double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    .loader {
        text-align: center;
        position: absolute;
        top: 39%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-family: helvetica, arial, sans-serif;
        font-size: 1.5rem;
        font-weight: 900;
        color: #32485D;
    }
    @-webkit-keyframes sk-bounce {
        0%, 100% { -webkit-transform: scale(0.0) }
        50% { -webkit-transform: scale(1.0) }
    }
    @keyframes sk-bounce {
        0%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        } 50% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
    }

/*}*/
/* </ Loading Screen
-------------------------------------------------- */


/*--------------------------------------------------
** Scroll up */
/*@media screen{*/

    #scroll-top {
        width: 45px;
        height: 40px;
        line-height: 29px;
        text-align: center;
        background-color:rgba(50, 72, 93, 0.73);
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
        position: fixed;
        right:25px;
        bottom:35px;
        border-radius: 2px;
        cursor: pointer;
        display: none
    }
    #scroll-top:hover {background-color:#393939;color:#d7d7d7}

/*}*/
/* </ Scroll up
-------------------------------------------------- */

/*--------------------------------------------------
** typesjs */
/*@media screen{*/

    .typed-cursor{
        opacity: 1;
        -webkit-animation: blink 0.7s infinite;
        -moz-animation: blink 0.7s infinite;
        animation: blink 0.7s infinite;
    }
    @keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-webkit-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-moz-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }

/*}*/
/* </ Types.js
-------------------------------------------------- */