/* REFERENCE */
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
/* IE Fonts */
@font-face {
    font-family: CorporateA-Regular;
    src: url('../fonts/CorporateA-Regular.eot');
    font-weight:400;
}
@font-face {
    font-family: CorporateS-Light;
    src: url('../fonts/CorporateS-Light.eot');
    font-weight:400;
}
@font-face {
    font-family: CorporateS-Regular;
    src: url('../fonts/CorporateS-Regular.eot');
    font-weight:400;
}
@font-face {
    font-family: CorporateA-RegularItalic;
    src: url('../fonts/CorporateA-RegularItalic.eot');
    font-weight:400;
}
@font-face {
    font-family: SmartCourierEUR-BoldCond;
    src: url('../fonts/SmartCourierEUR-BoldCond.eot');
    
}
@font-face {
    font-family: CorporateA-Light;
    src: url('../fonts/CorporateA-Light.eot');
    font-weight:400;
}
/* Fonts */
@font-face {
    font-family: CorporateA-Regular;
    src: url('../fonts/CorporateA-Regular.ttf');
    font-weight:400;
}
@font-face {
    font-family: CorporateS-Light;
    src: url('../fonts/CorporateS-Light.ttf');
    font-weight:400;
}
@font-face {
    font-family: CorporateS-Regular;
    src: url('../fonts/CorporateS-Regular.ttf');
    font-weight:400;
}
@font-face {
    font-family: CorporateA-RegularItalic;
    src: url('../fonts/CorporateA-RegularItalic.ttf');
    font-weight:400;
}
@font-face {
    font-family: SmartCourierEUR-BoldCond;
    src: url('../fonts/SmartCourierEUR-BoldCond.ttf');
    
}
@font-face {
    font-family: CorporateA-Light;
    src: url('../fonts/CorporateA-Light.ttf');
    font-weight:400;
}

/* DEV */
#fovinfo {
z-index:9999;
position :absolute;
width :50px;
height : 50px;
display : block;
left : 50%;
top : 0;
}

/* General */
body {
	background : #000;
	overflow : hidden;
}
#container {
	overflow : hidden;
}
#krpanoSWFObject {
	display : none;
}

::-webkit-scrollbar
{
  width: 2px;  /* for vertical scrollbars */
  height: 2px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb
{
  background: rgba(255, 255, 255, 0.8);
}

@media screen and (min-width: 800px) {
::-webkit-scrollbar
{
  width: 4px;  /* for vertical scrollbars */
  height: 4px; /* for horizontal scrollbars */
}
}

/* Loading screen */
#loading {
	width : 100%;
	height : 100%;
	display : block;
	position : absolute;
	z-index: 9999;
	text-align : center;	
	background : #000;
}
#transition {
	display : none;
	margin-top : 100px;
}
.transition_load {
	background : #000;
}
.transition_load  #initial_load{
	display : none;
}
.transition_load #transition {
	display : block;
}
#loading #title {
	position : absolute;
	font-family : CorporateA-Regular;
	color : #fff;
	top : 50%;
	margin-top : -100px;
	font-size : 28px;
	text-align : center;
	width: 100%;
	
}

#loading #title img {
	margin-bottom : 20px;
	width : 144px;
}

#progressbar {
	width : 100px;
	position : absolute;
	height :  6px;
	background : grey;
	left : 50%;
	margin-left : -50px;
	top : 50%;
	margin-top : 150px;
	padding : 0;
}
.transition_load #progressbar { 
	margin-top : 90px;
}
#loader {
	margin : 0;
	padding : 0;
	height : 100%;
	width : 0%;
	background : url('../images/loadingbar.png') right center no-repeat #B3B3B3;
}
@media screen and (max-width: 800px) {
	#loading #title {
		font-size : 14px;
	}
	#loading #title img {
		width : 72px;
	}
	#progressbar {
		height :  2px;
		margin-top : 80px;
	}	
}

/* Top button */
.top_button {
	display : block;
	position : absolute;
	width : 64px;
	height : 64px;
	cursor : pointer;
	background-size : contain;
	background-repeat : no-repeat;
	z-index:9999;
}

/* Share Opener */
#doshare {
	background-image : url('../images/icon/Share.png') ;
	right : 32px;
	top : 116px;
}

