/* CSS Stylesheet */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*My style sheet starts here*/
/* GENERAL LAYOUT */
body {
	font-size: 1.2em;
	line-height: 1.5;
	/*margin: 1em;*/
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	background-color: #f6f5fa;
	color: #090a0a;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1036%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c235 C 96%2c201.2 288%2c80.8 480%2c66 C 672%2c51.2 768%2c148.2 960%2c161 C 1152%2c173.8 1344%2c136.2 1440%2c130L1440 560L0 560z' fill='rgba(124%2c 165%2c 50%2c .5)'%3e%3c/path%3e%3cpath d='M 0%2c280 C 96%2c322.8 288%2c473.6 480%2c494 C 672%2c514.4 768%2c380.8 960%2c382 C 1152%2c383.2 1344%2c476.4 1440%2c500L1440 560L0 560z' fill='rgba(97%2c 121%2c 54%2c .3)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1036'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
}
main {
	margin: 1em;
}
/* LOGO */
#circle {
	width: 110px;
  height: 110px;
  background: rgb(98, 121, 54, .8);
  -moz-border-radius: 70px;
  -webkit-border-radius: 70px;
  border-radius: 70px;
	z-index: -1;
	margin-left: 40px;
	margin-top: -10px;
}
#logo {
	width: 200px;
	height: auto;
	display: block;
	margin-left: 12px;
	margin-top: -160px;
}

/* TYPOGRAPHY */
main h1, h2, h3 {
	font-family: 'Raleway', sans-serif;
	font-weight: 800;
}
main h1 {
	text-transform: uppercase;
	font-size: 1.7em;
	padding-bottom: .6em;
	color: #f3920e;
	font-weight: 500;
}
h2 {
	padding-top: .4em;
	padding-bottom: .4em;
	font-size: 1.4em;
	line-height: 1.2;
}
a {
	color: #f3920e;
	text-decoration:underline;
}
a:hover, a:active, a:focus {
	text-decoration-style: dotted;
}

/* HEADER */
header {
	background-image: url("../images/music.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

/*NAVIGATION*/
header nav {
	margin-bottom: .6em;
	position: relative;
}
header nav ul {
	position: absolute;
	background-color: rgb(246, 245, 250,.8);
    width: 100%;
    left: 0;
    top: 100%;
    z-index: 1;
		margin-top: -17px;
}
header nav li a:link, header nav li a:visited {
	display: block;
	padding-left: .5em;
	/* link text */
	color: #b36802;
	text-decoration: none;
	font-size: 1em;
	text-align: left;
	/* background colour */
	background-color: transparent;
	-webkit-transition: background-color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out;
	-o-transition: background-color .2s ease-in-out;
	transition: background-color .2s ease-in-out;
}
header nav li a:hover, header nav li a:active, header nav li a:focus {
	background-color: #efc65f;
}
/* menu toggle */
#menu-toggle {
	display: none;
}
.toggle {
	display: inline-block;
	width: auto;
	margin: 16px;
	position: relative;
	padding-top: 10px;
	text-transform: uppercase;
	font-size: 1.2em;
	line-height: 1;
	color: #617936;
}
nav .toggle:hover, nav .toggle:active, nav .toggle:focus {
	cursor: pointer;
}
/* show/hide menu */
#menu-toggle + .toggle + ul {
	display: none;
}
#menu-toggle:checked + .toggle + ul {
	display: block;
}
/* 3 lined toggle vis  */
.toggle strong {
	position: absolute;
	display: block;
	width: 80vw;
	top: 10px;
	left: 40px;
	color: #475925;/*green*/
}
.toggle:hover strong {
	color: #475925;
}
.toggle [class*='line-'] {
	background: #617936;
	display: block;
	border-radius: 3px;
	height: 3px;
	width: 26px;
	margin: 0 0 6px 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .2s ease all;
	-moz-transition: .2s ease all;
	-o-transition: .2s ease all;
	transition: .2s ease all;
}
.toggle:hover [class*='line-'] {
	background: #617936;
}
#menu-toggle:checked + .toggle .line-top {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}
#menu-toggle:checked + .toggle .line-mid {
	opacity: 0;
}
#menu-toggle:checked + .toggle .line-bot {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 90%;
	-moz-transform-origin: 0 90%;
	-o-transform-origin: 0 90%;
	transform-origin: 0 90%;
}
/*footer - inspired by https://unpocodesur.com/*/
footer {
	text-align: center;
}
footer div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100px;
	grid-gap: 15px;
}
footer div p {
	color: #090a0a;
	font-family: 'Sacramento', cursive;
	font-size: 45px;
	grid-column: 1 / 2;
	text-align: right;
  line-height: .8;
	margin-top: 12px;
}
footer div img {
	width: 120px;
	height: auto;
	grid-column: 2 / 3
}
footer a{
	color: #475925;
}
footer ul {
	font-size: .8em;
	margin-top: 1em;
}
footer nav li a:link, footer nav li a:visited {
	display: block;
	text-decoration: none;
	color: #475925;
}
footer nav li a:hover, footer nav li a:active, footer nav li a:focus {
	background-color: rgba(71, 92, 32, .2);
}
footer nav + p {
	color: #475925;
	font-size: 13px;
	margin-top: .7em;
}
/* SM SVG Icons - svgicons.sparkk.fr - Footer */
.svg-icon {
  width: 30px;
  height: 30px;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #090a0a;
}
.svg-icon circle {
  stroke: #090a0a;
  stroke-width: 1;
}

