/* /// HOMEPAGE BOXES /// */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #333;
    margin: 4px 0 0 0;
    padding: 0;
}





a.caption:link {color:#000;}
a.caption:visited {color:#000;}
a.caption:hover {color:#263ff5; text-decoration:none;}

a.captiontext:link {color:#263ff5;}
a.captiontext:visited {color:#263ff5;}
a.captiontext:hover {color:#263ff5; text-decoration:none;}




.homebox {
    width: 20%;
	padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    float: right;
    white-space:nowrap;
    min-height: 210px;
}

.hometext {
	width: 40%;
	padding-bottom: 0;
	clear: both;
}

.hometext a.captiontext:hover {
colour: #ca6;
background-color: #abc;
padding: 0.5%;
}


.homeboxcontent {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.hometext .homeboxcontent {
	white-space: normal;
	padding: 20px 10px 0 10px;
	box-sizing: border-box;
	border-bottom: 0;
}

.hometext h3 {
	font-size: 1.9em;
	line-height: 1.3;
	color: #333;
	margin: 0;
}

/* STANDOUT TAG */
.hometext h3 span {
	color: blue;
}

.homeboxcontent img {
    width: 100%;
}

.homeboxcontent p {
    font-family: FFDINWeb,sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #000;
}

.homeboxcontent p.client {
    font-family: FFDINWebBold,sans-serif;
    margin: 10px 0 0 0;
}

.homeboxcontent p.captionlight {
    height: 16px;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    margin: 0 0 10px 0;
}

.homeboxcontent p.text {
    font-size: 18px;
    line-height: 24px;
    white-space: normal;
    height: inherit;
    color: #000;
}

.homepage-grid {
    width: 100%;
    padding: 0 35px;
	box-sizing: border-box;
    overflow: auto;
    clear: both;
    margin: 20px auto;
    position: relative;
}

.grey-bg-home {
	left: calc(7px - 60%) !important;
}

/* /// CLIENT PAGES /// */


.client-container {
    width: 1400px;
    margin: 0 auto 40px auto;
    overflow: auto;
    clear: both;
    position: relative;
}

/* TOP HEADER IMAGES */
.client-top {
    overflow: auto;
    clear: both;
    margin: 0 0 145px 0;
}

.client-header-img {
    float: left;
    width: 700px;
}

.client-header-img img {
    width: inherit;
}



.client-left {
    width: calc(50% - 145px);
    float: left;
}

.client-right {
    width: calc(50% + 145px);
    float: right;
}










.client-box {
    width: 265px;
    font-size: 14px;
    margin: 0 0 72px 0;
    line-height: 17px;
    vertical-align:top;
    position: relative;
}

.client-box-head {
    border-bottom: 1px solid #000;
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    width: 265px;
    font-size: 14px;
}

.client-box-img {
    width: inherit;
    height: inherit;
    margin: 0 0 10px 0;
}

.client-box-img img {
    width: 100%;

}

.client-content {
    width: 700px;
    float: right;
}

.client-content h1 {
    font-family: "FFDINWeb", Verdana;
font-weight: 100;
    font-size: 44px;
    margin: 0 0 54px 0;
    line-height: 44px;
letter-spacing: -1.5px;
}

.client-content p {
    font-family: "FFDINWeb", Verdana;
    font-size: 19px;
    line-height: 25px;
letter-spacing: -.25px;

}

.client-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-content li {
    margin: 0 0 10px 0;
    padding: 0;
    font-family: "FFDINWeb", Verdana;
    font-size: 19px;
    line-height: 25px;
}

.client-content ul.list {
    list-style: disc;
    margin: 0 0 0 20px;
    padding: 0;
}

.client-content .list li {
    margin: 0 0 0 0;
    padding: 0;
}


/* /// SLIDESHOW /// */
.slideshow {
width: 426px;
height: 321px;
margin: 145px 0 0 0;
position: relative;
float: left;
}

.slideshow_box {
width: inherit;
height: inherit;   
overflow: hidden;   
position: absolute;
}

.slideshow_img {    
width: inherit;
height: inherit;
}

.slideshow img {    
width: inherit;
height: inherit;
}



/* /// SLIDESHOW COUNTER /// */
.slideshow_counter {
    position: absolute;
    bottom: 8px;
    width: 100%;
    padding: 0;
    text-align: center;
}
.slideshow_count {
    border-radius: 4px;
    height: 4px;
    width: 4px;
    display: inline-block;
    color: #fff;
    background: #fff;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 10px;
}
.sc_active {
    background: transparent;
    border: 1px solid white;
    margin-bottom: -1px;
}





/* /// GREY BOXES // */
#grey-half, #grey-42 {
	z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #EEE;
}

#grey-42 {
    width: calc(50% - 145px);
}

.grey-box {
    width: inherit;
    max-width: 1400px;
    margin: 15px auto;
    position: relative;
}

.grey-box-inner {
    padding: 30px 60px;
    overflow: hidden;
    clear: both;
    position: relative;
}

.grey-box-right {
    width: 50%;
    float: right;
}

.grey-box-image {
    width: 50%;
    float: left;
    box-sizing: border-box;
}
.grey-box-image img {
    width: 350px;
    margin: 0 60px 0 0;
    float: right;
}


.grey-box-header {
    padding: 0 0 0 70px;
}

.grey-box-content {
    border-left: 1px solid #8d9091;
    padding: 0 20px;
    margin: 0 0 0 50px;
}

.filler {
    display: none;
}


.filler ul.list {
    list-style: disc;
    margin: 0 0 0 18px;


}


p.more, p.less {
    cursor: pointer;
    margin: 0;
font-size: 16px;
color:#263ff5;
}

p.more:hover, p.less:hover {
    color: #666;
}

p.less {
    display: none;
}

/* /// GENERAL FONTS AND OVERALL LAYOUTS*/
html, body, div, * {
    margin: 0;
    padding: 0;
}

body {
    font-family: "FFDINWeb", sans-serif;
}

#grey-bg {
    width: 100%;
    position: fixed;
    background: #ebeeee;
    top: 0;
    height: 100%;
    left: -50%;
    z-index: -2;
    
}

#wrapper {
    width: 100%;
    overflow: auto;
    clear: both;
}
#container {
    padding-top: 77px;
}


h2 {
  font-family: "FFDINWeb";
    font-weight: 100;
    font-size: 28px;
    line-height: 28px;
    margin: 0 0 16px 0;
letter-spacing: -.5px;
}

h3 {
    font-family: "FFDINWeb";
    font-weight: 100;
    font-size: 24px;
    line-height: 28px;
    margin: 0 0 14px 0;
letter-spacing: -.5px;
}

h4 {
    font-family: "FFDINWeb";
    font-weight: 100;
    font-size: 24px;
    line-height: 28px;
    margin: 28px 0 14px 0;
letter-spacing: -.5px;
}

tl p  {   

font-family: "FFDINWebBold";
    font-size: 14px;
letter-spacing: -.5px;
}






p, li {
    font-family: "FFDINWeb";
     font-size: 19px;
    line-height: 25px;
    margin: 0 0 14px 0;
}


footer p {
    color: white;

}

img {
    margin: 0;
    display: block;
}

#logo {
    float: left;
}

#logo img {
    width: 230px;
}

