* {
    transition: all 750ms ease-in-out;
    }
html, body {
  margin: 0;
  padding: 0;
}

body {
	background: black;
}

canvas {
  display: block;
  width: 100%; 
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; 
}

article {
	width: 100%;
	height: 100vh;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 48px;
}
section {
	background-image: url(postcard_poster.jpg);
	background-position: center;
    background-size: cover;
	width: 100%;
	height: 100%;
	position: relative;
}

@media (min-width: 1940px) {
section {
	background-size: cover;
}
}
h1 {
    height: 72px;
	width: 72px;
	position: absolute;
    left: calc(50% - 36px);
	top: 36px;
	z-index: 100;
	text-indent: -9999px;
	background-image: url("kc_logo_trans_96.png");
	background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}
nav {
	margin-top: 20px;
	position: absolute;
	bottom: 104px;
	/*            right: 140px;*/
	width: 100%;
	left: 0;
	z-index: 99;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 90px;
}
nav ul li {
/*            margin-top: -20px;*/
}
nav ul li a {
	display: block;
	margin-top: -20px;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	color: black;
	text-align: right;
	font-size: 12vh;
	line-height: .75;
	letter-spacing: -.025em;/*    text-indent: -200px;*/
/*    margin-right: 92px;*/
}
nav ul li a span {
	/*             width: 90px;*/
/*             background: #111;;*/
	display: inline-block;
}
nav ul li a:hover {
	color: white;
}
    
    #feature {
        position: absolute;
/*
        right: 72px;
        bottom: 72px;
        padding: 16px 24px;
        display: inline-block;
        text-align: right;
*/
        right: calc(50% - 270px);
        bottom: 24px;
        padding: 0;
        text-align: center;
        
        color: white;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 3px;
        height: auto;
        width: 100%;
        max-width: 540px;
        min-width: 300px
    }
    
  #feature h2 span#title {
      background: black;
      font-size: 1rem;
      padding: 12px;
      line-height: 48px;
      font-weight: normal;
       -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }  
        #feature p span{
        line-height: 48px;
        background: black;
        padding: 12px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    #description {
        letter-spacing: 1px;
        text-transform: none;
    }

    #feature.none {
        display: none;
    }
    
    #link.none {
        display: none;
    }

#feature p span#link{
        line-height: 43px;
        padding: 0;
        background: none;
    }

#feature p span#link a{
  display: inline-block;
  background: black;
  text-decoration: none;
  padding: 0px 16px;
  transition: all 100ms ease-in-out;
  height: 43px;
  
}
#link a:link, #link a:visited {
  color: white;
}

#link a:hover {
    border-radius: 24px;
}

#link a:active {
    color: yellow;
}
/*FEATURE ANIMATION */
    
@keyframes feature-animation {        
    0% {
    opacity : 0;
    bottom : -24px;
    }
    92% {
    opacity : 1;
    bottom : 26px;
    }  
    100% { 
    opacity : 1;
    bottom : 24px;
    }      
}


@keyframes feature-animation-18 {        
    0% {
    opacity : 0;
    bottom : -24px;
    }
    92% {
    opacity : 1;
    bottom : 20px;
    }  
    100% { 
    opacity : 1;
    bottom : 18px;
    }      
}

@keyframes feature-animation-12 {        
    0% {
    opacity : 0;
    bottom : -24px;
    }
    92% {
    opacity : 1;
    bottom : 14px;
    }  
    100% { 
    opacity : 1;
    bottom : 12px;
    }      
}

@keyframes feature-animation-6 {        
    0% {
    opacity : 0;
    bottom : -24px;
    }
    92% {
    opacity : 1;
    bottom : 8px;
    }  
    100% { 
    opacity : 1;
    bottom : 6px;
    }      
}

#feature.add-animation {
  animation: feature-animation 750ms ease-in-out;
}

 /*END ANIMATION */   
    
    
div#questionholder {
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
	height: 100%;
}


#question {
	background: black;
/*
	border-top: solid 2px rgba(255, 255, 255, 0.2);
	border-left: solid 2px rgba(255, 255, 255, 0.2);
	border-bottom: solid 2px rgba(0, 0, 0, 0.2);
	border-right: solid 2px rgba(0, 0, 0, 0.2);
	outline: solid 2px rgba(0, 0, 0, 0.5);
*/
	border: none;
	outline: none;
	color: white;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 1em;
	height: 48px;
	padding: 0px 32px;
	position: relative;
	z-index: 1000;
}

/*////////////Media Queries///////////////*/

