/*
Theme Name: MIGRAIN
Author: gfxpulse
Version: 2.0
License: Private
*/

/** FONTS **/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/** BASE **/
html {
    background: #000;
    overflow-x: hidden;
    font-size: 18px;
}

body {
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-x: hidden;
    left: 0px;
    background: #000;
    color: #B3B3B3;
}

a, a:focus, a:hover {
    outline: 0 !important;
    color: inherit
}

:focus {
    outline: none;
}

::-moz-focus-inner {
    border: 0;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    margin-top: 0px;
    margin-bottom: 10px;
    font-weight: 400;
    color: #fff
}

h1 {
    display: none
}

h2 {
    font-weight: normal;
    font-size: 32px;
}

h3 {
    font-size: 20px;
}

h3 span {
    font-size: 14px;
    font-weight: 400;
}

h4 {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 10px;
}

p {
    color: #B3B3B3;
}

b, strong {
    font-weight: 700;
}

img {
    background-size: cover;
}

.modal-backdrop.in {
    filter: alpha(opacity=80);
    opacity: .8 !important;
}

a {
    cursor: pointer;
}

/* ELEMENTS */
#debug {
    position: fixed;
    bottom: 0px;
    left: 0px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    z-index: 100000;
    padding: 10px;
}

#overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0,0,0,0.7);
    z-index: 999;
    display: none;
}

.blur {
    -webkit-filter: blur(45px);
    -moz-filter: blur(45px);
    -o-filter: blur(45px);
    -ms-filter: blur(45px);
    filter: blur(45px);
}

.button {
    display: inline-block;
    padding: 6px 24px;
    font-size: 11px;
    font-weight: 600;
	background-color: #fff;
    text-decoration: none !important;
    cursor: pointer;
}

.button:hover {
    text-decoration: none;
}

.button-back {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 12px;
}

.paging a {
    display: inline-block;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    border: 1px dotted #393939;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0px 5px 15px 5px;
}

.paging.white a {
    color:#fff;
    border-color: #ddd
}
.paging a:hover {
    text-decoration:none;
    border-color:#666;
    background:rgba(100,100,100,0.1);
}
.paging.white a:hover {
    border-color: #fff;
    background:rgba(200,200,200,0.1);
}

/* COMPONENTS */
.slide-menu-button {
    display: inline-block;
    cursor: pointer;
}

.slide-menu-button i {
    color: #fff;
    font-size: 1.5rem;
}

.slide-menu {
    position: fixed;
    overflow: auto;
    background: #121212;
    width: 75vw;
    height: 100%;
    top: 0;
    z-index: 1000;
    margin: 0px;
    right: -75vw;
}

.slide-menu .social {
    padding-top: 0;
}

.slide-menu .social i {
    font-size: 1.25rem;
}

.slide-menu .lang-item {
    margin-top: -6px;
}

.slide-menu ul li a {
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.75rem;
    display: block;
}

.slide-menu ul li a:hover {
    background-color: #1c1c1e;
}

.slide-menu > ul li.current-page-ancestor > a,
.slide-menu > ul li.current-menu-ancestor > a,
.slide-menu > ul li.current-post-ancestor > a,
.slide-menu > ul li.current-menu-item > a {
    background-color: #1c1c1e;
}

.slide-menu-open {
    right: 0px !important;
}

.slide-menu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.slide-menu-pushLeft {
    left: -75vw;
}

.slide-menu, .slide-menu-push {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.slide-menu li ul {
    padding-left: 20px
}

.slide-menu li li {
    list-style-type: none;
    padding: 3px 0px 3px 10px;
}

/* HEADER */
#header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background: #000;
    z-index: 998;
}

#header .logo-link {
    display: block;
}

#header .logo {
    width: auto;
    height: 3.556rem;
}

#header .logo:hover {
    opacity: 0.5;
}

/* MAIN MENU */
.main-menu {
    margin-bottom: 0;
}

