/*******************************************************************
**														          **
**         EasyFact!         		   							  **
**         Author: Visual Capital Markets - Geneva      	      **
**	       												          **
*******************************************************************/


/* ----------------------------------------------------------------
Body
-----------------------------------------------------------------*/
:root {
    /* --primary: #fd8d3c; */
    --primary: #5f7bb5;
    --secondary: #aba5a0;
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f39c12;
    --info: #3498db;
    --dark: #2c3e50;
    --light: #c5c5c5;
}

html {
overflow: hidden;
height: 100%;
cursor: pointer;
}

body {
width: 100%;
max-width: 2560px;
overflow: auto;
height: 100%;
}

/*body, 
.easyfact-section {
padding-top: 0px;
margin-top: 20px;
background-color: #fff;    
}*/

.col-lg-1,
.col-lg-3,
.col-lg-6,
.col-lg-9,
.col-lg-10 {
padding: 0;
margin: 0;
}  

.col-lg-12  {
padding-right: 0;
padding-left: 0;
margin-bottom:20px 
}  

.col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

#div-logo {
height:40px;
margin-bottom:20px;
}

#logoVCM {
width:160px;
}

.heading-text {
  margin-bottom: 5px;
}

#teaser {
font-weight:500;
color:#fff; 
padding-left:40px; 
padding-right:120px; 
text-align:left;
}

.kiosk-icon {
width: 20px;
cursor: pointer;
}

button.btn:hover, 
button.btn:focus, 
button.btn:not(:disabled):not(.disabled):active, 
button.btn:not(:disabled):not(.disabled).active, 
.btn:not(.close):not(.mfp-close):hover, 
.btn:not(.close):not(.mfp-close):focus, 
.btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active, 
.btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, 
a.btn:not([href]):not([tabindex]):hover, 
a.btn:not([href]):not([tabindex]):focus, 
a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, 
a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active {
background: var(--primary);
border: 0px solid var(--primary);
color: #ffffff;
}

button.btn, .btn:not(.close):not(.mfp-close),
button.btn:focus, .btn:not(.close):not(.mfp-close):focus,
button.btn:active, .btn:not(.close):not(.mfp-close):active {
font-size: 14px;
min-width:60px;
font-weight: 400;
background-color: var(--primary);
border: 1px solid var(--primary);
border: 0px solid var(--primary);    
float: right;
}

button.btn:hover, .btn:not(.close):not(.mfp-close):hover {
background-color: #555;
border: 1px solid #555;
}

#btn-docs {
float:right; 
border:0; 
}

#btn-factsheet {
float:right; 
margin-right:15px;
border:0; 
}

#btn-text-color {
color:white;
}

#btn-text-color:hover {
color:#e5e5e5;
}

#btn-manager, 
#btn-fundcenter {
  background-color: var(--primary);
  border-color: var(--primary);
  border-radius:25px;
  height:40px;	
  margin-top:20px;
}

#documentation-buttons {
padding-bottom: 100px;
float:none;
margin:auto;
}

#documents {
margin-top: 20px;
margin-bottom: 40px;
}

.factsheet-text {
font-family:'Arial';
font-size: 16px; 
color: var(--primary); 
padding-left: 100px;
}

.factsheet-text-modal {
color: #999999;
}

.fa.fa-file-pdf {
color: var(--primary);    
}

#company-img {
width:200px;
padding: 30px 0 30px;
}

.modal {
position: fixed;
z-index: 1050;
display: none;
width:100%;
height: 100%;
overflow: hidden;
outline: 0;
}

.modal-backdrop {
display: none !important;
}

.modal-content {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
border-radius: 20px !important;
}

.modal p {
font-size: 15px;
line-height:21px;
color:#000;
margin-top: 0;
margin-bottom: 13px;
font-weight: 400;
}

#commentary-text {
color:#999999;
line-height: 24px;
}

#manager-comments {
    padding-top: 35%;
    padding-left: 10%;
}

.modal-dialog {
max-width: 800px;
}

.modal-open {
overflow: auto !important;
padding-right: 0 !important;
}

