@font-face {
    font-family: 'Connary Fagen - Greycliff CF Regular';
    src: url('../fonts/Connary Fagen - Greycliff CF Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Connary Fagen - Greycliff CF Bold';
    src: url('../fonts/Connary Fagen - Greycliff CF Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Connary Fagen - Greycliff CF Demi Bold';
    src: url('../fonts/Connary Fagen - Greycliff CF Demi Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Connary Fagen - Greycliff CF Light';
    src: url('../fonts/Connary Fagen - Greycliff CF Light.otf') format('opentype');
}
@font-face {
    font-family: 'Connary Fagen - Greycliff CF Medium';
    src: url('../fonts/Connary Fagen - Greycliff CF Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Connary Fagen - Greycliff CF Extra Bold';
    src: url('../fonts/Connary Fagen - Greycliff CF Extra Bold.otf') format('opentype');
}

.Connary-regular {
    font-family: 'Connary Fagen - Greycliff CF Regular';
}
.Connary-bold {
    font-family: 'Connary Fagen - Greycliff CF Bold';
}
.Connary-Medium {
    font-family: 'Connary Fagen - Greycliff CF Medium';
}
.Connary-extrabold {
    font-family: 'Connary Fagen - Greycliff CF Extra Bold';
}


html{
    overflow: hidden ;

} 

#wrapper
{
  margin:0px 40px;
}
main{
    margin: 0px 0px !important;
} 

@media only screen and (max-width:1046px){
    #wrapper {
      margin: 0 34px;
    }
}@media only screen and (max-width:991px)
{
    #wrapper {
    margin: 0 21px;
}
}
@media only screen and (max-width:620px)
{ 
    #wrapper {
        margin: 0 32px;
    }
}
@media only screen and (max-width:480px) {
    
    
  #wrapper {
    margin: 0 32px;
  }
}
@media only screen and (max-width:420px)   {
    #wrapper {
  margin: 0 28px;
}
}
@media only screen and (max-width:360px)  {
    
    #wrapper {
  margin: 0 24px;
}
}




.home-banner-area .banner-content h1,.home-banner-area .banner-content p {
    visibility: hidden;
}
section{
    z-index: 4!important;
} 
main{
    z-index: 0!important;
} 
.headermain{
    z-index: 5;
    visibility: hidden;
}
.header-mobile-title{
    z-index: 5!important;
    opacity: 0;
}
.aboutmusic,.logo{
    z-index: 3!important;
}

.logo{
    opacity: 0;
}
.logo-white{
    position: absolute;
    top: 0;
}

/*
        
#mainNav, .logo{
    opacity: 1 !important;
}
.logo-white{
    opacity: 0;
}
*/

strong {
    font-family: 'Connary Fagen - Greycliff CF Extra Bold';
}
#secmarquee p{
    font-family: 'Connary Fagen - Greycliff CF Demi Bold';
}
 
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px
}

section{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-color: white;
}


#splash
{
 height: 100%;
}
#splash .fullscreen {
    z-index: 1;
    height: 100%;
    background-attachment: fixed;
    background-size:cover;
}

@media (max-width: 1199.98px) {
    #splash .fullscreen {
        height: 700px
    } 
}

#splash .overlay {
    /*background: rgba(5,10,52,0.6)*/
    position: absolute;
    z-index: 0;
    background: #fff
}  

#splash .banner-content {
    margin-top: 28%
}

/* Big Logo */

/*Animation Logo*/
#splash .template-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    animation: sidetextMove 3s;
    animation-delay: 1s;
    top: 170px;
    width: 400px;
    right: -102px;
    animation-fill-mode: backwards;
    opacity: 0.4;
}

@keyframes sidetextMove { 
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 170px;
            opacity:0.4;
        }
    }


