/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .prev-arrow-logo,
 .next-arrow-logo {
    /* This was annoying, so turned off for now */
    display: none;
 }
/* .acf-map {
    width: 50vw;
    height: 100vh;
    border: #ccc solid 1px;
    float:right;
    z-index: 0;
}
.acf-map img {
   max-width: inherit !important;
}
#gmap-results,
#gmap-result-single-location {
    position: absolute;
    top:0;
    left:0;
    width: 50vw;
    height: 100vh;
    background-color: white;
    float:left;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 20px;
}
#gmap-result-single-location {
    width: 60vw;
    z-index: 3;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translate(-100%, 0);
    box-shadow: 5px 10px 5px -1px rgba(0,0,0,0.2);
}
#gmap-result-single-location.reveal {
    transform: translate(0, 0);
} */
/* #content {
    position: relative;
} */
/* .location-wrapper {
    border: 1px lightgray solid;
    display: flex;
} */
/* .location-image {
    height:100%;
}
.location-image img {
    width:100%;
    height:100%;
} */

/* Stars ratings with percentage of fill */ 

.ratings {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    color: #b1b1b1;
    overflow: hidden;
}
.full-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #fde16d;
}
.empty-stars:before, .full-stars:before {
    content:"\2605\2605\2605\2605\2605";
    font-size: 14pt;
}
.empty-stars:before {
    -webkit-text-stroke: 1px #848484;
}
.full-stars:before {
    -webkit-text-stroke: 1px orange;
}
/* Webkit-text-stroke is not supported on firefox or IE */

/* Firefox */
 @-moz-document url-prefix() {
    .full-stars {
        color: #ECBE24;
    }
}

#all-locations-wrapper {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.25s linear;
}

#all-locations-wrapper.fade {
    opacity: 0;
}

.results-header.locating:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0px;
}

.results-count {
    display: none;
}

@keyframes ellipsis {
    to {
        width: 1em;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1em;
    }
}

#map,
#all-locations-wrapper,
.results-header,
.results-count {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

#map.fade-in,
#all-locations-wrapper.fade-in,
.results-header.fade-in,
.results-count.fade-in {
    opacity: 1;
}


.dna-loader-wrapper {
    position: fixed;
    background: #0066B2;
    height: 120px;
    width: 120px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 100;
    left: 0;
    right: 0;
    margin: 0px auto;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    -webkit-box-shadow: 11px 21px 9px -1px rgba(0,0,0,0.36);
    -moz-box-shadow: 11px 21px 9px -1px rgba(0,0,0,0.36);
    box-shadow: 11px 21px 9px -1px rgba(0,0,0,0.36);
    backface-visibility: visible;

}
.dna-loader-wrapper.fade-out {
    opacity: 0;
    backface-visibility: hidden;

}
.dna-loader {
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 120px;
    height: 20px;
    top: 50%;
    transform: translate(0, -50%) rotate(-63deg);
}

.dot {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
	align-content: center;
	margin: 0 8px;
	height: 20px;
	width: 2px;
}

.dot:first-of-type
{ margin-left: 0 }

.dot:last-of-type
{ margin-right: 0 }

.dot::before,
.dot::after {
	content: "";
	position: absolute;
	bottom: -5px;
	display: block;
	width: 4px;
	height: 4px;
	background: #EFB312;
	border-radius: 4px;
	box-shadow: 1px 1px 4px rgba(0,0,0,.15);
	animation: helix 1.25s ease-in-out infinite;
    border: 1px solid white;
}

.dot::after {
	bottom: 100%;
	animation: helix-reversed 1.25s ease-in-out infinite;
}

.dot i {
	position: absolute;
	z-index: 25;
	align-self: center;
	width: 2px;
	height: 10px;
	background: rgba(255,255,255,.15);
	animation: helix-bar 1.25s ease-in-out infinite;
}

.dot2::before, .dot2::after, .dot2 i
{ animation-delay: 0.05s }

.dot3::before, .dot3::after, .dot3 i
{ animation-delay: 0.10s }

.dot4::before, .dot4::after, .dot4 i
{ animation-delay: 0.15s }

.dot5::before, .dot5::after, .dot5 i
{ animation-delay: 0.20s }

.dot6::before, .dot6::after, .dot6 i
{ animation-delay: 0.25s }

.dot7::before, .dot7::after, .dot7 i
{ animation-delay: 0.30s }

.dot8::before, .dot8::after, .dot8 i
{ animation-delay: 0.35s }

.dot9::before, .dot9::after, .dot9 i
{ animation-delay: 0.40s }

@keyframes helix {
	  0% { width: 5px; height: 5px; bottom: -5px; z-index: 10 }
	 25% { width: 2px; height: 2px }
	 50% { width: 5px; height: 5px; bottom: 100%; z-index: 20 }
	 75% { width: 8px; height: 8px }
	100% { width: 5px; height: 5px; bottom: -5px }
}

@keyframes helix-reversed {
	  0% { width: 5px; height: 5px; bottom: 100%; z-index: 20 }
	 25% { width: 8px; height: 8px }
	 50% { width: 5px; height: 5px; bottom: -5px; z-index: 10 }
	 75% { width: 2px; height: 2px }
	100% { width: 5px; height: 5px; bottom: 100% }
}

@keyframes helix-bar {
	  0% { height: 15px }
	 25% { height:  8px }
	 50% { height: 15px }
	 75% { height:  8px }
	100% { height: 15px }
}