/* Edit mode */
.edit-mode {

	border: 3px solid #CCC;
	padding: 1rem;

}

.edit-fix {

	display: contents;

}

.edit-button {

	cursor: pointer;
	position: relative;

}

.edit-menu-container:hover .edit-menu {

	opacity: 1;

}

.edit-menu {
	
	position: absolute;
	border: 4px solid #EEE;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	text-align: right;
	pointer-events: none;
	padding-right: 10px;
	padding-top: 10px;

}

.clone-btn, .delete-btn {
	
	pointer-events: auto;

}

.edit-menu-item {

	margin-bottom: 2rem;

}

.edit-form {

	display: none;
	border: 2px solid #CCC;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 1rem;

}

#edit-modal {

	z-index: 50;

}

.edit-caption-fld {

	margin-top: .5rem;

}

.caption-head {

	margin-bottom: .5rem;

}

.save-caption-btn {

	text-align: right;
	padding-top: .5rem;

}

.edit-border {

	border: 3px outset #CCC;
	padding: 2rem;

}

#page-editor {

	max-height: 500px;
	overflow-y: auto;

}

.toolbar {

	margin-top: 0.5rem;
	margin-bottom: 0.5rem;

}

.toolbar button {

	padding: 1rem;

}

.gray-border {

	border: 5px solid #EEE;
	padding: 2rem;

}

/* Full screen width */
.full-width {

	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;

}

/* Calandar */

.cal-item {
	
	padding: 10px;
	border: 1px #CCCCCC outset;
	margin-bottom: 10px;
	
}

.cal-front-page {
	
	float: left; 
	width: 36px; 
	height: 35px; 
	max-width: 36px; 
	max-height: 35px; 
	background-image: url(/images/cal-bg.png);
	
}

.cal-front-page-month {
	
	color: white; 
	font-size: 10px;
	position: relative;
	text-align: center;
	bottom: 1px;
	
}

.cal-front-page-day {
	
	text-align: center;
	position: relative;
	bottom: 3px;
	
}

.cal-front-page-data {
	
	float: left; 
	position: relative; 
	bottom: 5px; 
	margin-left: 10px;
	
}

.cal-td-noday {
	
	border: 1px solid black;

}

.cal-td {
	
	border: 1px solid black;
	cursor: pointer;
	width: 14%;

}

.cal-td:hover {
	
	color: white;
	background-color: #142f7c;
	
}

.cal-td:hover a {
	
	color: white;
	
}

.cal-td-head {
	
	text-align: center;
	font-size: 18px;
	width: 14%;
	
}

.main-wrapper {
	
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	width: 90%;
	
}

.grid-center {
	width: 100%;
	display: grid;
	place-content: center;
}

.full-center {
	
	width: 100%;
	text-align: center;
	
}

.flex {
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	
}

.flex-half {
	
	width: 50%;
	
}

.title {
	
	font-family: 'Open Sans Condensed';
	font-size: 35px;
	font-weight: bold;
	margin-bottom: 15px;
	
}

.subtitle {
	
	font-family: 'Open Sans Condensed';
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 15px;
	
}

.item-head {
	
	font-family: 'Open Sans Condensed';
	font-size: 25px;
	font-weight: bold;
	
}

.staff-head {
	
	font-family: 'Open Sans Condensed';
	font-size: 35px;
	font-weight: bold;
	margin-bottom: 15px;
	
}

.item {
	
	text-align: center;
	width: 33%;
	
}

.responsive-img {

	width: 100%;
 	height: auto;

}

ul.indent > li {
	
	margin-left: 1.5em;
	
}

.fp-logo a {
	
	text-decoration: none;
	
}

/* vertical aligning */
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

.full-bar { 
	
	width: 100%;
	padding: 10px;
	color: black;
	background-color: #CCC;
	
}

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

.blue-box-thin {
	
	border: 1px solid #7592e5;
	padding: 20px;
	margin-bottom: 20px;
	
}

.blue-subtitle {
	
	
	font-family: 'Open Sans Condensed';
	font-size: 24px;
	line-height: 30px;
	color: #142f7c;
}

.test1 {
	
	display: none;
	
}

.iframe-vid {
	
	width: 600px;
	height: 450px;
	
}

.video-img-link {

	width: 600px;
	height: auto;	
	
}

ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: " - ";
  text-indent: -5px;
}

.small-screen-top { display: none; }

.cal-head-big { display: block; }
.cal-head-small { display: none; }

