@charset 'utf-8';
/*
Theme Name: Samshield configurateur My Samshield
Version: 1.0
By : David Frémont & Peggy Durand 
*/ 

/*-----------------------------------------------------------------------------------
			0. Font face
			1. CSS Reset & Basic
			2. Content custom
			3. Shield
			4. Menu
			5. Menu footer
			6. Blocker
			7. Submenu
			8. Form
			9. Footer

/*-------------------------------------
   0. FONT-FACE
-------------------------------------*/

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

}

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

}

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

}


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

}

/* ------------------------------------
	1. RESET & BASIC
-------------------------------------*/
* {
	margin           : 0px;
	padding          : 0px;
	color            : #FFFFFF;
	font-family      : Helvetica, Arial, sans-serif;
	font-size        : 14px;
	font-weight      : normal;
	outline          : none;
	border           : none;
	text-decoration  : none;
	list-style       : none;
}
html {
	direction        : ltr;
	width            : 100%;
}
body {
	top              : 0px;
	left             : 0px;
	overflow         : auto;
	background-color : #000;
}
a:link, a:visited {
	color            : #ffffff;
	text-decoration  : none;
/*	border-bottom    : 1px solid #ffffff;*/
}
a:hover {
	text-decoration  : none;
	color            : #b2c100;
/*	border-bottom    : 1px solid #b2c100;*/
}
a img, img, map {
	border           : none;
}
p, span, br, a, h1, h2, h3, h4, h5, h6, ul, li, strong, em, u, dfn, sub, sup, cite {
	line-height      : inherit;
	text-align       : inherit;
	text-transform   : inherit;
	font-style       : inherit;
	font-weight      : inherit;
	font-family      : inherit;
	font-size        : inherit;
	letter-spacing   : inherit;
	color            : inherit;
}
strong {
	font-weight      : bold;
}
em {
	font-style       : italic;
}
h1, h2, h3 {
    font-family      : 'brandon_grotesque_regularRg';
	text-transform   : uppercase;
	font-weight      : normal;
	font-style       : normal;
	text-indent      : 0px;
}
h1 {
	margin-bottom    : 10px;
	font-size        : 35px;
	color            : #000000;
}
h2 {
	margin-bottom    : 10px;
	font-size        : 22px;
	color            : #000000;
}
h3 {
	font-size        : 18px;
	color            : #b2c100;
	padding-bottom   : 10px;
}
p {
	line-height      : 1.4em;
	text-align       : justify;
}
sup{
	font-size        : 11px;
	padding-left     : 1px;
}
hr, div.hr {
	display          : block;
	clear            : both;
	width            : 100ù;
	height           : 1px;
	margin           : 0px auto 20px auto;
	padding          : 0px;
	border           : 0px;
	border-top       : 2px solid #b2c100;
}
::selection {
	background-color : #d5e41f;
}
::-moz-selection {
	background-color : #d5e41f;
}

.loader {
	display			: none;
	position		: absolute;
	top				: -5px;
	left			: -49px;
	margin			: 50% 0 0 50%; 
}

/*-------------------------------------
   2.CONTENT CUSTOM
-------------------------------------*/
#container {
	width            : 100%;
/*	width            : 850px;*/
 	margin           : 0 auto;
}

#header{
	width            : 850px;
	margin           : 0 auto;
	padding          : 10px 0 0 0;
}
#header img.logo{
	height           : 45px;
}

#header a.websiteLink{
	text-transform   : uppercase;
    font-family      : 'brandon_grotesque_regularRg';
	border           : none;
	font-size        : 12px;
	position         : absolute;
	top              : 35px; 
	margin-left      : 15px;
	color            : #b2c100;
}
#header a:hover{
	border-bottom    : 1px solid #b2c100;
}
#header ul.languages {
	margin-left:40px;
}
#header ul.languages,#header ul.currencies {
	float		: right;
	margin-top	: 7px;
}
#header ul.languages li, #header ul.currencies li {
	display			: inline-block;
	position		: relative;
	width			: 30px;
	height			: 15px;
	line-height		: 15px;
	text-align		: center;
	font-family      : 'brandon_grotesque_regularRg';
	border-right     : solid 1px #cccccc;
	font-size        : 14px;
	text-transform	 : uppercase;
	font-weight		: bold;
	color			: #cccccc;
}
#header ul.languages li:last-child,
#header ul.currencies li:last-child {
	border-right: none;
}
#header ul.languages li a {
	display			: block;
	width			: 100%;
	height			: 100%;
	line-height		: 15px;
	font-family      : 'brandon_grotesque_regularRg';
	border-right     : solid 1px #cccccc;
	font-size        : 14px;
	color			: #cccccc;
	text-decoration	: none;
}
#header ul.languages li a:hover {
	color			: #fff;
	border-bottom	: none;
}

