@import url("https://fonts.googleapis.com/css?family=Raleway:400,700,900");
body {
  padding: 0;
  margin: 0;
  font-family: 'Helvetica', Arial, sans-serif;
  background-image: url(/assets/images/background.svg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 15px;
}
body .btn-bg {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
	/*opacity: 0;*/
	/*animation: fadeIn 5s forwards;*/
	/*-webkit-animation: fadeIn 5s forwards;*/
}
body .btn-bg.bg-1 {
  background: linear-gradient(rgba(120, 201, 141, 0.9), rgba(86, 145, 103, 0.9));
  background-blend-mode: multiply;
  background-size: calc(100% + 30px) calc(100% + 30px);
  background-position: -15px -15px;
  border: 15px double #f4f2dc;
  box-sizing: border-box;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
}
body .btn-bg.bg-1 .btn-1 #button {
  color: #5b9a6d;
  background: #f4f2dc;
  border: none;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  line-height: 40px;
}
body .btn-bg.bg-1 .btn-1 #button:hover {
  background: transparent;
  color: #f4f2dc;
}
body .btn-bg.bg-1 .btn-1 #button:hover:before,
body .btn-bg.bg-1 .btn-1 #button:hover:after {
  -webkit-transition: all 0.7s ease 0.5s;
  transition: all 0.7s ease 0.5s;
  width: 100%;
}
body .btn-bg.bg-1 .btn-1 #button:before,
body .btn-bg.bg-1 .btn-1 #button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  width: 0px;
  height: 5px;
  background: #f4f2dc;
  transition: all 0.4s ease 0.5s;
  -webkit-transition: all 0.4s ease 0.5s;
}
body .btn-bg.bg-1 .btn-1 #button:after {
  top: inherit;
  left: inherit;
  bottom: 0;
  right: 0;
}
.btn {
  margin: 0 auto 0 auto;
  display: block;
}
h2 {
  text-align: center;
  font-family: 'Raleway';
  font-weight: 600;
  color: #fff;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

#button {
  cursor: pointer;
  overflow: hidden;
  outline: none;
  color: #fff;
  position: relative;
  letter-spacing: 0.15rem;
  padding: 3rem 3.5rem 2.8rem 3.5rem;
  text-transform: uppercase;
	font-family: "ltr-federal-bureau-12-horiz", 'Raleway', sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 5em;
	text-decoration: none;
/*	opacity: 0;
	animation: fadeIn 5s forwards;
	animation-delay: 4s;
	-webkit-animation: fadeIn 5s forwards;
	-webkit-animation-delay: 4s;*/
  
}

@media only screen and (max-width: 600px) {
#button {
  padding: 2.1rem 3rem 1.8rem 3rem;
  font-size: 4em;
}
}

@media only screen and (max-width: 462px) {
#button {
  padding: 1.5rem 2rem 1.2rem 2rem;
  font-size: 3em;
}
}

@media only screen and (max-width: 427px) {
#button {
  padding: 1.3rem 2rem 1rem 2rem;
  font-size: 2.5em;
}
}

@media only screen and (max-width: 344px) {
#button {
  padding: 1rem 1.8rem 0.7rem 1.8rem;
  font-size: 2em;
}
}

#button a {
  text-decoration: none;
}

header {
	position: fixed; width: 56px; height: 55px; top: 57px; left: 60px;
	color:#f4f2dc; text-align: center; vertical-align: middle;
/*	opacity: 0;
	animation: fadeIn 5s forwards;
	animation-delay: 10s;
	-webkit-animation: fadeIn 5s forwards;
	-webkit-animation-delay: 10s;*/
}

header span {
	display: none;
}

header #language {
	display: inline-block; 
	text-align: left !important;
	align-items: left;
	float: left;
	margin: 66px 0 0 -1px;
	max-width: 1px;
	white-space: nowrap;
	padding: 0;
	height: auto;
	z-index: 200000;
}

article {
	position: absolute;
	top: 50px;
	left: 50%;
	width: 480px;
	margin: 0 0 0 -240px;
	height: auto;
	color: #000;
	font-size: 2em;
}

