/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ============================
Carriage Services
Ink In My Face : #F15600
=============================*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
overflow-x: hidden;
width: 100%;
max-width: 100%;
border-top: 80px solid transparent;
}
body#home-page {
background: #fff;
border-top: none;
}
body#home-page.loading {
overflow: hidden;
height: 100vh;
width: 100%;
position: fixed;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
body#home-page #main-container {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
opacity: 1;
background: #fff;
}
body#home-page.loading #main-container {
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
body#home-page #home-overlay {
opacity: 0 !important;
z-index: -1;
}
body#home-page.loading #home-overlay {
opacity: 1 !important;
z-index: 100000;
}
html {
background: #fff;
color: #222;
font-size: 16px;
line-height: 1.5em;
font-family: coolvetica, sans-serif;
font-weight: 400;
}
body#home-page {
background: #fff;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
font-family: coolvetica, sans-serif;
margin:0;
padding: 0;
color: #154865;
}
h1, h2, h3 { margin-top:0; margin-bottom:0; line-height: 1.2em; }
h1 { font-size:2em; padding:20px 0; }
h2 { font-size:1.75em; padding:20px 0; }
h3 { font-size:1.5em; padding:20px 0; }
h4 {
line-height: 1.5em;
margin-bottom: 15px;
}
p {
font-weight: 400;
color: #333;
font-size: 1.25rem;
line-height: 1.65em;
margin-top: 0;
letter-spacing: .03em;
margin-right: auto;
margin-left: auto;
font-family: coolvetica, sans-serif;
}
li {
font-size: 1.25rem;
line-height: 1.65em;
}
p.two-thirds {
font-weight: 600;
}
p.large {
font-size: 1.2rem;
}
p.sub-text {
font-size: 1.2rem;
color: #999;
}
a {
color: #333;
text-decoration: none;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
h3.call-quote {
font-size: 2rem;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
margin-top: 30px;
margin-bottom: 50px;
border-top: 3px solid #eee;
border-bottom: 3px solid #eee;
width: 90%;
margin-right: auto;
margin-left: auto;
}
h3.sub-title {
padding-bottom: 5px;
text-align: left;
font-size: 2.2rem;
}
a:hover {
color: #ccc;
text-decoration: none;
}
.gold-text {
color: #DCAD55 !important;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* Layout Styles
-------------------------------------------------------------------------------*/
body {
overflow-x: hidden;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.section {
padding: 0;
width: 100%;
margin-right: auto;
margin-left: auto;
position: relative;
}
.section.tall {
padding-top: 80px;
padding-bottom: 80px;
}
.flex {
width: 100%;
max-width: 1120px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
position: relative;
}
.padded {
padding-top: 60px;
padding-bottom: 60px;
}
.box-centered {
margin-right: auto;
margin-left: auto;
}
hr.clear {
width: 100%;
height: 60px;
background: transparent;
border: none;
padding: 0;
margin: 0px auto;
}
hr.clear-pretty {
width: 25%;
height: 6px;
border: none;
padding: 0;
margin: 45px auto 45px;
background: #9d4f14;
max-width: 180px;
}
hr.small-clear {
margin-top: 30px;
margin-bottom: 30px;
height: 1px;
background: #d1d4d6;
margin-left: 0;
max-width: 80px;
}
img.clear-pretty-bg {
width: 90%;
margin: 30px auto;
padding: 0;
display: block;
text-align: center;
}
hr.clear-pretty.short {
margin-top: 15px;
margin-bottom: 15px;
}
hr.clear-pretty.dark {
background: #333;
}
hr.clear-side {
width: 25%;
clear: both;
height: 1px;
background: #364959;
margin: 25px 0;
display: block;
}
hr.clear-side.white {
background: #fff;
}
hr.menu-clear {
width: 100%;
clear: both;
height: 1px;
border: none;
margin-top: 20px;
margin-bottom: 20px;
}
hr.clear-none {
border: none;
width: 100%;
height: 0;
margin: 0 auto;
padding: 0;
background: transparent;
display: block;
clear: both;
}
.text-center {
text-align: center;
}
hr.test-clear {
margin: 20px auto;
height: 1px;
background: #b1b1b1;
display: block;
width: 40%;
clear: both;
padding: 0;
border: none;
}
hr.content-clear {
width: 66.66%;
border: none;
padding: 0;
margin: 60px auto;
clear: both;
height: 1px;
background: #eee;
float:right;
}
.image-heading {
max-width: 640px;
width: 100%;
margin: 40px auto 30px;
text-align: center;
display: block;
}
.texture-bg {
background: url(../img/wine-bg.png);
}
.full-width {
width: 100%;
}
.full-width-section {
width: 100%;
padding-top: 110px;
padding-bottom: 110px;
margin: 0 auto;
position: relative;
}
.full-width-section.tall-screen {
padding-top: 8vh;
padding-bottom: 8vh;
}
.full-width-section.tall-screen .button {
margin-left: 0 !important;
}
.sans-bottom {
margin-bottom: 0 !important;
}
.sans-padding-bottom {
padding-bottom: 0 !important;
}
.sans-top {
margin-top: 0 !important;
}
.full-bg {
transform: scale(1,1);
background-size: cover;
background-repeat: no-repeat;
background-position: left center;
padding-top: 80px;
padding-bottom: 80px;
}
.light-gray-bg {
background: #F5F5F5 !important;
}
.white-bg {
background: #fff !important;
}
body .white-button {
background: #fff;
background-color: #fff;
color: #0c3227;
}
body .button.white.solid {
background: #fff;
color: #0c3227;
}
body .button.white.solid:hover {
background: #ccc;
}
body .white-button:hover {
background: #0c3227;
color: #fff;
}
.gray-bg {
background: #f5f5f5;
}
.slick-track {
display: flex !important;
}
.slick-slide {
height: inherit !important;
}
.slick-dots li button:before {
width: 10px;
height: 10px;
font-size: 18px !important;
}
.slick-dots {
bottom: -40px;
}
.text-intro h2 {
padding-top: 0;
padding-bottom: 35px;
font-size: 4.1rem;
}
.video-box {
width: 100%;
padding-top: 42.5%;
position: relative;
margin: 0 auto 30px;
border-radius: 30px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
overflow: hidden;
}
.video-box iframe,.video-box video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Typography Styles
---------------------------------------*/
h2.section-title {
font-size: 3rem;
line-height: 1.2em;
padding-top: 0;
text-transform: capitalize;
padding-bottom: 30px;
}
.section-title {
text-transform: uppercase;
}
h2.section-title.large {
font-size: 3.2rem;
font-weight: 600;
text-transform: uppercase;
}
h2.section-title.breaker {
margin-top: 60px;
}
h3.small-title {
color: #333;
font-weight: 600;
font-size: 1.2rem;
text-transform: uppercase;
padding-bottom: 10px;
}
p.note {
font-style: italic;
color: #b1b1b1;
margin-top: 0;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 2px;
background: #E1BE63;
top: 50%;
width: 150px;
}
.fancy.small span:before,
.fancy.small span:after {
content: "";
position: absolute;
height: 2px;
background: #E1BE63;
top: 50%;
width: 110px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
.featured-button {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
z-index: 106;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
.fancy-block-quote {
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 30px auto;
position: relative;
padding: 30px;
line-height: 1.2em;
text-align: center;
font-family: coolvetica, sans-serif;
font-size: 1.8rem;
color: #aaa;
font-style: italic;
}
.fancy-block-quote:before {
color: #aaa;
font-weight: 600;
content: open-quote;
font-size: 60px;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
position: absolute;
left: 0;
top: 40px;
font-family: georgia, "times new roman", serif;
z-index: -1;
font-style: normal !important;
}
.fancy-block-quote:after {
color: #aaa;
content: close-quote;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
position: absolute;
font-size: 80px;
right: -20px;
bottom: 0px;
font-family: georgia, "times new roman", serif;
z-index: -1;
font-style: normal !important;
}
#main-container {
position: relative;
}
#main-container .four-fifths.right {
max-width: 1400px;
}
.quote-end:after {
color: #fff;
content: close-quote;
font-size: 120px;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
position: absolute;
right: -17px;
bottom: -30px;
font-family: "times new roman";
z-index: 1;
opacity: .6;
}
.quote-beg:before {
color: #fff;
content: open-quote;
font-size: 120px;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
position: absolute;
left: -60px;
top: 20px;
font-family: arial;
z-index: 1;
font-family: "times new roman";
opacity: .6;
}
.super-title {
font-family: coolvetica, sans-serif;
text-transform: uppercase;
font-weight: 300;
color: #333;
padding: 0 0 15px;
font-size: 1.5rem;
letter-spacing: 0.18em
}
.white-text {
color: #fff !important;
}
/* Header Styles
---------------------------------------*/
body #header {
z-index: 1000000;
}
body #header ul.dropdown {
background-color: rgba(255,255,255,.8);
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
body #header.scrolling ul.dropdown {
}
body #header.scrolling ul#nav-list > li > a {
color: #154865;
}
body #header.scrolling ul#nav-list .contact-button a {
color: #fff;
font-size: .875rem;
}
body #header.scrolling #top-bar {
top: -200px;
}
body #header.scrolling #main-nav {
margin-top: 0px;
}
#main-nav ul#nav-list > li > a {
color: #fff;
font-size: 1.2rem;
font-weight: 400;
text-transform: capitalize;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
border-radius: 50%;
letter-spacing: .14em;
}
#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
#header.scrolling {
background: #fff;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
height: 80px;
}
#header #logo {
display: block;
margin-left: 20px;
width: auto;
height: 66px;
position: absolute;
top: 20px;
left: 1.25%;
padding-left: 10px;
padding-right: 10px;
z-index: 10000000;
background-image: url(../img/top-logo-white.png);
background-size: auto 100%;
width: 170px;
top: 85px;
background-position: center center;
background-repeat: no-repeat;
}
#header.scrolling #logo {
top: 8px;
background-image: url(../img/top-logo.png);
}
#header.scrolling #top-bar a{
color: #154865;
}
/* Main Navigation
---------------------------------------*/
#top-bar {
text-align: right;
padding-right: 65px;
padding-top: 10px;
position: absolute;
display: flex;
justify-content: space-around;
right: 1.25%;
top:0;
}
#top-bar a {
color: #fff;
display: inline-block;
margin-right: 1em;
font-size: .875rem;
line-height: 30px;
}
#top-bar .contact-box {
padding-top: 5px;
margin-top: 15px;
}
#top-bar .contact-box a {
border-right: 2px solid #fff;
padding-right: 20px;
}
#top-bar .social-box {
padding-left: 15px;
margin-top: 5px;
}
#top-bar .social-box a {
font-size: 1.4rem;
line-height: 60px;
display: inline-block;
}
/* Main Navigation
---------------------------------------*/
#main-nav {
width: 95%;
float: right;
padding-right: 60px;
margin-right: 2.5%;
border-top: 0.5px solid #fff;
margin-top: 68px;
padding-top: 25px;
}
#main-nav ul#nav-list {
list-style-type: none;
width: auto;
margin: 0 auto;
padding: 0;
position: relative;
}
#main-nav li.dropdown:hover > ul.dropdown {
overflow: visible;
height: auto;
padding-top: 10px;
z-index: 10000;
}
#header #main-nav li.dropdown:hover ul.dropdown {
background: rgba(41,68,43,.95);
position: absolute;
left: 0;
top: 100%;
border-top: 1px solid #fff;
}
#main-nav ul#nav-list > li {
float: right;
padding-left: 1em;
padding-right: 1em;
text-align: center;
display: inline-block;
position: relative;
}
#main-nav ul#nav-list > li > a {
font-size:1rem;
display: block;
color: #fff;
text-align: center;
line-height: 40px;
font-family: coolvetica, sans-serif;
text-transform: uppercase;
}
#main-nav ul#nav-list > li > a {
color: #fff;
}
#main-nav ul.dropdown {
background: rgba(41,68,43,.95);
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
list-style-type: none;
position: absolute;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
z-index: -1;
position: absolute;
left: 0;
padding-left: 40px;
padding-right: 40px;
min-width: 230px;
}
#main-nav ul.dropdown li {
width: 100%;
text-align: left;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
padding-top: 2px;
padding-bottom: 2px;
}
#main-nav ul.dropdown li a {
font-size: 1.1rem;
display: block;
padding-top: 5px;
line-height: 1.1em;
padding-bottom: 5px;
color: #fff;
}
#main-nav ul.dropdown li a:hover {
color: #999;
}
#main-nav li.dropdown:hover ul.dropdown {
overflow: visible;
padding-top: 15px;
opacity: 1;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
padding-bottom: 15px;
padding-top: 15px;
font-family: coolvetica, sans-serif;
}
#main-nav .contact-button {
border: 2px solid #eee;
color: #fff;
border-radius: 0px 50px 50px 50px;
font-weight: 300;
}
#header.scrolling #main-nav .contact-button {
border-radius: 50px;
color: #154865;
border: 2px solid #dcad55;
border-radius: 0px 50px 50px 50px;
font-weight: 300;
}
#header.scrolling #main-nav .contact-button {
background: #dcad55;
}
/* Hero Styles
---------------------------------------*/
#pattern-overlay {
width: 100%;
opacity: .4;
height: 100%;
min-width: 100%;
min-height: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
z-index: 10;
min-height: 100vh;
}
#hero {
background: #000;
width: 100%;
position: relative;
height: auto;
max-height: 75vh;
height: 75vh;
overflow: hidden;
transform: scale(1,1);
background-position: center center;
background-repeat: no-repeat;
background-image: url(../img/hero-bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
#hero:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
z-index: 99;
}
#hero .hero-overlay {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 99;
display: block;
background-image: linear-gradient(180deg, rgba(26,45,64,.4), transparent 13%);
}
#hero .hero-content {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-45%);
z-index: 1000000;
opacity: 1;
padding: 40px;
}
#hero #bgvid {
width: auto;
margin: 0 auto;
min-height: 100vh;
display: block;
text-align: center;
}
#hero-content {
position: absolute;
top: 50%;
transform: translateY(-30%) translateX(-50%);
z-index: 2;
overflow: hidden;
width: 100%;
max-width: 80%;
z-index: 100000;
left: 50%;
text-align: center;
}
#hero-content h3 {
font-family: coolvetica, sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #fff;
padding: 0 0 15px;
font-size: 1.2rem;
letter-spacing: .04em;
}
#hero-content h2 {
font-size: 5.4rem;
color: #fff;
line-height: 1.1em;
padding-bottom: 30px;
text-shadow: 0 0 3px #777;
padding-top: 0;
}
#hero-content p {
font-weight: 500;
color: #fff;
font-size: 1rem;
margin-left: 0;
max-width: 500px;
margin-bottom: 40px;
}
#hero-content .hero-icon {
max-width: 180px;
text-align: center;
display: block;
}
#hero-content h4 {
font-size: 1.2em;
color: #fff;
width: 50%;
max-width: 500px;
padding-top: 0;
padding-bottom: 35px;
text-shadow: 0 0 4px #555;
}
#hero-content .button {
display: block;
margin-left: 0;
font-weight: 700;
margin-right: auto;
margin-left: auto;
}
#hero .down-arrow-box {
width: 210px;
height: 80px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 1000000;
text-align: center;
color: #fff;
}
#hero .down-arrow-box:hover {
cursor: pointer;
}
#hero .down-arrow-box .down-text {
color: #fff;
font-family: coolvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
}
span#down-arrow {
width: 21px;
height: 26px;
background-image: url(../img/down-arrow.png);
background-size: 100% auto;
position: absolute;
bottom: 10px;
left: 50%;
}
#hero video {
width: 100%;
position: relative;
opacity: 1;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
z-index: 1;
}
div#pattern-overlay {
width: 100%;
opacity: .3;
height: 100%;
min-width: 100%;
min-height: 100%;
z-index: 2;
background: url(https://cdn.shopify.com/s/files/1/2293/3447/t/2/assets/pattern.png?16855229085091195361);
position: absolute;
top: 0;
left: 0;
}
#hero .cta-box {
display: block;
width: 100%;
align-items: flex-start;
}
#hero .cta-box a {
float: left;
margin-right: 15px;
}
/*======================================
Video Popup
======================================*/
.video-popup {
position: fixed;
z-index: -1;
opacity: 0;
width: 90vw;
height: 90vh;
background: rgba(0,0,0,30);
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
opacity: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.video-popup.active {
z-index: 100000000;
opacity: 1;
}
.video-popup .close {
width: 40px;
height: 40px;
font-size: 16px;
position: absolute;
top: 0px;
right: 0px;
z-index: 1000000;
color: #154865;
background: #fefefe;
text-align: center;
line-height: 40px;
}
.video-popup .close:hover {
cursor: pointer;
}
.video-popup video {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/*======================================
Home Page
======================================*/
#home-swapper {
background: url(../img/tile-bg.png);
}
#point-swapper {
padding-top: 40px;
padding-bottom: 40px;
background: #f6f9fa;
}
#point-swapper-wrapper {
padding-right: 20px;
}
#point-swapper-wrapper span {
display: block;
background: #fff;
border-radius: 1px;
padding: 0 15px;
font-size: 1.3rem;
margin-bottom: 10px;
height: 80px;
line-height: 80px;
border: 1px solid #f5f5f5;
position: relative;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
font-weight: 600;
}
#point-swapper-wrapper span.active,
#point-swapper-wrapper span:hover {
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
background: #0c3227;
color: #fff;
border: none;
}
#point-swapper-wrapper span:after {
content: '';
width: 30px;
height: 30px;
background-image:url(../img/arrow-right.png);
background-size: 100% auto;
background-repeat: no-repeat;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
#point-swapper-wrapper span:hover {
cursor: pointer;
}
#point-swapper-wrapper span:hover:after,
#point-swapper-wrapper span.active:after {
background-image:url(../img/arrow-right-white.png);
}
#point-info-container {
padding-top: 0;
min-height: 70vh;
position: relative;
overflow: hidden;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-ms-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#point-info-container .point-info {
position: relative;
opacity: 0;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-ms-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
transform: translateY(20%);
z-index: -1;
padding: 0;
overflow: hidden;
height: 0;
}
#point-info-container .point-info.active {
opacity: 1;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
transform: translateY(0%);
z-index: 100;
z-index: 100;
display: block;
height: auto;
}
#point-info-container .point-wrapper {
padding: 60px;
padding-top: 0px;
}
#point-info-container .point-info h2,
#point-info-container .point-info h3,
#point-info-container .point-info span,
#point-info-container .point-info p {
color: #333;
}
#point-info-container .point-info .video-box iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: none;
}
#point-info-container p {
column-count: 2;
column-gap: 10px;
margin-bottom: 30px;
}
#point-info-container .button {
margin-left: 0;
}
#point-info-container .point-info h2 {
padding: 20px;
background: #0c3227;
color: #fff;
font-size: 2.4rem;
}
/*======================================
Home News Feed
======================================*/
#home-news-feed {
width: 100%;
position: relative;
background: #f5f5f5;
padding-top: 0;
padding-bottom: 0;
}
#home-news-feed .feed-block {
position: relative;
padding-left: 0px;
padding-right: 0px;
margin-left: 10px;
margin-right: 10px;
border-radius: 20px;
background: #154865;
overflow:hidden;
min-height: 340px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
margin-bottom: 10px;
}
#home-news-feed .feed-block:hover {
cursor: pointer;
background: #f5f5f5;
outline: 1px solid #aaa;
}
#home-news-feed .feed-block:hover h3 {
color: #154865
}
#home-news-feed #news-feed-slider {
opacity: 0;
transform: translateY(0);
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#home-news-feed #news-feed-slider.active {
transform: translateY(-20%);
position: relative;
opacity: 1;
}
#home-news-feed .feed-block img {
width: 100%;
margin-bottom: 10px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
#home-news-feed .feed-block h5,
#home-news-feed .feed-block h3 {
font-family: coolvetica, sans-serif;
padding-left: 15px;
padding-right: 15px;
}
#home-news-feed .feed-block h3 {
font-family: coolvetica, sans-serif;
font-size: 1.4rem;
color: #fff;
margin: 0 auto;
margin-top: 10px;
padding-top: 0;
font-weight: 600;
}
#home-news-feed .feed-block h5 {
font-size: .775rem;
color: #95a295;
font-weight: 600;
text-transform: uppercase;
color: #DCAD55;
font-size: .875rem;
padding-top: 15px;
}
#home-news-feed .slick-prev,
#testimonials .slick-prev {
width: 37px;
height: 37px;
display: block;
background-image: url(../img/box-arrow-left.png);
background-position: center center;
background-size: 100% 100%;
left: 60px;
z-index: 100;
top: 40%;
}
#home-news-feed .slick-next,
#testimonials .slick-next {
width: 37px;
height: 37px;
display: block;
top: 40%;
right: 60px;
background-image: url(../img/box-arrow-right.png);
background-position: center center;
background-size: 100% 100%;
}
.slick-prev:before, .slick-next:before {
display: none !important;
}
/*======================================
Home Sidepoints
======================================*/
#home-side-points {
background-image: url(../img/sidepoint-bg.jpg);
background-position: center center;
background-attachment: fixed;
}
#home-side-points .background-overlay {
opacity: .95;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: #242424;
background-image: linear-gradient(190deg,rgba(41,68,43,1) 0%,rgba(41,68,43,.09) 100%);
}
#home-side-points {
display: flex;
position: relative;
z-index: 100000;
justify-content: space-around;
}
#home-side-points .inner-wrapper {
z-index: 1000000;
}
#home-side-points h3 {
font-size: 2.8rem;
}
#sidepoint-links {
padding-left: 5%;
padding-right: 5%;
display: flex;
flex-direction: column;
text-align: left;
justify-content: center;
}
#sidepoint-links a:after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background-image: url(../img/arrow-right-white.png);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 1000;
}
#sidepoint-links a:hover:after {
background-image: url(../img/arrow-right.png);
}
#sidepoint-links a {
display: block;
color: #fff;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
border-bottom: 1px solid #ddd;
position: relative;
font-weight: 600;
position: relative;
}
#sidepoint-links a span {
background: #fff;
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
z-index: -1;
}
#sidepoint-links a:hover span {
width: 100%;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#sidepoint-links a:hover {
color: #154865;
padding-left: 10px;
}
#sidepoint-links a:first-child {
border-top: 1px solid #ddd;
}
/*======================================
Home Numbers
======================================*/
.culture-video h2 {
font-size: 4.1rem;
margin-bottom: 30px;
}
.numbers-call {
position: relative;
z-index: 10000;
}
.numbers-call .button {
}
.numbers-call h2 {
font-size: 4.1rem;
padding-top: 0;
}
.numbers-call .text-intro {
padding-right: 15px;
}
.number-row {
text-align: center;
}
.number-row.flex {
display: flex;
align-items: center;
justify-content: space-around;
}
.inner-wrapper.flex.reverse {
flex-direction: row-reverse;
}
.numbers-call .large-number {
font-size: 5.1rem;
padding-bottom: 0;
margin-bottom: 5px;
padding-top: 0;
color: #154865;
}
.numbers-block {
padding-left: 8%;
padding-right: 8%;
}
.number-row {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
padding-top: 15px;
}
.number-row.middle {
border-top: none;
border-bottom: none;
}
.number-row.flex .one-half:first-child {
border-right: 1px solid #ddd;
}
.numbers-call .image-container {
position: relative;
padding-right: 60px;
padding-left: 60px;
}
.numbers-call .image-container img {
width: 100%;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
position: relative;
z-index: 100;
}
.image-block {
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
position: relative;
overflow: hidden;
border-radius: 50px;
}
.numbers-call .image-bg {
position: absolute;
left: 0;
top: 0;
right: 0;
left: 0;
background: #154865;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
z-index: 1;
transform: translateX(-5%) translateY(5%);
width: 100%;
height: 100%;
}
.video-box-container .video-box {
overflow: hidden;
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
width: 75%;
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
.video-box-container .video-box iframe, .video-box-container .video-box video {
width: 100%;
position: absolute;
height: 100%;
left: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 20px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
.button-container {
display: flex;
justify-content: space-around;
text-align: center;
padding-top: 20px;
}
.button-container .download-box {
width: 31%;
margin-right: 2%;
margin-left: 0%;
text-align: center;
display: block;
position: relative;
background: #fff;
border-radius: 5px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
padding: 15px;
text-transform: uppercase;
font-weight: 500;
color: #154865 !important;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
font-size: .875rem;
}
.button-container .download-box:hover {
background: #27432a;
color: #fff !important;
background: #262626;
background: -moz-linear-gradient(left, #262626 0%, #154865 23%, #154865 100%);
background: -webkit-linear-gradient(left, #262626 0%,#154865 23%,#154865 100%);
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#154865',GradientType=1 );
}
.button-container .download-box img {
width: 66%;
display: block;
margin-right: auto;
margin-left: auto;
}
/*======================================
Home Intro Call
======================================*/
#intro-call {
background:#0c3227;
background: url(../img/call--intro-bg.png);
padding-top: 120px;
padding-bottom: 120px;
overflow: hidden;
position: relative;
}
#intro-call h3 {
}
#intro-call h2 {
color: #fff;
font-size: 3.4rem;
margin-top: 0;
padding-top: 0;
}
#intro-call p {
color: #fff;
margin-bottom: 40px;
}
#intro-call .quote-right {
width: 20%;
position: absolute;
right: 0;
top: -15%;
z-index: 1000;
opacity: .1;
transform: rotate(180deg);
}
#intro-call .quote-left {
width: 20%;
position: absolute;
left: 0;
opacity: .1;
bottom: -15%;
z-index: 1000;
}
/*======================================
Home Stacked Blocks
======================================*/
#home-stacked {
background: url(../img/tile-bg.png);
padding-top: 0;
padding-bottom: 180px;
}
#home-stacked .inner-wrapper {
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
padding-left: 0;
padding-right: 0;
max-width: 1200px;
transform: translateY(-30px);
border-radius: 50px;
overflow: hidden;
}
#home-stacked .block-row {
position: relative;
display: flex;
background: #fff;
overflow: hidden;
}
#home-stacked .block-row.reversed {
flex-direction: row-reverse;
}
#home-stacked .stacked-box {
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
padding-left: 100px;
padding-right: 100px;
}
#home-stacked h2 {
font-size: 4.1rem;
padding-top: 0;
margin-bottom: 30px;
}
#home-stacked span.gold-text {
display: block;
}
#home-stacked .stacked-box .button {
margin-left: 0;
}
#home-stacked .green-bg h3 {
color: #fff;
}
#home-stacked .green-bg p {
color: #fff;
}
#home-stacked .green-bg h2 {
color: #fff;
}
#recent-acquisitions .feed-container {
border-radius: 50px;
background: #fff;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
width: 90%;
margin-right: auto;
margin-left: auto;
padding: 40px;
}
#recent-acquisitions .super-title {
padding-bottom: 0;
}
#recent-acquisitions .slick-slide img {
width: 100%;
}
#recent-acquisitions .slick-prev,#recent-acquisitions .slick-next {
display: none !important;
}
#recent-acquisitions .timeline-feed-wrapper .feed-block {
box-shadow: none !important;
}
#recent-acquisitions {
font-size: 3.4rem;
padding-top: 0;
}
/*======================================
Home FAQ's
======================================*/
#home-faqs {
padding-top: 80px;
padding-bottom: 80px;
}
#home-faqs .inner-wrapper.flex {
display: flex;
align-items: center;
}
#home-faqs .three-fifths {
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
text-align: left;
}
#home-faqs .three-fifths h2,
#home-faqs .three-fifths p {
margin-left: 0;
}
#home-faqs .three-fifths h2 {
margin-bottom: 20px;
padding-right: 40px;
}
#home-faqs .faq-wrapper {
background: #fff;
-webkit-box-shadow: -30px 15px 30px 0 rgba(0, 0, 0, .19);
box-shadow: 0px 10px 30px 0 rgba(0, 0, 0,.15);
padding: 0px;
border-radius: 20px;
margin-bottom: 20px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
overflow: hidden;
}
#home-faqs h3 {
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
#home-faqs .faq-wrapper.active,
#home-faqs .faq-wrapper:hover {
background: #262626;
cursor: pointer;
background: -moz-linear-gradient(left, #262626 0%, #154865 23%, #154865 100%);
background: -webkit-linear-gradient(left, #262626 0%,#154865 23%,#154865 100%);
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%);
}
#home-faqs .faq-wrapper.active h3,
#home-faqs .faq-wrapper:hover h3 {
color: #fff;
}
#home-faqs .three-fifths h2 {
font-size: 4.1rem;
}
#home-faqs .faq-answer {
height: auto;
max-height: 0;
overflow: hidden;
background: #fff;
padding-left: 20px;
padding-right: 20px;
padding-top: 0;
padding-bottom: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#home-faqs .faq-wrapper.active .faq-answer {
max-height: 10000px;
padding-top: 20px;
padding-bottom: 20px;
}
/*======================================
Home Video
======================================*/
#carriage-101 {
background: #f5f5f5;
}
#carriage-101 h2 {
font-size: 4.1rem;
}
#carriage-101 .step-card.video img {
width: 100%;
margin: 0 auto;
padding: 0;
}
.step-card.video h3 {
color: #154865 !important;
font-size: 2.1rem;
}
#carriage-101 .step-card:hover {
cursor: pointer;
}
#carriage-101 .step-card:hover .partner-info {
cursor: pointer;
background: #262626;
cursor: pointer;
background: -moz-linear-gradient(left, #262626 0%, #154865 23%, #154865 100%);
background: -webkit-linear-gradient(left, #262626 0%,#154865 23%,#154865 100%);
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%);
}
#carriage-101 .step-card:hover .partner-info h3 {
color: #fff !important;
}
#carriage-101 .step-card .partner-info {
height: 18vh;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
/*=====================================
App Callout
=====================================*/
#app-callout {
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%);
padding-top: 60px;
padding-bottom: 60px;
}
#app-callout h2 {
font-size: 3.4rem;
color: #fff;
}
#app-callout p {
color: #fff;
font-size: 1.4rem;
}
/*=====================================
Meet The Team
=======================================*/
#meet-the-team {
background: url(../img/team-pattern.png);
}
#meet-the-team-box {
width: 100%;
max-width: 1400PX;
background: #fff;
border-radius: 30px;
padding: 30px;
-webkit-box-shadow: -30px 15px 30px 0 rgba(0, 0, 0, .19);
box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, .15);
display: flex;
justify-content: space-around;
align-items: center;
}
#meet-the-team-box .leader-card {
position: relative;
text-align: center;
}
#meet-the-team-box .leader-card h4 {
font-size: 1.4rem;
padding-bottom: 5px;
margin-bottom: 0;
}
#meet-the-team-box .leader-card h3 {
font-size: .875rem;
padding-top: 0;
margin-top: 0;
font-family: coolvetica, sans-serif;
font-weight: 300;
max-width: 66%;
display: block;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#meet-the-team-box .leader-card img {
width: 50%;
margin-right: auto;
margin-left: auto;
text-align: center;
display: block;
margin-bottom: 20px;
}
#meet-the-team-box .team-text {
padding-left: 40px;
}
/*=====================================
Important Docs
=======================================*/
#important-docs {
background: #fff;
}
#important-docs .document-wrapper {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
}
#important-docs .document-wrapper a {
display: block;
text-align: center;
padding: 20px 15px;
width: 45%;
margin-left: 2.5%;
margin-right: 2.5%;
font-size: 1.4rem;
padding-top: 15px;
padding-bottoM: 15px;
border-radius: 20px;
background: #fff;
-webkit-box-shadow: -30px 15px 30px 0 rgba(0, 0, 0, .19);
box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, .15);
margin-bottom: 50px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#important-docs .document-wrapper a:hover {
background: #27432a;
color: #fff !important;
background: #262626;
background: -moz-linear-gradient(left, #262626 0%, #154865 23%, #154865 100%);
background: -webkit-linear-gradient(left, #262626 0%,#154865 23%,#154865 100%);
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#154865',GradientType=1 );
}
/*======================================
Our Services
=======================================*/
#our-services {
background: url(../img/tile-bg.png);
}
#our-services h3.super-title {
font-family: coolvetica, sans-serif;
text-align: left;
text-transform: uppercase;
padding: 0 0 15px;
font-size: .875rem;
color: #0c3227;
letter-spacing: .04em;
font-weight: 700;
}
#our-services .intro-p {
max-width: 600px;
}
#services-container {
padding-left: 40px;
padding-right: 40px;
flex-wrap: wrap;
padding-top: 30px;
margin-bottom: 30px;
}
#our-services .service-block {
width: 100%;
border-radius: 2px;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 2%;
padding: 0;
text-align: center;
padding-bottom: 30px;
display: flex;
}
#our-services .service-block:nth-child(odd) {
flex-direction: row-reverse;
}
#our-services .service-block .property-info {
width: 48%;
margin-right: auto;
margin-left: auto;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
padding: 40px;
}
#our-services .service-block img {
width: 52%;
display: block;
text-align: center;
margin: 0 auto 0px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
#our-services .service-block h3 {
margin-bottom: 10px;
padding-bottom: 0;
color: #111;
font-family: coolvetica, sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: .875rem;
letter-spacing: .04em;
}
#our-services .service-block p {
margin-bottom: 20px;
color: #111;
text-align: left;
margin: 0 0 30px 0;
font-size: 3rem;
font-family: coolvetica, sans-serif;
color: #0c3227;
line-height: 1.1em;
}
#our-services .service-block .button {
max-width: 210px;
float: left;
margin-left: 0;
margin-right: 0;
}
#our-services .service-block .button:hover {
background: #154865;
color: #fff;
}
/* Credit Points
---------------------------------------*/
#home-quotes {
padding-top: 60px;
color: #9ab0bd !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
#home-quotes h3.super-title {
font-weight: 600 !important;
}
#home-quotes h2 {
color: #154865 !important;
font-size: 2.8rem;
}
#home-quotes h2.section-title {
padding-top: 0;
text-transform: capitalize;
margin-bottom: 30px;
}
#home-quotes h2 span {
color: #154865 !important;
}
#home-quotes .flex {
display: flex;
align-items: center;
}
#home-quotes .inner-wrapper {
min-height: 55vh;
}
#home-quotes .inner-wrapper h2 {
color: #fff;
}
#home-quotes .background-quotes {
font-size: 100rem;
color: #333;
display: block;
opacity: .08;
position: absolute;
font-family: "playfair display";
transform: translateX(-50%) translateY(-90%);
LINE-HEIGHT: 1EM;
HEIGHT: 100%;
left: 50%;
top: 50%;
}
.asset-icon-blocks {
text-align: center;
margin-bottom: 60px;
padding-top: 00px;
padding-bottom: 0px;
}
.asset-icon-blocks .one-third {
width: 23%;
padding-top: 23%;
position: relative;
margin-left: .5%;
margin-right: .5%;
border-radius: 50%;
border: 6px solid #DCAD55;
display: inline-block;
}
.asset-icon-blocks .one-third .inner-content {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.asset-icon-blocks h2 {
font-size: 4.5rem;
color: #fff;
padding: 0;
}
.asset-icon-blocks p {
color: #fff;
}
.asset-icon-blocks h4 {
color: #364959;
padding-top: 30px;
clear: both;
font-size: 1.8rem;
}
hr.credit-clear {
width: 100%;
background: #9a4f15;
width: 100%;
margin-right: auto;
margin-left: auto;
margin-bottom: 60px;
max-width: 80%;
}
#counter-box {
border-radius: 40PX;
width: 100%;
max-width: 100%;
padding: 60px;
padding-top: 80px;
padding-left: 10px;
padding-right: 10px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 1000;
}
#counter-box .one-fourth {
width: 23%;
}
#credit-points {
background-image: url(https://www.carriageservices.com/wp-content/themes/carriage-services/img/counter-background.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
/* Home Fly Wheel
---------------------------------------*/
#home-fly-wheel {
background: #fff;
padding-top: 0;
padding-bottom: 0;
}
#flywheel-title {
position: absolute;
top: 20px;
left: 20px;
}
/* Blog Feed
---------------------------------------*/
#home-blog {
background: #fff;
}
#home-blog h3.super-title {
font-family: coolvetica, sans-serif;
text-align: center;
text-transform: uppercase;
padding: 0 0 15px;
font-size: 1rem;
color: #0c3227;
letter-spacing: .04em;
font-weight: 600;
}
#home-blog h2.section-title {
margin-bottom: 40px;
}
#home-blog .inner-wrapper {
margin-bottom: 60px;
}
#home-blog .post-card {
width: 31%;
margin-right: 1%;
margin-left: 1%;
border-radius: 3px;
overflow: hidden;
background: #f5f5f5;
text-align: center;
padding-bottom: 20px;
}
#home-blog .post-card .button {
max-width: 180px;
}
#home-blog .post-card img {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
}
#home-blog .post-card .news-excerpt {
padding: 15px;
text-align: center;
}
#home-blog .post-card .news-excerpt h3 {
font-size: .875rem;
font-family: coolvetica, sans-serif;
padding-bottom: 5px;
}
#home-blog .post-card .news-excerpt h2 {
padding-top: 10px;
}
.news-excerpt p {
width: 85%;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
}
/*=======================================
Press Releases
========================================*/
#press-release {
padding-top: 210px;
padding-bottom: 80px;
margin-bottom: -20px;
background-image: url(../img/home-map-bg.png);
background-position: top center;
background-size: 100% auto;
background-repeat: no-repeat;
}
#press-release .inner-wrapper {
display: flex;
padding-bottom: 120px;
margin-bottom: -40px;
}
#press-release .text-intro h2 {
font-size: 4.1rem;
padding-top: 0px;
padding-bottom: 30px;
}
#press-release .text-intro {
padding-bottom: 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
#press-release .box-container {
position: relative;
display: flex;
justify-content: space-around;
flex-direction: column;
padding-left: 40px;
}
#press-release .box-container .float-box {
width: 100%;
position: relative;
display: flex;
}
#press-release .float-box .overlay-bg {
background: #154865;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
opacity: 1;
}
#press-release span.icon-wrap {
width: 90px;
height: 90px;
background: #154865;
border-radius: 50%;
display: block;
position: relative;
margin-right: 20px;
position: relative;
z-index: 1000;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#press-release span.icon-wrap img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#press-release .box-container .float-box img {
width: 50px;
height: 50px;
}
#press-release .float-box {
padding-bottom: 30px;
padding-top: 30px;
}
#press-release .float-box:hover {
cursor: pointer;
}
#press-release .float-box h3 {
font-size: 2.1rem;
color: #154865;
font-family: coolvetica, sans-serif;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#press-release .float-box:hover span.icon-wrap {
background: #DCAD55;
}
#press-release .float-box:hover h3 {
color: #DCAD55;
font-family: coolvetica, sans-serif;
}
.overlay-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #364959;
}
#press-release .middle-icon:after {
content: '';
width: 5px;
background: #ccc;
position: absolute;
z-index: 1;
height: 50%;
left: 45px;
top:50%;
transform: translateX(-50%) translateY(-50%);
height: 160%;
}
/* Latest Partners
---------------------------------------*/
#latest-partners {
padding-top: 20px;
padding-bottom: 20px;
}
#latest-partners .super-title {
color: #DCAD55 !important;
}
#latest-partners h2.section-title {
font-size: 3.4rem;
max-width: 60%;
margin-right: auto;
margin-left: auto;
}
#latest-partners .two-fifths h3.super-title {
padding-bottom: 3px;
}
.partner-card {
position: relative;
margin-right: 5px;
margin-left: 5px;
border-radius: 50px;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
width: 31%;
margin-right: 1%;
margin-left: 1%;
overflow: hidden;
text-align: center;
padding-bottom: 20px;
margin-bottom: 2%;
background: #262626; /* Old browsers */
background: -moz-linear-gradient(left, #262626 0%, #154865 23%, #154865 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #262626 0%,#154865 23%,#154865 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#154865',GradientType=1 ); /* IE6-9 */
}
.partner-card img {
width: 100%;
margin-bottom: 15px;
}
.partner-card .partner-info {
padding: 10px;
padding-top: 30px;
}
.partner-info a {
margin-left: auto;
margin-right: auto;
}
#latest-partners .flex {
max-width: 100%;
width: 100%;
padding-left: 20px;
padding-right: 0px;
display: flex;
}
.partner-info h4 {
margin-bottom: 0;
padding-bottom: 5px;
}
#latest-partners .slick-arrow {
background: #fff;
width: 30px;
height: 30px;
}
#latest-partners .slick-next,
#latest-partners .slick-prev {
position: absolute;
left: 0;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
opacity: 1;
}
#latest-partners .slick-next:before,
#latest-partners .slick-prev:before {
display: none !important;
}
#latest-partners .slick-next {
background: url(../img/button-next-button.png);
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: 20px;
left: 35px;
z-index: 10000
}
#latest-partners .slick-prev {
background: url(../img/button-prev-button.png);
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
top: 20px;
left: 0;
z-index: 10000
}
.partner-card .partner-info {
background: #fff;
margin-bottom: 2%;
}
.partner-info .button {
width: 50%;
min-width: 1px;
}
.partner-card .partner-info h4 {
color: #333;
font-family: coolvetica, sans-serif;
font-size: 2.1rem;
}
.partner-card .partner-info h5 {
color: #DCAD55;
text-transform: uppercase;
font-family: coolvetica, sans-serif;
margin-bottom: 25px;
font-size: 1.2rem;
}
.partner-card .partner-info p {
font-size: 1.4rem;
margin-bottom: 30px;
}
.news-card-wrapper {
padding-bottom: 80px;
padding-top: 100px;
display: flex;
justify-content: space-around;
align-items: center;
align-items: stretch;
flex-wrap: wrap;
}
.cat-tag {
width: 40%;
margin-right: auto;
margin-left: auto;
font-size: .875rem;
display: block;
color: #fff;
background: #154865;
text-align: center;
border-radius: 50px;
text-transform: uppercase;
line-height: 1.8em;
font-weight: 800;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 15px;
}
/* Home Step Cards
---------------------------------------*/
.step-card-wrapper {
padding-bottom: 0px;
padding-top: 60px;
display: flex;
justify-content: space-around;
align-items: center;
align-items: stretch;
flex-wrap: wrap;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.step-card {
width: 32%;
margin-right: .5%;
margin-left: .5%;
background: #262626; /* Old browsers */
background: -moz-linear-gradient(left, #262626 0%, #154865 23%, #154865 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #262626 0%,#154865 23%,#154865 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #262626 0%,#154865 23%,#154865 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#154865',GradientType=1 ); /* IE6-9 */
border-radius: 30px;
-webkit-box-shadow: -30px 15px 30px 0 rgba(0, 0, 0, .19);
box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, .15);
text-align: center;
overflow: hidden;
position: relative;
max-height: 550px !important;
}
.step-card img {
width: 25%;
margin: 5% auto 10px;
}
.step-card h3 {
padding-top: 0;
font-weight: 600;
font-size: 1.4rem;
text-align: center;
text-align: center;
display: block;
}
.step-card p {
margin: 0;
padding:0;
font-size: 1rem;
text-align: center;
}
.step-card .partner-info {
background: #fff;
margin-bottom: 0;
padding: 20px;
height: auto;
bottom: 0;
left: 0;
display: block;
padding-bottom: 40px;
width: 100%;
text-align: center;
justify-content: center;
text-align: center;
padding-top: 40px;
}
.step-card-wrapper .slick-list {
padding-bottom: 50px;
}
/* Carriage Cares
---------------------------------------*/
.carriage-cares .button {
margin-left: 0;
}
/* Testimoinals
---------------------------------------*/
#testimonials {
background: #333;
padding-top: 0;
padding-bottom: 0;
}
#testimonials .quote-container {
padding: 0;
margin: 0;
}
#testimonials .quote-wrap {
min-height: 66vh;
padding-top: 60px;
padding-bottom: 60px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#testimonials .slider-wrapper {
margin-left: 5%;
transform: translateY(0);
}
.slide-quote {
text-align: left;
background: #154865;
padding: 40px;
outline-offset: -10px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
margin-left: 8%;
max-width: 450px;
}
.slide-quote .button {
margin-bottom: 40px;
margin-left: 0;
}
.slide-quote img {
display: block;
text-align: center;
margin-right: auto;
margin-left: auto;
border-radius: 50%;
border: 2px solid #0c3227;
margin-left: 0;
}
#testimonials .slick-next {
background: url(../img/button-next-button.png);
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
z-index: 10000;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
#testimonials .slick-prev {
background: url(../img/button-prev-button.png);
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
z-index: 10000;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
}
.slide-quote h3 {
font-size: .875rem;
margin-bottom: 5px;
color: #fff;
padding-bottom: 5px;
font-weight: 600;
text-transform: uppercase;
font-family: coolvetica, sans-serif;
}
.slide-quote h2 {
font-size: 3.4rem;
margin-top: 0;
padding-top: 0;
color: #fff;
}
#testimonials p {
color: #fff;
font-weight: 400;
max-width: 880px;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
}
#testimonials .slick-prev:before,
#testimonials .slick-next:before {
color: #0c3227;
opacity: 1;
font-size: 1.8rem;
z-index: 1000000 !important;
}
#testimonials .slick-prev {
top: 10%;
right: 60px;
left: initial !important;
}
#testimonials .slick-next {
top: 10%;
right: 20px;
}
/* Home Map
---------------------------------------*/
#home-map {
padding-top: 200px;
}
#home-map .two-thirds {
position: relative;
}
#home-map .two-thirds img {
width: 100%;
}
#home-map .inner-wrapper {
margin-top: 120px;
}
#home-map .map-numbers {
display: flex;
flex-direction: column;
justify-content: center;
}
#home-map .map-numbers .map-counter {
width: 200px;
height: 200px;
border-radius: 50%;
border: 6px solid #DCAD55;
text-align: center;
margin-bottom: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.map-counter h2 {
font-size: 3.4rem;
text-align: center;
padding-bottom: 0;
position: relative;
}
.map-counter h2:after {
content: "%";
font-size: 3.4rem;
position: absolute;
top: 20px;
right: 20px;
}
.map-container {
display: flex;
flex-direction: column;
justify-content: center;
}
.map-container .map-pin {
background: #fff;
border: 4px solid #333;
border-radius: 50%;
text-align: center;
z-index: 1000000;
}
.map-container .map-pin span {
font-size: 3rem;
line-height: 100px;
margin: 0;
padding: 0;
}
#map-pin-1 {
width: 30%;
position: absolute;
top: 40%;
left: 50%;
width: 100px;
height: 100px;
}
.map-pin:after {
content: "";
width: 2px;
background: #000;
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
height: 100%;
}
#map-pin-2 {
width: 10%;
position: absolute;
top: 20%;
left: 3 60%;
width: 100px;
height: 100px;
}
#map-pin-3 {
width: 10%;
position: absolute;
top: 14%;
left: 80%;
width: 100px;
height: 100px;
}
#map-pin-4 {
width: 10%;
position: absolute;
top: 90%;
left: 80%;
width: 100px;
height: 100px;
position: absolute;
top: 45%;
left: 90%;
width: 100px;
height: 100px;
}
/*=================================
Our Company
==================================*/
#time-line-container {
margin: 0 auto;
}
#time-line-wrapper {
background: #000;
width: 66%;
margin-right: auto;
margin-left: auto;
}
#leadership .header-block {
width: 100%;
}
#leadership .header-block-wrapper {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 70vh;
max-height: 700px;
overflow:hidden;
}
#leadership {
padding-top: 40vh;
}
.leadership-flex {
display: flex;
flex-wrap: wrap;
}
.leadership-container {
background: #fff;
border-radius: 50px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
position: relative;
z-index: 100;
padding-top: 60px;
padding-bottom: 60px;
}
#leadership .header-block-wrapper {
padding-top: 120px;
}
#leadership .header-block-wrapper h3,
#leadership .header-block-wrapper h2 {
color: #fff;
}
#leadership .header-block-wrapper img {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.leadership-flex .leader-card {
width: 31%;
margin-top: 40px;
background: #fefefe;
text-align: center;
position: relative;
padding-left: 20px;
padding-right: 20px;
}
.leadership-flex .leader-card a {
max-width: 210px;
margin-right: auto;
margin-left: aUTO;
text-align: center;
width: 100%;
min-width: 0;
}
.leadership-flex .leader-card:hover {
cursor: pointer;
}
.leadership-flex .leader-card img {
width: 100%;
}
.leadership-flex .leader-card h3,
.leadership-flex .leader-card h4 {
padding-left: 20px;
padding-right: 20px;
font-family: coolvetica, sans-serif;
color: #666;
}
.leadership-flex .leader-card h3 {
color: #666;
}
#leadership h2.fly-wheel-title {
padding-top: 5px;
font-size: 4.1rem;
padding-bottom: 40px;
}
.leadership-flex .leader-card h4 {
text-transform: uppercase;
font-size: 1.4rem;
}
.leadership-flex .leader-card h4 {
font-size: 1.4rem;
padding-top: 20px;
margin-bottom: 0;
}
.leadership-flex .leader-card h3 {
font-size: 1rem;
padding-top: 10px;
font-family: coolvetica, sans-serif;
padding-bottom: 30px;
}
.leader-card-pop {
width: 100%;
max-width: 800px;
position: fixed;
top: 50%;
left: calc( 100% - 50%);
transform: translateX(-50%) translateY(-50%);
z-index: -1;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
background: #fff;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
opacity: 0;
border-radius: 30px;
border: 2px solid #999;
padding: 60px;
max-height: 80vh;
overflow-y: auto;
}
.leader-card-pop .clear-both {
width: 100%;
clear: both;
margin-top: 40px;
}
.leader-card-pop .one-third h4,
.leader-card-pop .one-third h3 {
padding-left: 15px;
padding-right: 15px;
}
.leader-card-pop.active {
opacity: 1;
z-index: 100000000000;
}
.leader-card-pop .leader-close {
width: 60px;
height: 60px;
position: absolute;
top: 10px;
right: 10px;
font-size: 1rem;
z-index: 10000000;
color: #fff;
background: #154865;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 1.8rem;
font-weight: 300;
}
.leader-card-pop .leader-close:hover {
cursor: pointer;
}
.leader-card-pop .one-third img {
width: 100%;
margin-bottom: 20px;
}
.leader-card-pop .two-thirds {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
}
@media only screen and (min-width: 900px) {
.leader-card-pop .two-thirds {
min-height: 65vh;
}
}
.leader-card-pop .pop-name-title {
margin-bottom: 40px;
}
.leader-card-pop h4 {
font-size: 1.8rem;
padding-top: 20px;
color: #fff;
margin-bottom: 0;
}
.leader-card-pop h4 {
font-size: 2.4rem;
color: #333;
}
.leader-card-pop h3 {
font-size: 1.2rem;
color: #999;
padding-top: 10px;
font-family: coolvetica, sans-serif;
padding-bottom: 30px;
}
.leader-card-pop img {
margin-right: 40px;
width: 20%;
}
.timeline-feed-wrapper {
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.timeline-feed-wrapper .property-timeline-title {
font-size: 4.1rem;
max-width: 60%;
margin-right: auto;
margin-left: auto;
}
.timeline-feed-wrapper .feed-block {
margin-left: 10px;
margin-right: 10px;
background: #fff;
text-align: center;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
padding-left: 10px;
padding-right: 10px;
}
#new-business-feed {
padding-top: 40px;
width: 100%;
margin-right: auto;
padding-bottom: 0;
margin-bottom: 40px;
margin-left: auto;
}
#new-business-feed .slick-track {
padding-bottom: 30px;
}
#new-business-feed .feed-block h3 {
font-size: 1.2rem;
padding-top: 5px;
}
.standard-team {
padding-top: 120px;
}
#new-business-feed .slick-next {
background: url(../img/button-next-button.png);
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
width: 30px;
height: 30px;
z-index: 10000;
outline: 1px solid #ccc;
top: 40%;
right: 30px;
}
#new-business-feed .slick-prev {
background: url(../img/button-prev-button.png);
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
z-index: 10000;
width: 30px;
height: 30px;
top: 40%;
left: 30px;
outline: 1px solid #ccc;
}
/* Timeline Section
---------------------------------------*/
#timeline-container {
min-height: 80vh;
position: relative;
margin-bottom: -40px;
z-index: 100;
background: #000;
}
#timeline-container .timeline-card {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
padding: 60px;
opacity: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#timeline-container .timeline-card.active {
opacity: 1;
z-index: 10000;
}
#timeline-container h2,
#timeline-container h3,
#timeline-container h5 {
color: #fff;
}
#timeline-container h3 {
font-family: coolvetica, sans-serif;
text-transform: uppercase;
padding-bottom: 0;
}
#timeline-container h2 {
font-size: 4.1rem;
padding-bottom: 30px;
}
#timeline-container h5.year {
font-size: 26rem;
line-height: .45em;
}
#timeline-bar-container {
height: 30px;
position: absolute;
bottom: 80px;
left: 5%;
width: 90%;
z-index: 1000000;
}
#timeline-bar-container #timeline-stretch {
height: 4px;
background: #DCAD55;
}
#timeline-bar-container span.time-point {
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
display: block;
position: absolute;
top: -40%;
outline: 3px solid #fff;
outline-offset: 5px;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
#timeline-bar-container span.time-point.active {
outline-offset: 8px;
outline: 3px solid #DCAD55;
background: #DCAD55;
}
#timeline-bar-container span.time-point:hover {
cursor: pointer;
outline-offset: 8px;
outline: 3px solid #DCAD55;
background: #DCAD55;
}
/* Bottom Callout
---------------------------------------*/
#bottom-callout {
background: #000;
padding-bottom: 0;
padding-top: 0;
}
#bottom-callout .one-third {
display: block;
position: relative;
}
#bottom-callout .one-third img {
opacity: .5;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#bottom-callout .one-third:hover img {
opacity: 1;
}
#bottom-callout .one-third img {
width: 100%;
}
#bottom-callout .one-third .content {
width: 100%;
height: 100%;
text-align: center;
padding: 15%;
padding-top: 25%;
position: absolute;
top: 0;
left: 0;
z-index: 100000;
color: #fff;
}
#bottom-callout .content h3 {
color: #fff;
font-size: 2.4rem;
line-height: 1.2em;
text-transform: uppercase;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#bottom-callout .content h4 {
color: #fff;
font-size: 1.2rem;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#bottom-callout .one-third:hover h3,
#bottom-callout .one-third:hover h4 {
text-shadow: 0 0 3px #777;
}
/*=======================================
Leadership
=======================================*/
#process-container {
display: flex;
}
.leadership-layout .leader-card img {
width: 66%;
}
.leadership-layout.leadership-flex {
justify-content: space-around;
}
#process-container .process-card img {
width: 50%;
margin-right: auto;
margin-left: auto;
display: block;
}
#process-container .process-card h2 {
text-align: center;
}
#process-container .process-card a {
min-width: 0;
width: 180px;
}
#process-container .process-card a:hover {
cursor:pointer;
}
#process-container .process-card span:hover {
cursor: pointer;
}
.number-info {
padding: 20px;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
max-height: 0;
}
.number-info p {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.number-info.active {
padding-top: 20px;
padding-bottom: 20px;
max-height: 10000px;
padding-left: 20px;
padding-right: 20px;
}
/*=======================================
Why Partner Page
=======================================*/
#testimonials-slider {
padding-top: 10px;
}
#testimonials-slider .leadership-container {
box-shadow: none;
padding-top: 0;
}
#testimonials-slider h2 {
font-size: 4.1rem;
}
#testimonials-slider .leader-card {
border-radius: 30px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
margin-left: 20px;
margin-right: 20px;
margin-bottom: 30px;
padding: 40px;
}
#testimonials-slider .leader-card img {
width: 66%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#testimonials-slider .leader-card h4 {
font-weight: 700;
font-size: 2.1rem;
color: #333;
margin-bottom: 30px;
}
#testimonnials-slider .leader-card .learn-more {
text-align: center;
display: block;
color: #333;
border-bottom: 1px solid #333;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 140px;
}
#why-partner-form {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 100px 40px;
background-image:url(../img/why-partner/form-bg.jpg);
}
#why-partner-form h2 {
padding-top: 0;
margin-bottom: 40px;
font-size: 4.1rem;
}
#why-partner-form .form-container {
background: #fff;
border-radius: 50px;
-webkit-box-shadow: -30px 15px 30px 0 rgb(0 0 0 / 19%);
box-shadow: 0px 10px 30px 0 rgb(0 0 0 / 15%);
position: relative;
z-index: 100;
padding-top: 60px;
padding-bottom: 60px;
max-width: 1400px;
margin-right: auto;
margin-left: auto;
}
.why-page-form {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
#why-partner-form .form-container input {
background: #eee;
height: 60px;
margin-left: 1%;
margin-right: 1%;
padding: 8px 10px;
border: none;
border-radius: 30px;
margin-bottom: 2%;
}
#why-partner-form .form-container input.one-third {
width: 31%;
}
#why-partner-form .form-container input.one-half {
width: 47.8%;
margin-left: 1%;
margin-right: 1%;
}
#why-partner-form .form-container textarea {
background: #eee;
border-radius: 30px;
border: none;
width: 98%;
display: block;
margin-right: auto;
margin-left: auto;
padding: 20px;
margin-bottom: 40px;
}
#why-partner-form .form-container input[type="button"] {
margin-right: AUTO;
margin-left: auto;
text-align: center;
display: block;
}
/* ==========================================================================
Footer
========================================================================== */
#footer {
background: #154865;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-around;
padding-left: 20px;
padding-right: 20px;
z-index: 1000000;
}
#footer img {
width: auto;
margin: 0 auto;
text-align: center;
display: block;
margin-bottom: 0px;
height: 50px;
}
#footer .footer-nav {
text-align: center;
}
#footer .footer-nav a {
color: #fff;
padding-left: 30px;
padding-right: 30px;
padding-left: 10px;
padding-right: 10px;
font-size: .775rem;
line-height: 50px;
}
#footer .foot-copy {
font-size: .775rem;
line-height: 50px;
margin-bottom: 0;
color: #fff;
}
#footer p {
font-family: coolvetica, sans-serif;
font-size: 16.8px;
font-weight: 300;
}
/* Home Page Loader
==================================*/
#home-overlay #bgvid-overlay {
width: 100%;
opacity: 0;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 100000000;
background: #E6E5E6;
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background: url(../img/dark-bg.png);
}
.loader img {
width: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
opacity: 0;
}
.loader.loaded {
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
body#home-page.loading {
overflow-x: hidden !important;
overflow-y: hidden !important;
background: url(../img/dark-bg.png);
}
@keyframes flickerAnimation {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes flickerAnimation{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.animate-flicker {
-webkit-animation: flickerAnimation 3s infinite;
-moz-animation: flickerAnimation 3s infinite;
-o-animation: flickerAnimation 3s infinite;
animation: flickerAnimation 3s infinite;
}
/* Header
/* ==========================================================================
Helper classes
========================================================================== */
.left {
float: left;
}
.right {
float: right;
}
.one-fourth {
width: 25%;
}
.one-fifth {
width: 20%;
}
.three-fourths {
width: 75%;
}
.one-third {
width: 33.333%;
}
.two-thirds {
width: 66.66%;
}
.one-half {
width: 50%;
}
.one-fifth {
width: 20%;
}
.two-fifths {
width: 40%;
}
.three-fifths {
width: 60%;
}
.four-fifths {
width: 80%;
}
.button {
min-width: 320px;
padding: 0.5em 1.35em;
padding-left: 0;
margin-right: 0;
background: transparent;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
text-transform: uppercase;
display: block;
margin-right: auto;
margin-left: auto;
max-width: 310px;
font-size: 1rem;
color: #1e4664;
text-align: center;
border: 2px solid #154865;
border-radius: 0px 50px 50px 50px;
position: relative;
padding-right: 0px;
letter-spacing: .14em;
}
.white.button {
color: #fff;
border: 2px solid #fff;
}
.white.button:hover {
background: #154865;
color: #fff;
border: 2px solid #1e4664;
}
.white.button:after {
background-image: url(../img/white-button-arrow.png);
}
.button:hover {
color: #fff;
background: #154865;
}
.button.grey-button {
color: #111;
background-color: #fff;
}
.button.grey-button:hover {
background: #ccc;
}
.inline-block {
display: inline-block;
}
.text-center {
text-align: center !important;
}
.box-centered {
margin-right: auto;
margin-left: auto;
position: relative;
display: block;
}
.sans-padded {
padding-top: 0;
padding-bottom: 0;
}
.inner-wrapper {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding-left: 40px;
padding-right: 40px;
}
.inner-wrapper.flex {
display: flex;
}
.green-bg {
background: #154865;
}
/* General Layout Classes
-----------------------------------*/
.page-hero {
background: #000;
height: 60vh;
background-image: url(https://www.carriageservices.com/wp-content/themes/carriage-services/img/our-culture/hero-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
padding-top: 20vh;
text-align: center;
}
.page-hero h2 {
font-size: 4.8rem;
color: #fff;
line-height: 1.1em;
padding-bottom: 30px;
padding-top: 0;
}
/* animations
-----------------------------------*/
/* Key Frames
---------------------------------*/
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-30px) translateX(-50%);
}
60% {
transform: translateY(-15px) translateX(-50%);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-30px) translateX(-50%);
}
60% {
transform: translateY(-15px) translateX(-50%);
}
}
.bounce {
-webkit-animation: bounce 5s infinite;
animation: bounce 2s infinite;
}
.breath {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
@keyframes breath {
0% {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
}
.breath {
-webkit-animation: bounce 5s infinite;
animation: bounce 2s infinite;
}
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}