/*
Theme Name: Rebekka Karijord
Theme URI: n/a
Author: Raffaele Malanga / Els van Bloois
Author URI: https://farstudios.com/
Description: Theme for RebekkaKarijord.com
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: rebekkakarijord
*/

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,form{
	padding:0;
	margin:0;
}
body{
	font-family:'Muli',Arial,sans-serif;
	font-size:100%;
	line-height:1;
	background:white;
	color:black;
}
.screen-reader-text{
	position:absolute;
	top:-40000px;
	left:-40000px;
}
.skip-link:focus{
	top:40px;
	left:40px;
	background:white;
	color:black;
	padding:10px 20px;
	border:2px solid black;
	text-decoration:none;
	text-transform:uppercase;
	font-size:100%;
}
.menu-toggle{
	display:none;
}
a{
	color:inherit;
}
a:focus,
a:hover,
a:active{
	text-decoration:none;
}
img,
iframe{
	max-width:100%;
}
.inner{
	max-width:1400px;
	max-width:1024px;
	padding:0 15px;
	margin:0 auto;
}

#masthead{
	padding:40px 0;
}

#masthead .inner{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
}
.site-title{
	font-size:18px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:6px;
	white-space:nowrap;
	margin-bottom:0;
}
.site-title,
.site-nav ul{
	line-height:20px;
}
.site-title a,
.site-nav a{
	text-decoration:none;
}
.site-nav ul{
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
}
.site-nav ul li{
	list-style:none;
	display:inline;
	padding-left:22px;
}
.site-nav a{
	border-bottom:1px solid transparent;
}
.site-nav .current-menu-item a,
.site-nav a:focus,
.site-nav a:hover,
.site-nav a:active{
	border-color:black;
}

#banner{
	margin-bottom:70px;
	overflow:hidden;
}
#audio{
	float:left;
	padding-right:10px;
}
.page-id-2 #banner{
	margin-bottom:35px;
}
h2{
	font-size:14px;
	font-weight:700;
	line-height:1.5;
}
p{
	font-size:14px;
	font-weight:400;
	line-height:1.5;
	margin-bottom:1.5em;
}
#banner img{
	margin-bottom:10px;
}
#banner p.credits{
	float:right;
	color:#aaa;
	font-size:12px;
	text-align:right;
	margin-bottom:0;
	padding-top:2px;
}
div.quote{
	text-align:center;
	margin-bottom:55px;
}
div.quote p{
	font-size:18px;
	margin-bottom:0;
}
div.quote p.byline{
	color:#848484;
}
ul#instafeed{
	margin-left:-5px;
	margin-right:-5px;
}
ul#instafeed li{
	width:25%;
	display:inline-block;
	vertical-align:top;
	box-sizing:border-box;
	padding:0 5px;
	text-align:center;
}
ul#instafeed li *{
	display:block;
	margin-bottom:10px;
}
ul#instafeed li a{
	text-decoration:none;
	position:relative;
}
ul#instafeed li span.image{
	width:100%;
	height:0;
	box-sizing:border-box;
	padding-top:99%;
	border:1px solid grey;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
ul#instafeed li span.caption{
	font-size:12px;
	line-height:1.2;
	text-align:center;
	padding:5px 0;
}


h1.page-title,
h2.page-title,
h2.page-section-title{
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.3;
	margin-bottom:2.3em;
}

ul.works,
ul.links{
	list-style:none;
	font-size:14px;
	text-align:left;
}
ul.albums{
	margin-left:-17px;
	margin-right:-18px;
	margin-bottom:70px;
}
ul.scores{
	margin-left:-16px;
	margin-right:-16px;
	margin-bottom:70px;
}
ul.works li{
	display:inline-block;
	vertical-align:top;
	text-align:center;
	box-sizing:border-box;
	margin-bottom:3em;
}
ul.links li{
	display:block;
}
ul.albums li{
	width:33.33%;
	padding:0 18px 0 17px;
}
ul.albums ul.links li{
	width:100%;
	padding:0;
}
ul.scores li{
	width:25%;
	padding:0 16px;
}
ul.albums li img{
	margin-bottom:1.8em;
}
ul.scores li img{
	margin-bottom:1em;
}
ul.works h3,
ul.works p,
ul.works ul li{
	font-size:14px;
	line-height:1.3;
	margin-bottom:.2em;
}
ul.works h3 span,
ul.works p,
ul.scores{
	font-weight:400;
}
ul.works a{
	color:#F42537;
	text-decoration:none;
}
ul.works a:focus,
ul.works a:hover,
ul.works a:active{
	color:inherit;
}

