/* Fonts are linked from base/header.php - an @import here would force the
   browser to fetch this file before it could even discover them. */

/*
font-family: 'Mukta Mahee', sans-serif;
font-family: 'Merriweather', serif;
*/

h1,h2,h3,h4,h5,h6,p,ul,ol{
	font-family: 'Mukta Mahee', sans-serif;
}

h1{
	font-size: 36px;
	margin: 12px auto 12px;
}

h2{
	font-size: 32px;
	margin: 4px auto 12px;
}

h3{
	font-size: 28px;
	margin: 4px auto 12px;
}

h4{
	font-size: 24px;
	margin: 24px auto 4px;
}

h5{
	font-size: 20px;
	margin: 8px auto 4px;
}

h6{
	font-size: 18px;
	margin: 8px auto 4px;
}

p,ul,ol{
	font-size: 16px;
}

body{
	margin: 0 auto;
	overflow-x: hidden;
}

a:link,a:visited{
	color: #0f6634;
	text-decoration: underline;
}

a:hover,a:active{
	color: #0F993C;
	text-decoration: none;
}

.img-responsive, .image-responsive{
	max-width: 100%;
}

.left, .side-left{
	float: left;
}

.right, .side-right{
	float: right;
}

.container{
	margin: 0 auto;
	width: 1260px;
	display: block;
	clear: both;
	overflow-y: auto;
}

#work{
	margin-top: 16px;
}

.expanded-work{
	margin: 0 auto;
	width: 1512px;
	display: block;
	clear: both;
	overflow-y: auto;
}

.work-column{
	max-width: 48%;
	padding: 16px 1%;
	display: inline-block;
}

.header, .project{
	width: auto;
	padding: 1% 0;
}

.header h1, .header h3{
	margin: 0;
}

.headshot{
	margin-top: 20px;
	width: 25%;
	float: left;
	padding: 4px 1%;
	display: inline-block;
}

.summary{
	width: 70%;
	float: right;
	padding: 4px 1%;
	display: inline-block;
}

.summary h2{
	margin: 4px auto 0 auto;
	font-size: 3em;
}

.home_header_link:link,.home_header_link:visited,.home_header_link:active{
	color: black;
	text-decoration: none;
}

.home_header_link:hover{
	color: black;
	text-decoration: underline;
}

.item{
	vertical-align: top;
	width: 31%;
	padding: 1%;
	display: inline-block;
	overflow-y: auto;
}

.item h1{
	margin: 12px auto 0px auto;
}

.item p{
	margin: 4px auto 12px auto;
}

.item:hover{
	cursor: pointer;
}

.item img{
	max-width: 100%;
	padding: 0;
}

.item a:link, .item a:visited, .item a:active{
	color: #000000;
	text-decoration: none;
}

.item-image-black-and-white{
    -webkit- filter: grayscale(100%);  /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

iframe>*>body::-webkit-scrollbar {
    width: 1em;
}
 
iframe>*>body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
iframe>*>body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}

.iframe-work-website{
	width: 101%;
	padding: 0;
	margin: 0;
	border: 0;
	height: 1000px;
}

.side-by-side{
	margin: 0 auto;
	display: block;
	clear: both;
	overflow-y: auto;
}

.side-by-side p{
	display: block;
	clear: both;
	margin: 12px auto;
}

.side-left, .side-right{
	width: 45%;
	padding: 4px;
	display: inline-block;
}

.project-title{
	margin: 64px auto;
	width: 100%;
	clear: both;
	text-align: center;
}

.project-title h2{
	margin: 0 auto 4px auto;
}

.project-title h4{
	margin: 0;
}

.project-details-container{
	width: 100%;
	clear: both;
	overflow-y: auto;
}

.breathing-room{
	margin: 64px auto;
}

.heavy-sigh{
	margin: 128px auto;
}

.deep-breath{
	margin: 256px auto;
}

.center-image{
	margin: 0 auto;
	display: block;
}

.project-description{
	width: 58%;
	float: left;
}

.project-details{
	width: 38%;
	float: right;
}

.project-images{
	display: block;
	margin: 0 auto;
	padding: 16px 0;
}

.built-with-icon{
	padding: 4px 0;
	display: block;
	max-width: 250px;
	clear: both;
}

.builtWithSimple > .built-with-icon{
	max-width: 50px;
	display: inline-block;
	padding: 4px 8px;
}

.builtWithSimple > p{
	color: #212121;
	display: inline-block;
    font-weight: bold;
    font-size: 52px;
    margin: 0;
    vertical-align: top;
}

/* 
	PRETTY LITTLE DETAILS
	Just a bunch of classes of little elements to add style or visual flair to the site but don't hold any core functionality or styling.
*/

.tri-images{
	display: inline-block;
	width: 33.33%;
	float: left;
}

.tri-image-margin-middle{
	margin-top: 40%;
}

.tri-image-margin-end{
	margin-top: 80%;
}

/* 2020 Project Image Sliders Styles */
.project_gallery {
	padding: 12px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	-ms-overflow-style: none;
}

.project_gallery:hover{
	cursor: grab;
}

.project_gallery::-webkit-scrollbar {
  display: none;
}

