/**
 * Theme Name: schuermann.design
 * Theme URI: https://schuermann.design
 * Description:
 * Version: 1.2
 * Author: Thomas Schürmann
 * Author URI: https://schuermann.design
 * Tags: Simple Theme, Lightweight
 * last edited: 2021.08.24
 */


/* https://9elements.com/blog/css-border-radius/ */
/* https://9elements.github.io/fancy-border-radius/full-control.html#10.10.10.10-90.90.90.90-. */



/* fonts */

@font-face {
	src: url("fonts/IBMPlexSansVar-Roman.woff2") format('woff2-variations');
	font-family:'plexroman';
	font-style: normal;
	font-weight: 1 999;
}

/* colors */

:root {
	--text: 					#000000;
	--bg: 						#eee;
	--main: 					#00cc00;
	--main100: 					#00cc00;
	--main090: 					rgba(0,204,0,0.9);
	--main080: 					rgba(0,204,0,0.8);
	--lgrey100: 				#999;
	--mgrey100: 				#666;
	--dgrey100: 				#333;
	--grey090: 					rgba(0,0,0,0.9);
	--grey080: 					rgba(0,0,0,0.8);
	--grey070: 					rgba(0,0,0,0.7);
	--white: 					rgba(255,255,255,1);
}



html {
	scroll-behavior: 			smooth;
}

body {
	font-family: 				'plexroman';
	font-size: 					1rem;
	line-height: 				1.8rem;
	font-variation-settings: 	'wght' 425, 'wdth' 80;
	letter-spacing: 			0.065rem;
	padding: 					0.7rem 0.7rem 0 1rem;
	margin: 					0;
	background-color: 			var(--bg);
	color: 						var(--text);
	font-variant-ligatures:     normal;
}

/* helpers */

* {
  outline: none;
}

.i--resp {
	width: 						100%;
	height: 					auto;
}

.f--light {
	font-variation-settings: 	'wght' 350, 'wdth' 80;
}

.d--sm-inline,
.d--xs-i-none,
.d--xs-b-none {
	display: 					none;
}


.text--hide {
    font: 							0/0 a;
    color: 							transparent;
    text-shadow: 					none;
    background-color: 				#99ff00;
    border: 						0;
}

.li--unstyled {
	list-style: 				none;
	margin:   					0;
	padding:  					0;
}

.groot {
	background-color: #ff9900;
}

.raccoon {
	background-color: #99ff00;
}

/* typo basics */



h1 {
	font-size: 					1.61rem;
	font-variation-settings: 	'wght' 600, 'wdth' 90;
	line-height: 				1.3;
}

.p--3 h1 {
	font-size: 					1.8rem;
}



h1 em {
	font-variation-settings: 	'wght' 400, 'wdth' 90;
}

h2 {
	font-size: 					1.5rem;
	font-variation-settings: 	'wght' 650, 'wdth' 80;
	color: 						var(--main100);
	line-height: 				0.3;
}

main h1 {
	font-variation-settings: 	'wght' 650, 'wdth' 80;
}

h3 {
	font-size: 					1.15rem;
	line-height: 				1.6;
	font-variation-settings: 	'wght' 800, 'wdth' 80;
	margin-bottom: 				0;
	margin-top: 				1.5rem;
}

.p--3 h3.ref__i__h {
	margin-top: 				4rem;
	color: 						var(--main);
	border-bottom: 				1px solid var(--lgrey100);
	margin-bottom: 				1.5rem;
}

h4 {
	font-size: 					inherit;
	font-variation-settings: 	'wght' 800, 'wdth' 80;
	margin-bottom: 				-0.5rem;
	line-height: 				1;
}

.nav--main h4 {
	padding-left: 				0.7rem;
}

p,
h1,
h2 {
		hyphens: 					auto;
}

p.cat__excerpt,
p.cat__link {
	font-size: 					1.2rem;
}

.p--right {
	text-align: 				right;	
}

.p--center {
	text-align: 				center;
}

a {
	color: 							var(--main100);
	text-underline-offset: 			0.15rem;
	-webkit-transition: 	 		color 0.2s ease-out;
	-moz-transition: 		 		color 0.2s ease-out;
	-o-transition: 			 		color 0.2s ease-out;
	-ms-transition: 				color 0.2s ease-out;
	transition: 					color .2s ease-in-out;
}