.main-menu li, .language-menu li {
    display: inline-block;
}

.main-menu li a {
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    text-underline-offset: .5rem;
}

.main-menu li:not(:last-child) a {
    padding-right: 1.778rem;
}

.language-menu {
    padding-left: 0;
    margin-bottom: 0.333rem;
}

.main-menu li.current-menu-item a, .main-menu li a:hover {
    color: #fff;
    text-decoration: underline;
}

.language-separator .vr {
    color: #fff;
    height: 1.5rem;
    opacity: 1;
}

.social i {
    font-size: 1.11rem;
}

.social a {
    color: #fff;
}

.share-socials {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.share-socials .item {
    display: inline-block;
    width: 30px;
    height: 30px;
    border:1px solid #fff;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}

.share-socials.black .item {
    color: #333 !important;
    border: 1px solid #333;
}

.share-socials.left {
    text-align: left;
}

.share-socials .item.sFb:hover {
    background: #3b5998;
    color: #fff !important;
    border-color: #3b5998;
}

.share-socials .item.sTw:hover {
    background: #000;
    color: #fff !important;
    border-color: #fff;
}

/* MAIN LOGO */
#main-logo .logo {
    height: calc(100vh - 7.222rem);
}

/* VIDEOS */
.single-video h2 {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}

.single-video iframe {
    border: none;
    display: block;
    width: 720px;
    max-width: 100%;
    height: 410px;
    margin: 0px auto;
}

.single-video .video-label {
    font-size: 1.333rem;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
}

.single-video .video-label-desc {
    font-size: 0.889rem;
    text-align: center;
    text-transform: uppercase;
}

.single-video .all-videos {
    text-align: center;
}

.single-video .all-videos .button {
    text-transform: uppercase;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-radius: 100px;
}

.single-video .button-back {
    color: #fff;
    font-size: 1.5rem;
}

#videos .list .item {
    overflow: hidden;
    cursor: pointer;
    filter: grayscale(100);
}

#videos img {
    width: 100%;
    max-width: 100%;
    opacity: 0.5;
}

#videos .list .item h3 {
    position: absolute;
    bottom: 1rem;
    left: 0px;
    right: 0px;
    padding: 0 2rem;
    text-align: center;
    text-transform: uppercase;
    opacity: 1;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.7);
 }

 .video-play {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    color: #fff;
    font-size: 3rem;
    opacity: 0.5;
}

#videos .single-video {
    padding-top: 82px;
}

#videos .list .item h3 span {
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    font-family: "Open Sans"
}

#videos .videolabel {
    background: red;
    color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 3px 5px;
}

#videos .list .item:hover {
    filter: none;
}

#videos ul {
    padding-top: 35px;
    text-align: center;
    padding-bottom: 20px;
}

#videos ul li {
    list-style-type: none;
    display: inline-block;
    padding: 5px 15px;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#videos ul li.active {
    border-bottom: 2px solid #fff
}

/* SHOWS */
#concerts h2 {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}

#concerts .concerts-list.index {
    border-top: 1px solid #5D5D5D;
}

#concerts .item {
    border-bottom: 1px solid #5D5D5D;
}

#concerts .date {
    font-size: 1.333rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}

#concerts .time, #concerts .info {
    font-size: 1.222rem;
    font-weight: 400;
}

#concerts .location {
    font-size: 1.333rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.concerts-list .item .action-button { 
    color: #000;
    background-color: #fff;
    border-radius: 100px;
    padding: 6px 24px 6px 24px;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
}

#concerts .all-concerts { 
    text-align: center;
}

#concerts .all-concerts .button {
    text-transform: uppercase;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-radius: 100px;
}

#concerts.archive {
    padding-top: 82px;
}

#concerts .concerts-archive {
    text-align: center;
}

#concerts .concerts-archive .button {
    text-transform: uppercase;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-radius: 100px;
}

.no-shows {
    text-align: center;
}

