/*main styles for lawrencegetubig.com creative design portfolio*/

/* Base (mobile-first) */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
	position: relative;
}

body {
	background-color: #363636;
	height: 100%;
	color: #FFFFFF;
	font-size:17px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	font-family: 'Montserrat', sans-serif;
}

ul {
	margin-left: 20px;
	font-size: 0.9em;
}

img {
	display: block;
	width: 100%;
}

figure {
	width:100%;
}

.highlight-orange {
	color: #ff7f00;
}

/*a:visited {
	color: darkorange;
}*/

/*typography options*/
.montserrat {
	font-family: 'Montserrat', sans-serif;
}

.source-code-pro {
	font-family: 'Source Code Pro', 'Arial', sans-serif!important;
}

.source-code-pro-light {
	font-weight: 300;
}

.source-code-pro-regular {
	font-weight: 400;
}

/* hero animation styles */
.start-transparent {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity:0;
	transition: 2500ms all ease;
	transition-delay: 2400ms;
}

.start-left {
	top: 50%;
	left: 50%;
	transform: translate(-125%, -50%);
	transition: 3000ms all ease-in-out;
	/*transition-delay: 500ms;*/
	opacity: 0;
}

.start-right {
	top: 50%;
	left: 50%;
	transform: translate(100%, -50%);
	transition: 2500ms all ease-in-out;
	/*transition-delay: 500ms;*/
	opacity: 0;
}

.start-right-fast {
	top: 50%;
	left: 50%;
	transform: translate(75%, -50%);
	transition: 2300ms all cubic-bezier(0.27, 0.86, 0.4, 1.26);
	/*transition-delay: 500ms;*/
	opacity: 0;
}

.start-top {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	transition: 4700ms all ease;
	transition-delay: 400ms;
	opacity: 0;
}

.start-bottom {
	top: 50%;
	left: 50%;
	transform: translate(-50%, 25%);
	transition: 3000ms all ease-in-out;
	/*transition-delay: 500ms;*/
	opacity: 0;
}

.img-layer-assembled{
	top: 66%;/*lg note original is top: 50%; */
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
}


/*hero area styles*/
div.hero-container {
	position: relative;
	width: 100%;
	max-width: 1280px;
	height: auto;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;/*so part of the star image is hidden*/
}

.img-layer-absolute {
	position: absolute;
	width:85%;
}

.hero-web,
.hero-graphic,
.hero-photo,
.hero-face {
	width: 33%;
	margin-right: auto;
	margin-left: auto;
	max-width: 427px;
	height: 260px;
	position: relative;
	display: block;
	z-index: 2;
}

