@import url('https://fonts.googleapis.com/css?family=Arimo:400,700');

*{
	padding:0px;
	border:0px;
	margin:0px;
}


body{
font-family: 'Arimo', serif;
font-weight:400;
color:#4b4c4c;
background-image:url('images/bg_body.png');
background-repeat:repeat-x;
background-color:#f5f5f5;
}


/* *********************** COMMON *********************** */


h1{
font-family: 'Arimo', sans-serif;
font-size: 38px;
color: #2d3436;
font-weight: 900;
margin: 0px;
line-height: 46px;
background-image:url('images/bg_h1.png');
background-repeat:no-repeat;
background-position:bottom center;
padding-bottom:21px;
margin-bottom:50px;
}


h2{
font-family: 'Arimo', sans-serif;
font-size: 30px;
color: #2d3436;
font-weight: 900;
margin: 0px;
line-height: 31px;
background-image: url('images/bg_h2.jpg');
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 20px;
letter-spacing: -1px;
}

h3{
font-family: 'Arimo', sans-serif;
font-size: 2px;
color: #2d3436;
font-weight: 900;
margin: 0px;
line-height: 31px;
padding-bottom: 20px;
letter-spacing: -1px;
}



.content_width{
width:95%;
margin:auto;
}


#wrapper p{
color: #4b4c4c;
font-size: 16px;
line-height: 26px;
margin-bottom: 19px;
}

a{
color:inherit;
text-decoration:none;
transition: all 0.3s ease-in-out;
}

a:hover{
text-decoration:underline;
}

.button{
display: inline-block;
vertical-align: top;
font-family: 'Arimo', sans-serif;
color: white;
font-size: 19px;
line-height: 40px;
height: 40px;
border-radius: 25px;
text-decoration: none;
padding: 0px 56px 0px 32px;
background-image: url('images/arrow-right.png');
background-repeat: no-repeat;
background-position: right;
border: 2px solid white;
}

.button:hover{
text-decoration:none;
opacity:0.65;
}

.clear{
width:100%;
clear:both;
}



/* *********************** BANNER *********************** */
#lang{
text-align:center;
}

#lang img{
padding:10px 4px;
}

#banner{
width:100%;
text-align:center;
padding-bottom:30px;
}

#banner img.logo{
display: inline-block;
vertical-align: top;
margin-top: 20px;
width: 223px;
}


/* *********************** MENU *********************** */
#menu{
text-align:center;
font-size:0;
display:inline-block;
vertical-align:top;
width:100%;
margin-top:28px;
}

#menu ul{
}

#menu li{
display:inline-block;
vertical-align:top;
list-style-type:none;
}

#menu li a{
font-family: 'Arimo', serif;
text-decoration: none;
padding: 15px;
font-size:15px;
color:white;
line-height:37px;
}


#menu li a:hover{
text-decoration:none;
opacity:0.65;
}

#menu li a.selected{
text-decoration:none;
text-decoration:underline;
}


/* *********************** WRAPPER *********************** */
#wrapper{

}


#wrapper .content_width{
min-height:300px;
background-color:white;
}



/* *********************** PAGES *********************** */

/* ***** SLIDER (page -> HOME) ***** */
#slider{
background-image:url('images/online-commerce-magento-expert.png');
background-size:cover;
background-repeat:no-repeat;
background-position:right;
width:100%;
height:300px;
overflow:hidden;
margin-bottom:60px;
text-align:right;
}

#slider img.logo{

}

#slider .c1{

text-align:right;
padding-top:15px;
}

#slider p.text1{
font-family: 'Arimo', sans-serif;
font-size: 48px;
color: white;
font-weight: 900;
margin: 0px;
line-height: 47px;
padding-right:20px;
letter-spacing: -1px;
}

#slider a.button{
margin-top:40px;
display:none;
}

/* ***** HOME ***** */

#home{
text-align:center;
padding:0px;
background-color:white;
padding-bottom:90px;
}

#home .c1{
display:inline-block;
vertical-align:top;
width:94%;
text-align:center;
padding-bottom:40px;
}