#btn_modal1, #btn_modal2 {
font-size: 12px;
}

.wizard > .steps ul li.current a, 
.wizard > .steps ul li.current a:hover, 
.wizard > .steps ul li.current a:active {
background: var(--primary);
color: #ffffff;
}

.wizard > .steps ul li a:hover, 
.wizard > .steps ul li a:active {
background: var(--primary);
color: #ffffff;
}

#corporate-logo {
    width: 250px;
    padding: 10px 0 10px 30px;
}

.accordion .ac-item .ac-title {
    font-weight:700
}

#web-splash {
 margin-top:0px;
}

/* ----------------------------------------------------------------
Typo
-----------------------------------------------------------------*/

a {
color: #999999;
}

a:not(.btn):not(.badge):hover, 
a:not(.btn):not(.badge):focus, 
a:not(.btn):not(.badge):active {
text-decoration: none;
outline: none;
color: var(--primary);
}

a.comment {
font: 1em sans-serif;    
color: #777777;
text-align:left; 
line-height: 24px;
}

a.comment:hover {
color: var(--primary);
}

p {
font-size: 16px;
font-style: normal;
font-weight: 400;
text-transform: none;
line-height: 1.7;
letter-spacing: 0;
color: #333;
font-family: "Arial", sans-serif;
}

h3  {
color: var(--primary);
}

.heading-text, h5, .h5  {
color:#696969;    
font-style: 24px;
font-weight: 500;
/* padding-top: 10px; */
}

h5:hover {
    color: var(--primary);
  }

.legend  {
margin-top:15px;
padding-left:15px;
padding-right:5px;
}

.legend-text {
padding-left:15px;
color:#333;
font-size:10px;
line-height: 12px;
}

.page-link {
position: relative;
display: block;
padding: .4rem .75rem;
margin-left: -1px;
line-height: 1.25;
color: #fff;
background-color: #666;
border: 1px solid var(--primary);
}

.page-link:hover {
color: #000;
}
.pagination-flat {
margin-top: 10px;
border-radius: 100%;
}

#underline {
margin-top: -2px;
}

#as-of {
padding-top: 70px;
}
    
#date-factsheet {
font-weight: 700;
}

#annualized {
font-size:10px;
line-height: 12px;
} 

#legend-1 { 
margin-top: 40px;
} 

#legend-2 { 
margin-top: 0px;
line-height:50%;
} 

hr {
    border-color: #999999;
}

.menu-title {
    float: right; 
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.menu-li {
    margin-left: 20px;
}



/* ----------------------------------------------------------------
Tables
-----------------------------------------------------------------*/

th  {
font-size: 15px;
font-weight: 500;
color: var(--primary);
}

td  {
font-size: 15px;
}

tr:hover  {
background-color: #eeeeea;
}

.tab-title {
font-size: 15px;
}

.tab-text {
color: var(--primary);
}

#index-text {
color: #999999
}

.tabs .nav-tabs .nav-link.active {
color: var(--primary);
font-weight: 600;
background-color: transparent;
border-bottom: 2px solid var(--primary);
}

/* ----------------------------------------------------------------
EasyFact Layout
-----------------------------------------------------------------*/

#fundPerf, #yearlyPerf, #regional, 
#sector, #marketCap, #impact {
max-width:780px,
}

/* -----------------------Top Elements---------------------------*/

.card-objective-top  {
height: 300px;
/* padding:10px; */
background-color: #fff;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
z-index: 99;
  }

.p-dropdown .p-dropdown-content, .p-dropdown ul.p-dropdown-content {
    z-index: 9997;
  }

.fundName  {
padding:0;
margin-bottom: 20px;
}

#main-title {
margin-top: 10px;
}

#objective-text {
margin-bottom:0;
overflow: auto;
}
  
.scroll-text {
margin-top: 20px;
margin-bottom: 20px;
height:160px;
width:80%;
border:1px solid #ccc;
overflow:auto;
}

#other-share-class {
text-align: right; 
color:var(--primary); 
font-weight: 500;
}

