/*==================================================
GLOBULAR RECORDS
Premium Landing Page
Part 2A
===================================================*/

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


@font-face{
    font-family:"Vinyl Smooth BV";
    src:url("fonts/VinylSmoothBv-rRx.ttf") format("truetype");
font-display:swap;
}

@font-face{

    font-family:'American Years PERSONAL USE';

    src:url('fonts/AmericanYearsPersonalUseRegular-BLW05.otf') format('opentype');

    font-weight:normal;

    font-style:normal;

}

 /*====================================
DESKTOP LAYOUT FOUNDATION
=====================================*/

:root{

--design-width:1600;

--desktop-width:min(100vw,1600px);

--scale:min(calc(100vw / 1600),1);

}
/*=========================
ROOT VARIABLES
==========================*/

:root{

--bg:#000000;

--white:#ffffff;

--purple:#A54CC4;

--purple-dark:#6B1FAE;

--purple-light:#C26CE8;

--orange:#F47A08;

--gray:#999999;

--menu-size:15px;

--menu-gap:clamp(40px,3.6vw,58px);

--logo-width:clamp(70px,5vw,90px);

--hero-width:min(100%,1600px);

--vinyl-size:clamp(330px,28vw,460px);

--transition:.35s ease;

--spin-speed:14s;

}


/*=========================
RESET
==========================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

color:#fff;

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

overflow-x:hidden;

}


/*=========================
LINKS
==========================*/

a{

text-decoration:none;

color:inherit;

}


/*=========================
LISTS
==========================*/

ul{

list-style:none;

}


/*=========================
IMAGES
==========================*/

img{

display:block;

max-width:100%;

}


/*=========================
HEADER
==========================*/

.hero{

position:relative;

width:min(100%,1600px);

min-height:100vh;

margin-inline:auto;

background:#000;

overflow:hidden;
padding-bottom:90px;

}


/*=========================
LOGO
==========================*/

.logo-area{

position:absolute;

left:clamp(20px,2.7vw,43px);

top:clamp(30px,3.4vw,55px);

z-index:100;

}

.logo{

width:var(--logo-width);

height:auto;

}


/*=========================
NAVIGATION
==========================*/

.navigation{

position:absolute;

top:clamp(32px,2.8vw,45px);

/*
900px was your perfect position
900 / 1600 = 56.25%
*/

left:72%;

transform:translateX(-50%);

z-index:100;

}

.navigation ul{

display:flex;

align-items:center;

gap:clamp(24px,3vw,58px);

}

.navigation li{

position:relative;

}

.navigation a{

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

font-weight:400;

font-size:12px;

letter-spacing:1.2px;

color:#fff;

transition:.3s;
white-space:nowrap;


}


/* under/* */
/*
.navigation li::after{

content:"";

position:absolute;

left:0;

bottom:-12px;

width:0;

height:3px;

background:var(--purple);

transition:.35s;

}*/

.lii{

content:"";

position:absolute;

left:0;

bottom:-12px;

width:0;

height:3px;

background:var(--purple);

transition:.35s;

}

.navigation li:hover::after{

width:100%;

}

.navigation li.active::after{

width:100%;

}


/*=========================
HAMBURGER
==========================*/

.hamburger{

display:none;

position:absolute;

top:42px;

right:35px;

width:40px;

height:30px;

cursor:pointer;

z-index:500;

}

.hamburger span{

display:block;

width:100%;

height:3px;

background:#fff;

margin:7px 0;

transition:.35s;

}


/*=========================
MOBILE MENU
==========================*/

.mobile-menu{

display:none;

position:fixed;

top:90px;

left:0;

right:0;

width:100%;

background:#000;

padding:30px;

flex-direction:column;

z-index:9999;

}

.mobile-menu.active{

display:flex !important;

}

.mobile-menu a{

display:block;

padding:16px 0;

font-size:18px;

letter-spacing:2px;

border-bottom:1px solid rgba(255,255,255,.08);

}


