@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext');
html { 
  padding:0; margin:0;
}
body {
  background: #FFF;  font-size: 14px;  
  padding:0; margin:0;
  font-family: "Roboto Condensed",sans-serif;
  background:#eee;
}


.cssHeader{
	height:80px;
	border-bottom:1px solid #ccc;
	display:block;
}
.cssHeader .mainLogo{
	height:40px; padding:20px 0 0 20px;
	float:left;
}
.cssHeader .mainLogo IMG{
	height:100%;
}
.cssHeader .mainNav {
	float:right; margin:auto;
}

#menu-btn {
    width: 30px;
    height: 30px; margin:25px;
    z-index: 99;
	border: 0;
	background: transparent; cursor:pointer;
	-webkit-appearance: none;
	border-radius: 0;
}
#menu-btn span {
    background: #8d98a1;
    width: 20px;
    height: 2px;
    position: absolute;
    top: 14px;
    left: 5px;
    display: block;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
#menu-btn span:first-child {
    width: 10px;
    top: 4px;
    left: 15px;
}
#menu-btn span:last-child {
    bottom: 4px;
    top: auto;
}
.mainBody{
	height:calc(100vh - 81px); display:flex;
	position:relative;
}
.mainToolBtns{
	position:absolute; right:20px; bottom:10px;
	font-size:11px;
}

button.printButton {
  width: 60px;
  height: 60px;
}
span.print-icon, span.print-icon::before, span.print-icon::after, button.printButton:hover .print-icon::after {
  border: solid 2px #333;
}
span.print-icon::after {
  border-width: 2px;
}

button.printButton {
  position: relative;
  padding: 0;
  border: 0;
  
  border: none;
  background: transparent;
}

span.print-icon, span.print-icon::before, span.print-icon::after, button.printButton:hover .print-icon::after {
  box-sizing: border-box;
  background-color: #fff;
}

span.print-icon {
  position: relative;
  display: inline-block;  
  padding: 0;
  margin-top: 20%;

  width: 60%;
  height: 35%;
  background: #fff;
  border-radius: 20% 20% 0 0;
}

span.print-icon::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 12%;
  right: 12%;
  height: 110%;

  transition: height .2s .15s;
}

span.print-icon::after {
  content: " ";
  position: absolute;
  top: 55%;
  left: 12%;
  right: 12%;
  height: 0%;
  background: #fff;
  background-repeat: no-repeat;
  background-size: 70% 90%;
  background-position: center;
  background-image: linear-gradient(
    to top,
    #fff 0, #fff 14%,
    #333 14%, #333 28%,
    #fff 28%, #fff 42%,
    #333 42%, #333 56%,
    #fff 56%, #fff 70%,
    #333 70%, #333 84%,
    #fff 84%, #fff 100%
  );

  transition: height .2s, border-width 0s .2s, width 0s .2s;
}

button.printButton:hover {
  cursor: pointer;
}

button.printButton:hover .print-icon::before {
  height:0px;
  transition: height .2s;
}
button.printButton:hover .print-icon::after {
  height:120%;
  transition: height .2s .15s, border-width 0s .16s;
}

.buttonDownload {
	display: inline-block;
	position: relative;
	height:60px; width:60px;
	border:none; background:none; cursor:pointer;
}

.buttonDownload:hover {
	
}

.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 10px;
	top: 0;
}

/* Download box shape  */
.buttonDownload:before {
	width: 36px;
	height: 4px; top:12px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0; left:20px;
  
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:after {
	animation-play-state: running;
}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		margin-top: 0;
		opacity: 0;
	}
}