/**/
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/*===========================================================================================================================================================
Comments in this style sheet separate sections (e.g., paragraph styles, heading styles, etc.).
===========================================================================================================================================================*/
/* ----- GLOBAL FORMATS ----- */
/* ----- EMBEDDED FONTS ----- */
@font-face
{
font-family: 'Plus Jakarta Sans';
src: url(../Fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf);
}
/* ----- COLOR VARIABLES ----- */
:root
{
--Primary1: #005654;
/* -- FT Green; H1, H3, and upper hero background on Home page -- */
--Primary2: #545747;
/* -- FT Gray Tint 1; H2, H4, H5, H6 on topics pages -- */
--Primary3: #00e091;
/* -- FT Mint Tint; H2 on Home page -- */
--Primary4: #b3f6de;
/* -- FT Logo Light Mint; background TOC shading in the side menu proxy. This shade is not in the FinThrive palette; it is in the logo. --*/
--Primary5: #282d2d;
/* -- FT Gray -- */
--Accent1: #80f2c3;
/* -- FT Mint Tint 1 -- */
--Accent2: #c0f9e1;
/* -- FT Mint Tint 2 -- */
--Accent3: #d4faec;
/* -- FT Mint Tint 3 -- */
--Accent4: #ffca98;
/* -- FT Coral Tint 2 -- */
--Accent5: #f87a3a;
/* -- FT Coral Tint 0; used for H5 drop-downs -- */
--Glossary: #8253a2;
/* -- FT -- */
}
/*==Home Page General Styles==*/
body
{
font-family: "Plus Jakarta Sans", Arial, sans-serif;
line-height: 1.5em;
background-color: #fff;
}
h1
{
font-size: 2.75em;
color: #ffffff;
line-height: 38pt;
}
h2
{
font-size: 1.6785em;
color: #00e091;
}
p
{
color: #5a5a5a;
margin-bottom: 8px;
margin-top: 8px;
}
.center
{
position: relative;
margin-right: auto;
margin-left: auto;
float: none !important;
text-align: center;
}
.off-canvas-content .main-section > .outer-row
{
max-width: 100%;
padding: 0;
}
/*==Mad Cap proxy/editor assigned styles==*/
MadCap|searchBarProxy
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
float: none;
width: 50%;
}
MadCap|topicToolbarProxy
{
float: none;
}
MadCap|menuProxy.menu1
{
mc-toc-depth: 1;
mc-context-sensitive: True;
}
MadCap|menuProxy.menu2
{
mc-toc-depth: 1;
mc-context-sensitive: True;
}
html.home-page
{
mc-community-features: disabled;
}
/*==Responsive Header Styles==*/
#contentBody > .responsive-header
{
background-color: transparent;
}
/*==Home Page Hero Section==*/
div.topic-hero /*This is the first Hero/Banner on the Home Page - To replace the banner image with your own, change background-image property*/
{
height: 300px;
padding-bottom: 50px;
padding-top: 50px;
background-color: #005654;
background-image: url('../Images/Assets/HeroImages/loop-crop.png');
background-size: contain;
background-repeat: no-repeat;
/* Create the parallax scrolling effect
background-attachment: fixed;*/
background-position: right 0;
}
div.cta /*Call to action button on the Home Page*/
{
color: #FFF;
background-color: #005654;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 14px 20px;
width: 200px;
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
margin-top: 50px;
}
div.cta:hover /*When hovering over the CTA button the following properties apply*/
{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transform: scale(1.01);
}
a.cta:link
{
color: #FFF;
text-decoration: none;
}
a.cta:visited
{
color: #FFF;
text-decoration: none;
}
/*==Search bar elements==*/
.search-field /*The box-shadow property is applied to style to provide shadow on the search bar*/
{
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
div.search-container
{
margin-top: -36px;
margin-bottom: 50px;
}
/*==Home Tiles section==*/
div.home-tiles /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
margin-bottom: 1%;
}
div.home-tiles::before
{
content: ' ';
display: table;
}
div.home-tiles::after
{
content: ' ';
display: table;
clear: both;
}
div.home-tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
/*Adds transition animation when switching between screen sizes*/
-moz-border-radius: 20x;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 1px solid #d3d3d3;
padding: 60px 10px;
overflow: hidden;
}
div.home-tiles > div:hover /*When hovering over a home-tile, these properties apply*/
{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
div.home-tiles > div:nth-child(1)
{
width: 16.667%;
margin-left: 24%;
}
div.home-tiles > div:nth-child(2)
{
width: 16.667%;
margin-left: 1%;
}
div.home-tiles > div:nth-child(3)
{
width: 16.667%;
margin-left: 1%;
}
/*=Elements for text contained within each home-tile=*/
p.tile-title
{
text-align: center;
color: #7E8890;
font-size: 1.4em;
}
p.tile-content
{
text-align: center;
color: #7E8890;
font-size: 0.8em;
}
p.tile-items
{
color: #7E8890;
font-size: 0.7em;
text-align: center;
}
div.home-tiles a /*Complex Selector: Any anchor (links) tags that are within div.home-tiles will have the following properties*/
{
text-decoration: none;
color: #565656;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
div.home-tiles a:hover /*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
color: #005654;
}
/*=Info-container section=*/
div.info-container /*div.info-container contains the first Hero/Banner on the Home Page - To replace the banner image with your own, point the background-image property to your own image.*/
{
margin-left: auto;
margin-top: 100px;
margin-right: auto;
padding-bottom: 50px;
padding-top: 50px;
box-shadow: inset -1px 1px 17px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
color: #000000;
background-color: #b3f6de;
/*Create the parallax scrolling effect*/
background-attachment: fixed;
background-position: center 0;
/*background-image: url('../Images/Assets/HeroImages/HeroImage-2.jpg');*/
background-size: cover;
background-repeat: no-repeat;
}
div.info-section /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
}
div.info-section::before
{
content: ' ';
display: table;
}
div.info-section::after
{
content: ' ';
display: table;
clear: both;
}
div.info-section > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.info-section > div:nth-child(1)
{
width: 16.667%;
margin-left: 16.667%;
}
div.info-section > div:nth-child(2)
{
width: 16.667%;
margin-left: 6%;
}
div.info-section > div:nth-child(3) /*Div that contains "Tips"*/
{
width: 33.333%;
margin-left: 5%;
}
div.info-container p /*Complex Selector: Any that is contained within div.info-container will have the following properties*/
{
color: #005654;
}
/*=Elements for content contained within each info section=*/
p.info-title
{
font-size: 2em;
line-height: 1em;
}
p.info-content
{
font-size: .95em;
}
p.tip /*Paragraph style used for the Tips */
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: url('../Images/Assets/Icons/MainIcons/Tips-gray.png');
background-position: 15px center;
background-repeat: no-repeat;
border: solid 1px #005654;
border-radius: 6px;
line-height: 1em;
overflow: hidden;
padding: 15px 0px 15px 60px;
text-align: left;
margin: 5px 30px;
}
/*==Home Page Footer Section==*/
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
div.footer a /*Complex Selector: Any anchor (links) tags that are within div.footer will have the following properties */
{
text-decoration: none;
color: #DADADA;
}
div.footer > div.outer-row
{
line-height: 30px;
padding: 0;
}
div.home-master-page-footer /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
width: 55%;
}
div.home-master-page-footer::before
{
content: ' ';
display: table;
}
div.home-master-page-footer::after
{
content: ' ';
display: table;
clear: both;
}
div.home-master-page-footer > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 33.333%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 33.333%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 33.333%;
margin-left: 0%;
}
div.footer p /*Complex Selector: Any
that is contained within div.footer will have the following properties*/
{
color: #7E8890;
font-size: 0.8em;
}
/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/
@media only screen and (max-width: 1279px)
{
#content-section .right-section,
#content-section .left-section
{
padding: 0;
}
p.info-title
{
font-size: 2em;
}
p.info-content
{
font-size: 1em;
}
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
}
div.home-tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
/*Adds transition animation when switching between screen sizes*/
-moz-border-radius: 20x;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 1px solid #d3d3d3;
padding: 60px 10px;
}
div.home-tiles > div:nth-child(1)
{
width: 32%;
margin-left: 1%;
}
div.home-tiles > div:nth-child(2)
{
width: 32%;
margin-left: 1%;
}
div.home-tiles > div:nth-child(3)
{
width: 32%;
margin-left: 1%;
}
div.info-section > div
{
text-align: center;
}
div.info-section > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-bottom: 10%;
margin-top: 5%;
}
div.info-section > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-bottom: 5%;
}
div.info-section > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
}
@media only screen and (max-width: 767px)
{
#content-section
{
padding-top: 30px;
padding-bottom: 30px;
}
div.search-container
{
margin-bottom: 50px;
}
p.tile-title
{
font-size: 1.2em;
}
p.info-title
{
font-size: 2em;
}
p.info-content
{
font-size: 1em;
}
div.home-tiles > div
{
margin-top: 2%;
}
div.home-tiles > div:nth-child(1)
{
width: 90%;
margin-left: 5%;
}
div.home-tiles > div:nth-child(2)
{
width: 90%;
margin-left: 5%;
}
div.home-tiles > div:nth-child(3)
{
width: 90%;
margin-left: 5%;
}
div.info-section > div
{
text-align: center;
padding: 0 20px;
}
div.info-section > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-bottom: 10%;
margin-top: 5%;
}
div.info-section > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-bottom: 5%;
}
div.info-section > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
div.home-master-page-footer > div /* Adds separators to the footer items when in mobile layout */
{
border-bottom: 1px solid #d3d3d3;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 100%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 100%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 100%;
}
}