html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}


/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
CSS classes specific to Folio Institutional HOME PAGE
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

.row-home-center {
    padding: 20px 40px;
    padding-bottom: 50px;
}

.row-home-center h1 {
    padding-top:36px;
    font-weight:lighter;
}

 .row-color-sand {
    background: #f0ebe6;
 }
 
.row-background-advisors {
    background: URL('https://cdn2.hubspot.net/hubfs/2719600/Images/Folio%20Institutional/fi-home-advisors-talking-folio.jpg');
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position:center;
 }
 
 .tile-callout {
     margin: 20px 10px;
     padding: 20px;
     background: #fff;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    border:1px solid #ccc;
    border-radius: 4px;
 }
 
 .title-callout:hover {
     background: #eaeaea;
 }
 
@media (max-width: 768px) {
 .tile-callout {
     margin: 20px 0;
    }
}

@media (max-width: 768px) {
    .row-home-center {
    padding: 20px 0 40px;
    }
}
@media (max-width: 479px) {
    .row-color-sand {
        background: #f0ebe6;
    }
    .row-home-center {
    padding: 0 0 20px;
    }
    .row-background-advisors-mobile {
    background: URL('https://cdn2.hubspot.net/hubfs/2719600/Images/Folio%20Institutional/fi-home-advisors-talking-folio.jpg');
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position:center;
 }
}

/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles unique classes specific to Folio Institutional
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/
@media (min-width: 769px) {
    .mobile-search {
        display: none;
    }
}
@media (max-width: 768px) {
    .desktop-search {
        display: none;
    }
}

a.anchor {
    display: block;
    position: relative;
    top: -140px;
    visibility: hidden;
}

.folio-highlight {
    font-size: 50px;
    font-weight: 100;
    text-align: center;
    margin: 30px 0 10px 0;
    line-height: 50px;
}

@media (max-width: 768px) {
    .folio-highlight {
        font-size: 40px;
        line-height: 40px;
        margin: 20px 0 0;
    }
}
.block-link, .block-link-tile {
    transition: all 0.3s ease;
    background-color: #fff;
    display: block;
    color: #222;
}
.block-link-tile:hover {
    background-color: #005082;
    /* background-image: linear-gradient(#0078b8,#0078b8 40%,#006fab);*/
    color: #fff;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
}

.block-link-tile:hover h6 {
    color: #fff;
}
.content-center {
    text-align:center;
    margin: 40px auto 0;
}
.secondary-navigation {
    margin-top: 0 !important;
}
.content-padding {
    padding: 80px 0;
}
.padding-top-30 {
    padding-top: 30px;
}
.bottom-padding {
        padding-bottom: 50px;
    }
.case-study-callout {
    text-align:center !important;
    margin: 20px 80px;
    padding: 0 20px;
    border-right: 2px solid #f0ebe6;
    border-left: 2px solid #f0ebe6;
}

@media (max-width:768px) {
    .case-study-callout {
        margin: 20px 10px;
    }
}
.well-callout {
    margin: 50px 0 30px;
    padding: 5px 30px 30px;
    background: #f0ebe6;
    border-radius: 6px;
}
@media (max-width:768px) {
    .well-callout {
        margin: 0 0 30px;
        padding: 5px 20px 30px;
        border-radius: 6px;
    }
}
@media (max-width:479px) {
    .well-callout {
        border-radius: 0;
    }
}
.in-page-disclosure {
    color:#666;
    margin: 10px 0 40px;
    font-size: .9em;
    line-height: 1.2em;
}
/*
@media (max-width:479px) {
    .in-page-disclosure {
        margin: 0 0 30px;
        padding: 0;
    }
}
*/


/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles the main content padding on mobile
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

@media (max-width: 479px) {
    .main-content-mobile-padding {
        padding: 20px;
    }
}

/*------------------
Font Awesome styles
--------------------*/

.fa-list-style {
    line-height: 24px;
    color: #c85b2d;
    font-size: 2em;
    margin-left:18px;
}

