a, button { &:focus { outline: none; } } .navbar { &.normal { min-height: 70px; background: #223741; border-radius: 0px; box-shadow: 0px 1px 3px 1px rgba(46,46,46,0.3), inset rgba(255, 255, 255, 0.2) 0 1px 1px; border: none; z-index: 9999; -webkit-font-smoothing: antialiased; .navbar-header { .navbar-brand { color: #fff; padding: 25px 15px; font-weight: 500; font-size: 23px; } .navbar-toggle { margin-top: 17px; } } .navbar-collapse { @media(min-width: 768px) { text-align: center; } .navbar-nav { @media(min-width: 768px) { float: none; display: inline-block; } > li { float: none; display: inline-block; @media(max-width: 767px) { display: block; } &.active { > a { background: none; color: #fff; } } > a { padding: 25px 20px; color: #d5d5d5; font-weight: 500; z-index: 1001; @include transition(color 0.2s linear); @media(max-width: 767px) { padding: 18px 20px; } &:hover { color: #fff; } } &.open { ul.dropdown-menu { a { @media(max-width: 767px) { color: #fff; padding: 12px 18px 12px 30px; } } } } ul.dropdown-menu { text-align: left; padding: 9px 0; li a { padding: 8px 18px; } } } .button { padding: 8px 18px; font-size: 13px; position: relative; top: 17px; @media(max-width: 767px) { box-shadow: none; background: none; top: 0; margin-bottom: 20px; color: #d5d5d5 !important; font-size: 15px; } } } } } &.hero { margin: 0px; border-radius: 0px; border: 0px; z-index: 999; -webkit-font-smoothing: antialiased; @media (min-width: 768px) { background: transparent; padding-top: 10px; .navbar-nav >.active > a { background: transparent; color: #fff; } } .navbar-brand { color: #fff; font-weight: 500; font-size: 26px; font-family: $lato; } .navbar-nav { > li { &.dropdown > a .caret { border-top-color: #EBEBEB; } > a { color: #fff; font-size: 15px; padding: 15px 20px; font-weight: 500; @include transition(color 0.2s linear); &:hover { color: #fff; } } &.open { > a { color: #fff !important; background-color: rgba(0, 0, 0, 0.8); border-radius: 4px 4px 0 0; } ul.dropdown-menu { a { @media(max-width: 767px) { color: #fff; padding: 12px 18px 12px 30px; } } } } ul.dropdown-menu { text-align: left; background: rgba(0, 0, 0, 0.8); box-shadow: none; padding: 5px 0 8px 0; border-radius: 4px 0 4px 4px; border: 0px; li a { color: #fff; padding: 10px 18px; font-size: 15px; &:hover { color: #e9e9e9; background: none; } } } } } } &.white { min-height: 70px; margin-bottom: 0; border-radius: 0; border: 0; z-index: 999; -webkit-font-smoothing: antialiased; @media (min-width: 768px) { background: #fff; box-shadow: 0px 1px 5px rgba(0, 0, 0, .75); } .container { @media (min-width: 1200px) { width: 1000px; } } .navbar-header { .navbar-brand { color: #333; font-weight: bold; font-size: 30px; font-family: $lato; padding-top: 24px; @media (max-width: 767px) { color: #fff; font-size: 20px; } } .navbar-toggle { margin-top: 17px; } } .navbar-collapse { @media(min-width: 768px) { text-align: center; } .navbar-nav { @media(min-width: 768px) { float: none; display: inline-block; } > li { float: none; display: inline-block; @media(max-width: 767px) { display: block; } &.active { > a { background: none; color: #333; } } > a { padding: 25px 20px; color: #555; z-index: 1001; @include transition(color 0.2s linear); &.signup { border: 1px solid #CED7DF; border-radius: 5px; padding: 8px 11px; font-size: 13px; color: #333; margin-left: 20px; } @media(max-width: 767px) { padding: 18px 20px; color: #fff; } .fa-chevron-down { color: #777; font-size: 8px; margin-left: 2px; position: relative; top: -1px; } &:hover { color: #333; @media(max-width: 767px) { color: #fff; } } } &.open { > a { @media(min-width: 768px) { background: #fff; color: #333; } .caret { border-top-color: #999; border-bottom-color: #999; } } ul.dropdown-menu { a { @media(max-width: 767px) { color: #fff; padding: 12px 18px 12px 30px; } } } } ul.dropdown-menu { text-align: left; border: 0; padding: 0 0 10px; box-shadow: 0 8px 12px rgba(0, 0, 0, 0.175); li a { padding: 8px 18px; } } } } } } } #footer { background: #414B5B; margin-top: 120px; padding-top: 47px; padding-bottom: 35px; -webkit-font-smoothing: antialiased; .copyright { color: #B5C5CF; font-size: 14px; font-weight: 500; @media(max-width: 991px) { margin-bottom: 20px; } @media(max-width: 767px) { text-align: center; } } .menu { @media(max-width: 767px) { text-align: center; margin-top: 40px; } ul { list-style-type: none; padding: 0; li { display: inline-block; &.active { a { color: #fff; } } a { color: #ccc; padding: 15px 17px; font-weight: 500; @include transition(color 0.2s linear); &:hover { color: #fff; text-decoration: none; } @media(max-width: 991px) { padding: 15px 17px 15px 0px; } } } } } .social { text-align: right; @media(max-width: 767px) { text-align: center; margin-top: 40px; } a { border: 0; text-decoration: none; opacity: 1; filter: alpha(opacity=100); margin-left: 15px; position: relative; top: -10px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; &:hover { opacity: 0.7; filter: alpha(opacity=70); } } } } #footer-white { background: #fff; padding-top: 70px; padding-bottom: 30px; -webkit-font-smoothing: antialiased; @media(max-width: 991px) { padding-top: 30px; } .menu { @media(max-width: 767px) { text-align: center; margin-top: 40px; } h3 { margin-top: 0; color: #888; text-transform: uppercase; letter-spacing: 4px; font-size: 14px; font-weight: 600; } ul { list-style-type: none; padding: 0; margin-top: 30px; li { display: block; margin-bottom: 9px; a { color: #89A1C0; display: inline-block; font-weight: 500; font-size: 13px; @include transition(all 0.2s linear); &:hover { color: #000; text-decoration: none; } @media(max-width: 991px) { padding: 0; } } .hiring { font-family: $lato; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; word-spacing: 1.5px; font-size: 11px; margin-left: 4px; padding: 3px 8px; border-radius: 4px; color: #fff; background: #49B7E2; &:hover { color: #fff; background: #0E82AF; } } } } } .newsletter { text-align: right; @media(max-width: 767px) { text-align: center; margin-top: 40px; } .signup { margin-bottom: 40px; p { font-size: 13px; color: #666; width: 90%; float: right; text-align: left; line-height: 20px; @media(max-width: 767px) { float: none; text-align: center; width: 100%; } } form { float: right; width: 90%; position: relative; @media(max-width: 767px) { float: none; width: 100%; } input[type="text"] { font-size: 13px; @include placeholder { font-size: 13px; line-height: 17px; } } input[type="submit"] { border: 0; background: #84B0E2; color: #FFF; border-radius: 3px; padding: 6px 10px; position: absolute; top: 5px; text-shadow: 1px 1px rgba(0, 0, 0, 0.28); right: 5px; font-size: 13px; @include transition(all .2s linear); &:hover { background: #6284AC; } } } } a { border: 0; text-decoration: none; opacity: 1; filter: alpha(opacity=100); margin-left: 15px; position: relative; top: -10px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; &:hover { opacity: 0.7; filter: alpha(opacity=70); } } } .credits { margin-top: 30px; .col-md-12 { padding-top: 20px; font-size: 13px; text-align: center; color: #A1AAB6; } } }