#content{
	width            : 100%;
	/*width            : 850px;*/
 	margin           : 0 auto;
	position         : relative;
	background-color : transparent;
}

#ssc_main{ /* conteneur principal du configurateur */
	background-color : transparent;	
	color            : #FFFFFF;
	width            : 850px;
 	margin           : 0 auto;
	position         : relative;
}


/*-------------------------------------
   3.SHIELD 
-------------------------------------*/

#ssc_visuals_container { /* restreint l'affichage des images en mode plein écran */
	position         : absolute;
	top				: 0;
	left			: 0;	
	width            : 620px;
	height           : 620px;
	overflow		: hidden;
}

#ssc_visuals{ /* contient les images du casque et les zones sensibles associées */
	background       : transparent;
	position         : absolute;
	width            : 620px; /* ipad retina 2048x1536*/
	height           : 620px;
	padding          : 25px 0 45px 0;
}
body.fullscreen #ssc_visuals{
	cursor			: move;
} 

#ssc_visuals img{
	width            : 100%;
	height           : auto;
	position         : absolute;
}
body.offline #ssc_visuals img{ /* utilisé pour la version enregistrable, contient toutes les images possible du casque pour les précharger */
	display			: none;
}

ul.sensor_list li.sensor{
	background       : url("../img/sensor.png") no-repeat scroll 0 0 #000;
	width            : 26px;
	height           : 26px;
	text-indent      : -5000px;
	margin           : 5px 0;
	-webkit-transition : all 0.14s ease;
	-moz-transition    : all 0.14s ease;
	-ms-transition     : all 0.14s ease;
	-o-transition      : all 0.14s ease;
	transition         : all 0.14s ease;
	cursor			: pointer;
}

ul.sensor_list li.sensor.highlight{
	background       : url("../img/sensor.png") no-repeat scroll 0 -26px #b2c100;
}
ul.sensor_list li.sensor.disabled{
	opacity			: 0.3;
	filter 			: alpha(opacity=30);
}
ul.sensor_list li.sensor.set{
	display			: none;
}
ul.sensor_list li.sensor.hide{
	display			: none;
}

ul.sensor_list li.sensor:hover{
	background       : url("../img/sensor.png") no-repeat scroll 0 -26px #b2c100;
}
ul.sensor_list li.sensor:hover.extra span{
	background-color : #b2c100;
	color            : #000;
} 
ul.sensor_list li.sensor.extra{
	text-indent       : 26px;
}
ul.sensor_list li.sensor.extra span{
    font-family      : 'brandon_grotesque_regularRg';
	text-transform   : uppercase;
	line-height      : 26px;
	background-color : #000;
	padding          : 3px 10px 3px 5px;
	-webkit-transition : all 0.14s ease;
	-moz-transition    : all 0.14s ease;
	-ms-transition     : all 0.14s ease;
	-o-transition      : all 0.14s ease;
	transition         : all 0.14s ease;
}

ul.sensor_list li{
	position         : absolute;
}
#ssc_shellsensor{
	top              : 31%;
	left             : 47%;
}
#ssc_visuals.backview #ssc_shellsensor{
	top              : 44%;
	left             : 54%;
}
#ssc_stones_top_shieldsensor{
	top              : 25%;
	left             : 10%;
}
#ssc_visuals.backview #ssc_stones_top_shieldsensor{
	top              : 39%;
	left             : 17%;
}
#ssc_frontalbandsensor{
	top              : 43%;
	left             : 73%;
}
#ssc_visuals.backview #ssc_frontalbandsensor{
	top              : 44%;
	left             : 87%;
}
#ssc_topsensor{
	top              : 11%;
	left             : 55%;
}
#ssc_visuals.backview #ssc_topsensor{
	top              : 27%;
	left             : 26%;
}
#ssc_trimsensor{
	top              : 33%;
	left             : 70%;
}

#ssc_trimcrystalssensor {
    top              : 34%;
    left             : 72%;
}

