/*-----------------------------------------*/
/* THUMBNAIL IFRAMES                       */
/*-----------------------------------------*/
.thumbnail iframe {
  /*border: 2px solid black;*/
  opacity: 0;
  height: 900px;
  transition: all 300ms ease-in-out;
}

  .thumbnail-container.projection .thumbnail iframe {
    width: 1440px;
  }

  .thumbnail-container.desktop .thumbnail iframe {
    width: 1000px;
  }

  .thumbnail-container.mobile .thumbnail iframe {
    width: 450px;
  }

.mobile .thumbnail {
  /*border: 2px solid red;*/
  position: relative;
  -ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0 0;
  transform: scale(0.25);
  transform-origin: 0 0;
}

.desktop .thumbnail {
  /*border: 2px solid red;*/
  position: relative;
  -ms-zoom: 0.2;
  -moz-transform: scale(0.2);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.2);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.2);
  -webkit-transform-origin: 0 0;
  transform: scale(0.2);
  transform-origin: 0 0;
}

.projection .thumbnail {
  /*border: 2px solid red;*/
  position: relative;
  -ms-zoom: 0.15;
  -moz-transform: scale(0.15);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.15);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.15);
  -webkit-transform-origin: 0 0;
  transform: scale(0.15);
  transform-origin: 0 0;
}

.thumbnail:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

/*background-color: red;
  opacity: .25;*/
}

	.mobile .thumbnail:after {
	  width: 400%; /*scale up * 4 to correct for scale down of thumbnail div of .25*/
	}

	.desktop .thumbnail:after {
	  width: 500%; /*scale up * 5 to correct for scale down of thumbnail div of .2*/
	}

	.projection .thumbnail:after {
	  width: 666%; /*scale up * 6.66- to correct for scale down of thumbnail div of .15*/
	}

.thumbnail-container {
  border: 1px solid #eee;
  display: inline-block;
  overflow: hidden;
  position: relative;

  background-color: #fff;
}

  .thumbnail-container.projection {
	  margin-top: 55px; /*225-135/2 +10*/
	  height: 135px; /*900*.15*/
    width: 216px; /*1440*.15*/
  }

  .thumbnail-container.desktop {
	  margin-top: 32.5px;/*225-180/2 +10*/
	  height: 180px; /*900*.2*/
    width: 200px; /*1000*.2*/
  }

  .thumbnail-container.mobile {
	  height: 225px; /*900*.25*/
    width: 112.5px; /*450*.25*/
  }

.thumbnail-container::before {
  position: absolute;
  left: 41%;
  top: 48%;
  opacity: 0.2;
  display: block;
  -ms-zoom: 2;
  -o-transform: scale(2);
  -moz-transform: scale(2);
  -webkit-transform: scale(2);

  content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJwaG90b18xXyI+PHBhdGggZD0iTTI3LDBINUMyLjc5MSwwLDEsMS43OTEsMSw0djI0YzAsMi4yMDksMS43OTEsNCw0LDRoMjJjMi4yMDksMCw0LTEuNzkxLDQtNFY0QzMxLDEuNzkxLDI5LjIwOSwwLDI3LDB6ICAgIE0yOSwyOGMwLDEuMTAyLTAuODk4LDItMiwySDVjLTEuMTAzLDAtMi0wLjg5OC0yLTJWNGMwLTEuMTAzLDAuODk3LTIsMi0yaDIyYzEuMTAyLDAsMiwwLjg5NywyLDJWMjh6IiBmaWxsPSIjMzMzMzMzIi8+PHBhdGggZD0iTTI2LDRINkM1LjQ0Nyw0LDUsNC40NDcsNSw1djE4YzAsMC41NTMsMC40NDcsMSwxLDFoMjBjMC41NTMsMCwxLTAuNDQ3LDEtMVY1QzI3LDQuNDQ3LDI2LjU1Myw0LDI2LDR6ICAgIE0yNiw1djEzLjg2OWwtMy4yNS0zLjUzQzIyLjU1OSwxNS4xMjMsMjIuMjg3LDE1LDIyLDE1cy0wLjU2MSwwLjEyMy0wLjc1LDAuMzM5bC0yLjYwNCwyLjk1bC03Ljg5Ni04Ljk1ICAgQzEwLjU2LDkuMTIzLDEwLjI4Nyw5LDEwLDlTOS40NCw5LjEyMyw5LjI1LDkuMzM5TDYsMTMuMDg3VjVIMjZ6IE02LDE0LjZsNC00LjZsOC4wNjYsOS4xNDNsMC41OCwwLjY1OEwyMS40MDgsMjNINlYxNC42eiAgICBNMjIuNzQsMjNsLTMuNDI4LTMuOTU1TDIyLDE2bDQsNC4zNzlWMjNIMjIuNzR6IiBmaWxsPSIjMzMzMzMzIi8+PHBhdGggZD0iTTIwLDEzYzEuNjU2LDAsMy0xLjM0MywzLTNzLTEuMzQ0LTMtMy0zYy0xLjY1OCwwLTMsMS4zNDMtMywzUzE4LjM0MiwxMywyMCwxM3ogTTIwLDhjMS4xMDIsMCwyLDAuODk3LDIsMiAgIHMtMC44OTgsMi0yLDJjLTEuMTA0LDAtMi0wLjg5Ny0yLTJTMTguODk2LDgsMjAsOHoiIGZpbGw9IiMzMzMzMzMiLz48L2c+PC9zdmc+");
}