.list-toggle{
	float:right;
	cursor:pointer;
	margin-left:15px;
}
.list-toggle .liston{
	display:none;
}
.list-toggle.liston .liston{
	display:block;
}
.list-toggle.liston .listoff{
	display:none;
}

ul.listform{
	margin-left:auto !important;
	margin-right:auto !important;
}

ul.listform li{
	display:block !important;
	width:100% !important;
	text-align:left;
	padding-left:0 !important;
	padding-right:0 !important;
	margin-bottom:.8em;
	overflow:hidden;
}
ul.works .space{
	display:none;
}
ul.listform span.space{
	display:inline;
}
ul.listform li h3,
ul.listform li p,
ul.listform li ul{
	display:inline !important;
	margin-right:12px;
}
ul.listform li img,
ul.listform li br,
ul.listform li span.comma{
	display:none !important;
}
ul.listform li .year{
	float:left;
	margin-right:10px;
}
/* alt style */
ul.listform li.album,
ul.listform li.score{
	position:relative;
	padding-left:60px !important;
}
ul.listform li .year{
	position:absolute;
	left:0;
	top:0;
}

ul.listform ul.links li{
	display:inline !important;
	border-left:1px solid #000;
	padding:0 5px !important;
}
ul.listform ul.links li:first-child{
	padding-left:0 !important;
	border-left-width:0;
}

ul.search li img{
	float:left;
	width:150px;
	margin-right:20px;
}
ul.search li{
	overflow:hidden;
	text-align:left;
	padding-bottom:20px;
	border-bottom:1px solid #aaa;
	margin-bottom:20px;
}
ul.search li ul li{
	padding-bottom:0;
	border-bottom-width:0;
	margin-bottom:0;
}
.nav-links{
	font-size:10px;
	text-transform:uppercase;
	padding:20px 0;
	border-top:1px dashed #aaa;
	overflow:hidden;
}
.nav-links a{
	text-decoration:none;
}
.nav-links a:focus,
.nav-links a:hover,
.nav-links a:active{
	color:#aaa;
}
.nav-links .nav-previous{
	float:left;
}
.nav-links .nav-next{
	float:right;
}

.columns{
	overflow:hidden;
}
.columns .col{
/*
	display:inline-block;
	width:350px;
	max-width:50%;
*/
	vertical-align:top;
	box-sizing:border-box;
	padding-right:20px;
}
/*
.columns .col1{
	width:100%;
	max-width:100%;
}
*/
.columns .column{
	display:inline-block;
	max-width:50%;
	vertical-align:top;
	box-sizing:border-box;
}
.columns .column0{
	max-width:768px;
}
.columns .column1{
	padding-right:50px;
}
.columns .column2{
	padding-left:50px;
}

#colophon{
	padding:70px 0;
}
ul#social{
	list-style:none;
	text-align:center;
	margin-bottom:1.5em;
}
ul#social li{
	display:inline-block;
	padding:0 5px;
}
ul#social li a{
	display:block;
	text-decoration:none;
}
#colophon p{
	color:#aaa;
	font-size:12px;
	font-weight:400;
	line-height:1.3;
	text-align:center;
}
#colophon p a{
	text-decoration:none;
}
#colophon p a:focus,
#colophon p a:hover,
#colophon p a:active{
	text-decoration:underline;
}


/* change styles of wp audio player */


#audio .wp-playlist-current-item,
#audio .mejs-controls .mejs-currenttime-container,
#audio .mejs-controls .mejs-time-rail,
#audio .mejs-controls .mejs-duration-container,
#audio .mejs-controls .mejs-volume-button,
#audio .mejs-controls a.mejs-horizontal-volume-slider{
	display:none !important;
}

#audio .wp-playlist,
#audio .wp-audio-playlist,
#audio .wp-playlist-light{
	overflow:hidden;
	border-width:0;
	padding:0;
	margin:0;
}
#audio .mejs-container.mejs-audio{
	float:left;
	width:24px !important;
	height:24px !important;
}
#audio .wp-playlist-tracks{
	margin-left:30px;
	margin-top:2px;
}
#audio .wp-playlist-item{
	display:none;
}
#audio .wp-playlist-item.wp-playlist-playing{
	display:block;
	border-width:0;
}
#audio .mejs-container, 
#audio .mejs-container .mejs-controls,
#audio .mejs-embed, 
#audio .mejs-embed body{
	background:#cfcfcf;
	border-radius:20px;
}