#ssc_visuals.backview #ssc_trimsensor{
	top              : 36%;
	left             : 41%;
}
#ssc_blasonsensor{
	top              : 25%;
	left             : 69%;
}
#ssc_visuals.backview #ssc_blasonsensor{
	top              : 22%;
	left             : 72%;
}
#ssc_extranamesensor{
	top              : 76%;
	left             : 69%;
	display          : none;
}
#ssc_visuals.backview #ssc_extranamesensor{
}
#ssc_extrasponsorsensor{
	top              : 12%;
	left             : 63%;
	display          : none;
}
#ssc_visuals.backview #ssc_extrasponsorsensor{
}


#ssc_visuals_container .loader {
	margin-top		: 310px; 
}


/* zoom */

#ssc_zoom_block {
	display: none;
	position         : fixed;
	bottom           : 20px;
	left             : -135px;
	margin-left      : 50%;
	width            : 270px;
	height           : 50px;	
	background-color : #161616;
}

#ssc_zoom_block .zoom_bar{
	position		: relative;
	height           : 5px;
	width            : 190px;
	background-color : #262626;
	-webkit-border-radius : 5px;
	-moz-border-radius    : 5px;
	border-radius         : 5px;
	-webkit-box-shadow    : inset 1px 1px 0px 0px #000000, 0px 1px 0px 0px #616161;;
	box-shadow            : inset 1px 1px 0px 0px #000000,0px 1px 0px 0px #616161; 
	margin           : 0 auto;
	margin-top       : 23px;
}
#ssc_zoom_block .zoom_button {
	position         : absolute;
	top              : -7px;
	left             : 55px;
	border           : 7px solid #b2c100;
	width            : 7px;
	height           : 7px;
	-webkit-border-radius : 12px;
	border-radius         : 12px; 
	cursor           : pointer;
}

#ssc_zoom_block ul.zoom_bar_nav  {
	display          : inline-block;
	margin-left      : 0px;
	margin-top       : -28px;
	height           : 50px;
}

#ssc_zoom_block ul.zoom_bar_nav li {
	width            : 40px;
	height           : 50px;
	float            : left;
	cursor           : pointer;
}
#ssc_zoom_block ul.zoom_bar_nav li.zoom_out {
	background       : url('../img/zoom_out.png') no-repeat scroll center center transparent;
}
#ssc_zoom_block ul.zoom_bar_nav  li.zoom_in {
	background       : url('../img/zoom_in.png') no-repeat scroll center center transparent;
	margin-left: 190px;
}

/*-------------------------------------
   4. MENU CUSTOM
-------------------------------------*/
#ssc_allmenus {
/*    left             : 620px;*/
/*    top              : 0;*/
	float			: right;
	position         : relative;
    width            : 230px;
    min-height      : 900px;
}

#ssc_mainmenu {
	text-transform   : uppercase;
	background-color : #000000;
} 

ul.menu_header { /* back & zoom */
	display          : inline-block;
	margin           : 15px 0;
	font-size        : 14px;
} 

ul.menu_header  li{ 
	float            : left;
	padding-left     : 20px;
	margin-left      : 3px;
	cursor           : pointer;
	height           : 15px;
	background-image: url(http://samshield.localhost/img/zoom.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: transparent;
}
ul.menu_header  li:hover {
	background-position : 0 -15px;
	color				: #b2c100;
}
ul.menu_header  li.resetButton{ 
	background-image: url('../img/reset.png');
	float			: none;
	margin-bottom	: 10px;
}
ul.menu_header  li.backButton{ 
	background-image: url('../img/backview.png');
}
ul.menu_header  li.zoomButton{ 
	background-image: url('../img/zoom.png');
	margin-left      : 22px;
}
body.fullscreen ul.menu_header  li.zoomButton{ 
	background-image: url('../img/dezoom.png');
}
body.fullscreen.deu ul.menu_header  li.zoomButton{ 
	margin-left      : 10px;
}

.menu_item,.menu_button, #menu_item_total, #menu_item_devise, .social_icon {
	margin-bottom    : 1px;
}
.menu_item.hide {
	display: none;
}

.menu_item .menu_item_header {
	cursor			: pointer;
	position		: relative;
	overflow		: hidden;
}
.menu_item.disabled .menu_item_header {
	cursor			: default;
}
.menu_item_title {
	background-color : #161616;
	padding          : 32px 15px 32px 25px; 	
	font-family      : 'brandon_grotesque_mediumRg';
	font-size        : 18px;
} 
.menu_item .menu_item_header:hover .menu_item_title,
.menu_button .menu_item_header:hover .menu_item_title,
.menu_item .menu_item_header:hover .menu_item_chosenmaterial {
	background-color : #b2c100;
	color            : #000000; 
}

