:root {
  --bkgd-color:#FBF2E7;
  --medilog-color: #4B7EE8;
  --chongqing-color:#5B1D1D;
  --inb-color:#0CB6F2;
  --landing-color:#38C4BA;
  --scrapon-color:#D34883;
  --sandbox-color:#795C54;
  --escape-color:#316358;
  --pincharge-color:#96CBC2;
  --onboarding-color:#F4CC20;
  --icon-color:#F6AD68;
  --logos-color:#6733E3;
  --getprepared-color:#F8B84E;
  --gangprevention-color:#A0B2E2;
}

.bigger{
	font-size: 2.4rem;
}

.medilog-color{
	color:var(--medilog-color);
	opacity: 1;
}

.medilog-color-bkgd{
	background-color:#F1EBE7;
}

.space{
	height:10rem;
}

.no-margin{
	margin:0;
}

.toc-nav{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-top: 4rem;
    padding-left: 12rem;
    padding-right: 12rem;
    background-color: #FBF2E7;
    z-index: 200;
    border-bottom: 1px solid #E0D3C6;
}

img.icon{
	width:3rem;
	opacity: 0.5;
}

img.icon:hover{
	opacity: 1;
}

.toc-nav p{
	font-family: 'Tiempos','Martel', serif;
	opacity: 0.5;
	text-align: center;
}

.toc-nav p:hover{
	opacity: 1;
	transition: all .25s ease-in;
}

#brand{
	position: absolute;
}

.project-intro{
	padding-top: 18rem;
    padding-left: 12rem;
    width: 60%;
    padding-bottom: 5rem;
}

.project-intro p{
	font-size: 5rem;
	letter-spacing: -0.15rem;
	margin-bottom: 6rem;
}

p#award{
	font-style: italic;
	font-weight: normal;
	color: #4B7EE8;
	font-size: 3rem;
	letter-spacing: 0.0005rem;
}

p#award a{
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    background-image: linear-gradient(to left,transparent,transparent 50%,#4B7EE8 50%,#4B7EE8);
}

p#award a:hover{
	background-position: 0 0;
	color: #FBF2E7;
}

p#award a:visited{
	text-decoration: none;
}

strong{
	font-weight: bolder;
	font-style: normal;
}

em{
	font-style: italic;
	font-weight: bold;
}

em#sa-em{
	color: #D9353B;
}

em#medilog-em{
	color:#4B7EE8;
}

#sa-basic{
	background-color: #D9353B;
}

#medilog-basic{
	background-color: var( --medilog-color);
}

.info-basic{
	margin: 0;
	padding-top: 14rem;
    padding-left: 14rem;
    padding-bottom: 3rem;
}

.info-basic p{
	color: white;
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
}

p.info-item{
	font-weight: bold;
}

.img-basic img{
	width: 75rem;
	top:-5rem;
	position: relative;
}

img#medilog-img-basic{
	width:40rem;
	margin-left: 15rem;
}

.project-basic{
	margin-bottom: 3rem;
}

h2{
	font-family: 'Tiempos', 'Martel', serif;
	font-weight: bold;
	font-size: 4rem;
	color:#C6B6A5;
	text-align: center;
	margin-top:15rem; 
	margin-bottom: 10rem;
	opacity: 0.5;
	letter-spacing: 0.06rem;
}

.words{
	padding-left: 14rem;
	padding-right: 5rem;
	line-height: 3.8rem;
}

.words-right{
	padding-left: 5rem;
	padding-right: 14rem;
	line-height: 3.8rem;
}

.quotation{
	padding-left: 5rem;
	padding-right: 14rem;
	text-align: center;
}

p.quote{
	font-size: 3rem;
	font-weight: bold;
}

p.citation{
	font-weight: normal;
}

img.bleed{
	padding-left: 5rem;
}

.attention{
	font-weight: bold;
	padding-left: 18rem;
	margin-bottom: 3rem;
}

#sa-attention{
	color:#D9353B;
}

.attention p{
	font-size: 2.3rem;
	margin-bottom: 1.2rem;
}

strong.mini-label{
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	padding-right: 1.5rem;
}

.bottom-margin{
	margin-bottom: 5rem;
}

img.wide-image{
	position: relative;
	width: 100%;
    padding: 0 12rem;
}

h3{
	font-family: 'Karla', sans-serif;
	font-weight: bold;
	margin-bottom: 2rem;
	padding-left: 12.5rem;
}

.sa-impact-color{
	color:#D9353B;
	opacity: 1;
}

h4{
	font-family: 'Karla', sans-serif;
	font-size: 2.3rem;
    letter-spacing: -0.03rem;
	font-weight: bold;
	margin-top: 4rem;
}

ul{
	list-style-type: none;
	font-family: 'Tiempos', 'Martel', serif;
	font-size:2.8rem;
	letter-spacing: 0.06rem;
}

li.li-title{
	font-style: italic;
	margin: 3rem 0;
	color:#E0D3C6;
}

li{
	margin-bottom: 1.2rem;
}

.category-menu{
    padding: 7rem 14rem;
	margin: 12rem 12rem 20rem 12rem;
	border-style: solid;
	border-color: #E0D3C6;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 0;
	border-left-width: 0;
}

.category-menu a{
	color:#E0D3C6;
}

.category-menu a:hover{
	color: #C6B6A5;
}

p#copyright{
	margin-left: 5rem;
	/*margin-bottom: 3.5rem;*/
	margin-top: 2rem;
	opacity: 0.8;
}

