*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a {
color: #66cc99;
text-decoration: none;
}
.clearfix::after, .clearfix::before {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.bold {
color: #b2dfee;
font-weight: 400;
}
.resume-wrapper {
position: relative;
text-align: center;
height: 100%;
}
.container {
min-height: 600px;
}
.profile {
/*background: #E0E0E0;*/
width: 30%;
float: left;
color: #f5fffa;
}
.profile .name-wrapper {
float: left;
width: 35%;
}
.profile h1 {
font-size: 2.5em;
text-align: left;
font-family: 'Varela Round', sans-serif;
/*color: #4a4e51;*/
text-transform: uppercase;
line-height: 1em;
padding-top: 40px;
}
.profile li {
margin-bottom: 10px;
}
.profile .picture-resume-wrapper {
width: 65%;
display: block;
float: left;
}
.profile .picture-resume {
width: 220px;
height: 220px;
background-size: cover;
border-radius: 50%;
margin-right: 0px;
display: table;
position: relative;
vertical-align: middle;
}
.profile .picture-resume span {
display: table-cell;
vertical-align: middle;
position: relative;
margin: 0 auto;
z-index: 10;
text-align: center;
}
.profile .picture-resume img {
border-radius: 50%;
width: 130px;
}
.profile .contact-info {
margin-top: 35px;
font-weight: 300;
}
.profile .contact-info a {
color: #f5fffa;
text-decoration: none;
}
.profile .list-titles {
float: left;
text-align: left;
font-weight: 600;
width: 40%;
color: #b2dfee;;
}
.profile .list-content {
float: left;
width: 60%;
text-align: left;
font-weight: 300;
}
.profile .contact-presentation {
text-align: left;
font-weight: 300;
margin-top: 35px;
margin-bottom: 100px;
}
.profile svg {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.profile .st0, .profile .st1 {
/*fill: #66cc99;*/
fill: #66ccb3;
}
.experience {
/* background: #3D3F50; */
background: #2224;
width: 70%;
float: left;
position: relative;
color: #9099a0;
text-shadow : 0 0 0;
font-weight: 300;
min-height: 100%;
min-height: 100vh;
}
.experience h3.experience-title {
color: #66cc99;
text-align: left;
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 20px;
font-weight: 400;
}
.experience .company-wrapper {
width: 30%;
float: left;
text-align: left;
padding-right: 5%;
margin-bottom: 60px;
}
.experience .job-wrapper {
width: 70%;
float: left;
text-align: left;
padding-right: 5%;
margin-bottom: 60px;
}
.experience .job-wrapper a {
color: #76c8bf;
text-decoration: none;
}
.experience
.experience-title {
color: white;
text-shadow : 0 0 0;
margin-bottom: 15px;
}
.experience .time {
color: #b2dfee;
}
.experience .location {
color: #B2DE78;
line-height: 3;
}
.section-padding {
padding: 60px 60px 40px 40px;
}
.section-wrapper {
width: 50%;
float: left;
text-align: left;
color: #9099a0;
font-weight: 300;
margin-bottom: 20px;
}
.section-wrapper:nth-child(3) {
padding-right: 8%;
}
.section-wrapper h3.section-title {
color: #66cc99;
text-align: left;
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 20px;
font-weight: 400;
}
.section-wrapper .skill-percentage {
margin-bottom: 10px;
position: relative;
}
.section-wrapper .skill-percentage::after {
content: "";
width: 100%;
height: 6px;
background: #4a4e51;
display: block;
margin-top: 3px;
}
.section-wrapper .skill-percentage::before {
content: "";
height: 6px;
background: #66cc99;
position: absolute;
margin-top: 3px;
bottom: 0;
}
.section-wrapper .skill-percentage:nth-child(1)::before {
width: 90%;
-webkit-animation: skill_1 0.6s ease;
animation: skill_1 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(2)::before {
width: 90%;
-webkit-animation: skill_2 0.6s ease;
animation: skill_2 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(3)::before {
width: 75%;
-webkit-animation: skill_3 0.6s ease;
animation: skill_3 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(4)::before {
width: 60%;
-webkit-animation: skill_4 0.6s ease;
animation: skill_4 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(5)::before {
width: 60%;
-webkit-animation: skill_5 0.6s ease;
animation: skill_5 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(6)::before {
width: 60%;
-webkit-animation: skill_6 0.6s ease;
animation: skill_6 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(7)::before {
width: 50%;
-webkit-animation: skill_6 0.6s ease;
animation: skill_6 0.6s ease;
}
@-webkit-keyframes skill_1 {
from {
width: 0%;
}
to {
width: 90%;
}
}
@keyframes skill_1 {
from {
width: 0%;
}
to {
width: 90%;
}
}
@-webkit-keyframes skill_2 {
from {
width: 0%;
}
to {
width: 90%;
}
}
@keyframes skill_2 {
from {
width: 0%;
}
to {
width: 90%;
}
}
@-webkit-keyframes skill_3 {
from {
width: 0%;
}
to {
width: 75%;
}
}
@keyframes skill_3 {
from {
width: 0%;
}
to {
width: 75%;
}
}
@-webkit-keyframes skill_4 {
from {
width: 0%;
}
to {
width: 60%;
}
}
@keyframes skill_4 {
from {
width: 0%;
}
to {
width: 60%;
}
}
@-webkit-keyframes skill_5 {
from {
width: 0%;
}
to {
width: 70%;
}
}
@keyframes skill_5 {
from {
width: 0%;
}
to {
width: 70%;
}
}
@-webkit-keyframes skill_6 {
from {
width: 0%;
}
to {
width: 70%;
}
}
@keyframes skill_6 {
from {
width: 0%;
}
to {
width: 70%;
}
}
@-webkit-keyframes skill_7 {
from {
width: 0%;
}
to {
width: 70%;
}
}
@keyframes skill_7 {
from {
width: 0%;
}
to {
width: 70%;
}
}