@media (min-height: 901px) {
    div#questionholder.flexcenter {
       height: 100%;
    }
}
    
@media (max-height: 900px) {
    div#questionholder.flexcenter {
       height: 332px;
    }
}
    
@media (max-height: 640px) {
    div#questionholder.flexcenter {
       height: 320px;
    }
    
     h1 {
        top: 24px;
    }
    
    article {
        padding: 24px;
    }
}

@media (max-width: 1280px) {
    article {
        padding: 36px;
    }
}

@media (max-width: 640px) {
    
    div#questionholder.flexcenter {
       height: 288px;
    }
    h1 {
        top: 24px;
    }
    #question {
        width: 340px;
        padding: 0px 16px;
    }
    article {
        padding: 24px;
    }
    section {
        background-position: 50% 20%;
    }
    #feature {
        right: 0%;
        bottom: 18px;
        padding: 0px 12px;
        max-width: 100%;
        min-width: 300px
    }
    #feature.add-animation {
      animation: feature-animation-18 750ms ease-in-out;
    }    
    
}
    
@media (max-width: 420px) {
    
    #feature {
        bottom: 12px;
        letter-spacing: 2px;
    }
    
    #feature.add-animation {
      animation: feature-animation-12 750ms ease-in-out;
    }

    #question {
        width: 292px;
        padding: 0px 10px;
        font-size: 1em;
    }
    
    #description {
        letter-spacing: .5px;
        font-size: .9em;
    }

    article {
        padding: 12px;
    }
}
    
@media (max-width: 370px) {

    #question {
        width: 280px;
        padding: 0px 8px;
    }
    
    #feature {
        bottom: 6px;
        letter-spacing: 1px;
        line-height: 42px;
        font-size: .9em;
    }
    
    #feature.add-animation {
      animation: feature-animation-6 750ms ease-in-out;
    }
    
    #feature p {
        margin: .5em 0;
    }
    
    #feature h2 {
         margin: .5rem 0;
    }
    
    #feature h2 span#title {
        padding: 12px;
        line-height: 42px;
    }
    
    #feature p span{
        line-height: 42px;
        padding: 12px;
    }
    
    #feature p span#link a {
        padding: 0px 12px;
    }

    #description {
        letter-spacing: .25px;
    }
    article {
        padding: 8px;

    }
}

@media (max-height: 540px) {
    
    div#questionholder.flexcenter {
       height: 240px;
    }
    h1 {
        top: 12px;
    }
    
    #question {
        height: 40px;
    }
    
    #feature {
        bottom: 6px;
        letter-spacing: 1px;
        line-height: 40px;
        font-size: .8em;
        padding: 0 6px;
    }
    
    #feature.add-animation {
      animation: feature-animation-6 750ms ease-in-out;
    }
    
    #feature p span#link a {
        padding: 0px 12px;
    }
    
    #feature p {
        margin: .5em 0;
    }
    
    #feature h2 {
         margin: .5rem 0;
    }
    
    #feature h2 span#title {
        padding: 12px;
        line-height: 42px;
    }
    #feature p span{
        line-height: 40px;
        padding: 10px;
    }

    #description {
        letter-spacing: 0px;
    }
    article {
        padding: 4px;

    }
}

@media (max-height: 420px) {
        #feature {
        top: 40%;
    }
}

@media (max-height: 340px) {
        #feature {
        top: 50%;
    }
}

@media (max-width: 639px) and (min-height: 541px) and (max-height: 720px) {
    
    div#questionholder.flexcenter {
       height: 240px;
    }
    h1 {
        top: 12px;
    }
    
    #feature {
        bottom: 12px;
        letter-spacing: 1px;
        line-height: 44px;
        font-size: 1em;
        padding: 0 8px;
    }
    
    #feature.add-animation {
      animation: feature-animation-12 750ms ease-in-out;
    }
    
    #feature p {
        margin: .5em 0;
    }
    
    #feature h2 {
         margin: .5rem 0;
    }
    
    #feature h2 span#title {
        padding: 12px;
        line-height: 42px;
    }
    #feature p span{
        line-height: 42px;
        padding: 10px;
    }

    #description {
        letter-spacing: .5px;
    }
    article {
        padding: 8px;

    }
}

@media (min-width: 641px) and (min-height: 541px) and (max-height: 720px) {
    
    div#questionholder.flexcenter {
       height: 288px;
    }
    h1 {
        top: 24px;
    }
    article {
        padding: 24px;
    }
    #feature {
        bottom: 18px;
    }
    
    #feature.add-animation {
      animation: feature-animation-18 750ms ease-in-out;
    }
}