#home .c1 h1{
margin-bottom:20px;
}

#home .c1 a.button{
color:#2d3436;
border:2px solid #2d3436;
background-image:url('images/arrow-right-dark.png');
}

#home .c2{
display:inline-block;
vertical-align:top;
width:94%;
text-align:left;
}



/* ***** NEWS (commun à toute les pages) ***** */

#news{
padding:60px 0px;
text-align:center;
}


#news a.c1{ /* LISTE */
display:block;
transition: all 0.2s ease-in-out;
border-bottom:1px solid #c8c8c8;
margin-top:30px;
padding:2%;
text-align:left;
width:90%;
padding-bottom:50px;
}

#news a.c1:hover{
text-decoration:none;
background-color: #f5f5f5;
}

#news a.c1 .img{
width: 277px;
height:217px;
float: left;
margin-right:30px;
overflow:hidden;
display: flex; /* contexte sur le parent */
  flex-direction: column; /* direction d'affichage verticale */
  justify-content: center; /* alignement vertical */
}

#news a.c1 .img img{
width:277px;
filter: grayscale(27%);
}

#news a.c1:hover .img  img{
filter: grayscale(0%);
}

#news a.c1 p.date{
font-size:12px;
margin-bottom:0px;
}


#news a.c1 span.button{
color: #4b4c4c;
border: 2px solid #4b4c4c;
background-image: url('images/arrow-right-dark.png');
font-size: 15px;
padding: 0px 42px 0px 26px;
}

#news .c2{ /* ARTICLE */
display:inline-block;
vertical-align:top;
width:90%;
text-align:left;
margin-bottom:60px;
}

#news h1{
text-align:center;
}

#news h2{
margin-bottom:20px;
}

#news .c2 .content{
width:100%;
margin-bottom:30px;
}

#news .c2 .content img{
max-width:100%;
}

#news .c2 a.button{
color: #4b4c4c;
border: 2px solid #4b4c4c;
background-image: url('images/arrow-right-dark.png');
font-size: 15px;
padding: 0px 42px 0px 26px;
}




 



/* ***** CONTACT ***** */

#contact{
padding:60px 0px;
text-align:center;
}

#contact img.contactez_magintec{
width: 100%;
margin-bottom:20px;
}

#contact .fadeandscale_open{
position:relative;
top:4px;
}

#contact .fadeandscale_open:hover{
opacity:0.65;
}

#contact p.titre{
font-size:19px;
}

#contact .details{
}

#contact p.adresse{

}

#contact p.tel{

}

#contact p.mail{
}

#contact p.tva{
}

#contact iframe{
width:100%;
height:300px;
margin-top:30px;
}

/* Mentions légales */

#legal{
padding:60px 10px; 
}

#legal h1{

}

#legal h2{

margin-top: 14px;
margin-bottom: 14px;
}

#legal p{
margin-bottom:5px;
}

#legal p span{
display:block;
width:100%;

text-decoration:underline;
}

#legal .c0{
width:100%;
text-align:left;
display:inline-block;
vertical-align:top;
border:1px solid #fff3;
text-align:left;
padding:1%;
margin-bottom:30px;
}

#legal .c1{
display:inline-block;
vertical-align:top;
width:92%;
margin:2%;
padding:10px;
margin-right:5px;
border:1px solid #fff3;
text-align:left;
margin-bottom:30px;
min-height:262px;
}

#legal .c1.last{
margin-right:0px;
}



#legal .c2{
width:92%;
padding:10px;
margin:2%;
text-align:left;
display:inline-block;
vertical-align:top;
border:1px solid #fff3;
margin-bottom:30px;
padding-bottom:30px;
}

#legal .c2 h3{

}

#legal .c2 h4{

}

#legal .c2 p{
margin-bottom:8px;
font-size:13px;
line-height:22px;
}

#legal .c2 ul li{
margin-bottom:5px;
font-size:13px;
line-height:22px;
padding-left:15px;
list-style-type:none;
}

#legal .c2 ul ul li{
padding-left:30px;
}

#legal .c2.last{
margin-right:0px;
}


