/*Fonts*/

@font-face {
  font-family: 'UniversLTStd-Light';
  src: url('UniversLTStd-Light.eot?#iefix') format('embedded-opentype'),  url('UniversLTStd-Light.otf')  format('opentype'),
	     url('UniversLTStd-Light.woff') format('woff'), url('UniversLTStd-Light.ttf')  format('truetype'), url('UniversLTStd-Light.svg#UniversLTStd-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'UniversLTStd-Bold';
  src: url('UniversLTStd-Bold.eot?#iefix') format('embedded-opentype'),  url('UniversLTStd-Bold.otf')  format('opentype'),
	     url('UniversLTStd-Bold.woff') format('woff'), url('UniversLTStd-Bold.ttf')  format('truetype'), url('UniversLTStd-Bold.svg#UniversLTStd-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}


.open-font
{
    font-family: 'UniversLTStd-Light', sans-serif;
}

.weight-300
{
    font-weight:300;
}

.weight-400
{
    font-weight: 400;
}

.weight-600
{
    font-weight: 600;
}

.weight-700
{
    font-family: 'UniversLTStd-Bold' !important;
}

/*General*/

.block
{
    display: block;
}

.percentage-70
{
    width: 70%;
}

.percentage-80
{
    width: 80%;
}

.filler-img
{
    height: 100%;
    width: auto;
    visibility: hidden;
}

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}


.bot-mar-80
{
    margin-bottom: 80px;
}

.padding-per-10
{
    padding-left: 10%;
}


.color-white
{
    color: #ffffff !important;
}

.bg-image
{
    position:absolute; /*replace*/
    height: 100vh;
    width: auto;
    max-width: 33vw;
}

.bg-image-vector
{
    position:absolute; /*replace*/
    height: 100vh;
}

.no-display
{
    display: none !important;
}

.no-opacity
{
    opacity: 0 !important;
}



/*Containers*/

.top-right-cont
{
    /*position: absolute;*/
    position:relative;
    top: 28px;
    right: 0;
    height: 60px;
}

body
{
    overflow-x: hidden;
    overflow-y: hidden;
}

.main-cont
{
    overflow: hidden;
    max-width: 100vw;
    height: 100vh;
    position: relative;
}

.menu
{
    position: absolute; /*replace*/
    top: 50%;
    margin-left: 60px;
    color: #777777;
    text-transform: uppercase;
    font-size: 23px;
    width: 180px;
}

    .menu > div
    {
        height: 28px;
        padding-top: 2px;
        cursor: pointer;
        display: block;
    }


.current > span
{
    display: none;
}


@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) { @media
{
    .menu > div
    {
        height: 24px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

}}

    .menu span
    {
        color: #777777;
        margin-left: 8px;
    }

    .current span
{
    color: white;
}

    #foresight-case-study .csTP, #hindsight-case-study .csTP, #insight-case-study .csTP {
        padding-top: 0px;
    }

@media  only screen and (min-device-pixel-ratio: 2) {  
    #hindsight .current, #insight .current, #foresight .current
    {
        padding-top: 4px;
    }
}  

.sidebar
{
    position:absolute;
    top: 50%;
    left: 40px;
    width: 200px;
    height: 124px;
    padding-left: 11px;
}

section
{
    left: 0%;
}


/*Titles*/

/*.grey-title {

            top: 28px;
            text-align: left;
            font-size: 30px;
            line-height: 40px;
            text-transform: uppercase;

            text-align: right;
            font-size: 19px;
            line-height: 11px;

            margin: 0px 45px 8px 0;

            color: #75767c;
        }


.grey-subtitle {

            text-align: left;
            font-size: 30px;
            text-transform: uppercase;
            top: 45px;
            text-align: right;
            font-size: 19px;
            line-height: 11px;
            margin: 0px 49px 0 0;
            color: #75767c;
        }*/

/*Controls*/

.left-arrow
{
    position:fixed; /*replace*/
    top: 50%;
    left: 15px;
    cursor: pointer;
}

.right-arrow
{
    position:fixed; /*replace*/
    top: 50%;
    right: 15px;
    cursor: pointer;
}



.dynamic-p10
{

    float: right;
width: 60%;
margin-right: 80px;
margin-top: 180px;
}

/*Animation*/

.background-result
{

    min-height: 170px!important;
    height:auto !important;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;

    opacity: 0;


}

.back-sky
{

     -webkit-animation: mymove linear 40s;
     -moz-animation: mymove linear 40s; 
     -ms-animation: mymove linear 40s; 
    animation: mymove linear 40s;

    animation-fill-mode: forwards;
}


@-webkit-keyframes mymove
{
     0%   {background-position: 0vw;}
     100% {background-position: 20vw;}
}

@-moz-keyframes mymove
{
     0%   {background-position: 0vw;}
     100% {background-position: 20vw;}
}

@keyframes mymove
{
     0%   {background-position: 0vw;}
     100% {background-position: 20vw;}
}



.appear
{
    opacity: 1 !important;
}

.low-height
{
    
}

.unselected-right
{
    position: absolute!important;
    left: 100%!important;
}

.unselected-left
{
    position: absolute!important;
    left: -100%!important;
}

/*Fix IE properly later*/

.moving, section
{
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    transition: left 1s;

    
}

.centered
{
    position: absolute!important;
    left: 0%!important;
}

.selected
{
}




.fade-in
{
    -webkit-transition: opacity 1s linear 1s;
    -moz-transition: opacity 1s linear 1s;
    transition: opacity 1s linear 1s;

    opacity: 0;
}

.sub-bottom
{
    -webkit-transition: opacity 1s linear 0.2s;
    -moz-transition: opacity 1s linear 0.2s;
    transition: opacity 1s linear 0.2s;
}

.selected .fade-in
{

    opacity: 1;
}

.drift
{
    -webkit-transition: background-position 1s linear 1s, left 1s;
    -moz-transition: background-position 1s linear 1s, left 1s;
    -ms-transition: background-position 1s linear 1s, left 1s;
    transition: background-position 1s linear 1s, left 1s;
}

.unselected-right.drift
{
    background-position: 100vw 0vw !important;

    
}

.selected.drift
{
    /*background-position: 0vw 0vw !important;*/
}

.bg-image {

    visibility: hidden;
left: -33vw;

-webkit-transition: left 0.3s ease-in 0s;
-moz-transition: left 0.3s ease-in 0s;
transition: left 0.3s ease-in 0s;

}

.moving .bg-image
{
    visibility: visible;
}

.moving.unselected-right .bg-image
{

    position:absolute;
    left: 0;
}

.selected .bg-image{
    left: 0;
    visibility: visible;
    -webkit-transition: left 0.3s ease-in 1s;
-moz-transition: left 0.3s ease-in 1s;
transition: left 0.3s ease-in 1s;
}



/*If an element is position: absolute; replace then it needs seperate animation*/

.fix-fix
{
    left: 100%;
}

#insight-case-study .background-result
{
    background: url(../img/light-orange.png)no-repeat scroll left top / 100% 100% rgba(0, 0, 0, 0);
}



#hindsight-case-study .background-result
{
    background: url(../img/light-green.png)no-repeat scroll left top / 100% 100% rgba(0, 0, 0, 0);
}




#foresight-case-study .background-result
{
    background: url(../img/purple-light.png)no-repeat scroll left top / 100% 100% rgba(0, 0, 0, 0);
}




/*Media Queries*/

@media screen and (min-width: 1025px) and  (max-width: 1550px) {



    .popup
    {
        right: 140px;
        width: 36%!important;
    }



   .main-title
    {
        font-size: 40px !important;
        line-height: 46px!important;
    }

    .scroller {
        overflow-y: scroll;
    }
  
}


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

    /*General*/

    .mobile-hide
    {
        display: none !important;
    }

    /*.mobile-block
    {
        display: block !important;
    }*/

    /*.mobile-100
    {
        width: 100% !important;
    }*/

    /*.mobile-static
    {
        position: static !important;
    }

    .mobile-relative
    {
        position: relative !important;
    }*/

    .back-sky
    {
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;

    }

    .popup img {
        width: 68%;
        height: auto;
        margin-top: 121px;
        margin-left: 90px;
    }

    .right-side
    {
        overflow-y: scroll;
    }

    .main-title
    {
        font-size: 33px !important;
        line-height: 35px !important;
    }

    .mobile-no-margin
    {
        margin: 0;
    }

    .mobile-margin-top-30
    {
       /*margin-top: 30px;*/
    }

    /*.mobile-text-width
    {
        width: auto !important;
        padding-left: 64px!important;
        margin-right: 45px;
    }*/

    .left-side h2
    {
        margin: 0;
    }

    .padding-per-10
    {
        padding-left: 0;
    }

    /*Home*/

    .popup
    {
        right: 10px;
        padding-top: 380px;
        margin-left: 35px;
    }

    .home-title
    {
        /*padding-top: 170px;*/
    }

   
    
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
    #hindsight-case-study .background
    {
        min-height: 530px;
    }

    #hindsight-case-study .background-result
    {
        margin: -360px 12% 0 22% !important;
    }

    #insight-case-study .background
    {
        min-height: 760px;
    }

    #insight-case-study .background-result
    {
        margin: -500px 12% 0 22% !important;
    }

    #foresight-case-study .background
    {
        min-height: 530px;
    }

    #foresight-case-study .background-result
    {
        margin: -360px 12% 0 22% !important;
    }

}




