:root {
  --conta-bg-color: #333;
  --left-bg-color: rgba(255, 0, 0, 0.7);
  --left-button-hover-color: rgba(161, 11, 11, 0.3);
  --right-bg-color: rgba(255, 255, 255, 0.8);
  --right-button-hover-color: rgba(92, 92, 92, 0.3);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 500ms;
}

html, body {
  padding:0;
  margin:0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif!important;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  /*cursor: none;*/
}
.nav-link{
  color: #ff0101!important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link
{
  background-color:#ff0101!important;
  color: #fff!important; 
}
.nav-link:focus, .nav-link:hover{
  color:#c70000;
}

.main-nav2{
  position: absolute;
  z-index: 999;
  top: 0px;
  font-size: 25px;
  color: #fff;
  left: 0px;
  width: calc(100% - 0px);
  /*box-shadow: 3px 3px 10px #99979775;*/
  padding: 25px 25px;
}
.main-nav{
  background-color: #fff;
  position: absolute;
  z-index: 999;
  top: 25px;
  width: 500px;
  left: calc(50% - 250px);
  border-radius: 50px;
  /*box-shadow: 3px 3px 10px #99979775;*/
}
.main-nav ul{
  list-style: none;
  display: flex;
  margin-bottom: 0px;
  margin: 15px;
  text-align: center;
}
.main-nav ul li{
  padding: 0px 15px;
}
.main-nav ul li a{
  color: #ff0101;
  text-decoration: none;
}

.cursor{
  position: fixed;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 0px 2px red;
  border-radius: 50%;
  pointer-events: none;
  left: 0;
  right: 0;
  transform: translate(-50%, -50%);
  transition: .1s;
  z-index: 999999;
  mix-blend-mode: hard-light;
}
.cursor2{
  position: fixed;
  z-index: 999999;
  width: 8px;
  height: 8px;
  background-color:#fff;
  box-shadow: 0px 0px 0px 1px red;
  border-radius: 50%;
  pointer-events: none;
  left: 0;
  right: 0;
  transform: translate(-50%, -50%);
  transition: .15s;
  mix-blend-mode: hard-light;
}

.hover-left:hover ~ .cursor{border: 2px solid #fff; box-shadow:none;}
.hover-left:hover ~ .cursor2{background-color:#fff; box-shadow:none;}
.hover-right:hover ~ .cursor{border: 2px solid red; box-shadow:none;}
.hover-right:hover ~ .cursor2{background-color:red; box-shadow:none;}

.cursor.hover{transform:translate(-50%, -50%) scale(1.5); opacity:0.5; background-color:c6c6c6; border-color: #fff!important; box-shadow: none!important;}
.cursor.hover ~ .cursor2{display:none; box-shadow: none!important;}

.hover-left .split.left .title{
  transform: scale(1.3) translate(-50px,0px);
}

.hover-right .split.right .title{
  transform: scale(1.3) translate(-50px,0px);
}

.hover-left .split.right .title{
  transform: scale(0.5) translate(-250px,-25px);
}

.hover-right .split.left .title{
  transform: scale(0.5) translate(-250px,-25px);
}

.video{
  position: absolute;
  top:25%;
  left:10%;
  width: 80%;
  border: 0px solid #000;
}

.title
{
  position: absolute;
  left: 30%;
  top: 10%;
  transform: translateX(-50%);
  transition: .5s;
  font-family: 'Roboto', sans-serif!important;
}

.split.right .title
{
  text-align: right;
  left: 70%;
  top: 10%;
}
.up .title,.down .title {top:calc(10px); left:calc(50% - 10px)}
h1 , h4 {
  color: #fff!important;
  white-space: nowrap;
}
h1{
  text-transform: uppercase;
  font-weight:400!important;
}
h4{
  text-transform: uppercase;
  font-weight:900!important;
}
.split.right .title h1 , .split.right .title h4 {
  color: gray!important;
}
.button {
  display: inline-block;
  position: absolute;
  bottom: 5%;
  height: 2.5rem;
  padding-top: 1.3rem;
  width: 15rem;
  text-align: center;
  color: #fff;
  /*border: #fff solid 0.2rem;*/
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  box-sizing: content-box;
  transition: all .3s ease;
  opacity:0;
  scale:0.6 ;
}
.hover-right .split.right .button, 
.hover-left .split.left .button{
  opacity: 1;
}
.hover-right .split.right .button{
  left: 15%;
}

.hover-right .split.right .button, .hover-left .split.left .button
{
  animation: pop-anim cubic-bezier(0.77, 0, 0.175, 1) 1s infinite;
}


@keyframes pop-anim {
   0% {transform: scale(1) }
   20% {transform: scale(1.05) }
   30% {transform: scale(1.01) }
   40% {transform: scale(1.03) }
   50% {transform: scale(1) }
   100% {transform: scale(1) }
}
@keyframes pop-anim-hov {
   0% {transform: scale(1.1) }
   20% {transform: scale(1.15) }
   30% {transform: scale(1.11) }
   40% {transform: scale(1.13) }
   50% {transform: scale(1.1) }
   100% {transform: scale(1.1) }
}

.split.left .button
{
  color: red;
  background-color: #fff;
  border-radius: 15px;
  box-shadow:
  0px 0px 0px 5px red,
  0px 0px 0px 8px white,
  5px 5px 10px 10px  rgba(255,255,255,0.7);
  /*border: #fff solid 0.2rem;*/
  right: calc(40% - 240px);
}

.split.right .button
{
  color: #fff;
  background-color: red;
  border-radius: 15px;
  box-shadow:
  0px 0px 0px 5px white,
  0px 0px 0px 8px red,
  5px 5px 10px 10px rgba(255,0,0,0.7);
  left:40%;
}

.split.left .button:hover {
  background-color: rgba(161, 11, 11, 1);
  box-shadow: 0px 0px 0px 5px rgba(161, 11, 11, 1), 0px 0px 0px 8px white, 5px 5px 5px 10px white;
  border-color: rgba(161, 11, 11, 1);
  color: #fff;
  animation: pop-anim-hov cubic-bezier(0.77, 0, 0.175, 1) 1s infinite;
}

.split.right .button:hover {
  background-color: rgba(161, 11, 11, 1);
  border-color: rgba(161, 11, 11, 1);
  animation: pop-anim-hov cubic-bezier(0.77, 0, 0.175, 1) 1s infinite;
}

.conta {
  position: relative;
  width: 100%;
  height: 100%;
/*  background: var(--conta-bg-color); */
}

.split {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.split.left {
  left:0;
  background-color: red;
/*  background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat; */
  background-size: cover;
}

.split.left:before {
  position:absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--left-bg-color);
}

.split.right {
  right:0;
  background-color: white;
/*  background: url('https://image.ibb.co/m3ZbRb/programmer.png') center center no-repeat; */
  background-size: cover;
}

.split.right:before {
  position:absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--right-bg-color);
}

.split.left, .split.right, .split.right:before, .split.left:before {
  transition: var(--speed) all ease-in;
}

.hover-left .left {
  width: var(--hover-width);
}

.hover-left .right {
  width: var(--other-width);
}

.hover-left .right:before {
  z-index: 2;
}


.hover-right .right {
  width: var(--hover-width);
}

.hover-right .left {
  width: var(--other-width);
}

.hover-right .left:before {
  z-index: 2;
}

@media(max-width: 800px) {
  h1 {
    font-size: 2rem;
  }

  .button {
    width: 12rem;
  }
}

@media(max-height: 700px) {
  .button {
    top: 70%;
  }
}




      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100%;
      }