@charset "utf-8";

/*==================================================
GLOBULAR RECORDS
MUSIC LIVES SECTION
Premium Version
==================================================*/

@font-face{
    font-family:"League Gothic";
    src:url("fonts/league-gothic.regular.ttf") format("truetype");
}

.music-lives-section{

position:relative;
width:100%;
min-height:100vh;
overflow:hidden;

background:#000;

display:flex;
align-items:center;
justify-content:center;

padding:120px 0;

}

/*==================================================
CONTAINER
==================================================*/

.music-lives-container{

position:relative;

width:min(1500px,92%);

height:900px;

margin:auto;

}

/*==================================================
TITLE
==================================================*/

.music-lives-title{

    position:absolute;

    left:55%;

    top:38%;

    transform:translate(-50%,-50%);

    width:1150px;

    z-index:20;

    text-align:center;

}


.music-lives-title h2{

    margin:0;

  font-family:

  
        "League Gothic", "League Gothic",

       League Gothic;

    font-size:152px;

    /*font-weight:500;*/

    line-height:.98;

    letter-spacing:0px;

    text-transform:uppercase;

    color:#fff;
	
	 

}



}

.music-lives-title h2 span{

display:block;

color:#A54CC4;

}

.music-lives-title h2 small{

display:block;

margin-top:18px;

font-size:28px;

font-family:'Oswald',sans-serif;

letter-spacing:5px;

font-weight:300;

color:#fff;

}

.music-lives-title h2 strong{

display:block;

margin-top:18px;

font-size:56px;

font-weight:400;

font-family:'Anton',sans-serif;

color:#ffffff;

}

.music-lives-title p{

margin-top:40px;

font-family:

  
        "League Gothic", "League Gothic",

       League Gothic;

font-size:153px;

line-height:.8;

color:#cfcfcf;

max-width:950px;

margin-left:auto;
margin-right:auto;



}

/*==================================================
IMAGE CARDS
==================================================*/

.showcase-card{

position:absolute;
overflow:hidden;

border-radius:0;

/* Rounded version

border-radius:40px;

*/

background:#111;

border:1px solid rgba(165,76,196,.22);

box-shadow:
0 0 35px rgba(165,76,196,.15);

}
/*
.showcase-card{

position:absolute;

overflow:hidden;

/* Organic premium shape */

/*border-radius:42%;

/* Square Version

border-radius:28px;

*/
/*
background:#111;

border:2px solid rgba(165,76,196,.45);

box-shadow:

0 0 35px rgba(165,76,196,.20),

0 0 80px rgba(165,76,196,.10),

inset 0 0 30px rgba(255,255,255,.06);

backdrop-filter:blur(8px);

transition:

box-shadow .45s,

border-color .45s,

opacity .25s;

will-change:transform,opacity;

z-index:5;

}*/

/*==================================================
IMAGE
==================================================*/

.showcase-card img{

display:block;

width:100%;
height:100%;

object-fit:cover;

transition:

transform .8s,

filter .8s;

}

.showcase-card:hover img{

transform:scale(1.08);

filter:

brightness(1.08)

contrast(1.08)

saturate(120%);

}

/*==================================================
PURPLE BORDER
==================================================*/

