/*
4.0 Images

4.1 General Images
4.2 Icons
	5.2.1 Regular Icons
	5.2.2 Small Icons
	5.2.3 Large Icons
4.3 Social
4.4 Marquees
	5.4.1 Desktop/Tablet
	5.4.2 Mobile

*/


/* 4.1 General Images */

img,
a img {
	border: none;
	max-width: 100%;
	}

img.right {
	margin: 0px 0px 5px 5px;
	}

img.left {
	margin: 0px 10px 5px 0px;
	}

img.center {
	margin-right: auto;
	margin-left: auto;
	}

img.photo {
	margin: 0px 20px 10px 0px;
	padding: 5px 5px 5px 5px;
	border: 1px solid #ddd;
	width: 60px;
	height: 60px;
	background: #fff;
	box-shadow: 0px 1px 7px rgba(0,0,0,0.15);
	display: block;
	float: left;
	}

div.graph {
	margin: 0px 0px 20px 0px;
	padding: 3% 3% 3% 3%;
	border: 1px solid rgba(0,0,0,0.07);
	width: 94%;
	background: #fff;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.07);
	display: block;
	}

div.graph img {
	padding: 3% 3% 3% 3%;
	width: 94%;
	background: #f8f8f8;
	display: block;
	}

@media all and (max-width: 650px) {
div.graph {
	padding: 0% 0% 0% 0%;
	border: none;
	width: 100%;
	background: #fff;
	box-shadow: none;
	display: block;
	}

div.graph img {
	padding: 0% 0% 0% 0%;
	width: 100%;
	background: #fff;
	display: block;
	}
	}


/* 4.2 Icons */

span.icon {
	margin: -10px auto 15px auto;
	height: 50px;
	width: 50px;
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
	}

@media all and (max-width: 650px) {
span.icon.no-mobile {
	display: none;
	}
	}

span.icon.small {
	margin: 0px auto 15px auto;
	height: 30px;
	width: 30px;
	background-size: 30px 30px;
	background-position: center center;
	}

span.icon.large {
	margin: -15px auto 15px auto;
	height: 100px;
	width: 100px;
	background-size: 100px 100px;
	background-position: center center;
	}

span.icon.left {
	margin: -22px 15px 10px 0px;
	float: left;
	}

span.icon.small.left {
	margin: -5px 15px -5px 0px;
	float: left;
	}

span.icon.align-left {
	margin-left: 0px;
	margin-right: 0px;
	}

span.icon.right {
	margin: -22px -10px 5px 2px;
	float: right;
	}

span.icon.tight-top {
	margin-top: -30px !important;
	}

span.icon.small.tight-top {
	margin-top: -15px !important;
	}



/* 4.2.1 Regular Icons */
/* These are full-color icons, displayed at 50x50, used in top navigation. Icons are centered horizontally and aligned-bottom vertically. The only exception is the Download icon, which is an outline-styled icon that is centered vertically and horizontally. */

span.icon#about {
	background-image: url('/images/icon-about-100x100.png');
	}

span.icon#download {
	background-image: url('/images/icon-download-100x100.png');
	}

span.icon#distributions {
	background-image: url('/images/icon-distributions-100x100.png');
	}

span.icon#fact-sheet {
	background-image: url('/images/icon-fact-sheet-100x100.png');
	}

span.icon#home {
	background-image: url('/images/icon-home-100x100.png');
	}

span.icon#investment-results {
	background-image: url('/images/icon-investment-results-100x100.png');
	}

span.icon#news {
	background-image: url('/images/icon-news-100x100.png');
	}

span.icon#portfolio-composition {
	background-image: url('/images/icon-portfolio-composition-100x100.png');
	}



/* 4.2.2 Small Icons */
/* These are outlined icons, displayed at 30x30, used primarily in the Top 10 Sectors table. Icons are centered horizontally and vertically.  */

span.icon.small#consumer-discretionary {
	background-image: url('/images/icon-consumer-discretionary-60x60.png');
	}

span.icon.small#consumer-staples {
	background-image: url('/images/icon-consumer-staples-60x60.png');
	}

span.icon.small#download {
	background-image: url('/images/icon-download-60x60.png');
	}

span.icon.small#energy {
	background-image: url('/images/icon-energy-60x60.png');
	}

span.icon.small#environment {
	background-image: url('/images/icon-environment-60x60.png');
	}

span.icon.small#finance {
	background-image: url('/images/icon-finance-60x60.png');
	}

span.icon.small#healthcare {
	background-image: url('/images/icon-healthcare-60x60.png');
	}

span.icon.small#industrials {
	background-image: url('/images/icon-industrials-60x60.png');
	}

span.icon.small#laptop {
	background-image: url('/images/icon-laptop-60x60.png');
	}

span.icon.small#utilities {
		background-image: url('/images/icon-utilities-60x60.png');
		}	

