/*
 Theme Name:     mibs2020 Child
 Description:    A child theme for MI Book Store, child of the mibs2020 Theme
 Author:         Mass Hoff
 Template:       mibs2020
 Version:        1.0.0
*/

/*
	Colors:
	dark blue: #1d202e
	red: #e93323
	font-family: 'Oswald', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Roboto Condensed', sans-serif;

*/
 
@import url("../mibs2020/style.css");
@import url("woostyle.css");
 
/* Theme customization starts here */

/* this sets up our ratio boxes */
[style*="--aspect-ratio"] > :first-child {
	width: 100%;
	}

[style*="--aspect-ratio"] > img {  
	height: auto;
	}
	 
@supports (--custom:property) {
 	[style*="--aspect-ratio"] {
		position: relative;
  		}

	[style*="--aspect-ratio"]::before {
		content: "";
		display: block;
		padding-bottom: calc(100% / (var(--aspect-ratio)));
		} 
		 
	[style*="--aspect-ratio"] > :first-child {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		}  
	}
	
/* fly in divs */
.fly {
	opacity: 0;
	transition: all 600ms ease-in-out;
	transform: translateY(100px) scale(1) translate3d(0, 0, 0);
	-webkit-transition: all 600ms ease-in-out;
	-webkit-transform: translateY(100px) scale(1) translate3d(0, 0, 0);	
	}

.show-block {
	opacity: 1;
	transform: translateY(0) scale(1) translate3d(0, 0, 0);
	-webkit-transform: translateY(0) scale(1) translate3d(0, 0, 0);
	}
	
/* Responsive Menu */

#responsive-menu-container #responsive-menu-title #responsive-menu-title-image img {
    max-width: 50% !important;
    display: block !important;
    margin: 0 auto !important;
	}	

.responsive-menu-subarrow {
    display: none !important;
	}	
	
#responsive-menu-title {
    font-family: 'Oswald';
    text-transform: uppercase;
    font-size: 1.5em !important;
	}

ul.responsive-menu-submenu {
    margin-left: 1.5em !important;
	}	
	
li.appicons a:after {
    content: '\f179 \f17a \f370 \f17b';
    margin-left: .25em !important;
    display: inline-block;
    font-family: "Font Awesome 5 Brands";
	letter-spacing: .5em;
	}	
	
body {
	color: #1d202e;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 150%;
	}

body.page-template-default #content {
    margin-top: 6em;
	}

#wrap {
	margin-bottom: 0;
	background-color: transparent;
	min-height: calc(100vh - 20em); /* this pins the footer to the bottom if the page is short */
	}

#header-wrap {
    background-color: rgba(29, 32, 46, .75);
    position: fixed;
    top: 0;
    z-index: 1;
	transition: background-color 0.5s ease;
	}	

#header-wrap.scrolled {
    background-color: rgba(29, 32, 46, .97);
	}	

#header {
    width: 100%;
    margin: 0;
    padding: 1em 2em;
	}
	
.nav-wrap.main {
    background-color: transparent;
	}	

#footerWrap {
    width: 100%;
    color: #fff;
	min-height: 20em !important;
	position: relative;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#343956+0,1d202e+100 */
	background: #343956; /* Old browsers */
	background: -moz-linear-gradient(top,  #343956 0%, #1d202e 75%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #343956 0%,#1d202e 75%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #343956 0%,#1d202e 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343956', endColorstr='#1d202e',GradientType=0 ); /* IE6-9 */
	}

#footerWrap:after {
	content: "powered by";
	text-align: center;
	background: url(/new/wp-content/uploads/wbh-musicworks-logo.png);
	background-repeat: no-repeat;
	background-position: center bottom 2.5em;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	top: 30%;
    text-transform: uppercase;
    font-size: .75em;
    letter-spacing: 5px;
	position: absolute;
    filter: contrast(0) brightness(0) invert(1)opacity(0.07);
	}	

#footerWrap img {
    filter: none;
    -webkit-filter: none;
	margin: 0 auto;
    display: block;
	max-width: 22em;
	}	
		
#footer {
    width: 1170px;
    margin: 0 auto;
	padding: 3em 1em 1em;
    color: inherit;
    overflow: initial;
    display: flex;
    justify-content: space-between;
	}

#footer a {
    color: #fff;
	}

