.card, .navbar { -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1) } .nav-item, .title { text-transform: uppercase } html { background-color: #fff } body { background-color: transparent } .jumbotron, code { background-color: #fff } .center { text-align: center } .container { margin-bottom: 40px } .nav-item { letter-spacing: 2px; font-size: 14px; font-weight: 600 } .navbar { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1) } .navbar-toggler { border: none } .icon { width: 128px; margin: 16px; -webkit-box-shadow: 0 5px 13px 0 rgba(31, 31, 31, .3); box-shadow: 0 5px 13px 0 rgba(31, 31, 31, .3) } .rounded { border-radius: 15px } .round { border-radius: 50% } .banner, .card { border-radius: 15px } .banner { -webkit-box-shadow: 0 5px 13px 0 rgba(31, 31, 31, .1); box-shadow: 0 5px 13px 0 rgba(31, 31, 31, .1); margin-bottom: 20px; max-width: 600px } .title { letter-spacing: 10px; font-weight: 700 } .subtitle { color: #686868; padding: 12px } .btn, .btn-primary { text-transform: uppercase; font-weight: 600; letter-spacing: 1px; padding-left: 16px; padding-right: 16px } .card { border: none; box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1) } .card-img-top { border-radius: 15px 15px 0 0 } .card-title { text-transform: uppercase; font-size: 15px; color: #373A3C; letter-spacing: 1px; font-weight: 600 } .jumbotron { border-radius: 15px; border: none; -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1) } .alert { -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); border-radius: 100px; border: none; } .badge { -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); border-radius: 100px; border: none; padding: 5px; padding-left: 16px; padding-right: 16px; } .badge-primary { background-image: linear-gradient(19deg, #21D4FD 0, #B721FF 100%); } .badge-secondary { background-image: linear-gradient(62deg, #8EC5FC 0, #E0C3FC 100%); } .badge-success { background-image: linear-gradient(-90deg, #08AEEA 0, #2AF598 100%); } .badge-danger { background-image: linear-gradient(147deg, #ff0844 0%, #ffb199 100%); } .badge-warning { background-image: linear-gradient(147deg, #FFE53B 0, #FF2525 74%); color:#fff; } .badge-info { background-image: linear-gradient(147deg, #00c6fb 0%, #005bea 100%); color:#fff; } .badge-dark { background-image: linear-gradient(-225deg, #537895 0, #09203F 100%); color: #fff; } .btn { border-radius: 25px; border: none; margin-bottom: 5px; } .btn-primary, .btn-success { border-radius: 25px; -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2) } .btn-primary { background-image: linear-gradient(19deg, #21D4FD 0, #B721FF 100%); border: none; box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2) } .btn-success { background-image: -webkit-gradient(linear, left bottom, left top, from(#08AEEA), to(#2AF598)); background-image: linear-gradient(0deg, #08AEEA 0, #2AF598 100%); border: none; box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; padding-left: 16px; padding-right: 16px } .btn-secondary, .btn-warning { border-radius: 25px; -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; padding-left: 16px; padding-right: 16px } .btn-warning { background-image: linear-gradient(147deg, #FFE53B 0, #FF2525 74%); border: none; box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); color: #fff; } .btn-secondary { background-image: linear-gradient(62deg, #8EC5FC 0, #E0C3FC 100%); border: none; box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2) } .btn-danger { background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); border-radius: 25px; border: none; -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; padding-left: 16px; padding-right: 16px } .btn-info { background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2) } .btn-light { -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2) } .btn-dark { background-image: linear-gradient(-225deg, #537895 0, #09203F 100%); -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, .2) } .btn-secondary:active { background-color: #8EC5FC; } .btn:hover { -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, 0.3); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, 0.3); } .btn-link { margin-bottom: none; } .btn-light:hover { background-color: #f8f9fa; } .btn-warning:hover { color: #fff; } .btn-link:hover { -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, 0); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, 0); } .btn:active { -webkit-box-shadow: 0 5px 9px 0 rgba(83, 120, 149, 0); box-shadow: 0 5px 9px 0 rgba(83, 120, 149, 0); } .carousel { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.2); border-radius: 15px; } .carousel-inner { border-radius: 15px; overflow: hidden; /* this breaks the overflow:hidden in Chrome/Opera */ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */ } .dropdown-menu { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.1); border-radius: 15px; } .input-group { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.1); border-radius: 15px; } .input-group-addon { background-image: linear-gradient(-225deg, #537895 0, #09203F 100%); color: #fff; border-radius: 15px; border: none; } .form-control { border-radius: 15px; background-color: #e5e5e5; border: none; box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.1); } .form-group label { text-transform: uppercase; font-weight: bold; color: #333; font-size: 12px } .form-group input { border-radius: 100px; } .list-group { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.06); border-radius: 15px; } .list-group-item:first-child { border-radius: 15px 15px 0 0; } .list-group-item:last-child { border-radius: 0 0 15px 15px; } .page-item { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); } .page-link { text-transform: uppercase; font-weight: 600; } .progress { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1) } .progress-bar { background-image: linear-gradient(19deg, #21D4FD 0, #B721FF 100%); } .alert { box-shadow: 0 5px 13px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 13px 0 rgba(0, 0, 0, .1); font-weight: 500; } .alert-primary { background-image: linear-gradient(19deg, #21D4FD 0, #B721FF 100%); color: #fff; } .alert-secondary { background-image: linear-gradient(62deg, #8EC5FC 0, #E0C3FC 100%); } .alert-success { background-image: linear-gradient(-90deg, #08AEEA 0, #2AF598 100%); } .alert-danger { background-image: linear-gradient(147deg, #ff0844 0%, #ffb199 100%); color: #fff; } .alert-warning { background-image: linear-gradient(147deg, #FFE53B 0, #FF2525 74%); color: #fff; } .alert-info { background-image: linear-gradient(147deg, #00c6fb 0%, #005bea 100%); color:#fff; } .alert-dark { background-image: linear-gradient(-225deg, #537895 0, #09203F 100%); color: #fff; } .fade.show { -webkit-backdrop-filter: blur(5px); } .modal-content { border: none; } .modal-dialog { border-radius: 15px; overflow: hidden; border: none; box-shadow: 0 -3px 13px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .1) } .modal-header { border: none; box-shadow: 0 -3px 13px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .1) } .modal-footer { border: none; box-shadow: 0 3px 0px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .1) } .modal-title { text-transform: uppercase; font-weight: 600; } .breadcrumb { border-radius: 100px; padding-left: 30px; padding-right: 30px; } .breadcrumb-item { text-transform: uppercase; font-weight: 600; } .btn-group .btn { box-shadow: 0 3px 0px 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0); background-image: linear-gradient(0deg); } .btn-group .btn-primary { background-image: linear-gradient(0deg, #21D4FD 0, #B721FF 100%); } .btn-group .btn-secondary { background-image: linear-gradient(0deg, #8EC5FC 0, #E0C3FC 100%); } .btn-group .btn-success { background-image: linear-gradient(0deg, #08AEEA 0, #2AF598 100%); } .btn-group .btn-danger { background-image: linear-gradient(0deg, #ff0844 0%, #ffb199 100%); } .btn-group .btn-warning { background-image: linear-gradient(0deg, #FFE53B 0, #FF2525 74%); color:#fff; } .btn-group .btn-info { background-image: linear-gradient(0deg, #00c6fb 0%, #005bea 100%); color:#fff; } .btn-group .btn-dark { background-image: linear-gradient(0deg, #537895 0, #09203F 100%); color: #fff; }