@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

/*Karine Keely Design, 12/05/17*/

html {
box-sizing: border-box;
width: 100%;
scroll-behavior:smooth; /*must be applid to html element*/
	
font-family: 100%/1.4 sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;

/*background "art goes here" image, fixed to allow for parallax effect*/
background: url("../_Images/ArtCoverShot_BW_1800.png") center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
backgaound-color: #000000;
	}
	
/* "*" Reset syle to take away any inherit style the browser wants to push on your html document*/
*, *::before, *::after{
-webkit-box-sizing: inherit;
box-sizing: inherit; 	/*must be border-box for responsive website*/
margin: 0;
padding: 0;
border: 0;
border-style: none;
}

/*Body Styles*/

body{
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 100%/1.4 "Helvetica Neue Light", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	z-index:200;
	overflow:scroll;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}
	
/*Responsive Grid Container

	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		3;
	dw-num-cols-tablet:		6;
	dw-num-cols-desktop:	8;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

#website{
	display:none;
}

.container{
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100vw;
height: 100vh;
	top: 0;
background-color: transparent;

overflow-x:hidden;/*Turns off horizontal scrollbars from body.*/
overflow-y:auto;

/*allows for optimal scrollling on mobile devices.*/
-webkit-overflow-scrolling:touch; 
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-o-overflow-scrolling:touch;
overflow-scrolling:touch;

/*allows elements to move more slowly or more quickly than other elements.*/
-webkit-perspective:1px;
-moz-perspective:1px;
-ms-perspective:1px;
-o-perspective:1px;
perspective:1px; 
}

.container-fluid{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0;
  padding-left: 0;
}

.clearfix{
	clear: both;
	}

/*Image Styles*/
img, object, embed, video, img.scale-with-grid{
vertical-align: middle;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img{
	width: 100%;
}

/*Text Styles*/
h1{
	text-align: center;
	font-size: 100%;
	margin: 0.67em 0;
	text-transform:lowercase;
	letter-spacing:1%;
	}
	
h3, h4, h5, h6, p1, p2{
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 0;
	padding-left: 1em; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

/*Link Styles*/
a{
	background-color: transparent;
	color: #FFF;
	text-decoration: none;
	 -webkit-text-decoration-skip: objects;
}

a:hover, a:active, a:focus, a:visited, a:link{
	width: inherit;
	text-decoration:none;
	outline-width: 0;
}

a img{ /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	visibility: 0;
	border-image: none;
	border-style:none; /* removes outline from logo */
	max-width: 100%;
	height: auto;
}

.iwrap a{
	text-decoration: none;
}

/*Header Styles*/
header{
	background-color: #fff;
	width: 100vw;
	height: 80px;
	margin: 0;
	position:sticky; /*Fixed positioning does not work for chrome, firefox*/
	position: -webkit-sticky; /*Fixed positioning does not work for safari*/
	top: 0;
	left:0;
	overflow:visible;
	clear: both;
	z-index: 100;
	
	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
	}

.mainNav{
	display: block;
	width: 100%;
	height: 80px;
	margin: 0;
	text-align:right;
	text-decoration: none;
	}

#headerLogo{
	display: block;
	position:absolute;
	left: 0;
	height:inherit;
	width:300px;
	padding: 20px 0 20px 30px;
	overflow:hidden;
	opacity: 0;

	/*transition for when yScroll reaches xxx px*/
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition:all 0.3s ease-in;
	transition: all 0.3s ease-in;
}

#headerLogo img{
	float: left;
	clear: right;
	height: 100%;
	width: 100%;
}/*needed to make logo flush left for firefox*/

.mainNav a, #headerLogo:active, #headerLogo:focus, #headerLogo:visited, #headerLogo:link, .menu-xl a:active, .menu-xl a:focus, .menu-xl a:visited, .menu-xl a:link, .menuTrigger a:hover, .menuTrigger a:active, .menuTrigger a:focus, .menuTrigger a:visited, .menuTrigger a:link{
	color: #555555;
	text-decoration: none;/* removes blue color from a: elements in MainNav */
	outline: none;/* removes dotted line in firefox, chrome, IE8 and above */
	}

.menu a:active, .menu a:focus, .menu a:visited, .menu a:link{
	color: #fff;
	text-decoration: none;/* removes blue color from a: elements in MainNav */
	outline: none;/* removes dotted line in firefox, chrome, IE8 and above */
	}
		
