@media screen and (max-width: 1610px) {
	main > .articles-card {
		width: 90%;
	}
}

@media screen and (max-width: 1510px) {
	main > .articles-card .card.tv-shape .colored {
		width: 400px;
		height: 400px;
	}
	
	main > .articles-card .card.tv-shape .grayscale {
		margin-top: -520px;
	}
	
	main > .articles-card .card.th-shape .colored {
		width: 70%;
	}
}

@media screen and (max-width: 1310px) {
	main .navigation > .body > .card .card-front img {
		width: 130px;
	}
	
	main .navigation > .body > .card .card-front .heading {
		font-size: 28px;
		line-height: 28px;
	}
	
	main .navigation > .body > .card .card-back .text {
		font-size: 17px;
	}
	
	main > .articles-card .card.tv-shape .colored  {
		width: 350px;
		height: 350px;
	}
	
	main > .articles-card .card.cube-shape .colored, 
	main > .articles-card .card.cube-shape .grayscale {
		width: 350px;
		height: 440px;
	}
	
	main > .articles-card .card.cube-shape .grayscale {
		margin-left: 80px;
	}
	
	main > .articles-card .card.tv-shape {
		margin: 140px 0;
	}
	
	main > .articles-card .card.tv-shape .grayscale {
		margin-top: -440px;
		height: 550px;
	}
	
	main > .articles-card .card.th-shape .colored {
		height: 400px;
	}
}

@media screen and (max-width: 1210px) {
	main .navigation > .body > .card .card-front .heading {
		width: 80%;
	}
	
	main .navigation > .body > .card .card-front img {
		width: 120px;
	}
	
	header .cover-img .content {
		width: 46%;
	}
}

@media screen and (max-width: 1150px) {
	main > .articles-card .card.tv-shape .colored {
		width: 300px;
		height: 300px;
	}
	
	main > .articles-card .card.tv-shape .grayscale {
		margin-top: -390px;
		height: 500px;
	}
}

@media screen and (max-width: 1110px) {
	main .navigation > .body > .card {
		width: calc((100% / 2) - 20px);
	}
	
	main .navigation > .body > .card:nth-child(3n) {
		padding-right: 30px;
	}
	
	main .navigation > .body > .card:nth-child(2n) {
		padding-right: 0px;
	}
	
	main .navigation > .body > .card .card-front img {
		width: auto;
	}
	
	main .navigation > .body > .card .card-front .heading {
		width: 70%;
		font-size: 35px;
		line-height: 35px;
	}
	
	main .navigation > .body > .card .card-back .text {
		font-size: 19px;
	}
	
	main > .article > div {
		width: 60%;
	}
	
	main > .articles-card .card .title {
		font-size: 32px;
	}
	
	main > .articles-card .card .excerpt {
		font-size: 17px;
		line-height: 22px;
	}
	
	main > .articles-card .card .btn {
		padding: 8px 20px;
		font-size: 17px;
	}
}

@media screen and (max-width: 1050px) {
	main > .articles-card .card.cube-shape .colored, 
	main > .articles-card .card.cube-shape .grayscale {
		width: 300px;
		height: 390px;
	}
	
	main > .articles-card .card.cube-shape .grayscale {
		margin-left: 50px;
		margin-top: -330px;
	}
	
	main > .articles-card .card.th-shape .colored {
		height: 300px;
		width: 60%;
	}
	
	main > .articles-card .card.tv-shape .grayscale {
		width: 250px;
	}
	
	main > .articles-card .card.th-shape .grayscale {
		height: 180px;
		margin-top: -116px;
	}
}

@media screen and (max-width: 1010px) {
	header .cover-img .content .heading {
		font-size: 57px;
		line-height: 60px;
	}
}

