.clear{clear:both;}
.black{color:#000; font-weight:600;}
html,body{display:block; width:100%; padding:0; margin:0; background-image:url(img/pattern.png); font-family: 'Open Sans', sans-serif; font-weight:400; font-size:0.9em;}
.wrapper{display:block; width:100%; max-width:1000px; margin:0 auto; padding:0 0 10px 0; background-color:white; position:relative;}
.wrapper .contact-head{display:block; color:white; background-color:#ffae00; font-size:1.6em; width:200px; position:absolute; right:20px; top:0; text-align:center; text-decoration:none; padding:0 0 5px 0;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; }
.wrapper .contact-head .contacte{display:block; background-color:black; padding:5px 0 5px 0; font-size:0.8em; margin:0 0 5px 0;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; }
.wrapper .contact-head:hover{background-color:black;color:#ffae00;}

.wrapper h1{display:block; padding:120px 0 5px 0; margin:0 auto; width:600px; background-image:url(img/logo-informatique-macon.jpg); background-repeat:no-repeat; background-position:center 30px; text-align:center; color:#242424; font-size:2.8em;}
.wrapper h1 .sous-titre{display:block; font-size:0.5em; color:#ffae00; font-weight:300;}
.wrapper h2{display:block; padding:0; margin:0 auto;  text-align:center; color:#242424; font-size:1.4em;}

.wrapper .image{display:block; width:98%; margin:30px auto; padding:0; position:relative;}
.wrapper .image img{display:block; width:100%; height:auto; padding:0; margin:0;}
.wrapper .image .nb{display:block; width:100%; height:100%; padding:0; margin:0; position:absolute; top:0; left:0; z-index:99999; opacity:0;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;  background-image:url(img/nb.png); }
.wrapper .image .nb:hover{opacity:1;}
.wrapper .image .nb h3{display:block; position:absolute; top:50%; left:50%; height:280px;color:white; text-align:center; width:440px; margin:-140px 0 0 -220px; font-size:1.8em;  font-weight:300; line-height:1.4em; opacity:0;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; }
.wrapper .image .nb:hover h3{opacity:1;}
.wrapper .image .nb h3 .orange{display:block; font-size:0.9em; color:#ffae00; font-weight:400;}
.wrapper .image .nb h3 .little{display:block; font-size:0.65em; font-weight:300;}
.wrapper .image .nb h3 .prix{display:block; font-size:1.2em; font-weight:400; padding-top:20px;}
.wrapper .image .nb h3 .prix .little-prix{display:block; font-size:0.65em; font-weight:400;}

.wrapper .service{display:block; width:98%; margin:30px auto; padding:0; position:relative; background-color:#faf9fa;}
.wrapper .service .visuel{display:block; float:left; width:25%; padding:0; margin:0; overflow:hidden;}
.wrapper .service .visuel img{display:block; width:100%; height:auto; padding:0; margin:0;}
.wrapper .service .descriptif{display:block; float:left; width:50%; padding:0; margin:0;}
.wrapper .service .descriptif h2{display:block; text-align:left; padding:10px 10px 10px 70px; color:#838081; font-size:1.8em; margin:0; font-weight:400;}
.wrapper .service .descriptif h3{display:block; text-align:left; padding:10px 20px 10px 20px; color:#404040; font-size:1.1em; margin:0; line-height:1.6em; font-weight:400;}
.wrapper .service .descriptif .ico-1{background-image:url(img/icone-1.png); background-repeat:no-repeat; background-position:left 10px;}
.wrapper .service .descriptif .ico-2{background-image:url(img/icone-2.png); background-repeat:no-repeat; background-position:left 10px;}
.wrapper .service .descriptif .ico-3{background-image:url(img/icone-3.png); background-repeat:no-repeat; background-position:left 10px;}
.wrapper .service .listing{display:block; position:absolute; top:0; right:0; width:25%; padding:0; margin:0; background-color:#ffb606; height:100%;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
.wrapper .service:hover .listing{background-color:#242424;}
.wrapper .service .listing .titre{display:block; margin:0 15px; padding:10px 0 7px 0; color:white; border-bottom:solid 1px white; font-size:1em; font-weight:400;}
.wrapper .service .listing ul{margin:0 15px; padding:0 0 10px 0; display:block;}
.wrapper .service .listing ul li{display:block; padding:10px 0 0 20px; margin:0; font-size:0.85em; font-weight:400; color:white;background-image:url(img/puce.png); background-repeat:no-repeat; background-position:left 8px; }


.wrapper .contact{display:block; width:98%; margin:30px auto; padding:0; position:relative; background-color:#242424;}
.wrapper .contact .col-a{display:block; float:left; width:70%; margin:30px 0; padding:0; border-right:solid 1px white;}
.wrapper .contact .col-a h4{display:block; padding:0 5% 20px 5%; margin:0; color:white; font-size:1em; line-height:1.4em; font-weight:400; text-align:center;}
.wrapper .contact .col-a h5{display:block; padding:20px 5% 0 5%; margin:0; color:white; font-size:0.8em; line-height:1.4em; font-weight:300; text-align:center;}
.wrapper .contact .col-a a{display:block; width:80%; margin:10px auto; padding:7px 5%; background-color:#ebeaeb; color:#242424; text-decoration:none; font-size:0.8em; font-weight:600; text-align:center;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
.wrapper .contact .col-a a:hover{background-color:#ffae00; color:white;}
.wrapper .contact .col-b{display:block; float:left; width:28%; margin:30px 0; padding:0;}
.wrapper .contact .col-b .titre{display:block; padding:0 7%; margin:0; color:white; font-size:0.9em; line-height:1.4em; font-weight:400; text-align:center;}
.wrapper .contact .col-b form{display:block; width:93%; margin:0; padding:0; float:right;}
.wrapper .contact .col-b form label{display:block; color:white; font-size:0.8em;font-weight:400; text-align:center; padding:10px 0 0 0;}
.wrapper .contact .col-b form label input{display:block; border:none; color:black; background-color:white; width:90%; padding:3px 5%; margin:5px 0 0 0;}
.wrapper .contact .col-b form label textarea{display:block; border:none; color:black; background-color:white; width:90%; padding:3px 5%; height:30px;margin:5px 0 0 0;}
.wrapper .contact .col-b form .button{display:block; width:100%; background-color:#ffae00; color:white; font-size:0.8em; height:20px; line-height:20px; font-weight:400; text-align:center; padding:0; margin:10px 0; border:none; cursor:pointer;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
.wrapper .contact .col-b form .button:hover{ background-color:#fff; color:#ffae00;}
.wrapper .contact .col-b form .alert{display:block;color:white; font-size:0.8em;font-weight:400; text-align:left; padding:0; margin:0; height:20px; line-height:20px;}

.wrapper .copyright{display:block; padding:20px 0; margin:0; text-align:center; font-size:0.9em; font-weight:400; color:#242424;}
.wrapper .copyright a{color:#ffae00; text-decoration:none;}
.wrapper .copyright a:hover{text-decoration:underline; color:#242424;-ms-transition: all 0.5s ease; -o-transition:  all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

@media screen and (max-width: 1024px) {
	
.wrapper .image .nb{opacity:0.8;}	
.wrapper .image .nb h3{opacity:1;}	
}

@media screen and (max-width: 1000px) {

.wrapper{padding:0;}
.wrapper .contact-head{font-size:1.6em; width:200px; position:static;margin:0 auto;}

.wrapper h1{display:block; padding:120px 0 5px 0; margin:0 auto; width:90%; font-size:2.8em;}
.wrapper h1 .sous-titre{font-size:0.5em; color:#ffae00; font-weight:300;}
.wrapper h2{width:90%;  text-align:center; color:#242424; font-size:1.4em;}

.wrapper .image{display:block; width:100%; margin:20px auto; padding:0; position:relative;}


.wrapper .service{display:block; width:90%; margin:20px auto;}
.wrapper .service .visuel{display:block; float:right; width:25%; padding:0; margin:0; overflow:hidden;}
.wrapper .service .visuel img{display:block; width:100%; height:auto; padding:0; margin:0;}
.wrapper .service .descriptif{display:block; float:right; width:75%; padding:0; margin:0;}
.wrapper .service .descriptif h2{display:block; text-align:left; padding:10px 20px 10px 70px; color:#838081; font-size:1.6em; margin:0; font-weight:400;}
.wrapper .service .descriptif h2 .black{display:block;}
.wrapper .service .descriptif h3{display:block; text-align:left; padding:10px 20px 10px 20px; color:#404040; font-size:1.1em; margin:0; line-height:1.6em; font-weight:400;}
.wrapper .service .descriptif .ico-1{background-image:url(img/icone-1.png); background-repeat:no-repeat; background-position:left 10px;}
.wrapper .service .descriptif .ico-2{background-image:url(img/icone-2.png); background-repeat:no-repeat; background-position:left 10px;}
.wrapper .service .descriptif .ico-3{background-image:url(img/icone-3.png); background-repeat:no-repeat; background-position:left 10px;}
.wrapper .service .listing{display:block; float:left; position:static; width:100%; padding:15px 0; margin:0; background-color:#ffb606; height:auto;}
.wrapper .service:hover .listing{background-color:#242424;}
.wrapper .service .listing .titre{display:block; margin:0 15px; padding:10px 0 7px 0; color:white; border-bottom:solid 1px white; font-size:1em; font-weight:400;}
.wrapper .service .listing ul{margin:0 15px; padding:0 0 10px 0; display:block;}
.wrapper .service .listing ul li{display:block; padding:10px 0 0 20px; margin:0; font-size:0.85em; font-weight:400; color:white;background-image:url(img/puce.png); background-repeat:no-repeat; background-position:left 8px; }


.wrapper .contact{display:block; width:100%; margin:30px auto 0 auto; padding:0; position:relative; background-color:#242424;}
.wrapper .contact .col-a{display:block; float:left; width:100%; margin:30px 0; padding:0; border-right:solid 1px white;}
.wrapper .contact .col-b{display:none;}

.wrapper .copyright{display:block; padding:20px 0; margin:0; text-align:center; font-size:0.9em; font-weight:400; background-color:#242424; color:#ffae00;}

}

@media screen and (max-width: 750px) {
	
	.wrapper h1{display:block; padding:120px 0 5px 0; margin:0 auto; width:90%; font-size:2em; background-size:250px auto;}
.wrapper h1 .sous-titre{font-size:0.7em; color:#ffae00; font-weight:300;}
.wrapper h2{width:90%;  text-align:center; color:#242424; font-size:1.2em;}

.wrapper .image{display:none;}
.wrapper .service .visuel{display:none;}
.wrapper .service .descriptif{display:block; float:right; width:100%; padding:0; margin:0;}	

.wrapper .service .descriptif h2{display:block;  padding:80px 20px 10px 20px; color:#838081; font-size:1.6em; margin:0; font-weight:400; text-align:center;}
.wrapper .service .descriptif h3{display:block; text-align:center; padding:10px 20px 20px 20px; color:#404040; font-size:1.1em; margin:0; line-height:1.6em; font-weight:400;}

.wrapper .service .descriptif .ico-1{background-image:url(img/icone-1.png); background-repeat:no-repeat; background-position:center 10px;}
.wrapper .service .descriptif .ico-2{background-image:url(img/icone-2.png); background-repeat:no-repeat; background-position:center 10px;}
.wrapper .service .descriptif .ico-3{background-image:url(img/icone-3.png); background-repeat:no-repeat; background-position:center 10px;}
}