/*	Css réalisé pour la société FITDEM INFORMATIQUE
 *	Author:Anthony Demongeot
 *	Created:2014
*/

html
{

}

body
{
	margin           : 0 auto;
	height           : 100%;
	font-family      : Helvetica, arial;
	font-size        : 12px;
	background-color : #2E2E2E;
}

ol, ul
{
	list-style : none;
	padding    : 0;
	margin     : 0;
}

table
{
	margin:0 auto;
}

h1, h2, h3, h4, h5, h6
{
	font-weight    : 400;
	letter-spacing : 0.03em;
	line-height    : 1.625em;
	margin         : 0;
	color          : #757575;
}

h1
{
	font-size   : 40px;
	line-height : 1.2em;
}

h2
{
	font-size     : 25px;
	line-height   : 1.45em;
	margin-bottom : 0.2em;
	padding-left  : 10px;
	font-variant  : small-caps;
	font-weight   : bold;
}

h3
{
	font-size      : 20px;
	font-variant   : small-caps;
	letter-spacing : 0.1em;
	text-align     : center;
	padding-bottom : 10px;
}

h4
{
	font-size      : 17px;
	font-variant   : small-caps;
	letter-spacing : 0.1em;
	text-align     : center;
	padding-bottom : 10px;
}

p
{
	margin      : 0 0 1.25em 0;
	line-height : 1.625em;
}

dt
{
	font-weight : bold;
}

dd
{
	margin-bottom : 1.625em;
}

strong
{
	font-weight : bold;
}

i
{
	font-style : italic;
}

input
{
	width : 100%;
}

textarea
{
	width: 100%;
	resize : none;
}

button, input, textarea, select {
	outline:none;
}

.shift {
	padding-left : 10px;
}

/* /////////////////////////////////////////////////////////////// */
/* Liens sur les pages*/
a
{
	color              : #757575;
	text-decoration    : none;
	-webkit-transition : all 0.2s ease-in-out;
	-ms-transition     : all 0.2s ease-in-out;
	-moz-transition    : all 0.2s ease-in-out;
	-o-transition      : all 0.2s ease-in-out;
	transition         : 0.2s ease-in-out;
}

a:hover
{
	color              : black;
	-webkit-transition : all 0.2s ease-in-out;
	-ms-transition     : all 0.2s ease-in-out;
	-moz-transition    : all 0.2s ease-in-out;
	-o-transition      : all 0.2s ease-in-out;
	transition         : 0.2s ease-in-out;
}

/* /////////////////////////////////////////////////////////////// */
/* Bandeau */
#imgBandeau {
	text-align      : center;
	width           : 100%;
	height          : 110px;
	text-shadow     : #2E2E2E 0.1em 0.1em 0.2em;
	font-variant    : small-caps;
	font-weight     : bold;
	line-height     : 1.2;
	font-size       : 80px;
	background      : url(../images/bandeau.png);
	background-size : cover;
	border-bottom   : solid 1px #DFDFDF;
}

#imgBandeau a
{
	color : #DFDFDF;
}

/* /////////////////////////////////////////////////////////////// */
/* Content */
.content {
	/*box-shadow : 0px 0px 17px #151824;*/
}

/* /////////////////////////////////////////////////////////////// */
/* Menu top */
#menu {
	background-color : #2E2E2E;
	height           : 40px;
	padding-left     : 20%;
}

#menu li
{
	float         : left;
	position      : relative;
	height        : 100%;
	line-height   : 3.5;
	font-weight   : bold;
}

#menu a 
{
	float           : left;
	color           : #DFDFDF;
	text-transform  : uppercase;
	font            : bold 12px;
	text-decoration : none;
	padding-right   : 9px;
	padding-left    : 9px;
}

#menu li:hover > a
{
	color  : #fafafa;
	height : 100%;
}

.menuLi:hover {
	background-color : #404040;
}

#menu li:hover > ul
{
	display : block;
}

/* Sub-menu */

#menu ul
{
	margin             : 0;
	padding            : 0;    
	display            : none;
	position           : absolute;
	top                : 35px;
	left               : 0;
	z-index            : 99999;    
	background-color   : #2E2E2E;
	-moz-box-shadow    : 0 0 2px rgba(255,255,255,.5);
	-webkit-box-shadow : 0 0 2px rgba(255,255,255,.5);
	box-shadow         : 0 0 2px rgba(255,255,255,.5);
}

