@import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

html, body{width:100%;height:100%;margin:0px;font-family: 'Nunito Sans', 'Poppins', sans-serif;scroll-behavior: smooth;}
*,*:before,*:after{box-sizing: border-box;}
main{width:100%;height:100%;}

.anton { font-family: 'Archivo Black'}

h1{font-size:3em;margin:0px;}
h3{font-size:1.5em;}
p{line-height:25px;}
.c-orange{color:rgb(237,118,37);}
.c-subtitle{color: rgb(192, 169, 153);}
.fz-0{font-size:0;}

body > header{width:100%;display:flex;align-items:center;padding:15px 30px;position:fixed;top:0px;left:0px;background-color:rgba(3, 32, 47, 0.68);z-index:99;}
body > header > a{flex:1;}
body > header > a > div#logo img {display: block}
header h1 {
    text-transform:uppercase;
}
nav.portal { margin-right:0px;text-align: right;}
nav.portal ul{list-style:none;margin:0px;padding:0px;}
nav.portal ul li{display:inline-block;text-transform:uppercase;}
nav.vertical ul li{display:block;}
nav.portal ul li a{text-decoration:none;color:#fff;display: block !important;padding:5px 10px;padding-left: 10px !important;font-size:0.9em;}
nav.portal ul li a i{color:#b4c7e7;margin-right:10px;font-size:2em;vertical-align:middle;}
nav.vertical ul li a i{font-size:1em;}
nav.portal ul li a span{vertical-align:middle;}

nav.basystem { margin-right:0px;}
nav.basystem ul{list-style:none;margin:0px;padding:0px;}
nav.basystem ul li{display:block;text-transform:uppercase;}
nav.basystem ul li a{ white-space:nowrap;    text-transform: initial;text-decoration:none;color:#fff;display: block !important;padding:5px 10px;padding-left: 10px !important;}
nav.basystem ul li a i{color:#b4c7e7;margin-right:10px;font-size:1em;vertical-align:middle;}
nav.basystem ul li a span{vertical-align:middle;}

nav.mb {margin-right:0px;-webkit-transition: left 0.4s;transition: left 0.4s;z-index: 999;position: fixed;top: 0px;bottom: 0px;height: 100%;background-color: #474747;left: 100%;width: 100%}
nav.mb ul {margin: 0px;padding: 0px;list-style: none;}
nav.mb ul li {display: block;width: 100%;color: #fff;}
nav.mb ul li a {text-decoration: none;color: inherit;display: block;padding: 25px 15px;}
nav.mb ul li a i{color: #fff;}
nav.portal ul li a:hover, nav.portal ul li a.selected, ul li a.selected i{color: #ed7525 !important;}
div.overL {display: none;position: fixed;z-index: 9;width: 100%;height: 100%;background-color: #000000a8;top: 0px;bottom: 0px;left: 0px;right: 0px;}

#user-control{position:fixed;top:0px;right:0px;width:81px;height:80px;text-align:center;display:flex;flex-direction:column;justify-content: center;font-size:2em;background-color:#ed7525;color:#fff;}
#nav-handler{display:none;cursor:pointer;font-size: 1.5em;background-color: #ed7525;color: #fff;padding: 15px;padding: 14px 16.32px;}

section{}
section > div.content{padding-top:15px !important;background-color: #eee;}
section > div.content-100{padding:30px;}
section.slideshow{width:100%;position:relative;} 
section > header{display:flex;align-items:center;background-image:url('imgs/bg-h.PNG');background-size:cover;background-position:50% 50%;padding:30px;}
section > header h1{flex:1;color:#fff;margin:20px 0px;}
section > header h1 span{font-size:2em;}
section > header i{font-size:90px;color:#fff;opacity: 0.8;}

.subsection { min-height: 100%;}

.app-item, .document-item{}
.app-item > header, .document-item > header{}
.app-item > div, .document-item > div{}
.app-item > footer, .document-item > footer{display:flex;align-items: flex-end;}
.app-item > footer a, .document-item > footer a{font-size:0.8em;text-decoration:none;}
.app-item > footer a:first-child{color:inherit;font-size:0.75em;font-weight:bold;flex:1;padding-bottom:10px;}
.app-item > footer a:last-child{background-color:rgb(12,61,96);color:#fff;text-align:center;padding:10px;text-decoration:none;}
.document-item > footer a{color:inherit;font-size:0.8em;font-weight:bold;}

a.orange-bt{display:inline-block;background-color:#ed7525;color:#fff;text-align:center;padding:10px;text-decoration:none;}
div.flex-box{display:flex;align-items:center;}
div.flex-top{align-items: flex-start;}
.flex{flex:1;}
div.vertical-nav-container{background-color: #031c29;padding: 15px;margin-right: 30px;font-size:1.2em;}
div.ib-item{display:inline-block;vertical-align:top;width:23%;margin:15px;font-size:initial;}
div.ib-3-item{display:inline-block;vertical-align:top;width:25%;padding:15px;font-size:initial;}
div.ib-5-item{display:inline-block;vertical-align:top;width:50%;padding:30px;font-size:initial;}
div.ib-4-item{display:inline-block;vertical-align:top;width:100%;max-width:400px;padding:30px;}
.ib-item-img { height:190px; background-size: 100% 100%; border-radius: 5px; position: relative; }

.slide-landing {position:absolute;top:10%;}
.slide-landing h1{font-size:200px;margin:0px;}
.slide-landing h2{color:#fff;font-size:36px;}

.slide-0 {position:absolute;top:10%;}
.slide-0 h1{font-size:200px;margin:0px;}
.slide-0 h2{color:#fff;font-size:36px;}

.app-users{display: flex;align-items: center;justify-content: center;}

.cd-modal{z-index:99 !important;}
#landing, #slideshow, #slideshow li, .sy-box {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
   
}

.kpis-list { text-align: center; margin-left: 50px; margin-right: 50px; }
.kpi-container{ min-width:160px; display:inline-block; text-align: center; padding: 15px; margin: 10px; border: 1px solid gray !important; background-color:#eee3; }
.kpi-container h1 { font-size: 1.7em; }
.kpi-container h2 { font-size: 2em; color:white; margin-bottom: 0px; min-height: inherit !important; }

.truncate { height: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(237,118,37); 
  border-radius: 10px;
}

.zoom-in {
  transform: scale(1);
  transition: 0.5s transform;
  -webkit-filter: grayscale(30%); /* Safari 6.0 - 9.0 */
  filter: grayscale(30%);
}

.zoom-in:hover {
  transform: translate3d(0,0,0);
  transform: scale(1.05);
  transition: 0.7s transform;
  opacity: 1;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.zoom-in-fast {
    transform: scale(1);
    transition: 0.3s transform;
    -webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
    filter: grayscale(20%);
}

.zoom-in-fast:hover {
    transform: translate3d(0,0,0);
    transform: scale(1.05);
    transition: 0.5s transform;
    opacity: 1;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.single-services img {
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
.single-services i {
    color: #ccc;
    font-size: 3em;
}

.single-services h4 {
    margin: 25px 10px 15px 10px;
    font-weight: bold;
}

.single-services h4 i {
    color: inherit;
    font-size: inherit;
}

.ss-link { color: inherit;}
.ss-link:hover { color: #ed7525 !important; }
  /* styles for '...' */ 
.block-with-text {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative; 
    /* use this value to count block height */
    line-height: 1.6em;
    /* max-height =line-height (1.2) * lines max number (3) */
    max-height: 7.6em; 
    /* fix problem when last visible word doesn't adjoin right side  */
    /* place for '...' */
    margin-right: -1em;
    padding-right: 1em;
  }
  /* create the ... */
  .block-with-text:before {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 0;
    bottom: 0;
  }
  /* hide ... if we have text, which is less than or equal to max lines */
  .block-with-text:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.3em;
  }

.social-networks {
    z-index: 99;
    position: absolute;
    bottom: 0px;
    width: 20px;
    text-align: center;
    padding-left: 15px;
    padding-bottom: 25px
}

.social-networks div {
    margin-top:10px;
}

.vertical-nav-container h3 {
    color: white;
    margin-top: 25px;
    margin-bottom: 25px;
}

.ba-sub { color:white;}
.ba-sub h1 { font-weight:bold;}

.sy-pager {
    width: 100% !important;
    bottom: 30px;
}
.sy-pager li {
    width: 0.5em !important;
    height: 0.5em !important;
}
.chart-modified {
    position: absolute;
    top: 5px;
    right: 5px;
    color:#8e8e8e;
    font-size: 0.6em;
}

.example-subtitle,
.metric,
.stat dd {
    font-family: 'Open Sans Condensed', Verdana, sans-serif;
}

.example-subtitle {
    text-transform: uppercase;
}

.first dd {
    font-weight: 700;
}

.example-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    color: white;
}

.metric {
    display: block;
    text-transform: none;
    font-weight: 300;
    font-size: 12px;
    color: #727f8e;
    margin: 0;
}

.stat .eoy-closing {
    font-size: 60px;
    line-height: 1em;
    letter-spacing: -2px;
    text-indent: -8px;
    color: #eee;
}

.stat .volume {
    font-size: 72px;
    color: #454447;
}

.filtering-tabs {
    border: 0;
    background: none;
    outline: 0;
}

    .filtering-tabs .k-tabstrip-items {
        padding: 0;
    }

    .filtering-tabs .k-item {
        width: 19.5% !important;
        border: 0;
        margin: 0 .2% 0 0;
        padding: 0 0 4px;
        text-align: center;
        cursor: pointer !important;
        background: none;
        border-bottom: 4px solid #b3bbc5;
        font: 16px/2em Arial,sans-serif;
        color: #ccc !important;
        display: inline-block;
    }

    .filtering-tabs .k-state-hover {
        color: #ccc !important;
        background: none;
    }

    .filtering-tabs .k-state-active {
        padding: 0;
        color: white !important;
        border-bottom: 8px solid #ed7525;
    }

    .filtering-tabs .k-link {
        padding: 0 !important;
    }

.yearfiltering-tabs {
    border: 0;
    background: none;
    outline: 0;
}

    .yearfiltering-tabs .k-tabstrip-items {
        padding: 0;
    }

    .yearfiltering-tabs .k-item {
        width: 19.8% !important;
        border: 0;
        margin: 0 .2% 0 0 !important;
        padding: 0 0 4px !important;
        text-align: center;
        cursor: pointer;
        background: none;
        border-bottom: 2px solid #b3bbc5;
        font: 12px/2em Arial,sans-serif;
        color: #ccc !important;
        display: inline-block;
    }

    .yearfiltering-tabs .k-state-hover {
        color: #ccc;
        background: none;
    }

    .yearfiltering-tabs .k-state-active {
        padding: 0;
        color: #eee;
        border-bottom: 4px solid #2b8abe;
    }

    .yearfiltering-tabs .k-link {
        padding: 0 !important;
    }

#dashboard-filtering-tabs .k-item {
    width: 32.8% ;
    margin: 4px .5% 0 0;
}

.stat dd {
    margin: 0;
}

.stat {
    margin: 1em 0 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
}

.separator {
    height: 1px;
    background: #b3bbc5;
}

#example {
    width: auto;
    background: none;
    color: #454447;
}

.chart-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
    filter: alpha(opacity=60);
    background-color: #6495ed;
    text-align: center;
    display: none;
}

    .chart-overlay div {
        position: relative;
        font-size: 34px;
        margin-top: -17px;
        top: 50%;
    }

.k-tabstrip-items .k-loading.k-complete{
    display:none;
}

.k-tabstrip-items .k-item.k-state-hover {
    background:transparent;
}

.k-tabstrip .k-tabstrip-items .k-link {

}