.card-manager-top  {
height: 300px;
padding:0px;
background-color:#fff;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

#commentary {
float:left;
}

#manager-col {
float:right;
}

#commentary-left-title {
margin-top:15% ;
}

#manager-commentary  {
color:#999999;    
font-weight: 600;
padding-top: 95px;
}

#manager-img-1 {
width:160px; 
/*padding-top:23px;
padding-right:15px;*/
padding-top:0px;
padding-right:0px;
}

#manager-img-2 {
width:140px; 
padding-top:23px;
padding-right:20px;
margin-left: 10px;
}

#manager-name-1 {
font-size: 12px;
font-weight: 700; 
line-height: 24px;   
}

#manager-name-2 {
font-weight: 500; 
margin-top:10px;
margin-left: 10px;
}

#manager-role-1 {
font-size:12px;
font-weight: 400; 
line-height: 12px;   
margin-top:-10px;
}

#manager-role-2 {
font-size:10px;
font-weight: 400; 
line-height: 12px;   
margin-top:-10px;
margin-left: 10px;
}

#rating {
    float: right;
    font-weight:500;
    }

.splash-text {
margin-top: 40px;
margin-bottom: 20px;
color:#000;	
    }

#teaser-text {
margin-bottom: 40px;
color:#000;	
    }


/* -----------------------Data High Left--------------------------*/

#left-top-col {
padding-left:0px;
padding-right: 5px;
}

.card-data-left  {
height: 750px;
padding:10px;
width:97%;
background-color: #fff;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

#key_information {
float:none;
text-align:left;
}

#risk,
#allocation, 
#statistics,
#table_display {
float:none;
margin:auto;
text-align:left;
}

#portfolio_performance {
padding:0 10px 0 10px;
text-align:left;
}

#largest_equity  {
text-align:left;
}


.fund_results {
color: var(--primary);
}

.index_results {
color: #999999;
}

/* -----------------------Data High Center------------------------*/

#col-centrale  {
padding-left: 5px;
}

.card-data-center-risk  {
height: 150px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom: 156px;
margin-left:10px;
width:97%;
background-color: #FFF;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

.card-data-center-risk2  {
height: 130px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom: 60px;
margin-left:10px;
width:95%;
background-color: #FFF;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

.page-link-risk {
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
font-weight: 500;
}

.card-data-center-top  {
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom: 20px;
margin-left:10px;
width:95%;
background-color: #fff;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

.card-data-center-bottom  {
height:269px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom: 80px;
width:97%;
background-color: #fff;
line-height: 16px;
box-shadow: 0 10px 14px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

/* -----------------------Data High Right-------------------------*/

#right-top-col {
padding-left: 0px;
padding-right: 0px;
}

.card-graph-right {
height:750px;
padding:10px;
width:100%;
background-color: #fff;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

.card-graph-right-bottom {
height:500px;
}

#exposures {
    padding-left: 15px;
}

#performance-chart,
#yearly-chart  {
padding:10px;
width:100%;
background-color: #fff;
}

#performance-table {
padding:10px;
width:100%;
background-color: #fff;
margin-top:35px;
}

.performance-table-titles {
color: #999999;
}

#perf1 {
height:20px;
position:absolute;
/* top:0px; */
width:95%;
}

#perf2 {
height:20px;
position:absolute;
/* top:360px; */
width:95%;
}

#perf3 {
height:20px;
position:absolute;
/* top:450px; */
width:95%;
}    

/* ---------------------Data bottom Left-------------------------*/

#left-bottom-col {
padding-top: 0;    
padding-left: 0px;
padding-right: 10px;
}
    
.card-data-bottom-left  {
height: 500px;
padding:10px;
width:100%;
background-color: #fff;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

#companies-total {
float: right;
font-weight:500;
}

/* ---------------------Data bottom Right------------------------*/   
    
#right-bottom-col {
padding-left: 0px;
padding-right: 0px;
}

