html{font-size:62.5%;}
body {font-size:1.6rem; font-family: 'Calibri', Arial, Helvetica, sans-serif; color:#4f4e4d; }

footer {position:relative;}

/* Layout */
#site-main > div {margin:0 auto; }
#tutorials {margin-top:5rem; margin-bottom:5rem}
.top-5 {margin-top:5rem;}
.top-8 {margin-top:8rem;}

/* Navigation */
.navbar {border-bottom: 1px solid #dfdfdf;}
.navbar .nav-item a {text-transform: uppercase;}

.nav-item { padding:0 1rem;  }
.nav-item a {font-size:1.6rem; }
.nav-link, .nav-link:link {color:#4f4e4d; cursor: pointer; }
.nav-link:hover {color:#2B979B;}
.nav-active a {border-bottom: 5px solid #07b2b2;}

.navbar-wrapper{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  grid-gap:1em;
  grid-column-gap: 1em;
  grid-row-gap: 0.25em;
}

.navbar-logo{
grid-column: 1;
grid-row:1;
display:flex;
justify-content: flex-end;
padding: 0.5rem 0.5rem;
}

.navbar-tabs{
grid-column: 2;
grid-row:1;
display:flex;
justify-content: flex-start;
}
.navbar-tabs.show{
grid-column:1/4;
grid-row:2;
padding-top:0;
display:flex;
justify-content: center;
text-align: center;
}
.navbar-tabs.collapsing{
grid-column:1/4;
grid-row:2;
padding-top:0;
display:flex;
justify-content: center;
text-align: center;
}

.navbar-btns{
grid-column: 3;
grid-row:1;
display:flex;
justify-content: flex-start;
}

/* This is the width  bootstrap uses for navbar-lg*/
@media (max-width: 992px) {
  .navbar-logo{justify-content: flex-start;}
  .navbar-btns{justify-content: flex-end;}
  .navbar-collapse{align-items:initial!important;}
  .navbar-wrapper{
    grid-template-columns: 1fr auto auto; /* Changed the last one */ 
    grid-row-gap: 0;} /* So no added space when dropdown collapsed*/
}

.container .navbar-container {
  justify-content: center; 
  display: flex;
  flex: 1; 
  padding-left: 0;
  padding-right:0;
}
.container .navbar-container:first-child > .navbar-item {margin-right:auto;}
.container .navbar-container:last-child > .navbar-item {margin-left: auto;}
.nav-logo{height:30px;}

#breadcrumb ul {list-style: none; text-align:center; padding:0;}
#breadcrumb li {display:inline-block; font-size:1.4rem; text-transform:uppercase; padding:0.5rem 0}
#breadcrumb ul li:after{content: " / ";} 
#breadcrumb ul li:last-child:after {content: "";} 

footer nav#links {margin:3rem auto; text-align:center;}
footer nav#links ul {list-style:none; padding:0; margin:1rem auto; text-align:center;  }
footer .nav-item a, footer .nav-item a:link  {font-size:1.4rem; color:#fff; text-transform:uppercase;  }


/* headers */
h1, h2, h3 {font-weight:bold; }
h1 {text-align:center; margin-bottom: 3.5rem;}
h2 {text-align:center; margin-bottom:2.5rem;} /*TODO: Look into making this more specific. (so modal-header not included)*/
h3 {margin-bottom:2rem; }
h4 {text-transform:uppercase; color:#8C8C8B; }
.modal h3{margin-top:1rem;}
.blog-post h3{text-align: center;}
.model-references h3{margin-right:auto;margin-top:2ex; margin-bottom: 1ex;}
.modal h4{color:inherit;font-weight:bold;margin-top:2rem;}
.modal p{margin:1rem 0;}

.white {color:#ffffff; text-shadow:1px 2px #4c4d4e;}


p, li {font-size:1.8rem; line-height:1.4em;}
.post p {margin-bottom:1.5rem;}
p.ingress  {font-size:2rem; line-height:1.25em; text-align:center;}
.tag-tutorial p.ingress {font-style: italic;}
p.meta {font-size:1.4rem; text-align:center; color:#8c8c8c}

.link-user-guide{text-align:center;margin-bottom:2rem;}

header.user-guide-header{
  position:sticky;
  top:0; 
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  background-color:white; 
  cursor:pointer;
  border-bottom: 1px solid gray;
  padding:0 0 0.5rem 0 !important;
  margin-bottom:2rem;}

#toc-container{/*position:absolute; left:-400px;height:100%;*/line-height:1.5rem;}  
#toc {position: sticky; top:2rem;}
#toc nav.sub-section{margin-left: 2rem;}

.user-guide-header i:after{content:"expand_less";}
.user-guide-header.collapsed i:after{content:"expand_more";}
section#user-guide h1{font-size:4rem; font-weight:normal;}
section#user-guide h2{font-size:3rem; font-weight:normal;}
section#user-guide h3{font-weight:normal;}
section.user-guide-section {margin:1rem 0rem 1rem 1.75rem;}
section#user-guide h1.section-header{color:rgb(30,30,30);text-align:start;border-bottom: 2px solid rgb(30,30,30);margin:2rem 0rem 1.25rem 0rem!important;}
section#user-guide h2.sub-section-header{color:rgb(30,30,30);text-align:start;/*border-bottom: 1px solid rgb(79,78,77)*/;margin-left:1rem; margin-bottom:1rem;}
section#user-guide h3{color:gray;text-align:start;margin-bottom:0;}
.user-guide-content {text-align: justify; padding:0rem 1rem 0rem 1rem;}
.user-guide-content figure.kg-card {text-align:center; margin-top:1rem;margin-bottom:1.5rem;}
.user-guide-content p {margin-left:0;}
#user-guide .section-admin-text{padding:0 2rem;}
#user-guide figure.kg-card {text-align:center; margin-top:2rem; margin-bottom: 3rem; padding:0 2rem;}
#toc .nav-link.active{color:#2b979b;}


ul li, ol li { margin-bottom:0.25em; }
@media (max-width:1024px){
  .kg-image{max-height:500px;}
}
@media (max-width:768px){
  header.user-guide-header{padding:0 0 0.25rem 0 !important;}
  section#user-guide h1{font-size:3rem;}
  section#user-guide h2{font-size:2.4rem;}
  section#user-guide h3{font-size:1.8rem;}
  .kg-image{max-height:250px;}
}


a, a:link {color:#0070CC;}
a.download-title, a.download-title:link {color:inherit;}
a.title-link, a.title-link:link{color:inherit;}
a.readmore {color:#07b2b2; padding:10px; display:inline-block; text-align:right;}

a.tag {color: #8C8C8B; border:1px solid #D3D4D4; font-size: 1.4rem; font-weight:normal; border-radius:15px; padding:0.5rem 1rem;}
a.tag:hover {text-decoration:none; border-color:#4f4e4d; color:#4f4e4d;} 
a.tag.active {background: #f5f5f5; color:#4f4e4d; border-color:#4f4e4d}

@media (min-width: 375px){
  .nav-logo{height:40px;}
}

@media (min-width: 640px){
  .nav-logo{height:50px;}
}

@media (min-width: 768px) {
  p.ingress  {font-size:2.25rem;}
  .row.band {padding:4rem 0;}
  .tag-references .post-content{
    flex: 0 0 50%;
    max-width:50%;
    margin:auto;
  }
}

/*Fonts*/
@media (max-width:992px){
  p, li {font-size:1.5rem;}
}

.blog-post .feature-image {margin-bottom:5rem; }
#user-guide pre {border:1px solid #D3D4D4; background:#efefef; padding:2rem;  }
.blog-post pre {border:1px solid #D3D4D4; background:#efefef; padding:2rem;  }
.blog-post blockquote {text-align:center; font-size:3rem; line-height:1.25em; font-style:italic; margin-bottom:5rem; quotes: "\201C""\201D""\2018""\2019";}
.blog-post blockquote:before{content:"\201C"; margin-right:1rem; font-size:1.5em;}
.blog-post blockquote:after{content: "\201D"; margin-left:1rem; font-size:1.5em;}

.post figure.kg-card {text-align:center; margin-top:2.5rem; margin-bottom: 5rem;}
.post figure.kg-card img {max-width:100%;}
.post figure figcaption {color:#8C8C8B; margin-top:0.5rem; font-style: italic;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1050; /* Sit on top */
  padding-top: 10vh; /* Location of the box */
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */ 
}
.modal-backdrop.show{background-color:#222f3c;opacity: 0.75;}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0rem 1rem;
  border: 1px solid #888;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
@media (max-width:300px){
  .navbar .try-openlab {display:none;}
}
@media (max-width:768px){
.modal-content{max-height:75vh;max-width: 90vw;}
.modal-header{padding:1rem 0rem; display: block;}
}
.modal-title{margin-right: auto;text-align: start;}
.btn {font-size:smaller!important; padding: 0.75rem 1.5rem;}
.terms-btn {
  border:none;
  background:none;
  padding:0;
  margin-inline-end: 2rem;
}
.terms-btn:focus{outline:none;}
.terms-btn.active{border-bottom: 5px solid #07b2b2;}
.terms-text{display:none;}
.terms-text.active{display:block;}

.btn-openlab-ghost{color:#2b979b;background-color: transparent;}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #4f4e4d;
  float: right;
  font-size: 28px;
  font-weight: bold;
  text-shadow: none;
}

.btn.close:hover{color:white !important;}
.close:not(.btn:hover),
.close:focus:not(.btn) {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-dialog{
  margin:1.75rem auto;
  max-width: 800px;
  width: 100%;
  height: 75%;
}

.modal-header {
  color: #4f4e4d;
}

.modal-body {
  padding: 1rem 1rem;
  max-height:70%;
  overflow-y: auto;}

.modal-footer {
  padding: 1rem 1rem;
  color: #4f4e4d;
  justify-content: center;
}
.modal-content h2, .modal-content h3{margin:0;}

.row.band {margin-bottom: 2rem; border-bottom: 1px dotted #dfdfdf; }

ul {list-style-image: url('../gfx/bullet-check-24.svg');}
.cite-bullet{margin-top:0.5em; /*This is to compensate for the excess space in the svg*/}
ul.tags {list-style:none; text-align:center; padding-left: 1rem; padding-right: 1rem; }
ul.tags li {display:inline-block; margin: 0.5rem 0.25rem;}


#customer-list {height:auto; display:block; }
#customer-list ul {list-style:none; margin:0; padding:3rem 0; text-align:center; width:100%; }
#customer-list li {display:inline-block; height:100; max-width:35%; padding:0.5rem; margin:1rem 1.5rem; }
#customer-list li picture, #customer-list li img {width:100%; vertical-align:middle;}

#openlab-testimonials {background:#f5f5f5; padding:1rem 0; margin-top:2rem; }

.testimonial-wrapper{
  display: grid;
  grid-template-columns: 300px 2fr 4fr;
  grid-template-rows: 100px 200px 100px;
  column-gap: 5em;
  grid-row-gap: 0.25em;
}

.testimonial-wrapper > div {padding:1em;}
.testimonial-cite{
grid-column:2;
grid-row:1;
}
.carousel-btns-group{
grid-column:2;
grid-row:3;
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonial-image {
grid-column:1;
grid-row:1/4;
flex-direction: column;
justify-content: center;
margin-bottom:0rem;
text-align: center;
}
.testimonial-image img{height:auto; width: 100%; object-fit: cover;}
.testimonial-text{
grid-column:2/4;
grid-row:2;
}

@media (max-width: 1200px){
  .testimonial-wrapper{column-gap:3em;}
}

@media (max-width: 992px) {
  .testimonial-wrapper{
    grid-template-columns: 200px 2fr 4fr;
    grid-template-rows: 100px auto 0px;
  }
  .carousel-btns-group{
    grid-column:3;
    grid-row:1;
    text-align: center;
  }
  .testimonial-image {
    grid-column:1;
    grid-row:1;
    justify-content:start;
    margin-top:100px; /* To match row 2 without being affected by it's auto height*/ 
  }
}

@media (max-width: 768px){
  .testimonial-wrapper{
    grid-template-columns: 0fr 1fr 2fr;
    grid-template-rows: 100px auto 0px;
    column-gap:1em;
  }
  .testimonial-wrapper > div {padding:0.5em;}
  .carousel-btns-group{
    grid-column:3;
    grid-row:1;
    text-align: center;
  }
  .testimonial-image {display:None!important;}
}

.carousel .item{
display:none;
}

@media (min-height: 800px){
  .carousel-inner, .carousel-item {height:250px;}
}

/* MEDIA */
.post-content img {max-width: 100%; max-height: 100%; height:auto;}
.feature-image {position:relative; text-align:center; overflow:hidden; margin-bottom:1rem;}
.feature-image img {position:relative; max-height:50vh; max-width:100%; width:auto; }

.resp-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#logo ul {list-style:none; padding-inline-start: 0; justify-content: center;}
#logo li {padding-left: 4rem; padding-right: 4rem;}

/* HERO */
#hero {position:relative; min-height:50vh; height:60vh; background:url('../gfx/openlab-room.jpg') no-repeat; background-position: center; background-size: cover; padding:0; margin-top:-1em; margin-bottom:2rem;}
#hero .overlay-blue {position:absolute; width:100%; height:100%; background:rgba(0, 65, 97, 0.65); vertical-align:middle; }
#hero .content {position: absolute; width:100%; transform: translate(-50%, -50%); left: 50%;top: 50%;}

/* #hero .container {position:relative; height:100%;}*/

@media (max-height: 600px) {
  .overlay-blue h1{font-size:2.6rem}
}
@media (min-height: 600px) {
  p.ingress{margin-bottom:3.5rem;}
}
@media (min-width: 768px) {
  .feature-image{padding:1rem 3rem}
}
/* Carousel */
.carousel-inner {width:100%; height:auto;}
.carousel-buttons {padding:2rem;text-align: center;}
/* On hover, add a black background color with a little bit see-through */
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  top: 50%;
  width: auto;
  padding: 0.5rem 1.25rem;
  color: white !important;
  background-color:#07b2b2;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 10px 5px 5px 10px;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 5px 10px 10px 5px;
}

/* Devices that can hover */
@media (hover: hover) {
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
}

@media (min-width: 0) {
  footer nav#links li {display:block; }
  #logo li {display:block;}

  h1 {font-size:3.2rem; }
  h2 { font-size:2.6rem; }
  h3 { font-size:2.0rem; }
  h4 {font-size:1.6rem; }
}

@media (min-width: 768px) {
  #customer-list li {max-width:18%; padding:2rem; margin:2rem 3rem;}
  footer nav#links li {display:inline-block; }
  #logo li {display: inline-block;}
  #openlab-testimonials {padding:8rem 0;}
  .carousel-inner, .carousel-item {height:325px;}
  .carousel-buttons {margin-top: -30px; padding: 0; margin-left:33.3333333333%; text-align: left;}
  h1 {font-size:5.2rem; }
  h2 { font-size:3.6rem; }
  h3 { font-size:2.4rem;  }
  h4 {font-size:1.6rem; }
  #breadcrumb ul {margin:1.5rem 0 1.5rem 0;}
}

@media (max-width:768px){
  #logo li {margin-top: 1rem;}
  footer nav#links {margin: 0; }
}

@media (max-height: 0) {
  .row .card {
    flex: 0 0 calc(100% - 3px);
  }
}
@media (max-height: 576px) {
  .row .card {
      flex: 0 0 calc(50% - 3px);
  }
}
@media (max-height: 768px) {
  .row .card {
    flex: 0 0 calc(33.3333333333% - 3px);
  }
 
}
@media (max-height: 992px) {
  .row .card {
    flex: 0 0 calc(25% - 3px);
  }
}
@media (max-height: 1200px) {
  .row .card {
    flex: 0 0 calc(20% - 3px);
  }
}
.kg-gallery-image{cursor: pointer;}
.lg-inner{transition: none !important;}

/*.post iframe{max-width: 100%;}*/
/* Mandatory stuff so ghost doesn't complain. 
just need to be defined so empty on purpose*/
/*.kg-gallery-container img,
.kg-gallery-row img,
.kg-gallery-image img,
.kg-width-full img,
.kg-width-wide img{*/
    /* required by gcsan to properly validate the theme */
/*}*/