@media screen and (max-width: 960px) {	
	main .navigation > .body > .card .card-front img {
		width: 120px;
	}
	
	main .navigation > .body > .card .card-front .heading {
		font-size: 28px;
		line-height: 28px;
	}
	
	main .navigation > .body > .card .card-back .text {
		font-size: 17px;
	}
	
	main .navigation > h1 {
		font-size: 40px;
	}
	
	main > .slider > .controls {
		width: 70%;
	}
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 45px;
	}
	
	main > .articles-card .card > div.body-left {
		width: 38%;
	}
	
	main > .articles-card .card > div.body-left.pr8 {
		padding-right: 4%;
	}
	
	main > .articles-card .card > div.body-left.pl8 {
		padding-left: 4%;
	}
	
	main > .articles-card .card > div.body-right {
		width: 58%;
	}
	
	main > .articles-card .card.tv-shape .colored {
		width: 400px;
		height: 400px;
	}
	
	main > .articles-card .card.tv-shape .grayscale {
		width: 300px;
		margin-top: -440px;
		height: 550px;
	}
}

@media screen and (max-width: 880px) {	
	main > .articles-card .card.tv-shape .colored {
		width: 350px;
		height: 350px;
	}
}

@media screen and (max-width: 820px) {	
	main .navigation > .body {
		padding: 50px;
	}
	
	main .navigation > .body > .card .card-front img {
		width: 110px;
	}
	
	main .navigation > .body > .card .card-front .heading {
		font-size: 24px;
		line-height: 24px;
	}
	
	main .navigation > .body > .card .card-back {
		padding: 15px;
	}
	
	main .navigation > .body > .card,
	main .navigation > .body > .card:nth-child(3n)	{
		padding-right: 10px;
	}
	
	main .navigation > .body > .card:nth-child(2n) {
		padding-right: 0px;
	}
	
	main .navigation > .body > .card {
		width: calc((100% / 2) - 5px);
	}
	
	header .cover-img .content .heading {
		font-size: 57px;
		line-height: 60px;
	}
	
	main > .articles-card .card.tv-shape .colored {
		width: 300px;
		height: 300px;
	}
	
	main > .articles-card .card.tv-shape .grayscale {
		width: 250px;
		height: 450px;
		margin-top: -370px;
	}
}

@media screen and (max-width: 770px) {
	main .navigation > h1 {
		font-size: 32px;
	}
	
	main > .slider > .controls {
		width: 90%;
	}
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 40px;
	}
	
	header .cover-img .content .heading {
		font-size: 47px;
		line-height: 50px;
	}
	
	header .cover-img .content .text {
		font-size: 17px;
	}
	
	header .cover-img .content {
		width: 65%;
	}
	
	main > .articles-card .card > div {
		display: block;
	}
	
	main > .articles-card .card > div.body-left,
	main > .articles-card .card > div.body-right {
		width: 90%;
		margin: auto;
	}
	
	main > .articles-card .card > div.body-left.pr8 {
		padding-right: 0;
	}
	
	main > .articles-card .card > div.body-right {
		position: absolute;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
	}
	
	main > .articles-card .card {
		height: 450px;
	}
	
	main > .articles-card .card > div.body-left.pl8 {
		padding-left: 0;
	}
	
	main > .articles-card .card .grayscale {
		display: none;
	}
	
	main > .articles-card .card .colored {
		width: 100% !important;
		height: 100% !important;
	}
	
	main > .articles-card .card > div.body-left {
		position: relative;
		float: left;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ffffff;
		width: 70%;
	}
	
	main > .articles-card .card .title {
		font-size: 28px;
		padding-bottom: 28px;
		margin-bottom: 28px;
	}
	
	main > .articles-card .card .excerpt {
		font-size: 16px;
		line-height: 17px;
	}
	
	main > .articles-card .card .btn {
		font-size: 14px;
	}
	
	main > .articles-card .card.tv-shape {
		margin: 80px 0;
	}
}

@media screen and (max-width: 680px) {
	main > .slider > .wrapper .img-card > h1 {
		font-size: 37px;
	}
}

