* {
margin: 0;
padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
html {
width: 100%;
height: 100%;
background: #faffff; /* Old Browsers */
background: -webkit-radial-gradient(center,#faffff,#d3d3d3); /*Safari 5.1-6*/
background: -o-radial-gradient(center,#faffff,#d3d3d3); /*Opera 11.1-12*/
background: -moz-radial-gradient(center,#faffff,#d3d3d3); /*Fx 3.6-15*/
background: radial-gradient(ellipse at center, #faffff, #d3d3d3); /*Standard*/
}
body {
font: 18px/27px 'Open Sans Condensed', sans-serif;
color: #000;
} 
.flex {
display: flex;
}
.responsive {
max-width: 100%;
height: auto;
}
.wrapper {
width: 100%;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
height: 150px;
}


/* Middle
-----------------------------------------------------------------------------*/
.content {
text-align: center;
padding: 0 2rem;
}
.content a {
font: 2rem 'Open Sans Condensed', sans-serif;
font-size: 300;
text-decoration: underline;
color: #000;
}
.content a:hover {
font: 2rem 'Open Sans Condensed', sans-serif;
font-size: 300;
text-decoration: none;
color: #2b3b5d;
}
p {
text-align: left;
margin: 0 0 1.5rem 0;
font: 2rem 'Open Sans Condensed', sans-serif;
font-size: 300;
}
h1 {
font: 3rem 'Oswald', sans-serif;
font-size: 700;
margin: 2rem auto;
}
h2 {
font: 2.5rem 'Oswald', sans-serif;
font-size: 700;
margin: 2rem auto 0.5rem auto;
}
h3 {
font: 2.2rem 'Oswald', sans-serif;
font-size: 700;
margin: 2rem auto;
}
.items {
width: 100px;
height: 100px;
padding: 5px;
margin: 20px;
border: 1px solid #999;
border-radius: 5px;
background: none; 
}
.items:hover {
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
background: #e2e2e2; 
}
.ad {
margin: 3% 5% 0 5%;
padding: 25px;
border: 1px solid #f0f0f0;
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden;
}
.photo {
width: 120px;
height: 120px;
margin: 0 15px 15px 0;
float: left;
}
.photo img {
width: 120px;
height: 120px;
}
.nophoto {
overflow: hidden;
}
.name-town {
font: 150% Arial, Tahoma, Verdana, sans-serif;
color: #823147;
}
.text-ad {
margin: 0 0 10px 0;
font: 125% Arial, Tahoma, Verdana, sans-serif;
color: #000;
}
.text-ad::first-letter {
text-transform: uppercase;
}
.details {
margin: 15px 0;
font: 120%/150% Arial, Tahoma, Verdana, sans-serif;
text-align: center;
}
.details a {
display: block;
border-radius: 5px;
font: 20px/40px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
background: #ff4a52;
text-decoration: none;
}
.details a:hover {
display: block;
border-radius: 5px;
font: 20px/40px Arial, Tahoma, Verdana, sans-serif;
color: #000;
background: #e2e2e2;
text-decoration: none;
}


/* Footer
-----------------------------------------------------------------------------*/
.footer {
height: 100px;
margin: 5rem 2rem 2rem 2rem;
padding: 1rem 0 0 0;
border-top: 1px solid #2b3b5d;
}
.footer a {
font: 1rem Arial, sans-serif;
text-decoration: underline;
text-transform: uppercase;
color: #000;
}
.footer a:hover {
font: 1rem Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #2b3b5d;
}




/* Tabs */
.tabs {
	min-width: 320px;
	max-width: 100%;
	padding: 0px;
	margin: 30px auto;
}
.tabs>section {
	display: none;
	padding: 15px;
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.tabs > input {
	display: none;
	position: absolute;
}
.tabs > label {
	display: inline-block;
	margin: 0 0 -1px;
	padding: 15px 25px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	border: 0px solid #ddd;
	border-width: 1px 1px 1px 1px;
	background: #f1f1f1;
	border-radius: 3px 3px 0 0;
}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
}
.tabs>input:checked+label {
	color: #555;
	border-top: 1px solid #009933;
	border-bottom: 1px solid #f1f1f1;
	background: #fff;
}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
	display: block;
}