:root {
    --gold-color: #cdb371;
    --gold-shadow-color: #796942;
    --gold-bright-color: #b28f3b;
    --gold-pale-color: #e3ddcc;
    --gold-ligth-color: #f7f7f3;
    --gold-line-color: rgb(205 179 113);
}

@font-face {
	font-family: "Ringbearer";
	src:url("../fonts/RINGM__.TTF");
}
/* Beleren Bold */
@font-face {
    font-family: "Beleren Bold";
    src:
        url("../fonts/typeface-beleren-bold-master/Beleren2016-Bold.woff") format("woff"),
        url("../fonts/typeface-beleren-bold-master/Beleren2016-Bold.ttf") format("truetype"),
        url("../fonts/typeface-beleren-bold-master/Beleren2016-Bold.svg#Beleren2016-Bold") format("svg");
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Beleren SmallCaps Bold */
@font-face {
    font-family: "Beleren SmallCaps Bold";
    src:
        url("../fonts/typeface-beleren-bold-master/Beleren2016SmallCaps-Bold.woff") format("woff"),
        url("../fonts/typeface-beleren-bold-master/Beleren2016SmallCaps-Bold.ttf") format("truetype"),
        url("../fonts/typeface-beleren-bold-master/Beleren2016SmallCaps-Bold.svg#Beleren2016SmallCaps-Bold") format("svg");
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Beleren SmallCaps BoldItalic */
@font-face {
    font-family: "Beleren SmallCaps BoldItalic";
    src:
        url("../fonts/typeface-beleren-bold-master/Beleren2016SmallCaps-BoldItalic.woff") format("woff"),
        url("../fonts/typeface-beleren-bold-master/Beleren2016SmallCaps-BoldItalic.ttf") format("truetype"),
        url("../fonts/typeface-beleren-bold-master/Beleren2016SmallCaps-BoldItalic.svg#Beleren2016SmallCaps-BoldItalic") format("svg");
    font-style: italic;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* Aniron */
@font-face {
  font-family: Aniron;
  src: url("../fonts/anirb.ttf");
}

.aniron{
    font-family: Aniron, Verdana;
}
.ringbearer{
    font-family: 'ringbearer';
}
.beleren-bold{
    font-family: 'Beleren Bold';
}
.beleren-smallcaps-bold{
    font-family: 'Beleren SmallCaps Bold';
}
.beleren-smallcaps-bold-italic{
    font-family: 'Beleren SmallCaps BoldItalic';
}
.text-gold{
    color: var(--gold-color);
}
.text-gold-shadow{
    color: var(--gold-shadow-color);
}
.text-gold-bright{
    color: var(--gold-bright-color);
}
body{
    background: ivory;
    height: 100%;
    margin: 0;
}
body:before{
    content: ' ';
    background:  var(--gold-bright-color);
}
.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}
.box .header {
    flex: 0 1 auto;
}
.box .content {
    flex: 1 1 auto;
}
.box .footer, .box .fixed-header  {
    flex: 0 1 40px;
    text-align:center;
    color: var(--gold-bright-color);
    width: 100%;
    box-shadow: 0px 0px 6px var(--gold-bright-color);
}

/* Language */
.language-menu{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}
.language-flag{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    margin: 5px;
    border: 2px solid silver;
    vertical-align: middle;
    cursor:pointer;
    transition: all 1s;
    opacity:0.7;
}
.language-flag:not(.active):hover{
    border-color: var(--gold-bright-color);
    opacity:1;
}
.language-flag.active{
    width: 30px;
    height: 30px;
    border-color: var(--gold-bright-color);
    pointer-events: none;
    opacity:1;
}
.language-flag.language-es{
    background-image: url("../img/esp-flag.png");
}
.language-flag.language-en{
    background-image: url("../img/eng-flag.png");
}

/* Name Title */
.div-title{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
#h1_name, #h1_name:before, #h1_name span {
  display: block;
  margin: 20px;
  padding: 0;
}
#h1_name{
    color:var(--gold-bright-color);
    text-align: center;
    font-size: 3rem;
}
#h1_name, #h1_name:before, #h1_name:after {
    position: relative;
    font-weight:normal;
}
#h1_name:before {
    /*content: 'nestor josue ramirez guerrero';
    top: 103px;
    transform: scale(1, -1);
    backface-visibility: visible;
    z-index: 1;
    color: var(--gold-shadow-color);*/
}
#h1_name:after {
    /*content: '';
    display: block;
    top: -15px;
    left: 0;
    width: 100%;
    height: 44px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 240, .4) 0%, ivory 50%);
    z-index: 2;*/
}
#h2_title{
    font-size:2.5rem;
    margin-top: -10px;
    text-align: center;
    z-index: 3;
    position: relative;
    color: var(--gold-shadow-color);
    margin-bottom: 5px;
}
#h3_cedula{
    color: var(--gold-shadow-color);
    text-align: center;
    margin-top: 0;
}
/* Profile Picture */
#div_profile_pic_outer{
    border-radius: 50%;
    padding: 5px;
    width: fit-content;
    height: fit-content;
    animation: rotation-counter 10s infinite linear;
    margin: auto;
    background: linear-gradient(#ffffef, #ffffef) padding-box, linear-gradient(to right, var(--gold-bright-color), transparent, transparent, transparent, var(--gold-shadow-color)) border-box;
    border: 2px solid transparent;
    box-shadow: 0px 0px 15px #ffffef;
}
#div_profile_pic_inner{
    border-radius: 50%;
    padding: 5px;
    width: fit-content;
    height: fit-content;
    animation: rotation 5s infinite linear;
    background: linear-gradient(#ffffef, #ffffef) padding-box, linear-gradient(to right, var(--gold-shadow-color), transparent, transparent, transparent, var(--gold-bright-color)) border-box;
    border: 2px solid transparent;
}
#div_profile_pic{
    background-image: url(../img/njrg_profile_picture.png);
    background-size: 102%;
    background-position: center;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 4px solid var(--gold-color);
    animation: rotation-counter 10s infinite linear, change-background 10s infinite linear;
}
.work{
    animation: work 2s infinite linear;
}