.card-data-exposures  {
height:500px;
padding:10px;
width:100%;
background-color: #fff;
line-height: 16px;
box-shadow: 0 10px 14px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
        
/* ------------------------News module---------------------------*/   

.card-news  {
height: 400px;
padding:10px;
background-color: #fff;
line-height: 16px;
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

.news {
height:350px;
overflow: auto;
}

/* ------------------------Documentation buttons---------------------------*/ 

#documentation-buttons {
    padding-top:30px;
    padding-bottom: 70px;
    flex:100%;
    float: none;
    margin-right: -15px;
  }

  #btn-docs {
    size: 70%;    
    float:right; 
    margin-right: 40px;
    border:0; 
    }
    
   #btn-factsheet {
    float:right; 
    size: 70%;   
    margin-right:0;
    border:0; 
    }

/* ------------------------Cards shadow---------------------------*/     

.card-objective-top:hover, .card-manager-top:hover,
.card-data-left:hover, .card-data-center-top:hover, 
.card-data-center-bottom:hover,.card-graph:hover,
.card-data-bottom-left:hover, .card-graph-right:hover,
.card-data-center-risk:hover, .card-data-exposures:hover,
.card-news:hover {
box-shadow: 0 24px 32px 0 rgba(0,0,0,0.2);
}

/* -----------------------Miscellaneous---------------------------*/

#category, #confirm {
padding-top: 40px;
}

#domicile {
padding-top: 20px;
}

#disclaimer {
padding-top: 10px;
}

#category-text {
margin-top: 10px;
}
    
.popular-tab {
height:300px;
}

#cover {
background-size: cover;
height: 100%;
text-align: center;
display: flex;
align-items: center;
position: relative;
}

#cover-caption {
width: 100%;
position: relative;
z-index: 1;
}

form:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color:#999999;
opacity: .5;
z-index: -1;
border-radius: 10px;
}

.post-thumbnail-content {
padding-top: 0;
}

.post-thumbnail-entry {
margin-bottom: 10px;
padding-bottom: 0px;
}
    
#menu-settings {
font-size: 24px; 
margin-top: 30px;
}

#legal-documents-text {
font-size: 16px; 
font-weight: 500; 
padding-left: 40px; 
color: #999999;
}

.tooltip-inner {
background-color: #7f00ff;
color: #fff;
font-size: 16px;
font-weight: 600;
height:100%;
text-align: center;
}

.retrait {
padding-left: 1.5em;
text-indent: -0.5em;
}


.highcharts-navigator-mask-inside {
  fill: rgba(253, 141, 60, 0.3);
}

.highcharts-label-box {
    color: var(--primary);
}


/* ----------------------------------------------------------------
Sections styles and separators
-----------------------------------------------------------------*/

@import "compass/css3";

$color1:teal;

separation-section {
	position: relative;
	padding: 10em ;
	background: $color1;
	color: #fff;
	text-align: center;
}

/* Common style for pseudo-elements */
separation-section::before,
separation-section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

/* Triangles */
.ss-style-triangles::before,
.ss-style-triangles::after {
	left: 50%;
	width: 100px;
	height: 100px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.ss-style-triangles::before {
	top: -50px;
	background: $color1;
}

.ss-style-triangles::after {
	bottom: -50px;
	z-index: 10;
	background: inherit;
}

/* Half Circle */
.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
	left: 50%;
	z-index: 10;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: inherit;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ss-style-halfcircle::before {
	top: -50px;
}

.ss-style-halfcircle::after {
	bottom: -50px;
}

/* Big Triangle */
svg#bigTriangleColor {
	pointer-events: none;
}

#bigTriangleColor path {
	fill: darken($color1, 7%);
	stroke: darken($color1, 7%);
	stroke-width: 2;
}

#split_box {
    height:1300px;
}

#split_text {
  text-align: justify;
  color: #000;
  float: none;
  margin-left: 25%;
  margin-right: 25%;
  margin-bottom:40px	
}

#my_video {
  margin-left: 30%;
  margin-right: 30%;
}

/* ----------------------------------------------------------------
Desktop Dark Version
-----------------------------------------------------------------*/

.dark p,
.dark a {
color: #999999;
}

