/*

Theme Name: TouCleanPC87

Author: IWAST

Description: TouCleanPC87

Version: 1.0

*/

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;	
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
html,body,.page,section {height: auto; margin: 0; padding: 0;}
img {max-width:100%; height:auto;}
.container{	width: 96%;	max-width: 1180px; margin: 0 auto;}
body {font-family: 'Roboto', sans-serif; font-size:1em; line-height:1.2em; color:#f8ffff;  text-align:left; -webkit-font-smoothing:antialiased; background:#1fc0cc; margin-bottom:20px; margin-top:0;}

/* --- HEADER ---*/
header {background:rgba(248,255,255,.9); position:fixed; top:25px; left:0; right:0; z-index:10;}
#logo {float:left; position:relative; width:18.644%; margin-right:20px;}
#logo img {display:block; margin:-25px 0 -40px 0;}
#nom {float:left; margin:14px 0; width:38.983%;}
	/* --- Menu ---*/
	header nav ul {list-style-type:none; padding:0; margin:0; float:right;}
	header nav ul li {float:left; height:8px; transition:background 0.6s; margin:0 10px;}
	header nav ul li a {display:block; text-decoration:none; color:#1fc0cc; font-size:1.2em; padding-top:15px;}
	nav ul li.current, .over {background:#1fc0cc;}

/* --- CONTENT ---*/
section {position: relative; background-position: top center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}
#accueil{background-image: url('images/bg.jpg'); padding-top:180px; padding-bottom:30px;}
#tarifs {background:#f8ffff;color:#1fc0cc; padding-top:120px; padding-bottom:30px;}
#contact {background:#1fc0cc; padding-top:120px;}


/* --- FOOTER ---*/
footer a.signature {display:block; width:125px; height:24px; background-image:url('http://s610925092.onlinehome.fr/wp-content/uploads/2019/03/logofooter-2.png'); margin:10px auto; }

/* --- INTEGRATION ---*/
a{color:#000;}
a:focus {outline: 0;}
a:hover{text-decoration:none;}
h1 {font-size:1.2em; font-weight:400; margin:0 0 10px; padding:0;}
h2 {font-size:1.1em; font-weight:700; padding:10px 15px; border-radius:10px; border:3px solid #1fc0cc; color:#1fc0cc; text-align:center; max-width:260px; margin:20px auto;}
h3 {font-size:1.4em; font-weight:700; color:#f8ffff; background:#1fc0cc; padding:18px 0; margin:0; text-align:center;}
p {margin:0 0 8px 0; padding:0;}
strong {font-weight:500;}

.tlt {font-size:2em; line-height:1.3em; font-weight:500; text-align:center; text-shadow:2px 2px 2px #021c1f;}
.content {background:rgba(4,45,49,.8); margin-top:50px; padding:15px;}

#depannage {margin:20px 0;}
.icon {width:32%; margin-right:2%; margin-bottom:15px; float:left; text-align:center;}
.icon:nth-child(3n) {margin-right:0;}
.icon img {display:block; margin:8px auto;}
#distance {border-top:1px solid #f8ffff; padding-top:10px; margin-top:18px;}
#distance img {display:block; float:left; margin-right:2%;}

#contact p:first-child {margin:40px 0 20px; text-align:center;}
#contact p:first-child span {display:block; font-size:2em; font-weight:500; margin:24px 0 0;}
.wpcf7 *{box-sizing:border-box;}
.wpcf7 p {width:31.33%; margin:8px 3% 15px 0; float:left;display:block;}
.wpcf7 p:nth-child(4){margin:8px 0 15px 0;}
.wpcf7 p:nth-child(5), .wpcf7 p:nth-child(6){width:100%;}
.wpcf7 p:nth-child(6){text-align:center;}
input[type="submit"] {cursor:pointer; padding:10px 15px;background:#f8ffff;color:#1fc0cc;border:none;margin-bottom:15px;margin:0 auto; display:block;}
input[type="text"], input[type="email"],textarea{padding:3%; background:#f8ffff; border:1px solid #1fc0cc; width:100%;}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {border:1px solid #021c1f;}
textarea {resize:none; height:150px;}
.wpcf7-response-output{display:inline-block !important; border-color:red !important; width:80% !important; text-align:center !important; margin:0 10% 10px!important;}

#tarifs h2 {margin-bottom:60px;}
.details {float:left; width:30.3333%; margin:0 1.5%; border:2px solid #1fc0cc; box-sizing:border-box;}
.details p {padding:10px 15px 10px 40px; background:url(images/tarifs-icon.png) no-repeat 5px top; color:#1dbf6a; margin-bottom:0;}
.details p:nth-child(odd) {background-color:#e5f1f1;}
.details p.prix, .distance p.prix {font-size:3.2em; font-weight:500; margin:18px 0; padding:10px 0; text-align:center; color:#1fc0cc; background-image:none;}
.distance {max-width:350px; margin:20px auto;}
.distance p.prix span {font-size:.6em;}

@media screen and (max-width :768px) {
    .fixed {position: fixed; top:0; right:0; left:0; background:#f8ffff; padding-bottom:10px;border-bottom:1px solid #1fc0cc;}
    html,body,.page,section {height: auto; margin: 0; padding: 0;}
    header {top:0; position:absolute; text-align:center;}
    header #logo, header #nom {width:100%; float:none; margin:8px auto;}
    #logo img {display:inline; margin:10px 0;}
    header #navigation {height:40px;}
    header nav ul {float:none;}
    header nav ul li {display:inline-block; float:none; margin:0 12px; height:6px;}
    #accueil{background-image: url('images/bg-mobile.jpg'); padding-top:320px;}
    #tarifs, #contact {padding-top:60px;}
    .tlt {font-size:1.6em;}
    .icon {width:49%;}
    .icon:nth-child(3n) {margin-right:2%;}
    .icon:nth-child(2n) {margin-right:0;}
    .details {float:none; width:60%; margin:18px auto 50px;}
    .wpcf7 p {width:100%; margin:8px 0; float:none;}
}
@media screen and (max-width :450px) {
    .details {width:90%;}
}