body, html {
background-image: url('img/bh.png');
/*background-size: 100%;*/
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
  background-color: #192a45;
  color: #373F4A;
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-weight: normal;
}

@media screen and (max-width: 768px) {
body, html {
background-size: 100%;
height: 90% !important;
}
#BHCenter {
/*left: 25%;*/
}
#eLeft {
left: -25px !important;
top: 150px !important;
}
#eRight {
left: 70% !important;
top: 150px !important;
}
#eTop {
top: 100px !important;
}
#eBottom {
top: 400px !important;

}
#footer {
bottom: 10% !important;
}
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 15% from the top and centered 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; Could be more or less, depending on screen size 
}*/

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  max-width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: 300px; opacity: 0}
  to {top: 0; opacity: 1}
}


dialog {
  animation: fade-out 0.7s ease-out;
}

dialog:open {
  animation: fade-in 0.7s ease-out;
}

dialog:open::backdrop {
  animation: backdrop-fade-in 0.7s ease-out forwards;
}
.bbText {
min-height: 3px;
min-width: 2px;
width: 2px;
background-color: #FFF;
color: #000;
padding: 0.5rem;
border-radius: 8px;
/*border: 1px solid #ddd;*/
border: 0px;
/*box-shadow: inset 0 0 0.25rem #ddd;*/
}
.bbText::placeholder {
  font-style: italic;
  color: grey;
  opacity: 0.5; 
}
.eeNTextI {
/*min-height: 89px;
max-width: 90px;
*/
background-color: #FFF;
color: #fff;
padding: 0.5rem;
border-radius: 8px;
/*border: 1px solid #ddd;*/
border: 0px;
/*box-shadow: inset 0 0 0.25rem #ddd;*/
}

.eeNText {
min-height: 8px;
min-width: 1px;

background-color: #FFF;
color: #fff;
padding: 0.5rem;
border-radius: 8px;
/*border: 1px solid #ddd;*/
border: 0px;
/*box-shadow: inset 0 0 0.25rem #ddd;*/
}
.eeText::placeholder {
  font-style: italic;
  color: grey;
  opacity: 0.5; 
}

.eeText {
min-height: 100px;
min-width: 300px;
background-color: #FFF;
color: #000;
padding: 0.5rem;
border-radius: 8px;
/*border: 1px solid #ddd;*/
border: 0px;
/*box-shadow: inset 0 0 0.25rem #ddd;*/
}
.eeText::placeholder {
  font-style: italic;
  color: grey;
  opacity: 0.5; 
}

.eFeed {
 color: #fff;
  position: absolute;
  top: 300px;
  left: calc(50% - 108px);
  height: auto;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
  transition: 0.5s;
  margin: auto;
  width: auto;
}
.eNFeed {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 100px);
  height: auto;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
  transition: 0.5s;
  margin: auto;
  width: auto;
}

.eFeedI {
 color: #fff;
  position: absolute;
  top: 350px;
  left: calc(50% - 75px);
  height: auto;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
  transition: 0.5s;
  margin: auto;
  max-width: 70%;
}

.eCpu {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 120px);
  height: auto;
  background-color: tranparent ;
  transit1ion: 0.5s;
  margin: auto;
  width: auto;
}

.bitPay {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 120px);
  height: auto;
  background-color: tranparent ;
  transit1ion: 0.5s;
  margin: auto;
  width: auto;
}

.eStart {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 120px);
  height: auto;
  background-color: tranparent ;
  transit1ion: 0.5s;
  margin: auto;
  width: auto;
}

.eStop {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 120px);
  height: auto;
  background-color: tranparent ;
  transit1ion: 0.5s;
  margin: auto;
  width: auto;
}

#eBitcoin {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 10px);
  max-height: 10px;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
  
  transition: 0.5s;
  margin: auto;
  width: auto;
}

.eNonce {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 100px);
  height: auto;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
  
  transit1ion: 0.5s;
  margin: auto;
  width: auto;
}

.eVersion {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 120px);
  height: auto;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
   
  transition: 0.5s;
  margin: auto;
  width: auto;
}

.eLastB {
 color: #fff;
  position: absolute;
  top: 260px;
  left: calc(50% - 120px);
  height: auto;
  /*margin: auto;*/
  background-color: tranparent ;
  /*transform: translate(-50px, -200px);*/
  
  transition: 0.5s;
  margin: auto;
  width: auto;
}

.feedButton {
background-color: transparent;
  border-radius: 3px 3px 3px 3px;
  transition: 0.3s;
  /*box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1)*/;
  margin: 0px;
  cursor: pointer;
  border: 0px;
  /*box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);*/
  margin: 0px;
  cursor: pointer;
  width: 100%;
  color: #b81dcc;
  /*color: white;*/
}

.feedButton:hover {
/*  background-color: #000;*/
  box-shadow: 1px 1px 1px 1px #36de14;
}


#BHCenter {
position: relative;
float: top;
top: 20px;
max-width: 100%;
/*text-align: center;*/
z-index: 999;
}
#intro {
position: absolute;
top: 5px;
/*right: 10px;*/
left: 10px;
border-radius: 5px 5px 5px 5px;
/*background-color: black;*/
color: white;
padding: 6px 10px;
border: 2px solid orange;
text-align: center;
width: 98.8%;
}
#lright {
position: absolute;
top: 90px;
right: 10px;

}