#menu ul ul
{
	top  : 0;
	left : 150px;
}

#menu ul li
{
	float              : none;
	margin             : 0;
	padding            : 0;
	display            : block;  
	-moz-box-shadow    : 0 1px 0 #111111, 0 2px 0 #777777;
	-webkit-box-shadow : 0 1px 0 #111111, 0 2px 0 #777777;
	box-shadow         : 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
	-moz-box-shadow    : none;
	-webkit-box-shadow : none;
	box-shadow         : none;    
}

#menu ul a
{    
	padding        : 10px;
	height         : 10px;
	width          : 130px;
	height         : auto;
	line-height    : 1;
	display        : block;
	white-space    : nowrap;
	float          : none;
	text-transform : none;
}

#menu ul a:hover
{
	background : #0186ba;
	background : -moz-linear-gradient(#757575,  #757575);	
	background : -webkit-gradient(linear, left top, left bottom, from(#757575), to(#757575));
	background : -webkit-linear-gradient(#757575,  #757575);
	background : -o-linear-gradient(#757575,  #757575);
	background : -ms-linear-gradient(#757575,  #757575);
	background : linear-gradient(#757575,  #757575);
}

#menu ul li:first-child > a
{

}

#menu ul li:first-child > a:after
{
	content       : '';
	position      : absolute;
	left          : 30px;
	top           : -8px;
	width         : 0;
	height        : 0;
	border-left   : 5px solid transparent;
	border-right  : 5px solid transparent;
	border-bottom : 8px solid #444;
}

#menu ul ul li:first-child a:after
{
	left          : -8px;
	top           : 12px;
	width         : 0;
	height        : 0;
	border-left   : 0;	
	border-bottom : 5px solid transparent;
	border-top    : 5px solid transparent;
	border-right  : 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
	border-bottom-color : #757575; 
}

#menu ul ul li:first-child a:hover:after
{
	border-right-color  : #757575; 
	border-bottom-color : transparent; 	
}


#menu ul li:last-child > a
{

}

/* Clear floated elements */
#menu:after 
{
	visibility : hidden;
	display    : block;
	font-size  : 0;
	content    : " ";
	clear      : both;
	height     : 0;
}

/* Bouton accueil */
a#indexBoutonAccueil
{
	display          : block;
	background-image : url('../images/accueil2.png');
	margin-top       : 9px;
	margin-right     : 11px;
	margin-left      : 11px;
	padding          : 0px;
}

a#indexBoutonAccueil:hover
{
	background-image : url('../images/accueil1.png');
}

/* /////////////////////////////////////////////////////////////// */
/* Menu vertical */
#menu2 {
	height         : 100%;
	text-align     : center;
	font-size      : 12px;
	font-weight    : bold;
	color          : #DFDFDF;
}

#menu2 li {
	padding-bottom : 10px;
	padding-top    : 10px;
}

.menu2LiTitre {
	font-size  : 14px;
	margin-top : 20px;
}

.menu2LiTitre hr {
	border : dashed 1px;
	width  : 50%;
}

.menu2LiDur {
	padding : 0;
}

/* /////////////////////////////////////////////////////////////////////////// */
/* Menu portable */
.menu_phone_div {
	display          : none;
	background-color : #222222;
}

.menu_phone {
	display          : none;
	background-color : black;
}

.menu_phone li {
	position    : relative;
	height      : 100%;
	line-height : 3.5;
	font-weight : bold;
}

.menu_phone li a:hover {
	color : inherit;
}

.menu_phone li:hover {
	background-color : white;
}

.menu_phone a {
	text-transform  : uppercase;
	text-decoration : none;
	padding-right   : 11px;
	padding-left    : 11px;
	display         : block;
}

.menu_toggle {
	/*float          : left;*/
	width          : 28px;
	height         : 30px;
	padding-top    : 10px;
	padding-bottom : 10px;
	margin-left    : 10px;
	cursor         : pointer;
}

.menu_toggle div {
	width            : 100%;
	height           : 5px;
	margin-bottom    : 5px;
	transition       : all 0.2s;
	background-color : white;
}

.menu_toggle.on .menu_toggle_one {
	transform        : rotate(45deg) translate(6px, 7px);
	background-color : white;
}

.menu_toggle.on .menu_toggle_two {
	opacity          : 0;
	background-color : white;
}

.menu_toggle.on .menu_toggle_three {
	transform        : rotate(-45deg) translate(7px, -8px);
	background-color : white;
}

#logo_phone {
	color       : #E6E6E6;
	font-size   : 18px;
	position    : fixed;
	right       : 10px;
	top         : 10px;
	line-height : 1.8;
}

/* /////////////////////////////////////////////////////////////// */
/* Content */
#fondPrincipal
{
	height : 660px;
}

#fond {
	background-color   : rgb(223, 223, 223);
	float              : right;
	height             : 100%;
	width              : 81%;
	border             : solid 4px #757575;
	padding            : 5px;
	-webkit-box-sizing : border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing    : border-box; /* Firefox, other Gecko */
	box-sizing         : border-box; /* Opera/IE 8+ */
}

#fondDiv
{
	padding:20px;
	font-size:16px;
}

#fond2 {
	background-color : #2E2E2E;
	float            : left;
	height           : 100%;
	width            : 19%;
}

/* /////////////////////////////////////////////////////////////// */
/* Index */
#indexDiv1
{
	text-align     : center;
	padding-top    : 10px;
	padding-bottom : 10px;
}
		
.indexDiv2
{
	text-align     : center;
	font-weight    : bold;
	padding-top    : 10px;
	padding-bottom : 10px;
}
				
.indexDiv3
{
	text-align     : center;
	padding-top    : 10px;
	padding-bottom : 10px;
}

#indexSpan
{
	color : #757575;
}

/* /////////////////////////////////////////////////////////////// */
/* Plan d'accès */
#planAccesDiv
{
	text-align  : center;
	padding-top : 5px;
	padding     : 10px;
	padding-top : 100px;
}

#planAccesIframe
{
	box-shadow : 1px 1px 12px black;
	border     : solid 1px black;
}

/* /////////////////////////////////////////////////////////////// */
/* Services */
#servicesDiv1
{
	padding-top : 15px;
}

#servicesP1
{
	font-size    : 18px;
	font-variant : small-caps;
	text-align   : justify;
}

#servicesP2
{
	text-align : justify;
}

#servicesUl
{
	list-style    : square;
	padding-left  : 20px;
	padding-right : 20px;
}

#servicesUl li
{
	padding-top : 5px;
}

#servicesSpan
{
	color : #757575;
}

/* /////////////////////////////////////////////////////////////// */
/* Dépannages */
#depannagesSpan
{
	color        : #757575;
	font-variant : small-caps;
	font-size    : 18px;
}

.depannagesP1
{
	text-align : justify;
}

/* /////////////////////////////////////////////////////////////// */
/* Prêts de matériels */
#pretsP1
{
	text-align : justify;
}

#pretsSpan1
{
	color        : #757575;
	font-variant : small-caps;
	font-size    : 18px;
}

#pretsSpan2
{
	color : #757575;
}

/* /////////////////////////////////////////////////////////////// */
/* Protections */
.protectionP1
{
	text-align : justify;
}

.protectionP2
{
	text-align : center;
}

.imgOnduleur
{
	box-shadow   : 1px 1px 12px black;
	border       : solid 1px black;
	margin-left  : 40px;
	margin-right : 40px;
}

#protectionSpan
{
	font-weight : bold;
}

/* /////////////////////////////////////////////////////////////// */
/* Réseaux */
#imgSwitch
{
	box-shadow : 1px 1px 12px black;
	border     : solid 1px black;
}

/* /////////////////////////////////////////////////////////////// */
/* Informations */
#informationsGauche
{
	float        : left;
	padding-left : 70px;
	padding-top  : 60px;
}

#informationsDroite
{
	float         : right;
	padding-right : 70px;
}

#informationsP1
{
	font-weight : bold;
}

#informationsTable
{
	border : solid 1px black;
}

.informationsTR
{
	height : 50px;
}

.informationsTD
{
	width            : 150px;
	background-color : rgba(95, 85, 85, 0.3);
	padding-left     : 10px;
	padding-right    : 10px;
}

#informationsTD1
{
	width            : 150px;
	background-color : rgba(95, 85, 85, 0.3);
	padding-left     : 10px;
	padding-right    : 10px;
}

#informationsTD2
{
	width            : 150px;
	background-color : rgba(95, 85, 85, 0.3);
	padding-left     : 10px;
	padding-right    : 10px;
}

#informationsTD3
{
	width            : 150px;
	background-color : rgba(95, 85, 85, 0.3);
	padding-left     : 10px;
	padding-right    : 10px;
}

#informationsTD4
{
	width            : 150px;
	background-color : rgba(95, 85, 85, 0.3);
	padding-left     : 10px;
	padding-right    : 10px;
}

/* /////////////////////////////////////////////////////////////// */
/* Contact */
#contactDiv1
{
	text-align : center;
}

#contactTable
{
	text-align: left;
}

.contactTD
{
	padding-right : 10px;
	padding-left  : 10px;
}

p#welcome
{
	padding     : 10px 20px;
	border      : 1px dotted #757575;
	font-weight : bold;
}
p#success
{
	padding     : 10px 20px;
	border      : 1px dotted #757575;
	color       : #757575;
	font-weight : bold;
}

.form_hidden
{
	display : none;
}

/* /////////////////////////////////////////////////////////////// */
/* Erreur 404 */
#erreur404Div1
{
	text-align  : center;
	height      : 500px;
}

#erreur404Div1 p
{
	font-size   : 25px;
	font-weight : bold;
}

.erreur404P1
{
	padding-top: 13%;
}

/* /////////////////////////////////////////////////////////////// */
/* Votre site */
.votreSiteLi
{
	padding-top    : 5px;
	padding-bottom : 5px;
	text-align     : justify;
}

#votreSiteDiv1
{
	padding-top : 15px;
}

#votreSiteSpan
{
	color : #757575;
}

/* /////////////////////////////////////////////////////////////// */
/* Partenaires */
.imgPartenaires
{
	box-shadow         : 1px 1px 12px black;
	border             : solid 1px black;
	padding            : 5px;
	height             : 30px;
	width              : 80px;
	filter             : url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	-webkit-filter     : grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	-moz-filter        : grayscale(100%);
	-ms-filter         : grayscale(100%);
	-o-filter          : grayscale(100%);
	-webkit-transition : all 0.2s ease-in-out;
	-ms-transition     : all 0.2s ease-in-out;
	-moz-transition    : all 0.2s ease-in-out;
	-o-transition      : all 0.2s ease-in-out;
	transition         : 0.2s ease-in-out;
}

.imgPartenaires:hover
{
	-webkit-filter     : grayscale(0%);
	-moz-filter        : grayscale(0%);
	-ms-filter         : grayscale(0%);
	-o-filter          : grayscale(0%);
	filter             : none;
	-webkit-transition : all 0.2s ease-in-out;
	-ms-transition     : all 0.2s ease-in-out;
	-moz-transition    : all 0.2s ease-in-out;
	-o-transition      : all 0.2s ease-in-out;
	transition         : 0.2s ease-in-out;
}

.partenaireTD
{
	padding : 10px;
}

/* /////////////////////////////////////////////////////////////// */
/* Ventes */
.imgVentes
{
	box-shadow : 1px 1px 12px black;
	border     : solid 1px black;
	padding    : 5px;
	height     : 200px;
	width      : 200px;
}

.ventesTD
{
	text-align     : center;
	padding-left   : 40px;
	padding-right  : 40px;
	padding-top    : 10px;
	padding-bottom : 10px;
	font-weight    : bold;
}

.ventesTD2
{
	text-align     : center;
	padding-left   : 20px;
	padding-right  : 20px;
	padding-top    : 10px;
	padding-bottom : 10px;
	font-weight    : bold;
}

/* /////////////////////////////////////////////////////////////// */
/* Footer */
#footer
{
	height           : 60px;
	width            : 81%;
	padding-left     : 19%;
	padding-top      : 10px;
	padding-bottom   : 10px;
	font-weight      : bold;
	background-color : #2E2E2E;
}

#footerGauche
{
	float      : left;
	height     : 100%;
	width      : 50%;
	text-align : left;
}

#footerGauche li
{
	margin         : auto;
	color          : #DFDFDF;
	text-transform : uppercase;
	font           : bold 12px;
	height         : 100%;
	line-height    : 5;
	display        : inline-block;
	padding-right  : 11px;
}

#footerGauche a
{
	color          : #DFDFDF;
	height         : 100%;
	padding-top    : 22px;
	padding-bottom : 23px;
}

#footerGauche li:hover > a
{
	color : #fafafa;
	height: 100%;
}


#footerDroite
{
	float      : left;
	height     : 100%;
	width      : 50%;
	text-align : center;
	margin-top : 11px;
}

#footerDroite p
{
	margin         : auto;
	color          : #DFDFDF;
	text-transform : uppercase;
	font           : bold 12px;
	padding-right  : 10%;
}

/* /////////////////////////////////////////////////////////////// */
/* Plan du site */
.planSiteUl
{
	padding-left : 25px;
}

#planSite
{
	height  : 100%;
	display : inline-block;
}

#planSiteGauche
{
	float : left;
}

#planSiteDroite
{
	float : left;
}

@media screen and (max-width: 1024px) {
	/* /////////////////////////////////////////////////////////////// */
	/* Body */
	body {
		min-width        : inherit;
		background-image : none;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Content */
	#content {
		padding-top : 50px;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Bandeau */
	#imgBandeau {
		/*font-size     : 40px;
		line-height   : inherit;
		height        : inherit;
		border-bottom : none;*/
		display : none;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Content */
	#fondPrincipal {
		height: inherit;
	}

	#fond {
		width : inherit;
		float : inherit;
	}

	#fond2 {
		float : inherit;
		width : inherit;
	}

	.menu2LiDur {
		display : none;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Footer */
	#footer {
		width  : inherit;
		height : inherit;
		padding-left : inherit;
	}

	#footerGauche, #footerDroite {
		float      : inherit;
		width      : inherit;
		height     : inherit;
		margin-top : inherit;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Menu */
	.menu2LiTitre {
		margin-top : inherit;
	}

	#footerGauche, #menu {
		display : none;
	}

	#footerDroite p {
		padding-right : inherit;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Menu portable */
	.menu_phone_div {
		display  : block;
		position : fixed;
		width    : 100%;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Plan d'accès */
	#planAccesIframe {
		width : 90%;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Informations */
	#informationsGauche, #informationsDroite {
		float   : inherit;
		padding : inherit;
	}

	#informationsGauche {
		text-align : center;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Produits */
	#fondDiv, #fondDiv td {
		padding-right  : 5px;
		padding-left   : 5px;
		padding-bottom : 10px;
		padding-top    : 10px;
	}

	#fondDiv td img {
		width  : 100px;
		height : 100px;
	}
}

