/* LINES */
.landing-panel .top-line,
.landing-panel .left-line,
.landing-panel .right-line,
.landing-panel .bottom-line,
.landing-panel .bottom-open-line {
	border: none;
	margin: 4rem;
}

.landing-panel .top-line.go-animate {
	border-top: 1.5px solid rgba(255,255,255,.5);
	width: 30%;

	-webkit-animation-name: top-line-animation; /* Safari 4.0 - 8.0 */
  	-webkit-animation-duration: 1.9s; /* Safari 4.0 - 8.0 */
  	animation-name: top-line-animation;
  	animation-duration: 1.9s;
}
.landing-panel .left-line.go-animate {
	border-left: 1.5px solid rgba(255,255,255,.5);
	height: calc(100vh - 8rem);

	-webkit-animation-name: left-line-animation; /* Safari 4.0 - 8.0 */
  	-webkit-animation-duration: 1.9s; /* Safari 4.0 - 8.0 */
  	animation-name: left-line-animation;
  	animation-duration: 1.9s;
}
.landing-panel .right-line.go-animate {
	border-left: 1.5px solid rgba(255,255,255,.5);
	height: calc(50vh);

	-webkit-animation-name: right-line-animation; /* Safari 4.0 - 8.0 */
  	-webkit-animation-duration: 1.9s; /* Safari 4.0 - 8.0 */
  	animation-name: right-line-animation;
  	animation-duration: 1.9s;
}
.landing-panel .bottom-line.go-animate {
	border-bottom: 1.5px solid rgba(255,255,255,.5);
	width: calc(100vw - 8rem);

	-webkit-animation-name: bottom-line-animation; /* Safari 4.0 - 8.0 */
  	-webkit-animation-duration: 1.9s; /* Safari 4.0 - 8.0 */
  	animation-name: bottom-line-animation;
  	animation-duration: 1.9s;
}
/* CIRCLES */
.landing-panel .top-circle,
.landing-panel .right-circle {
	border: 1.5px solid rgba(255,255,255,.5);
	height: 11px;
	width: 11px;
	border-radius: 50%;
	background: transparent;
}
.landing-panel .top-circle {
	margin-left: calc(30% + 4rem - 1px);
	margin-top: calc(4rem - 4px);
}
.landing-panel .right-circle {
	margin-bottom: calc(50vh + 4rem - 1px);
	margin-right: calc(4rem - 4px);
}

/* LINE ANIMATION */
@-webkit-keyframes top-line-animation {
  	from {width: .25rem;}
  	to {width: 30%;}
}
@keyframes top-line-animation {
  	from {width: .25rem;}
  	to {width: 30%;}
}

@-webkit-keyframes left-line-animation {
  	from {height: .25rem;}
  	to {height: calc(100vh - 8rem);}
}
@keyframes left-line-animation {
  	from {height: .25rem;}
  	to {height: calc(100vh - 8rem);}
}

@-webkit-keyframes right-line-animation {
  	from {height: .25rem;}
  	to {height: 50vh;}
}
@keyframes right-line-animation {
  	from {height: .25rem;}
  	to {height: 50vh;}
}

@-webkit-keyframes bottom-line-animation {
  	from {clip-path: inset(0 0 0 100%);}
  	to {clip-path: inset(0 0 0 0);}
}
@keyframes bottom-line-animation {
  	from {clip-path: inset(0 0 0 100%);}
  	to {clip-path: inset(0 0 0 0);}
}

/* OTHER ANIMATION */
.loading-panel {
  width: 100%;
  height: 100%;
  z-index: 3;
  transition: opacity 2s linear, height 2s step-start;
}
.loading-panel.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition-timing-function: linear, step-end;
}

.landing-panel .company-logo.go-animate {
  width: 26rem;
  height: 26rem;
  top: 8vh;
  left: calc(50% - 13rem);
  -webkit-animation-name: logo-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: logo-animation;
    animation-duration: 2s;
}
@-webkit-keyframes logo-animation {
    from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
    to {width: 26rem;height:26rem;left: calc(50% - 13rem);top: 8vh;}
}
@keyframes logo-animation {
    from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
    to {width: 26rem;height:26rem;left: calc(50% - 13rem);top: 8vh;}
}

