#home-page-content {width: 98%; max-width: 1222px; margin: 0 auto;}

#content-data h2 {font:700 40px/60px 'Jost', sans-serif; text-transform:uppercase; color:#000; text-align:center;}

#content-data #home-page-content hr {border:0; height:1px; background:#aaa; margin:20px 0 20px 0;}




/* change to shop-by */


#you-may-like-flex-box { max-width:1222px; margin:0 auto; justify-content: center;}
#you-may-like-flex-box hr {border:0; height:1px; background:#aaa; margin:30px 0 60px 0;}

#you-may-like-flex {width:98%; max-width:1200px; padding: 10px 0;margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items: center; }
#you-may-like-flex h4 {padding:0px 0 0px 0; font:700 24px/26px 'Jost', sans-serif; color:#000;}

.you-may-like {width:23%;}
.you-may-like img {display:block; width:100%; margin-bottom:20px; background:#000; filter: brightness(100%); transition:0.5s;}
.you-may-like img:hover {filter: brightness(100%);}


.view-all {font-size: 24px !important;}

#content-data p.cs-price {font:700 28px/25px 'playtime_with_hot_toddiesRg', sans-serif; margin-top: 10px; }
#content-data p.cs-price sup	{ font-size: 16px; }

@media only screen and (max-width: 800px) {
	.you-may-like {width:45%; margin-bottom:20px;}
}

@media only screen and (max-width: 415px) {
#you-may-like-flex h4 {font:700 20px/22px 'Jost', sans-serif;}
.view-all {font-size: 20px !important;}
}

@media only screen and (max-width: 360px) {
	.you-may-like {width:100%; margin-bottom:20px;}
}


#content-data #top-articles-box {width:98%; max-width:1222px; margin:0 auto; justify-content: center;}

#content-data #top-articles-box hr {border:0; height:1px; background:#aaa; margin:20px 0 20px 0;}

#content-data #top-articles {display:flex; flex-wrap:wrap; justify-content: space-between; margin:0px 0; width:100%;}
#content-data #top-articles div.box {width:15%; margin-bottom:20px;}
#content-data #top-articles div img {display:block; width:100%;}

#content-data #top-articles h5 {font:700 18px/25px 'Jost', sans-serif; text-transform:uppercase; color:#000; padding-top:15px; margin:0;}
#content-data #top-articles p.article-title {font: 20px/25px 'playtime_with_hot_toddiesRg', sans-serif; margin:0; padding:5px 0;}




@media only screen and (max-width: 800px) {
	#content-data #top-articles div.box {width:30%;}
	
	

}
@media only screen and (max-width: 480px) {
	#content-data #top-articles div.box {width:46%; }
	
}


.parent {width:100%;
		display:grid;
		grid-template-columns:repeat(4, 1fr);
		grid-template-rows:repeat(2, 1fr);
		grid-column-gap:1.2vw;
		grid-row-gap:1.2vw;
		}
		.div1 {grid-area:1/1/3/3; overflow:hidden; position:relative;}
		.div1 div {width:100%; height:100%; background:url("../assets/images-extras/main-left.jpg"); background-size:cover; background-position:center; transition:1s;}
		.div1 div img {width:100%;}
		.div2 {grid-area:1/3/2/4; overflow:hidden; position:relative;}
		.div2 div {width:100%; height:100%; background:url("../assets/images-extras/main-top-left.jpg"); background-size:cover; background-position:center; transition:1s;}
		.div3 {grid-area:1/4/2/5; overflow:hidden; position:relative;}
		.div3 div {width:100%; height:100%; background:url("../assets/images-extras/main-top-right.jpg"); background-size:cover; background-position:center; transition:1s;}
		.div4 {grid-area:2/3/3/5; overflow:hidden; position:relative;}
		.div4 div {width:100%; height:100%; background:url("../assets/images-extras/main-right.jpg"); background-size:cover; background-position:center; transition:1s;}
		
		.div1:hover div {transform:scale(1.1);}
		.div2:hover div {transform:scale(1.1);}
		.div3:hover div {transform:scale(1.1);}
		.div4:hover div {transform:scale(1.1);}


@media only screen and (max-width: 700px) {
.parent {width:100%;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-template-rows:repeat(4, 1fr);
		grid-column-gap:1.5vw;
		grid-row-gap:1.5vw;
		}
		.div1 {grid-area:1/1/3/3;}
		.div2 {grid-area:3/1/4/2;}
		.div3 {grid-area:3/2/4/3;}
		.div4 {grid-area:4/1/5/3;}

}


#content-data .parent div h1 {position:absolute; bottom:10px; left:10px; color:#fff; text-align:left; font-size:clamp(20px, 2vw, 25px); padding:0; margin:0; line-height:3vw; text-transform: none; font-weight: 600; }

#image-wide-left {width:100%; height:500px; display:flex; background:url("../assets/images-extras/main-image-left.jpg"); background-size:cover; background-position:center; align-items:center; justify-content:flex-start;}
#image-wide-left .left-content {width:75%; max-width:500px; margin-left:10%; padding: 10px; background-color: rgba(0, 0, 0, 0.3);  }
#image-wide-left .left-content h1 {font-size:clamp(20px, 3vw, 30px); padding:0; margin:0; line-height:clamp(30px, 4vw, 40px); font-weight:600; text-align:left; color:#fff;}
#image-wide-left .left-content p {font-size:clamp(18px, 2vw, 20px); padding:0; margin:0; line-height:clamp(15px, 3vw, 25px); font-weight:300; text-align:left; color:#fff;}
#image-wide-left .left-content a {display:inline-block; font-size:clamp(15px, 3vw, 20px); padding:1vw 2vw; border-radius:0.5vw; margin:20px 0; line-height:clamp(12px, 1.5vw, 15px); font-weight:600; font-family:'Jost', sans-serif; text-align:left; color:#000; text-decoration:none; background:#f6c347; position:relative; overflow:hidden;}
#image-wide-left .left-content a span {display:block; width:100%; height:100%; position:absolute; left:-100%; top:0; transition:0.2s; background:#0002; border-radius:0.5vw;}
#image-wide-left .left-content a:hover span {left:0;}


#image-wide-center {width:100%; height:500px; display:flex; background:url("../assets/images-extras/main-image-left.jpg"); background-size:cover; background-position:center; align-items:center; justify-content:flex-start;}
#image-wide-center .center-content {width:75%; max-width:500px; margin:0 auto; text-align:center;}
#image-wide-center .center-content h1 {font-size:clamp(20px, 3vw, 30px); padding:0; margin:0; line-height:clamp(20px, 4vw, 40px); font-weight:600; color:#fff;}
#image-wide-center .center-content p {font-size:clamp(15px, 2vw, 20px); padding:0; margin:0; line-height:clamp(15px, 3vw, 25px); font-weight:300; color:#fff;}
#image-wide-center .center-content a {display:inline-block; font-size:clamp(15px, 3vw, 20px); padding:1vw 2vw; border-radius:0.5vw; margin:20px 0; line-height:clamp(12px, 1.5vw, 15px); font-weight:600; font-family:'Jost', sans-serif; text-align:left; color:#000; text-decoration:none; background:#f6c347; position:relative; overflow:hidden;}
#image-wide-center .center-content a span {display:block; width:100%; height:100%; position:absolute; left:-100%; top:0; transition:0.2s; background:#0002; border-radius:0.5vw;}
#image-wide-center .center-content a:hover span {left:0;}




.service-flex { display:flex; flex-wrap:wrap; justify-content: space-between; margin-top:40px; }
.service-box { width:24%; margin-bottom: 20px; display: flex; padding:0px 5px 0 0; }
.service-text { width: 100%; padding:0 0 0 0px; text-align:left;   }
.service-text h5 { font-family: 'Jost', Verdana, Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px !important; line-height: 18px !important; color: #454545; margin:0 0 5px; text-transform:uppercase; }
.service-text p { font-family: 'Jost', Verdana, Arial, Helvetica, sans-serif !important; font-weight: 400 !important; font-size: 14px !important; line-height: 18px !important; color: #454545; margin:0; }
.service-badge-img { width: 50px; padding-top:5px; }
.service-badge-img img { width:35px; }



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

	.service-box {width:48%;}

}
@media only screen and (max-width: 600px) {
		.service-box {width:100%;}
	
}


@media only screen and (max-width: 415px) {
.service-text h5 { font-size: 14px !important; line-height: 18px !important; }
.service-text p { font-size: 12px !important; line-height: 18px !important;  }
	
}