:root {
	--bg: #191919;
	--dblue: #5c5d96;
	--lightblue: #3c3d76;
	--lightblue-mid: #3c3d7633;
	--lightblue-transparent: #3c3d7611;
	--hover: #CCC;
	--text: #999;
}

* {
	box-sizing: border-box;
	transition: all ease 1s;
}

body {
	margin:0;
	padding: 0;
	font-size: 0.9em;
	background-color: var(--bg);
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: var(--text);
	text-decoration: none;
	transition: all ease .8s
}

a:hover {
	color: var(--hover);
}

header, header ul, main > section, main article {
	display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    list-style: none;
}

header {
	background: var(--lightblue-transparent);
	border-bottom: 1px solid var(--lightblue);	
}

h1 {
	margin: 0;
}


header ul img {
	height: 32px;
}

header ul a {
	padding: 1em;
}

#logo, #logo2 {
	width: 200px;
}

#devoldere, #devoldere2 {
	margin-top: 5px;
}

.topIm {
	display: none;
}

.topIm.active {
	display: inline-block;
}

#altCss {
	display: inline-block;
	padding-top: 12px;
}

main > section {
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 1200px;
	max-width: 100%;
	margin: 1em auto;
}

main article {
	flex-direction: column;
	justify-content: flex-start;
	flex-basis: 180px;
	margin: 0 0 3em 0;
	transition: all ease .8s;
}

main article h3 {
	color: var(--lightblue);
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABO0lEQVR42mNgGExgw7x+zs0rFkvSzIKN8yew7N28wXbNnJnSNLPk2P4DzIc3rs9fPWe6GM0s2bd9m8SS6ZMn0jQ+DuzY8nH15L4Ymhi+d8tmrgunTvxcv2T+AZr54OLpU8/2btn4f+XMKUE0seDa+TMvTxw68H9BX2cT1Q2/sX0z4+XTJ18f3bf7/9o5swqpn4p2bFe7dPb0//1bN/1fOn1KAtUtOLJjax8wkv+vnD19HtUNv3z6qNi540f+bFg0d8P8/j4Wqltw5uihFXs2rv20ceECQaobfmj3jqL9Wza8mdFa70R1w3evWZW9fdWyY0un9nNS3fA927YabVmxdPXmBXPZaJKptixduGzNtCm0KaJ3rFtpMb+v244mhi+YNllpwZQJURPaWllpYsHqGVPll02brMgwCmgJAJ+Wjau/HBE9AAAAAElFTkSuQmCC');
	background-repeat:no-repeat;
	font-weight: bold;
	font-size: 1.2em;
	margin: 0 0 10px 0;
	padding:4px 2px 4px 30px;
	border-bottom: 1px solid var(--lightblue);
	border-left: 0;
	border-right: 0;
	transition: all ease .8s
}

main article:hover {
	background-color: var(--lightblue-mid);
	box-shadow: 1px 1px 1px 1px var(--lightblue-transparent);
}


main article:hover h3 {
	color: var(--hover);
}


main article a {
	padding: 5px 8px;
	transition: all ease .8s;
	margin: 5px 0;
}

main article a:hover {
	border-left-color: var(--lightblue);
	background-color:  var(--lightblue-mid) !important;
	color: var(--hover);
}



footer {
	position: fixed;
	bottom: 0;
	left:0;
	width:100%;
	padding: 5px;
	text-align: center;
	border-top: 1px solid var(--lightblue);
	background-color: var(--lightblue-mid);
	color: var(--text);
}

footer a {
	padding: 8px;
}

@media all and (max-width: 576px)
{
	footer { display:none; }
	a { padding:5px 1px; }
}

@media all and (min-width: 960px) {
	section > section {
		justify-content: flex-start;
	}

	main article a {
		padding: 2px 8px;
		transition: all ease .8s;
		margin: 2px 0;
	}
}