h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif !important; letter-spacing: .9px; } .bg-purple { background: #8392ff !important; } p, div, li { font-family: 'Work Sans', sans-serif !important; letter-spacing: 1px; } .navbar-light .navbar-nav .nav-link { color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: .5px; } .nav-link { display: inline-block; color: #fff; text-decoration: none; } .nav-link::after { content: ''; display: block; width: 0; height: 2px; background: #000; transition: width .3s; } .bootstrap-styles .navbar { padding: 0rem 1rem !important; } .navbar-brand img { height: 70px; } .top-navbar .nav-item { margin-left: 20px; } .btn-primary { background: #3f4c9a !important; } .bg-orange { background: #fbb545 !important; } .social { width: 193px; position: fixed; right: -150px; margin-top: 130px; perspective: 1000px; z-index: 100000; } .social li a { display: block; height: 40px; width: 40px; background: #222; border-bottom: 1px solid #333; font: normal normal normal 16px/20px 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; padding: 10px; text-decoration: none; text-align: center; transition: background .5s ease .300ms } .social li:first-child a:hover { background: #3b5998 } .social li:nth-child(2) a:hover { background: #00acee } .social li:nth-child(3) a:hover { background: red } .social li:nth-child(4) a:hover { background: #dd4b39 } .social li:nth-child(5) a:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .social li:nth-child(6) a:hover { background: #0e76a8 } .social li a span { width: 100px; float: right; text-align: center; background: #222; color: #fff; margin: -25px 45px; padding: 8px; transform-origin: 0; visibility: hidden; opacity: 0; transform: rotateY(45deg); border-radius: 5px; transition: all .5s ease .300ms } .social li span:after { content: ''; display: block; width: 0; height: 0; position: absolute; right: -9px; top: 7px; border-left: 10px solid transparent; border-right: 10px solid #222; border-bottom: 10px solid transparent; border-top: 10px solid transparent; } .social li a:hover span { visibility: visible; opacity: 1; transform: rotateY(0) }