/*
CTC Separate Stylesheet
Updated: 2025-04-13 12:37:54
Theme Name: Kimbo Lite Child
Theme URI: https://vivathemes.com/wordpress-theme/kimbo/
Template: kimbo-lite
Author: Viva Themes
Author URI: https://vivathemes.com
Description: Kimbo Lite is a responsive, clean and elegant theme. You can use this theme for your company or business website. It is tested through multiple devices, be it a desktop, notebook, tablet or mobile phone, Kimbo Lite comes with a fluid layout that adapts well across devices. There's a header image in the front page and w idget below that and you can display your latest posts or a static page in front. Add links to your Social media accounts easily with the integrated Social Media menu. Kimbo Lite comes loaded with 28 social media icons to have your visitors connect to you. Three widget ready locations, blog pagination, ability to add your logo and favicon are amongst other features. For even more features check the Pro Version of this theme https://www.vivathemes.com/wordpress-theme/kimbo/
Tags: two-columns,full-width-template,right-sidebar,custom-background,custom-header,footer-widgets,custom-colors,custom-logo,custom-menu,translation-ready,featured-images,threaded-comments,blog,education
Version: 1.2.1744511874
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800;900&display=swap');


body, html {
    height:100%;
	min-height: 100%;
}

body {
	background-color: #f7f7f7 !important;
	font-family: "Roboto", helvetica, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 175%;
	margin:0;
	padding:0;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x: auto;
}

#content {
	max-width: 70%; /* Was originally 70% - Maintains intended layout but allows resizing */
	float: left; /* Removing float might improve responsiveness */
	margin: 20px 0 40px 0;
}

#contentfull {
  width: 100%;/* Was originally 100% - testing with 70% */
  float: left;
  margin-bottom: 40px;/* Was originally 40px - testing with 0px */
}

#contentwrapper {
  width: 80%;
  float: left;
  clear: left;
  margin-left: 10%;
  margin-top: 40px;
}

/* <weight>: Use a value from 100 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */
.roboto-custom {
  font-family: "Roboto", helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

h1 {
	font-size: 46px;
	color: #3f3f3f;
	margin-top: 10px; /* originally 46 */ 
	text-transform: none;
	font-weight: 800;
	font-family: "Roboto", helvetica, sans-serif;
}

h2 {
	font-size: 24px;
	color: #3f3f3f;
	margin:0;
	padding:0;
	margin-top: 24px;
	text-transform: none;
	font-weight: 700;
	font-family: "Roboto", helvetica, sans-serif;
}

#bottomwidgets h2 {
	font-family: "Roboto", 'Lato', arial, helvetica, sans-serif;
	font-weight: 900;
	font-size: 22px;
	color: #fff;
	text-transform: none;
	margin-bottom: 20px;
	margin-top: 0px;
}

h3 {
	font-size: 22px;
	color: #3f3f3f;
	margin:0;
	padding: 0;
	margin-top: 20px;
	text-transform: none;
	font-weight: 700;
	font-family: "Roboto", helvetica, sans-serif;
}

h4 {
	font-size: 20px;
	color: #3f3f3f;
	margin:0;
	padding:0;
	margin-top: 20px;
	text-transform: none;
	font-weight: 700;
	font-family: "Roboto", helvetica, sans-serif;
}

h5 {
	font-size: 16px;
	color: #3f3f3f;
	margin:0;
	padding:0;
	margin-top: 10px;
	text-transform: none;
	font-weight: 900;
	font-family: "Roboto", helvetica, sans-serif;
	font-style: italic;
}

p {
	margin: 8px 0;
	word-wrap: break-word;
    overflow-wrap: break-word;
}
/* links */

a {
	color: #757575;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.center-heading {
	text-align: center;
	padding: 20px 0;
}

a:hover {
	text-decoration: none;
	color: #cc33ff!important;
	color: hotpink!important;
}

/* ===== In-text links - light  ===== */

.in-text-link { 
	color: #5A5A5A; /* Slightly darker than body text */ 
	font-weight: normal; 
	background-color: rgba(255, 255, 0, 0.3); /* Soft yellow tint */ 
	padding: 2px 4px; /* Adds a little breathing room */ 
	border-radius: 3px; /* Softens the edges */ 
	text-decoration: none; /* Removes default underline */ 
	transition: background-color 0.3s ease-in-out; /* Smooth hover effect */ 
}

.in-text-link:hover {
    color: #D9006E !important; /* A richer, deeper pink */
}

/* ===== In-text links - darker BGs ===== */

