@charset "utf-8";
/* Table of Contents
==================================================
	#Desktop (1920 and 1600 and 1440 and 1366)
	#laptop (1440 and 1366)
	#Tablet (991 to 767)
	#Mobile (767 to 360)



/* #Additional - Large Screens width of 1800px to 1601px 
================================================== */
@media only screen and (min-width: 1601px) and (max-width: 1800px) {

:root										{ --container-width: 1410px; }
.container                                  { max-width: 1410px; }


}

/* #Additional - Large Screens width of 1600px to 1501px 
================================================== */
@media only screen and (min-width: 1501px) and (max-width: 1600px) {

:root										{ --container-width: 1410px; }
.container                                  { max-width: 1410px; }

header 										{ padding: 20px 0; }

.banner-section 							{ padding-top: 115px; }
.banner-section .caption .bannerImg 		{ max-width: 650px; }
.banner-section .caption .bannerImg img 	{ max-width: 260px; margin-right: -55px; }




}

/* #Additional - Large Screens width of 1500px to 1441px 
================================================== */
@media only screen and (min-width: 1441px) and (max-width: 1500px) {

:root										{ --container-width: 1366px; }
.container                                  { max-width: 1366px; }


}

/* #Additional - Large Screens width of 1440px to 1200px 
================================================== */
@media only screen and (min-width: 1367px) and (max-width: 1440px) {

:root										{ --container-width: 1366px; }
.container                                  { max-width: 1366px; }

.banner-section .caption .bannerImg 		{ max-width: 650px; }
.banner-section .caption .bannerImg img 	{ max-width: 260px; margin-right: -55px; }

.booksSec .booksBox 						{ margin-bottom: 100px; }
.booksSec .booksBox:nth-child(2) 			{ margin-bottom: 0; }
.booksSec .booksBox .rightCol 				{ max-width: 430px; max-height: 430px; }
.booksSec .booksBox .rightCol img 			{ max-width: 80%; }

footer 										{ padding: 75px 0 150px; }



}



/* #Additional - Large Screens  width of 1366px to 1200px
================================================== */
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    
:root										{ --container-width: 1250px; }
.container                                  { max-width: 1250px;}

header										{ padding: 20px 0; }

.banner-section 							{ padding-top: 115px; }
.banner-section .caption .bannerImg 		{ max-width: 450px; }
.banner-section .caption .bannerImg img 	{ max-width: 180px; margin-right: -40px; }

.getOff 									{ font-size: 25px; line-height: 22px; }

.smarterWaySec 								{ padding: 40px 0 85px 0; }

.booksSec .booksBox   						{ padding: 40px; margin-bottom: 135px; }
.booksSec .booksBox:nth-child(2) 			{ margin-bottom: 50px; }
.booksSec .booksBox .rightCol 				{ max-width: 440px; max-height: 440px; }
.booksSec .booksBox .rightCol img 			{ max-width: 80%; }
.booksSec .booksBox .leftCol .info 			{ padding-right: 0; margin-bottom: 40px; }

.realWorldSec .leftCol 						{ padding: 65px 100px 65px 0; }
.realWorldSec .rightCol .realWorldImg 		{ left: -100px; width: 200px; }

}



/* #iPad Pro - Large Screens width of 1199px to 990px
================================================== */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

:root										{ --container-width: 960px; }
.container									{ max-width: 960px; }

h1 											{ font-size: 40px; line-height: 45px; }
h2 											{ font-size: 35px; line-height: 40px; }
p 											{ font-size: 18px; line-height: 28px; }
.btnLink 									{ font-size: 18px; line-height: 26px; padding: 12px 20px; }

header  									{ padding: 20px 0; }
header .mainHeader .logo 					{ max-width: 350px; }

.banner-section 							{ padding-top: 96px; }
.banner-section .caption .bannerImg 		{ max-width: 500px; }
.banner-section .caption .bannerImg img 	{ max-width: 200px; margin-right: -45px; }
.getOff 									{ bottom: -65px; width: 130px; height: 130px; font-size: 20px; line-height: 20px; }

