@charset "UTF-8";

html, body {
width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
	background-color: rgb(245, 245, 245);
}

body {
	  background: url('https://www.jasonkenning.com/src/noise.png'),radial-gradient(ellipse at center, rgb(245, 245, 245) 80%,rgb(202, 202, 202) 100%);
    font-family:'Muli',sans-serif;
    -webkit-font-smoothing:antialiased;
    font-weight:100;
		font-size: 12pt;
    color:#666;
		width: 100%;
    text-transform:uppercase;
}



/* -- ANIMATION -- */



.fadein {
    opacity: 0;
    animation:animationFrames 800ms;
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    animation-iteration-count:1;
    transform-origin:50% 50%;
    animation-fill-mode:forwards;
    animation-delay: 200ms;
/*when the spec is finished*/
    -webkit-animation:animationFrames 800ms;
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    -webkit-animation-delay: 200ms;
    -webkit-animation-iteration-count:1;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-fill-mode:forwards;
/*Chrome 16+, Safari 4+*/
    -moz-animation:animationFrames ease 1s;
    -moz-animation-iteration-count:1;
    -moz-transform-origin:50% 50%;
    -moz-animation-fill-mode:forwards
}

.fadeinPt2 {
    opacity: 0;
    animation:animationFrames 800ms;
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    animation-iteration-count:1;
    transform-origin:50% 50%;
    animation-fill-mode:forwards;
    animation-delay: 350ms;
/*when the spec is finished*/
    -webkit-animation:animationFrames 800ms;
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    -webkit-animation-delay: 350ms;
    -webkit-animation-iteration-count:1;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-fill-mode:forwards;
/*Chrome 16+, Safari 4+*/
    -moz-animation:animationFrames ease 1s;
    -moz-animation-iteration-count:1;
    -moz-transform-origin:50% 50%;
    -moz-animation-fill-mode:forwards
}

@keyframes animationFrames {
0% {
    opacity:0;
    transform:translate(0px,-25px)
}

100% {
    opacity:1;
    transform:translate(0px,0px)
}
}

@-moz-keyframes animationFrames {
0% {
    opacity:0;
    -moz-transform:translate(0px,-25px)
}

100% {
    opacity:1;
    -moz-transform:translate(0px,0px)
}
}

@-webkit-keyframes animationFrames {
0% {
    opacity:0;
    -webkit-transform:translate(0px,-25px)
}

100% {
    opacity:1;
    -webkit-transform:translate(0px,0px)
}
}


@keyframes fadeAndScale {
from {
    opacity:0;
    transform:scale(1.4,1.4)
}

to {
    opacity:1;
    transform:scale(1,1)
}
}

/* -- END ANIMATION -- */







a {
	text-decoration:none; margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

#wrap {
	max-width:100%;
	background:#FFF;

	overflow-x: hidden;

}



@-webkit-keyframes FloatingPurple {
    0%{background-position:0% 28%}
    50%{background-position:100% 73%}
    100%{background-position:0% 28%}
}
@keyframes FloatingPurple {
    0%{background-position:0% 28%}
    50%{background-position:100% 73%}
    100%{background-position:0% 28%}
}

@-webkit-keyframes TriangleIntro {
	0%{transform: scale(3)}
	100%{transform: scale(1)}
}
}
@keyframes TriangleIntro {
    0%{transform: scale(3)}
    100%{transform: scale(1)}
}


header {
	width:90vw;
	min-width: 400px;
	min-height: 355px;
	margin: 0 auto;
	margin-top: 20px;
	background: linear-gradient(125deg, #50468f, #00bbc5, #c500a7);
	background-size: 500% 500%;
	-webkit-animation: FloatingPurple 30s ease infinite;
	animation: FloatingPurple 30s ease infinite;
	display:flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;

	-webkit-clip-path: polygon(0 48%, 1% 67%, 1% 94%, 5% 98%, 36% 100%, 52% 99%, 76% 99%, 82% 100%, 99% 98%, 100% 89%, 100% 73%, 99% 25%, 100% 9%, 99% 1%, 77% 0%, 56% 2%, 33% 1%, 4% 1%, 1% 7%);
	clip-path: polygon(0 48%, 1% 67%, 1% 94%, 5% 98%, 36% 100%, 52% 99%, 76% 99%, 82% 100%, 99% 98%, 100% 89%, 100% 73%, 99% 25%, 100% 9%, 99% 1%, 77% 0%, 56% 2%, 33% 1%, 4% 1%, 1% 7%);
}

#logowrap {
	display: block;
	width: 100%;

}

