@font-face {
	font-family: 'Steelfish';
	src:	url('fonts/steelfish_rg.woff2') format('woff2'),
			url('fonts/steelfish_rg.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
*{
	padding:0;
	margin:0;
}
body{
	overflow-x:hidden;
}
body, input{
	font-size:18pt;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
}
.btn, a.btn{
	min-width:6em;
	text-align:center;
	display:inline-block;
	background:black; color:white;
	border:2px solid black;
	font-size:0.75em;
	padding:1em 2em;
	cursor:pointer;
	text-transform:uppercase;
	font-weight:500;
	transition:all 0.25s ease-in;
	text-decoration:none;
}
.btn:hover{
	background:white; color:black;
	transition:all 0.15s ease-out;
}
.btn:active{
	background:black; color:white;
	transition:all 0.09s;
}
.alert{
	position:fixed;
	left:0;top:0; width:100%;height:100%;
	background:rgba(0,0,0,0.5);
	display:none;
	z-index:10;
	
	align-items: center;
	justify-content: center;
	text-align:center;
	
	/*display:flex;*/
	display:none;
}
.alert .message{
	padding-bottom:1.5em;
}
.alert .box{
	background:white;
	padding:2em 5em;
	max-width:40em;
}
.top{
	position:relative;
	padding:1em 2.5em;
	vertical-align:middle;
	border-bottom:2px solid black;
	background:white;
	z-index:5;
	overflow:hidden;
}
a{
	text-decoration:none;
	color:black;
	position:relative;
}
.top:after, .main:after{
	content:" ";
	display:block;
	clear:both;
}
.logo{
	font-size:2em;
	font-weight:900;
	float:left;
}
.menu, .cart{
	margin-top:0.74rem;
}
.menu{
	font-family: 'Steelfish';
	text-transform:uppercase;
	float:right;
	list-style: none;
	line-height:1em;
}
.menu li{
	display:inline-block;
	font-size:1.2em;
	margin-right:1em;
	padding-top:0.05em;
}

a:not(.special)::after {
    content: ''; display: block;
    position:absolute; bottom:-2px;
    background: #000;
    height: 2px;
    width: 0;
    
    animation-play-state:initial;
}
a:not(.special):hover::after {
    width: 100%;
    
	animation-name: stutter;
	animation-duration: 0.8s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-play-state: running;
}
@keyframes stutter {
  0{
  	width: 0;
  }
  6.5% {
    width: 0;
  }
  20% {
    width:37%;
  }
  26.5% {
    width:20%;
  }
  32% {
    width:41%;
  }
  38.5% {
    width:20%;
  }
  95.5% {
    width:30%;
  }
  100% {
    width:100%;
  }
}

.cart{
	position:relative;
	display:inline-block;
	text-transform:uppercase;
	font-weight:700;
	font-size:0.95em;
	float:right;
	padding-left:2.2em;
	padding-right:3.4em;
	cursor:pointer;
}
.cart:before{
	content:" ";
	display:inline-block;
	position:absolute; right:0;bottom:0.2em;
	padding-left:2em;
	width:1.4em;height:1.4em;
	background:url('img/cart.png') center center no-repeat;
	background-size:contain;
}
.cartItems{
	position: absolute;
	right: 0;
	bottom: -0.35em;
	background: red; color:white; 
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	line-height: 1.5em;   
	border-radius: 0.75em;
	animation-play-state:initial;
	transform-origin: 50% 50%;
}
.shake{
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	
	animation: shake 0.2s linear;
	animation-iteration-count: 1;
	animation-delay:0;
}
.main{
	position:relative;
}
.content{
	position:absolute;
	min-height:100%;
	z-index:3;
	left:0; top:0;
	right:20rem; 
	overflow-y:auto;
}

.chat{
	position:absolute;
	right:0; top:0;
	width:20rem;
	border-left:2px solid black;
	z-index:4;
}
.chat h2{
	padding:1.5em;
	font-size:1em;
	text-transform:uppercase;
	font-weight:700;
}
.chat .discussionwrap{
	position:absolute;
	right:0; left:0;
	top:4em;
	overflow-y:auto;
	bottom:2em;
}
.chat .underdiscussion{
	position:absolute;
	bottom:0;left:0em;right:0;
	height:2em;
	border-top:1px solid #efefef;
}
.chat .discussion{
	list-style:none;
	position:relative;
	padding-left:0.5em; padding-right:0.25em;
}
.chat .underdiscussion input{
	border:0;
	padding-left:0.5em; padding-right:0.25em;
	min-width:100%;height:100%;
	box-sizing:border-box;
	white-space: nowrap;
	line-height:100%;
	transition:background 0.2s;
}
.chat .underdiscussion input:focus{
	outline:0;
	background:#f0f7fd;
}
.chat .nick{
	padding-right: 0.5em;
	font-weight: 700;
	font-size: 0.8em;
}
.chat .nick:after{
	content:":";
}
.chat .owner{
	color:#dd0000;
}



/*pages specific*/
.homepage{
	padding:2.5em;
	position:relative;
}
.homepage h2{
	display:inline-block;
	position:relative;
	font-size:2em;
	font-weight:900;
}
.homepage h2 .play{
	float:none;
	padding-left:1em;
	width:0.5em; height:0.5em;
}
/*.homepage h2 .seekbar{
	bottom:-0.25em;
}*/


.page_feminism{
    width: 100%;
    text-align: center;
    padding-top: 2em;
    font-weight: 900;
    font-size: 2em;
    color:#7f7f7f;
}


.page_listing{
	padding:2.5em;
	list-style:none;
}
.page_listing li{
	font-size:1.5em;
	font-weight:900;
	padding-bottom:0.25em;
}

.basnicka{
	margin-left: 19rem;
	overflow-y:auto;
}
.customize{
    position: absolute;
    left: 0;
    top: 0;
    width: 19rem;
    border-right: 2px solid black;
    z-index: 4;
}
.customize .galleryimg{
	outline:0.2em solid white;
	cursor:pointer;
	transition:outline 0.2s linear;
}
.customize .galleryimg:hover{
	outline-color:black;
}
.customize .color{
	width:1.5em; height:1.5em; display:inline-block;
	margin-right:0.2em;
	margin-bottom:0.2em;
	border:0.2em solid white;
	cursor:pointer;
	transition:border-color 0.2s linear;
}
.customize .color.white{
	box-shadow: 0 0 0 1px #000 inset;
}
.customize .color:hover{
	border-color:black;
}
.customize .insides, .basnicka .insides{
    padding:1em 2.5em;
}
.customize h2{
	text-transform:uppercase;
	font-size:0.9em;
	font-weight:700;
	padding:1.5rem 0;
}
.basnicka h2{
	font-size:1em;
	font-weight:900;
	padding:1.5rem 0 2.5rem 0;
	position:relative;
}
.basnicka h3{
	position:relative;
}
.under_poem{
	margin-top:2.5rem;
}
/*
.seekbar{
	position:absolute;
	bottom:1em;
	height:2px;
	width:0;
	left:0;
	background:black;
	transition: all 0.25s linear;
}
*/
.seekbar{
	position:absolute;
	top:0; left:0; height:100%;
	width:0;
	
	background:rgba(0,0,0,0.4);
	/*transition: all 0.25s linear;*/
}
.play{
	background: url('img/speaker.png') center center no-repeat;
	background-size:contain;
	width:1.35rem; height:1.35rem;
	display:inline-block;
	float:right;
	cursor:pointer;
	transform-origin: 50% 50%;
}
.play:hover{
	animation: shake 0.32s linear;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	animation-iteration-count: infinite;
}

@keyframes shake {
	5%, 10%, 90% {
		transform: rotate(15deg) translate3d(-1px, 0, 0);
	} 
	20%, 80% {
		transform: rotate(-10deg) translate3d(2px, 0, 0);
	}
	30%, 50%, 70% {
		transform: rotate(10deg) translate3d(-4px, 0, 0);
	}
	40%, 60%, 100% {
		transform: rotate(-20deg) translate3d(4px, 0, 0);
	}
}
.page_graficke{
	margin:auto;
	text-align:center;
	padding-top:2em;
	max-width:900px;
}
.page_graficke img{
	vertical-align:middle;
	margin:0.5em;
}

.page_basen.dlhsie h3{
	margin:1.5em 0;
}
#chat_name_actual{
	cursor: text;
}
#chat_name_changer, #chat_name_changer_confirm{
	display:none;
}