@font-face {
  font-family: "opensans";
  src: url("./../fonts/OpenSans/OpenSans-Light.ttf");
  /* IE9 Compat Modes */
  /* src: url("/fonts/OpenSans/OpenSans-Bold.ttf") format("truetype"),
    url("/fonts/OpenSans/OpenSans-SemiBold.ttf") format("truetype"),
    url("/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf") format("truetype"); */
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "opensans-bold";
  src: url("./../fonts/OpenSans/OpenSans-Bold.ttf");
}


body{
  margin:0px !important;
  display:flexbox;
}

*{
  font-family: Arial, Helvetica, sans-serif;
  font-size:12px;
  border:none !important;
}



.main{
  flex:1; 
  width:99%;
  margin:10px auto;
  height:100vh;
  position: relative;
  border:solid 3px greenyellow;
  z-index: 110000;
}


.main > .logo{
  display: block;
  position:absolute;
  top:30px;
  left:40px;
}


.ndrTplogo {
    display:block;
    position:absolute;
    z-index: 10000;
    left:70px;
    top:50px;
}

.tplabel{
  position:absolute;
  z-index: 7000;;
  left:100px; 
  top:25%;
}

.tplabel > *{
  display:block;
  position:absolute
}

.tplabel > span{
  font-family: opensans-bold;
  display:block;
  font-size:80px;
  text-transform: uppercase;
  color:white;
  font-size:75px;
  border:solid 1px #fff;
  padding:0px;
  position:relative;
  letter-spacing:-5px !important;
}

.tplabel > span:nth-child(1){
  color:greenyellow;
  font-size:80px;
  bottom:-40px;
}
.tplabel > span:nth-child(2){
  padding-left:90px;
}

.tpinfo{
  width:500px; 
  border: solid 2px #fff;
  display: flex;
  flex-direction: row;
  position:relative;
}

.tpinfo *{
  display:block;
  color:rgb(255, 255, 255);
  /* font-weight: bold; */
  padding:10px;
  border:solid 1px yellow;
}

.tpldr{
  position:absolute;
  align-self: center;
  margin-left:36%;
  display: none;
}

.tpinfotxt{
  font-size:16px !important;
  display:block;
  border:solid 1px #ccc;
}

.tpinfo a:hover{
  opacity:0.4;
}

.tpinfo span{
  text-align: justify;
}



/************       canvas animation...      *************/

.cvx > canvas{
  border:solid 3px #000;
  background-color:#000;
  position:absolute;
  top:0px;
  left:0px;
  z-index: 10;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  display: block;
}


.iframeobj > iframe{
  border:solid 3px #fff;
}

.iframeobj{
  border:solid 3px #fff;
  position: absolute;
  top:40px;
  right:20%;
  z-index:3000
}



.footerlnks{
  width:85vw;
  padding:10px;
  position:absolute;
  z-index:70000;
  bottom:30px;
  margin-left:5%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
}

  
.partnrs{
  position: absolute;
  bottom: 35px;
}

.partnrs a{
  display:block; 
  float: left;
  margin-right:5px;
}

.partnrs a:hover{
  opacity:0.5;
}

.partnrs img{
  height:80px !important;
}


.footlnks div{
  font-size:25px;
  text-shadow: #000 2px 2px 2px !important;
}



.othlnks a{
  text-decoration:none;
}

.footerlnks .xcopy,.othlnks a, .othlnks span{
  font-size:16px;
  color:#fff !important;
  text-shadow: #000 2px 2px 2px !important;
}



/************       canvas animation...      *************/
/* bbox styles..  */

.bbox{
  position:absolute;
  z-index: 10000;
display:none;
  width:250px;
  height:150px;
  border:solid 1px rgb(77, 77, 77) !important;
  background-color: rgba(0, 0, 0, 0.479);
}

.bbox > .ldr{
  position:absolute;
  left:50%;
  top:50%;
  margin-left: -25px;
  margin-top:-25px;
}

.container .right span{
  display:block;
  text-align: center;
  margin-top:20px;
  color:rgba(4, 51, 51, 0.877);
  font-weight: bolder;
  font-size:18px;
}



.page .form{
  margin-top:5px !important;
}

/* If the screen size is 600px wide or less, hide the element mobile.. */
@media only screen and (max-width: 600px) {

  .ndrTplogo{
    left:50px !important;
  }
  .ndrTplogo img{
    width:85% !important;
  }
.loginpg .container{
  width:380px !important;
  margin-top:calc(25%) !important;
  margin-right:60px !important;
  }

  .partnrs img{
    height:40px !important;
  }
  .partnrs{
    margin-bottom:25px;
  }

  .tplabel{
    display: none;
  }

  .xcopy, .othlnks a{
    font-size:12px !important;
  }

  .othlnks span span{
    display:none;
  }
}


 /* Small Devices, Tablets */
 @media only screen and (max-width : 768px) {
  .tplabel{
    display: none;
  }

  .partnrs img{
    height:40px !important;
  }
  .partnrs{
    margin-bottom:25px;
  }

  .loginpg{
    margin-left:20% !important;
  }

  
 .vrbox > div{
  margin-top: 20px !important;
 }

 }



 /*   the vr objects....   */

 .vrbox{
  display:flex;
  height:100vh;
  flex-direction:column;
  align-content:space-between;

  width:400px; 
  /* background-color:#ffff0036; */
  position:absolute;
  top:0px;
  right:100px;
  z-index:10000000;
  border:solid 4px #000;
 }

 .vrbox > div{
  border:solid 2px #000;
  height:100px;
  width:100%;
  margin-top:40px;

 }

.vrfoot {
    position:absolute;
    bottom:0px;
    right:10px;
}


 .vrbox .ndrTplogo {
  position: absolute;
  z-index: 110000;
   left: 0px !important;
  top: 50px;
}

.xplinks{
  position:absolute; bottom:10px;
  border:solid 2px black;
  z-index: 100000;
  width: 100%;
  bottom:-50px;
  display:flex;
  flex-direction:row;
  
}

.xplinks > *{
  display:block; 
  text-decoration:none; 
  color:#fff; 
  margin-right:20px;
}

.nscimg > img{
  width:140px !important; 
  height:50px !important;
}