/*

Only mobile CSS settings.... comes after core CSS

media="screen and (max-device-width: 640px)"


*/

@media (max-width: 560px) { /*default in most templates*/

	#cboxCurrent {display:none;}

	/*AJ reduce default margin 80px on mobile to reduce gappiness*/
	.is-container.is-default-margin{
		margin-top:20px!important;
		margin-bottom:20px!important;
	}

	div#cmsBannerContainer.captionTypeLeft .cmsBannerCaptionContainer {left: 5%; width: 90%;}
	div#cmsBannerContainer.captionTypeRight .cmsBannerCaptionContainer {right: 5%; width: 90%;}
	div#cmsBannerContainer.captionTypeCenter .cmsBannerCaptionContainer {left: 5%; width: 90%;}

	/*========================
	Widgets Formatting
	========================*/

	table.toyTable.toySearchDual td{
		display: block;
		text-align: center;
	}

	/*mobile classes - using !important to override inline styles set on snippets*/

	.hideForMobile,.desktop,.cmsHomePage .hideForHome {
		display:none;
	}
	table.mobileBreakTable>tbody>tr>th ,
	table.mobileBreakTable>tr>th ,
	table.mobileBreakTable>tbody>tr>td ,
	table.mobileBreakTable>tr>td
	{
		display:block;
		width: 100%;
		box-sizing: border-box;
	}


    table.tableScroll,
    .tableScroll table{
        display:block;
        overflow-x: auto;
    }
    table.tableScroll tbody,
    .tableScroll table tbody{
        display:block;
    }

    /*mobile section text align - target children*/
    .mobileSTextLeft *{text-align:left!important;}
    .mobileSTextCenter *{text-align:center!important;}
    .mobileSTextRight *{text-align:right!important;}

    .mobileTextLeft,.mobileTextLeft *{text-align:left!important;}
    .mobileTextCenter,.mobileTextCenter *{text-align:center!important;}
    .mobileTextRight,.mobileTextRight *{text-align:right!important;}

    .mobileWidthFull{width:100%!important;max-width:none!important;}
    .is-section.mobileWidthFull .is-container,
		.is-box.mobileWidthFull .is-container{width: 100%!important;max-width: 100%!important;margin-left:0!important;margin-right:0!important;}
    .mobileWidthHalf,
		.is-box.mobileWidthHalf .is-container{width:50%!important;margin-left:0!important;margin-right:0!important;float:left;}
    .mobileWidthHalfCenter,
		.is-box.mobileWidthCenter .is-container{width:50%!important;margin-left:auto!important;margin-right:auto!important;}
    .mobileWidthHalf + .mobileWidthHalf::after {content: "";clear: both;display: table;}
    .mobilePadLeft{padding-left:1rem;}
    .mobilePadRight{padding-right:1rem;}
    .mobileCPad{padding:0!important;}
    .mobHPad{padding-right:1rem!important;padding-left:1rem!important;}
    .mobNoHPad{padding-right:0!important;padding-left:0!important}
		.mobNoTPad{padding-top:0!important;}
		.mobNoBPad{padding-bottom:0!important;}
		[class^="mobileFont"],[class^="mobileFont"] *,[class^="mobileFont"] span{line-height:1.5!important;} /* AJ Set default line-height for all font sizes*/
    .mobileLine *,.mobileLine span,.mobileLine{line-height:1.0em!important;}
    .mobileLine12 *,.mobileLine12 span,.mobileLine12{line-height:1.2em!important;}
  	.mobileMMargin h1,.mobileMMargin h2,.mobileMMargin h3,.mobileMMargin h4,.mobileMMargin p{margin-top:0.5rem!important;margin-bottom:0.5rem!important;}
    .mobNoMargin{margin:0!important;}
		.mobMarginInAuto{margin-inline:auto!important;}
		.mobNoTM{margin-top:0!important;}
		.mobNoBM{margin-bottom:0!important;}
    .mobNegM{margin-right:-1rem!important;margin-left:-1rem!important;}
    .mobNegM2{margin-right:-2rem!important;margin-left:-2rem!important;}
    .mobNegMRight{margin-right:-1rem!important;}
    .mobNegMLeft{margin-left:-1rem!important;}
    .mobNegMRight2{margin-right:-2rem!important;}
    .mobNegMLeft2{margin-left:-2rem!important;}
    .mobileBlock{display:block!important;}
    .mobileFlex{display:flex!important;}
		.mobileInlineFlex{display:inline-flex!important;}
		.mobileAbs{position:absolute!important;}
		.mobRLAuto{right:auto!important;left:auto!important;}
		.mobWhiteSp{white-space: break-spaces;}

		/*modal-colstyle*/
		.mobMarginVert{margin-top:1rem!important;margin-bottom:1rem!important;}
		.mobNoLR{left:unset!important;right:unset!important;}
		.mobNoTop{top:unset!important;}


    .row.mobileFont1 *,.column.mobileFont1 *,.mobileFont1,.mobileFont1 span{font-size:0.5vW!important;}
    .row.mobileFont2 *,.column.mobileFont2 *,.mobileFont2,.mobileFont2 span{font-size:1vW!important;}
    .row.mobileFont3 *,.column.mobileFont3 *,.mobileFont3,.mobileFont3 span{font-size:1.5vW!important;}
    .row.mobileFont4 *,.column.mobileFont4 *,.mobileFont4,.mobileFont4 span{font-size:2vW!important;}
    .row.mobileFont5 *,.column.mobileFont5 *,.mobileFont5,.mobileFont5 span{font-size:2.5vW!important;}
    .row.mobileFont6 *,.column.mobileFont6 *,.mobileFont6,.mobileFont6 span{font-size:3vW!important;}
    .row.mobileFont7 *,.column.mobileFont7 *,.mobileFont7,.mobileFont7 span{font-size:4vW!important;}
    .row.mobileFont8 *,.column.mobileFont8 *,.mobileFont8,.mobileFont8 span{font-size:5vW!important;}
    .row.mobileFont9 *,.column.mobileFont9 *,.mobileFont9,.mobileFont9 span{font-size:6vW!important;}
    .row.mobileFont10 *,.column.mobileFont10 *,.mobileFont10,.mobileFont10 span{font-size:8vW!important;}
    .row.mobileFont11 *,.column.mobileFont11 *,.mobileFont11,.mobileFont11 span{font-size:10vW!important;}
    .row.mobileFont12 *,.column.mobileFont12 *,.mobileFont12,.mobileFont12 span{font-size:12vW!important;}

    .mobScale09{transform: scale(0.9);}
    .mobScale085{transform: scale(0.85);}
    .mobScale08{transform: scale(0.8);}
    .mobScale075{transform: scale(0.75);}
	  .mobScale06{transform: scale(0.6);}
	  .mobScale05{transform: scale(0.5);}
	  .mobScale04{transform: scale(0.4);}

		.mobilePaddingTop200{padding-top:200%!important;}  /*.cbimagecontainer height settings for modal-image*/
		.mobilePaddingTop150{padding-top:150%!important;}
		.mobilePaddingTop100{padding-top:100%!important;}
		.mobilePaddingTop75{padding-top:75%!important;}
		.mobilePaddingTop50{padding-top:50%!important;}


    /*Mobile Overrides for desktop section height*/
  div.is-wrapper > div.mobileHeight20,div.mobileHeight20 {height:20vH!important;}
	div.is-wrapper > div.mobileHeight30,div.mobileHeight30 {height:30vH!important;}
	div.is-wrapper > div.mobileHeight40,div.mobileHeight40 {height:40vH!important;}
	div.is-wrapper > div.mobileHeight50,div.mobileHeight50 {height:50vH!important;}
	div.is-wrapper > div.mobileHeight60,div.mobileHeight60 {height:60vH!important;}
	div.is-wrapper > div.mobileHeight75,div.mobileHeight75 {height:75vH!important;}
	div.is-wrapper > div.mobileHeight100,div.mobileHeight100 {height:100vH!important;}
	div.is-wrapper > div.mobileHeightAuto,div.mobileHeightAuto {height:auto!important;}

    .mobileVMargin0 .is-container{margin-top:0px!important;margin-bottom:0px!important;}
    .mobileVMargin10 .is-container{margin-top:10px!important;margin-bottom:10px!important;}
    .mobileVMargin20 .is-container{margin-top:20px!important;margin-bottom:20px!important;}
    .mobileVMargin40 .is-container{margin-top:40px!important;margin-bottom:40px!important;}
    .mobileVMargin80 .is-container{margin-top:80px!important;margin-bottom:80px!important;}
    .mobileVMargin100 .is-container{margin-top:100px!important;margin-bottom:100px!important;}
    .mobileVMargin5pc .is-container{margin-top:5%!important;margin-bottom:5%!important;}
    .mobileVMargin10pc .is-container{margin-top:10%!important;margin-bottom:10%!important;}
    .mobileVMargin15pc .is-container{margin-top:15%!important;margin-bottom:15%!important;}
    .mobileVMargin20pc .is-container{margin-top:20%!important;margin-bottom:20%!important;}
    .mobileVMargin30pc .is-container{margin-top:30%!important;margin-bottom:30%!important;}

    .mobileOverlay40 .is-overlay .is-overlay-color {opacity: .40;}

    .mobileVCol{display:flex!important;flex-direction:column;}
    .mobileVCol .column{width:100%!important;}
    .mobAlignCenter{align-items:center!important;}
    .mobJustCenter{justify-content:center!important;}
    .mobileOB figure.hdr figcaption{position:relative!important;flex-direction:column!important;height:auto!important;padding:1rem!important;}
		.mobileOB figure .cbimagecontainer{margin-bottom:0!important;height:auto!important;}
		.mobileOB figure .cbcaptioncontainer{position:relative!important;flex-direction:column!important;height:auto!important;padding:0 1rem 1rem!important;display:block!important;}
		.mobileOB figure .cbcaptioncontainer{padding:0!important;}/*AJ not sure why I set the above...*/
		.mobileOB figure .cbcaptioncontainer figcaption{position:relative!important;margin:0!important;}
		.mobileOB .slick-arrow{display:none!important;}

		.mobHideBG,
		.mobHideBG .is-overlay-bg{background-image:none!important;}

		.mobOrder1{order:1!important;}
		.mobOrder2{order:2!important;}
		.mobOrder3{order:3!important;}
		.mobOrder4{order:4!important;}
		.mobOrder5{order:5!important;}
		.mobOrder6{order:6!important;}
		.mobOrder7{order:7!important;}
		.mobOrder8{order:8!important;}

		.mob-isLightText,.mob-isLightText *{color:white!important;}
		.mob-isDarkText,.mob-isDarkText *{color:black!important;}

	.mobileMImg img{margin-top:0!important;	margin-bottom:0!important;}
  .row.mobileVCol.inline .column {width: 99%!important;}
	.mobileCol2 .column{width: 50%!important;}
  .row.mobileCol2.inline .column {width: 49%!important;}
	.mobileCol3 .column{width: 33.3%!important;}
  .row.mobileCol3.inline .column {width: 32%!important;}
	.mobileCol4 .column{width: 25%!important;}
  .row.mobileCol4.inline .column {width: 24%!important;}
	.mobileCol2 .column:nth-child(2n+3),
	.mobileCol3 .column:nth-child(3n+4),
	.mobileCol4 .column:nth-child(4n+5){clear:both;}
	.mobileCol2 .column,.mobileCol3 .column,.mobileCol4 .column{vertical-align: top;float:left;padding-left: 1rem;padding-right: 1rem;}
	.mobileCol2:after,.mobileCol3:after,.mobileCol4:after{content: "";clear: both;display: table;}

  .grid.mobileVCol{grid-template-columns:1fr!important;}
	.grid.mobileCol2{grid-template-columns:1fr 1fr!important;}
	.grid.mobileCol3{grid-template-columns:1fr 1fr 1fr!important;}
	.grid.mobileCol4{grid-template-columns:1fr 1fr 1fr 1fr!important;}
	.grid.mobileVCol .column,.grid.mobileCol2 .column,.grid.mobileCol3 .column,.grid.mobileCol4 .column{width:100%!important;}



	.toyTableLeft,.toyTableRight{width:100%;text-align:center;display:block;}
	.row.flex figure.hdr figcaption {padding: 1rem;}

	/*Masthead mobile class*/
	.masthead-right-logo .column.toys{order:2;}
	.masthead-right-logo .column.logo{order:1;}

  body .is-wrapper > div.is-mob-sticky,
  body .is-mob-sticky{
    position:sticky;
    top:0;
  }
  .is-mob-sticky{
    z-index:50;/*might need adjusting per site based of  template css*/
  }



  .cmsFormPrompt {
	 font-size: 9pt;
  }

	.is-section.mobDisableEffects .is-overlay-bg,
	.is-section.fixed.mobDisableEffects .is-overlay-bg,
	.is-section.parallax.mobDisableEffects .is-overlay-bg{
		    background-attachment: initial;
	}



	/* default to columns where smaller grained */

	.list-style-4col li {
		width: 50%;
		display: inline-block;
		float: left;
	}
	.list-style-5col li {
		width: 33%;
		display: inline-block;
		float: left;
	}
	.list-style-6col li {
		width: 33%;
		display: inline-block;
		float: left;
	}

	.list-style-4col li:nth-child(2n+3),
	.list-style-5col li:nth-child(3n+4),
	.list-style-6col li:nth-child(3n+4){
	clear:both;
	}

	.list-style-table .cmsImage  { max-width: 50%; margin: auto auto;}
	.list-style-table .cmsQuantity { text-align: right;}




	.list-style-default .cmsItem .cmsImage {float:left; width: 33%; margin: 0; text-align: center; }
	.list-style-default .cmsItem .cmsTitleAndTextNoPrice ,
	.list-style-default .cmsItem .cmsTitleAndText {float:right; width: 65%; margin: 0; }
	.list-style-default .cmsItem .cmsPriceAndEnquiry {clear:both; float:right; width: 65%; font-size: 100%; overflow: hidden; margin: 5% 0;}
	.list-style-default .cmsItem .cmsPrice {float: left; width: 55%;  margin: 0; text-align: left; }
	.list-style-default .cmsItem .cmsEnquiry {float:right; width: 40%; margin: 0; }
	.cmsItemLI { margin-bottom: 10px; }





    /* bootstrap grid */
    .col-xs-12 { width: 100%; }
    .col-xs-9 { width: 75%; }
    .col-xs-8 { width: 66.7%; }
    .col-xs-6 { width: 50%; }
    .col-xs-4 { width: 33.3%; }
    .col-xs-3 { width: 25%; }
    .col-xs-2 { width: 16.6%; }
    .col-xs-1 { width: 8%; }


		.is-card-circle { zoom:0.7; -moz-transform: scale(0.7); }
		body .row.inline-thirds .column,  body .row.inline .column {display:block;}
		body .row.inline-thirds.mobileCol2 .column,  body .row.inline.mobileCol2 .column{float:left;width:50%!important;}
		body .row.inline-thirds.mobileCol3 .column,  body .row.inline.mobileCol3 .column{float:left;width:33%!important;}
		body .row.inline-thirds.mobileCol4 .column,  body .row.inline.mobileCol4 .column{float:left;width:25%!important;}


		/*disable hover effects on mobile*/
		.txtOnHover figure figcaption,
		.txtOnHoverZoom figure figcaption,
		.txtOnUpHover figure figcaption,
		.txtOnHover .cbcaptioncontainer,
		.txtOnUpHover .cbcaptioncontainer,
		.txtOnHoverZoom .cbcaptioncontainer{
			opacity:1!important;
		}

		/*----------------------------
		Product Search Tidy
		-----------------------------*/
		  .cmsSearchForm form[name=productSearchForm] {
		    display: flex;
		    flex-wrap: wrap;
		  }

		  .cmsSearchForm form[name=productSearchForm] .cmsProductSearchKeywords {
		    flex: 1;
		    margin-left: 0.5rem;
		  }

		  .cmsSearchForm form[name=productSearchForm] .cmsProductSearchAdvanced {
		    margin-top: 4px;
		    margin-left: auto;
		    margin-right: auto;
		  }


}