.university-logos{
    filter: brightness(100);
    height: 100px;
    display: inline-block;
}
/* */
.container-right{
    width: fit-content;
}
.container-left{
    width: fit-content;
}
.container-right, .container-left{
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
    position: relative;
}
.desktop{
    display:initial;
}
.mobile{
    display: none;
}
a, a:visited{
    color: var(--gold-color);
}
a:-webkit-any-link {
    color: var(--gold-bright-color);
    text-decoration: none;
}
a:hover {
    color: var(--gold-shadow-color);
    text-decoration: none;
}
@media only screen and (max-width: 600px) {
    .container-right, .container-left{
        float: unset;
        width: 100%;
        height: fit-content;
    }
    #h1_name, #h1_name:before, #h1_name:after {
        font-size: 1.5rem;
    }
    #h1_name:before {
        top: 52px;
    }
    #h1_name:after {
        top: -7px;
    }
    #h2_title{
        font-size: 1rem;
    }
    #h3_cedula{
        font-size: 0.9rem;
    }
    #div_profile_pic{
        width: 100px;
        height: 100px;
    }
    .quote{
        font-size: 10px;
    }
    .desktop{
        display: none !important;
    }
    .mobile{
        display: initial;
    }
    .menu{
        margin-top: 25px;
    }
    .footer{
        font-size: 1rem;
        padding: 5px;
        position: fixed;
        bottom: 0;
        background: ivory;
    }
    .fixed-header{
        font-size: 1rem;
        padding: 5px;
        position: fixed;
        top: 0;
        background: ivory;
        z-index:3;
    }
    .tbl-qualities td {
        padding: 5px !important;
    }
    .col-sm-4{
        max-width: 100%  !important;
        -ms-flex: 0 0 100%  !important;
        flex: 0 0 100%  !important;
        flex-basis: 100%  !important;
    }
    .tbl-skills {
        margin: 10px 0px 0px -5px !important;
    }
    .item-header {
        font-size: 12px;   
    }
    .item-header span {
        font-size: xx-small !important;
    }
    .language-menu{
        position: absolute;
        top: 35px;
        right: 5px;
    }
    .language-flag{
        margin: 2px;
    }
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -7.5px;
    margin-left: -7.5px;
}
.col-sm-4{
    max-width: calc(100% / 3);
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 31%;
}
.quote{
    color: var(--gold-color);
    font-style: italic;
    text-align: center;
}
.separator{
    height: 2px;
    border: none;
    background: linear-gradient(
        90deg
        ,
        transparent 0%,
        rgb(205 179 113) 49%,
        transparent 49%,
        transparent 49.5%,
        rgb(205 179 113) 49.5%,
        rgb(205 179 113) 50.5%,
        transparent 50.5%,
        transparent 51%,
        rgb(205 179 113) 51%,
        transparent 100%);
}