/*-----------------------------------------*/
/* ALL STYLES                              */
/*-----------------------------------------*/

body {
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
  margin: 0;
  background-color: #ddd;
}

a {
	color: #0369a4;
	text-decoration: none;
}

#taco {
	position: relative;
	left: 0%;
	transition: left 1s;
}

	#taco.shownav {
		left: 100%;
		transition: left 1s;
	}

	#left {
		margin-left: -100%;
		position: absolute;
		width: 100%;
	}

  #main {
		position: absolute;
		top: 0;
		width: 100%;
	}

.narrow {
  width: 100%;
  margin: 0 auto;
}

section {
  padding: 10px 0 0 0;
  text-align: center;
}

  section h1 {
    font-size: 3em;
    margin: 0;
    padding: 1em;
  }

  section p {
    background-color: #444;
    padding: 10px 20px;
  }

.clearfix::after {
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

/*-----------------------------------------*/
/* HEADER/FOOTER                           */
/*-----------------------------------------*/

header.main, footer.main {
  background-color: #34495e;
  padding: 10px 0;
  color: #ccc;
}

  header.main a, footer.main a {
    color: #ecf0f1;
  }

header.main h1, footer.main p {
  margin: 0;
  font-size: 1em;
  font-weight: normal;
  float: left;
}

	header.main h1, footer.main p {
		margin-left: 10px;
		margin-top: 5px;
	}

	header.main nav, footer.main nav {
		margin-right: 10px;
		margin-top: 5px;
	}

header.main nav, footer.main nav {
  float: right;
}

  header.main nav ul, footer.main nav ul {
    margin: 0;
    list-style: none;
  }

  #show_nav {
	  float: left;
	  margin: 0 20px;
	  font-size: 1.5em
  }

  #hide_nav {
    position: absolute;
    font-size: 1.2em;
    top: 7px;
    right: 7px;
  }

  p#linked_in {
    text-align: center;
    background-color: #ddd;
    padding-top: 10px;
  }

    p#linked_in a {
      font-size: 3em;
    }

  /*-----------------------------------------*/
  /* PAGE DECORATION ICONS                   */
  /*-----------------------------------------*/

  .icon, section.portfolio p.icon {
    text-align: center;
    font-size: 7em;
    border: 10px solid #fff;
    border-radius: 100px;
    width: 140px;
    height: 140px;
    margin: 50px auto;
    padding: 0 0 0 1px;
  }

    #me .icon {
      background-color: #3498db; /* peter river */
      border-color: #fff;
    }

    #web_developer .icon {
      background-color: #d35400; /* pumpkin */
      border-color: #2c3e50; /* midnight_blue */
    }

    #teacher .icon {
  		background-color: #f39c12; /* orange */
      border-color: #34495e; /* wet_asphalt */
  	}

    #objective .icon {
      background-color: #27ae60; /* nephristis */
      border-color: #eee;
    }

    #tools p.icon, #clients p.icon, #experiments p.icon {
	    color: #fff;
      font-size: 6em;
    }

    #tools p.icon {
      background-color: #e74c3c; /* alazarin */
    }

    #clients p.icon {
      background-color: #9b59b6; /* amethyst */
    }

    #experiments p.icon {
      background-color: #34495e; /* wet_asphalt */
    }

/*-----------------------------------------*/
/* HOME PAGE SECTIONS                      */
/*-----------------------------------------*/
#me {
	 background-color: #2980b9; /* belize_hole */
	 color: #ecf0f1; /* clouds */
}

  #me h1 {
    font-weight: normal;
  }

	#me p {
    background-color: #3498db; /* peter river */
    border-color: #ecf0f1; /* clouds */
  }

#web_developer {
	background-color: #e67e22; /* carrot */
	color: #2c3e50; /* midnight_blue */
}

	#web_developer p {
    background-color: #d35400; /* pumpkin */
    border-color: #2c3e50; /* midnight_blue */
  }