.dark .card-objective-top, 
.dark .card-manager-top,
.dark .card-data-left, 
.dark .card-data-center-top, 
.dark .card-data-center-bottom,
.dark .card-graph,
.dark .card-data-bottom-left, 
.dark .card-graph-right,
.dark .card-data-center-risk, 
.dark .card-data-exposures,
.dark .card-news,
.dark .highcharts-background,
.dark #performance-table {
background-color: #333;
}

.dark .highcharts-text-outline {
color: transparent;
}

.dark .manager, 
.dark .manager:hover {
background-color: #333;
}

/* .dark #circularcursor {
background-color: #ff0000;
border:1px solid #ff0000;    
} */

.dark .tooltip-inner {
background-color:#ff0000 ;
}

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
}

.nav-tabs .nav-link.active {
  color: #fff;
  background-color: var(--primary);
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .nav-link {
  color: #fff;
  background-color: #999;
  border-color: #999 #999 #fff;
}



/* ----------------------------------------------------------------
Responsive Versions
-----------------------------------------------------------------*/

.responsive {
    width: 100%;
    max-width: 600px;
    height: auto;
  }

@media screen and (min-width: 1600px) {

    .container{
        max-width: 2560px;
    }

    .container-box {     
    min-height: 500px;
    float: none;
    margin-top: 0;
    }

    #top-title {
    padding-bottom: 20px;
    float: left;
    position: relative;
    left: 47%;
    }

    #fundPerf, #yearlyPerf, #regional, #sector, #marketCap, #impact{
    max-width:650px,
    }

}

@media screen and (max-width: 1600px) {

    p {
    font-size: 15px;
    }
    
    th  {
    font-size: 12px;
    }
    
    td  {
    font-size: 12px;
    }

    #commentary-left-title {
     margin-top:25%;
     }

     #top-title {
        padding-bottom: 100px;
        float: left;
        position: relative;
        left: 45%;
    }
}

@media screen and (max-width: 1366px) {


    .container{
        max-width: 1366px;
    }

    .container-box {     
    min-height: 700px;
    float: none;
    margin-top: 0;
    }
    
    #top-title {
        padding-bottom: 40px;
        float: left;
        position: relative;
        left: 42%;
        }

    .card-data-left {
    height:750px;
    }

    .card-graph-right {
     height:750px;
    width: 100%;
    }

    #documents{
    font-size: 14px;
    }

    #fundPerf, 
    #yearlyPerf, 
    #regional, 
    #sector, 
    #marketCap, 
    #impact {
    max-width:550px,
    }

    #commentary-left-title {
        margin-top:25%;
        }
    
    #manager-img-1 {
        width:160px; 
        padding-top:23px;
        padding-right:25px;
        }

    #objective-text {
    font-size: 15px;
    }

    .tab-title {
    font-size: 12px;
    }

    #top-title {
        padding-bottom: 40px;
        float: left;
        position: relative;
        left: 45%;
        }

}

@media screen and (max-width: 1280px) {

    .card-data-left  {
    height: 740px;
    }

    .card-data-center-bottom  {
    height:289px;
    }

    .card-graph-right  {
    height:740px;
    }    

    .card-data-exposures  {
    width:100%;
    padding-left: 15px;   
    padding-right: 15px;
    }

    .container{
    max-width: 1280x;
    }

    .fundName {
    padding-left: 0px;   
    padding-right: 0px;
    }

    .legend-text {
    font-size:10px;
    line-height: 12px;
    }

    #managers-commentaries {
    text-align:left; 
    padding-left:0px; 
    padding-top:102px;
    line-height: 18px;    
    }

    #manager-img-1 {
    width:140px; 
    padding-top:23px;
    padding-right:35px;
    }

    #objective-text {
    font-size: 14px;
    }

    #top-title {
    padding-bottom: 40px;
    float: left;
    position: relative;
    left: 45%;
    }
}