.menu_item[id="trimcrystals"] .menu_item_title {

    font-size: 15px;

}

.menu_item_header:hover .menu_item_opener {		
	background-position: -20px 0;
}
.menu_item.disabled .menu_item_header:hover .menu_item_opener {		
	background-position: 0 0;
}
.menu_item_header.opened .menu_item_title {
	background-color : #b2c100;
	color            : #000000; 
}
.menu_item_header.opened:hover .menu_item_title,
.menu_item_header.opened:hover .menu_item_chosenmaterial {
	background-color : #161616;
	color            : #ffffff; 
}
.menu_item_header.opened:hover .menu_item_opener {		
	background-position: -20px -20px;
}
.menu_item.disabled .menu_item_header .menu_item_title,
.menu_item.disabled .menu_item_header:hover .menu_item_title {
	background-color : #000;
	color            : #444;
}
.menu_item_chosenmaterial {/* Alcantara marron par ex. - sera en display none si rien de choisit */
	display			: none;
	padding		     : 0 25px;
	position         : absolute;
	top       		: 58px;
	font-size        : 12px;
	text-transform   : capitalize;
	font-style       : italic;
} 
.menu_item_header.opened .menu_item_chosenmaterial {
	color            : #000000; 
}

.menu_item_header .menu_item_opener {
	position         : absolute;
	right 		     : 20px;
	top  	    	 : 35px;
	width			: 20px;
	height			: 20px;
	background       : url('../img/item_opener.png') no-repeat scroll 0 0 transparent;
	-webkit-transition : all 0.14s ease;
	-moz-transition    : all 0.14s ease;
	-ms-transition     : all 0.14s ease;
	-o-transition      : all 0.14s ease;
	transition         : all 0.14s ease;
}
.menu_item.disabled .menu_item_header .menu_item_opener {
	opacity			: 0.3;
	filter 			: alpha(opacity=30);
}
.menu_item_header.opening .menu_item_opener,
.menu_item_header.opened .menu_item_opener {
	background-position : 0 -20px;	
}


.menu_item_content_wrapper { /* limite la hauteur de ce qui est apparent */
	display			: none;
	margin           : 0 0px;
	height           : 360px;
	overflow         : hidden;
	background-color : #000000;
}

.menu_item_content {/* pas de limite de taille, c'est la totalite de ce qui va scroller */
	margin-top       : 10px;
	height           : 350px;
	overflow         : hidden;
}

ul .material_type {/* tout ce qu'il y a dans cet ul sera généré en php, j'en mets un peu pour exemple */
} 

.material_type li { 
	margin-bottom    : 8px;}

.material_type li p { /* Matériaux : cuir */
	margin           : 0 0 10px 25px;
	font-size        : 12px;
}
.material_type li p.hidden { /* Matériaux : cuir */
	display			: none;
}

ul.material_list {
	display          : inline-block;
	margin-left      : 5px;
}

ul.material_list li {
	position		 : relative;
	float            : left;
	width            : 67px;
	height           : 67px;
	overflow		 : hidden;
	margin-right     : 2px;
	cursor			: pointer;
}
ul.material_list li.selected {
	cursor			: default;
}
ul.material_list li.disabled {
	cursor			: default;
}

ul.material_list li img {
	position		: absolute;
	width			: 65px;
	height			: 65px;
	border           : 1px solid #000;
}
ul.material_list li img.disable {
	display			: none;
	border-style    : none;
	padding			: 1px;
}
ul.material_list li.selected img.color {
	border           : 1px solid #b2c100;
}
ul.material_list li:hover img.color {
	border           : 1px solid #b2c100;
}
ul.material_list li.disabled:hover img.color {
	border           : 1px solid #000;
}
ul.material_list li.disabled img.color {
	opacity			: 0.7;
	filter 			: alpha(opacity=70);
}
ul.material_list li.disabled img.disable {
	display			: block;
}

ul.material_list li:last-child img {
	padding-right    : 0px;
}



/* Menu EXTRA */

.extra_title {
    font-size        : 12px;
    margin           : 0 0 10px 25px;
	text-transform   : uppercase;
}

