.experience-container { display: flex; flex-direction: column; transition: all .3s ease 0s; } .experience-main { display: flex; border-radius: 0.4rem; box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); background-color: var(--color-background); height: 22rem; margin-left: 2.5rem; margin-right: 2.5rem; z-index: 1; transition: all .3s ease 0s; } .experience-img-container{ display: flex; margin: 1.5rem; justify-content: center; align-items: center; } .experience-img { max-height: 15rem; min-width: 20rem; max-width: 25rem; } .experience-text-container { margin: 1.5rem; width: 25rem; } .experience-title { color: var(--color-text); font-family: 'Gabarito', sans-serif; font-weight: 600; font-size: 2rem; } .experience-subtitle-container { display: flex; flex-direction: row; align-items: center; } .experience-aftericon { margin-left: 0.5rem; } .experience-subtitle { color: var(--color-text); font-family: 'Gabarito', sans-serif; font-weight: 500; font-size: 1.5rem; margin-top: 0.75rem; margin-bottom: 0.75rem; text-align:justify; text-justify: auto; } .experience-unactive { scale: 0.9; margin-left: 2.25rem !important; margin-right: 2.25rem !important; box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important; } .experience-time { margin-top: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .experience-bubble { z-index: 2; width: 5rem; height: 5rem; background-color: var(--color-special); box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2); border-radius: 50%; transition: all .3s ease 0s; display: flex; justify-content: center; align-items: center; } .experience-date { color: var(--color-special); font-weight: 700; } .experience-string { z-index: -1; position: absolute; height: 3rem; background-color: var(--color-special); opacity: 0.5; transition: all .3s ease 0s; }