body {
	margin: 0;
	/*font-family: 'Work Sans', sans-serif;*/
	font-family: 'Roboto Mono', sans-serif;
	font-weight: 300;
	letter-spacing: 0.01em;
	background: #f3f2f2;
	width:100%;
	/* color:  #41424a; */
	overflow-y:scroll;
}

/*
body.overlay-expanded {
	overflow: hidden;
	padding-right: 15px;
}

body.overlay-expanded #topButtons, body.overlay-expanded #back-to-top {
  margin-right: 15px;
}
*/

.overlay-expanded #messageFeed {
    position: fixed;
}


.secundary-color {
	color: #3f5dd8;
	font-weight: 300;
	color: gray;
}

.grey {
	color: #9a9a9a;
}

* {
	box-sizing: border-box;
}

h1 {
	font-weight: 500;
	margin: 0;
	letter-spacing: -0.05em;
	font-size: 1.5em;
	color: #252525;
}

h4 {
    font-weight: 500;
}

a {
	text-decoration: none;
	color: inherit
}

b { font-weight:500}

.small{
	font-size:0.7em;
	line-height:1.5em;
	max-width: 80%;
}


#logo{display: inline-block;}


#signature {
    display: inline-block;
    font-size: 1.5em;
    letter-spacing: -0.04em;
    width: 100%;
    padding-bottom: 3vh;
    text-align: center;
}


#explainer {
    max-width: 1320px;
    margin: auto;
    width: 80%;
    padding: 3vh 0;
    text-align: center;
}

.step {
    display: inline-block;
    padding: 2rem;
    width: 30%;
    text-align: left;
    vertical-align: top;
    margin: auto;
}




.step h3 {
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 300;
}


.step h1 {
    font-weight: 400;
    margin-bottom:0.7rem;
}


img.twitter {
    height: 15px;
    opacity: 0.7;
    margin-bottom: -1px;
}

.step.step-4 {
    text-align: center;
    width: 100%;
}

.step.step-4 a {
	opacity:0.8
}

.step.step-4 a:hover {
	opacity:1
}

.step.step-4 a:hover img.twitter {
	opacity:1
}



#back-to-top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 99;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 30px;
	background: #fff;
	color: #444;
	cursor: pointer;
	border: 0;
	text-decoration: none;
	transition: opacity 0.2s ease-out;
	opacity: 0;
	box-shadow: rgba(76, 76, 76, 0.06) 0px 1px 5px 0px;
	border-radius: 55px;
	padding-top: 3px;
}

body.windows #back-to-top {
	padding-top: 0px;
}

#back-to-top:hover {
	background: #e9ebec;
}

#back-to-top.show {
	opacity: 1;
}

#content {
	height: 2000px;
}



#top {
	width: 100%;
	float: left;
	top: 0;
	padding: 10px 50px;
	position: fixed;
	background: rgba(255, 255, 255, 0);
	transition: background 0.2s ease-in-out;
	/* box-shadow: rgba(76, 76, 76, 0.15) 0px 1px 5px 0px; */
	z-index: 1;
	border-bottom: 0px #e0e0e0 solid;
}


#top.scrolled {
	background: rgba(255, 255, 255, 1);
	border-bottom: 1px #e0e0e0 solid;
}


#top.nav-up {
	top: -220px;
}

#name {
	float: left;
	padding: 10px 0;
}

#msgform {
	width: 100%;
}



#messageForm, #aboutOverlay, #searchOverlay {
	display: none;
}

#messageInput {
	width: 100%;
}

#messageFeed {
	width: 100%;
	max-width: 1920px;
	min-height: 100vh;
	margin: auto;
	padding: 100px 50px 193px 50px;
}

#charNum {
	float: right;
	max-width:50%;
	text-align:right;
}

#price {
	float: left;
	text-align: left;
	max-width:50%;
}

#charNum, .price-details,
#price {
	font-size: 12px;
	color: #696969;
}

.price-conversions {
	font-size: 0.8em
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	margin-bottom: 50px;
	top: 0;
	z-index: 100;
}

.overlay-inner {
	margin: 90px auto;
	max-width: 760px;
	width: 100%;
	background: #fff;
	position: relative;
	padding: 2em 2em 3em 2em;
}

.overlay-back {
	content: '';
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	width: 100%;
	height: 100%;
}

.allowCopy{ position:relative}