#footer #social {
    float: none;
    font-size: 35px;
	margin: 10px 0 25px 0;
	}

#footer #social a {
    margin-left: unset;
    margin: 0 10px;
	}	

#footer  #social:before {
    content: 'Follow Us On';
    display: block;
    font-size: 16px;
    font-family: 'Open Sans';
    text-transform: uppercase;
    letter-spacing: .25em;
	margin-bottom: 5px;
	}	

.footer-nav ul li {
    display: block;
    margin-right: 0;
    padding-right: 0;
	}	

.footer-nav ul li:after {
    content: none;
	}	

p {
    /*font-size: 16px;
    line-height: 150%;*/
	}			

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: bold;
	/*color: #4f4f4f;*/
	line-height: 135%;
	margin-bottom:5px;
	}

h1 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 34px !important; 
	line-height: 115% !important
	}

h2 {
	font-size: 26px;	
	}

h3 {
	font-size: 20px;
	}

h2.withBG {
    background: #e93323;
    padding: 15px;
    /* text-align: center !important; */
    color: #fff !important;
    margin: 25px 0;
	}

a {
	color: #333;
	}

a:hover {
	color: #e93323;
	}

.logo {
	width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	}

.logo a {
	color: #fff;
	}	

.logo img {
    height: 3em;
    filter: none;
    /*margin: 0 auto;*/
    display: block;
	}

span.textDek {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.35em;
    margin-left: .75em;
	}

/* top nav */

.importante {
	background: #f24d16 !important;
	}
	
.nav-wrap.top {
    background-color: transparent;
	overflow: hidden;
	}

.topNav {
    display: flex;
    justify-content: flex-end;
	}
	
.topNav a {
    color: #333;
	}

.topNav a:hover {
    color: #6d8b18 !important;
	}	

.topNav ul li {
    padding-left: 0;
	}

ul#menu-header-nav li a {
	border-left: 1px solid #ccc;
    margin-left: 10px;
    padding-left: 10px;	
	}

ul#menu-header-nav li:last-child a {
    border-right: none;	
	margin-right: 0px;
    padding-right: 0px;
	}	

a#search {
    font-size: 1.25em;
	}

.rightNav {
    position: absolute;
    right: 6em;
    top: 1em;
	display: flex;
    justify-content: flex-end;
	}

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
    font-style: initial;
	}
	
a#search, .header-cart, .loginout {
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    padding: 1px 10px;
	margin-top: 0;
	font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-size: .65em;
	}	

a#search:hover, .header-cart:hover, .loginout:hover {
	background: #e93323;
	color: #fff;
	}
	
a#search, .header-cart a, .loginout a  {
    color: #fff;
    text-decoration: none;
	}

a#search:hover, .header-cart a:hover, .loginout a:hover {
    text-decoration: none;
	color: #fff;
	}	

a#search, .header-cart, .loginout .fas {		
    margin-right: .5em;
	}

.cart-contents:before {
    font-size: 1.5em;
    margin-top: 0;
    padding: 1px 10px;
    vertical-align: bottom;
    color: #fff;
	}	
	
/* main nav */
.nav-wrap {
    background-color: #efefef;
    font-family: 'Open Sans';
	}

.main-nav {
    font-size: 19px !important;
	}	

.main-nav ul, .main-nav li {
    padding: 0;		
	}

.main-nav ul li {
    text-shadow: none;
	}	

.main-nav ul li a {
    letter-spacing: 0;
    color: #333;
	}

.main-nav ul li a:hover {	
	color: #6d8b18 !important;
	}

.main-nav ul ul {
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 5%, rgba(239,239,239,1) 100%);
    margin-top: 0;
	border-radius: 0 0 10px 10px;
	
	max-height: 0em;
    overflow: hidden;
	transition: max-height .9s ease;
	box-shadow: 0px 10px 7px -5px rgba(0,0,0,0.5);
	}

.main-nav ul li:hover>ul, .main-nav ul li:hover > ul {
    max-height: 600px;
    padding: 10px 15px;
	}	

.main-nav ul li:last-child >ul {
    left: -10em;
	}

.main-nav ul li:hover>ul, .main-nav ul li:hover > ul {		
	/*left: -10em;*/
	}
	
/* portrait image? this keeps portrait ratio */

.thumb.portrait {
   /*background: #333;*/
	}

.thumb.portrait img {
    object-fit: contain;
	}