@media only screen and (min-width:820px) and (min-height:1023px)
{
    #splash .template-name{
        top: 145px;
        right: -70px;
        width: 250px;
    }
    
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 145px;
            opacity:0.4;
        }
    }
    
    
}
@media only screen and (min-width:768px) and (min-height:1023px)
{
    #splash .template-name{
        top: 120px;
        right: -72px;
    }
    
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 120px;
            opacity:0.4;
        }
    }
}
@media only screen and (min-width:1600px)  {
    
    #splash .template-name{
        top: 167px;
        width: 350px; 
        right: -88px;
    }
    /*Animation Logo*/

    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 167px;
            opacity:0.4;
        }
    }
    
}
@media only screen and (max-width:1440px)  {
    
    #splash .template-name{
        top: 136px;
        width: 300px; 
        right: -88px;
    }
    /*Animation Logo*/

    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 136px;
            opacity:0.4;
        }
    }
    
}
@media only screen and (max-width:1046px) {
    
     #splash .template-name{
         top: 128px;
        right: -95px;
         width: 300px;
    } 
        @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 128px;
            opacity:0.4;
        }
    }
}
@media only screen and (max-width:991px) 
{
    
    #splash .template-name{
        top: 110px;
        right: -69px;
        width: 250px;
    }
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 110px;
            opacity:0.4;
        }
    }
    
    
}
@media only screen and (max-width:768px) {
    
   
    #splash .template-name{
        top: 110px;
        width: 250px; 
        right: -72px;
    }
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 110px;
            opacity:0.4;
        }
    }
    
}
@media only screen and (max-width:620px)
{ 
    
    #splash .template-name{
        top: 94px;
        width: 230px; 
        right: -55px;
    }
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 94px;
            opacity:0.4;
        }
    }
}
@media only screen and (max-width:480px) {
   
    #splash .template-name{
        top: 70px;
        width: 150px; 
        right: -42px;
    }
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 70px;
            opacity:0.4;
        }
    }
}
@media only screen and (max-width:420px)   {
    
    #splash .template-name{
        top: 87px;
        width: 200px; 
        right: -64px;
    }
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 87px;
            opacity:0.4;
        }
    }
    
    
}
@media only screen and (max-width:360px)  {
   
    #splash .template-name{
        top: 70px;
        width: 150px; 
        right: -43px;
    }
    @keyframes sidetextMove {
        from {
            top: 500px;
            opacity:0;
         }

        to {
            top: 70px;
            opacity:0.4;
        }
    }
   
}

/* Big Logo */

/* Hi + Paragraph*/
#splash .banner-content h1 {
    color: #575151;
    font-size: 170px;
    line-height: 180px;
    font-weight: 700;
    margin-bottom: 0px;
    padding-top: 18.2%;
}
#splash .banner-content p {
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    color: #575151;
}
#secmarquee h1, #secmarquee p{
        cursor:default;
    }

.marquee {
    top: 0em;
    position: absolute;
    box-sizing: border-box;
    position: absolute;
    width: auto;
    height: 100%;
} 
.banner-content
{
    height: 80vh;
    overflow: hidden;
    position: relative;
   
} 

.marquee {
    animation: marquee 22s ease-in ;
    -moz-animation: marquee 22s ease-in ;
    -webkit-animation: marquee 22s ease-in ;
}  
.marquee-toppos {
    top: -88em;
}
@keyframes marquee {
    0% {
        top: 0em
        /*margin-top:65%;*/
    }

    100% {
        top: -88em;
    }
}
.headermain{
        visibility: visible !important;
    } 



