/***********************************************/
/************** OUT ON VACATION ****************/
/***********************************************/

/* overlay styles, all needed */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
}

/* just some content with arbitrary styles for explanation purposes */
.modal {
    width: 900px;
    height: 220px;
    position: fixed;
    top: 50%; 
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
    background-color: rgb(18, 57, 74);
    border-radius: 5px;
    z-index: 11; /* 1px higher than the overlay layer */
    box-shadow: 0 0 50px 1px rgb(6, 117, 165);
}

.modal h5 {
    color: aqua;
    font-family: 'Indie Flower', cursive;
    text-align: center;

}

.modal p {
    font-family: 'Indie Flower', cursive;
    color: aqua;
    padding: 5px;
    text-align: left;
}

.modal a {
    color: #ef9066;
}

/***********************************************/
/************** STANDARD CONTENT ***************/
/***********************************************/

body {
    overflow: auto;                        /* keeps items wrapped inside this container*/
	padding: 0;                            /* Allows full page header/ footer*/
    margin: 0 auto;                             /* Allows full page header/ footer*/
    min-width: 320px;                      /* Allows full page header/ footer*/
    max-width: 2000px;
}

p {
    color: black;
    font-family: sans-serif, "Arial"; 
    font-size: 0.8em;
    line-height: 1.4em;
}

 a {
    text-decoration: none;
    color: #5a5a5a;
     
}

h1 {
    text-transform: uppercase;
    margin: 0;           /* This is need to fix the gap between body and html elements '(white spot)'...normalize.css inserts a default margin declaration on h1 elements based on browser defaults for consistency */
    color: #dce8f8;
    padding-top: 0.2em;
    text-align: center;
    font-size: 2.1em;
    font-family: 'Bangers', cursive;
}

h2 {
    font-size: 2.5em;
    text-transform: uppercase;
	text-align: left;
    color: #dce8f8;
    font-family: 'Fjalla One', sans-serif;
}

h3 {
    text-transform: uppercase;
	text-align: center;
    color: #dce8f8;
    font-size: 22px;
    font-size: 1.3em;
    font-family: "Arial", "Helvetica", "sans-serif";
}

h4 {
    text-transform: uppercase;
	text-align: left;
	padding-left: 5%;
    margin: 40px 0px 0px 0px ;
    color: #e8510e;
    font-size: 16px;
    font-family: "Trebuchet MS", "Arial", "Helvetica", "sans-serif";
}

img {
    text-align: center;
    max-width: 100%;
    height: auto;
    width: auto;
}

ul {
    list-style: none;                      /*Removes "bullet points"*/
}

li {
	display: inline-block;
	padding: 5px;
}

section {
    margin: 0 auto;
    padding: 0;
}

.clearfix {
	clear: both;
}

#container {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0;
    background: url(img/BMW_335iblur.jpg);
    background-position: center;
    height: 100%;
    background-size: cover;
    margin-bottom: -25px;
}

/***********************************************/
/***********HEADER / NAV content****************/
/***********************************************/
header {
    background-color: rgba(0, 0, 0, 0.3);   /* Need to use RGBA in order for fo text to work with opacity in the header */
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

#head-section {
    margin: 0 auto;                        /* keeps the wrapper in the middle of the page rather then sliding around */
	max-width: 960px;
	width: 100%;                           /* See if this can be removed */
    height: 240px;
}

.compname h2 {
    text-align: center;
    font-size: 1.1em;
    text-transform: capitalize;
    font-family: 'Lobster', cursive;
}

nav {
    background-color: rgba(100, 94, 121, 0.65);
    margin: -10px 0 10px 0;
    text-align: center;
}    


nav ul, li {
    display: block;
    margin: 0;
    padding: 0;
}

nav ul li a {
    font-size: 1em;
    display: block;
    color: #CCC;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    padding: 10px;
    border-bottom: 1px dotted rgb(188, 178, 234);
}

nav a:hover, nav li.active a {    
    background-color:  rgb(18, 57, 74); /* Add the black box on active link and the link your mouse will hover  */
    color: rgb(12, 145, 203);
    position: relative;
    -webkit-transition: 0.55s ease;
    -moz-transition: 0.55s ease;
    -o-transition: 0.55s ease;
    transition: 0.55s ease;
}


/***********************************************/
/****************JUMBOTRON**********************/
/***********************************************/

#jumboWrap {
    max-width: 1050px;
    background-image: url(img/blank.jpg);
	width: 90%;
    height: 100%;
	margin: 0 auto;	/* keeps the wrapper in the middle of the page rather then sliding around*/
	overflow: hidden;
    border-radius: 20px;
    opacity: 0.93;
    margin-bottom: 15px;
    margin-top: 5px;
}

#jumboWrap img {
    max-width: 100%;
    border-radius: 25px;
	display: none; 
    height: auto;
    width: auto;
}

#jumboWrap.is-showing { 
	display:inline-block;
}


