GIF89a
/******* Bootstrap Theming ********/ $primary: #FF4800; $secondary: #F2F2F4; $light: #FFFFFF; $dark: #1F1F2E; $font-family-sans-serif: 'Poppins', sans-serif; $body-color: #757575; $headings-color: $dark; $enable-responsive-font-sizes: true; $enable-rounded: false; @import "bootstrap/scss/bootstrap"; /********** Template CSS ************/ .font-weight-black { font-weight: 900 !important; } h1, .font-weight-bolder { font-weight: 800 !important; } h2, h3, .font-weight-bold { font-weight: 700 !important; } h4, h5 .font-weight-semi-bold { font-weight: 600 !important; } h6, .font-weight-medium { font-weight: 500 !important; } p, .font-weight-normal { font-weight: 400 !important; } .font-weight-light { font-weight: 300 !important; } .font-weight-lighter { font-weight: 200 !important; } .font-weight-thin { font-weight: 100 !important; } .btn-social { width: 36px; height: 36px; padding-left: 0; padding-right: 0; text-align: center; border-radius: 36px; } .back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 11; -webkit-animation: action 1s infinite alternate; animation: action 1s infinite alternate; } @-webkit-keyframes action { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } } @keyframes action { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } } .navbar-light .navbar-nav .nav-link { padding: 30px 15px; font-weight: 600; letter-spacing: 1px; color: $dark; outline: none; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active { color: $light; background: $primary; } @media (max-width: 991.98px) { .navbar-light .navbar-nav .nav-link { padding: 10px 15px; } } .jumbotron { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/header.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; } .btn-play { position: relative; display: block; box-sizing: content-box; width: 16px; height: 22px; border-radius: 50%; border: none; outline: none !important; padding: 18px 20px 18px 28px; } .btn-play:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: $primary; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; } .btn-play:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: $primary; border-radius: 50%; transition: all 200ms; } .btn-play:hover:after { background: darken($primary, 10%); } .btn-play span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 16px solid $dark; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } #videoModal .modal-dialog { position: relative; max-width: 800px; margin: 60px auto 0 auto; } #videoModal .modal-body { position: relative; padding: 0px; } #videoModal .close { position: absolute; width: 30px; height: 30px; right: 0px; top: -30px; z-index: 999; font-size: 30px; font-weight: normal; color: #ffffff; background: #000000; opacity: 1; } .team img { position: relative; z-index: 1; } .team .team-text { position: relative; width: 100%; height: 100px; bottom: 0px; left: 0; border-bottom: 5px solid $primary; transition: .5s; } .team:hover .team-text { bottom: 100px; } .team .team-social { position: absolute; width: 100%; height: 100px; bottom: -100px; left: 0; transition: .5s; } .team:hover .team-social { bottom: 0; } .testimonial-carousel .owl-item { opacity: .2; } .testimonial-carousel .owl-item.center { opacity: 1; } .testimonial-carousel .owl-dots { margin-top: 25px; text-align: center; } .testimonial-carousel .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 10px; background: #dddddd; } .testimonial-carousel .owl-dot.active { background: $primary; } .contact-form .help-block ul { margin: 0; padding: 0; list-style-type: none; }