/*
	Theme Name: Start template for WordPress
	Theme URI: http://www.mcteam.com.pl 
	Author: MC TEAM Agencja Interaktywna Mateusz Ciesiółka
	Description: A template to start playing with WordPress
	Version: 1.0
*/
*{
    margin: 0;
    padding: 0;
	box-sizing:border-box;    
}

body{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: normal;
	color: #3e3e3e;
	background:#fff;
} 

.top{
	width:100%;
	background:#3e3e3e;
	margin:0px auto;
	padding:10px 5px;
	color:#fff;
}

.top .in{
	width:100%;
	max-width:1400px;
	margin:0px auto;
	overflow:hidden;
	display:flex;
	flex-wrap: nowrap;
	flex-direction: row;
}

.top .in .col{
	float:left;
	flex-grow:1;
	text-align:center;
}

.top .in .col svg{
	margin-right:15px;
}

.top .in .col a{
	color:#fff;
	text-decoration:none;
}

.top .in .col a:hover{
	color:#C8102E;
}

/* header */
header{
	width:100%;
	padding: 10px 0px;
	margin:0px auto;
	overflow:hidden;
	background:#fff;
}

header .in{
	width:100%;
	max-width:1400px;
	margin:0px auto;
	overflow:hidden;
	position:relative;
}

header .in #menu-responsive{
	display: none;
	cursor:pointer;
}
	
header .in div#logo{
	width:100%; 
	max-width:150px;
	float: left;
}
	
header .in div#logo a img{ 
	width:100%;
	display:block;
}
	
header .in nav{
	float: right; 
	margin-top:12px;
}
	
header .in nav ul{
	list-style:none;	
	overflow:hidden;	
}
		
header .in nav ul li{
	float: left;
}
			
header .in nav ul li a:hover, header .in nav ul li.active a{
	color: #C8102E;
	border-bottom:2px solid #C8102E;
}
			
header .in nav ul li a{
	color: #3e3e3e;
	text-decoration: none;	
	text-transform: uppercase;
	padding: 16px 15px;
	font-size: 16px;
	font-weight: 700;
	display: block;
	border-bottom:2px solid #fff;
	margin-right:5px;
}



/* site */
.web{
	width:100%;
	margin:0px auto;
	overflow:hidden;
	/*margin-bottom:40px;*/
	/*padding:20px 0px;*/
}

.web section{
	width:100%;
	max-width:1400px;
	margin:0px auto;
	overflow:hidden;
}

.web section article{
	width:100%;
	max-width:1400px;
	margin:0px auto;
	overflow:hidden;
	padding:70px 0px;
}

.web section article > h1, .web section article > h1 a{
	text-decoration:none;
	font-size:44px;
	text-align:center;
	font-weight:600;
	margin-bottom:10px;
}

.web section article > h2, .web section article > h2 a{
	text-decoration:none;
	font-size:44px;
	text-align:center;
	font-weight:600;
	margin-bottom:10px;
}

.web section article > h2.mtop, .web section article > h2.mtop a{
	margin-top:40px;
}

.web section article h2 span{
	color:#C8102E;
}

.web section article > p{
	line-height:26px;
	padding:12px 0px;
	text-align:center;
}

.web section article p.desc{
	color:#3a3a3a;
	text-decoration:none;
	font-size:16px;
	text-align:center;
}

.web section article div.separator{
	width:56px;
	height:3px;
	background:url('http://www.autofranceserwis.pl/wp-content/uploads/2021/02/podkreslenie_naglowek.png');
	margin-top:10px;
	margin-bottom:10px;
}


/* 6 blokow */
.web section article .service{
	width:100%;
	max-width:1200px;
	margin:50px auto 0px auto;
	overflow:hidden;
}

.web section article .service div{
	width:100%;
	height:400px;
	max-width:400px;
	float:left;
	overflow:hidden;
	position:relative;
}