.hero-text {
  top: 32px;
  font-size: 12px;
  width: 100%;          /* let it shrink naturally */
  max-width: 399px;      /*cap width for small screens */
  text-align: center;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: #363636;
	display: inline-block;
	padding: 5px;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.hero-web,
.hero-graphic,
.hero-photo,
.hero-face {
  height: 260px;
}

/*layout helper classes*/
.margin-bottom {
	margin-bottom: 10px;
}

.text-center {
	text-align: center;
}

.absolute {
	position: absolute;
}

/*header styles*/
header {
	width: 100%;
	height: 130px;
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	font-size:.8em;
}

.header-container {
	margin-top: 15px;
	text-align: right;
	padding-right: 0;
}

.header-container h1 {
	line-height: 50px;
	background: #363636;
	display: inline;
	padding: 5px 10px 5px 10px;
	font-size: 2.0em;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
}

.header-container p {
	background: #363636;
	display: block;
	padding: 5px;
	margin-top: 15px;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
}

.copyright {
    position: absolute;
    right: 0;
    bottom: 10px;
    display: inline-block;
}

/* project header bar/header */
div.project-header-bar {
	width: 100%;
	height: 100px;
	position: relative;
	border: 2px solid #363636;
}

div.project-header-bar h2 {
	line-height: 100px;
	background: #363636;
	padding: 5px;
	display:inline;
	margin-left:25px;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
	font-size: 1.1em;
}

div.project-header-bar h3 {
	line-height: 100px;
	background: #363636;
	padding: 5px;
	display:inline;
	margin-left:25px;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
	font-size: 0.9em;
}

/*featured projects main and subcategories pages styles*/
.flex-container-main {
	display: flex;
	flex-wrap: wrap;
	max-width: 1280px;
	line-height: 22px;
}

.flex-container-main p, 
.flex-container-main h1, 
.flex-container-main h2, 
.flex-container-main h3 {
	width: 100%;
	padding: 5px 25px 5px 25px;

}

/* info box and info box p provided as area to explain gallery materials */
.info-box {
	padding: 25px;
	width: 100%;
	line-height: 1.7em;
}

.info-box-left {
	max-width: 500px;
	float: left;
	text-align: left;
}

.info-box-right {
	max-width: 500px;
	float: right;
	text-align: left;
}

.flex-container-child-projects p {
	padding: 5px 0 5px 0;
}

.headline-text-color {
	color: #e6e6e6;
}

.flex-container-child-gallery {
	width: 100%;
	height: 400px;
}

/* for size of retouch photos ...*/
.gallery-photo {
	width: 300px;
	height: 300px;
}

/* for nctm ad sizes*/
.gallery-ad {
	width: 300px;
	height: 250px;
}

.gallery-item {
	border-radius: 3px 3px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top:50px;
	background-size: 300px;
	background-repeat: no-repeat;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
}

.gallery-icon-img {
	width: 250px;
	height: auto;
	margin: 50px auto 10px auto;
	display: block;
}

/*this can apply to gifs or imgs - the style allows graphic to be 320px wide*/
.gallery-icon-gif {
	width: 320px;
	height: auto;
	margin: 50px auto 10px auto;
	display: block;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
}

.gallery-print-img {
	width: 300px;
	height: auto;
	margin: 50px auto 10px auto;
	display: block;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
}

.flex-container-child-projects {
	width: 100%;
	height: auto;
	border: 2px solid #363636;/*this rule helps delineate the sections, enhancing the "card" material concept*/
}

.featured-project-card {
	height: 660px!important;
	background-color: #363636;
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 12px;
	transition: 300ms all ease-in-out;
	position: relative;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	width: 100%;
	margin-left: auto;    	
	margin-right: auto;
}


section.featured-project-card img {
	width: 250px;
	height: 150px;
	position: relative;
	top: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.img-container {
	width: 250px;
	height: 150px;
	background-size: 250px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: -35px;
}

/*pattern and background color classes*/
.pattern-diagonal-up {
	background-image: url(../images/pattern/yellow_lines_up.png);
	background-size: 25px;
}

.pattern-diagonal-up-var {
	background-image: url(../images/pattern/yellow_lines_up_var.png);
	background-size: 8px;
}

.pattern-diagonal-down {
	background-image: url(../images/pattern/yellow_lines_down.png);
	background-size: 25px;
}

.pattern-horizontal {
	background-image: url(../images/pattern/yellow_lines_hor.png);
	background-size: 10px;
}

.pattern-vertical {
	background-image: url(../images/pattern/yellow_lines_vert.png);
	background-size: 10px;
}

.pattern-dots-grid-dense {
	background-image: url(../images/pattern/yellow_dots_grid_dense.png);
	background-size: 5px;
}

.pattern-dots-grid-sparse {
	background-image: url(../images/pattern/yellow_dots_grid_sparse.png);
	background-size: 5px;
}

.pattern-dots-grid-var {
	background-image: url(../images/pattern/yellow_dots_grid2.png);
	background-size: 5px;
}

.pattern-dots-stagger {
	background-image: url(../images/pattern/yellow_dots_stagger.png);
	background-size: 10px;
}

.pattern-grid-black {
	background-image:url(../images/pattern/black_grid.png);
	background-size: 5px;
}

.pattern-grid-dark-yellow {
    background-image: url(../images/pattern/yellow_grid.png);
    background-repeat: repeat;
    background-size: 5px;
}

/* star element */
.spinning-star {
  position: absolute;
  bottom: -50%; /* approx center aligned with bottom edge */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: auto;
  z-index: 1;

  /* start invisible */
  opacity: 0;

  /* spin + fade in */
  animation: spin 30s linear infinite, fadeIn 2s ease forwards;
  animation-delay: 0s, 4s; /* spin starts immediately, fade starts after 3s */
}

@keyframes spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 0.5; } /* semi-transparent */
}


