@media (min-width: 0px) and (max-width: 320px) {
	.logo {
		letter-spacing: 1px;
		font-size: 25px;
	}
	.sdv-desc {
		top: 30%;
		left: 0;
	}
	.sdv-desc h1 {
		font-size: 30px;
		letter-spacing: 1px;
	}
	.sdv-desc span {
		font-size: 40px;
		width: 100%;
		margin-top: -50px
	}
	.sdv-desc h2 {
		color: #fff;
		font-size: 18px;
		font-family: 'Play', sans-serif;
		margin: 30px 0 60px 0;
	}
	.sdv-desc a {
		font-size: 14px;
		padding: 10px 25px;
		border: 1px solid #fff;
	}
	.sdv-social {
		bottom: 15px;
	}

	.cd-modal-content h4 {
		font-size: 20px;
		letter-spacing: 0;
		position: static;
		margin: 10px 0;
	}
	.coder-work {
		width: 290px;
	}
	.cd-modal-content_wrapper {
		padding-top: 30px;
	}
	.coder {
		padding-top: 15px;
	}


}
@media (min-width: 321px) and (max-width: 420px) {
	.logo {
		letter-spacing: 1px;
		font-size: 25px;
	}
	.sdv-desc {
		top: 30%;
		left: 0;
	}
	.sdv-desc h1 {
		font-size: 30px;
		letter-spacing: 1px;
	}
	.sdv-desc span {
		font-size: 40px;
		width: 100%;
		margin-top: -50px
	}
	.sdv-desc h2 {
		color: #fff;
		font-size: 18px;
		font-family: 'Play', sans-serif;
		margin: 30px 0 60px 0;
	}
	.sdv-desc a {
		font-size: 14px;
		padding: 10px 25px;
		border: 1px solid #fff;
	}
	.sdv-social {
		bottom: 15px;
	}
}
@media (min-width: 421px) and (max-width: 640px) {
	.logo {
		letter-spacing: 1px;
		font-size: 30px;
	}
	.sdv-desc {
		top: 30%;
		left: 0;
	}
	.sdv-desc h1 {
		font-size: 35px;
		letter-spacing: 2px;
	}
	.sdv-desc span {
		font-size: 45px;
		width: 100%;
		margin-top: -50px
	}
	.sdv-desc h2 {
		color: #fff;
		font-size: 18px;
		font-family: 'Play', sans-serif;
		margin: 30px 0 60px 0;
	}
	.sdv-desc a {
		font-size: 14px;
		padding: 10px 25px;
		border: 1px solid #fff;
	}
	.sdv-social {
		bottom: 15px;
	}
}
@media (min-width: 641px) and (max-width: 820px) {
	.logo {
		letter-spacing: 1px;
		font-size: 30px;
	}
	.sdv-desc {
		top: 30%;
		left: 0;
	}
	.sdv-desc h1 {
		font-size: 40px;
		letter-spacing: 2px;
	}
	.sdv-desc span {
		font-size: 80px;
		width: 100%;
		margin-top: -65px
	}
	.sdv-desc h2 {
		color: #fff;
		font-size: 20px;
		font-family: 'Play', sans-serif;
		margin: 30px 0 60px 0;
	}
	.sdv-desc a {
		font-size: 14px;
		padding: 10px 25px;
		border: 1px solid #fff;
	}
	.sdv-social {
		bottom: 15px;
	}
}
@media (min-width: 821px) and (max-width: 991px) {
	.logo {
		letter-spacing: 1px;
		font-size: 30px;
	}
	.sdv-desc {
		top: 30%;
		left: 0;
	}
	.sdv-desc h1 {
		font-size: 40px;
		letter-spacing: 2px;
	}
	.sdv-desc span {
		font-size: 80px;
		width: 100%;
		margin-top: -65px
	}
	.sdv-desc h2 {
		color: #fff;
		font-size: 20px;
		font-family: 'Play', sans-serif;
		margin: 30px 0 60px 0;
	}
	.sdv-desc a {
		font-size: 14px;
		padding: 10px 25px;
		border: 1px solid #fff;
	}
	.sdv-social {
		bottom: 15px;
	}
}
@media (min-width: 992px) and (max-width: 1280px) {
.sdv-desc {
		top: 28%;

	}
}
@media only screen and (max-width:520px) {
	.card {
		height: calc(150px + (250 - 150) * ((100vw - 320px) / (520 - 320)));
		margin-right: 40px;
	}
	.card .card__content .card__content--description {
		right: 70px;
	}
}