.menu li:hover, #headerLogo:hover, .menuLink-xl li:hover, .menuTrigger a:hover{
	/*opacity: .5;*/
	text-decoration: none;/* removes blue color from a: elements in MainNav */
	outline: none;/* removes dotted line in firefox, chrome, IE8 and above */
	}

/*Menu-xl*/
.menu-xl{
	display: inline-block;
	height: inherit;
	padding-right: 40px; /* 1 em to 10 px*/
	list-style:none;
	white-space: nowrap; /* inline-display ads border to li, this removes border */
	}
	
.menu-xl li{
	display: inline-block;
	padding: 32px 20px 32px 0;
	}
	
.menuLink-xl{
	display:block;
	font-style: normal;
	text-decoration: none;
	text-transform:lowercase;
	font-size: 100%;
	font-weight:normal;
	vertical-align:middle;
}

.menuLink-xl::after{
  display: block;
  content: "";
}

.menuLink-xl + .menuLink-xl::before{
  display: inline-block;
  padding-right: 1.25rem;
  color: #555555;
  content: "/";
  text-decoration: none;
}

/*.menuTrigger*/	
li:tap.menuTrigger-icon{
	display: block;
	color: #fff;
	text-decoration:none;
	}/*the menu is revealed after the menuTrigger is clicked*/

.menuTrigger{
display: none;
height: inherit;
vertical-align: middle;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
background: transparent;
}

.menuTrigger-icon{
display: inline-block;
font-size: 2rem; 
color: #fff;
padding: 20px 30px 20px 20px; 
content: "";
background: no-repeat center center;
  -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
}

/*.menu*/	
.main li.tap{
	display: block;
	}	

.menu{
	display: none;
	margin-top: 0;
	}
	
.menu li{
	background: #555555; 
	opacity:.8;
	text-align: right;
	border-bottom: 1px dotted #FFF;
	}

.menu li:first-child{
	margin-top: 0;
	}

.menu li:last-child{
	border-bottom: none;
	}

.menuLink, .menuLink_mobile, .menuLink_tablet{
	display:block;
	font-style: normal;
	text-decoration: none;
	padding: 10px 30px; /* 1 em to 10 px*/
	text-transform:lowercase;
	font-size: 100%;
	font-weight:normal;
}

/*ScrollSection*/
	
/*Parallax Styles Start
Parallax will flex to height on inner content*/
#parallax{
	position:relative;
	z-index: 1;
	overflow-x:hidden;
	overflow-y:auto;
		
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	}
		
.vh_quarter{
	width: 100%;
	height: 25vh;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	overflow:hidden;
	z-index:100;
	
	/*perspective needed on parent element to transform*/
	-webkit-perspective: 20px; /*Chrome, Safari, Opera*/
	perspective: 20px;
	perspective-origin:0 bottom;
	}
	
.vh_half{
	width: 100%;
	height: 50vh;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	position:relative; /*Allows child element to be positioned absolute to parent element*/
	overflow:hidden;
	z-index:1;
	
	/*perspective needed on parent element to transform*/
	-webkit-perspective: 20px; /*Chrome, Safari, Opera*/
	perspective: 300px;
	perspective-origin:0 bottom;
	}

.vh_full{
	min-width: 100%;
	height: 100vh;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	overflow:hidden;
	z-index:1;
	
	/*perspective needed on parent element to transform*/
	-webkit-perspective: 300px; /*Chrome, Safari, Opera*/
	perspective: 300px;
	perspective-origin:0 bottom;
	}

.back{
	/*Speed background moves, must apply perspective to parent element for translateZ to work*/
	-webkit-transform:translateZ(-1px) scale(2);
	-moz-transform: translateZ(-1px) scale(2);
	-ms-transform: translateZ(-1px) scale(2);
	-o-transform: translateZ(-1px) scale(2);
	transform: translateZ(-1px) scale(2);
	}

.middle{
	/*Speed background moves, must apply perspective to parent element for translateZ to work*/
	-webkit-transform:translateZ(-.5px) scale(1);
	-moz-transform: translateZ(-.5px) scale(1);
	-ms-transform: translateZ(-.5px) scale(1);
	-o-transform: translateZ(-.5px) scale(1);
	transform: translateZ(-.5px) scale(1);
	}