a:hover {
	color: 							var(--mgrey100);
	text-decoration: 				none;
}


a[target="_top"]::after {
	content: "\2009\2197";
	text-decoration: none;	
}

a[target="_self"]::after {
	content: "\2009\2192";
}

a[download]::after {
	  content: "\2193";
}

b,
strong {
	font-variation-settings: 	'wght' 550, 'wdth' 100;	
}

abbr,
u {
	text-underline-offset: 2px;
}

blockquote {
	font-variation-settings: 	'wght' 425, 'wdth' 80;
	color: 						var(--mgrey100);
	margin:  					0 4rem 0 0;
	padding: 					0;
	
}



img {
	display: 					block;
}

.img--resp {
	width: 						100%;
	height: 					auto;
}

figure.fig--text {
	padding: 					0 1rem;
}

figure.fig--image {
	padding: 					0;
	margin: 					6rem 0 4rem 0;
}

dl {
  display: 						flex;
  flex-flow: 					row wrap;
}

dt {
	flex-basis: 				20%;
}

dd {
	flex-basis: 				80%;
	margin: 					0 0 0.5rem 0;
}

dfn {
	font-variation-settings: 	'wght' 600, 'wdth' 90;
}

li {
	margin-bottom: 0.3rem;
}

ins {
	text-decoration: 			underline;
	text-underline-offset: 		3px;
	text-decoration-style: 		dotted;
	text-decoration-color: 		var(--main100);
}

ol {
    counter-reset: 				item;
}

ol > li {
    counter-increment: 			item;
}

ol ol > li {
    display: 					block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
}



q {
  quotes: 							"» " " «" "› " " ‹";
}
q > q {
  quotes: 							"› " " ‹";
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 					0.8rem;
}

sub { 
  top: 0.4em; 
}

sup > a {
	text-decoration: 			none;
	font-variation-settings: 	'wght' 800, 'wdth' 80;	
}

small {
	font-variation-settings: 	'wght' 450, 'wdth' 100;	
}

time::before {
	content: 					"\2941\00A0";
	color:                      var(--main100);
}

code {
	font-family: monospace;
    white-space: pre;
}

mark {
	background-color: rgba(0,171,133,0.3);
}

s {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-style: wavy;
	text-decoration-color: #009933;
}

.li--unstyled {
	list-style: 				none;
	margin: 0;
	padding: 0;
}








/* logo */

.head--page > h1 {
	font-size: 					1.8rem;
	margin-top: 				1.5rem;
	margin-bottom: 				3rem;
} 

.head--page > h1 > a {
	text-decoration: 			none;
	color: 						#000;
}

.head--page > h1 > a > span {
font-variation-settings: 	'wght' 400, 'wdth' 90;
}

.head--page > h1 > a:hover {
	color: 						var(--main);
}






/* nav */

.nav--main ul {
}

.nav--main ul li {
	font-size: 					1rem;
	line-height: 				1.4;
	padding: 					0;
	margin-bottom: 				0;
}

.nav--main a {
	display: 					inline-block;
	min-width: 					50%;
	padding: 					3px 30px 3px 0;
	color: 						var(--text);
	text-decoration: 			none;
}

.nav--main a:hover {
	color: 						var(--main100);
}

.nav--main a::before {
	content: 					"\005C \00A0";
	color: 						#eee;
}

.nav--main .active a::before,
.nav--main a:hover::before {
	color: 						var(--main100);
}

.active a {
	font-variation-settings: 	'wght' 600, 'wdth' 80;
	color: 						var(--main100);
}

.nav--main .nav--service a {
  	color: 						var(--lgray100);
}

.nav--main li.nav--service.first  {
  	margin-top: 				2rem;
}




/* nav */
/* @see https://codepen.io/dannievinther/pen/NvZjvz */

#nav--1 {
  position: 					absolute;
  right: 						0;
  top: 							2.2rem;
  height:  						50px;
  width:  						100%;
  pointer-events: 				none;
}
	
#nav--1 * {
  visibility: 					visible;
}