ul.row li a img:hover {
	-webkit-box-shadow: 0px 1px 8px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 8px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 8px 2px rgba(0,0,0,0.3);
	}

body.search .contentWrap {
	margin-top: 75px;
	}

/* archvies */

ul.archive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	
	margin: 0;
	padding: 0;
	}

ul.archive li {
	list-style-type: none !important;
	margin: 0 0 80px 0 !important;
	padding: 0 !important;
    width: 30%;
	}

ul.archive li img {
    object-fit: cover;
	height: 100%;
	padding-bottom: 15px;
	}	


ul.archive li .thumb.nocrop img {
    object-fit: contain;
	}	

ul.archive li h2 {
    font-size: 1.2em;
	}

body.category-recipes .date {
	display: none;
	}		
	
	
/***** HOMEPAGE *****/

body.home .contentWrap {
	padding:	0;
	}
	
body.home .banner {
    width: 100%;
    padding: 25px 0;
	background-attachment: fixed !important;
	}

body.home .banner::after {
    content: "";
    background-size: cover !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
	}
	

body.home .banner span {
    width: 1170px;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-family: 'Roboto';
    text-transform: uppercase;
	}
	
body.home .banner span h2 {
    color: #fff;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-weight: bold;
    font-size: 32px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.35);
	margin-bottom: 10px;
	}

body.home .banner button {
    color: #fff;
    text-decoration: none;
    font-size: 32px;
    padding: 10px 20px;
    border-radius: 5px;
    border: 0;
    text-transform: uppercase;
    font-weight: bold;
	}

body.home .banner button:hover {
	background-color: #FF8C00 !important;
	}	

body.home #content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 !important;
    padding: 0 !important;
	}	

body.home #content ul li {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 30%;
	text-align: center;
	}

body.home #content ul li img {
    object-fit: cover;
    /*height: 100%;
    width: auto;*/
	}	

h2.fullWide {
	width: 100%;
	background: #6d8b18;
	padding: 10px 35px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	}	

ul.promotions li:first-child {
    flex-basis: 100%;
	}	
	
/* slider */	
	
.slider {
    margin-bottom: 50px !important;
}

.slick-next:before {
    content: '\f054' !important;
    font-family: 'FontAwesome' !important;
	}

.slick-prev:before {
    content: '\f053' !important;
    font-family: 'FontAwesome' !important;
	}

.slick-prev:before, .slick-next:before {
    font-size: 30px !important;
	}	

.slick-prev {
    left: 5% !important;
    z-index: 100;
	}

.slick-next {
    right: 6% !important;
    z-index: 100;
	}

.homeSlider {
    background-repeat: no-repeat;
   /* height: 600px !important;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
	}

.sliderText {
    text-align: left;
    /* display: table-cell !important; */
    width: inherit;
    height: inherit;
    vertical-align: bottom;
    padding-bottom: 0;
    display: flex !important;
    align-items: flex-end;
	}

.sliderText .textBox {
    display: inline-block;
    width: 100%;
    padding: 20px 10vw;
    background: rgba(0,0,0,0.5);
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 20% 10vw 2%;
	}

.sliderText {
    text-align: left;
    /* display: table-cell !important; */
    width: inherit;
    height: inherit;
    vertical-align: bottom;
    padding-bottom: 0;
    display: flex !important;
    align-items: flex-end;
	}


.sliderText h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500 !important;
    font-size: 34px;
    line-height: 110%;
    margin-bottom: 5px;
    text-transform: uppercase;
    -webkit-animation: fadein 1s 1s 1 normal backwards;
    -moz-animation: fadein 1s 1s 1 normal backwards;
    -ms-animation: fadein 1s 1s 1 normal backwards;
    -o-animation: fadein 1s 1s 1 normal backwards;
    animation: fadein 1s 1s 1 normal backwards;
	}

.sliderText p {
    font-size: 20px;
    -webkit-animation: fadein 1s 2s 1 normal backwards;
    -moz-animation: fadein 1s 2s 1 normal backwards;
    -ms-animation: fadein 1s 2s 1 normal backwards;
    -o-animation: fadein 1s 2s 1 normal backwards;
    animation: fadein 1s 2s 1 normal backwards;
	}

