@charset "utf-8";
/* CSS Document */
h1{font-family: "devils-haircut", sans-serif; font-weight: 400; font-style: normal;}
h2{font-family: "ekamai", sans-serif; font-weight: 400; font-style: normal;}
h3{font-family: "alumni-sans", sans-serif; font-weight: 700; font-style: normal;}
p{font-family: "titular", sans-serif;font-weight: 400;font-style: normal;}
div.desc{font-family: "titular", sans-serif;font-weight: 400;font-style: normal;}

/*HOVER*/
a:hover {
   background: url("images/sparkle.png") no-repeat; background-size:80%; margin-left:none;
}

/*CHAINS?*/

.chains1 {position:absolute; top:0px;
	left:0; width:20%;}
.chains2 {position:absolute; top:0px;
	right:0; width:20%;}

div.chains1 img, div.chains2 img{width:100%;}

/*HEADER*/
/*div.row.header {background: url("images/glitterheader3.gif"); margin:0px 0px 0px 0px;}
div.row.header div.container div.col-10 img{width:20%; padding-left: 244px;}
div.row.header div.container div.col-10 ul{display: flex;}
div.row.header div.container div.col-10 ul li a{font-family: "devils-haircut", sans-serif; font-weight: 400; font-style: normal; font-size:35pt; text-decoration: none; padding-right: 57px; text-align: center; float: left; padding-left:0px; margin-left: 0px;}*/
/*HEADER 2*/
div.row.header {background: url("images/glitterheader3.gif"); margin:0px 0px 0px 0px;}
div.row.header div.container div.col-10 {display:block;}
div.row.header div.container div.col-10 img{width:25%; padding-left: 290px;}
div.row.header div.container div.col-10 ul{display:inline-flex; text-align: center;}
div.row.header div.container div.col-10 ul li {list-style: none; text-align: center;}
div.row.header div.container div.col-10 ul li a{font-family: "devils-haircut", sans-serif; font-weight: 400; font-style: normal; font-size:35pt; text-decoration: none; padding-right: 40px; text-align: center; float: right; padding-left:10px;}
div.row.header div.container div.col-10 ul li a {padding-left:30px;}

