/*
.----------------.  .----------------.  .----------------.  .-----------------.
| .--------------. || .--------------. || .--------------. || .--------------. |
| | ____    ____ | || |      __      | || |     _____    | || | ____  _____  | |
| ||_   \  /   _|| || |     /  \     | || |    |_   _|   | || ||_   \|_   _| | |
| |  |   \/   |  | || |    / /\ \    | || |      | |     | || |  |   \ | |   | |
| |  | |\  /| |  | || |   / ____ \   | || |      | |     | || |  | |\ \| |   | |
| | _| |_\/_| |_ | || | _/ /    \ \_ | || |     _| |_    | || | _| |_\   |_  | |
| ||_____||_____|| || ||____|  |____|| || |    |_____|   | || ||_____|\____| | |
| |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------' 
*/

*{
    background-color: #E0DFE9;
    margin: 0;
    padding: 0;
}

img{
    width: 100%;
    object-fit: cover;
}

h1{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

h2{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

h3{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

h4{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   
}

.pageHeader{
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
}

.sectionHeader{
    margin-top: 25px;
    margin-bottom: 25px;
}

button{
    cursor: pointer;
}

.navBar{
    width: 100vw;
    height: 30px;
    position: static;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.items{
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: space-around;
    background-color: #506D80;
}

.navItem{
    height: 25px;
    padding: 10px;
    background-color: #21A9FF;
    font-family: sans-serif;
}

.navItem:hover{
    text-decoration: underline 2px wavy white;
}

.navItem a{
    text-decoration: none;
    background-color: #21A9FF;
    color: white;
}

.navItemRed{
    height: 25px;
    padding: 10px;
    background-color: #FF2222;
    font-family: sans-serif;
}

.navItemRed:hover{
    text-decoration: underline 2px wavy white;
}

.navItemRed a{
    text-decoration: none;
    background-color: #FF2222;
    color: white;
}

.footBar{
    width: 100vw;
    padding-top: 2%;
    padding-bottom: 2%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: #506D80;
    position: relative;
}

.footBar img{
    height: 40px;
    width: 40px;
    object-fit: contain;
    background-color: #506D80;
}

.footLinks{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.footLinks a{
    background-color: #506D80;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

.footLinks a:hover{
    text-decoration: underline;
}

.footRight{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #506D80;
    color: white;
}

.footRight p{
    background-color: #506D80;
}

.footRight h4{
    background-color: #506D80;
}

.footRight img{
    background-color: #506D80;
}

.footRightText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-left: 25px;
    background-color: #506D80;
}


[popover]{
    width: 500px;
    margin: 0 auto;
    position: fixed;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}



/*
 .----------------.  .----------------.  .----------------.  .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. |
| |  ____  ____  | || |     ____     | || | ____    ____ | || |  _________   | |
| | |_   ||   _| | || |   .'    `.   | || ||_   \  /   _|| || | |_   ___  |  | |
| |   | |__| |   | || |  /  .--.  \  | || |  |   \/   |  | || |   | |_  \_|  | |
| |   |  __  |   | || |  | |    | |  | || |  | |\  /| |  | || |   |  _|  _   | |
| |  _| |  | |_  | || |  \  `--'  /  | || | _| |_\/_| |_ | || |  _| |___/ |  | |
| | |____||____| | || |   `.____.'   | || ||_____||_____|| || | |_________|  | |
| |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------' 
*/

.hero{
    width: 70%;
    height: 400px;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    align-items: center;
    justify-content: center;
}

.hero h2{
    text-align: center;
    background: black;
    color: white;
    text-decoration: overline underline red;
}

.banner{
    height: 200px;
    width: 70%;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    border-top: 18px double white;
    border-bottom: 18px double white;
    
}

.banner img{
    height: 100px;
    width: 100px;
    object-fit: contain;
}

.bannerText{
    display: flex;
    flex-direction: column;
    margin-left: 25px;
    text-align: center;
    color: black;
}

.home-grid{
    width: 70%;
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-column-start: 1;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end: 4;
}

.home-grid div{
    margin-bottom: 10px;
}

.latest{
    grid-row: 1;
    grid-column: 1 / span 8;
}

.releaseGrid{
    display: grid;
    grid-auto-columns: 3;
    grid-auto-rows: 2;
    justify-self: center;
}

.releaseBox img{
    height: 50px;
    width: 50px;
    margin: 0 auto;
}

.releaseBox p{
    font-size: 10pt;
    text-align: center;
    margin: 0 auto;
}

.releaseBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.release1{
    grid-row: 1;
    grid-column: 1;
}

.release2{
    grid-row: 1;
    grid-column: 2;
}

.release3{
    grid-row: 1;
    grid-column: 3;
}

.release4{
    grid-row: 2;
    grid-column: 1;
}

.release5{
    grid-row: 2;
    grid-column: 2;
}

.release6{
    grid-row: 2;
    grid-column: 3;
}

.latest, .news h4{
    text-align: right;
}

.videos{
    grid-row: 1;
    grid-column: 9 / span 4;
    margin-left: 25px;
}

.videoBox{
    justify-self: center;
}

.news{

    grid-row: 2;
    grid-column: 1 / span 8;
}

.articleBox{
    justify-self: center;
    align-items: center;
}

.articleBox img{
    height: 100px;
    width: 200px;
    object-fit: cover;
    margin-top: 10px;
    margin-right: 10px;
}

.circlePics{

    grid-row: 2;
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.circleFrame{
    border: 1px solid black;
    height: 200px;
    width: 200px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 50%;
}

.newsFlex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/*
 .----------------.  .----------------.  .----------------.  .----------------.  .----------------.  .----------------.  .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. |
| |      __      | || |  _______     | || |  _________   | || |     _____    | || |    _______   | || |  _________   | || |    _______   | |
| |     /  \     | || | |_   __ \    | || | |  _   _  |  | || |    |_   _|   | || |   /  ___  |  | || | |  _   _  |  | || |   /  ___  |  | |
| |    / /\ \    | || |   | |__) |   | || | |_/ | | \_|  | || |      | |     | || |  |  (__ \_|  | || | |_/ | | \_|  | || |  |  (__ \_|  | |
| |   / ____ \   | || |   |  __ /    | || |     | |      | || |      | |     | || |   '.___`-.   | || |     | |      | || |   '.___`-.   | |
| | _/ /    \ \_ | || |  _| |  \ \_  | || |    _| |_     | || |     _| |_    | || |  |`\____) |  | || |    _| |_     | || |  |`\____) |  | |
| ||____|  |____|| || | |____| |___| | || |   |_____|    | || |    |_____|   | || |  |_______.'  | || |   |_____|    | || |  |_______.'  | |
| |              | || |              | || |              | || |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------' 
*/

.artistGrid{
    width: 100%;
    display: grid;
    grid-auto-rows: 3;
    grid-auto-columns: 12;
    justify-items: space-between;
    margin-bottom: 10%;
}

.artistButton img{
    height: 200px;
    width: 200px;
    object-fit: cover;
    border: 1px solid black;
    border-radius: 50%;
}

.artistRow1{
    margin-bottom: 10px;
    grid-row: 1;
    grid-column: 1 / span 12;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.artistRow2{
    margin-top: 10px;
    margin-bottom: 10px;
    grid-row: 2;
    grid-column: 1 / span 12;
    display: flex;
    align-items: normal;
    justify-content: space-around;
}

.artistRow3{
    margin-top: 10px;
    margin-bottom: 10px;
    grid-row: 3;
    grid-column: 1 / span 12;
    display: flex;
    align-items: normal;
    justify-content: space-around;
}

.artistGrid button{
    border: 0;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background: none;
}

.artistGrid :popover-open{
    display: grid;
    justify-content: center;
    grid-auto-columns: 12;
    grid-auto-rows: 8;
}

.artistGrid :popover-open img{
    height: 400px;
    width: 400px;
    object-fit: contain;
    grid-column: 1 / span 12;
    grid-row: 1 / span 3;
    justify-self: center;
}

.artistGrid :popover-open h1{
    font-size: 18pt;
    font-family: sans-serif;
    grid-column: 1 / span 12;
    grid-row: 4 / span 2;
    text-align: center;
}

.artistGrid :popover-open p{
    font-size: 12pt;
    font-family: sans-serif;
    grid-column: 1 / span 12;
    grid-row: 6 / span 4;
    justify-self: center;
    margin: 10%;
}



/*
 .----------------.  .----------------.  .----------------.  .----------------.  .----------------.  .----------------.  .----------------.  .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. || .--------------. |
| |  _______     | || |  _________   | || |   _____      | || |  _________   | || |      __      | || |    _______   | || |  _________   | || |    _______   | |
| | |_   __ \    | || | |_   ___  |  | || |  |_   _|     | || | |_   ___  |  | || |     /  \     | || |   /  ___  |  | || | |_   ___  |  | || |   /  ___  |  | |
| |   | |__) |   | || |   | |_  \_|  | || |    | |       | || |   | |_  \_|  | || |    / /\ \    | || |  |  (__ \_|  | || |   | |_  \_|  | || |  |  (__ \_|  | |
| |   |  __ /    | || |   |  _|  _   | || |    | |   _   | || |   |  _|  _   | || |   / ____ \   | || |   '.___`-.   | || |   |  _|  _   | || |   '.___`-.   | |
| |  _| |  \ \_  | || |  _| |___/ |  | || |   _| |__/ |  | || |  _| |___/ |  | || | _/ /    \ \_ | || |  |`\____) |  | || |  _| |___/ |  | || |  |`\____) |  | |
| | |____| |___| | || | |_________|  | || |  |________|  | || | |_________|  | || ||____|  |____|| || |  |_______.'  | || | |_________|  | || |  |_______.'  | |
| |              | || |              | || |              | || |              | || |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------'  '----------------' 
*/

.catalogueList{
    display: flex;
    flex-direction: column;
    margin-bottom: 10%;
}

.catalogueBox{
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.catalogueBox p, h3, h4, button{
    margin-bottom: 5px;
}

.catalogueBox img{
    height: 200px;
    width: 200px;
    margin-right: 10%;
}

.stream{
    color: white;
    border: 1px solid white;
    background-color: #21A9FF;
    padding: 5%;
    padding-left: 10%;
    padding-right: 10%;
    border-radius: 12px;
}

.buy{
    color: white;
    border: 1px solid white;
    background-color:#FF2222;
    padding: 5%;
    padding-left: 10%;
    padding-right: 10%;
    border-radius: 12px;
}


/*
 .----------------.  .----------------.  .----------------.  .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. |
| |  _________   | || |     ____     | || | _____  _____ | || |  _______     | |
| | |  _   _  |  | || |   .'    `.   | || ||_   _||_   _|| || | |_   __ \    | |
| | |_/ | | \_|  | || |  /  .--.  \  | || |  | |    | |  | || |   | |__) |   | |
| |     | |      | || |  | |    | |  | || |  | '    ' |  | || |   |  __ /    | |
| |    _| |_     | || |  \  `--'  /  | || |   \ `--' /   | || |  _| |  \ \_  | |
| |   |_____|    | || |   `.____.'   | || |    `.__.'    | || | |____| |___| | |
| |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------' 
*/

.tourList{
    width: 75%;
    margin-bottom: 10%;
}

.tourList img{
    width: 300px;
    height: 300px;
    object-fit: contain;
    overflow: hidden;
    margin-left: 10px;
    border: 3px dashed white;
}

.tourBox{
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    align-items: flex-end;
    justify-content: space-between;
}

.tourDates{
    width: 100%;
    text-align: center;
}

.tourBox summary{
    cursor: pointer;
}

.tourHeader{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 25px;
    margin-bottom: 25px;
}

.tourRow{
    display: flex;
    align-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

summary{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
}

.tourRow p{
    width: 25%;
    background-color: white;
    border: 2px dotted #21A9FF;
}

.tourRow button{
    background-color: white;
    margin-left: 25px;
    border-radius: 12px;
}

.tourRow button:hover{
    background-color: #21A9FF;
    margin-left: 25px;
}

.date, .city, .venue, .tickets{
    padding: 10px;
}

/*
 .-----------------. .----------------.  .----------------.  .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. |
| | ____  _____  | || |  _________   | || | _____  _____ | || |    _______   | |
| ||_   \|_   _| | || | |_   ___  |  | || ||_   _||_   _|| || |   /  ___  |  | |
| |  |   \ | |   | || |   | |_  \_|  | || |  | | /\ | |  | || |  |  (__ \_|  | |
| |  | |\ \| |   | || |   |  _|  _   | || |  | |/  \| |  | || |   '.___`-.   | |
| | _| |_\   |_  | || |  _| |___/ |  | || |  |   /\   |  | || |  |`\____) |  | |
| ||_____|\____| | || | |_________|  | || |  |__/  \__|  | || |  |_______.'  | |
| |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------' 
*/

.mailingList{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mailingList img{
    height: 200px;
    width: 400px;
    object-fit: cover;
    margin-left: 25px;
}

.mailingList input, label{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
}



/*
 .----------------.  .----------------.  .----------------.  .----------------.  .----------------. 
| .--------------. || .--------------. || .--------------. || .--------------. || .--------------. |
| |    _______   | || |     _____    | || |   ________   | || |  _________   | || |    _______   | |
| |   /  ___  |  | || |    |_   _|   | || |  |  __   _|  | || | |_   ___  |  | || |   /  ___  |  | |
| |  |  (__ \_|  | || |      | |     | || |  |_/  / /    | || |   | |_  \_|  | || |  |  (__ \_|  | |
| |   '.___`-.   | || |      | |     | || |     .'.' _   | || |   |  _|  _   | || |   '.___`-.   | |
| |  |`\____) |  | || |     _| |_    | || |   _/ /__/ |  | || |  _| |___/ |  | || |  |`\____) |  | |
| |  |_______.'  | || |    |_____|   | || |  |________|  | || | |_________|  | || |  |_______.'  | |
| |              | || |              | || |              | || |              | || |              | |
| '--------------' || '--------------' || '--------------' || '--------------' || '--------------' |
 '----------------'  '----------------'  '----------------'  '----------------'  '----------------' 
*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .navBar{
        background-color: none;
    }

    .items{
        background: none;
        flex-direction: column;
        align-items: flex-start;
    }

    .navItem, .navItemRed{
        margin-bottom: 2%;
    }

    .home-grid{
        display: flex;
        flex-direction: column;
    }

    .circlePics{
        flex-direction: row;
    }

    .circleFrame{
        height: 100px;
        width: 100px;
        margin: 5px;
    }

    .artistGrid{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .artistButton{
        grid-column: 2;
    }

    .artistRow1{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .artistRow2{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .artistRow3{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    [popover]{
        width: 200px;
    }

    .artistGrid :popover-open img{
    height: 150px;
    width: 150px;
    object-fit: contain;
    grid-column: 1 / span 12;
    grid-row: 1 / span 3;
    justify-self: center;
    }

    .artistGrid :popover-open h1{
        font-size: 12pt;
        font-family: sans-serif;
        grid-column: 1 / span 12;
        grid-row: 4 / span 2;
        text-align: center;
    }

    .artistGrid :popover-open p{
        font-size: 8pt;
        font-family: sans-serif;
        grid-column: 1 / span 12;
        grid-row: 6 / span 4;
        justify-self: center;
        margin: 10%;
    }

    .pageHeader{
        margin-bottom: 150px;
        width: 33%;
    }


    .mailingList{
        flex-direction: column;
    }

    .mailingList img{
        width: 400px;
        height: 200px;
        margin-bottom: 5%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .releaseBox img{
    height: 100px;
    width: 100px;
    margin: 0 auto;
}

.releaseBox p{
    font-size: 12pt;
    text-align: center;
    margin: 0 auto;
}
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    p{
        font-size: 14pt;
    }

    h2{
        font-size: 24pt;
    }

    .releaseBox img{
    height: 150px;
    width: 150px;
    margin: 0 auto;
}

.releaseBox p{
    font-size: 14pt;
    text-align: center;
    margin: 0 auto;
}

.artistGrid button{
    border: 0;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    background: none;
}

.artistButton img{
    height: 400px;
    width: 400px;
    object-fit: cover;
    border: 1px solid black;
    border-radius: 50%;
}

}