/* top */
#myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: #41A3EF; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ }
#myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ }
.column {width:300px;float:left}
.comments { width:500px; height:120px; }
.messagepage { width:1000px; background-color:#D6D7D2;vertical-align:middle; text-align:center; font-size:32px;height: 20em; position: relative; top: 50%;}
/* nft */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {  max-width: 964px; position: relative; margin: auto; }
/* Hide the images by default */
.mySlides { display: none; }
/* Next & previous buttons */
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #717171; }
/* Fading animation */
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* faq */
body{ font-family: 'Work Sans', sans-serif; }
.faq-heading{ border-bottom: #777; padding: 20px 60px; }
.faq-container{ display: flex; justify-content: left; flex-direction: column; }
.hr-line{ width: 90%; margin: auto; }
.pg-line{ width: 100%; margin: auto; }

/* Style the buttons that are used to open and close the faq-page body */
.faq-page { /* background-color: #eee; */ font-size: 22px; color: #444; cursor: pointer; padding: 15px 20px; width: 90%; border: none; outline: none; transition: 0.4s; margin: auto; }
.faq-body{ margin: auto; /* text-align: center; */ width: 90%; padding: auto; }
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover { background-color: #F9F9F9; color: #FF0000; }
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}
.faq-page:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    vertical-align: top;
    margin-left: 5px;
}
.active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */ }

.accordion { margin: auto; width: 900px; }
.accordion input { display: none; }
.box1 { position: relative; background: black; height: 206px; transition: all .15s ease-in-out; }
.box2 { position: relative; background: white; height: 64px; transition: all .15s ease-in-out; }
.box { position: relative; background: white; height: 64px; transition: all .15s ease-in-out; }

.box1::before { content: ''; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); }
.box2::before { content: ''; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); }
.box::before { content: ''; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); }

header.box {
	background: #41A3EF;
	z-index: 100;
	cursor: initial;
	box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
header .box-title {
	margin: 0;
	font-weight: normal;
	font-size: 16pt;
	color: white;
	cursor: initial;
}
.box-title {
	width: calc(100% - 40px);
	height: 44px;
	line-height: 64px;
	padding: 0 20px;
	display: inline-block;
	cursor: pointer;
	-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.box-content {
	width: calc(100% - 40px);
	padding: 20px 10px;
	font-size: 11pt;
	color: rgba(0,0,0,.54);
	display: none;
}
.box-close {
	position: absolute;
	height: 44px;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	display: none;
}
input:checked + .box {
	height: auto;
	margin: 16px 0;
    box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}
input:checked + .box .box-title {
	border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box .box-content,
input:checked + .box .box-close {
	display: inline-block;
}
.arrows section .box-title {
	padding-left: 44px;
	width: calc(100% - 64px);
}
.arrows section .box-title:before {
	position: absolute;
	display: block;
	content: '\203a';
	font-size: 18pt;
	left: 20px;
	top: -2px;
	transition: transform .15s ease-in-out;
	color: rgba(0,0,0,.54);
}
input:checked + section.box .box-title:before {
	transform: rotate(90deg);
}