#navbars {
    float: right;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    height: 26px;
}

#navbars img {
    height: inherit;
}

a {
    color: black;
    text-decoration: none;
}

a:hover { color:#263ff5;
    text-decoration: none;
}











a[href$='.pdf'] {
    background: url('images/pdf_icon.png') no-repeat left;
background-size:  15px 17px;
    padding: 0 0 0 24px;
}





a[href^='http:']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}

a[href^='https://foundation.jll.com:']:after {
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}



a[href^='https://uk.avivainvestors.com']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}

a[href^='https://www.standardlifeinvestments.com']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://www.investmentweek.co.uk']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://www.professionaladviser.com']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://www.aberdeenstandard.com']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://professionalparaplanner.co.uk']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}






a[href^='https://www.ubs.com']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://www.avivainvestors.com']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}

a[href^='https://fundraising.co.uk']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://www.civilsociety.co.uk']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}


a[href^='https://www.brewin.co.uk']:after { 
             content: "";
    background: url('images/arrow.png') no-repeat center;
background-size:  12px 12px;
   padding: 0 0 0 20px;

}







#wrapper, body, header {
    min-width: 210px;
/* DISABLED - MAKES EVERYTHING NOT CENTERED
	overflow-y: scroll;

	-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
*/
}


html {
    height: 100%;
    width: 100%;
}

body {
    width: 100%;
    color: #000;
	overflow-y: scroll; /* has to be scroll, not auto */

	-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
    clear: both;
    position: relative;
}

header {
    overflow: auto;
    clear: both;
    width: inherit;
    z-index: 2;
    position: fixed; 
}

#header-fade {
    background: url('images/bg-trans.png');
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    display: none;
}

#scrollUp {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 20px;
    cursor: pointer;
    display: none;
    z-index: 1000;
}