.bg_drawing{
	position: relative;
	margin-top: -100vh;
	padding: 0;
	background-image:url("../_vectorgraphics/KKD_Doodle-01.svg");
	background-position:center center;
	background-repeat: no-repeat;
	/*background-color:transparent;*/
	background-size:cover;
	opacity:.3;
	width: 100%;
	height: 100vh;
	z-index:2;
	}

.small_bg_drawing1{
	position: relative;
	margin-top: 0;
	padding: 0;
	background-image:url("../_vectorgraphics/KKD_Doodle-01.svg");
	background-position:center center;
	background-repeat: no-repeat;
	/*background-color:transparent;*/
	background-size:cover;
	opacity:.3;
	width: 100%;
	height: 50vh;
	z-index:2;
	}

.small_bg_drawing2{
	position: relative;
	margin-top: -20vh;
	padding: 0;
	background-image:url("../_vectorgraphics/KKD_Doodle-01.svg");
	background-position: center center;
	background-repeat: no-repeat;
	/*background-color:transparent;*/
	background-size:cover;
	opacity:.3;
	width: 100%;
	height: 50vh;
	z-index:2;
	}
/*Parallax Styles End*/

/*Home Section*/
.fade-out{
	opacity: 0;
	}

.fade-in{
	opacity: 1;
	}	
	
#homeSection{
	display: block;
	width: 100%;
	height: 100vh;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	position:relative; /*Allows child element to be positioned absolute to parent element*/
	z-index:5;
	
	-webkit-backface-visibility: hidden;/*removes animation flash of a transformed image in a child element*/
	backface-visibility: hidden;
	}

#logoWrapper{
	display:block;
	position:absolute; /*child is positioned absolute to parent element*/
	width: 100vw;
	top: 35vh;
	z-index:2;
	}

#homeLogo{
	display: block;
	max-width: 60vw;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	
		/*transition for when yScroll reaches xxx px*/
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

h3.introParagraph{
	display:block;
	font-size: 130%;
	font-weight: normal;
	color: #fff;
	margin: 5% auto;
	padding: 0 12%;
	letter-spacing:1%;
	word-wrap:break-word;
	line-height: 1.5;
	opacity:1;
}

/*artwork Section*/
#artworkSection{
	display: block;
	margin: 0;
	width: 100%;
	height:auto;
	padding:0;
	background-color:#fff;
	position:relative; /*Allows child element to be positioned absolute to parent element*/
	z-index:10;
	}

/*work Section*/
/*table of contents*/
#workSection {
	display: none;
	width: 100vw;
	height: auto;
	margin: 0;
	padding: 10% 0;
	background-color:#fff;
	position:relative; /*Allows child element to be positioned absolute to parent element*/
	z-index:50;
	
	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
}

#workSectiontablet{
	display:block;
	width: 100vw;
	height: auto;
	margin:0;
	padding: 15% 0;
	background-color:#fff;
	position:relative;/*Allows child element to be positioned absolute to parent element*/
	z-index:50;

	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
}

#workSectionmobile{
	display:block;
	width: 100vw;
	height: auto;
	margin:0;
	padding: 15% 0;
	background-color:#fff;
	position:relative;/*Allows child element to be positioned absolute to parent element*/
	z-index:50;

	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
	}
	
/*Main Headline*/
.subHead h3{
	display: block;
	width: 80%;
	color: #888888;
	font-size: 150%;
	font-weight:200;
	line-height: 120%;
	text-align:center;
	letter-spacing:1%;
	word-wrap:break-word;
	margin: 0;
	padding: 0;
	z-index:5;
	
	/*position copy block in middle of parent*/
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	}

/*Image Boxes*/
.rowOne, .rowTwo, .rowThree, .rowFour {
	text-align:center;
	max-width: 80vw;
	margin: 0 auto;
	padding: 0;
	}

.artPanel {
	position: absolute; 
	width: 100%;
	height: auto;
	padding: 0 ;
	background-color:#555555;
	margin: 0;
	vertical-align:middle;
	opacity: 1;
	overflow:hidden;
	}

.artPanelwrap{
	display:inline-block;
	position: relative; /*parent element for ".transbox". position must be relative*/
	width: 20%;
	max-width: 24.7%;
	height: auto;
	padding-bottom:20%;
	box-sizing:border-box;
	}