ul.extra_list {
	margin           : 0 10px;
	text-transform   : none;
	font-size        : 12px;
}

ul.extra_list > .disabled {
	display			: none;
}

img.example_extra {
	width            : 95%;
}

a.extra_moreinfolink {
	display			 : inline-block;
	margin-bottom    : 10px;
	color			: #b2c100;
}
a.extra_moreinfolink:hover {
	color			: #fff;
}
.extra_options {
	padding           : 0 0 10px;
 }
.extra_options  li {
	background       : url("../img/checkbox.jpg") no-repeat scroll 0 0 transparent;
	height           : 20px;
	padding-left     : 30px;
	margin           : 10px 0;
	line-height      : 20px;
	cursor           : pointer;
}

.extra_options.flag li img{
	padding-right     : 10px;
}

.extra_options  li.checked {
	background       : url("../img/checkbox.jpg") no-repeat scroll 0 -20px transparent;
}

p.extra_validate {
	text-align       : center;
	padding          : 15px 10px;
	background-color : #b2c100;
	color            : #000000;
	text-transform   : uppercase;
    font-family      : 'brandon_grotesque_regularRg';
	margin-bottom    : 25px;
	cursor           : pointer;
}
p.extra_validate:hover {
	background-color : #161616;
	color            : #b2c100;
}

/* COMMANDE */
#commande .menu_item_header {
	cursor			: pointer;
}
#commande .menu_item_header:hover {
}

/* --------------------------
 5.MENU FOOTER
-------------------------- */

#total {
	position		: relative;
}
#menu_item_devise, #menu_item_creation {
	position		: relative;
	font-size        : 15px;
}
#total .menu_item_header p#menu_item_total {
	background-color : #161616;
}
#total .menu_item_header p#menu_item_total span#total_currency{
	float            : right;
	margin-right	: 0px;
}

#total .loader{
	margin: 44px 0 0;
	left:	auto;
	right:	15px;
}

/* Devise */
#total .menu_item_header p.menu_item_title#menu_item_devise {
	background : url("../img/change_currency.png") no-repeat 15px 17px #161616;
	padding          : 15px 0 15px 35px;	
	cursor           : pointer;
}
#total .menu_item_header p.menu_item_title#menu_item_devise:hover {
	background-color : #b2c100;
	color            : #000;
}
#total .menu_item_header p.menu_item_title#menu_item_devise.opened {
	background-image : url("../img/change_currency_opened.png");
}
#menu_item_devise  img.menu_buy_currency {
	margin           : 0;
	top     		 : 21px;
}
ul.currencyList {
	display          : inline-block;
}
ul.currencyList li {
	float            : left;
	background-color : #161616;
	padding          : 15px;
	width            : 46px;
	margin           : 1px 0;
	cursor			: pointer;
}
ul.currencyList li:first-child{
	margin-right     : 1px;
}
ul.currencyList li.currency_selected, ul.currencyList li:hover  {
	background-color : #b2c100;
	color            : #000;
}
ul.currencyList li.currency_selected {
	cursor			: default;
}

/* commande */
#commande {
	display			: none;
/*	opacity			: 0.5;*/
/*	filter : alpha(opacity=50);*/
}
/*#commande.active {
	opacity			: 1;
	filter : alpha(opacity=100);
}*/
body.deu #commande .menu_item_title {
	font-size: 17px;
}

/* partage */
ul.social_icon {
	height           : 45px;
}

ul.social_icon li {
	float            : left;
}

ul.social_icon li {
	-webkit-transition : all 0.14s ease;
	-moz-transition    : all 0.14s ease;
	-ms-transition     : all 0.14s ease;
	-o-transition      : all 0.14s ease;
	transition         : all 0.14s ease;
	opacity			: 0.5;
	filter : alpha(opacity=50);
}
ul.social_icon li.social_facebook {
	background       : url("../img/social/facebook.jpg") no-repeat scroll 0 0 transparent;
}
ul.social_icon li.social_twitter {
	background       : url("../img/social/twitter.jpg") no-repeat scroll 0 0 transparent;	
}
ul.social_icon li.social_download {
	background       : url("../img/social/download.jpg") no-repeat scroll 0 0 transparent;	
}
ul.social_icon li.social_mail {
	background       : url("../img/social/mail.jpg") no-repeat scroll 0 0 transparent;	
} 
ul.social_icon li.social_fullscreen {
	background       : url("../img/social/full-screen.jpg") no-repeat scroll 0 0 transparent;	
	/* always active */
	opacity			: 1;
	filter : alpha(opacity=100);
}
body.fullscreen ul.social_icon li.social_fullscreen {
	background       : url("../img/social/full-screen-close.jpg") no-repeat scroll 0 0 transparent;	
}
ul.social_icon li:hover {
	background-position : 0 -45px;	
}
ul.social_icon li.active {
	opacity			: 1;
	filter : alpha(opacity=100);
}

