/*
The Scoop Stylesheet for Articles - Live
Updated: 2022-06-30 17:28
*/

/* NOTES

Constant:
#f7fa00 Yellow used for The Scoop
*/


/************************* For Reference *************************/



/* * * Home Page: Featured/Top Stories
 ***** Style 6 *****/
 
/* * * Articles: Images and/or their captions with alignleft/alignright
* See inc/???.php */
 
 
/************************* Articles: Title, Featured Image, Post Meta *************************/

/* * * Articles: Featured Images for Style 1, Style 2 (full-image), Style 3 (full-width) * * */
	
		@media only screen and (max-width: 500px) {
		
			.page-post.single-style-1 .post-inwrap {margin-top:-10px;}
			.page-post.post-full-image > .post-image, .page-post.post-full-image > .post-video,
				.page-post.post-full-image > .post-audio, .page-post.post-full-image > .post-gallery
				{margin-bottom:10px} /* post-inwrap for Style 2 is in default */
			.page-post.single-style-3 figure.post-image {margin-bottom:30px}
			
		}
	
/* * * Articles: Padding around Share Icons * * */

		@media only screen and (max-width: 500px) {
		
			.page-post .post-single-width:before {top: 30px;}
			.page-post .post-inwrap .social-share ul {margin-top: 40px;}
			
		}
	
/* * * Articles: Boxes of Share Icons * * */

		@media only screen and (max-width: 500px) {
		
			.page-post .post-inwrap .social-share ul li a {
				width: 80px;
				padding: 0 0 0 10px;
			}
			.page-post .post-inwrap .social-share ul li a span {font-size: 12px !important;}
		}


/************************* Articles: Sponsored Content *************************/

/* * Article: Sponsored Content - Box * */

.scoop_desktop_sponsored {}
.scoop_mobile_sponsored {display:none}
    
	/* Sponsored Content Box: Style 2 */

	.thesc_sponsored {
		color: #414042;
		font-size: 14px;
		font-style: italic;
		border: 1px solid #eee;
		margin: -5px 20px 20px 20px;
		padding: 5px 10px;
		float: right;
		width: 40%;
		text-align: center;
		box-shadow: 5px 5px #eee;
		background: white}
	.thesc_sponsored img {
		/* height: 70px; */
		width: auto !important;
		max-height:120px;
		margin: auto;}
	/* .thesc_sponsored p:first-child {padding-top:10px} */
	.thesc_sponsored p:nth-child(2) {padding-top:10px}
	.thesc_sponsored .thesc-iklan-adlabel {display:none}

		/* Slightly different margins for Full-Width post */
		.single-style-3 .thesc_sponsored {
			margin: 15px 0px 20px 20px;
		}


		@media only screen and (max-width: 767px) {
		/* ----------- [767px] *//* ----------- [768px] */
			.scoop_desktop_sponsored {display:none}
			.scoop_mobile_sponsored {display:block}
	
			.thesc_sponsored, .thesc_sponsored .thesc-iklan-target {
				width: 100%;
			}
			.thesc_sponsored {
				margin-bottom: 20px;
/* 				width: 100%; */
				margin: 10px 0px 20px 0px;
				/* max-height: 90px;   */  
			}
	
			.thesc_sponsored p:nth-child(2), .thesc_sponsored > :nth-child(2) {
				/* float: right;
				margin-right: 140px; */
				padding: 15px;
				text-align: left;
				font-size: 15.5px;
				flex-basis: calc(100% - 140px);
			}
				/* ^-- p:nth-child(2) is text in Sponsored Box */
	
			.thesc_sponsored p:nth-child(3), .thesc_sponsored > :nth-child(3) {
				flex-basis: 40%;
				margin: 0 5px;
				/* float: right;
				margin-top: -80px;*/
			}
				/* ^-- p:nth-child(3) is logo (if any) in Sponsored Box */
	
			/*.thesc_sponsored img {
				max-height: 70px;
				width: auto !important;
			}*/
	
			.thesc_sponsored.scoop_mobile_sponsored .thesc-iklan-target {
				display: flex;
				align-items: center;
			}
		
		}
		@media only screen and (max-width: 600px) {
		/* ----------- [600px] */
		
			.thesc_sponsored {max-height: 200px;}
			.thesc_sponsored.scoop_mobile_sponsored {
				display: flex;
				max-height: none;
			}
	
			/* Note: .thesc_sponsored :first-child is the 'Advertisement' label from Adv Ads */
			.thesc_sponsored p:nth-child(2), .thesc_sponsored > :nth-child(2) {
				margin-right: 40%;
				margin-right: 0;
				/*float: none;
				display: inline-flex;
				flex-wrap: wrap;
				flex-direction: column;*/
			}
			.thesc_sponsored p:nth-child(3), .thesc_sponsored > :nth-child(3) {
				/* margin-top: -70px; /*-100px;*/
				/* width: auto; /*40/*70%*/
				float: none;
				/*display: inline-flex;
				align-self: center;
				flex-shrink: 3; /*shrinks 3 times more than other p
				margin-top: 0;
				margin-right: 10px;*/
				margin: 5px 5% 5px auto;
			}
			.thesc_sponsored img {
				max-height: 120px;
			}
	
		}
		@media only screen and (max-width: 500px) {
		/* ----------- [500px] */
	
			.thesc_sponsored.scoop_mobile_sponsored .thesc-iklan-target {flex-direction: column;}
	
			.thesc_sponsored p:nth-child(2), .thesc_sponsored > :nth-child(2) {
				flex-basis: auto;
			}
				/* ^-- p:nth-child(2) is text in Sponsored Box */
	
			.thesc_sponsored p:nth-child(3), .thesc_sponsored > :nth-child(3) {
				max-width: 60%;
				margin: 0 auto 2.5%;
			}
				/* ^-- p:nth-child(3) is logo (if any) in Sponsored Box */
		
		}
		@media only screen and (max-width: 400px) {
		/* ----------- [400px] */

			.thesc_sponsored p:nth-child(3), .thesc_sponsored > :nth-child(3) {
				max-width: 75%;
				/*margin-top: -100px; //130px
				margin: 0 5px;
				flex-shrink: 2; */
			}
			.thesc_sponsored img {
				max-height:initial; /* 120px; */
			}
			
		}
			