/* /// NAVIGATION /// */
nav {
    background: #a5c6ea;
    width: 300px;
    height: 100%;
    right: -300px;
    display: none;
    position: fixed;
    top: 0;
    overflow-y:  auto;
    padding: 100px 0 0 0;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: none;
    font-family: "FFDINWeb";
    font-weight: 100;
    font-size: 20px;
    color: #000;
    line-height: 28px;
    margin: 0 0 4px 20px;
    cursor: pointer;
}
nav li:hover, nav li:hover a, nav li a.active {
    color: white !important;
    text-decoration: none;
}

/* /// FOOTER /// */
footer {
    background: #5F6A72 ;
    overflow: auto;
    position: relative;
}

footer hr {
    display: block;
    height: 1px;
    border-width: 1px 0px 0px;
    border-color: #fff;
    padding: 16px 0px 0px;
}

p.footer {
    font-family: FFDINWeb,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    line-height: 21px;
    color: #fff;
}

p.footer a {
    color: #ffffff;
}

p.footer a:hover {
    color: #fff;
}


ol.c {
    font-family: "FFDINWeb";
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    line-height: 18px;
    color: #000;
    margin-left: 16px;
    
}




/* // BREADCRUMB // */

#breadcrumb {
    margin-left: calc(50% + 50px);
}

#breadcrumb.cs_breadcrumb {
    margin: -120px 0 0 0;
    position: absolute;
}




/* /// MEDIA WIDTHS /// */

/* MEDIUM WIDTH DESKTOP */
@media screen and (max-width: 1500px) {

.grey-bg-home {
	left: -50% !important;
}

.homebox {
    width: 25%;
}
.hometext {
	width: 50%;
}

.hometext h3 {
	font-size: 2.0em;
}

.homeboxcontent p {
font-size: 14px;
line-height: 18px;
}
    
#breadcrumb.cs_breadcrumb {
    margin: -100px 0 0 0;
}
    
.client-container {
    width: 1120px;
}

.client-top {
    margin-bottom: 116px;
}

.client-header-img {
    width: 560px;
}

.client-box {
    margin: 0 auto 58px auto;
}
.client-box-head {
    margin: 0 auto 20px auto;
}

.client-content {
    width: 555px;
    float: none;
    margin: 0 auto;
}

.client-content h1 {
    margin: 0 0 50px 0;
}


.slideshow {
width: 340px;
height: 257px;
margin-top: 116px;
}

}



/* IPAD LANDSCAPE */
@media screen and (max-width: 1300px) {

.homeboxcontent p {
font-size: 13px;
line-height: 16px;
}


.hometext h3 {
	font-size: 1.6em;
}
    
    #breadcrumb {
        margin-left: 430px;
    }
    #breadcrumb.cs_breadcrumb {
        margin: -80px 0 0 0;
    }
	#logo img {
	    width: 220px;
	}
    #navbars {
        height: 24px;
    }
    
    #grey-half {
        width: 390px;
    }
    
    .grey-box {
        margin: 15px 20px;
        width: auto;
        max-width: none;
    }
    .grey-box-right {
        position: relative;
        margin-left: 300px;
        width: auto;
        float: none;
        padding-right: 10px;
    }
    
    .grey-box-image {
        width: 260px;
    }
    .grey-box-image img {
        width: 260px;
        margin: 0;
    }
    
    .client-container {
        width: auto;
    }
    
    .client-top {
        margin-bottom: 100px;
    }
    
    .client-header-img {
        width: 530px;
    }
    
    .client-box {
        margin-bottom: 50px;
    }
    
    .client-content h1 {
        margin: 0 0 44px 0;
    }
    
    .slideshow {
    width: 322px;
    height: 243px;
    margin-top: 110px;
    }
}

/* IPAD PORTRAIT 1 */
@media screen and (max-width: 1023px) {

.homeboxcontent p {
font-size: 12px;
line-height: 14px;
}

.hometext h3 {
	font-size: 1.6em;
}

    #breadcrumb {
        margin-left: 400px;
    }
    #breadcrumb.cs_breadcrumb {
        margin: -60px 0 0 0;
    }

	.homepage-grid {
		padding: 0 15px;
	}

    .homebox {
        width: 50%;
    }

    #grey-half {
        width: 360px;
    }
    #grey-bg {
        left: 0;
    }

    #wrapper {
        margin-bottom: 0 !important;
    }
	#logo img {
	    width: 200px;
	}
    #navbars {
        height: 18px;
    }
    
    .grey-box {
        margin: 15px 20px;
        width: auto;
    }
    .grey-box-right {
        margin-left: 300px;
    }
    
    .grey-box-image {
        width: 260px;
    }
    .grey-box-image img {
        width: 260px;
    }
    .grey-box-inner {
        padding: 30px;
    }
    
    
    #grey-42 {
        width: 100%;
    }
    
    .client-container {
        width: auto;
        margin: 0 0 40px 0;
        overflow: visible;
    }
    
    .client-left,.client-right {
        float: none;
        width: auto;
        margin: 60px;
        overflow: auto;
    }
    
    .client-top {
        margin-bottom: 80px;
    }
    
    .client-header-img {
        width: 100%;
        max-width: 600px;
    }
    
    .client-left {
        margin: 0 50px;
        font-size: 0;
        width: auto;
    }
    
    .client-box-head {
        margin: 1.5%;
        width: auto;
    }
    
    .client-box {
        display: inline-block;
        width: 30.333%;
        margin: 1.5%;
    }
    
    .client-box-img {
        width: 100%;
    }
    
    .client-content {
        width: inherit;
        font-size: 14px;
margin: 0 30px 0 80px;

    }
    
    .client-content h1 {
        margin: 0 0 20px 0;
    }
    
    .slideshow {
        display: none;
    }


}

