/*
The Scoop Stylesheet for Articles - Live
Updated: 2021-03-16 17:34
*/

/* 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 *************************/


		@media only screen and (max-width: 400px) {
	
			/*
			.thesc_sponsored.scoop_mobile_sponsored {display: block;}
			.thesc_sponsored p:nth-child(2), .thesc_sponsored > :nth-child(2) {
			    margin-left: auto;
				margin-right: auto;
			}
				-- test these with two different types of SponCon box formatting */
					
			/*.thesc_sponsored p:first-child {margin-right: 40%;} */
			.thesc_sponsored p:nth-child(3), .thesc_sponsored > :nth-child(3) {
				margin-top: -100px; /*-130px*/
				/* 4 SEP 2020 */
				margin: 0 5px;
				flex-shrink: 2;
			}
			.thesc_sponsored img {
				max-height:initial;
				/* max-height: 120px;
				-- test with two different types of SponCon box formatting */
			}
			
		}
			

/************************* 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 *************************/


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

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