*{
	box-sizing: border-box;
}

#box, .box{
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: rgba(227, 0, 89, 1);
	width: 200px;
	height: 200px;
	opacity: .3;
	transform: translate(-50%, -50%);
	transition: opacity .3s ease-in-out;
}


@media (min-width: 640px) {

	#box{
		opacity: .6;
	}

}

@media (min-width: 1024px) {

    #box{
      opacity: .9;
    }

}

.box{
	background-color: rgba(19, 108, 120, 1);
	opacity: .9;
}

@media (max-width: 1024px) {

	.box{
		opacity: .6;
	}

}

@media (max-width: 640px) {

	.box{
		opacity: .3;
	}

}