@media all and (max-width: 540px) {
	.quote > ion-icon,
    .quote > i { font-size:1.5em;}
    .quote > small {margin-left:20px; font-size: 1em;}
    .quote > p {margin-left:20px; font-size: 1.2em;}
}

@media(max-width:500px){

.mobileWidthFull{margin-left:0!important;margin-right:0!important;}

}

/*=================================

HEADER GRID MOBILE @560 - For use with header modal

=================================*/

@media(max-width:560px){

header{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap:1rem;
	margin:0.5rem 0 0;
}
.headTopLeft{
    grid-column: 1 / 3;
    grid-row: 1;
}
.headTopCenter{
    grid-column: 3 / 9;
    grid-row: 1;
    justify-content: center;
}
.headTopRight{
    grid-column: 9 / 11;
    grid-row: 1;
    text-align: right;
    justify-content: flex-end;
}
.headSecondFull,
header .column.header-flex-fill.headSecondFull
{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
}
.headThirdFull,
header .column.header-flex-fill.headThirdFull{
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: center;
}
.headFourthFull,
.column.header-flex-fill.headFourthFull{
    grid-column: 1 / -1;
    grid-row: 4;
    justify-content: center;
}
.headTopLeft80{
    grid-column: 1 / 9;
    grid-row: 1;}

.headTopLeft50{
    grid-column: 1 / 6;
    grid-row: 1;
}

.headTopRight50{
    grid-column: 6 / 11;
    grid-row: 1;
    justify-content: flex-end;
}
header .column.desktop{display:none;}
/*align-right override*/
header #cmsShoppingCartTemplateLinks{text-align:center!important;}

/*Hide toptoys 2nd/3rd rows if empty but whitespace.*/
.header-flex-item.headSecondFull:has(#cmsPageHeaderTopTools):not(:has(#cmsPageHeaderTopTools *)),
.header-flex-item.headThirdFull:has(#cmsPageHeaderTopTools):not(:has(#cmsPageHeaderTopTools *)){
	display:none;
}



/*=============================
Youtube API IFRAME
==============================*/

iframe.cmsYTvideo {
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cmsYTContainer{
	height:inherit;
	position:relative;
	overflow:hidden;
}

/*=============================
CONTENTBOX MOBILE EFFECTS DISABLED
==============================*/

/*AJ Additional section background animations*/
.is-section.mobDisableEffects .is-overlay-color,
.is-section.mobDisableEffects .is-overlay-bg,
.is-section.mobDisableEffects .is-container{
    -webkit-transition: none!important;
    transition: none!important;
		transform: none!important;
}
body .is-section.mobDisableEffects .is-container{
		opacity:1!important;
}

body .is-section.mobDisableEffects:hover .is-overlay-color {
    opacity: 0 !important;
}
body .is-section.mobDisableEffects.is-animated{
	animation-name:none!important;
}

/*=====================================
Contentbox Section Col & .row Ordering - set parent to flex
=====================================*/

.is-section > .is-boxes:has(.is-box.mobOrder1,.is-box.mobOrder2,.is-box.mobOrder3){
	display:flex;
	flex-direction:column;
}

.is-container:has(.row.mobOrder1,.row.mobOrder2,.row.mobOrder){
	display:flex;
	flex-direction:column;
}


}