#teacher {
	background-color: #f1c40f; /* sun_flower */
	color: #34495e; /* wet_asphalt */
}

	#teacher p {
		background-color: #f39c12; /* orange */
    border-color: #34495e; /* wet_asphalt */
	}

#objective {
	color: #eee;
	background-color: #2ecc71; /* emerald */
}

  #objective p {
    background-color: #27ae60; /* nephristis */
    border-color: #eee;
  }

/*-----------------------------------------*/
/* PORFOLIO SECTION NAVIGATION             */
/*-----------------------------------------*/

nav.section_nav {

}

  nav.section_nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
    text-align: center;
  }

    nav.section_nav ul li {
      margin: 0 0 10px 0;
      padding: 0;
      display: inline-block;
    }

      nav.section_nav ul li a {
        display: block;
        padding: 5px 10px 3px 10px;
        border-bottom-size: 4px;
        border-bottom-style: solid;
      }

/*-----------------------------------------*/
/* PORFOLIO SECTION                        */
/*-----------------------------------------*/

  section.portfolio h1 {
  	color: #fff;
  }

  	section.portfolio h1 span a {
  		font-size: .3em;
  		position: relative;
  		top: -7px;
  		display: block;
  	}

  section.portfolio p, section.portfolio ul {
  	text-align: left;
  	line-height: 1.5em;
  }

  section.portfolio .description_container .description {
  	max-height: 9999px;
  	transition: max-height 1s;
  }

    section.portfolio .description_container .expander {
      display: none;
    }

    section.portfolio .description_container .compactor {
      display: block;
    }

  	section.portfolio .description_container.compact .description {
  		overflow: hidden;
  		max-height: 150px;
  		transition: max-height 1s;
  	}

      section.portfolio .description_container.compact .expander {
        display: block;
        padding-bottom: 10px;
      }

      section.portfolio .description_container.compact .compactor {
        display: none;
      }

    section.portfolio .mark {
      margin-top: 3px;
    }

section.portfolio a {
	color: #fff;
	font-weight: bold;
}

section.tools {
	background-color: #c0392b; /* pomegranate */
	color: #ddd;
}

	li.tools a {
		color: #c0392b; /* pomegranate */
		border-color: #c0392b; /* pomegranate */
	}

section.clients {
	background-color: #8e44ad; /* 	wisteria */
	color: #ddd;
}

	li.clients a {
		color: #8e44ad; /* 	wisteria */
		border-color: #8e44ad; /* 	wisteria */
	}

section.experiments {
	background-color: #2c3e50; /* 	midnight_blue */
	color: #95a5a6; /* concrete */
}

	section.experiments h1 {
		font-size: 2.6em;
	}

	li.experiments a {
		color: #2c3e50; /* 	midnight_blue */
		border-color: #2c3e50; /* 	midnight_blue */
	}


/* paragraph/description/list	 */
section#tools p, section#tools ul, section#tools .description_container {
  background-color: #e74c3c; /* alazarin */
}

section#clients p, section#clients ul, section#clients .description_container {
  background-color: #9b59b6; /* amethyst */
}

section#experiments p, section#experiments ul, section#experiments .description_container {
  background-color: #34495e; /* wet_asphalt */
}


h2 a {
  color: #fff;
}

.site {
  border-bottom: 1px solid #aaa;
  padding-bottom: 20px;
}

.screenshot_container {
	margin: 0 30px; /* arrows won't this without this */
}

.thumbnail-container {
  background-color: #eee;
  padding: 10px;
  border-radius: 10px;
}

.thumbnail iframe {
  box-shadow: 0px 0px 20px #000;
}

section.portfolio .screenshot p {
	text-align: center;
	font-size: .8em;
}


/*-----------------------------------------*/
/* CONTACT FORM                            */
/*-----------------------------------------*/

#contact_form {
	background-color: #16a085; /* green_sea */
}

.alert {
	padding: 10px;
	color: #fff;
}

	.alert_error {
		background-color: #900;
	}

	.alert_success {
		background-color: #090;
	}

fieldset {
	border: 0;
}

label {
	color: #eee;
}

input, textarea {
	font-size: 1.5em;
	padding: 5px 7px;
	width: 90%;
	border: 1px solid #bbb;
}

textarea {
	height: 300px;
}

input[type=submit] {
	width: 94%;
	background-color: #1abc9c; /* tuquoise */
	border: 1px solid #090;
	color: #eee;
}


/*---------------------------------------------------------------------------------------*/
/* MEDIA QUERIES                                                                         */
/*---------------------------------------------------------------------------------------*/

/* hide the homepage icons on screens that aren't very tall,
	they overlap with the next section down */