/* MUSIC */
#albums .promo {
    background: #bfbab0;
    padding-bottom: 30px;
    text-align: center;
    margin-bottom: 30px
}

#albums .promo img {
    max-width: 480px;
    padding: 30px 10px;
}

#albums h2, #album h2 { 
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}

#albums img {
    width: 280px;
    max-width: 280px;
    filter: grayscale(100);
}

#album img {
    width: 100%;
    filter: grayscale(100);
}

#album img:hover, #albums img:hover {
    filter: none;
}

#albums .list .item {
    margin: 30px;
    margin-bottom: 50px;
    overflow: hidden;
}

#album .button-back {
    color: #fff;
    font-size: 1.5rem;
}

#album .listen-title {
    font-size: 0.889rem;
    text-align: center;
    text-transform: uppercase;
}

#album .streamer-button {
    color: #fff;
    font-weight: 400;
}

#album .streamer-button:hover {
    color: #fff;
    text-decoration: none;
}

#album li {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
}

#album .songs-list .item.has_text {
    cursor: pointer;
}

#album .songs-list .item span {
    display: inline-block;
    width: 30px;
    text-align: right;
    padding-right: 5px;
}

#albums .info {
    color: #fff;
    font-size: 1.333rem;
    font-weight: 500;
    text-transform: uppercase;
}

#albums .all-albums {
    text-align: center;
}

#albums .all-albums .button {
    text-transform: uppercase;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-radius: 100px;
}

#albums.archive, #album {
    padding-top: 82px;
}

#lyrics {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.85);
}

#lyrics .mirrorScrollbar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: auto;
    direction: rtl;
}

#lyrics h3 {
    color: #fff;
    font-size: 1.333rem;
    font-weight: 500;
    text-transform: uppercase;
}

#lyrics p {
    color: #fff;
}

#lyrics .content {
    direction: ltr;
}

#lyrics .closer {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff;
}

#lyrics .closer span {
    display: inline-block;
    height: 35px;
    vertical-align: middle;
    padding-right: 5px;
}

/* BIO */
#bio h2 {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}

/* NEWS */
#posts h2 {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}

#posts a {
    text-decoration: none;
}

#posts .item img {
    width: 100%;
    filter: grayscale(100);
}

#posts .item img:hover {
    filter: none;
}

#posts .item h3 {
    font-weight: 500;
    font-size: 1.333rem;
}

#posts .item .perex {
    font-size: 0.938rem;
}

#posts .item .readmore {
    color: #000;
    background-color: #fff;
    border-radius: 100px;
    padding: 0.375rem 1.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 500;
}

#posts .all-news {
    text-align: center;
}

#posts.notes .date {
    font-size:15px; 
    font-weight: 700;
    color:#333
  }

#posts .all-news .button {
    text-transform: uppercase;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    border-radius: 100px;
}

#posts.news, #content.news {
    padding-top: 82px;
}

#posts.index .date, #posts.news .date {
    font-size: 0.778rem;
    text-transform: uppercase;
}

#posts.index h3, #posts.news h3 {
    text-transform: uppercase;
}

#content h3 {
    color: #eee
}

#content.news .button-back {
    color: #fff;
    font-size: 1.5rem;
}

#content.news h2 {
    font-weight: 500;
    font-size: 3.11rem;
    text-transform: uppercase;
}

#content.news img.main {
    max-width: 100%;
}

#content.news .date {
    font-size: 0.778rem;
    text-transform: uppercase;
}

/* DONATE */
#donate h2 {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}

#donate .item {
    text-align: center;
}

/* CONTACT */
#contact {
    padding-top: 82px;
}

#contact h2 {
    font-weight: 500;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
}



#eshop {
    background-color:#000;
    padding-top:100px;
    padding-bottom:70px;
    color:#fff;
    position:relative;
}


#eshop h2 {
    text-align:center;
    margin-bottom:60px;
    color:#fff
}