.colorblock_d{
	position: absolute; /*parent element for ".transbox". position must be relative*/
	width: 100%;
	height: 100%;
	background-color: #d0d3d4;
	}
	
.colorblock_e{
	position: absolute; /*parent element for ".transbox". position must be relative*/
	height: 100%;
	width: 100%;
	background-color: #ecf0f1;
	}

.colorblock_w{
	position: absolute; /*parent element for ".transbox". position must be relative*/
	height: 100%;
	width: 100%;
	background-color: #fff;
	}

.colorblock_f{
	position: absolute; /*parent element for ".transbox". position must be relative*/
	height: 100%;
	width: 100%;
	background-color: #f7f9f9;
	}	
	
.artPanel img{
	min-width: 100%;
	min-height: auto;
	}	
	
.transbox h3{
	display: none; /*removes copy from under img boxes, copy is shown on hover*/
	position: absolute;
	}
	
.artPanel:hover a img{
	display: block;
	opacity: .3;
	}
	
.artPanel:hover .transbox h3{
	display: block;
	width:100%;
	height:auto;
	padding: 5%;
	cursor: pointer;
	margin: auto;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	font-weight:100;
	color: #fff;
	font-size: 140%;
	letter-spacing:1px;
	line-height: 125%;
	vertical-align:middle;/*element is placed in the middle of parent element*/
	
	/*position copy block in middle of parent*/
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	}

/*Work Section - All Pages*/
#packaging, #brand, #collateral, #photo, #publicRelations, #uiux {
	display: none;
	width:100vw;
	height: 0;
	overflow:hidden;
	opacity:1;
	
	/*transition for when yScroll excedes viewport*/
	-webkit-transition: transform 0.3s ease-out;
	-moz-transition: transform 0.3s ease-out;
	-ms-transition: transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	}

#packaging:target, #brand:target, #collateral:target #photo:target, #publicRelations:target, #uiux:target{
	text-dectoration: none;
	}
	
#illustration{
	display: block;
	width:100vw;
	height: 0;
	overflow:hidden;
	opacity:1;
	
	/*transition for when yScroll excedes viewport*/
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition: all 0.3s ease-out;
	}

#illustration:target{
	text-dectoration: none;
	}
	
.workWrapper{
	width: 100%;
	margin: 0;
	padding: 5% 5% 10% 5%;
	position:relative;
	overflow:hidden;
	z-index:3;
	
	/*shadow*/
	-webkit-box-shadow:inset 0 0 5px -3px #000000 ;
	-moz-box-shadow:inset 0 0 5px -3px #000000;
	-ms-box-shadow:inset 0 0 5px -3px #000000;
	-o-box-shadow:inset 0 0 5px -3px #000000;
	box-shadow:inset 0 0 5px -3px #000000;
	}

.pageBreak{
	display: block;
	width: 100%;
	margin: 8% 0 5% 0;
	border-bottom: 1px solid #555555;
	}

#trigger{
	margin: 0;
	padding: 0;
	}
	
/*Copy Elements*/
.workText h1{
	text-align: left;
	padding: 0 0 0 0;
	font-size: 400%; /*Size does not show in dreamweaver, view in browser. Scales nicely.*/
	font-weight: bold;
	color:#d0d3d4;
	text-transform:lowercase;
	letter-spacing:1%;
	vertical-align:top;
	}

.leftPanel h2, .rightPanel h2{
	display: block;
	width: 100%;
	color: #666666;
	font-size: 11pt;
	font-weight:600;
	line-height:15pt;
	text-align:left;
	text-transform:uppercase;
	word-wrap:break-word;
	margin: 0;
	padding: 15% 0 5% 0;
	vertical-align:top;
	z-index:5;
	}

.leftPanel h3, .rightPanel h3{
	display: block;
	width: 100%;
	color: #666666;
	font-size: 11pt;
	font-weight:600;
	line-height:15pt;
	text-align:left;
	text-transform:uppercase;
	word-wrap:break-word;
	margin: 0;
	padding: 0 0 5% 0;
	vertical-align:top;
	z-index:5;
	}

.leftPanel h4, .rightPanel h4{
	display: block;
	width: 100%;
	color: #666666;
	font-size: 11pt;
	/*font-weight:400;*/
	line-height:15pt;
	text-align:left;
	word-wrap:break-word;
	margin: 0;
	padding: 0 0 5% 0;
	vertical-align:top;
	z-index:5;
	}

