/*
 Theme Name:   Glassnote Theme
 Author:       April Baer
 Author URI:   http://aprilbaer.com
 Template:     werkstatt
 Version:      1.0.0
 Text Domain:  glassnote
*/


/******************* typography updates *******************/

h1, .portfolio-holder h2, .home h2 {
    font-family: 'Anton', 'Roboto', Arial, Helvetica, Sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0px !important;
}

.thb-mobile-menu a {    font-weight: 400 !important;}

.mobile-toggle strong {    font-weight: 400 !important;line-height: 100% !important;}


a {color: #2b588f !important;}
a:hover {color: #1f1f1f !important;}


/******************* homepage updates *******************/


.home-top-section {    margin-top: 130px;}


/* make rollovers semi-transparent */
.thb-portfolio .type-portfolio:not(.thb-gradient-hover):not(.thb-corner-hover) .portfolio-link:hover {
    opacity: 0.8 !important;
}


/* hide categories */
.home .portfolio-holder .thb-categories {
    display: none !important;
}

/* center artist names */
.thb-portfolio .type-portfolio .portfolio-link {    display: inline-block !important;}
.thb-portfolio .type-portfolio h2 span {    text-align: center;    width: 100%; font-size: 60px;}
.thb-portfolio .type-portfolio h2 {    /* height: 100%; */    margin-top: 30%; line-height: 130%;}

.home .thb-portfolio .type-portfolio h2 span {    font-size: 42px;}
/* .home .thb-portfolio .type-portfolio h2 {margin-top: 25%;} */
.home .thb-portfolio .type-portfolio .portfolio-link {    padding: 45px 25px;}

@media only screen and (max-width: 1200px) {
.thb-portfolio .type-portfolio h2 span {   font-size: 50px;}
.home .thb-portfolio .type-portfolio h2 span {    font-size: 38px;}
}

@media only screen and (max-width: 1100px) {
	.home .thb-portfolio .type-portfolio h2 {margin-top: 22%;}
}

@media only screen and (max-width: 1024px) {
.thb-portfolio .type-portfolio h2 span {   font-size: 44px;}
.home .thb-portfolio .type-portfolio h2 span {    font-size: 44px;}
.home .thb-portfolio .type-portfolio .portfolio-link {    padding: 45px;}
.home .thb-portfolio .type-portfolio h2 {margin-top: 30%; line-height: 46px;}
}

@media only screen and (max-width: 870px) {
.thb-portfolio .type-portfolio h2 span {   font-size: 36px;}
.home .thb-portfolio .type-portfolio h2 span {    font-size: 36px;}
.home .thb-portfolio .type-portfolio h2, .thb-portfolio .type-portfolio h2  {margin-top: 25%;line-height: 36px;}
}

@media only screen and (max-width: 736px) {
	.home-top-section {    margin-top: 72px !important;}
}

@media only screen and (max-width: 700px) {
.thb-portfolio .type-portfolio h2 span, .home .thb-portfolio .type-portfolio h2 span  {   font-size: 32px;}
.thb-portfolio .type-portfolio .portfolio-link, .home .thb-portfolio .type-portfolio .portfolio-link {    padding: 45px 25px;}
}

@media only screen and (max-width: 640px) {
.home .thb-portfolio .type-portfolio h2, .thb-portfolio .type-portfolio h2  {margin-top: 30%;line-height: 48px;}
.thb-portfolio .type-portfolio h2 span, .home .thb-portfolio .type-portfolio h2 span {   font-size: 40px;}
.thb-portfolio .type-portfolio .portfolio-link, .home .thb-portfolio .type-portfolio .portfolio-link {    padding: 45px;}
}

@media only screen and (max-width: 420px) {
.thb-portfolio .type-portfolio h2 span, .home .thb-portfolio .type-portfolio h2 span {   font-size: 32px; line-height: 36px;}
.thb-portfolio .type-portfolio .portfolio-link, .home .thb-portfolio .type-portfolio .portfolio-link {    padding: 45px 25px;}
}

/* catalog section */

.home .catalog-list {    padding-left: 20px;}


/******************* artist page updates *******************/

/* keep regular header at top of artist pages */

.single-portfolio .header .row .portfolio-header {
    display: none !important;
}

.single-portfolio .header .row .regular-header {
    opacity: 1 !important;
    visibility: visible !important;
    transform: matrix(1,0,0,1,0,0) !important;
}

.single-portfolio header.header {
    padding-bottom: 17px !important;
}

.single-portfolio header.header.hover {
    border-bottom: 1px #dddddd solid;
}

.single-portfolio header h4 {    font-style: italic;}
.single-portfolio .bio {    text-align: justify;}
.single-portfolio .bio h2 {font-size: 30px !important; color: #505050;    text-transform: uppercase;text-align: left;}

.single-portfolio .bio .widget {color: #505050 !important;}
	
/* background transparency on top of large artist photos */

.single-portfolio .post-gallery.parallax .parallax_bg {
    opacity: 0.5;
}

/* right-hand facts on artist pages */

.portfolio-attributes.style3 .attribute {    margin-left: 35px !important;}
.portfolio-attributes.style3 .attribute {    width: auto !important;}

.portfolio-attributes.style3 .attribute.website {    text-transform: lowercase;}


.block-attributes .attribute, .portfolio-attributes.style2 .attribute, .portfolio-attributes.style3 .attribute, .portfolio-title.style2 .portfolio-attributes .attribute, .portfolio-title.style4 .portfolio-attributes .attributeq {
    white-space: normal !important;
}

.block-attributes .attribute, .portfolio-attributes.style2 .attribute, .portfolio-attributes.style3 .attribute, .portfolio-title.style2 .portfolio-attributes .attribute, .portfolio-title.style4 .portfolio-attributes .attribute {
    font-size: 16px !important;
}

.block-attributes .attribute strong, .portfolio-attributes.style2 .attribute strong, .portfolio-attributes.style3 .attribute strong, .portfolio-title.style2 .portfolio-attributes .attribute strong, .portfolio-title.style4 .portfolio-attributes .attribute strong {
    font-size: 13px !important;
    margin-bottom: 1px !important;
}

ul.artist-social {
    margin-bottom: 0px;
}

ul.artist-social.artist-listen {
    margin-bottom: 25px;
}

ul.artist-social li.pandora img {
    max-height: 18px;
    width: auto !important;
}

ul.artist-social li.googleplay img {
    max-height: 19px;
    width: auto !important;
}

ul.artist-social li.applemusic img {
    max-height: 19px;
    width: auto !important;
}

ul.artist-social li.tidal img {
    max-height: 17px;
    width: auto !important;
}

ul.artist-social li.tidal {
    margin-left: -2px;
    margin-right: -2px;
}

ul.artist-social li.amazon {
    font-size:18px;
}

.artist-social i.fa {
    vertical-align: middle;
}

ul.artist-social li.googleplay img:hover, ul.artist-social li.tidal img:hover, ul.artist-social li.pandora img:hover {
    filter: grayscale(1) brightness(0);
    -webkit-filter: grayscale(1) brightness(0);
}

ul.artist-social li {
    display: inline-block;
    padding-right: 10px;
    font-size: 21px;
}

.artist-sidebar iframe {    max-width: 100% !important;}

@media screen and (min-width: 64.0625em) and (max-width:1400px) {
.large-9 {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%;
}
}

@media screen and (max-width: 890px) {
	.single-portfolio .small-12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;}
   .portfolio-attributes.style3 .attribute {
    margin-left: 0px !important;}
    .portfolio-attributes.style3 {    padding-top: 40px;}
}


/* scroll arrow on artist pages */

.scroll-bottom {
    bottom: 7px !important;
  }
  

/*  
.scroll-bottom.style1>div:before {
  -moz-transform: rotateZ(45deg) scaleX(1);
    -ms-transform: rotateZ(45deg) scaleX(1);
    -webkit-transform: rotateZ(45deg) scaleX(1);
    transform: rotateZ(45deg) scaleX(1);
} */



/******************* sync updates *******************/

.sync-date {
    font-size: 10px;
    text-transform: uppercase;
    color: #1f1f1f;
    font-weight: 400;
}

.sync-content p {
    margin: 0;
    font-size: 14px;
}

.sync-top-content {    padding-top: 130px;}


/******************* footer updates *******************/

/* move scroll to top above footer and make darker */

/* #scroll_to_top.active {    bottom: 270px !important;}
#scroll_to_top svg {    fill: #bfbfbf !important;}
#scroll_to_top {    color: #bfbfbf !important;}  */

/* add padding above footer */
.home div[role="main"] {    margin-bottom: 70px !important;}

@media only screen and (min-width: 737px) {
.single div[role="main"] {    margin-bottom: 70px !important;}
}

/* fix footer display */
.footer {    padding-bottom: 35px !important;}

.widget ul.menu>li, ul#menu-secondary li.social, ul#menu-socials li.social, ul#menu-socials li, ul#menu-socials-1 li /*, .thb-secondary-menu a */ {
    display: inline-block !important;
    flex: none !important;
    margin-right: 8px;
    width: 25px;
    /* line-height: 24px; */
    font-size: 24px !important;
    overflow: inherit;
}

ul#menu-socials li a, ul#menu-socials-1 li a {color: #ffffff !important; font-size: 24px !important;}
ul#menu-socials li a:hover, ul#menu-socials-1 li a:hover {color: #2b588f !important;}

/*.widget ul.menu>li a::before, ul#menu-secondary li.social a::before, ul#menu-socials li.social a::before {
    font-family: 'FontAwesome';
    color: #ffffff !important;
    font-size: 24px !important;
    height: 24px !important;
} 

.widget ul.menu>li a:hover::before, ul#menu-secondary li.social a:hover::before, ul#menu-socials li.social a:hover::before {
    color: #2b588f !important;
}*/


.widget ul.menu>li.fb, ul#menu-secondary li.fb, ul#menu-socials li.narrow, ul#menu-socials-1 li.narrow  {width: 18px !important;}
.widget ul.menu>li.sc, ul#menu-secondary li.sc, ul#menu-socials li.wide, ul#menu-socials-1 li.wide  {width: 32px !important;}

/*
.widget ul.menu>li.fb a::before, ul#menu-secondary li.fb a::before, ul#menu-socials li.fb a::before { content: "\f09a";}
.widget ul.menu>li.tw a::before, ul#menu-secondary li.tw a::before, ul#menu-socials li.tw a::before { content: "\f099";}
.widget ul.menu>li.insta a::before, ul#menu-secondary li.insta a::before, ul#menu-socials li.insta a::before { content: "\f16d";}
.widget ul.menu>li.sc a::before, ul#menu-secondary li.sc a::before, ul#menu-socials li.sc a::before { content: "\f1be";}
.widget ul.menu>li.tumblr a::before, ul#menu-secondary li.tumblr a::before, ul#menu-socials li.tumblr a::before { content: "\f173";} /*


/* .widget ul.menu>li a, ul#menu-secondary li.social a, ul#menu-socials li.social a {  font-size: 0;    color: transparent; } */


/* remove white line that appears on rollover of footer social links */
.footer-links a:before, .thb-secondary-menu li a:before, .footer .widget ul li a:before {
    height: 0px !important;
    background: transparent !important;
}

/* remove the moving of the social icons to the right on rollover */
.footer-links a:before, .thb-secondary-menu li a:before, .footer .widget ul li a:before {display: none !important;}

/* remove scrollbar that appears on nav */
#mobile-menu .custom_scroll .mobile-menu-container {
    overflow: hidden !important;
}


/******************* navigation *******************/

.mobile-menu-top a {
    color: #ffffff !important;
    text-transform: uppercase;
}

.mobile-menu-top a:hover {
    color: #2b588f !important;
}

li.nav-applemusic {
    line-height: 145%;
}

.mobile-menu-bottom li.nav-applemusic {
    line-height: 110%;
}

/******************* news and sync pages *******************/

.news-page-grid {padding-top: 165px;}

@media only screen and (min-width: 737px) {
.blog-container.page-padding {    padding-top: 150px !important;}
}

@media only screen and (max-width: 737px) {
.blog-container.page-padding {    padding-top: 25px !important;}
}

@media only screen and (max-width: 414px) {
.blog-container.page-padding {    padding-top: 0px !important;}
}

@media only screen and (max-width: 736px) and (orientation:landscape) {
.blog-container.page-padding {    padding-top: 0px !important;}
}

.flex-video {
    margin-bottom: 1.55rem !important;
}

.news-grid-category {
    text-align: left !important;
    color: #000000 !important;
    margin-bottom: 10px;
}

.news-grid-category p {
    font-size: 14px !important;
}

.news-page-grid .vc_gitem_row .vc_gitem-col {
    padding: 10px 0 !important;
}

.news-page-grid .vc_btn3.vc_btn3-size-sm {
    padding: 3px 11px 6px;
}

.news-page-grid .vc_btn3.vc_btn3-size-sm:hover {
    background-color: #2b588f !important;
}

.news-page-grid .vc_general.vc_btn3, .news-page-grid .vc_general.vc_btn3:focus, .news-page-grid .vc_general.vc_btn3:hover {border: 1px #505050 solid !important;}






/******************* responsive CSS *******************/


@media only screen and (max-width: 736px) {
#wrapper [role="main"] { padding-top: 120px !important;}
.home #wrapper [role="main"] { padding-top: 0px !important;}
.header .logolink .logoimg {    max-height: 85px;}
.header {    padding: 15px 0 !important;}
.single-portfolio header.header {    padding-bottom: 15px !important;}
.single-portfolio header.header {    border-bottom: 1px #dddddd solid;}
.white-header .logolink .logoimg.logo-light, .header.style3.dark .logolink .logoimg.logo-light, .light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .logolink .logoimg.logo-light, .disable_header_fill-on.light-title:not(.midnight_on) .header:not(.style3) .logolink .logoimg.logo-light, .midnightHeader.light-title .logolink .logoimg.logo-light {opacity:0 !important;}
.white-header .logolink .logoimg, .header.style3.dark .logolink .logoimg, .light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .logolink .logoimg, .disable_header_fill-on.light-title:not(.midnight_on) .header:not(.style3) .logolink .logoimg, .midnightHeader.light-title .logolink .logoimg {opacity: 1 !important;}
.white-header .mobile-toggle, .header.style3.dark .mobile-toggle, .light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .mobile-toggle, .disable_header_fill-on.light-title:not(.midnight_on) .header:not(.style3) .mobile-toggle, .midnightHeader.light-title .mobile-toggle {color: #000 !important;}
.white-header .mobile-toggle strong, .header.style3.dark .mobile-toggle strong, .light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .mobile-toggle strong, .disable_header_fill-on.light-title:not(.midnight_on) .header:not(.style3) .mobile-toggle strong, .midnightHeader.light-title .mobile-toggle strong {color: #000 !important;}
.white-header .mobile-toggle span, .header.style3.dark .mobile-toggle span, .light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .mobile-toggle span, .disable_header_fill-on.light-title:not(.midnight_on) .header:not(.style3) .mobile-toggle span, .midnightHeader.light-title .mobile-toggle span {background: #000 !important;}

div#about-page-top {    padding-top: 40px !important;}

.sync-top-content {    padding-top: 30px !important;}
.sync-highlight-space-bottom {    height: 0px !important;}
.sync-top-content .wpb_video_widget.vc_video-el-width-60 .wpb_wrapper {  width: 100%;}

.news-page-grid {padding-top: 50px !important;}

.contact-content .vc_column-inner {padding-top: 25px !important;}

}

@media only screen and (max-width: 640px) {
.map-content .contact_map {height: 40vh !important;}
.contact-content .vc_column-inner {padding-top: 45px !important;}

}

@media only screen and (min-width: 64.063em) {
	.home h2.vc_custom_heading {font-size: 40px !important;}
}