/*
	ARK styles
	CJS - 2017	
*/

/*html { margin-left: calc(100vw - 100%);}*/

* {
	box-sizing: border-box;
}

body{
}

a{
	color:#000;
}

#mainwrap a:hover, .nav a:hover, #booknav a:hover, .current-menu-item a{
	c__olor:magenta !important;
}

.err{
	border:1px solid red;
}

.msg{
	position: fixed;
	top:0px;
	left:0;
	width:100%;
	display: none;
}
.msg div{
	position: relative;
	width:100%;
	height:50px;
	line-height: 50px;
	margin:0 auto;
	text-align: center;
	background-color: #000;
	color:#fff;
	font-weight: bold;
	opacity: .9;
}

#cart{
	background-color: #fff; 
	padding: 32px;
	border: 1px solid #ccc
}
.cartitem{
	border-bottom: 1px solid #ccc; 
	padding: 32px 0; 
	font-size:13px;
}
.cart-image{
	width:7.5%;
	margin-right: 2%;
}
.cart-image img{
	width: 100%;
}
.cart-title{
	width:45.5%;
}
.cart-quantity{
	width:15%;
}
.cart-itemprice{
	width:15%;
	text-align:right;
}
.cart-lineprice{
	width:15%;
	text-align:right;
}
#cart-form, .cart-sec{
	margin-top: 64px;
	_width: 65%;
	padding:32px;
	border: 1px solid #ccc;
}
#cart-form label{
	display: block;
	width: 100%;
	font-weight: bold;
	margin: 0 0 32px 0;
	font-size: 13px;
}
#cart-form label input[type=text]{
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: 13px;
	padding: 10px;
	margin-top: 3px;
	border:1px solid #ccc;
}
#cart-form label textarea{
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: 13px;
	padding: 10px;
	margin-top: 3px;
	border:1px solid #ccc;
}
#cart-form label span{
	display: block;
	color:red;
	font-weight: normal;
}
#cart-form .wrap label:first-child{
	width: 49%;
}
#cart-form .wrap label:last-child{
	width: 50%;
}
#cart-form input[type=submit], button{
	border: 1px solid #000;
	background-color: #000;
	color:#fff;
	padding: 10px;
	font-weight: bold;
	border-radius: 4px;
}

#cart-form input[type=submit]:hover, button:hover{
	background-color: #fff;
	color:#000;
	padding: 10px;
	font-weight: bold
}
#cart-info{
	display: none;
	_font-size:13px;
	margin-top: 64px;
	width: calc(35% - 32px);
	padding:32px;
	border: 1px solid #000;
}
#paymethod{
	margin-top: 64px;
	padding:32px;
	border: 1px solid #000;

}
#ark-container{
	width:85%;
	max-width:1200px; 
	margin:0 auto; 
}

header#ark-top{
	margin-top:93px;
	overflow: hidden;
}

#books{
	background-color: transparent;
	margin-top: 100px;
	display: none;
}

#booknav{
	margin: 0 0 10px 0;
	font-size: 13px;
	overflow: hidden;
}

#booknav a{
	color:#000;
	text-decoration: none;
	display: inline-block;
	margin-right: 30px;
	padding: 10px;
}
#booknav .left a{
}

#bookframe{
	display: none;
	margin: 0 0 100px 0
}

#wrap-book{
	margin-top: 100px;
}

#mainwrap{
	margin-top: 100px;	
	padding-bottom: 200px
} 

.newsarchive .news{
	padding: 20px 0;
	border-bottom: 1px solid #fff
}

.newsarchive .news:first-child{
	_padding: 0 0 20px 0;
}

.newsarchive .news:last-child{
	border-bottom: 0px solid #000
}

.newsarchive .news a{
	color:#000;
	text-decoration: none;
	font-weight: bold
}

ul.nav#menu-hovedmenu{
	list-style-type: none;
	margin:0;
	padding: 0;
	font:normal 13px arial, 'Trebuchet MS', Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: right;
	z-index: 1000;
	float: right;
}

#mobilemenu{
	font:normal 13px arial, 'Trebuchet MS', Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: right;
	z-index: 1000;
	float: right;
	text-decoration: none;
	display: none;
	padding:10px;
	background-color: #000;
	color:#fff;
	position: fixed;
	top:20px;
	right:20px;
}

ul.nav#menu-hovedmenu li{
	margin:0;
	padding: 0;
	height:20px;
	line-height: 20px
}

ul.nav#menu-hovedmenu li a{
	text-decoration: none;
	color:#666;
}

.gridsizer{
	width:calc(20% - 88px);
}

.guttersizer{
	width:110.2px;
}

.book{
	width:calc(20% - 88px); 
	margin-bottom: 100px;
}

.book .bookimg{
	position: relative;
}

.book .bookimg img{
	width: 100%;
}