#footer {
position: absolute;
bottom: 10px;
/*right: 10px;*/
left: 10px;
border-radius: 5px 5px 5px 5px;
background-color: #E0E2E3;
color: black;
padding: 6px 10px;
border: 2px solid #E0E2E3;
align: center;
width: 98.8%;
max-height: 30%;
font-size: 16px;
border: 2px solid orange;
}

#about {
pading: 10px;
color: white;
text-align: center;
/*font-weight: bold;*/
font-size: 16px;
font-family: Uroob;
width: 100%;
}

#middle {
position: absolute;
top: 200px;
left: calc(50% - 150px);
}
#eTop {
position: absolute;
top: 100px;
left: calc(50% - 165px);
width: 300px;
text-align: center;
}

#eBottom {
position: absolute;
top: 770px;
left: calc(50% - 135px);
width: 300px;

}

#eLeft {
position: absolute;
top: 275px;
left: calc(50% - 350px);
width: 170px;
}

#eRight {
position: absolute;
top: 275px;
left: calc(50% + 250px);
width: 170px;
}

.tablink {
  background-color: #b81dcc;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 14px;
  font-size: 17px;
  width: 100px;
  height: 40px;
  margin: auto;
  border-radius: 5px;
}

.tablink:hover {
  background-color: black;
}
.tablinkC {
  background-color: #b81dcc;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 14px;
  font-size: 17px;
  width: auto;
  height: 40px;
  margin: auto;
  border-radius: 5px;
}
.tablinkC:hover {
  background-color: black;
}

.auth4 {
  position: relative;
  top: 0px;
  margin-left:5px;
  width: auto;
  height: auto;
  text-align: center;
}
.authL {
  position: relative;
  top: 0px;
  margin-left:5px;
  width: 100px;
  height: auto;
  text-align: center;

}
.authC {
  position: relative;
  top: 0px;
  margin-left:5px;
  width: auto;
  height: auto;
  text-align: center;

}

button {
  border: 0;
  font-weight: 500;
  padding: 4px;
  text-align: center;
  display: inline-block;
  margin: 4px 2px;
}

.lightning {
  border-radius: 60%;
  border: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  background-color: transparent;
  color: white;
  outline: none;  
}
.lightning:hover {
  background-color: yellow;
  color: black;
}

.discovery {
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  font-size: 12px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  outline: none;
}
.discovery:hover {
  background-color: blue;

}

.exploration {
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  font-size: 12px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  outline: none;
}
.exploration:hover {
  background-color: purple;

}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.description {
background-color: blue;
position: absolute;
width: 300px;
margin: 0 auto;
top: 30px;
left: 0;
transform: translateY(-50%);
}
.acknowledge { 
background-color: white;
position: absolute;
width: 300px;
margin: 0 auto;
top: 50px;
right: -450px;
transform: translateY(-50%);
}

#form-container {
  position: relative;
  width: 380px;
  margin: 0 auto;
  top: 58%;
  transform: translateY(-50%);
}

.sec {
  float: left;
  width: calc((100% - 32px) / 2);
  padding: 0;
  margin: 0 16px 16px 0;
}

.sec:last-of-type {
  margin-right: 0;
}

.third {
  float: left;
  width: calc((100% - 32px) / 3);
  padding: 0;
  margin: 0 16px 16px 0;
}

.third:last-of-type {
  margin-right: 0;
}


.sq-input {
  height: 56px;
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  background-color: white;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
}
.sq-input1 {
  height: 56px;
  width: 48%;
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  background-color: white;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
}

.cc-input {
  text-align: center;
  height: 31px;
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  background-color: white;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
}

.cc-input1 {
  text-align: center;
  height: 31px;
  margin-top: 3px;
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  background-color: white;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
}


.cc-inputB {
  text-align: center;
  height: 31px;
  margin-top: 3px;
  box-sizing: border-box;
  border: 1px solid #36de14;
  background-color: white;
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
     -moz-transition: border-color .2s ease-in-out;
      -ms-transition: border-color .2s ease-in-out;
          transition: border-color .2s ease-in-out;
}

.cc-inputB:hover {
  background-color: transparent;
  box-shadow: 1px 1px 2px 2px #36de14;
}

.sq-input--focus {
  border: 1px solid #4A90E2;
}


.sq-input--error {
  border: 1px solid #E02F2F;
  background-color: yellow;
}

#sq-card-number {
  margin-bottom: 16px;
}

/* Customize the "Pay with Credit Card" button */
.button-credit-card {
  width: 100%;
  height: 33px;
  margin-top: 2px;
  background: #b81dcc;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}

.button-credit-card:hover {
  background-color: transparent;
  box-shadow: 1px 1px 2px 2px #36de14;

}

.button-credit-cardB {
  width: 98%;
  height: 33px;
  margin-top: 2px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  -webkit-transition: background .2s ease-in-out;
     -moz-transition: background .2s ease-in-out;
      -ms-transition: background .2s ease-in-out;
          transition: background .2s ease-in-out;
}

.button-credit-cardB:hover {
  background-color: transparent;
  box-shadow: 1px 1px 2px 2px #36de14;
}

.tabcontent {
  top: 50px;
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
.mytabs {
position: absolute;
}
.heads {
position: absolute;
top: 10px;
}
.ovVersion {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.footer {
position: absolute;
bottom: 0;
font-size: 9px;
  height: auto;
 color: #ffffff;
}
.footer a {
  color: #ffffff;
}
#Fc1 {background-color: tranparent;}
#Fc2 {background-color: transparent;}
#Fc3 {background-color: transparent;}