/*! Please do not edit directly from this file
 * This CSS is compiled from SASS: /devdesign/featured/nav/_sources/nav.scss
 */
/*-------------------
      Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text  */
/*-------------------
     Transitions
--------------------*/
/* HERO BANNER 
========================================================================== */
@media (max-width: 1199.98px) {
  .f-hero-image[data-bg-size="contain"] {
    background-size: cover !important; } }

@media (max-width: 991.98px) {
  .panopto-logo {
    max-width: 400px;
    margin: auto; } }

.prod-wrap {
  background: transparent url(../png/prod-0vc4c.png) no-repeat;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 99; }
  @media (max-width: 767.98px) {
    .prod-wrap {
      background-position: 55% 50%;
      background-size: 300px; } }
  @media (min-width: 768px) {
    .prod-wrap {
      background-position: calc(50% + 200px) 50%;
      background-size: 500px; } }
  @media (min-width: 992px) {
    .prod-wrap {
      background-position: calc(50% + 225px) 50%;
      background-size: 550px; } }
  @media (min-width: 1200px) {
    .prod-wrap {
      background-position: calc(50% + 250px) 50%;
      background-size: 660px; } }

/* OVERVIEW
========================================================================== */
@media (max-width: 767.98px) {
  .process-flow.first:after, .process-flow.middle:after {
    content: url(../svg/next_arrowhcnb.svg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1rem; } }

.process-flow .step {
  position: relative; }
  @media (min-width: 768px) {
    .process-flow .step.first:after, .process-flow .step.last:before {
      content: url(../svg/next_arrowhcnb.svg);
      top: 50%;
      width: 32px;
      height: 32px;
      position: absolute;
      margin-top: -1rem; }
    .process-flow .step.first:after {
      right: -1rem; }
    .process-flow .step.last:before {
      left: -1rem; } }

/* USES
========================================================================== */
.panopto-figure .figure-img {
  width: 10rem; }

.panopto-figure .figure-caption {
  font-size: 1.125rem; }

/*-----------------------------------
    DETAILS
------------------------------------*/
.big-pic {
  min-height: 26rem; }

/*-----------------------------------
    ECOSYTEM
------------------------------------*/
.solution-row {
  position: relative;
  z-index: 99; }
  .solution-row .solution {
    background: #def1fc;
    border-radius: .25em; }
    @media (min-width: 992px) {
      .solution-row .solution.soltion-one:after {
        position: absolute;
        content: url(../svg/arrow-curved-righty960.svg);
        top: 100%;
        left: 45%;
        width: 2rem; } }
    @media (min-width: 992px) {
      .solution-row .solution.soltion-two:after {
        position: absolute;
        content: url(../svg/arrow-curved-leftu995.svg);
        top: 100%;
        right: 45%;
        width: 2rem; } }
    .solution-row .solution img {
      max-height: 10rem; }
  @media (max-width: 991.98px) {
    .solution-row:after {
      width: 32px;
      height: 32px;
      position: absolute;
      content: url(../svg/next_arrowhcnb.svg);
      right: 50%;
      top: 100%;
      margin-right: -1rem;
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); } }

.floorplan-canvas .floorplan__dots {
  position: absolute;
  border-radius: 500rem; }
  .floorplan-canvas .floorplan__dots em {
    position: relative;
    /* z-index: 1070; */
    font-style: normal;
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 500rem;
    color: #fff;
    background: #1799DD;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-transition: background-color 0.125s ease;
    -o-transition: background-color 0.125s ease;
    transition: background-color 0.125s ease; }
    .floorplan-canvas .floorplan__dots em:focus {
      outline: none; }
    .floorplan-canvas .floorplan__dots em::after {
      content: '';
      position: absolute;
      /* z-index: 1070; */
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 500rem;
      background-color: transparent;
      -webkit-animation: floorplan-dots 2s infinite;
      animation: floorplan-dots 2s infinite; }

.floorplan-canvas .floorplan__label {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 0.88889rem;
  line-height: 1.5;
  font-weight: 400;
  text-align: center; }

.panopto-cloud {
  position: absolute;
  bottom: -25px;
  right: 12%;
  width: 13rem; }
  .panopto-cloud:before {
    position: absolute;
    content: url(../svg/arrow-curved-righty960.svg);
    right: 117%;
    top: 6%;
    width: 2rem;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  @media (max-width: 1199.98px) {
    .panopto-cloud {
      right: 3%;
      width: 12rem; } }
  @media (max-width: 991.98px) {
    .panopto-cloud {
      position: static;
      bottom: 0rem;
      right: initial;
      margin: auto;
      text-align: center; }
      .panopto-cloud:before {
        content: url(../svg/next_arrowhcnb.svg);
        right: 50%;
        top: 0;
        width: 32px;
        height: 32px;
        position: absolute;
        margin-right: -1rem;
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); } }

/* .panopto-cloud {
  width: 14rem;
 }
 .floorplan-canvas:after {
      width: 32px;
      height: 32px;
      position: absolute;
      content: url(../svg/next_arrowhcnb.svg);
      right: 50%;
      top: 90%;
      margin-right: -1rem;
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); } */