span.icon.small#materials {
	background-image: url('/images/icon-materials-60x60.png');
	}

span.icon.small#other {
	background-image: url('/images/icon-other-60x60.png');
	}

span.icon.small#realestate,
span.icon.small#real-estate {
	background-image: url('/images/icon-real-estate-60x60.png');
	}

span.icon.small#semiconductor {
	background-image: url('/images/icon-semiconductor-60x60.png');
	}

span.icon.small#telco {
	background-image: url('/images/icon-telco-60x60.png');
	}

span.icon.small#transportation {
	background-image: url('/images/icon-transportation-60x60.png');
	}



/* 4.2.3 Large Icons */
/* These are full-color icons, displayed at 100x100, and are larger versions of the top navigation icons, used for illustrative purposes. Icons are centered horizontally and aligned-bottom vertically. */

span.icon.large#about {
	background-image: url('/images/icon-about-200x200.png');
	}

span.icon.large#distributions {
	background-image: url('/images/icon-distributions-200x200.png');
	}

span.icon.large#fact-sheet {
	background-image: url('/images/icon-fact-sheet-200x200.png');
	}

span.icon.large#investment-results {
	background-image: url('/images/icon-investment-results-200x200.png');
	}

span.icon.large#news {
	background-image: url('/images/icon-news-200x200.png');
	}

span.icon.large#portfolio-composition {
	background-image: url('/images/icon-portfolio-composition-200x200.png');
	}




/* 4.3 Social */

a.social {
	margin: 0px 7px 0px 0px;
	height: 30px;
	width: 30px;
	display: block;
	float: left;
	}

a.social#twitter {
	background: url('/images/icons@2x.png') no-repeat -10px -810px;
	background-size: 1000px 1000px;
	}

a.social#twitter:hover {
	background: url('/images/icons@2x.png') no-repeat -60px -810px;
	background-size: 1000px 1000px;
	}

a.social#facebook {
	background: url('/images/icons@2x.png') no-repeat -110px -810px;
	background-size: 1000px 1000px;
	}

a.social#facebook:hover {
	background: url('/images/icons@2x.png') no-repeat -160px -810px;
	background-size: 1000px 1000px;
	}

a.social#googleplus {
	background: url('/images/icons@2x.png') no-repeat -210px -810px;
	background-size: 1000px 1000px;
	}

a.social#googleplus:hover {
	background: url('/images/icons@2x.png') no-repeat -260px -810px;
	background-size: 1000px 1000px;
	}

a.social#linkedin {
	background: url('/images/icons@2x.png') no-repeat -310px -810px;
	background-size: 1000px 1000px;
	}

a.social#linkedin:hover {
	background: url('/images/icons@2x.png') no-repeat -360px -810px;
	background-size: 1000px 1000px;
	}



/* 4.4 Marquees */

div.marquee {
	padding: 0px 0px 0px 0px;
	position: relative;
	background: linear-gradient(#406d97, #98d0e7);
	background-size: cover;
	}

div.marquee div.onecolumn {
	margin: 0px auto 0px auto;
	padding: 50px 20px 50px 20px;
	background: url('/images/marquee.jpg');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	}



/* 4.4.1 Desktop/Tablet Marquees */

@media all and (min-width: 651px) and (max-width: 1230px) {
div.marquee div.onecolumn {
	margin: 0px 40px 0px 40px;
	padding: 50px 20px 50px 20px;
	background-position: 30% 50%;
	}
	}

div.marquee div.onecolumn div.column {
	width: 45%;
	}

div.marquee h4,
div.marquee h5 {
	width: 80%;
	}

div.marquee p {
	width: 80%;
	color: #000;
	}


@media all and (max-width: 850px) {
div.marquee div.onecolumn div.column {
	width: 55%;
	}
	}



/* 4.4.2 Mobile Marquees */

@media all and (max-width: 650px) {
div.marquee {
	background-position: 50% 0%;
	}

div.marquee div.onecolumn {
	padding-bottom: 50px;
	background: url('/images/marquee-mobile.jpg');
	background-size: cover;
	background-position: 50% 70%;
	background-repeat: no-repeat;
	}

div.marquee#marquee-home div.onecolumn {
	padding-bottom: 270px;
	background-position: 50% 80%;
	}

div.marquee div.onecolumn div.column {
	width: 100% !important;
	}

div.marquee h1,
div.marquee h2,
div.marquee h3,
div.marquee h4,
div.marquee h5,
div.marquee h6,
div.marquee p {
	width: 100% !important;
	text-align: center !important;
	}

div.marquee div.buttons {
	float: left;
	position: relative;
	left: 50%;
	}

div.marquee div.buttons a.button {
	margin: 0px 5px 0px 5px;
	position: relative;
	right: 50%;
	}
	}