@charset "UTF-8";
/* CSS Document */






/* header */

/* [MENU] */
/*Strip the ul of padding and list styling*/
#container {
	margin: 0 auto;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}



#logoHeaderContainer
{
    float: left;
    width: 100%;
    height:100%;
    margin: 0% 0% 1% 0%;
    background-color: transparent;
}


	#redCarLeft {
		float: left;
		display: block;
		padding: 0;
		width:15%;
        margin: 1% 0% 0% 17.5%;
	}


@media screen and (max-width: 1100px) {
	#redCarLeft {
		width:35%;
        height:auto;
		display:block;
        margin: 1% 35% -1% 35%;
	}
    }



	#redCarRight {
		float: right;
		display: block;
		padding: 0;
		width:15%;
        margin: 1% 17.5% 0% 0%;
	}


@media screen and (max-width: 1100px) {
	#redCarRight {
		width:20%;
        height:auto;
		display:none;
        margin: 1% 35% 2% 35%;
	}
    }




	#logoTopContainer {
		float: left;
		display: none;
		padding: 0;
		width:30%;
        margin: 1% 10% 1% 10%;
	}


@media screen and (max-width: 980px) {
	#logoTopContainer {
        height:auto;
		display: block;
        margin: 1% 10% 2% 10%;
	}
    }



	#phoneTopContainer {
		float: left;
		display: none;
		padding: 0;
		width:70%;
        margin: 1% 10% 1% 10%;
	}


@media screen and (max-width: 980px) {
	#phoneTopContainer {
		display: block;
        margin: 2% 15% 4% 15%;
	}
    }




/* NAVIGATION CONTAINER */

/* Giving a background-color to the nav container. */
nav {
	margin:0;
	padding: .7% 1% 0% 1%;
	/*background-color: #fff000;*/
    background: rgba(255, 255, 255, 0.95) /* White background with 50% opacity */
}

/* END NAVIGATION CONTAINER */



#logoPhoneContainer
{
    float: left;
    width: 50%;
    background-color: #ffffff;
    margin: 0% 1% 0% 0%;
}


@media screen and (max-width: 1600px) {
	
#logoPhoneContainer
{
    float: left;
    width: 100%;
    background-color: #ffffff;
    margin: 0% 1% 0% 0%;
}
}




#logoLg {
	float: left;
	display: block;
	padding: 0;
	line-height: 0px;
    width: 30%;
    margin: 1.5% 2.5% 0% 2.5%;
}

@media screen and (max-width: 980px) {
	
#logoLg {
	float: left;
	padding: 0;
	line-height: 0px;
    width: 80%;
    margin: 1.5% 10% 0% 10%;
}
}



#phoneLg {
	float: left;
	display: block;
	padding: 0;
    color: #000000;
    width: 656px;
    margin: -.5% 0% 0% 0%;
}

@media screen and (max-width: 1800px) {
	
#phoneLg {
    width: 450px;
    margin: -.2% 0% 1% -1%;
}
}

@media screen and (max-width: 1500px) {
	
#phoneLg {
    width: 300px;
    margin: -.2% 0% 0% -1%;
}
}


@media screen and (max-width: 980px) {
	
#phoneLg {
    width: 250px;
    margin: 0% 0% 0% -1%;
    display: none;
}
}


/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}




/* POSITION OF THE NAVIGATION RIGHT, LEFT OR CENTER*/


/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:auto;
	list-style: none;
	position: relative;
	}


/* END POSITION OF THE NAVIGATION RIGHT, LEFT OR CENTER*/




/* NAVIGATION BLOCKS*/
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: transparent;
	}

/* END NAVIGATION BLOCKS*/




/* Styling the links */
nav a {
	display:block;
	padding:30px 15px 0px 15px;	
	color:#6e7175;
	font-size:110%;
	text-decoration:none;
    font-weight: normal;
    text-transform: uppercase;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}


@media (max-width: 1400px) { 
    
nav a {
	display:block;
	padding:30px 8px 0px 8px;	
	color:#6e7175;
	font-size:90%;
	text-decoration:none;
    font-weight: normal;
    text-transform: uppercase;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
}



nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	color: #C00000; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
	margin-top:-14px;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:auto;
	float:none;
	display:list-item;
	position: relative;
	text-align:left;
	font-size:80%;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */


	#logoTop {
		display: none;
		padding: 0;
		width:200px;
		float: none;
        margin: 0% 0% 0% 0%;
	}


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

	#logoTop {
        float: left;
		display: block;
		padding: 0;
		width: 99%;
        margin: 1% .5% 1% .5%;
        background-color: #ffffff;
	}
    
    
    


	#logoSm {
		display: none;
		padding: 0;
		width:200px;
		text-align: center;
		float: none;
        margin: 0% 0% 0% 0%;
	}


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

	#logoSm {
        float: left;
		display: block;
		padding: 0;
		width: 99%;
		text-align: center;
        margin: 1% .5% 1% .5%;
	}
    

    	#phoneSm {
		display: none;
		padding: 0;
		width: 300px;
		text-align: center;
		float: none;
        margin: 0% 0% 0% 0%;
	}


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

	#phoneSm {
		float: left;
		display: block;
		padding: 0;
		width: 99%;
        margin: 0% .5% 1% .5%;
	}
    
    
    

    
	nav {
		margin: 0;
	}
	
	
nav a {
	display:block;
	padding:20px;	
	color:#FFF;
	font-size:180%;
    background-color: #000000;
	text-decoration:none;
	border-bottom:solid 2px #fff000;
}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
        
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color:#000000;
		padding:14px 20px;	
		color:#FFF;
		font-size:300%;
		text-decoration:none;
		border:none;
	border-bottom:solid 2px #666;
      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	}

	.toggle:hover {
		background-color: #C00;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
    
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color:transparent;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:150%; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
		font-size:150%; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		z-index:1000;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
		font-size:150%;
		line-height:220%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 980px) {

	nav ul li {
		display:block;
		width: 100%;
	}

}