File "style.scss"
Full path: E:/sites/Single15/tinmung2007/webroot/lich nam B/sass/style.scss
File size: 20.91 KiB (21413 bytes)
MIME-type:
Charset: utf-8
$font-primary: 'Roboto', Arial, sans-serif;
$font-secondary: 'Montserrat', Arial, sans-serif;
// Overrides
$grid-gutter-width: 40px !default;
$border-radius-base: 4px !default;
$padding-base-vertical: 14px !default;
$brand-primary: #da1212 !default;
$brand-secondary: #3f95ea !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: #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: 20px;
line-height: 1.6;
color: rgba(0,0,0,.5);
@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;
}
}
p {
margin-bottom: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
color: $brand-black;
font-family: $font-secondary;
font-weight: 700;
margin: 0 0 30px 0;
}
figure {
margin-bottom: 2.5em;
float: left;
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: 40px;
padding-bottom: 40px;
width: 15%;
position: fixed;
bottom: 0;
top: 0;
left: 0;
overflow-y: scroll;
&.border {
border-right: 1px solid lighten($brand-black, 90%);
}
@include transition(.5s);
@media screen and (max-width: $screen-lg) {
width: 30%;
}
@media screen and (max-width: $screen-sm) {
width: 270px;
@include translateX(-270px);
// @include translateX(-200%);
}
#fh5co-logo {
text-align: center;
}
#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 10px 0;
padding: 0;
list-style: none;
a {
color: rgba(0,0,0,.5);
text-decoration: none;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 15px;
font-weight: 300;
position: relative;
@include transition(.3s);
padding: 10px 10px;
letter-spacing: .2em;
font-family: $font-secondary;
&: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);
@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: 85%;
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: 80%;
margin: 0 auto;
padding: 4em 0;
@media screen and (max-width: $screen-sm) {
width: 100%;
padding: 3.5em 1em;
}
}
}
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);
}
}
}
.work-item {
margin-bottom: 30px;
a {
border: none;
text-align: center;
img {
margin-bottom: 10px;
float: left;
border: 10px solid transparent;
@include transition(.5s);
}
h3 {
font-size: 20px;
color: $brand-black;
margin-bottom: 10px;
}
p {
font-size: 14px;
color: lighten($brand-black, 80%);
margin-bottom: 0;
}
&:hover, &:active, &:focus {
text-decoration: none;
img {
border: 10px solid $brand-black;
}
}
}
}
.fh5co-services {
margin-top: 5px;
ul {
list-style: none;
padding: 0;
margin: 0;
}
}
.work-pagination {
padding: 3em 0;
a {
color: $brand-black;
&:hover {
color: $brand-primary;
text-decoration: none;
}
}
@media screen and (max-width: $screen-xs) {
span {
display: none;
}
}
}
.fh5co-border-bottom {
border-bottom: 1px solid lighten($brand-black, 94%);
}
.fh5co-testimonial {
padding: 3em 0;
background: $brand-primary;
@media screen and (max-width: $screen-sm) {
padding: 3em 0;
}
.item {
color: rgba(255,255,255,1);
padding-left: 3em;
padding-right: 3em;
@media screen and (max-width: $screen-sm) {
padding-left: 0em;
padding-right: 0em;
}
figure {
text-align: center;
img {
max-width: inherit;
width: 90px;
margin: 0 auto;
@include border-radius(50%);
}
}
p {
font-size: 30px;
@media screen and (max-width: $screen-sm) {
font-size: 28px;
}
@media screen and (max-width: $screen-xs) {
font-size: 20px;
}
}
.author {
font-size: 16px;
display: block;
}
}
}
.fh5co-counters {
padding: 1em 0;
background: lighten($brand-black, 90%);
background-size: cover;
background-attachment: fixed;
.fh5co-counter {
font-size: 50px;
display: block;
color: $brand-white;
font-family: $font-secondary;
width: 100%;
margin-bottom: .5em;
}
.fh5co-counter-label {
color: $brand-white;
text-transform: uppercase;
font-size: 13px;
font-family: $font-secondary;
letter-spacing: 5px;
margin-bottom: 2em;
display: block;
}
}
.fh5co-lead {
font-size: 24px;
line-height: 1.5;
}
.fh5co-heading-colored {
color: $brand-primary;
}
.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;
padding: 20px;
.fh5co-icon {
float: left;
width: 10%;
display: block;
margin-top: 5px;
i {
color: $brand-primary;
font-size: 70px;
@media screen and (max-width: $screen-lg) {
font-size: 40px;
}
}
}
&.fh5co-feature-sm {
.fh5co-icon {
i {
color: $brand-primary;
font-size: 28px;
@media screen and (max-width: $screen-lg) {
font-size: 28px;
}
}
}
}
.fh5co-text {
float: right;
width: 80%;
@media screen and (max-width: $screen-sm) {
width: 82%;
}
@media screen and (max-width: $screen-xs) {
width: 72%;
}
h2, h3 {
margin: 0;
padding: 0;
}
h3 {
font-weight: 300;
margin-bottom: 20px;
color: rgba(0,0,0,.8);
font-size: 14px;
letter-spacing: .2em;
text-transform: uppercase;
}
}
}
.fh5co-heading {
font-size: 45px;
margin-bottom: 1em;
&.fh5co-light {
color: $brand-white;
}
span {
display: block;
}
@media screen and (max-width: $screen-sm ) {
font-size: 30px;
margin-bottom: 1em;
}
}
.fh5co-staff {
img {
margin-bottom: 1em;
}
h3 {
margin: 0;
}
h4 {
margin: 0 0 20px 0;
font-weight: 300;
color: rgba(0,0,0,.4);
}
}
// Chart
.chart {
width: 160px;
height: 160px;
margin: 0 auto 30px auto;
position: relative;
text-align: center;
span {
strong {
display: block;
}
position: absolute;
top: 50%;
left: 0;
margin-top: -30px;
width: 100%;
}
canvas{
position: absolute;
left: 0;
top: 0;
}
}
/* Owl Override Style */
.owl-carousel .owl-controls,
.owl-carousel-posts .owl-controls, {
margin-top: 0;
}
.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,
.owl-carousel-posts .owl-controls .owl-nav .owl-next {
right: -40px;
&:hover {
margin-right: -10px;
}
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
left: -40px;
&:hover {
margin-left: -10px;
}
}
.owl-carousel-posts .owl-controls .owl-nav .owl-next {
right: -50px;
@media screen and (max-width: $screen-sm ) {
right: 0px;
}
}
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
left: -50px;
@media screen and (max-width: $screen-sm ) {
left: 0px;
}
}
.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: $brand-white;
@include transition(.2s);
border: 3px solid transparent;
&:hover {
background: none;
border: 3px solid $brand-primary;
}
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: transparent;
height: 10px;
border: 2px solid $brand-white;
}
// Buttons
.btn {
margin-right: 4px;
margin-bottom: 4px;
font-family: $font-primary;
font-size: 18px;
font-weight: 400;
@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(0px);
&: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;
}
}
.animate-box {
.js & {
opacity: 0;
}
}