.nav--button {
  position: 					absolute;
  right: 						1.5rem;
  top: 							0.25rem;
  display: 						block;
  flex-direction: 				column;
  justify-content: 				center;
	
  z-index: 						100;
  -webkit-appearance: 			none;
  border: 						0;
  background: 					transparent;
  border-radius: 				0;
  height: 						40px;
  width: 						35px;
  cursor: 						pointer;
  pointer-events: 				auto;
  margin-left: 					25px;
  touch-action: 				manipulation;
  -webkit-tap-highlight-color:  rgba(0,0,0,0);
}
	
.icon-bar {
  display: 						block;
  width: 						35px;
  height: 						3px;
  background: 					#000;
  transition: 					.3s;
}
	
.icon-bar + .icon-bar {
  margin-top: 					7px;
}

#nav--1:focus-within .nav--button {
  pointer-events: 				none;
}
	
#nav--1:focus-within .icon-bar:nth-of-type(1) {
  transform: 					translate3d(0,10px,0) rotate(45deg);
}
	
#nav--1:focus-within .icon-bar:nth-of-type(2) {
  opacity: 						0;
}
	
#nav--1:focus-within .icon-bar:nth-of-type(3) {
  transform: 					translate3d(0,-10px,0) rotate(-45deg);
}

#nav--content {
	padding: 					20px;
	width: 						80%;
	max-width: 					200px;
	position: 					absolute;
	top: 						0;
	left: 						-0.5rem;
	height: 					400px;
	background: 				rgba(255,255,255,0.85);
	pointer-events: 			auto;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	transform: 					translateY(-500px);
	transition: 				transform .3s;
	will-change: 				transform;
	contain: 					paint;
	-webkit-backdrop-filter: 	blur(3px);
	backdrop-filter: 			blur(3px);
	z-index: 					1000;
	border: 					1px solid #fff;
}

#nav--1:focus-within #nav--content {
  transform: 					none;
}


/* layout experiment testing */