.web section article .service div img{
	display:block;
	width:100%;
	transition-duration: .6s;
	z-index:100;
}

.web section article .service div.img img:hover{
	transform: scale(1.1); 
	cursor:pointer;
}

.web section article .service div .in{
	width:100%;
	max-width:400px;
	height:400px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:400;
	color:#fff;
	text-align:center;
	padding:80px 50px;
}

.web section article .service div.white .in{
	color:#3e3e3e;
}

.web section article .service div .in h3{
	font-size:27px;
	padding:15px 0px;
	text-transform:inherit;
}

.web section article .service div .in p{
	font-size:16px;
	padding:15px 0px;
	line-height:25px;
}


/* 6 blokow - usluga */
.web section article .usluga{
	width:100%;
	max-width:1200px;
	margin:50px auto 0px auto;
	overflow:hidden;
}

.web section article .usluga div{
	width:100%;
	height:400px;
	max-width:400px;
	float:left;
	overflow:hidden;
	position:relative;
	color:#fff;
	text-align:center;
}

.web section article .usluga div img{
	display:block;
	width:100%;
	transition-duration: .6s;
	z-index:100;
}

.web section article .usluga div .in{
	width:100%;
	max-width:400px;
	height:400px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:400;
	margin:0px auto;
	padding:60px 40px;
}

.web section article .usluga div .in h3{
	font-size:27px;
	padding:15px 0px;
	text-transform:inherit;
}

.web section article .usluga div .in p{
	font-size:16px;
	padding:15px 0px;
	line-height:25px;
}

.web section article .usluga div.blue{
	background:#002290;
}

.web section article .usluga div.red{
	background:#C8102E;
}

.web section article .usluga div.white{
	background:#fff;
}

.web section article .usluga div.white .in{
	color:#3E3E3E;
}

.web section article .usluga div.grey{
	/*background:#3E3E3E;*/
	background:#636363;
}


/* usluga2 */
.web section article .usluga2{
	width:100%;
	max-width:1200px;
	margin:50px auto 0px auto;
	overflow:hidden; 
}

.web section article .usluga2 > div.col50{
	float:left;
	width:50%;
	padding:10px 20px;
}

.web section article .usluga2 > div.col50 ul li{
	color:#3e3e3e;
	position:relative;
	list-style:none;
	padding:10px 0px;
}

.web section article .usluga2 > div.col50 ul li::after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00c";
	position: absolute;
	top: 12px;
	left:-18px;
	font-size:12px;
	color:#C8102E;
}



/* klient */
.web section article .klient{
	width:100%;
	max-width:1200px;
	margin:50px auto 0px auto;
	overflow:hidden;
	display:flex;
	flex-wrap: nowrap;
	flex-direction: row;
}

.web section article .klient div{
	float:left;
	flex-grow:1;
}

.web section article .klient div .icon{
	width:15%;
	max-width:40px;
	border-right:2px solid #C8102E;
	padding:0px 3px;
}

.web section article .klient div .icon img{
	display:block;
	width:100%;
	margin:0px auto;
}

.web section article .klient div .text{
	width:80%;
	line-height:26px;
	padding:0px 10px;
}

.filter-grey{
	filter: invert(13%) sepia(0%) saturate(1380%) hue-rotate(174deg) brightness(97%) contrast(69%);
}


/* oferta */
.web section article .offer{
	width:100%;
	max-width:1200px;
	margin:50px auto 0px auto;
	overflow:hidden; 
}

.web section article .offer > div.col{
	float:left;
	width:33%;
	padding:10px 15px;
}

.web section article .offer > div.col h2{
	color:#fff;
}

.web section article .offer > div.col h2 span{
	color:#C8102E;
}

.web section article .offer > div.col p{
	color:#fff;
	line-height:26px;
}

.web section article .offer > div.col ul li{
	color:#fff;
	position:relative;
	list-style:none;
	padding:10px 0px;
}