html[data-useragent*='MSIE 11.0'] #hindsight-case-study .background
    {
        min-height: 530px;
    }

html[data-useragent*='MSIE 11.0']    #hindsight-case-study .background-result
    {
        margin: -360px 12% 0 22% !important;
    }

 html[data-useragent*='MSIE 11.0']   #insight-case-study .background
    {
        min-height: 760px;
    }

html[data-useragent*='MSIE 11.0']    #insight-case-study .background-result
    {
        margin: -500px 12% 0 22% !important;
    }

html[data-useragent*='MSIE 11.0']    #foresight-case-study .background
    {
        min-height: 530px;
    }

 html[data-useragent*='MSIE 11.0']   #foresight-case-study .background-result
    {
        margin: -360px 12% 0 22% !important;
    }



@media screen and (max-width: 599px)
{
    /*Titles*/

    #opportunity .main-title
    {
        font-size: 35px;
        line-height: 37px;
        margin-top: 60px;
    }

    /*Text*/

    .grey-thin, .green-thin
    {
        font-size: 15px;
        line-height: 25px;
    }

    /*Home*/

    .popup
    {
        width: 370px !important;
        bottom: 0px;
        height: 326px;
        padding-top: 0 !important;
    }



    .home-title
    {
        padding-top: 180px;
    }

    .home1, .home2, .home3
    {
        padding-right: 5px!important;
        padding-left: 5px!important;
        float: none;
    }

    .home3
    {
        margin-bottom: 30px;
    }
}