.smarterWaySec 								{ padding: 30px 0 70px 0; }
.smarterWaySec .leftCol h2 					{ margin-bottom: 30px; }
.smarterWaySec .leftCol ul 					{ margin: 10px 0 25px 0; }

.booksSec 									{ padding: 70px 0; }
.booksSec .booksBox 						{ padding: 40px; margin-bottom: 95px; }
.booksSec .booksBox:nth-child(2) 			{ margin-bottom: 30px; }
.booksSec .booksBox .leftCol .info 			{ margin-bottom: 30px; padding-right: 0px; }
.booksSec .booksBox .rightCol 				{ max-width: 350px; max-height: 350px; margin: 0 auto; }
.booksSec .booksBox .rightCol img 			{ max-width: 80%; }
.booksSec .booksBox .leftCol .info h6 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info h2 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info h3 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info p 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info span 	{ font-size: 18px; line-height: 28px; margin-top: -10px; }

.discountSec .discountBox 					{ background: linear-gradient(90deg, #FFFFFF 45%, rgba(153, 153, 153, 0) 71.41%); }
.discountSec .discountBox::before 			{ width: 80%; }
.discountSec .discountBox .info 			{ width: 50%; }
.discountSec .discountBox .info h3 			{ margin-bottom: 20px; }

.realWorldSec .leftCol 						{ padding: 50px 80px 50px 0; }
.realWorldSec .rightCol .realWorldImg 		{ width: 160px; left: -80px; }
.realWorldSec .leftCol h2 					{ margin-bottom: 20px; }
.realWorldSec .leftCol p 					{ margin-bottom: 20px; }
.realWorldSec .leftCol ul li 				{ font-size: 18px; line-height: 28px; margin-bottom: 15px; padding-left: 35px; }
.realWorldSec .leftCol ul li::before 		{ width: 20px; height: 20px; background-size: cover; }

.howWorks 									{ padding: 70px 0; }
.howWorks .worksBox .title 					{ margin-bottom: 40px; }

footer 										{ padding: 20px 0 120px; }
footer .cta 								{ margin-bottom: 50px; }

}



/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 991px to 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

:root										{ --container-width: 100%; }
.container									{ max-width: 100%; padding: 0 15px; }

h1 											{ font-size: 35px; line-height: 40px; }
h2 											{ font-size: 30px; line-height: 35px; }
h3 											{ font-size: 22px; line-height: 28px; }
h4 											{ font-size: 20px; line-height: 24px; }
p 											{ font-size: 16px; line-height: 26px; }
.btnLink 									{ font-size: 16px; line-height: 20px; padding: 12px 20px; }

header 	 									{ padding: 15px 0; }
header .mainHeader .logo 					{ max-width: 270px; }
header .mainHeader .rightBtn .buyBtn 		{ font-size: 20px; line-height: 24px; margin-right: 20px; }
header .mainHeader .rightBtn .amazonLogo 	{ margin-right: 15px; width: 100px; }
header .mainHeader .rightBtn .btnOr 		{ margin-right: 15px; font-size: 16px; }
header .mainHeader .rightBtn .kindleLogo 	{ width: 70px; }

.banner-section 							{ padding-top: 75px; }
.banner-section .caption .bannerImg 		{ max-width: 600px; }
.banner-section .caption .bannerImg img 	{ max-width: 235px; margin-right: -50px; }
.getOff 									{ bottom: -65px; width: 130px; height: 130px; font-size: 20px; line-height: 20px; }

.marqueeSec 								{ height: 104px; margin-top: -30px; }
.marqueeSec .marquee-container .marquee-text { font-size: 20px; padding: 0 30px }

.smarterWaySec 								{ padding: 30px 0 50px 0; }
.smarterWaySec .leftCol 					{ padding-right: 0; }
.smarterWaySec .leftCol h2 					{ margin-bottom: 30px; }
.smarterWaySec .leftCol h2 br 				{ display: none; }
.smarterWaySec .leftCol ul 					{ gap: 10px; margin: 10px 0 20px 0; }
.smarterWaySec .leftCol ul li h5 			{ padding: 8px 15px; }
.smarterWaySec .leftCol p 					{ margin-bottom: 20px; }

.booksSec 									{ padding: 50px 0; }
.booksSec .booksBox  						{ padding: 30px; margin-bottom: 185px; }
.booksSec .booksBox:nth-child(2) 			{ margin-bottom: 165px; }
.booksSec .booksBox .leftCol .info 			{ padding-right: 0; margin-bottom: 30px; }
.booksSec .booksBox .leftCol .info h6 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info h2 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info h3 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info p 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info span 	{ font-size: 16px; line-height: 26px; margin-top: -10px; }
.booksSec .booksBox .rightCol 				{ max-width: 270px; max-height: 270px; margin: 0 auto; }
.booksSec .booksBox .rightCol img 			{ max-width: 75%; }
.booksSec .booksBox .leftCol .bookBtn.westernoff .btnLink.btn1,
.booksSec .booksBox .leftCol .bookBtn.westernoff .btnLink.btn2 { width: auto; }

.discountSec 								{ margin-bottom: 50px; }
.discountSec .discountBox 					{ background: linear-gradient(90deg, #FFFFFF 50%, rgba(153, 153, 153, 0) 71.41%); padding: 20px 25px; }
.discountSec .discountBox::before 			{ width: 90%; }
.discountSec .discountBox .info 			{ width: 50%; }
.discountSec .discountBox .info h3 			{ margin-bottom: 15px; }

.realWorldSec .leftCol 						{ padding: 30px 55px 30px 0; }
.realWorldSec .rightCol .realWorldImg	  	{ width: 130px; left: -65px; }
.realWorldSec .leftCol h2 					{ margin-bottom: 15px; }
.realWorldSec .leftCol p 					{ margin-bottom: 20px; }
.realWorldSec .leftCol ul li 				{ font-size: 16px; line-height: 26px; margin-bottom: 10px; padding-left: 35px; }
.realWorldSec .leftCol ul li::before 		{ width: 20px; height: 20px; background-size: cover; }

.howWorks 									{ padding: 50px 0; }
.howWorks .worksBox .title h2 				{ margin-bottom: 15px; }
.howWorks .worksBox .title 					{ margin-bottom: 30px; }
.howWorks .worksBox .worksStap .stapBox 	{ margin-bottom: 30px; }

footer 										{ padding: 20px 0 70px; }
footer .cta 								{ margin-bottom: 30px; }

}



/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 767px to 320px */
@media only screen and (max-width: 767px) {

:root										{ --container-width: 100%; }
.container									{ max-width: 740px; padding: 0 15px;}

h1 											{ font-size: 30px; line-height: 35px; }
h2 											{ font-size: 28px; line-height: 35px; }
h3 											{ font-size: 20px; line-height: 26px; }
h4 											{ font-size: 18px; line-height: 22px; }
h6 											{ font-size: 12px; line-height: 16px; }
p 											{ font-size: 16px; line-height: 26px; }
.btnLink 									{ font-size: 16px; line-height: 20px; padding: 10px 15px; }

header 										{ padding: 10px 0; }
header .mainHeader 							{ justify-content: center; }
header .mainHeader .rightBtn  				{ display: none; }
header .mainHeader .logo 					{ max-width: 250px; }

.banner-section 							{ padding-top: 60px; }
.banner-section .caption 					{padding-bottom: 40px;}
.banner-section .caption h1 br 				{ display: none; }
.banner-section .caption .bannerImg img 	{ max-width: 135px; margin-right: -35px; }
.banner-section .caption .bannerImg img:nth-child(2) { margin-top: 4px; }
.banner-section .caption .bannerImg img:nth-child(3) { margin-top: 8px; }
.getOff  									{ display: none; }

.marqueeSec 								{ height: 97px; margin-top: -40px; }
.marqueeSec .marquee-container .marquee-text { font-size: 20px; line-height: 24px; padding: 0 25px; } 

.smarterWaySec 								{ padding: 20px 0 30px 0; }
.smarterWaySec .leftCol  					{ padding: 0; margin-bottom: 30px; }
.smarterWaySec .leftCol h2 					{ margin-bottom: 30px; }
.smarterWaySec .leftCol h2 br 				{ display: none; }
.smarterWaySec .leftCol ul					{ gap: 10px; margin: 10px 0 20px 0; }
.smarterWaySec .leftCol ul li h5 			{ font-size: 14px; line-height: 18px; padding: 6px 10px; }
.smarterWaySec .leftCol p 					{ margin-bottom: 20px; }

.booksSec 									{ padding: 30px 0; }
.booksSec .booksBox 						{ position: static; padding: 25px; margin-bottom: 30px; }
.booksSec .booksBox:nth-child(2) 			{ margin-bottom: 30px; }
.booksSec .booksBox .leftCol 				{ margin-bottom: 30px; }
.booksSec .booksBox .leftCol .info 			{ padding-right: 0; margin-bottom: 30px; }
.booksSec .booksBox .leftCol .info h6 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info h2 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info h3 		{ margin-bottom: 16px; }
.booksSec .booksBox .leftCol .info p 		{ margin-bottom: 15px; }
.booksSec .booksBox .leftCol .info span 	{ font-size: 16px; line-height: 26px; margin-top: -10px; }
.booksSec .booksBox .leftCol .bookBtn 		{ gap: 5px; }
.booksSec .booksBox .rightCol img 			{ max-width: 75%; }
.booksSec .booksBox .leftCol .bookBtn .btnLink,
.booksSec .booksBox .leftCol .bookBtn.westernoff .btnLink.btn1,
.booksSec .booksBox .leftCol .bookBtn.westernoff .btnLink.btn2 { width: 100%; text-align: center; }

.discountSec 								{ margin-bottom: 30px; }
.discountSec .discountBox 					{ padding: 160px 10px 10px 10px; background: unset; }
.discountSec .discountBox .info 			{ width: 100%; }
.discountSec .discountBox::before 			{ width: 100%; background-size: contain; }
.discountSec .discountBox .info h3 			{ margin-bottom: 20px; }

.realWorldSec .leftCol 						{ padding: 30px 0 30px 0; }
.realWorldSec .leftCol h2 					{ margin-bottom: 15px; }
.realWorldSec .leftCol p 					{ margin-bottom: 20px; }
.realWorldSec .leftCol ul li 				{ font-size: 16px; line-height: 20px; margin-bottom: 10px; padding-left: 40px; }
.realWorldSec .leftCol ul li::before 		{ width: 20px; height: 20px; background-size: cover; }
.realWorldSec .rightCol 					{ margin-left: calc(0px - var(--container-padding)); }
.realWorldSec .rightCol .realWorldImg 		{ display: none; }

.howWorks 									{ padding: 30px 0; }
.howWorks .worksBox .title 					{ margin-bottom: 30px; }
.howWorks .worksBox .worksStap::before  	{ display: none; }
.howWorks .worksBox .worksStap .stapBox::before { display: none; }
.howWorks .worksBox .worksStap .stapBox 	{ margin-bottom: 30px; }

footer 										{ padding: 10px 0 30px; }
footer .cta 								{ margin-bottom: 30px; }
footer .cta .ctaBtn 						{ gap: 10px; }

}



/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 575px to 320px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

:root										{ --container-width: 100%; }
.container									{ max-width: 100%; padding: 0 15px; }

}