/***********************************************/
/***************MAIN CONTENT********************/
/***********************************************/
.color-boxes {
    max-width: 960px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.color-boxes img {
    display: none;
}

.color-boxes h3 {
    padding-top: 10px;

}

.color-boxes a {
    color: #fff;
    font-size: 0.9em;
}

.color-boxes p {
    font-size: 4vh;
    font-size: 1em;
    overflow: hidden;
    padding: 0 0.4em 0.4em 0.4em;
    color: #fff;
}

#top-left-section {
    width: 100%;
/*    height: auto;*/
    margin: 0 4% 1% 0;
    background-color: #8B5F65;
}

#top-right-section {
    width: 100%;
/*    height: auto;*/
    margin: 0 4% 1% 0;
    background-color: #483D8B;
}

#bottom-left-section {
    width: 100%;
/*    height: auto;*/
    margin: 0 4% 1% 0;
    background-color: #6E8B3D;
}

#bottom-right-section {
    width: 100%;
/*    height: auto;*/
    margin: 0 4% 1% 0;
    background-color: #8B6914;
}

#mid-container {
    max-width: 1960px;
    margin-top: 20px;
    padding: 20px;
    background-color: gray; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(to bottom, rgb(18, 57, 74), rgb(161, 209, 204)); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(to bottom, rgb(18, 57, 74), rgb(161, 209, 204)); /* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(to bottom, rgb(18, 57, 74), rgb(161, 209, 204)); /* For old Opera (11.1 to 12.0) */ 
    background-image: -ms-linear-gradient(to bottom, rgb(18, 57, 74), rgb(161, 209, 204)); /* For IE */ 
    background-image: linear-gradient(to bottom, rgb(18, 57, 74), rgb(161, 209, 204)); /* Standard syntax; must be last */
}

.mid-wrapper {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.section4 {
    margin: 0 auto;
    padding: 0;
    width: 70%;

}

.section4 p {
    text-transform: uppercase;
    font-size: 0.8em;
    text-shadow: 0.5px 0.5px 3px #b4b4b4; 
    

}

#jumbotron2 {
    max-width: 960px;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    border-bottom-left-radius: 8%;
    border-bottom-right-radius: 8%;
    margin-top: 1.7%;
}

#jumbotron2 img {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    width: 50%;
}

#jumbotron2 h2 {
    width: 60%;
    display: block;
    margin: 0 auto;
    padding: 0;
    font-family:  Impact, Charcoal, sans-serif;
    text-align: center;
    color: #505050;
    -webkit-text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
    -moz-text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
    -o-text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
    -ms-text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
    text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
    
}

#jumbotron2 h3 {
    font-size: 1.2em;;
    color: #c6c6c6;
    margin-top: 10px;
/*Text Shadow... was'nt working on IE on laptop but it worked on my desktop???*/
    -webkit-text-shadow: 4px 4px 2px rgb(234, 234, 234);
    -moz-text-shadow: 4px 4px 2px rgb(234, 234, 234);
    -o-text-shadow: 4px 4px 2px rgb(234, 234, 234);
    -ms-text-shadow: 4px 4px 2px rgb(234, 234, 234);
    text-shadow: 4px 4px 2px rgb(234, 234, 234);
}

#jumbotron2 a {
    float: right;
    color: #6f6f6f;
    margin: 0 5em 20px 0;
    font-family: 'Bangers', cursive;
    font-size: 0.8em;
}


/***********************************************/
/*******************INTRO***********************/
/***********************************************/
#intro {
    max-width: 960px;
    overflow: hidden;
    border-bottom: 1px solid #ebebeb;
    border-bottom-left-radius: 8%;
    border-bottom-right-radius: 8%;
}

.container {
    margin: 10px;
}

.container h3 {
    text-align: left;
    color: #5a5a5a;
    font-size: 1em;
    width: 60%;
}


.container img {        /*This is the way for image to display in the middle of it's container*/
    margin: auto;
    display: block;

}

/***********************************************/
/*************READ MORE / HIDE******************/
/***********************************************/
.sidebar-box { 
	float: left; 
    max-height: 120px;
	position: relative;
	overflow: hidden;
}


.sidebar-box .read-more { 
    position: absolute; 
	bottom: 0; left: 0;
	width: 100%; 
	margin: 0; 
	padding: 200px 1px 10px 20px; 
			
 /*"transparent" only works here because == rgba(0,0,0,0)*/
	background-image: -moz-gradient(top, transparent, #fff);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #fff));
    background-image: -ms-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #fff));
    background-image: -o-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #fff));
    background-image: gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #fff));
}


.button {
    background-color: rgb(2, 91, 129);
    opacity: 0.5;
    padding: 4px 10px;
    border-radius: 5px;
    color: #fff;
    font-weight: 100;
    font-size: 0.8em;
    font-family: 'Droid Serif', serif;
}

.sidebar-box p {
    font-family: 'Droid Serif', serif;
}


/***********************************************/
/*******************FOOTER**********************/
/***********************************************/
footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #d8d8d8;
    border-bottom-left-radius: 8%;
    border-bottom-right-radius: 8%;
}

.section1 {
    width: 100%;
    text-align: center;
    margin: 50px 0 30px 0;
    font-size: 0.9em;
}

.section1 a {
    color: #5a5a5a;
    font-weight: 600;
}