.in-text-link-2 { 
	color: #5A5A5A; /* Slightly darker than body text */ 
	color: #3f3f3f;
	font-weight: normal; 
	background-color: rgba(255, 255, 0, 0.6); /* harder yellow tint */ 
	padding: 2px 6px; /* Adds a little breathing room */ 
	border-radius: 3px; /* Softens the edges */ 
	text-decoration: none; /* Removes default underline */ 
	transition: background-color 0.3s ease-in-out; /* Smooth hover effect */ 
}

.in-text-link-2:hover {
    color: #D9006E !important; /* A richer, deeper pink */
}

/* ===== END of darker yellow links ===== */

.entry p:first-of-type {
    margin-top: 0;
}

.entry p {
	margin:18px 0;/* Was originally 36px*/
}
	
/* ===== APA style formatting for Reference List ===== */

.reference-list {
	margin-left:40px;
	padding: 20px 0 20px 0;
}

.reference {
    text-indent:-40px;
}

h3.reference {
	padding-bottom:20px;
}

.reference-list::before {
    content: "";
    display: block;/* testing - originally block */
    width: 100%;/* testing - originally 100% */
    height: 1px; /* Thickness of the line */
    background-color: #999999; /* Line color */
    margin-bottom: 40px; /* Space between the line and the div */
	margin-left:-40px; /* to keep left aligned */
}

/* ===== AGLC style formatting for Reference List ===== */

.aglc-list::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px; /* Thickness of the line */
    background-color: #999999; /* Line color */
    margin-bottom: 40px; /* Space between the line and the div */
	margin-left:-40px; /* to keep left aligned */
}

.aglc-list {
  margin: 2em 0;
  width: 100%;
}

.aglc-item {
  margin-bottom: 1em;
  padding-left: 2em;/* Space for the number */
  text-indent: -2em;/* Pull number into margin */
  line-height: 1.5;
}

.aglc-number {
  font-weight: bold;
  margin-right: 0.3em;
}

.back-link {
  margin-left: 0.4em;
  font-size: 0.9em;
  text-decoration: none;
  color: #666;
  white-space: nowrap;
}

.scroll-target {
  scroll-margin-top: 100px;
}

img.back-arrow {/* back-link svg in media library */
  width: 22px;
  height: 22px;
  vertical-align: text-bottom;
}


/* ===== End AGLC style formatting ===== */


hr {
	height: 0; /* Remove default height */
	border: none; /* Remove default border */
	border-top: 1px solid #abb8c3;
}

.bibliography {
	padding:0;
	margin:0;
	margin-bottom: 1lh; /* Uses the existing line-height dynamically */
}

.bibliography p {
	padding:0;
	margin:0;
}

.annotation {
    text-indent: 1.5em; /* Adjust this value for desired indentation */
	margin-top: -18px;
}

h1.page-title, h1.entry-title, h2.entry-title {
   margin: 0;
   padding: 0;
   font-family: "Roboto", helvetica, sans-serif;
   font-weight: 900;
   letter-spacing: -0.05rem; /* tighten spacing */
   color: #3f3f3f;
   text-transform: none;
   font-size: 46px;
   padding-bottom: 0px;
   line-height: 120%;
   word-wrap: break-word;
}

h1.page-title, h2.entry-title {
	text-transform: none;
	margin-bottom: 20px;
}

h2.entry-title a {
	font-family: "Roboto", helvetica, sans-serif;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -0.05rem; /* tighten spacing */
	text-decoration: none;
	border-bottom:none;
	color: #3f3f3f;
	line-height: 120%;
}

h2.entry-title a:hover {
    color: #3f3f3f!important; /* Or any color you prefer */
}
/* /////////////  END  /////////////// */

/* ===== CSS for Israel-Palestine conflict listicle ===== */

/* Base block styling */
.listicle-block {
    padding: 20px;
    margin: 45px 0;
    border-radius: 0px;
    position: relative;
    color: #1a1a1a; /* dark charcoal for readability */
	font-family: "Roboto", helvetica, sans-serif;
}

/* Number circle */
.listicle-block .number-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-weight: 900;
    font-size: 38px; /* larger number */
	display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -30px;
    left: 20px;
    color: #f6f6f6;
}

/* Neutral desert khaki BG (40% translucent) */
.block-tan {
    background-color: rgba(190, 175, 150, 0.4);
    border: 1px solid rgb(165, 140, 100);
}

.block-tan .number-badge {
    background-color: rgb(176, 150, 117);
}

/* Neutral light olive BG (30% translucent) */
.block-olive {
    background-color: rgba(140, 150, 110, 0.3);
    border: 1px solid rgb(140, 150, 110);
}

.block-olive .number-badge {
    background-color: rgb(140, 150, 110);
}

