* { box-sizing: border-box; }
		  html, body { margin: 0; }

		  label, .source, .target, .result {
			position: fixed;
			width: 100vw;
			height: 50vh;
		  }
		  label[for="source"], label[for="target"], .source, .target {
			width: 50vw;
			top: 0;
		  }
		  label[for="target"], .target {
			left: 50vw;
		  }
		  label[for="result"], .result {
			top: 50vh;
		  }
		  label[for="result"] { background: #efefef; margin-bottom: 4em; }
		  label > span {
		      position: absolute;
                font: 1em Arial;
                padding: 1em;
                color: rgba(0,0,0,0.3);
                font-weight: bold;
                font-variant: all-petite-caps;
    }
		  label > textarea {
			    font: 2em Courier;
			    padding: 2em;
		      width: inherit;
		      height: inherit;
			border: none;
			resize: none;
			text-transform: none;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.17) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.17) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#2b000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		  }
		  #upload_file {
		      display: none;
		  }
		  input[type=file] {
		      display: none;
		  }
		  button { font-size: 1.8vw; margin: 0 .5em; padding: .5em; }
		  #copy_btn, #paste_btn {
		      display: none;
		  }
		  footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #666;
			padding: 2em;
			text-align: center;
			z-index: 1;
		  }
		  #overlay {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0,0,0,0.85);
			z-index: 1000;
		  }
		  .loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);		      
  font-size: 10px;
  margin: 0 auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #222;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%,-50%) rotate(360deg);
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%,-50%) rotate(360deg);
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

.progress-circle {
position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: sans-serif;    
}

.value-bar {
    transition: all 0.5s;
}

@media screen and (orientation: portrait) {
    label, .source, .target, .result {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 30vh !important;
        display: block;
    }
    .source {
        position: absolute !important;
        top: 0 !important;
    }
    .target {
        position: absolute !important;
        top: 30vh !important;
    } 
    .result {
        position: absolute !important;
        top: 60vh !important;
    }
    textarea {
        padding-top: 3em !important;
        font-size: 1em !important;
    }
    footer {
        min-height: 10vh !important;
        padding: .3em !important;
        padding-top: .8em !important;
    }
    
    button {
        font-size: 1em;
        display: none;
    }
    
    #copy_btn, #paste_btn {
        display: inline;
    }
}