/*
Theme Name: Storefront Child
Description: Strefront Child Theme
Author: C'est Moi
Author URI: lesnaive@gmail.com
Template: storefront
Version: 1.0.0
*/





body {

	font-family:"Open Sans", sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
}



.site-header {

	padding-top:0;

/*
	width:100%;
*/

	min-width:100%;
	max-width:100%;

	height:auto;
	background-size:100%;

	background-position:top;
	background-repeat: no-repeat;
}





/* temporary front page and general hiding of stuff */

.comingsoon {
	-ms-transform: rotate(337deg); /* IE 9 */
	-webkit-transform: rotate(337deg); /* Chrome, Safari, Opera */
	transform: rotate(337deg);

	font-size:45px;
	color:red;
	position:relative;
	top:-95px;
}

.woocommerce-additional-fields {
	display:none;
}




/*  navigation  */


.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a, .site-header-cart .cart-contents  {
	padding:6px;
}


.menu ul .page_item, .menu-item {
	background-color:white;
	border: 1px solid transparent;
	border-radius:6px;
	-moz-border-radius:6px;
}

.menu ul .page_item, .menu-item, .cart-contents {

	font-size:large;
}

.menu ul .page_item:hover, .menu-item:hover {
/*	background-color:#D7EFF9;*/
	background-color:#ffefff;
	border: 1px solid #97A7AE;
}



.menu-item-thumb {
	display:none;
}


.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header, .site-header {

	margin:0px;
	margin-bottom:10px;

}



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

	.main-navigation {	
		margin-top:30%;
	}

	.site-header-cart {
		margin-top:0%;
	}

}



@media screen and (min-width: 768px) {

	.main-navigation, .site-header-cart  {	
		margin-top:21%;
	}
}


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

	.main-navigation, .site-header-cart  {	
		margin-top:22%;
	}
}


@media screen and (min-width: 1250px) {

	.main-navigation, .site-header-cart  {	
		margin-top:24%;
	}
}


@media screen and (min-width: 1360px) {
	.main-navigation, .site-header-cart {	
		margin-top:27%;
	}
}

@media screen and (min-width: 1500px) {
	.main-navigation, .site-header-cart {	
		margin-top:30%;
	}
}

@media screen and (min-width: 1600px) {
	.main-navigation, .site-header-cart {	
		margin-top:33%;
	}

}

@media screen and (min-width: 1800px) {
	.main-navigation, .site-header-cart {	
		margin-top:37%;
	}
}

@media screen and (min-width: 2000px) {
	.main-navigation, .site-header-cart {	
		margin-top:42%;
	}
}

@media screen and (min-width: 2150px) {
	.main-navigation, .site-header-cart {	
		margin-top:48%;
	}
}

@media screen and (min-width: 2400px) {
	.main-navigation, .site-header-cart {	
		margin-top:50%;
	}
}

@media screen and (min-width: 2600px) {
	.main-navigation, .site-header-cart {	
		margin-top:53%;
	}
}






.storefront-primary-navigation {

	background:none;
	border-bottom:1px solid blue;
}






/* composer table for mobile - centering the images and text */
/* use the exact post id number for this */

.post-42 .ml-table a:nth-child(1), .post-42 .ml-table a img  { 

	display:block;
	text-align:center;
	margin:auto;
}


/* product page */

.pay-methods {
	background-color:#00BCF2;
	border-radius:8px;
	-moz-border-radius:8px;
	padding: 5px 0px 4px 20px;
	margin-bottom:5px;
	color:white;
	font-weight:700;
}

.pay-methods a {
	color:white;
}

.paymethod td {
	padding:0 0 0 0px;
}


.liquidise td p{
	margin:0;
}

.comptable, .singertable {

	max-width:100%;

}

.comptable td, .singertable td {
	padding:0 0 0 20px;
}



.zoomplayer {	
	border:4px solid #C6CED4;
	border-radius:10px;
	-moz-border-radius:10px;
	padding:13px;
}


.masterclass {

	min-width:100%;
	max-width:100%;
	height:auto;

	background-image: url("/wp-content/uploads/2018/04/masterclass1a.jpg");
	background-size:100%;

	background-position:top;
	background-repeat: no-repeat;

}


