/*============================================================
CSS Reset
============================================================*/
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
sup,
img,
ol,
ul,
li,
dl,
dt,
dd,
table,
caption,
tr,
th,
td,
form,
button,
label,
input,
textarea,
article,
aside,
details,
footer,
header,
hgroup,
main,
nav,
section,
summary,
tbody,
thead,
tfoot {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	font-size: 100%;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}

/*To corrects `block` display not defined in IE6/7/8/9 & FF3 for HTML5 elements.*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
	display: block;
}

html {
	font-size: 100%; /*Corrects text resizing oddly in IE6/7 when body `font-size` is set using `em` units.*/
	/*Prevents iOS text size adjust after orientation change, without disabling user zoom.*/
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

blockquote:before,
blockquote:after {
	content: "";
}

blockquote {
	quotes: "" "";
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

a:active,
a:hover,
a:focus {
	outline: none;
}

ol,
ul {
	list-style: none;
}

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

/*============================================================
General Styles
============================================================*/
html,
body {
	height: 100%;
}

body {
	font-family: "Libre Franklin", sans-serif;
	font-size: 1em;
	line-height: 1.4;
	background: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
}

/*============================================================
Header Styles
============================================================*/
header img {
	width: 100%;
	height: auto;
}

/*============================================================
Menu Styles
============================================================*/
/*Styles for main navigation*/
nav {
	float: left;
	margin: 4% 0 0 2%;
	width: 12%;
	clear: both;
}

nav ul li a {
	background: #f3ac30;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	display: block;
	padding: 15px 20px;
	margin: 0 0 30px 0;
	white-space: nowrap;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#home ul li#nav_home a,
#regu-act ul li#nav_regu-act a,
#mont-act ul li#nav_mont-act a,
#year-act ul li#nav_year-act a,
#oneo-act ul li#nav_oneo-act a,
#videos ul li#nav_videos a,
#archive ul li#nav_archive a,
#acknowledge ul li#nav_acknowledge a,
#contact ul li#nav_contact a {
	color: #000;
	background: #e9dac0;
}

nav ul li a:hover,
nav ul li a:active,
nav ul li a:focus {
	color: #000;
	background: #f0c67c;
}

/*Styles for side navigation on mobile display*/
span#mobilemenu {
	background: #f3ac30;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	display: block;
	margin: 0 0 0 2%;
	padding: 12px;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	float: left;
	cursor: pointer;
	visibility: hidden;
}

span#mobilemenu:hover {
	color: #000;
	background: #f0c67c;
}

#home a#mob_home,
#regu-act a#mob_regu-act,
#mont-act a#mob_mont-act,
#year-act a#mob_year-act,
#oneo-act a#mob_oneo-act,
#videos a#mob_videos,
#archive a#mob_archive,
#acknowledge a#mob_acknowledge,
#contact a#mob_contact {
	color: #000;
	background: #e9dac0;
}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #f3ac30;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.sidenav a {
	padding: 8px 8px 8px 35px;
	text-decoration: none;
	font-size: 20px;
	white-space: nowrap;
	color: #fff;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover,
.offcanvas a:focus {
	color: #000;
	background: #f0c67c;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
	padding: 0 8px;
}

/*Media Query for main & side navigations on mobile display
---------------------------------------------------------*/
/*Styles for screen 1550px and lower*/
@media screen and (max-width: 1550px) {
	nav {
		display: none;
	}

	span#mobilemenu {
		visibility: visible;
	}
}

/*============================================================
Content Styles
============================================================*/
/*Styles for headings*/
h1,
h2 {
	font-family: "Libre Franklin", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #f3ac30;
}

h1 {
	padding-bottom: 30px;
	font-size: 3em;
	text-align: center;
}

h2 {
	padding-top: 30px;
	font-size: 1.5em;
	text-align: left;
}

/*Media Query for headings
------------------------*/
/*Styles for screen 800px and lower*/
@media screen and (max-width: 800px) {
	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1em;
	}
}

/*Styles for screen 460px and lower*/
@media screen and (max-width: 460px) {
	h1 {
		font-size: 1.3em;
		padding-top: 10px;
	}
}

