/* CSS Styles Created by MJ Designs (mjakoberdesigns@gmail.com) Copyright(c) MJ Designs 2017, All Rights Reserved do not use without WRITTEN permission */

/*	Table of Contents  ========================================================================= */ /*
	1.0 - Fonts



*/


/*  1.0 - Fonts  =============================================================================== */
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700');
@import url('https://fonts.googleapis.com/css?family=BenchNine:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');

@font-face {
	font-family: 'Mono Social Icons Font';
	src: url('../fonts/MonoSocialIconsFont-1.10.eot');
	src: url('../fonts/MonoSocialIconsFont-1.10.eot?#iefix')

format('embedded-opentype'),
	url('../fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
	url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
	url('../fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont')

format('svg');
	src: url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
	font-weight: normal;

	font-style: normal; 
}


/*	1.1 - Font Stylings
========================================================================= */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout are based on 10px sizing. So basically 1.5rem = 15px :) */
html { font-size: 62.5%; }

body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400; 
}

h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}

h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }

h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }

h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }

h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }

h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

a, h1, h2, h3, h4, h5, h6, input, label, li, placeholder, textarea, ul, {
	-webkit-text-rendering: optimizeLegibility;
			text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
			font-smoothing: antialiased; 
}

a, h1, h2, h3, h4, h5, h6, li, ul { font-family: 'Fira Sans', sans-serif; }

p, placeholder, .quote, .statement { font-family: 'Lora', serif; }

a { text-decoration: none; }

h6 { margin: 0; }


/*	2.0 - Grid System  ========================================================================= */
.container { max-width: 1280px; width: 100%; }

.one      				{ width: 4.66666666667%; }
.two                    { width: 13.3333333333%; }
.three                  { width: 22%;            }
.four                   { width: 30.6666666667%; }
.five                   { width: 39.3333333333%; }
.six                    { width: 48%;            }
.seven                  { width: 56.6666666667%; }
.eight                  { width: 65.3333333333%; }
.nine                   { width: 74.0%;          }
.ten                    { width: 82.6666666667%; }
.eleven                 { width: 91.3333333333%; }
.twelve                 { width: 100%; 
}


/*  3.0 - Globals  ============================================================================= */
*, html, body { 
	-webkit-box-sizing: border-box; 
	   -moz-box-sizing: border-box; 
	   		box-sizing: border-box; 
}

.clear { clear: both; }

/*  3.2 - Positioning  ========================================================================= */
.align-center, .flash-container { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.center { margin: 0 auto; }
.left { float: left; }
.right { float: right; }
.mobile-right {float: right;}


/*	3.3 - Transitions  ========================================================================= */
.ease {
	-webkit-transition-duration: 500ms;
			transition-duration: 500ms;
	-webkit-transition-property: all;
			transition-timing-function: ease; 
}
	.ease:hover {
		-webkit-transition-duration: 600ms;
				transition-duration: 600ms;
		-webkit-transition-property: all;
				transition-timing-function: ease; 
	}

.grayscale {
	-webkit-transition: all 500ms ease;
			transition: all 500ms ease; 
	}
	.grayscale:hover {-webkit-filter: grayscale(100%); }


/* 3.0 - Header / Navigation  ================================================================== */
header { 
	width: 100%;
	box-shadow: 0px .25em .75em #333;
}


/* 3.0 - Intro  ================================================================================ */
#intro {
	width: 100%;
/*	max-height: 1062px; */
	background: #91bc75;
}


/* 3.0 - About  ================================================================================ */
#about {
	width: 100%;
	background: #16a086;
}

.art-statement {
	max-width: 980px;
	width: 100%;
	padding: 10em 0;
}

.art-statement p {
	font-family: 'Lora', serif;
	font-size: 3.8rem;	
}



/* 3.0 - Quote  ================================================================================ */
#quote { 
	background: url(../images/alan-01.jpg) no-repeat;
	background-position: center; 
	height: 100%; 
	position: relative; 
}

.quote-statement { padding: 12em 0; }

.quote-artist {
	color: #F0F0F0;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: 3.2rem;
	float: right;
	text-align: right; 
}

.quote {
	background: rgba(22, 160, 134, 0.3);
	max-width: 600px;
	height: 190px;
	padding: .5em 1em;
	color: #F0F0F0;
	font-family: 'Lora', serif;
	font-size: 3.5rem;
	font-style: italic; 
}


/*  6.0 - Projects  ============================================================================ */
#projects {
	width: 100%;
	height: auto;
	background: #f0f0f0;
}

section {
	margin: 0 auto;
	padding: 9em 0;
}

