@media only screen and (max-width:1400px)
{
svg#svg-graphic-about {
	width: 500px;
}
svg#svg-graphic-works {
	width: 500px;
}
svg#svg-graphic-milestones {
	width: 500px;
}
svg#svg-graphic-contact {
	width: 500px;
}
.nav-video {
	width: 494px;
}
.item .client-name {
	left: 40px; top: 82%; width: 30%; position: absolute;
}
.item .project {
	top: 82%; width: 40%; right: 20px; position: absolute;
}
}
@media only screen and (max-width:1200px)
{
svg#svg-graphic-about {
	width: 400px;
}
svg#svg-graphic-works {
	width: 400px;
}
svg#svg-graphic-milestones {
	width: 400px;
}
svg#svg-graphic-contact {
	width: 400px;
}
.nav-video {
	width: 394px;
}
.circle-1 {
	top: 400px; right: 0px; position: absolute;
}
.circle-2 {
	top: 100px; right: 400px; position: absolute;
}
.circle-3 {
	left: 50px; bottom: 60px; position: absolute;
}
.circle-4 {
	left: 50px; top: 150px; position: absolute;
}
.triangle-1 {
	right: 200px; bottom: 150px; position: absolute;
}
.triangle-2 {
	right: 200px; bottom: 50px; position: absolute;
}
.big-text {
	line-height: 1.9em; font-size: 20px;
}
.case-header .case-title p {
	font-size: 20px;
}
.icon-text ul {
	line-height: 1.9em; font-size: 16px;
}
.box.active .header-title p {
	line-height: 1.3em; font-size: 20px;
}
.icon-text {
	margin-bottom: 60px;
}
.big-letter {
	font-size: 240px;
}
.post-content {
	padding: 0px 60px;
}
.single .full {
	padding: 160px 60px;
}
nav.wrapper {
	padding: 100px 60px;
}
nav.wrapper a span.title {
	font-size: 18px;
}
.item {
	height: 38vw;
}
.item .client-name {
	left: 40px; top: 80%; width: 30%; position: absolute;
}
.item .project {
	top: 80%; width: 40%; right: 20px; position: absolute;
}
.post {
	height: 400px;
}
}
@media only screen and (max-width:1024px)
{
svg#svg-graphic-about {
	width: 300px;
}
svg#svg-graphic-works {
	width: 300px;
}
svg#svg-graphic-milestones {
	width: 300px;
}
svg#svg-graphic-contact {
	width: 300px;
}
.nav-video {
	width: 294px;
}
.item {
	height: 55vw;
}
.item .client-name {
	left: 50px; top: 80%; width: 30%; position: absolute;
}
.item .project {
	top: 80%; width: 30%; right: 20px; position: absolute;
}
.circle-wrap {
	height: 38vw;
}
.case-video-wrapper {
	height: 500px;
}
.box.active .header-title {
	top: 30%;
}
.case-header .case-title {
	top: 30%;
}
.post {
	height: 350px;
}
}
@media only screen and (max-width:768px)
{
svg#svg-graphic-about {
	width: 280px;
}
svg#svg-graphic-works {
	width: 280px;
}
svg#svg-graphic-milestones {
	width: 280px;
}
svg#svg-graphic-contact {
	width: 280px;
}
.nav-video {
	width: 274px;
}
h2 {
	font-size: 28px;
}
h3 {
	font-size: 20px;
}
body.single .post h2 {
	font-size: 28px;
}
.case-header .case-title h2 {
	font-size: 28px;
}
.circle-1 {
	top: 400px; right: 0px; position: absolute;
}
.circle-2 {
	top: 100px; right: 200px; position: absolute;
}
.circle-3 {
	left: 0px; bottom: 60px; position: absolute;
}
.circle-4 {
	left: 30px; top: 150px; position: absolute;
}
.triangle-1 {
	right: 100px; bottom: 100px; position: absolute;
}
.triangle-2 {
	right: 200px; bottom: 50px; position: absolute;
}
nav.wrapper a span.title {
	display: none;
}
nav.wrapper a span.sub-title {
	text-transform: uppercase; font-family: montserrat, sans-serif; font-size: 18px; font-weight: bold;
}
nav.wrapper a.previous i {
	top: -7px;
}
nav.wrapper a.next i {
	top: -7px;
}
.item {
	height: 60vw;
}
.item .client-name {
	left: 40px; top: 78%; width: 30%; position: absolute;
}
.item .project {
	top: 78%; width: 40%; right: 20px; position: absolute;
}
.circle-wrap {
	height: 40vw;
}
.case-video-wrapper {
	height: 400px;
}
.header span {
	left: 70% !important; bottom: 25%; font-size: 14px;
}
.box:hover .header span {
	bottom: 25%;
}
.box.active .header-title {
	color: rgb(0, 0, 0);
}
.box.active .header-title h2 {
	color: rgb(0, 0, 0);
}
.box.active#about svg {
	display: block;
}
.box.active#works svg {
	display: block;
}
.box.active#milestones svg {
	display: block;
}
.box.active#contact svg {
	display: block;
}
.box.active svg#svg-graphic-about {
	width: 400px;
}
.box.active svg#svg-graphic-works {
	width: 400px;
}
.box.active svg#svg-graphic-milestones {
	width: 400px;
}
.box.active svg#svg-graphic-contact {
	width: 400px;
}
.box.active#about .nav-video {
	top: 20%; width: 400px; height: auto; transform: translate3d(-50%, -20%, 0px);
}
.box.active#works .nav-video {
	top: 20%; width: 400px; height: auto; transform: translate3d(-50%, -20%, 0px);
}
.box.active#milestones .nav-video {
	top: 20%; width: 400px; height: auto; transform: translate3d(-50%, -20%, 0px);
}
.box.active#contact .nav-video {
	top: 20%; width: 400px; height: auto; transform: translate3d(-50%, -20%, 0px);
}
.box.active .header svg {
	top: 20%; transform: translate3d(-50%, -30%, 0px) scale(1.01);
}
.box.active .header-title {
	top: 60%; bottom: 30px;
}
.box.active .header-title h2 {
	font-size: 28px; margin-bottom: 20px;
}
}
@media only screen and (max-width:640px)
{
svg#svg-graphic-about {
	width: 250px;
}
svg#svg-graphic-works {
	width: 250px;
}
svg#svg-graphic-milestones {
	width: 250px;
}
svg#svg-graphic-contact {
	width: 250px;
}
.nav-video {
	width: 244px;
}
.circle-1 {
	display: none;
}
.circle-2 {
	top: 100px; right: 100px; position: absolute;
}
.circle-3 {
	left: 0px; bottom: 0px; position: absolute;
}
.circle-4 {
	left: 50px; top: 150px; position: absolute;
}
.triangle-1 {
	right: 50px; bottom: 50px; position: absolute;
}
.triangle-2 {
	right: 200px; bottom: 50px; position: absolute;
}
.box.active .header-title h2 {
	font-size: 28px;
}
.big-letter {
	font-size: 200px;
}
.item {
	height: 110vw;
}
.item .client-name {
	left: 50px; top: 82%; width: 30%; position: absolute;
}
.item .project {
	top: 82%; width: 30%; right: 20px; position: absolute;
}
.circle-wrap {
	height: 80vw;
}
.case-video-wrapper {
	height: 300px;
}
.item.small-nav {
	padding: 20px 0px; height: 240px;
}
.item.small-nav.previous .nav-title {
	left: 200px; top: 130px; position: absolute;
}
.item.small-nav.next .circle-wrap {
	right: 0px; position: absolute;
}
.item.small-nav.next .nav-title {
	top: 130px; right: 200px; position: absolute;
}
.header span {
	left: 50% !important; bottom: 20%; font-size: 14px; transform: translateX(-50%);
}
.box:hover .header span {
	bottom: 20%;
}
.post {
	height: 450px;
}
}
@media only screen and (max-width:568px)
{
svg#svg-graphic-about {
	width: 200px;
}
svg#svg-graphic-works {
	width: 200px;
}
svg#svg-graphic-milestones {
	width: 200px;
}
svg#svg-graphic-contact {
	width: 200px;
}
.nav-video {
	width: 194px;
}
.big-letter {
	font-size: 280px;
}
.item {
	height: 120vw;
}
.item .client-name {
	left: 50px; top: 80%; width: 30%; position: absolute;
}
.item .project {
	top: 80%; width: 40%; right: 20px; position: absolute;
}
.circle-wrap {
	height: 80vw;
}
}