@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";
h1{
    font-size: rem(68);
}
.assetsalloc{
    opacity: 0;
    transition: opacity .5s ease;
    .enable-graph &{
        opacity: 1;
    }
}
.tab-container{
    opacity: 0;
    transition: opacity .5s ease;
   @include media-breakpoint-down(md){
            width: 320px;
    }
    @include media-breakpoint-up(lg){
        width: 634px;
    }
    @include media-breakpoint-down(md){
        background: url(../images/strategy-bg.png) no-repeat;
    }
    @include media-breakpoint-up(lg){
        background: url(../images/strategy-bg-web.png) no-repeat;
    }   
    .enable-graph &{
        opacity: 1;
    }
    
    
    &.active-conservative{
        @include media-breakpoint-down(md){
           background-position:0 -189px;
            .pointer .needle{
               margin: 0 0 0 -6px;
            }
        }
        @include media-breakpoint-up(lg){
           background-position:0 -400px;
        }
        .pointer .needle{
            transform: rotate(-62deg);
        }
    }
    &.active-aggressive{
        @include media-breakpoint-down(md){
            background-position:0 -388px;
                .pointer .needle{
                    margin: 0 0 0 -24px;
                }
        }
        @include media-breakpoint-up(lg){
            background-position:0 -751px;
        }
        .pointer .needle{
            transform: rotate(62deg);
        }
    }
    &.active-moderate{
        @include media-breakpoint-down(md){
           background-position:0 4px;
            .pointer .needle{
               margin: 0 0 0 -14px;
            }
        }
        @include media-breakpoint-up(lg){
            background-position:0 -36px;

        }
        .pointer .needle{
            transform: rotate(0);
        }
    }
    .tab-container-inner{
        @include media-breakpoint-down(md){
            width: 320px;
            height: 180px;
        }
        @include media-breakpoint-up(lg){
            width: 634px;
            height: 314px;
        }
    }
    .tab-one {
        //background: rgba(85, 85, 85, .5);
        left: -7%;
        bottom: -41px;
        width: 43%;
        height: 89%;
        border-radius: 0 150% 0 0;
        transform: rotate(240deg);
    }
    .tab-two {
        @include media-breakpoint-up(lg){     
            width: 39%;
            height: 75%;
            left: 31%;
            top: -24px;
        }
       @include media-breakpoint-down(md){ 
            width: 38%;
            height: 62%;
            left: 31%;
            top: 10px;
        }
        border-radius: 0 150% 0 0;
        transform: rotate(-44deg);
    }
    .tab-three {
        right: -3%;
        bottom: -41px;
        width: 43%;
        height: 89%;
        border-radius: 0 367% 0 0;
        transform: rotate(30deg);
    }

    .tab-container-inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }
}
.pointer {
    transform-origin: bottom;
    position: absolute;
    left: 50%;
    bottom: -43px;
    @include media-breakpoint-up(lg){     
        width: 89px;
        height: 297px;
        margin-left: -44px;
    }
     @include media-breakpoint-down(md){ 
        width: 60px;
        margin-left: -30px;
        height: 168px
    }
   
     .needle {
        position: absolute;
        left: 50%;
        transform-origin: bottom;
        transition: all ease .5s;
        @include media-breakpoint-down(md){
            margin: 0 0 0 -14px;
            border-right: transparent 14px solid;
            border-left: transparent 14px solid;
            border-bottom: #717275 138px solid;
            bottom: 38px;
        }
         @include media-breakpoint-up(lg){
            margin: 0 0 0 -24px;
            border-right: transparent 25px solid;
            border-left: transparent 25px solid;
            border-bottom: #717275 248px solid;
            bottom: 51px;
        }
     }
    .needle-round {
        position: absolute;
        left: 50%;
        background: #4c4d4f;
        @include media-breakpoint-down(md){
            width: 50px;
            height: 50px;
            margin-left: -25px;
        }
        @include media-breakpoint-up(lg){
            width: 66px;
            height: 66px;
            margin-left: -33px;
        }
        border-radius: 50%;
        bottom: 18px;
        &:after{
            content:"";
            position: absolute;
            @include media-breakpoint-down(md){
                width: 18px;
                height: 18px;
                margin: -9px;
            }
            @include media-breakpoint-up(lg){
                width: 24px;
                height: 24px;
                margin: -12px;
            }
            bottom: 50%;
            left: 50%;
            background: #fff;
            border-radius: 50%;
            box-shadow: 2px 2px 5px 1px rgba(8, 8, 8,0.1);
        }
    }
}
@include media-breakpoint-only(md){
    .progressbar {
        width: 180px;
        margin: 0 auto;
    }
}
.strategy-graph{
   background: url(../images/strategy-graph.png) no-repeat 0 0;
   width: 165px;
   height: 165px;
    @include media-breakpoint-down(lg){
        width: 140px;
        background-size: 100%;
        height: 140px;
        canvas{
            width: 140px!important;
            height: 140px!important;
        }
    }
    &:before{
        content: "";
        position:absolute;
        left:50%;
        top:50%;
        width:46px;
        height: 46px;
        margin: -27px 0 0 -24px;
        background:lighten(desaturate($primary, 4.44), 34.31);
        border-radius: 50%;
    }
    &:after{
      content: "";
      left:50%;
      top:50%;
      position: absolute;
      background: url(../images/strategy-graph-icon-sprite.png) no-repeat ;
      width: 54px;
      height: 48px;
      margin: -25px;
    }
    &.indices:after{
        background-position: 0 -53px;
        height: 36px;
        margin-top: -18px;
    } 
    &.forex:after{
        background-position: 0 -93px;
        height: 42px;
        margin-top: -21px;
    }
    &.commodities:after{
        background-position: 0 -137px;
        height: 56px;
        margin-top: -28px;
    }
    &.bonds:after{
        background-position: 0 -195px;
        height: 44px;
        margin-top: -22px;
    }
}
.value{
    padding-left: 55px;
    width: 90px;
    &:before{
        content: "";
        border-top:#444 9px solid;
        border-left:transparent 5px solid;
        border-right:transparent 5px solid;
        width: 0;
        height: 0;
        position:absolute;
        right:41px;
    }
}
.icon_column{
    .icon{
        display: block;
        @include media-breakpoint-up(lg){width:85px;}
        @include media-breakpoint-down(md){width:65px;}
        img{
            max-width: 100%;
            height: auto;
        }
    }
}
.description{
    line-height: 1.3;
}
.arrow{
    border-radius:50%;
     @include media-breakpoint-up(lg){
         width:34px;
         height:34px;
    }
    @include media-breakpoint-down(md){
         width:24px;
         height:24px;
    }
    position: relative;
    display: inline-block;
    vertical-align: middle;
    &:after{
        content:"";
        width: 0;height: 0;
        position: absolute;
        left:50%;top:50%;
    }
    &.up{
        border:#78b757 2px solid;
        &:after{
            @include media-breakpoint-up(lg){
                border-bottom:#78b757 10px solid;
                border-left:transparent 6px solid; 
                border-right:transparent 6px solid; 
                margin: -6px 0 0 -6px;
            }
             @include media-breakpoint-down(md){
                border-bottom: #78b757 8px solid;
                border-left: transparent 5px solid;
                border-right: transparent 5px solid;
                margin: -5px 0 0 -5px;
            }
        }
        
    }
    &.down{
        border:#ff5959 2px solid;
        &:after{
            @include media-breakpoint-up(lg){
                border-top:#ff5959 10px solid;
                border-left:transparent 6px solid; 
                border-right:transparent 6px solid; 
                margin: -3px 0 0 -6px;
            }
            @include media-breakpoint-down(md){
                border-top: #ff5959 8px solid;
                border-left: transparent 5px solid;
                border-right: transparent 5px solid;
                margin: -3px 0 0 -5px;
            }
        }
    }
}
@include media-breakpoint-down(md){
    .trend, .range {
            font-size: 14px;
    }
    .content-wrap{
        height: 57px;
        overflow: hidden;
        &:after{
            content: "...";
            position: absolute;
            right: 0;
            bottom: 0;
            background: #fff;
            width: 25px;
            height: 25px;
            line-height: 23px;
        }
        &.active{
            height: auto;
            &:after{
                display: none;
            }
        }
    }
    .readmore{
        .less,.more{
            margin-left: 2px;
        }
        &:not(.active) .less{
            display: none;
        }
        &.active{
            .more{
                display: none;
            }
        }
    }
    .strategy-container {
        margin: 0 -15px;
        .outer-row{
            margin: 0;
            
        }
    }
        
}
.line_column {
    position: absolute;
    right:0;
    &.lavender{
        border-right: 2px solid #a28fce;
    }
    &.pink{
        border-right: 2px solid #d990bd;
        }
    &.blue{
        border-right: 2px solid #8cbfdf;
        }
    &.cyan{
        border-right: 2px solid #8fddd4;
        }
    &.orange{
        border-right: 2px solid #f9cd97;
        }
    &.first{
        @include media-breakpoint-up(lg){top: 50%;}
        @include media-breakpoint-down(md){top: 1.75rem;}
        bottom:0 
    }
    &.middle{
        top: 0;
        bottom:0 
    }
    &.last{
        top:0;
        @include media-breakpoint-up(lg){height: 50%;}
        @include media-breakpoint-down(md){height: 1.75rem;}
    }
}
.title{ 
    line-height: 1.2;
    &:before{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: -9px;
           html[dir="rtl"] &{
             right: -7px;
             left: inherit;
           }
        @include media-breakpoint-up(lg){top: 50%;}
        @include media-breakpoint-down(md){top: 10px;}
        content: "";
        margin: -8px 0 0;
    }
    &.lavender{
        &:before{
            border: 2px solid #a28fce;
        } 
    }
    &.pink{
        &:before{
            border: 2px solid #d990bd;
        }
    }
    &.blue{
        &:before{
            border: 2px solid #8cbfdf;
        }
    }
    &.cyan{
        &:before{
            border: 2px solid #8fddd4;
        }
    }
    &.orange{
        &:before{
            border: 2px solid #f9cd97;
        }
    }
}
img.img-icon.position-absolute {
    left: 15px;
    margin-top: -25px;
    html[dir="rtl"] &{
             right: 15px;
             left: inherit;
           }
    @include media-breakpoint-up(lg){top: 50%;}
    @include media-breakpoint-down(md){top: 25%;}
}
.disclaimer{
    line-height: 1.4;
    color: #969896;
}
.bg-gray-200:before {
    box-shadow: inset 0 0 6px 3px rgba(0,0,0,0.05);
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    right: -15px;
    top: 0;
    left: -15px;
}
.bg-gray-200:after {
    content: "";
    display: block;
    height: 15px;
    position: absolute;
    width: 100%;
    top: 12px;
    background: #f6f6f6;
    @include media-breakpoint-down(md){
        display: none;
    }
}
.graph-outer{
    @include media-breakpoint-only(md){
        max-width: 645px;
        margin: 0 auto;
    }
}
.cms-main-head {
    html[dir="ltr"] & {
        font-size: 4.125rem;
    }
    html[dir="rtl"] & {
        font-size: 3rem;
    }

    &:before {
    width: 120px;
    height: 7px;
        @include media-breakpoint-down(md){
            top: 96%;
        }
	}

}