body { font-family: 'Open Sans', sans-serif; line-height: 1.6em; } .container-fluid { background-color: #efecee; } .profile-sidebar { background-color: #454243; word-wrap: break-word; color: #eee; } .profile-sidebar h1 { font-weight: bold; color: #fff; } .profile-sidebar h2 { font-size: 0.9em; font-weight: bold; color: #5BC798; } .profile-sidebar a { color: #eee; } .nav-sidebar { background-color: #d8d4d6; word-wrap: break-word; } .nav-sidebar { padding: 4px; } .nav-sidebar ul { list-style: none; margin: 15px 0 0 0; padding: 0; } .nav-sidebar ul li { margin-bottom: 20px; } .nav-sidebar a { color: #444; font-size: 0.9em; transition: color 0.5s; } .nav-sidebar a:hover, .nav-sidebar a:focus, .nav-sidebar a:active { text-decoration: none; color: #777; } .social-links { list-style: none; margin: 0; padding: 0; } .social-links li { display: inline; } .social-links a .fa-facebook-square { color: #6a6a6a; transition: color 0.3s; } .social-links a .fa-linkedin-square { color: #2d6b88; transition: color 0.3s; } .social-links a .fa-twitter-square { color: #3b91b2; transition: color 0.3s; } .social-links a .fa-google-plus-square { color: #a37873; transition: color 0.3s; } .social-links a:hover .fa-facebook-square, .social-links a:focus .fa-facebook-square, .social-links a:active .fa-facebook-square { color: #3b5998; } .social-links a:hover .fa-linkedin-square, .social-links a:focus .fa-linkedin-square, .social-links a:active .fa-linkedin-square { color: #007bb5; } .social-links a:hover .fa-twitter-square, .social-links a:focus .fa-twitter-square, .social-links a:active .fa-twitter-square { color: #00aced; } .social-links a:hover .fa-google-plus-square, .social-links a:focus .fa-google-plus-square, .social-links a:active .fa-google-plus-square { color: #dd4b39; } hr { border-top: 1px solid #ccc; } .content { padding: 0 62px 80px 62px; min-height: 100vh; } .content h2 { font-weight: bold; font-size: 1.2em; margin-left: -40px; color: #5BC798; text-transform: uppercase; } .content h3 { font-size: 1.1em; color: #147286; font-weight: bold; text-transform: uppercase; } .content .skills-ul { -webkit-column-count: 3; column-count: 3; padding-left: 0; } .fa-star { color: gold; } @media (min-width: 992px) { hr { display: none; } } @media (min-width: 1200px) { .wrapper { position: relative; width: 1170px; } .profile-sidebar { position: fixed; width: 292px; top: 0; bottom: 0; overflow-y: hidden; overflow-x: hidden; } .profile-sidebar .profile-pic { margin-left: -15px; max-width: calc(100% + 30px); } .nav-sidebar { position: fixed; width: 165px; margin-left: 292px; top: 0; bottom: 0; overflow-y: hidden; overflow-x: hidden; } } @media (max-width: 1199px) { .container-fluid { padding: 0; } .profile-sidebar, .nav-sidebar { position: relative; min-height: 100vh; } .container { width: 100%; } } @media (max-width: 767px) { .profile-pic { max-height: 300px; max-width: 300px; border-radius: 50%; } .profile-sidebar { padding: 15px 0; text-align: center; min-height: inherit; } }