/*
Theme Name: Car Color
Author: Nicola Merici
Author URI: http://www.nicolamerici.com/
Description: Tema personalizzabile con menu sopra l'immagine di testata
Version: 1.0
*/

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedbold';
    src: url('fonts/RobotoCondensed-Bold-webfont.eot');
    src: url('fonts/RobotoCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RobotoCondensed-Bold-webfont.woff') format('woff'),
         url('fonts/RobotoCondensed-Bold-webfont.ttf') format('truetype'),
         url('fonts/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
   	font-style: normal;
}

html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
}

html, body {
	margin:0;
	padding:0;
	height:100%;
}

body {
	font-family: 'open_sansregular', Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #323232;
}

.wrapper {
	/*width: 960px;*/
	margin: 0 auto;
}

.wide .top-container .wide-header-bg,
body {
	/*min-width: 960px;*/
}

.cl { clear: both; 	}
.fl { float: left !important; 	}
.fr { float: right !important;	}
.tar { text-align: right; }
strong, b { font-family: 'open_sansbold', Verdana, Geneva, sans-serif;}
.no_margin { margin: 0;	}
.no_border { border: 0; }
em {font-style:italic;}
hr {
	height: 0;
	border: none;
	margin: 20px 0;
	border-bottom: 1px dotted #e3dede;
}

p {
	line-height: 1.6em;
	margin-bottom: 1.4em;
}

article ul {
	list-style: disc;
	line-height: 1.4em;
	padding-left: 15px;
}

article ul,
aside ul {
	margin: 15px 0;
}

article ul li {
	margin: 0.4em;
}


/****** SOS TEL *******/

.sos-number {
	font-family: 'roboto_condensedbold';
	font-size: 1.53em;
	line-height: 1.7em;
}

.sos-number .intro {
	display: block;
	float: left;
	padding: 0 7px;
	margin-right: 8px;
}

.sos-number .glyphicon {
	font-size: 0.9em;
	margin-right: 2px;
	top: 2px;
}

/***** HEADING *****/

h1, h2, h3, h4, h5, h6 {
	font-family: 'roboto_condensedregular', Verdana, Geneva, sans-serif;
	line-height: 1em;
	color: #3c3c3c;
	margin: 40px 0 10px 0;
	padding: 0 0 2px 0;
	font-weight: 100;
	border-bottom: 1px solid #ffbe00;
}

h1 { font-size: 2.30em; } /* 30 */
h2 { font-size: 1.92em; padding-top: 5px; } /* 25 */
h3 { font-size: 1.69em; border-bottom: none; } /* 22 */
h4 { font-size: 1.46em; border-bottom: none; } /* 19 */

h1.no-margin, h2.no-margin, h3.no-margin, h4.no-margin, h5.no-margin, h6.no-margin, .caption h1, .caption h2 {
	margin-top: 0;
}

h1 a, h2 a, h3 a {
	font-size: 13px;
}

/***** LINK ******/

a, a:link, a:active, a:visited {
	outline: none;
	text-decoration: none;
	transition: color 300ms, background 300ms;
	-moz-transition: color 300ms, background 300ms;
	-webkit-transition: color 300ms, background 300ms;
}

a:hover {
}

.button {
	font-family: 'roboto_condensedbold', Verdana, Geneva, sans-serif !important;
	display: block;
	text-align: center;
	padding: 10px !important;
	color: #FFF !important;
	background-color: #424f55;
	text-transform: uppercase;
	font-size: 1.23em !important;
	transition: color 300ms, background 300ms;
	-moz-transition: color 300ms, background 300ms;
	-webkit-transition: color 300ms, background 300ms;
}

.button:hover,
.button:active {
	background-color: #ffbe00;
	color: #FFF !important;
}

/*********** TESTATA *********/

#header-main {
}

#header-top {
	position: relative;
}

.mainNavLeft #header-top .sos-number {
	position: absolute; bottom: 0; right: 0;
}