.copied:after{content:"copied";display:block;color: #696969;font-size: 10px;padding-top: 2px;letter-spacing: .03em;font-weight: 300;position: absolute;top: 20px;left: -2px;}

.message-preview {
    padding: 20px 30px;
    background: #ececec;
    margin-bottom: 15px;
    /* width: 66%; */
}

#collectorAddress{
	display: block;
	/* margin-top: 15px; */
	/* font-weight: 500; */
}


textarea#collectorAddressVal {
    padding: 0;
    border: none;
    font-size: 1em;
    box-shadow: none;
    height: 17px;
    font-weight: 300;
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none; /*remove the resize handle on the bottom right*/
    background: no-repeat;
}



.addressFunction{
    display: inline-block;
    margin: 0.5em 1em 1em 0;
    opacity: 0.5;
    vertical-align: text-top;
}

.addressFunction:hover{opacity:1}

.payment-info-el{margin-bottom: 30px;}

.message-preview label {
    margin-bottom: 0px;
    color: #000;
    font-weight: 400;
}

.message-preview-text {
    /* color: #000000; */
    margin-bottom: 10px;
}

#addressDetails {
	width: 100%;
	float: left;
	box-sizing: border-box;
	/* padding-right: 40px; */
}



.message-preview h1 {
    font-weight: 400;
    margin: 0px  0;
    /* background: #fff; */
    padding: 0rem 0;
    font-size:2em;
}

.message-preview .price-details{
	font-size: 0.6em;
	font-weight: 300;
	color:#000;
	letter-spacing: 0.02em;
}

.message-preview h3 {
    font-weight: 300;
    margin: 0px  0;
    /* background: #fff; */
    padding: 0.5rem 0;
    font-size:1em;
}

	
#qrcode {
    float: none;
    width: 35%;
    margin: auto;
    padding: 30px 0px 50px 0px;
 }


#qrcode canvas {
    border: #fff 11px solid;
}

	



.feedback-image{
	display: inline-block;
	width: 22px;
	margin-right: 13px;
	/* margin-left: -5px; */
	margin-top: 1px;
}

.feedback-image img{
	width: 100%
}
.feedback-text{
	display: inline-block;
	width: 84%;
	font-weight: 400;
	font-size: 17px;
	vertical-align: top;
}


#payment-status {
    width: 100%;
    font-size: 12px;
    margin-bottom: 16px;
    margin-top: -10px;
}

#countDown {
    position: absolute;
    right: 33px;
    width: 50%;
    margin-top: 2px;
    text-align: right;
}

#checkResult {
    float: left;
    width: 50%;
}

#checkResultStatus {
    width: 100%;
    /* text-align: center; */
    clear: both;
    padding: 9px 0 0 0;
    font-size: 10px;
    max-width: 300px;
}




.message-display {
    position: fixed;
}


.clearfix:after {
	content: ".";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}







textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
}

input.search-field {
    width: 100%;
    resize: none;
    font-size: 2em;
    font-weight: 200;
    padding: 0.2em .3em .3em .3em;
    border: #e6e6e6 1px solid;
    margin-bottom: 10px;
    height: auto;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    color: #41424a;
    background: #ffffff;
    letter-spacing: 0.03em;
    float: left;
    height: 55px;
    font-family: Roboto;
}





input[type="submit"], .top-button, #loadMore, .close-overlay.close-text {
	width: 100%;
	background-color: #252525;
	color: #fff;
	text-transform: uppercase;
	padding: 12px 35px;
	float: right;
	border: none;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
	cursor: pointer;
	transition: 0.3s;
	/* height: 60px; */
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: unset;
	font-family: 'Roboto Mono', sans-serif;
	margin: 6px 0 0 0;
}




.top-link {
    float: right;
    padding: 15px 30px 15px 0;
}


input.pay-and-send { margin-top:2em}


