// Fonts
$font-monsterrat: 'Montserrat', arial, sans-serif;
$font-roboto: 'Roboto', arial, sans-serif;
// Overrides
$grid-gutter-width: 40px !default;
$border-radius-base: 4px !default;
$padding-base-vertical: 14px !default;
$brand-primary: #FBB040 !default;
$brand-white: #fff;
$brand-black: #000;
$brand-darker: #444;
$brand-gray: #ccc;
$brand-lighter: #e9e9e9;
$brand-body-color: #818892;
$brand-selection-color: #f9f6f0;
$brand-overlay-color: #000;
$input-border-focus: $brand-primary !default;
$form-group-margin-bottom: 30px !default;
$navbar-height: 60px !default;
// Mixin
@mixin transition($transition) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
-ms-transition: $transition;
transition: $transition;
}
@mixin inline-block() {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot?srf3rx');
src:url('../fonts/icomoon/icomoon.eot?srf3rx#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.ttf?srf3rx') format('truetype'),
url('../fonts/icomoon/icomoon.woff?srf3rx') format('woff'),
url('../fonts/icomoon/icomoon.svg?srf3rx#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
@mixin icomoon() {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Import Bootstrap
@import 'bootstrap';
/* Template Style =========== */
// Template Base
body {
font-family: $font-roboto;
font-weight: 300;
font-size: 15px;
line-height: 26px;
color: $brand-body-color;
}
a {
@include transition(.5s);
&:hover, &:active, &:focus {
outline: none;
}
}
p {
margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
color: $brand-black;
font-family: $font-monsterrat;
}
::-webkit-selection {
color: $brand-body-color;
background: $brand-selection-color;
}
::-moz-selection {
color: $brand-body-color;
background: $brand-selection-color;
}
::selection {
color: $brand-body-color;
background: $brand-selection-color;
}
// Template Layout
#fh5co-header {
float: left;
width: 100%;
position :relative;
position: absolute;
z-index: 99;
top: 0;
> .navbar {
@include border-radius(0px);
padding-left: 40px;
padding-right: 40px;
margin-bottom: 0;
background: $brand-white;
-webkit-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
-ms-box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
box-shadow: 0 0 9px 0 rgba(0,0,0,.1);
font-size: 13px;
border: transparent;
@media screen and (max-width: $screen-xs) {
padding-left: 0px;
padding-right: 0px;
}
li {
a {
text-transform: uppercase;
color: $brand-black;
font-weight: normal;
font-family: $font-monsterrat;
> span {
.border {
display: block;
height: 3px;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
&:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $brand-primary;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
}
}
&:hover, &:focus {
outline: none;
> span {
outline: none;
.border {
&:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
}
}
}
&.active {
a {
background: transparent;
> span {
.border {
background: $brand-primary;
}
}
}
}
}
}
.navbar-brand {
font-weight: bold;
// text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
font-family: $font-monsterrat;
color: $brand-black;
&:hover {
color: $brand-gray;
}
}
}
#fh5co-hero, .fh5co-bg-section {
color: $brand-white;
// background: $brand-primary;
background-color: $brand-lighter;
background-size: cover;
background-position: center center;
margin-top: 0px;
z-index: 10;
position: relative;
.fh5co-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $brand-overlay-color;
opacity: 1;
z-index: 11;
}
}
#fh5co-hero, .fh5co-hero-wrap, .fh5co-bg-section {
height: 700px;
@media screen and (max-width: $screen-sm) {
height: inherit;
padding: 3em 0;
}
}
#fh5co-hero, .fh5co-bg-section {
.fh5co-hero-wrap {
display: table;
width: 100%;
z-index: 12;
position: relative;
.fh5co-hero-intro {
display: table-cell;
vertical-align: middle;
.fh5co-lead, .fh5co-sub-lead {
color: $brand-white;
margin: 0;
padding: 0;
line-height: 1.5;
}
.fh5co-lead {
margin-bottom: 30px;
}
}
}
}
.fh5co-bg-section, .fh5co-hero-wrap{
height: 400px;
@media screen and (max-width: $screen-sm) {
height: inherit;
padding: 3em 0;
}
}
.fh5co-bg-section {
.fh5co-overlay {
background: $brand-overlay-color;
opacity: .3;
}
.author {
font-size: 20px;
margin-bottom: 0;
}
}
#fh5co-main {
// padding-bottom: 5em;
}
// Section Heading
.fh5co-section-lead {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 22px;
}
.fh5co-section-sub-lead {
font-size: 22px;
font-family: $font-roboto;
font-weight: 100;
line-height: 32px;
}
// List Images
.fh5co-post {
padding: 0;
margin: 0;
li {
padding: 0;
margin: 0;
display: block;
float: left;
width: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid $brand-lighter;
}
a {
display: block;
width: 100%;
font-family: $font-monsterrat;
img {
max-width: 100%;
float: left;
@include border-radius(4px);
}
.fh5co-post-media {
float: left;
width: 20%;
margin-right: 5%;
margin-top: 5px;
}
.fh5co-post-blurb {
float: right;
width: 75%;
color: $brand-black;
line-height: 1.5;
}
.fh5co-post-meta {
font-family: $font-roboto;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: $brand-gray;
display: block;
}
&:hover, &:active, &:focus {
text-decoration: none;
.fh5co-post-blurb {
color: $brand-primary;
}
.fh5co-post-media,
.fh5co-post-blurb,
.fh5co-post-meta {
text-decoration: none;
}
}
}
}
pre {
background: $brand-lighter;
border: 1px solid $brand-gray;
}
/* Buttons */
.btn {
border-bottom: none!important;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding-left: 20px;
padding-right: 20px;
margin-right: 10px;
&:hover, &:focus, &:active {
box-shadow: none;
outline: none!important;
border-color: transparent;
}
&.fh5co-btn-icon {
text-transform: none!important;
letter-spacing: normal!important;
padding-left: 15px;
padding-right: 15px;
}
}
.btn-outline {
border: 2px solid $brand-gray!important;
background: transparent;
color: #2a2e37;
&:hover, &:active, &:focus {
border: 2px solid $brand-primary!important;
background: $brand-primary!important;
color: $brand-white;
}
}
.btn-primary {
background: $brand-primary;
border: 2px solid $brand-primary;
}
.btn-success {
background: $brand-success;
border: 2px solid $brand-success;
}
.btn-danger {
background: $brand-danger;
border: 2px solid $brand-danger;
}
.btn-info {
background: $brand-info;
border: 2px solid $brand-info;
}
.btn-warning {
background: $brand-warning;
border: 2px solid $brand-warning;
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
border-color: transparent;
}
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
&:hover, &:active, &:focus {
background: $brand-darker;
color: $brand-white;
}
}
// Input Text
.form-control {
box-shadow: none!important;
border: 2px solid #ccc;
&:hover,
&:focus,
&:active {
outline: none;
box-shadow: none!important;
border: 2px solid $brand-primary;
}
}
// Burger Menu
.fh5co-nav-toggle {
width:25px;
height:25px;
cursor: pointer;
text-decoration: none;
&.active i {
&::before, &::after {
background: #000;
}
}
&:hover, &:focus, &:active {
outline: none;
border-bottom: none!important;
}
i {
position: relative;
@include inline-block;
width: 25px;
height: 3px;
color: #000;
font:bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent:-55px;
background: #000;
transition: all .2s ease-out;
&::before, &::after {
content:'';
width: 25px;
height: 3px;
background: #000;
position: absolute;
left:0;
@include transition(.2s);
}
}
}
.fh5co-nav-toggle i::before {
top: -7px;
}
.fh5co-nav-toggle i::after {
bottom: -7px;
}
.fh5co-nav-toggle:hover i::before {
top: -10px;
}
.fh5co-nav-toggle:hover i::after {
bottom: -10px;
}
.fh5co-nav-toggle.active i {
background: transparent;
}
.fh5co-nav-toggle.active i::before {
top:0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.fh5co-nav-toggle.active i::after {
bottom:0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
.fh5co-nav-toggle {
position: absolute;
top: 7px;
right: 0px;
z-index: 21;
padding: 6px 0 0 0;
display: block;
margin: 0 auto;
display: none;
height: 44px;
width: 44px;
border-bottom: none!important;
@media screen and (max-width: $screen-sm) {
display: block;
}
}
// Feature
#fh5co-features {
padding: 5em 0;
background: rgba(0,0,0,.02);
}
.fh5co-feature-border {
border-right: 1px solid $brand-lighter;
}
.fh5co-feature {
float: left;
width: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid $brand-lighter;
&.no-border {
border-bottom: none;
@media screen and (max-width: $screen-sm) {
border-bottom: 1px solid $brand-lighter;
}
}
.fh5co-feature-icon,
.fh5co-feature-text {
float: left;
}
.fh5co-feature-icon {
margin-right: 30px;
@media screen and (max-width: $screen-sm) {
margin-right: 10px;
margin-top: 10px;
}
i {
font-size: 100px;
color: #FBB040;
@media screen and (max-width: $screen-sm) {
font-size: 50px;
margin-top: 10px;
}
}
}
.fh5co-feature-text {
width: 50%;
@media screen and (max-width: $screen-sm) {
width: 70%;
}
}
}
// Clients
#fh5co-clients {
padding: 3em 0;
background: $brand-primary;
.fh5co-client-logo {
text-align: center;
margin-bottom: 0;
@media screen and (max-width: $screen-md) {
margin-bottom: 30px;
}
}
}
// Social
.fh5co-social {
padding: 0;
margin: 0;
li {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
a {
display: block;
float: left;
margin-right: 10px;
&:hover, &:active, &:focus {
outline: none;
text-decoration: none;
}
i {
font-size: 30px;
}
}
}
}
// Footer
#fh5co-footer {
padding: 5em 0;
border-top: 1px solid $brand-lighter;
.fh5co-footer-widget {
float: left;
width: 100%;
&.top-level {
margin-top: 70px!important;
}
.fh5co-footer-lead {
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
}
}
.fh5co-footer-logo {
font-family: $font-monsterrat;
font-size: 50px;
letter-spacing: 2px;
color: $brand-gray;
}
ul {
padding: 0;
margin: 0;
li {
list-style: none;
padding: 0;
margin: 0;
}
}
}
// List - Check style
.fh5co-list-check {
position: relative;
padding: 0;
margin: 0;
clear: both;
li {
padding-left: 25px!important;
position :relative;
display: block;
margin-bottom: 10px!important;
line-height: 20px;
&:before {
@include icomoon;
content: "\e116";
content: "\e042";
position: absolute;
top: 0;
left: 0;
font-size: 18px;
color: $brand-gray;
}
}
}
.fh5co-page-heading {
text-align: center;
padding: 100px 0 60px 0;
letter-spacing: 2px;
text-transform: uppercase;
.fh5co-page-heading-lead {
position: relative;
padding-bottom: 20px;
.fh5co-border {
width: 50px;
height: 3px;
background: $brand-black;
margin-left: -25px;
left: 50%;
bottom: 0;
position: absolute;
}
}
}
.fh5co-sidebox {
float: left;
width: 100%;
.fh5co-sidebox-lead {
font-size: 16px;
letter-spacing: 1px;
margin-bottom: 20px;
float: left;
width: 100%;
display: block;
text-transform: uppercase;
}
}
/* Helper Classes */
/* Spacer */
.fh5co-spacer {
clear: both;
position: relative;
border: none;
padding: 0;
margin: 0;
}
.fh5co-spacer-xlg {
height: 150px;
@media screen and (max-width: $screen-sm) {
height: 70px;
}
}
.fh5co-spacer-lg {
height: 100px;
@media screen and (max-width: $screen-sm) {
height: 50px;
}
}
.fh5co-spacer-md {
height: 80px;
@media screen and (max-width: $screen-sm) {
height: 30px;
}
}
.fh5co-spacer-sm {
height: 50px;
@media screen and (max-width: $screen-sm) {
height: 20px;
}
}
.fh5co-spacer-xs {
height: 30px;
@media screen and (max-width: $screen-sm) {
height: 20px;
}
}
.fh5co-spacer-xxs {
height: 20px;
}
.col-xxs-12 {
@media screen and (max-width: 480px) {
float: none;
width: 100%;
}
}
.fh5co-mb30 {
margin-bottom: 30px;
}
.fh5co-row-padded {
padding: 50px 0;
}
// Template Components
// Owl Carousel
.owl-carousel .owl-controls,
.owl-carousel-posts .owl-controls, {
margin-top: 0;
}
.owl-carousel .owl-controls .owl-nav {
@media screen and (max-width: $screen-sm) {
display: none;
}
}
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel-posts .owl-controls .owl-nav .owl-next,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
top: 50%;
margin-top: -29px;
z-index: 9999;
position: absolute;
@include transition(.2s);
}
.owl-carousel-posts .owl-controls .owl-nav .owl-next,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
top: 24%;
}
.owl-carousel .owl-controls .owl-nav .owl-next {
left: 0;
left: -70px;
margin-top: -60px;
&:hover {
margin-top: -65px;
i:before {
color: $brand-primary;
}
}
}
.owl-carousel .owl-controls .owl-nav .owl-prev {
left: -70px;
margin-top: 0px;
&:hover {
margin-top: 5px;
i:before {
color: $brand-primary;
}
}
}
.owl-carousel-posts .owl-controls .owl-nav .owl-next,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev,
.owl-carousel-fullwidth .owl-controls .owl-nav .owl-next,
.owl-carousel-fullwidth .owl-controls .owl-nav .owl-prev{
i {
color: $brand-darker;
}
&:hover {
i {
color: $brand-black;
}
}
}
.owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-next,
.owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-prev {
i {
color: $brand-white;
}
&:hover {
i {
color: $brand-white;
}
}
}
.owl-theme .owl-controls .owl-nav {
@media screen and (max-width: $screen-sm) {
display: none;
}
}
.owl-theme .owl-controls .owl-nav [class*="owl-"] {
background: none!important;
i {
font-size: 30px;
&:hover, &:focus {
background: none!important;
}
}
&:hover, &:focus {
background: none!important;
}
}
.owl-theme .owl-dots {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.owl-carousel-fullwidth.owl-theme .owl-dots {
bottom: 0;
margin-bottom: 2.5em;
}
.owl-theme .owl-dots .owl-dot span {
width:10px;
height:10px;
background: rgba(255,255,255,.4);
@include transition(.2s);
border: 2px solid transparent;
&:hover {
background: none;
background: rgba(255,255,255,1);
}
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
// background: none;
background: rgba(255,255,255,1);
border: 2px solid transparent;
}
.owl-carousel-fullwidth {
.item, .fh5co-owl-text-wrap {
height: 800px;
display: table;
width: 100%;
}
.item {
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
position: relative;
.fh5co-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $brand-overlay-color;
opacity: .3;
z-index: 8;
}
img {
max-width: 100%;
}
.fh5co-owl-text {
display: table-cell;
vertical-align: middle;
z-index: 10;
position: relative;
a {
color: rgba(255,255,255,1);
border-bottom: 1px solid rgba(255,255,255,.5);
&:hover {
text-decoration: none;
color: rgba(255,255,255,1);
border-bottom: 1px solid rgba(255,255,255,1);
}
}
.fh5co-lead, .fh5co-sub-lead {
color: $brand-white;
margin: 0;
padding: 0;
font-weight: 100;
}
.fh5co-lead {
font-weight: 300;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-family: $font-monsterrat;
}
.fh5co-sub-lead {
font-size: 30px;
line-height: 42px;
font-weight: 100;
font-family: $font-roboto;
}
}
}
}
.js .to-animate {
opacity: 0;
}
// Magnific Popup
// Zoom
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/* Image Alignment */
img {
&.fh5co-align-right {
float:right;
margin:0 0 .5em 1em;
@media screen and (max-width: $screen-xs) {
width: 100%;
margin: 0 0 .5em 0;
}
}
&.fh5co-align-left {
float:left;
margin:0 1em .5em 0;
@media screen and (max-width: $screen-xs) {
width: 100%;
margin: 0 0 .5em 0;
}
}
&.fh5co-align-center {
display: block;
margin-left: auto;
margin-right: auto
}
}
a > img {
&.fh5co-align-right {
float:right;
margin:0 0 .5em 1em;
@media screen and (max-width: $screen-xs) {
width: 100%;
margin: 0 0 .5em 0;
}
}
&.fh5co-align-left {
float: left;
margin: 0 1em .5em 0;
@media screen and (max-width: $screen-xs) {
width: 100%;
margin: 0 0 .5em 0;
}
}
&.fh5co-align-center {
display: block;
margin-left: auto;
margin-right: auto
}
}
|
Download
