/* Reminder!!! Style for mobile-first. */


body {
	font-family: Georgia, Times, "Times New Roman", serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400;

background: #fcfcfc;
/*	
background: rgb(255,249,246,1);
background: -moz-linear-gradient(111deg, rgba(252,252,252,1) 33%, rgba(255,239,231,1) 100%);
background: -webkit-linear-gradient(111deg, rgba(252,252,252,1) 33%, rgba(255,239,231,1) 100%);
background: linear-gradient(111deg, rgba(252,252,252,1) 33%, rgba(255,239,231,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfcfc",endColorstr="#ffefe7",GradientType=1);
	color: #333333;*/
/*	height:100vh;*/

}

.navbar * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 1em;
	/*text-transform: uppercase;*/
}

.navbar body {
	font-family: cursive;
}

.navbar a {
	text-decoration: none;
}
.navbar a:hover {
	color: #ec7c13;
}

.navbar li {
	list-style: none;
}
	
	
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	background-color: #fcfcfc;
	color: black;
}

.nav-links a {
	color: black;
}


.logo {
	font-size: 1em;
}

.menu {
	display: flex;
	gap: 1em;
	font-size:1em;
}

.menu li:hover {
	color: #F09440;
}

.menu li {
	padding: 5px 15px;
}



input[type=checkbox]{
	display:none;
}

.hamburger {
	display:none;
	font-size:24px;
	user-select: none;
}



/* for topnav **THIS IS MAX */

@media (max-width:550px){
	.menu {
		display:none;
		position: absolute;
		background-color: #fcfcfc;
		right: 0;
		left: 0;
		text-align: left;
		margin: 20px 0;
		padding: 20px 0;
		min-height:100%;
	}
}

/* Hide responsive menu for now until it links to other pages */
/*@media (max-width: 700px){
	.menu {
		display:none;
		position: absolute;
		background-color: #fcfcfc;
		right: 0;
		left: 0;
		text-align: left;
		margin: 20px 0;
		padding: 20px 0;
		min-height:100%;
	}
	.menu li:hover {
		display: inline-block;
		text-transform: underline;
	}
	.menu li + li {
		margin-top: 12px;
	}
	.menu li {
		padding: 14px 30px;

	}
	input[type=checkbox]:checked ~ .menu {
		display: block;
	}
	
	
	.hamburger {
	  display: block;
	  position: absolute;
	  top: 25px;
	  right: 13px;
	  height: 27px;
	  width: 27px;
	  cursor: pointer;
	  transition: all 1s cubic-bezier(.19, 1, .22, 1);
	}

	.line {
	  position: absolute;
	  display: block;
	  background: #3d3d3d;
	  width: 18px;
	  height: .15rem;
	  border-radius: .2rem;
	  left: 0;
	  transition: .3s ease;
	}

	.line-1 {
	  top: 0;
	}

	.line-2 {
	  top: 7px;
	}

	.line-3 {
	  top: 14px;
	}

	input[type=checkbox]:checked ~ label .line-1 {
	  top: 0px;
	  width: 22px;
	  transform: translateX(-11px) rotate(-45deg) translateY(12px);
	}

	input[type=checkbox]:checked ~ label .line-2 {
	  opacity: 0;
	}

	input[type=checkbox]:checked ~ label .line-3 {
	  top: 14px;
	  width: 22px;
	  transform: translateX(-8px) rotate(45deg) translateY(-8px);
	}
}
*/

.intro {
	margin-top:25px;
}