#header-main #logo {
	display: block;
	text-align: right;
	color: #000;
	width: 350px;
	height: 60px;
	background: url(images/carrozzeria-dinamica-logo.png) no-repeat;
	font-family: 'roboto_condensedbold', Verdana, Geneva, sans-serif;
	position: absolute;	left: 20px; top: 50%;
	transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	-webkit-transition: opacity 300ms;
}

#header-main #logo .big {
	font-size: 2.69em;
	text-transform: uppercase;
	letter-spacing: -1px;
	display: block;
}

#header-main #logo .small {
	font-family: 'roboto_condensedregular', Verdana, Geneva, sans-serif;
	font-size: 1.07em;
	display: block;
}

#header-main #logo:hover {
	opacity: 0.5;
}

.slider {
	height: 100%;
	overflow: hidden;
}

/***** MOBILE NAV *******/

#menu-mobile {
	position: fixed; top: 0; left: 0; z-index: 10000;
	padding: 10px 5px;
	background: #333;
	color: #FFF;
	text-align: center;
	width: 100%;
}

#menu-mobile a,
#menu-mobile a:link,
#menu-mobile a:visited {
	display: inline-block;
	color: #FFF;
}

#menu-mobile .sel {
	color: #ffbe00;
}

#menu-mobile .glyphicon {
	font-size: 1.3em;
	padding: 2px;
}

#menu-mobile .logo {
	font-size: 2em;
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-family: 'roboto_condensedbold', Verdana, Geneva, sans-serif;
	transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	-webkit-transition: opacity 300ms;
}

#left-panel {
	position: fixed;
	top: 0;
	left: -300px;
	padding-top: 60px;
	height: 100%;
	width: 300px;
	background: #333;
	z-index: 9000;
	transition: left 300ms;
	-moz-transition: left 300ms;
	-webkit-transition: left 300ms;
}

#left-panel.show {
	left: 0;
}

/**** NAV TOP ****/

.mainNavTop #header-top {
	height: 110px;
}

.mainNavTop #header-bottom {
	background-color: #999;
	height: 420px; /* 420px */
}

.mainNavTop #header-bottom .slider {
	width: 100%;
}

.nav-main.inline {
	position: absolute; right: 0; bottom: 10px;
}

.nav-main.inline li {
	float: left;
}

.nav-main.inline li a {
	font-family: 'roboto_condensedbold', Verdana, Geneva, sans-serif;
	padding: 10px 20px;
	display: block;
	text-transform: uppercase;
	font-size: 1.07em;
	color: #3c3c3c;
	border-left: 1px solid #bcbcbc;
}

.nav-main.inline li:first-child a {
	border-left: none !important;
}

.nav-main.inline li a:hover,
.nav-main.inline li a:active,
.nav-main.inline li.current-menu-item a {
	color: #ffbe00;
}

/*** NAV LEFT ***/

.mainNavLeft #header-top {
	height: 100px;
}

.mainNavLeft #header-bottom {
	background-color: #999;
}

.mainNavLeft #header-bottom .slider {
	float: left;
	/*width: 710px;*/
}

.nav-main.block {
	float: left;
	/*width: 250px;*/
	height: 100%;
	background-color: #001e2a;
}

.mainNavLeft #header-bottom {
	/*height: 320px; /* 320px */
}

.nav-main.block li {
}

.nav-main.block li a {
	font-family: 'roboto_condensedbold', Verdana, Geneva, sans-serif;
	padding: 18px 20px;
	display: block;
	text-transform: uppercase;
	font-size: 1.15em;
	color: #FFF;
	border-bottom: 1px solid #334b55;
}

.nav-main.block li a:hover,
.nav-main.block li a:active,
.nav-main.block li.current-menu-item a,
.nav-main.block li.current-page-ancestor a {
	color: #ffbe00;
	background-color: #000000;
}

.nav-main.block li a span {
	font-family: 'open_sansregular';
}

/****** NAV ******/

#sidebar-nav  {
	background-color: #424f55;
	margin-bottom: 40px;
}