@media screen and (max-height: 598px) {
	#me .icon, #web_developer .icon, #teacher .icon, #objective .icon {
		display: none;
	}
}

/* when the homepage reaches 3 x 320 put the sections all
side by side */

@media screen and (min-width: 960px) {
	/*-----------------------------------------*/
	/* HOME PAGE                               */
	/*-----------------------------------------*/
  #me, #web_developer, #teacher, #objective {
    position: relative;
    float: left;
    width: 25%;
  }

	#me h1 {
		padding: 20px;
	}

  #web_developer h1, #teacher h1, #objective h1 {
    font-size: 2em;
  }

  #me h1, #web_developer h1, #teacher h1, #objective h1 {
    position: relative;
    top: 1%;
  }

		#taco.shownav {
			left: 320px;
		}

		#left {
			margin-left: -320px;
			width: 320px;
		}

	/*-----------------------------------------*/
	/* PORTFOLIO PAGE                          */
	/*-----------------------------------------*/
	section.portfolio header {

	}

		section.portfolio header h1 {
			float: left;
			margin: 30px 0 0 0;
		}

			section.portfolio header h1 a {
				padding: 0 0 0 5px;
				text-align: left;
			}

		section.portfolio header p.icon {
			float: left;
			margin: 25px 0 0 40px;
		}

		section.portfolio h2 {
			text-align: left;
			padding: 0 0 0 40px;
		}

	section.portfolio .site:after, section.portfolio header:after, .screenshot_container:after {
		content: " ";
		display: block;
		visibility: hidden;
		height: 0;
		clear: both;
	}

	.screenshot_container {
		margin: 10px 10px 10px 40px;
	}

	.screenshot {
		float: left;
		margin: 10px;
	}

    /* tablet/desktop */
    .screenshot:nth-child(2) {
			margin-left: -30px;
		}

    /* presentation */
		.screenshot:nth-child(3) {
			margin-left: -80px;
		}

		section.portfolio .site .description {
			padding-top: 20px;
		}

		section.portfolio .site .description p, section.portfolio .site .description ul {
			margin: 10px 40px;
		}

	/*-----------------------------------------*/
	/* THUMBNAILS                              */
	/*-----------------------------------------*/

	.thumbnail iframe {
		box-shadow: inset 0px 0px 1px 1px #444;
	}

	.thumbnail-container {
		box-shadow: 0px 0px 50px 0px #444;
	}

	.thumbnail-container.mobile {
		padding: 10px 5px 30px 5px;
		/*box-shadow: 0px 0px 5px 1px #000;*/
	}

	.thumbnail-container.desktop {
		z-index: 1;
		padding: 10px 30px 16px 10px;
	}

	/* --- */


	.mobile .thumbnail {
	  -ms-zoom: 0.227;
	  -moz-transform: scale(0.227);
	  -o-transform: scale(0.227);
	  -webkit-transform: scale(0.227);
	  transform: scale(0.227);
	}

	.mobile .thumbnail:after {
	  width: 440.6%; /*scale up * 4.406 to correct for scale down of thumbnail div of .227*/
	}

	.thumbnail-container.mobile {
	  height: 205px; /*900*.227*/
    width: 102.15px; /*450*.227*/
  }

	/* --- */

  .thumbnail-container.desktop .thumbnail iframe {
	  height: 768px;
    width: 1024px;
  }

	.desktop .thumbnail {
	  /*border: 2px solid red;*/
	  -ms-zoom: 0.25;
	  -moz-transform: scale(0.25);
	  -o-transform: scale(0.25);
	  -webkit-transform: scale(0.25);
	  transform: scale(0.25);
	}

	.desktop .thumbnail:after {
	  width: 400%; /*scale up * 4 to correct for scale down of thumbnail div of .25*/
	}

	.thumbnail-container.desktop {
	  margin-top: 32px;
	  height: 187px; /*768*.25*/
    width: 256px; /*1024*.25*/
  }

	/* --- */

	.projection .thumbnail {
	  /*border: 2px solid red;*/
	  -ms-zoom: 0.25;
	  -moz-transform: scale(0.25);
	  -o-transform: scale(0.25);
	  -webkit-transform: scale(0.25);
	  transform: scale(0.25);
	}

	.projection .thumbnail:after {
	  width: 400%; /*scale up * 4 to correct for scale down of thumbnail div of .25*/
	}

	.thumbnail-container.projection {
		margin-top: 0;
	  height: 225px; /*900*.25*/
    width: 360px; /*1440*.25*/
  }
}

/* at sized bigger than an ipad pro in landscape */

@media screen and (min-width: 1300px) {
	.narrow {
		width: 1000px;
		margin: 0 auto;
	}
}