ul.social_icon li a {
	display          : block;
	width            : 45px;
	height           : 45px;
	margin           : 0px 1px 0px 0px;
	padding          : 0px;
	text-indent      : -50000px;
	border           : none;
}

/* dernières créations */
#creations .menu_item_title {
	padding          : 15px 15px;
	background-color : #333333;
	font-size		: 14px;
}
#creations .menu_item_header:hover .menu_item_title {
	background-color : #b2c100;
}
#creations .menu_item_header:hover .menu_item_opener {
	background-position: -15px 0;
}
#creations .menu_item_header.opened .menu_item_title {
	background-color : #b2c100;
}
#creations .menu_item_header.opened:hover .menu_item_title {
	background-color : #333333;
}
#creations .menu_item_header.opened:hover .menu_item_opener {
	background-position: -15px -15px;
}

#creations .menu_item_header .menu_item_opener {
	background-image: url("../img/item_opener_creations.png");
	width: 15px;
	height: 15px;
	top:16px;
	right: 15px;
}
#creations .menu_item_header.opening .menu_item_opener,
#creations .menu_item_header.opened .menu_item_opener {
	background-position: 0 -15px;
}

#creations .menu_item_content_wrapper {
	height           : 190px;
}

#creations .menu_item_content_wrapper .menu_item_content {
	position		 : relative;
	height           : 190px;
	margin           : 0;
}

#creations ul.creations_list {
	position		: relative;
	z-index			: 50;
	height           : 190px;
	white-space		: nowrap;
}
#creations ul.creations_list li {
	display			: inline-block;
	padding			: 0 26px 0 14px;
}
#creations ul.creations_list li img {
	width: auto;
	height: 190px;
}

#creations a.nav {
	position		: absolute;
	z-index			: 100;
	top				: 0;
	width			: 24px;
	height			: 190px;
	background-color: #000000;
}
#creations a.nav span {
	position		: absolute;
	z-index			: 110;
	top				: 85px;
	left			: 6px;
	width			: 11px;
	height			: 20px;
	background		: none no-repeat scroll 0 0 transparent;
	text-indent		: -50000px;
}
#creations a.nav:hover {
	background-color: #b2c100;
}
#creations a.nav:hover span {
	background-position: 0 -20px;
}
#creations a.prev {
	left			: 0;
}
#creations a.next {
	right			: 0;
}
#creations a.prev span {
	background-image: url("../img/creations_navLeft.png");
}
#creations a.next span {
	background-image: url("../img/creations_navRight.png");
}

/*-------------------------------------
   6.BLOCKER
-------------------------------------*/

.blocker {/* masque pour bloquer l'accès au reste lors de l'ouverture d'une popin*/
	display			: none;
	z-index			: 500;
	width            : 100%;
	height           : 100%;
	background-color : rgba(82, 82, 82, 0.6);
	position         : absolute;
	top              : 0;
}
.popin {
	display			: none;
	position		: relative;
	margin           : 300px auto;
	width            : 400px;
	height           : auto;
	background-color : #000;
	padding          : 25px 25px 45px 25px;
}
	
.popin p.popin_title {
	text-transform   : uppercase;
    font-family      : 'brandon_grotesque_regularRg';
}
.popin p.popin_body {
	font-size        : 12px;
	margin           : 15px 0 35px 0;
} 

.popin a.popin_button {
	padding          : 15px 10px;
	background-color : #b2c100;
	color            : #000000;
	text-transform   : uppercase;
    font-family      : 'brandon_grotesque_regularRg';
	border           : none;
}

/* form result popin specific */
#popin_formResult .loader {
	display			: none;
	margin			: 35px 0 0 226px;
}

#popin_formResult.loading {
	background-color : transparent;
}
#popin_formResult.loading .loader {
	display			: block;
}
#popin_formResult.loading .popin_formResult_end {
	display			: none;
}

/*-------------------------------------
   7.SUBMENU 
-------------------------------------*/