.leftPanel p{
	color: #555555;
	letter-spacing:0;
	font-size: 9.5pt;
	line-height: 18px;
	padding: 0 0 6% 0;
	}

.leftPanel p:last-child{
	padding: 0 0 6% 0;
	}

.rightPanel p{
	padding: 8px 0;
	}
	
.rightPanel h3:last-child{
	padding: 0;
	}

/*Work Section - Left Panel Elements*/
.leftPanel{
	display:inline-block;
	vertical-align: top;
	width: 22%;
	height: inherit;
	z-index:2;
	padding: 0 3% 0 0;
	margin-top:0;
	overflow:visible;
	}
		
/*Work Section - Right Panel Elements*/
.rightPanel{
	display: inline-block;
	vertical-align:top;
	width: 70%;
	height: inherit;
	padding-left: 3%;
	margin-top: 0;
	border-left: 1px solid #555555;

	}
	
div.workColumnA, div.workColumnB{
	display: inline-block;
	vertical-align:top;
	padding: 0;
	width: 49.7%;
	height: auto;
	float:left;
	clear:right;
	}

div.workColumnC{
	display: inline-block;
	vertical-align:top;
	padding: 0 0 6% 0;
	width: 49.7%;
	height: auto;
	}

div.workColumnA img, div.workColumnB img, div.workColumnC img{
	display: block;
	border: 1px solid #bbbbbb;
	width: 100%;
	max-height:100%;
	height: auto;
	}
		
.logoPanelone{
	display:inline-block;
	position: relative; /*parent element for ".transbox". position must be relative*/
	width: 30%;
	height: auto;
	padding-left:5%;
	margin: 0 1% 5% 0;
	overflow:hidden;
	vertical-align:middle;
	opacity: 1;
	}

.logoPaneltwo{
	display:inline-block;
	position: relative; /*parent element for ".transbox". position must be relative*/
	width: 50%;
	height: auto;
	padding-left:5%;
	margin: 0 1%;
	overflow:hidden;
	vertical-align:middle;
	opacity: 1;
	}
	
.logoPanel img{
	min-width: 100%;
	min-height:auto;
	}	
	
/* cycle-slideshow */
div.cycle-slideshow{
	height: 100%;
	}	

div.cycle-slideshow img{
	width: 100%;
	height: auto;
	cursor: zoom-in;
	}

/*The Modal container - can be anything you want*/
.modal {
	position: relative;
	display: block;
	cursor: zoom-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.modal .modal-content {
  visibility: hidden;
  width: 50vw;
  background-color: #ffffff;
	color: #666666;
	padding: 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 200;
	left: 0;
	top: 0;
	text-underline-position: below;
}

.modal-content p{
	text-align: right;
	padding: 0px 10px 10px 10px;
	text-decoration: none;
}

/* modal arrow */
.modal .modal-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #666666;
}

/* Toggle this class - hide and show the popup */
.modal .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the modal) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


.close:hover, .close:focus {
	text-decoration: none;
	cursor: pointer;
}

.cycle-next, .cycle-prev{
	display: block;
	font-size: 220%;
	color: #ebb800;
	z-index: 9999;
	cursor: pointer;
	}	