.spinning-star img {
  width: 100%;   /* scales to container width */
  height: auto;  /* keeps aspect ratio */
  display: block;
}

.color-yellow {
	background-color: #febe13;
}

.color-light-yellow {
	background-color: #fed361;
}

.color-mustard-brown {
	background-color: #cb9811;
}

.color-bright-brown {
	background-color: #7f5f0a;
}

.color-dull-brown {
	background-color: #785d2f;
}

.color-dark-brown {
	background-color: #423208;
}

.color-offwhite {
	background-color: #e6e6e6;
}

.color-charcoal {
	background-color: #363636;
}

  footer {
    height: 380px;
    width:100%;
 		position: relative;
  }

 footer p {   background-color: #363636;
    display: inline-table;
    padding: 10px;
    margin: 10px 25px 10px 25px;
	box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.2);
}

/* ≥530px */
@media (min-width: 530px) {
  .header-container {
    padding-right: 25px;
  }

  .header-container h1 {
    font-size: 2.3em;
  }

/* star element */
	.spinning-star {
  bottom: -95%; /* approx center aligned with bottom edge */
	}

  .flex-container-child-projects {
    height: 625px;
  }

  .featured-project-card {
	height: 560px!important;
}

 .featured-project-card {
    width: 375px;
  }

  footer {
    height: 254px;
  }

  .hero-text {
    font-size: 1.2em;
    max-width: 530px;
  }
}

/* ≥800px */
@media (min-width: 890px) {
  .hero-web,
  .hero-graphic,
  .hero-photo,
  .hero-face {
    height: 440px;
  }

  .header-container {
    font-size: 1em;
  }

  div.project-header-bar h2 {
    font-size: 1.5em;
  }

  div.project-header-bar h3 {
    font-size: 1.2em;
  }

  .flex-container-child-projects,
  .flex-container-child-gallery {
    width: 50%;
  }

  .hero-text {
    top: 60px;
    font-size: 2em;
    max-width: 870px;
    text-align: left;
  }


/* from original @media only screen and (min-width: 800px)  */
	.tablet-margin-right-1 {
		margin-right:100px;
	}

	img.two-thirds {
		width: 66%;
	}

	img.one-thirds {
		width:33%;
	}

	img.one-half {
		width: 50%;
	}

	img.center {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	img.tablet-float-left {
		float: left;
	}

	img.tablet-float-right {
		float: right;
	}

	.header-container {
		font-size: 1em;
	}

	div.project-header-bar h2 {
		font-size: 1.5em;
	}

	div.project-header-bar h3 {
		font-size: 1.2em;
	}

	.flex-container-child-projects {
 	   width: 50%;
	}

	.flex-container-child-gallery {
		width: 50%;
	/*for photo gallery*/
	}

}


/* ≥1180px */
@media (min-width: 1180px) {
  .hero-web,
  .hero-graphic,
  .hero-photo,
  .hero-face {
    height: 600px;
  }

  .flex-container-child-projects,
  .flex-container-child-gallery {
    width: 33.3%;
  }
 .hero-text {
    top: 80px;
    font-size: 2em;
    max-width: 870px;
  }

}