#eshop h2.addSpace {margin-bottom:152px;}
#eshop .category h3 {color:#fff;text-align:center;font-weight:800;margin-top:20px}
#eshop .item {background:#222;padding:10px;margin-bottom:30px;position:relative;cursor: pointer;min-height:380px;}
#eshop .item img {width:100%}
#eshop .item .description {padding:15px 0px 5px;}
#eshop .item .description a {text-decoration:underline}
#eshop .item .date {font-size:12px;font-weight:400;color:#8d8d8d;padding-bottom:10px;}
#eshop .item h3 {color:#fff;font-weight:700;font-family:"Open Sans Condensed"}
#eshop .item p {color:#ffffff;padding-bottom:40px}
#eshop .price {display:block;font-size:26px;font-weight:600;position:absolute;bottom:5px;left:10px}
#eshop .variant {display:block;clear:both;margin-bottom:15px}
#eshop .gift {position:absolute;top:10px;right:10px;background:rgba(255,255,255,0.7);color:#000;font-weight:800;box-shadow:0px 0px 10px rgba(0,0,0,0.4);padding:5px 10px;}
#eshop .btn {position:absolute;bottom:10px;right:10px;font-weight:800}



#eshop #cart {text-align:center;color:#fff;margin-bottom:20px;cursor: pointer;}
#eshop #cart.fix {
    position: fixed;
    top: 63px;
    left: calc(50vw - 100px);
    width: 200px;
    z-index: 1;}
#eshop #cart .content {
    display:inline-block;
    background:#5cb85c;padding:10px 20px;
    color:#fff;
    box-shadow:0px 0px 20px rgba(0,0,0,0.8)
}
#eshop #cart .value {font-weight:800}
#eshop #cart p {color:#fff}

#product img {
    width:100%;
}

#product h2 {font-weight:700;font-family:"Open Sans Condensed";letter-spacing: 0px}
#product .price {font-weight:800;font-size:20px;}
#product .variants {padding-top:10px}
#product .variant {border-top:1px solid #eee;padding-top:10px;padding-bottom:0px;}
#product .variant .button {margin-right:10px;background:rgb(122, 255, 122)}

#product .btn {margin-right:10px;font-weight:800}
#product .actions {margin-top:20px;}

#order .orderRight .content {margin:20px 0px}
#order .orderRight .content p {background: #eee;padding: 10px;position:relative}
#order .orderRight .content p span.price {color:rgb(21, 127, 146)}
#order .orderRight .content p span.remove {position:absolute;top:9px;right:10px;color:#a00;cursor: pointer;}

#order .value {font-size:18px}

#order .orderLeft {padding-bottom:20px}
#order .orderLeft input {
    margin-bottom:20px
}

#order .supplement {padding-top:20px;}
#order .orderNow {padding-top:20px;text-align:right}
#order .orderNow p {position:relative;padding-top:30px}
#order .orderNow button {text-transform: uppercase}
#order a {text-decoration:underline}
#order textarea {resize: none;}
#order label.error {color:#a00;font-size:10px;position: absolute;top: 3px;right: 12px;}
#order input.error {background-color:#fee}
#order .btn {font-weight:800}

#orderConfirm a {text-decoration:underline}