.five a {
	color: #373737;
}
	.five a:hover { color: #91bc75; }
.five p {
	font-family: 'Lora', serif;
	font-size: 2.4rem;
}

.tech-lists { 
	width: 100%; 
}

.tech-lists h3 {
	margin-bottom: 0;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size: 2.6rem;
	font-weight: 400; 
}

.tech-lists li {
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.6rem;
	list-style-type: circle; 
}

.tech-lists ul {display: inline-block;}

.button {
	background: #373737;
	margin: 2em .25em 0 .25em;
	padding: .5em .7em;
	color: #91bc75;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
	border: 1px solid #91bc75;
	-webkit-border-radius: 5px; 
			border-radius: 5px;
}
	.button:hover { background: #16a086; color: #373737; border-color: #373737; }


/* 3.0 - Contact Form  ========================================================================= */
#contact {
	width: 100%;
	height: auto;
	padding: 3em 0;
	background: #16a086;
}

.symbol {
	padding: .130em;
	color: #373737;
	font-family: 'Mono Social Icons Font';
	font-size: 6.2rem;
}
	.symbol:hover { color: #91bc75;	}

#form {
	display: block;	
	height: auto; 
}

label {  
	color: #373737;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 500;
	font-size: 2.8rem;
	line-height: 5.6rem 
}

.contact-inputs {
	width: 100%;
	background: #f0f0f0;
	padding-left: .4em;
	font-size: 2.6rem;
	line-height: 4.2rem; 
}

.submit {
	margin: 1em 0;
	background: #373737;
	padding: .5em .9em;
	color: #91bc75;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 700;
	font-size: 2.8rem;
	cursor: pointer;
	border: 1px solid #91bc75;
	-webkit-border-radius: 5px; 
			border-radius: 5px;
}
	.submit:hover { background: #16a086; color: #373737; border-color: #373737; }

.message {
	color: red;
	font-size: 2rem;
	font-weight: 700; 
}

#info {
	padding: 1.875em 0;
	color: #373737;
	text-align: right; 
}

#contact-info h1 { font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 4.0rem; }

#contact-info h2 { font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 2.6rem; }

#downloads { margin-top: 3em; }

/*.email-button { display: none; }*/ /* displays in tablet and mobile */


/* 3.0 - Footer  =============================================================================== */
footer {
	width: 100%;
	background: #373737;
	color: #91bc75;
	box-shadow: 0px -.25em .75em #333;
	z-index: 50;
}

.fourofour { color: #91bc75; }


/*  9.1 - Floyd Rose / Harry Nemo  ============================================================= */
#media-container {
	height: 100%;
	margin:  0 auto;
}
	.flash-container {
		max-width: 1030px;
		height: 100%;
		margin:  0 auto;
		padding: 6em 0 2.3em 0;
	}	
	.video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
	.video-container iframe, .video-container object, .video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.youtube-container {
		max-width: 1530px;
		height: 100%;
		margin:  0 auto;
		padding: 4em 0 2.3em 0;		
	}



/*  9.0 - Resume Page HTML  ====================================================================== */
h1.section-title { color: #488c03; font-size: 3.2rem; }

h1.title-breaker {
	background: #280129;
	color: #f0f0f0;
    font-size: 3.0rem;
    font-weight: 500;
    font-family: 'BenchNine', sans-serif;
    margin-bottom: 0;
}

li.resume-p {
	font-family: 'Roboto', sans-serif;
	font-size: 1.8rem;
}
.objective {
    font-size: 1.8rem;
    font-family: 'Roboto', sans-serif;
}

.res-1, .res-1 ul li, .res-2, .res-3 { font-family: 'Roboto', sans-serif; }

.res-1 { width: 100%; }
	.res-1 ul li { font-size: 1.8rem; }

.res-2 {width: 31.732%;}

.res-3 {width: 50%;}

.res-4 {width: 87%;}

.res-5 {width: 12.0205%;}

.resume { max-width: 1220px; padding: 5.625em; }

.resume-p {
	margin: 0 0 0 0;
	font-family: 'Roboto', sans-serif;
	font-size: 1.8rem;
}

.section-title { 
	font-family: 'BenchNine', sans-serif;
	margin-bottom: 0;
	color: #280129; 
}


/* 3.0 - Media Queries   ======================================================================== */
	@media screen and (min-width: 802px) and (max-width: 1281px) {
		#intro { max-height: 593px; padding-top: 60px;}

		.art-statement { padding: 8em 0; }

		.art-statement p { font-size: 3.0rem }

		.container { padding: 9em 2em; }
	}

	@media screen and (min-width: 319px) and (max-width: 801px) {
		nav ul { margin-right: 0; }
		.seven, .six, .five { width: 100%; }

		.align-right { float: left; }

		.right { float: left; }

		#intro { max-height: 437px; }

		.art-statement { padding: 8em 2em; font-size: 1.0rem }

		.art-statement p { font-size: 2.0rem; }

		.quote { font-size: 2.0rem; height: 110px; }

		.quote-artist { font-size: 2.0rem }

		.five p { font-size: 2.0rem; }

		.container { padding: 9em 2em; }

		#form { display: none; }

		.symbol { font-size: 5.0rem; }

		#info { width: 100%; }

		#info h1, #info h2 { font-size: 2.0rem }
	}

	@media screen and (min-width: 319px) and (max-width: 799px) {
		#intro { display: none; }
	}