.main-content {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.col {
	padding: 1rem 1rem 1rem 0;
	/* border: 1px dotted rgba(0,0,0,0.25); */
}

.width-indicator {
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.5rem;
	background-color: white;
	padding: 1rem;
	box-shadow: 0 0 0 1rem rgba(0,0,0,1.3);
	width: max-content;
}

.columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.columns > * {
	flex-basis: calc(calc(690px - 100%) * 999);
	flex-grow: 1;
}

/* blog posts meta */

.time--year {
	color: 					var(--main080);
	transform: 				rotate(-90deg);
	transform-origin: 		bottom left;
	margin: 				3rem 0 0 1rem;
}

.time--year time::before {
	content: 				"";
}

.post a {
	color:  				var(--text);
	text-decoration: 		none;
}

.post a:hover {
	color:  				var(--main100);
	text-decoration: 		none;
}

.meta {
	margin: 				 0;
	padding: 				0;	
}

.meta a {
	line-height: 			1;
	text-decoration: 		none;
	vertical-align: 		middle;
}

.meta a::after {
	content: 				"\00A0|";
	font-weight: 			600;
}

.meta a:last-of-type:after {
	content: 				"";
}

p.excerpt {
	margin-top: 			0;
}

.excerpt a::after {
	content: 				"\2192";
	color: 					var(--main100);
}

.post p a:hover::after  {
	color: 					var(--main100);
}


/* references single web */

/* top */

.p--3 article {
	margin-top: 			3rem;
}

figure {
	padding: 				0;
	margin:  				0;
}

.ref__img {
	position: 				relative;
}

.ref__img > figcaption {
	color: 					var(--main);
	transform: 				rotate(-90deg);
	font-size: 				0.7rem;
	transform-origin: 		right top;
	position: 				absolute;
	right: 					0;
}

/* bottom */

.ref__i {
	margin-bottom: 			6rem;	
}

.ref__i__link img {
	-webkit-box-shadow: -3px 3px 5px -2px #ccc; 
	box-shadow: -3px 3px 5px -2px #ccc;
}

.ref__i__link span {
	display: 				none;
}

.ref__i__row {
	position: 				relative;
	display: 				flex;
	flex-direction: 		row;
	flex-wrap:  			wrap;
	justify-content:        flex-start;
	margin-bottom: 			2rem;
}

.ref__i h4 {
	font-variation-settings: 	'wght' 400, 'wdth' 80;
	color: 					var(--main);
	transform: 				rotate(-90deg);
	transform-origin: 		top left;
	margin-top: 			1rem;
	font-size: 				0.8rem;
	margin: 				2.5rem 0 0 0;
	width: 					2rem;
}

.ref__i .ref__i--desktop h4 {
	margin: 				3rem 0 0 0 ;
}

.ref__i__row img {
	margin-bottom: 			10px;
	margin-right: 			10px;
	height: 				auto;
}

.ref__i--mobile img {
	width: 					60px;
}

.ref__i--tablet img {
	width: 					130px;
}

.ref__i--desktop img {
	width: 					270px;
}

.ref__i--desktop a.odd img {
	margin-left: 			2rem;
}

/* serv */

.services {
	margin-bottom: 			2rem;
}

.services h3 {
	font-size: 				1rem;
	line-height:            1.8rem;
	margin-top: 			1rem;
}

.services h3::before {
	content: 				"/ ";
}

.services li {
	margin-bottom: 			0;
}

.services p > a {
	display: inline-block;
}

.services p > a::after {
	content: 				">";
}

/* footer */

.f--page > div {
	background-color: 		var(--white);
	padding: 				1rem 1rem 1rem 1rem;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

.breadcrumb  {
	
}

.breadcrumb a {
	color: 					var(--lgrey100);
	text-decoration: 		none;
}

.breadcrumb a::before {
	content: 				"\00A0 /";";
}

.breadcrumb strong a {
	color: 					var(--text);
	font-variation-settings: 	'wght' 900, 'wdth' 80;
}

.breadcrumb strong a::before {
	content: 				"";
}

.f--page h1 {
	padding-top: 			2rem;
	font-size: 				1.8rem;
	font-variation-settings: 	'wght' 800, 'wdth' 80;
}

/* copy */

.copy p {
	margin-top: 			4rem;
	font-size: 				10px;
}

.copy p,
.copy p > a {
	color: #999;
}


@media (max-width: 320px) {  

.p--3 h1 {
    font-size: 1.7rem;
	line-height: 2.3rem;
}
        
} /* ./ retina 375 */











@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

		html {
			font-size: 1rem;
		}
        
} /* ./ retina 375 */





/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

	html {
		font-size: 18px;
		line-height: 1.65rem;
	}
	
	body {
		padding: 2rem 2rem 0 2rem;
	}
	
	.d--sm {
		display: block;
	}
	
	.d--xs-i-none, 
	.d--sm-inline {
		display: inline;
	}
	
	.d--sm-i-none {
		display: none;
	}
	
	.d--xs-b-none {
		display: 					block;
	}
	
	.d--sm-b-none {
		display: 					none;
	}

	/* logo */
	
	.head--page > h1 {
		margin-top: 				0.6rem;
		font-size: 					1.7rem;
	} 
	
	#nav--content {
		width: 						60%;
		max-width: 					400px;
		height: 					1024px;
		padding-top: 				50px;
		background: 				rgba(255,255,255,0.85);
		transform: 					translateY(-1180px);
	}
	
	#nav--1:focus-within #nav--content {
 		transform: 					translateY(-50px);
	}
	
	a {
		text-underline-offset: 		0.25rem;
	}
	
	.h--page {
		margin-bottom: 				8rem;
	}
	
	
	/* layout */
	
	aside.col {
		max-width: 					18.75%;
		padding-top: 				23.5rem;
	}

	.nav--aside {
		display: block;
		position: -webkit-sticky; 
		position: sticky;
		top: 0;
		align-self: flex-start; 
		top: 4rem;
	}
	
	.nav--aside li {
		text-align: center;
	}
	
	.nav--aside a {
		display: inline-block;
		padding: 0 0.5rem;
		color: 						var(--lgrey100);
		text-decoration: 			none;
		font-size: 					0.9rem;
		-webkit-transition: 		all .3s ease-out;
		-moz-transition: 			all .3s ease-out;
		transition: 				all .3s ease-out;
	}

	.nav--aside a.active {
		-webkit-transform: 			scale(1.3);
        transform: 					scale(1.3);
		color: 						var(--main100);
	}
	
	/* ref */
	
	.p--3 main h1,
	.p--3 .cat__excerpt {
		width: 						80%;
	}
	
	.ref__i__row img {
		margin-bottom: 			20px;
		margin-right: 			20px;
	}

	.ref__i--mobile img {
		width: 					85px;
	}

	.ref__i--tablet img {
		width: 					190px;
	}

	.ref__i--desktop img {
		width: 					270px;
	}

	
} /* ./768 */