.book .bookimg a.overlay{
	opacity: 0;
	transition: opacity 0.5s;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,0.8);
	color:#fff;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font:normal 11px arial, 'Trebuchet MS', Helvetica, sans-serif;
	height:100%;
	/*display: flex;
	justify-content: center; /* align horizontal */
	/*align-items: center; /* align vertical */

}
.book .bookimg a.overlay span{
	display: block;
	position: relative;
  	top: 50%;
    transform: translateY(-50%);
}


.book .bookimg:hover a.overlay{
	opacity: 1;
	transition: opacity 0.5s;
}

.book .title{
	text-align: left;
	height: 40px;
	font:normal 11px/1.5 arial, 'Trebuchet MS', Helvetica, sans-serif;
	_text-transform: uppercase;
	font-weight: normal;
	padding:10px 2px;
}

.wrap{
	overflow: hidden;
}

.left{
	float: left;
}

.right {
	float: right;
}

#booknav .right a{
	text-align: right;
	margin-right: 0 !important;
	font-weight: bold;
}

.closemenu{
	display: none;
}

.item-quantity{
	text-align: center;
}

@media screen and (max-width: 1300px){
	.gridsizer{
		width:calc(25% - 88px);
	}

	.guttersizer{
		width:117.43px;
	}

	.book{
		width:calc(25% - 88px); 
	}
}

@media screen and (max-width: 1100px){
	.gridsizer{
		width:calc(33.333% - 66px);
	}

	.guttersizer{
		width:99px;
	}

	.book{
		width:calc(33.333% - 66px); 
	}
}

@media screen and (max-width: 768px){
	#cart-form{
		width: 100%;
		float: none;
	}

	#cart-info{
		width: 100%;
		float: none;
	}

	header#ark-top{
		margin-top:20px;
		overflow: hidden;
	}

	#booksort{
		margin: 50px 0 0 0;
	}


	#ark-container{
		width:90%;
	}

	#mobilemenu{
		display: block;
	}

	.gridsizer{
		width:calc(50% - 44px);
	}

	.guttersizer{
		width:88px;
	}

	.book{
		width:calc(50% - 44px); 
	}

	ul.nav#menu-hovedmenu{
		display: none;
		position: fixed;
		top:20px;
		left:19px;
		right: 19px;
		background-color: #000;
	}
	.closemenu{
		text-decoration: none;
		display:block;
		position:absolute;
		right:0;
		top:0px;
		color:#fff;
		font-size:32px;
		background-color: #fff;
		color:#000;
		width:50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	ul.nav#menu-hovedmenu li{
		display: block;
		text-align: center;
		color:#aaa;
		font-size: 2em;
		_border-bottom: 1px solid #aaa;
		height: 64px;
		line-height: 64px
	}
	ul.nav#menu-hovedmenu li span{
		color:#aaa;
	}
	ul.nav#menu-hovedmenu li a{
		color:#fff;
	}

}

@media screen and (max-width: 530px){	
	.cartitem{
		padding: 10px 0;
		border-bottom: 1px solid #aaa;
		margin-right: 0;
	}
	.cartitem img{
		margin-bottom: 10px
	}
	.cart-image{
		margin-right: 0;
	}

	.cartitem > div{
		float: none;
		width: auto;
	}

	#booknav .left,	#booknav .right{
		width:100%;
		margin:5px 0;
	}

	#booknav .right{
		/*text-align: right;*/
	}
	
}

@media screen and (max-width: 400px){
.book .title{
	font:normal 14px/1.5 arial, 'Trebuchet MS', Helvetica, sans-serif;
}

	.cartitem{
		padding: 10px 0;
		border-bottom: 1px solid #aaa;
		margin-right: 0;
	}
	.cartitem img{
		margin-bottom: 10px
	}
	.cart-image{
		margin-right: 0;
	}

	.cartitem > div{
		float: none;
		width: auto;
	}

	#ark-container{
		width:90%;
	}

	.gridsizer{
		width:calc(100%);
	}

	.guttersizer{
		width:0;
	}

	.book{
		width:calc(100%); 
	}
}

.imgoverlay{
	display: none;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom: 0;
	background-color: rgba(255,255,255,.9);	
	width: 100%;
}

.imgoverlay img{
	display: block;
	height:calc(100% - 50px);
	margin:25px auto;
}


.imgoverlay .closeX{
	position: absolute;
	top:25px;
	right:25px;
	color:#000;
	font:bold 40px verdana;
	display: block;
	text-decoration: none;
}

.stripe-checkout-custom{
	background-color: #000;color:#fff;padding: 10px; display: block; text-align: center;border:0;
	font-weight: bold;
}

#booksort{
	font-size: 12px;
	overflow: hidden;
	margin-top: 32px;
}
#booksort a, #booksort div{
	text-decoration: none;
	display: block;
	color:#aaa;
	margin-left: 32px;
	float:right;
}
#booksort a{
	text-decoration: none;
	display: block;
	color:#aaa;
	margin-left: 32px
}
#booksort a:hover{
	text-decoration: underline;
	color:#333;
}