/*
	RESPONSIVE STYLE SHEET FOR PC:	2023
	====================================

	Cannot incorporate ALL device break points into ONE style sheet because the layouts & page elements are device=specific and can be radically different.
	So there are TWO device specifations: PC and MOBILE (which also includes TABLET since tablets have only 2% of total usage).
	This style sheet is for PC.

	For the analysis on which this is based, see the ScreenAndDeviceUsage-2023.xlsx document stored in the root directory of the website.
	BREAK POINTS:	Mobile (56% of total usage):	360px (Default)		400px
					Code for:	350px			390px
			PC (42% of total usage):	1000px			1200px		1300px (Default)	1400px		1800px
					Code for:	As 1300			As 1300		1050px			As 1800		1200px
	For MOBILE, code content container at 10px below break point (e.g. 360px at 350px) to avoid accidental "spillage" of content off-screen.
	PCs don't need this because the break points are safely inside the 10px level (e.g. 1300px is well within the 1360px at which devices start to kick in)
	
	PC style rules:
	Despite having FIVE break points, there are only TWO widths used: 1050px and 1200px. More can be added, but content width above 1200px may just create pages that are too wide to read easily.
	Overall page	ALWAYS in the MAIN CONTAINER (style .pageContainer)	Created in start and end scripts
	Column containers expressed in percentages (e.g. column50, column66, column33) - column widths must ALWAYS add up to MAXIMUM of 99% not 100%
	
*/

/* DEFAULT STYLES - START						*/
/* Extra large devices (desktops and large laptops 1200px - 1400px	*/
/* 1320/1366px		(57%)	Code for 1050px	(Default)		*/
/* See styles/default-PC-2023.css					*/
/* DEFAULT STYLES -  END 						*/

/* ============= BREAKPOINT FOR >= 1400px ===============		*/
/* Extra large devices (large desktops, 1400px and up)			*/
/* More than 1440/1536px	(31%)	Code for 1200px			*/
@media screen and (min-width: 1400px) {
.pageBannerHOME		{height:450px;}
.homeBannerLH		{height:420px;}
.homeBannerRH		{height:420px;}

.homePageHeading	{font-size:46px;}
.bannerTopLine		{font-weight:700; padding:8px 16px 8px 16px;}

.pageContainer		{width:1200px;}		/* REDUNDANT? */
.contentWidth		{width:1200px;}
.fullWidth		{max-width:1200px;}

.column100		{max-width:1200px;}

.topMenuPC		{}
.topMenuPCInner		{width:1200px;}

.topRightStatic02	{width:350px;}
.topRightFloat01	{width:350px;}
.topRightStatic01	{width:350px;}

.showBelow1400		{display:none;}

.Zdisplay-widthCAROUSEL	{width:1200px !important;}
.Zdisplay-areaCARDS	{width:1200px !important;}
.Zdisplay-areaCARDS70	{width: 830px; margin: auto;}

.ZcontentCard2col		{width:554px; flex:554px 0 0;}
.ZcontentCard3col		{width:346px; flex:346px 0 0;}
.ZcontentCard3col70		{width:248px; flex:248px 0 0;}
.ZcontentCard4col		{width:270px; flex:270px 0 0;}

.bannerStarRatingsBox	{left:1000px; top:100px;}
.bannerStudentsBox	{left: 650px; top:250px;}
.bannerAnniversaryBox	{left: 970px; top:110px;}

.contentBoxWhyZandaX01	{background:url(/imageFiles/page/box-WhyZandax-01-1200.png) no-repeat;}	
.contentBoxWhyZandaX02	{background:url(/imageFiles/page/box-WhyZandax-02-1200.png) no-repeat;}	
.contentBoxWhyZandaX03	{background:url(/imageFiles/page/box-WhyZandax-03-1200.png) no-repeat;}	

.moduleName		{width:650px;}
.moduleContentShow	{width: 40px; padding-left:60px;}
.moduleContent		{font-size:16px;}
.moduleContentWidth1	{width:780px; }
.moduleContentWidth2	{width:740px;}

.questionMainImage	{width:320px;}
.questionSection4	{height:350px;}
.questionSection5	{height:430px;}

.responseRadio		{width: 4%;}
.responseText		{width:92%;}
}

/* ============= BREAKPOINT FOR < 1300px ===============		*/
/*		   DOES THIS STAY ???					*/
/* Interim (old desktops, mainly 1280px screens, 1200px - 1300px)	*/
/* Less than 1300/1280px	(10%)	Inherits from 1300px		*/
@media screen and (max-width: 1300px) {
.topMenuLinksElement	{font-size:14px;}

}

/* ============= BREAKPOINT FOR < 1200px ===============		*/
/* Small devices (laptops and old desktops)				*/
/* Less than 1200/1024px	(12%)	Code for 900px			*/
@media screen and (max-width: 1200px) {
.pageContainer		{width:900px;}		/* REDUNDANT? */
.contentWidth		{width:900px;}
.fullWidth		{max-width:900px;}
.fullWidth70		{max-width:730px;}
.column100		{max-width:900px;}

.topMenuPC		{}
.topMenuPCInner		{max-width:900px;}
.topMenuLinksElement	{font-size:13px;}

.priceLHcol		{padding: 0px 5px 0px 10px; font-size:22px;}
.priceRHcol		{padding: 0px 0px 0px 10px;}

.pageBannerHOME		{height:400px;}
.homeBannerLH		{height:380px;}
.homeBannerRH		{height:380px;}

.homePageHeading	{font-size:40px;}

.topRightStatic02	{width:300px;}
.topRightFloat01	{width:300px;}
.topRightStatic01	{width:300px;}

.showBelow1200		{display:inline;}

.Zdisplay-widthCAROUSEL	{width: 900px !important;}
.Zdisplay-areaCARDS	{width: 900px !important;}
.Zdisplay-areaCARDS70	{width: 630px !important; margin: auto;}

.Zdisplay-areaCO		{width: 900px !important;}
.Zdisplay-areaCP		{width: 900px !important;}
.Zdisplay-areaCR		{width: 900px !important;}

.ZcontentCard2col		{width:424px; flex:424px 0 0;}
.ZcontentCard3col		{width:286px; flex:286px 0 0;}
.ZcontentCard3col70		{width:188px; flex:188px 0 0;}
.ZcontentCard4col		{width:229px; flex:229px 0 0;}
.ZcontentCard4colNOimage		{width:229px; flex:229px 0 0;}

.bannerStarRatingsBox	{left:850px; top:100px;}
.bannerStudentsBox	{left:550px; top:200px;}
.bannerAnniversaryBox	{left:820px; top: 90px;}

.discountStar		{width:50px; margin:20px 10px  0px  0px;}

.buttonSmall a		{padding: 4px  4px  4px  4px;}
.buttonMid a		{padding: 6px  8px  6px  8px;}
.buttonBig a		{padding:20px 15px 20px 15px;}

.moduleName		{width:450px;}
.moduleContentShow	{width: 40px; padding-left:30px;}
.moduleContent		{}
.moduleContentWidth1	{width:560px; }
.moduleContentWidth2	{width:530px;}

.questionMainImage	{width:250px;}
.questionSection4	{height:380px;}
.questionSection5	{height:460px;}

.responseRadio		{width: 7%;}
.responseText		{width:90%;}
}