.fa-list-space {
    padding-left:20px;
    margin-bottom:30px;
}

.fa-large {
    font-size: 50px;
    padding-right: 20px;
    position: relative;
    top: 10px;
}

.fa-right-margin {
    margin-right:10px;
}

.fa-xlarge {
    font-size: 60px;
    opacity: 0.5;
    padding: 20px 10px;
}
@media (max-width: 768px) {
    .fa-large {
    font-size: 35px;
    padding-right: 10px;
    position: relative;
    top: 4px;
    }
}

/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles the white background and shadowing of the primary navigation
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

.topnav-container {
        background:#fff;
        height: 103px !important;
    }
@media (min-width: 1350px) {
    .topnav-container {
        -webkit-box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
        box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
        height: 103px !important;
    }
}

/*------------------
Handles the formatting of the secondary navigation
--------------------*/

.secondary-nav-container {
    text-align:center;
    width:100%;
    margin:0 auto;
}
@media (min-width: 1350px) {
    .secondary-nav-container {
        width:100%;
    }
}

/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles the primary navigation on desktop and mobile viewports
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/


#folio-topnav 
    
    /* header */
    
    .header {
      position: fixed;
      width: 100%;
      z-index: 9999;
      background: #fff;      
    }
    
    .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
    }
 
    .header li a {
      display: block;
      padding: 10px 20px;
      text-decoration: none;
      background: #fff;
      font-size: 15px;
      line-height: 1.3em;
      transition: all 0.2s ease;
    }
    
    .header li a:hover,
    .header .menu-btn:hover,
    .header li > a:hover,
    	.header li > a:focus,
		.header li:focus > a,
		.header li:hover > a{
     background-color: #f4f4f4;
      
    }

 /*Drowpodown menu style */
    
    .header li:hover ul a {
        background: #f4f4f4;
        color: #2f3036;
        line-height: 33px;
        height: 35px;
        font-size:13px;
    }
    
    .header li:hover ul a:hover {
        background: #005182;
        color: #ffffff;
    }
    
    .header li ul {
        display: none;
    }
    .header li ul li {
        display: block;
        float: none; 
    }
    .header li ul li a {
        width: auto;
        padding: 0 10px;
    }
    
    .header ul li a:hover + .sub-menu, .sub-menu:hover {
        display: block;
    }
    
    @media (max-width: 1350px) {
        .header {
            -webkit-box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
            box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
        }
        .header ul li a:hover + .sub-menu, .sub-menu:hover {
            display:none;
        }
    }
    
    .header .logo {
      display: block;
      float: left;
      font-size: 2em;
      padding: 10px 20px;
      text-decoration: none;
      
    }
    
    /* menu */
    
    .header .menu {
      clear: both;
      max-height: 0;
      transition: max-height .3s ease-out;
    }
    
    /* menu icon */
    
    .header .menu-icon {
      cursor: pointer;
      display: inline-block;
      border: 1px solid #eaeaea;
      border-radius: 3px;
      float: right;
      margin: 12px 20px 0 0;
      padding: 15px 12px;
      position: relative;
      user-select: none;
    }
    
    .header .menu-icon .navicon {
      background: #005182;
      display: block;
      height: 3px;
      position: relative;
      transition: background .2s ease-out;
      width: 20px;
    }
    
    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
      background: #005182;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }
    
    .header .menu-icon .navicon:before {
      top: 5px;
    }
    
    .header .menu-icon .navicon:after {
      top: -5px;
    }
    
    /* menu btn */
    
    .header .menu-btn {
      display: none;
    }
    
    .header .menu-btn:checked ~ .menu {
      max-height: 600px;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
    
    @media (min-width: 1350px) {
      .header li {
        float: left;
      }
      .header li a {
        padding: 20px 50px;
      }
      .header .menu {
        clear: none;
        float: right;
        max-height: 500px;
      }
      .header .menu-icon {
        display: none;
      }
    }

    
/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles the footer styles on Folio Institutional 
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/


.footer-links ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.footer-links ul li a {
    text-decoration: none;
    color: #f0ebe6;
    padding: 4px 0;
    display:block;
}
.footer-links ul li a:visited {
    color: #f0ebe6;
}
.footer-links ul li a:hover {
    color: #faa519;
}
.footer-links h6 {
    font-size: 1em;
    color: #999;
    margin-bottom: -20px;
    margin-top: 10px;
}
.footer-disclosure {
    margin-top:40px;
    color: #999;
    text-align:left;
}
.footer-disclosure-landing {
    margin-top: 0 !important;
    color: #999;
    text-align:left;
}
.footer-disclosure p {
    margin:20px 0;
}
#footer-nav {
    margin-top: -20px;
    .left-border {
        border-left: 1px solid #ccc;
    }
}

