@font-face{
  font-family:'Ostrich-Black';
  src:url('../fonts/Ostrich-Black.ttf');
}

@font-face{
  font-family:'SegoeUI';
  src:url("../fonts/SegoeUI.ttf");
}

body, html{
  font-size:12px;
  width:100%;
  height:100%;
  overflow:hidden;    
  background: -moz-linear-gradient(360deg, rgba(239,241,242,1) 0%, rgba(167,177,183,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(239,241,242,1)), color-stop(100%, rgba(167,177,183,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(360deg, rgba(239,241,242,1) 0%, rgba(167,177,183,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(360deg, rgba(239,241,242,1) 0%, rgba(167,177,183,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(360deg, rgba(239,241,242,1) 0%, rgba(167,177,183,1) 100%); /* ie10+ */
  background: linear-gradient(90deg, rgba(239,241,242,1) 0%, rgba(167,177,183,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff1f2', endColorstr='#a7b1b7',GradientType=1 ); /* ie6-9 */



}

@keyframes lo-tab-fadeIn-1 {
    0%   {
      opacity:0;
    }
    100% {
      opacity:1;
    }
}

@keyframes lo-tab-fadeIn-2 {
    0%   {
      opacity:0;
      left:-100%;
    }
    100% {
      opacity:1;
      left:0;
    }
}

@keyframes lo-tab-fadeIn-3 {
    0%   {
      opacity:0;
      right:-100%;
    }
    100% {
      opacity:1;
      right:0;
    }
}

@keyframes lo-tab-fadeIn-4 {
    0%   {
      opacity:0;
      top:-150px;
    }
    100% {
      opacity:1;
      top:0px;
    }
}

@keyframes lo-tab-fadeIn-5 {
    0%   {
      opacity:0;
      top:150px;
    }
    100% {
      opacity:1;
      top:0px;
    }
}

@keyframes lo-tab-fadeIn-6 {
    0%   {
      opacity:0;
      left:-150px;
    }
    100% {
      opacity:1;
      left:0px;
    }
}

@keyframes lo-tab-fadeIn-7 {
    0%   {
      opacity:0;
      left:150px;
    }
    100% {
      opacity:1;
      left:0px;
    }
}

/* Images to be preloaded */

body:after{
  background-image:url('../resources/images/tab_browser_btn_hover.png');
}

#content{
  /*background-color:#FFFFFF;*/
  box-sizing:border-box;
  overflow:hidden;
  display:none;
}

header{
  width:100%;
  height:16.3%;
  /* background:red; */
  position:absolute;
  top:0;
  display:flex;
  flex-direction: row;
  justify-content:space-between;
  overflow:hidden;
}

header > *{
  height:100%;
  /* background:whitesmoke; */
}

header h1, header h2, header h3{
  margin:0;
  padding:0;
}

.lo-header-logo{
  width: 15%;
}

.lo-header-logo{
  background-size:100%;
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-image:url('../resources/images/header_logo_2.png');
  /* display:none; */
}

.lo-header-title{
  width: 75%;
}

.lo-header-title h1{
  text-align:center;
  color:#FFFFFF;
  font-family:'CenturyGothic';
  font-weight:bold;
  font-size:2em;
  margin-top:0;
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

.lo-header-hierarchy{
  width: 10%;
}

.lo-header-hierarchy-first-node{
  height:25%;
  background:#1D1D1B;
  padding-top:10px;
}

.lo-header-hierarchy-first-node h3{
  font-family:'CenturyGothic';
  font-size:1.5em;
  color:#FFFFFF;
  text-align:center;
}

.lo-header-hierarchy-second-node{
  height: 27%;
  background:#36DCE0;
  padding-top:5px;
}

.lo-header-hierarchy-second-node h3{
  font-family:'CenturyGothic';
  font-size:1.5em;
  color:#000000;
  text-align:center;
}

.lo-hierarchy-triangle-container{
  width:100%;
  height: 25%;
  /* background-color:red; */
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.lo-hierarchy-triangle-right{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 50px 0 0;
  border-color: #36DCE0 transparent transparent transparent;
  position:relative;
  top:-1px;
}

.lo-hierarchy-triangle-left{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 10px 0;
  border-color: transparent #36DCE0 transparent transparent;
  position:relative;
  top:-1px;
}

#lo-inner-content{
  width:100%;
  height:100%;
  /* background-color:blue; */
  background-clip:content-box;
  position:absolute;
  top:0px;
  left:0px;
}

.lo-inner-content-title{
  padding-top:5px;
  padding-bottom:5px;
  margin-top:25px;
  border-top: solid 1px #065268;
  border-bottom: solid 1px #065268;
  height:6%;
}

.lo-inner-content-title > *{
  display:inline-block;
  float:left;
}
.lo-inner-content-title h3{
  padding:0;
  margin:0;
}

.lo-inner-content-image{
  height: 200%;
  margin-top:-15px;
  padding-right:4px;
}


.lo-tab{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0px;
  left:0px;
  display:none;
  /* background:red; */
}

*[data-lo-show="true"]{
    display:block;
    animation-name: lo-tab-fadeIn-1;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
}

*[data-lo-fadeIn="1"]{
  animation-name: lo-tab-fadeIn-1;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
}

*[data-lo-fadeIn="2"]{
  animation-name: lo-tab-fadeIn-2;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
}

*[data-lo-fadeIn="3"]{
  animation-name: lo-tab-fadeIn-3;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
}

*[data-lo-fadeIn="4"]{
  animation-name: lo-tab-fadeIn-4;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
    position:relative;
}

*[data-lo-fadeIn="5"]{
  animation-name: lo-tab-fadeIn-5;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
    position:relative;
}

*[data-lo-fadeIn="6"]{
  animation-name: lo-tab-fadeIn-6;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
    position:relative;
}

*[data-lo-fadeIn="7"]{
  animation-name: lo-tab-fadeIn-7;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    animation-duration: 1s;
    position:relative;
}

.lo-tab-browser{
  position:absolute;
  right: -0.5%;
  top: 23.5%;
  width: 5%;
  height: 30%;
  /* background:red; */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:1000;
}

.lo-tab-browser-btn{
  width:100%;
  height:30%;
  background-size:100%;
  background-repeat:no-repeat;
  background-image:url('../resources/images/tab_browser_btn.png');
  /*background-color:lightblue;*/
  padding-top:18px;
  padding-left:8px;
}

.lo-tab-browser-btn:hover{
  cursor:pointer;
  transform:scale(1.05);
  background-image:url('../resources/images/tab_browser_btn_hover.png');
}

.lo-tab-browser-btn:active{
  transform:scale(0.95);
}

.lo-tab-browser-btn i{
  display:table;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size: 2.9em;
  color:#FFFFFF;
  line-height:1.6em;
}

.lo-default-modal{
    position:absolute;
    width: 100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:2000;
    display:none;
    overflow:hidden;
}

.lo-default-modal{
  font-family:'CenturyGothic';
}

.lo-default-modal .lo-close-modal-btn{
    position:absolute;
    width:6%;
    z-index:10;
}

.lo-default-modal .lo-close-modal-btn:hover{
    cursor:pointer;
    transform:scale(1.05);
}

.lo-default-modal .lo-close-modal-btn:active{
    transform:scale(0.95);
}

.lo-default-modal .lo-modal-content{
    position:absolute;
    left:11.8%;
    top:19%;
    width:78%;
    height:70%;
    padding-left: 34px;
    padding-right: 34px;
    /* background:red; */
}