.info{
    display:flex;
}
.menu{
    display:inline-block;
    color: var(--gold-color);
    margin:5px 0px;
}
.menu-item{
    display:inline-block;
    text-align: center;
    margin: 5px;
    vertical-align: top;
    cursor:pointer;
    transition: all 0.5s;
}
.menu-item.active, .menu-item:hover{
    color: var(--gold-bright-color);
}
.menu-item.active{
    margin-top: -5px;
    cursor:default;
}

/* Cards */
.card-container{
    display:inline-block;
    width: 90%;
    color: #232323;
}
.card{
    opacity:0;
    visibility:hidden;
    height: 0px;
    transition: opacity 1s, height 1s 1.5s;
}
.card.active{
    opacity:1;
    visibility:visible;
    height: fit-content;
}
.card-header{
    padding: 5px 10px;
    font-size: 20px;
    color: var(--gold-bright-color);
}
.card:not(.active) div {
    display:none;
}
.card-content{
    text-align: left;
    display: contents;
}
.card-content p{
    text-align: left;
}
.card-content table td:first-child {
    color: black;
}

/* Skills */

.star{
	width: 8.34px;
	display: inline-block;
}
.star:last-child{
	margin-right: 0;
}
.star:before{
	content: '\2606';
}
.star.on:before{
	content: '\2605';
}
.star.half:before{
	content: '\2606';
}
.star.half:after{
	content: '\2605';
	color: inherit;
	position: absolute;
	margin-left: -8px;
	width: 4px;
	overflow: hidden;
}
.advanced, .advanced span{
    color: var(--gold-bright-color);
}
.intermediate, .intermediate span{
    color: var(--gold-color);
}
.basic, .basic .span{
    color: var(--gold-shadow-color);
}
.tbl-skills{
    width: 100%;
    margin: 10px 5px;
    border-collapse: collapse;
    border-bottom: 1px groove var(--gold-shadow-color);
    font-size: 14px;
    color: black;
    vertical-align: top;
}
.tbl-skills td{
    border-top: 1px solid var(--gold-shadow-color);
    font-size: 12px;
    white-space: nowrap;
    padding: 3px;
}
.tbl-skills h3{
    margin: 0;
}
.tbl-skills td:last-child{
    text-align:right;
}
.tbl-skills td span{
    font-size: 10px;
}
.tbl-skills th{
    padding: 3px;
    margin-bottom: 0px;
    text-align: left;
    white-space: nowrap;
    color: #232323;
    color: var(--gold-shadow-color);
    background: var(--gold-color);
    border-top-right-radius: 5px;
    text-align: center;
}
.tbl-skills-2 td{
    border-bottom: 1px solid var(--gold-pale-color);
}
.tbl-skills-2 td:nth-child(2){
    border-left: 1px solid var(--gold-pale-color);
}
.tbl-qualities{
    white-space: nowrap;
    text-align:center;
    width:100%;
}
.tbl-qualities td{
    padding:20px;
}
.tbl-qualities td i{
    font-size: 12px;
    color: var(--gold-bright-color);
}