/*=========================
HERO CONTENT
==========================*/

.hero-content{

 
width:min(100%,1600px);

height:80%;

margin-inline:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding-inline:clamp(30px,4vw,70px);

}


/*=========================
LEFT
==========================*/

.left-content{

flex:0 0 32%;

display:flex;

flex-direction:column;

justify-content:center;

padding-top:120px;

}


/* purple heading */
/*edit font top size*/
.left-content h4{

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

font-size:30px;

color:var(--purple);

letter-spacing:.5px;
/*edited */
margin-bottom:-8px;

font-weight:400;

}


/* white heading */

.left-content h5{

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

font-size:clamp(22px,1.9vw,30px);

color:#fff;

font-weight:400;

letter-spacing:.5px;

margin-bottom:38px;

}


/*=========================
TYPOGRAPHY
==========================*/

.headline{

line-height:.88;

}


/* MUSIC */

.music-line{

display:flex;

align-items:flex-end;

}

.music{

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

font-size:170px;

color:var(--purple);

line-height:.8;

letter-spacing:1px;

}


/* BEYOND */

.beyond{

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

font-size:60px;

margin-left:22px;

margin-bottom:2px;

color:#fff;

}


/* BORDER */

.border-line{

display:flex;

align-items:flex-end;

margin-top:18px;

}

.border{

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

font-size:182px;

line-height:.8;

color:#fff;

}


/* S */

.purple-s{

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

font-size:182px;

line-height:.8;

color:var(--purple);

}


/*=========================
CENTER
==========================*/

.center-content{

width:32%;

display:flex;

justify-content:center;

align-items:center;

}


/*=========================
VINYL WRAPPER
==========================*/

.vinyl-wrapper{

position:relative;

width:var(--vinyl-size);

height:var(--vinyl-size);

display:flex;

justify-content:center;

align-items:center;

}


/*=========================
RIGHT
==========================*/

.right-content{

flex:0 0 24%;

display:flex;

justify-content:flex-end;

align-items:center;

padding-top:120px;
white-space:nowrap;

}

.right-content h1{

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

font-size:185px;

line-height:.92;

font-weight:400;

text-align:left;

color:var(--orange);

}

.right-content span{

display:block;

}


/*=========================
AUDIO
==========================*/

audio{

display:none;

}


/*=========================
SMOOTH FADE
==========================*/

.hero{

animation:fadeIn 1.3s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}

/*==================================================
PART 2B
VINYL RECORD
===================================================*/



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

