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

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



body{
  font-size:12px;
  overflow:hidden;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjRDNEM0QzIj48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0M0QzRDNCIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIj48L3BhdGg+Cjwvc3ZnPg==");
}

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

@keyframes dc-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-size:100%;
  background-repeat:no-repeat;
  background-position:0 0;
  background-image:url('../resources/images/body_background_1.png');
  background-color:#FFFFFF;
  box-sizing:border-box;
  border:solid 1px #C4C4C4;
  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_1.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:80.4%;
  /* background-color:blue; */
  background-clip:content-box;
  position:absolute;
  top:16.3%;
  padding-left: 2%;
  padding-right: 2%;
}

.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-innermost-content{
  margin-top:8px;
  /* background:yellow; */
  height: 86%;
}

.lo-tab{
  position:absolute;
  width: 96%;
  height: 86%;
  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:1.5%;
  top:16.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:1.9em;
  color:#FFFFFF;
}

.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; */
}

.sk-folding-cube {
  /* margin: 20px auto; */
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  border:solid 1px #000000;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

#dc-loading-animation{
  position:relative;
  left:50%;
  top:50%;
}