.showcase-card::before{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

padding:2px;

background:

linear-gradient(

135deg,

rgba(255,255,255,.25),

rgba(165,76,196,.95),

rgba(255,255,255,.15),

rgba(165,76,196,.95)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

animation:borderRotate 8s linear infinite;

}

@keyframes borderRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*==================================================
PURPLE GLOW
==================================================*/

.showcase-card::after{

content:"";

position:absolute;

left:-25%;
top:-25%;

width:150%;
height:150%;

background:

radial-gradient(

circle,

rgba(165,76,196,.22),

transparent 72%

);

pointer-events:none;

animation:cardGlow 6s ease-in-out infinite;

}

@keyframes cardGlow{

0%{

opacity:.15;

}

50%{

opacity:.45;

}

100%{

opacity:.15;

}

}

/*==================================================
CARD HOVER
==================================================*/

.showcase-card:hover{

box-shadow:

0 0 60px rgba(165,76,196,.45),

0 0 120px rgba(165,76,196,.18);

}

/*==================================================
CARD SIZES
==================================================*/
/*
.top-left{

width:330px;
height:240px;

left:8%;
top:10%;

}

.top-right{

width:330px;
height:240px;

right:8%;
top:10%;

}

.bottom-left{

width:330px;
height:240px;

left:8%;
bottom:10%;

}

.bottom-right{

width:330px;
height:240px;

right:8%;
bottom:10%;

} */

.top-left{

width:200px;
height: 160px;

left:23%;
top:11%;

}

.top-right{

width:200px;
height:160px;

right:12%;
top:19%;

}

.bottom-left{

width:200px;
height:160px;

left:12%;
bottom:36%;

}

.bottom-right{

width:200px;
height:160px;

right:5%;
bottom:24%;

}

/*==================================================
BACKGROUND GLOW
==================================================*/

.music-lives-section::before{

content:"";

position:absolute;

left:50%;
top:50%;

width:900px;
height:900px;

transform:translate(-50%,-50%);

border-radius:50%;

background:

radial-gradient(

 

);

filter:blur(70px);

pointer-events:none;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.music-lives-container{

height:760px;

}

.showcase-card{

width:250px!important;
height:180px!important;

}

.music-lives-title h2{

font-size:78px;

}

.music-lives-title h2 strong{

font-size:44px;

}

}

@media(max-width:992px){

.music-lives-container{

height:auto;

padding:80px 0;

}

.showcase-card{

display:none;

}

/*==================================================
TITLE
Matches Screenshot
==================================================*/

.music-lives-title{

position:absolute;

left:56%;
top:59%;

transform:translate(-50%,-50%);

z-index:20;

width:980px;

text-align:center;

pointer-events:none;

}

.music-lives-title h2{

margin:0;

/*font-family:'Anton',sans-serif;*/

font-weight:400;

font-size:168px;

line-height:.42;

letter-spacing:4px;

color:#fff;

text-transform:uppercase;

white-space:nowrap;

}

/* second line */

.music-lives-title h2 span{

display:block;

font-size:.78em;

line-height:.82;

color:#fff;

}

/* third line */

.music-lives-title h2 span:last-child{

font-size:1em;

line-height:.82;

color:#fff;

}

.music-lives-title h2{

font-size:64px;

}

.music-lives-title h2 strong{

font-size:34px;

}

 

}

/*==================================================
RESPONSIVE
Keeps the same layout and scales everything together
==================================================*/

.music-lives-container{
    --design-width:1500;
    --scale:min(1, calc(100vw / (var(--design-width) * 1px)));

    transform:scale(var(--scale));
    transform-origin:top center;

    width:1500px;
    height:900px;
}

.music-lives-section{
    overflow:hidden;
}

/* Large Desktop */
@media (max-width:1500px){

    .music-lives-section{
        padding:80px 0;
        min-height:calc(900px * (100vw / 1500));
    }

}

/* Laptop */
@media (max-width:1200px){

    .music-lives-section{
        min-height:720px;
    }

}

/* Tablet */
@media (max-width:992px){

    .music-lives-section{
        min-height:620px;
        padding:60px 0;
    }

}

/* Large Phones */
@media (max-width:768px){

    .music-lives-container{
        --scale:.50;
    }

    .music-lives-section{
        min-height:480px;
        padding:40px 0;
    }

}

/* Phones */
@media (max-width:600px){

    .music-lives-container{
        --scale:.40;
    }

    .music-lives-section{
        min-height:400px;
        padding:30px 0;
    }

}

/* Small Phones */
@media (max-width:480px){

    .music-lives-container{
        --scale:.32;
    }

    .music-lives-section{
        min-height:330px;
        padding:20px 0;
    }

}

/* Very Small Devices */
@media (max-width:360px){

    .music-lives-container{
        --scale:.26;
    }

    .music-lives-section{
        min-height:280px;
    }

}
/*=========================================
PROPORTIONAL SCALING
=========================================*/

@media (max-width:1350px){

    .music-lives-container{
        --scale:.90;
        transform:scale(var(--scale));
        height:810px;
    }

}

@media (max-width:1200px){

    .music-lives-container{
        --scale:.80;
        transform:scale(var(--scale));
        height:720px;
    }

}

@media (max-width:992px){

    .music-lives-container{
        --scale:.68;
        transform:scale(var(--scale));
        height:612px;
    }

}

@media (max-width:768px){

    .music-lives-container{
        --scale:.55;
        transform:scale(var(--scale));
        height:495px;
    }

}

@media (max-width:600px){

    .music-lives-container{
        --scale:.45;
        transform:scale(var(--scale));
        height:405px;
    }

}

@media (max-width:480px){

    .music-lives-container{
        --scale:.35;
        transform:scale(var(--scale));
        height:315px;
    }

}

@media (max-width:360px){

    .music-lives-container{
        --scale:.28;
        transform:scale(var(--scale));
        height:252px;
    }

}