/* RESPONSIVENESS */

/* ================================================================================================== */

@media only screen  and (min-width: 1001px) and (max-width: 1200px) and (max-height: 599px) {
  .landing-panel .left-line.go-animate {
      height: calc(650px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(650px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(650px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 1001px) and (max-width: 1200px) and (min-height: 620px) {
  .landing-panel .left-line.go-animate {
      height: calc(650px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(650px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(650px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 1201px) and (max-width: 1400px) and (max-height: 680px) {
  @-webkit-keyframes logo-animation {
      from  {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 26rem;height:26rem;left: calc(50% - 13rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 26rem;height:26rem;left: calc(50% - 13rem);top: 8vh;}
  }
}
@media only screen  and (min-width: 1201px) and (max-width: 1400px) and (min-height: 681px) {
  .landing-panel .company-logo.go-animate {
    width: 32rem;
    height: 32rem;
    left: calc(50% - 16rem);
  }
  @-webkit-keyframes logo-animation {
      from  {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 32rem;height:32rem;left: calc(50% - 16rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 32rem;height:32rem;left: calc(50% - 16rem);top: 8vh;}
  }
  /** {
      font-size: 15px;
  }*/
  button.circle {
      width: 90px;
      height: 90px;
  }
  .f-s14 {
      font-size: 20px !important;
  }
  .why-nexbridge .w-100 p {
    padding: 0 10rem;
  }
  .products-preview p.fadeIn,
  .clients-preview .w-100 p,
  .article-preview .w-100 p {
    padding: 0;
  }
  .f-s16 {
      font-size: 22px !important;
  }
  .f-s22 {
      font-size: 27px !important;
  }
  .f-s32 {
      font-size: 36px !important;
  }
  .f-s40 {
      font-size: 52px !important;
  }
  .f-s60 {
      font-size: 80px !important;
  }
  .details-panel .f-s40 {
      font-size: 50px !important;
  }
  .services-preview p.wow.fadeIn {
    padding: 0;
  }
  .services-preview {
    padding: 5rem 10rem;
  }
  .landing-panel .details-panel h4 div {
      width: 2rem;
      top: 16px;
  }
  .landing-panel .nav-menu a {
      font-size: 15px;
  }
  h5 a, h5 {
      font-size: 1.75rem;
  }
  .why-nexbridge .half-panel-1 {
      height: 325px;
  }
  .footer h5 {
      font-size: 16px !important;
  }
  .footer a,
  .footer p.f-s10,
  .footer p {
      font-size: 12px !important;
  }
  .footer .company-logo img {
      width: 6rem;
      height: 6rem;
  }
  .footer .company-logo .f-s16 {
      font-size: 26px !important;
  }
}
@media only screen  and (min-width: 1201px) and (max-width: 1400px) and (max-height: 580px) {
  .landing-panel .left-line.go-animate {
      height: calc(768px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(768px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(768px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 1201px) and (max-width: 1400px) and (min-height: 801px) {
  .landing-panel .left-line.go-animate {
      height: calc(768px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(768px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(768px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 1401px) and (max-width: 1600px) {
  .landing-panel .company-logo.go-animate {
        width: 40rem;
        height: 40rem;
        top: 8vh;
        left: calc(50% - 20rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 40rem;height:40rem;left: calc(50% - 20rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 40rem;height:40rem;left: calc(50% - 20rem);top: 8vh;}
    }
}
@media only screen  and (min-width: 1401px) and (max-width: 1600px) and (max-height: 760px) {
  .landing-panel .company-logo.go-animate {
        width: 40rem;
        height: 40rem;
        top: 8vh;
        left: calc(50% - 20rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 40rem;height:40rem;left: calc(50% - 20rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 40rem;height:40rem;left: calc(50% - 20rem);top: 8vh;}
    }
  .landing-panel .left-line.go-animate {
      height: calc(900px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 1401px) and (max-width: 1600px) and (min-height: 901px) {
  .landing-panel .company-logo.go-animate {
        width: 40rem;
        height: 40rem;
        top: 8vh;
        left: calc(50% - 20rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 40rem;height:40rem;left: calc(50% - 20rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 40rem;height:40rem;left: calc(50% - 20rem);top: 8vh;}
    }
  .landing-panel .left-line.go-animate {
      height: calc(900px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 1601px) and (max-width: 1800px) {
  .landing-panel .company-logo.go-animate {
      width: 50rem !important;
      height: 50rem !important;
      top: 8vh !important;
      left: calc(50% - 25rem) !important;
  }
  @-webkit-keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 50rem;height:50rem;left: calc(50% - 25rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 50rem;height:50rem;left: calc(50% - 25rem);top: 8vh;}
  }
}
@media only screen  and (min-width: 1601px) and (max-width: 1800px) and (max-height: 900px) {
  .landing-panel .left-line.go-animate {
      height: calc(900px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 1601px) and (max-width: 1800px) and (min-height: 1101px) {
  .landing-panel .left-line.go-animate {
      height: calc(900px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(900px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 1801px) and (max-width: 2200px) {
  @-webkit-keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 50rem;height:50rem;left: calc(50% - 25rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 50rem;height:50rem;left: calc(50% - 25rem);top: 8vh;}
  }
}
@media only screen  and (min-width: 1801px) and (max-width: 2200px) and (max-height: 1000px) {
  .landing-panel .left-line.go-animate {
      height: calc(1080px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1080px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1080px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 1801px) and (max-width: 2200px) and (min-height: 1140px) {
  .landing-panel .left-line.go-animate {
      height: calc(1080px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1080px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1080px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 1801px) and (max-width: 2200px) and (height: 1200px) {
  .landing-panel .left-line.go-animate {
      height: calc(1080px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1080px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1080px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 2201px) and (max-width: 3000px) {
  @-webkit-keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 70rem;height:70rem;left: calc(50% - 35rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
      to {width: 70rem;height:70rem;left: calc(50% - 35rem);top: 8vh;}
  }
}
@media only screen  and (min-width: 2201px) and (max-width: 3000px) and (max-height: 1400px) {
  .landing-panel .left-line.go-animate {
      height: calc(1440px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1440px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1440px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}
@media only screen  and (min-width: 2201px) and (max-width: 3000px) and (min-height: 1701px) {
  .landing-panel .left-line.go-animate {
      height: calc(1440px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(450px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(450px + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1440px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1440px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 450px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 3001px) and (max-width: 4000px) {
  .landing-panel .top-line.go-animate {
    border-top: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .left-line.go-animate {
    border-left: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .right-line.go-animate {
    border-left: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .bottom-line.go-animate {
    border-bottom: 7px solid rgba(255,255,255,.5);
  }

  .landing-panel .top-circle,
  .landing-panel .right-circle {
    border: 10px solid rgba(255,255,255,.5);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
  }
}
@media only screen  and (min-width: 3001px) and (max-width: 4000px) and (max-height: 1900px) {
  .landing-panel .left-line.go-animate {
      height: calc(2160px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(800px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(800px + 4rem - 1px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2160px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2160px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
}
@media only screen  and (min-width: 3001px) and (max-width: 4000px) and (min-height: 2201px) {
  .landing-panel .left-line.go-animate {
      height: calc(2160px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(800px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(800px + 4rem - 1px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2160px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2160px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
}
@media only screen and (min-width: 3001px) {
  .landing-panel .top-line, .landing-panel .left-line, .landing-panel .right-line, .landing-panel .bottom-line, .landing-panel .bottom-open-line {
      margin: 14rem;
  }
  .landing-panel .top-line.go-animate {
    width: 30%;
  }
  .landing-panel .left-line.go-animate {
    height: calc(100vh - 28rem);
  }
  .landing-panel .right-line.go-animate {
    height: calc(50vh);
  }
  .landing-panel .bottom-line.go-animate {
    width: calc(100vw - 28rem);
  }
  /* CIRCLES */
  .landing-panel .top-circle {
    margin-left: calc(30% + 14rem - 1px);
    margin-top: calc(14rem - 20px);
  }
  .landing-panel .right-circle {
    margin-bottom: calc(50vh + 14rem - 1px);
    margin-right: calc(14rem - 20px);
  }
  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(100vh - 28rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(100vh - 28rem);}
  }

  .landing-panel .details-panel {
      padding: 14rem;
      padding-left: 14.25rem;
  }
  .landing-panel .details-panel .panel-1 {
      height: calc(100vh - 30rem);
  }
  .landing-panel .company-logo {
      width: 30rem !important;
      height: 30rem !important;
      top: calc(50vh - 25rem);
      left: calc(50vw - 25rem);
  }
  @-webkit-keyframes logo-animation {
      from {width: 30rem;height:30rem;left: calc(50vw - 25rem);top:calc(50vh - 25rem);}
      to {width: 90rem;height:90rem;left: calc(50% - 45rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 30rem;height:30rem;left: calc(50vw - 25rem);top:calc(50vh - 25rem);}
      to {width: 90rem;height:90rem;left: calc(50% - 45rem);top: 8vh;}
  }

  .landing-panel .company-logo.go-animate {
      width: 90rem !important;
      height: 90rem !important;
      top: 8vh !important;
      left: calc(50% - 45rem) !important;
  }
  .mx-4 {
      margin-right: 6rem!important;
      margin-left: 6rem!important;
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 4001px) and (max-width: 5000px) {
  .landing-panel .top-line.go-animate {
    border-top: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .left-line.go-animate {
    border-left: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .right-line.go-animate {
    border-left: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .bottom-line.go-animate {
    border-bottom: 7px solid rgba(255,255,255,.5);
  }

  .landing-panel .top-circle,
  .landing-panel .right-circle {
    border: 10px solid rgba(255,255,255,.5);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
  }
}
@media only screen  and (min-width: 4001px) and (max-width: 5000px) and (max-height: 2200px) {
  .landing-panel .left-line.go-animate {
      height: calc(2304px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(800px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(800px + 4rem - 1px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2304px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2304px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
}
@media only screen  and (min-width: 4001px) and (max-width: 5000px) and (min-height: 2401px) {
  .landing-panel .left-line.go-animate {
      height: calc(2304px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(800px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(800px + 4rem - 1px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2304px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2304px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 800px;}
  }
}

/* ================================================================================================== */

@media only screen  and (min-width: 5001px) and (max-width: 6000px) {
  .landing-panel .top-line.go-animate {
    border-top: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .left-line.go-animate {
    border-left: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .right-line.go-animate {
    border-left: 7px solid rgba(255,255,255,.5);
  }
  .landing-panel .bottom-line.go-animate {
    border-bottom: 7px solid rgba(255,255,255,.5);
  }

  .landing-panel .top-circle,
  .landing-panel .right-circle {
    border: 10px solid rgba(255,255,255,.5);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: transparent;
  }
}
@media only screen  and (min-width: 5001px) and (max-width: 6000px) and (max-height: 2500px) {
  .landing-panel .left-line.go-animate {
      height: calc(2880px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(950px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(950px + 4rem - 1px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2880px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2880px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 950px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 950px;}
  }
}
@media only screen  and (min-width: 5001px) and (max-width: 6000px) and (min-height: 3101px) {
  .landing-panel .left-line.go-animate {
      height: calc(2880px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(950px);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(950px + 4rem - 1px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2880px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(2880px - 8rem);}
  }

  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 950px;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 950px;}
  }
}
@media only screen and (min-width: 5001px) {
  .landing-panel .top-line, .landing-panel .left-line, .landing-panel .right-line, .landing-panel .bottom-line, .landing-panel .bottom-open-line {
      margin: 14rem;
  }
  .landing-panel .top-line.go-animate {
    width: 30%;
  }
  .landing-panel .left-line.go-animate {
    height: calc(100vh - 28rem);
  }
  .landing-panel .right-line.go-animate {
    height: calc(50vh);
  }
  .landing-panel .bottom-line.go-animate {
    width: calc(100vw - 28rem);
  }
  /* CIRCLES */
  .landing-panel .top-circle {
    margin-left: calc(30% + 14rem - 1px);
    margin-top: calc(14rem - 20px);
  }
  .landing-panel .right-circle {
    margin-bottom: calc(50vh + 14rem - 1px);
    margin-right: calc(14rem - 20px);
  }
  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(100vh - 28rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(100vh - 28rem);}
  }

  .landing-panel .details-panel {
      padding: 14rem;
      padding-left: 14.25rem;
  }
  .landing-panel .details-panel .panel-1 {
      height: calc(100vh - 30rem);
  }
  .landing-panel .company-logo {
      width: 50rem !important;
      height: 50rem !important;
      top: calc(50vh - 40rem);
      left: calc(50vw - 40rem);
  }
  @-webkit-keyframes logo-animation {
      from {width: 50rem;height:50rem;left: calc(50vw - 40rem);top:calc(50vh - 40rem);}
      to {width: 130rem;height:130rem;left: calc(50% - 65rem);top: 8vh;}
  }
  @keyframes logo-animation {
      from {width: 50rem;height:50rem;left: calc(50vw - 40rem);top:calc(50vh - 40rem);}
      to {width: 130rem;height:130rem;left: calc(50% - 65rem);top: 8vh;}
  }

  .landing-panel .company-logo.go-animate {
      width: 130rem !important;
      height: 130rem !important;
      top: 8vh !important;
      left: calc(50% - 65rem) !important;
  }
  .mx-4 {
      margin-right: 6rem!important;
      margin-left: 6rem!important;
  }
}

/* ================================================================================================== */

@media only screen and (width: 1280px) and (height: 800px) {
    .landing-panel .company-logo.go-animate {
        width: 34rem;
        height: 34rem;
        top: 8vh;
        left: calc(50% - 17rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 34rem;height:34rem;left: calc(50% - 17rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 15rem;height:15rem;left: calc(50vw - 11.5rem);top:calc(50vh - 11.5rem);}
        to {width: 34rem;height:34rem;left: calc(50% - 17rem);top: 8vh;}
    }
}
@media only screen and (width: 1024px) and (height: 1366px) {
    .landing-panel .company-logo.go-animate {
        width: 36rem;
        height: 36rem;
        top: 8vh;
        left: calc(50% - 18rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 20rem;height:20rem;left: calc(50vw - 14.75rem);top:calc(50vh - 14.75rem);}
        to {width: 36rem;height:36rem;left: calc(50% - 18rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 20rem;height:20rem;left: calc(50vw - 14.75rem);top:calc(50vh - 14.75rem);}
        to {width: 36rem;height:36rem;left: calc(50% - 18rem);top: 8vh;}
    }
    .landing-panel .left-line.go-animate {
        height: calc(1366px - 8rem);
    }
    .landing-panel .right-line.go-animate {
        height: calc(800px);
    }
    .landing-panel .right-circle {
        margin-bottom: calc(800px + 4rem - 1px);
        margin-right: calc(4rem - 4px);
    }
} 

/* ================================================================================================== */ 

@media only screen and (max-width: 1000px) {
    .landing-panel .company-logo.go-animate {
        width: 30rem;
        height: 30rem;
        top: 8vh;
        left: calc(50% - 15rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 13rem;height:13rem;left: calc(50vw - 10.75rem);top:calc(50vh - 10.75rem);}
        to {width: 30rem;height:30rem;left: calc(50% - 15rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 13rem;height:13rem;left: calc(50vw - 10.75rem);top:calc(50vh - 10.75rem);}
        to {width: 30rem;height:30rem;left: calc(50% - 15rem);top: 8vh;}
    }
}
@media only screen and (max-width: 599px) {
    .landing-panel .top-line, 
    .landing-panel .left-line, 
    .landing-panel .right-line, 
    .landing-panel .bottom-line, 
    .landing-panel .bottom-open-line {
      margin: 3rem;
    }
    .landing-panel .top-circle {
        margin-left: calc(30% + 3rem - 1px);
        margin-top: calc(3rem - 4px);
    }
    .landing-panel .right-circle {
        margin-bottom: calc(50vh + 3rem - 1px);
        margin-right: calc(3rem - 4px);
    }
    .landing-panel .left-line.go-animate {
        height: calc(100vh - 6rem);
    }
    .landing-panel .bottom-line.go-animate {
          width: calc(100vw - 6rem);
    }

    .landing-panel .company-logo.go-animate {
        width: 22rem;
        height: 22rem;
        top: 8vh;
        left: calc(50% - 11rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 13rem;height:13rem;left: calc(50vw - 10.75rem);top:calc(50vh - 10.75rem);}
        to {width: 22rem;height:22rem;left: calc(50% - 11rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 13rem;height:13rem;left: calc(50vw - 10.75rem);top:calc(50vh - 10.75rem);}
        to {width: 22rem;height:22rem;left: calc(50% - 11rem);top: 8vh;}
    }
}
@media only screen and (max-width: 375px) {
    .landing-panel .top-line, 
    .landing-panel .left-line, 
    .landing-panel .right-line, 
    .landing-panel .bottom-line, 
    .landing-panel .bottom-open-line {
      margin: 2rem;
    }
    .landing-panel .top-circle {
        margin-left: calc(30% + 2rem - 1px);
        margin-top: calc(2rem - 4px);
    }
    .landing-panel .right-circle {
        margin-bottom: calc(50vh + 2rem - 1px);
        margin-right: calc(2rem - 4px);
    }
    .landing-panel .left-line.go-animate {
        height: calc(100vh - 4rem);
    }
    .landing-panel .bottom-line.go-animate {
          width: calc(100vw - 4rem);
    }

    .landing-panel .company-logo.go-animate {
        width: 18rem;
        height: 18rem;
        top: 8vh;
        left: calc(50% - 9rem);
    }
    @-webkit-keyframes logo-animation {
        from {width: 13rem;height:13rem;left: calc(50vw - 8.75rem);top:calc(50vh - 8.75rem);}
        to {width: 18rem;height:18rem;left: calc(50% - 9rem);top: 8vh;}
    }
    @keyframes logo-animation {
        from {width: 13rem;height:13rem;left: calc(50vw - 8.75rem);top:calc(50vh - 8.75rem);}
        to {width: 18rem;height:18rem;left: calc(50% - 9rem);top: 8vh;}
    }
}
@media only screen  and (min-width: 601px) and (max-width: 1000px) and (max-height: 1000px) {
  .landing-panel .left-line.go-animate {
      height: calc(1024px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(75vh);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(75vh + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1024px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1024px - 8rem);}
  }
  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
}
@media only screen  and (min-width: 601px) and (max-width: 1000px) and (min-height: 1100px) {
  .landing-panel .left-line.go-animate {
      height: calc(1024px - 8rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(75vh);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(75vh + 4rem - 1px);
      margin-right: calc(4rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1024px - 8rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(1024px - 8rem);}
  }
  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
}
@media only screen  and (min-width: 421px) and (max-width: 600px) and (max-height: 860px) {
  .landing-panel .left-line.go-animate {
      height: calc(960px - 6rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(75vh);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(75vh + 3rem - 1px);
      margin-right: calc(3rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(960px - 6rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(960px - 6rem);}
  }
  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
}
@media only screen  and (min-width: 421px) and (max-width: 600px) and (min-height: 1060px) {
  .landing-panel .left-line.go-animate {
      height: calc(960px - 6rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(75vh);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(75vh + 3rem - 1px);
      margin-right: calc(3rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(960px - 6rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(960px - 6rem);}
  }
  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
}
@media only screen  and (min-width: 320px) and (max-width: 420px) {
  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(100vh - 4rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(100vh - 4rem);}
  }
}
@media only screen  and (min-width: 320px) and (max-width: 420px) and (max-height: 500px) {
  .landing-panel .left-line.go-animate {
      height: calc(730px - 4rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(75vh);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(75vh + 3rem - 1px);
      margin-right: calc(3rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(730px - 4rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(730px - 4rem);}
  }
  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
}
@media only screen  and (min-width: 320px) and (max-width: 420px) and (min-height: 850px) {
  .landing-panel .left-line.go-animate {
      height: calc(730px - 4rem);
  }
  .landing-panel .right-line.go-animate {
      height: calc(75vh);
  }
  .landing-panel .right-circle {
      margin-bottom: calc(75vh + 3rem - 1px);
      margin-right: calc(3rem - 4px);
  }

  @-webkit-keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(730px - 4rem);}
  }
  @keyframes left-line-animation {
      from {height: .25rem;}
      to {height: calc(730px - 4rem);}
  }
  @-webkit-keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
  @keyframes right-line-animation {
      from {height: .25rem;}
      to {height: 75vh;}
  }
}