.cycle-next{
	height: 11%;
	position: absolute;
	top: 86%;
	right: 20%;
	/* nonselect below, removes blue selection box on ios device*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	}

.cycle-prev{
	height: 11%;
	position: absolute;
	top: 86%;
	left: 20%;
	/* nonselect below, removes blue selection box on ios device*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	}

/* pager */
.cycle-pager{ 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: -15%; overflow: hidden;
}

.cycle-pager span { 
    font-family: arial; font-size: 30px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active{ color: #ebb800;}
.cycle-pager > *{ cursor: pointer;}
	
/*About Section*/
#aboutSection{
	display: block;
	width: 100%;
	margin: 0;
	padding: 10% 5%;
	background-color:#3F3F3F;
	position:relative;
	z-index:10;
	
	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
}

#aboutSection ul{
	display: inline-block;
	vertical-align: top;
	}

.headshot{
	height: 20%;
	width: auto;
	margin: 0 0 3% 0;
	vertical-align:top;
	padding: 0;
	}

.aboutText button{
	display: block;
	margin-top: 4%;
	padding: .5% auto;
	height: 40px;
	width: 100px;
	vertical-align:bottom;
	text-align:center;
	text-decoration: none;
	background-color:#fff;
	color: #3F3F3F;
	text-transform:uppercase;
	font-size: 70%;
	font-weight:bold;
	border-radius: 4px;
	
	-webkit-box-shadow: 2px 4px 6px 0 #555555;
	-moz-box-shadow: 2px 4px 6px 0 #555555;
	-ms-box-shadow: 2px 4px 6px 0 #555555;
	-o-box-shadow: 2px 4px 6px 0 #555555;
	box-shadow: 2px 4px 6px 0 #555555;
	}
	
.aboutText a:link, .aboutText a:visited{
	color: inherit;
	text-decoration:none;
	}
	
.aboutText a:hover{
	opacity: .5;
	}

.aboutText a:active{
	color: #D9AA00;
	text-decoration:none;
	
	-webkit-box-shadow: 2px 4px 6px -2px #555555;
	-moz-box-shadow: 2px 4px 6px -2px #555555;
	box-shadow: 2px 4px 6px -2px #555555;
	}
	
.aboutText{
	width: 60%;
	margin: 0 0 0 4%;
	padding: 0 4%;
	border-left: 1px solid #fff;
	}

.aboutText h1{
	text-align: left;
	font-size: 600%;
	color: #fff;
	text-transform:lowercase;
	letter-spacing:1%;
	vertical-align:top;
	padding: 0;
	margin: 0;
	}

.aboutText p{
	text-align: left;
	width: 100%;
	margin: 0 auto;
	padding-top: 8pt;
	color: #fff;
	line-height: 1.5em;
	font-size: 9.5pt;
	text-transform:none;
	word-break: normal;
	text-wrap: normal;
	font-weight:200;
	}

.aboutText h3{
	width: 100%;
	margin: 0;
	padding: 10pt 0 0 0;
	font-size: 12pt;
	color: #fff;
	letter-spacing: 2pt;
	text-align: left;
	}

.indent{
	padding: 0 15pt;
	margin: 0;
}

#linkedIn{
	height: 100px;
	padding: 15px 0;
	}

/*Contact Section*/
#contactSection{
	display: block;
	width: 100%;
	height: inherit;
	margin: 0;
	padding: 10% 0;
	background-color:#6B6B6B;
	position:relative;/*parent element for ".input". position must be relative*/
	z-index:10;
	
	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
	}

#contactSection h1{
	font-size: 600%;
	color: #fff;
	text-transform:lowercase;
	letter-spacing:1%;
	padding: 0;	
	margin: 0;
	}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
  color: #fff;
  font-size: 10pt;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{
  color: #fff;
  font-size: 10pt;
}

input::-moz-placeholder, textarea::-moz-placeholder{
  color: #fff;
  font-size: 10pt;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{
  color: #fff;
}

input::placeholder, textarea::placeholder{
  color: #fff;
  font-size: 10pt;
}

input:focus::placeholder, textarea::focus:placeholder{
  color: #fff;
}

input::-ms-placeholder, textarea::-ms-placeholder{
  color: #fff;
  font-size: 10pt;
}

input:focus::-ms-placeholder, textarea:focus::-ms-placeholder{
  color: #fff;
}

/* on hover placeholder */

input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder{
  color: #fff;
  font-size: 10pt;
}

input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder{
  color: #fff;
}

input:hover::-moz-placeholder, textarea:hover::-moz-placeholder{
  color: #fff;
  font-size: 10pt;
}

input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder{
  color: #fff;
}

input:hover::placeholder, textarea:hover::placeholder{
  color: #fff;
  font-size: 10pt;
}

input:hover:focus::placeholder, textarea:hover:focus::placeholder{
  color: #fff;
}

input:hover::placeholder, textarea:hover::placeholder{
  color: #fff;
  font-size: 10pt;
}

input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder{
  color: #fff;
}

#form{
	max-width: 60%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

input{
	margin: 0;
  	width: 100%;
  	height: 50px;
  	max-height: 50px;
  
 	background-color:rgba(170, 170, 170,.5);
  	outline: none;
  	font-size: 10pt;
  	font-weight: bold;
  	color: #fff;
  
  	border: solid 1px #fff;
  	border-bottom: none;
  
  	-webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

input:nth-child(1){
	margin-top: 5%;
	}

input:hover{
	background-color:rgba(107,107,107,1);
	color: #fff;
}

textarea{
  height: 150px;
  max-height: 200px;
  margin: 0;
  
  outline: none;
  font-size: 10pt;
  font-weight:bold;
  color: #fff;

  border: solid 1px #fff;
  background-color:rgba(170, 170, 170,.5);
  
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out;
 }

textarea:hover{
  background-color:rgba(107,107,107,1);
  color: #fff;
}

#name{
	margin-top: 15px;
	border-radius: 6px 6px 0 0;
}

#name, #email{
	width: 90%;
	padding: 0 20px;
}

