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

html{
	font-size: 100px;
}

body{
	margin: 0;
	font-size: .17rem;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	background-color: #311253;
	text-align: center;
	color: #000;
}

main img:not(.alignright){
	width: 100% !important;
	height: auto!important;
}
img.alignright{
	float: right;
	margin: 0 0 0.2rem 0.2rem
}
.wp-caption{
	max-width: 100% !important;
	width: auto!important;
}

h1,h2,h3,p,blockquote{
	margin: 0 0 .2rem;
}

h1{
	font-size: .6rem;
	font-weight: 900;
}
h2{
	font-size: .4rem;
	font-weight: 900;
	font-style: italic;
}

p{
	max-width: 7rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
	font-size: 0.2rem;
}

blockquote{
	color:#6D7278;
	max-width: 7rem;
	margin-left: auto;
	margin-right: auto;
	font-style: italic;
	font-size: .22rem;
}

.main{
	background: #fff;
	padding: 0.2rem 0;

}

.color_pink h1,
.color_pink h2,
.color_pink .button,
.color_pink a{
	color:#EF5A5F;
	border-color:#EF5A5F;
}
.color_pink.mood,
.color_pink .button:hover,
.bg_color_pink{
	background: #EF5A5F;
}

.color_green h1,
.color_green h2,
.color_green .button,
.color_green a{
	color:#13CE8A;
	border-color:#13CE8A;
}
.color_green.mood,
.color_green .button:hover,
.bg_color_green{
	background: #13CE8A;
}

.color_blue h1,
.color_blue h2,
.color_blue .button,
.color_blue a{
	color:#8CB4FF;
	border-color:#8CB4FF;
}
.color_blue.mood,
.color_blue .button:hover,
.bg_color_blue{
	background: #8CB4FF;
}

.color_purple h1,
.color_purple h2,
.color_purple .button,
.color_purple a{
	color:#663ABD;
	border-color:#663ABD;
}
.color_purple.mood,
.color_purple .button:hover,
.bg_color_purple{
	background: #663ABD;
}

.button{
	border: 0.02rem solid #fff;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: .05rem 0.1rem;
	transition: color ease 0.2s, background-color ease 0.2s;
	font-size: .8em;
	text-transform: uppercase;
	cursor: pointer;
}
.button:hover{
	color: #fff;
}

.content{
	max-width: 12rem;
	margin: auto;
	padding: 0 .4rem;
}

a{
	color: inherit;
}

header{
	position: fixed;
	z-index: 100;
	background-color: #311253;
	color: #fff;
	left: 0;
	top: 0;
	right: 0;
	height: 1rem;
}

header>div>a{
	float: left;
	height: 1rem;
	width: 2rem;
	background: url("mission-pride.svg") no-repeat center left;
	background-size: contain;
}

header nav{
	float: right;
	margin-top: 0.55rem;
}
nav ul{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	list-style: none;
	font-size: .24rem;
	line-height: .25rem;
	font-weight: 700;
	letter-spacing: 0.005rem;
}
header nav ul li{
	padding: 0;
	float: left;
}
nav ul li a{
	display: block;
	text-decoration: none;
	height: .28rem;
	margin: 0 0 0 .45rem;
	border-bottom: 0.0rem solid #fff;
	transition: border ease 0.2s;
}
nav ul li.current-menu-item a,
nav ul li:hover a{
	border-bottom-width: 0.03rem;
}

footer nav{
	margin: 0.5rem 0 0.2rem;
}
footer nav ul li{
	display: inline-block;
	color: #fff;
}

header+*{
	margin-top: 1rem;
}

.mood{
	display: block;
	color: #fff;
	padding: 1.5rem 0;
}
.mood a{
	color: #fff !important;
	border-color: #fff !important;
}
.mood h1,
.mood h2{
	color: #fff;
	transform: skewY(10deg) translateY(1rem);
	transform-origin: center;
}
.mood h1.unlzd,
.mood h2.unlzd{
	transform: skewY(-10deg) translateY(0);
}
.mood h1{
	font-weight: 900;
	font-style: italic;
	font-size: 1.5rem;
	margin: 0;
}
.mood h2{
	font-weight: 700;
	font-style: italic;
	font-size: .5rem;
	margin: 0;
}

