/*responsiveness*/
/*xxl and down*/
@media screen and (max-width:1399px){
  #sp-technology-open .expand-col{ font-size:14px; }
}
/*xl and down*/
@media screen and (max-width:1199px){
  h1{ font-size:2em; }
  #sp-technology-open .expand-col{ font-size:12px; }
}
/*xl and up*/
@media screen and (min-width:1200px){
  span.cloud-word{ font-size:30px; }
  span.cloud-word.large{ font-size:34px; }
  span.cloud-word.small{ font-size:26px; }
  #showcase-wrapper.expanded{ width:33% !important; }
  #cloud-wrapper:not(.expanded){ width:67% !important; }
}
/*lg and up*/
@media screen and (min-width:992px){
  #sp-menu .sp-column{ justify-content:flex-start !important; }
}
/*md and down*/
@media screen and (max-width:991px){
  .logo-image{ height:60px !important; }
  .value.card{ padding:5px; }
  .value .expand-col-original{ 
    display:block;
    align-content:center;
  }
  .value .expand-col-original svg{ width:100px; }
  .value .expand-col p{ font-size:12px; }
  #solution-btn-wrapper h5{ display:none; }
}
/*sm and down*/
@media screen and (max-width:767px){
  h4{ font-size:1rem; }
  .card.solution-primary{ width:100%; }
}
/*colors*/
:root {
  --oxford:#0D2237;
  --ucla:#2E77AE;
  --columbia:#CEE2F2;
  --alice:#E0EAF4;
  --orange:#FF8E2B;
}
/*sections*/
section{
  opacity:0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  overflow: hidden;
}
section.is-visible{
  opacity: 1;
  transform: translateX(0);
}
#sp-title{
  align-content:center;
}
#sp-header{
  background-color:var(--oxford);
  box-shadow: inset 0 5px 0 0 var(--orange);  
  border-left:5px solid var(--orange);
  height:100px;
  align-content:center;
}
#sp-main{
  background-image:url('/images/bgs/bg_oxford_on_alice_dai_3px.png');
  background-attachment:fixed;
}
#sp-footer{
  border-top:5px solid var(--orange);
}
#sp-landing{
  min-height: calc(75vh - 100px);
}
#sp-technology-header, #sp-services{
  scroll-margin-top: 80px;
}
#sp-aboutus{
  border-bottom:4px solid var(--ucla);
}
#sp-contact{
  border-top:2px solid var(--orange);
}
#sp-clinical-solutions-title{
  border-top:2px solid var(--orange);
  scroll-margin-top: 80px;
}
#sp-values{
  border-bottom:4px solid var(--ucla);
}
/*utils*/
.orange{
  color:var(--orange);
}
.card-padding{
  padding:20px;
}
/*navigation*/
.burger-icon span{
  background-color:var(--ucla) !important;
}
.sp-menu-item.current-item.active{
  box-shadow: inset 0 -5px 0 0 var(--orange);  
}
/*news items*/
.article-intro-image{
  float:left;
  width:15%;
  margin:10px 5% !important;
  border-radius:10px !important;
}
.article-list{
  background-color:var(--columbia);
  border-radius:10px !important;
  padding:20px !important;
  margin:20px 0;
}
.article-list .article-body .article-info{
  color:var(--ucla);
}
.article-list:after{
  content: '';
  display: block;
  width: 35%;
  height: 2px;
  background: var(--orange);
  margin-top: 1rem;
}
/*components*

/**expandable solutions / values cols**/
.expand-col-wrapper{
  position: relative;
  overflow: hidden;
  height:100%;
  width:100%;
}
.expand-col-original {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: left 0.3s ease;
  display:flex;
  gap:10px;
  align-items:center;
}
.expand-col{
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: left 0.3s ease;
  z-index: 10;
  align-content:center;
}
.has-expandable-col:hover .expand-col-wrapper .expand-col {
  left: 0;
}
.has-expandable-col:hover .expand-col-wrapper .expand-col-original {
  left: 100%;
}
img.element{
  border-radius:10px;
  height:260px;
  width:100%;
}
/**brackets**/
.brackets {
  padding:10px;
  background:
    linear-gradient(var(--orange), var(--orange)) top left,
    linear-gradient(var(--orange), var(--orange)) top left,
    linear-gradient(var(--orange), var(--orange)) top right,
    linear-gradient(var(--orange), var(--orange)) top right,
    linear-gradient(var(--ucla), var(--ucla)) bottom left,
    linear-gradient(var(--ucla), var(--ucla)) bottom left,
    linear-gradient(var(--ucla), var(--ucla)) bottom right,
    linear-gradient(var(--ucla), var(--ucla)) bottom right;

  background-size:
    2px 16px,  /* top-left vertical */
    16px 2px,  /* top-left horizontal */
    2px 16px,  /* top-right vertical */
    16px 2px,  /* top-right horizontal */
    2px 16px,  /* bottom-left vertical */
    16px 2px,  /* bottom-left horizontal */
    2px 16px,  /* bottom-right vertical */
    16px 2px;  /* bottom-right horizontal */

  background-repeat: no-repeat;
}

