@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');
@import url('https://fonts.googleapis.com/css?family=Metal+Mania');

 * {
    box-sizing: border-box;
    font-family: Raleway;
    color: #797979;
 }

 html, body {
    margin: 0;
    padding:0;
 }

 .nav ul {
    margin: 0;
 }

 .nav li {
    display: inline;
 }

 .nav a {
    display: inline-block;
    padding: .5em;
    color: white;
    text-decoration: none;
 }

 .main-nav {
    text-align: center;
    font-size: 1.1em;
    font-weight: lighter;
    border-bottom: 1px solid rgba(255, 255, 255, .3)
 }

 .main-nav li {
    padding: 0 5%;
 }

 .nav a:hover {
    background-color: rgba(255, 255, 255, .3);
 }

 .main-header {
    background-color: rgba(0,0,0, 0.6);
    background-image: url("images/wallpaper.png");
    background-blend-mode: multiply;
    background-size: cover;
    padding-bottom: 200px;
 }

 .band-name {
    display: block;
    text-align: center;
    margin: 50px;
    margin-top: 1.5em;
    font-size: 4em;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
 }

 .small-band-name {
  color: white;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }

 .footer {
   font-family: "Metal Mania";
   font-size: 4em;
   margin-bottom: 1em;
   margin-left: 2em;
   position: relative;
}

 p.copyright {
   font-size: 1em;
   color:lightgray;
   position: absolute;
   margin-left: 8em;
   padding-top: 11em;
}

 .band-name-large {
   font-size: 6em;
 }

 .content-section {
   margin: 1em;
 }

 .container {
   max-width: 900px;
   margin: 0 auto;
   padding: 0 1.5em;
 }

 .section-header {
   font-family: "Metal Mania";
   font-weight: normal;
   color: #333;
   text-align: center;
   font-size: 2.5em;
 }

 .about-image {
   object-fit: cover;
   width: 250px;
   height: 250px;
   float: left;
   margin: 15px;
   border-radius: 50%;
 }

 .main-footer {
   background-color: darkgray;
   background-image: url("images/footer-banner5.png");
   background-position: 50% 40%;
   background-blend-mode: multiply;
   background-size: cover;
   color: white;
   padding: .25em 0;
 }

 .main-footer-container {
   display: flex;
   align-items: center;
 }

 .main-footer-container ul {
   flex-grow: 1;
   text-align: end;
   margin-right: 16em;
   padding-top: 8em;
 }

 .footer-nav li {
   padding: 0 .5em;
 }

 .footer-nav img {
   width: 25px;
   height: 25px;
 }

 .btn {
   text-align: center;
   vertical-align: middle;
   padding: 0.67em;
   cursor: pointer;
 }

 .btn-header {
   margin: .5em 15% 2em 30%;
   color: white;
   border: 2px solid white;
   background-color: rgba(255, 255, 255, .1);
   border-radius: 0;
   font-size: 1.5em;
   font-weight: lighter;
   padding-left: 2em;
   padding-right: 2em;
 }

 .btn-header:hover {
   background-color: rgba(255, 255, 255, .3);
 }

 .btn-play {
   margin: 0 auto;
   display: block;
   color: white;
   font-size: 4em;
   border-radius: 50%;
   padding: 0;
   width: 100px;
   height: 100px;
 }

 .tour-row {
   border-bottom: 1px solid black;
   padding-bottom: 1em;
   margin-bottom: 1em;
 }

 .tour-row:last-child {
   border-bottom: none;
 }

 .tour-item {
   padding-right: .3em;
   display: inline-block;
 }

 .tour-date {
   color: #555;
   font-weight: bold;
   width: 11%;
 }

 .tour-city {
   width: 24%;
 }

 .tour-arena {
   width: 42%;
 }

 .tour-btn {
   max-width: 19%;
 }

 .btn-primary {
   color:white;
   background-color: grey;
   border: none;
   border-radius: .3em;
   font-weight: bold;
 }

 .btn-primary:hover {
   background-color: #333333;
 }

 .shop-item {
   margin: 30px;
 }

 .shop-item-title {
   display: block;
   width: 100%;
   text-align: center;
   font-weight: bold;
   font-size: 1.5em;
   color: #333;
   margin-bottom: 15px;
 }

 .shop-item-image {
   height: 250px;
 }

 .shop-item-details {
   display: flex;
   align-items: center;
   padding: 5px;
 }

 .shop-item-price {
   flex-grow: 1;
   color: #333;
 }

 .shop-items {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 }

 .cart-header {
   font-weight: bolder;
   font-size: 1.1em;
   color: #333;
 }

 .cart-column {
   border-bottom: 1px solid black;
   padding-bottom: 10px;
   margin-top: 10px;
   display: flex;
   align-items: center;
 }

.cart-row {
   display: flex;
}

.cart-item {
   width: 45%;
}

.cart-price {
   width: 20%;
   font-size: 1.2em;
   color: #333;
}

.cart-quantity {
   width: 24%;
}

.cart-item-title {
   color: #333;
   margin-left: .5em;
   font-size: 1.1em;
}

.cart-item-image {
   width: 75px;
   height: auto;
   border-radius: 10px;
}

.btn-danger {
   color: white;
   background-color: #EB5757;
   border: none;
   border-radius: .3em;
   font-weight: bold;
}

.btn-danger:hover {
   background-color: #CC4C4C;
}

.cart-quantity-input {
   height: 34px;
   width: 50px;
   border-radius: 5px;
   border: 1px solid #56CCF2;
   background-color: #eee;
   color: #333;
   padding: 0;
   text-align: center;
   font-size: 1.2em;
   margin-right: 8.0em;
}

.cart-row:last-child {
   border-bottom: 1px solid black;
}

.cart-row:last-child .cart-column {
   border: none;
}

.cart-total {
   text-align: end;
   margin-top: 10px;
   margin-right: 10px;
}

.cart-total-title {
   font-weight: bolder;
   font-size: 1.30em;
   color: black;
   margin-right: 20px;
}

.cart-total-price {
   font-size: 1.3em;
   color: #333;
}

.btn-purchase {
   display: block;
   margin: 40px auto 80px 730px;
   font-size: 1.1em;
}