#audio .mejs-button{
	height:24px;
	width:24px;
}
#audio .mejs-button > button{
	height:24px;
	width:24px;
	margin:0;
	background:url(img/play.png) transparent no-repeat center;
}
#audio .mejs-button.mejs-pause > button{
	background:url(img/pause.png) transparent no-repeat center;
}

#audio .mejs-container .mejs-controls{
	padding:0;
	height:24px !important;
}
#audio .wp-playlist-item-length{
	display:none;
}
#audio .wp-playlist-light .wp-playlist-caption,
#audio .wp-playlist-item-title{
	font-size:12px;
	font-weight:normal;
	color:#aaa;
	overflow:visible;
	text-overflow:unset;
	white-space:normal;
}
#audio .wp-playlist-item .wp-playlist-caption{
	max-width:100%;
}





/* 
@media (max-width:1300px){
	ul.works{
		margin-left:-20px;
		margin-right:-20px;
	}
	ul.works li{
		padding:0 20px;
	}
}
@media (max-width:1200px){
	ul.works{
		margin-left:-15px;
		margin-right:-15px;
	}
	ul.works li{
		padding:0 15px;
	}
}
@media (max-width:1000px){
	ul.works{
		margin-left:-10px;
		margin-right:-10px;
	}
	ul.works li{
		padding:0 10px;
	}
	ul.scores li{
		width:33.33%;
	}
}
*/
@media (max-width:900px){
	ul.works{
		margin-left:-15px;
		margin-right:-15px;
	}
	ul.albums li.album{
		width:50%;
		padding:0 15px;
	}
	ul.scores li.score{
		padding:0 15px;
	}
}
@media (max-width:700px){
	ul.works{
		margin-left:-10px;
		margin-right:-10px;
	}
	ul.albums li.album,
	ul.scores li.score{
		padding:0 10px;
	}
	ul.scores li{
		width:50%;
	}
}
@media (max-width:700px){
	#masthead .inner{
		align-items:flex-start;
		position:relative;
	}
	.menu-toggle{
		float:right;
		display:block;
		height:26px;
		width:30px;
		background:url(img/menu.png) #fff no-repeat right center;
		padding:0;
		border-width:0;
		margin-bottom:10px;
		cursor:pointer;
	}
	.menu-toggle span{
		position:absolute;
		left:-4000px;
	}
	#site-navigation .nav-menu{
		display:none;
	}
	body.toggled-on #banner,
	body.toggled-on #content,
	body.toggled-on #colophon{
		display:none;
	}
	#site-navigation.toggled-on .nav-menu{
		position:absolute;
		left:0;
		top:7em;
		display:block;
		width:100%;
		box-sizing:border-box;
		clear:both;
		text-align:center;
		background:white;
		padding-bottom:1em;
	}
	#site-navigation.toggled-on .nav-menu li{
		display:block;
		padding:0 15px 8px 15px;
	}
	.site-nav a{
		display:block;
		padding:2px;
	}
	.site-nav .current-menu-item a,
	.site-nav a:focus,
	.site-nav a:hover,
	.site-nav a:active{
		color:red;
		border-color:white;
	}
}
@media (max-width:650px){
	.columns .column{
		max-width:100%;
		padding-left:0;
	}
}
@media (max-width:477px){
	ul.albums{
		max-width:430px;
		margin-left:auto;
		margin-right:auto;
	}
	ul.albums li.album{
		width:100%;
		padding:0;
	}
	.columns .col{
		max-width:100%;
	}
	ul#instafeed li{
		width:50%;
	}
}
@media (max-width:400px){
	.site-title{
		font-size:18px;
		letter-spacing:4px;
	}
}
@media (max-width:360px){
	.site-title{
		font-size:16px;
		letter-spacing:3px;
		white-space:wrap;
	}
	ul.scores{
		max-width:314px;
		margin-left:auto;
		margin-right:auto;
	}
	ul.scores li.score{
		width:100%;
		padding:0;
	}
}