#message{
	width: 90%;
	padding: 4% 20px;
}
	
#submit{
  width:90%;
  height: 50px;
  max-height: 50px;
  text-align: center;  
  outline: none;
  font-size: 10pt;
  color: #fff;
  
  cursor: pointer;
  
  background-color:rgba(170, 170, 170,.5);
  border: solid 1px #fff;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

#submit:hover{
  background-color:rgba(107,107,107,1);
  color: #fff;
}

#captcha{
	visibility: hidden;
	text-align: middle;
	width: 100%;
	margin: 0 auto;
	padding-top: 10pt;
	color: #fff;
	line-height: 1.5em;
	font-size: 9.5pt;
}

.grecaptcha-badge{ 
	z-index: 10;
	position: sticky;
	bottom: 80px;
}


/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 250px;
  background-color: #ffffff;
  color: #6B6B6B;
	padding: 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  margin-left: -125px;
text-underline-position: below
}
.popup p {
	text-decoration: underline;
}
.popuptext p, .popuptext h3 {
	text-align: left;
	padding: 0px 10px 10px 10px;
	text-decoration: none;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #FFFFFF transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/*The footer*/
footer{
	width: 100%;
	height: auto;
	margin-top:0;
	padding:4% 0;
	clear: both;
	vertical-align: middle;
	overflow:visible;
	background-color:#3F3F3F;
	z-index:10;
	
	-webkit-box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-ms-box-shadow: 0 0 10px #000000;
	-o-box-shadow: 0 0 10px #000000;
	box-shadow: 0 0 10px #000000;
}

footer p{
	margin: 0;
	padding: 0 50px;
	padding-bottom: 15px;
	color: #888888;
	font-size: 8pt;
	font-style: normal;	
	text-align: center;
	word-wrap:break-word;
	overflow:hidden;
	line-height: 10pt;
}


@media (max-width: 480px){
	
body{
	position: inherit;
	}

/*Header Styles*/
.menu-xl{
	display: none;
	}

.menuTrigger{
	display: block;
	}
	
.menuLink_tablet{
	display: none;
	}
	
.menuLink_mobile{
	display: block;
	}

#headerLogo{
	padding-top: 25px;
	max-width: 70vw;
	}

/*Home Section*/
h3.introParagraph{
	margin: 10% auto;
	padding: 0 15%;
}

/*Work Section*/
/*table of contents*/
#workSection, #workSectiontablet{
	display: none;
	}

#workSectionmobile{
	display: block;
	padding: 10% 15% 15% 15%;
	}
	
.artPanelwrap{
	display: block;
	width: 100%;
	max-width: 100%;
	padding-bottom:100%;
	margin-top: 10px;
	}

.subHead h3{
	width: 100%;
	font-size:200%;
}

.artPanel:hover .transbox h3{
	font-size:200%;
	}

/* Individual Pages*/
.workWrapper{
	padding: 10% 10% 20% 10%;
}

.leftPanel, .rightPanel{
	display: block;
	padding: 0;
	border:none;
	min-width: 100%;
	height: inherit;
	}
	
div.pageBreak{
	margin: 20% 0 10% 0;
	}
	
div.workColumnA, div.workColumnB{
	display: block;
	width: 100%;
	float: none;
	}	
		
/*Mobile About Section*/
#aboutSection{
	width: 100%;
	padding: 15%;
	}

.aboutText{
	width: 100%;
	margin: 0;
	padding: 0;
	border-left: none;
	}

.aboutText h1{
	font-size: 500%;
	}	
	
/*Mobile Contact Section*/
#contactSection{
/*	max-width: 480px;*/
	padding:10% 0 10% 0;
	}

#contactSection h1{
	font-size: 400%;
	font-weight:bold;
	}