/* Section title */
.section-title {
    height: 2px;
    background: var(--gold-bright-color);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--gold-line-color) 30%, var(--gold-bright-color) 60%, rgba(0, 0, 0, 0) 100%);
    margin: 30px 0px 20px 0px;
    position: relative;
}
.section-title > h2 {
    color: var(--gold-bright-color);
    text-shadow: 0px 0px 0px #333;
    font-family: 'Beleren Bold', Verdana;
    display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -8px;
    width: fit-content;
    padding: 0px 5px;
    background: var(--gold-bright-color);
    font-size: 1.1rem;
}
p {
    font-size: 0.9rem
}
/* Item */
.item {
    border-top: 2px solid var(--gold-bright-color);
}
.item-header {
    padding: 5px;
    font-weight: bold;
    background: linear-gradient(45deg, transparent, var(--gold-bright-color));
}
.item.active .item-header{
    box-shadow: 0 4px 3px -3px var(--gold-bright-color);
    margin-bottom: 5px;
}
.item-header span {
    font-size: small;
    padding-left: 20px;
}
.item-content {
    padding: 0px 15px;
    max-height: 0px;
    overflow-y: hidden;
    font-size: 14px;
    transition: 1s max-height linear, 1s margin-bottom linear
}
.item-content.active, .item-content.open{
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 5px;
}
.sub-item {
    margin: 15px 5px;
}
.sub-item-header {
    font-weight: bold;
    color: var(--gold-shadow-color);
    text-transform: uppercase;
    margin: 10px 0px 5px 0px;
}
.sub-item-title {
    margin-top: 5px;
    color: var(--gold-bright-color);
    font-weight: bold;
}
.sub-item-info {
    margin: 10px;
    position:relative;
}
.sub-item-info strong {
    /*color: var(--gold-bright-color);*/
}

