/* public/style.css */
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-Black.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-Black.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-Bold.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-Bold.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-ExtraBold.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-ExtraBold.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-ExtraLight.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-ExtraLight.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-Light.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-Light.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-Light.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-Light.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-Medium.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-Medium.ttf') 
		format('truetype');
}
@font-face {
	font-family: 'Catamaran';
	src: url('fonts/Catamaran-Regular.ttf'); 
	src: 
		local('Catamaran'),
		local('Catamaran'),
		url('fonts/Catamaran-Regular.ttf') 
		format('truetype');
}

html, body, ._meridian_container, .full-height {
    height: 100%;
    font-family: 'Catamaran', sans-serif;
    margin:0%;
} 
._meridian_container{
    display: none;
}

.fixedPane{
    position:fixed;
    width: 100%;
    background: #fff;
    box-shadow: 1px 2px 11px 0px #EAEAEA;

}
.content{
    height:100%;
    display: flex;

}

.documentStats{
    height: 50px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    padding-left:10px;
    padding-right:10px; 
    justify-content: space-between;
    text-transform: uppercase;
}
.documentStats .label{
    color:#9b9b9b;
    font-size: 14px;
}

.header{
    background: #05093a;
    padding: 10px;
    text-align: center;
    color: #fff;
    letter-spacing: 5.8px;
    font-weight: 900;
    text-decoration: overline;
    text-transform: uppercase;

}

.secondPane{
  display: flex;
  width: 100%;
  justify-content: space-between;
  border: 1px solid #eaeaea;
}
.secondPane .social{
      display: flex;
    justify-content: center;
    align-items: center;

}
.secondPane .social span:first-child{
  font-size: 11px;
}
.secondPane .social span{
  margin-right:5px;
}
.secondPane .social span img{
  width:30px;
  cursor: pointer;
}


.documentName{
    display: flex;
    flex-direction: column;
    padding-left:10px;
    padding-right:10px; 
    padding-top: 10px;
}
.documentName label{
    font-size: 12px;
    color: #9b9b9b;
    text-transform: uppercase;
}
.documentName span:focus{
    border: none;
    outline: none;
}


.menu{
    float: right;
    margin-top: -55px;
}

.menu ul{
    display: flex;
    letter-spacing: 0px;
    list-style:none;
    letter-spacing: 0.5px;
    color: #eaeaea;
    font-size: 12px;
    cursor: pointer;
}
.menu ul li{
    margin-right:15px;
}


#pad{
    font-family: 'Catamaran', sans-serif;

    border: none;
    overflow: auto;
    outline: none;
    resize: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    flex:1;
    border-right: 1px solid #eaeaea;
    font-size: 16px;
    margin-top: 212px;

}