.right-arrow {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjQ5IDMxLjQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMS40OSAzMS40OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PHBhdGggZD0iTTIxLjIwNSw1LjAwN2MtMC40MjktMC40NDQtMS4xNDMtMC40NDQtMS41ODcsMGMtMC40MjksMC40MjktMC40MjksMS4xNDMsMCwxLjU3MWw4LjA0Nyw4LjA0N0gxLjExMSAgQzAuNDkyLDE0LjYyNiwwLDE1LjExOCwwLDE1LjczN2MwLDAuNjE5LDAuNDkyLDEuMTI3LDEuMTExLDEuMTI3aDI2LjU1NGwtOC4wNDcsOC4wMzJjLTAuNDI5LDAuNDQ0LTAuNDI5LDEuMTU5LDAsMS41ODcgIGMwLjQ0NCwwLjQ0NCwxLjE1OSwwLjQ0NCwxLjU4NywwbDkuOTUyLTkuOTUyYzAuNDQ0LTAuNDI5LDAuNDQ0LTEuMTQzLDAtMS41NzFMMjEuMjA1LDUuMDA3eiIgZmlsbD0iI0ZGRkZGRiIvPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
	background-position: 95%;
	background-size: 15px;
	background-repeat: no-repeat;
}

input[type="submit"]:hover{
	background-color: #383838;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px 0px;
	background-position: 96%;
}

textarea {
	width: 100%;
	resize: none;
	font-size: 2em;
	font-weight: 200;
	padding: 0.2em .3em .3em .3em;
	border: #e6e6e6 1px solid;
	margin-bottom: 10px;
	height: auto;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
	color: #41424a;
	background: #ffffff;
	letter-spacing: 0.03em;
	float: left;
	height: 95px;
}

label {
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	width: 100%;
	display: block;
	margin-bottom: 3px;
	color: #666871;
}

.feed-message-el {
	/* margin-bottom: 10px */
}

.icon {
    width: 12px;
    margin-bottom: 0px;
    margin-left: 2px;
    opacity: 0.9;
}

.message-content {
	font-size: 1.6em;
	line-height: 1.1em;
	font-weight: 400;
	margin-top: 6px;
	float: left;
	width: 90%;
	margin-bottom: 10px;
	letter-spacing: 0.02em;
	overflow: hidden;
	/* font-family: 'Roboto', sans-serif; */
	padding-bottom: 3px;
}

.feed-message {
	margin: 1.5em 0;
	padding: 1.5em 1.5em;
	background: #fff;
	border-radius: 4px;
	/* box-shadow: rgba(76, 76, 76, 0.04) 0px 1px 5px 0px; */
	animation: animateElement linear .3s;
	width: 33.3333333%;
	/* display: none; */
	/* border: 1px #e6e6e6 solid; */
	padding-bottom: 1em;
}

.transaction-id {
	width: 100%;
	font-weight: 400;
	font-size: 0.8em;
	/* margin-top: 5px; */
}

.transaction-id a {
    width: 86%;
    display: inline-block;
    line-height: 1.6em;
}


.trimTxId {
    width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 1;
}

.time-stamp {
	/* color: black; */
	padding-bottom: 0.2em;
}


.color-div {display:inline-block;height: 8px;width: 8px;background:#ccc;border-radius: 40px;margin: 0px 5px 2px -1px;}

#loadMore {
	width: 40%;
	margin: auto;
	margin-top: 170px;
	float: none;
}

#loadMore:hover {
	background: #383838;
}



#triggerMessage {
	max-width: 200px;
}

#triggerMessage:hover {
	background: #444444;
}



#expandMessage, .close-overlay.close-text {
	max-width: 210px;
	background: #fff;
	color: #252525;
	border: #eaeaea 1px solid;
	margin-right:20px;
}

#expandMessage:hover, .close-overlay.close-text:hover {
	background: #f3f3f3;
}


#topButtons .top-link .icon{ 
    display:none;
}

.close-overlay.close-text {
	clear: both;
	float: none;
	margin: auto;
	max-width: 400px;
	margin-top: 20px
}

form input[type="submit"] {
    float: none;
}










@keyframes animateElement {
	0% {
		opacity: 0;
		transform: translate(0px, 10px);
	}
	100% {
		opacity: 1;
		transform: translate(0px, 0px);
	}
}

.myClass img:nth-child(1) {
	animation-delay: .5s
}

.myClass img:nth-child(2) {
	animation-delay: 1s
}

.myClass img:nth-child(3) {
	animation-delay: 1.5s
}

.myClass img:nth-child(4) {
	animation-delay: 2s
}



input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #d2d2d2;
}

input::-moz-input-placeholder, textarea::-moz-placeholder {
	/* Firefox 19+ */
	color: #d2d2d2;
}

input::-ms-input-placeholder, textarea:-ms-input-placeholder {
	/* IE 10+ */
	color: #d2d2d2;
}

