.logo { float: left; padding-top: 20px; padding-bottom: 20px; margin-right: 20px; text-decoration: none; } .logo img { max-width: 80px; } .bars { float: right; text-decoration: none; display: block; padding-top: 5px; } .bars span { color: #000; font-size: 20px; position: relative; display: inline-block; width: 20px; height: 50px; } .bars span:before { position: absolute; font-family: 'unicons-line'; content: "\ebae"; font-size: 20px; left: 50%; top: 50%; color: white; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .bars.active span:before { font-family: 'unicons-line'; content: "\e9b8"; color: white; } @media (min-width: 960px) { .bars { display: none; } } .site-container-fluid { max-width: 100%; margin: 0 auto; padding-left: 15px; padding-right: 15px; } .dribbble-navbar-menu { padding: 10px 0; background: #fff; float: left; width: 100%; clear: both; } .dribbble-navbar-menu .nav { display: none; } @media (min-width: 960px) { .dribbble-navbar-menu .nav { display: block; } } .dribbble-navbar-menu .nav li { display: inline-block; position: relative; } .dribbble-navbar-menu .nav li > a { color: rgba(255, 255, 255, 0.5); font-size: 15px !important; padding: 20px 15px; display: inline-block; font-weight: 600; } .dribbble-navbar-menu .nav li > a:hover { color: #000 !important; } .dribbble-navbar-menu .nav li a { text-decoration: none; -webkit-transition: .3s all ease; transition: .3s all ease; } .dribbble-navbar-menu .nav li a .badge { position: relative; top: -2px; font-weight: bold; margin-left: 10px; display: inline-block; padding: 4px; border-radius: 4px; background-color: #B60017; color: #fff; font-size: 11px; letter-spacing: .1rem; font-family: sans-serif; } .dribbble-navbar-menu .nav li .site-nav-dropdown { z-index: 999; -webkit-box-shadow: 0 -1px 50px -5px rgba(0, 0, 0, 0.1); box-shadow: 0 -1px 50px -5px rgba(0, 0, 0, 0.1); background-color: #fff; position: absolute; width: 430px; max-width: 430px; padding: 0; border-radius: 15px; top: 100%; left: 10px; opacity: 0; visibility: hidden; -webkit-transition: 0.2s 0s; transition: 0.2s 0s; overflow: hidden; } .dribbble-navbar-menu .nav li .site-nav-dropdown .divider { height: 1px; background-color: rgba(0, 0, 0, 0.05); width: 100%; margin-bottom: 30px; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav { width: 630px; max-width: 630px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .lg-nav { -webkit-box-flex: 0; -ms-flex: 0 0 420px; flex: 0 0 420px; width: 420px; max-width: 420px; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .side-nav { background: #f8f8f8; padding: 30px; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .side-nav h3 { font-size: 14px; margin-bottom: 10px; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .side-nav ul { padding: 0; margin: 0; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .side-nav ul li { display: block; margin: 0; padding: 0; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .side-nav ul li a { padding: 7px 0; font-size: 14px; color: rgba(0, 0, 0, 0.5); font-weight: 400; } .dribbble-navbar-menu .nav li .site-nav-dropdown.with-side-nav .side-nav ul li a:hover { color: rgba(0, 0, 0, 0.8) !important; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav { padding-top: 30px; padding-bottom: 30px; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; margin-bottom: 25px; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item:last-child { margin-bottom: 0; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item .arrow { position: absolute; right: 40px; top: 4px; opacity: 0; visibility: hidden; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item .arrow:before { font-size: 25px; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item .icon { -webkit-box-flex: 0; -ms-flex: 0 0 35px; flex: 0 0 35px; margin-right: 20px; height: 35px; line-height: 35px; position: relative; border-radius: 7px; -webkit-transition: .3s all ease; transition: .3s all ease; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item .icon .uil { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_1 .arrow:before { color: #744f8d; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_1 .icon { background: rgba(0, 0, 0, 0.04); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_1 .icon .uil:before { color: #744f8d; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_1:hover .icon { background: rgba(116, 79, 141, 0.1); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_2 .arrow:before { color: #ea4d6d; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_2 .icon { background: rgba(0, 0, 0, 0.04); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_2 .icon .uil:before { color: #ea4d6d; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_2:hover .icon { background: rgba(234, 77, 109, 0.1); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_3 .arrow:before { color: #72c6bc; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_3 .icon { background: rgba(0, 0, 0, 0.04); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_3 .icon .uil:before { color: #72c6bc; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_3:hover .icon { background: rgba(114, 198, 188, 0.1); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_4 .arrow:before { color: #fac655; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_4 .icon { background: rgba(0, 0, 0, 0.04); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_4 .icon .uil:before { color: #fac655; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item.color_4:hover .icon { background: rgba(250, 198, 85, 0.1); } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav .item:hover .arrow { right: 30px; opacity: 1; visibility: visible; -webkit-transition: .3s all ease; transition: .3s all ease; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav a { padding-left: 30px; padding-right: 30px; display: inline-block; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav a .title, .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav a p { color: #5c5c5c; margin-bottom: 5px; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav a .title { color: #000; line-height: 1; font-size: 15px; font-weight: 600; } .dribbble-navbar-menu .nav li .site-nav-dropdown > .lg-nav a p { font-size: 12px; } .dribbble-navbar-menu .nav li:hover > a, .dribbble-navbar-menu .nav li:focus > a { color: #000; } .dribbble-navbar-menu .nav li > a:hover { color: white !important; } .dribbble-navbar-menu .nav li:hover > .site-nav-dropdown, .dribbble-navbar-menu .nav li:focus > .site-nav-dropdown { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 1; visibility: visible; } .mobile-nav-wrap { z-index: 999; position: absolute; height: calc(100vh - 80px); margin-top: 100px; background: #19191a; width: 100%; overflow-y: scroll; padding-left: 15px; padding-right: 15px; border-top: 1px solid rgba(0, 0, 0, 0.07); display: none; } .mobile-nav-wrap.active { display: block; } .mobile-nav-wrap li { padding: 0; margin: 0; list-style: none; display: block; padding-left: 10px; } .mobile-nav-wrap li a { text-decoration: none; color: rgb(243 244 244); padding: 10px 0; display: block; position: relative; } .mobile-nav-wrap li a:hover { color: #ea4d6d; } .mobile-nav-wrap li.has-children { position: relative; } .mobile-nav-wrap li.has-children .arrow-collapse { position: absolute; right: 0; z-index: 2; width: 15px; height: 30px; top: 5px; cursor: pointer; -webkit-transition: .15s all ease; transition: .15s all ease; } .mobile-nav-wrap li.has-children .arrow-collapse:after { position: absolute; font-family: 'unicons-line'; content: "\eb3a"; font-size: 20px; color: white; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mobile-nav-wrap li.has-children .arrow-collapse.active { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .mobile-nav-wrap li .site-nav-dropdown { display: none; } .mobile-nav-wrap li .site-nav-dropdown .lg-nav .arrow, .mobile-nav-wrap li .site-nav-dropdown .lg-nav .icon, .mobile-nav-wrap li .site-nav-dropdown .lg-nav .menu-text p { display: none; } .mobile-nav-wrap li .site-nav-dropdown .lg-nav .menu-text { padding-left: 20px; } .mobile-nav-wrap li .site-nav-dropdown .lg-nav > a { font-size: 14px; } .mobile-nav-wrap li .site-nav-dropdown .lg-nav > a:after { display: none; } .mobile-nav-wrap li .site-nav-dropdown .side-nav, .mobile-nav-wrap li .site-nav-dropdown .lg-nav { display: none; } .mobile-nav-wrap li .site-nav-dropdown.show { display: block; } .mobile-nav-wrap li .site-nav-dropdown.show .lg-nav { display: block; } .description { left: 50%; top: 50%; position: absolute; max-width: 500px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .description h1 { margin-bottom: 30px; } /*# sourceMappingURL=style.css.map */