/* newsletter opener */
#donews {
	background-image : url('../images/icon/newsletter.png') ;
	right : 32px;
	top : 198px;
}

/* Smart opener */
#smartbutton {
	background-image : url('../images/icon/smart.png') ;
	right : 32px;
	top : 32px;
}

/* Exit Car */
#quitcar {
	display : none;
	position : absolute;
	width : 64px;
	height : 64px;
	cursor : pointer;
	background-size : contain;
	background-repeat : no-repeat;
	z-index:9999;
	right : 32px;
	top : 32px;
	background-image : url('../images/icon/exit.png') ;
}

/* Menu opener */
#menu_call {
	background-image : url('../images/icon/menuopen.png') ;
	left : 32px;
	top : 32px;
}

/* Menu */
#menu {
	position : absolute;
	top : 32px;
	left : 32px;
	min-width : 250px;
	width : 375px;
	max-width :  90%;
	z-index : 9999;
	background : #000;
	color : #fff;
	display : none;
	max-height : 90%;
	overflow : hidden;
	background : url('../images/menu_gradiant.png') #000;
	background-attachment : fixed;
	background-repeat : repeat-x;
}

#menu h1 span {
	padding-left : 64px;
}
#menu h1 {
	font-family: CorporateA-Light;
	background : url('../images/Separator.png') repeat-x left bottom #000;
	font-size : 16px;
	height : 64px;
	width : 375px;
	max-width : 90%;
	line-height : 64px;
	text-align : left;
	position : fixed;
	min-width : 250px;
}

#menu ul {
	margin-top : 64px;
	background-size : 250px 108px;
	max-height: 720px;
	/*overflow-y : scroll;*/
}

#menu li {
	list-style : none;
	text-align : left;
	height : 34px;
	line-height : 48px;
	padding-left : 64px;
	padding-right : 32px;
	display : block;
}

#menu li a {
	font-family: CorporateA-Regular;
	font-size: 16px;
	color: #FFFFFF;
	text-decoration : none;
}
#closemenu {
	display : block;
	width : 64px;
	height : 64px;
	position : absolute;
	background-image : url('../images/exitmenu.png');
	background-repeat:no-repeat;
	background-size : contain;

}

@media screen and (max-width : 1680px) {
	
	#menu ul {
		margin-top : 64px;
		background-size : 250px 108px;
		max-height: 450px;
		overflow-y : scroll;
	}
}

@media screen and (max-width: 800px) {
	.top_button {
		width : 32px;
		height : 32px;
	}
	
	#menu_call {
		left : 10px;
		top : 10px;
	}	
	
	#doshare {
		right : 10px;
		top : 52px;
	}	
	
	#donews {
		right : 10px;
		top : 94px;
	}	
	
	#smartbutton {
		right : 10px;
		top : 10px;
	}	
	
	#quitcar {
		width : 32px;
		height : 32px;
		right : 10px;
		top : 10px;		
	}	
	
	#menu {
		top : 10px;
		left : 10px;
		min-width : 150px;
	}	
	
	#menu ul {
		margin-top : 34px;
		background-size : 250px 108px;
		max-height: 250px;
	}	
	
	#menu li {
		height : 32px;
		line-height : 32px;
		padding-left : 32px;
	}	
	
	#menu li a {
		font-size: 10px;
	}	
	
	#menu h1 {
		font-family: CorporateA-Regular;
		font-size : 10px;
		height : 32px;
		line-height : 32px;
		min-width : 152px;
	}	
	
	#menu h1 span {
		padding-left : 32px;
	}	
	
	#closemenu {
		width : 32px;
		height : 32px;
	}	
}

/* Cars preview */
#carspreview{
	border : 1px solid #000;
	position : absolute;
	left : 50%;
	top : 50%;
	max-width : 850px;
	width : 850px;	
	max-height : 500px;
	margin-left : -425px;
	margin-top : -300px;
}

#carspreview table {
	background : #000;
	padding:0;
	border-top : 4px solid #000;
	border-left : 4px solid #000;
	border-right : 4px solid #000;
	height : 100%;
	width : 100%;
}

#carspreview tr{
	max-height : 200px;
	height : 200px;
	padding : 0;
	margin : 0;
}

#carspreview td {
	background : #fff;
	color : #000;
	border-bottom : 4px solid #000;
	height : 33%;
	text-align : left;
}

