.main{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: -8rem;
	-webkit-box-flex: 1;
	    -ms-flex: 1 100%;
	        flex: 1 100%;
	nav{
		min-width: 28.5rem;
		width: 28.5rem;
		padding: 9.5rem 0 0 1.5rem;
		background: #5b524a;
	}
	.menu{
		a{
			font: 1.6rem $font2;
			color: #fbfbfb;
			display: inline-block;
			padding: 1.8rem 0;
			white-space: nowrap;
			i{
				padding: 0 1.6rem;
			}
			svg{
				vertical-align: middle;
				fill: #fff;
			}
		}
		li:hover,
		.active{
			background: #fbfbfb;
			cursor: pointer;
			border-left: 0.6rem solid #ff7a05;
			a{
				color: #000;
				font-family: $font3;
				svg{
					fill: #000;
				}
			}
		}
	}
}

.main-pd{
	padding: 12.5rem 0 4.5rem 1.5rem;
	background: #fbfbfb;
	max-width: 163.5rem;
	width: 100%;
	h1{
		-webkit-box-flex: 1;
		    -ms-flex: 1 100%;
		        flex: 1 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding:0 3.5rem 3rem 0;
		font-size: 3.6rem;
	}
}
.diagram{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	.diagram-flex{
		-webkit-box-flex: 1;
		    -ms-flex: 1 21%;
		        flex: 1 21%;
		margin: 0.5rem;
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
			-webkit-box-flex: 0;
			    -ms-flex: none;
			        flex: none;
		}
		.diagram-container:after{
			position: absolute;
			content: "";
			bottom: 0;
			width: 80%;
			height: 100%;
			background: -o-repeating-linear-gradient(bottom, transparent, transparent 39px, #bbbbba 40px);
			background: repeating-linear-gradient(to top, transparent, transparent 39px, #bbbbba 40px);
		}
		&:nth-of-type(1) .diagram-container:after{
			bottom: 12px;
			height: 290px;
		}
		&:nth-of-type(2) .diagram-container:after,
		&:nth-of-type(3) .diagram-container:after{
			bottom: 166px;
    		height: 143px;
			
		}
		&:nth-of-type(4) .diagram-container:after{
			bottom: 204px;
    		height: 97px;
		}
	}
	h1{
		span{
			display: inline-block;
			min-width: 6.2rem;
			width: 6.2rem;
			height: 6.2rem;
			border-radius: 50%;
			color: #fff;
			background: #ff7a05;
			text-align: center;
			padding-top: 0.6rem;
			margin-right: 1.5rem;
			float: left;
		}
	}
	&-container{
		position: relative;
		width: 37.2rem;
		height: 70.7rem;
		-webkit-box-shadow: 0.2rem 0.4rem 1.3rem rgba(24, 24, 24, 0.07);
		        box-shadow: 0.2rem 0.4rem 1.3rem rgba(24, 24, 24, 0.07);
		background: #fff;
		margin: auto;
		padding: 3.3rem 3rem 3rem;
	}
}

#race,
#stayednight,
#gender,
#veteranstatus{
  max-width: 30rem;
  position: relative;
  margin: 0 auto;
  z-index: 999;
  background-position: center 19rem;
  background-repeat: no-repeat;
}

#race{
	background-image: url(../img/race.svg);
}
#stayednight{
	background-image: url(../img/last-night.svg);
}
#gender{
	background-image: url(../img/gender.svg);
}

#veteranstatus{
	background-image: url(../img/veteran-status.svg);
}


.button{
	@include button;
}

.icon-close,
.icon-menu{
	display: none;
}


@media screen and (max-width: 768px){
body{
	position: relative;
}
.header{
	button{
		i{
			margin-right: 0;
		}
		span{
			display: none;
		}
	}
	.logo{
		margin-left: 5.2rem;
	}
} 
.main-pd{
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 12.5rem 3.5rem 3.5rem;
	h1{
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding: 0 0 3rem 0;
	}
}
.icon-close,
.icon-menu{
	position: absolute;
	display: block;
	z-index: 999;

}
.icon-close{
  cursor: pointer;
  width: 3.4rem;
  height: 3.4rem;
  left: 2.5rem;
  top: 3rem;
  span{
  	display: inline-block;
	width: 100%;
	height: 0.4rem;
	background: #fff;
	&:first-child{
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		        transform: rotate(45deg);
	 }
	&:last-child{
		position: relative;
		-webkit-transform: rotate(-46deg);
		    -ms-transform: rotate(-46deg);
		        transform: rotate(-46deg);
		-webkit-transform-origin: 0 0;
		    -ms-transform-origin: 0 0;
		        transform-origin: 0 0;
		left: 0.4rem;
		top: 0;
	}
  }
}

.icon-menu {
	margin: 2rem 0 0 2rem;
	width: 3.2rem;
	height: 3.2rem;
	cursor: pointer;
  	span{
  		display: inline-block;
		width: 100%;
		height: 0.4rem;
		background: #fff;
		margin-bottom: 0.4rem;
  	}
}
.nav{
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 999;
}
}

@media screen and (max-width: 480px){
.diagram{
	.diagram-flex{
		-webkit-box-flex: 1;
		    -ms-flex: 1 100%;
		        flex: 1 100%;
		margin: 1.25rem auto;
		&:nth-of-type(1) .diagram-container:after{
			bottom: 21px;
		}
		&:nth-of-type(2) .diagram-container:after,
		&:nth-of-type(3) .diagram-container:after{
			bottom: 137px;	
		}
		&:nth-of-type(4) .diagram-container:after{
			bottom: 167px;
		}
	} 
}
.diagram-container{
	width: 297px;
	height: 565px;
}
#race,
#stayednight,
#gender,
#veteranstatus{
	width: 224px !important;
	background-position: center 12rem;
}
#race{
	height: 465px !important;
}
#stayednight,
#gender{
	height: 350px !important;
}
#veteranstatus{
	height: 321px !important;
}

.main-pd h1{
	font-size: 3rem;
}
.diagram h1{
	span{
		min-width: 5.2rem;
		width: 5.2rem;
		height: 5.2rem;
	}
}

}
@media screen and (max-width: 400px){
.header{
	.logo{
		img{
			width: 10.7rem;
			height: 3.5rem;
		}
	}
}
}

@media screen and (max-width: 380px){
.main-pd{
	padding: 12.5rem 1.5rem 1.5rem;
}
}