.hidden {
  opacity: 0;
  visibility: hidden;
}

@font-face {
  font-family: "CiscoSansTTBold";
  src: url("CiscoSansTTBold.woff2") format("woff");
}

@font-face {
  font-family: "CiscoSansTTRegular";
  src: url("CiscoSansTTRegular.woff2") format("woff");
}

#sun{
  opacity: 0;
  -webkit-transform: translateY(160px);
      -ms-transform: translateY(160px);
          transform: translateY(160px);
}

sup, sub {
  font-size: 50%;
}

html, body {
  width:970px;
  height:250px;
  margin: 0;
}

#main {
  position:absolute;
  left:0px;
  top:0px;
  width:970px;
  height:250px;
  background-color: #0c1e3f;
  border:1px solid #000000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow:hidden;
  visibility: hidden;
}

img, div {
  position:absolute;
}
  
.retinaFullWidth {
  width: 970px;
  height: auto;
}


#bgExit {
  position: absolute;
  left: -1px;
  top: -1px;
  width:970px;
  height:250px;
  cursor: pointer !important;
  z-index: 100;
}


/* New Stuff */

.text-circle {
  opacity: 0;
  -webkit-filter: blur(5px);
  top: 182px;
  filter: blur(5px);
  /* opacity: 0%; */
  position: absolute;
  width: 1000px;
  height: 1000px;
  border-radius: 1000px;
  /* border: 1px solid black; */
  background: -o-radial-gradient(
    center,
    circle,
    white 30%,
    #fd6f0f 42.71%,
    #e90072 61.1172%,
    #e9007100 69.29223%
  );
  background: radial-gradient(
    circle at center,
    white 30%,
    #fd6f0f 42.71%,
    #e90072 61.1172%,
    #e9007100 69.29223%
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}

.text {
  white-space: nowrap;
  font-family: "CiscoSansTTBold";
  color: white;
  z-index: 10;
  font-size: 22px;
  letter-spacing: 0px;
}

.text-container{
  top: 170px;
  left: 3px;
  width: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#lockup {
  position: absolute;
  top: 74px;
  left: 275px;
  width: 424px;
  -webkit-filter: invert(1);
          filter: invert(1);
}

.text-mask {
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  /* transform: translateY(-20px); */
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(./assets/title.svg);
          mask-image: url(./assets/title.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 275px 57px;
          mask-position: 275px 57px;
  -webkit-mask-size: 423px 152px;
          mask-size: 423px 152px;
}


.button {
  cursor: pointer;
  border: 1px solid white;
  color: white;
  background-color: transparent;
  z-index: 10;
  font-size: 14px;
  font-family: "CiscoSansTTRegular", sans-serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.8px;
  border-radius: 22px;
  padding: 6px 18px;
  white-space: nowrap;
}

.button-container{
  top: 190px;
  left: -37px;
  position: absolute;
text-align: right;
  width: 100%;
}

#main:hover #button {
  background-color: #fff; 
  color: #000;
}