#carspreview td.cars_img {
	max-width : 240px;
	width : 240px;
	height :120px;
	border-right: 4px solid #000;
	background-size: cover;
}
#carspreview td.desc {
		padding : 30px;
}
#carspreview td.desc .firstline {
	font-family: CorporateA-Regular;
	font-size : 20px;
	width : auto;
	padding-left : 20px;
	background : url('../images/cars/preview/arrowtotem.png') no-repeat left center #fff ;
	display : block;
	white-space : normal;
}
#carspreview td.desc .secondline {
	font-family: CorporateA-Regular;
	background : none;
	font-size : 20px;
	width : auto;
	padding-left : 20px;
	display : block;
	white-space : normal;
}
#carspreview_links {
	padding-right : 2px;
	padding-top : 8px;
}
#carspreview_links a {
	font-family : CorporateS-Regular;
	font-size : 20px;
	color : #FFFFFF;
	background : #3498DB;
	padding : 10px;
	float : right;
	text-decoration : none;
	margin-left : 10px;
}

@media screen and (max-width: 800px) {
	#carspreview{
		max-width : 80%;
		width : 80%;
		height : 188px;
		max-height : 188px;
		margin-left : -40%;
		margin-top : -94px;
	} 
	#carspreview tr{
		max-height : 60px;
		height : 60px;
		padding : 0;
		margin : 0;
	}	
	#carspreview td {
		background : #fff;
		color : #000;
		border-bottom : 2px solid #000;
		height : 33%;
		text-align : left;
	}	
	#carspreview table {
		border-top : 2px solid #000;
		border-left : 2px solid #000;
		border-right : 2px solid #000;
	}		
	
	#carspreview td.desc .firstline {
		font-size : 10px;
		padding-left : 10px;
		background : url('../images/cars/preview/arrowtotem.png') no-repeat left center #fff ;
		background-size : 5px;
		white-space : normal;
	}	
	
#carspreview td.desc .secondline {
		font-size : 10px;
		padding-left : 10px;
		background : none ;
		background-size : 5px;
		white-space : normal;
}	
	
	#carspreview td.cars_img {
		max-height : 60px;
		height : 60px;
		width : 120px;
		max-width : 120px;
		border-right: 2px solid #000;		
	}	
	#carspreview td.desc {
			padding : 10px;
	}	
	#carspreview_links a {
		font-size : 10px;
		padding : 5px;
		float : right;
		text-decoration : none;
		margin-left : 5px;
	}	
}
@media screen and (orientation:portrait) {
	#carspreview{
		max-width : 300px;
		width : 300px;
		height : 188px;
		max-height : 188px;
		margin-left : -150px;
		margin-top : -94px;
	} 

	#carspreview td.cars_img {
		background-size : cover;
		min-width : 60px;
	}

}

/* Smart Screen */
#smart {
	text-align : center;
	color : #fff;
	font-family: CorporateA-Light;
	max-height : 90%;
	font-weight : normal;
	font-size : 40px;
}
#smart a {
	font-family : SmartCourierEUR-BoldCond;
	font-size : 24px;
	background-image : url('../images/smart_logo_desktop.png');
	background-repeat : no-repeat;
	padding-left : 32px;
	width : 312px;
	height : 72px;
	line-height : 70px;
	position : absolute;
	left: 50%;
	margin-left : -156px;
	display : block;
	text-decoration : none;
	color : #fff;
	background-size : contain;
}
#smart h1 {
	font-size : 40px;
	margin-bottom : 40px;
	font-weight : normal;
}

@media screen and (max-width: 800px) {
	#smart {
		font-size : 20px;
	}
	#smart a {
		font-size : 12px;
		padding-left : 18px;
		width : 156px;
		height : 36px;
		line-height : 38px;
		margin-left : -78px;
	}
	#smart h1 {
		font-size : 20px;
		margin-bottom : 20px;
	}
}

/* share screen */
.popup_common table {
	vertical-align : middle;
	max-height : 90%;
	width : 100%;
	text-align : center;
	color : #fff;
	padding : 50px 30px;	
}

.popup_common img {
	width:  64px;
	height : 64px;
}