@media screen and (max-width: 1080px) {

    #annualized {
    font-size:8px;
    line-height: 10px;
    }
       
    .btn:not(.close):not(.mfp-close), 
    button.btn:focus, .btn:not(.close):not(.mfp-close):focus, 
    button.btn:active, .btn:not(.close):not(.mfp-close):active {
    min-width: 40px;
    }

    button.btn, .btn:not(.close):not(.mfp-close),
    button.btn:focus, .btn:not(.close):not(.mfp-close):focus,
    button.btn:active, .btn:not(.close):not(.mfp-close):active {    
    font-size: 16px;
    }

    .card-data-left  {
    height: 850px;
    }

    .card-data-center-bottom  {
    height:329px;
    }

    .card-graph-right  {
    height:850px;
    }

    .card-data-center-top,
    .card-data-center-bottom,
    .card-graph-right {
    line-height: 10px;
    }   

    .card-objective-top {    
    overflow: scroll; 
    scrollbar-color: #d5d5d5 #fff;
    }

    .container{
    max-width: 1024px;
    padding-left:10px;
    padding-right:10px;
    }

    #fundPerf, 
    #yearlyPerf, 
    #regional, 
    #sector, 
    #marketCap, 
    #impact {
    max-width:450px,
    }

    .nav-link.tab-title {
    font-size: 12px;
    }

    #objective-text {
    font-size: 13px;
    }

    .page-link {
    font-size: 12px;
    }

    #perf2 {
    width:96%;
    }

    #top-title {
    padding-bottom: 40px;
    float: left;
    position: relative;
    left: 42%;
    }

}


@media screen and (min-width: 992px) {
	#call-button  {
		display:none
	}

}

@media screen and (max-width: 991px) {

#split_box {
    height:2150px;
}

#split_text {
  text-align: justify;
  color: #000;
  float: none;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom:40px	
}

#my_video {
  margin-left: 0%;
  margin-right: 0%;
}

#teaser {
font-weight:500;
color:#fff; 
padding-left:20px; 
padding-right:20px; 
text-align:left;
}


#call-button  {
display:true;
margin-top:40px;
background-color:#000;
border-radius:25px;
}
	
.col-lg-3 {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
  }

#web-splash {
 margin-top:80px;
}
	
    .container{
        max-width: 991px;
    }

    .container-box {     
    float: none;
    margin-top: 0;
    }
    
    #top-title {
        padding-bottom: 40px;
        float: left;
        position: relative;
        left: 40%;
        }

    #managerview,
    #websiteview {
        width:100%;
        height:auto;
    }

    #left-intro {
	height:160px;
	-ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
	
    #right-intro,
    #left-splash,
    #center-splash,
    #right-splash {
        display: none;
    }

    #intro-splash {
        min-height: 150px;
        padding-left: 100px;
        padding-right: 100px;
    }

    #manager-splash,
    #web-splash {
        min-height: 600px;
        padding-left: 250px;
        padding-right: 250px;
    }

    .card-data-left,  
    .card-data-center-risk,
    .card-data-center-top,
    .card-data-center-bottom,  
    .card-graph-right,
    .card-data-bottom-left,  
    .card-data-exposures  {
    padding-left: 15px;  
    padding-right: 15px;  
    width:100%;
    }

    .card-news {
    height:800px
    }

    .news-holder {
        height: 300px; 
        overflow-y: auto; 
    }

    #commentary {
    width:50%;
    }
        
    #fundPerf, 
    #yearlyPerf, 
    #regional, 
    #sector, 
    #marketCap, 
    #impact {
    max-width:950px;
    height: 400px;
    }

    #legend-2 { 
    margin-top: 0px;
    }

            
    #manager-col {
    width:50%;
    color: transparent;
    }

    #right-top-col,
    #right-bottom-col,
    #left-top-col,
    #left-bottom-col,
    #col-centrale {
    padding-left: 0px;
    padding-right: 0px;
    }

}

