added more preview pages and more templates
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
/*======================== Menu ==========================*/
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Menu Styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu {
|
||||
@include clearfix;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
& + li {
|
||||
margin-left: 50px;
|
||||
|
||||
@media (max-width: 979px) and (min-width: 768px) {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Menu item styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu {
|
||||
> li {
|
||||
> a {
|
||||
color: #FFF;
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
&.sfHover > a, > a:hover, &.active > a {
|
||||
color: lighten($primary, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Sub menu lvl1 styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 150px;
|
||||
margin-top: 15px;
|
||||
margin-left: -20px;
|
||||
padding: 13px 15px 20px;
|
||||
background: $primary;
|
||||
z-index: 2;
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(0 0 3px rgba(0,0,0,.3));
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Sub menu lvl1 item styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu ul {
|
||||
> li {
|
||||
|
||||
& + li {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&.sfHover > a, > a:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Sub menu lvl2 styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu ul ul {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 100%;
|
||||
width: 150px;
|
||||
margin-left: 10px;
|
||||
padding: 13px 15px 20px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Sub menu lvl2 item styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu ul ul {
|
||||
> li {
|
||||
> a {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&.sfHover > a, > a:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// sf-with-ul styles
|
||||
//--------------------------------------------------------------
|
||||
.sf-menu > li > .sf-with-ul {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 75%;
|
||||
margin-left: -6px;
|
||||
content: $fa-caret-down;
|
||||
font: 400 12px/12px $fa;
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------------------------------------------
|
||||
// Responsive
|
||||
//--------------------------------------------------------------
|
||||
@media (max-width: 767px) {
|
||||
.sf-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
//==========================================================
|
||||
// MIXINS
|
||||
//==========================================================
|
||||
|
||||
// Note: Some of described mixins in this file requires the ie conditional comments
|
||||
//
|
||||
// For IE < 9
|
||||
// <!--[if lt IE 9]>
|
||||
// <html class='lt-ie9'>
|
||||
// <![endif]-->
|
||||
//
|
||||
|
||||
@mixin keyframes($name){
|
||||
@-ms-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-o-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clip($x1, $x2, $y1, $y2){
|
||||
clip: rect($y1,$x2,$y2,$x1);
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
|
||||
.lt-ie9 & {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity})";
|
||||
filter: alpha(opacity=$opacity*100);
|
||||
}
|
||||
}
|
||||
|
||||
// Background-rgba
|
||||
@mixin background($rgb, $opacity) {
|
||||
background: rgba($rgb, $opacity);
|
||||
|
||||
.lt-ie9 & {
|
||||
background: none;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($rgb, $opacity))}', endColorstr='#{ie-hex-str(rgba($rgb, $opacity))}')";
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($rgb, $opacity))}', endColorstr='#{ie-hex-str(rgba($rgb, $opacity))}');
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
@mixin transition($trsn) {
|
||||
-moz-transition: $trsn;
|
||||
-o-transition: $trsn;
|
||||
-webkit-transition: $trsn;
|
||||
transition: $trsn;
|
||||
}
|
||||
|
||||
// Transition Delay
|
||||
@mixin transition-delay($trsn-d) {
|
||||
-moz-transition-delay: $trsn-d;
|
||||
-o-transition-delay: $trsn-d;
|
||||
-webkit-transition-delay: $trsn-d;
|
||||
transition-delay: $trsn-d;
|
||||
}
|
||||
|
||||
// Animation
|
||||
@mixin animation($anim) {
|
||||
-webkit-animation: $anim;
|
||||
-moz-animation: $anim;
|
||||
-ms-animation: $anim;
|
||||
-o-animation: $anim;
|
||||
animation: $anim;
|
||||
}
|
||||
|
||||
// Transform Origin
|
||||
@mixin transform-origin($trfm-o) {
|
||||
-moz-transform-origin: $trfm-o;
|
||||
-ms-transform-origin: $trfm-o;
|
||||
-o-transform-origin: $trfm-o;
|
||||
-webkit-transform-origin: $trfm-o;
|
||||
transform-origin: $trfm-o;
|
||||
}
|
||||
|
||||
// Transform
|
||||
@mixin transform($trfm) {
|
||||
-moz-transform: $trfm;
|
||||
-ms-transform: $trfm;
|
||||
-o-transform: $trfm;
|
||||
-webkit-transform: $trfm;
|
||||
transform: $trfm;
|
||||
}
|
||||
|
||||
// Box Sizing
|
||||
@mixin box-sizing($bs) {
|
||||
-moz-box-sizing: $bs;
|
||||
-webkit-box-sizing: $bs;
|
||||
box-sizing: $bs;
|
||||
}
|
||||
|
||||
// Border Radius
|
||||
@mixin border-radius($border-radius) {
|
||||
-webkit-border-radius: $border-radius;
|
||||
-moz-border-radius: $border-radius;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Box Shadow
|
||||
@mixin box-shadow($box-shadow) {
|
||||
-webkit-box-shadow: $box-shadow;
|
||||
-moz-box-shadow: $box-shadow;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
// Reset Input
|
||||
@mixin reset-input() {
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
vertical-align: baseline;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Hide Text
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
// User Select
|
||||
@mixin user-select($select: none) {
|
||||
-webkit-user-select: $select;
|
||||
-khtml-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select;
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
// Triangle
|
||||
@mixin triangle($dir, $w, $h, $clr) {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
|
||||
@if $dir == top {
|
||||
border-width: 0 $w/2 $h $w/2;
|
||||
border-color: transparent transparent $clr transparent;
|
||||
} @else if $dir == bottom {
|
||||
border-width: $h $w/2 0 $w/2;
|
||||
border-color: $clr transparent transparent transparent;
|
||||
} @else if $dir == left {
|
||||
border-width: $h/2 $w $h/2 0;
|
||||
border-color: transparent $clr transparent transparent;
|
||||
} @else if $dir == right {
|
||||
border-width: $h/2 0 $h/2 $w;
|
||||
border-color: transparent transparent transparent $clr;
|
||||
} @else if $dir == top_left {
|
||||
border-width: $w $w 0 0;
|
||||
border-color: $clr transparent transparent transparent;
|
||||
} @else if $dir == top_right {
|
||||
border-width: 0 $w $w 0;
|
||||
border-color: transparent $clr transparent transparent;
|
||||
} @else if $dir == bottom_right {
|
||||
border-width: 0 0 $w $w;
|
||||
border-color: transparent transparent $clr transparent;
|
||||
} @else if $dir == bottom_left {
|
||||
border-width: $w 0 0 $w;
|
||||
border-color: transparent transparent transparent $clr;
|
||||
}
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Variables
|
||||
$fa: 'FontAwesome';
|
||||
|
||||
// FA Icons
|
||||
// Angle
|
||||
$fa-angle-left: '\f104';
|
||||
$fa-angle-right: '\f105';
|
||||
$fa-angle-down: '\f107';
|
||||
$fa-angle-up: '\f106';
|
||||
|
||||
// Arrow Circle
|
||||
$fa-arrow-circle-down: '\f0ab';
|
||||
$fa-arrow-circle-top: '\f0aa';
|
||||
$fa-arrow-circle-left: '\f0a8';
|
||||
$fa-arrow-circle-right: '\f0a9';
|
||||
|
||||
// Caret
|
||||
$fa-caret-down: '\f0d7';
|
||||
$fa-caret-right: '\f0da';
|
||||
$fa-caret-left: '\f0d9';
|
||||
$fa-caret-up: '\f0d8';
|
||||
|
||||
// Chevron
|
||||
$fa-chevron-left: '\f053';
|
||||
$fa-chevron-right: '\f054';
|
||||
$fa-chevron-up: '\f077';
|
||||
$fa-chevron-down: '\f078';
|
||||
|
||||
// Other
|
||||
$fa-search: '\f002';
|
||||
$fa-close: '\f00d';
|
||||
$fa-expand: '\f065';
|
||||
$fa-play-circle: '\f144';
|
||||
$fa-play-circle-o: '\f01d';
|
||||
$fa-play: '\f04b';
|
||||
$fa-youtube-play: '\f16a';
|
||||
$fa-link: '\f0c1';
|
||||
$fa-envelope: '\f0e0';
|
||||
$fa-mobile: '\f10b';
|
||||
$fa-map-marker: '\f041';
|
||||
$fa-comments: '\f086';
|
||||
$fa-comments-o: '\f0e6';
|
||||
$fa-cogs: '\f085';
|
||||
$fa-cog: '\f013';
|
||||
$fa-eye: '\f06e';
|
||||
$fa-external-link: '\f08e';
|
||||
$fa-photo: '\f03e';
|
||||
$fa-volume-off: '\f026';
|
||||
$fa-volume-up: '\f028';
|
||||
$fa-volume-down: '\f027';
|
||||
$fa-users: '\f0c0';
|
||||
$fa-times: '\f00d';
|
||||
$fa-star: '\f005';
|
||||
$fa-stop: '\f04d';
|
||||
$fa-pause: '\f04c';
|
||||
$fa-check-square-o: '\f046';
|
||||
$fa-desktop: '\f108';
|
||||
$fa-cubes: '\f1b3';
|
||||
$fa-bolt: '\f0e7';
|
||||
$fa-bullhorn: '\f0a1';
|
||||
$fa-book: '\f02d';
|
||||
$fa-gears: '\f085';
|
||||
$fa-codepen: '\f1cb';
|
||||
$fa-plus: '\f067';
|
||||
$fa-thumbs-o-up: '\f087';
|
||||
$fa-quote-left: '\f10d';
|
||||
|
||||
@@ -0,0 +1,415 @@
|
||||
/*================== RD Mobile Menu =====================*/
|
||||
$dark-theme: (
|
||||
panel-background-color: #2B3643,
|
||||
panel-text-color: #FFF,
|
||||
menu-background-color: #2B3643,
|
||||
menu-item-color: #A5BFD2,
|
||||
menu-item-hover-color: #FFF,
|
||||
menu-item-hover-background: $primary,
|
||||
menu-item-active-color: #fff,
|
||||
menu-item-active-background: #313e4e
|
||||
);
|
||||
|
||||
$light-theme: (
|
||||
panel-background-color: #FFF,
|
||||
panel-text-color: #000,
|
||||
menu-background-color: #FFF,
|
||||
menu-item-color: #666,
|
||||
menu-item-hover-color: #FFF,
|
||||
menu-item-hover-background: $primary,
|
||||
menu-item-active-color: #2d2d2d,
|
||||
menu-item-active-background: #f5f5f5
|
||||
);
|
||||
|
||||
$rd-theme: $light-theme;
|
||||
$rd-menu-toggle-preset: "button-lines-arrow-2";
|
||||
|
||||
$rd-mobilepanel-height: 56px;
|
||||
$rd-button-size: 48px;
|
||||
$rd-icon-size: 24px;
|
||||
$rd-menu-width: 240px;
|
||||
|
||||
.rd-mobilemenu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999999;
|
||||
text-align: left;
|
||||
@include transition(.3s all ease);
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rd-mobilemenu_ul {
|
||||
position: fixed;
|
||||
top: -$rd-mobilepanel-height;
|
||||
left: 0;
|
||||
bottom: -$rd-mobilepanel-height;
|
||||
width: $rd-menu-width;
|
||||
padding: (20px + $rd-mobilepanel-height*2) 0 (20px + $rd-mobilepanel-height);
|
||||
color: map-get($rd-theme, menu-item-color);
|
||||
background: map-get($rd-theme, menu-background-color);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
overflow: auto;
|
||||
@include box-shadow(5px 0 5px 0 rgba(0, 0, 0, .1));
|
||||
@include transform(translateX(-$rd-menu-width));
|
||||
@include transition(0.3s ease);
|
||||
@include transition(0.3s cubic-bezier(.55, 0, .1, 1));
|
||||
|
||||
.rd-mobilemenu.active & {
|
||||
@include transform(translateX(0));
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 14px 25px 16px;
|
||||
|
||||
&.active {
|
||||
background: map-get($rd-theme, menu-item-active-background);
|
||||
color: map-get($rd-theme, menu-item-active-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: map-get($rd-theme, menu-item-hover-background);
|
||||
color: map-get($rd-theme, menu-item-hover-color);
|
||||
}
|
||||
|
||||
.rd-submenu-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 11px;
|
||||
margin-top: -17.5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font: 400 10px $fa;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
@include transition(.5s all ease);
|
||||
z-index: 1;
|
||||
background: rgba(#000, .1);
|
||||
&:after {
|
||||
content: '\f078';
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: map-get($rd-theme, menu-background-color);
|
||||
color: map-get($rd-theme, menu-item-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.rd-with-ul {
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
.rd-submenu-toggle {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul a {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
ul ul a {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rd-mobilepanel {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $rd-mobilepanel-height;
|
||||
background: map-get($rd-theme, panel-background-color);
|
||||
color: map-get($rd-theme, panel-text-color);
|
||||
@include box-shadow(0 3px 3px 0 rgba(0, 0, 0, .1));
|
||||
z-index: 99999991;
|
||||
}
|
||||
|
||||
.rd-mobilepanel_title {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: $rd-mobilepanel-height;
|
||||
right: $rd-mobilepanel-height;
|
||||
color: map-get($rd-theme, panel-text-color);
|
||||
font-size: $rd-icon-size;
|
||||
line-height: $rd-button-size;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
|
||||
&:after, &:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//=========== Mobilepanel Toggle Presets ==============
|
||||
|
||||
// Hamburger
|
||||
@mixin button-lines() {
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
@include transition(all .3s ease);
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: (round($rd-icon-size / 6)) * -2;
|
||||
@include transition(all .3s ease);
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: (round($rd-icon-size / 6)) * 2;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before,
|
||||
& {
|
||||
width: $rd-icon-size;
|
||||
height: round($rd-icon-size / 6);
|
||||
background-color: map-get($rd-theme, panel-text-color);
|
||||
backface-visibility: hidden;
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger to Cross
|
||||
@mixin button-lines__cross-1() {
|
||||
&.active span {
|
||||
background: transparent;
|
||||
|
||||
&:before, &:after {
|
||||
@include transform-origin(50% 50%);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
&:after {
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-lines__cross-2() {
|
||||
span {
|
||||
&:before, &:after {
|
||||
-webkit-transition-duration: 0.3s, 0.3s;
|
||||
transition-duration: 0.3s, 0.3s;
|
||||
-webkit-transition-delay: 0.3s, 0s;
|
||||
transition-delay: 0.3s, 0s;
|
||||
-webkit-transition-property: top, -webkit-transform;
|
||||
transition-property: top, transform;
|
||||
}
|
||||
}
|
||||
|
||||
&.active span {
|
||||
transition: background .3s 0s ease;
|
||||
background: transparent;
|
||||
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
-webkit-transition-delay: 0s, 0.3s;
|
||||
transition-delay: 0s, 0.3s;
|
||||
}
|
||||
&:before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-lines__cross-3() {
|
||||
span {
|
||||
&:before, &:after {
|
||||
-webkit-transition-duration: 0.3s, 0.3s;
|
||||
transition-duration: 0.3s, 0.3s;
|
||||
-webkit-transition-delay: 0.3s, 0s;
|
||||
transition-delay: 0.3s, 0s;
|
||||
-webkit-transition-property: top, -webkit-transform;
|
||||
transition-property: top, transform;
|
||||
}
|
||||
}
|
||||
|
||||
&.active span {
|
||||
@include transform(rotate(180deg));
|
||||
transition: background .3s 0s ease;
|
||||
background: transparent;
|
||||
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
-webkit-transition-delay: 0s, 0.3s;
|
||||
transition-delay: 0s, 0.3s;
|
||||
}
|
||||
&:before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger to Arrow
|
||||
@mixin button-lines__arrow-1() {
|
||||
span {
|
||||
&:before,
|
||||
&:after {
|
||||
@include transform-origin($rd-icon-size/14 center);
|
||||
}
|
||||
}
|
||||
|
||||
&.active span {
|
||||
&:before,
|
||||
&:after {
|
||||
top: 0;
|
||||
width: $rd-icon-size/1.6;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform(rotate(-40deg));
|
||||
}
|
||||
&:after {
|
||||
@include transform(rotate(40deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger to Arrow (Material Design)
|
||||
@mixin button-lines__arrow-2() {
|
||||
span {
|
||||
@include transform(rotate(180deg));
|
||||
&:before,
|
||||
&:after {
|
||||
@include transform-origin($rd-icon-size/14 center);
|
||||
@include transform-origin($rd-icon-size/14 center);
|
||||
}
|
||||
}
|
||||
|
||||
&.active span {
|
||||
@include transform(rotate(360deg));
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
top: 0;
|
||||
width: $rd-icon-size/1.6;
|
||||
}
|
||||
|
||||
&:before {
|
||||
-webkit-transform: rotate3d(0, 0, 1, -40deg);
|
||||
transform: rotate3d(0, 0, 1, -40deg);
|
||||
}
|
||||
&:after {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 40deg);
|
||||
transform: rotate3d(0, 0, 1, 40deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hamburger to Minus
|
||||
@mixin button-lines__minus-1() {
|
||||
span {
|
||||
&:before,
|
||||
&:after {
|
||||
@include transition(all .3s ease);
|
||||
}
|
||||
}
|
||||
|
||||
&.active span {
|
||||
&:before,
|
||||
&:after {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//=============== Mobilepanel Toggle =================
|
||||
.rd-mobilepanel_toggle {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: 8px;
|
||||
width: $rd-button-size;
|
||||
height: $rd-button-size;
|
||||
|
||||
@if ($rd-menu-toggle-preset == button-lines-cross-1) {
|
||||
@include button-lines();
|
||||
@include button-lines__cross-1();
|
||||
}
|
||||
|
||||
@if ($rd-menu-toggle-preset == button-lines-cross-2) {
|
||||
@include button-lines();
|
||||
@include button-lines__cross-2();
|
||||
}
|
||||
|
||||
@if ($rd-menu-toggle-preset == button-lines-cross-3) {
|
||||
@include button-lines();
|
||||
@include button-lines__cross-3();
|
||||
}
|
||||
|
||||
@if ($rd-menu-toggle-preset == button-lines-arrow-1) {
|
||||
@include button-lines();
|
||||
@include button-lines__arrow-1();
|
||||
}
|
||||
|
||||
@if ($rd-menu-toggle-preset == button-lines-arrow-2) {
|
||||
@include button-lines();
|
||||
@include button-lines__arrow-2();
|
||||
}
|
||||
|
||||
@if ($rd-menu-toggle-preset == button-lines-minus-1) {
|
||||
@include button-lines();
|
||||
@include button-lines__minus-1();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding-top: $rd-mobilepanel-height;
|
||||
}
|
||||
|
||||
.rd-mobilemenu, .rd-mobilepanel {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 359px) {
|
||||
.rd-mobilepanel_title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
/*==========================================================
|
||||
NORMALIZE
|
||||
==========================================================*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='button']{
|
||||
background: none;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
outline-offset: 0;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/*================== RD Parallax ======================*/
|
||||
.parallax {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&_image, &_pattern{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
&_image{
|
||||
background-repeat: no-repeat;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&_pattern{
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
&_cnt{
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
|
||||
&:after {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&_1 {
|
||||
padding-top: 115px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
&_2 {
|
||||
padding-top: 115px;
|
||||
padding-bottom: 110px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/*================== Stuck menu ======================*/
|
||||
|
||||
.isStuck {
|
||||
background: rgba(248,119,2,.9);
|
||||
border-bottom: 1px solid #fff;
|
||||
z-index: 999;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 979px) {
|
||||
.isStuck {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/*================== Thumbnail ======================*/
|
||||
$overlay-bg: #000;
|
||||
$overlay-bg-opacity: 0.5;
|
||||
$overlay-icon: $fa-expand;
|
||||
$overlay-icon-size: 30px;
|
||||
$overlay-icon-color: #fff;
|
||||
|
||||
.thumb {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@include transition(.5s all ease);
|
||||
}
|
||||
|
||||
&_overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
@include transition(.3s all ease);
|
||||
color: $overlay-icon-color;
|
||||
background: transparent;
|
||||
|
||||
&:before {
|
||||
content: $overlay-icon;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font: 400 $overlay-icon-size $fa;
|
||||
line-height: $overlay-icon-size;
|
||||
margin-top: -($overlay-icon-size / 2);
|
||||
text-align: center;
|
||||
|
||||
.lt-ie9 & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.thumb_overlay {
|
||||
opacity: 1;
|
||||
@include background($overlay-bg, $overlay-bg-opacity);
|
||||
|
||||
.lt-ie9 &:before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
//@include transform(scale(1.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/*================== ToTop ======================*/
|
||||
.toTop {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
line-height: 46px;
|
||||
color: #fff;
|
||||
background: $secondary;
|
||||
border-radius: 50%;
|
||||
@include box-shadow(4px 4px 8px 0 rgba(#000, .4));
|
||||
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 40px;
|
||||
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
z-index: 20;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: $primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile .toTop,
|
||||
.tablet .toTop{
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
//========================================================
|
||||
// Variables
|
||||
//=========================================================
|
||||
|
||||
//Backgrounds
|
||||
$footer-bg: #fff;
|
||||
|
||||
//Colors
|
||||
$default: #3f4853;
|
||||
$primary: #f87702;
|
||||
$secondary: #3f4853;
|
||||
|
||||
//Fonts
|
||||
$default-font: 'Quattrocento', serif;
|
||||
@@ -0,0 +1,374 @@
|
||||
@import "_mixins.scss";
|
||||
@import "_variables.scss";
|
||||
|
||||
/*========================================================
|
||||
Contact Form
|
||||
=========================================================*/
|
||||
$input-ff: $default-font;
|
||||
$input-font: 400 18px $input-ff;
|
||||
$input-height: 44px;
|
||||
$input-line-height: 24px;
|
||||
|
||||
$input-color: #343434;
|
||||
$input-bg: #fff;
|
||||
$input-border: 1px solid #a2a2a2;
|
||||
|
||||
$input-padding: (($input-height - $input-line-height) / 2) 17px
|
||||
(($input-height - $input-line-height) / 2);
|
||||
$texarea-height: 158px;
|
||||
$label-margin: 0 0 23px;
|
||||
$texarea-margin: 40px 0 5px;
|
||||
|
||||
/* Contact Form Basic Styles
|
||||
========================================================*/
|
||||
#contact-form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#contact-form label {
|
||||
@include box-sizing(border-box);
|
||||
position: relative;
|
||||
display: block;
|
||||
letter-spacing: normal;
|
||||
margin: $label-margin;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#contact-form label.message {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: $texarea-margin;
|
||||
}
|
||||
|
||||
#contact-form fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@mixin input-styles() {
|
||||
font: $input-font;
|
||||
line-height: $input-line-height;
|
||||
padding: $input-padding;
|
||||
color: $input-color;
|
||||
}
|
||||
|
||||
@mixin input-styles2() {
|
||||
background-color: $input-bg;
|
||||
border: none;
|
||||
border-bottom: $input-border;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Contact Form Placeholder Styles
|
||||
========================================================*/
|
||||
|
||||
#contact-form ._placeholder {
|
||||
@include box-sizing(border-box);
|
||||
@include input-styles();
|
||||
width: 100% !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#contact-form ._placeholder.focused {
|
||||
@include opacity(0.4);
|
||||
}
|
||||
|
||||
#contact-form ._placeholder.hidden,
|
||||
#contact-form .file ._placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Contact Form Input
|
||||
========================================================*/
|
||||
#contact-form input[type='text'] {
|
||||
@include box-sizing(border-box);
|
||||
@include input-styles();
|
||||
@include input-styles2();
|
||||
height: $input-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#contact-form .input-wrap {
|
||||
@media (min-width: 980px) {
|
||||
@include clearfix();
|
||||
|
||||
label {
|
||||
width: 49%;
|
||||
float: left;
|
||||
|
||||
& + label {
|
||||
margin-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact Form Buttons
|
||||
========================================================*/
|
||||
#contact-form .btn {
|
||||
padding-left: 55px;
|
||||
padding-right: 55px;
|
||||
}
|
||||
|
||||
/* Contact Form Textarea
|
||||
========================================================*/
|
||||
#contact-form textarea {
|
||||
display: block;
|
||||
@include box-sizing(border-box);
|
||||
@include input-styles();
|
||||
@include input-styles2();
|
||||
border: $input-border;
|
||||
resize: none;
|
||||
height: $texarea-height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Contact Form Error messages
|
||||
========================================================*/
|
||||
#contact-form .empty-message,
|
||||
#contact-form .error-message {
|
||||
@include transition(0.3s ease-in height);
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 2px;
|
||||
color: red;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
font-size: 11px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#contact-form .invalid .error-message,
|
||||
#contact-form .empty .empty-message {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
/* Contact Form Processing Box
|
||||
========================================================*/
|
||||
#contact-form .contact-form-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@include opacity(0);
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background: rgba(247, 247, 247, 0.48) url(data:image/gif;base64,R0lGODlhIAAKAIAAAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQAAACwAAAAAIAAKAAACD4yPqcvtD6OctNqLs94cFwAh+QQJCQAFACwAAAAAIAAKAILs7uz8+vz09vT08vT8/vz///8AAAAAAAADMVgx3FIwykmhADjjVzsdmjZ4ZASG2FiSJ6quXRu+8IemdXwDdB5dt54PsgA1BoThJAEAIfkECQkACAAsAAAAACAACgCDtLK03Nrc1NLUvL68/Pr81NbUxMLE/P78////AAAAAAAAAAAAAAAAAAAAAAAAAAAABDjwBGMGNeWgzbv/SACM5CiAKGiU5ZC+3MqOLvwOM22/8lzvqhzgB/TgcsQipyA0KD8HAe5o0Tw7EQAh+QQJCQAMACwAAAAAIAAKAIN0dnS8vrysrqyMioy0trSUkpT8+vy0srSMjoy8uryUlpT8/vz///8AAAAAAAAAAAAEPnAFVWpRZLHNu/9MAIzkeIAoqJQlkr5cwZIDDK8zUNupPA4/HS+Fm+2GnyLriOwkaKVT07M4FAbYQeFgmHoiACH5BAkJAAsALAAAAAAgAAoAg7SytNza3Ozu7NTS1Pz6/Ly+vPT29PTy9NTW1Pz+/MTCxP///wAAAAAAAAAAAAAAAARUMAWlClUorUWO/8YmjmIAnOg5LIbgvm5IkkqaFssBw8dM2yjcjucbFYAnnG4o6BU3NaSQ2XxCkQDhcud8HqULatWKwCoWCWq3mBgcvxYNy9P8yJ8RACH5BAkJAAsALAAAAAAgAAoAg7SytNza3Ozu7NTS1Pz6/Ly+vPT29PTy9NTW1Pz+/MTCxP///wAAAAAAAAAAAAAAAARUcJFDq1krBaUKV0iCjSRmCGiKXgHgvu5QzoeqHosCw8Vc1jYUTrdz9XwjYBBXKBqRyaAw5wQcoUobs3pFZm9UZ9d3kuIQVQV0NKlVDiLCoGmNXdYRACH5BAkJAAwALAAAAAAgAAoAg3R2dLy+vKyurIyKjLS2tJSSlPz6/LSytIyOjLy6vJSWlPz+/P///wAAAAAAAAAAAAQ+kMlJ2Qqq6KLIqmBIBUBploeoVsp5ImvMFK45yGtbAzcu0qVBkOcT6Wq9ImtHVFYStlPKSVkcCoPsoHAwxCIAIfkECQkACwAsAAAAACAACgCDtLK03Nrc7O7s1NLU/Pr8vL689Pb09PL01NbU/P78xMLE////AAAAAAAAAAAAAAAABFZwyUlXCkqVrFCSxCGORmUuAaCu6rAYQizHxEkpLFssxzwftgkup9r5fkFJgVjkHWPA5JBofAqiwWnO2DtibUtm1ZpcIJgAhcX6PSUGy/Dm8xJdr4dEBAAh+QQJCQALACwAAAAAIAAKAIO0srTc2tzs7uzU0tT8+vy8vrz09vT08vTU1tT8/vzEwsT///8AAAAAAAAAAAAAAAAEVXDJSSU5OBuZglLFpyBJZRpCqqZbALzwO5jVsa7HosRxQVO2Wyq34718P0lQmCsYj0mlcKh7ApDJ5a1pBUQXWlz1if2hpjmEVfFdXGyZQ4kwcF5liQgAIfkECQkADAAsAAAAACAACgCDdHZ0vL68rK6sjIqMtLa0lJKU/Pr8tLK0jI6MvLq8lJaU/P78////AAAAAAAAAAAABD6QyUmrZSuowosiyyVeAWCe5jGuk4KiBcsW7znIq1sDNy7SpkGQ5xPpar1i5fhKKicJG0rwrCwOhYF2UDgYIgAh+QQJCQAIACwAAAAAIAAKAIO0srTc2tzU0tS8vrz8+vzU1tTEwsT8/vz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAEOBDJSatFJxgztinHJV4BYJ6mMK6TgaIDy7qvGcvjUNv4SNe3nuVXE150u6BxUtgBDMvKQaBDdg4RACH5BAkJAAUALAAAAAAgAAoAguzu7Pz6/PT29PTy9Pz+/P///wAAAAAAAAMvWLrcrmHIKZ61Auitw/3LwHEDCIqjVpoXmq7s445w3MykLaeb7mS8mg8iAYgkhAQAOw==);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
#contact-form.processing .contact-form-loader {
|
||||
@include transition(all 0.3s ease-in);
|
||||
@include opacity(0.7);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Contact Form Modal
|
||||
========================================================*/
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#contact-form .modal {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
letter-spacing: normal;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
position: fixed;
|
||||
z-index: 1050;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: 0;
|
||||
font-family: $input-ff;
|
||||
font-size: 13px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#contact-form .modal h4 {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal.fade .modal-dialog {
|
||||
@include transition(transform 0.3s ease-out);
|
||||
@include transform(translate(0, -25%));
|
||||
}
|
||||
|
||||
.modal.in .modal-dialog {
|
||||
@include transform(translate(0, 0));
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #999999;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
||||
background-clip: padding-box;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
z-index: 1040;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.modal-backdrop.fade {
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
.modal-backdrop.in {
|
||||
@include opacity(0.5);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
min-height: 16.42857143px;
|
||||
}
|
||||
|
||||
.modal-header .close {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 600px;
|
||||
margin: 66px auto 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact Form Close icon
|
||||
========================================================*/
|
||||
.close {
|
||||
float: right;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #000000;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.2;
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Contact Form reCaptcha
|
||||
========================================================*/
|
||||
|
||||
#contact-form label.recaptcha{
|
||||
max-width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#captchadiv{
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
background: #FFF;
|
||||
|
||||
.empty-message + &{
|
||||
border: 1px solid #DCDCDC;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#recaptcha_table{
|
||||
border: none!important;
|
||||
|
||||
input[type="text"]{
|
||||
background: #FFF;
|
||||
border: 1px solid #CDCDCD!important;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#captchadiv{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#recaptcha_table{
|
||||
width: 100%;
|
||||
|
||||
tr:first-child td + td{
|
||||
padding-right: 14px!important;
|
||||
}
|
||||
|
||||
tr:first-child td + td + td{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#recaptcha_image{
|
||||
width: 358px!important;
|
||||
}
|
||||
|
||||
#recaptcha_response_field{
|
||||
width: 360px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
#recaptcha_image{
|
||||
width: 208px!important;
|
||||
}
|
||||
|
||||
#recaptcha_response_field{
|
||||
width: 210px!important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*================== GOOGLE MAP ======================*/
|
||||
$map-height: 490px;
|
||||
$map-height-767: 250px;
|
||||
$map-height-479: 200px;
|
||||
|
||||
.map {
|
||||
&_model{
|
||||
height: $map-height;
|
||||
|
||||
img {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
height: $map-height-767;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
height: $map-height-479;
|
||||
}
|
||||
}
|
||||
|
||||
&_locations{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
@import "_normalize.scss";
|
||||
@import "_mixins.scss";
|
||||
|
||||
// Core variables and mixins
|
||||
|
||||
// -------------------------
|
||||
$gridColumns: 12;
|
||||
|
||||
//Default 1200px min
|
||||
$gridColumnWidth: 70px;
|
||||
$gridGutterWidth: 30px;
|
||||
|
||||
//940px grid
|
||||
$gridColumnWidth980: 60px;
|
||||
$gridGutterWidth980: 20px;
|
||||
|
||||
// 768px-979px
|
||||
$gridColumnWidth768: 44px;
|
||||
$gridGutterWidth768: 20px;
|
||||
|
||||
// Fluid
|
||||
$fluidGridColumnWidth: 8.3333333333333333333%;
|
||||
|
||||
@mixin buildGrid($gridColumnWidth, $gridGutterWidth) {
|
||||
|
||||
.container, .container-fluid {
|
||||
width: ($gridColumnWidth * $gridColumns) + ($gridGutterWidth * ($gridColumns - 1));
|
||||
}
|
||||
|
||||
.container {
|
||||
.row {
|
||||
margin-left: $gridGutterWidth * -1;
|
||||
}
|
||||
|
||||
[class*="grid_"] {
|
||||
float: left;
|
||||
min-height: 1px; // prevent collapsing columns
|
||||
margin-left: $gridGutterWidth;
|
||||
}
|
||||
|
||||
@for $i from 1 to $gridColumns + 1 {
|
||||
.grid_#{$i} {
|
||||
width: ($gridColumnWidth * $i) + ($gridGutterWidth * ($i - 1));
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 to $gridColumns + 1 {
|
||||
.preffix_#{$i} {
|
||||
margin-left: ($gridColumnWidth * $i) + ($gridGutterWidth * ($i + 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid System
|
||||
// -----------
|
||||
.container, .container-fluid {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include box-sizing(border-box);
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
.row {
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
/*=============== Fluid grid ====================*/
|
||||
.container-fluid {
|
||||
[class*="grid_"] {
|
||||
float: left;
|
||||
width: $fluidGridColumnWidth;
|
||||
min-height: 1px; // prevent collapsing columns
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 to $gridColumns + 1 {
|
||||
.container-fluid{
|
||||
.grid_#{$i} {
|
||||
width: ($fluidGridColumnWidth * $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 to $gridColumns + 1 {
|
||||
.container-fluid .preffix_#{$i} {
|
||||
margin-left: ($gridColumnWidth * $i);
|
||||
}
|
||||
}
|
||||
|
||||
@include buildGrid($gridColumnWidth, $gridGutterWidth);
|
||||
|
||||
@media (min-width: 980px) and (max-width: 1199px) {
|
||||
@include buildGrid($gridColumnWidth980, $gridGutterWidth980);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
@include buildGrid($gridColumnWidth768, $gridGutterWidth768);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container, .container-fluid {
|
||||
width: 420px;
|
||||
padding: 0;
|
||||
}
|
||||
.container .row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row + .row,
|
||||
[class*="grid_"] + [class*="grid_"] {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.container, .container-fluid {
|
||||
[class*="grid_"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container, .container-fluid {
|
||||
width: 300px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,788 @@
|
||||
@import "_mixins.scss";
|
||||
@import "_variables.scss";
|
||||
@import "animate.css";
|
||||
|
||||
// Fonts
|
||||
@import url(//fonts.googleapis.com/css?family=Quattrocento:400,700|Raleway:400,700,800);
|
||||
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
|
||||
|
||||
|
||||
/*========================================================
|
||||
Main Styles
|
||||
=========================================================*/
|
||||
body {
|
||||
background: $footer-bg;
|
||||
color: $default;
|
||||
font: 400 18px/36px $default-font;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 42px;
|
||||
line-height: 50px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 10px auto 0;
|
||||
width: 170px;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
color: #343434;
|
||||
letter-spacing: .7px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 25px auto 0;
|
||||
width: 170px;
|
||||
height: 1px;
|
||||
background: #5d5d5d;
|
||||
}
|
||||
}
|
||||
|
||||
h4{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h6{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
h2, h3, h5 {
|
||||
a:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
h4, h6 {
|
||||
a:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
p, .marked-list, .inline-list{
|
||||
a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fa{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@include transition(.3s);
|
||||
}
|
||||
|
||||
a[href^="tel:"],
|
||||
a[href^="callto:"] {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fa{
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
[class*='fa-']{
|
||||
&:before{
|
||||
font-weight: 400;
|
||||
font-family: $fa;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
overflow: hidden;
|
||||
min-height: 500px;
|
||||
|
||||
.lt-ie9 & {
|
||||
min-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
/*=======================================================
|
||||
Main Layout
|
||||
=========================================================*/
|
||||
|
||||
h2 + * {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
* + h4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h4 + * {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
* + h5 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
h5 + * {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
* + .btn, * + .btn2 {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
* + h6 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h3 + * {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
|
||||
/*=======================================================
|
||||
Components
|
||||
=========================================================*/
|
||||
|
||||
/*================== Brand ======================*/
|
||||
.brand {
|
||||
display: inline-block;
|
||||
&_name{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/*================== Backgrounds ======================*/
|
||||
.bg1{
|
||||
background: no-repeat url(../images/bg1.jpg) 0 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg2{
|
||||
background: no-repeat url(../images/bg2.jpg) 0 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg3{
|
||||
background: $primary;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
|
||||
&:after {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-img1 {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 1540px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
margin-right: 360px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-img2 {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 1540px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
margin-right: 5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*================== Icons ======================*/
|
||||
.fl-bigmug-line{
|
||||
font-size: 90px;
|
||||
line-height: 100px;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
/*================== Buttons ======================*/
|
||||
%btn{
|
||||
display: inline-block;
|
||||
border: 1px solid $primary;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .7px;
|
||||
border-radius: 3px;
|
||||
padding: 8px 40px;
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@extend %btn;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
@extend %btn;
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken(#fff, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
/*================== Box ======================*/
|
||||
.box {
|
||||
border: 1px solid #a2a2a2;
|
||||
padding: 27px 20px 35px;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
position: relative;
|
||||
@include clearfix();
|
||||
|
||||
&_over {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
|
||||
time {
|
||||
font-size: 120px;
|
||||
line-height: 110px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,.25);
|
||||
padding-bottom: 20px;
|
||||
|
||||
@media (max-width: 1500px) and (min-width: 980px) {
|
||||
font-size: 75px;
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_aside{
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
|
||||
@media (max-width: 979px) {
|
||||
float: none;
|
||||
margin-bottom: 30px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&_cnt__no-flow{
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.box3 {
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
|
||||
/*================== Lists ======================*/
|
||||
|
||||
.inline-list {
|
||||
text-transform: uppercase;
|
||||
|
||||
* + & {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.marked-list {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
& + li {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.marked-list1 {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
vertical-align: top;
|
||||
margin-top: 13px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
& + li {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
* + & {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-list {
|
||||
counter-reset: li;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: counter(li, decimal-leading-zero);
|
||||
counter-increment: li;
|
||||
display: inline-block;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
border-radius: 50%;
|
||||
background: $primary;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
font-size: 48px;
|
||||
line-height: 108px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
text-align: left;
|
||||
li {
|
||||
& + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-right: 70px;
|
||||
|
||||
&_right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&_no-flow {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&_text {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dots {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//================== Imports ======================
|
||||
@import "_menu.scss";
|
||||
@import "_navbar.scss";
|
||||
@import "_stuck-menu.scss";
|
||||
@import "_to-top.scss";
|
||||
@import "_parallax.scss";
|
||||
@import "_thumb.scss";
|
||||
|
||||
/*========================================================
|
||||
HEADER Section
|
||||
=========================================================*/
|
||||
header {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 27px;
|
||||
|
||||
.brand{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav{
|
||||
float: right;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
|
||||
.brand, .nav{
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-section {
|
||||
padding-top: 170px;
|
||||
padding-bottom: 195px;
|
||||
color: #fff;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*========================================================
|
||||
CONTENT Section
|
||||
=========================================================*/
|
||||
main {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.text1 {
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.full {
|
||||
@include clearfix();
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 420px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
width: 300px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
width: 20%;
|
||||
float: left;
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.box {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.box {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 979px) and (min-width: 768px) {
|
||||
width: 50%;
|
||||
|
||||
&:nth-child(2n) {
|
||||
.box {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(n+3) {
|
||||
.box {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
|
||||
& + .full-item {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mt1, .row.mt1 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.mt2 {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.mt3, .row.mt3 {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.mt4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.addr {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
|
||||
.fa {
|
||||
font-size: 48px;
|
||||
line-height: 53px;
|
||||
|
||||
& + * {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-mobile {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.center-wrap {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.helper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.quote {
|
||||
img + * {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
* + h5 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tl {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.terms {
|
||||
padding-top: 115px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
p + h5 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.policy-link {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
/*================== Well ======================*/
|
||||
.well1{
|
||||
padding-top: 130px;
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
|
||||
.well2 {
|
||||
padding-top: 120px;
|
||||
|
||||
@media (max-width: 979px) {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.well3 {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.well4 {
|
||||
padding-top: 118px;
|
||||
padding-bottom: 125px;
|
||||
}
|
||||
|
||||
|
||||
.well5 {
|
||||
padding-top: 115px;
|
||||
padding-bottom: 110px;
|
||||
}
|
||||
|
||||
.well6 {
|
||||
padding-top: 125px;
|
||||
padding-bottom: 135px;
|
||||
}
|
||||
|
||||
.well1, .well3, .well4, .well5, .well6 {
|
||||
@media (max-width: 979px) {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*========================================================
|
||||
FOOTER Styles
|
||||
=========================================================*/
|
||||
footer{
|
||||
padding-top: 80px;
|
||||
padding-bottom: 40px;
|
||||
color: #fff;
|
||||
|
||||
.copy {
|
||||
* + & {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
span, a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user