@media screen and (min-width: 600px) {
	html{
		scroll-padding-top: 10vw;
	}
	main{
		padding-bottom: 5vw;
	}


	#content-div{
		width: 80vw;
		margin: 0 10vw 5vw 10vw;
		display: flex;
		flex-wrap: wrap;
	}
	.content-button{
		position: relative;
		width: 19vw;
		height: 3.5vw;
		margin: .5vw;
	}
	.content-button-1{
		width: 19vw;
		height: 3.5vw;
		border-radius: 3.5vw;
		color: #000;
		text-align: center;
		font-weight: bold;
		line-height: 3.5vw;
		font-size: 1.6vw;
		cursor: pointer;
		transition: all .2s;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #eee;
	}
	.content-button-1::after{
		content: "";
		width: 31vw;
		height: 1vw;
		position: absolute;
		left: -5.5vw;
		top: 3.5vw;
		background-color: 3333;
		pointer-events: none;
		z-index: 1;
	}
	.content-button:hover .content-button-1::after{
		pointer-events: inherit;
	}
	.content-button-2{
		width: 31vw;
		border-radius: 1vw;
		background-color: #eee;
		cursor: pointer;
		transition: all .2s;
		position: absolute;
		left: -5.5vw;
		top: 4.5vw;
		display: flex;
		flex-wrap: wrap;
		padding: .25vw;
		box-shadow: .5vw .5vw 2vw #888;
		transform: scale(0);
		transform-origin: 50% -2vw;
		opacity: 0;
		pointer-events: none;
		transition: all .2s;
		z-index: 1;
	}
	.content-button-2 > a{
		width: 15vw;
		height: 3vw;
		background-color: #fff;
		border-radius: .8vw;
		text-align: center;
		font-weight: bold;
		line-height: 3vw;
		font-size: 1.3vw;	
		margin: .25vw;
		transition: all .2s;
	}
	.long-content{
		width: 30.5vw!important;
	}
	.content-button-2 > a:hover{
		background-color: #000;
		color: #fff;
	}
	.content-button:hover{
		border-color: #000;
		color: #000;
	}
	.content-button:hover .content-button-2{
		transform: scale(1);
		opacity: 1;
		pointer-events: inherit;
	}


	.quick-reference{
		width: 70vw;
		padding: 2.5vw 5vw;
		background-color: #eee;
		border-radius: 2vw;
		margin: 2.5vw 10vw;
		animation: none;
	}
	.quick-reference > h2{
		font-size: 3vw;
		line-height: 5vw;
		width: 60vw;
		margin: 1vw 5vw;
		text-align: center;
	}
	.quick-reference-div > h3{
		width: 60vw;
		margin: .5vw 0;
		font-size: 2vw;
		line-height: 2.5vw;
	}
	.quick-reference > p{
		width: 60vw;
		margin: .5vw 5vw;
		font-size: 1.3vw;
		line-height: 2.2vw;
	}
	.other-media::after{
		content: "Further Reading";
		font-size: 1.2vw;
		width: 10vw;
		height: 3.5vw;
		position: absolute;
		right: -17.5vw;
		top: 2.25vw;
		background-color: #eee;
		text-align: center;
		line-height: 3.5vw;
		border-radius: 0 1vw 1vw 0;
		padding-right: 2.5vw;
	}
	.other-media::before{
		content: "";
		width: 0vw;
		height: 0vw;
		position: absolute;
		right: -5vw;
		top: 1vw;
		border: solid 3vw transparent;
		border-right: solid 3vw #eee;
	}
	.other-media-2{
		background-color: #fff;
		margin-left: 5vw;
	}
	.other-media-2::after{
		content: "Further Reading";
		font-size: 1.2vw;
		width: 10vw;
		height: 3.5vw;
		position: absolute;
		right: -17.5vw;
		top: 2.25vw;
		background-color: #fff;
		text-align: center;
		line-height: 3.5vw;
		border-radius: 0 1vw 1vw 0;
		padding-right: 2.5vw;
	}
	.other-media-2::before{
		content: "";
		width: 0vw;
		height: 0vw;
		position: absolute;
		right: -5vw;
		top: 1vw;
		border: solid 3vw transparent;
		border-right: solid 3vw #fff;
	}

	.pro-leg{
		width: 60vw;
		height: 15vw;
		background-color: #000;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		overflow: hidden;
		margin: 1vw 0;
	}
	.pro-leg-pro{
		height: 15vw;
		display: block;
	}
	.pro-leg-pro-2{
		width: 30vw;
		display: block;
	}
	.pro-leg-pro-3{
		width: 60vw;
		display: block;
	}
	.pro-leg-leg{
		width: 30vw;
		display: block;
		margin-left: 2.5vw;
	}
}





















@media screen and (max-width: 600px) {
	html{
		scroll-padding-top: 30vw;
	}
	main{
		padding-bottom: 15vw;
	}


	#content-div{
		width: 80vw;
		margin: 0 10vw 15vw 10vw;
		display: flex;
		flex-wrap: wrap;
	}
	.content-button{
		position: relative;
		width: 80vw;
		height: 10.5vw;
		margin: 1.5vw 0;
	}
	.content-button-1{
		width: 80vw;
		height: 10.5vw;
		border-radius: 10.5vw;
		color: #000;
		text-align: center;
		font-weight: bold;
		line-height: 10.5vw;
		font-size: 5vw;
		cursor: pointer;
		transition: all .2s;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #eee;
	}
	.content-button-2{
		display: none;
	}





	
	.quick-reference{
		width: 85vw;
		padding: 2.5vw 5vw;
		background-color: #eee;
		border-radius: 6vw;
		margin: 5vw 2.5vw 0 2.5vw;
		animation: line4 1s backwards;
		animation-delay: .2s;
	}
	.quick-reference > h2{
		font-size: 9vw;
		line-height: 15vw;
		width: 85vw;
		margin: 3vw 0;
		text-align: center;
	}
	.quick-reference-div > h3{
		width: 75vw;
		margin: 1.5vw 0;
		font-size: 6vw;
		line-height: 7.5vw;
	}
	.quick-reference > p{
		width: 75vw;
		margin: 1.5vw 5vw;
		font-size: 4.5vw;
		line-height: 8vw;
	}


	.other-media{
		width: 69vw;
		margin: 1.5vw 0;
		line-height: 6.5vw;
	}
	.other-media > img{
		width: 69vw;
		display: block;
		border-radius: 1.5vw;
	}
	.other-media > div{
		width: 69vw;
		margin-top: 3vw;
		padding-bottom: 1vw;
	}
	.other-media-2{
		background-color: #fff;
		margin: 1.5vw 5vw;
	}

	.pro-leg{
		width: 75vw;
		background-color: #000;
		border-radius: 3vw;
		align-items: center;
		overflow: hidden;
		margin: 3vw 0;
	}
	.pro-leg-pro{
		width: 75vw;
		display: block;
	}
	.pro-leg-pro-2{
		width: 75vw;
		display: block;
	}
	.pro-leg-pro-3{
		width: 75vw;
		display: block;
	}
	.pro-leg-leg{
		width: 70vw;
		display: block;
		padding: 5vw 2.5vw;
	}
}