@media only screen and (min-width:1600px)  {
    
     #splash .banner-content {
        margin-top: 42%;
    }
    #secmarquee{
        margin: 0px 35px;
    }
     #splash .banner-content h1 {
         padding-top: 0px;
        font-size: 190px;
        line-height: 195px;
         margin-left: -11px;
    }
    #splash .banner-content p {
        font-size: 28px;
        line-height: 40px;
    }
    .marquee-toppos {
        top: -78em;
    }  
    
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            top: -78em;
            opacity: 0;
        }
    }
    
}
@media only screen and (max-width:1440px)  {
    
     #splash .banner-content {
        margin-top: 30%;
    }
    #secmarquee{
        margin: 0px 65px;
    }
     #splash .banner-content h1 {
         padding-top: 51px;
        font-size: 145px;
        line-height: 135px;
         margin-left: -7px;
    }
    #splash .banner-content p {
        font-size: 23px;
        line-height: 35px;
    }
    .marquee-toppos {
        top: -68em;
    }   
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            top: -68em;
            opacity: 0;
        }
    }
    
}
@media only screen and (max-width:1046px) {
    
      #splash .banner-content {
        margin-top: 22%;
    }
    #secmarquee{
        margin: 0px 180px;
    }
     #splash .banner-content h1 {
         padding-top: 30px;
        font-size: 145px;
        line-height: 135px;
         margin-left: -7px;
    }
    #splash .banner-content p {
        font-size: 24px;
        line-height: 35px;
    }
    #splash .row .col-md-8{
        flex: 0px;
        margin-left: 0px;
        max-width: 800px ;
    } 
    .marquee-toppos {
        top: -67em;
    }  
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            top: -67em;
            opacity:0;
        }
    }
}
@media only screen and (max-width:991px) 
{
    
   #splash .banner-content {
        margin-top: 17.5%;
    }
    #secmarquee{
        margin: 0px 135px;
    }
     #splash .banner-content h1 {
         padding-top: 32px;
        font-size: 145px;
        line-height: 135px;
         margin-left: -7px;
    }
    #splash .banner-content p {
        font-size: 24px;
        line-height: 35px;
    }
    #splash .row .col-md-8{
        flex: 0px;
        margin-left: 0px;
        max-width: 800px ;
    } 
    .marquee-toppos {
        top: -60em;
    }  
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            opacity:0;
            top: -60em;
        }
    }
    
    
}
@media only screen and (max-width:768px) {
    
   
    #splash .banner-content {
        margin-top: 19.5%;
    }
    #secmarquee{
        margin: 0px 135px;
    }
     #splash .banner-content h1 {
         padding-top: 17px;
        font-size: 145px;
        line-height: 135px;
         margin-left: -7px;
    }
    #splash .banner-content p {
        font-size: 24px;
        line-height: 35px;
    }
    #splash .row .col-md-8{
        flex: 0px;
        margin-left: 0px;
        max-width: 800px ;
    } 
    .marquee-toppos {
        top: -60em;
    }  
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            opacity:0;
            top: -60em;
        }
    }
    
}
@media only screen and (max-width:620px)
{ 
    
    #splash .banner-content {
        margin-top: 21%;
    }
    #secmarquee{
        margin: 0px 19%
    }
     #splash .banner-content h1 {
         padding-top: 27px;
        font-size: 125px;
        line-height: 135px;
         margin-left: -7px;
    }
    #splash .banner-content p {
        font-size: 18px;
        line-height: 23px;
    }
    #splash .row .col-md-8{
        flex: 0px;
        margin-left: 0px;
        max-width: 800px ;
    } 
    .marquee-toppos {
        top: -50em;
    }  
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            opacity:0;
            top: -50em;
        }
    }
} 
@media only screen and (max-width:480px) {
   
 
}
@media only screen and (max-width:420px)   {
    
    #splash .banner-content {
        margin-top: 85px;
    } 
    #secmarquee{
        margin: 0px 93px;
        margin-top: 0em;
 
    }
    #splash .banner-content h1 {
        padding-top: 55px;
        font-size: 90px;
        line-height: 90px;
        margin-left: -5px;
    } 
    #splash .banner-content p {
        font-size: 13px;
        line-height: 18px;
    } 
    
    .marquee-toppos {
        top: -40em;
    }  
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        95%{
            opacity: 1;
        }
        100% {
            opacity:0;
            top: -40em;
        }
    }
    
    
}
@media only screen and (max-width:412px) {
    #secmarquee{
        margin: 0px 92px;
    }
}
@media only screen and (max-width:395px) {
    #secmarquee{
        margin: 0px 83px;
    }
}
@media only screen and (max-width:390px) {
    #secmarquee{
        margin: 0px 82px;
    }
}
@media only screen and (max-width:375px) {
    #secmarquee{
        margin: 0px 75px;
    }
}
@media only screen and (max-width:360px)  {
   
    #splash .banner-content {
        margin-top: 78px;
    } 
    #secmarquee{
        margin: 0px 75px;
        margin-top: 0em;
 
    }  
    #splash .banner-content h1 {
        padding-top: 22px;
        font-size: 75px;
        line-height: 85px;
        margin-left: -5px;
    }
    #splash .banner-content p {
        font-size: 12px;
        line-height: 15px;
    }
    
   
    .marquee-toppos {
        top: -35em;
    }  
    /* Make it move! */
    @keyframes marquee {
        0% {
            top: 0em;
            /*margin-top:65%;*/
        }
        90%{
            opacity: 1;
        }
        100% {
            opacity:0;
            top: -35em;
        }
    }
   
}
@media only screen and (max-width:320px) {
    #secmarquee{
        margin: 0px 55px;
    }
}
@media only screen and (max-width:280px) {
    #secmarquee{
        margin: 0px 35px;
    }
}


/* Hi + Paragraph*/
.white{
    color:white !important;
}

/* Custom Animation CSS Start - Urvish  */




/* Custom Animation CSS End - Urvish  */