.animate {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


.gallery img {
	height: auto;
	max-width: 100%!important;
	padding-bottom: 0px;
	border: none!important;
}

.gallery {padding:10px 0px 15px 0px;}
.gallery {margin-left:-5px !important;margin-right:-5px !important}
.gallery .item {margin-bottom:15px}
.gallery-item {margin:0px 0px}
.gallery-icon {margin:0px 5px;}
.gallery-item .attachment-thumbnail {display:block;width:100%;height:auto;border:none !important}

.notes-thumbnail {
    width: 300px;
    float: right;
    padding: 0px 0px 20px 20px;
    max-width:100%;
}

.blur{
    -webkit-filter: blur(45px);
    -moz-filter: blur(45px);
    -o-filter: blur(45px);
    -ms-filter: blur(45px);
    filter: blur(45px);
}

.link-home {
    margin-top: -1px;
    display: none
}

.link-home i {
    color: #cbcebe;
    display: none
}

.admin-link {
    position: fixed;
    top:0px;
    left:0px;
    z-index: 2000;
    font-size: 20px;
    background: rgb(230, 141, 9);
    padding-right: 10px;
    border-radius: 0px 0px 5px 0px;
    color: #fff;
}

.edit-link {
    display:inline-block;
    background:rgb(230, 141, 9);
    border-radius:3px;
    color:#fff;
    display:inline-block;
    padding:0px 5px;
}
.post-edit-link {
    display:inline-block;
    padding:5px 5px;
}

#back-to-top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 2000;
    color: #aaa
}

.alignleft {
    display: inline-block;
    float: left;
}

.cb {
    clear: both;
}

/* FOOTER */
#footer .social i {
    font-size: 1.25rem;
}

#footer .social.mail {
    font-size: 1rem;
}

#footer .social.mail i {
    font-size: 1rem;
}

#footer .copyright p {
    font-size: 0.875rem;
}

/*responsivities*/

@media (max-width:1200px) {
    #contact {height:auto;background-size:cover;padding-bottom:20px}

}

@media (min-width:991px) {
    #album .row {padding-left:50px;padding-right:50px;}
}

@media (max-width:990px) {
    #concerts .date{display:block}    
    #concerts .info{display:block}
    #contact {background-position: right -220px bottom;}
}

@media (max-width: 767px) {
    #lyrics {position:fixed;z-index:10000}
    #contact {background-position: right -420px bottom;}
    #albums .list .item {margin:0px;margin-top:25px}
    #album .row .text-right {text-align:left}
}

@media (min-width:740px){
    #pickedVideo .video {
        margin-top:calc(calc(100vh - 450px) / 2);
        margin-left:calc(calc(100vw - 720px) / 2)
    }
    #contact .contact {float:right}
}

/** DESKTOP **/
@media (min-width: 1200px) {
    #slider .carousel-inner {
        height: 50vw;
    }

    #lyrics {
        margin-top: 82px;
        text-align: center;
        background: #000;
    }
}

/** MOBILE **/
@media (max-width: 767.98px) {
    html {
        font-size: 16px;
    }

    #header .logo {
        height: 3rem;
    }

    .header-separator {
        border-bottom: 1px solid #121212;
        transition: border-bottom 0.3s ease;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }
    
    .header-separator-invisible {
        border-bottom: 1px solid transparent;
    }

    #main-logo .logo {
        height: calc(100vh - 7.25rem);
    }

    .single-video h2, #concerts h2, #albums h2, #album h2 #bio h2, #posts h2, #donate h2, #contact h2 {
        font-size: 2.5rem;
    }

    .single-video .video-label, #albums .info {
        font-size: 1.3rem;
    }

    .single-video .video-label-desc {
        font-size: 1rem;
    }

    .single-video .all-videos .button, #concerts .all-concerts .button, #albums .all-albums .button, #posts .all-news .button, #concerts .concerts-archive .button {
        font-size: 1rem;
    }

    #concerts .date, #concerts .location {
        font-size: 1.125rem;
    }

    #concerts .time {
        font-size: 1rem;
    }

    #concerts .info {
        font-size: 1rem; 
        padding-top: 1rem;
    }

    #concerts .action-buttons {
        padding-top: 1rem;
    }

    .concerts-list .item .action-button { 
        padding: 0.375rem 2rem;
        font-size: 1rem;
    }

    #albums .container .row div, #posts .container .row div .item {
        padding-bottom: 3rem;
    }

    #albums .container .row div:last-child {
        padding-bottom: 0;
    }

    #posts .item h3 {
        font-size: 1.3rem;
    }

    #content.news h2 {
        font-size: 2.5rem;
    }
}