.popup_common h1 {
	font-size : 40px;
	font-family: CorporateA-Regular;
	font-weight : normal;
}	
.popup_common p {
	font-size : 26px;
	margin : 10px 0 30px 0;
	font-family: CorporateS-Regular;
	color : #999999;
}

#share a.facebook, #share a.twitter {
	margin : 0 10px;
}
#news .signup {
	font-family : CorporateS-Regular;
	font-size : 28px;
	line-height : 64px;
	color : #E4E4E4;
	background : #3498DB;
	text-decoration : none;
	display : block;
	width : 244px;
	margin : 0 auto;
	border-radius : 5px;
}

@media screen and (max-width: 800px) {
	.popup_common img {
		width:  32px;
		height : 32px;
	}
	.popup_common h1 {
		font-size : 20px;
	}	
	.popup_common p {
		font-size : 13px;
		margin : 10px 0 30px 0;		
	}	
	#share a.facebook, #share a.twitter {
		margin : 0 5px;
	}	
	#news .signup {
		font-size : 14px;
		line-height : 32px;
		width : 122px;
	}	
}


.bottom_info {
	display : none;
}

/* Mercedes Branding */

#slogan {
	width : 176px;
	height  : 42px;
	position : absolute;
	z-index : 999999;
	left : 82px;
	bottom : 32px;
	color : #fff;
	border-right : 2px solid #fff;
}
#slogan .big {
	font-family: CorporateA-Regular;
	font-size : 24px;
	display : block;
	position : absolute;
	left 0;
	top : 0;
}
#slogan .small {
	font-family: CorporateS-Light;
	font-size : 16px;
	display : block;
	position : absolute;
	left : 25px;
	top : 26px;
}
#logomain {
	background : url('../images/logo.png') no-repeat;
	background-size : contain;	
	width : 60px;
	height  : 60px;
	position : absolute;
	z-index : 999999;
	left : 10px;
	bottom : 20px;
}

@media screen and (max-width: 800px) {
	#slogan {
		width : 100px;
		height  : 21px;
		left : 40px;
		bottom : 10px;
		border-right : 1px solid #fff;
	}

	#slogan .big {
		font-size : 12.39px;
		left : 10px;
		top : 0;
	}
	#slogan .small {
		font-size : 8px;
		left : 24px;
		top : 12px;
	}
	#logomain {
		width : 30px;
		height  : 30px;
		left: 10px;
		bottom : 5px;
	}
}

/* Cars Title */
#cars_title span {
	font-family: CorporateA-Regular;
	color : #fff;
	font-size : 36px;
	line-height : 42px;
}
#cars_title {
	position :absolute;
	left : 280px;
	bottom :32px;
	display : block;
	width : 580px;
	height : 42px;
	z-index : 999999;
}
.goto {
	text-decoration : none;
	color : #fff;
}
@media screen and (max-width: 800px) {
	#cars_title span {
		font-size : 18px;
		line-height : 21px;
	}
	#cars_title {
		left : 160px;
		bottom : 10px;
		width : 300px;
		height : 21px;
	}
}

@media screen and (max-width: 800px) and (orientation:portrait) {
	#cars_title  span{
		font-size : 10px;
	}
	#cars_title {
		left : 150px;
		bottom : 10px;
		width : 300px;
		height : 21px;
	}	
}
/* Prenez le volant */
.getin {
	background : url('../images/getinline.png') no-repeat left center #000;
	background-size : 2px 100%;
	font-family: CorporateA-Regular;
	font-size : 22px;
	color : #fff;
	height : 42px;
	line-height : 42px;
	display : inline-block;
	/*float : right;*/
	padding : 0 20px;
	margin-left : 20px;
	position : absolute;
	margin-top : 2px;
}

@media only screen and (min-width: 641px) {
	.remodal {
		max-width: 100%;
	}
}

.remodal-close {
    position: absolute;
    right: 32px;
    top: 32px;
    display: block;
    overflow: visible;
    width: 64px;
    height: 64px;
    background-image: url('../images/exitmenu.png');
    background-size: 64px;
    background-color: transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    text-decoration: none;
    border: none;
    z-index: 99999;
}

@media screen and (max-width: 800px) {
	.remodal-close {
		right: 10px;
		top: 10px;
		width: 32px;
		height: 32px;
		background-size: 32px;
		background-color: transparent;
	}
}