#form{
	max-width: 70vw;
	}
	
.grecaptcha-badge{ 
	visibility: hidden;
}

#captcha{
	visibility: visible;
}
	
}
	
@media (max-width: 768px) and (min-width: 481px){

/*Tablet Header Styles*/
.menu-xl{
	display: none;
	}

.menuTrigger{
	display: block;
	}

.menuLink_tablet{
	display: block;
	}
	
.menuLink_mobile{
	display: none;
	}
	
/*Home Section*/
#homeLogo{
	max-width: 60vw;
	}

/*Work Section*/
/*table of contents*/
#workSection, #workSectionmobile{
	display:none;
}

#workSectiontablet{
	display: block;
}

.artPanelwrap{
	width: 30%;
	max-width: 30%;
	padding-bottom:30%;
	}

.subHead h3{
	font-size:100%;
}

/* Individual Pages*/
.workWrapper{
	width: 100vw;
	padding: 15% 15% 20% 15%;
}

.workWrapper .fade-out{
	opacity: 0;
}

.leftPanel{
	width: 40%;
	}

.rightPanel{
	width: 55%;
	padding-left: 5%;
	}

.leftPanel p:last-child{
	padding: 0 0 6% 0;
	}

div.workColumnA, div.workColumnB, div.workColumnC{
	display: block;
	width: 100%;
	}
	
div.workColumnA img{
	border: 1px solid #bbbbbb;
	border-bottom: 0;
	}
	
.pageBreak{
	display: inline-block;
	height: 100%;
	clear: both;
	width: 100%;
	margin: 10% 0;
	}

/*Mobile About Section*/
#aboutSection{
	width: 100%;
	padding: 15%;
	}

.headshot{
	height: 28%;
	padding:0 0 3% 0;
	}

.aboutText{
	width: 100%;
	margin: 0;
	padding: 0;
	border-left: none;
	}

.aboutText h1{
	font-size: 500%;
	}
	
/*Contact Section*/
#contactSection h1{
	font-size: 400%;
	}
}

@media (max-width: 991px) and (min-width: 769px){

/*Tablet Header Styles*/
.menu-xl{
	display: none;
	}

.menuTrigger{
	display: block;
	}

.menuLink_tablet{
	display: block;
	}
	
.menuLink_mobile{
	display: none;
	}

/*Home Section*/
#homeLogo{
	max-width: 40vw;
	}

.cycle-pager span{ 
    font-family: arial; font-size: 40px; width: 20px; height: 20px; 
}

/*Work Section*/
/*table of contents*/
#workSection, #workSectionmobile{
	display:none;
}

#workSectiontablet{
	display: block;
}

.artPanelwrap{
	width: 30%;
	max-width: 30%;
	padding-bottom:30%;
	}

/*Mobile About Section*/
#aboutSection{
	width: 100%;
	padding: 15%;
	}

.headshot{
	height: 28%;
	padding:0 0 3% 0;
	}
	
.aboutText{
	width: 100%;
	margin: 0;
	padding: 0;
	border-left: none;
	}
	
}

@media (min-width: 992px){

/*Header Styles*/
.menuTrigger{
	display: none;
	}
	
/*Home Section*/
#homeLogo{
	max-width: 30vw;
	}

.cycle-pager span{ 
    font-family: arial; font-size: 50px; width: 20px; height: 20px; 
}

/*Work Section*/
/*table of contents*/
#workSection{
	display:block;
}

#workSectiontablet, #workSectionmobile{
	display: none;
}

/*Main Headline*/
.subHead h3{
	font-size: 150%;
	}

.artPanel:hover .transbox h3{
	font-size: 150%;
	}
	
/*Mobile About Section*/
#aboutSection{
	width: 100%;
	padding: 10% 0 10% 10%;
	}

.aboutText{
	width: 50%;
	margin: 0 0 0 4%;
	padding: 0 4%;
	border-left: 1px solid #fff;
	}

}

@media (min-width: 1200px){

/*Work Section*/
/*table of contents*/

/*Main Headline*/
.subHead h3{
	font-size: 180%;
	}
	
/*Mobile About Section*/
.aboutText{
	width: 60%;
	}

}

@media (min-width: 1600px){

/*Work Section*/
/*table of contents*/

/*Main Headline*/
.subHead h3{
	font-size: 200%;
	}
}