@font-face {   font-family: 'oswaldlight';

    src: url('oswald-light-webfont.woff2') format('woff2'),

         url('oswald-light-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;	}

@font-face {

    font-family: 'oswaldmedium';

    src: url('oswald-medium-webfont.woff2') format('woff2'),

         url('oswald-medium-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;}

@font-face {

    font-family: 'oswald_regularregular';

    src: url('oswald-regular-webfont.woff2') format('woff2'),

         url('oswald-regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;}

@font-face {

    font-family: 'open_sansregular';

    src: url('opensans-regular-webfont.woff2') format('woff2'),

         url('opensans-regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;}

@font-face {

    font-family: 'exo';

    src: url('exo-demibold.woff2') format('woff2'),

        url('exo-demibold.woff') format('woff');

    font-style: normal;

}

@font-face {

    font-family: 'exo';

    src: url('exo-bold.woff2') format('woff2'),

        url('exo-bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}





body

{

	background-color: #000000;

	width:99%;

	}



#bloc_page

{

	width:100%;

	max-width:1670px;

	margin:auto;

	display:flex;

	flex-direction:column;

	justify-content: flex-start;

	}

	

.hide

{opacity:0;}



#contact_invisible

{display:none;}



strong

{font-weight:normal;}



#icones

{

	background-color: transparent ;

	min-height:30px;

	display:flex;

	justify-content:flex-end;

	margin-bottom: -100px;

	position:relative;

	bottom:5px;

	right: 23px;

	}

	

#icones a

{

	color:#FFFFFF;

	font-size: 0.8em;

	text-decoration:none;

	margin: 0em 0.2em;

}







header

{	width:70%;

	min-width:1000px;

	margin:auto;

	border-radius: 0em 0em 0em 1em;

	position:relative;

	top:16px;

	}

	



#smart_menu, #smart_menu3, #logo_spector, #smart_menu_spector

{

	display: none;

}







iframe

{

	width:336px;

	height:189px;

	border: 5px solid #000000;

	box-shadow: 3px 3px 26px #000000;

}





#logo img, #logo_sub img

{	background-color:#FFFFFF;

	position:relative;

	top: 55px;

	z-index:2;

	max-width: 100%;

	height:auto;

	padding: 22px 28px 22px 20px;

	border-radius: 1em 0.7em 0em 1em;

	background-image:url(img/degrade.png);

	background-repeat:repeat-x;

}







nav

{	background-color: #FFFFFF;

	z-index:1;

	display:flex;

	flex-direction:column;

	padding-top: 0.8em;

	border-radius: 0em 0.5em 0.5em 0.5em;

	background-image:url(img/degrade2.png);

	background-repeat:repeat-x;	}





nav ul

{	display:flex;

	justify-content:flex-end;

	margin-right:0.2em;	}





nav li

{	list-style-type: none;	}



nav a

{	font-size: 1.5em;

	font-family: 'exo', Arial, sans-serif;

	text-decoration: none;

	color: #000000;

	padding: 0em 1em 0em 0em;

	text-shadow: 0.1em 0.1em 0.1em #E4E4E4;

}

#acceuil

{	width:70%;

	min-width:1000px;

	min-height: 500px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;

	background-image:url(img/dd_back1.jpg);

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0.5em;

}





ul

{

	margin: 0em 0em 0.7em 0em;

}







.space

{

	height: 0.9em;

	width: 100%;

}





.space_s

{	width:5px;}

.space_s2

{	width:5px;}




article

{

	

	margin: 1.5em 1.5em;

	background-color:#FFFFFF;

	opacity:0.9;

	max-width: 600px;

	overflow:auto;

	padding: 1.5em 1.5em 1.5em 2em;

	border-radius: 0.3em;

}

article p

{

		font-family: 'exo', verdana, Arial, sans-serif;

		margin:0px;

}

article a

{

	color:#E7290F;

}



.article_div

{height: 0.5em;}

.img_article
{
	width: 99%;
}







#modules

{	width:70%;

	min-width:1000px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;

	background-color: #FFFFFF;

	border-radius: 0.5em;
	
	display: flex;
	
	justify-content: space-around;
	
	position: relative;

}

#modules_inside
{
	display: flex;
	
	margin: auto;

	justify-content: space-around;

	flex-wrap:wrap;
}

#main_index

{	width:70%;

	min-width:1000px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;
	
	padding-top: 1em;
	
	padding-bottom: 7em;

	background-color: #FFFFFF;

	border-radius: 0.5em;
	
	display: flex;
	
	flex-direction: row;
	
	justify-content: space-evenly;
	
	flex-wrap: wrap;
	
	row-gap: 0.1em;

}

.main_index_section
{
	display: flex;
	flex-direction: column;
	margin: 0;
	text-align: center;
	flex: 1 0 20em;
	max-width: 20em;
}

.main_index_section h1
{
	text-align: left;
	margin-left: 0.7em;
}

.main_index_section img
{
	width: 90%;
	height: auto;
	border: medium;
	border-color: black;
	border-style:solid;
}


#module

{

	width:70%;

	min-width:1000px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;

	background-size:cover;

	background-color: #FFFFFF;

	height:auto;

	border-radius: 0.5em;

	display: flex;
	
	flex-direction: column;

	justify-content: center;

	align-content: flex-start;
	
	text-align: center;
	
	padding-top: 0.2em;

}

#module img

{

	height: 500px;

	width: auto;

	margin: 2em 0em 1.5em 0em;

	border:outset;

	border-width:medium ;

	border-color: black;

}

#module h1
{
	font-size: 2.2em;
	line-height: 1em;
	margin: auto;
	margin-bottom: 0.4em;
	margin-top: 0.6em;
}

#no_description
{
	height: 0.4em;
}



#rack19
{

	width:70%;

	min-width:1000px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;

	background-size:cover;

	background-color: #FFFFFF;

	height:auto;

	border-radius: 0.5em;

	display: flex;
	
	flex-direction: column;

	justify-content:space-between;




}



#rack19_pics
{

	margin: auto;

	text-align: center;

	z-index: 1;

}

#rack19_pics iframe
{
	width : 960px;
	height: 540px;
}




#pics_container

{

	min-height: 30em;

	display: flex;

	justify-content: center;

	align-content: center;

}



.mySlides

{

	margin: auto;

}

.back
{
	margin-top: -1.5em;
	margin-bottom: -1.2em;

}

.back a p

{

	text-align: left;

	padding-left: 4em;

	color: #000000;

	font-weight: 800;

	font-family: exo;

	text-decoration: none;

	font-size: 1em;

	text-decoration-color: #000000;

	display: flex;

	margin: 1.2em 0em 0em 0em;



}

.back a

{

	text-decoration: none;

}

#rack19_title

{
	max-width: 500px;

	margin: 1.6em 3.1em 0.3em 4.2em;

	font-family: exo;

	font-size: 1.1em;
}

#rack19_description

{

	max-width: 900px;
	
	line-height: 1.75em;

	margin: 0.8em 3.1em 2em 5.1em;

	font-family: exo;

	font-size: 1.1em;

}

#description

{
	margin: 0em 3.1em 2em 4.2em;

	font-family: exo;

	font-size: 1.1em;
	
	text-align: left;
}

#custom

{
	margin: 0em 3.1em 2em 4.2em;

	font-family: exo;

	font-size: 1.1em;
	
	text-align: left;
}








h1

{

	font-size: 1.6em;

	font-family: exo, verdana, Arial, sans-serif;

	text-decoration: none;

	color: #000;

}	


#rack19 h1

{

	font-size: 1.6em;
	
	font-family: exo, verdana, Arial, sans-serif;

	text-decoration: none;

	color: #000;


}




.details

{

	font-size: 0.9em;

	text-align: left;

	margin-right: 1.5em;

}



.price

{

	text-align: right;

	margin-right: 0.5em;
	
	line-height:normal;

}



.ship

{

	text-align: right;

	margin-right: 0.5em;

	font-size: 0.9em;

	line-height:normal;
}



.order

{

	text-align: left;

	font-size: 1.2em;

	font-weight: bolder;

	background: #000000;

	color: #FFFFFF;

	display: flex;

	flex-direction: column;

	padding: 1em 1.8em;

	border-radius: 0.5em;

	width: auto;
	
	line-height:normal;

}



.order_mail

{

	color: #FFFFFF;

	font-size: 0.85em;

	font-weight: bolder;

}



#order_block

{

	display: flex;

	justify-content: flex-end;

	margin: auto;

}

#zones
{
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

#zones p
{
	width: 500px;
	font-size: 0.5em;
	line-height:normal;
}



.vignette, .vignette-pro-audio

{

	padding: 3em 2em 0em 2em;


}



.vignette a img, .vignette-pro-audio a img

{

	max-height: 20em;

	width: auto;

	outline-style:groove;

	outline-color: black;
	
	margin: auto;

}



.vignette p, .vignette-pro-audio p

{

	font-family: exo;

	font-size: 0.95em;

	font-weight: 700;

}

.vignette-pro-audio
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}


.price1

{

	text-align: right;

	font-size: 0.8em;

}

.price-pro-audio
{
	margin-top: -0.2em;
	text-align: right;
}




 #news

{	width:70%;

	min-width:1000px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;

	background-color: #FFFFFF;

	height:100%;

	min-height: 450px;

	border-radius: 0.5em;

}



#news article

{

	margin: 1.5em 2.5em;

	background-color:#FFFFFF;

	opacity:1;

	max-width: 600px;

	overflow:hidden;

	padding: 0em;

	border-radius: 0em;

}

.elfsight-app-937b9a63-1c79-44da-ad6e-c8b808f84384
{
	margin-bottom: -2.5em;
	overflow: hidden;
}





#contact

{	width:70%;

	min-width:1000px;

	margin:auto;

	margin-bottom: 0.4em;

	margin-top: 0.45em;

	height:100%;

	background-image:url(img/contact.jpg);

	background-size: cover;

	background-color: #FFFFFF;

	min-height:450px;

	border-radius: 0.5em;

	text-shadow:5px 5px 5px #E8E8E8;

}





#contact article

{

	width:280px;

	height:440px;

	padding-top: 40px;

}





#contact article .tel

{

		font-family: 'open_sansregular', verdana, Arial, sans-serif;

		text-decoration:none;

		font-weight: normal;

		color:#000000;

}



#contact article strong

{

	font-weight:bold;

}



.big_pic

{

	width: 580px;}







#pics_container div

{ display:flex;

justify-content:center;}



/* SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- */

/* SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- */

/* SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- */



/* Slideshow container */

.slideshow-container {

  width:70%;

  position: relative;

  margin: auto;

  margin-top: -1.7em;

}



/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  width: auto;

  margin-top: -22px;

  padding: 16px;

  color: black;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

}



/* Position the "next button" to the right */

.prev {

	left:0;

  border-radius: 3px 0 0 3px;

}

.next {

	right:0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



.imageclick

{

  cursor: pointer;

  transition: 0.6s ease;

}



#pics_footer

{	display: flex;

	justify-content: center;

	}



/* Caption text */

.text {

  color: #000;

  font-size: 15px;

  padding: 8px 12px;

  position: relative;
	
  display: none;

  bottom: 8px;

  width: 100%;

  text-align: center;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #000;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  cursor:pointer;

  height: 13px;

  width: 13px;

  margin: 0 2px;

  background-color: #717171;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active {

  background-color: #000;

}

.dot:hover {

  background-color: #493d3e;

}



/* Fading animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}







/* SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- */

/* SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- */

/* SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- SLIDESHOW --- */



#espace

{

	height: 10px;

}





	







@media (max-device-width:768px) and (orientation: landscape) {

  html {

   -webkit-text-size-adjust: 100%;

   -ms-text-size-adjust: 100%;

  }

}







/*  -----------------------------------------------------

---------------------------------------------------------

---------------------1024 x 768--------------------------

---------------------------------------------------------

--------------------------------------------------------- */









@media all and (max-width: 1200px)

{



	

body

{	width:auto;

}





#bloc_page

{

	width:100%;

	max-width:950px;

	margin:auto;

	position: relative;

	top: -44px;

}





header

{	width:950px;

	min-width: 950px;

	margin:auto;

	border-radius: 0em 0em 0em 1em;

	position:relative;

	top:56px;

	}
	
	



#icones

{

	background-color: transparent ;

	display:flex;

	justify-content:flex-end;

	position:relative;

	top: 10px;

	right: 37px;

	}



#icones img

{

	max-width:85%;

	height:auto;

}






#logo img, #logo_sub img

{	background-color:#FFFFFF;

	position:relative;

	top: 60px;

	z-index:2;

	max-width: 48%;

	height:auto;

	padding: 22px 28px 4px 22px;

	border-radius: 1em 0.7em 0em 1em;

	background-image:url(img/degrade.png);

	background-repeat:repeat-x;

}



nav

{	background-color: #FFFFFF;

	z-index:1;

	display:flex;

	flex-direction:column;

	padding-top: 0.5em;

	padding-bottom: 0.2em;

	margin-bottom: -0.2em;

	margin-top: 1.3em;

	border-radius: 0.5em;

	background-image:url(img/degrade2.png);

	background-repeat:repeat-x;	}





	

#nav2

{	

	background-color: #FFFFFF;

	z-index:1;

	display:flex;

	flex-direction:column;

	padding-top: 0.5em;

	margin-bottom: -0.2em;

	border-radius: 0em 0.85em 0em 1em;

	background-image:url(img/degrade2.png);

	background-repeat:repeat-x;

}





nav li

{	list-style-type: none;

	margin: 0.4em 0.67em -0.3em 0.67em;}

	



#li_blank

{

	width:300px;}



nav a

{	font-size: 1.52em;

	text-decoration: none;

	color: #000000;

	padding: 0em 0em 0em 0em;

	text-shadow: 0.1em 0.1em 0.1em #E4E4E4;

	}
	
	
.slideshow-container
	{

		margin: auto;
		margin-top: -1.5em;
		
	}






#acceuil

{	width:950px;

	min-width:950px;

	margin: auto;

	background-image:url(img/dd_back1.jpg);

	background-color: #FFFFFF;

	border-radius: 0.5em;

}

	

#modules, #news

{	width:950px;

	min-width:950px;

	background-color: #FFFFFF;

	border-radius: 0.5em;

	margin: auto;

	position: relative;

	top: 0em;

}
	
#main_index

{	width:950px;
	
	height: auto;

	min-width:950px;

	background-color: #FFFFFF;

	border-radius: 0.5em;

	margin: auto;

	position: relative;

	top: 0em;
	
	display: flex;
	
	flex-direction: row;
	
	justify-content: space-evenly;

}
	
	


#main_index h1
{

	font-size: 1.6em;
}

	

#module

{
	position: relative;

	top: 0em;

	width:950px;

	min-width:950px;

	margin:auto;

	background-color: #FFFFFF;

	border-radius: 0.5em;

	display: flex;

	justify-content: flex-start;

	align-content: flex-start;
	
	padding-bottom: 2em;

}
	
#module .space

	{
		height: 0.4em;
	}
#module h1
	{
	
		margin: auto;
		margin-bottom: 0.5em;
		margin-top: 0.6em;

	}

	#rack19
{
	width:950px;

	min-width:950px;
	
	margin: auto;	

	background-size:cover;

	background-color: #FFFFFF;

	height:auto;

	border-radius: 0.5em;

	display: flex;

	flex-direction: column;

}

	#rack19_pics
{

	margin: auto;

	text-align: center;

	z-index: 1;

}
	
	#rack19_pics iframe
{

	width: 890px;
	height: 501px;

}
	
	
	#rack19_description
	{
			font-family: exo;

	font-size: 0.95em;
	}
	
	
	
	
			#rack19 h1
	{
		
	font-size: 1.45em;	

	font-family: exo, verdana, Arial, sans-serif;

	text-decoration: none;

	color: #000;
	}

	
	
	#description

{
	margin: 0em 3.1em 0em 4.2em;

	font-family: exo;

	font-size: 1.1em;
}

	
	
	#custom

{
	margin: 0em 3.1em 0em 4.2em;

	font-family: exo;

	font-size: 1.1em;
}


	

	#module img

{

	height: 480px;

	width: auto;

	margin: 1.6em 0em 1em 0em;

	border:outset;

	border-width:medium ;

	border-color: black;

}


#pics_container

{



	display: flex;

	justify-content: center;

	align-content: center;

}

	

.back a p

{

	text-align: left;

	color: #000000;

	font-weight: 800;

	font-family: exo;

	text-decoration: none;

	font-size: 1em;

	text-decoration-color: #000000;

	display: flex;

	margin-top: 1.5em;



}

	
#back > div:target
{
	display: block;
}
	
#specs_hide a
	{
		text-decoration: none;
		color: #000000;
	}




iframe

{

	width:288px;

	height:162px;

	border: 5px solid #000000;

	box-shadow: 3px 3px 26px #000000;

}




#nav3

{	

	background-color: #000000;

	z-index:1;

	border-radius: 1em 0em 0em 0em;

	width:944px;

	min-width:944px;

	height:50px;

	margin:3px 3px 0px 3px;

	display:flex;

	justify-content:space-between;



}

.space

{

	height: 4.1em;

	width: 100%;


}






#contact

{	width:950px;

	min-width:950px;

	margin:auto;

	height:689px;

	background-image:url(img/contact.jpg);

	background-color: #FFFFFF;

	min-height:500px;

	border-radius: 1em 0em 1em 1em;

	text-shadow:5px 5px 5px #E8E8E8;

	font-size:0.93em;

}

#contact article, #spector_contact article

{

	width:260px;

}


	
	



}







/*  -----------------------------------------------------

---------------------------------------------------------

---------------------800 x 600---------------------------

---------------------------------------------------------

--------------------------------------------------------- */



@media all and (max-width: 1010px)

{

body

{	width:99%;

}





#bloc_page

{

	width:100%;

	max-width:1000px;

	margin:auto;

	right: 0.4%;

}







header, #header_spector

{	width:96.5%;

	min-width:760px;

	margin:auto;

	display:flex;

	flex-direction:column;

	border-radius: 0em 0em 0em 1em;

	position: relative;

	top: 56px;

	}



	





#copyright

{padding-right: 9px;}





#icones

{

	background-color: transparent ;

	display:flex;

	justify-content:flex-end;

	position:relative;

	top:-7px;

	right: 23px;

	z-index: 1;

	}

	

#icones img

	{

		width: 80%;

		height: auto;

	}









#logo, #logo_sub

{

	width: auto;

	position:relative;

	bottom:-2px;

	}





#logo img, #logo_sub img

{	background-color:#FFFFFF;

	z-index:2;

	max-width: 35%;

	height:auto;

	border-radius: 1em 0.7em 0em 0em;

	background-image:url(img/degrade.png);

	background-repeat:repeat-x;

	padding-left: 1.8em;

	padding-right: 1.82em;

	margin-bottom: -0.7em;

}





nav, #nav2

{	background-color: #FFFFFF;

	z-index:1;

	padding-top: 1.2em;

	padding-bottom: 0em;

	border-radius: 0em 1em 0em 0.5em;

	background-image:url(img/degrade2.png);

	background-repeat:repeat-x;

	position: relative;

	top: 22px;

	margin:auto;

	width:100%;

		}





nav ul, #nav2 ul

{	display:flex;

	justify-content: flex-end;

	}

nav li, #nav2 li

{	list-style-type: none;

	margin:0em 0.67em;}



nav a, #nav2 a

{	font-size: 1.6em;

	text-decoration: none;

	color: #000000;

	padding: 0em 0em 0em 0em;

	text-shadow: 0.1em 0.1em 0.1em #E4E4E4;	}



#banner

{

	display:none;

}



#banner_prod

{

	display:none;

}







#acceuil

{	width:96.5%;

	min-width:760px;

	margin:auto;

	background-image:url(img/dd800_back1.jpg);

	background-size:cover;

	background-color: #FFFFFF;

	height:200px;

	max-height:200px;

	border-radius: 0.5em 0em 1em 1em;

}

	

#modules, #news

{	width:96.5%;

	min-width:760px;

	margin:auto;

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0.5em 0em 1em 1em;

}
	
	
#main_index
	{
	width:96.5%;

	min-width:760px;

	margin:auto;

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0.5em 0em 1em 1em;
		
	}

#main_index h1
	{
		font-size: 1.4em;
	}

	


	#rack19
{
		width:96.5%;

	min-width:760px;

	margin:auto;

	background-size:cover;

	background-color: #FFFFFF;

	height:auto;

	border-radius: 0.5em 0em 1em 1em;

}


	
	#rack19_pics iframe
{

	width: 720px;
	height: 405px;

}


	

	#module

{

	width:96.5%;

	min-width:760px;

	margin:auto;

	background-size:cover;

	background-color: #FFFFFF;

	height:auto;

	border-radius: 0.5em 0em 1em 1em;

}
	
	

#module img

{

	height: 380px;

	width: auto;

	margin: 1.2em 0em 1em 0em;

	border:outset;

	border-width:medium ;

	border-color: black;

}
	
#module h1
	{
		margin-top: 0.75em;
		margin-bottom: 0em;;
		
	}

	#rack19_description
	{
			font-family: exo;

	font-size: 0.95em;
	}
	
	
		#rack19 h1
	{
		
	font-size: 1.3em;	

	font-family: exo, verdana, Arial, sans-serif;

	text-decoration: none;

	color: #000;
	}	
	
	
	

	#description

{
	margin: 0em 3.1em 0em 4.2em;

	font-family: exo;

	font-size: 1em;
}

	#custom

{
	margin: 0em 3.1em 0em 4.2em;

	font-family: exo;

	font-size: 1em;
}


	



	

#pics_container

{

	min-height: 23em;

	display: flex;

	justify-content: center;

	align-content: center;

}

	

.back a p

{

	text-align: left;

	padding-left: 4em;

	color: #000000;

	font-weight: 800;

	font-family: exo;

	text-decoration: none;

	font-size: 1em;

	text-decoration-color: #000000;

	display: flex;

	margin: 1.6em 0em -0.5em 0em;



}	



.slideshow-container {

  width: 22em;

  position: relative;

  margin: auto;



}

	

#pics_footer

{

	width: auto;

	margin: auto;

  

	}







iframe

{

	width:272px;

	height:153px;

	border: 5px solid #000000;

	box-shadow: 3px 3px 26px #000000;

}





article

{	font-size: 0.88em;}










#nav3

{	

	background-color: #000000;

	z-index:1;

	border-radius: 0.5em 0em 0em 0em;

	width: 100%;

	min-width:100%;

	height:50px;

	margin:0% 0% 0.35% 0%;

	padding:0%;

	display:flex;

	justify-content:space-between;



}

.space

{

	height: 84px;

	width:100%;

}





#contact

{	width:96.5%;

	min-width:760px;

	margin:auto;

	height:689px;

	background-image:url(img/contact_800.jpg);

	background-size:cover;

	background-color: #FFFFFF;

	min-height:500px;

	border-radius: 0.5em 0em 1em 1em;

	text-shadow:5px 5px 5px #E8E8E8;

}



}

	

	



/*  -----------------------------------------------------

---------------------------------------------------------

---------------------600 x 600---------------------------

---------------------------------------------------------

--------------------------------------------------------- */



@media all and (max-width: 785px)

{

	

	

body

{	width:auto;

	display:flex;

	flex-direction:column;

	justify-content:center;	

}



#bloc_page

{

	width:100%;

	margin:auto;

	display:flex;

	flex-direction:column;

	justify-content:flex-start;

	position: relative;

	top: -35px;

	left: 0.01%;	

	}







header

{	width:98%;

	min-width: 550px;

	margin:auto;

	display:flex;

	border-radius: 0em 0em 0em 1em;

	}

	

#header_spector

{	width:98%;

	min-width: 550px;

	margin:auto;

	display:flex;

	border-radius: 0em 0em 0em 1em;

	position:relative;

	top:60px;

	}

	



#icones, #spector_icones

{

	background-color: transparent ;

	display:flex;

	justify-content:flex-end;

	position:relative;

	top:-20px;

	right: 23px;

	}

#icones div a

	{



	}

#icones img, #spector_icones img

{

	max-width:60%;

	height:auto;

}






#logo, #logo_sub

{

	width: 80%;

	position:relative;

	bottom:13px;

	}



#logo img, #logo_sub img

{	background-color:#FFFFFF;

	z-index:2;

	max-width: 13em;

	height:auto;

	border-radius: 1em 0.7em 0em 0em;

	padding: 1.4em 1.35em 0.1em 1.25em;

	background-image:url(img/degrade.png);

	background-repeat:repeat-x;

}





nav

{	background-color: #FFFFFF;

	z-index:1;

	padding-top: 1em;

	border-radius: 0em 1em 0em 0em;

	background-image:none;

	background-repeat:no-repeat;

	margin:auto;

	width:100%;	}

	

#nav2

{	background-color: #FFFFFF;

	z-index:1;

	padding-top: 0.6em;

	border-radius: 0em 1em 0em 0.5em;

	background-image:none;

	background-repeat:no-repeat;

	margin:auto;

	width:100%;	}





nav ul, #nav2 ul

{	display:flex;

	justify-content: flex-end;

	}

nav li, #nav2 li

{	list-style-type: none;

	margin:0em 0.7em;}



nav a, #nav2 a

{	font-size: 1.1em;

	text-decoration: none;

	color: #000000;

	padding: 0em 0em 0em 0em;

	text-shadow: 0.1em 0.1em 0.1em #E4E4E4;	}

li img
	{
		width: 85%;
		height: auto;
	}







#banner

{

	display:none;

}



#banner_prod

{

	display:none;

}







#acceuil

{	width:98%;

	min-width: 550px;

	margin:auto;

	background-image:url(img/dd800_back1.jpg);

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0em 0em 1em 1em;

}



#acceuil article

	{

		max-width: 450px;

	}

#news article

	{

		max-width: 450px;
		overflow: hidden;

	}



 #modules, #news, #main_index

{	width:98%;

	min-width: 550px;

	margin: auto;

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0em 0em 1em 1em;

}

#main_index h1
	{
		margin-left: 0.2em;
		font-size: 1.2em;
	}



.vignette

{

	padding: 3em 1em 0em 1em;

}



.vignette a img

{

	max-height: 18em;

	width: auto;

	outline-style:groove;

	outline-color: black;

}



.vignette p

{

	font-family: exo;

	font-size: 0.9em;

	font-weight: 700;

	padding: 0em 0.2em;

}		


#rack19
{
			width:98%;

	min-width:550px;

	margin: auto;

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0em 0em 1em 1em;

}


	
	#rack19_pics iframe
{

	width: 519px;
	height: 292px;

}
	
	
	#rack19 h1
	{
		
	font-size: 1.1em;	

	font-family: exo, verdana, Arial, sans-serif;

	text-decoration: none;

	color: #000;
	}	
	

#module

{

	width:98%;

	min-width:550px;

	margin: auto;

	background-size:cover;

	background-color: #FFFFFF;

	border-radius: 0em 0em 1em 1em;

}

	


	

	#module img

{

	height: 280px;

	width: auto;

	margin: 0em 0.8em 0.7em 0.8em;

	border:outset;

	border-width:medium ;

	border-color: black;

}
	
	#module h1
	{
		margin: auto;
		margin-top: 0em;
		margin-bottom: 0em;
		font-size: 1.5em;
	}
	
	#no_description
	{
		height: 0.13em;
	}

	

#pics_container

{

	min-height: 22em;

	display: flex;

	justify-content: center;

	align-content: center;

}	

.back a p

{

	text-align: left;

	padding-left: 4em;

	color: #000000;

	font-weight: 800;

	font-family: exo;

	text-decoration: none;

	font-size: 0.8em;

	text-decoration-color: #000000;

	display: flex;

	margin-bottom: 2em;



}

	

	.slideshow-container {

  width:300px;

  position: relative;

  margin: auto;

}

	
	
	#rack19_description

{



	margin: 0.8em 3.1em 2em 3.1em;

	font-family: exo;
font-size: 0.8em;

}


		#description

{

	margin: 0em 3.1em 0em 5em;

	font-family: exo;

	font-size: 0.95em;

}


		#custom

{

	margin: 0em 3.1em 0em 5em;

	font-family: exo;

	font-size: 0.95em;

}	
	
	
	
	


iframe

{

	width:208px;

	height:117px;

	border: 5px solid #000000;

	box-shadow: 3px 3px 26px #000000;

}





.space_s2

{

	display:none;}




#nav3

{	

	background-color: #000000;

	z-index:1;

	padding-top: 0em;

	border-radius: 0.5em 0em 0em 0em;

	margin:0% 0% 0.4% 0%;

	padding:0%;

	width:100%;

	min-width: 500px;

	height: 43px;

	display: flex;

}



#nav3 ul

{

	position:relative;

	bottom:0.2em;

}



#nav3 li

{	list-style-type: none;

	margin:0em 0em;}



#nav3 a

{	font-size: 1.05em;

	font-family: 'oswald_regularregular', Arial, sans-serif;

	text-decoration: none;

	color: #FFFFFF;

	padding: 0em 1em 0em 0em;

	text-shadow: 0.18em 0.18em 0.3em #8B8B8B;

		}



.space

{

	height: 78px;

	width:100%;

}



.space_spector

{

	height: 87px;

	width:100%;

}



article

{	font-size: 0.85em;}



#sound

{	width:98%;

	min-width: 550px;

	margin:auto;

	height:534px;

	background-image:url(img/sound800.jpg);

	background-color: #FFFFFF;

	min-height:500px;

	border-radius: 0em 0em 1em 1em;

	text-shadow:5px 5px 5px #E8E8E8;

	position:relative;

	top:0px;

}



#sound1

{

	margin: 1.5em 1.5em;

	background-color:#FFFFFF;

	opacity:0.85;

	max-width: 300px;

	height: 450px;

	overflow:auto;

	text-shadow:5px 5px 5px #E8E8E8;

}



#publishing

{	width:98%;

	min-width: 550px;

	margin:auto;

	height:602px;

	background-image:url(img/publishing600.jpg);

	background-color: #FFFFFF;

	min-height:500px;

	border-radius: 0em 0em 1em 1em;

	text-shadow:5px 5px 5px #E8E8E8;

	position:relative;

	top:0px;

}



#contact

{	width:98%;

	min-width: 550px;

	margin:auto;

	height:657px;

	background-image:url(img/contact600.jpg);

	background-color: #FFFFFF;

	min-height:500px;

	border-radius: 0em 0em 1em 1em;

	text-shadow:5px 5px 5px #E8E8E8;

}



#contact_marges

{

	padding: 10px 0px 0px 20px;

}



#contact article

{

	width:180px;

	font-size: 0.85em;

}



#spector_contact article

{

	width:180px;

	height: 348px;

	font-size: 0.78em;

	padding: 38px 30px 22px 30px;

}



}







/*  -----------------------------------------------------

---------------------------------------------------------

---------------------480 x 480---------------------------

---------------------------------------------------------

--------------------------------------------------------- */



@media all and (max-width: 560px)

{

* {    box-sizing: border-box;    }

	

body

{	width:100%;

	margin: auto;

	background-color: #FFFFFF;

	}



    img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video

	{	max-width: 100%;	}

	

img {	height: auto;	}

	

    textarea, table, td, th, code, pre, samp 

	{	-webkit-hyphens: auto; /* césure propre */

        -moz-hyphens: auto;

        hyphens: auto;

        word-wrap: break-word; /* passage à la ligne forcé */

    }

	

    /* masquer les éléments superflus */



    .hide_mobile {	display: none !important;    }

    



#bloc_page

{

	max-width:100%;

	width:100%;

	margin:auto;

	position:relative;

	top:0px;

	right:0px;

	left:0px;

	background-color: #FFFFFF;

}







header, #header_spector

{	width:100%;

	min-width:100px;

	margin:auto;

	border-radius: 0em;

	position:relative;

	top:0px;

	background-color: #FFFFFF;

	}

	





#pics_footer

{	color:#000000;

	background-color:#FFFFFF;

	font-size:0.7em;

	width: 200px;
	
	height:20px;

	margin:auto;

	padding:0em;

	}





#icones, #spector_icones

{

	background-color: transparent ;

	min-height:0px;

	display:none;

	justify-content:flex-end;

	margin: auto;

	position:relative;

	top: 90px;

	}



#smart

{

	display:flex;

	flex-direction:column;

	justify-content:center;

	align-content:center;

	width:100%;

	padding-top: 2%;

}






#copyright

{

	color:#BCBCBC;}



iframe

{

	width:272px;

	height:153px;

	border: 5px solid #000000;

	box-shadow: 3px 3px 26px #000000;

}



#logo_sub

{display:none;}



#logo, #logo_spector

{

	width: 100%;

	margin:0px;

	display:flex;

	justify-content:center;

	z-index:1;

	position:relative;

	bottom:18px;

}



#logo a, #logo_spector a

{width:100%;}



#logo img, #logo_spector img

{	background-color:#FFFFFF;

	position:relative;

	top: 0px;

	z-index:1;

	width:100%;

	max-width: 100%;

	padding: 6% 5% 2% 5%;

	border-radius: 0em;

	background-image: none;

	background-repeat: repeat-x;

	margin:auto;

}



#smart_menu

{

	margin:auto;

	display:flex;

	width:100%;

	flex-direction: row;

	justify-content: flex-end;

	padding-top:2%;

	z-index:2;

}

#smart_menu img

{	width: 100%;

}



#smart_menu_spector

{

	margin:auto;

	display:flex;

	width:100%;

	flex-direction: row;

	justify-content: space-between;

	padding-top:2%;

	z-index:2;

}



	




#menu_return

{

	margin:auto;

	display:flex;

	width:auto;

	flex-direction: row;

	justify-content: flex-start;

	margin-left:0.1em;

	padding-bottom: 0.7em;

} 





#smart_menu2 li

{

	list-style-type:none;

}

#smart_menu2 ul

{

	margin:0px;

	padding:0px;

}



#smart_menu3

{display:block;

width:100%;

margin:auto;

}

#smart_menu3 > div

{

	display: none;

}

#smart_menu3 > div:target

{display: block; 

}







#smart_menu_on2

{

	width:auto;

	padding-top: 1em;

	margin-bottom: -0.5em;

}





.smart_normal p

{

padding:0.6em 0.6em 0.6em 0.6em;

margin: 1em;

border-style:solid;

border-color:#C5C5C5;

border-width:1px;

border-collapse:collapse;

border-radius:0.4em;

background-color:#FBF7F7;

}

.smart_sous-menu_normal p

{

padding:0.6em 0.6em 0.6em 0.6em;

margin: 1em;

margin-left: 3.2em;

width: 50%;

border-style:solid;

border-color:#C5C5C5;

border-width:1px;

border-collapse:collapse;

border-radius:0.4em;

background-color:#FBF7F7;
	

}



.smart_normal p:hover, .smart_sous-menu_normal p:hover

{

background-color:#868686;}







.smart_normal, .smart_sous-menu_normal

{

	color:#000000;

	font-size:1em;

	text-decoration:none;

	font-family:  Arial, sans-serif;

	font-weight: 600;

}



.smart_actif, .smart_sous-menu_actif

{

	color:#FFFFFF;

	font-size:1em;

	text-decoration:none;

	font-family:  Arial, sans-serif;

	font-weight: 600;

}



.smart_actif p

{

padding:0.6em 0.6em 0.6em 0.6em;

margin: 1em;

border-style:solid;

border-color:#C5C5C5;

border-width:1px;

border-collapse:collapse;

border-radius:0.4em;

background-color:#323232;

}
	
.smart_sous-menu_actif p

{

padding:0.6em 0.6em 0.6em 0.6em;

margin: 1em;

margin-left: 3.2em;

width: 50%;

border-style:solid;

border-color:#C5C5C5;

border-width:1px;

border-collapse:collapse;

border-radius:0.4em;

background-color:#323232;

}




.smart_actif p:hover, .smart_sous-menu_actif p:hover

{

background-color:#868686;}





nav, #nav2, #nav3

{	background-color: #FFFFFF;

	z-index:1;

	display:none;

	flex-direction:column;

	padding-top: 1em;

	border-radius: 0em 1em 0em 0em;

	background-image:url(img/degrade2.png);

	background-repeat:repeat-x;	}



nav ul

{	display:none;

	justify-content:flex-end;

	margin-right:0.2em;	}

#nav2 ul

{	display:flex;

	justify-content:flex-end;

	margin-right:0.2em;	}

#nav3 ul

{	display:flex;

	justify-content: flex-start;

	margin-right:0.2em;	}







	






.space, .space_spector

{

	width:100%;

	height: 9px;

}





.space_s

{	width:5px;}

.space_s2

{	width:5px;}









#news

{	width:100%;

	min-width:100%;

	max-height:100%;

	min-height:500px;

	background-position:top;

	background-size: 100%;

	background-repeat:no-repeat;

	background-color:#FFFFFF;

	height:auto;

	border-radius: 0em;

}



#modules

{	width:100%;

	min-width:100%;

	max-height:100%;

	min-height:500px;

	margin-bottom: 1.5em;

	background-position:top;

	background-size: 100%;

	background-repeat:no-repeat;

	background-color:#FFFFFF;

	height:auto;

	border-radius: 0em;

}


#main_index

{	width:100%;

	min-width:100%;

	max-height:100%;

	min-height:500px;

	margin-bottom: 1.5em;
	
	margin-top: -3em;

	background-position:top;

	background-size: 100%;

	background-repeat:no-repeat;

	background-color:#FFFFFF;

	height:auto;

	border-radius: 0em;
	
	display: flex;
	
	flex-direction: column;
}

.main_index_section
{
	display: flex;
	flex-direction: column;
	margin:auto;
	margin-bottom: 0.8em;
	text-align: center;
}

.main_index_section h1
{
	text-align: center;
	margin-left: 0;
}

.main_index_section img
{
	width: 90%;
	height: auto;
	border: medium;
	border-color: black;
	border-style:solid;
}

	
#acceuil

{	width:100%;

	min-width:100%;

	max-height:100%;

	min-height:500px;

	background-image:url(img/dd400_back1.jpg);

	background-position:top;

	background-size: 100%;

	background-repeat:no-repeat;

	background-color:#FFFFFF;

	height:auto;

	border-radius: 0em;

}

#acceuil article

{

	overflow:auto;

	height:auto;

	max-height:auto;

	min-height:auto;

}



#news article

	{

	overflow:hidden;

	height:auto;

	width: 80%;

	max-height:auto;

	min-height:auto;

	}



	

#modules_inside

	{

	

	}

	

.vignette, .vignette-pro-audio

{

	padding: 1.5em 1em 0em 1em;

}
	
	
	
	



.vignette a img, .vignette-pro-audio a img

{

	max-height: 25em;

	width: auto;

	outline-style:groove;

	outline-color: black;

}



.vignette p

{

	font-family: exo;

	font-size: 0.95em;

	font-weight: 700;

	text-align: center;

}

.vignette-pro-audio p
	{
	font-family: exo;

	font-size: 0.95em;

	font-weight: 700;

	text-align: center;
		
	max-width: 380px;
		
	margin: auto;
	
	margin-top: 1em;
		
	margin-bottom: -0.3em;

	}

	

.price1

{

	text-align: center;

	font-size: 0.8em;

}
	
.price-pro-audio
	{

	
	margin: auto;
	
		
	padding-bottom: 1.8em;
	
		
	}


#rack19
{

		width:100%;

	min-width:100%;

	min-height:500px;

	background-color:#ffffff;

	height:auto;

	border-radius: 0em;

	margin-bottom: 5em;
}


	
	#rack19_pics iframe
{

	width: 300px;
	height: 169px;

}
	

	#module

{

	width:100%;

	min-width:100%;

	min-height:500px;

	background-color:#ffffff;

	height:auto;

	border-radius: 0em;

	margin-bottom: 5em;
	
	margin: auto;

	display:flex;
	
	}



	

	#module img

{

	height: 180px;

	width: auto;

	margin: auto;

	border:outset;

	border-width:medium ;

	border-color: black;

}
	
	#module h1
	{
		margin: auto;
		margin-top: 0em;
		margin-bottom: 0.8em;
		width: 90%;
	}
	
	#no_description
	{
		height: 0;
	}



	#pics_container

{

	min-height: 9em;

	display: flex;

	justify-content: center;

	align-content: center;

}

	.back

{
	display:inherit;

	

}

.back a p

{

	text-align: left;

	padding-left: 2.5em;

	color: #000000;

	font-weight: 800;

	font-family: exo;

	text-decoration: none;

	font-size: 0.8em;

	text-decoration-color: #000000;

	display: flex;

	margin: -1em 0em 2em 0em;



}	

	

.slideshow-container {

  width:99%;

  min-width:95px;

  margin: auto;

  padding:0px;

}

	

.dot {

  height: 9px;

  width: 9px;

  margin: 0.78em 0.099em 0 0.099em;

}



.prev, .next {

  margin: auto;

  padding: 0.5em;

  font-size: 10px;

  border-radius: 0 3px 3px 0;

}




#rack19_description
	{
	font-family: exo;

	font-size: 0.95em;
	}
	

#description

{	width: auto;

	margin: 0em 1em 0em 3em;

	padding-bottom: 3em;

	font-family: exo;

	font-size: 0.79em;

}

#custom

{	width: auto;

	margin: 0em 1em 0em 3em;

	padding-bottom: 3em;

	font-family: exo;

	font-size: 0.79em;

}
	
	
	
	
	

		#rack19 h1
	{
		
	font-size: 1.1em;	

	font-family: exo, verdana, Arial, sans-serif;

	text-decoration: none;

	color: #000;
 	
	margin-left: -1em;	
		
	}
	
	#rack19_title
	{
		width: auto;
		margin:0 0 0 1.8em;
	
	}





article

{

	margin: 10%;

	font-size:0.9em;

	background-color:#FFFFFF;

	padding: 5.5% 6% 6% 6%;

	opacity:0.9;

	width:65%;

	max-height:100%;

	overflow:auto;

}





#contact

{	width:100%;

	min-width:100%;

	margin:auto;

	background-image:url(img/contact600.jpg);

	background-size:auto;

	background-position:top;

	background-repeat:no-repeat;

	height:auto;

	min-height:500px;

	max-height:100%;

	border-radius: 0em;

}



#contact article

{

	margin: 1.4em 1.4em;

	background-color:transparent;

	opacity:0.9;

	max-width: 52%;

	min-width: 160px;

	width:auto;

	font-size:0.8em;

	height: auto;

	max-height: 468px;

	overflow:auto;

	padding: 1.7em 2em 1.7em 1.9em;

}





#contact article .tel

{

		font-family: 'open_sansregular', verdana, Arial, sans-serif;

		text-decoration:none;

		font-weight:600;

		color:#760F0F;

}







#espace

{

	width:100%;

	height:5%;

}





	





}