#logo {
  display: block;
  margin: 0 auto;
	width: 100%;
	max-width: 700px;
	padding-top: 10px;
}
#logowrap #admire {
  display: block;
  margin: 0 auto;
	text-align: center;
	width: 100%;
	color: #96eaf5;
	font-size: 1.5em;
	text-transform: none;
	padding-top: 25px;
	max-width: 700px;

}


#canvas {
display: none;
}


nav {
text-align: center;
margin: 0 auto;
padding: 60px 0 20px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 980px;

}

nav a {

text-decoration:none;
display: flex;
align-items: center;
justify-content: center;

}

nav a span{
cursor: pointer;
z-index: 100;
color: #fff;
text-transform:uppercase;
padding-bottom: 5px;
border-bottom: 2px solid transparent;
font-size: 3rem;
}



nav a:hover span{

border-bottom: 2px solid rgba(255,255,255,0.4);
transition: all 0.3s;
}



h3 {color:#666;}
h3 a {color:#333; transition: color 250ms}
h3 a:hover {color:#333;}




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

p {
    text-align:center
}

div {
    margin:0 auto;
}

#container {

width:90vw;

	}

#container .section {

	display:flex;
	flex-direction: column;

}

#container .previous-shows {

	display:flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 30px;

}
.shows {
	width:40%;
	height:40vh;

}

.previous-shows .shows {
	width:90vw;
	height:40vh;

}


#show {
	background-color: white;
	width: 100%;
	height: 400px;
	background: url('https://www.jasonkenning.com/src/outside-link.jpg') no-repeat center;
	background-size: cover;
	margin-bottom: 25px;
	-webkit-clip-path: polygon(100% 0, 98% 100%, 0 96%, 0 3%);
	clip-path: polygon(113% 10%, 234% 107%, 2% 90%, 5% 0%);
}
#depic {
	background-color: white;
	width: 100%;
	height: 400px;
	background: url('https://www.jasonkenning.com/src/depictions-link.jpg') no-repeat center;
	background-size: cover;
	margin-bottom: 25px;
	-webkit-clip-path: polygon(100% 0, 98% 100%, 0 96%, 0 3%);
	clip-path: polygon(100% 0, 98% 100%, 0 96%, 0 3%);
}
#never {
	background-color: red;
	width: 100%;
	height: 400px;
	background: url('https://www.jasonkenning.com/src/nevermind-link.jpg') no-repeat center;
	background-size: cover;
	-webkit-clip-path: polygon(79% 0, 100% 1%, 99% 82%, 100% 98%, 84% 100%, 2% 100%, 0 2%);
	clip-path: polygon(79% 0, 100% 1%, 99% 82%, 100% 98%, 84% 100%, 2% 100%, 0 2%);
}

#fine {
	background-color: #345c8d;
	background: url('https://www.jasonkenning.com/src/fine-art-link.jpg') no-repeat center;
	background-size: cover;
	-webkit-clip-path: polygon(2% 0, 100% 1%, 100% 85%, 99% 100%, 18% 97%, 0 99%, 1% 11%);
	clip-path: polygon(2% 0, 100% 1%, 100% 85%, 99% 100%, 18% 97%, 0 99%, 1% 11%);
}
#ill {
	background-color: #e1c4bc;
	background: url('https://www.jasonkenning.com/src/illustration-link.jpg') no-repeat center;
	background-size: cover;
	-webkit-clip-path: polygon(2% 0, 100% 1%, 100% 85%, 99% 100%, 18% 97%, 0 99%, 1% 11%);
	clip-path: polygon(2% 0, 100% 1%, 100% 85%, 99% 100%, 18% 97%, 0 99%, 1% 11%);
}