.quote {
	font-size:1.3em;
	/*font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
}
.latest a:link{
	color:#ec7c13;
	text-decoration: underline;
}
.latest a:visited {
	color:#ec7c13;
}
.latest a:hover {
	  color: #ec7c13; 
  text-decoration: underline;

}


.latest {
	color: #f4f4f4;
	font-size:1.0em;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	letter-spacing:0.05em;


}

/*.latest a:link {
	text-decoration: underline;
	color: #f3f3f3;
}

.latest a:hover {

	color: #ec7c13;
}*/

/*
.topnav {
	overflow: hidden;
	background-color: transparent;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: .5em;
	letter-spacing: 0.1em;
	color: #F09440;
}



.topnav a {
  float: right;
  display: block;
  color: transparent;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
	color: #F09440;
}

.topnav a.homepage {
  background-color: transparent;
  color: black;
  float: left;
}
.topnav a.homepage:hover {
	color: #F09440;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.active {
      float: none;
    display: block;
    text-align: left;
  }
}
*/






div.row { padding-left:30px; padding-right:30px;}

.button {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: .9em;
  font-weight: 400;
  line-height:1.25;
  letter-spacing: 0.1rem;
  border: none;
  border-radius:0px;
  color: white;
  padding: 14px 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  margin: 4px 0px;
  transition-duration: 0.1s;
  cursor: pointer;
}

.button1 {
  background-color: #ec7c13; 
  color: white; 
  border: #ec7c13 2px solid;
}

.button1:hover {
  background-color: #f09440;
  color: white;
  border: #f09440 2px solid;
}

.button2 {
  background-color: transparent; 
  color: #ec7c13; 
  text-transform: none;
  border: #ec7c13 2px solid;
}

.button2:hover {
  background-color: #f09440;
  color: white;
  border: #f09440 2px solid;
}

.a-arrow {
	color: #ec7c13;
	
}

.specialties {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: .8em;
}

.companies img {
	max-height: 50px;
}

.companies a:link{
	color:#f2a35a;

}
.companies a:visited {
	color:#f2a35a;
}
.companies a:hover {
	  color: #f2a35a; 
  text-decoration: none;

}

h2 { font-size: 3rem; letter-spacing: 0rem; }

.highlight { background: linear-gradient(180deg, rgba(251,230,108,0) 60%, #fbe6d0 60%); }


.view_more a {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.view_more a:hover {
	color: #F09440;
}

.top-link-main a {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	text-decoration: none;
}
.top-link-main a:hover {
	color: #F09440;
}



a.styled:hover {
	cursor: pointer;	
	padding: 0;
	border-bottom: 2px solid rgba(255, 209, 12, .7);;
	display: inline-block;
	height: 19px;
	background-color: transparent;
}

.copyright_footer a:link{
	color:#f3b572;
}
.copyright_footer a:visited {
	color:#f3b572;
}
.copyright_footer a:hover {
	  color: #f3b572; 
  text-decoration: none;

}

a.unstyled:hover {
  color: #333333; 
  text-decoration: none;
}

a:link {
    color: #333333; /*FFD000*/
    background-color: transparent;
    text-decoration: none;
}
a:visited {
	color: #333333;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
  /*color: #F09440; */
  opacity: .7;
  text-decoration: none;
}
a:active {
    color: #333333;
    background-color: transparent;
    text-decoration: none;
}

div.project_image:hover {
	outline: 5px solid #FFD10C;
}

.locked_copy {
	padding: 0 20px;
	position: absolute;
	bottom: 2%;
	text-align: center;
}

.dim_effect {
    width: 100%;
    height: 100%;
    top: 0rem;
    left: 0;
    margin: 0;
    padding: 0;
    float: left;
    background: -moz-linear-gradient(top, rgba(252, 252, 252, 0) 0%, rgba(252, 252, 252, 0.03) 1%, #FCFCFC 97%, #FCFCFC 100%);
    background: -webkit-linear-gradient(top, rgba(252, 252, 252, 0) 0%, rgba(252, 252, 252, 0.03) 1%, #FCFCFC 97%, #FCFCFC 100%);
    background: linear-gradient(to bottom, rgba(252, 252, 252, 0) 0%, rgba(252, 252, 252, 0.03) 1%, #FCFCFC 97%, #FCFCFC 100%);
    position: absolute;
    z-index: 9;
}
/** New proj hovers **/
.wrapper_locked {
	margin: 0 auto;
	position: relative;
}
.locked-img {
	width: 100%; 
	display:block; 
	position: relative;
}
.locked-img .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	color: #aaa;
}
.locked-img:hover .overlay {
	display: block;
	background: rgba(0,0,0,.4);
}

.wrapper {
	margin: 0 auto;
	position: relative;
	
}
.wrapper:hover img{
	opacity: .1;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .4s ease;
}

.wrapper:hover .overlay {
	opacity: 1;
}

.overlay-text {
  color: black;
  opacity: 1;
  font-size: 1.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.case_title {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 1em;
	line-height: 1;
	margin-top: 1%;
	text-align: center;
}
.case_categories {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	/*font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;*/
	letter-spacing: 1px;
	font-size:.8em;
	color: #333;
	/*text-transform: uppercase;*/
	margin-bottom: 6%;
	text-align: left;
}
.locked-case-img {
	position: relative;
	text-align: center;
}
.locked-case-img:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:1;
   /* border-radius:30px;*/
}
/*.locked-case-img:hover img {
	opacity: .7;
	background-color: rgba(256,0,0,.5);
}*/
.locked-case:hover > .overlay {
	width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}
.locked-case-img .top {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
}
.locked-case-img .bottom {
	opacity: 1.0;
}


.accent {
	color: #F09440;
	font-weight: bold;
}

/** TOP NAME **/

.top_name {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	/*font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;*/
	font-size: .8em; 
	/*font-weight: 700;*/
	/*font-size: 1.0em;*/
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.top_name a:hover {
	color: #F09440;
}

/** TOP MENU **/

.top_menu {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	/*font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;*/
	text-align: left;
	/*font-weight:700;*/
	color: #F09440;
	font-size: .8em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.top_menu li {
	display:block;
	padding: 10px;
}

.top_menu a:hover {
	color: #F09440;
}


/** INTRO **/



.intro {
	font-family: Georgia, Times, "Times New Roman", serif;
	/*font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
}
h1.intro {
	font-size: 2.2em; line-height: 1.1;  letter-spacing: 0rem;
}
h1.intro2 {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 1.3em; line-height: 1.3;  letter-spacing: 0rem;
}

h1.subtitle {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 1.2em; line-height: 1.3;  letter-spacing: 0rem;
}

h2.homepage {
	font-size:1.8em; line-height: 1.0; letter-spacing: 0rem;
}
h3.homepage {
	font-size:1.4em; line-height: 1.0; letter-spacing: 0rem;
}

p.homepage-text {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.sub_intro {
	font-size: .9em; line-height: 1.2;
}
.sub_intro a {
	/*color: #333333;*/
	cursor: pointer;	
	padding: 0;
	border-bottom: 0px solid rgba(255, 209, 12, 1);
	display: inline-block;
	height: 19px;
	background-color: transparent;
}
.sub_intro a:hover {
	color: #FFD10C;
	cursor: pointer;	
	padding: 0;
	border-bottom: 0px solid rgba(255, 209, 12, 1);
	display: inline-block;
	height: 18px;
	background-color: transparent;
}

h4.index_pg {
	font-family: Georgia, Times, "Times New Roman", serif;
}

h4.linfont {
	font-family: Georgia, Times, "Times New Roman", serif;
	
}
h5.linfont {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 2.0em;
	
}
p.linfont{
	font-family: Georgia, Times, "Times New Roman", serif;
	
}

/** PROJECTS **/



h5.tagline {
	font-size: 3.7rem; line-height: 1.2;  letter-spacing: -.1rem;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.project_name_mobile {
	letter-spacing: 1px;
	font-size:.9em;
	text-transform: uppercase;
	display:inline;
	margin-bottom: 2%;
}
.project_name_web {
	letter-spacing: 1px;
	font-size: .9em;
	display:none; 
	text-transform: uppercase;
}

.project_desc {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-weight: bold;
	margin-top:2%;
}
.process {
	margin-bottom: 7%;
	font-size: .8em;
}

.see_case_study {
	font-family: Georgia, Times, "Times New Roman", serif;
	margin-top: 0%;
	text-align: right;
	font-size: .9em;
}

/*project pages */
.proj_header {
	letter-spacing: 1px;
}
.proj_title_desktop {
	display:none;

}

.proj_title_mobile {
	margin-top: 3%;
	display:inline;
	text-transform:uppercase;
}
.project_text {
	font-family: Georgia, Times, "Times New Roman", serif;
}

.project_blurb h5 {
	font-size: 1.1em; line-height: 1;  letter-spacing: 0em;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	/*text-transform: uppercase;*/
}

.project_blurb a:link {
	text-decoration:underline;
}
.project_blurb a:hover {
	color: #F09440;
}

.project_blurb img {
	width:100%; 
	/*max-width: 250px;*/
	padding-bottom: 0; 
	margin-top:2.5em;
}

.project_blurb span { /*img caption ***TODO - TEST FOR TABLET/MOBILE*/
	display:block;
	text-align: center;
	margin: 0 auto;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: .7em;
	padding-bottom: 1.4em;
}

.about_me a:hover {
	color: #F09440;
}

.about_pic img {
	width:100%; 
/*	max-width: 250px;*/
	padding-bottom: 0; 
	padding-top:.4em;
}

.about_pic span { /*img caption ***TODO - TEST FOR TABLET/MOBILE*/
	display:block;
	text-align: left;
/*	max-width: 250px;*/
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: auto;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: .8em;
}

.product img {
	width:100%; 
	max-width: 200px;
	padding-bottom: 0; 
	margin: 0 auto;
	padding-top:.4em;
	text-align: center;
}

.product span { /*img caption ***TODO - TEST FOR TABLET/MOBILE*/
	display:block;
	text-align: center;
	max-width: 200px;
	margin: 0 auto;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: .8em;
}

.about_headings {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	/*font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;*/
	font-size:1.2em;
	color: #000;
	/*text-transform: uppercase;*/
	margin-top: 6%;
	text-align: left;
	/*font-weight: bold;*/
}

.project_text h3 {
	font-weight: 700; 
	margin-bottom: 3rem;
	font-family: Georgia, Times, "Times New Roman", serif;
	
}
.project_text h5 {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-weight: bold;
}
.project_text a:link {
    background-color: transparent;
    text-decoration: underline;
}
.project_text a:hover {
  color: #F09440; 
}
.case_study_caption {
	text-align:center;
	font-size: 80%;
	color: #888888;
}
.case_study_caption 	a:link{
	color: #888888;
	background-color: transparent;
    text-decoration: underline;
}
.case_study_caption a:hover {
  color: #FFD10C; 
  text-decoration: underline;
}
.project_title {
	color:#519BF7;

}
.spotify_font {
	color: #17E48C; background: -webkit-linear-gradient(bottom right, #519BF7, #17E48C) repeat; -webkit-background-clip: text; -ms-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -ms-text-fill-color: transparent; -moz-text-fill-color: transparent; text-fill-color: transparent;
}
.iot_header {
	color:#e45666;
}
.instashop_header {
	color:#ff9900;
}
.spotify_header {
	color: #2ACBAF; 
	background: -webkit-linear-gradient(right,  #519BF7, #2ACBAF) repeat; 
	-webkit-background-clip: text; 
	-ms-background-clip: text; 
	-moz-background-clip: text; 
	background-clip: text; 
	-webkit-text-fill-color: transparent; 
	-ms-text-fill-color: transparent; 
	-moz-text-fill-color: transparent; 
	text-fill-color: transparent;
	
}
blockquote {
	font-size:110%;
	font-style:italic;
	border-left: 3px solid #333333;
	padding-left: 20px;
	margin-left:-23px;
	margin-right: 0px;
}
.blockquote_cite {
	font-size:100%;
}

.dd_desktop {
	display:none;
}
.dd_mobile {
	display:block;
}

/*video responsive embedding*/
.embed-container { 
	position: relative;
	padding-bottom: 62%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}
.video-container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

.copyright_footer {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: .8em;
	color: #a9a9a9;
	letter-spacing: 0.02rem;

}
.copyright_footer a {
	
}

/* tablet Mods */
@media (min-width: 550px){
	.top_menu {
		text-align: right;
	}
	.intro {margin-top: 50px;}
	h1.tagline { font-size: 5.0rem; line-height: 1.2;  letter-spacing: 0rem;}
	h1.intro {font-size: 2.7em; line-height: 1.2;  letter-spacing: 0rem;}
	h1.intro2 {font-size: 1.3em; line-height: 1.2;  letter-spacing: 0rem;
	}
	.sub_intro { font-size: 1.0em; }
	h2.homepage { font-size:2.5em; line-height: 1.1; letter-spacing: 0rem; }
	h2 { font-size: 3.5rem; letter-spacing: 0rem; }
	.case_title { 	font-size: 1em; }
	.case_categories {	font-size:.9em; color: #777; }
	.about_pic span {text-align: left; margin-left: 0; margin-right: auto;}
	
}
/* Desktop Mods for case studies*/
@media (min-width: /*550px*/700px) {
	
	.intro {margin-top: 50px;}
	.container {
		max-width: 1313px;
	}
	.top_menu {
		text-align: right;
	}
	.project_name_mobile {
		display: none; 
	}
	.project_name_web {
		display: inline;
	}
	h1.tagline { font-size: 7.0rem; }
	h1.intro {
		font-size: 3.3em; line-height: 1.2;  letter-spacing: 0rem;}
	h1.intro2 {
		font-size: 1.4em; line-height: 1.2;  letter-spacing: 0rem; 
	}
	.sub_intro { font-size: 1.7em; }
	h2.homepage { font-size:2.0em; line-height: 1.1; letter-spacing: 0rem; }
	h2 { font-size: 3.5rem; letter-spacing: 0rem; }
	.case_title { 	font-size: 1.2em; }
	.case_categories {	font-size:1.0em; color: #777; }
	.project_desc {
		margin-top:10%;
	}
	.process {padding-bottom: 15%; font-size: .9em; }
	.see_case_study {
		text-align: right;
		margin-top:15%;
	}
	.proj_title_mobile {
		display:none;
	}
	.proj_title_desktop {
		display:inline;
	}
	.dd_mobile {
		display:none;
	}
	.dd_desktop {
		display:block;
	}
	.about_pic span {text-align: right; margin-left: auto; margin-right: 0;}
	
	

}