/* Seamless Switching
================================================================ */
.swapimg-container {
  position:relative;
  display: table;
  margin: 0 auto;
  background-color: #000;
  -webkit-box-shadow: 0px 0px 0px 7px rgba(0, 0, 0, 1);
  -moz-box-shadow:    0px 0px 0px 7px rgba(0, 0, 0, 1);
  box-shadow:         0px 0px 0px 7px rgba(0, 0, 0, 1);
  width: 30em;
  height: 20em;
}

.swapimg-container img {
  position:absolute;  
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.swapimg-2 {
  opacity:0;
}

.fade-in,
.dissolve-in,
.cut-in,
.cutBl-in {
  opacity:1;
}

.fade-out,
.dissolve-out,
.cut-out,
.cutBl-out {
  opacity:0;
}

/* Cut Through Black */
.cutBl-in,
.cutBl-out {
  -webkit-transition: .2s;
  transition: .2s;
 }

.swapimg-container img.cutBl-in {
  -webkit-transition-delay: .3s; /* Safari */
  transition-delay: .2s;
}

/* Fade Through Black */
.fade-in,
.fade-out {
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.swapimg-container img.fade-in {
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}

/* Seamless Fade */
.dissolve-in,
.dissolve-out {
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@media (max-width: 575.98px) {
    .swapimg-container {
    width: 100%;
    height: 20em;
  }
  .swapimg-shadow {
    width: 100%;
    height: auto;
  }
}

#fade-cut ul {
  text-align: left;
  list-style: none;
  display: inline-block;
}
/* End of Seamless Switching
=================================================*/

/* Image storage and keying
================================================================ */
.draggable-background {
  position:relative;
  display: table;
  width: 855px;
  height: 484px;
  background-image:url(../jpg/image-storage-keying107k8.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.draggable-container  {
  position: absolute;
  top:35px;
  right:45px;
  width: 620px;
  height: 417px;
}

.draggable-item {
  position: absolute;
}

.draggable-item:hover {
  cursor: move;
}

.draggable-item-caption {
  position: absolute;
  bottom: -100px;
  font-size: 1rem;
}

@media (max-width: 47.9em) {
  .draggable-background {
    width: 100%;
    height: 258px;
  }
  .draggable-container {
    top: 30px;
    right: 5px;
    width: 305px;
    height: 185px;
  }
  .draggable-item img {
    width: 50%;
    height: auto;
  }
}
/* End of Image storage and keying
=================================================*/

/* LAN Port
================================================================ */
#lan-port figure {
  display: relative;
}

#lan-port figure figcaption {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

#lan-port figure figcaption:nth-of-type(2) {
  top: 94%;
}

img.centralized-monitoring {
  width: 35%;
}

.boardroom img, .meetingroom img, .auditorium img {
  width: 100%;
}

.arrow-left {
  left: 5%;
  margin-top: -10%;
}

.arrow-right {
  right: 5%;
  margin-top: -10%;
}
/* End of LAN Port
=================================================*/

/* IPCP Pro Control Processor
=================================================*/
#iplink-pro .container img {
  width: 100%;
}

figure.ipcp-pro_rear-panel_diagram,
figure.global-configulator-pro {
  position: relative;
}

.ipcp-pro_rear-panel_diagram figcaption {
  position: absolute;
	font-size: 73%;
	line-height: 1
}

.ipcp-pro_rear-panel_diagram figcaption:first-of-type {
  margin-top: 7%;
  margin-left: 44.5%;
}

.ipcp-pro_rear-panel_diagram figcaption:nth-of-type(2) {
  margin-top: 52%;
  margin-left: 54%;
}

.global-configulator-pro figcaption {
  position: absolute;
  margin-top: 1%;
  margin-left: 33%;
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  .ipcp-pro_rear-panel_diagram figcaption:first-of-type {
    margin-top: 10%;
    margin-left: 41%;
  }

  .ipcp-pro_rear-panel_diagram figcaption:nth-of-type(2) {
    margin-top: 60%;
    margin-left: 52%;