$font-primary: 'Roboto', Arial, sans-serif; // Overrides $grid-gutter-width: 40px !default; $border-radius-base: 4px !default; $padding-base-vertical: 14px !default; $brand-primary: #228896 !default; $brand-white: #fff; $brand-black: #000; $brand-darker: #444; $brand-gray: #ccc; $brand-lighter: #e9e9e9; $brand-body-color: #e8e8e8; $brand-selection-color: #f9f6f0; $brand-overlay-color: #3b3d40; $brand-bg-color: $brand-white; $input-border-focus: $brand-primary !default; $form-group-margin-bottom: 30px !default; // Mixin @mixin translateX($translatex) { -moz-transform: translateX($translatex); -webkit-transform: translateX($translatex); -ms-transform: translateX($translatex); -o-transform: translateX($translatex); transform: translateX($translatex); } @mixin transition($transition) { -moz-transition: all $transition ease; -o-transition: all $transition ease; -webkit-transition: all $transition ease; -ms-transition: all $transition ease; transition: all $transition ease; } @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; } @mixin flex() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flexwrap() { flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; } @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 @import 'bootstrap/mixins'; @import 'bootstrap/variables'; /* ======================================================= * * Template Style * Edit this section * * ======================================================= */ // Template Base body { font-family: $font-primary; font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.5); background: lighten($brand-black,96%); @media screen and (max-width: $screen-md) { font-size: 16px; } // color: rgba(255,255,255,.7); // background: $brand-bg-color; // background-size: cover; // background-attachment: fixed; // background-repeat: no-repeat; // @media screen and (max-width: $screen-sm) { // background-position: center center; // background-repeat: no-repeat; // } } a { color: $brand-primary; @include transition(.5s); &:hover, &:active, &:focus { color: $brand-primary; outline: none; text-decoration: none !important; } } p { margin-bottom: 1.5em; } h1, h2, h3, h4, h5, h6 { color: $brand-black; font-family: $font-primary; font-weight: 400; margin: 0 0 30px 0; } figure { margin-bottom: 2.5em; float: left; width: 100%; figcaption { font-size: 16px; width: 80%; margin: 20px auto 0px auto; color: lighten($brand-black, 70%); font-style: italic; font-family: $font-primary; @media screen and (max-width: $screen-xs) { width: 100%; } } } ::-webkit-selection { color: $brand-white; background: $brand-primary; } ::-moz-selection { color: $brand-white; background: $brand-primary; } ::selection { color: $brand-white; background: $brand-primary; } #fh5co-page { width: 100%; overflow: hidden; position: relative; } #fh5co-aside { padding-top: 60px; padding-bottom: 40px; width: 20%; position: fixed; bottom: 0; top: 0; left: 0; overflow-y: scroll; z-index: 1001; @include transition(.5s); @media screen and (max-width: $screen-lg) { width: 30%; } @media screen and (max-width: $screen-sm) { width: 270px; @include translateX(-270px); } #fh5co-logo { text-align: center; font-family: $font-primary; font-weight: 700; margin-bottom: 2em; text-transform: uppercase; font-size: 38px; @media screen and(max-width: $screen-sm){ margin-bottom: 1em; } a{ color: $brand-black; span{ font-weight: 300; color: rgba($brand-black,.5); } } } #fh5co-main-menu { ul { text-align: center; margin: 0; padding: 0; @media screen and (max-width: $screen-sm) { margin: 0 0 2em 0; } li { margin: 0 0 20px 0; padding: 0; list-style: none; a { color: rgba(0,0,0,.9); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; font-weight: 600; position: relative; padding: 10px 10px; letter-spacing: .2em; font-family: $font-primary; @include transition(.3s); &:after { content: ""; position: absolute; height: 2px; bottom: 7px; left: 10px; right: 10px; background-color: $brand-primary; visibility: hidden; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all .3s cubic-bezier(.175, .885, .32, 1.275); -moz-transition: all .3s cubic-bezier(.175, .885, .32, 1.275); -ms-transition: all .3s cubic-bezier(.175, .885, .32, 1.275); -o-transition: all .3s cubic-bezier(.175, .885, .32, 1.275); transition: all .3s cubic-bezier(.175, .885, .32, 1.275); } &:hover { text-decoration: none; color: rgba(0,0,0,1); &:after { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } } &.fh5co-active { a { color: rgba(0,0,0,1); &:after { visibility: visible; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } } } } } .fh5co-footer { position: absolute; bottom: 40px; font-size: 14px; text-align: center; width: 100%; font-weight: 400; color: rgba(0,0,0,.6); padding: 0 20px; @media screen and (max-width: $screen-sm) { position: relative; bottom: 0; } span { display: block; } ul { padding: 0; margin: 0; text-align: center; li { padding: 0; margin: 0; display: inline; list-style: none; a { color: rgba(0,0,0,.7); padding: 4px; &:hover, &:active, &:focus { text-decoration: none; outline: none; color: $brand-primary; } } } } } } #fh5co-main { width: 80%; float: right; @include transition(.5s); @media screen and (max-width: $screen-lg) { width: 70%; } @media screen and (max-width: $screen-sm) { width: 100%; } .fh5co-narrow-content { position: relative; width: 93%; margin: 0 auto; padding: 4em 0; clear: both; @media screen and (max-width: $screen-sm) { width: 100%; padding: 4em 1em; } } } #fh5co-hero { min-height: 500px; background: $brand-white url(../images/loader.gif) no-repeat center center; width: 100%; float: left; clear: both; .btn { font-size: 24px; &.btn-primary { padding: 14px 30px!important; } } .flexslider { border: none; z-index: 1; margin-bottom: 0; .slides { position: relative; overflow: hidden; .overlay{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background: rgba($brand-black,.3); } li { background-repeat: no-repeat; background-size: cover; background-position: bottom center; min-height: 500px; position: relative; } } .flex-control-nav { bottom: 20px; z-index: 1000; right: 20px; float: right; width: auto; li { display: block; margin-bottom: 10px; a { background: rgba(255,255,255,.2); box-shadow: none; width: 12px; height: 12px; cursor: pointer; &.flex-active { cursor: pointer; background: transparent; border: 2px solid $brand-primary; } } } } .flex-direction-nav { display: none; } .slider-text{ display: table; opacity: 0; min-height: 500px; z-index: 9; > .slider-text-inner { display: table-cell; vertical-align: middle; min-height: 700px; padding: 2em; @media screen and (max-width: $screen-sm ) { text-align: center; } h1, h2 { margin: 0; padding: 0; color: rgba($brand-white,1); font-family: $font-primary; } h1 { margin-bottom: 20px; font-size: 45px; line-height: 1.3; font-weight: 100; font-family: $font-primary; @media screen and (max-width: $screen-sm) { font-size: 28px; } } h2 { font-size: 18px; line-height: 1.5; margin-bottom: 30px; font-weight: 300; a{ color: rgba($brand-primary,.8); border-bottom: 1px solid rgba($brand-primary,.7) } } .heading-section{ font-size: 50px; @media screen and (max-width: $screen-sm){ font-size: 30px; } }s .fh5co-lead{ font-size: 20px; color: $brand-white; .icon-heart { color: $brand-danger; } } .btn{ font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: $brand-white; padding: 22px 30px !important; border: none; font-weight: 500; &.btn-learn{ background: $brand-white; color: $brand-black; &:hover{ color: $brand-white; } } // &.btn-demo{ // &:hover{ // background: $brand-white !important; // color: $brand-black; // } // } @media screen and (max-width: $screen-sm ) { width: 100%; } } } } } } .fh5co-bg-color{ width: 100%; float: left; background: $brand-white; } body { &.offcanvas { overflow-x: hidden; #fh5co-aside { @include translateX(0); width: 270px; background: $brand-white; z-index: 999; position: fixed; } #fh5co-main, .fh5co-nav-toggle { top: 0; @include translateX(270px); } } } .fh5co-services { margin-top: 5px; ul { list-style: none; padding: 0; margin: 0; } } //BLOG .blog-entry{ width: 100%; float: left; background: $brand-white; @media screen and(max-width: $screen-sm){ margin-bottom: 30px; } .blog-img{ width: 100%; float: left; overflow: hidden; position: relative; z-index: 1; margin-bottom: 25px; img { position: relative; max-width: 100%; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); @include transition(.9s); } } .desc{ padding: 25px; h3{ font-size: 15px; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; line-height: auto; a{ color: $brand-black; text-decoration: none; } } span{ display: block; margin-bottom: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba($brand-black,.4) !important; small{ i{ color: lighten($brand-black,90%); } } } .lead{ font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: $brand-black; } } &:hover{ .blog-img{ img{ -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); } } } } // WORK .work{ background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height: 270px; width: 100%; display: table; overflow: hidden; @media screen and(max-width: $screen-sm){ height: 400px; } @media screen and(max-width: $screen-xs){ height: 270px; } .desc{ display: table-cell; vertical-align: middle; height: 270px; background: $brand-white; opacity: 0; @include transition(.3s); h3{ font-size: 14px; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } span{ display: block; color: lighten($brand-black,60%); font-size: 12px; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } @media screen and(max-width: $screen-sm){ opacity: 1; background: transparent !important; h3{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: $brand-white; } span{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } } &:hover{ .desc{ opacity: 1; h3{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } span{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } } } .fh5co-lead { font-size: 18px; line-height: 1.5; } .fh5co-heading-colored { color: $brand-primary; font-size: 30px; } .fh5co-cards { padding: 1em 0; background: lighten($brand-black, 90%); @media screen and (max-width: $screen-sm) { padding: 1em 0; } .fh5co-flex-wrap { @include flex(); @include flexwrap(); > div { width: 49.5%; margin-right: 1%; background: $brand-white; padding: 30px; margin-bottom: 10px; &:nth-of-type(1) { float: left; } &:nth-of-type(2) { float: right; margin-right: 0%; } @media screen and (max-width: $screen-md) { width: 100%; margin-right: 0; } } .fh5co-card { p:last-child { margin-bottom: 0; } h5 { text-transform: uppercase; font-size: 12px; letter-spacing: .2em; padding: 4px 8px; background: lighten($brand-black, 92%); @include inline-block; } } } } .fh5co-counter { .fh5co-number { font-size: 100px; color: $brand-primary; font-weight: 400; margin: 0; padding: 0; line-height: .7; &.fh5co-left { float: left; width: 30%; @media screen and (max-width: $screen-sm) { width: 100%; line-height: 1.2; } } } .fh5co-text { float: right; text-align: left; width: 70%; @media screen and (max-width: $screen-sm) { width: 100%; text-align: center; } h3 { margin: 0; padding: 0; position: relative; &.border-bottom { &:after { content: ""; width: 50px; } } } } } .fh5co-social { padding: 0; margin: 0; text-align: center; li { padding: 0; margin: 0; list-style: none; @include inline-block; a { font-size: 22px; color: $brand-black; padding: 10px; @include inline-block; @include border-radius(7px); @media screen and (max-width: $screen-sm) { padding: 10px 8px; } &:hover { color: $brand-primary; } &:hover, &:active, &:focus { outline: none; text-decoration: none; color: $brand-primary; } } } } #map { width: 100%; height: 700px; @media screen and (max-width: $screen-sm) { height: 200px; } } .fh5co-more-contact { background: lighten($brand-black, 98%); } .fh5co-feature { text-align: left; width: 100%; float: left; margin-bottom: 40px; position: relative; .fh5co-icon { position: absolute; top: 0; left: 0; width: 100px; height: 100px; display: table; text-align: center; background: rgba($brand-black,.05); @include border-radius(50%); i { display: table-cell; vertical-align: middle; color: $brand-primary; font-size: 40px; height: 100px; @media screen and (max-width: $screen-lg) { font-size: 40px; } } } .fh5co-text { padding-left: 120px; width: 100%; h2, h3 { margin: 0; padding: 0; } h3 { font-weight: 500; margin-bottom: 20px; color: rgba(0,0,0,.8); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; } } &.fh5co-feature-sm { .fh5co-text { margin-top: 30px; } .fh5co-icon { i { color: $brand-primary; font-size: 40px; @media screen and (max-width: $screen-lg) { font-size: 28px; } } } } } .fh5co-heading { font-size: 18px; margin-bottom: 2em; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; &.fh5co-light { color: $brand-white; } span { display: block; } @media screen and (max-width: $screen-sm ) { margin-bottom: 1em; } } // Buttons .btn { margin-right: 4px; margin-bottom: 4px; font-family: $font-primary; font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; @include border-radius(0px); @include transition(.5s); padding: 8px 20px!important; &.btn-sm { padding: 4px 15px!important; } &.btn-md { padding: 8px 20px!important; } &.btn-lg { padding: 18px 36px!important; } &:hover, &:active, &:focus { box-shadow: none!important; outline: none!important; } } .btn-primary { background: $brand-primary; color: $brand-white; border: 2px solid $brand-primary; &:hover, &:focus, &:active { background: lighten($brand-primary, 5%)!important; border-color: lighten($brand-primary, 5%)!important; } &.btn-outline { background: transparent; color: $brand-primary; border: 2px solid $brand-primary; &:hover, &:focus, &:active { background: $brand-primary; color: $brand-white; } } } .btn-success { background: $brand-success; color: $brand-white; border: 2px solid $brand-success; &:hover, &:focus, &:active { background: darken($brand-success, 5%)!important; border-color: darken($brand-success, 5%)!important; } &.btn-outline { background: transparent; color: $brand-success; border: 2px solid $brand-success; &:hover, &:focus, &:active { background: $brand-success; color: $brand-white; } } } .btn-info { background: $brand-info; color: $brand-white; border: 2px solid $brand-info; &:hover, &:focus, &:active { background: darken($brand-info, 5%)!important; border-color: darken($brand-info, 5%)!important; } &.btn-outline { background: transparent; color: $brand-info; border: 2px solid $brand-info; &:hover, &:focus, &:active { background: $brand-info; color: $brand-white; } } } .btn-warning { background: $brand-warning; color: $brand-white; border: 2px solid $brand-warning; &:hover, &:focus, &:active { background: darken($brand-warning, 5%)!important; border-color: darken($brand-warning, 5%)!important; } &.btn-outline { background: transparent; color: $brand-warning; border: 2px solid $brand-warning; &:hover, &:focus, &:active { background: $brand-warning; color: $brand-white; } } } .btn-danger { background: $brand-danger; color: $brand-white; border: 2px solid $brand-danger; &:hover, &:focus, &:active { background: darken($brand-danger, 5%)!important; border-color: darken($brand-danger, 5%)!important; } &.btn-outline { background: transparent; color: $brand-danger; border: 2px solid $brand-danger; &:hover, &:focus, &:active { background: $brand-danger; color: $brand-white; } } } .btn-outline { background: none; border: 2px solid lighten($brand-black, 50%); font-size: 16px; @include transition(.3s); &:hover, &:focus, &:active { box-shadow: none; } } // Form Input Field .form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; background: transparent; border: 2px solid rgba(0, 0, 0, 0.1); height: 54px; font-size: 18px; font-weight: 300; @include border-radius(7px); &:active, &:focus { outline: none; box-shadow: none; border-color: $brand-primary; } } #message { height: 130px; } // Burger Menu .fh5co-nav-toggle { cursor: pointer; text-decoration: none; &.active i { &::before, &::after { background: $brand-black; } } &.dark { &.active i { &::before, &::after { background: $brand-black; } } } &:hover, &:focus, &:active { outline: none; border-bottom: none!important; } i { position: relative; @include inline-block; width: 30px; height: 2px; color: $brand-black; font:bold 14px/.4 Helvetica; text-transform: uppercase; text-indent:-55px; background: $brand-black; transition: all .2s ease-out; &::before, &::after { content:''; width: 30px; height: 2px; background: $brand-black; position: absolute; left:0; @include transition(.2s); } } &.dark { i { position: relative; color: $brand-black; background: $brand-black; transition: all .2s ease-out; &::before, &::after { background: $brand-black; @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: fixed; left: 0; top: 0px; z-index: 9999; cursor: pointer; opacity: 1; visibility: hidden; padding: 20px; // background: rgba(255,255,255,.9); @include transition(.5s); @media screen and (max-width: $screen-sm) { opacity: 1; visibility: visible; } } // Helper Class .col-xxs-12 { @media screen and (max-width: 480px) { float: none; width: 100%; } } .row-bottom-padded-lg { padding-bottom: 7em; @media screen and (max-width: $screen-sm ) { padding-bottom: 1em; } } .row-bottom-padded-md { padding-bottom: 4em; @media screen and (max-width: $screen-sm ) { padding-bottom: 1em; } } .row-bottom-padded-sm { padding-bottom: 1em; @media screen and (max-width: $screen-sm ) { padding-bottom: 1em; } } .col-padding{ padding: 10px !important; } .animate-box { .js & { opacity: 0; } }