/* Read More Button */
.link-collapse-more:hover > *,
.link-collapse-less:hover > * {
  cursor: pointer;
  text-decoration: underline;
}

.link-collapse-more:after {
  content: "\f107";
}

.link-collapse-less:after {
  content: "\f106";
}
/* Tabbed Title */
.nav-link__title {
  font-weight: normal;
  margin-bottom: 0;
  line-height: 1.5;
}



/* Buit-in Automation
=================================================*/

/* screen css start */
.cec-canvas {
  position: relative;
  display: block;
  width: 100%;
  overflow:  hidden;
  background-color: #fff;
}

.large-tv {
  width: 27%;
  max-width: 619px; /* optional */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hidden {
	display: none;
}

.large-tv > .screen, .graphic {
  position: relative; /* so its over the wire */
}

.screen .overlay-img {
  position: absolute;
  left: 4.2%; /* 26px / 619px * 100 */
  right: 4.2%; /* 26px / 619px * 100 */
  top: 6.12%; /* 24px / 392px * 100 */
}

.large-tv > .wire  {
  margin-top: -4.5%;
  margin-bottom: -4.5%;
}

.large-tv > .product {
  position: relative; /* so its over the wire */
}

.bottom-elements {
  position: relative;
  margin-top: 10em;
}

.sm-laptop {
  width: 24%;
  max-width: 836px;
  position: absolute;
  top: 40%;
}

.sm-laptop.left { 
  left: 5%;
  transform: translateX(-5%);
}

.sm-laptop.right {
  right: 3%;
  transform: translateX(-3%);
}

.sm-laptop .overlay-img {
  position: absolute;
  left:  21%; /* 176px / 836px * 100 */
  right: 18.8%; /* 157px / 836px * 100 */
  top: 14.3%; /* 80px / 558px * 100 */
}

.cable-graphic {
  width: 11%;
  max-width: 145px;
  position: absolute;
  margin-top: 6%;
  z-index: 100
}

.cable-graphic.left {
  position: absolute;
  left: 29%;
  transform: translateX(-29%);
}

.cable-graphic.right {
  position: absolute;
  right: 23%;
  transform: translateX(-23%);
}

button.pulse-btn.left {
  width: 25px;
  height: 25px;
  background-color: #2185D0;
  border: none;
  cursor: pointer;
  position: absolute;
  left: 51%;
  top: 0px;
}

button.pulse-btn.right {
  width: 25px;
  height: 25px;
  background-color: #2185D0;
  border: none;
  cursor: pointer;
  position: absolute;
  left: 27%;
  top: 0px;
}

button.pulse-btn .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50% !important;
  border: #2185D0 solid 2px;
  opacity: 0.2;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1,1);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.5, 1.5);
    opacity: 0.5;
  }
}

p.support-text {
  margin-top: 21em;
}
/* End of Buit-in Automation
=================================================*/



/* 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: 550px;
  height: 365px;
}

.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: 47.9em) {
    .swapimg-container {
    width: 400px;
    height: 265px;
  }
  .swapimg-shadow {
    width: 400px;
    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: 400px;
    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
=================================================*/


/* Embed/De-embed
================================================================ */
/* screen css start */
.embedding-canvas {
  position: relative;
  display: block;
  width: 100%;
  overflow:  hidden;
  background-color: #fff;
}

.embedding-canvas img.embedding-diagram {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.embedding-canvas figcaption:first-of-type {
  position: absolute;
  left: 12%;
  top: 26%;
  transform: translateY(-26%);
  color: #fff;
}

.embedding-canvas figcaption:nth-of-type(2) {
  position: absolute;
  left: 12%;
  top: 46%;
  transform: translateY(-46%);
}

.embedding-canvas figcaption:nth-of-type(3) {
  position: absolute;
  left: 12%;
  top: 100%;
  transform: translateY(-100%);
}

.embedding-canvas figcaption:nth-of-type(4) {
  position: absolute;
  left: 52%;
  top: 100%;
  transform: translateY(-100%);
}
/* End of Enbed/De-embed
=================================================*/


/* 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
=================================================*/


/* ProDSP Audio
=================================================*/
#pro-dsp .container img {
  width: 100%;
}

figure.dsp-diagram {
  position: relative;
}

.dsp-diagram figcaption {
  position: absolute;
  margin-top: -63%;
  margin-left: 13%;
}
/* End of ProDSP Audio
=================================================*/


/* 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: 10%;
  margin-left: 42%;
}

.ipcp-pro_rear-panel_diagram figcaption:nth-of-type(2) {
  margin-top: 60%;
  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%;
  }
}
/* End of IPCP Pro Control Processor
=================================================*/