/* ------------------------------------------------------------ *\
	*
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	* {
		box-sizing: border-box;
	}
}

/* ------------------------------------------------------------ *\
	Body
\* ------------------------------------------------------------ */

body.is-fixed {
	overflow: hidden;
}

/* ------------------------------------------------------------ *\
	Wrap
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	#wrap {
		width: auto;
	}
}

/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */

.wrapper {
	min-height: 100vh;
	position: relative;
}
figure.image img {
	max-width: 100%;
	height: auto;
}

@media(max-width: 1024px) {
	.wrapper {
		display: flex;
	}
}

@media(max-width: 767px) {
	.wrapper {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------ *\
	Masthead
\* ------------------------------------------------------------ */

@media(max-width: 767px) {
 	#masthead {
 		padding: 40px 20px 20px;
 		height: auto;
 		display: flex;
 		flex-flow: row wrap;
 		align-items: flex-end;
 		justify-content: flex-end;
 		box-sizing: border-box;
 		font-size: 13px;
		background-size: cover;
 	}

	#masthead h1,
	#masthead h3 {
		margin-bottom: 20px;
		width: 100%;
		max-width: 400px;
		height: auto;
		background-size: contain;
		position: relative;
		top: initial;
		right: initial;
		display: block;
		flex: 0 0 100%;
		line-height: 1.2;
		background-position: right;
	}

	#masthead div {
		max-width: 440px;
		position: relative;
		right: initial;
		top: initial;
		display: block;
		height: auto;
	}
}

@media(max-width: 575px) {
	#masthead {
 		padding: 20px 10px 5px;
 		background-position-x: 5%;
 	}

 	#masthead h1 {
		max-width: 230px;
	}


	#masthead h3 {
		max-width: 210px;
	}
}

/* ------------------------------------------------------------ *\
	Main
\* ------------------------------------------------------------ */

#main .col {
	margin-bottom: 20px;
	float: none;
	height: auto;
	max-width: 55%;
}

#main .cola {
	margin-right: 0;
	width: auto;
}

#main .cola img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media(max-width: 1024px) {
	#main {
		flex: 0 0 60%;
		/* max-width: 60%; */
		margin: 0;
		padding: 30px 20px;
		display: block;
		width: auto;
		float: none;
	}

	#main .rotating {
		margin-bottom: 45px;
		float: none;
		width: auto;
	}

	.blog #main img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

@media(max-width: 767px) {
	#main {
		flex: 0 0 100%;
		max-width: 100%;
	}

	#main h1 {
		font-size: 30px;
	}

	#main h3 {
		font-size: 20px;
	}

	#main iframe {
		width: 100%;
		max-width: 100%;
	}

	#main a {
		word-break: break-word;
	}

	#main .col {
		max-width: 100%;
	}
}

@media(max-width: 575px) {
	#main {
		padding: 20px 10px;
	}
}

@media(max-width: 374px) {
	#main h1 {
		font-size: 26px;
	}
}

/* ------------------------------------------------------------ *\
	Homecover
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	.homecover {
		margin: 0;
		width: auto;
		float: none;
	}
}

/* ------------------------------------------------------------ *\
	Sidebar
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	#sidebar {
		margin: 0;
		padding: 30px 20px;
		/* flex: 0 0 40%; */
		max-width: 40%;
		display: block;
		width: auto;
		float: none;
	}

	#sidebar a {
		word-break: break-all;
	}

	#sidebar .nav2 a {
		height: auto;
	}

	#sidebar .box + p {
		text-align: center;
	}

	#sidebar .nav2 {
		font-size: 13px;
	}
}

@media(max-width: 767px) {
	#sidebar{
		max-width: 100%;
		flex: 0 0 100%;
		display: contents;
	}

	#sidebar h3:first-child,
	#sidebar .nav2 {
		order: -1;
	}

	#sidebar .nav2 {
		display: flex;
		flex-direction: column;
		background-color: #ccba8a;
		max-height: 41px;
		overflow: hidden;
		position: relative;
		transition: max-height .3s;
	}

	#sidebar .nav2 li.current {
		order: -1;
	}

	#sidebar .nav2::after {
		content: '';
		display: block;
		width: 15px;
		height: 15px;
		background-image: url("data:image/svg+xml,%0A%3Csvg xml:space='preserve' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 14'%3E%3Cpath fill='currentColor' d='M.15 0 14.5 14.35 28.85 0z'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 11px;
		right: 15px;
		pointer-events: none;
		transition: transform .3s;
	}

	#sidebar .nav2 li.current a {
		padding-right: 40px;
	}

	#sidebar .nav2.is-active::after {
		transform: rotate(180deg);
	}

	#sidebar .nav2.is-active li.current a {
		background: #709d41 !important;
		color: #fff !important;
	}

	#sidebar .nav2 li.current a {
		background: #ccba8a !important;
		color: #333 !important;
	}
}

@media(max-width: 575px) {
	#sidebar {
		padding: 20px 10px;
	}
}

/* ------------------------------------------------------------ *\
	Small Covers
\* ------------------------------------------------------------ */

@media(max-width: 767px) {
	.small-covers {
		margin-bottom: 20px;
	}

	.small-covers a {
		text-align: center;
	}
}