.listicle-block h2 { 
	margin-top: 20px; /* or even 5px if you want it tighter */ 
}

/* ======== END OF WAR LISTICLE CSS ======== */

/* ////////// CSS for 10 HOTTEST WOMEN DIVS ////////// */

/* Base card */
.jlm2025-card {
    padding: 10px 30px 30px 35px;
    margin: 65px 0; /* gap between divs */
    border-radius: 20px;
    position: relative;
    color: #222;
    font-family: "Roboto", Helvetica, sans-serif;
    overflow: visible; /* allows circle to sit half outside */
}

/* Number circle */
.jlm2025-card .jlm2025-number {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    font-weight: 900;
    font-size: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -45px; /* exactly half the circle height = centred on border */
    left: 26px;
    color: #f7f7f7;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 1. Soft Blue */
.jlm2025-blue {
    background-color: rgba(0, 102, 204, 0.1);
    border: 2px solid rgba(0, 102, 204, 0.4);
}
.jlm2025-blue .jlm2025-number {
    background-color: rgb(0, 102, 204);
}

/* 2. Sunflower Yellow */
.jlm2025-yellow {
    background-color: rgba(255, 255, 0, 0.1); /* same pale wash */
    border: 2px solid rgb(255, 204, 0);  /* sunflower border */
}
.jlm2025-yellow .jlm2025-number {
    background-color: rgb(255, 204, 0);  /* sunflower badge */
}

/* 3. Soft Red */
.jlm2025-red {
    background-color: rgba(255, 0, 0, 0.05);
    border: 2px solid rgba(255, 0, 0, 0.3);
}
.jlm2025-red .jlm2025-number {
    background-color: rgb(200, 0, 0);
}

/* 4. Soft Green */
.jlm2025-green {
    background-color: rgba(0, 128, 0, 0.05);
    border: 2px solid rgba(0, 128, 0, 0.3);
}
.jlm2025-green .jlm2025-number {
    background-color: rgb(0, 128, 0);
}

/* 5. Soft Purple */
.jlm2025-purple {
    background-color: rgba(128, 0, 128, 0.05);
    border: 2px solid rgba(128, 0, 128, 0.3);
}
.jlm2025-purple .jlm2025-number {
    background-color: rgb(128, 0, 128);
}

/* Heading spacing */
.jlm2025-card h2,
.jlm2025-card h3 {
    margin-top: 42px;
	margin-bottom: 3px;
}

/* ======== CSS for 10 HOTTEST WOMEN HOVER IMAGES ======== */

.hot-image-container {
    float: left; 
	margin-right: 20px; 
	margin-bottom: 0px!important;
    width: 200px;
    min-height: 200px; /* Ensures full image visibility */
    padding-top: 45px; /* gap above image */
	padding-bottom: 0px!important;
}

.hot-image-wrapper {
    display: inline-block;
    position: relative;
	vertical-align: top; /* removes line space from under images */
    width: 200px;
    height: 200px;
	line-height: 0; /* removes line space from under images */
}

.sil-image, .hot-image {
    width: 100%;
    height: 200px; /* Ensures images display fully */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.6s ease-in-out;
}

.sil-image {
    opacity: 1;
}

.hot-image {
    opacity: 0;
}

.hot-image-wrapper:hover .sil-image {
    opacity: 0;
}

.hot-image-wrapper:hover .hot-image {
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    .sil-image { opacity: 0; }
    .hot-image { opacity: 1; }
}


/* ======== 10 HOTTEST reference list modified from AGLC ref code above ======== */


.hot-ref-list {
    padding-left: 40px; /* adjust this to where the numbers + H3 to sit */
}

.hot-ref-item {
    margin-bottom: 1em;
    padding-left: 0; /* no extra padding */
    text-indent: -2em;/* pulls the number into the left margin */
    line-height: 1.5;
}

.hot-ref-list h3 {
    padding-bottom: 1rem;
    margin-left: -40px;  /* cancels parent padding so H3 aligns with numbers */
}


/* ======== CSS for 10 HOTTEST WOMEN NEXT/PREV BUTTONS ======== */

.nav-btn {
  display: block;
  width: fit-content;
  margin: 0 auto 100px auto; /* centers the button */
}

.nav-btn img {
  width: 280px;
  height: 100px;
  display: block;
  margin: 0;
}

/* Hover swap */
.nav-btn.next:hover img {
  content: url('https://justicelaw.media/wp-content/uploads/2026/04/next-hover.png');
}

.nav-btn.prev:hover img {
  content: url('https://justicelaw.media/wp-content/uploads/2026/04/previous-hover.png');
}

/* ======== END OF BUTTONS CSS ======== */

/* //////////  END OF 10 HOTTEST WOMEN CSS  //////// */


.wp-caption {
	max-width: 100%;
	padding: 10px 10px 15px 10px;
}
	
.wp-caption .wp-caption-text, .gallery-caption, .entry-caption {
	font-size: 90%;
	color: #757575;
	text-align: left;
	padding:0 6px;
	margin: 0px;
	line-height: 1.5;	
}

.postdate {
	font-size: 14px;
	text-transform: uppercase;
	text-decoration:none;
	float: left;
	padding:5px 10px;
	margin-bottom: 25px;
	color: #3f3f3f;
	font-weight: 700;
	background:#eaeaea;
}
	
.post-meta {
	margin: 0 auto; /* Centers it */
	text-align: left; /* Aligns with the text */
	padding: 0px 0; /* Adds space around */
}

.post-date-author {
	font-weight: normal;
	margin:5px 0;
}

img {
	border: none;
	padding:0;
}

img a {
	border:none;
}

img.left {
	float: left;
	border: none;
	padding: 6px 0 0 0;
}

img.right {
	float: right;
	border: none;
	padding: 0 0 0 6px;
}

#fancybox-img {
  padding: 0;
  margin: 0;
  line-height: 0;
  vertical-align: top;
  max-width: none !important;
  max-height: none !important;
}