@media handheld and (max-width: 1024px) {
	/* /////////////////////////////////////////////////////////////// */
	/* Body */
	body {
		min-width        : inherit;
		background-image : none;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Content */
	#content {
		padding-top : 50px;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Bandeau */
	#imgBandeau {
		/*font-size     : 40px;
		line-height   : inherit;
		height        : inherit;
		border-bottom : none;*/
		display : none;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Content */
	#fondPrincipal {
		height: inherit;
	}

	#fond {
		width : inherit;
		float : inherit;
	}

	#fond2 {
		float : inherit;
		width : inherit;
	}

	.menu2LiDur {
		display : none;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Footer */
	#footer {
		width  : inherit;
		height : inherit;
		padding-left : inherit;
	}

	#footerGauche, #footerDroite {
		float      : inherit;
		width      : inherit;
		height     : inherit;
		margin-top : inherit;
	}

	/* /////////////////////////////////////////////////////////////// */
	/* Menu */
	.menu2LiTitre {
		margin-top : inherit;
	}

	#footerGauche, #menu {
		display : none;
	}

	#footerDroite p {
		padding-right : inherit;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Menu portable */
	.menu_phone_div {
		display  : block;
		position : fixed;
		width    : 100%;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Plan d'accès */
	#planAccesIframe {
		width : 90%;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Informations */
	#informationsGauche, #informationsDroite {
		float   : inherit;
		padding : inherit;
	}

	#informationsGauche {
		text-align : center;
	}

	/* /////////////////////////////////////////////////////////////////////////// */
	/* Produits */
	#fondDiv, #fondDiv td {
		padding-right  : 5px;
		padding-left   : 5px;
		padding-bottom : 10px;
		padding-top    : 10px;
	}

	#fondDiv td img {
		width  : 100px;
		height : 100px;
	}
}

/* Réduit de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad). */
@media (max-device-width:768px) and (orientation: landscape) {
	html {
		-webkit-text-size-adjust : 100%;
		-ms-text-size-adjust     : 100%;
	}
}