@charset "UTF-8";

*,*::before,*::after{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-text-size-adjust:100%;}
*[hidden]{display:none!important;}
a,address,b,blockquote,body,button,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,hr,html,i,input,ins,legend,li,menu,ol,p,td,textarea,th,var,video,ul{margin:0;padding:0;outline:none;text-decoration:none;font-size:1em;font-style:normal;font-weight:inherit;font-family:inherit;text-align:inherit;color:inherit;}
button,fieldset,hr,img,input,textarea{border:none;background-color:transparent;}
button::-moz-focus-inner{border:0;}
footer,header,main{display:block;}
li{list-style:none;}

html{height:100%;-webkit-tap-highlight-color:transparent;}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
body > svg{position:absolute;}
svg,symbol{overflow:visible;fill:currentColor;}
button{overflow:visible;}
button,input,textarea{line-height:inherit;}
b{font-weight:600;}
p,
ul,
ol{margin:1em 0;}
p:first-child,
ul:first-child,
ol:first-child{margin-top:0;}
p:last-child,
ul:last-child,
ol:last-child{margin-bottom:0;}
video,
img{display: block;width:100%;max-width:100%;}


.container {
    max-width: 1170px;
    padding: 0 15px;
    margin: auto;
}

.container-music {
    max-width: 900px;
}

.main-wrapper {
    margin-top: 181px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    padding: 30px 0;
    background-color: rgba(255, 255, 255, 0.98);
}

.container-header {
    display: flex;
    justify-content: center;
}

.music {
    width: 40px;
    height: 40px;
    background-image: url(../img/icons/note.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.logo {
    padding: 6px 22px;
    background-color: #DCAD36;   
    font-size: 35px;
    color: white;
    font-family: 'Forum', cursive;
    text-transform: uppercase;
    letter-spacing: 4px;
    display: block;
    margin-right: 30px;
    margin-left: 10px;
    transition: 0.5s;
    border-radius: 6px;
}

.logo:hover {
    color:black;
    background-color: transparent;
}

.nav-links {
    display: flex;
    align-items: center;
    z-index: 1;
}

.nav-links-item__active {
    color: #DCAD36;
}

.nav-links-item {
    font-size: 16px;
    text-transform: uppercase;
    transition: 0.5s;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    margin-right: 20px;
}

.nav-links-item:hover {
    color: #DCAD36;
}

.nav-links-item:last-child {
    margin-bottom: 0;
}

.btn-menu {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    border-radius: 50%;
    background-color: rgba(225, 174, 30, 0.9);
}

.btn-menu__line {
    position: relative;
    width: 26px;
    height: 2px;
    background-color: black;
}

.btn-menu__line-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    left: 0;
    transition: 1s;
}

.btn-menu__line-animation1 {
    top: -8px;
}

.btn-menu__line-animation2 {
    bottom: -8px;
}

.btn-menu__one-line {
    top: 0;
}

.btn-menu__one-line1 {
    bottom: 0;
}

.footer {
    padding: 70px 0;
    text-align: center;
}

.social {
    margin-bottom: 30px;
    visibility: hidden;
}

.social__item {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 14px;
    transition: 0.5s;
    font-size: 14px;
}

.social__item:hover {
    color: #DCAD36;
}

.social__item:last-child {
    margin-right: 0;
}
 
.site-created {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    color: rgb(175, 154, 154);
    margin-bottom: 30px;
    visibility: hidden;
}

.site-created a {
    transition: 0.5s;
}

.site-created a:hover  {
    color: black;
}

.copyter {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: rgb(175, 154, 154);
    visibility: hidden;
}



/* mobile + tablet */
@media screen and (max-width:940px){
  
	.desktop{display:none!important;}

	.scrollbox{overflow:auto;overflow:-moz-scrollbars-none!important;}
      .scrollbox::-webkit-scrollbar{display:none;}

    .main-wrapper {
        margin-top: 120px;
    }

    .logo {
        margin: 0;
    }

    .nav-links {
        position: fixed;
        left: 0;
        top: -100%;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        transition: 1s;
    }
    
    .nav-links-item {
        margin-right: 0;
        margin-bottom: 30px;
        font-size: 26px;
    }
    
    .nav-links-item:last-child {
        margin-bottom: 0;
    }

    .show-menu {
        top: 0;
    }
}

/* mobile */
@media screen and (max-width:640px){
}

/* tablet + desktop */
@media screen and (min-width:641px){
}  

/* tablet */    
    
@media screen and (min-width:641px) and (max-width:940px){
}     
    
/* desktop */    
@media screen and (min-width:941px){

    .mobile{display:none!important;}
}

@media screen and (max-width:400px) {
    .btn-menu {
        right: 30px;
        bottom: 30px;
    }

    .social-icon {
        position: fixed;
        bottom: 38.5px;
    }
}