.figtree-light {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 1.2rem;
}
.grid-container {
  max-width: 80rem;
}
.main {padding: 2rem 0;}
.case-study {margin: 2rem 0 0; padding: 2rem 0;}

@media print, screen and (min-width: 20em){
	h1 {font-size: 3rem; line-height: 4rem; font-weight: 400;}
	h2 {font-size: 2rem;}
	h3 {font-size: 1.5rem;}
	h4 {font-size: 1rem;}
	p {margin: 1rem 0;}
	.large-txt {font-size: 1.75rem; line-height: 2.5rem; margin-bottom: 1.5rem;}
	.tag {
	font-size: .75rem;
	}
	.icon {
	width: 1.5rem;
    height: 1.5rem;
	}
	.card {
		border-radius: none;}
	.project-card {
		width: 100%;
	}
	p.kpi {line-height: 1.5rem; font-size: 1.5rem;}
	.textbox .icon {height: 2rem; width: 2rem;}
	.exp {padding: 1rem 0 0;}
    .exp-row2 {padding: 0 0 2rem 0;}
    .iconset {
        margin: 1rem;
        padding: 1rem;
        border-radius: .75rem;
        text-align: center;
        font-size: 1rem;
        background: linear-gradient(30deg,rgba(194, 210, 217, 1) 0%, rgba(217, 244, 255, 1) 120%);
		/*background: linear-gradient(30deg,rgba(59, 51, 221, 1) 0%, rgba(152, 10, 184, 1) 120%);*/
    }
    .iconset p {
        margin: 0;
        margin-top: .5rem;
        line-height: 1em;
    }
}
@media print, screen and (min-width: 42em){
	.tag {
	font-size: 1rem;
	}
}
@media print, screen and (min-width: 64em){
	h1 {font-size: 4rem; line-height: 5rem; font-weight: 400;}
	h2 {font-size: 3rem;}
	h3 {font-size: 2rem;}
	h4 {font-size: 1.5rem;}
	p {margin: 1rem 0;}
	.large-txt {font-size: 2rem; line-height: 3rem; margin-bottom: 2rem;}
	.tag {
	font-size: 1.25rem;
	}
	.icon {
	width: 2rem;
    height: 2rem;
	}
	.card {
		border-radius: 1.5rem;}
	p.kpi {line-height: 2rem; font-size: 2rem;}
	.textbox .icon {height: 4rem; width: 4rem;}
	.exp {padding: 1.5rem 0 0;}
    .exp-row2 {padding-bottom: 0 0 1.5rem;}
    .iconset {
        margin: 1.5rem;
        padding: 1.5rem;
        border-radius: 1rem;
        text-align: center;
        font-size: 1.25rem;
		/*background: linear-gradient(140deg,rgba(192, 237, 255, 1) 0%, rgba(122, 144, 153, 1) 100%);*/
        background: linear-gradient(140deg,rgba(217, 244, 255, 1) 0%, rgba(194, 210, 217, 1) 100%);
		/*background: linear-gradient(30deg,rgba(59, 51, 221, 1) 0%, rgba(152, 10, 184, 1) 120%);*/
    }
    .iconset p {
        margin: 0;
        margin-top: .5rem;
        line-height: 1em;
    }
}

