.choose-head{
	color: black;
	text-align: center;
	background-color: white;
	display: block;
}
h1{
	font-family: "Maven Pro", sans-serif;
	font-weight: 700;
	font-size: 2em;
	padding: .5em;
}
body{
	/*background-color: black;*/
	height: 100%;
	positiong: relative;
	padding-bottom: 3em;
}

body.show-opening{
	background-color: black;
}

body.a-1{
	background-color: #ffd400;
}
body.a-2{
	background-color: #ff9f00;
}
body.a-3{
	background-color: #ff6a00;
}
body.a-4{
	background-color: #ff3500;
}
body.a-5{
	background-color: #ff0000;
}

.diamond-container{
	/*background-color: black;*/
}
.diamond{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	content:' ';
	width: 0;
	border: 15px solid transparent;
	border-top-color: white;

}
.primary-nav{
	margin-top: -1.9em;
}

li{
	padding: 7vh;
	display: block;
	
}
.option-item-1 .svg-fill {
	fill: #ffd400;
}
.option-item-2 .svg-fill {
	fill: #ff9f00;
}
.option-item-3 .svg-fill {
	fill: #ff6a00;
}
.option-item-4 .svg-fill {
	fill: #ff3500;
}
.option-item-5 .svg-fill {
	fill: #ff0000;
}

li:hover{
	cursor: pointer;	
}
li.js-option-1:hover{
	background-color: #ffd400;
}
li.js-option-2:hover{
	background-color: #ff9f00;
}
li.js-option-3:hover{
	background-color: #ff6a00;
}
li.js-option-4:hover{
	background-color: #ff3500;
}
li.js-option-5:hover{
	background-color: #ff0000;
}


a{
	
	align-content: center;
	display: block;

}

.option-image{
	width: 4em;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

.option-image:hover {
	cursor: pointer;
}
.option-item:hover .svg-fill{
	fill: black;
}


@media only screen and (min-width: 30em){
	
	h1{
		padding: .75em;
	}
}
@media only screen and (min-width: 40em){
	
	h1{
		padding: 1em;
		font-size: 2.1em;
	}
}



.page-head{
	padding: 1.5em;
	background-color: black;
	height: 4.5em;

}
.logo {
	width: 4em;
	display: none;
	margin-left: auto;
	margin-right: auto;
}
.a-1 .logo-1,
.a-2 .logo-2,
.a-3 .logo-3,
.a-4 .logo-4,
.a-5 .logo-5 {
	display: block;
}

.page-diamond-container{
	/*background-color: #FFD400;*/
}
.page-diamond{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	content:' ';
	width: 0;
	border: 15px solid transparent;
	border-top-color: black;

}

article{
	/*background-color: #FFD400;*/
	height: 100%
}

.generated-text{
	padding: 8vh 1em 8vh;
	max-width: 42em;
	margin: 0 auto;
	overflow: auto;
}

h2{
	color: white;
	font-family: "Maven Pro", sans-serif;
	font-weight: 700;
	font-size: 2.5em;
	line-height: 1.3em;
}
@media only screen and (min-width: 30em){
	.generated-text{
		padding: 10vh 2em 8vh;
	}
	h2{
		font-size: 3em;
	}
}
@media only screen and (min-width: 40em){
	.generated-text{
		padding: 9vh 2em 8vh;
	}
	h2{
		font-size: 3.5em;
	}
}
@media only screen and (min-width: 50em){
	.generated-text{
		padding: 9vh 2em 9vh;
	}
	h2{
		font-size: 4em;
	}
}

.slide-container{
	/*background-color: #FFD400;*/
	padding: 0em 2em 3em;
	max-width: 42em;
	margin: 0 auto;
	
	
}
.slide-text{
	display: flex;
	width: 100%;
	margin-bottom: 1em;
	max-width: 42em;
}
h3{
	font-family: "Maven Pro", sans-serif;
	width: 33%;
	font-size: .7em;
		
}
h3.nice-slide{
	text-align: left;
}
h3.neutral-slide{
	text-align: center;
}
h3.mean-slide{
	text-align: right;
}
@media only screen and (min-width: 30em){
	h3{
		font-size: .85em;
	}
}
@media only screen and (min-width: 40em){
	h3{
		font-size: .9em;
	}
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 0px;   
    background: #000;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%; 
    background: black;
	border: solid #000;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
	border: solid #000;
    cursor: pointer;
}

input[type="range"] {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.fake-slider{
	display: none;
	
}
datalist {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 0em;
    padding-top: 0px;
	margin-bottom: 1em;
	background-color: none;
	font-size: .5em;
	color: black;
	
	
}
option {
    width: 1em;
    display: flex;
    justify-content: center;
    height: .5em;
    align-items: end;
	color: black;
    background-position-y: -15px;
    background-position-x: center;
    z-index: -1;
}



.button-container{
	display: block;
	
	
}
.button{
	background-color: black;
	color: white;
/*	height: 3em;
	width: 10em;*/
	position: relative;
	display: block;
	padding: 1.25em;
	text-align: center;
	font-family: "Maven Pro", sans-serif;
	margin: 0 auto;
	font-size: .75em;
	
	
}

@media only screen and (min-width: 30em){
	.button{
		font-size: .8em;
	}
}
@media only screen and (min-width: 40em){
	.button{
		font-size: .85em;
	}
}
@media only screen and (min-width: 50em){
	.button{
		font-size: .9em;
	}
}
footer{
	background-color: black;
	color:#5E5E5E;
	text-align: center;
	padding: 1em;
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 150;
	height: 3em;
	margin-top: -3em;
}
.footer{
	font-family: "Maven Pro", sans-serif;
	font-size: .5em;
	font-weight: 500;
}



.page-opening, 
.page-main {
	display: none;
	
}

.show-opening .page-opening,
.show-main .page-main {
	display: block;
	
}