@media screen and (max-width : 1330px) {
	.wrapper {width: 100%; padding: 0 15px;}
	
	#header .content {padding: 0 30px;}
	
	#author .image {width: calc(50vw + 250px); margin: 0 0 0 -250px;}
}

@media screen and (max-width : 1220px) {
	#socials a {width: 60px; height: 60px;}
}

@media screen and (max-width : 1180px) {
	#header .ribbon {left: 12%;}
	#header .logo {left: 10%;}
	#header .content {padding: 0;}
	
	.col-text {padding: 0;
		-moz-column-gap: 50px;
		-webkit-column-gap: 50px;
		column-gap: 50px;	
	}
	
	#quotes {width: 100%; margin: 0;}
	.quote {height: auto; padding: 30px 20px; margin-top: 0 !important;}
	.quote:nth-child(2) {background: #e7f3f8; border: 0;}
	.quote:nth-child(2) .image img {margin: 35px 0 0 0;}
	.tweet {height: auto; padding: 20px; width: calc(33.33333333333333% - 10px); margin: 0 15px 15px 0;}
}

@media screen and (max-width : 980px) {
	#author .half-content {width: 100%; text-align: center;}
	#author .flex-row {display: block;}
	#author .content {padding: 50px 0;}
	#author .image {width: calc(100% + 30px); margin: 0 0 0 -15px;}
	
	#socials li {margin: 40px 10px 0 10px;}
}

@media screen and (max-width : 900px) {
	#header {height: auto; background-position: calc(50% - 250px) bottom;}
	#header .half-content {width: 100%; text-align: center;}
	#header .book {float: left;}
	#header .cover {width: 100%; margin: -60px 0 0 0;}
	#header .ribbon {left: 70%;}
	#header .logo {left: 86%;}
	#header .content {margin: -100px 0 240px 0;}
	
	.quote {width: 100%; margin: 0;}
	.quote + .quote {margin: 30px 0 0 0 !important;}
}

@media screen and (max-width : 700px) {
	#header .cover {margin: -50px 0 0 0;}
	#header .ribbon {width: 100px; height: 100px;}
	#header .content {margin: -80px 0 240px 0;}
	
	.middle-text {width: 100%;}
	.col-text {text-align: center;
		-moz-column-count: 1;
		-moz-column-gap: 0;
		-webkit-column-count: 1;
		-webkit-column-gap: 0;
		column-count: 1;
		column-gap: 0;
	}
	
	.tweet {width: 100%; margin-right: 0 !important;}
}

@media screen and (max-width : 560px) {
	#header .cover {margin: -30px 0 0 0;}
	#header .ribbon {width: 80px; height: 80px;}
	#header .content {margin: -50px 0 240px 0;}
	
	h1 {font-size: 1.875em;}
	
	.title-normal {font-size: 2em;}
	.title-normal.q:before {top: 70px;}
}

@media screen and (max-width : 460px) {
	#header {background-position: calc(50% - 300px) bottom;}
	
	#stores li {margin: 0 10px 20px 10px;}
	.button {width: 162px;}
}

@media screen and (max-width : 410px) {
	#header .cover {margin: -10px 0 0 0;}
	#header .content {margin: -30px 0 240px 0;}
	#header .text br {display: none;}
	
	.button {width: 152px;}
}

@media screen and (max-width : 374px) {
	#stores li {width: 100%; margin: 0;}
	#stores li + li {margin: 20px 0 0 0;}
	.button {width: 100%;}
	
	#socials li {margin: 40px 5px 0 5px;}
}