.web section article .offer > div.col ul li::after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00c";
	/*content: '✓';*/
	position: absolute;
	top: 12px;
	left:-18px;
	font-size:12px;
	color:#C8102E;
}


/* opinie */
.web section article .opinia{
	width:100%;
	height:300px;
	margin:0px auto;
	position:relative;
}

.web section article .opinia .in{
	position:absolute;
	top:0px;
	left:0px;
	width:400%;
	animation: animate 9s linear infinite;
}

.web section article .opinia .in .one{
	width:25%;
	float:left;
	overflow:hidden;
	padding:20px 10px;
}

.web section article .opinia .in .one .img{
	width:150px;
	height:150px;
	margin:0px auto;
	position:relative;
}

.web section article .opinia .in .one .img img{
	width:100%;
	margin:0px auto;
	display:block;
	border-radius:50%;
}

.web section article .opinia .in .one .img span.icon{
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
	overflow:hidden;
	top:-10px;
	left:-10px;
	background:#C8102E;
	text-align:center;
}

.web section article .opinia .in .one .img span.icon::after{
	content:"“";
	text-align:center;
	font-size:87px;
	color:#fff;
}

.web section article .opinia .in .one .opis, .web section article .opinia .podpis{
	width:100%;
	max-width:700px;
	margin:20px auto;
	display:block;
}

.web section article .opinia .in .one .opis p{
	width:100%;
	text-align:center;
	font-weight:500;
	line-height:26px;
}

.web section article .opinia .in .one .podpis p{
	width:100%;
	text-align:center;
	font-weight:700;
}

.web section article .opinia .in .one .podpis p span{
	color:#C8102E;
}

@keyframes animate{
	0%{left:0%;}
	30%{left:0%}
	33%{left:-100%;}
	63%{left:-100%;}
	66%{left:-200%;}
	96%{left:-200%;}
	100%{left:-300%;}
}


/* other */
.left{float:left;}
.right{float:right;}
.center{float:none;margin:0px auto;}
.grey{background:#3e3e3e;color#fff;}


/* map */
.map{
	width:100%;
	height:400px;
	margin:0px auto;
	position:relative;
}

.map .kontakt{
	width:100%;
	max-width:400px;
	height:400px;
	background:rgba(64,64,64,0.9);
	padding:30px 40px;
	color:#fff;
	position:absolute;
	top:0px;
	right:100px;
}

.map .kontakt h4{
	display:block;
	font-size:22px;
	color:#ffc513;
	text-align:left;
	font-weight:600;
	margin:20px auto;
}

.map .kontakt div{
	width:100%;
	float:left;
	padding:5px 0px;
	overflow:hidden;
}

.map .kontakt div.adres{
	padding-left:2px;
}

.map .kontakt div.tel{
	padding-left:3.5px;
}

.map .kontakt div svg{
	display:inline-block;
	margin-right:10px;
}

.map .kontakt div p{
	display:inline-block;
}

.map .kontakt div p.cdn{
	padding-left:22px;
}

.map .kontakt div p a{
	color:#fff;
	text-decoration:none;
}

.map .kontakt div p a:hover{
	color:#C8102E;
}



/* footer */
footer{
	width:100%;
	background: #3e3e3e;
	color: #FFF;
	text-align: center;
	overflow:hidden;
}
	
footer .in{
	max-width:1400px;
	margin:0px auto;
	overflow:hidden;
	display:flex;
	flex-wrap: nowrap;
	flex-direction: row;
	padding:10px 0px;
}
	
footer .in div{
	float:left;
	flex-grow:1;
}
	
footer .in .logo a img{
	display:inline-block;
	width:100%;
	max-width:100px;
	float:left;
	margin-right:15px;
}
	
footer .in .logo p{
	padding:23px 0px;
	text-align:left;
	font-size:12px;
}
	
footer .in .media{
	padding:20px 0px;
}
	
footer .in .media svg{
	float:right;
	font-size:20px;
	margin-left:10px;
	color:#fff;
}
	
footer .in .media svg:hover{
	color: #C8102E;
}



/* author */
.author{
	background: #3e3e3e;
	width:100%;
	overflow:hidden;
	padding:10px;
	text-align:right;
	font-size:10px;
	border-top:1px solid #464646;
}


/* formularz */
.web section.home article form{
	padding:0px 40px;
}

.web section.home article form div.wpcf7-response-output{
	border:none;
	background:#c8102e;
	color:#fff;
}

.web section.home article form p{
	margin:20px auto;
}

.web section.home article form p label{
	font-size:16px;
	line-height:28px;
}

.web section.home article form p label span{
	font-size:14px;
	color:#3e3e3e;
}

.web section.home article form p label input,
.web section.home article form p label textarea{
	width:100%;
	font-size:16px;
	padding:10px 14px;
	border:1px solid #eee;
	background:#fafafa;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color:#181818;
}

.web section.home article form p label span.wpcf7-not-valid-tip{
	color:#c8102e;
}

.web section.home article form p input.wpcf7-submit{
	font-size:20px;
	padding:15px 26px;
	border:1px solid #fff;
	background:#3e3e3e;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color:#fff;
	cursor:pointer;
}

.web section.home article form p input.wpcf7-submit:hover{
	border:1px solid #3e3e3e;
	background:#fff;
	color:#3e3e3e;
}


/* cookies */
#cookies{
	width:100%;
	overflow:hidden;
	position:fixed;
	left:0px;
	bottom:0px;
	background:#C8102E;
	display:none;
	z-index:999;
}