#sidebar-nav li a {
	font-family: 'roboto_condensedbold', Verdana, Geneva, sans-serif;
	padding: 15px;
	display: block;
	font-size: 1.23em;
	color: #FFF;
	border-bottom: 1px solid #FFF;
}

#sidebar-nav li a:hover,
#sidebar-nav li a:active,
#sidebar-nav li a.sel,
#sidebar-nav li.current-menu-item a {
	color: #ffbe00;
	background-color: #000000;
}

#sidebar-nav li:not(.parent) a span {
	font-family: 'open_sansregular';
	margin-right: 2px;
	margin-left: -3px;
}

#sidebar-nav li.parent a span {
	font-size: 0.69em;
	margin-right: 2px;
	margin-left: -5px;
}

/********** CONTENUTO *********/

#content-main { } /*** IN RESPONSIVE ***/

/********** ASIDE *********/

aside {
	height: 100%;
	border-left: 1px solid #e3dede;
}

.news {
	margin-top: 0;
}

.news li {
	padding: 0px 0 0;
	margin: 0;
}

.news li p {
	margin-bottom: 0;
}

.news h4 {
	margin-top: 5px;
	margin-bottom: 5px;	
}

.news li hr {
	margin: 10px 0 13px;
}

/******* FOOTER ********/

footer {
	text-align: center;
}

#footer-main {
	position: relative;
	background-color: #444444;
	color: #CCC;
	padding: 15px 0;
	margin-bottom: 50px;
	line-height: 1.8em;
	font-size: 0.9em;
}

#footer-main a {
	color: #FFF;
}

#footer-main a:hover {
	color: #ffbe00;
}

#footer-main .sos-number {
	position: relative; top: -13px;
}

/****** IMMAGINI ********/

.gallery {
	margin: 15px -7px; 
}

.gallery a {
	display: block;
	float: left;
	margin: 7px;
	border: 1px solid #CCC;
}

.gallery a img {
	float: left;
}

img.alignleft {
	float: left;
	margin: 12px 15px 5px 0px;
	border: 1px solid #CCC;
}

img.alignright {
	float: right;
	margin: 12px 0px 5px 15px;
	border: 1px solid #CCC;
}

.responsive-img-cont img,
img.alignleft,
img.alignright {
	width: 100%;
	height: auto;
	border: 1px solid #CCC;
}

/******* BOXED STYLE ********/

.boxed .wrapper {
	background-color: #FFF;
}

/******* WIDE STYLE ********/

.wide {
	background-color: #444444;
}

.wide .top-container {
	background-color: #FFF;
}

.wide .top-container .wide-header-bg {
	position: absolute;
	height: 360px;
	width: 100%;
	z-index: 1;
	border-bottom: 1px solid #e3e3e3;
}

.wide .top-container .wrapper {
	position: relative;
	z-index: 1;
}

.wide #footer-main {
	background: none;
	min-height: 150px;
}

/******* THEME COLOR ********/

.boxed,
.wide .top-container .wide-header-bg {
	background-color: #ededed;
}

a, a:link, a:active, a:visited {
	color: #ffbe00;
}

.sos-number {
	color: #737373;
}

#header-top .sos-number .intro {
	color: #FFF;
	background-color: #ffbe00;
}

#footer-main .sos-number {
	color: #FFF;
}

#footer-main .sos-number .intro {
	color: #444444;
	background-color: #FFF;
}

/********** BLUE *************/

.wide.mainColorBlue .top-container .wide-header-bg,
.wide.mainColorBlue {
	background-color: #002d40;
}

.wide.mainColorBlue .nav-main.inline li a {
	border-left: 1px solid #02425c;
}

.wide.mainColorBlue .nav-main.inline li a,
.wide.mainColorBlue .sos-number,
.wide.mainColorBlue #header-top #logo {
	color: #FFF;
}

.mainColorBlue .nav-main.block a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mainColorBlue #sidebar-nav,
.mainColorBlue .button,
.mainColorBlue .nav-main.block  {
	background-color: #114257;
}

