/* * *
 * stule.css
 *
 * @author	Michael mkl-prod
 * * */



/* #Reset & Basics
----------------------------------------------------------------------------- */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


/* Body
----------------------------------------------------------------------------- */
	body {
		font-size: 19px; line-height:1em; font-family: 'Gotham-Light'; color: #2F3036;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
		background: #fff;
 	}


/* Basic
----------------------------------------------------------------------------- */
	@font-face {
	    font-family: 'Gotham-Light'; font-weight: normal; font-style: normal;
	    src: url('../../../assets/fonts/gotham/Gotham-Light.eot');
	    src: url('../../../assets/fonts/gotham/Gotham-Light.eot?iefix') format('eot'),
	         url('../../../assets/fonts/gotham/Gotham-Light.woff') format('woff'),
	         url('../../../assets/fonts/gotham/Gotham-Light.ttf') format('truetype'),
	         url('../../../assets/fonts/gotham/Gotham-Light.svg#webfontfCUTK5WC') format('svg');
	}

	h1, h2, h3 	{ line-height:normal; font-weight: normal; font-weight: 900; word-wrap: break-word; }
	h1 		{ font-size: 2.1rem; line-height: 2rem; }
	h2 		{ font-size: 1.5rem; }
	h3 		{ font-size: 1.2rem; margin-bottom: .4rem; text-transform: uppercase; }

	p { margin: 0 0 1.1em 0; }

	em 		{ }
	strong 	{ font-weight: normal; color: #606060; }
	s 		{ color: #606060; }
	small 	{ font-size: .8em; }

	a 		{ color: #606060; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
	a:hover	{ color: #9e9e9e; }



/* Sections
----------------------------------------------------------------------------- */

	.container			{ width: 85%; margin: 0 auto; }

	/*----------------------------------------------------------------------- */
	section			{ clear: both; display: block; width: 100%; margin: 0 0 40px; font-size: 2em; }

	/*dash design*/
	header:before,
	.content:before { content: '\0020'; display: block; height: 3px; width: 2rem; margin: 0 0 3rem; background: rgba(58,71,80,.2);	}


	/* HEADER
	------------------------------------------------------------------------- */
	header			{ animation-delay: 0.1s; margin: 3rem 0 2rem; }
	header:before 	{ margin-bottom: 2rem; }
	header			h1		{ line-height: 2.8rem; margin-bottom:0; }
	header			h2		{ margin: 0 0 .7rem; font-weight: 900;  font-style: normal; color: rgba(58,71,80,.7); }


	/* PORTFOLIO
	------------------------------------------------------------------------- */
	#loading	{ display: block; margin: 50px auto 50px; padding: 30px 0; border-top: 3px solid #606060; border-bottom: 3px solid #606060; font-size: 1.3em; color: #606060; text-transform: uppercase; text-align: center; }
	#loading	img	{ display: block; margin: 10px auto 0; }


	/*----------------------------------------------------------------------- */

	.grid { margin-bottom: 4rem; }


		/* Hover : overflow
		--------------------------------------------------------------------- */
		.grid-item {
			position: relative;
			float: left; width: 150px; height: 350px; overflow: hidden; margin-bottom: 40px;
			position: relative; float: left; margin: 0 -15px 1rem; padding: 15px;
			-webkit-backface-visibility: hidden;
			-webkit-transform-style: preserve-3d;
		}

		.grid-item:after {
			content: ""; position: absolute; left: 0; top: 0; z-index: -1; height: 100%; width: 100%;
			background: rgba(143, 172, 192, 0.1);
			opacity: 0;
			-webkit-transform: scale(0.9);
			-moz-transform: scale(0.9);
			-ms-transform: scale(0.9);
			-o-transform: scale(0.9);
			transform: scale(0.9);
			transition: 200ms;
		}

		.grid-item:hover:after {
			opacity: 1;
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-ms-transform: scale(1);
			-o-transform: scale(1);
			transform: scale(1);
		}

		.grid-item a:before {
			opacity: 0;
			content: attr(data-title);
 			position: absolute; top: 45%; left: 0; z-index: 66;
			display: block; width: 100%;
			font-size: 1.2rem; font-weight: 400; text-align: center; color: #2F3036;
		}

		.grid-item 	a { display: block; max-width: 100%; height: 350px; overflow: hidden; box-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.35); }
		.grid-item 	img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: 50% 0; }

		.grid-sizer,
		.grid-item { width: 150px; }
			.grid-item--width2 { width: 340px; }
			.grid-item--width3 { width: 530px; }

			.grid-item--height2 { height: 520px; }


			/* Hover : overflow
			----------------------------------------------------------------- */

			.grid-item:hover:after	,
			.grid-item:hover	a:after,
			.grid-item:hover	ul,
			.grid-item:hover	a,
			.grid-item:hover	a:before
			{ opacity: 1; }

			.grid-item:after,
			.grid-item	a:after,
			.grid-item	ul,
			.grid-item	a:before,
			.grid-item:hover a,
			.grid-item:hover a:before,
			.grid-item:hover img
			{
				-moz-transition: all .3s ease-in-out;
				-webkit-transition: all .3s ease-in-out;
				-o-transition: all .3s ease-in-out;
				transition: all .3s ease-in-out;
			}


				/* Image desaturate
				------------------------------------------------------------- */
				.grid-item img {
					filter: none;
					-webkit-filter: grayscale(60%);
					-moz-filter:    grayscale(60%);
					-ms-filter:     grayscale(60%);
					-o-filter:      grayscale(60%);
				}

				.grid-item:hover img {
					filter: none;
					-webkit-filter: grayscale(0%);
					-moz-filter:    grayscale(0%);
					-ms-filter:     grayscale(0%);
					-o-filter:      grayscale(0%);
					opacity: .7;
				}


				/* Dots
				------------------------------------------------------------- */
				.grid-item	ul	{
					opacity: 0;
					position: absolute; bottom: 25px; right: 35px; z-index: 55;
					display: block; width: 100%; min-height: 10px; margin: 0;
					text-align: right; list-style: none;  padding: 0;
				}
				.grid-item	ul	li	{
					display: inline-block; width: auto; background: none;
					margin: 0 10px 0 0 ; line-height: normal; box-shadow: none;
				}
				.grid-item	ul	li	a	{
					display: block; height: 10px; width: 10px;
					-moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;
					background: #2F3036; font-size: 1px; color:#2F3036;  overflow: hidden;
					box-shadow: none;
				}
				.grid-item	ul	li	a:after,
				.grid-item	ul	li	a:before	{ content :none; }



	/* Footer
	------------------------------------------------------------------------- */
	#footer		{ display: block; clear: both; width: 100%; background: #222; text-align: center;   }
	#footer		p	 { margin: 0; padding: 15px; color: #EDF2FA; font-size: .6rem; text-transform: uppercase; }