/* ------------------------------------------------------------ *\
	Books Landing
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	.books-landing #main {
		margin: 0;
		width: auto;
		flex: 1;
		max-width: 100%;
	}

	.books-landing #main figure {
		margin-right: 0;
	}

	.books-landing .text {
		width: auto;
	}
}

@media(max-width: 767px) {
	.books-landing #main figure {
		margin: 0 0 20px !important;
	}

	.books-landing .image {
		padding-bottom: 0;
		float: none;
		width: 100%;
		max-width: 100%;
		display: block;
	}

	.twofifty_width {
		width: 100% !important;
		float:  none !important;
		margin: 0 0 20px !important;
	}

	#main .rightimgbox {
		margin: 0 0 20px !important;
		float:  none;
		width: 100% !important;
	}
}

/* ------------------------------------------------------------ *\
	invis
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	.invis {
		text-align: center;
	}

	.invis img {
		width: auto !important;
		height: auto !important;
		max-width: 100%;
	}

	.invis .twitter-timeline {
		margin: 0;
		width: auto !important;
	}

	.invis .twitter-timeline iframe {
		width: auto !important;
		max-width: 100%;
	}
}

@media(max-width: 767px) {
	.invis .twitter-timeline {
		padding: 0 10px;
		max-width: 100% !important;
	}
}

/* ------------------------------------------------------------ *\
	Nav Trigger
\* ------------------------------------------------------------ */

.nav-trigger {
	width: 38px;
	height: 24px;
	position: relative;
	z-index: 10;
	display: none;
}

.nav-trigger span {
	position: absolute;
	top: 0;
	left: 0;
	background:#000;
	width: 100%;
	height: 3px;
	border-radius: 100vw;
	transition: transform .4s, opacity .4s .4s, top .4s .4s;
}

.nav-trigger span:nth-child(2) {
	top: 11px;
}

.nav-trigger span:nth-child(3) {
	top: 22px;
}

.nav-trigger.is-active span {
	top: 13px;
	transform: rotate(45deg);
	border-radius: 4px;
	transition: transform .4s .4s, opacity .4s, top .4s;
}

.nav-trigger.is-active span:nth-child(2){
	transform: none;
	opacity: 0;
}


.nav-trigger.is-active span:nth-child(3) {
	transform: rotate(-45deg);
}

@media(max-width: 767px) {
	.nav-trigger {
		display: inline-block
	}
}

/* ------------------------------------------------------------ *\
	Nav 1
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	#nav1 {
		display: flex;
		justify-content: space-around;
	}

	#nav1 li {
		margin: 0 10px;
	}
}

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.header .header__content {
	display: none;
}

@media(max-width: 767px) {

	.header {
		margin-bottom: 20px;
		text-align: center;
	}

	.header .header__wrapper {
		padding: 10px 20px;
		position: relative;
		background-color: #baa468;
		box-sizing: border-box;
	}

	.header.is-fixed .header__wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		border: solid #fff;
		border-width: 0 5px 0 5px;
		z-index: 100;
	}

	.header.is-fixed .header__inner {
		height: calc(100vh - 100%);
	}

	.header .header__inner {
		padding: 50px 20px 130px;
		width: 100%;
		max-width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 100;
		background:  #baa468;
		text-align: center;
		box-sizing: border-box;
		opacity: 0;
		pointer-events: none;
		overflow: auto;
	}

	.header .header__inner.is-visible {
		opacity: 1;
		pointer-events: all;
	}

	.header .header__nav {
		margin-bottom: 20px;
	}

	.header ul#nav1 {
		display: block;
		height: auto;
		background-image: none;
		text-align: center;
	}

	.header ul#nav1 li {
		margin: 0;
		display: block;
		float: none;
	}

	.header ul#nav1 li + li {
		margin-top: 10px;
	}

	.header .header__content {
		display: block;
	}
}

/* ------------------------------------------------------------ *\
	Masonry
\* ------------------------------------------------------------ */

@media(max-width: 1024px){
	.masonry img {
		max-width: 100%;
	}
}

@media(max-width: 767px) {
	.masonry {
		display: block;
		column-count: 1 !important;
	}

	.masonry img {
		width: 100%;
		height: auto !important;
		object-fit: contain;
	}

	.masonry-wrapper {
		padding: 0;
	}

	.masonry-item + .masonry-item {
		margin-top: 30px;
	}
}

/* ------------------------------------------------------------ *\
	Subscribe
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	#subscribe {
		margin: 0 auto !important;
		max-width: 180px;
		text-align: center;
	}

	#subscribe .button {
		padding: 5px 0 3px;
		height: auto;
	}

	#subscribe > a {
		margin: 0 auto 10px !important;
	}

	#subscribe p {
		margin-bottom: 0;
	}
}

@media(max-width: 767px) {
	#subscribe.subscribe {
		margin: 0 55px 20px 0 !important;
		float:  none;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: static;
		max-width: 100%;
	}

	#subscribe > a {
		margin: 0 !important;
	}

	#subscribe.subscribe p {
		margin: 0 0 0 20px;
		width: auto;
	}

	#subscribe.subscribe p span {
		display: block;
		margin-bottom: 10px;
	}
}

/* ------------------------------------------------------------ *\
	Juxta
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	.juxta  {
		width: 100%;
		margin: 0;
		float: none;
		display: block;
	}
}

@media(max-width: 767px) {
	.juxta a {
		color: inherit;
		text-decoration: none;
	}

	.juxta a:visited {
		color: inherit;
	}
}

/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */

@media(max-width: 1024px) {
	#footer {
		padding: 30px 20px;
		display: flex;
		align-items: center;
		height: auto;
	}

	.footnav {
		margin-right: 20px;
		order: -1;
	}

	.footnav #footer_nav {
		margin: 0 -10px;
		display: flex;
		align-items: center;
		flex-flow: row wrap;
	}

	.footnav #footer_nav li {
		padding: 0 10px;
	}

	.footnav #footer_nav li:first-child {
		margin-bottom: 20px;
		flex: 0 0 100%;
	}
}

@media(max-width: 767px) {
	#footer {
		display: none;
	}
}