.masterclass .masterspan {
	whitespace:nowrap;
	font-size:3vw;
	color:white;
}

.masterclass table tbody td {
	background-color:transparent;
	padding:0 20px 0 0;
	line-height: 110%;
}


.ml-responsive-table dt:first-child {
	padding-top:0px;
}


@media screen and (min-width: 1350px) {

	.masterclass .masterspan {
		font-size:2.5vw;
		color:white;
	}
}



@media screen and (min-width: 2000px) {

	.masterclass .masterspan {
		font-size:1.5vw;
	}
}



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

	.masterclass {
		background-color:#0092C3;
	}

	.masterclass table tbody td {
		text-shadow: 1px 1px #222222;
	}
}

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

	.masterclass {
		background-image:none;
		background-color:#016A8D;
	}

	.masterclass .masterspan {
		font-size:0;
		color:transparent;
	}

	.masterclass .masterspan::after {
			content: url('wp-content/uploads/2018/04/masterclass-650-nu.jpg');
			display:block;
	}

}


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

	.masterclass {
		background-image:none;
		background-color:#016A8D;
	}

	.masterclass .ml-table {
		text-shadow: 1px 1px #222222;
		min-height:0px;

	}

	.masterclass .ml-empty {
		padding:0;
		margin-bottom:0px;
	}

	.masterclass .masterspan {
		font-size:3.5vw;
		color:white;
	}

	.masterclass .masterspan::after {
			content: url('wp-content/uploads/2018/04/masterclass-500.jpg');
			display:block;
	}

}


@media screen and (max-width: 600px) {
	.masterclass .masterspan::after {
			content: url('wp-content/uploads/2018/04//masterclass-430.jpg');
			display:block;
	}

}

@media screen and (max-width: 500px) {
	.masterclass .masterspan::after {
			content: url('wp-content/uploads/2018/04/masterclass-270.jpg');
			display:block;
	}

}

.addtocart {
	margin:0;

	background-color:transparent;
	color:white;
	font-size:xx-large;
	padding-bottom:25px;
}

.addtocart .add_to_cart_button {
	margin-top:8px;
	margin-left:8px;
	border:3px solid white;
	border-radius:12px;
	color:black;
	background-color:#C6CED4;
	font-size:large;
}

.addtocart .added_to_cart {

	margin:10px;
	font-size:x-large;
	padding:10px 20px;
	margin-left:160px;

	border:3px solid red;
	border-radius:12px;
	color:black;
	background-color:#24C866;
}

@media screen and (max-width: 770px) {
	.addtocart .added_to_cart {
		margin-left:0px;
	}
}



table th {
	background-color: transparent;
}

table tbody td {
	background-color: transparent;
}

table tbody tr:nth-child(2n) td {
	background-color: transparent;
}





button.menu-toggle, button.menu-toggle:hover {
	background-color: transparent;
}


button.menu-toggle, button.menu-toggle:hover {
	border-color: #00294E;
	color: #00294E;
}


button.menu-toggle {
	border-radius:5px;
	-moz-border-radius:5px;
}

button.menu-toggle:focus {
	outline:0;
}








.main-navigation ul li a:before {
	display:none;
}



/* --- FRONT PAGE --- */ 


.fp-icondiv {
	display:inline-block;
/*	
	text-align: center; 
*/
	height:80px;
	vertical-align: middle;
	padding-right:10px;
}

.fp-icondiv img {
	max-width:71px;
}

.fp-text {
	vertical-align: top;
	display:inline-block;
	width:80%;
	font-weight:bold;
}



/* individual composer page */

.ml-responsive-table dl:nth-of-type(odd) {
  background: rgba(0, 0, 0, 0);
}

.composer-container {
	border-radius:8px;
	-moz-border-radius:8px;
	border:3px solid white;

	box-shadow: 3px 4px 10px 3px #aaa;	
	-webkit-box-shadow: 3px 4px 10px 3px #aaa;
	-moz-box-shadow: 3px 4px 10px 3px #aaa;
	display:inline-block;
	position: relative;
}
.composer-img {
	border-radius:8px;
	-moz-border-radius:8px;
	vertical-align:middle;

	display: block;
/*	max-width: 100%;*/
	height: auto;

min-width:120px;max-width:150px;

}

