.cvIcon {
     width: 100%;
     max-width: 400px;
     margin: auto;
}

.cvTitle {
     font-family: 'Poppins', sans-serif;
     font-size: 35px;
     font-weight: 700;
     margin: 20px;
     text-transform: uppercase;
     letter-spacing: 7px;
}

table {
     width: 100%;
     text-align: center;
     margin: 10px;
}

td {
     padding-top: 5px;
     padding-bottom: 5px;
}

hr {
     color: #555;
     background-color: #555;
}

.cvToolTip {
     border-bottom: 1px dotted;
     border-bottom-color: #777a81;
}

/* Styles for elements having a data-tooltip attribute - using the star
   selector sucks so you may wish to change this to predefined list of HTML
   tags instead */

*[data-tooltip] {
     /* position:relative the tooltip launcher to enable us to position:absolute
      the generated content */
     position: relative;
     /* Change cursor - you may want to remove this if you don't like the
      effect */
     cursor: help;
}

/* Default ::before & ::after values */

*[data-tooltip]::before, *[data-tooltip]::after {
     pointer-events: none;
     outline: none;
     display: block;
     z-index: 999;
     position: absolute;
     bottom: 100%;
     left: 50%;
     margin: 0;
     padding: 0;
     /* Set-up the animation */
     opacity: 0;
     -webkit-transition: all 0.2s ease-out 0.1s;
     -moz-transition: all 0.2s ease-out 0.1s;
     -o-transition: all 0.2s ease-out 0.1s;
     transition: all 0.2s ease-out 0.1s;
     -webkit-transform: translate(-50%, -1rem);
     -moz-transform: translate(-50%, -1rem);
     -ms-transform: translate(-50%, -1rem);
     -o-transform: translate(-50%, -1rem);
     transform: translate(-50%, -1rem);
}

/* Tooltip arrow */

*[data-tooltip]::before {
     content: "";
     /* Borders are used to create the arrow so no height or width required */
     width: 0;
     height: 0;
     line-height: 0;
     /* This sets the tooptip arrow color */
     border-top: 5px solid #353942;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-bottom: transparent;
     overflow: hidden;
}

/* Tooltip bubble */

*[data-tooltip]::after {
     /* Use the data-tooltip attribute to set the content */
     content: attr(data-tooltip);
     /* Set a default width */
     width: 248px;
     /* Use a margin to create the space required for displaying the tooltip
      arrow */
     margin-bottom: 5px;
     /* Defensive font reset as we inherit */
     letter-spacing: normal;
     text-align: center;
     /* (older) Moz doesn't seem to recognise the following */
     text-decoration: none;
     word-spacing: normal;
     word-wrap: normal;
     word-break: normal;
     line-height: 1.2;
     -webkit-font-smoothing: antialiased;
     font-weight: normal;
     font-family: "Open Sans", "Segoe", "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Verdana, sans-serif;
     /* webkit has problems using rem units on generated content so i'm falling
     back to old school pixels */
     font-size: 13px;
     padding: 6px;
     min-height: 18px;
     color: #fcfcfc;
     /* Default 'dark' theme */
     background-color: #353942;
     -webkit-border-radius: 0.2em;
     -moz-border-radius: 0.2em;
     border-radius: 0.2em;
     -webkit-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
     box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0px;
}

/* :hover & :focus states */

*[data-tooltip]:hover::before, *[data-tooltip]:focus::before, *[data-tooltip]:hover::after, *[data-tooltip]:focus::after {
     /* http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ */
     -webkit-transform: perspective(1px) translate(-50%, 0);
     -moz-transform: perspective(1px) translate(-50%, 0);
     -ms-transform: translate(-50%, 0);
     -o-transform: translate(-50%, 0);
     transform: perspective(1px) translate(-50%, 0);
     /* Reset pointer events or things go all strange... */
     pointer-events: auto;
     /* Set the final opacity */
     opacity: 0.96;
}