/* - - - - - Large devices (desktops, 992px and up) - - - - -  */
@media (min-width: 992px) {
	
	/* displays */
	
	.d--sm {
		display: 					none;
	}
	
	.d--md {
		display: 					block;
	}
	
	.d--sm-i-none {
		display: 					inline;
	}
	
	.d--sm-b-none {
		display: 					block;
	}
	
	.d--none-mdplus,
	.d--none-md {
		display: 					none;
	}
	
	.head--page h1 {
		position: 					-webkit-sticky;
		position: 					fixed;	
		z-index: 					1000;
		background: 				#eeeeee;
		background:                 linear-gradient(180deg, rgba(238,238,238,1) 74%, rgba(255,255,255,0) 100%, rgba(255,255,255,1) 100%);
		margin-top: 				-1.5rem;
		padding: 					2.1rem 0 3rem 0;
	}
	
	body {
		padding: 1.5rem 2rem 0 2rem;
	}

	
	main.col {
		max-width: 					100%;
	}
	
	main > header {
		margin-bottom: 				6rem;
	}
	
	.p--c main > header {
		margin-top: 				6rem;
	}
	
	.p--s main > header {
    	margin-top: 				10rem;
		margin-bottom: 				3rem;
	}
	
	.p--3 main h1 {
		font-size: 						2rem;
	}
	
	/* nav */
	
	#nav--content {
		border: none;
		z-index: 					1;
	}
	
    .nav--main {
		/* border: 1px dotted rgba(0,0,0,0.25); */
		padding-top: 1rem;
		max-width: 18.75%;
		z-index: 					1;
	}
	
	#nav--1 {
		position: relative;
		right: auto;
		top: auto;
		height: auto;
		width: auto;
		pointer-events: none;
		background-color: transparent;
		
	}

	#nav--content {
		width: auto;
		max-width: none;
		position: -webkit-sticky;
		position: sticky;
		height: auto;
		background-color: transparent;
		transform: none;
		backdrop-filter: none;
		padding: 0;
		left: 						0;
		top: 13.5rem;
		z-index: 					1;
	}
	
	#nav--1:focus-within #nav--content {
		transform: 					none;
	}

	
	/* p--3 ref */
	
	.ref__i__link img {
		-webkit-box-shadow: -4px 4px 5px -2px #ccc;
		box-shadow: -4px 4px 5px -2px #ccc;
	}
	
	.ref__i--mobile img {
		width: 					100px;
	}

	.ref__i--tablet img {
		width: 					220px;
	}

	.ref__i--desktop img {
		width: 					270px;
	}
	
	/* p--4 serv */
	
	.services {
		display: 				flex;
		flex-direction: 		row;
		flex-wrap:  			wrap;
		justify-content:        flex-start;
	}
	
	.col1st{
		width: 					30%;
	}

	.col2nd {
		width: 					70%;
	}
	
	/* p--5 ref detail */
	
	.p--5 article {
		max-width: 				70%;
	}

	
	/* footer */
	
	.f--page {
		margin-top: 				3rem;
		border-top-left-radius: 	25px;
		border-top-right-radius: 	25px;
		padding: 					0;
	}
	
	address {
    	display: -webkit-flex;
    	display: flex;
		
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;

    }

	address > div {
		-webkit-order: 0;
		-ms-flex-order: 0;
		order: 0;
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;

	}

/* copy */

	.copy p {
		margin-top: 			6rem;
		font-size: 				11px;
		margin-left: 			21%;
	}

	
	
	
} /* ./992 */