/*Styles for main layout elements*/
#content {
	float: left;
	width: 100%;
	padding: 20px 0 60px;
}

main {
	float: left;
	margin: 4% 0 0 6%;
	width: 70%;
}

/*Media Query for main layout elements
------------------------------------*/
/*Styles for screen 1260px and lower*/
@media screen and (max-width: 1260px) {
	main {
		margin: 4% 0 0 8%;
		clear: both;
		width: 80%;
	}
}

/*Styles for home page layout elements*/

/*Home page text*/
#hometext {
	float: left;
	margin: 13% 0 0 4%;
	width: 30%;
}

#hometext p {
	text-align: justify;
	padding-bottom: 20px;
}

/*Media Query for home page text
------------------------------*/
/*Styles for screen 1850px and lower*/
@media screen and (max-width: 1850px) {
	#hometext {
		margin: 12% 0 0 4%;
	}
}

/*Styles for screen 1550px and lower*/
@media screen and (max-width: 1550px) {
	#hometext {
		margin: 8% 0 0 4%;
	}
}

/*Styles for screen 1260px and lower*/
@media screen and (max-width: 1260px) {
	#hometext {
		margin: 0 0 0 4%;
	}
}

/*Styles for screen 1000px and lower*/
@media screen and (max-width: 1000px) {
	#hometext {
		width: 100%;
	}
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	#hometext {
		margin: 4% 0 0 6%;
		width: 90%;
	}
}

/*Styles for home page activity photos*/
#regular-monthly-photos,
#yearly-oneoff-photos {
	float: left;
	width: 30%;
}

#yearly-oneoff-photos {
	margin-left: 4%;
}

.homeimages {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	height: auto;
	backface-visibility: hidden;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}

/*Image positioning for activity images*/
#activeimg,
#activeimg2 {
	margin-bottom: 60px;
}

/*Media Query for home page activity photos 
-----------------------------------------*/
/*Styles for screen 1020px and lower*/
@media screen and (max-width: 1020px) {
	.act-wrap {
		display: flex;
		flex-direction: column;
	}

	#hometext {
		width: 100%;
		margin: 0 0 60px;
		order: 1;
	}

	#regular-monthly-photos {
		margin: 0 15% 60px;
		width: 70%;
		order: 2;
	}

	#yearly-oneoff-photos {
		margin: 0 15% 0;
		width: 70%;
		order: 3;
	}
}

/*Styles for screen 700px and lower*/
@media screen and (max-width: 600px) {
	#regular-monthly-photos,
	#yearly-oneoff-photos {
		width: 100%;
	}
	#regular-monthly-photos {
		margin: 0 0 60px;
	}

	#yearly-oneoff-photos {
		margin: 0;
	}
}

/*Lower image on home page*/
#lowerbanner img {
	width: 100%;
	height: auto;
	padding-top: 50px;
}

/*Text on all other pages*/
#activetext {
	margin: 0 0 30px 15%;
	width: 70%;
}

#activetext p {
	text-align: justify;
	padding-bottom: 20px;
}

/*Media Query for text on all other pages
---------------------------------------*/
/*Styles for screen 1260px and lower*/
@media screen and (max-width: 1260px) {
	#activetext {
		margin-left: 10%;
		width: 80%;
	}
}

/*Styles for screen 900px and lower*/
@media screen and (max-width: 900px) {
	#activetext {
		margin-left: 0;
		width: 100%;
	}
}

/*Container for all individual activity pages*/
ul#activity {
	overflow: hidden;
}

ul#activity.images li {
	width: 33%;
}

ul#activity li {
	float: left;
	display: block;
	padding: 1%;
}

ul#activity li img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-border-radius: 5%;
	-moz-border-radius: 5%;
	-ms-border-radius: 5%;
	border-radius: 5%;
}

hr {
	border-color: #f3ac30;
	margin-bottom: 30px;
}

/*Media Query for all individual activity pages
---------------------------------------------*/
/*Styles for screen 1020px and lower*/
@media screen and (max-width: 1020px) {
	ul#activity.images li {
		width: 50%;
	}
}

/*Styles for screen 690px and lower*/
@media screen and (max-width: 690px) {
	ul#activity.images li {
		width: 100%;
	}

	ul#activity li {
		margin: 1% 0;
	}
}