.item-switch{
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 2px;
    color: var(--gold-bright-color);
    border: 2px solid var(--gold-bright-color);
    transition: background-color 0.5s, color 0.5s, border 0.5s;
    width: 15px;
    height: 15px;
    font-size: 13px;
}
.item-switch i{
    margin-left: 2px;
    margin-top: 1px;
    transition: rotate 0.5s;
}
.item-switch:hover i, .item-switch.active i{
    rotate: 90deg !important;
    color:white;
}
.item-switch.active{
    background-color: var(--gold-bright-color);
    color: ivory;
    border: 2px solid transparent;
}
/* Scroll-Bar*/
/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--gold-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: radial-gradient(#121212, var(--gold-color));
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Animations */
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotation-counter {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}
.rotate{
    animation: rotation 2s infinite linear;
}
@keyframes work {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes jump {
    0% {
        margin-top: 0px;
    }
    50% {
        margin-top: 2px;
    }
    100% {
        margin-top: 0px;
    }
}
@keyframes change-background {
    0% {
        background-image: url(../img/njrg_profile_picture.png);
        opacity: 1;
    }
    25% {
        opacity: 0;
        background-image: url(../img/njrg_profile_picture.png);
    }
    26% {
        background-image: url(../img/njrg_logo.png);
    }
    50% {
        opacity: 1;
        background-image: url(../img/njrg_logo.png);
    }
    75% {
        opacity: 0;
        background-image: url(../img/njrg_logo.png);
    }
    76% {
        background-image: url(../img/njrg_profile_picture.png);
    }
    100% {
        background-image: url(../img/njrg_profile_picture.png);
    }
}
@keyframes switch-color {
    0% {
        color: var(--gold-bright-color);
        border: 1px solid var(--gold-bright-color);
    }
    25% {
        color: var(--gold-shadow-color);
        border: 1px solid var(--gold-shadow-color);
    }
    50% {
        color: var(--gold-color);
        border: 1px solid var(--gold-color);
    }
    75% {
        color: var(--gold-shadow-color);
        border: 1px solid var(--gold-shadow-color);
    }
    100% {
        color: var(--gold-bright-color);
        border: 1px solid var(--gold-bright-color);
    }
}

/* PDF */
body.pdf-file:before{
    content:'';
}
body.pdf-file{
    width: 23cm;
    height: 29.7cm;
    background-color: white;
    color: #333;
    font-family: tahoma;
}
.pdf-file #h1_name:before, .pdf-file #h1_name:after{
    content: '';
    top: unset;
    width:0px;
    height:0px;
}
.pdf-file #h1_name{
    margin: 20px;
}
.pdf-file #div_profile_pic,.pdf-file #div_profile_pic_outer,.pdf-file #div_profile_pic_inner{
    animation: none;
}
.pdf-file .header{
    position: relative;
    background-color: var(--gold-ligth-color);
    height: 30mm;
    padding: 5mm;
    box-shadow: -1px 1px 2px var(--gold-shadow-color);
}
.cv-header-picture{
    width: 30mm;
    height: 30mm;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 50%;
}
.cv-header-picture.picture-left{
    left: 10mm;
}
.cv-header-picture.picture-right{
    right: 10mm;
}
.pdf-file #h1_name{
    position: absolute;
    margin: auto;
    top: 10mm;
    left: 40mm;
    font-size: 2rem;
}
.pdf-file #h2_title{
    position: absolute;
    margin: auto;
    top: 20mm;
    left: 40mm;
    font-size: 1.5rem;
    color: var(--gold-shadow-color);
}
.pdf-file #h3_cedula{
    position: absolute;
    margin: auto;
    top: 27mm;
    left: 40mm;
    font-size: 1rem;
    margin-bottom: 3mm;
    color: var(--gold-shadow-color);
}
.pdf-file .header .info-table{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 5mm;
    font-size: 0.7rem;
    font-weight:bold;
}
.info-table i{
    color: var(--gold-bright-color);
}
.info-table td:first-child{
    text-align:center;
}
.profile-pic{
    position: relative;
    height: 50mm;
    margin-top:1mm;
}
.pdf-file #div_cv_profile_pic_outer{
    border-radius: 50%;
    padding: 2px;
    width: fit-content;
    height: fit-content;
    background: var(--gold-pale-color);
    background: linear-gradient(transparent, transparent) padding-box, linear-gradient(to top, var(--gold-bright-color), transparent, var(--gold-bright-color), transparent) border-box;
    border: 2px solid var(--gold-pale-color);
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
.pdf-file #div_cv_profile_pic_inner{
    border-radius: 50%;
    padding: 2px;
    width: fit-content;
    height: fit-content;
    background: var(--gold-pale-color);
    border: 2px solid var(--gold-pale-color);;
}
.pdf-file .tbl-skills{
    margin: 0px;
}
.pdf-file .tbl-skills th{
    background: var(--gold-ligth-color);
    text-align: left;
}
.left-column{
    width: 75mm;
    float: left;
    box-shadow: 1px -1px 2px var(--gold-shadow-color);
    height:25.7cm;
    background: var(--gold-pale-color);
}
.pdf-file .section-title {
    height: 1px;
}
.left-column .section-title > h2 {
    background: var(--gold-pale-color);
}
.right-column .section-title > h2{
    background: white;
}
.card-container .section-title > h2{
    background: ivory;
}
.right-column{
    float: right;
    width: 155mm;
    text-align: justify;
}
.pdf-file #div_profile_pic{
    width: 40mm;
    height: 40mm;
    border-width: 2px;
}
.left-block {
    padding: 0mm 3mm;
}
.right-block{
    padding: 0mm 10mm 0mm 3mm;
}
.left-block h1, .right-block h1{
    margin: 0 0 2mm 0;
    width: 100%;
    text-align: center;
    color: var(--gold-shadow-color);
    font-size:1rem;
}
.left-block p{
    font-size:0.75rem;
}
.left-block td{
    font-size:0.75rem;
}
.fas{
    color: var(--gold-bright-color);
}
.icon-table td:first-child{
    text-align:center;
}
.list-table{
    width: 100%;
    border-collapse: collapse;
}
.list-table td{
    text-align:center;
    border-bottom: 1px solid var(--gold-shadow-color);
    padding: 4px;
}
.list-table.pad-xl td {
    padding: 20px 4px;
}
.list-table td:nth-child(2){
    border-left: 1px solid var(--gold-shadow-color);
}
.list-table tr:last-child td, .no-border-bottom{
    border-bottom: none !important;
}
.list-table th{
    padding: 4px;
    text-align: center;
    background: var(--gold-pale-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--gold-shadow-color);
    border-top: 4px solid ivory;
    font-size: 0.9rem;
}
.pdf-file .list-table th{
    background: var(--gold-ligth-color);
    border-top: 4px solid #e3ddcc;
}
.list-table th i{
    color: var(--gold-bright-color);
}
.cv-job-item i{
    color: var(--gold-bright-color);
}
.cv-job-date{
    font-size:small;
    color: #333;
    float: right;
}
.card-content .cv-job-date{
    float:none;
}
.cv-job-header{
    font-size: 0.9rem;
    /*background: linear-gradient(to right, var(--gold-color) 0%, transparent 90%);
    background: var(--gold-color);*/
    padding:2px;
    font-weight: bold;
    border-top: 2px solid var(--gold-color);
    color: var(--gold-bright-color);
}
.cv-job-header small{
    color: black;
    font-weight: normal;
}
.cv-job-info{
    font-size: 0.85rem;
    padding: 2px;
}
.cv-job-title{
    font-size: smaller;
    font-weight: bold;
}
.cv-job-tech{
    font-size: smaller;
}
.cv-project-header{
    color: var(--gold-bright-color);
    font-weight: bold;
    text-align:center;
}
.cv-project-info {
    padding: 0px 5px;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: var(--gold-color);
    background: linear-gradient(to bottom, transparent 0%, var(--gold-color) 5%,  var(--gold-color) 95%, transparent 100%);
    top: 0;
    bottom: 0;
    left: 4mm;
}
.timeline-container {
    padding: 10px 0px 0px 40px;
    position: relative;
    background-color: inherit;
    width: 94%;
}
.timeline-container::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 40px;
    border: medium solid var(--gold-color);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--gold-color) transparent transparent;
}
.timeline-container::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 4px solid var(--gold-color);
    top: 18px;
    border-radius: 50%;
    z-index: 1;
    left: 4px;
}
.timeline-container.present::after {
    background-color: var(--gold-bright-color);
    border: 4px solid var(--gold-color);
}
.timeline-content {
    padding: 10px 0px 0px 15px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}
.card-content .timeline-content{
    background-color: ivory;
}


.ring-b{
    transform: rotate(45deg);
    margin-left: -11px;
}
.text-success{
    color: #0d930d;
}
.text-danger{
    color: #930d0d;
}
.text-warning{
    color: #0d0d93;
}
.custom-project-icon{
    width: 16px;
    height: 16px;
}
.project-background{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 125px;
    pointer-events: none;
}
.project-background.project-boda{
    background-image: url('https://njguerrero.com/boda-guerrero-matadamas/favicon.ico');
}
.project-background.project-jazmin{
    background-image: url('https://jazmin-matadamas.com/favicon-1.ico');
}
.project-background.project-vorthos{
    background-image: url('https://nessliver.com/Vorthos/favicon.ico');
}