.submenus_wrapper {
	width            : 0;/*460px;*/
	position         : absolute;
	right            : 0;
	top              : 0;
	margin-right     : 231px;
	margin-top       : 48px;
	overflow		: hidden;
}

.submenu {
	background-color : #000;
	padding          : 25px 25px 10px 25px;
	width			: 420px;
}

.submenu .submenu_title {
	margin-bottom    : 15px;
	color            : #fff;
}

.submenu_item_closer {
	float            : right;
	margin-top       : -40px;
	cursor			: pointer;
}

.submenu p {
	margin-bottom    : 15px;
}

/* commande */
#materialRecap li {
	background       : url('../img/materialRecap.png') no-repeat center left transparent;
	padding-left     : 15px;
	margin-bottom    : 10px;
}
#materialRecap li.hide {
	display: none;
}
#materialRecap li span.part_name {
	text-transform   : uppercase;
}

img#ssc_submenu_commande1_preview {
	display          : none;
}

p.totalPrice{
	font-size        : 18px;
	text-transform   : uppercase;
	text-align       : right;
	width            : 100%;
	margin           : 30px 0;
}
p.totalPrice sub{
	vertical-align	: baseline;
	font-size        : 14px;
}

/* More info Flocage */
.moreinfo_closeup {
	margin-bottom    : 10px;

}
.moreinfo_example {
	margin-bottom    : 15px;
}

.moreinfo_example.first {
	margin-right     : 5px;
}

.submenu {
	display          : none;
}

/*-------------------------------------
   8.FORM
-------------------------------------*/

form .result_popin {
	display			: none;
}

form fieldset{
	margin-bottom    : 15px;
}
legend {    
	font-family      : 'brandon_grotesque_regularRg';
	font-size        : 18px;
	font-weight      : normal;
	font-style       : normal;
	text-indent      : 0px;
	color            : #b2c100;
	padding-bottom   : 10px;
	text-transform   : uppercase;
}
form input, form textarea{
	margin-bottom    : 10px;
	padding          : 5px 5px;
	font-size        : 14px;
	color            : #ffffff;
	background-color : #161616;
	outline          : none;
	border           : 1px solid #b2c100;	
	width            : 190px;
}

form textarea {
	width            : 405px;
}
form input:focus, form textarea:focus{
	border           : 1px solid b2c100;
	background-color : #2e2e2e;
}
form input.error, form textarea.error {
	border           : 1px solid #c12c12;
}
form p.input_legend{
	font-style       : italic;
	font-size        : 11px;
	margin-bottom    : 0;
}
form button {
	margin           : 2px 0px 10px 0px;
	padding          : 10px;
	color            : #000000;
	background-color : #b2c100;
	cursor           : pointer;
	text-transform   : uppercase;
    font-family      : 'brandon_grotesque_mediumRg';
}
form button.cancel {
	float            : right;
	color            : #fff;
	background-color : #161616;
}
form button:hover {
	color            : #b2c100;
	background-color : #161616;
}

div.formNotification {
	display			: none;
	float            : right;
	padding          : 7px 0px;
	text-align       : right;
	color            : #c12c12;
	font-style       : italic;
	font-size        : 12px;
	margin-top       : -23px;
}
div.formNotification .detailed_messages {
	display			: none;
}

/*-------------------------------------
   9.FOOTER
-------------------------------------*/


#footer {
	clear			: both;
	width            : 850px;
	margin           : 0 auto;
	padding          : 15px 0;
}
body.offline #footer {
	padding-top		: 70px;
}

#footer p {
	font-size        : 12px;
	text-align       : center;
}


/*-------------------------------------
   10.FULL SCREEN MODE
-------------------------------------*/
/*body.fullscreen #ssc_main {
	width            : 100%;
}

body.fullscreen #header {
	display			: none;
}
body.fullscreen #footer {
	display			: none;
}*/

/* By sirPresta added */
#add-to-cart {
        cursor:pointer;
}
html,body {
        font-family: 'Arimo';
}
.resetButton, .backButton, .zoomButton {
  font-size: 13px;
}
#size ul.material_type ul.material_list li {
        background-color: #333;
        text-align: center;
        font-size: 20px;
        line-height: 62px;
}
#size ul.material_type ul.material_list li.selected {
        background-color:#242;
}


.full-loader  {
    position: fixed;
    display:none;
    backdrop-filter: blur(1px);
    top: 0;
    left:0;
    height:100%;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .full-loader .spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }