html, body {
	margin: 0;
	padding: 0;
	font-size: 16pt;
	color: #ffffff;
	font-family: arial;
	background-color: #000000;
	letter-spacing: 2px;
	line-height: 40px;
	height: 100%; 
	overflow: hidden;
}


.container_for_all_content {
	margin: auto;
	padding: 0px;
}

.slice-main-container {
	width: 100%;
}

div.slice-header {
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1.0)), to(rgba(0, 0, 0, 0.5))), url("../site-images/bg-02-unsplash-2000px-low.jpg");
	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)), url("../site-images/bg-02-unsplash-2000px-low.jpg");
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)), url("../site-images/bg-02-unsplash-2000px-low.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	height: 775px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	justify-content: center;
}

div.slice-header > .slice-content-logo {
	background-image: url("../site-images/MTL-Creatives-Group-Splash-Logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 650px;
    height: 569px;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
}

.slice-content-top {
	background-image:url("../site-images/slice-graphic-01-left.svg");
	background-repeat: no-repeat;
	background-position: top left;
	min-height: 50px;
}

.slice-content {
	margin: auto;
	width: 60%
}

.section-header-svg {
	background-repeat: no-repeat;
	background-position: top left;
	background-size:contain;
	min-height: 45px;
	width: 100% !important;
	margin: 50px 0;
}

.slice-content-bottom {
	background-image:url("../site-images/slice-graphic-01-right.svg");
	background-repeat: no-repeat;
	background-position: bottom right;
	min-height: 50px;
}

.slice-content-project {
	margin-top: 80px;
	margin-bottom: 80px;
}

h1 {
	font-family: 'Public Sans', sans-serif;
	font-weight: 800;
	padding: 20px 0;
	font-size: 1.5em;
}

h2 {
	font-family: 'Public Sans', sans-serif;
	font-size: 1.2em;
	padding: 20px 0;
}

h3 {
	font-family: 'Public Sans', sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 0.9em;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-left: 20px solid #fdc703;
}

p.left-line {
	padding-left: 40px;
	border-left: 5px solid white;
}

p.right-line {
	padding-right: 20px;
	border-right: 5px solid black;
}

p.left-line-footer {
	padding-left: 30px;
	border-left: 15px solid white;
	line-height: 1.5em;
	margin-top: 50px;
	margin-bottom: 50px;
}

p.coming-soon {
	font-family: 'PT Serif', serif;
	font-weight: 700;
	font-style: italic;
	font-size: 5em;
	line-height: 80px;
}

p.mtl-shape-01 {
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
	font-family: 'PT Serif', serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 20px;
	font-size: 12pt;
	letter-spacing: 2px;
}

hr {
	border: 1px solid grey;
	margin: auto;
	width: 50%;
	margin-top: 30px;
	margin-bottom: 30px;
}

.button {
	background-color: #222222;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 4px 2px;
	cursor: pointer;
}

img.headshot {
	width: 250px;
	float: right;
	margin: 0 0 40px 40px;
}

.footer-col {
	/** padding-top: 50px; **/
	/**padding-bottom:50px; **/
}

   	a:link      {color: #ffffff; text-decoration: underline;}
	a:visited   {color: #ffffff; text-decoration: none;}
	a:active    {color: #ffffff; text-decoration: none;}
	a:hover     {color: #000000; text-decoration: none; background-color: #ffffff;}

a.button-link { text-decoration: none; font-weight: bold; text-transform: uppercase; }

/** Remove anchor tag CSS effects for Site by PFP animation **/
a#pfp-animation:hover { background-color: black; } 


	/*==================================================
	=            Bootstrap 3 Media Queries             =
	==================================================*/

	/*==========  Non-Mobile First Method  ==========*/


 /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
		
		html, body {
			font-size: 18pt;
			letter-spacing: 3px;
			line-height: 50px;
		}

		.slice-content {
			width: 80%
		}

		.slice-content-logo {
			width: 80%;
		}

		p.coming-soon {
			font-size: 90px;
			line-height: 70px;
		}

		img.headshot {
			width: 300px;
			margin: 0 0 40px 40px;
		}

		p.left-line-footer {
			margin-top: 70px;
			margin-bottom: 70px;
		}

		div.slice-header > .slice-content-logo {
			width: 600px;
			height: 525px;
		}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    	div.slice-header > .slice-content-logo {
			width: 400px;
			height: 350px;
		}

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
		
		html, body {
			font-size: 15pt;
			letter-spacing: 3px;
			line-height: 50px;
		}

		.slice-content {
			width: 90%
		}

		.slice-content-logo {
			width: 90%;
		}
		
		.section-header-svg {
			min-height: 40px;
			width: 100% !important;
			margin: 30px 0;
		}

		h3 {
			padding-left: 30px;
			border-left: 40px solid #fdc703;
		}

		p.coming-soon {
			font-size: 90px;
			line-height: 70px;
		}

		.button {
			font-size: 20px;
		}

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

		p.left-line-footer {
			margin-top: 70px;
			margin-bottom: 70px;
		}

		img.headshot {
			width: 300px;
			float: none;
			margin: 0 0 40px 0;
			clear: both;
		}

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		
		html, body {
			font-size: 14pt;
			letter-spacing: 3px;
			line-height: 35px;
		}
		
		div.slice-header {
			/*height: 400px;*/
		}
		
		div.slice-header > .slice-content-logo {
			width: 300px;
			height: 263px;
			-ms-flex-item-align: center;
			-ms-grid-row-align: center;
			align-self: center;
		}
		
		.slice-content {
			width: 90%
		}

		.slice-content-logo {
			width: 90%;
		}
		
		h3 {
			padding-left: 20px;
			border-left: 30px solid #fdc703;
		}

		p.coming-soon {
			font-size: 60px;
			line-height: 45px;
		}

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {


    }