.info {
  z-index: 100;
  margin-left: 15px;
  margin-top: 15px;
  position: absolute;
}

.d3-tip {
  font-weight: 300 !important;
  font-size: 1em !important;
  line-height: 1.5em !important;
  padding: 14px;
  background: #252A3F;
  color: #fff;
  border-radius: 6px;
  max-width: 250px !important;
  /*width: 350px !important;*/
  pointer-events: none;
  -webkit-transition: opacity 300ms ease-in-out;
}

.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  font-size: 12px !important;
  line-height: 1.5em;
  letter-spacing: .05rem;
  font-weight: 300;
  pointer-events: none;
}

.d3-tip-node {
  opacity: 0;
  font-weight: 300 !important;
  padding: 14px;
  background: rgba(23, 22, 22, 1);
  color: #fff;
  border-radius: 6px;
  /*max-width: 250px !important;*/
  font-size: 12px !important;
  line-height: 1.5em;
  letter-spacing: .05rem;
  pointer-events: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !important;
  -webkit-transition: opacity 300ms ease-in-out;
}

.d3-tip-node.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  font-size: 16px !important;
  line-height: 1.5em;
  letter-spacing: .05rem;
  font-weight: 300 !important;
  pointer-events: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !important;
}

h4{
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 1.5em;
    letter-spacing: .05rem;
    font-weight: bold !important;
}



h6{
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 1.5em;
    letter-spacing: .05rem;
}

img.img-node{
  height: 200px !important;
  width: 200px !important;
  padding-right: 10px;
  margin: 0 auto;
  display: inline-block !important;
  background-color: #171616;
  top: 9px;
  object-fit: cover;
}

.node-info-box{
    display: inline !important;
    width: 100% !important;
    height: 100% !important;
    float: left !important;
}

.box-img{
    display : inline !important;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    vertical-align: top !important;
}

.box-info{
    display : inline-block !important;
    max-width: 250px !important;
    top: 0 !important;
    vertical-align: top !important;
}

/*Handling different screen sizes*/

@media screen and (max-width: 768px) {

    h6, h4{
        font-size: 1.2em !important;
    }

    img.img-node{
      max-width: 200px !important;
      min-width: 200px !important;

    }

    .node-info-box{
        display: block !important;
    }

    .box-img{
        display : block !important;
    }

    .box-info{
        display : block !important;
        max-width: 200px !important;

    }

}