@charset "UTF-8";
/* CSS Document */

/*  This stylesheet is where all of your site structure will be placed   */
/*  There are three sizes (media queries) within this document. Mobile, Tablet, and Desktop.  */
/*  Any styles you establish in the mobile section will ALSO APPLY to tablet and desktop (unless you overwirte them in the tablet/desktop section)
    Any styles that you establish in tablet and mobile, will ALSO APPLY to desktop.
	
/*  www.adamkaplan.me/grid/ used as a reference in the setup of this template.

/*  BE SURE TO SAVE AND PREVIEW IN YOUR BROWSER EVERY CHANGE YOU MAKE!! SERIOUSLY. */

/*  LET'S GET STARTED!  */



/*************************  MOBILE (SMALL SCREENS) – Screens below 640px  *************************/


/*   This sets the width of your container (wrapper) to 100% by default – apply to mobile   */
.container {
	width: 100%;
	background: #FFF; /*  DELETE after setup */
}


/*   This class should be applied to ALL fluid columns on your page!  */
.column {
	margin-bottom:2em;
	
	float:left;
}

/*   These classes define various widths for each column size. Apply one of the classes below to every "column" div.  */
.column.full,
.column.two-thirds,
.column.half,
.column.one-third,
.column.one-fourth,
.column.three-fourths {
	width:100%; /*  This sets all columns to 100% on mobile devices. This will change for tablet and desktop.  */

}

/*  Clear Fix – Prevents rows from colapsing in on each other.  */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}
.aboutli {
	list-style-type: none;
	text-decoration: none;
}

.contactli {
	list-style-type: none;
	text-decoration: none;
}
.creationsli {
	list-style-type: none;
	text-decoration: none;
}

#logo {
	vertical-align: middle;

}

.no-resize {
	min-width: 260px;
	min-height: 63px;
	max-width: 70%;
}



body {
	font-family: 'Lato', sans-serif;
	color: #3b4144;
}



ul li {
	font-family: 'Lato', sans-serif;
	color: #3b4144;
	font-weight: 300;
	margin-left: 3%;
	list-style-type: disc;
	font-size: 1.02em;
	line-height: 1.4em;
	letter-spacing: 0.2px;
	margin-bottom: 0.2em;
	
}


#nav ul li a {
	width: 100%;
	text-decoration: none;
	
}



p {
	font-size: 1.1em;
	line-height: 1.4em;
	margin-bottom: 1.2em;
	letter-spacing: 0.2px;
	font-weight: 300;
	
	
}

#contactpara {
	padding: 15px 10px 10px 10px;
}

h1, h2, h3, h4, h5, h6 {
	    font-family: 'Lato', sans-serif;
}



.mobile-nav-icon {
	height: auto;
	overflow: hidden;
	float: right;
}


/* Accordian Styles
*************************/

.menu_list {	
	width: 100%;
	position: relative;
	
	
}

.menu_head {
	padding: 0;
	cursor: pointer;
	position: relative;
    font-weight:100;
	float: right;
	position: relative;
	bottom: 18px;
	left: 2%;
	margin-top: 60px;
	margin-right: 10px;
}

.menu_head img {
	background-size: 35px;
	width: 35px;
}

.menu_body {
	display:none;
	width: 100%;

}

.menu_body a {
	display: inline-block;
	width: 100%;
	color:#333;
	background-color: #fff;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size:1.2em;
	text-decoration: none;
	border-bottom: 1px solid #ef483d;
	text-align: center;
	line-height: 80px;
	position: relative;
	letter-spacing: 0.5px;
	text-decoration: none;
	
}
.menu_body a:hover{
  color: #ef483d;
  text-decoration: none;
  }


/**************************/


#projdesc h1{
	font-weight: 600;
	padding: 5px 10px 0 10px;
	font-size: 1.2em;
	float:left;
}

#projdesc h2{
	padding: 0 10px 0 10px;
	font-weight: 300;
	font-style:italic;
}

#projdesc p{
	
	padding: 15px 5px 10px 10px;
	float:left;
}



#myimage {
	float:left;
	padding: 20px 5px 0px 10px;
	display: block;
	

	
}


#link {

	margin-top: 10px;

}



a:link {
	color: #ef483d;
	text-decoration: none;
}



a:hover {
  color: #3b4144;
  text-decoration: none;
  }
  
