@import url('../../../../global/ms_fonts.css');

#thisMS .h3, #thisMS h3{text-shadow: none;}

#thisMS{background-color:#fff;font-family: 'opensans_regular';color:#595f65;	}
#thisMS h1{background-color:#00247B;display:inline-block;color:#fff;font-family:Roboto_Condensed_Bold;padding:.5em;margin:-40px 0 0 0;font-size:180%;-moz-transform: skew(40deg, 0deg);-webkit-transform: skew(40deg, 0deg);-o-transform: skew(40deg, 0deg);-ms-transform: skew(40deg, 0deg);transform: skew(40deg, 0deg);}
#thisMS h1 span{display:block;skew(-40deg, 0deg);-webkit-transform: skew(-40deg, 0deg);-o-transform: skew(-40deg, 0deg);-ms-transform: skew(-40deg, 0deg);transform: skew(-40deg, 0deg);}
#thisMS .grey-box{background:#f5f5f5;padding:1em 2em;margin:0 0 2em 0;}
#thisMS p.h2{font-family: 'opensans_bold';text-align:center;font-size:130%;margin:0 0 .5em 0;padding:0;}
#thisMS p.h1{color:#00247B;font-family:Roboto_Condensed_Bold;text-align:center;}
#thisMS p.h3{background-color:#00247B;display:inline-block;color:#fff;font-family:Roboto_Condensed_Bold;padding:.5em 2em;margin:0 0 0 0;font-size:220%;-moz-transform: skew(40deg, 0deg);-webkit-transform: skew(40deg, 0deg);-o-transform: skew(40deg, 0deg);-ms-transform: skew(40deg, 0deg);transform: skew(40deg, 0deg);}
#thisMS p.h3 span{display:block;skew(-40deg, 0deg);-webkit-transform: skew(-40deg, 0deg);-o-transform: skew(-40deg, 0deg);-ms-transform: skew(-40deg, 0deg);transform: skew(-40deg, 0deg);}


/* product styling */
#thisMS .ms_product{background-color:#FFF;background-blend-mode: multiply;background-repeat: no-repeat, no-repeat;background-size: cover, 160px;background-position: 0 0, 5% 30%; border-bottom:1px solid #aaa;}
#thisMS .ms_prodimage{margin-top:1em;height:150px;width:160px;}
#thisMS .ms_prodimage > a{display:block;position: absolute;left:0;right:0;bottom:0;top:0;}
#thisMS .ms_group{position: absolute;margin-top:-20px;text-align: center;width:100%;}
#thisMS .ms_group_icon{display:inline-block;}
#thisMS .ms_badge{background:#00247B;color:#fff;text-transform:uppercase;font-family:opensans_bold;display:block;padding:.5em 0;margin-top:3.75em;}
#thisMS .ms_badge.empty{background:transparent;}
#thisMS .ms_prodinfo{margin:1.5em .5em .5em .5em;}
#thisMS .ms_prodname{height:43px;overflow: hidden;}
#thisMS .ms_prodname a{color:#5e5f65;font-family: 'opensans_bold';font-size:120%;}
#thisMS .ms_pricenew{font-size:120%;padding:0;margin:0;}
#thisMS .ms_pricenew span{display:block;font-family: 'opensans_bold';font-size:150%;color:#00247B;}
#thisMS .ms_priceold{opacity:.55;margin:0;padding:0;}
#thisMS .ms_buttons{display:table;border-collapse:separate;border-spacing:15px;table-layout: fixed;text-align:center;width:100%;}
#thisMS .ms_button{display:table-cell;vertical-align: middle;height:100%;background:#fff;padding:.2em;transition:all 0.3s;}
#thisMS .ms_button_buy{background:#00247B;color:#fff;}
#thisMS .ms_button_buy:hover{text-decoration: none;background-color:#000247;color:#fff;}
#thisMS .ms_button_detail{background:#c0c0c0;font-size:200%;color:#595f65;}
#thisMS .ms_button_detail span{display:block;margin-top:1px;}
#thisMS .ms_button_detail:hover{background-color:#000247;color:#fff;}

#thisMS .pstatic{padding-top:4em;}


/* https://www.sitepoint.com/create-css-conic-gradients-pie-charts/ */
#thisMS .circle-pie{width: 100px; height: 100px;position: absolute;z-index:0;border-radius: 50%;-moz-transform: scale(-1, 1);-webkit-transform: scale(-1, 1);-o-transform: scale(-1, 1);-ms-transform: scale(-1, 1);transform: scale(-1, 1);}
#thisMS a.circle-pie-position{display:block;position:absolute;left:50%;top:1em;}
#thisMS .circle-pie-white-circle{width:90px;height:90px;margin:5px;position: absolute;z-index:1;background:#fff;border-radius: 50%;}
#thisMS .circle-pie-text{position: absolute;color: #5e5f65;font-size: 100%;left:15%;top:25%;}


/* soldout and timeout stamps */
.stamp{display:none;position:absolute;background: rgba(255, 255, 255, .7);top:0;left:0;right:0;bottom:0;z-index:1}
.stamp-text{color:#FF0000;position:absolute;z-index:3;border:2px solid #FF0000;font-weight:bold;font-size:160%;padding:.5em;margin-top:6em;margin-left:5em;
	transform: rotate(352deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(352deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(352deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(352deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(352deg) scale(1) skew(1deg) translate(0px);	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
	box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);	
	text-shadow: 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1);
}



@media (min-width:980px){
  #thisMS .grey-box{height:210px;}
  #thisMS h1{font-size:250%;min-width:520px;}    
      
  /* opera gx does not support ":not" at the moment probably */
  /*#thisMS .ms_product:not(#thisMS .itemhighlight .ms_product){background-color:#f5f5f5;background-size:180px;background-position:50% 3%; border-bottom:none;margin-top:20px;-webkit-box-shadow: 0px 0px 5px 2px #e2e2e2;box-shadow: 0px 0px 5px 2px #e2e2e2;border:1px solid #dadada;}*/
  #thisMS .item .ms_product{background-color:#f5f5f5;background-size:180px;background-position:50% 3%; border-bottom:none;margin-top:20px;-webkit-box-shadow: 0px 0px 5px 2px #e2e2e2;box-shadow: 0px 0px 5px 2px #e2e2e2;border:1px solid #dadada;}
  
  #thisMS .ms_prodimage{margin-top:1em;height:180px;width:180px;}
  #thisMS a.circle-pie-position{left:50%;top:1em;}  
  
  #thisMS .itemhighlight .circle-pie{width: 120px; height: 120px;}
  #thisMS .itemhighlight a.circle-pie-position{left:60%;top:1em;}
  #thisMS .itemhighlight .circle-pie-white-circle{width:100px;height:100px;margin:10px;}
  #thisMS .itemhighlight .circle-pie-text{font-size: 120%;left:15%;top:25%;}
  #thisMS .itemhighlight .ms_product{background-size: cover, 256px;background-position: 0 0, 50% 3%; border-bottom:none;margin-top:20px;-webkit-box-shadow: 0px 0px 5px 2px #e2e2e2;box-shadow: 0px 0px 5px 2px #e2e2e2;border:1px solid #dadada;}
  #thisMS .itemhighlight .ms_prodimage{margin-top:1em;height:256px;width:256px;}  
}

@media (min-width:1680px){
  #thisMS .grey-box{height:160px;}
  #thisMS .five-cols-lg{width:20%;}
}