.vinyl{

position:relative;

width:100%;

height:100%;
aspect-ratio:1/1;
border-radius:50%;

overflow:hidden;

cursor:pointer;

/* Main colour */

background:
radial-gradient(circle at center,

#ce83ef 0%,

#b762df 12%,

#9736cb 28%,

#6d139d 48%,

#500678 68%,

#2b003d 100%);

box-shadow:

0 0 45px rgba(170,65,255,.45),

0 0 100px rgba(120,0,255,.18),

inset 0 0 50px rgba(255,255,255,.08),

inset 0 0 90px rgba(0,0,0,.65);

animation:spinRecord var(--spin-speed) linear infinite;

transition:.4s ease;

}


/*=========================
OUTER SHINE
==========================*/

.vinyl::before{

content:"";

position:absolute;

inset:0;

border-radius:50%;

background:

linear-gradient(

130deg,

rgba(255,255,255,.22),

transparent 25%,

transparent 50%,

rgba(255,255,255,.08) 65%,

transparent 100%

);

mix-blend-mode:screen;

pointer-events:none;

}


/*=========================
EDGE RIM
==========================*/

.vinyl::after{

content:"";

position:absolute;

inset:8px;

border-radius:50%;

border:2px solid rgba(255,255,255,.10);

box-shadow:

inset 0 0 20px rgba(255,255,255,.08),

0 0 15px rgba(0,0,0,.6);

pointer-events:none;

}


/*=========================
VINYL GROOVES
==========================*/

.vinyl-ring{

position:absolute;

left:50%;

top:50%;

border-radius:50%;

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

border:1px solid rgba(255,255,255,.08);

}


/* outer */

.ring1{

width:90%;

height:90%;

}


/* second */

.ring2{

width:72%;

height:72%;

}


/* third */

.ring3{

width:54%;

height:54%;

}


/* inner */

.ring4{

width:36%;

height:36%;

}


/*=========================
EXTRA MICRO GROOVES
==========================*/

.vinyl .grooves{

position:absolute;

inset:0;

border-radius:50%;

background:

repeating-radial-gradient(

circle,

rgba(255,255,255,.04) 0px,

rgba(255,255,255,.04) 1px,

transparent 2px,

transparent 7px

);

opacity:.65;

mix-blend-mode:overlay;

}


/*=========================
CENTER LABEL
==========================*/

.center-hole{

position:absolute;

left:50%;

top:50%;

width:82px;

height:82px;

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

border-radius:50%;

background:

radial-gradient(circle,

#ffffff 0%,

#d9d9d9 15%,

#9f38d8 25%,

#6f129f 65%,

#2c003f 100%);

box-shadow:

0 0 18px rgba(255,255,255,.25),

inset 0 0 20px rgba(0,0,0,.45);

}


/* spindle hole */

.center-hole::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:10px;

height:10px;

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

background:#111;

border-radius:50%;

}


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

.vinyl-wrapper::before{

content:"";

position:absolute;

width:120%;

height:120%;

border-radius:50%;

background:

radial-gradient(circle,

rgba(176,66,255,.28),

rgba(176,66,255,.12),

transparent 70%);

filter:blur(45px);

z-index:-1;

}


/*=========================
SOFT SHADOW
==========================*/

.vinyl-wrapper::after{

content:"";

position:absolute;

bottom:-35px;

width:70%;

height:30px;

border-radius:50%;

background:rgba(0,0,0,.75);

filter:blur(30px);

z-index:-2;

}


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

.vinyl:hover{

transform:scale(1.03);

box-shadow:

0 0 70px rgba(175,50,255,.65),

0 0 130px rgba(130,0,255,.30),

inset 0 0 70px rgba(255,255,255,.10);

}


/*=========================
SPIN
==========================*/

@keyframes spinRecord{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/*=========================
REDUCE MOTION
==========================*/

@media (prefers-reduced-motion:reduce){

.vinyl{

animation:none;

}

}


/*=========================
TONEARM PLACEHOLDER
==========================*/
/* edit arms*/
.tonearm{

position:absolute;

/* Move INSIDE the record */
top:58%;

left:52%;

/* Size */
width:62%;
    max-width:255px;
    height:auto;;

/* Rotate around the pivot */
transform-origin:15px 18px;

/* Initial position */
transform:
translate(-50%,-50%)
rotate(42deg);

/* Hidden until playing */
opacity:0;

transition:
transform .8s cubic-bezier(.22,1,.36,1),
opacity .4s;

z-index:20;

pointer-events:none;

}

.vinyl-wrapper.playing .tonearm{

opacity:1;

transform:
translate(-50%,-50%)
rotate(8deg);
 left:66%;
 

}


/* activated later by JavaScript */

 


/*=========================
VINYL HOVER GLOW
==========================*/

.vinyl-wrapper:hover::before{

opacity:1;

filter:blur(55px);

}


/*=========================
SUBTLE PULSE
==========================*/

@keyframes glowPulse{

0%{

opacity:.55;

}

50%{

opacity:1;

}

100%{

opacity:.55;

}

}

.vinyl-wrapper::before{

animation:glowPulse 4s ease-in-out infinite;

}

/*==================================================
PART 2C
RESPONSIVE DESIGN
==================================================*/


/*=========================
1600px
==========================*/

@media (max-width:1600px){

.hero-content{

padding:0 40px;

}

.music{

font-size:130px;

}

.border,
.purple-s{

font-size:165px;

}

.beyond{

font-size:40px;

}
/*edit font music is life */
.right-content h1{

font-size:125px;

}

:root{

--vinyl-size:410px;

}

}

/*=========================
1400px
==========================*/

@media (max-width:1400px){
	 

.hero-content{

padding:0 40px;

}


.left-content{

width:36%;

}

.center-content{

width:30%;

}

.right-content{

width:26%;

}

.music{

font-size:125px;

}

.border,
.purple-s{

font-size:155px;

}

.beyond{

font-size:55px;

}

.right-content h1{

font-size:125px;

}

:root{

--vinyl-size:360px;

}

.navigation ul{

 

}

}

/*=========================
1330px
==========================*/

@media (max-width:1330px){
	 

.hero-content{

/*padding:0 10px;*/

}

.left-content{

width:34%;

}

.left-content h5{

font-size:25px;

}

.center-content{

width:30%;

}

.right-content{

width:26%;

}

.music{

font-size:105px;

}

.border,
.purple-s{

font-size:130px;

}

.beyond{

font-size:40px;

}

.right-content h1{

font-size:125px;

}

:root{

--vinyl-size:360px;

}

.navigation ul{

 

}

}


/*=========================
1200px
==========================*/

@media (max-width:1200px){

.hero-content{

flex-direction:column;

justify-content:center;

text-align:center;

padding-top:-10px; 

}

.left-content,
.center-content,
.right-content{

width:100%;

}

.left-content{

padding-top:0;

align-items:center;

}

.right-content{

justify-content:center;

padding-top:60px;

}

.music-line{

justify-content:center;

}

.border-line{

justify-content:center;

}

:root{

--vinyl-size:330px;

}

.navigation ul{

gap:24px;

}

.navigation{

display:none;

}

.hamburger{

display:block;

}

.mobile-menu{

display:none;

flex-direction:column;

}

}




/*=========================
992px
==========================*/

@media (max-width:992px){

.navigation{

display:none;

}

.hamburger{

display:block;

}

.mobile-menu{

display:none;

flex-direction:column;

}

 

.logo-area{

left:25px;

top:28px;

}

.hero-content{

/*padding:140px 20px 60px;*/
padding-top:-10px; 

}

.music{

font-size:95px;

}

.border,
.purple-s{

font-size:105px;

}

.beyond{

font-size:50px;

margin-left:12px;

}

.right-content h1{

font-size:95px;

text-align:center;

}

.left-content h4{

font-size:28px;

}

.left-content h5{

font-size:22px;

}

:root{

--vinyl-size:300px;

}

}


/*=========================
768px
==========================*/

@media (max-width:768px){

.hero{

height:auto;

min-height:100vh;

padding-bottom:70px;

}

.hero-content{

padding-top:-10px;

}

.music{

font-size:78px;

}

.border,
.purple-s{

font-size:82px;

}

.beyond{

font-size:42px;

}

.right-content h1{

font-size:78px;

}

.left-content h4{

font-size:22px;

}

.left-content h5{

font-size:18px;

}

:root{

--vinyl-size:260px;

}

.logo{

width:70px;

}

}


/*=========================
600px
==========================*/

@media (max-width:600px){

.music{

font-size:62px;

}

.border,
.purple-s{

font-size:66px;

}

.beyond{

font-size:34px;

margin-left:8px;

margin-bottom:6px;

}

.right-content h1{

font-size:62px;

}

.left-content h4{

font-size:18px;

}

.left-content h5{

font-size:16px;

}

:root{

--vinyl-size:220px;

}

}


/*=========================
430px
==========================*/

@media (max-width:430px){

.hero-content{

padding-top:70px;

}

.music{

font-size:48px;

}

.border,
.purple-s{

font-size:52px;

}

.beyond{

font-size:28px;

}

.right-content{

padding-top:35px;

}

.right-content h1{

font-size:48px;

}

.left-content h4{

font-size:16px;

}

.left-content h5{

font-size:14px;

}

:root{

--vinyl-size:180px;

}

.logo{

width:58px;

}

.mobile-menu{

padding:18px;

}

.mobile-menu a{

font-size:16px;

padding:14px 0;

}

}


/*=========================
MENU ANIMATION
==========================*/

@keyframes menuDrop{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================
HAMBURGER ACTIVE
==========================*/

.hamburger.active span:nth-child(1){

transform:rotate(45deg) translate(7px,7px);

}

.hamburger.active span:nth-child(2){

opacity:0;

}

.hamburger.active span:nth-child(3){

transform:rotate(-45deg) translate(7px,-7px);

}


/*=========================
MOBILE MENU LINKS
==========================*/

.mobile-menu a{

transition:.3s;

}

.mobile-menu a:hover{

padding-left:12px;

color:var(--purple);

}


/*=========================
GENERAL TRANSITIONS
==========================*/

.logo,
.navigation a,
.mobile-menu a,
.vinyl,
.right-content h1,
.music,
.border{

transition:.35s ease;

}@charset "utf-8";
/* CSS Document */

/*==================================================
PART 3B
==================================================*/

.vinyl.playing{

animation-duration:5s!important;

}

 

.vinyl-wrapper.playing .tonearm{

opacity:1;

transform:rotate(8deg);

}

/* padrt 2 */
/*==================================================
PART 2D-2
SECTION 1
PRODUCTION UTILITIES
==================================================*/


/*=========================
GPU ACCELERATION
==========================*/

.logo,
.navigation,
.navigation li,
.navigation a,
.hero-content,
.left-content,
.center-content,
.right-content,
.vinyl-wrapper,
.vinyl,
.tonearm,
.mobile-menu,
.hamburger,
.hamburger span{

will-change:transform,opacity;

backface-visibility:hidden;

transform-style:preserve-3d;

}


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

img{

user-select:none;

-webkit-user-drag:none;

image-rendering:auto;

}


/*=========================
TEXT
==========================*/

body{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

text-rendering:optimizeLegibility;

}


/*=========================
FOCUS
==========================*/

a:focus,
button:focus{

outline:none;

box-shadow:

0 0 0 3px rgba(165,76,196,.35);

}


/*=========================
POINTER
==========================*/

button,
a,
.logo,
.vinyl{

cursor:pointer;

}


/*=========================
DISABLE SELECT
==========================*/

.logo,
.navigation,
.music,
.border,
.right-content{

user-select:none;

}


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

.hero{

isolation:isolate;

}


/*=========================
PREVENT OVERFLOW
==========================*/

.hero-content>*{

min-width:0;

}


/*=========================
ANTI FLICKER
==========================*/

.vinyl{

transform:translateZ(0);

}


/*=========================
SMOOTH LINKS
==========================*/

.navigation a{

position:relative;

overflow:hidden;

}


/* animated underline */

.navigation a::before{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:linear-gradient(

90deg,

var(--purple),

#ffffff,

var(--purple)

);

transition:.35s ease;

}

.navigation li:hover a::before{

width:100%;

}


/*=========================
ACTIVE MENU
==========================*/

.navigation li.active a{

letter-spacing:2.5px;

}


/*=========================
LEFT HEADINGS
==========================*/

.left-content h4,
.left-content h5{

position:relative;

}


/* small accent line */

/* edit small line*/
/*
.left-content h4::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:65px;

height:2px;

background:var(--purple);

}*/


/*=========================
RIGHT TITLE
==========================*/
/* edit space font music is life */
.right-content h1{

/*letter-spacing:2px;*/

}


/*=========================
LETTER ANIMATION
==========================*/

.music,
.border,
.purple-s,
.right-content h1{

transition:

letter-spacing .4s ease,

filter .35s ease,

transform .35s ease;

}

.music:hover{

letter-spacing:2px;

}

.right-content h1:hover{

letter-spacing:1px;

}


/*=========================
CENTER ALIGNMENT
==========================*/

.center-content{

position:relative;

z-index:5;

}


/*=========================
RECORD GLOW
==========================*/

.vinyl-wrapper::before{

transition:

opacity .5s,

filter .5s,

transform .5s;

}

.vinyl-wrapper:hover::before{

transform:scale(1.1);

}


/*=========================
CENTER LABEL
==========================*/

.center-hole{

transition:.4s;

}

.vinyl:hover .center-hole{

transform:

translate(-50%,-50%)

scale(1.08);

}


/*=========================
VINYL RINGS
==========================*/

.vinyl-ring{

transition:.4s;

}

.vinyl:hover .vinyl-ring{

border-color:

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

}


/*=========================
BODY FADE
==========================*/

body.loaded .hero{

opacity:1;

transform:none;

}

.hero{

opacity:0;

transform:translateY(18px);

transition:

opacity .9s,

transform .9s;

}


/*=========================
NOISE OVERLAY
==========================*/

.hero-noise{

position:absolute;

inset:0;

pointer-events:none;

opacity:.04;

mix-blend-mode:soft-light;

background-image:

radial-gradient(circle,#fff 1px,transparent 1px);

background-size:7px 7px;

}


/*==================================================
MICRO ANIMATIONS
==================================================*/


/* floating logo */

.logo{

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

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0);

}

}


/* nav fade */

.navigation li{

animation:navFade .8s ease backwards;

}

.navigation li:nth-child(1){

animation-delay:.1s;

}

.navigation li:nth-child(2){

animation-delay:.2s;

}

.navigation li:nth-child(3){

animation-delay:.3s;

}

.navigation li:nth-child(4){

animation-delay:.4s;

}

.navigation li:nth-child(5){

animation-delay:.5s;

}

.navigation li:nth-child(6){

animation-delay:.6s;

}

.navigation li:nth-child(7){

animation-delay:.7s;

}

@keyframes navFade{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:none;

}

}


/* headline */

.music{

animation:titleLeft 1s ease;

}

.border{

animation:titleBottom 1.2s ease;

}

.right-content{

animation:titleRight 1.2s ease;

}

@keyframes titleLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes titleBottom{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes titleRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:none;

}

}

