@mixin animate($duration:0.3s){
	transition: all $duration;
}

@mixin trajan-font($weight:600){
	font-family: trajan-pro-3, serif;
	font-weight: $weight;
	font-style: normal;
}

.no-js {
	.toggle-main-navigation{display:none;}
}


.shadeout{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba($black,0.45);
	z-index:1;
	opacity:1;
}

.page-row__spacer{
	.default-spacer{height:1.5rem;}
	.space-1{height:1.5rem;}
	.space-2{height:3rem;}
	.space-3{height:4.5rem;}
	.space-4{height:6rem;}
	.space-5{height:7.5rem;}
	
}

.space-half-line{margin-top:0.75rem;}
.space-1-line{margin-top:1.5rem;}


.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

@keyframes come-in {
  to { transform: translateY(0); }
}

//.page-section__no-padding .column-wrapper,

.jarallax{
	
	
  	position: relative;
 	z-index: 0;
	
	&::after{
		content:"";
		position:absolute;
		top:0;right:0;bottom:0;left:0;
		background:$black;
		opacity:0;
		@include animate(1s);
	}
 
	.jarallax-img {
		position: absolute;
		object-fit: cover;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	&.jarallax__fadeout{
		
	//	&::after{opacity:1;}
		
	}
}

::placeholder {
  color: $medium-gray;
  opacity: 1;
}

.ui-widget {
	background: #ddd;
	border: none !important;
	border-radius: 0;
	font-family: $body-font-family;
	padding:0;
	box-shadow:0 0 0.5em rgba(0,0,0,0.25);
}
.ui-widget *{border-radius:0 !important;}
.ui-datepicker .ui-datepicker-header{border:none;}
.ui-datepicker .ui-datepicker-header{background:$black;color:#fff;}

.ui-datepicker table{margin-bottom:0;}

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{
	border:none;
	background:#fff;
}
.ui-datepicker table{border:none !important;padding:0;}
.ui-datepicker td{padding:0;font-size:0.875em;border:solid 1px #ececec;}	
.ui-datepicker td a{text-align:center !important;padding:0.75em;}
.ui-datepicker thead{background:none;color:#fff;}
thead, tbody, tfoot{border:none;background:#fff;}

.ui-datepicker .ui-state-hover {
	background: none;
	color:#fff;
}
.ui-datepicker-current-day a{
	background: $primary-color !important;
	color:#fff !important;
}
.ui-datepicker-today a{
	background: #ddd !important;
	color:#fff !important;
}

 .ui-datepicker .ui-datepicker-next span,
 .ui-datepicker .ui-datepicker-prev span {
	background-image: url(../images/ui-icons_ffffff_256x240.png);
	background-position: -32px 0;
	margin-top: 0;
	top: 0.5em;
	font-weight: normal;
}
 .ui-datepicker .ui-datepicker-prev span {
	background-position: -96px 0;
}