.mood p{
	font-size: .24rem;
}
.mood h1+p,
.mood h2+p{
	margin-top: .5rem;
}

.main.sidebar{
	text-align: left;
}
.main.sidebar .content{
	display: flex;
}
.main.sidebar .content aside{
	min-width: 3rem;
}
.main.sidebar .content>div:nth-child(1){
	padding-right: 1rem;
}
.main.sidebar p,
.main.sidebar blockquote{
	margin-left: 0;
	max-width: none;
}

aside>div{
	padding: 0.2rem;
	background: #f0f0f0;
	margin: 0 0 .2rem 0;
	overflow: hidden;
}

aside h1{
	font-size: .33rem;
}
aside h2{
	font-size: .22rem;
}

aside>div>:last-child{
	margin-bottom: 0;
}

.boxes a{
	display: block;
	text-decoration: none;
	clear: both;
}
.boxes a>figure{
	float: left;
	max-width: 45% !important;
	width: 3rem;
	height: 100% !important;
	margin: 0 0.2rem 0 0;
	background: no-repeat center;
	background-size: cover;
}
.boxes a>:not(figure){
	display: block;
	text-align: left;
	margin: 0 0 .1rem 0;
	margin-left: calc(20% + 0.35rem);
}
.boxes a>strong{
	font-style: italic;
	font-size: 0.4rem;
}
.boxes a>em{
	color:#000;
}

.boxes .button{
	margin-top: 0.1rem;
}

.boxes a:after{
	content: "";
	clear: both;
	height: .4rem;
	float: left;
}

.boxes>.lzy_p>a>figure{
	height: 2rem !important;
}

hr{
	display: block;
	clear: both;
	margin: 0 0 0.4rem;
	border: none;
	border-bottom: .02rem solid #f0f0f0;
	height: 0;
}

.lzy,
.lzy_p>*{
	transform: skewY(10deg) translateY(1rem);
	transform-origin: left bottom;
	opacity: 0;
	transition: transform ease 0.5s, opacity ease 0.5s;
}

.unlzd{
	transform: skewY(0) translateY(0);
	opacity: 1;
}

section ul{
	text-align: left;
	max-width: 7rem;
	margin: 0 auto .2rem;
}

.map svg{
	max-height: calc(100vh - 1rem);
	max-width: 100%;
}

.map path{
	fill: #f0f0f0;
	stroke:#fff;
	stroke-width:0.1%;
	cursor: pointer;
}

.map svg{
	height: 100vh;
	width: 100vw;
	display: block;
}

.map [post]{
	fill: #13CE8A !important;
}
.map path:hover{
	fill: #e0e0e0;
}
.map [post]:hover{
	fill: #0C8A5C !important;
}

.map>div:first-child{
	float: left;
	width: 40%;
}
.map>div:nth-child(2){
	float: left;
	width: 60%;
	padding-left: .5rem;
	box-sizing: border-box;
}

.map:after{
	content:"";
	display: block;
	clear: both;
}

.map a:not(.act){
	color: #6D7278;
}
.map a{
	text-decoration: none;
	float: left;
	width: 33%;
	text-align: left;
}

@media(max-width:1100px){
	.boxes a figure{
		width: 100% !important;
		height: 1rem !important;
	}
	.boxes a>:not(figure){
		margin: 0;
	}
}



@media(max-width:890px){
	html{
		font-size: 12.4vw;
	}
	footer nav ul{
		font-size: .18rem;
		line-height: 1.4;
	}
}


@media(max-width:600px){
	body{
		font-size: .25rem;
	}
	.mood h1{
		font-size: 1rem
	}
	p{
		font-size: .3rem;
	}
	.main.sidebar .content{
		display: block;
	}
	.main.sidebar .content>div:nth-child(1){
		padding-right: 0;
	}
	.boxes a{
		width: 100% !important;
	}
	.boxes a figure{
		height: 2rem!important ;
	}
	.map>div{
		width:100% !important;
	}
}