@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Russo+One&display=swap');




html, body {
	font-size: 15px;
    font-family: "Open Sans", sans-serif;
	color: #4d4d4e;
	height: 100%;
}

h1, h2 {
	color: #4d4d4e;
}

h1 {
	font-size: 150%;
}

h2 {
	font-size: 18px;
	font-family: "Russo One", sans-serif;
	color: #4d4d4e;
	font-weight: 900;
}

img {
	max-width: 100%;
	height: auto;
}
a:link {color: #2b2b2b; text-decoration: none; }
a:visited {color: #2b2b2b; text-decoration: none; }
a:hover {color: #00aa9e; text-decoration: none; }
a:active {color: #2b2b2b; text-decoration: none; }


#skip {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  z-index: 999999 !important;
}

#skip:focus-within {
  position: fixed !important;
  left: 10px !important;
  top: 10px !important;
}

#skip a,
#skip a.skip {
  display: inline-block !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 12px 16px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
  background: #000 !important;
  color: #fff !important;
  text-decoration: none !important;
}

#skip a:focus,
#skip a.skip:focus {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}

#headerimg,
#headerimg h1,
#headerimg h1 a,
body.page-template-page-metallica hr:first-of-type {
  display: none !important;
}

#headerimg,
#headerimg h1,
#headerimg h1 a,
#header + hr,
#headerimg + hr {
  display: none !important;
}


.metallica-logo {
	width: 100%;
  max-width: 500px;
	margin-top:20px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	margin-left: auto;
    margin-right: auto;
}


.metallica-band {
  width: 100%;
  max-width: 1150px;
  margin: 20px auto 0;
  padding: 0;
  box-sizing: border-box;
}

.metallica-band img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.metallica-bbg {
  background-color: #b6e3f3;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 40px 0;
	font-size: 22px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	color: #000000;
	text-align: left;
}

.metallica-wbg {
  background-color: #ffffff;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 40px 0;
	font-size: 22px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	color: #000000;
	text-align: left;
}

.metallica-blbg {
  background-color: #2b2d2c;
  width: 100%;
  height: auto;
  margin: 0;
	padding-top:40px;
	padding-bottom:100px;
	padding-right:0px;
	padding-left:0px;
	font-size: 22px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
}

.metallica-futurebg {
  background-color: #2b2d2c;
  width: 100%;
  height: auto;
  margin: 0;
	padding-top:0px;
	padding-bottom:30p0pxx;
	padding-right:0px;
	padding-left:0px;
	font-size: 45px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
}

.metallica-title {
	padding-top:0px;
	padding-bottom:10px;
	padding-right:0px;
	padding-left:0px;
	font-size: 45px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #1c4661;
	text-align: center;
}



.metallica-subtitle1 {
	padding-top:0px;
	padding-bottom:10px;
	padding-right:0px;
	padding-left:0px;
	font-size: 38px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #4093ba;
	text-align: left;
}

.metallica-subtitle2 {
	padding-top:0px;
	padding-bottom:10px;
	padding-right:0px;
	padding-left:0px;
	font-size: 38px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #b6e3f3;
	text-align: left;
}

.metallica-subtitle3 {
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	font-size: 32px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #1c4661;
	text-align: left;
}


.metallica-gallery {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
  margin-top: -65px;
}

.metallica-gallery-row {
  display: flex;
  gap: 64px;
  margin-bottom: 24px;
}

.metallica-gallery-row img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.metallica-gallery-row-3 img {
  flex: 1 1 calc(33.333% - 43px);
}

.metallica-gallery-row-2 img {
  flex: 1 1 calc(50% - 32px);
}

@media (max-width: 800px) {
  .metallica-gallery {
    padding: 0 20px;
  }

  .metallica-gallery-row {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
  }
}


.metallica-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
  max-width: 650px;
  margin: 0px auto;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.metallicabutton {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #104b8f;
  border: 3px solid #104b8f;
  border-radius: 60px;

	padding-top:15px;
	padding-bottom:15px;
	padding-right:25px;
	padding-left:25px;
  font-size: 20px;
  font-family: sans-serif;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Hover */
.metallicabutton:hover {
  background-color: #104b8f;
  color: #ffffff;
}

/* Mobile */
@media (max-width: 768px) {
  .metallica-buttons {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .metallicabutton {
    width: 100%;
    max-width: 400px;
    font-size: 20px;
    padding: 18px 20px;
  }
}








@media screen and (max-width:750px) {

    body {
    margin:0 0 0 0;
	overflow-x:hidden;
    }




.metallica-futurebg {
  background-color: #2b2d2c;
  width: 100%;
  height: auto;
  margin: 0;
	padding-top:0px;
	padding-bottom:30p0pxx;
	padding-right:0px;
	padding-left:0px;
	font-size: 24px;
	line-height: 1.5;
 	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
}