@import "Style.css";
.main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.dark {
  display: none;
  position: fixed;
  background: #000000a6;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.tokenDetails {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  color: #586871;
  background-image: url(/public/img/banners/1.jpg);
  background-size: cover;
}

.tokenDetails .about {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:40px 0;
}
.tokenDetails .about .aboutDescription {
  width: 80%;
  line-height: 30px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  padding: 30px 4%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.liveData {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height:60px;
  padding: 0 20px;
  box-sizing: border-box;
  color: #fff;
  border-radius:5px;
  border: 2px solid #46bd1a;
  box-shadow: 0px 0px 20px 0px #bd8b1a;
  font-weight: 900;
}
.liveData #newPrice span {
  color: #46bd1a;
}
.tokenDetails .about .TPR {
  font-size: 48px;
  font-weight: 900;
  line-height:50px;
  text-transform: uppercase;
  color:#46bd1a;
}
.tokenDetails .about p{
  text-align: center;
  margin: 50px 0 30px;
}
.tokenDetails .about p > a{
	color: #46bd1a;
}
.tokenDetails .about .aboutDescription p > a {
  font-size: 17px;
}
.tokenDetails .about .readWhitepaper {
  color: #1d1abd;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border: unset;
  background: unset;
}
.tokenDetails .about .add {
  line-height:34px;
  border-radius:20px;
  margin: 5px;
  width:220px;
}
.tokenDetails .about .whitepaper {
  display: none;
  position: fixed;
  background: #4b4b4b;
  color:#fff;
  top: 50px;
  bottom: 50px;
  left: 4%;
  right: 4%;
  z-index: 3;
  border-radius: 20px;
  padding: 20px 3%;
  box-sizing: border-box;
  box-shadow: 0px 0px 1px 0px #00000063;
  font-size: 1rem;
  line-height: 30px;
}
.tokenDetails .about .whitepaper .whitepaperTPRLogo {
  height:56px;
  position: absolute;
  left: 4%;
  top: 7px;
}
.tokenDetails .about .whitepaper h2 {
  text-align: center;
  font-size: 1.3rem;
  border-bottom: 1px solid #999;
  color:#fff;
  height: 50px;
  padding: 0;
  margin: 0;
}
.tokenDetails .about .whitepaper .close {
  position: absolute;
  right: 4%;
  top: 20px;
  color:#fff;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  border: 1px solid #999;
  background: unset;
  line-height: 30px;
}
.tokenDetails .about .whitepaper .whitepaperDes {
  overflow: hidden;
  overflow-y: auto;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 20px;
  box-sizing: border-box;
  padding: 0 4%;
}
.tokenDetails .about .whitepaper h3 {
  font-size: 1.2rem;
}
.guide {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 4% 70px;
  flex-wrap: wrap;
}
.guide h2 {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 30px;
  color:#444;
}
.guide .step {
  border-radius:100%;
  width: 15vw;
  height: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:20px;
  background-image: url(/public/img/banners/3.jpg);
  background-size: contain;
}
.guide .step:hover {
  background: #000;
}
.guide .step > img {
  height: 80px;
  max-width: 120px;
}
.guide .step p {
  width: 100%;
  min-height:48px;
  line-height: 24px;
  padding: 0;
  margin: 10px 0;
  font-size: 0.9rem;
  text-align: center;
  color: #fff;
  font-weight:600;
}
.guide .step div{
	width: 94%;
	margin:0 3%;
	font-size: 0.8rem;
	line-height:18px;
	color: #fff;
	text-align:left;
}
.guide .step span {
  color: #2dcfff;
  cursor: pointer;
  margin: 10px 0;
  line-height:20px;
}
.guide > img {
  width:50px;
}
.installMetamask {
  display: none;
  position: fixed;
  background: #24294e;
  top: 50px;
  bottom: 50px;
  left: 4%;
  right: 4%;
  z-index: 3;
  border-radius: 20px;
  padding: 20px 3%;
  box-sizing: border-box;
  box-shadow: 0px 0px 1px 0px #00000063;
  font-size: 1rem;
  line-height: 30px;
  color: #586871;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.installMetamask h4 {
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  border-bottom: 1px solid #999;
  color:#fff;
  height: 50px;
  padding: 0;
  margin: 0;
}
.installMetamask .close {
  position: absolute;
  right: 4%;
  top: 20px;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  border: 1px solid #999;
  color:#fff;
}
.browsers {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.browsers p {
  text-align: center !important;
  color:#fff;
}
.browser {
  display: flex;
  flex-direction: column;
  margin: 20px 3% 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.metamaskChrome {
  display: none;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.guide video {
  max-width: 60%;
  max-height: 500px;
}
.installMetamask .back {
  position: absolute;
  top: 80px;
  left: 4%;
  font-size: 15px;
  cursor: pointer;
  color:#fff;
}
.installMetamask .back i {
  font-size: 1rem;
}
.download {
  background: #4a6dff;
  color: #fff;
  padding: 8px 15px;
  margin: 20px 0;
  border-radius: 5px;
}
.metamaskPhone {
  display: none;
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.metamaskPhone p{
	color:#fff;
}
.switchNetwork {
  display: none;
  position: fixed;
  background: #24294e;
  top: 50px;
  bottom: 50px;
  left: 4%;
  right: 4%;
  z-index: 3;
  border-radius: 20px;
  padding: 20px 3%;
  box-sizing: border-box;
  box-shadow: 0px 0px 1px 0px #00000063;
  font-size: 1rem;
  line-height: 30px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.switchNetwork h4 {
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  border-bottom: 1px solid #999;
  color:#fff;
  height: 50px;
  padding: 0 0 10px;
  margin: 0;
}
.switchNetwork .close {
  position: absolute;
  right: 4%;
  top: 20px;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  color:#fff;
  border:1px solid #999;
}
.switchNetwork .des {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;
  margin-top: 20px;
  height: calc(100% - 80px);
  color:#fff;
}
.switchNetwork img {
  width: 92% !important;
  max-width: 500px;
  margin: 20px 0 50px;
  box-shadow: 0px 0px 1px 0px #000000;
}

.depositMetamask {
  display: none;
  position: fixed;
  background: #24294e;
  top: 50px;
  bottom: 50px;
  left: 4%;
  right: 4%;
  z-index: 3;
  border-radius: 20px;
  padding: 20px 3%;
  box-sizing: border-box;
  box-shadow: 0px 0px 1px 0px #00000063;
  font-size: 1rem;
  line-height: 30px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.depositMetamask h4 {
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  border-bottom: 1px solid #999;
  color:#fff;
  height: 50px;
  padding: 0 0 10px;
  margin: 0;
}
.depositMetamask .close {
  position: absolute;
  right: 4%;
  top: 20px;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  color:#fff;
  border:1px solid #999;
}
.depositMetamask .des {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;
  margin-top: 20px;
  height: calc(100% - 80px);
  padding-bottom: 50px;
  color:#fff;
}
.depositMetamask .des button {
  background: #4a6dff;
  color: #fff;
  padding: 5px 15px;
  border: unset;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin: 5px 0 30px;
}
.depositMetamask img {
  width: 92% !important;
  max-width: 500px;
  margin: 20px 0 50px;
  box-shadow: 0px 0px 1px 0px #000000;
}
.depositMetamask a {
  color: #2dcfff;
  font-size: 1rem;
}

.swapMetamask {
  display: none;
  position: fixed;
  background: #24294e;
  top: 50px;
  bottom: 50px;
  left: 4%;
  right: 4%;
  z-index: 3;
  border-radius: 20px;
  padding: 20px 3%;
  box-sizing: border-box;
  box-shadow: 0px 0px 1px 0px #00000063;
  font-size: 1rem;
  line-height: 30px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.swapMetamask h4 {
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  border-bottom: 1px solid #999;
  height: 50px;
  padding: 0 0 10px;
  margin: 0;
  color:#fff;
}
.swapMetamask .close {
  position: absolute;
  right: 4%;
  top: 20px;
  color:#fff;
  border:1px solid #999;
  padding: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
}
.browsers2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.browsers2 p {
  text-align: center !important;
  color:#fff;
}
.swapMetamask img {
  width: 80px;
}

.swapChrome {
  display: none;
  text-align: center;
  flex-direction: column;
  align-items: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.swapMetamask .back {
  position: absolute;
  top: 80px;
  left: 4%;
  font-size: 15px;
  cursor: pointer;
  color:#fff;
}
.swapMetamask .back i {
  font-size: 1rem;
}
.swapPhone {
  display: none;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.swapMetamask .des {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;
  height: calc(100% - 130px);
  position: absolute;
  top: 110px;
  left: 4%;
  right: 4%;
  bottom: 20px;
  color:#fff;
}
.swapMetamask .des img {
  width: 92% !important;
  max-width: 700px;
  margin: 20px 0 50px;
  box-shadow: 0px 0px 1px 0px #000000;
}

.swapMetamask .des a {
  color: #2dcfff;
}

.swapMetamask .des button {
  background: #4a6dff;
  color: #fff;
  padding: 5px 15px;
  border: unset;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin: 5px 0 30px;
}

.swapMetamask .swapPhone .des img {
  max-width: 400px;
}

.swap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 50px 4%;
  background-image: url(/public/img/banners/2.jpg);
  background-size: cover;
}
.swap h2 {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 30px;
  color:#fff;
}

.deposit {
  position: relative;
  width: 47%;
  border-radius:20px;
  color: #fff;
  font-size:20px;
  padding: 40px 4%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 150px;
  background: #00000063;
  box-shadow: 0 0 9px 0 #46bd1a;
}

.deposit h2 {
  width: 100%;
  color: #4aff4a;
  font-weight: 700;
}
.deposit > .column {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.deposit > .column p {
  text-align: left;
  width: 100%;
}
.deposit > .column input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #d8f1f1;
  color: #000;
  padding: 0 15px;
  box-sizing: border-box;
  border: none;
  font-size:1.1rem;
}
.deposit > .column input[name="buyAmountTPR"] {
  background: #e1e1e1;
}
.deposit p {
  text-align: center;
  width: 100%;
  margin: 10px 0 2px;
  font-size: 0.9em;
  line-height: 20px;
}
.deposit .submitBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.deposit .submitBox bottun {
  background: #46bd1a;
  color:#fff;
  border: none;
  padding: 10px 20px;
  border-radius: 22px;
  cursor: pointer;
}
.deposit .submitBox bottun:hover {
  color: #000;
  background: #4aff4a;
}
.withdraw {
  position: relative;
  width: 47%;
  border-radius:20px;
  color: #fff;
  font-size:20px;
  padding: 40px 4%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 150px;
  background: #00000063;
  box-shadow: 0 0 9px 0 #46bd1a;
}
.withdraw h2 {
  width: 100%;
  color: #ff2f2f;
  font-weight: 700;
}
.withdraw > .column {
  width: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.withdraw > .column p {
  text-align: left;
  width: 100%;
}
.withdraw p {
  text-align: center;
  width: 100%;
  margin: 10px 0 2px;
  font-size: 0.9em;
  line-height: 20px;
}
.withdraw > .column input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #d8f1f1;
  color: #000;
  padding: 0 15px;
  box-sizing: border-box;
  border: none;
  font-size:1.1rem;
}
.withdraw > .column input[name="sellAmountTPR"] {
  background: #e1e1e1;
}
.withdraw .submitBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.withdraw .submitBox bottun {
  background: #c22626;
  color:#fff;
  border: none;
  padding: 10px 20px;
  border-radius: 22px;
  cursor: pointer;
}
.withdraw .submitBox bottun:hover {
  color: #000;
  background: #ff2f2f;
}
.liquidity {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 50px 4%;
  position: relative;
  box-sizing: border-box;
  background-image: url(/public/img/banners/1.jpg);
  background-size: cover;
}

.liquidity h2 {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 30px;
  color:#fff;
}

.liquidity .top {
  width: 100%;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.liquidity .top .liveLiquidity {
  color: #46bd1a;
  font-weight: 900;
}
.liquidity .service {
  width: 48%;
  display: flex;
  justify-content: space-between;
  align-items:center;
  background: #00000063;
  box-shadow: 0 0 9px 0 #46bd1a;
  border-radius: 20px;
  margin-top: 30px;
  box-sizing: border-box;
  padding: 20px 30px;
  height: 450px;
  position: relative;
}
.liquidity .service:hover {
  background:#000;
}
.liquidity .service:nth-child(odd){
	flex-direction:row-reverse;
}
.liquidity .service img{
	width:30%;
	max-height:100%;
	object-fit:contain;
}
.liquidity .service .step {
  width: calc(70% - 30px);
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color:#fff;
}
.liquidity .service .step h3 {
  width: 100%;
  color: #ffffff;
  line-height: 50px;
  text-align: left;
  margin:0 0 20px;
  font-size:1.5rem;
}

.liquidity .service .step p {
  width: 100%;
  font-size: 18px;
  text-align: left;
  margin: 0;
  color: #ffffff;
  line-height:25px;
}
.roadmap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 50px 4%;
}
.roadmap h2 {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 30px;
  color:#444;
}

.roadmap .step {
  width: 22vw;
  height: 23vw;
  color: #fff;
  text-align: center;
  border-radius:100%;
  margin: 0 0 30px;
  padding:40px 30px;
  box-sizing: border-box;
  position:relative;
  background-image: url(/public/img/banners/3.jpg);
  background-size: contain;
}
.roadmap .step:hover {
  box-shadow: 0px 0px 5px 0px #4a6dff;
}
.roadmap .step .num {
	box-sizing: border-box;
	width:60px;
	height:60px;
	line-height:30px;
	border-radius:0 0 60px 0;
	padding:10px 10px 0 0;
	text-align:center;
	font-size:28px;
	font-weight:900;
	position:absolute;
	top:0;
	left:0;
	background:#4b4b4b;
	color:#fff;
	font-family:Times;
}
.roadmap .step .img{
	width:100%;
	height:150px;
}
.roadmap .step .img img {
  width:100%;
  height:100%;
  object-fit:contain;
  max-width: 180px;
}
.roadmap .step p {
  font-size: 1.2rem;
}
.roadmap .step span {
  font-size: 1rem;
}
.contact {
  display: flex;
  width: 100%;
  line-height: 50px;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 4%;
  box-sizing: border-box;
  font-size: 1rem;
  color:#fff;
  background:#000;
}
.contact div {
  width: 33.33%;
  text-align: center;
}
.contact a {
  color: #46bd1a;
}

@media (max-width: 800px){
	.tokenDetails .about {
		width:92%;
		flex-direction: column;
		padding:30px 4%;
	}
	.tokenDetails .about .aboutImg {
		width: 50%;
		height:auto;
	}
	.tokenDetails .about .aboutDescription {
		width: 100%;
		line-height: 25px;
		font-size: 18px;
	}
	.tokenDetails .about .aboutDescription p > a {
		font-size: 15px;
	}
	.tokenDetails .about .readWhitepaper{
		font-size: 16px;
	}
	.tokenDetails .about .add {
		line-height:30px;
		border-radius:18px;
		font-size: 0.9rem;
		width:200px;
	}
	.tokenDetails .about .whitepaper {
		top:10px;
		bottom:10px;
		left:10px;
		right:10px;
		padding:10px 3%;
	}
	.tokenDetails .about .whitepaper .whitepaperTPRLogo {
		height:50px;
		top: 5px;
		left:3%;
	}
	.tokenDetails .about .whitepaper p > a{
		word-wrap:break-word;
		font-size:0.8rem;
	}
  .liveData{
		width:100%;
		margin:10px 0 0;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:;
    justify-content: center;
	}
	.liveData > div{
		margin-right:30px;
	}
	.liveData > div:last-child{
		margin-right:0;
	}
	.guide , .liquidity{
		flex-direction: column;
		padding:30px 4%;
	}
	.guide .step {
		margin: 15px 0;
		width: 70vw;
    height: 70vw;
	}
	.guide > img{
		transform: rotate(90deg);
	}
	.guide h2 , .swap h2 , .roadmap h2 , .liquidity h2{
		font-size:1.8rem;
		margin:0 0 15px;
	}
	.swap{
		justify-content:center;
		padding:30px 4%;
	}
	.deposit , .withdraw{
		width: 70%;
		min-width:370px;
		padding:20px 4%;
	}
	.deposit{
		margin-bottom: 50px;
	}
	.deposit h2 , .withdraw h2{
		margin: 0 0 20px;
		font-size: 1.8rem;
	}
	.deposit > .column , .withdraw > .column {
		width: 100%;
	}
	.roadmap{
		flex-direction: column;
	}
	.roadmap .step {
		width: 70vw;
    height: 70vw;
	}
	.liquidity .service {
    width: 90%;
		margin: 30px 0 20px;
		height:auto;
	}
	.contact {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.contact div {
		width: 100%;
		line-height:35px;
	}
}
@media (max-width: 600px){
	.liquidity .service{
		flex-direction:column !important;
	}
	.liquidity .service .step{
		width:100%;
		margin-bottom:15px;
	}
	.liquidity .service img{
		max-height:180px;
		width:60%;
	}
}
@media (max-width: 420px){
	.tokenDetails .about .aboutDescription {
		line-height: 25px;
		font-size: 16px;
	}
	.tokenDetails .about .aboutDescription p > a {
		font-size: 14px;
		word-wrap:break-word;
	}
	.tokenDetails .about .readWhitepaper{
		font-size: 0.8rem;
	}
	.tokenDetails .about .whitepaper h2 {
		font-size: 1rem;
		margin-top: 50px;
	}
  .tokenDetails .about .whitepaper .whitepaperDes{
    top: 100px;
}
	.guide .step {
		margin: 10px 0;
		width: 70vw;
    height: 70vw;
	}
	.deposit , .withdraw{
		width: 100%;
		min-width:auto;
	}
	.deposit p , .withdraw p{
		font-size:14px;
	}
	.roadmap .step {
		width: 70vw;
    height: 70vw;
	}
	.roadmap .step .img{
		height:100px;
	}
	.roadmap .step p{
		font-size:0.9rem;
	}
	.roadmap .step span{
		font-size:0.8rem;
	}
	.liquidity .top{
		font-size:1rem;
	}
	.liquidity .service .step h3{
		font-size:1.1rem;
		line-height:30px;
		margin:0 0 15px;
	}
	.liquidity .service .step p{
		font-size:15px;
		line-height:20px;
	}
	.contact {
		font-size:0.9rem;
	}
}