/*==================================================
PART 3C
==================================================*/

.page-loaded{

animation:pageLoaded .8s ease;

}

@keyframes pageLoaded{

from{

opacity:0;

}

to{

opacity:1;

}

}

.reduce-motion *{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

.show{

opacity:1!important;

transform:none!important;

}


/*ROTATE INSIDE DISC GLOBULAR RECORDS*/
/*=========================================
TEXT INSIDE VINYL
=========================================*/

.vinyl-text{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

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

    font-weight:400;

    font-size:clamp(2px,2.2vw,26px);

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(255,255,255,.72);

    opacity:.85;

    white-space:nowrap;

    pointer-events:none;

    user-select:none;

    z-index:30;

    text-shadow:
        0 0 10px rgba(255,255,255,.12);

}

/*-------------------------
TOP
-------------------------*/

.vinyl-top{

    top:4.5%;

    left:50%;
	

}

.vinyl-bottom{

    bottom:4.5%;

    left:50%;

    transform:
        translateX(-50%)
        rotate(180deg);
		 letter-spacing: 6px;

}

/*====================================
SVG LABEL
====================================*/

.vinyl-label{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

    pointer-events:none;

    z-index:50;

}

/*====================================
CURVED TEXT
====================================*/
.vinyl-arc-text{

    /*font-family:'American Years PERSONAL USE';*/
	/*font-family:'American Years PERSONAL USE';
    font-size:60px;
    letter-spacing:3px;*/
	font-family:'League Gothic', Antons;
	font-size:47px;
    letter-spacing:4px;
	 
	font-weight:800;
     

    fill:rgba(255,255,255,.99);

 
 text-transform:uppercase;



}