a:visited {
  color: #ef483d;
  text-decoration: none;
  }

a:active {
	text-decoration: none;
	color: #332320;
}

.resumelink {
	color: #0CF;

}

#bio h1{
	font-weight: 600;
	color: #3b4144;
	font-size: 1.2em;
	letter-spacing: 0.5px;
	padding: 10px 10px 10px 10px;

}
#bio p{
	
	padding: 10px 10px 10px 10px;
	letter-spacing: 0.5px;

}
.resumeleft {
	float: left;
	padding: 10px 10px 0px 10px;
	
}
.resumeright {
	float: right;
	padding: 10px 10px 10px 10px;
}

.resumeleft h1{
	font-weight: 400;
	padding: 10px 10px 0px 0px;
	margin-bottom: 10px;
	font-size: 1.1em;
	letter-spacing: 0.5px;

}

.resumeright h1{
	font-weight: 400;
	padding: 10px 10px 0px 0px;
	margin-bottom: 10px;
	font-size: 1.1em;
	letter-spacing: 0.5px;

}
.imgcontainer {
	
	width: 100%;
	text-decoration: none;
	line-height: 4em;
	border-top: 1px solid #fadfd7;
	padding: 10px 10px 10px 10px;
}

}




/*B&W*/
.bw {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;

}

.bw:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}



#footer {

	background: #ef483d;
	font-weight: 300;
	padding-left: 8%;
	vertical-align: middle;
	display:block;
	line-height: 50px;
	margin-bottom: 0;
	
	
}

#footer p {
	margin-bottom: 0;
	line-height: inherit;
	font-size: 0.8em;
	color: #fff;

	
	
}




/**************************  TABLET (MEDIUM SCREENS) (At least 640px)  ****************************/


/*  STARTS the Tablet Media Querie. 40rem = 640px   */
@media (min-width: 40rem) {
	
	
/*   This RE-DEFINES the width of your CONTAINER (wrapper) for tablet and above.  */
.container {
	width: 90%;  /*  This streches the container to 90% of the page (but is restrained by the max-width). This works as the margin of your page.  */
	max-width: 1200px;
	margin: 0 auto;
}


/*   This RE-DEFINES attributes of your COLUMN for tablet and above   */
.column {
	float: left;
	margin-left: 5%; /*  Margin on the side of your columns. DO NOT CAHNGE unless you are willing to change the percentages below  */
	margin-bottom:2em; /*  This is the margin beneath each row. This is OK to change.  */
}


.column:first-child {
	margin-left: 0;  /*  Removes the margin at the left of the first column in each row   */
}


/*   These RE-DEFINE the WIDTHS of your COLUMNS to the correct percentage.    */
.column.full { width: 100%;}
.column.half { width: 47.5%;}
.column.one-third { width: 30%;}
.column.two-thirds { width: 65%;}
.column.one-fourth { width: 21.25%;}
.column.three-fourths { width: 73.75%;}



.mobile-nav-icon {
	width: 35px;
	height: 26px;
	float: right;
	position: relative;
	bottom: 58px;
	right: 20px;
}

/* Accordian Styles
*************************/
.menu_list {
	width: 100%;
	position: relative;
	bottom: 0;
}

.menu_head {
	top: 19px;
	margin-top: 20px;
}

.menu_body a {
	display: inline-block;
	width: 100%;
	color: #333;
	background-color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #ef483d;
	text-align: center;
	position: relative;
	top: 3px;

}


#projimg{
	float:right;
	padding-left:40px;
}




/**************************/

/*  ADD THE REST OF YOUR **TABLET** STRUCTURE HERE  */



}  /*  ENDS Tablet Media Querie  */





/**************************  DESKTOP (LARGE SCREENS) (At least 1024px)  **************************/

/*   STARTS the Desktop Media Querie. 64.1rem = Just over 1024px   */
@media (min-width: 64.1rem) {


/*   REMINDER all of the structure ^ DEFINED ABOVE ^ still applys to the desktop   */

/*   Use this section to – REDEFINE any needed classes / id's that are different in the desktop vesron  */

/*   Use this section to – ADD NEW STRUCTURE that doesn't exist in tablet / mobile   */



}  /*  ENDS Tablet Media Querie  */






/*******************************  SPECIAL WORK AROUNDS  *******************************/