#desi {
	background-color: #345c8d;
	background: url('https://www.jasonkenning.com/src/design-link.jpg') no-repeat center;
	background-size: cover;
	-webkit-clip-path: polygon(2% 0, 100% 1%, 100% 85%, 99% 100%, 18% 97%, 0 99%, 1% 11%);
	clip-path: polygon(2% 0, 100% 1%, 100% 85%, 99% 100%, 18% 97%, 0 99%, 1% 11%);
}


h1 {
	display: block;
	width: 100%;
	font-family: 'Roboto', sans-serif;
  font-weight: 100;
	font-size: 3.5rem;
	color:#757575;
  border-bottom: 1px solid #adadad;

}

h2 {

		margin: 0;
    padding-top: 5px;
		padding-bottom: 25px;
    text-align: center;
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		font-size: 3.5rem;
		color: #757575;;


}
.container a h3 {
  text-shadow: 0px 2px 4px  rgba(0,0,0, 0.6);
}


h3 a {color:inherit; text-decoration:none}



@-webkit-keyframes FloatingYellow {
		0%{background-position:0% 99%}
		50%{background-position:100% 2%}
		100%{background-position:0% 99%}
}
@keyframes FloatingYellow {
		0%{background-position:0% 99%}
		50%{background-position:100% 2%}
		100%{background-position:0% 99%}
}

.contactme{
	background: linear-gradient(23deg, #ffdd54, #00bbc5, #764aff);
	background-size: 300% 300%;
	-webkit-animation: FloatingYellow 41s ease infinite;
	animation: FloatingYellow 41s ease infinite;
	padding: 25px;
  margin-bottom: 40px;
}

.contactme span{
		max-width: 800px;
	display: block;
	font-family: 'Muli', sans-serif;
	text-transform: none;
	font-size: 1.5em;
  color: #3b177b;
	margin: 0 auto;
	padding: 25px 0;

}
.contactme span a{
	font-size: 2.5rem;
	font-family: 'Roboto',sans-serif;
	color: #fff;

}





#footer {
	width:100%;
	 background:#B9B9B9;
	  display:block;
		 position:relative;
		  bottom:0;
			 border-top:1px solid #999;
			  text-align:center;
				 letter-spacing:2px;
				  padding:5px 0;
				 }

@media (min-width: 1001px) {

header {
		height:60vh;
		width:65vw;
		max-width:1200px;
}
	.previous-shows .shows {
		width:400px;
		height:40vh;

}

nav a {
display: inline-flex;
text-decoration:none;
padding: 2% 2%;
}

nav a span{
font-size: 1.6rem;
}

#container {
	max-width:75vw;
	min-width: 690px;
}

#canvas {
		display: block;
		margin: 0 auto;
    position: absolute;
    opacity: 0.10	;
    width: 40%;
		-webkit-animation: TriangleIntro 3s ease ;
		animation: TriangleIntro 3s ease;
		overflow: hidden;
	}


}
/*

@media (min-width:500px) and (max-width:1250px){
  body{overflow-x: auto;}
  .pdf-svg {position:absolute; top:110px; right:2%;transition:all 0.25s linear}
  .pdf-svg:hover {top:120px;}

.container { width: 600px; margin: 0 auto; text-align: center;}
.container a {width: 400px; height: 200px;}
.container section:nth-child(2) a{width: 400px;}
.container a:after {
	bottom:40px;}
}
@media (min-width:900px){
  body{overflow-x: auto;}
  .pdf-svg {position:absolute; top:110px; right:2%;transition:all 0.25s linear}
  .pdf-svg:hover {top:120px;}
.container { margin-top: 25px;}
.container a {width: 400px; height: 380px;}
.container section:nth-child(2) a{width: 400px; height: 380px;}
.container a:after {
	bottom:150px;}
}
*/