@keyframes opacity{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@media screen and (min-width: 600px) {
	main{
		min-height: calc(100vh - 8vw);
		animation: opacity 2s backwards;
	}
	main > h1{
		font-size: 3vw;
		line-height: 2.5vw;
		text-align: center;
		padding: 6vw 0 0 0;
		width: 100vw;
	}
	main > h1 > span{
		font-size: 1.5vw;
		color: #666;
	}
	#guide{
		width: 10vw;
		text-align: center;
		color: #32558e;
		text-decoration: underline;
		margin: 1vw 45vw 4.5vw 45vw;
		font-size: 1.2vw;
		display: block;
	}
	.invisible{
		opacity: 0;
		pointer-events: none;
	}
	.visible{
		opacity: 1;
		pointer-events: inherit;
	}
	.button{
		box-shadow: .3vw .3vw .8vw #a1a1a1, 
		            -.3vw -.3vw .8vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button:active{
		box-shadow: .15vw .15vw .4vw #a1a1a1, 
		            -.15vw -.15vw .4vw #fefefe;
	}
	.button-2{
		box-shadow: .15vw .15vw .4vw #a1a1a1, 
		            -.15vw -.15vw .4vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button-2:active{
		box-shadow: .08vw .08vw .2vw #a1a1a1, 
		            -.08vw -.08vw .2vw #fefefe;
	}
	.calc-section{
		width: 82vw;
		display: flex;
		justify-content: space-between;
		height: 4.5vw;
		margin: 2.5vw 9vw;
	}
	.calc-section:first-child{
		display: none;
	}
	.NPS, .DN, .SCH{		
		width: 15vw;
		height: 4.5vw;
		margin: 0;
		position: relative;
	}
	.NPS-1, .DN-1, .SCH-1{		
		width: 15vw;
		height: 4.5vw;
		border-radius: 4.5vw;
		line-height: 4.5vw;
		font-size: 1.8vw;
		text-align: center;
		font-weight: bold;
		color: #333;
	}
	.NPS-2, .DN-2, .SCH-2{		
		width: 24vw;
		padding: .5vw;
		position: absolute;
		top: 5.5vw;
		left: -5vw;
		display: flex;
		flex-wrap: wrap;
		background-color: #f6f6f6;
		box-shadow: .2vw .2vw 2vw #666;
		border-radius: 2vw;
		transition: opacity .2s;
		z-index: 50;
	}
	.NPS-2 > div, .DN-2 > div, .SCH-2 > div{		
		width: 3vw;
		height: 3vw;
		margin: .5vw;
		border-radius: 3vw;
		line-height: 3vw;
		font-size: 1.3vw;
		text-align: center;
		font-weight: bold;
		color: #333;
		background-color: #f6f6f6;
		cursor: pointer;
	}
	.pipe-result{	
		width: 32vw;
		height: 4.5vw;
		border-radius: 4.5vw;
		line-height: 4.5vw;	
		font-size: 1.8vw;
		text-align: center;
		font-weight: bold;
		color: #333;
		box-shadow: inset .3vw .3vw 1vw #a1a1a1, 
            		inset -.3vw -.3vw 1vw #fefefe;
	}

	#plus-copy{
		width: 85vw;
		margin: 2vw 7.5vw;
		display: flex;
		justify-content: center;
		padding-bottom: 8vw;
	}
	#plus-button{	
		width: 15vw;
		height: 4.5vw;
		border-radius: 4.5vw;
		line-height: 4.5vw;
		font-size: 3vw;
		text-align: center;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(105deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}




	#bookmark{
		position: fixed;
		z-index: 300;
		width: 30vw;
		height: 15vw;
		left: 65vw;
		top: 3vw;
		opacity: 0;
		pointer-events: none;
		transition: all .3s;
	}
	.bookmark{
		display: none!important;
	}
	#bookmark::before{
		content: "";
		width: 2vw;
		height: 2vw;
		position: absolute;
		left: 14vw;
		top: -1vw;
		transform: rotate(45deg);
		background: linear-gradient(45deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}
	#bookmark-des{
		width: 30vw;
		height: 10vw;
		position: relative;
		z-index: 1;
		border-radius: 1vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: linear-gradient(105deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}
	#bookmark-des > div{
		font-weight: bold;
		color: #fff;
	}
	#bookmark-des > div:nth-child(1){
		font-size: 1.5vw;
		line-height: 2vw;
	}
	#bookmark-des > div:nth-child(2){
		font-size: 3vw;
		line-height: 3.5vw;
	}




	#calc-cta{
		position: fixed;
		left: 0;
		bottom: 2vw;
		height: 8vw;
		background-color: #fff;
		z-index: 20;
		display: flex;
		align-items: center;
		border-radius: 8vw;
		box-shadow: 1vw 1vw 2vw #999;
		padding: 0 2vw;
		opacity: 0;
		pointer-events: none;
		transition: all .2s;
		border: solid .5vw #32558e;
		margin: 0 15vw;
		transform: translate(0, 10vw);
	}

	#calc-contact-cross{
		border-radius: 4vw;
		width: 4vw;
		height: 4vw;
		cursor: pointer;
		display: block;
		background: #eee;
	    transform: rotate(45deg);
	}
	#calc-contact-cross::before{
		content: "";
		width: 2.5vw;
		height: .6vw;
		background-color: #999;
		position: absolute;
		left: .75vw;
		top: 1.7vw;
	}
	#calc-contact-cross::after{
		content: "";
		height: 2.5vw;
		width: .6vw;
		background-color: #999;
		position: absolute;
		top: .75vw;
		left: 1.7vw;
	}

	#calc-contact-text{
		font-size: 2.5vw;
		font-weight: bold;
		margin: 0 2.5vw;
		color: #32558e;
	}



	#calc-contact-button{
		border-radius: 25vw;
		width: 25vw;
		height: 4vw;
		position: relative;
		background: linear-gradient(105deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
		box-shadow: 0.5vw 0.5vw 2vw #666;
		cursor: pointer;
		transition: all 0.5s;
		transform: translate(0, 0);
		opacity: 1;
		overflow: hidden;
		margin: 0 .5vw;
	}
	#calc-contact-button:hover{
		transform: translate(0, -0.5vw);
	}
	#calc-contact-button img{
		width: 4vw;
		position: absolute;
		top: 0vw;
		left: 1.5vw;
	}
	#calc-contact-button p{
		position: absolute;
		font-weight: bold;
		font-size: 1.8vw;
		color: #fff;
		top: 1vw;
		left: 6vw;
		display: block;
		width: 20vw;
		line-height: 2vw;
	}
}




