#fancybox-title {
	font-size: 14px;
	line-height: 1.24;
}

.alignleft {
  float: left;
  margin-right: 15px;
}

#logo a img {/*main website logo */
	float: left;
	margin-right: 10px;
	margin-top: 20px;
	width:261px;/* originally 290px */
	height:90px;/* originally 100px */
}

blockquote {
	border-left:6px solid #ccc;
	margin:30px 0 35px 50px;
	padding:0 0 0 15px ;
	font-style: italic;
}

blockquote sup {
  font-style: normal;
}

.related-post {
    font-style: italic;
    color: #99ccff;
}

.related-post a {
    color: #99ccff;
	text-decoration: none;
}

.related-post a:hover {
    color: hotpink!important;
	text-decoration: none;
}

/* ===== future feature divs on index page ===== */

.sp-pcp-title a:hover {
	color: #ee3032;	
}

.sp-pcp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* key: makes all children equal height */
}

.sp-pcp-col-lg-3 {
  display: flex; /* ensures the post inside stretches */
}

.sp-pcp-post {
  flex: 1; /* fills the column height */
  display: flex;
  flex-direction: column;
}

.sp-pcp-post-thumb-area img {
  max-width: 100% !important;  /* allow image to grow with container */
  width: 100% !important;      /* fill the column */
  height: auto !important;     /* keep aspect ratio */
  display: block;              /* remove inline gaps */
}



cite {
    font-family: "Roboto", helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
}

.highlight {
    background-color: yellow; /* Mimics a classic highlighter */
    padding: 2px; /* Adds slight spacing */
    border-radius: 3px; /* Optional: softens the edges */
}

.highlight2 {
    background-color:#90ee90; /*light green highlighter */
	padding: 2px; /* Adds slight spacing */
    border-radius: 3px; /* Optional: softens the edges */
}

.highlight3 {
	background-color:#ffa07a; /* light orange highlighter */
    padding: 2px; /* Adds slight spacing */
    border-radius: 3px; /* Optional: softens the edges */
}

.belowpost {
  width: 100%;
  float: left;
  height: 50px;
  position: relative;
  margin-top: 20px;
}

code {
	font-family: "Courier New", Courier, monospace;
}


.slider-box {
	width:100%;
	padding: 25px 0 4px 0;
	margin: 3px 0 30px 0;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

/* ===== comment box for comments on posts ===== */

#comment {
	font-size: 11px;
	padding: 12px 16px;
	border: solid 1px #eaeaea;
	float: left;
	clear: left;
	margin-top: 0;
	width: 85%;
	resize: vertical;
	
}

#submit {
	cursor: pointer;
	padding: 12px 16px;
	border:solid 1px #eaeaea;
	float: left;
	clear: left;
	margin: 10px 0 60px 0;
	color: #666;
	text-transform: uppercase;
}

#comments h2 {
	color: #3f3f3f;
	text-transform: none;
}

ol.commentlist li ul.children {
    width: 80%;
    margin: 20px 0 0 60px; /* Adjust this value to increase indentation */
}

/* ===== END: ===== */

/* ===== This is just for the image thumbnails in the Feminist post ===== */