/************************* Articles: Post Content *************************/

 
/* * * Articles: Images and/or their captions with alignleft/alignright * * */

		.post-entry .wp-caption.alignright, .post-entry .wp-caption.alignleft,
			.post-entry .wp-caption.aligncenter {
			max-width:100%;
		}
			/* -- max-width 100% added for when a large image is used, aligned 
					left/right/center, and is also exceeding the article width */


		/********** 375px is a specific size **********/
		@media only screen and (max-width: 375px) {

			/* .post-entry .alignright img, .post-entry .alignleft img, .post-entry .aligncenter img {
				width: 100%;
				max-width: 100%;
			} */
				/* It seems unlikely Scoop team would use an image without a caption, so... */
			.post-entry .wp-caption.alignright, .post-entry .wp-caption.alignleft,
				.post-entry .wp-caption.aligncenter {
				width:100%;max-width:100%; /*padding-top:10px;padding-bottom:10px; */
				/* At 375px mobile screen, no point keeping images at small sizes. Resize to 100% of screen
				Btw this is the same at 600px except I defined width of wp-caption first then the img
				elements that might be inside it */
			}
			
		}

/* * * Articles: Embedded YouTube videos, i.e. in iframe * * */
		
		@media only screen and (max-width: 400px) {

			.single-style-1 p iframe, .single-style-2 p iframe,
			.single-style-3 p iframe {
				width: 95%;
				margin-left: 0px;
				margin-right: 0px;
				height: 100%;
			}
		}
		
 
/************************* Posts tagged as 'CuboiArt Cartoons' *************************/

/* * * Cartoons Posts: Article, i.e. Single Post * * */


		/* Note: Over a MINIMUM of 768px */
		@media only screen and (min-width: 768px) {
		
			.single .category-cuboiart .post-image img {
			  width: 650px;
			  margin: auto;
			}

			.single-post .category-cuboiart .post-inwrap .social-share ul,
			.page-post.category-cuboiart .post-inwrap .social-share ul {
				width: 650px;
				margin: 15px auto;
				display: block;
			}
		}

		@media only screen and (max-width: 650px) {
			.page-post.category-cuboiart .post-header .post-title h1 {font-size: 33px;}
		}
	
	
/* * * Cartoons Posts: Row of Thumbnails * * */

.cartoons-cuboi-row	.su-post  {
	display: block;
    max-width: 150px;
    padding: 5px;
    /*display: inline-flex;padding: 10px;*/
}
.cartoons-cuboi-row	.su-post .thumb-caption {
	width:auto;
	text-align: center;
	font-size: 16px;
	padding-top: 5px;
}
.cartoons-cuboi-row	.su-post .post-date {text-align: inherit; font-size: 16px;}
.cartoons-cuboi-row	.su-post .post-date i {display: none;}

		@media only screen and (max-width: 650px) {
			.cartoons-cuboi-row	{
				display: grid;			
				grid-template-columns: auto auto auto; /* 3 autos means 3 cols, each of auto length */
			}
		}

		@media only screen and (max-width: 500px) {
			.cartoons-cuboi-row	{
				grid-template-columns: auto auto;
				grid-gap: 15px 0;
			}
		}

.button-allcartoons {
	background-color: #f7fa00 !important;
    border: none !important;
    border-radius: 0 !important;
}
.button-allcartoons span {
	color: #333 !important;
    font-family: 'balto-bold' !important;
    font-size: 15px !important;
    text-transform: uppercase;
    padding: 5px 15px !important;
}

	/* On the Article i.e. individual Cartoon Posts only */
	.single-post .button-allcartoons-container {text-align:center}
	.single-post .button-allcartoons {margin-top: 25px;}

		
 
/************************* Articles: Advertisements *************************/

		/********** 650px (Under) **********/
		@media only screen and (max-width: 649px) {

			.thesc-iklan-sticky img {
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
		
		}

		/********** 500px **********/
		@media only screen and (max-width: 500px) {

			.thesc-iklan-articles-after-share .thesc-iklan-adlabel {
				padding-bottom: 0;
				padding-top: 20px;
			}
		
		}