@media screen and (max-width: 600px) {
	main{
		min-height: 100vh;
		animation: opacity 2s backwards;
	}
	main > h1{
		font-size: 8vw;
		line-height: 8vw;
		text-align: center;
		padding: 27.5vw 5vw 0 5vw;
		width: 90vw;
	}
	main > h1 > span{
		font-size: 4.5vw;
		color: #666;
	}
	#guide{
		width: 30vw;
		text-align: center;
		color: #32558e;
		text-decoration: underline;
		margin: 3vw 35vw 13.5vw 35vw;
		font-size: 3.6vw;
		display: block;
	}
	.invisible{
		opacity: 0;
		pointer-events: none;
	}
	.visible{
		opacity: 1;
		pointer-events: inherit;
	}
	.button{
		box-shadow: .6vw .6vw 1.6vw #a1a1a1, 
		            -.6vw -.6vw 1.6vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button:active{
		box-shadow: .3vw .3vw .8vw #a1a1a1, 
		            -.3vw -.3vw .8vw #fefefe;
	}
	.button-2{
		box-shadow: .3vw .3vw .8vw #a1a1a1, 
		            -.3vw -.3vw .8vw #fefefe;
		transition: all .1s;
		cursor: pointer;
		user-select: none;
	}
	.button-2:active{
		box-shadow: .16vw .16vw .4vw #a1a1a1, 
		            -.16vw -.16vw .4vw #fefefe;
	}
	.calc-section{
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 7.5vw 0;
		position: relative;
	}
	.calc-section:first-child{
		display: none;
	}
	.NPS, .DN{		
		width: 42.5vw;
		height: 13.5vw;
		margin: 2vw;
	}
	.NPS-1, .DN-1{		
		width: 42.5vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 4.5vw;
		text-align: center;
		font-weight: bold;
		color: #333;
	}
	.SCH{		
		width: 90vw;
		height: 13.5vw;
		margin: 2vw;
	}
	.SCH-1{		
		width: 90vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 4.5vw;
		text-align: center;
		font-weight: bold;
		color: #333;
	}
	.NPS-2, .DN-2, .SCH-2{		
		width: 72vw;
		padding: 1.5vw;
		position: absolute;
		left: 14vw;
		display: flex;
		flex-wrap: wrap;
		background-color: #f6f6f6;
		box-shadow: .6vw .6vw 6vw #666;
		border-radius: 6vw;
		transition: opacity .2s;
		z-index: 50;
	}
	.NPS-2, .DN-2{
		top: 18vw;
	}
	.SCH-2{
		top: 35.5vw;
	}
	.NPS-2 > div, .DN-2 > div, .SCH-2 > div{		
		width: 9vw;
		height: 9vw;
		margin: 1.5vw;
		border-radius: 9vw;
		line-height: 9vw;
		font-size: 3.6vw;
		text-align: center;
		font-weight: bold;
		color: #333;
		background-color: #f6f6f6;
		cursor: pointer;
	}
	.pipe-result{	
		width: 90vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;	
		font-size: 4.5vw;
		text-align: center;
		font-weight: bold;
		color: #333;
		box-shadow: inset .6vw .6vw 2vw #a1a1a1, 
            		inset -.6vw -.6vw 2vw #fefefe;
        margin: 2vw;
	}

	#plus-copy{
		width: 85vw;
		margin: 2vw 7.5vw;
		display: flex;
		justify-content: center;
		padding-bottom: 20vw;
	}
	#plus-button{	
		width: 45vw;
		height: 13.5vw;
		border-radius: 13.5vw;
		line-height: 13.5vw;
		font-size: 9vw;
		text-align: center;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(105deg, #8653ea 0%, #7053ea 20%, #535aea 40%, #5385ea 60%, #4fabde 80%, #50aadc 100%);
	}


	
	#bookmark{
		display: none;
	}
	#calc-cta{
		display: none;
	}
}