@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,&display=swap');

html{
	font-size: 14px;
}

body.natasha{
	font-family: 'Lato', sans-serif !important;
	color: #2e2e2e;
	font-weight: 300;
}

strong{
	font-weight: 400;
}

audio{
	display: none;
}

#loader{
	justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    height: 50vh;
}

#loader .spinner-grow{
	margin-right: 1rem;
}


#hero{
	width: 90%;
	text-align: center;
	margin: 2rem auto;
	max-width: 700px;

}

#nwc-title{
	width: 100%;
	margin-bottom: 1rem;
}

#nwc-subtitle{
	width: 70%;
}

#explainer{
	display: block;
	font-weight: 300;
	margin-bottom: 1rem;
	padding: 0 21px;
}

#gallery{
	margin-bottom: 2rem;
}

.box{
	background-color: #f7f7f7;
	border: 6px white solid;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 15rem;
	flex-direction: column;
}

.character{
		cursor: pointer;
		padding-bottom: 1rem;
		transition: background 200ms ease-in-out;
}

.character.playing{
	/* background: #e4e5ff; */
}

.character img{
	max-width: 100%;
	max-height: 10rem;
	transition: transform 200ms ease-in-out;
}

.label{
	width: 100%;
	text-align: center;
	bottom: .6rem;
    position: absolute;
}

.credit{
	text-align: center;
}

.credit p:last-of-type{
	margin-bottom: 0;
}

.credit a, .credit a:visited{
	color: #868cdd;
}

.credit a:hover{
	text-decoration: none;
	color: #656dbc;
}

.featherlight-content{
	background:  #f7f7f7 !important;
}

.featherlight .featherlight-close-icon{
	line-height: 27px !important;
	width: 27px !important;
}


@media(hover: hover) and (pointer: fine) {
    .character:hover{
		background-color: #efefef;
	}
	.character.playing:hover{
		background-color: #e4e5ff;
	}

	.character:hover img{
		transform: scale(1.03);
	}

}

@media (max-width: 575px) {
	#gallery{
		font-size: 1.1rem;
	}
}

@media (min-width: 576px) {
	html{
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	html{
		font-size: 18px;
	}
}

@media (min-width: 992px) {	

}

@media (min-width: 1200px) {

}