/* - - - - - Large devices (desktops, 992px and up) - - - - -  */
@media (min-width: 1050px) {
	
	/* nav */
	
	.d--md {
		display: 					none;
	}
	
	.d--lg {
		display: 					block;
	}
	

	
	.head--page h1 {
		position: 					-webkit-sticky;
		position: 					fixed;	
		top: 						2.3rem;
	}
	
	
	
	/* layout */
	
	
	/* p--4 serv */
	
	.services {
		display: 				flex;
		flex-direction: 		row;
		flex-wrap:  			wrap;
		justify-content:        flex-start;
	}
	
	.col1st{
		width: 					30%;
	}

	.col2nd {
		width: 					60%;
	}

	
	
	

} /* ./1050 */	









/* - - - - - Large devices (desktops, 992px and up) - - - - -  */
@media (min-width: 1200px) {
	
	body {
		font-size: 1.2rem;
		line-height: 1.8rem;
	}
	
	.head--page {
		height: 					10px;	
	}
	
	.head--page,
	.container  {
		width: 1120px; 	/* 16 x 70 */
		margin: 0 auto;
	}

	.head--page { 
		margin-bottom: 				10rem;
	}
	
	aside.col {
		margin-left: 				6.25%;
		max-width: 					6.25%;
		padding-top: 				23.5rem;
	}
	
	.p--3 main {
		margin-top:  				-8rem;
	}
	
	.p--3 article {
		margin-top: 				1rem;
	}
	
	.p--s main > header {
    	margin-top: 				-1rem;
		margin-bottom: 				6rem;
	}

	main h2 {
		margin-top:  				1.4rem;
		margin-bottom: 				0.8rem;
		position: 					relative;
	}
	

	main h1 {
		font-size: 					4rem;
		line-height: 				4.4rem;
		max-width: 					68.75%;
		margin-top: 				0.75rem;
		hyphens: 					none;
	}
	
	.p--3 main h1 {
		font-size: 					2.3rem;
		line-height: 				2.7rem;
		max-width: 					48.25%;
		position: relative;
	}

	
	.cat__excerpt,
	.sref__excerpt {
		max-width: 					70%;
	}
	

	main > header {
		margin-top: 				-4rem;
		margin-bottom: 				8rem;
	}
	
	main > header > p  {
		padding-left: 				18%;
		font-variation-settings: 	'wght' 525, 'wdth' 80;
	}
	
	.ref__i--desktop a.odd img {
		margin-left: 0;
	}

	
	.p--3 h3.ref__i__h {
		max-width: 					75%;
	}
	

	
	
} /* ./1200 */

/* - - - - - Large devices (desktops, 992px and up) - - - - -  */
@media (min-width: 1400px) {
	
	.head--page,
	.container  {
		width: 1360px; 	/* 16 x 70 */
	}
	
	.ref__img {
		width: 						900px;
		margin-left: 				281px;
	}
	
	.content--s {
		max-width: 					80%;
	}
	
} /* ./1400 */



/* - - - - - Large devices (desktops, 992px and up) - - - - -  */
@media (min-width: 1600px) {
	
	
	
	.head--page,
	.container  {
		width: 1520px; 	/* 16 x 70 */
	}
	
	.f--page {
		padding-top: 1rem;
		margin: 6rem auto 0 auto;
		border-top-left-radius: 	50px;
		border-top-right-radius: 	50px;
	}
	
	.f--page > div {
		width: 						1520px;
		margin: 					0 auto;
	}
	
	.p--3 article > p,
	.serv__text p,
	.serv__text li {
		font-size: 					85%; 
		line-height:  				1.8rem;
	}
	.p--3 article > p {
		 width: 					65%; 
	}
	
	.p--3 main {
		padding-bottom: 			5rem;
	}
	
	/* references */
	
	.ref__i__link a {
		-webkit-box-shadow: -4px 4px 5px -2px #ccc;
		box-shadow: -4px 4px 5px -2px #ccc;
	}
		
	.ref__i a span  {
		position: absolute;
		left: 0;
		bottom: 0;
		
		pointer-events: none;
		opacity: 0;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
	}
	
	.a--footer,
	.h--footer {
		margin-left:  				21%;
	}
	

	
	
} /* ./1400 */