/* MONEY TRANSFER PAGE */
h2 + p {
	margin-bottom: 1.5em;
}
section {
	margin-bottom: 2.5em;
	width: 100%;
}
section h3 {
	font-size: 1.3em;
}
section img {
	width: 90%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: .7em;
	margin-left: .8em;
	/*display: block;
  margin-left: auto;
  margin-right: auto;*/
}
#shop-one img, #shop-three img {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
#shop-two img, #shop-four img {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
}
button {
	  background-color: #f6f5fa;
	  border: none;
	  padding: 12px;
		border: 2px solid #475925;
		border-radius: 8px;
	  text-align: center;
	  text-decoration: none;
	  font-size: 1em;
		margin-top: 12px;
	  cursor: pointer;
		transition-duration: 0.2s;
}
button:hover {
  background-color: #475925;
  color: #f6f5fa;
	border: 2px solid #475925;
}
button a {
	text-decoration: none;
	color: #475925;
	display: block;
}
button a:hover {
	color: #f6f5fa
}
button a:active, button a:focus {
	color: #475925;
}

/* /\/\/\/\/\ MEDIA QUERIES /\/\/\/\/\/\ */

@media (min-width: 600px) {
	section img {
		margin-bottom: 1.5em;
		width: 70%;
		height: auto;
	}
	section {
		margin-bottom: 3em;
	}
}
@media (min-width: 1000px) {
	#wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-gap: 15px;
		margin-top: 2.2em;
	}
	header {
		background-position: 0 -110px;
	}
	section img {
		width: 300px;
		height: 350px;
		width: 85%;
	}
	footer div img {
		width: 200px;
	}
	#svg-icon-yb {
		margin-right: 100px;
	}
}
@media (min-width: 1150px) {
	#menu-toggle + .toggle + ul, #menu-toggle:checked + .toggle + ul {
		display: block;
	}
	#menu-toggle + .toggle, #menu-toggle:checked + .toggle {
		display: none;
	}
	header nav ul{
		background-color: rgb(98, 121, 54, .2);
	}
	header nav ul li {
		float: left;
		margin-bottom: 1em;
		margin-right: 1em;
	}
	header nav ul li a {
		padding: .7em;
	}
	header nav li a:hover, header nav li a:active, header nav li a:focus {
		background-color: rgb(239, 198, 95);
	}
	main {
		content: "";
    clear: both;
	}
	main h1 {
		font-size: 2.5em;
	}
	section {
		width: 85%;
		margin-left: auto;
margin-right: auto;
	}
	header nav ul {
  position: relative;
	margin-top: 0;
  top: 0;
  width: 100%;
}
	#brand {
		position:absolute;
		margin-top: -340px;
		margin-left: 70px;
		display: block;
		z-index: 2
	}
	#circle {
		width: 180px;
	  height: 180px;
	  background: rgb(98, 121, 54, .8);
	  -moz-border-radius: 110px;
	  -webkit-border-radius: 110px;
	  border-radius: 110px;
		z-index: -1;
		margin-left: 40px;
		margin-top: -10px;
	}
	#logo {
		width: 280px;
		height: auto;
		display: block;
		margin-left: 12px;
		margin-top: -225px;
	}
	body {
		margin: 0 auto;
		background-size: 100% 300px;
	}
	h1 + p {
		margin-bottom: 1.5em;
	}
	header nav {
		margin: 0 0 1.2em 0;
		text-align: center;
		height: /*520px*/450px;
	}
	header nav ul {
		overflow: hidden;
		padding-left: 100px;
	}
	header nav ul li {
		display: inline;
		margin: 0;
		padding: 0 .6em;
  }
	header nav ul li a {
		display: inline-block;
		margin: 0;
		padding: .4em /*.2em .4em*/;
	}
	main {
		width: 1300px;
		margin-right: auto;
		margin-left: auto;
	}
	button {
		margin-right: .7em;
	}
	/* FOOTER */
	footer nav {
		width: 40%;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	footer {
		margin-bottom: 1em;
	}
}