@media screen and (max-width: 610px) {	
	main .navigation > .body {
		padding: 40px 10px;
	}
	
	main .navigation > h1 {
		font-size: 26px;
		padding-top: 36px;
	}
	
	main > .slider > .controls {
		width: 75%;
	}
	
	main > .slider > .controls > .dot {
		margin: 20px 4%;
	}
	
	main > .article > div {
		width: 70%;
	}
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 35px;
	}
	
	main > .slider > .wrapper .img-card {
		height: 500px
	}
}

@media screen and (max-width: 580px) { 
	main > .articles-card .card > div.body-left {
		width: 80%;
	}
	
	main > .articles-card .card {
		height: 500px;
	}
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 30px;
	}
}

@media screen and (max-width: 530px) {	
	main .navigation > .body {
		padding: 40px;
	}
	
	main .navigation > .body > .card {
		width: 100%;
	}
	
	main .navigation > .body > .card,
	main .navigation > .body > .card:nth-child(3n),
	main .navigation > .body > .card:nth-child(2n) {
		padding-right: 0
	}
	
	main .navigation > .body > .card .card-front img {
		width: auto;
	}
	
	main .navigation > .body > .card .card-front .heading {
		font-size: 30px;
		width: 70%;
		line-height: 30px;
	}
	
	main .navigation > .body > .card .card-back .text {
		font-size: 21px;
	}
	
	main .navigation > .body > .card .card-back {
		padding: 30px;
	}
	
	main > .slider > .controls > .dot {
		width: 18px;
		height: 18px;
	}
	
	main > .article .text {
		font-size: 17px;
	}
	
	.first-letter {
		font-size: 70px;
		line-height: 50px;
	}
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 30px;
	}
	
	main > .slider > .wrapper .img-card > .body {
		width: 400px;
		padding: 20px;
	}
	
	main > .slider > .wrapper .img-card > .body > h1 {
		font-size: 22px;
	}
	
	main > .slider > .wrapper .img-card > .body > p.text {
		font-size: 17px;
	}
	
	header .cover-img .content {
		left: 70px;
	}
}

@media screen and (max-width: 450px) { 
	main > .slider > .wrapper .img-card > h1 {
		font-size: 27px;
	}
}

@media screen and (max-width: 450px) {
	main .navigation > .body > .card .card-back .text {
		font-size: 20px;
	}
	
	main .navigation > .body > .card .card-front .heading {
		font-size: 28px;
		line-height: 28px;
	}
	
	main > .slider > .controls {
		width: 90%;
	}
	
	main > .slider > .controls > .dot {
		width: 16px;
		height: 16px;
	}
	
	main > .slider > .controls > .dot {
		margin: 20px 3.5%;
	}
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 23px;
	}
	
	main > .slider > .wrapper .img-card > .body {
		width: 350px;
		padding: 10px;
	}
	
	main > .slider > .wrapper .img-card > .body > p.text {
		font-size: 16px;
	}
	
	main > .slider > .wrapper .img-card {
		height: 450px;
	}
	
	header .cover-img .content .heading {
		font-size: 37px;
		line-height: 40px;
		margin-bottom: 10px;
	}
	
	header .cover-img .content .text {
		font-size: 16px;
		margin: 5px 0;
    }
}

@media screen and (max-width: 360px) {
	main .navigation > .body > .card .card-back {
		padding: 10px;
	}
	
	main .navigation > .body > .card .card-back .text {
		font-size: 19px;
	}
	
	main .navigation > .body > .card .card-front .heading {
		font-size: 24px;
		line-height: 24px;
	}
	
	/*main > .article > div {
		width: 90%;
	}*/
	
	main > .slider > .wrapper .img-card > h1 {
		font-size: 20px;
	}
	
	main > .slider > .wrapper .img-card > .body {
		width: 280px;
	}
	
	main > .slider > .wrapper .img-card > .body > p.text {
		font-size: 14px;
	}
}