.project_gallery img, .project_gallery video {
	padding: 12px;
	display: inline-block;
	vertical-align: top;
	max-height: 800px;
}

.project_gallery img, .project_gallery video {
	padding: 12px;
	display: inline-block;
	vertical-align: top;
	max-height: 800px;
}

#imageSlider{
	margin: 8px auto;
    height: 12px;
    width: 100%;
    clear: both;
}

#sliderFill{
	width: 5%;
	height: 4px;
	background-color: #000000;
	-webkit-transition: height 0.20s ease-in;
    -moz-transition: height 0.20s ease-in;
    -o-transition: height 0.20s ease-in;
    transition: height 0.20s ease-in;
}

#imageSlider:hover > #sliderFill{
	height: 16px;
}

/* Background Color Matches */
.aligned-black{
	background-color: #373637;
}

#footer{
	text-align: center;
}

.back-to-work{
	font-size: 1.75em;
	font-weight: bold;
}

/* HELPER CLASSES
	A series of classes to apply commonly needed special little style tweaks on specific elements.
*/
.clear{
	display: block;
	clear: both;
}

.ptn{
	padding-top: 0;
}

.pts{
	padding-top: 4px;
}

.ptm{
	padding-top: 8px;
}

.ptl{
	padding-top: 16px;
}

.pbn{
	padding-bottom: 0;
}

.pbs{
	padding-bottom: 4px;
}

.pbm{
	padding-bottom: 8px;
}

.pbl{
	padding-bottom: 16px;
}

.pvn{
	padding-top: 0;
	padding-bottom: 0;
}

.pvs{
	padding-top: 4px;
	padding-bottom: 4px;
}

.pvm{
	padding-top: 8px;
	padding-bottom: 8px;
}

.pvl{
	padding-top: 16px;
	padding-bottom: 16px;
}

.mtn{
	margin-top: 0;
}

.mts{
	margin-top: 4px;
}

.mtm{
	margin-top: 8px;
}

.mtl{
	margin-top: 16px;
}

.mbn{
	margin-bottom: 0;
}

.mbs{
	margin-bottom: 4px;
}

.mbm{
	margin-bottom: 8px;
}

.mbl{
	margin-bottom: 16px;
}

.mvn{
	margin-top: 0;
	margin-bottom: 0;
}

.mvs{
	margin-top: 4px;
	margin-bottom: 4px;
}

.mvm{
	margin-top: 8px;
	margin-bottom: 8px;
}

.mvl{
	margin-top: 16px;
	margin-bottom: 16px;
}

/*
	THANKS: https://coolestguidesontheplanet.com/videodrome/youtube/;
*/
.youtube-video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.youtube-video-container iframe, .youtube-video-container object, .youtube-video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*
Vibrant creates a number of canvases to pull image data from. They don't have to be any actual size though. Just in the page.
This allows them to be there but inconsequential to the overall page length or formatting.
*/
.vibrant-canvas{
	height: 0;
	width: 0;
}

.cap-width{
	max-width: 666px;
}

/* Media Queries for mobile formatting */
@media screen and (max-width: 1562px){
	.breathing-room{
		margin: 32px auto;
	}

	.heavy-sigh{
		margin: 64px auto;
	}

	.deep-breath{
		margin: 125px auto;
	}
}

@media screen and (min-width: 1261px) and (max-width: 1562px){
	.expanded-work{
		margin-left: auto;
		margin-right: auto; 
		max-width: 96%;
	}
}

@media (max-width: 1260px) {
	h3 {
	    font-size: 24px;
	    margin: 4px auto 12px;
	}

	.container, .expanded-work, .work-column{
		max-width: 96%;
	}

	.project-description, .project-details{
		margin: 0 auto;
		width: 96%;
	}

	.project-description, .project-details, .left, .right{
		display: block;
		clear: both;
	}
	
	.header, .project {
		margin: 0 auto;
		padding: 1% 4%;
	}
	
	.container p{
		margin: 2% auto 1% auto;
		width: 96%;
	}

	.tri-images{
		margin: 0 auto;
		display: block;
		width: 96%;
		float: none;
		clear: both;
	}

	.tri-images img{
		max-width: 100%;
	}

	.tri-image-margin-middle, .tri-image-margin-end{
		margin-top: 48px;
	}
	
	.headshot {
		margin: 0 auto !important;
		width: 98%;
		display: block;
		clear: both;
	}
	
	.summary {
		width: 96%;
		padding: 4px 2%;
		display: block;
		clear: both;
	}
	
	.summary h2{
		margin: 2% auto 1% auto;
	}
	
	.summary p{
		margin: 2% auto 1% auto;
	}
	
	.item {
		width: 96%;
		padding: 2% 2% 4% 2%;
		display: block;
		overflow-y: auto;
		clear: both;
		border-bottom: 1px solid #e2e2e2;
		margin-bottom: 6%;
	}

	.item h1{
		font-size: 2.15em;
		margin: 0 auto;
	}
	
	.item p{
		margin: 0;
	}

	.side-left, .side-right{
		display: block;
		margin: 4px auto;
		clear: both;
		width: 98%;
	}
	
	video{
		margin: 0 auto;
		width: 98% !important;
		height: 100% !important;
	}
}