@media screen and (max-width: 450px) {

#btn-manager, 
#btn-fundcenter {
  display: none;
}
	
    #top-title {
        padding-bottom: 0px;
        float: left;
        position: relative;
        left: 28%;
        }

    #intro-splash {
        min-height: 150px;
        padding-left: 50px;
        padding-right: 50px;
    }

    #manager-splash,
    #web-splash {
        min-height: 550px;
        padding-left: 50px;
        padding-right: 50px;
    }

    th  {
    font-size: 15px;
    }

    td  {
    font-size: 15px;
    }
    
    #corporate-logo {
    width: 200px;
    padding: 10px 0 10px 10px;
    }

    .header-extras {
     float: right;
    }

    .card-objective-top {
     height:450px 
    }

    #small-col1 {
    width:100%;
    height:100%
    }

    #objective-text {
    font-size: 15px;
    }

    .card-data-left,  
    .card-data-center-risk,
    .card-data-center-top,
    .card-data-center-bottom,  
    .card-graph-right,
    .card-data-bottom-left,  
    .card-data-exposures  {
    padding-left: 15px;  
    padding-right: 15px;  
    width:100%;
    }

    .card-manager-top {
    height: 320px;
    padding: 0px;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }

    #manager-col {
    width:100%;
    height:200px
    }

    #manager-img-1 {
    width: 120px;
    padding-top: 15px;
    padding-right: 0px;
    }

    #manager-name-1 {
    font-size: 12px;
    font-weight: 700; 
    line-height: 24px;   
    color: #999;
    }
    
    #manager-name-2 {
    font-weight: 500; 
    margin-top:10px;
    margin-left: 10px;
    color: #999;
    }
    
    #manager-role-1 {
    font-size:12px;
    font-weight: 400; 
    line-height: 12px;   
    margin-top:-10px;
    color: #999;
    }
    
    #manager-role-2 {
    font-size:10px;
    font-weight: 400; 
    line-height: 12px;   
    margin-top:-10px;
    margin-left: 10px;
    color: #999;
    }
        
    #commentary-left-title {
    margin-top:0%;
    }

    .card-manager-top,
    #right-top-col,
    #statistics {
    margin-top: 15px;  
    width:100%;
    }

    #statistics {
    height:380px;
    }

    .performance-table-titles {
    font-size: 11px;
    }
    
    .index_results {
    color: #999999;
    font-size: 11px;
    }
            
    .fund_results {
    color: var(--primary);
    font-size: 11px;
    }

    #top-elements {
    padding-bottom: 0;
}

    #commentary {
    width:50%;
    }

    #fundPerf, 
    #yearlyPerf, 
    #regional, 
    #sector, 
    #marketCap, 
    #impact {
    max-width:400px;
    height: 350px;
    }

    #right-top-col,
    #right-bottom-col,
    #left-top-col,
    #left-bottom-col,
    #col-centrale {
    padding-left: 0px;
    padding-right: 0px;
    }

   #right-bottom-col {
    margin-top : 15px;
    }

    .nav {
    display:block;
    } 

    .easyfact-section {
    margin-top: 15px ;
    padding: 0;
    }

    .card-data-left  {
    height: 700px;
    padding:10px;
    width:100%;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }
        
    .card-data-center-risk  {
    height: 100px;
    margin-top:20px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom: 156px;
    width:100%;
    background-color: #FFF;
    line-height: 16px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }
    
    .card-data-center-top  {
    height: 285px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom: 20px;
    width:100%;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }
    
    .card-data-center-bottom  {
    height:269px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom: 80px;
    width:100%;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 10px 14px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }
    
    .card-graph-right {
    height:720px;
    padding:10px;
    width:100%;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }
        
    .card-data-bottom-left  {
    height: 500px;
    padding:10px;
    width:100%;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }
    
    .card-data-exposures  {
    height:580px;
    padding:10px;
    width:100%;
    background-color: #fff;
    line-height: 16px;
    box-shadow: 0 10px 14px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    }

    #right-top-col {
    padding-left: 0px;
    padding-right: 0px;
    height: 750px;
    }

    #portfolio_performance {
        margin-top: 15px;
    padding:0 10px 0 10px;
    text-align:left;

    }

    #performance-table {
    padding:0px;
    width:100%;
    background-color: #fff;
    margin-top:0px;
    }

    #btn-docs {
    size: 70%;
    float: right;
    margin-right:0px;
    margin-bottom: 40px;
    border: 0;
      }
        
}