/*Height based media queries*/


@media (min-height: 901px) and (max-height: 1050px)
{
    .background-result
    {
        margin: -160px 12% 0 16% !important;
        min-height: 200px!important;
    }

    #opportunity .main-title
    {
        top: 20% !important;
    }
}

@media screen and (max-height: 900px)
{

    .home1
    {
        font-size: 18px;
    }

    .home2, .home3
    {
        font-size: 43px;
    }

    .home-title
    {
        margin-left: 20px;
    }

    .home1, .home2, .home3
    {
        float: none!important;
        display: block!important;
    }

        #power-data .white-main
    {
        margin-top: 50px !important;
    }

    #power-data .main-title
    {
        top: 110px !important;
    }

    #hindsight .grey-general
    {
        margin: 50px 0 10px 0 !important;
    }

    #hindsight .main-title
    {
        top: 110px!important;
    }

    #hindsight-case-study .background
    {
        margin: 30px 50px 0 0  !important;

    }

    #insight .grey-general
    {
        margin-top: 50px !important;
    }

    #insight .main-title
    {
        top: 110px;
    }

    #insight-case-study .background
    {
        margin: 0px 50px 0 0  !important;
    }

    #insight-case-study .background-result
    {
        margin: -160px 12px 25px 48px;
        min-height: 152px;
        padding: 21px 21px 21px 21px;
    }

    #foresight .grey-general
    {
        margin-top: 50px !important;
    }

    #foresight .main-title
    {
        top: 110px !important;
    }

    #foresight-case-study .background
    {
        margin: 30px 50px 0 0 !important;
    }

    #foresight-case-study .background-result
    {
        margin: -170px 12px 25px 48px;
        height: 200px;
        padding: 21px 21px 30px 21px;
    }

    #hindsight-case-study .background-result
    {
        margin: -160px 12px 25px 48px !important;
        padding: 21px 21px 30px 21px;
    }

    #opportunity .grey-thin
    {
        margin-top: 50px !important;
    }

    #dynamic-audit .grey-general {
        margin-top: 50px !important;
    }

    .sidebar
    {
        top: 60% !important;
        left: 0 !important;
    }

    #foresight .sub {
        font-size: 20px;
    }

    #hindsight-case-study .left-side, #insight-case-study .left-side, #foresight-case-study .left-side
    {
        width: 22vw !important;
    }

    #hindsight-case-study .right-side, #insight-case-study .right-side, #foresight-case-study .right-side
    {
        width: 77vw !important;
    }

    .sub-bottom
    {
        padding-bottom: 20px;
        font-size: 14px !important;
        line-height: 18px!important;
    }

    #foresight-case-study .csTP, #hindsight-case-study .csTP, #insight-case-study .csTP {
        padding-top: 5px !important;
    }

    .background .sub
    {
        font-size: 13px!important;
        line-height: 17px!important;
    }

    #opportunity .main-title
    {
        top: 14% !important;
    }

    .background-result
    {
        padding: 21px 21px 0px 21px!important;
    }

}

/* Added By Marius */

::-webkit-scrollbar { 
    display: none; 
}

.scroller {
    height: 100%;
}