#cookies .in{
	width:100%;
	max-width:1400px;
	color:#fff;
	padding:0px 50px;
	margin:0px auto;
}

#cookies .in div{
	width:100%;
	float:left;
}

#cookies .in div.textCookies{
	width:86%;
	max-width:1260px;
}

#cookies .in div.buttonCookies{
	width:12%;
	min-width:140px;
	padding:17px 0px;
}

#cookies .in div.buttonCookies a button{
	border:1px solid #C8102E;
	background:#fff;
	color:#C8102E;
	text-align:center;
	padding:10px 24px;
	font-size:16px;
	cursor:pointer;
	float:right;
}

#cookies .in div.buttonCookies a button:hover{
	border:1px solid #fff;
	background:#C8102E;
	color:#fff;
}

#cookies .in div p{
	display:block;
	width:100%;
	text-align:center;
	padding:10px 10px;
	font-size:16px;
	line-height:30px;
}

#cookies .in div a{
	color:#fff;
	text-decoration:underline;
	font-weight:900;
}

#cookies .in div a:hover{
	color:#002290;
	text-decoration:none;
}



.bgOpinie{
	background: #fff url('http://www.autofranceserwis.pl/wp-content/uploads/2021/02/opinie_bg.png');
	background-position:center center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.bgOffer{
	background: #3e3e3e url('http://www.autofranceserwis.pl/wp-content/uploads/2021/02/bg_offer_2.png');
	background-position:center center;
	background-repeat: no-repeat;
	background-size: 100%;
}

	
/* responsive style */
@media all and (max-width: 1400px){		
	header{
		padding:10px;
	}
}

@media all and (max-width: 1220px){		
	.web section article .service{
		max-width:750px;
	}

	.web section article .service div{
		height:250px;
		max-width:250px;
	}

	.web section article .service div .in{
		max-width:250px;
		height:250px;
		padding:30px 20px;
	}

	.web section article .service div .in h3{
		font-size:20px;
		padding:10px 0px;
	}

	.web section article .service div .in p{
		font-size:14px;
		padding:10px 0px;
		line-height:20px;
	}
	
	
	.web section article .usluga{
		max-width:750px;
	}

	.web section article .usluga div{
		height:250px;
		max-width:250px;
	}

	.web section article .usluga div .in{
		max-width:250px;
		height:250px;
		padding:30px 20px;
	}

	.web section article .usluga div .in h3{
		font-size:20px;
		padding:10px 0px;
	}

	.web section article .usluga div .in p{
		font-size:14px;
		padding:10px 0px;
		line-height:20px;
	}
	
	
	.web section article .usluga2{
		padding:0px 40px;
	}
	
	
	.web section article .klient{
		width:100%;
		max-width:400px;
		margin:50px auto 0px auto;
		overflow:hidden;
		display:block;
	}

	.web section article .klient div{
		float:left;
		margin-top:20px;
	}

	.web section article .klient div .icon{
		width:15%;
		max-width:40px;
		border-right:2px solid #C8102E;
		padding:0px 3px;
	}

	.web section article .klient div .icon img{
		display:block;
		width:100%;
		margin:0px auto;
	}

	.web section article .klient div .text{
		width:84%;
		line-height:26px;
		padding:0px 10px;
		float:right;
	}
}

@media all and (max-width: 1000px){		
	.top .in{
		display:block;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.top .in .col{
		width:100%;
		float:none;
		margin:0px auto;
		padding:6px 0px;
	}

	header .in div#logo{
		float:none;
		margin:0px auto;
	}

	header .in #menu-responsive	{
		position:absolute;
		top:25px;
		right:0px;
		width:60px;
		display: block;
	}
		
	header .in #menu-responsive span	{
		display:block;
		width:100%;
		height:6px;
		border-radius:4px;
		background:#C8102E;
		margin:2px auto 2px auto;
	}
			
	header .in nav{
		float: none;
		display: none;
	}
		
	header .in nav ul{
		width:100%;
	}
			
	header .in nav ul li{
		float: none;
		text-align: center;
		background: #C8102E;
		margin: 0;
		color:#fff;
	}
			
	header .in nav ul li a{
		float: none;
		text-align: center;
		background: #C8102E;
		margin: 0;
		color:#fff;
		border:0px;
	}
				
	header .in nav ul li.active, header .in nav ul li.active a, header .in nav ul li:hover, header .in nav ul li a:hover{
		color: #C8102E;
		background:#fff;
		border:0px;
	}
	
	footer{
		min-width: 100%;
	}
}