#uploadForm label {margin:2px; font-size:1em; font-weight:bold;}
.demoInputBox{padding:5px; border:#F0F0F0 1px solid; border-radius:4px; background-color:#FFF;}
#progress-bar {background-color: #142f7c;height:20px;color: white;width:0%;-webkit-transition: width .3s;-moz-transition: width .3s;transition: width .3s;}
.btnSubmit{background-color:#09f;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;}
#progress-div {border:#CCC 1px solid;padding: 5px 0px;margin:30px 0px;border-radius:4px;text-align:center;}
#targetLayer{width:100%;text-align:center;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  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: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  cursor: pointer;
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal-header {
  padding: 2px 16px;
  background-color: #4490e0;
  color: white;
}

.modal-header h2 {

	color: white;

}

.modal-body {
	
	min-height: 25rem;
	padding: 2px 16px;

}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.event-param {

	margin-bottom: 5px;
	
}

.event-param-title { 
	
	border: 1px solid #CCC;
	min-width: 45%;
	max-width: 45%;
	float: left;
	margin-right: 5px;
	padding: 5px;

}

.event-param-value {

	border: 1px solid #CCC;
	min-width: 45%;
	max-width: 45%;
	float: left;
	padding: 5px;

}

.top-button {
	
	display: block;
	margin-bottom: 1em;
	
}

.form-title {
    
	padding: 5px;
    height: 47px;
    font-size: 21px;
    margin-bottom: 10px;

}

.form-value {
	
	margin-bottom: 10px;
	
}

.form-text-title {
    
	padding: 5px;
    height: 47px;
    font-size: 21px;
    margin-bottom: 10px;

}

.form-text {

	width: 100%;
    margin-bottom: 10px;
    min-height: 200px;

}

.form-submit {
	
	font-size: 21px;
	
}

.action, .col-head, .col-data {

	float: left;
	min-width: 100px;
	margin-right: 10px;
	
}

.nav-lvl1, .nav-lvl2, .nav-lvl3 {
	
	margin-bottom: 10px;
	padding: 10px;
	
}

.nav-lvl1 {	
	
}

.nav-lvl2 {
	
	display: none;
	margin-top: 10px;
	
}

.nav-lvl3 {
	
	display: none;
	margin-top: 10px;
	
}

.nav-action, .nav-page-select, .nav-custom-link, .nav-edit-title {
	
}

.nav-action {
	
	text-align: center;
	
}

.nav-action-delete {
	
	position: relative;
	top: 5px;
	
}

.nav-page-select, .nav-custom-link {
	
	max-width: 20%;
	min-width: 20%;
	
}

.nav-edit-title {
	
	width: 80%;
	
}

.nav-expand-collapse {
	
	min-width: 30px;
	cursor: pointer;
	
}

.image-left {
	
	z-index: 2;
	position: relative;
	float: left;
	margin-right: 0.8em;
	
}

.image-right {
	
	z-index: 2;
	position: relative;
	float: right;
	margin-left: 0.8em;
	
}

.lightbox-caption-outside {

	margin-top: 1rem;

}

.space-top {

	margin-top: 3rem;

}

.space-below {

	margin-bottom: 2rem;

}

.span-row {
	
	grid-column: 1/-1; text-align: center; margin-bottom: 1em;
	
}

.col-align-right {

	justify-self: end;

}

.col-align-left {

	justify-self: start;

}

.col-align-center {

	justify-self: center;

}

.col-align-middle {

	align-self: center;

}

.one-column {
	max-width: 70%;
	margin: 0 auto;
}

.two-columns {
	
	display:grid;
    grid-template-columns: 1fr 1fr;
	grid-gap: 2em;

}

.two-columns-fixed {
	
	display:grid;
    grid-template-columns: 1fr 1fr;
	grid-gap: 2em;

}

.three-columns {
	
	display:grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2em;

}


.two-columns-33-66 {
	
	display:grid;
    grid-template-columns: 1fr 2fr;
	grid-gap: 2em;

}

.two-columns-66-33 {
	
	display:grid;
    grid-template-columns: 2fr 1fr;
	grid-gap: 2em;

}

.two-columns-25-75 {
	
	display:grid;
    grid-template-columns: 1fr 3fr;
	grid-gap: 2em;

}

.two-columns-75-25 {
	
	display:grid;
    grid-template-columns: 3fr 1fr;
	grid-gap: 2em;

}

.two-columns-75-25-fixed {
	
	display:grid;
    grid-template-columns: 3fr 1fr;
	grid-gap: 2em;

}

.auto-columns {
	
	display:grid;
    grid-template-columns: repeat( auto-fit, minmax(14rem, 1fr) );
	grid-gap: 2em;

}

.full-row {

	grid-column: 1/-1;

}

.dice-upload {
	
	display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

}

.side-orientation {
	
	max-width: 125px;
	max-height: 125px;
	min-width: 125px;
	min-height: 125px;
	
}

.template-gap {
	
	height: 1.5em;
	
}

.begin-grid {

	display: grid;

}

.center-flex {
  align-items: center;
  display: flex;
  justify-content: center;
}

.grid-center {
	
	display: grid;
	justify-items: center;
	align-items: center;
	
}

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

@media screen and (max-width: 1000px) {
	
	.two-columns,.two-columns-70-30, .two-columns-33-66, .two-columns-66-33, .three-columns {
		
		grid-template-columns: 1fr;
		
	}

	.one-column {
		max-width: 95%;
	}
	
}