.comptable tbody tr td li a, .comptable tbody tr td li {
	font-weight:500;
}


.comptable td li  {
	padding-top:7px;
}


.composerdate {

	z-index: 100;
	position: absolute;
	color: white;
/*	font-size: 1.6vw;*/
	font-weight:650;

	text-shadow: 1px 1px #222222;

	width:100%;
/* 
	margin-left:0;
	margin-right:0;
	text-align:center;
	margin-bottom:-20px;
*/

	top: 80%;
	left:0px;

}

.work-title {
	background-color:#00294E;
	border-radius:8px;
	-moz-border-radius:8px;
	padding: 5px 0px 4px 20px;
	color:white;
	font-weight:700;
}



/* woocommerce */ 

/* store front */

form.cart {
	width:50%;

}


.woocommerce-breadcrumb {
	display:none;
}



.site-search {
	display:none;
}

.storefront-handheld-footer-bar ul .search {
	display:none;
}


.storefront-handheld-footer-bar ul {
	margin-left:65px;
}



.product_description, .product_description tr, .product_description th, .product_description td {
	padding:0;

}



.addtocart .woocommerce-Price-amount::before  {
/*	display:none;*/
	content: "Price - ";
	font-weight:bold;
	padding-right:5px;
}

.addtocart .woocommerce-Price-amount {
	font-weight:bold;
	padding-right:5px;
}



.woocommerce-MyAccount-navigation ul   .woocommerce-MyAccount-navigation-link--wc-smart-coupons{

	display:none;

}



.onclick-credits {
	position: relative;
	display: inline-block;
	color:rgba(135,135,135,0.25);
}
.onclick-credits:before {
	content: ".";
}
.onclick-credits:focus .onclick-credits-content {
	display: inline;
}
.onclick-credits-content {
	position: absolute;
	z-index: 1;
	max-width:97%;
	min-width:97%;
	display: none;
	white-space:pre;
	color:black;
	font-weight:bold;
}

.onclick-credits-content:before {
content:"Credits:\A \A Website design, creation and coding : - \9 Simon Levine \9 \9 Back-end Management : - \9 \9 \9 Simon Levine \A \A Audio mixing : - \9 \9 \9 \9 \9 \9 Simon Levine \9 \9 Audio post-production : - \9 \9 \9 Simon Levine \A \A Youtube video production : - \9 \9 \9 Simon Levine \9 \9 Youtube audio/video syncing : - \9 \9 Simon Levine \A \A Artwork : - \9 \9 \9 \9 \9 \9 \9 \9 Simon Levine \A \A Digital Distribution Management : - \9 Simon Levine \9 \9 Monetization Design & Control : - \9 Simon Levine  \A Copyright Management : - \9 \9 \9 \9 Simon Levine \A \A Project Design : - \9 \9 \9 \9 \9 \9 Simon Levine \9 \9 Project Management : - \9 \9 \9 \9 Simon Levine";}




/* composers */



#composers a, #composers  a:visited, #composers  a:hover,#composers  a:active,#composers a:link  {
	text-decoration:none;
}


#composers {

	width:75%;

	font-family: 'Open Sans', sans-serif;

/*font-size:50%;*/

	font-size:1.2vw;

	font-weight:normal;

	border:0px;
	background:white;
/*	padding-left:120px;*/

}


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

	#composers {
		width:90%;
		font-size:1.4vw;

	}

	#subcomposer  {
		display:none;
		margin:0;
	}

}

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

	#composers {
		width:100%;
		font-size:1.7vw;

	}
}

#composers td {
	border:3px solid rgba(0,0,0,0);
	border-radius:8px;
	-moz-border-radius:8px;

	/*width:100px;*/

	max-width:120px;

/*	min-width:86px;*/

	text-align:center;

	padding:5px;
}

#composers td, #composers td a {

}

