@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;700&display=swap');

/* NEW CSS */
body { font-family:'Raleway', sans-serif; color:#000; font-size:15px; font-weight:500; background-color:#fff; position:relative; }
a { font-family:'Raleway', sans-serif; color:#000; font-size:15px; text-decoration:none; }
a:hover { font-family:'Raleway', sans-serif; color:#000; font-size:15px; text-decoration:none;}

a, img, input, button, textarea, select { outline:none; }

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.clearfix:after { clear:both; content:""; display:block; font-size:0; height:0; visibility:hidden;}

#wrapper { position:relative;}

.wrapper { position:relative; margin: auto; width: 980px; }
.wrapper.navbar { position:relative; margin: auto; width: 100%; padding: 0 20px; }

.fl { float:left}
.fr { float:right}

button, a, .trans {
	-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;
}

a.btn { font-family:'Raleway', serif; position:relative; z-index:10; display:inline-block; padding:0 20px; background:#C09473; color:#fff; line-height:32px; height:32px; font-size:14px; border-radius: 5px}
a.btn:hover { color:#000; }

h1 { font-size:36px; font-weight:600}
h2 { font-size:32px; font-weight:600}
h3 { font-size:28px; font-weight:600}
h4 { font-size:24px; font-weight:600}
h5 { font-size:20px; font-weight:600}
h6 { font-size:14px; font-weight:600; font-weight:700}



#header .toggle-nav { display:none; margin: auto; position: relative; z-index:10; width:70px; height:70px; border-radius: 70px; border: 1px solid #fff; margin-bottom:10px}
#header .toggle-nav i { position:absolute; display:block; height:2px; background:#fff; width:40px; left:15px; }

#header .toggle-nav i:nth-child(1) { top:22px; }
#header .toggle-nav i:nth-child(2) { top:34px; }
#header .toggle-nav i:nth-child(3) { top:46px; }

#header .toggle-nav.active i:nth-child(1) { top:32px; -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
#header .toggle-nav.active i:nth-child(2) { background: transparent; }
#header .toggle-nav.active i:nth-child(3) { top:32px; -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }



.breadcrumb { font-size:18px; color: #000; text-align: center; position: relative; padding-left:15px; padding-right: 15px; margin: 20px 0}
.breadcrumb a.back { position: absolute; left: 0; top: 2px} 
.breadcrumb a.back img { display: block; }


#header { background: #000; padding: 10px 0}

#header .menu { float: left}
#header .menu li { float:left; list-style-type: none; margin-right: 35px;}
#header .menu li a { line-height:30px; display: block; text-transform: uppercase; font-size: 20px; color: #fff;}
#header .menu li a.disabled { color: #808080}
#header .menu li a span { background: #ff0000; font-size: 10px; padding:2px 4px; border-radius:3px; color: #fff; vertical-align: bottom; margin-left: 4px}
#header .menu li a:hover { color:#ff0000;}

#header .button { float: right}
#header .button li { float:left; list-style-type: none; margin-left: 10px}
#header .button li a { height:30px; line-height:30px; display: block; text-transform: uppercase; font-size: 20px; background-color: #fff; background-size: 25px 25px; background-repeat: no-repeat; background-position: 10px 50%; border-radius: 3px; color: #000; padding: 0 10px 0 40px }
#header .button li span { margin-left: 5px}
#header .button li a.token { background-image: url(../images/icon-tmm.svg); }
#header .button li a.claim { background-image: url(../images/icon-info.svg); }
#header .button li a.logout { background-image: url(../images/icon-logout.svg); }
#header .button li a:hover { background-color:#808080}

/* CONTENT */
.content { font-size:15px}
.content a { color:#ff0000; font-size:15px}
.content a:hover { font-size:15px}
.content ul, .content ol { padding-left:20px; color:#111; list-style-type:none; padding-bottom:20px; margin-left:20px; letter-spacing: 0.1em;}
.content ul li { list-style-type:circle}
.content ol li { list-style-type:decimal}
.content p { padding-bottom:20px}
.content p + div { padding-bottom:20px }
.content blockquote { padding:0 20px; font-size: 18px; margin-bottom:20px; margin-left: 20px; border-left:6px solid #808080; font-style:italic; line-height:150%}
.content blockquote p:last-child  { padding-bottom:0}

.iframe {position:relative; overflow:hidden; padding-top:56.25%; margin-bottom:20px}
.iframe iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:0;}


/* POST */
.post-list { }
.post-list .post-item { margin-bottom: 50px; float: left; width:calc(33.33% - 20px); padding:8px; background: #fff; box-shadow: 0px 0px 16px 7px rgba(0, 0, 0, 0.15); border-radius: 3px;}
.post-list .post-item .meta div { display:inline-block; padding-right:20px}
.post-list .post-item .thumb { position:relative; margin-bottom: 10px}
.post-list .post-item .thumb img { display:block; width:100%}

.post-list .post-item .name { margin:0; line-height:1.2; padding:10px 0 20px  0; font-size: 18px;  }
.post-list .post-item .name a { line-height:1.2; font-size: 18px;}
.post-list .post-item .name a:hover { color:#ff0000}

.post-list .post-item .resume a { color:#ff0000; text-decoration: underline;}
.post-list .post-item .resume a:hover { text-decoration:none;}

.post-list .post-item .more { padding-top:10px}
.post-list .post-item .more a { color:#ff0000; text-decoration: underline;}
.post-list .post-item .more a:hover { color:#ff0000; text-decoration:none;}

/* POST DETAIL */
.post-detail { }
.post-detail .content img { width:100%; display:block }
.post-detail .thumb { padding-bottom:20px}

.post-detail .name { margin:0; line-height:1.2; padding:20px 0 30px 0; }
.post-detail .name a:hover { color:#ff741e}

.post-detail .slider-post { margin-bottom: 20px}
.post-detail .slider-post img { display: block; width: 100%}
.post-detail .slider-post .item { position:relative}
.post-detail .slider-post .item .zoom { position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; background:url(../images/plus.svg); opacity:0.5; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;}
.post-detail .slider-post .item:hover .zoom { opacity:1}

/* POST NAV */
.post-nav { border-top:1px solid #808080; border-bottom:1px solid #808080 }
.post-nav .post-item { border-right:1px solid #808080; padding:20px 20px 10px 20px; float:left; width:50%; text-align: right}
.post-nav .post-item:nth-child(2n) { float:right; border-right:none; text-align: left}
.post-nav .post-item .name { height: 90px; margin-top: 20px}
.post-nav .post-item .name a { font-size:22px; font-weight:600; line-height:1}
.post-nav .post-item .name a:hover { color: #ff0000; }
.post-nav .post-item .nav { padding: 0 0 0 35px; background: url(../images/arrow-left.svg) no-repeat 0 50%;}
.post-nav .post-item:nth-child(2n) .nav { padding: 0 35px 0 0; background: url(../images/arrow-right.svg) no-repeat 100% 50%;}



.pager { text-align:center; padding-top:20px}
.pager li { display:inline-block; padding:0 3px 10px 3px}
.pager li a, .pager li span { display:block; width:60px; height:60px; line-height:60px; border-radius: 60px; border:1px solid #C4C4C4; color: #C4C4C4; font-size: 20px;}
.pager li a:hover { border:1px solid #ff0000;}
.pager li a.active { box-shadow: 0px 0px 16px 7px rgba(0, 0, 0, 0.15); color: #000}

#center { padding:40px 0}

#footer { background:#000; padding:25px 0; color:#808080;}
#footer a { color:#ff0000}
#footer a:hover { color: #fff}

#footer .menu { text-align:center; padding-bottom: 20px}
#footer .menu li { display: inline; list-style-type:none; margin-right:20px; position:relative}
#footer .menu li:after { content:''; position:absolute; right:-16px; top:6px; width:6px; height:6px; background:#ff0000; border-radius:6px}
#footer .menu li:last-child:after { display:none}
#footer .menu li a { text-transform:uppercase; font-size:16px; color:#808080;}
#footer .menu li a:hover { color: #fff }

#footer .left-part { float:left; width: 20%; padding-top: 20px}
#footer .logo { float:left; text-align: center; width: 60%}
#footer .right-part { float:right; width: 20%; padding-top: 0px}

#footer .social-icon { padding-bottom:5px}
#footer .social-icon span {line-height: 36px; display:inline-block; margin-right:10px}
#footer .social-icon ul { display:inline-block;}
#footer .social-icon li { list-style-type:none; display:inline-block; margin-right:10px}
#footer .social-icon li a { display:block; width:32px; height:32px; border-radius:32px; border:1px solid #000; text-align:center; line-height: 36px;}
#footer .social-icon li a:hover { border:1px solid #ff0000}

/* SLIDER */
.slider { position:relative; }
.slider .owl-stage-outer  { overflow:hidden}
.slider .owl-item { float:left; min-height:1px; }

.slider .owl-nav.disabled { display:none; }
.slider .owl-dots.disabled { display:none; }

.slider .owl-dots { position:absolute; width:max-content; transform:translate(-50%, 0); bottom:-20px; left:50%; }
.slider .owl-dots button { display:block; border:1px solid #fff; background:none; border-radius:10px; width:15px; height:15px; float:left; margin:0 5px;}
.slider .owl-dots button.active { background:#fff;  }
.slider .owl-dots span { display:none }

.slider .owl-nav button.disabled { display:none; }
.slider .owl-nav button { position:absolute; top:50%; z-index:10; display:block; width:60px; height:60px; border-radius:3px; background:rgba(0, 0, 0, 0.4); text-align:center; border:none; margin-top:-30px; cursor:pointer; color: #fff}
.slider .owl-nav button:hover { background:rgba(255,255,255,1); color: #000 }
.slider .owl-nav button span { display:block; text-align:center; font-size:24px}
.slider .owl-nav .owl-prev { left:20px; }
.slider .owl-nav .owl-next { right:20px;}

/* WEB FORM */
.web-form { background:#EEEEEE; padding: 30px; border-top:1px solid #808080;}
.web-form .field { padding-bottom: 20px;}
.web-form .field label { display: block; padding-bottom:10px; position:relative}
.web-form .field input { border: 1px solid rgba(0, 0, 0, 0.25); background: #fff; padding:0 10px; border-radius: 3px; height: 34px; width:100%}
.web-form .field textarea { border: 1px solid rgba(0, 0, 0, 0.25); background: #fff; padding:10px; border-radius: 3px; height: 120px; width:100%}

.web-form .field label .requered { color:#ff0000; font-size: 36px;position: absolute;top:-12px;}

.web-form .button { }
.web-form .button button { background:#000000; color: #fff; height: 34px; padding: 0 20px; display: block; border:none}
.web-form .button button:hover { background: #ff0000; cursor: pointer}



.comment-list { padding:25px 30px 0 30px;  background:#EEEEEE; }
.comment-list .comment-item { padding-bottom:25px}

.comment-list .comment-item .meta { float:left; width:40%; padding-right:20px}
.comment-list .comment-item .meta .thumb { float:left; width:80px; height:80px; border-radius:80px; overflow:hidden; margin-right:10px}
.comment-list .comment-item .meta .thumb img { width:100%; display:block; }
.comment-list .comment-item .meta .name { padding-top:22px; font-weight:bold; font-size:18px; color:#000}
.comment-list .comment-item .meta .published {  font-size:15px; color:#000}
.comment-list .comment-item .comment { background:#F5F5F5; padding:15px; float:right; width:60%}
.comment-list .comment-item .comment p { padding-bottom:16px; font-style: italic;font-weight: 500;font-size: 18px;line-height: 150%; color:#808080}
.comment-list .comment-item .comment .delete { float:right; color:#ff0000; font-size:15px; text-decoration:underline}
.comment-list .comment-item .comment .delete:hover {text-decoration:none}
.comment-list .comment-item .comment .date { color:#000; font-size:15px} 

.comment-list .comment-item:nth-child(2n) .meta { float:right; padding:0 0 0 20px}
.comment-list .comment-item:nth-child(2n) .comment { float:left}

/* POP */
.no-scroll { overflow:hidden}

.no-scroll #header { display:none}

.pop-overlay { display: none; position:fixed; left:0; right:0; top:0; bottom:0; z-index: 100; }
.pop-overlay.scroll { overflow-y: scroll}
.pop-overlay .overlay { position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.8); z-index: 1;}
.pop-overlay .pop-wrapper { width:100%; max-width:340px; border-radius:8px; left:50%; top:100px; transform:translate(-50%, 0); padding-bottom:40px; z-index:100; position:relative}
.pop-overlay .pop-wrapper .close { position:absolute; right:-40px; top:-40px; color:#fff; font-size: 36px; transform: rotate(45deg);}
.pop-overlay .pop-wrapper .pop-header { background:#fff; position:relative; text-align:center; padding:20px 20px 0 20px }
.pop-overlay .pop-wrapper .pop-content { padding:20px; background: #fff }


/* NFT */
.nft-generator .row { display: grid; grid-auto-flow: column; }
.nft-generator .col { position: relative}
.nft-generator .name { color: #000; font-size:36px; line-height:56px; padding-bottom: 40px; text-align: center}

.nft-generator .line { position: absolute; right: 0; top: 80px; bottom: 0; width: 1px; background: #000; }
.nft-generator .line:before { content:''; position: absolute; top: 0; left:-2px; width:5px; height:5px; background: #000; transform:rotate(45deg);}
.nft-generator .line:after { content:''; position: absolute; bottom: 0; left:-2px; width:5px; height:5px; background: #000; transform:rotate(45deg);}

.nft-generator .nft-select-list li { list-style-type: none; text-align: center; position: relative; padding-bottom: 30px;}
.nft-generator .nft-select-list .thumb { width: 200px; margin: auto; position: relative; left: -50px}
.nft-generator .nft-select-list .thumb img { width: 100%; display: block; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;}
.nft-generator .nft-select-list .thumb .refresh { display: block; width:53px; height: 53px; background-image: url(../images/refresh.svg); background-repeat: no-repeat; position: absolute; left: 210px; top:50%; transform:translate(0, -50%); }

.nft-generator .nft-preview { position:relative; left:50%; top:50%;  transform:translate(-50%, -50%);} 
.nft-generator .nft-preview .thumb { width: 400px; display: block; margin:0 auto 20px auto;}
.nft-generator .nft-preview .thumb img { display: block; width: 100%; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px}

.nft-generator .nft-blockchain li { list-style-type: none; text-align: center; position: relative; padding-bottom: 30px;}

.nft-generator .nft-blockchain label { width: 150px; margin: auto; position: relative; display: block}
.nft-generator .nft-blockchain label img { display: block; width: 100%}
.nft-generator .nft-blockchain label input { position: absolute; left: -25px; top: 50%; transform:translate(0, -50%);}


.nft-generator .button { text-align:center; }
.nft-generator .button button { background-color:transparent; background-image:url(../images/btn.png); width:227px; height:108px; font-size:48px; color:#fff; text-align:center; border: none; cursor:pointer}

/* NFT END */





/* VOTE */
.vote {}
.vote .row { }
.vote .row .col { float: left; width: 49%; padding-bottom: 40px}
.vote .row .col:nth-child(2n) { float: right}
.vote .active { color: #00FF00}
.vote .finished { color: #ff0000}


.vote-list ol { padding-left: 20px; }
.vote-list a:hover { color: #ff0000}

.current-vote .button { padding-top: 20px}
.current-vote .button button { background-color:transparent; background-image:url(../images/btn.png); width:227px; height:108px; font-size:48px; color:#fff; text-align:center; border: none; cursor:pointer}

.current-vote li { padding-bottom: 5px; position: relative; list-style-type: none}

label.check { position: relative; padding-left:30px; display: block;}
label.check input { opacity: 0; position: absolute;}
label.check .checkmark { position: absolute; width: 20px; height: 20px; border: 0.8px solid #AEAEAE; left:0; top:2px;}
label.check input:checked ~ .checkmark { background-color: transparent; font-weight: bold;}
label.check input:checked ~ .checkmark:before { content: ''; position: absolute; width: 16px; height: 16px; left: 1px; top: 1px; background: #000 }
label.check input:checked:disabled ~ .checkmark:before { background: #68cd4a }

.result-vote { padding-bottom: 40px}
.result-vote table { width: 100%; border-collapse: collapse}
.result-vote td { padding: 4px; border: 1px solid #ccc}

.result-vote table thead { font-weight: bold; }
.result-vote table tfoot { background-color: #68cd4a; font-weight: bold; }


/* VOTE END */



@media (max-width:1200px) {
	.wrapper { width: 100%; padding:0 10px }

	#header .menu li { margin-right: 30px; }


	/* NFT */
	.nft-generator .row { display: block; }
	.nft-generator .row .col { padding: 40px 0;}
	.nft-generator .row .col:first-child { padding-top: 0}
	
	.nft-generator .line {  right: 10px; left: 10px; top:auto; bottom: 0; width:auto; height:1px;  }
	.nft-generator .line:before { top: -2px; left:0; right: auto}
	.nft-generator .line:after { top: -2px; right:0; left: auto}
	

	.nft-generator .nft-select-list li { float: left; width: 32%; margin-right: 2%; padding-bottom: 100px}
	.nft-generator .nft-select-list li:nth-child(3n) { margin-right: 0}
	.nft-generator .nft-select-list .thumb {left:0}
	.nft-generator .nft-select-list .thumb .refresh { left: 50%; top: 110%; transform: translate(-50%, 0%);}
	
	.nft-generator .nft-preview { position:relative; left:50%; top:0%;  transform:translate(-50%, 0%);} 
	
	.nft-generator .nft-blockchain li { float:left; width:32%; margin-right:2%; padding-bottom: 70px}
	.nft-generator .nft-blockchain li:nth-child(3n) { margin-right: 0}
	
	.nft-generator .nft-blockchain label input { left: 50%; top: 110%; transform: translate(-50%, 0%);}
	/* NFT END */


	/* VOTE */
	.vote .row .col { float: none; width: 100%; }
	.vote .row .col:nth-child(2n) { float: none}
	/* VOTE END */

}

/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) { 
	.wrapper { width: 100%; padding:0 10px }


	#header .button { float: none; height: 30px; text-align: center; margin-bottom: 20px}

	#header .button li { float:none; display: inline-block; margin:0 5px;}
	
	#header .button li span { display: none}
	#header .menu li { margin-right: 20px; }

}

/* Landscape phone to portrait tablet */
@media (max-width:767px) {
	.wrapper { width: 100%; padding:0 10px }
	
	
	#header.downscroll { top:-100px; opacity:0}
	#header.upscroll { 
		top:0; opacity:1; 
		-webkit-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s;
	}
	
	
	.post-list .post-item { width:calc(50% - 15px); }
	
	h1 {font-size: 24px;}
	
	#center { padding-top: 170px}
	
	#header { position: fixed; top:0; left: 0; width: 100%; z-index: 10}
	
	#header .toggle-nav { display:block; }
	
	#header .button { float: none; height: 30px; text-align: center; margin-bottom: 20px}
	#header .button li { float:none; display: inline-block; margin:0 5px;}
	
	#header .button li a { font-size: 16px}
	#header .button li span { display: none}
	
	#header .menu { display: none; float: none; position: relative; }
	#header .menu.active { display: block;}
	#header .menu li { display: block; float: none; text-align: center; padding:20px 0; position: relative; margin-right: 0;}
	#header .menu li:after { content:''; height: 1px; width: 60px; background:#C4C4C4; position: absolute; left: 50%; bottom: 0; margin-left: -30px}
	#header .menu li:last-child:after { display: none}
	
	#footer .left-part { float:none; width: 100%; text-align: center; padding:0 0 20px 0}
	#footer .logo { float:none; width: 100%; text-align: center; }
	#footer .right-part { float:none; width: 100%; text-align: center; padding: 20px 0 0 0;}

	.comment-list .comment-item .meta { float:none; padding:0 0 20px 0; width:100%; height:100px;}
	.comment-list .comment-item .comment { float:none; width:100%}
	.comment-list .comment-item:nth-child(2n) .meta { float:none; padding:0 0 20px 0;; width:100%}
	.comment-list .comment-item:nth-child(2n) .comment { float:none; width:100%}


	/* NFT */
	.nft-generator .nft-select-list .thumb { width: 120px }
	/* NFT END */

	
	/* VOTE */
	.vote .row .col { float: none; width: 100%; }
	.vote .row .col:nth-child(2n) { float: none}
	/* VOTE END */
	
}

/* Landscape phones and down */
@media (max-width:480px) { 
	.wrapper { width: 100%; padding:0 10px }
	
	.post-list .post-item { width: 100%; float: none}
	
	h1 {font-size: 24px;}
	
	.post-nav .post-item { border-bottom:1px solid #808080; border-right:none; padding:20px 20px 10px 20px; float:none; width:100%; text-align: center}
	.post-nav .post-item:nth-child(2n) { float:none; border:none; text-align: left; text-align: center}

	.web-form { background:#EEEEEE; padding:20px 10px; }
	
	#footer .left-part { float:none; width: 100%; text-align: center; padding:0 0 20px 0}
	#footer .logo { float:none; width: 100%; text-align: center; }
	#footer .right-part { float:none; width: 100%; text-align: center; padding: 20px 0 0 0;}

	.comment-list { padding:25px 10px 0 10px; }

	.comment-list .comment-item .meta { float:none; padding:0 0 20px 0; width:100%; height:100px;}
	.comment-list .comment-item .comment { float:none; width:100%}
	.comment-list .comment-item:nth-child(2n) .meta { float:none; padding:0 0 20px 0;; width:100%}
	.comment-list .comment-item:nth-child(2n) .comment { float:none; width:100%}

	
	/* NFT */
	.nft-generator .name { font-size: 36px;}
	
	.nft-generator .nft-select-list .thumb { width: 280px }
	.nft-generator .nft-select-list li { float: none; width: 100%; margin-right: 0 !important; padding-bottom:100px;}
	
	.nft-generator .nft-preview .thumb { width: 280px;}
	
	.nft-generator .nft-blockchain li { float: none; width: 100%; margin-right: 0 !important; padding-bottom:70px;}
	/* NFT END */
	
}

.text-muted{
	color: #6c757d!important;
}