:root {
    --pink-color:#5089a4; /*anywhere the color pink is used*/
    --light-pink-color:#634478; /*used in the category link*/
    --white-text:#ffffff; /*anywhere white text is used*/
    --black-text:#fff; /*anywhere black text is used*/
    --synopsis-background: #333; /*the synopsis background color*/
    --synopsis-text: #333; /*the synopsis text color*/
    --border-color: #333; /*the border that wraps project images - etc */
    --quote-icon: #555555; /*quote icon color*/
    --icon-border: #555; /*external, interal annd streaming links icon borders*/
    --category-title-background: #333; /*this needs to match your post background color*/
}




/*--NO EDITS NEDED BELOW--*/

.career-heading {
    color:var(--pink-color);
    background-color:var(--synopsis-background);
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:15px;
    padding: 5px;
}

hr {
    width:100%;
    border:0px;
    background-color:var(--border-color);
    height:1px;
}

.ep-img img {
    width: 20%;
}
.c-up {
    position:relative;
    top:-10px;
}
.career-extra {
    padding: 5px;
    color: var(--black-text);
    font-size: 12px;
    text-transform: uppercase;
    background-color: var(--border-color);
    opacity:0.7;
}

.career-extra {
    position:relative;
    top:20px;
}

.career-table i, .career-table strong, .career-left i {
    color:var(--pink-color)!important;
}

.career-table {
  border-bottom:1px solid var(--border-color);
  line-height: 30px;
}
.career-table ul {
	list-style:none;
	margin:0px;
	padding:0px;
}
.cbg {
    border-bottom: 1px solid var(--border-color);
}
.cpg tr {
    border-bottom: 1px solid var(--border-color);
}
.cbg td {
    border-right: 1px solid var(--border-color);
}
.cbg td:last-child { 
    border-right: 0px!important;
}
.cnext {
    text-align: right;
    line-height: 30px;
    margin-left: 1px;
    padding: 5px;
}
.cnext i {
    color: var(--white-text);
}
.cnext a:link, .cnext a:active, .cnext a:visited, .cnext a:hover {
    color: var(--white-text);
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.cprevious {
    text-align: left;
    line-height: 30px;
    margin-right: 1px;
    padding: 5px;
}
.cprevious i {
    color: var(--white-text);
}
.cprevious a:link, .cprevious a:active, .cprevious a:visited, .cprevious a:hover {
    color: var(--white-text);
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.image-poster img {
    width: 90%;
    height: auto;
}

.career-left li label {
    text-transform:uppercase;
    color:var(--white-text);
    background-color:var(--pink-color);
    padding-left: 5px;
    padding-right: 5px;
}
.career-left li {
    text-align:center;
}
.career-left li a, .career-left li a:link, .career-left li a:active, .career-left li a:visited {
    width: 10px;
    height: 10px;
    text-align:center;
    padding:4px;
    color:var(--pink-color);
    border: 1px solid var(--icon-border);
}
.career-left li a:hover {
    width: 10px;
    height: 10px;
    text-align:center;
    color:var(--pink-color);
    padding:4px;
    border: 1px solid var(--pink-color);
}
.career-right li label {
    text-transform:uppercase;
    color:var(--white-text);
    background-color:var(--pink-color);
    padding-left: 5px;
    padding-right: 5px;
}
.career-right li a {
    width: 10px;
    height: 10px;
    padding:4px;
    border: 1px solid var(--icon-border);
    font-size: 18px!important;
}

.career-right li a:hover {
    width: 10px;
    height: 10px;
    padding:4px;
    border: 1px solid var(--pink-color);
}

.career-info span {
    text-transform:uppercase;
    color:var(--white-text);
    background-color:var(--pink-color);
    padding-left: 5px;
    padding-right: 5px;
}

.career-info span a {
    color:var(--white-text);
    text-decoration:none;
}

.career-table li {
	border-bottom:1px solid var(--border-color);
	list-style:none;
	padding:5px;
}
.career-left {
  border-right:1px solid var(--border-color);
}
.career-right {
  padding-left:5px;
}
.career-synopsis {
  background-color: var(--synopsis-background);
  padding: 15px;
  border-radius: 10px;
  font-style:italic;
  color:#eee;
}
.career-quotes ul {
	list-style:none;
	margin:0;
	padding:0;
}

.career-quotes li {
	list-style:none;
	padding:5px;
	border-bottom:1px dotted var(--border-color);
}

.career-quotes li:before {
	content:'~';
	font-size:15px;
	color:var(--quote-icon);
}

.category-box {
	border:1px solid var(--border-color);
	padding:15px 5px 5px 5px;
}

.category-title {
	position:relative;
	top:15px;
	color:var(--pink-color);
	font-size:35px;
    font-family: 'Khand', sans-serif;
    font-weight: 300;
}
.category-title span {
	background-color:var(--category-title-background);
	padding: 0px 8px;
    line-height: 35px;
	
}
.quote ul {
	list-style:none;
	margin:0;
	padding:0;
}
.quote li {
	list-style:none;
	margin:0;
	padding:5px;
	border-bottom:1px solid var(--border-color);
}
.quote li:before {
	content:'\f216';
	font-family: "Font Awesome 5 Brands";
	padding:5px;
}
.career-tagline {
    font-family: 'Khand', sans-serif;
    font-weight: 300;
	font-size:31px;
	color:var(--pink-color);
}


.career-img {
    padding: 20px;
}

.career-main {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    justify-self: center;
    column-gap: 3px;
    row-gap: 10px;
    width: 99%;
}


.career-main div {
    padding: 10px;
}


.career-main img {
    width: 100%;
    height: auto;
}


.project-wrap {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    justify-self: center;
    column-gap: 3px;
    row-gap: 10px;
    width: 99%;
}

.project-wrap div {
    padding: 10px;
}


.project-wrap img {
    width: 90%;
    height: auto;
}


/* BELOW IS CLAUDIA'S CODING OVERWRITE - USING HERE TO OVERWRITE ORIGINAL
       I AM USING MY OWN CUSTOM SET THAT I CREATED FOR COLORS           */

.cat-links a {
    font-size: 10px!important;
    text-transform: uppercase!important;
    background: transparent!important;
    padding: 0px 2px!important;
    box-shadow: inset 0 -6px 0 #5089a4;
    color: #eee!important;
}

.cat-links a:hover {
    font-size: 10px!important;
    text-transform: uppercase!important;
    background: transparent!important;
    padding: 0px 2px!important;
    background-color: var(--pink-color)!important;
    box-shadow: inset 0 -6px 0 var(--pink-color);
    color: var(--black-text)!important;
}