@media all and (max-width: 800px){
	.web section article > p{
		padding:12px 10px;
	}
	
	.web section article .service{
		max-width:300px;
	}

	.web section article .service div{
		height:300px;
		max-width:300px;
	}

	.web section article .service div.img{
		display:none;
	}

	.web section article .service div .in{
		max-width:300px;
		height:300px;
		padding:40px 20px;
	}

	.web section article .service div .in h3{
		font-size:22px;
		padding:10px 0px;
	}

	.web section article .service div .in p{
		font-size:14px;
		padding:10px 0px;
		line-height:20px;
	}
	
	
	.web section article .usluga{
		max-width:300px;
	}

	.web section article .usluga div{
		height:300px;
		max-width:300px;
	}

	.web section article .usluga div .in{
		max-width:300px;
		height:300px;
		padding:40px 20px;
	}

	.web section article .usluga div .in h3{
		font-size:22px;
		padding:10px 0px;
	}

	.web section article .usluga div .in p{
		font-size:14px;
		padding:10px 0px;
		line-height:20px;
	}
	
	
	.web section article .usluga2 > div.col50{
		float:none;
		width:100%;
		margin:0px auto;
		padding:0px 20px;
	}
	
	
	.web section article .offer{
		max-width:600px;
	}

	.web section article .offer > div.col{
		width:100%;
		padding:0px 15px;
	}
	
	.web section article .offer > div.col ul li{
		padding:10px 20px;
	}

	.web section article .offer > div.col ul li::after{
		left:1px;
	}
	
	.bgOffer{
		background: #3e3e3e;
	}
	
	.map .kontakt{
		max-width:800px;
		top:0px;
		right:0px;
	}
}