#composers td a {

	text-transform: uppercase;
	cursor:pointer;
	display:block;
 	padding: 5px;
	margin: -5px;
}


#composers td img {
	display: block;
	margin: 0 auto; 
}


#composers td span::before { 
/*
	content: "Titles Available:";
	display:block;
	display:none;
	text-decoration:underline;
	font-size:14px;
	font-weight:bold;
	padding-bottom:10px;
*/
}

#composers td span  {
/*
	display:none;


	color:darkblue;

	padding:7px;

	height:115px;
	border:2px solid darkblue;
	border-radius:9px;
	-moz-border-radius:9px;

	position:fixed; 
	left:15px;
	top:50%;

	font-size:12px;

	width:145px;
	max-width:145px;
*/

}

#composers td img {
	padding-bottom:10px;

	-webkit-filter: grayscale(70%) opacity(80%); /* Safari */
	filter: grayscale(70%) opacity(80%);

}

#composers td:hover {
	border:3px solid #7F49CB;
}

#composers td:hover span {
/*	display:block;*/

	display:none;
}


#composers td:hover img {


	-webkit-filter: grayscale(0%) opacity(100%); /* Safari */
	filter: grayscale(0%) opacity(100%);
}





/* mouseover/onclick outside link dropdowns */

#ios, #ios span, #ios span a img, #ios a, #ios a img {
	display:inline-block;
}

#ios span a:hover{
	opacity:0.7;
}

#ios span .ud:before {

content:url('/wp-content/uploads/2018/04/up-down.jpg');

}
 
#ios span a.image {
	/*content:url('//www.chordperfect.com/front/images/up-down.jpg');*/
}

#ios span .ud {
	padding: 5px 5px 0px 2px;


	margin-bottom: 0px;
	vertical-align:middle;
	background-color:#00BCF2;;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	-moz-border-top-left-radius: 0px;
	-moz-border-bottom-left-radius: 0px;
	-moz-border-top-right-radius: 8px;
	-moz-border-bottom-right-radius: 8px;
}

#ios div { 
	display: none; 
}
#ios span:hover div { 
	display: block; 
}

#ios div {
	position:absolute;
	z-index:1;
	margin-left:-212px;
	background-color:rgba(255,255,255,0.7);
}

.payment-methods{
	min-width:212px;

	font-size:16px;
	display:inline-block;

	background-color: #00BCF2;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	-moz-border-top-left-radius: 8px;
	-moz-border-bottom-left-radius: 8px;
	-moz-border-top-right-radius: 0px;
	-moz-border-bottom-right-radius: 0px;
	padding: 5px 0px 8px 5px;
	margin-bottom: 4px;
	color: white;	
/*	font-weight: 700;*/

}



 #ios div a {
	border-radius: 8px;
	-moz-border-radius: 8px;
	font-size:16px;
	background-color: #00BCF2;
	padding: 5px 0px 8px 5px;
	margin-top: 4px;
	margin-bottom: 4px;
	color: white;	
width:440px;
}

.payment-methods:visited {
	color: white;	
}


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

	#ios span .ud {
/*
		margin-top:-2px;
		padding: 6px 5px 0px 2px;
*/	
	}
}


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

	 #ios div a {
		width:245px;

	}

	#ios span .ud {
		padding: 5px 5px 0px 2px;
	}
}







/*  the player  */ 


.ap-controls-right::before {

/*
content: url(//chordperfect.com/front/images/player/cp.png);
	display:block;
	left:-300px;
	font-weight:bold;
	color:blue;
	text-shadow:1px 1px #bbb;
*/
}

.ap-controls-right .controls-volume {
	left:-30px;
}

.is-single-player, .zoomlist, .zoomfx {
	border:3px solid white;
	border-radius:10px;
	-moz-border-radius:10px;
	padding:15px;
	box-shadow: 0px 0px 8px 4px #090c6c;
}

.is-single-player {
	max-width:75%;
}

.ap_addons {
	z-index:1000;
	float:left;
	margin-bottom:5px;
}

.ap_addons a {
	display: inline-block;
	padding-right:3px;
}