/* ***** 404 ***** */
#e404{
padding:30px 60px;
}


/* *********************** VISUAL (uniquement page home) *********************** */
#visual{
width:100%;
font-size:0px;
text-align:center;
background-color:#2d3436;
padding:30px 0px;

}

#visual .c1{
display:inline-block;
vertical-align:top;
text-align:left;
width:150px;
height:150px;
border-radius:75px;
background-image:url('images/bruno-cremer.png');
background-repeat:no-repeat;
background-size:cover;
}

#visual .c2{
display:inline-block;
vertical-align:top;
text-align:center;
width:100%;
}

#visual .c2 h2{
padding-top:20px;
color:white;
margin:0px 60px 30px 60px;
background-image:url('images/bg_h2_white.jpg');
background-position:bottom center;
}

#visual .c2 p{
font-size:15px;
line-height:29px;
margin:0px 60px 30px 60px;
color:white;

}

#visual .c2 a.button{
margin-bottom:40px;
}



#visual .c3{
display:inline-block;
vertical-align:top;
text-align:center;
width:100%;
background-color:white;
}

#visual .c3 h2{
margin:7px 60px;
padding-top:30px;
background-position:bottom center;
}

#visual .c3 p{
font-size:15px;
line-height:29px;
margin:30px 60px;
}

#visual .c4{

display:inline-block;
vertical-align:top;
width:300px;
height:300px;
background-image:url('images/expert-programmation-magento.jpg');
background-repeat:no-repeat;
background-size:cover;
border-radius:150px;
margin-top:30px;
}







/* *********************** FOOTER *********************** */

#footer{
width:100%;
text-align:center;
font-size:0px;
background-color:white;
}

#footer img.logo{
padding-top:40px;
display:block;
margin:auto;
max-width:95%;
}



#footer .arrow_left{
display:none;
}

#footer .arrow_right{
display:none;
}

#footer .c1{
display:inline-block;
vertical-align:top;
width:46%;
margin:2%;
margin-top:16px;
background-image: url('images/bg_h2.jpg');
background-repeat:no-repeat;
background-position:bottom center;
padding-bottom:0px;

}

#footer .c1 h3{
font-size:25px;
}

#footer .c1 p{
font-size:14px;
line-height:24px;
margin-bottom:10px;
}

#footer img.message{
margin:80px 0px;
}

#footer .copyright{
background-color:#2d3436;
text-align:center;
}


#footer .copyright p{
font-size:13px;
color:white;
line-height:30px;
}






/* *********************** FORM JQUERY *********************** */
#fadeandscale{
background-color:white;
padding:60px 2% 20px 2%;
text-align:center;
width:90%;
background-image:url('images/logo-magintec-small-black.jpg');
background-repeat:no-repeat;
background-position:top center;
border-radius:20px;
}



#fadeandscale h1{
margin-bottom: 50px;
font-size: 37px;
margin-top: 20px;
text-align:center;
}

#fadeandscale h2{
font-size: 21px;
font-weight: 700;
color: #080808;
background-image: none;
margin-top: 14px;
}

#fadeandscale form{
clear:both;
}

#fadeandscale p{
font-size: 16px;
color: #2c3e50;
margin: 17px 0px 14px 10px;
}

#fadeandscale input[type="text"]{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 513px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale textarea{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
height:250px;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 513px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale input[type="text"]:hover{
box-shadow:         1px 1px 10px 0px rgba(50, 50, 50, 0.20);
}

#fadeandscale select{
border: 1px solid #bdc3c7;
padding: 10px 20px;
font-size: 16px;
color: #2c3e50;
transition: all 0.2s ease-in-out;
margin-bottom: 15px;
margin-right: 15px;
width:90%;
max-width: 556px;
border-radius: 2px;
color: #424e5a;
display: inline-block;
}

#fadeandscale .button{
cursor: pointer;
color: #4b4c4c;
border: 2px solid #4b4c4c;
background-image: url('images/arrow-right-dark.png');
font-size: 15px;
padding: 0px 42px 0px 26px;
background-color: white;
line-height: 30px;
margin-right: 20px;
}