@charset "utf-8";

/* class */
.float_left {float:left;}
.float_right {float:right;}
.anti_float {clear:both;}
.txtcenter {text-align: center;}
.transition { -webkit-transition: all 0.2s linear;
              -moz-transition: all 0.2s linear;
              -o-transition: all 0.2s linear;
               transition: all 0.2s linear; }
.content {width: 80%; margin: 0 auto;}
.inlineb {display: inline-block;}

/* Deco */
.rougeaccueil {width: 100%; height: 4px; background-color: red;}
.txtrouge {color: red;}
.txtfort {font-weight:bold}
.txtlarge {font-size: x-large;}
.txtlarger {font-size: xx-large;}
.espacecitation {margin-bottom: 5px; margin-top: 55px;}
.espacetop {margin-top: 25px; margin-left:10px;}
.espaceblanc {height: 55px; display: block; width: 100%;}

/* Deco */
.espacenav {padding: 0 5px;}
.decorougetop {width:100%; height: 20px;}
.decoheadertop {width:100%; height: 0px; margin-bottom: 55px;}
.limiteheader {max-width: 1500px; width: 100%; margin: 0 auto;}
.normeheader {margin: 0 auto; max-width: 1060px;}

/* Header */
#fondheader {background-image: url(../img/fond/keyboard.jpg); background-size: cover; 
	background-position: 50%; background-repeat: no-repeat; background-color: red;}
header {width: 100%;min-height: 160px;}
a#logo {
background-image : url(../img/logo.png);
position : absolute;
background-repeat : no-repeat;
background-position : 50%;
text-indent : -900000px;
display : block;
float : left;
height : 220px;
width : 220px;
margin : 0;}
a#logo:hover, a#logo:focus {}
header h1, header p {width: 70%; margin: 0 auto; text-align: center; color: #fff;}
header#pro h1 {font-size: 3em; padding-top: 30px;}
header#pro p {font-size: 2em;}

/* Switch */
#switchpro {float: right; background-color: rgba(255, 255, 255, 1); color: #000; padding: 0; margin: 0; height: 220px; width: 220px;}
#switchpro nav {padding: 10px;}
#switchpro ul {padding : 0; margin: 0; max-width: 220px;
list-style : none;}
#switchpro ul li {display : inline-block;}
#switchpro ul li a {font-weight: bold; margin-bottom: 10px;
cursor : pointer;
color : #000;
display : block;
text-align : left;
text-decoration : none;}
#switchpro a:hover, #switchpro a:active, #switchpro a:focus {color : red;}


/* Nav */
nav#navpro { color: #000; text-align: right;}
nav#navpro ul { background-color: white; height: 40px; line-height: 40px; width: 890px;
margin : 0 auto;
padding : 0;
text-align : center;
list-style : none;}
nav#navpro ul li {display : inline-block;}
nav#navpro a { padding: 0 5px;
font-weight: bold;
cursor : pointer;
color : #000;
display : block;
text-align : center;
text-decoration : none;}
nav#navpro a:hover, nav#navpro a:active, nav#navpro a:focus {color : #fff; background-color: #000;}

/*Nav pro*/
nav#ssmenup {position: absolute; width: 100%; margin: 0 auto; padding: 0; left: 0;}
ul#ssmenupro {max-width: 890px; margin: 0 auto; padding: 0; background-color: white; list-style: none;
min-height: 250px; background-color: white; padding-top: 15px;}
ul#ssmenupro li {}
ul#ssmenupro a {width: 40%; padding-left: 10%; display: block; float: left; color: #000; text-decoration: none;
height: 60px; line-height: 60px; background-size: 50px; background-position: 5% 50%; background-repeat: no-repeat;}
ul#ssmenupro a:hover, ul#ssmenupro a:active,
ul#ssmenupro a:focus {font-weight: bold;}
#btpresinfogm {background-image: url(../img/pro/presentation/infogerance.jpg);} 
#btpresventem {background-image: url(../img/pro/presentation/vente.jpg);} 
#btpresreseauxm {background-image: url(../img/pro/presentation/reseaux.jpg);}
#btpreslogicielm {background-image: url(../img/pro/presentation/logiciels.jpg);}
#btpressavem {background-image: url(../img/pro/presentation/sauvegarde.jpg);}
#btprestelphm {background-image: url(../img/pro/presentation/telephonie.jpg);}
#btpresrachatm {background-image: url(../img/pro/presentation/rachat.jpg);}
#btpresformam {background-image: url(../img/pro/presentation/formations.jpg);}
#btpresrecondm {background-image: url(../img/pro/presentation/reconditionnement.jpg);}
#btpressecum {background-image: url(../img/pro/presentation/securite.jpg);}
#btpresfinan {background-image: url(../img/pro/presentation/financement.jpg);}
#btcontact {background-image: url(../img/pro/presentation/contact.jpg);}
nav#navpromobile ul ul#ssmenuprom {position: relative;background-color: #fff; color: #000;}
nav#navpromobile ul ul#ssmenuprom a {color: #000;}
nav#navpromobile ul ul#ssmenuprom a:hover, nav#navpromobile ul ul#ssmenuprom a:active,
nav#navpromobile ul ul#ssmenuprom a:focus {background-color: red; color:#fff;}