.sliderText a {
    display: inline-block;
    background-color: #6d8b18 !important;
	border-radius: 5px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    padding: 15px 20px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-animation: fadein 1s 3s 1 normal backwards;
    -moz-animation: fadein 1s 3s 1 normal backwards;
    -ms-animation: fadein 1s 3s 1 normal backwards;
    -o-animation: fadein 1s 3s 1 normal backwards;
    animation: fadein 1s 3s 1 normal backwards;
	}	
	
.sliderText a:hover {
	background-color: #FF8C00 !important
	}	
	
#sb_instagram {
    padding: 50px 0;
	}

h3.sbi_no_bio:after {
    content: 'Musicians Institute on Instagram';
    display: block;
    font-size: 16px;
    color: #6d8b18;
	}	


/* app download page */

ul.downloadgrid {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	}

ul.downloadgrid li {
list-style-type: none !important;
    margin: 0 !important;
	    padding: 35px !important;
    text-align: center;
    border: 3px solid rgba(29, 32, 46, .2);
    width: 23%;
    border-radius: 10px;
    background-color: rgba(29, 32, 46, .25);
    display: flex;
    flex-direction: column;
    align-items: center;
	}

ul.downloadgrid li i {
    font-size: 5em;
	}

ul.downloadgrid li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
	    font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: rgba(29, 32, 46, 1);
	}

ul.downloadgrid li:hover {
    background-color: rgba(29, 32, 46, 1);
	}

ul.downloadgrid li:hover a {
	color: #fff
	}	
	

/* RESPONSIVE */

.sub760Hide {
	display: none !important;
	}

@media only screen and (max-width: 1169px) {

#content, #header, .main-nav, .topNav, .contentWrap, #footer {
	width: 100% !important;
	}

.nav-wrap.top {
	padding: 10px 25px;
	}
	
.topNav {
    padding: 0;
	}	

.logo {
    max-width: initial;
	}
	
/* homepage */

.homeSlider.slick-slide {
    --aspect-ratio: 2/1 !important;
	}
	
body.home .banner span {
    width: 100%;
	}	

ul.icons li img {
    max-width: 6em;	
	}
	
} /* end 1170px responsive */




@media only screen and (max-width: 900px) {

/* download page */	

ul.downloadgrid li {
    width: 48%;
    margin-bottom: 2em !important;
	}
	
} /* end 992px responsive */



@media only screen and (max-width: 900px) {

.topNav {
    display: initial !important;
	}

a#search {
    display: none;
	}	

#header img {
    max-width: 60vw;
	}	

.logo {
	max-width: initial;
    display: block;
    text-align: center;
    margin: 0 auto !important;
	}

.logo img {
    max-width: 60vw;
    margin: 0 auto;
	}

.rightNav {
	right: initial;
    left: 1em;	
	}
		
ul.archive li {
    width: 100%;
	}	


/* homepage */

.aligner {
    align-items: flex-end !important;
    padding-bottom: 1em;
	}
	
.homeSlider.slick-slide {
    --aspect-ratio: 10/7 !important;
	}
	
body.home #content ul {
    justify-content: space-evenly;
	}
	
body.home #content ul li {
    width: 48%;
    margin-bottom: 35px !important;
	}	

.sliderText .textBox {
    text-align: center;
	}
	
.promotions li div {
    --aspect-ratio: 9/9 !important;
	}	

ul.icons li img {
    max-width: 7em;	
	}	

} /* end 768px responsive */



@media only screen and (max-width: 480px) {

body.home #content ul li {
    width: 100%;
	}

.loginout {
    display: none;
	}

.homeSlider.slick-slide {
    --aspect-ratio: 1/1 !important;
	}
	
span.textDek {
    font-size: 1em;
	}
	
.aligner div h2 {
    font-size: 1.5em;
	}
	
ul.icons h2 {
    font-size: 1.25em;
	}

.aligner div h2 {
    font-size: 1.5em !important;
	}
	
.aligner div p {
    font-size: .75em;
	}	

/* download page */

ul.downloadgrid li {
    width: 100%;
	}			

} /* end 480px responsive */







/* RESPONSIVE Tablet landscape only */
@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1112px) 
and (orientation : landscape) {

body.home #content ul li {
    width: 30% !important;
	}


} /* end responsive tablet landscape */

/* RESPONSIVE Tablet portrait only */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 834px) 
and (orientation : portrait) {

body.home #content ul li {
    width: 30% !important;
	}

} /* end responsive tablet portrait */