.section2 {
    width: 100%;
    text-align: center;
    margin: 50px 0 30px 0;
}

.foot-mid ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li {
	display: inline;
}

ul li img {
    height: 1.5em;
}

.section3 {
    width: 100%;
    text-align: center;
    margin: 50px 0 30px 0;
}

.section3 a:nth-child(1) {
	font-family: Impact, Charcoal, sans-serif;
    color: #505050;
    font-size: 1.8em;
    margin: 0 0 -10px 0;
}

.section3 adress {
	font-family: sans-serif, Charcoal;
    color: #989898;
	font-weight: bold;
    font-size: 1em;
}



/******************************************************************************************************************************************************************************************************************/
/**********************************************************************************************  ABOUT  ***********************************************************************************************************/
/******************************************************************************************************************************************************************************************************************/
/***********************************************/
/***************MAIN CONTENT********************/
/***********************************************/

#container2 {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0;
    background-image: url(img/BMWblur2.jpg);
    background-position: center;
    height: 100%;
    background-size: cover;
    margin-bottom: -25px;
}

.contentWrap {
    margin: 1%;

}

.sectionOne {
    max-width: 1050px;
    width: 100%;
    margin: auto;
    padding: 0;
    background-color: rgba(0, 0, 0, .37);
    border-radius: 10px;
}

.sectionOne h3 {
    padding-top: 50px;
}

.sectionOne p {
    padding: 0 20px 20px;
    color: #c1c1c1;
}

span {
    color: #b4d1f7;
    font-weight: 600;
}


/******************************************************************************************************************************************************************************************************************/
/**********************************************************************************************  SERVICES  ***********************************************************************************************************/
/******************************************************************************************************************************************************************************************************************/
/***********************************************/
/***************MAIN CONTENT********************/
/***********************************************/

.sectionTwo {
    max-width: 1050px;
    width: 85%;
    margin: auto;
    padding: 0;
    background-color: rgba(0, 0, 0, .37);
    border-radius: 10px;
}

.sectionThree {
    max-width: 1050px;
    width: 85%;
    margin: auto;
    padding: 0;
    background-color: rgba(0, 0, 0, .37);
    border-radius: 10px;
}

.intro h3 {
    font-size: 1em;
    padding-top: 20px;
}

.intro p {
    color: #c1c1c1;
    padding: 20px 10px;
}

.intro p:nth-child(2){          /* Needed to reset the padding of the second item otherwise it would be to large*/
    padding-bottom: 0;

}

.contentWrap li {              
    list-style: disc;
    display: list-item;
    color: white;
    font-size: 0.8em;
    line-height: 1.4em;
    padding-right: 10px; 
}

.carparts {
    max-width: 40%;
    display: block;
    margin: 0 auto;
}

.carparts img {
    margin-bottom: 20px;
}


.contentWrap li:nth-child(7) {  /* Create some padding at the bottom so is not cramped agains the container on the bottom*/
    padding-bottom: 20px;
}



/******************************************************************************************************************************************************************************************************************/
/*********************************************************************************************  CONTACT  **********************************************************************************************************/
/******************************************************************************************************************************************************************************************************************/
/***********************************************/
/***************MAIN CONTENT********************/
/***********************************************/
.contH3 {
    text-align: left;
    padding-left: 10px;
    margin-bottom: -25px;
}

.contP {
    margin-bottom: 20px;
}





/***********************************************/
/****************** FORM ***********************/
/***********************************************/

fieldset {
    border: none;
    margin-bottom: 10px;
}

form {
    margin-top: 5%;
    color: white;
    padding-left: 2%;
}

label {
    display: block;
    float: left;
    clear: left;
    width: 100px;
    margin: 3px 0 10px 0;
    text-align: left;
    font-family: 'Fjalla One', sans-serif;
}

input {
    color: rgb(186, 29, 0);
    display: block;
    float: left;
    width: 170px;
    font-family: sans-serif;
    appearance: none;
    box-shadow: none;
    border-radius: none;
}

input:focus {
    outline: none;
}

input {
  padding: 3px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.5s, border 0.5s;
}


input:focus {
  border: solid 1px #a59137;
  box-shadow: 0 0 5px 1px #38f031;
}

textarea {
    color: rgb(186, 29, 0);
    display: block;
    float: left;
    width: 250px;
    height: 80px;
    font-family: sans-serif;
    appearance: none;
    box-shadow: none;
    border-radius: none;
}

textarea:focus {
    outline: none;
}

textarea {
    padding: 3px;
    border: solid 1px #dcdcdc;
    transition: box-shadow 0.5s, border 0.5s;
}


textarea:focus {
    border: solid 1px #a59137;
    box-shadow: 0 0 5px 1px #38f031;
}



#submitForm {
    width: 100px;
    margin: 0 0 0 14%;
    font-weight: bold;
    font-size: 0.9em;
    color: #000;
    background-color: #cfd6f4;
}

#submitForm:hover {
    background-color: rgb(12, 145, 203);
    color: rgb(152, 201, 222);
    -webkit-transition: 0.55s ease;
    -moz-transition: 0.55s ease;
    -o-transition: 0.55s ease;
    transition: 0.55s ease;  
}