#markdown {
    overflow: auto;
    /* border-left: 1px solid black; */
    flex:1;
    padding-left: 10px;
    margin-top: 212px;

}
/* 
///////////////////////////////////////------------------------------ LOADER ----------------------.////////////// */
.wrapper {
  display:flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  background: #000000;
  background: -moz-radial-gradient(center, ellipse cover, #000000 43%, #333333 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #000000 43%, #333333 100%);
  background: radial-gradient(ellipse at center, #000000 43%, #333333 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#333333', GradientType=1);
}

@keyframes fade-out {
    0% { opacity: 1; -webkit-transform: scale(1);}
    85% {opacity: 1; -webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(.1); opacity: 0;}
}

.scrollUp {
    animation: fade-out 3s ease-out;
    -webkit-animation: fade-out 4s ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
}

.loaderParent{
    display: flex;
    /* justify-content: center; */
    /* align-content: center; */
    position: fixed;
    top: 50%;
    right: 0;
    left: 35%;
    bottom: 0;
}
/* ////////////----------------------------------------- Typewriter */
.typewriter h1 {
    text-decoration: overline;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: -35px auto; /* Gives that scrolling effect as the typing happens */
    color: #fff;
    font-size: 52px;
    letter-spacing: 5px;
    font-weight: 700;
  animation: 
    typing 3.0s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.loader {
  /* position: absolute; */
    display:flex;
  justify-content: center;
  align-content: center;
  width: 200px;
  height: 200px;
  /* left: 75%; */
  /* top: 20%; */
  transform: translate(-50%, -50%) rotateZ(90deg);
}
.loader div {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background: #FFF;
  border-radius: 20px;
  opacity: 0;
}
.loader div:nth-child(35) {
  top: 700px;
  background: #FFF;
  animation: dna_rotate 2s 3.5s infinite ease-in-out;
}
.loader div:nth-child(34) {
  top: 680px;
  background: #FFF;
  animation: dna_rotate 2s 3.4s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 4.4s infinite ease-in-out;
}
.loader div:nth-child(33) {
  top: 660px;
  background: #FFF;
  animation: dna_rotate 2s 3.3s infinite ease-in-out;
}
.loader div:nth-child(32) {
  top: 640px;
  background: #FFF;
  animation: dna_rotate 2s 3.2s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 4.2s infinite ease-in-out;
}
.loader div:nth-child(31) {
  top: 620px;
  background: #FFF;
  animation: dna_rotate 2s 3.1s infinite ease-in-out;
}
.loader div:nth-child(30) {
  top: 600px;
  background: #FFF;
  animation: dna_rotate 2s 3s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 4s infinite ease-in-out;
}
.loader div:nth-child(29) {
  top: 580px;
  background: #FFF;
  animation: dna_rotate 2s 2.9s infinite ease-in-out;
}
.loader div:nth-child(28) {
  top: 560px;
  background: #FFF;
  animation: dna_rotate 2s 2.8s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 3.8s infinite ease-in-out;
}
.loader div:nth-child(27) {
  top: 540px;
  background: #FFF;
  animation: dna_rotate 2s 2.7s infinite ease-in-out;
}
.loader div:nth-child(26) {
  top: 520px;
  background: #FFF;
  animation: dna_rotate 2s 2.6s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 3.6s infinite ease-in-out;
}
.loader div:nth-child(25) {
  top: 500px;
  background: #FFF;
  animation: dna_rotate 2s 2.5s infinite ease-in-out;
}
.loader div:nth-child(24) {
  top: 480px;
  background: #FFF;
  animation: dna_rotate 2s 2.4s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 3.4s infinite ease-in-out;
}
.loader div:nth-child(23) {
  top: 460px;
  background: #FFF;
  animation: dna_rotate 2s 2.3s infinite ease-in-out;
}
.loader div:nth-child(22) {
  top: 440px;
  background: #FFF;
  animation: dna_rotate 2s 2.2s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 3.2s infinite ease-in-out;
}
.loader div:nth-child(21) {
  top: 420px;
  background: #FFF;
  animation: dna_rotate 2s 2.1s infinite ease-in-out;
}
.loader div:nth-child(20) {
  top: 400px;
  background: #FFF;
  animation: dna_rotate 2s 2s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 3s infinite ease-in-out;
}
.loader div:nth-child(19) {
  top: 380px;
  background: #FFF;
  animation: dna_rotate 2s 1.9s infinite ease-in-out;
}
.loader div:nth-child(18) {
  top: 360px;
  background: #FFF;
  animation: dna_rotate 2s 1.8s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 2.8s infinite ease-in-out;
}
.loader div:nth-child(17) {
  top: 340px;
  background: #FFF;
  animation: dna_rotate 2s 1.7s infinite ease-in-out;
}
.loader div:nth-child(16) {
  top: 320px;
  background: #FFF;
  animation: dna_rotate 2s 1.6s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 2.6s infinite ease-in-out;
}
.loader div:nth-child(15) {
  top: 300px;
  background: #FFF;
  animation: dna_rotate 2s 1.5s infinite ease-in-out;
}
.loader div:nth-child(14) {
  top: 280px;
  background: #FFF;
  animation: dna_rotate 2s 1.4s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 2.4s infinite ease-in-out;
}
.loader div:nth-child(13) {
  top: 260px;
  background: #FFF;
  animation: dna_rotate 2s 1.3s infinite ease-in-out;
}
.loader div:nth-child(12) {
  top: 240px;
  background: #FFF;
  animation: dna_rotate 2s 1.2s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 2.2s infinite ease-in-out;
}
.loader div:nth-child(11) {
  top: 220px;
  background: #FFF;
  animation: dna_rotate 2s 1.1s infinite ease-in-out;
}
.loader div:nth-child(10) {
  top: 200px;
  background: #FFF;
  animation: dna_rotate 2s 1s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 2s infinite ease-in-out;
}
.loader div:nth-child(9) {
  top: 180px;
  background: #FFF;
  animation: dna_rotate 2s 0.9s infinite ease-in-out;
}
.loader div:nth-child(8) {
  top: 160px;
  background: #FFF;
  animation: dna_rotate 2s 0.8s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 1.8s infinite ease-in-out;
}
.loader div:nth-child(7) {
  top: 140px;
  background: #FFF;
  animation: dna_rotate 2s 0.7s infinite ease-in-out;
}
.loader div:nth-child(6) {
  top: 120px;
  background: #FFF;
  animation: dna_rotate 2s 0.6s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 1.6s infinite ease-in-out;
}
.loader div:nth-child(5) {
  top: 100px;
  background: #FFF;
  animation: dna_rotate 2s 0.5s infinite ease-in-out;
}
.loader div:nth-child(4) {
  top: 80px;
  background: #FFF;
  animation: dna_rotate 2s 0.4s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 1.4s infinite ease-in-out;
}
.loader div:nth-child(3) {
  top: 60px;
  background: #FFF;
  animation: dna_rotate 2s 0.3s infinite ease-in-out;
}
.loader div:nth-child(2) {
  top: 40px;
  background: #FFF;
  animation: dna_rotate 2s 0.2s infinite ease-in-out;
  background: #990fff;
  animation: dna_rotate 2s 1.2s infinite ease-in-out;
}
.loader div:nth-child(1) {
  top: 20px;
  background: #FFF;
  animation: dna_rotate 2s 0.1s infinite ease-in-out;
}
@keyframes dna_rotate {
  0% {
    opacity: 1;
    transform: scale(1);
    left: 20%;
    z-index: 0;
  }
  25% {
    opacity: 1;
    transform: scale(1.75);
  }
  50% {
    opacity: 1;
    left: 80%;
    z-index: 1;
    box-shadow: 0 0 6px 3px rgba(255, 0, 255, 0.5);
    transform: scale(1);
  }
  75% {
    opacity: 1;
    transform: scale(0.25);
  }
  100% {
    opacity: 1;
    left: 20%;
    z-index: 0;
    transform: scale(1);
  }
}