.pixNav {
	display: -webkit-box; -ms-flex: 1; display: -ms-flexbox; display: flexbox; display: box; display: -ms-flex; display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	-ms-justify-content: space-between;
	justify-content: space-between;
}
.pixNav.list .items {
	grid-column-gap: 2%;
}
.pixNav.list .item {
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
	margin-bottom: 12px;
}
.pixNav.list .item a {
	text-decoration: none;
}
.pixNav.list .item .imagecontainer img {
	max-width: 100%;
}
.pixNav.list .item .text {
	padding: 20px;
	color: #525252;
	box-sizing: border-box;
}

@media all and (min-width: 1100px) {
	.pixNav.list .items {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media all and (min-width: 600px) {
	.pixNav.list .item .text {width: 60%;}
	.pixNav.list .item .imagecontainer {width: 40%;}
}
/*-------------------------------*/
						/*cards*/
/*-------------------------------*/

.pixNav.cards .item {
	display: inline-block;
	vertical-align: top;
	transition: 0.2s;
	width: 32%;
	margin-bottom: 20px;
	position: relative;
	margin: 0;
	transform: rotate(45deg) scale(.7, .7);
}
.pixNav.cards .item .link {
	width: 100%;
	transition: all 400ms;
	border-radius: 15px;
	vertical-align: middle;
}
.pixNav.cards .item .imagecontainer {
	transform: rotate(0deg);
	transition: all 1s 200ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
}
.pixNav.cards .item:hover .imagecontainer {
	transform: rotate(450deg);
	transition: all 1s cubic-bezier(0.55, 0.09, 0.68, 0.53);
}

.pixNav.cards .item:hover .link .image {
	
}
.pixNav.cards .item img {
	max-width: 100%;
	margin: auto;
}
.pixNav.cards .item .link img {
	border-radius: 15px;
}


.pixNav.cards .text {
	text-align: center;
	position: absolute;
	border-radius: 15px;
	top: 50%;
	left: 50%;
	transition: all 0;
	transform: translate(-50%, -50%) rotate(-45deg);
}
.pixNav.cards .item:hover .text {}
.pixNav.cards .text h1 {
	margin: 0;
	font-size: 54px;
	transition: all 200ms;
	border: none;
	color: #fff;
}
.pixNav.cards .text p {margin-bottom: 0;}
.pixNav.cards .item .text .more {
	transform: translate(-50%, -50%) scale(1.5, 1.5);
	border: none;
	background: none;
	box-shadow: none;
	color: #fff;
	font-size: 24px;
	opacity: 0;
	transition-delay: 100ms;
	transition: all 300ms;
}
.pixNav.cards .item:hover .text .more {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1, 1);
}


.pixNav.cards .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: all 100ms;
}
.pixNav.cards .item:hover .icon {
	opacity: 0;
}

@media all and (max-width: 900px) {
	.pixNav.cards .container {justify-content: center; transform: translateY(10%);}
	.pixNav.cards .item {width: 49%;}
	.pixNav.cards .item:last-of-type {order: 2}
	.pixNav.cards .item:nth-of-type(2) {order: 3; transform: rotate(45deg) scale(.7, .7) translate(-50%, -50%)}
}
@media all and (max-width: 600px) {
	.pixNav.cards .text h1 {font-size: 26px;}
}


/*-------------------------------*/
						/*free*/
/*-------------------------------*/

.pixNav.free { text-align: center; }
.pixNav.free .header { background-color: #f1dbba; }
.pixNav.free .header h1 { text-align: left; }

.pixNav.free .item {
	display: inline-block;
	vertical-align: middle;
	transition: 0.2s;
	width: 15%;
	margin-right: 2%;
}
.pixNav.free .item:last-of-type { margin-right: 0; }
.pixNav.free .item:hover {
	-webkit-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}

.pixNav.free .item a,
.pixNav.free .item img {
	max-width: 100%;
}

.pixNav.free .text { display: none; text-align: left; }
.pixNav.free .text h1 {
	text-transform: none;
	font-size: 100%;
	font-weight: normal;
}


.pixNav.free .icon {
	content: '';
	display: block;
	position: absolute;
	width: 74px;
	height: 74px;
	border-radius: 37px;
	top: -21px;
	left: 11px;
	background-color: #fff;
	transition: all 50ms;
}
.pixNav.free .icon img {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 64px;
	height: 64px;
	border-radius: 32px;
	background-color: #fff;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5) inset;
	transition: all 250ms;
}

.pixNav.free .item:hover .icon img {
	box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.25) inset;
	/*-ms-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);*/
}

.pixNav.free .item:hover .icon {
	box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5) inset;
}

/*logos*/

.pixNav.logos {
	justify-content: flex-end;
}
.pixNav.logos .h1s {
	font-size: 14px;
	color: #3b3b3b;
}
.pixNav.logos .header {
	width: 25%;
}
.pixNav.logos .items {
	width: 75%;
	text-align: right;
}