/*  Targets Mobile Only  */
@media (max-width: 39.99rem) {

.no-show-mobile {
	display:none;/* .no-show-mobile can be applied to any element that should not appear in the mobile version  */
}

/*  These classes can be applied to any column that CHANGES WIDTH IN THE MOBILE VERSION  */
.column.mobile-full { width: 100%;}
.column.mobile-half { width: 47.5%;}
.column.mobile-one-third { width: 30%;}
.column.mobile-two-thirds { width: 65%;}
.column.mobile-one-fourth { width: 21.25%;}
.column.mobile-three-fourths { width: 73.75%;}

/*  Removes bottom margin from any column within the mobile sizing  */
.no-margin-bottom-mobile {
	margin-bottom: 0;
}

/* .no-gutter-mobile will remove unneeded margin (gutter) from a column in the tablet version  */
.no-gutter-mobile {
	margin-left:0;
}

/* add gutter to a mobile column  */
.add-gutter-mobile {
	margin-left: 5%; 
}


}


/*  Targets Tablet Only  */
@media (min-width:40rem) and (max-width: 64rem) {  

/*  These classes can be applied to any column that CHANGES WIDTH IN THE TABLET VERSION  */
.column.tablet-full { width: 100%;}
.column.tablet-half { width: 47.5%;}
.column.tablet-one-third { width: 30%;}
.column.tablet-two-thirds { width: 65%;}
.column.tablet-one-fourth { width: 21.25%;}
.column.tablet-three-fourths { width: 73.75%;}


/* .no-gutter-tablet will remove unneeded margin (gutter) from a column in the tablet version  */
.no-gutter-tablet {
	margin-left:0;
}


/*  Removes bottom margin from any column within the tablet sizing  */
.no-margin-bottom-tablet {
	margin-bottom: 0;
}


/* .no-show-tablet can be applied to any element that should not appear in the tablet version  */
.no-show-tablet {
	display:none;
}

/*  This will reverse the order of certain divs within a row (on tablet) – Applies a float right instead of float left  */
.column.flow-opposite-tablet { float: right;}  

/*  Adds first child margin back on tablet  */
.first-child-gutter-tablet.column:first-child {
	margin-left: 5%; 
}

}


/*  Targets Desktop Only  */
@media (min-width: 64.1rem) {

/* .no-gutter-desktop will remove unneeded margin (gutter) from a column in the desktop version  */
.no-gutter-desktop {
	margin-left:0;
}

/*  Removes bottom margin from any column within the tablet sizing  */
.no-margin-bottom-desktop {
	margin-bottom: 0;
}

/* .no-show-desktop can be applied to any element that should not appear in the desktop version  */
.no-show-desktop {
	display:none;
}

/*  This will reverse the order of certain divs within a row (on tablet) – Applies a float right instead of float left  */
.column.flow-opposite-desktop { float: right;}  

/*  Adds first child margin back on tablet  */
.first-child-gutter-desktop.column:first-child {
	margin-left: 5%; 
}



#logo {
	max-width: 100%;
	max-height: 44px;
}

#nav {
	width: 650px;
	float: right;
	margin-left: 0;
	margin-bottom: 10px;
	

}


#nav li a {
	text-decoration: none;
	padding-top:110px;
	font-weight: 300;
	padding-left: 15px;
	font-family: 'Lato', sans-serif;
	display: block;
	position: relative;

}




	

.mobile-nav-icon {
	height: auto;
	overflow: hidden;
	float: right;
}


/*B&W*/
.bw {
  -webkit-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;

}

.bw:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

#projdesc h1{
	font-weight: 600;
	padding: 5px 0 0 10px;
	font-size: 1.2em;
	float:left;
}

#projdesc h2{
	padding: 0 0 0 10px;
	font-weight: 100;
}

#projdesc p{
	
	padding: 15px 5px 10px 10px;
	float:left;
}




}







/*****************************  MAKING IMAGES & MEDIA FLUID  ****************************/

/* Fluid media requires that you REMOVE the media's HEIGHT and WIDTH attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/  */
   
img, object, embed, video {
	max-width: 100%;
}




/**********************************  BORDER BOX FIX  **********************************/
/* This allows your padding to be included in the dimensions of your div */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


/*************************************** CLEAR  ***************************************/
/* Add this inside the end of your container if it is not detecting the content it contains (ie background not showing) */

.clear {
	clear:both;
}