/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles style specific to Folio Institutional landing pages
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

.header-landing {
    -webkit-box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 15px -2px rgba(0,0,0,0.75);
    background: #005082;
}

.hero-landing {
    margin-top: 0 !important;
}

/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles style specific to Flexbox
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin:7px 7px;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    border:1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
    width: 190px;
    height: 150px;
    color: #333;
    font-weight: bold;
    text-align: center;
    transition: all 0.5s ease 0s;
}

.flex-item img {
    width: 100%;
    margin: 10px;
}

.flex-item-2 {
    flex-wrap: wrap;
    background: #fff;
    margin:7px 7px;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    border:1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
    width: 45%;
    height: 370px;
    color: #333;
    font-weight: normal;
    transition: all 0.5s ease 0s;
}

.less-copy {
        height: 250px !important;
    }

.flex-item-3 {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin:7px 7px;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    border:1px solid #ccc;
    border-radius: 4px;
    padding: 15px;
    width: 200px;
    height: 100px;
    color: #333;
    font-weight: normal;
    transition: all 0.5s ease 0s;
}

.flex-item:hover, .flex-item-2:hover, .flex-item-3:hover {
    background: #e2f6fe;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,130,200,0.3);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,130,200,0.3);
    box-shadow: 0px 0px 8px 0px rgba(0,130,200,0.3);
}

a.flex-link:link, a.flex-link:active, a.flex-link:visited {
    color:#333 !important;
    height: 340px;
    display: block;
}

a.flex-link-3:link, a.flex-link-3:active, a.flex-link-3:visited {
    color:#333 !important;
    height: 80px;
    display: block;
}

a.flex-link-less:link, a.flex-link-less:active, a.flex-link-less:visited {
    color:#333 !important;
    height: 220px;
    display: block;
}

.less-copy {
        height: 250px !important;
    }

@media (max-width: 768px) {
    .flex-item-2 {
        width: 100%;
        height: 240px;
    }
    a.flex-link:link, a.flex-link:active, a.flex-link:visited {
        height: 230px;
    }
    .flex-item {
        width: 140px;
        height: 110px;
    }
    .less-copy {
        height: 180px !important;
    }
}
@media (max-width: 1350px) {
    .flex-item-2 {
        width: 100%;
        height: 240px;
    }
    a.flex-link:link, a.flex-link:active, a.flex-link:visited {
        height: 220px;
    }
    .less-copy {
        height: 200px !important;
    }
    a.flex-link-less:link, a.flex-link-less:active, a.flex-link-less:visited {
        height: 180px;
    }
}

table.rtg-list { 
    border-collapse: collapse; 
}

tr.rtg-cell td {
    border-bottom: 1px solid #eaeaea;
    background: #fff;
    padding:8px;
}
tr.rtg-cell th {
    background: #0082c8;
    color: #fff;
    font-weight: bold;
    font-size:14px;
    padding:5px 8px;
    text-align: left !important;
}
@media (max-width: 768px) {
    .mobile-footer-padding {
        text-align: left !important;
        padding:0 20px !important;
    }
}


/*------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
Handles style specific to blog pagination
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------*/

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}