/*masonry layout*/
#masonry {
	line-height: 0;

	-webkit-column-count: 4;
	-webkit-column-gap: 0px;
	-moz-column-count: 4;
	-moz-column-gap: 0px;
	column-count: 4;
	column-gap: 0px;
}

#masonry img {
	width: 100%;
	height: auto;
	padding: 5px;
}

/*Media Query for masonry layout
------------------------------*/
/*Styles for screen 1020px and lower*/
@media screen and (max-width: 1020px) {
	#masonry {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

/*Styles for screen 690px and lower*/
@media screen and (max-width: 690px) {
	#masonry {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

/*Styles for screen 530px and lower*/
@media screen and (max-width: 530px) {
	#masonry {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}

/*Styles for embeded video*/
.video-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}
.video-responsive iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

/*Styles for video list*/
ul#bulletmark {
	list-style-type: disc;
	list-style-position: outside;
}

#bulletmark li {
	color: #f3ac30;
	padding-bottom: 10px;
}

#bulletmark li a {
	color: #fff;
}

#bulletmark li a:hover {
	color: #f0c67c;
}

/*flex layout for all photo galleries*/
* {
	box-sizing: border-box;
}

/*Styles for contact form*/
form {
	margin: 0 auto;
	max-width: 800px;
	padding: 25px;
	background: #f0c67c;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
}

form label {
	display: block;
	margin-top: 30px;
	font-weight: bold;
}

#formtop {
	margin-top: 0;
}

.field-input {
	width: 100%;
	padding: 12px;
	font-size: 1em;
	color: #000;
	background: #e9dac0;
	border: 2px solid #ccc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: all 1s ease;
}

.field-input:focus {
	border-color: #f3ac30;
}

textarea {
	height: 200px;
}

#anti-spam {
  display: none;
}

#submit-button {
	background: #555555;
	color: #fff;
	margin-top: 30px;
	padding: 15px 20px;
	font-size: 0.9em;
	font-weight: bold;
	cursor: pointer;
	float: right;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	transition: all 1s ease;
}

#submit-button:hover {
	background: #c0c0c0;
	color: #000;
}

.error-text {
	color: #ff4500;
	font-size: 0.9em;
	font-weight: bold;
}

.form-modal-container {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 200px;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.form-modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: openModal;
  -moz-animation-name: openModal;
  -ms-animation-name: openModal;
  animation-name: openModal;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  -ms-animation-duration: 0.4s;
  animation-duration: 0.4s;
  background-color: #ffffff;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  width: 80%;
}

@keyframes openModal {
  from {
    scale: 0;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}

@media (min-width: 425px) {
  .form-modal-content {
    width: 60%;
  }
}

@media (min-width: 1200px) {
  .form-modal-content {
    width: 30%;
  }
}

.form-modal-header {
  padding: 3px 30px;
  background-color: #f3ac30;
  text-align: center;
  position: relative;
}

#close-form-modal-btn {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 0;
}

#close-form-modal-btn:hover, #close-form-modal-btn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#form-modal-heading {
  font-size: 1rem;
  color: #fff;
  margin: 10px 0;
}

@media (min-width: 550px) {
  #form-modal-heading {
    font-size: 1.5rem;
  }
}

.form-modal-body {
  padding: 30px;
  background-color: #c0c0c0;
  color: #000;
}

/*Styles for Back to top button*/
.topbtn {
	display: none;
	position: fixed;
	bottom: 8px;
	right: 8px;
	border: none;
	outline: none;
	background: #ff4500;
	color: #fff;
	cursor: pointer;
	padding: 10px;
	font-size: 0.8em;
	font-weight: bold;
	border-radius: 10px;
	opacity: 0.5;
	transition: all 1s ease;
}

.topbtn:hover {
	opacity: 1;
}

/*============================================================
Footer Styles
============================================================*/
footer {
	background: #f3ac30;
	padding: 25px;
	margin-top: 10px;
}

footer div#copyright {
	float: left;
	margin: 10px 10px 0;
}

footer div#copyright p {
	color: #000;
	font-size: 0.9em;
}