/* IPAD PORTRAIT 2 */
@media screen and (max-width: 985px) {


.homeboxcontent p {
font-size: 11px;
line-height: 13px;
}

    #breadcrumb {
        margin-left: 310px;
    }
    #breadcrumb.cs_breadcrumb {
        margin: -60px 0 0 0;
    }

    #grey-half {
        width: 280px;
    }
    .grey-box {
        margin: 15px 20px;
        width: auto;        
    }
    .grey-box-right {
        margin-left: 220px;
    }
    
    .grey-box-image {
        width: 200px;
    }
    .grey-box-image img {
        width: 200px;
    }
    .grey-box-inner {
        padding: 20px;
    }
    .grey-box-right {
        margin-top: 0;
    }
}



/* SMARTPHONE LANDSCAPE */
@media screen and (max-width: 764px) {

.hometext h3 {
	font-size: 1.3em;
}


.hometext {
	width: 100%;
	padding: unset;
}
.hometext .homeboxcontent {
	padding: 20px 10px;
}

    #breadcrumb {
        margin-left: 40px;
    }

	.grey-bg-home {
		left: 0 !important;
	}

    #grey-half {
        width: 100%;
    }
    .grey-box-header {
        padding: 0 0 0 40px;
    }
    .grey-box-content {
        margin: 0 0 0 20px;
    }
    .grey-box-right {
        margin: 0 0 0 -20px;
        padding: 20px 0 0 0;
        display: block;
        clear: both;
        position: relative;
    }
    
    .grey-box-image {
        position: relative;
        width: 100%;
        display: block;
        clear: both;
    }
    .grey-box-image img {
        width: 100%;
    }
}

/* SMARTPHONE LANDSCAPE 2 */
@media screen and (max-width: 652px) {

.hometext h3 {
	font-size: 1.1em;
}

    #navbars {
        opacity: 0.6;
        background: #eee;
    }

    .grey-box {
        width: 100%;
        margin: 15px 0;
    }
    .grey-box-right {
        margin: 0 0 0 -20px;
        padding: 20px 0 0 0;
        display: block;
        clear: both;
        position: relative;
    }
    
    .grey-box-image {
        position: relative;
        width: 100%;
        display: block;
        clear: both;
    }
    .grey-box-image img {
        width: 100%;
    }
    
    .client-left {
        margin: 0 25px;
    }
    .client-right {
        margin: 0 35px;
    }
}

/* SMARTPHONE PORTRAIT */
@media screen and (max-width: 510px) {

.hometext h3 {
	font-size: 1.0em;
}

	.homepage-grid {
		padding: 0 5px;
	}
    .homebox {
        width: 100%;
        min-height: auto;
    }
	.grey-bg-home {
		left: 0 !important;
	}
p, li {
    font-family: "FFDINWeb";
    font-size: 19px;
    line-height: 22px;
    margin: 0 0 14px 0;
}
    
    .client-container {
        width: auto;
        margin: 0 auto 40px auto;
    }
    
    
    .client-header-img {
        margin: 0 0 20px 0;
    }
    
    .client-header-img img {
        width: 100%;
    }
    
    .client-box, .client-box-head {
        display: none;
    }
    
    .client-content {
        width: auto;
        font-size: 14px;
    }

    .client-content {
        width: inherit;
        font-size: 14px;
margin: 0 -10px 0 -10px;

    }

p.footer {
    font-family: FFDINWeb,sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    line-height: 22px;
    color: #fff;
}
    
    .client-content h1 {
        margin: 0 0 20px 0;
font-size: 36px;
    }
    
    .slideshow {
        display: none;
    }
    
    
    .client-right {
        overflow: visible;
    }

}


/* SMARTPHONE SMALL PORTRAIT */
@media screen and (max-width: 360px) {

	#logo img {
		width: 150px;
	}

#navbars {
	height: 16px;
	padding: 14px;
}
}