/*HOME*/
/*Body*/
div.body div.row.body1 {background: url("images/bodyphoto.png"); background-size: 100%;}
div.body div.row.body1 div.col-1 {padding:100 0;}
div.body div.row.body1 div.container div.col-5 h3{font-size: 65pt; padding:80 0; margin:0px 0px 0px 0px; text-align: center; color:white; background: linear-gradient(-180deg, #da1884, #6acfe1); background-size: 100% 100%; -webkit-background-clip: text; -webkit-text-stroke: 12px transparent; }
div.body div.row.body1 div.container div.col-5 h3#first {margin-top: 140px;}
div.body div.row.body1 div.container div.col-5 h3#last {margin-bottom: 0px;}
div.body div.row.body1 div.container div.col-3 a img.live{margin:442px 0px 25px; width:150%;}
div.body div.row.body2{background-color: #6acfe1;}
div.body div.row.body2 img{width:100%; padding: 0; margin:0px 0px 0px 0px;}
div.body div.row.body3{background: url("images/bluecrownbg2.png"); background-size: cover; margin-top:0px; padding-top: 0px;}
/*div.body div.row.body3 div.container div.col-7{background: url("images/sqalbum.jpg") left; background-size: 100%;}*/
div.body div.row.body3 div.container div.col-7 img.album {padding-bottom: 100px; width:90%; padding-right: 90px; padding-top: 40px;}
div.body div.row.body3 div.container div.col-7 a img.popup{float: right; padding: 80 0 500 40px; margin: 400px 0px 110px 100px; width:50%;}

.col-7 {position: relative;}
.popup {position:absolute; right: 10px;}

/*ABOUT*/
/*Body*/
div.aboutbody {background-color: #0e0105;}
div.aboutbody div.row.aboutbody1 div.container div.col-6 h2{color:#9f0e5f;}
div.aboutbody div.row.aboutbody1 div.container div.col-6 img{width:100%;}
div.aboutbody div.row.aboutbody1 div.container div.col-4 h2{margin-top:120px; color:#9f0e5f;}
div.aboutbody div.row.aboutbody1 div.container div.col-4 p{color:#9f0e5f;}
div.aboutbody div.row.aboutbody2 div.container div.col-12 h2{color:#9f0e5f;}
div.aboutbody div.row.aboutbody2 div.container div.col-12 p{color:#9f0e5f;}

/*TOUR*/
/*Body*/
div.tourbody {background: url("images/scene-queen-3.png") bottom no-repeat, url("images/crownbgpink2.png") repeat; background-size: 45%; margin-bottom:0px;}
div.tourbody div.tourbody1 div.container div.col-6 {padding-bottom: 60px;}
div.tourbody div.tourbody1 div.container div.col-6 h3{font-size:70px; margin:10px 0px 0px 5px; /*-webkit-text-stroke: 2px black;*/ justify-content:center; color:white; background: linear-gradient(-180deg, #da1884, #6acfe1); background-size: 100% 100%; -webkit-background-clip: text; -webkit-text-stroke: 12px transparent; text-align: center;}
div.tourbody div.row.tourbody2 div.container div.col-12 p {font-size:40px; font-weight: 600;}
div.tourbody div.tourbody3 div.container div.col-12 a{font-family: "titular", sans-serif; font-style: normal; font-size:60px; font-weight:500; padding-bottom: 150px; text-decoration: none;}
div.tourbody div.tourbody3 div.container div.col-12 div.right {float:right;}
div.tourbody div.tourbody3 div.container div.col-12 div.right#last {padding-bottom: 180px;}
div.tourbody a:hover {background: url("images/sparkle.png") repeat-x; background-size:50%; margin-left:none;}

/*MUSIC*/
/*Body*/
div.musicbody div.row.musicbody1 {background-color: #6acfe1;}
div.musicbody div.row.musicbody1 div.container div.col-10 {background:url("images/sqalbum.jpg") center no-repeat; background-size: 70%;}
div.musicbody div.row.musicbody1 div.container div.col-10 img{width:30%; margin:0px 120px 390px 20px}
div.musicbody div.row.musicbody3 {background:url("images/bluepinkbg.png"); background-size:cover;}
div.musicbody div.row.musicbody3 div.musicgallery {display:flex; padding: 40px 0px 0px 0px;}
div.musicbody div.row.musicbody3 div.musicgallery div.gallery-item{padding: 35px 0px 10px 115px;}
div.musicbody div.row.musicbody4 div.musicgallery {display:flex;  background:url("images/crownbgpink3.png") repeat; background-color: #0e0105; background-size: 33.3%;}
div.musicbody div.row.musicbody4 div.musicgallery div.gallery-item{padding: 30px 0px 50px 115px;}
div.musicbody div.row.musicbody5 {background:url("images/crownbgpink3.png") repeat; background-color: #0e0105; background-size: 33.3%;}
div.musicbody div.row.musicbody5 div.container div.col-10 a{width:40%; margin:0 auto; display:block;}
div.musicbody div.row.musicbody5 div.container div.col-10 a img{width:100%;}
div.musicbody div.row.musicbody6 {background:url("images/crownbgpink3.png") repeat; background-color: #0e0105; background-size: 33.3%;}
div.musicbody div.row.musicbody6 div.container div.col-10 p {font-size:35px; font-weight: 600; color:#6acfe1; text-align: center;}
div.musicbody div.row.musicbody6 div.container div.col-10 a {align-items: center; margin-left:130px;}
div.musicbody div.row.musicbody6 div.container div.col-10 a img{width:10%;}
div.musicbody a:hover {background: url("images/sparkle.png") no-repeat; background-size:80%; margin-left:none;}
/*Gallery*/
div.gallery {display: flex; flex-wrap: wrap; justify-content: flex-start;}
div.gallery-item {margin: 20px; /*border: 1px solid #ccc;*/ width: 250px;}
/*div.gallery-item:hover {border: 1px solid #777;}*/
div.gallery-item img {width: 100%; height: auto;}
div.gallery-item div.desc {padding: 5px; text-align: center; color: #ffaad8; font-size: 30px; background-color: #0e0105;}

/*MERCH*/
div.merchbody {background:url("images/crownbgpink2.png") repeat; background-color: #0e0105; background-size: 40%;}
div.merchbody div.row.merchbody1 div.container div.col-3 {background-color: #ff4bc4;}
div.shop-item {margin: 20px; width: 150px;}
div.shop-item img {width: 100%; height: auto;}
div.shop-item div.desc {padding: 5px; text-align: center; color: #0e0105; font-size: 20px;}
div.shop-item div.desc#vinyl {padding-bottom: 35px;}
div.shop-item button {color: #0e0105;}
div.shop-item button h2{font-size: 25px; margin: 5px 5px; color: #9f0e5f;}
div.cart {background-color: #ffaad8; margin:10px 0px;}
div.vinyl, div.hoodie {clear:both;}
div.cart h1{text-align: center; font-size:50px; margin:5px auto}
div.cart div.col-6-sm img {width:100%;}
div.cart div.col-6-sm div.cartstuff p {margin:0px;}
div.cart h3 {text-align: center}
div.cart button {justify-content: center; display:block; margin:0 auto; color: #0e0105; margin-bottom: 10px;}
div.cart button a{margin:5px 5px; color: #9f0e5f; font-family: "ekamai", sans-serif; font-weight: 400; font-style: normal; font-size:30px; text-decoration: none;}

/*CONTACT*/
/*Body*/
div.contactbody {background-color: #ffaad8;}
div.contactbody div.row.contactbody1 div.container div.col-7 h2{color:#9f0e5f; font-size: 40px;}
div.contactbody div.row.contactbody1 div.container div.col-7 div {display:flex;}
div.contactbody div.row.contactbody1 div.container div.col-7 div p{font-size: 30px;}
div.contactbody div.row.contactbody1 div.container div.col-7 div p span{font-family: "ekamai", sans-serif; font-weight: 200; font-style: normal; color:#9f0e5f;}
div.contactbody div.row.contactbody1 div.container div.col-4 img{width:130%; margin-left:10px; margin-top:100px; margin-bottom: 0px;}
/*div.contactbody div.row.contactbody2 div.container div.col-3 img{width:200%; margin-left:300px; margin-top:20px;}*/

/*ERROR*/
div.errorbody {background-color: #ffaad8;}
div.errorbody div.row.errorbody1 div.container div.col-7 img{width:100%; margin:40px 20px 0px 0px; padding:0px 20px 0px 0px;}
div.errorbody div.row.errorbody1 div.container div.col-5 {text-align: center;}
div.errorbody div.row.errorbody1 div.container div.col-5 h1{font-size:100px; margin-bottom: 0px;}
div.errorbody div.row.errorbody1 div.container div.col-5 h2{font-size:50px;margin-top: 0px;}
div.errorbody div.row.errorbody1 div.container div.col-5 a{text-decoration: none; font-family: "ekamai", sans-serif; font-weight: 400; font-style: normal; font-size:50px; padding:10px; color: #e13d99}
div.errorbody a:hover {background: url("images/sparkle.png") repeat; background-size:100%; margin-left:none;}
div.errorbody div.chains1 img, div.chains2 img{width:90%; margin-right: 0px; padding-right: 0px;}
div.errorbody div.chains1 {position:absolute; top:0px;
	left:0; width:30%;}
div.errorbody dov.chains2 {position:absolute; top:0px;
	right:0; width:30%;}

/*CHECKOUT*/
div.checkbody {background-color: #ffaad8;}
div.checkbody div.row.checkbody1 div.container div.col-12 {text-align: center;}
div.checkbody div.row.checkbody1 div.container div.col-12 h1{font-size:65px; margin-top: 7px; margin-bottom: 0px;}
div.checkbody div.row.reviewbody2 div.container div.col-3 img {width:100%}
div.checkbody div.row.reviewbody2 div.container div.col-9 div.vinyl {margin-bottom:100px;}
div.checkbody div.row.reviewbody2 div.container div.col-9 div.vinyl p {font-size:25px;  margin-bottom: 0px; margin-top:0px;}
div.checkbody div.row.reviewbody2 div.container div.col-9 div.hoodie p {font-size:25px; margin-bottom: 0px; margin-top:0px;}
div.checkbody div.row.reviewbody3 div.container div.col-3 div.total, div.shipping, div.tax, div.subtotal {display:flex; alignment-baseline:middle;}
div.checkbody div.row.reviewbody3 div.container div.col-3 div.total, div.shipping, div.tax, div.subtotal h2{padding-right:20px;}
div.checkbody div.row.reviewbody3 div.container div.col-3  div.subtotal p{text-decoration: underline;}
div.checkbody div.row.reviewbody3 div.container div.col-3 h2 {font-size:25px; padding-right:2px; line-height: 25px;}
div.checkbody div.row.reviewbody3 div.container div.col-3 p {font-size:23px; line-height: 25px;}
div.checkbody div.row.checkbody2 div.container div.col-5 h2{margin-bottom:0px;}
input {font-family: "titular", sans-serif;font-weight: 400;font-style: normal; font-size:20px;}
div.checkbody div.row.checkbody3 div.container div.col-10 div.deliveryform input.size1 {width:45%; margin-right: 10px;}
div.checkbody div.row.checkbody3 div.container div.col-10 div.deliveryform input.size2 {width:45%; margin-left: 10px;}
div.checkbody div.row.checkbody4 div.container div.col-5 h2{margin-bottom:0px;}
div.checkbody div.row.checkbody5 div.container div.col-10 div.paymentform input.size1 {width:45%; margin-right: 10px;}
div.checkbody div.row.checkbody5 div.container div.col-10 div.paymentform input.size2 {width:45%; margin-left: 10px;}
div.checkbody div.row.checkbody7 div.container div.col-12 {display:block;}
div.checkbody div.row.checkbody7 div.container div.col-12 div.modal div.modal-content button.close {font-size: 20px; margin: 5px 15px; background-size: 0px; padding: 0px;}

button#openModal {background:none; font-family: "devils-haircut", sans-serif; font-weight: 400; font-style: normal; font-size:45px; justify-content: center; border:none;}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}

.modal-content {
margin: 15% auto;
padding: 20px;
width: 50%;
display: flex;
justify-content: space-around;
}

.close {
color:antiquewhite;
float: right;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 0px;
right:0px;
background-color:#e13d99;
border:none;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.column {
flex: 1;
text-align: center;
padding: 10px;
}

.column button,
.column a {
padding: 10px;
text-decoration: none;
font-size: 16px;
color: blue;
cursor: pointer;
display: block;
margin: auto;
}

.checkpopup {position:relative;}


 


/*MOBILE*/
@media only screen and (max-width: 900px) {
	div.row.header div.container div.col-1 {visibility: hidden;}
	div.row.header div.container div.col-10 img {padding-left:160px}
	div.row.header div.container div.col-10 ul li a{font-size: 20pt; padding-right:0px; padding-left: 10px}
	div.body div.row.body1 {background-size:140%; background-position: -20px}
	.row.body1 {position: relative;}
	.live {position:absolute; right: 10px;}
	div.body div.row.body1 div.container div.col-5 h3 {font-size: 40pt; margin:0px 0px 0px 50px; text-align: left;}
	div.body div.row.body1 div.container div.col-5 h3#first {font-size: 40pt; margin:55px 0px 3px 15px;}
	div.body div.row.body1 div.container div.col-5 h3#last {margin:0px 0px 0px 65px;}
	div.body div.row.body1 div.container div.col-3 a img.live {width:35%; margin:0px 0px 0px 0px; top:230px; right:40px; padding:0px}
	div.body div.row.body3 div.container div.col-7 img.album {width:80%; padding-left:35px;}
	div.body div.row.body3 div.container div.col-7 a img.popup {width:50%; margin: 290px 0px 110px 100px;}
	div.row.header div.container div.col-10 img {padding-left:150px}
	div.row.header div.container div.col-10 ul li a{font-size: 24pt; padding-right:10px}
	div.tourbody {background: url("images/scene-queen-3.png") bottom no-repeat, url("images/crownbgpink2.png") repeat; background-size: 85%; margin-bottom:0px;}
	div.tourbody div.tourbody1 div.container div.col-6 {padding-bottom: 0px;}
	div.tourbody div.tourbody1 div.container div.col-6 h3{font-size:45px; padding-bottom: 0px;}
	div.tourbody div.row.tourbody2 div.container div.col-12 p{font-size:25px; margin:0px}
	div.tourbody div.tourbody3 div.container div.col-12 a{font-size:50px;}
	div.tourbody div.tourbody3 div.container div.col-12 div.right#last {padding-bottom: 130px;}
	div.musicbody div.row.musicbody1 div.container div.col-10 img{width:30%; margin:0px 120px 250px 20px}
	div.musicbody div.row.musicbody3 div.musicgallery div.gallery-item{padding: 5px 0px 23px 5px;}
	div.musicbody div.row.musicbody4 div.musicgallery div.gallery-item{padding: 0px 0px 10px 5px;}
	div.musicbody div.row.musicbody5 div.container div.col-10 img{padding-left: 135px;}
	div.musicbody div.row.musicbody6 div.container div.col-10 a {align-items: center; margin-left:80px;}
	div.aboutbody div.row.aboutbody1 div.container div.col-4 h2{margin-top:20px;}
	div.contactbody div.row.contactbody1 div.container div.col-4 img{width:90%; margin-left:10px; margin-top:0px; margin-bottom: 0px;}
	div.merchbody div.row.merchbody1 div.container div.col-3 {display:flex;}
	div.merchbody div.row.merchbody1 div.container div.col-3 div.cart div.col-6 img {width: 20%}
	div.merchbody div.row.merchbody1 div.container div.col-3 div.cart div.hoodie div.col-6-sm div.cartstuff{margin-bottom: 60px;}
	div.merchbody div.row.merchbody1 div.container div.col-3 div.cart h3 {text-align: center;}
	div.merchbody div.row.merchbody1 div.container div.col-3 div.cart button.last {align-content: center}
	div.cart button {justify-content: center; display:block; margin:0 auto; color: #0e0105; margin-bottom: 10px;}
	div.checkbody div.row.reviewbody2 div.container div.col-3 {display:flex;}
	div.checkbody div.row.reviewbody2 div.container div.col-3 img {width:45%}
	div.checkbody div.row.reviewbody2 div.container div.col-3 img.first {margin-right:35px;}
	div.checkbody div.row.reviewbody2 div.container div.col-9 {display:flex;}
	div.checkbody div.row.reviewbody2 div.container div.col-9 div.vinyl {margin-right:110px;}
	div.errorbody div.row.errorbody1 div.container div.col-5 {text-align: center;}
	
}

/*MY PROBLEMS*/
/*can't make error or contact photo touch bottom,*/
/*TO DO*/
/*fancy up writing contact,*/