@dots: rgba(153, 153, 153, 0.6); #resume2 { font-family: 'Raleway', sans-serif; font-weight: 200; h3 { text-transform: uppercase; padding-top: 0; margin-top: 0; letter-spacing: 5px; font-weight: 400; } .top-row { width: 100%; padding-top: 100px; padding-bottom: 100px; span { width: 100%; display: block; text-align: center; font-weight: normal; &.person-name { text-transform: uppercase; font-size: 50px; letter-spacing: 10px; } &.person-position { letter-spacing: 5px; } } } .left-col { width: 26%; float: left; padding-left: 8%; padding-right: 4%; .person-image { .image-centerer { display: flex; justify-content: center; height: auto; overflow: hidden; img { flex: none; } } } .contact { h3 { text-align: center; margin-top: 20px; } .contact-row { text-align: center; letter-spacing: 2px; margin-bottom: 3px; &:first-of-type { margin-top: 50px; } &.dots { margin-top: 20px; margin-bottom: 15px; font-size: 10px; color: @dots; } a { color: black; } } } } .right-col { width: 50%; float: right; padding-left: 4%; padding-right: 8%; .experience-block { margin-bottom: 10px; .row { &:first-child { font-size: 19px; margin-bottom: 3px; } .company { text-transform: uppercase; font-size: 19px; } } } .education { margin-top: 50px; .education-block { margin-bottom: 10px; .degree { font-size: 19px; text-transform: uppercase; margin-bottom: 3px; } } } .skills-block { margin-top: 50px; position: relative; .skills { margin-bottom: 10px; position: relative; margin-left: auto; margin-right: auto; display: inline-block; margin-bottom: 20px; .skill { width: 80px; height: 80px; border-radius: 50%; position: relative; border: #333 1px solid; margin: 3px; float: left; font-size: 13px; .skill-name { text-align: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } } .skills-other { display: inline-block; width: 100%; margin-top: 20px; } } } } }