.nav {
	padding: 1rem 2rem;
	margin-bottom: 1.5rem;
}
.nav h4 {font-size: 1.5rem;}
.nav ul {
	background-color: inherit;
}
.nav li {
	display: inline-block;
	height: 1.5rem;
	padding-left: 1rem;
	padding-top: .25rem;
	font-size: 1.25rem;
	 font-weight: 300;
	vertical-align: middle;
}
.nav li a {
	color:#EBEAF7;
	font-weight: 600;
	text-decoration: none;
}
.nav li a:hover {
	font-weight: 700;
	color: #CDF1FF;
}
.bottom-bar {
	display: flex;
	justify-content: flex-end;
}
.bottom-bar a {
	text-decoration: none;
	color: inherit;
	font-size: 1rem;
}
.top-bar a {
	text-decoration: none;
	color: inherit;
}
h1 strong {
	/*background: linear-gradient(90deg,rgba(152, 10, 184, 1) 0%, rgba(59, 51, 221, 1) 100%);*/
	background: linear-gradient(90deg,rgba(192, 237, 255, 1) 0%, rgba(153, 180, 191, 1) 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
	font-weight: 500;}

.button {
	font-size: 1.5rem;
	padding: .75rem 1rem;
	border-radius: 2rem;
	margin-bottom: 2rem;
	margin-right: 2rem; }
.button:hover {
	background-color: #665849;
}
.tag {
	padding: .5rem .75rem;
	border-radius: 2rem;
	margin-bottom: 1rem;
	margin-right: .5rem;
	}
.footer {
	color:#151145;
	padding: 2rem 2rem;
	flex: none;
}
.footer ul {
	background-color: inherit;
}
.footer li {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 300;
	vertical-align: middle;
}
.footer2 {
	padding: 2rem 2rem;
	margin-top: 0rem;
	text-align: center;
}
.footer2 p {
	font-size: 1.25rem;
}
.footer2 button {
	padding: 1rem 2rem;
	margin-top: 1.5rem;
	text-align: center;
	font-size: 1.5rem;
	padding: .75rem 1rem;
	border-radius: 2rem;
}
.footer2 button:hover {background-color: #BBA995;}

/*spacing*/
.side-spacing-50 {
	padding-left: .5rem;
	padding-right: .5rem;
}
.top-spacing-50 {
	padding-top: .5rem;
	padding-bottom: .5rem
}
.side-spacing-100 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.top-spacing-100 {
	padding-top: 1rem;
	padding-bottom: 1rem
}
.side-spacing-200 {
	padding-left: 2rem;
	padding-right: 2rem;
}
.top-spacing-200 {
	padding-top: 2rem;
	padding-bottom: 2rem
}
.side-spacing-300 {
	padding-left: 3rem;
	padding-right: 3rem;
}
.top-spacing-300 {
	padding-top: 3rem;
	padding-bottom: 3rem
}

/*cards*/
.card {
	border: 1px solid #CDF1FF;
	margin-bottom: 3rem;}

.project-card {
	font-size: 1.25rem;
	padding: 0;
	min-height: 20em;
}
.card-text {
	padding: 2rem;
	border-top: 2px solid #CDF1FF;
}
.case-study .card-text {
	border-top: none;
	border-bottom: 2px solid #CDF1FF;
	margin-bottom: none;
}
.text-no-img {font-size: 1.25rem;}
.cs-img {padding: 1rem 1rem 0; height: 30rem;}
.cs-img-lg {height: 38rem;}
.cs-text {padding: 1rem;}
.case-study h2 {font-size: 2.25rem;}
.case-study .kpi {font-weight: 500;}
.tags {padding: 1.5rem 1.5rem 15rem;}
.tags .tag {box-shadow: .25rem .25rem 1rem -.25rem #4D5F66;}
.card-button {text-align: right; padding: 1.5rem;}
.card-button button {
	font-size: 1.5rem;
	padding: .75rem 1rem;
	border-radius: 2rem;
	margin-bottom: 1rem;
	margin-right: 2rem;   
	box-shadow: .25rem .25rem 1rem -.25rem #443B31;
}
.card-button button:hover {
	color: #F2FBFF;
	background-color: #665849;;
}
.kpi .icon {margin: .5rem .75rem 0 0}
.icon {
    vertical-align: -0.25rem;
	display: inline;
}
.card strong {font-weight: 500;}
.textbox {padding: 2rem; border-radius: 2rem; font-size: 1.5rem; line-height: 1.25em; margin-bottom: 1rem;}
.textbox svg {padding-right: 1rem;}
.textbox:last-of-type {margin-bottom: 0;}
.center-img {width: 100%;}
.align-bottom {
	vertical-align: bottom!important;
}

/* homepage images */
.db {background-image: url(https://www.rspope.com/images/home/dashboard_feature.png); background-position: top left; background-size: cover;}
.pm {background-image: url(https://www.rspope.com/images/home/5maps_feature.png); background-position: top left; background-size: cover;}
.hc {background-image: url(https://www.rspope.com/images/home/content_changes.png); background-position: top left; background-size: cover;}
.fs {background-image: url(https://www.rspope.com/images/home/elms.png); background-position: top left; background-size: cover;}

/*db case study */
.db-1 {background-image: url(https://www.rspope.com/images/cs/dashboard/dashboard-start.png); background-position: top left; background-size: cover; padding: 15rem 0;}
.db-6 {background-image: url(https://www.rspope.com/images/cs/dashboard/dashboard_maps.png); background-position: top left; background-size: cover; padding: 15rem 0;}

/* modal */
.view-larger {
	min-height: 60%;
	max-height: 80%;
	min-width: 60%;
	max-width: 80%; 
	margin: auto; 
	margin-top: 2rem; 
	background-color: #EBEAF7; 
	border: 3px solid #713194;
	border-radius: 2rem;
	padding: 1.5rem;
	overflow: hidden;
}
.orbit-next, .orbit-previous {
  display:none;
}
.orbit-next, .orbit-previous {
  background-color: rgba(61, 72, 76, 0.7);
	border-radius: 3rem;
}
.orbit-next:hover, .orbit-previous:hover, .orbit-next:active, .orbit-previous:active, .orbit-next:focus, .orbit-previous:focus {
  background-color: rgba(61, 72, 76, 0.9);
}
.img-orbit-slide .caption {
	font-size: 1.25rem;
	font-weight: 500;
	text-align: center;
	position: absolute;
	top: .25rem;
	z-index: 10;
	padding: .25rem.75rem;
	opacity: 0.9;
}
.img-orbit-slide img {
	position: relative;
	top: 0;
}
.orbit-bullets {
  position: absolute;
  top:25rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
  text-align: center;
  width: 100%;
	padding: .25rem 0;
  background-color: rgba(77, 95, 102, 0.7);
}
.cs-img-lg .orbit-bullets {
	top:35rem;
}
.orbit-bullets button {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.1rem;
  border-radius: 50%;
  background-color: #99B4BF;
}
.orbit-bullets button:hover {
  background-color: #99B4BF;
	border: 1px solid #c0edff;
}
.orbit-bullets button.is-active {
  background-color: #C0EDFF;
}

/* global */

.no-margin {margin: 0;}
.margin-top {margin-top: 1rem; margin-bottom: 0;}

button a {text-decoration: none; color: inherit;}
button a:hover {text-decoration: none; color: inherit;}

.material-symbols-outlined {
	font-size: 3rem;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 200,
  'opsz' 36
}

.shadow {box-shadow: .25rem .25rem 1rem -.25rem #201968;}

/*colors alt-2*/

/*text*/
.text-light {
	color: #F2FBFF;
}
.text-dark {
	color: #1F2426;
}
.text-primary-500 {
	color: #7A9099;
}
.text-primary-800 {
	color: #3D484C;
}
.text-accent {
	color: #ADD5E5;
}
.text-accent-600 {
	color: #ADD5E5;
}
.text-accent-850 {
	color: #607780;
}
.text-accent-900 {
	color: #4D5F66;
}
.text-accent2-700 {
	color: #665849;
}

/*filters*/
.filter-primary-100 {
	filter: invert(98%) sepia(8%) saturate(819%) hue-rotate(182deg) brightness(95%) contrast(108%);
}
.filter-primary-500 {
	filter: invert(38%) sepia(13%) saturate(2807%) hue-rotate(205deg) brightness(94%) contrast(96%);
}
.filter-accent-500 {
	filter: invert(47%) sepia(28%) saturate(5390%) hue-rotate(247deg) brightness(93%) contrast(107%);
}
.filter-accent2-400 {
	filter: invert(60%) sepia(36%) saturate(246%) hue-rotate(351deg) brightness(92%) contrast(89%);}
.filter-accent2-500 {
	filter: invert(46%) sepia(9%) saturate(937%) hue-rotate(351deg) brightness(100%) contrast(89%);
}

/*primary*/
.primary-50 {
	background-color: #F5F4FB;
}
.primary-50-border {
	background-color: #F5F4FB;
	border: 1px solid #EBEAF7;
}
.primary-100 {
	background-color: #EBF0F2;
}
.primary-100-border {
	background-color: #EBF0F2;
	border: 1px solid #D6E1E5;
}
.primary-200 {
	background-color: #D6E1E5;
}
.primary-200-border {
	background-color: #D6E1D5;
	border: 1px solid #C2D2D9;
}
.primary-300 {
	background-color: #C2D2D9;
}
.primary-300-border {
	background-color: #C2D2D9;
	border: 1px solid #ADC3CC;
}
.primary-400 {
	background-color: #ADC3CC;
}
.primary-400-border {
	background-color: #ADC3CC;
	border: 1px solid #99B4BF;
}
.primary-500 {
	background-color: #99B4BF;
}
.primary-600 {
	background-color: #7A9099;
}
.primary-700 {
	background-color: #5C6C73;
}
.primary-800 {
	background-color: #3D484C;
}
.primary-900 {
	background-color: #1F2426;
}

/*accent*/
.accent-100 {
	background-color: #F2FBFF;
}
.accent-100-border {
	background-color: #F2FBFF;
	border: 1px solid #E6F8FF;
}
.accent-200 {
	background-color: #E6F8FF;
}
.accent-200-border {
	background-color: #E6F8FF;
	border: 1px solid #D9F4FF;
}
.accent-300 {
	background-color: #D9F4FF;
}
.accent-300-border {
	background-color: #D9F4FF;
	border: 1px solid #CDF1FF;
}
.accent-400 {
	background-color: #CDF1FF;
}
.accent-400-border {
	background-color: #CDF1FF;
	border: 1px solid #C0EDFF;
}
.accent-500 {
	background-color: #C0EDFF;
}
.accent-600 {
	background-color: #ADD5E5;
}
.accent-700 {
	background-color: #9ABECC;
}
.accent-800 {
	background-color: #738E99;
}
.accent-850 {
	background-color: #607780;
}
.accent-900 {
	background-color: #4D5F66;
}

/*accent2*/
.accent2-100 {
	background-color: #EEE9E4;
}
.accent2-200 {
	background-color: #DDD4CA;
}
.accent2-300 {
	background-color: #CCBEAF;
}
.accent2-400 {
	background-color: #BBA995;
}
.accent2-500 {
	background-color: #AA937A;
}
.accent2-600 {
	background-color: #887662;
}
.accent2-700 {
	background-color: #665849;
}
.accent2-800 {
	background-color: #443B31;
}
.accent2-900 {
	background-color: #221D18;
}

/*colors*/

/*text
.text-light {
	color: #F5F4FB;
}
.text-dark {
	color: #151145;
}
.text-primary-500 {
	color: #5D55BE;
}
.text-primary-800 {
	color: #201968;
}
.text-accent {
	color: #713194;
}
.text-accent-600 {
	color: #9742C5;
}*/

/*filters
.filter-primary-100 {
	filter: invert(98%) sepia(8%) saturate(819%) hue-rotate(182deg) brightness(95%) contrast(108%);
}
.filter-primary-500 {
	filter: invert(38%) sepia(13%) saturate(2807%) hue-rotate(205deg) brightness(94%) contrast(96%);
}
.filter-accent-500 {
	filter: invert(47%) sepia(28%) saturate(5390%) hue-rotate(247deg) brightness(93%) contrast(107%);
}*/

/*primary
.primary-50 {
	background-color: #F5F4FB;
}
.primary-50-border {
	background-color: #F5F4FB;
	border: 1px solid #EBEAF7;
}
.primary-100 {
	background-color: #EBEAF7;
}
.primary-100-border {
	background-color: #EBEAF7;
	border: 1px solid #D7D4EF;
}
.primary-200 {
	background-color: #D7D4EF;
}
.primary-200-border {
	background-color: #D7D4EF;
	border: 1px solid #AEAADE;
}
.primary-300 {
	background-color: #AEAADE;
}
.primary-300-border {
	background-color: #AEAADE;
	border: 1px solid #867FCE;
}
.primary-400 {
	background-color: #867FCE;
}
.primary-400-border {
	background-color: #867FCE;
	border: 1px solid #5D55BE;
}
.primary-500 {
	background-color: #5D55BE;
}
.primary-600 {
	background-color: #352AAD;
}
.primary-700 {
	background-color: #2A228B;
}
.primary-800 {
	background-color: #201968;
}
.primary-900 {
	background-color: #151145;
}*/

/*accent
.accent-100 {
	background-color: #F2DCFD;
}
.accent-100-border {
	background-color: #F2DCFD;
	border: 1px solid #E5BAFB;
}
.accent-200 {
	background-color: #E5BAFB;
}
.accent-200-border {
	background-color: #E5BAFB;
	border: 1px solid #D797FA;
}
.accent-300 {
	background-color: #D797FA;
}
.accent-300-border {
	background-color: #D797FA;
	border: 1px solid #CA75F8;
}
.accent-400 {
	background-color: #CA75F8;
}
.accent-400-border {
	background-color: #CA75F8;
	border: 1px solid #BD52F6;
}
.accent-500 {
	background-color: #BD52F6;
}
.accent-600 {
	background-color: #9742C5;
}
.accent-700 {
	background-color: #713194;
}
.accent-800 {
	background-color: #4C2162;
}*/