input:-moz-placeholder, textarea:-moz-placeholder {
	/* Firefox 18- */
	color: #d2d2d2;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
	color: transparent;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
	color: transparent;
}

input:focus:-moz-input-placeholder, textarea:focus:-moz-input-placeholder {
	color: transparent;
}

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.blink {
  font-weight: 100;
  font-size: 30px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}





.mobile { display:none}

@media only screen and (max-width : 1024px) {
	.step{ width: 100%; padding: 1rem 0;}
}


@media only screen and (max-width : 720px) {
	#messageFeed {
		padding: 100px 20px 193px 20px;
	}
}


@media only screen and (max-width : 534px) {
	#messageFeed {
		padding: 100px 0px 193px 0px;
	}
}

@media only screen and (max-width : 720px) {
	.mobile { display:block}
    
    
	#topButtons .top-button, #topButtons .top-link .text{ 
        display:none
    }

	#topButtons #triggerAbout.top-link{ 
        position: absolute; right: 0; top: 4px
    }

    #topButtons #triggerSearch.top-link{ 
        position: absolute; left: 0; top: 5px
    }
    
    #topButtons .top-link .icon{
        display:block;
        width: 22px;
    }
	
	#topButtons-mobile {
		position: fixed;
		bottom: 38px;
		left: 0;
		width: 100%;
		max-width: 100%;
		height: 40px;
		padding: 0 20px;
	}
	


	#topButtons a {
		max-width: 100%;
		padding: 10px;
	}



	#top {
		padding: 0px 20px 0 20px;
	}

	h1#logo {
		font-size: 1.4em;
		text-align: center;
		width: 100%;
	}

	.step {
		display: none;
	}
	
	.step-4 {
		display: block;
	}
	
	
	div#signature-mobile {
        font-size: 1.4em;
        position: absolute;
        width: 100%;
        text-align: center;
        padding: 0;
        left: 0;
        top: 90px;
        z-index: -1;
        padding: 30px;
        color: #9e9e9e;
 	}
    

    #topButtons-mobile #triggerMessage, #topButtons-mobile #expandMessage {
        max-width: 800px;
        padding-right: 0;
        padding-left: 0;
	}
    
    #topButtons-mobile #triggerMessage {
        width: 100%;
        /* margin-left: 20px; */
        float: left;
 }

  .address-available #topButtons-mobile #triggerMessage {
        width: 48%;
 }
	
	#topButtons-mobile #expandMessage {
        width: 48%;
        float: right;
        margin-right: 0;
 }

    .overlay-inner {margin-top:0;margin-bottom: 0;min-height: 100%;}
   

	#name {
		width: 100%;
	}

	#back-to-top {
		bottom: 90px;
		right: 20px;
		width: 45px;
		height: 45px;
		padding-top: 7px;
		border: 1px #e7e7e7 solid;
	}
	
	body.windows #back-to-top {
		padding-top: 4px;
	}

	.feed-message {
		border-radius: 0;
		border: none;
	}

	div#messageFeed {
		padding-top: 85px;
		padding-bottom: 110px;
	}

	div#loadMore {
		width: 80%;
		margin-top: 50px;
	}
	
	input[type="submit"], .top-button, #loadMore, .close-overlay.close-text {
		float:none;
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		padding: 15px;
	}




	.overlay {
		margin-bottom: 0px;
	}

	div#price {
		float: none;
		max-width: 100%;
	}

	div#charNum {
		float: none;
		text-align: left;
		margin-bottom: 1rem;
		max-width: 100%;
	}

	.message-preview {
		width: 100%;
	}
	
	
	.message-preview h1 {
    /* font-size: 14px; */
 }

	div#qrcode {
			padding: 0;
			width: 100%;
	}

	canvas {
			margin: auto;
			display: inherit;
			margin: 10px auto 20px auto;
	}

	div#newMessageInner {
			margin: 0;
	}

	


	#countDown {
		position: relative;
		left: 0px;
		width: 50%;
		margin-top: 2px;
		margin-bottom: 10px;
		text-align: left;
	}

	.icon {
		margin-bottom: -3px;
		opacity: 1;
	}

	
}


@media only screen and (min-device-width : 768px) {
/* Styles */
}


@media only screen and (min-width : 1224px) {

	input[type="submit"], .top-button, #loadMore {
		transition: 0.3s;
	}
	
	
}