/* 
    Created on : 23.01.2018, 08:50:15
    Author     : kieser
*/
body {
    position: relative;
}
#logo-main {
    background: 
        linear-gradient(
            rgba(255, 255, 255, 0.85), 
            rgba(255, 255, 255, 0.85)
        ),
        url("../images/spare-parts-header-logo-bg.jpg"); 
    background-image: rgba(255,255,255,0.5);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.logo-height {
    height: 120px;
}
/* navbar style */
#navbar-primary.navbar-default {
    background-color: #3666b4;
    border: none;
    margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 890px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar-nav>li {
		float: none;
	}
	.collapse.in{
		display:block !important;
	}
}
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: middle;
    }
    .navbar .navbar-collapse {
        display: inline-block;
        text-align: center;
    }
    .navbar-nav li {
        display: table-cell;
        list-style-type: none;
        vertical-align: middle;
    }
    .brand-height-li {
        height: 70px;
        padding-bottom: 10px;
    }
}
.brand-height {
    height: 70px;
    padding-bottom: 10px;
}
.navbar .navbar-nav li a {
    display:table-cell;
    vertical-align: middle;
    color: #ffffff;    
}
.navbar .navbar-nav li a:hover, 
.navbar .navbar-nav li a:focus {
    color: #fff500;  
}
.navbar .navbar-nav li.active {
    font-weight: 600;
    color: #fff500;
    background: #a1ce5c;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    font-weight: 600;
    color: #fff500;
    background: #a1ce5c;
}
.affix {
    top:0;
    width: 100%;
    z-index: 9999 !important;
}
.navbar-brand {
    padding: 5px 0px;
    margin-bottom: 0px;
    left: 10px;
    display: none;
    text-align: center;
    float:left;
}
.icon-bar {
    background: #fff500 !important;
}
.navbar-toggle {
    background:#a1ce5c !important; 
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #3666b4; 
}
/* main image style */
#main-images {
    padding: 0 0;
}
#main-images img{
    width:100%;
    height:auto;
}   
@media (min-width: 768px) {
    .main-img-group {
        display:flex;
    }
    #main-images .img-container1{
        flex:2.647;
    }
    #main-images .img-container2{
        flex:1.512;
    }
}
/* main image caption style*/
#main-images .wrapper {
    min-height: 200px;
} 
#main-images .wrapper div {
    padding: 10px 20px; 
}
#main-images .content-1 {
    background: rgba(161, 206, 92, 0.7); 
}
#main-images .content-2 {
    background: rgba(41, 198, 195, 0.7); 
}
/* Section new genuine parts */
.new-genuine-parts {
    color: #666666;
    background-color: #e0e0e0;
    padding: 0;
	overflow:hidden;
}
.new-genuine-parts .flex-container {
    justify-content: space-between;
}
.new-genuine-parts div.flex-content {
    width: 60%;
    min-height: 200px;
    padding-right: 0px;
}
.new-genuine-parts div.flex-img {
    width: 35%;
    -webkit-align-self: center;
    align-self: flex-center; /* or flex-start , flex-end  */
    text-align: right;
}
.new-genuine-parts div.flex-img img {
    max-width: 100%;
    max-height: 300px;
    min-height: 200px;
    min-width: 364px;
    height: auto;
}
/* Section new aftermarket parts */
.new-aftermarket-parts {
    background: url("../images/aftermarket-parts-bg.jpg") no-repeat center center fixed;
    background-size: cover;
}
.new-aftermarket-parts .img-container {
    margin: 0 10px;
    min-height: 100px;
}
.new-aftermarket-parts .img-container div {
    background: rgba(41, 198, 195, 0.8); 
}
.new-aftermarket-parts .img-container div p {
    padding: 5px 5px;
    text-align: right;
    margin: auto 0;
}
/* Section new truck parts */
#new-truck-parts {
    background-color: #a1ce5c;
    padding: 0;
}
#new-truck-parts .flex-container {
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-justify-content: end;
    justify-content: flex-end;
}
#new-truck-parts div.flex-content {
    width: 60%;
    min-height: 200px;
    padding-left: 0px;
}
#new-truck-parts div.flex-img {
    position: absolute;
    width: 35%;
    left: -20px;
}
@media (max-width: 992px) {
    #new-truck-parts div.flex-img {
        -webkit-align-self: center;
        align-self: flex-center; /* or flex-start , flex-end  */
    }
}
#new-truck-parts div.flex-img img {
    max-width: 100%;
    width:auto;
    height: auto;
    max-height: 462px;
}
/****** Used Vehicle Parts *******/
#used-vehicle-parts {
    background: url("../images/used-vehicle-parts-bg.jpg") no-repeat center center fixed;
    background-size: cover;
}
@media (min-width: 1370px) {
    .fluid-margin {
        margin-top: 210px;
    }
}
@media (min-width: 1200px) and (max-width: 1370px) {
    .fluid-margin {
        margin-top: 160px;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .fluid-margin {
        margin-top: 100px;
    }
}
@media (min-width: 720px) and (max-width: 992px) {
    .fluid-margin {
        margin-top: 50px;
    }
}
@media (max-width: 720px) {
    .fluid-margin {
        margin-top: 0px;
    }
}
#used-vehicle-parts div.flex-content {
    width: 70%;
    min-height: 200px;
}
#used-vehicle-parts div.flex-img {
    width: 30%;
    height: auto;
    text-align: right;
}
#used-vehicle-parts div.flex-img img {
    width: auto;
    max-width: 170px;
    min-width: 50px;
}
@media (max-width: 720px) {
    #used-vehicle-parts [class*='col-'] {
        height: auto;
        padding: 15px 15px;
    }
}   
@media (min-width: 720px) and (max-width: 1200px) {
    #used-vehicle-parts [class*='col-sm-'] {
        height: 350px;
        padding: 15px 15px;
    }
}   
@media (min-width: 1200px) {
    #used-vehicle-parts [class*='col-'] {
        height: 330px;
        padding: 15px 15px;
    }
}   
#used-vehicle-parts [class*='col-'] img {
    height: 150px;
    padding-bottom: 30px;
    margin: 0 auto;
}
@media (min-width: 750px) {
    #used-vehicle-parts .odd-div-margin {
        margin-top: 30px;
    }
    #used-vehicle-parts .even-div-margin {
        margin-bottom: 20px;
    }
}
@media (max-width: 750px) {
    #used-vehicle-parts .odd-div-margin {
        margin-top: 0px;
    }
    #used-vehicle-parts .even-div-margin {
        margin-bottom: 0px;
    }
}
/************about****************/
#about {
    color: #666666;
    padding: 0;
}
#about .flex-container {
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
#about div.flex-content {
    width: 50%;
    min-height: 200px;
    padding-left: 0px;
}
#about div.flex-img {
    position: block;
    width: 40%;
}
@media (max-width: 992px) {
    #about div.flex-img {
        -webkit-align-self: center;
        align-self: flex-center; /* or flex-start , flex-end  */
    }
}
#about div.flex-img img {
    width:auto;
    max-width: 100%;
    max-height: 450px;
    min-height: 300px;
    height: auto;
}
/************contact****************/
#contact {
    background: url("../images/contact-bg.jpg") no-repeat center center fixed;
    background-size: cover;
    font-weight: 500;
    font-size: larger;
}
#contact .div-border-left{
    border-left: #ffffff solid 1px;
}
#contact input, #contact textarea, #contact select {
    padding: 15px 20px;
    margin-bottom: 20px;
    font-weigth: 600;
    width: 100%;
    color: #a1ce5c;
}
/************message***************/
#message-warning, #message-success {
	display: none;
	padding: 0px 20px;
}
/************impressum***************/
#impressum {
    margin: 5em 0;
}
/***********************************/
section button, footer button {
    background-color: #a1ce5c;
    color: #fff500;
    width: 100%;
}
section button:hover, section button:focus, section button:active 
footer button:hover, footer button:focus, footer button:active {
    font-weight: bold;
    color: #a1ce5c !important;
    background-color: #fff500;
}