/* artloop */

:root {
  --loopy-height: 900px; /* desktop element height */
}
.loopy-wrap { width:100%; }
.loopy-hold { display:block; background-color:transparent; }
.loopy-content { width:100%; padding:0; min-height:100px; margin-top:1rem; }
.loopy-map { width:100%; height:70vh; min-height:420px; background-color:#E8E0D8; border-radius:12px; overflow:hidden; }
#loopymap { width:100%; height:70vh; background-color:#E8E0D8; }

.loopycard { position:relative; display:flex; width:100%; overflow:hidden; margin-bottom:1rem; 
  background-color:white; 
  color:inherit;
  border-radius:12px;
  overflow:hidden;
}
.loopycard-content { width:calc(100% - 150px); min-height:150px; padding:1rem; }
.loopycard-image { width:150px; height:inherit; background-color:#eee;  }

@media all and (min-width: 992px) {
	.loopy-hold { display:flex; flex-direction: row-reverse; width:100%; max-width:1600px; margin:0 auto; height:var(--loopy-height);}
	.loopy-content { width:50%; padding:0 16px 0 0px; height:auto; overflow-y: scroll; margin-top:0; }
	.loopy-map { width:50%; height:var(--loopy-height); }
	#loopymap { width:100%; height:var(--loopy-height); top:0px; }
}
@media all and (min-width: 1200px) {
	.loopy-content { width:500px; }
	.loopy-map { width:calc(100% - 500px); }
}
@media all and (min-width: 1500px) {
	.loopycard-content { width:calc(100% - 220px); min-height:180px; padding:1.5rem; }
  .loopy-content { width:500px; }
	.loopy-map { width:calc(100% - 500px); }

.loopycard-content { width:calc(100% - 180px); min-height:150px; padding:1rem; }
.loopycard-image { width:180px; height:inherit; background-color:#eee;  }
}



.loopycard-map-link { position:absolute; top:0px; right:0px; height:auto; }
.loopycard-map-link button { float:right; }

.loopycard-image a { display:block; width:100%; height:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; }

.loopycard-subhead { font-size:0.6rem; line-height:1.2; font-weight:600;
	text-transform:uppercase; letter-spacing:0.050rem; margin-bottom:0.5rem; text-wrap:balance; }
.loopycard-headline { font-size:1rem; line-height:1.2; font-weight:800; margin-bottom:0.15rem; text-wrap:balance; }
.loopycard-text { font-size:0.7rem; line-height:1.3; font-weight:700; margin-bottom:0.5rem; text-wrap:balance; }

.loopycard-link { margin-top:0.6rem; }
.loopycard-link a { 
  display:inline-block;
  background-color:var(--cty-artloop-orange); 
  text-decoration:none;
  color:var(--cty-blue-dark); 
  font-size:13px; 
  line-height:1.5;
  font-weight:700; 
  text-transform:none; 
  padding:2px 14px; 
  border-radius:16px;
}
.loopycard-link a:hover { text-decoration:none; } 

@media all and (min-width: 1200px) {
  .loopycard-subhead { font-size:0.7rem; }
  .loopycard-headline { font-size:1.2rem; }
  .loopycard-text { font-size:0.8rem;  }
  .loopycard-subhead { width:calc(100% - 60px); }
}


.smarker-num { font-weight:800; color:var(--cty-blue-dark); }
.smarker-bg-artloop { position:absolute; width:24px; height:36px; fill:var(--cty-artloop-orange); }

.btn-map-it { 
  display:inline-block;
  background-color:var(--cty-blue-lighter);
  border:0px solid var(--cty-blue-lighter);  
  color:var(--cty-navy);
  font-size:13px; line-height:30px; font-weight:600; text-transform:uppercase; letter-spacing:0.010rem; 
  border-radius:0px; 
  border:0; 
  margin: 0; 
  padding: 0 10px; 
  transition:var(--cty-transition-hover);  
  text-decoration:none; 
}
.btn-map-it:hover {  
  background-color:var(--cty-blue-lighter);
  border-color:var(--cty-blue-lighter); 
  color:var(--cty-navy);
  text-decoration:none; 
}