@charset "utf-8";
/* CSS Document */
body{
	display:grid;
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.5em;
	margin:0px;
	padding:0px;
	min-height:100vh;
	color:#333;
	font-size:14px;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr 50px;
	grid-template-areas: 
		"header"
		"nav"
		"body"
		"footer"
}
img{
	max-width:100%;
}
h1, h2{
	color:var(--hText);
	line-height:1.5em;
}
header{
	grid-area: header;
	height:150px;
	background-color:var(--headerBG);
	color:#fff;
}
.wrapperHeader{
	max-width:1050px;
	margin:auto;
}
.wrapperHeader .headerLogo{
	height:150px;
}

nav{
	grid-area: nav;
	height:40px;
	line-height:40px;
	background-color:var(--navBG);
	color:var(--navText);
}
.wrapperNav{
	max-width:1050px;
	margin:auto;
}

footer{
	grid-area: footer;
	height:50px;
	background-color:var(--footerBG);
	color:var(--footerText);
}
footer a{
	color:var(--footerText);
}
.wrapperFooter{
	max-width:1050px;
	margin:auto;
	display:flex;
	justify-content:space-between;
	line-height:50px;
}
.content{
	max-width:1050px;
	width:100%;
	margin:0px auto;
}
.wrapperContent{
	display:grid;
	grid-gap:25px;
	grid-template-columns: 8fr 4fr;
}

nav ul{
	display:flex;
	margin:0px;
	padding:0px;
}
nav ul li{
	margin:0px;
	padding:0px;
	list-style:none;
	transition:.3s;
}
nav ul li:hover{
	background-color:var(--navHover);
	color:var(--navHoverText);
}
nav ul li a:hover{
	color:var(--navHoverText);
}
nav ul li a{
	color: var(--navText);
	text-decoration:none;
	text-transform:uppercase;
	line-height:40px;
	padding:10px 25px;
}
.ui-widget {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.ui-state-active {
    background-color: var(--assocPrimary);
    border-color: var(--assocPrimary);
}
.ui-accordion .ui-accordion-header {
    padding: 1em;
}
.archive li{
	line-height:1.5em;
}

.txt{
	border:1px solid #c5c5c5;
	font-size:14px;
	color:#333;
	border-radius:4px;
	padding:5px 10px;
}
.widgetBox{
	padding-bottom:25px;
	grid-column-start: 2;
}
.widgetBox h2{
	border-bottom: 1px solid var(--assocPrimary);
	padding-bottom:10px;
}
#wrapperSearch form{
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr auto;	
}

#wrapperFollowUs img{
	max-width:32px;
	margin-right:10px;
}

#wrapperFollowUs a{
	color:var(--assocPrimary);
	font-size:32px;
	text-decoration:none;
	margin-right:10px;
}

.main{
    grid-row: 1/11;
}
.wrapperFooter{
}
#advertise{
	align-self:end;
}
#articleFooter{
	margin-top:50px;
}
#articleShare{
	font-size:24px;
}
#articleShare i{
	margin-left:15px;
	color:var(--assocPrimary);
}
form input[type="text"], form input[type="email"], form textarea{
	border-radius:3px;
	border:1px solid #ccc;
	padding:.5em 1em;
}

@media (max-device-width: 480px) {
	body{
		grid-template-rows: auto auto 1fr auto;
	}
	header{
		height:auto;
	}
	.wrapperHeader .headerLogo {
		max-width:80%;
		height:auto;
		margin-left:25px;
	}
	.wrapperContent {
		grid-template-columns: 1fr;
		padding:25px;
		grid-template-areas: 
			"search"
			"main"
	}
	nav{
		height:auto;
	}
	nav ul{
		display:block;
	}
	.widgetBox{
		grid-column-start: 1;
	}
	.main{
		grid-area: main;
		}
	#search{
		grid-area: search;
		padding-bottom:0px;
		border:none;
		grid-column-start: 1;
	}
	footer{
		padding:25px;
		height:100%;	
	}
	.wrapperFooter{
		display:block;
		line-height:1.5em;
	}
}