/*
Theme Name: Hepo
Author: Taikalehto
Description: Helsingin seudun pyöräilijät ry
Version: 1.0.9
*/

/* RESET */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, landing, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, landing, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;	border-spacing: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

html, body {
	-webkit-text-size-adjust: none;	

	color: #111;
	background-color: #fff;
}

::selection {
  background-color: #111; 
  color: #fff;
}
::-moz-selection {
  background-color: #111; 
  color: #fff;
}

a {
	text-decoration: none;

}

img {
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/*

UTILS

*/

.reset {
	clear: both;
}

.gap {
	height: 40px;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.widthCheck {
	position: fixed;
	top: 1px;
	left: 0px;
	z-index: 999;
	width: 100vw;	
	height: 1px;
	background-color: black;
	visibility: hidden;
	pointer-events: none;
}

.heightCheck {
	position: fixed;
	top: 0px;
	left: 1px;
	z-index: 998;
	width: 1px;	
	height: 100vh;
	background-color: black;
	visibility: hidden;
	pointer-events: none;
}

/*

TYPOGRAPHY

*/

body {
	font-family: "Libre Baskerville", sans-serif;
	font-weight: 400;

	line-height: 140%;

	color: #333333;
	background-color: #fff;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;

}

h1, h2, h3, h4, h5, h6 {
	font-family: "Muli", sans-serif;
	font-weight: 400;
	line-height: 140%;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	

	margin: 0;

}

h1 {
	font-size: 30px;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	line-height: 125%;
	margin-bottom: 22px;
	padding-bottom: 4px;
	border-bottom: solid 5px #ffa945;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h2 {
	font-size: 24px;
	margin-bottom: 18px;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	padding-bottom: 3px;
	border-bottom: solid 5px #ffa945;
}

.frontPage h1,
.frontPage h2 {
	display: inline-block;
}

h3 {
	font-size: 24px;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

h3:first-of-type {
	margin-top: 1px;
}

h4 {
	font-size: 20px;
	line-height: 140%;
	text-transform: uppercase;
}

a {
	color: #ffa945;
	font-weight: 700;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;		

	transition: 0.15s color ease-in-out;
}

a:hover {
	color: #111;
}

p, li, div, i, em, h5, h6, select, input, textarea {
	font-family: "Lato", sans-serif;
	font-weight: 400;

	font-size: 17px;
	line-height: 150%;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;		

	margin: 0;
}

p {

}

strong {
	font-weight: 700;
}

i, em {
	font-family: "Lato";
	font-style: italic;
}

strong em {
	font-family: "Lato";
	font-style: italic;
	font-weight: 700;	
}

.noMarginTop {
	margin-top: 0px;
}

small {
	font-size: 15px;
	color: #999;
}

.floatLeft {
	float: left;
}

blockquote:before {
	position: absolute;
	left: -4px;
	top: 10px;
	font-size: 60px;
	font-weight: bold;
	content: '\201C';
	color: #ddd;
	z-index: 1;
}

blockquote {
	position: relative;
	font-style: italic;
	padding: 0 30px;
	z-index: 2;
}

ol, ul {	
	padding: 5px 0 5px 0;
}

ol, ul {
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 25px;
}

ol li,
ul li {
	margin-bottom: 10px;
}

ul li {
	list-style-type: disc;
}

ol li ol,
ul li ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

ul li ul li {
	list-style-type: circle;
	margin-bottom: 5px;
}

figcaption {
	font-style: italic;
	font-size: 15px;
	margin-top: -20px;
	margin-bottom: 20px;
}


/*

UI

*/

.btnRect {
	//background-color: #ffa945;
	border: 1px solid #333333;
	color: #333333;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
	padding: 6px 14px 7px 14px;
	box-sizing: border-box;
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 10px;
	margin-right: 7px;
	transition: 0.15s color ease-in-out;
	cursor: pointer;
}

.btnRect:hover {
	color: #ffa945;
}

/*

STRUCTURE, HEADER & NAVIGATION

*/

.wrapper {
	position: relative;
	opacity: 1;
 	overflow: hidden;
}

.content {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;

	padding: 0;
	padding-top: 120px;
	padding-bottom: 80px;
	box-sizing: border-box;
}

.frontPage {
	padding-top: 0;
}

.header {
	width: 100%;
	box-sizing: border-box;

	padding-top: 0px;
	height: 650px;
	margin: 0 auto;
	margin-bottom: 80px;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: #111;
	overflow: hidden;
}

.headerContent {
	position: relative;
	width: 100%;
	height: 650px;
	box-sizing: border-box;
	padding: 0 10%;
	padding-top: 60px;
	margin: 0 auto;
}

.headerContent .naviItems {
	position: absolute;
	right: 0;
	top: 0;
}

.headerContent .naviItem p {
	color: #fff;
}

.headerContent .btnNavi p {
	background-color: #fff;
	color: #333333;
}

.headerLogo {
	width: 100%;
	height: auto;
	max-width: 650px;
	margin: 0 auto;
	margin-top: 80px;
}

.headerContent .col-2 {

}

.section {
	box-sizing: border-box;
	padding: 0 10%;
	padding-top: 73px;
	padding-bottom: 40px;
}

.section::after {
	display: block;
	content: "";
	clear: both;
	float: none;	
}

.fullWidth {
	padding-left: 0;
	padding-right: 0;
}

.col-2 {
	position: relative;
	width: 43.75%;
	margin: 0;
}

.col-l {
	float: left;
}

.col-r {
	float:right;
}

.centered {
	text-align: center;
}

/*

NAVI

*/

.navi,
.naviFloat {
	position: fixed;
	left: 0;
	top: 0px;
	z-index: 1000;
	width: 100%;
	height: 80px;

	box-sizing: border-box;
	overflow: hidden;
	background-color: #ffa945;
}

.naviFloat {
	top: -80px;
}

.naviFloatContent {
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
}

.naviBg {
	position: absolute;
	left: 0px;
	top: 0px;

	width: 100%;
	height: 80px;
	background-color: #ffa945;
}

.naviLogo {
	height: 70px;
	margin-top: 5px;
	margin-left: 20px;
}

.naviLogoSmall {
	height: 56px;
	margin-top: 2px;
	margin-left: 10px;
}

.naviLogoSmall {
	display: none;
}

.naviItems {
	position: relative;
	float: right;
	margin-right: 10px;
	display: block;
}

.naviItem {
	position: relative;
	transition: 0.15s background-color ease-in-out;

	box-sizing: border-box;
	padding: 0px 10px;
	height: 80px;

	float: left;

	cursor: pointer;
	background-color: rgba(255,255,255,0);
}

.naviItem:hover {
	background-color: rgba(255,255,255,0.25);
	color: #333333;
}

.naviItem p {
	position: relative;
	font-family: "Muli", sans-serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -0.2px;
	font-size: 16px;
	text-transform: uppercase;
	margin-top: 32px;
	color: #333333;

	box-sizing: border-box;
}

.btnNavi p {
	background-color: #333333;
	padding: 6px 14px 7px 14px;
	color: #ffa945;
	margin: 0;
	margin-top: 26px;
}

.btnToggleMenu,
.btnClose,
.btnSearchNavi,
.btnSearchNaviFront {
	position: relative;
	float: right;
	display: none;
	cursor: pointer;
	transition: 0.15s background-color ease-in-out;
	background-color: #ffa945;
}

.btnSearchNavi:hover,
.btnSearchNaviFront:hover {
	background-color: rgba(255,255,255,0.25);
}

.btnToggleMenu img,
.btnClose img,
.btnSearchNavi img,
.btnSearchNaviFront img {
	width: 80px;
	height: auto;
}

.btnSearchNavi,
.btnSearchNaviFront {
	display: block;
	width: 50px;
}

.btnSearchNaviFront {
	background-color: rgba(255,255,255,0);
}

.btnToggleMenu:hover,
.btnClose:hover {
	background-color: rgba(255,255,255,1);
}

.iconClose {
	display: none;
}

.menu {
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	display: none;
	padding: 20px 0 40px 0;
	border-top: 61px solid #333333;
	box-sizing: border-box;
	text-align: center;
	background-color: #ffa945;
}

.menuItem {
	position: relative;
	transition: 0.15s background-color ease-in-out;

	padding: 0px 10px;
	height: 60px;
	box-sizing: border-box;

	display: inline-block;
	margin: 0 auto;

	cursor: pointer;
	background-color: rgba(255,255,255,0);
}

.menuItem:hover {
	background-color: rgba(255,255,255,0.25);
	color: #333333;
}

.menuItem p {
	position: relative;
	font-family: "Muli", sans-serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -0.2px;
	font-size: 16px;
	text-transform: uppercase;
	margin-top: 22px;
	color: #333333;

	box-sizing: border-box;
}

.menu .btnNavi p {
	margin-top: 16px;
	color: #ffa945;
}

.headerContent .btnToggleMenu {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 101;
}

/*

PAGE

*/

.page {
	position: relative;
	width: 42%;
	margin-left: 5%;
	float: left;

	min-height: 500px;
}

.pageExtras {
	position: relative;
	width: 20%;
	float: right;
	margin-right: 5%;
	padding-top: 30px;

}

.page h1 {
	font-size: 36px;
	border: 0px;
	margin-bottom: 20px;
}

.page h2 {
	font-size: 28px;
	margin-top: 24px;
	margin-bottom: 24px;
	border: 0px;
}

.page h3 {
	font-size: 22px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.page h4 {
	margin-bottom: 8px;
}

.page p {
	margin-bottom: 25px;
}

.pageNavi {
	position: relative;
	width: 18%;
	float: left;
	margin-left: 5%;
	padding-top: 30px;
	box-sizing: border-box;

}

.pageNavi .titleLink {
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.pageNavi .titleLink:hover {
	background-color: #fff;
}

.pageNavi .currentPage {
	background-color: #eee;
}

.pageNavi ul {
	position: relative;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 100%;
	margin-top: 4px;
}

.pageNavi li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
	left: 0px;
	width: calc(100% + 0px);
	border-bottom: solid 1px #eee;
	box-sizing: border-box;

}

.pageNavi a {
	position: relative;
	width: calc(100% - 0px);
	display: block;
	
	transition: 0.15s background-color ease-in-out;	

	font-family: "Muli", sans-serif;
	font-weight: 400;
	line-height: 125%;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	

	margin: 0;
	font-size: 16px;
	letter-spacing: -0.1px;
	text-transform: uppercase;
	padding: 10px 10px;
	box-sizing: border-box;
	color: #333333;
	position: relative;
	transition: 0.15s background-color ease-in-out;	
}

.pageNavi a:hover {
	color: #333333;
	background-color: #eee;
}

.pageNavi a:hover p {

}

.pageNavi .subPage {
	width: calc(100% - 0px);
	text-transform: none;
	padding: 10px 10px 10px 20px;
}

.pageNavi .subPage {
	margin-top: 0px;
	margin-bottom: -0px;
}

.pageNavi .subPage:last-of-type {
	margin-bottom: 0px;
}

.pageNavi h2 {
	margin-bottom: 4px;
	margin-left: 10px;
	border-bottom: solid 0px #ffa945;
}

.pageNavi .titleLink {
	box-sizing: border-box;
	border-bottom: solid 5px #ffa945;
	margin-bottom: 0px;
}

.pageNavi h5 a {
	text-transform: none;
	border-bottom: 0px;
	margin: 0;
	display: block;
	top: 0;
	padding: 0;
	font-size: 18px;
}

.page img {
	width: 100%;
	height: auto;
	margin: 0px 0 20px 0;
}

.post img {
	margin: 0px 0 30px 0;
}

.page h6 {
	margin-top: 10px;
	margin-bottom: 10px;
	color: #888;
}

.page iframe {
	width: 100%;
	min-height: 1200px;
}

.etusivu h3 {
	margin-top: 20px;
}

.etusivu p {
	margin-bottom: 25px;
}

.etusivu h3:first-of-type {
	margin-top: 0;
}

.category a {
	color: #333333;
}

.category a:hover {
	color: #333333;
}

.category a i {
	display: block;
	color: #888;
	font-size: 15px;
	margin-top: -15px;
	margin-bottom: 15px;
}

.category a:hover {

}

.category h2,
.category h3 {
	margin-top: 0;
}

.postItem h4,
.postItem h5 {
	display: inline-block;
	color: #999;
	font-size: 15px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.postItem h4 {

}

.postItem h5:before {
	content: " | ";
	display: inline-block;
	padding: 0 10px;
	color: #ffa945;
}

.category .btnRect {
	display: inline-block;
	margin: 0;
	background-color: #fff;
	border: 1px solid #333333;
	color: #333333;
	margin-top: -10px;
	margin-bottom: 50px;
}

.paginationLinks ul {
	margin: 0;
	padding: 0;
	margin-left: -5px;
}

.paginationLinks ul li {
	display: inline-block;
	margin: 5px;
	list-style-type: none;
}

.paginationLinks .active a {
	background-color: #333333;
	color: #fff;
}

.paginationLinks ul li a {
	border: 1px solid #333333;
	color: #333333;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
	padding: 6px 14px 7px 14px;
	box-sizing: border-box;
	display: inline-block;
	transition: 0.15s color ease-in-out;
	cursor: pointer;
}

/*

LINK BOXES

*/

.linkBoxes {

}

.linkBoxes a:hover {
	color: #333333;
}

.linkBoxes::after {
	display: block;
	content: "";
	clear: both;
	float: none;
}

.box {
	position: relative;
	width: 33.33333%;
	float: left;
}

.box img {
	width: 100%;
	height: auto;
}

.box h3,
.box p {
	position: absolute;
	max-width: calc(100% - 20px);
	left: 10px;
	padding: 5px 10px;
	margin: 0;
	background-color: #fff;
	box-sizing: border-box;
}

.box h3 {
	top: 10px;
	display: inline-block;
}

.box p {
	bottom: 10px;
}

.linkBoxes a {
	color: #333333;
}

.linkBoxes a:hover {
	color: #333333;
}

.instaFeed {
	padding: 10px 0;
}

/*

ARTICLE ITEMS

*/

.articles a {
	color: #333333;
}

.articles a:hover {
	color: #333333;
}

.articleItem {
	margin-bottom: 37px;
}

.articleItem small {
	position: relative;
	margin-top: 3px;
}

.articleItem h4 {
	margin-top: 3px;
	margin-bottom: 8px;
}

.articleItem img {
	width: 100%;
	height: auto;
	margin-top: 6px;
	margin-bottom: 13px;
}

.page .has-2-columns:after {
	content: "";
	height: 20px;
	display: block;
	clear: both;
	float: none;
}

.page .has-2-columns .wp-block-column {
	width: 50%;
	float: left;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	margin-top: 20px;
}

.page .has-2-columns .wp-block-column:nth-child(1) {
	padding-right: 20px;
	width: 45%;
}

.page .has-2-columns .wp-block-column:nth-child(2) {
	width: 55%;
	padding-left: 20px;
}

.page .has-2-columns .wp-block-column h3 {
	margin-bottom: 18px;
}


/*

EVENTS

*/

.eventList {

}

.eventList a {
	color: #333333;
}

.eventList h1 {
	margin-bottom: 25px;
}

.eventList h2 {
	display: inline-block;
}

.eventList a:hover {
	
}


.eventItem {
	//background-color: #eee;
	box-sizing: border-box;
	padding: 12px 0px 18px 0px;
	margin-bottom: 5px;
	transition: 0.15s background-color ease-in-out;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

.eventItem h5,
.eventItem h6 {
	font-family: "Muli", sans-serif;
	font-weight: 400;
	line-height: 125%;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	

	font-size: 17px;
	text-transform: uppercase;
	color: #333333;
}

.eventItem h5 {
	font-size: 19px;
	margin: 15px 0 5px 0;
}

.eventItem h4 {
	font-size: 17px;
	padding: 0;
	margin-top: 6px;
	text-transform: none;
}

.eventInfo {
	display: none;
	padding: 15px 0 0px 0;
}

.page .eventItem {
	padding: 20px 20px 20px 20px;
	margin-bottom: 20px;
	cursor: pointer;
}

.page .eventItem h4 {
	font-size: 25px;
}

.page .eventItem h5 {
	font-size: 20px;
}

.page .eventItem h6 {
	font-size: 19px;
	text-transform: none;
}

.page .eventInfo {
	display: block;
}

/*

CALENDAR

*/

.calendar {
	position: relative;
	width: 90%;
	float: left;
	margin-left: 5%;
	text-align: center;
}

.calendar h1,
.calendar h2 {
	display: inline-block;
}

.calendar h2 {
	border: 0px;
	margin: 0;
}

.hiddenMonth {
	//display: none;
}

.month {
	//text-align: left;
	padding: 0px 0 40px 0;
}

.month h2 {
	text-align: center;
}

.week {
	display: flex;
}

.weekdaynames {
	display: flex;
}

.wdItem {
	flex: 1;
	position: relative;
	width: 14.2857%;
	float: left;
	box-sizing: border-box;

	font-family: "Muli", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	text-align: left;
	padding: 5px 0 10px 10px;	
}

.calendar h3 {
	padding: 0;
	margin: 0;
	font-size: 20px;
}

.day {
	flex: 1;
	position: relative;
	width: 14.2857%;
	float: left;
	box-sizing: border-box;
	background-color: #e5e5e5;
	min-height: 150px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	padding: 10px;
	text-align: left;
}

.day p {
	font-size: 14px;
	line-height: 100%;
	margin-bottom: 10px;
	cursor: pointer;
}

.day p:hover {
	color: #fff;
}

.day p:first-of-type {
	margin-top: 32px;
}

.day h6 {
	font-family: "Muli", sans-serif;
	font-weight: 700;
	color: #333333;
	color: #fff;
	position: absolute;
	left: 10px;
	top: 4px;
	font-size: 22px;
}

.mobileDayInfo {
	display: none;
}

.newMonth {
	margin-top: 42px;
}

.newMonth h3 {
	position: absolute;
	top: -35px;
	z-index: 10;
}

.calendar .inactive {
	background-color: #fff;
}

.calendar .inactive h6 {
	color: #ddd;
}

.hasEvents {
	background-color: #ffa945;
}

.currentDay {
	background-color: #333333;
	color: #fff;
}

.eventData {
	display: none;
}

.viewEvent {
	position: fixed;
	z-index: 90;
	display: none;
	overflow: auto;
	width: 100vw;
	height: 100vh;
}

.eventBg {
	position: absolute;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255,255,255,0.8);
}

.eventContent {
	position: relative;
	width: 100%;
	min-height: 400px;
	background-color: #fff;
	max-width: 800px;
	margin: 0 auto;
	margin-top: 150px;
	box-sizing: border-box;
	padding: 40px 5%;
	border: 1px solid #ddd;
}


.eventContent p {
	margin-bottom: 25px;
}

.eventContent h5 {
	font-size: 18px;
	margin-top: 1px;
	position: relative;
}

.eventContent p:first-of-type {
	margin-top: 25px;
}

.eventContent .btnClose,
.eventContent .iconClose {
	display: block;
	z-index: 101;
}

.eventContent .btnClose {
	position: absolute;
	right: 10px;
	top: 10px;
}

/*

SEARCH

*/

.searchTool {
	width: 100%;
	height: 50px;
	//background-color: #eee;
	margin-bottom: 20px;
}

.searchInput {
	width: calc(100% - 60px);
	max-width: 400px;
	height: 50px;
	box-sizing: border-box;
	padding: 0 12px;
	display: block;
	//background-color: #ff0;
	margin: 0;
	float: left;
	border: 0px;
	background-color: #eee;
}

.btnSearch {
	position: relative;
	display: block;
	float: left;
	cursor: pointer;
	width: 50px;
	height: 50px;
	margin-left: 10px;
	transition: 0.15s background-color ease-in-out;
	background-color: #ffa945;
}

.btnSearch img {

}

.btnSearch:hover {
	background-color: rgba(245,180,15,0.5);
}


/*

FOOTER

*/


.footer {
	width: 100%;
	box-sizing: border-box;
	background-color: #333333;
	color: rgba(255,255,255,0.7);
}

.footer a:hover {
	color: #fff;
}

.footerContent {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;

	padding: 60px 0 80px 0;
	box-sizing: border-box;
}

.footerContent h3 {
	text-align: center;
	padding: 0 20px;
}

.footerContent p {
	margin-bottom: 25px;
}

.footer .has-3-columns {
	padding-top: 20px;
}

.has-3-columns .wp-block-column {
	position: relative;
	width: 33.3333%;
	margin: 0;
	margin-left: 0;
	float: left;
	box-sizing: border-box;
	padding: 0 20px;
}

.footer h4 {
	margin-bottom: 20px;
}
/*
.wp-block-column:nth-child(1) {
	float: left;
}

.wp-block-column:nth-child(2) {
	float:right;
}
*/


/*

BREAKPOINTS

*/

@media (max-width: 1100px) {
	.naviItems {
		display: none;
	}

	.btnToggleMenu {
		display: block;
	}

}

@media (max-width: 1100px) {
	.pageNavi {
		width: 25%;
	}

	.page {
		float: right;
		width: 60%;
		margin-left: 0;
		margin-right: 5%;
	}
	
	.pageExtras {
		width: 60%;
		float: right;
		margin-top: 40px;
	}
}

@media (max-width: 800px) {
	.pageNavi {
		width: 90%;
		margin-left: 5%;
		float: none;
		clear: both;
	}

	.page {
		float: none;
		clear: both;
		width: 90%;
		margin-left: 5%;
		margin-top: 40px;
	}
	
	.pageExtras {
		width: 90%;
		float: none;
		clear: both;
		margin-left: 5%;
	}

	.content {
		padding-top: 0px;
		margin-top: 80px;
	}

	.frontPage {
		margin-top: 0px;
	}
}


@media (max-width: 900px) {
	.box {
		width: 50%;
		max-width: 500px;
		margin: 0 auto;
	}

	.linkBoxes a:nth-child(3) .box {

	}

}

@media (max-width: 800px) {
	.col-2 {
		width: 100%;
		margin-top: 25px;
	}

	.col-2:first-of-type {
		margin-top: 0;
	}

	.has-3-columns .wp-block-column {
		position: relative;
		width: 100%;
		padding-bottom: 20px;
	}	

	.eventList {
		margin-top: 40px;
	}

	.section {
		padding: 40px 5%;
	}

	h1,
	.page h1 {
		font-size: 24px;
	}

	h2,
	.page h2 {
		font-size: 21px;
	}

	h3,
	.page h3 {
		font-size: 18px;
		margin-bottom: 6px;
	}

	.postItem h4, .postItem h5 {
		font-size: 13px;
	}

	p {
		font-size: 16px;
	}

	.headerContent .col-l {
		margin-bottom: 40px;
	}

	.header {
		height: auto;
		padding-bottom: 0px;
		margin-bottom: 40px;
	}

	.month {

	}

	.monthContainer {
		//padding-bottom: 40px;
	}

	.month h2, .monthContainer h2 {
		display: none;
	}


	.calendar h2 {
		padding-top: 14px;
	}

	.week {
		display: block;
	}

	.day {
		display: none;
	}

	.hasEvents {
		display: block;
		width: 100%;
		float: none;
		clear: both;
	}

	.weekdaynames {
		display: none;
	}

	.mobileDayInfo {
		display: inline;
	}

	.footerContent h3 {
		text-align: left;
	}

}

@media (max-width: 700px) {
	.box {
		clear: both;
		float: none;
		width: 100%;
		margin: 0 5%;
		padding-bottom: 40px;
	}

	.box h3, .box p {
		position: relative;
		left: 0;
		top: 0;
		padding: 0;
	}

	.box img {
		max-width: 300px;
	}

	.box h3 {
		padding-top: 15px;
		padding-bottom: 10px;
	}

	.wp-block-column {
		width: 90%;
		margin-bottom: 40px;
	}

	.page .has-2-columns .wp-block-column {

	}

	.page .has-2-columns .wp-block-column:nth-child(1),
	.page .has-2-columns .wp-block-column:nth-child(2) {
		width: 100%;
		margin: 0;
		padding: 0;
	}

}

@media (max-width: 600px) {
	.naviLogo {
		display: none;
	}

	.naviLogoSmall {
		display: block;
	}

	.naviFloat {
		height: 60px;
	}

	.naviBg {
		height: 60px;
	}

	.btnToggleMenu {
		width: 60px;
	}

	.btnRect {
		margin-top: 6px;
		margin-bottom: 6px;	
	}

	h1, .page h1,
	h2, .page h2,
	h3, .page h3 {
		-webkit-hyphens: auto;
 		-ms-hyphens: auto;
 		hyphens: auto;
	}
}