.mainColorBlue #sidebar-nav li a:hover,
.mainColorBlue #sidebar-nav li a:active,
.mainColorBlue #sidebar-nav li a.sel,
.mainColorBlue #sidebar-nav li.current-menu-item a,
.mainColorBlue .button:hover {
	background-color: #002636;
}

/********** RED *************/

.wide.mainColorRed,
.mainColorRed .nav-main.block,
.mainColorRed #sidebar-nav,
.mainColorRed .button:hover {
	background-color: #330f00;
}

.wide.mainColorRed .top-container .wide-header-bg {
	background-color: #4b1600;
}

.wide.mainColorRed .nav-main.inline li a {
	border-left: 1px solid #5a1a00;
}

.wide.mainColorRed .nav-main.inline li a,
.wide.mainColorRed .sos-number,
.wide.mainColorRed #header-top #logo {
	color: #FFF;
}

.mainColorRed.mainNavLeft #header-top .sos-number .intro {
	background-color: #FFF;
	color: #4b1600;
}

.mainColorRed .nav-main.block a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.mainColorRed #sidebar-nav li a:hover,
.mainColorRed #sidebar-nav li a:active,
.mainColorRed #sidebar-nav li a.sel,
.mainColorRed #sidebar-nav li.current-menu-item a,
.mainColorRed .button,
.mainColorRed .nav-main.block li a:hover,
.mainColorRed .nav-main.block li a:active,
.mainColorRed .nav-main.block li.current-menu-item a,
.mainColorRed .nav-main.block li.current-page-ancestor a {
	background-color: #712100;
	color: #FFF !important;
}

/********** GREY DARK *************/

.wide.mainColorGreyDark {
	background-color: #202020;
}

.wide.mainColorGreyDark .top-container .wide-header-bg {
	background-color: #202020;
}

.wide.mainColorGreyDark .nav-main.inline li a {
	border-left: 1px solid #333;
}

.wide.mainColorGreyDark .nav-main.inline li a,
.wide.mainColorGreyDark .sos-number,
.wide.mainColorGreyDark #header-top #logo {
	color: #FFF;
}

.mainColorGreyDark #sidebar-nav,
.mainColorGreyDark .button,
.mainColorGreyDark .nav-main.block  {
	background-color: #666;
}

.mainColorGreyDark #sidebar-nav li a:hover,
.mainColorGreyDark #sidebar-nav li a:active,
.mainColorGreyDark #sidebar-nav li a.sel,
.mainColorGreyDark #sidebar-nav li.current-menu-item a,
.mainColorGreyDark .button:hover,
.mainColorGreyDark .nav-main.block li a:hover,
.mainColorGreyDark .nav-main.block li a:active,
.mainColorGreyDark .nav-main.block li.current-menu-item a,
.mainColorGreyDark .nav-main.block li.current-page-ancestor a {
	background-color: #333;
}

.mainColorGreyDark .nav-main.block li a {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


/************ BG **************/

.wide-header-bg {
	background-repeat: repeat;
}

.mainBg1 .wide-header-bg { background-image: url(bg/1.png); }
.mainBg2 .wide-header-bg { background-image: url(bg/2.png); }
.mainBg3 .wide-header-bg { background-image: url(bg/3.png); }
.mainBg4 .wide-header-bg { background-image: url(bg/4.png); }
.mainBg5 .wide-header-bg { background-image: url(bg/5.png); }
.mainBg6 .wide-header-bg { background-image: url(bg/6.png); }
.mainBg7 .wide-header-bg { background-image: url(bg/7.png); }
.mainBg8 .wide-header-bg { background-image: url(bg/8.png); }
.mainBg9 .wide-header-bg { background-image: url(bg/9.png); }
.mainBg10 .wide-header-bg { background-image: url(bg/10.png); }
.mainBg11 .wide-header-bg { background-image: url(bg/11.png); }
.mainBg12 .wide-header-bg { background-image: url(bg/12.png); }


/************ LINK **************/

.nav-main li a:hover,
.nav-main li a:active,
.nav-main li.current-menu-item a,
.nav-main li.current-page-ancestor a {
	color: #ffbe00 !important;
}