@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsSUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhrsWUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduh8MKUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhrsKUBw.ttf) format('truetype');
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librefranklin/v7/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhh8KUBw.ttf) format('truetype');
}

* {
  box-sizing: border-box;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 200;
  kerning: normal;
}

html {

	--text: rgb(56,62,75);
	--blue: rgb(33,83,122);
	--light: rgb(43,173,216);
	--pink: rgb(204,40,95);
	--reverse: rgb(255,255,255);
	--palegrey: rgba(245,245,250,0.75);
}

.blue {background-color: #225780; color:#fff;}
.grey {background-color: #252933;}
.palegrey {background-color: rgba(230,230,235,.75);}
.card-body, .card-footer {background-color: var(--palegrey);
}
.card {border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.extrapalegrey {background-color: rgba(0,0,0,.15);}


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

strong {
  color: var(--blue);
  font-weight: 400;
}

.banner strong {
  color: var(--light);
  font-weight: 200 !important;
}




/* LINKS CSS */

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
}

a:hover
 {
  cursor:pointer !important;
}

p a:link, p a:visited {color: #2badd8; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }

ol > li a:link, ol > li a:visited {color: #2badd8; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }

ol > li a:hover  {color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }


.logo a:link, .logo a:visited {color: #fff; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }


p a:hover, .logo a:hover {color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

ul.missing > li a:link, ul.missing > li a:visited {color: #2badd8; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
ul.missing > li a:hover {color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

h3 a:link, h3 a:visited {color: #2badd8 ; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
h3 a:hover{color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

.card-header h2 a:link, .card-header h2 a:visited, .card-footer p a:link, .card-footer p a:visited {color: #fff !important ; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit;}

.card-header, .card-footer { transition: all 1s ease-out;}

.card-header:hover, .card-footer:hover {color: #fff !important; background-color: var(--blue); transition: all 1s ease-out; outline: 0;  font-weight: inherit;}

h5 a:link, h5 a:visited {color: #2badd8 ; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
h5 a:hover{color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

a:link .portal h5, a:visited .portal h5 {color: #2badd8 ; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 800; }
a:hover .portal h5{color: #fff; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 800; text-shadow: 0 0 8px #000;}

.footer a:link, .footer a:visited {color:#2badd8; transition: 1s ease; outline: 0; font-weight: inherit; }
.footer a:hover, .footer a:active {color:#CC285F;  transition: 0.5s ease; text-decoration: none; outline: 0; font-weight: inherit; }

h2 a:link, h2 a:visited {font-weight: inherit; color: #2badd8; text-decoration: none;  transition: 1s ease; outline: 0;}
h2 a:hover, h2 a:active {font-weight: inherit; color: #CC285F; text-decoration: none;  transition: 1s ease; outline: 0;}

.blue h2 a:link, .blue h2 a:visited {font-weight: inherit; color: #2badd8; text-decoration: none;  transition: 1s ease; outline: 0;}
.blue h2 a:hover, .blue h2 a:active {font-weight: inherit; color: #CC285F; text-decoration: none;  transition: 1s ease; outline: 0;}


/* TYPOGRAPHY CSS */

p, ol, input, button{
  font-size: calc(16px + 0.25vw);
  margin: 0 0 calc(10px + 0.5vw) 0;
  color: var(--text);
  padding:0;
  line-height:140%;
}

p.disclaimer {  font-size: calc(14px + 0.25vw);}

ol { margin-top: calc(10px + 0.5vw);}

ol > li { margin:0 0 calc(10px + 0.5vw) 20px; padding-left:20px;}

ul.missing li {
  font-size: calc(16px + 0.25vw);
    color: #21537a;
    margin-left: -10px;

}

ul.spotlightlist  {
margin:0 0 0 0; 
padding-left:0;
}

.spotlightlist li  {
font-size: calc(18px + 0.25vw);
list-style-type: none;
margin-bottom:20px;
line-height:140%;
}

p:last-of-type {
	margin-bottom: 0;
}

#spotlight p:last-of-type {
  margin-bottom: calc(10px + 0.5vw);
}

.blue p {
	color: #fff;
}

.background-image p {
  font-size: calc(20px + 0.25vw);
  margin: 0 0 15px 0;
  color: #fff;
  padding:0;
}

.valuecopy p { font-size: calc(14px + .25vw); transition: all 3s ease;}
.valuecopy:hover > p{color:#2badd8;transition: all 1s ease;}


.footer p {color:#fff; font-size: calc(16px + 0.1vw);}
.footer ul{padding: 0;margin: 0;}
.footer li{
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: large;
}

h1 {
	color: #2badd8;
	font-weight: 200;
	font-size: calc(26px + .5vw);
	text-align: left;
	font-spacing: -1px;
	line-height: 105%;
	text-transform:none;
	letter-spacing: -1px;
	margin-bottom: 20px;
}

.banner h1 {
	font-size: calc(30px + 2.5vw);
	text-align: center;
	color: #fff;
	margin-bottom: 0;
	margin-top: 50px;
		font-weight: 100;

}

.lockup h1 {
	font-size: calc(20px + 1.25vw);
	margin-top: 10px;

}



h2 {
	font-size: calc(18px + .25vw);
	font-weight: 200;
	margin: 0 0 calc(20px + .5vw) 0;
  color: var(--text);
	line-height: 130%;
}

h2.bannerh2 { font-size: calc(20px + 1vw); color:var(--reverse); text-align: center; padding: 20px; text-wrap:balance;}

.josh > h2  {
	color:var(--light);
	font-style: italic;
	line-height: 145%;
	font-size: calc(16px + 0.25vw);
  margin: 0 0 calc(10px + 0.5vw) 0;
}

.carousel-home .carousel-item h2 {
	font-size: calc(20px + .25vw);
	font-style: italic;
	color: var(--light);
  line-height: 130%;
}

.workcarousel > .carousel-item > h2 {font-size: calc(24px + .5vw); }

.blue h2 {color: #fff;}

h2.videotextoverlay {font-size: calc(20px + 0.8vw);}

h3 {
	font-weight: 200;
	font-size: calc(16px + .5vw);
  color: var(--text);
  line-height: 130%;
    margin: 0 0 calc(10px + 0.5vw) 0;

}

#spotlight h3, #spotlighthome h3 { color:var(--light)!important; margin-top: 50px;}
#spotlight h3:first-of-type, #spotlighthome h3:first-of-type { margin-top: 20px;}

.teamlist h3 {margin-bottom:8px; display:block; height: 20px; line-height: 0.8; color:rgba(43,173,216,1); font-size: calc(20px + .25vw);transition: all 1s; margin-top:-28px; padding:0 3px 0 5px; outline: none;}

.teamlist:hover {filter: brightness(1.1);}

.teamlist:hover h3 {color:var(--pink);transition: all 1s; cursor: pointer; }


@media only screen and (min-width: 575px) {
.teamlist h3 {color:rgba(43,173,216,0);}
}

h4 {
	color: #21537a;
	font-weight:200;
	font-style: normal;
	font-size: calc(15px + 0.25vw);
	margin: 0 0 calc(10px + 0.5vw) 0;
	line-height: 1.35;
 }


h5 {
	font-weight: 200 !important;
	font-size: calc(18px + .25vw);
	color: #2badd8;
	transition: all 1s ease;
	text-transform: none;
}

 h5.accordion-header:hover {
	color: #cc285F;
	transition: all 0.5s ease;
}

.value h3 {text-transform: none;}
.valuecopy h3{transition: all 1s ease;}
.valuecopy:hover h3{color:#cc285F;transition: all 1s ease;}

/* CONTAINERS CSS */

.logo {
  position: absolute;
  top: 20px;
  left: 40px;
  z-index: 100;
  height: 55px;
  width: 100px;
  line-height: calc(37px + .25vw);
  color: #fff;
  font-weight: 200;
  font-size: calc(24px + 1vw);
  letter-spacing: -2.5px;
}
.banner {height: calc(400px + 15vw);
	background-color: var(--text);
	}
.teambanner {height:75px;}

.background-image, .portal {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
/*   box-shadow: rgba(6, 15, 22, 0.05) 1000px 1000px 1000px 1000px inset; */
/* box-shadow: none !important; */
}

.none {box-shadow:none;}

.home {background-image: url(/backgroundimages/home.jpg);}
.about {background-image:url(/backgroundimages/aboutnew.jpg);}
.about2 {background-image:url(/backgroundimages/about2new.jpg);min-height: calc(300px + 7.5vw);}
.services {background-image:url(/backgroundimages/services.jpg);}
.services2 {background-image:url(/backgroundimages/services2.jpg);}
.services3 {background-image:url(/backgroundimages/services3.jpg);}
.team {background-image:url(/backgroundimages/team2.jpg);}
.careers {background-image:url(/backgroundimages/careersnew.jpg); background-position: center top;}
.careers2 {background-image:url(/backgroundimages/street-leaguenew.jpg); min-height: calc(300px + 10vw);}
.work {background-image:url(/backgroundimages/worknew.jpg);}
.work2 {background-image:url(/backgroundimages/work2new.jpg);  }
.contactus {background-image:url(/backgroundimages/contact.jpg); background-position: center top;}
.cookies {background-image:url(/backgroundimages/privacy.jpg);}
.privacy {background-image:url(/backgroundimages/privacy.jpg);}

.legal {background-image:url(/backgroundimages/legal.jpg);}
.map {background-image:url(/images2021/alma-map-01.svg); background-position: center center;}
.missing404 {background-image:url(/backgroundimages/404new2.jpg); background-position: center center;}
.spotlight {background-image:url(/backgroundimages/spotlight.jpg); background-position: center top;}


.container-fluid {
	padding: calc(15px + 6vw) calc(15px + 4vw);
	margin:0;
}

.wrapper {
  width:100%;
  max-width:  calc(1400px + 3vw);
  margin: 0 auto;
}

.footer {
	background-color: var(--text);
	color:#fff !important;
	padding: calc(15px + 2.5vw) 30px;
	border-bottom: calc(3px + .25vw) solid #2badd8;
	}

.contact, .links {padding:30px calc(10px + .5vw);}
.linkedin {padding:30px; padding-bottom:0;}
.links {padding-right: 50px;}

.columns {
  		margin-top: 40px;
  		margin-bottom: 40px;
  	  -moz-columns: 300px 3;
    	   columns: 300px 3;
   -moz-column-gap: 50px;
        column-gap: 50px;
    padding: 0;
}




/* ABOUT CSS */

.value {margin:12px 0;}
.valuecopy {
	background-color: rgba(255,255,255, .2);
	padding:30px calc(20px + 1vw);
	transition:3s ease;
	min-height: calc( 275px + 6vw);
		-webkit-border-radius: 8px;
		   -moz-border-radius: 8px;
		        border-radius: 8px;
		        }


.valuecopy:hover{
	cursor:pointer;
	background-color: rgba(255,255,255, .7);
	transition: all 1s ease;
}



/* TEAM CSS */

.teamlist {transition: all 1s ease; margin:0 !important; padding:0 !important; margin-bottom:0;}
.teamlist img {width:100%; transition: all 1s ease;}
.teamlist:hover img {transition: all 1s ease;}
.teamintro img {
	margin-bottom: calc(15px + 1vw);
	width:90%;
	max-width: 350px;
	border-bottom: 5px solid #2badd8;
	}

div.container-fluid.col-12.col-lg-7.teamintro > div.col-12 > p:first-of-type {font-size: calc(23px + 0.25vw); padding-top:calc(20px + 2vw); line-height: 135%;}
/* TESTIMONIALS CSS */

.casestudy {
	padding-top: calc(15px + 4vw);
	padding-bottom: calc(15px + 2vw);
	padding-left: calc(50px + 1vw);
	padding-right: calc(50px + 1vw);
	margin:0;}

img.quotemarks {display: inline-block; width: calc(15px + 1vw); margin: 15px 0;}

img.casestudyimg { max-width: calc(200px + 5vw); max-height: calc(30px + 1vw); margin: 40px 0 20px 0;}


/* CONTACT CSS */

.map {
  position: relative;
  min-height: 40vh;
   }

.map img {
  width:100%;

   }



.north {
  position: absolute;
  top: 0;
  right: 0;
  }

.north img {
width: calc(50px + .5vw);
border: none;
}

  .maplink {
  position: absolute;
  padding:10px;
  bottom: 0;
  right: 0;
  	background-color:#252933;

  }














/* OUTER MENU */


.outer-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  z-index: 1;
  box-sizing: border-box;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 5px;
  right: calc(10px + 1vw);
  z-index: 2;
  cursor: pointer;
  width: 75px;
  height: 75px;
  opacity: 0;
}


.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}

.outer-menu .checkbox-toggle:hover + .hamburger > div {
	background-color:#CC285F; /* Hamburger hover color */
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.5s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.5s ease 0.5s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 5px;
  right: calc(10px + 1vw);
  z-index: 1;
  width: 75px;
  height: 75px;
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  transition: box-shadow 0.5s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #fff;  /* Hamburger main color */
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -12.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.5s ease;
}
.outer-menu .hamburger > div:after {
  top: 12.5px;
}

.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 300vw;
  height: 300vw;
  color: #fff;
  background: rgba(22, 56, 82, 0.97);
  border-radius: 50%;
  transition: all 0.5s ease;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.5s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 0.5em;
  font-size: calc(16px + 0.75vw);
  display: block;
  font-weight: 100;
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 0.5s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
  color: #cc285f;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 1px;
  background: #cc285f;
  transition: width 0.5s ease;
}


/* VALLENATO ACCORDION CSS */

#accordion-container {
	padding: 1px;
	margin: 0;
	text-align: left;
	max-width:100%;
}

.accordion-header {
	padding: 0 0 0 30px;
	margin-bottom:20px;
	cursor: pointer;
	text-align: left;
	min-height: 30px;
}

.active-header {
	background: url(/images2021/active.svg);
	background-repeat: no-repeat;
	background-position: left calc(2px + .1vw);
	text-decoration: none;
}


.active-header:hover {
	background: url(/images2021/active.svg);
	background-repeat: no-repeat;
	background-position: left  calc(2px + .1vw);
	text-decoration: none;
}

.inactive-header {
	background: url(/images2021/inactive.svg);
	background-repeat: no-repeat;
	background-position: left  calc(2px + .1vw);
	text-decoration: none;
}
.blue .inactive-header {
	background: url(/images2021/inactive2.svg);
	background-repeat: no-repeat;
	background-position: left  calc(2px + .1vw);
	text-decoration: none;
	}

.inactive-header:hover {
	background: url(/images2021/inactive.svg);
	background-repeat: no-repeat;
	background-position: left  calc(2px + .1vw);
	text-decoration: none;
}
.blue .inactive-header:hover {
	background: url(/images2021/inactive2.svg);
		background-repeat: no-repeat;
	background-position: left  calc(2px + .1vw);
	text-decoration: none;
	}

.accordion-content {
	display: none;
	padding: 0;
	padding-left: 30px;
	border-top: none;
	margin: 0;
	width:100% !important;
	text-align: left;
}

.case .accordion-content {
	padding: 30px;
	background-color: rgba(87,87,87,.05);
	border-radius: 8px;
}

h5.accordion-header.active-header {color:#cc285f;}
.blue h5.accordion-header.active-header {color:#fff;}


.fa-ul li {
	width:100% !important;
	padding-left: 0;
	list-style-type: square;
}







/* GLOBAL CSS */

.check {border:1px solid pink;}

.copyright {
	width:100%; margin-top: 30px; border-top:1px solid #fff;
	padding-top: 15px;
}

.copyright p {font-size: 80%;}

.contact img {width:100%; max-width: calc(200px + 3vw);}
.lockup img {width:100%; max-width: calc(200px + 20vw); text-align: center;}


.linkedinpost p {font-size: 90%; }



.linkedin {
	border:1px solid none;
	border-radius: 10px;
	background-color: #13151a;
	}

.linkedinlogo{
	margin-bottom: 30px;
	width:calc(100px + 2vw);
	}

.linkedinimage {
	margin-bottom: 20px;
	border-radius:7px;
	border:1px solid #2badd8;
	transition: 1s ease;
	overflow: hidden
	}



.linkedinimage img {
	width:100%;
/* 	height: calc(150px + 2vw); */
	aspect-ratio: 16/9 !important;
	object-fit:cover;
  object-position:center top;

		}

.linkedinimage:hover {
	border:2px solid #CC285F;
	transition: 1s ease;
	filter: brightness(1.2);
	}


i.fal, i.fas, i.fab {
	margin-right:10px;
}

	.footer i {
	color:#fff;
	padding-right:10px;
}

.studyrow {max-width: 100vw !important;}

hr {
	border-top: 2px solid #2badd8;
	height:0; padding:0;
	margin: 30px 0;
	width: 40px;
	margin-left:0;
	}
  
hr.hrfull {
  border-top: 2px solid #2badd8;
  height:0; padding:0;
  margin: 50px 0 20px 0;
  width: 100%;
  margin-left:0;
  }

#accordion-container hr.long  {
	height: 0;
	margin-top: 2em;
	margin-bottom: 1em;
	border: 0;
	border-top: 2px solid #cc285f;
	width:100%;
}



.blue .accordion-content  > hr,  .blue hr.long  {
	border-top: 2px solid #fff !important;
}

label {display: none !important;}
a {outline: none;}

/* MEDIA QUERIES CSS */


@media only screen and (max-width: 1200px) {
	.carousel-control-prev, .carousel-control-next { display:none;}
}

@media only screen and (min-width: 1200px) {
	.fixed {background-attachment:fixed;}
}


:root {
  --animate-delay: 0.5s;
}

.zero {padding: 0 0 0 0;}

.portal {width:100%; height: calc(150px + 4vw); border-radius:  5px; margin: 15px 0;}
.portal + p {  font-size: calc(16px + 0.125vw); padding: 0 15px;}
.vcenter h5  {text-transform:none; text-align:center; color: #fff; font-size: calc(22px + 0.5vw);}
a:link .portal, a:visited .portal  {box-shadow: rgba(6, 15, 22,0.05) 1000px 1000px 1000px 1000px inset; transition: 1s ease; }
a:hover .portal { transition: 2s ease; filter: brightness(2); }

.corners {
       background-image: url(/images2021/corner-left.svg), url(/images2021/corner-right.svg);
       background-position: left top, right bottom;
       background-repeat: no-repeat, no-repeat;
       background-size: calc(15px + 2vw), calc(35px + 2.5vw);
}

.reverse-corners {
       background-image: url(/images2021/reverse-corner-left.svg), url(/images2021/reverse-corner-right.svg);
       background-position: left top, right bottom;
       background-repeat: no-repeat, no-repeat;
       background-size: calc(15px + 2.5vw), calc(35px + 3vw);
}

img.apebanner {width: calc(200px + 20vw); max-width: 90%; margin-top: calc(30px + 5vw);}





/* SPOTLIGHT */
#spotlight .corners p, #spotlight .corners li, #spotlighthome .corners p, #spotlighthome .corners li {text-align: justify;}
#spotlight .fa-ul li, #spotlighthome .fa-ul li {text-align: left;}

img.spotlightPic  { width:95%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 0; border-radius: 100%; border:1px solid var(--text); margin-bottom: 30px;}

#spotlighthome .card-header {
  display: none;
}

.card-body > ul {	margin-top: calc(10px + 0.25vw); margin-left:30px; }
.card-body > ul > li {	 font-size: calc(12px + 0.25vw); margin: 0 0 calc(10px + 0.25vw) 0; list-style: none;   line-height: 125%;
}
.card-body {background-color: none; }

/* card-body link styles */
.card-body > ul > li a:link {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
.card-body > ul > li a:visited {color:  var(--accent); text-decoration:  line-through !important;  transition: 1s ease; outline: 0;  font-weight: inherit; text-decoration: line-through; }
.card-body > ul > li a:hover  {color: #CC285F; text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

img.card-img-top { width:100%; aspect-ratio: 16 / 6; object-fit: cover; object-position: 50% 0}

.card-header, .card-footer { background-color: var(--light); }
.card-header > h2 i {color:#fff !important;}
.card-footer > p i {color:#fff !important; padding-top:10px; padding-bottom: 10px;}
.card-header, .card-body, .card-footer { padding-left: 20px;}

p.spotlightDate {display: inline-block; padding:5px; background-color:var(--light); color:var(--reverse); font-size: calc(16px + .125vw); margin-bottom: 40px;}