/*
░▀█▀░█▀█░█▀▀░█▀▄░█▀█░█▀▄░█▀▀░█▀▄░░░█░░░█▀█░█░█░█▀▀
░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄░█▀▀░█░█░░░█░░░█░█░▀▄▀░█▀▀
░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀░▀░▀▀▀░▀▀░░░░▀▀▀░▀▀▀░░▀░░▀▀▀
*/

html {font-size: 12px; -webkit-font-smoothing: antialiased;}
body {margin:0; padding:0; background-color: #000000; }

::-moz-selection {background: #4a749d; color: #000000; text-shadow: none;}
	 ::selection {background: #4a749d; color: #000000; text-shadow: none;}

.commentbox ::-moz-selection {background: #ef4396; color: #000000; text-shadow: none;}
.commentbox ::selection {background: #ef4396; color: #000000; text-shadow: none;}

.clear {clear:both;}

img {margin: 0; padding: 0; width: 100%; height: auto;}

/*
 Typography
 */

h1, h2, h3, p {margin:0; padding:0; text-decoration: none; font-weight: normal; cursor: default;}
h1, p {color: #ef4396; font-size: 1.5rem; line-height: 2rem;}
h1, h2 {font-family: "ZetkinBlack", sans-serif;}
h2, h3 {color: #000000; font-size: 1.3rem; line-height: 1.7rem;}
p, h3  {font-family: "ZetkinRegular", sans-serif;}

a, a:visited {outline: 0; color: #ef4396; line-height: inherit; cursor: pointer !important; }
a:hover {color: #efefef; cursor: pointer !important;}

/*
 Layout
 */

#container {width: calc(100% - 6rem); margin: 2.5rem 3rem;}

.mobile {display:block !important;}
.desktop {display:none !important;}

.column, .columns {display: inline-block; float: left; margin: 0; padding: 0;}

.column,							/*.column will be what to use for full width*/
.one.columns,
.two.columns,
.three.columns,
.four.columns,
.five.columns,
.six.columns,
.seven.columns,
.eight.columns,
.nine.columns,
.ten.columns,
.eleven.columns,
.twelve.columns {width: 100%;}

.offsetbyone,
.offsetbytwo,
.offsetbythree,
.offsetbyfour,
.offsetbyfive,
.offsetbysix,
.offsetbyseven,
.offsetbyeight,
.offsetbynine,
.offsetbyten,
.offsetbyeleven	{margin-left: 0;}
.afterone {margin-right: 0;}

.mobcenter {margin-left: calc(50% - 86px);}

.commentbox {background-color: #4a749d; width: calc(100% - 4rem); padding: 2rem; margin-bottom: 6rem;}
.commentname {display: inline-block; float: left; text-transform: uppercase;}
.commentdate {display: inline-block; float: left; margin-bottom: 0.8rem;}

@media only screen and (min-width: 980px) {

/*	#container {width: 89.5% !important;}
*/
	.mobile {display:none !important;}
	.desktop {display:block !important;}

	.columns		{display: inline-block; float: left; margin: 0; padding: 0 0rem 1.5rem;}

	.one.columns	{width: 8.333%}
	.two.columns	{width: 16.666%}
	.three.columns	{width: 25%}
	.four.columns	{width: 33.333%}
	.five.columns	{width: 41.666%}
	.six.columns	{width: 50%}
	.seven.columns	{width: 58.333%}
	.eight.columns	{width: 66.666%}
	.nine.columns	{width: 75%}
	.ten.columns	{width: 83.333%}
	.eleven.columns	{width: 91.666%}
	.twelve.columns	{width: 100%}

	.offsetbyone	{margin-left: 8.333%;}
	.offsetbytwo	{margin-left: 16.666%;}
	.offsetbythree	{margin-left: 25%;}
	.offsetbyfour	{margin-left: 33.333%;}
	.offsetbyfive	{margin-left: 41.666%;}
	.offsetbysix	{margin-left: 50%;}
	.offsetbyseven	{margin-left: 58.333%;}
	.offsetbyeight	{margin-left: 66.666%;}
	.offsetbynine	{margin-left: 75%;}
	.offsetbyten	{margin-left: 83.333%;}
	.offsetbyeleven	{margin-left: 91.666%;}
	.afterone {margin-right:8.333% !important;}

	.mobcenter {margin-left: -1rem;}

	.commentdate {float: right;}
}

#audioplayer{
  height: 127px;
  /*background-color: pink;*/
}
 
#pButton{width:166px; height: 127px;
  border: none; outline:none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  float:left;}
 
.play{background: url('play.svg');}
.pause{background: url('pause.svg');}
 
#volume_control{width:100%; margin: auto; height: 127px; /*background-color: pink;*/}
 
#rngVolume_label{color: #4a749d; transform: translateY(-2.3rem); font-size: 1.5rem;}
 
#rngVolume{vertical-align:middle;}

@-moz-document url-prefix() {
    #volume_control{margin-top: 1.1rem !important;}
}

input[type=range].volcust {
  width: 100%;
  margin: 42px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range].volcust:focus {
  outline: none;
}
input[type=range].volcust::-webkit-slider-runnable-track {
  background: #4a749d;
  border: 0;
  border-radius: 2px;
  width: 100%;
  height: 16px;
  cursor: pointer;
  margin-top:1.1rem;
}
input[type=range].volcust::-webkit-slider-thumb {
  margin-top: calc(-42px - 1.1rem);
  width: 57px;
  height: 127px;
  background: #4a749d;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range].volcust:focus::-webkit-slider-runnable-track {
  background: #4a749d;
}
input[type=range].volcust::-moz-range-track {
  background: #4a749d;
  border: 0;
  border-radius: 2px;
  width: 100%;
  height: 16px;
  cursor: pointer;
}
input[type=range].volcust::-moz-range-thumb {
  width: 57px;
  height: 127px;
  background: #4a749d;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
input[type=range].volcust::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 42px 0;
  color: transparent;
  width: 100%;
  height: 16px;
  cursor: pointer;
}
input[type=range].volcust::-ms-fill-lower {
  background: #000000;
  border: 0;
  border-radius: 4px;
}
input[type=range].volcust::-ms-fill-upper {
  background: #4a749d;
  border: 0;
  border-radius: 4px;
}
input[type=range].volcust::-ms-thumb {
  width: 57px;
  height: 127px;
  background: #4a749d;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range].volcust:focus::-ms-fill-lower {
  background: #4a749d;
}
input[type=range].volcust:focus::-ms-fill-upper {
  background: #4a749d;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range].volcust {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}






@font-face {
	font-family: 'ZetkinRegular';
	src: url('Zetkin-Regular.woff2') format('woff2'),
		 url('Zetkin-Regular') format('woff'),
		 url('Zetkin-Regular.otf') format('opentype');
		font-weight: normal;
  font-style: normal;
  font-stretch: normal;}
@font-face {
	font-family: 'ZetkinBlack';
	src: url('Zetkin-Black.woff2') format('woff2'),
		 url('Zetkin-Black') format('woff'),
		 url('Zetkin-Black.otf') format('opentype');
		font-weight: normal;
  font-style: normal;
  font-stretch: normal;}
@font-face {
	font-family: 'ZetkinBlackOblique';
	src: url('Zetkin-BlackOblique.woff2') format('woff2'),
		 url('Zetkin-BlackOblique') format('woff'),
		 url('Zetkin-BlackOblique.otf') format('opentype');
		font-weight: normal;
  font-style: normal;
  font-stretch: normal;}