/* nav mobile */
#menupromobile {display: none;}
#btmenumobile {width: 40px; height: 40px; background-image: url(../img/icones/menumobile.png);
display: block; margin: 0 auto;}
a#btmenumobile:hover, a#btmenumobile:active, a#btmenumobile:focus {
transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);}
nav#navpromobile {color: #000; text-align: center;}
nav#navpromobile ul {background-color: #0e0e0e; position: absolute; top: 0; left: -230px;
margin : 0; padding : 0; 
list-style : none;}
nav#navpromobile ul li {display : block;}
nav#navpromobile ul li a {color: white; text-align: left; text-decoration: none;
font-weight: bold; cursor : pointer;display : block; height: 50px; line-height: 50px;
padding-left: 25px; min-width: 200px;}
nav#navpromobile a:hover, nav#navpromobile a:active, nav#navpromobile a:focus {
background-color: #fff; color:red;}
#btfermeture {border-bottom: solid #fff 2px; background-color:#eb3736; color: #fff;
background-image: url(/img/fond/close.png); background-position: 90% 50%;
background-repeat: no-repeat; background-size: 20px;}
nav#navpromobile a#btantivirm, nav#navpromobile a#btpartm, nav#navpromobile a#btaccueilm  {display: none;}

/* article */
section#contentprespro {width: 90%; margin: 0 auto; max-width: 1500px;}
#presentpro {width: 80%; margin: 0 auto;}
#presentpro h1.espacetitrepro {margin: 0; padding: 20px 0;}
#presentpro h1 {font-size: 2em;}
#presentpro h2 {padding: 35px 0 45px 5%; margin: 0;}
#presentpro ul {list-style: none; padding: 35px 25px; width: 100%; display: block;
max-width: 1000px;}
#presentpro li {width: 50%; padding-bottom: 25px; float: left;}
#presentpro ul a {height: 120px; display: block; background-repeat: no-repeat; background-position: left 50%;
padding-left: 150px; font-size: x-large; font-weight: bold; color: black; text-decoration: none;}
#presentpro ul a p {padding: 15px 10px 0 0; margin: 0;}
article ul#iconesmat {padding-top: 55px;}
#btpresinfog {background-image: url(../img/pro/presentation/infogerance.jpg);} 
#btpresvente {background-image: url(../img/pro/presentation/vente.jpg);} 
#btpresreseaux {background-image: url(../img/pro/presentation/reseaux.jpg);}
#btpreslogiciel {background-image: url(../img/pro/presentation/logiciels.jpg);}
#btpressave {background-image: url(../img/pro/presentation/sauvegarde.jpg);}
#btprestelph {background-image: url(../img/pro/presentation/telephonie.jpg);}
#btpresrachat {background-image: url(../img/pro/presentation/rachat.jpg);}
#btpresforma {background-image: url(../img/pro/presentation/formations.jpg);}
#btpresrecond {background-image: url(../img/pro/presentation/reconditionnement.jpg);}
#btpressecu {background-image: url(../img/pro/presentation/securite.jpg);}

/* responsive */
@media only screen and (max-width:1350px) {
	nav#navpro {display: none;}
	#menupromobile {display: block;}
}
@media only screen and (max-width:1280px) {
	article#presentpro {width: 90%;}
}
@media only screen and (max-width:1200px) {
	header#pro p {font-size: 1.5em; width: 60%;}
	header#pro h1 {width: 60%;}
	section#contentprespro {width: 90%;}
}
@media only screen and (max-width:1070px) {
	header#pro h1, header#pro p {width: 50%;}
	section#contentprespro {width: 100%;}
}
@media only screen and (max-width:900px) {
	#presentpro li {width: 100%;}
}
@media only screen and (max-width:870px) {
	#switchpro {display: none;}
	nav#navpromobile a#btantivirm, nav#navpromobile a#btpartm, nav#navpromobile a#btaccueilm  {display: block;}
	.mefmobile {margin-left: 220px; width: auto;}
	header#pro h1, header#pro p {width: 100%; padding-left: 0; padding-right: 0;}
}
@media only screen and (max-width:650px) {
	header#pro h1 {font-size: 1.5em;}
	header#pro p {font-size: 1.25em; padding-top: 10px;}
}
@media only screen and (max-width:470px) {
	#presentpro ul a {padding: 140px 0 0 0; background-position: center top; text-align: center;}
	#presentpro ul {width: 90%; margin: 0 auto;}
}
@media only screen and (max-width:440px) {
	a#logo {padding-top: 35px; position: relative; float: none;margin: 0 auto;}
	.mefmobile {margin-left: 0;}
}
/*img responsive*/