.child-footer #contact{
    position: relative;
    margin-left: 5rem;
    text-align: right;
    float: right;
    width: 35rem;
}


/*medilog*/
.medilog-color-bkgd{
	position:relative;
}

.medilog-gif{
	width: 25.1rem;
    margin: 8rem 0;
    left:35%;
    display: block;
    position: relative;
}

.phone-case{
	width: 28rem;
    top:6.3rem;
    left: 34%;
    display: block;
    position: absolute;
}

.watch-case{
	width: 27.5rem;
    top: 3rem;
    left: 31.8%;
    display: block;
    position: absolute;
    z-index: 50;
}

.medilog-gif-watch{
	width: 18rem;
    margin: 15rem 0;
    left: 36.5%;
    display: block;
    position: relative;
    z-index: 100;
}

/*chongqing*/
em#chongqing-em{
	color:var(--chongqing-color);
}

#chongqing-basic{
	background-color: var(--chongqing-color);
}

#chongqing-basic .img-basic img{
	width: 55rem;
    margin-left: 10rem;
}

#chongqing-basic .info-basic{
	padding-top: 20rem;
}

.chongqing-color{
	color:var(--chongqing-color);
}

/*inb*/
em#inb-em{
	color:var(--inb-color);
}

.inb-color{
	color:var(--inb-color);
	opacity: 1;
}

.inb-color-bkgd{
	background-color:#EFEEE7;
	position: relative;
}

a.inb-color{
	background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    background-image: linear-gradient(to left,transparent,transparent 50%, var(--inb-color), 50%,var(--inb-color));
    color:var(--inb-color);
}

a.inb-color:hover{
	background-position: 0 0;
	color: var(--bkgd-color);
}

#inb-basic{
	background-color: #69CBEF;
}

#inb-basic .img-basic img{
	width: 100%;
    margin-top: 5rem;
    top: 0;
}

.inb-gif{
	width: 60rem;
    margin: 8rem 0 22rem 0;
    left:13%;
    display: block;
    position: relative;
}

.mac-mockup{
	width: 64rem;
    top:6.3rem;
    left: 12%;
    display: block;
    position: absolute;
}

.no-margin-top{
	margin-top: 0;
}

/*landing pages*/
.landing-color{
	color:var(--landing-color);
}

#landing-basic{
	background-color: var(--landing-color);
}

#landing-basic .img-basic img{
	width:50rem;
    top: 3rem;
    margin-left: 10rem;
}

img.half-image{
	width: 60%;
    margin: auto;
    display: block;
}

/*scrapon*/
.scrapon-color{
	color:var(--scrapon-color);
}

#scrapon-basic{
	background-color: var(--scrapon-color);
}

#scrapon-basic .img-basic img{
	width: 40%;
	margin-left: 20rem;
}

.padding-side{
	padding:0 12rem;
}

/*sandbox*/
.sandbox-color{
	color:var(--sandbox-color);
}

#sandbox-basic{
	background-color: var(--sandbox-color);
}

#sandbox-basic .img-basic img{
	width: 50%;
	margin-left: 20rem;
}

/*escape pod*/
.escape-color{
	color:var(--escape-color);
}

#escape-basic{
	background-color: var(--escape-color);
}

#escape-basic .img-basic img{
	width: 40%;
	margin-left: 20rem;
}

/*pincharge*/
.pincharge-color{
	color:var(--pincharge-color);
}

#pincharge-basic{
	background-color: var(--pincharge-color);
}

/*onboarding*/
.onboarding-color{
	color:var(--onboarding-color);
}

#onboarding-basic{
	background-color: var(--onboarding-color);
}

#onboarding-basic .img-basic img{
	width: 40%;
	margin-left: 20rem;
	top:2.5rem;
}

/*icon-set*/
.icon-color{
	color:var(--icon-color);
}

#icon-basic{
	background-color: var(--icon-color);
}

#icon-basic .img-basic img{
	width: 40%;
	margin-left: 20rem;
}

/*logos*/
.logos-color{
	color:var(--logos-color);
}

#logos-basic{
	background-color: var(--logos-color);
}

#logos-basic .img-basic img{
	width: 40%;
	margin-left: 20rem;
	top:6rem;
}

#cps-link{
	width:40%;
	margin:auto;
	text-align: center;
}

img#cps-landing{
	width:100%;
	margin:3rem 0;
}


/*getprepared*/
.getprepared-color{
	color:var(--getprepared-color);
}

#getprepared-basic{
	background-color: var(--getprepared-color);
}

em#getprepared-em{
	color:var(--getprepared-color);
}

img#getprepared-img-basic{
	width:40rem;
	margin-left: 15rem;
}


/*gang prevention*/
.gangprevention-color{
	color:var(--gangprevention-color);
}

#gangprevention-basic{
	background-color: var(--gangprevention-color);
}

em#gangprevention-em{
	color:var(--gangprevention-color);
}

.quote-grey{
	color:#C6B6A5;
}

.gangprevention-link, .gangprevention-link:visited{
	color:var(--gangprevention-color);
	background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    background-image: linear-gradient(to left,transparent,transparent 50%,#A0B2E2 50%,#A0B2E2);
}

.gangprevention-link:hover{
	background-position: 0 0;
	color: #FBF2E7;
}

li.new{
	font-family: 'Karla', sans-serif;
	font-size: 2rem;
    margin: 0 0 1rem;
    letter-spacing: -0.03rem;
}