/**cards**/
.card{
  border-radius:10px;
  padding:20px;
  margin:5px;
}
.card > .subtitle{
  color:var(--ucla);
}
.card-scale, .card-small-scale{
  transition: transform .3s;
}
.card-scale:hover{
  transform: scale(1.05);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}
.card-small-scale:hover{
  transform: scale(1.02);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.card-light-hr{
  background-color:var(--alice);
}
.card-light-hr h4{
  color:var(--ucla);
}
.card-medium-hr{
  background-color:var(--columbia);
}
.card-medium-hr h2{
  color:var(--ucla);
}
.card-medium-hr:after, .card-light-hr:after{
  content: '';
  display: block;
  width: 20%;
  height: 2px;
  background: var(--orange);
  margin-top: 1rem;
}
.card-dark-cta{
  background-color:var(--oxford);
  border-left:10px solid var(--orange);
  color:var(--alice);
}
.card-dark-cta > .cta {
  padding:5px;
  color:var(--alice);
  background-color:var(--orange);
  width:60%;
  border-radius:10px;
  position:absolute;
  bottom:20px;
}
.card-dark-cta > h1.title{
  color:var(--alice);
}
/**clinical-solutions section**/
#solution-btn-row-1,#solution-btn-row-2{
  display:flex;
}
.card.offset-brick{
  width:10%;
  background-color:var(--oxford);
}
.card.full-brick{
  width:33%;
  background-color:var(--oxford);
}
#b.solution-primary{
  width:calc(100% - 10px);
}
.solution-primary{
  height:100px;
  cursor:pointer;
  width:33%;
  padding:10px;
}
.solution-primary.active{
  background-color:var(--alice);
  color:var(--ucla);
  transform: scale(1.02);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  border:2px solid var(--orange);
}
.solution-primary.active h1.title{
  color:var(--oxford);
}
.solution-primary.active button.cta{
  display:none;
}
#solution-wrapper{
  display:flex;
}
#cloud-wrapper{
  text-align:center;
  width:50%;
  transition: width 1s ease;
  align-content:center;
}
#cloud-wrapper.expanded{
  width:100%
}
#showcase-wrapper{
  width:0;
  overflow:hidden;
  transition: width 1s ease;
  max-height:350px;
}
#showcase-wrapper.expanded{
  width:50%;
  overflow:hidden;
}
span.cloud-word{
  transition:color 0.3s ease, transform 0.3s ease;
  font-weight:600;
  color:var(--ucla);
  font-size:20px;
  margin:10px;
  /* margin-right:20px; */
  display:inline-block;
  cursor:pointer;
}
span.cloud-word.active{
  color:var(--orange);
  transform: scale(1.15);
}
span.cloud-word.focused{
  color:var(--orange);
  transform: scale(1.15);
  border-bottom:2px solid var(--oxford);
}
.wc-descr:not(.active){
  display:none;
}
/*mobile-solutions sections*/
button#close-app{
  border-radius:5px;
  background-color:transparent;
  border:1px solid var(--orange);
  color:var(--orange);
  float:right;
}
#solutions-mobile-content{
  position: absolute;
  top: 0px;
  left: -100%;
  z-index: 10;
  padding: 20px;
  width: 100%;
  height:100%;
  overflow-y:auto;
  background-color: var(--alice);
  transition: left 0.3s ease;
  border-left:5px solid var(--oxford);
}
#solutions-mobile-content.expanded{
  left:0%;
}
.mobile-solution-title{
  font-size:1.25em;
  font-weight:700;
  color:var(--ucla);
}
.mobile-solution{
  border-bottom:1px solid var(--orange);
  padding-bottom:10px;
  padding-top:10px;
}
.mobile-solution:not(.visible){
  display:none;
}
span#appname{
  font-size:35px;
  font-weight:400;
}
/**values section**/
.value{
  text-align:center;
  justify-items:center;
  height:200px;
  background-color:var(--columbia);
}
.value svg{
  width:150px;
  height:auto;
  color:var(--ucla);
}
/*mobile-screen-values*/
#values-mobile-wrapper{
  display:flex;
  flex-wrap:wrap;
}
#mobile-solution-app-subheader{
  color:var(--ucla);
  font-weight:400;
}
.value-mobile{
  width:33%;
  text-align:center;
}
/*animations*/
/** rise & fade — left to right **/
.rise span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) translateX(-8px);
  animation: rise 0.4s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}