.custom-thumbnail-gallery {
    display: block; /* Prevents flexbox interference */
    width: 300px;
    margin: 30px auto;
 
}
custom-thumbnail-gallery .gallery-item {
    float: left; /* Ensures all thumbnails align left */
    margin-right: 8px; /* Adds consistent spacing */
}

.custom-thumbnail-gallery .gallery-item img {
    height: 110px !important;
    width: auto !important;
}

.custom-thumbnail-gallery .gallery-item img#wp-image-572 {
    width: 85px;
	height: 110px !important;
}
.custom-thumbnail-gallery .gallery-item img#wp-image-574 {
    width: 72px;
	height: 110px !important;
	margin-left:8px!important;
}
.custom-thumbnail-gallery .gallery-item img#wp-image-573 {
    width: 76px;
	height: 110px !important;
}

/* ===== END: ===== */


.mainnav a {
	display: block;
	padding: 0;
	padding-right: 0px;
	font-size: 20px;
	font-weight: 700;
	color: #303030;
	text-decoration: none;
	border-bottom: none;
	text-transform: none;
 	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
 	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	padding-right: 15px;
	letter-spacing: -0.02rem;
}

.mainnav li li a, .mainnav li li a:link, .mainnav li li a:visited {
	text-decoration: none;
	text-transform: none;
}

.mainnav li li {
	display: block;
	padding: 0px;
	margin: 0;
	width: 140px;
	padding-top: 8px;
	padding-bottom: 8px;
}

#contentwrapper-full {
    width: 90%;/* Still testing originally 90% */
    max-width: 900px;
    padding: 100px;
}

#contentwrapper-full #content {
  /* Add your styles for full-width pages */
	width: 70%; /* Example: Make it full width */
	max-width:900px;
	margin: 0 auto;
}

.post ul ul, .post ul ol {
  margin-left: 50px; /* You can adjust this value */
}


@media screen and (max-width: 768px) 
#contentwrapper-full {
        max-width: 100%;
        width: 90%;
        padding: 15px;
        margin: 0 auto;
}

#contentwrapper-full img, 
#contentwrapper-full table {
    max-width: 100%;
    height: auto;
    display: block;
	margin:0 auto;
}

/* Ensure single post content stays responsive */
.single-post .entry {
    max-width: 100%;
    width: auto;
    float: none;
    display: block;
	/*padding:4px;*/
}

.type-page, .post {
  margin:0;
  padding:0;
  width: 100%;
  float: left;
  clear: left;
  margin-bottom: 75px; /* Gap between posts */
}

#bottomwidgets .widgets {
	font-size: 14px;
	line-height: 1.75;
}

#bottomwidgets ul li {	
	padding: 0;
	margin:0 0 12px 0;
	line-height: 1.2;
}

#bottomwidgets ul li a {
	text-decoration:none;
	color: ;
}

#bottomwidgets a {
	text-decoration:none;
	margin: 0; 
	padding: 0;
}

#bottomwidgets ul li a:hover, #bottomwidgets a:hover {
  color: hotpink;
}

sp-pcp-post .sp-pcp-title, .sp-pcp-post .sp-pcp-title a, .sp-pcp-title a:hover {
	text-transform: none;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	text-decoration: none;
	color: #ee3032;!important;
}


/* Contact Form 7 Style */

.wpcf7 {
	margin-top: 10px;
	float: left;
	clear: left;
	width: 100%;
}
.wpcf7 textarea, .wpcf7 input {
	padding: 5px 8px;
	margin-bottom: 15px;
	margin-top: 3px;
	border: solid 2px #eaeaea;
	height: 30px;
	background: none;
}
.wpcf7 textarea {
	height: auto;
	width: 90%;
	resize: vertical; /* Allows height resizing only */
	min-height: 100px; /* Optional: sets a minimum height */
}
.wpcf7 input {
	width: 70%;
}
.wpcf7 input.wpcf7-submit {
	width: auto;
	cursor: pointer;
	border: none;
	border: solid 2px #eaeaea;
	text-transform: uppercase;
	color: #3f3f3f;
	padding: 8px 25px;
	margin-top:40px;
	-webkit-transition: all 0.7s ease;
	-moz-transition:    all 0.7s ease;
	-ms-transition:     all 0.7s ease;
	-o-transition:      all 0.7s ease;
	height: auto;
}
.wpcf7 input.wpcf7-submit:hover {
	color: #999;
	background: #eaeaea;
	border: solid 2px #eaeaea;
}
.wpcf7 p {
	text-align: left;
	font-size: 16px;
	margin: 0;
	margin-bottom: 6px;
	text-transform: none;
}
.wpcf7-form-control.quiz-field {
	display: block;/* keeps qwiz answer box under question */
	max-width:20%;
}