nav {
	position: fixed;
	top: 57px;
	right: 57px;
	margin: 10px;
	color: #f4f2dc;
/*	opacity: 0;
	animation: fadeIn 5s forwards;
	animation-delay: 10s;
	-webkit-animation: fadeIn 5s forwards;
	-webkit-animation-delay: 10s;*/
}
nav .share {
	cursor: pointer !important;
}
nav .spread {
	padding: 5px 9px 10px 11px;
}



aside {
	font-family: "Raleway";
}

aside#donate_container {
}

aside #donate_close-bg {
	position: absolute;
	width: 100vw;
	height: 100vh;
	display: block;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.25);
	cursor: pointer;
	z-index: 10000;
}

aside #donate {
	display: block;
	min-width: 400px;
	width: calc(75vw - 15em);
	max-width: 550px;
	height: calc(100vh - 10em);
	aspect-ratio: 1.0;
	position: absolute;
	display: block;
	background-color: #ffffff;
	border: 15px double #5c9a6d;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 15px 15px 0 15px;
	color: #5c9a6d;
	text-align: center;
	z-index: 15000;
}

aside #donate iframe {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	border: 0;
}

aside#qr_container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	display: block;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.25);
	display: none;
	cursor: pointer;
	z-index: 10000;
}
aside #qr {
	display: block;
	max-width: 375px;
	max-height: 375px;
	aspect-ratio: 1.0;
	position: absolute;
	display: block;
	background-color: #f4f2dc;
	border: 15px double #5c9a6d;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 15px 15px 0 15px;
	color: #5c9a6d;
	text-align: center;
}

aside #qr .note {
	padding: 0 20px;
	margin: 0 0 -35px 0;
}

aside #qr svg#a {
	width: 100%;
	height: 100%;
	aspect-ratio: 1.0;
}

aside#share_container {
	position: absolute;
	width: 100vw;
	height: 100vh;
	display: block;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.25);
	display: none;
	cursor: pointer;
	z-index: 10000;
}
aside #share {
	display: block;
	max-width: 375px;
	max-height: 375px;
	aspect-ratio: 1.0;
	position: absolute;
	display: block;
	background-color: #f4f2dc;
	border: 15px double #5c9a6d;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px 15px 0 15px;
	color: #5c9a6d;
	text-align: center;
}

aside #share .note {
	padding: 20px 20px 0 20px;
	margin: 0 0 0 0;
}

aside #share .sharing {
	position: relative;
	max-width: 375px;
	max-height: 375px;
	margin: 0 0 0 -50%;
	padding: 30px 20px 0 66px;
}

footer {
/*	opacity: 0;
	animation: fadeIn 5s forwards;
	animation-delay: 7s;
	-webkit-animation: fadeIn 5s forwards;
	-webkit-animation-delay: 7s;*/
}

footer #title {
	float: right; font-family: 'Raleway'; position: fixed; width: calc(100vw - 201px); height: auto; bottom: 60px; right: 61px; color:#f4f2dc; text-align: right; vertical-align: middle; font-size: 2.5em; display: inline; 
	padding: 10px 0 10px 80px;
	border-bottom: 5px solid #f4f2dc;
	display: block;
	text-transform: capitalize;
	font-weight: 900;
}
footer #title .nowrap {
	white-space: nowrap
}
@media only screen and (max-width: 344px) {
  footer #title {
	  font-size: 2em; line-height: 1.2em;
  }
}

a, a:hover, a:visited, a:active, a:visited:hover, a:active:hover {
	color: #f4f2dc;
}

footer #icon {
	position: fixed; width: 56px; height: 55px; bottom: 67px; left: 61px; float: left; display: block;
	color:#f4f2dc; text-align: center; vertical-align: middle;
}


@font-face {font-family: 'Almighty'; src: url("/assets/fonts/almighty.ttf"); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Almighty'; src: url("/assets/fonts/almighty.eot"); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Almighty'; src: url("/assets/fonts/almighty.otf"); font-weight: normal; font-style: normal;}

@font-face {font-family: 'Prayer'; src: url("/assets/fonts/prayer.ttf"); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Prayer'; src: url("/assets/fonts/prayer.eot"); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Prayer'; src: url("/assets/fonts/prayer.otf"); font-weight: normal; font-style: normal;}