html,body {
font-family:'Source Sans Pro',sans-serif;
background:#fbfbfb;
color:#222;
font-weight:400;
font-size:1rem;
padding:0;
margin:0;
height:100%;
width:100%;
border-top:3px solid #333;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
font-family:'Source Sans Pro',sans-serif;
font-weight:600;
}

h1,.h1 {
font-size:30px;
font-weight:600;
color:#222;
margin: 15px 0 25px;
}

h4,.h4 {
font-size:17px;
margin-bottom:5px;
font-weight:400;
letter-spacing: -.5px;
}

h4 span {
color:#0e9313;
}

h4 span u {
    float: right;
    font-size: .9em;
    margin-top: 3px;
    color: #006687;
}

textarea:focus {
outline:none;
}

*:focus {
    outline: 0 !important;
}

#codearea {
width:100%;
height:100%;
min-height:640px;
}

.ad {
text-align:center;
}

.ad img {
width:100%;
}

.linedwrap {
border:1px solid silver;
width:100%!important;
}

.linedtextarea {
padding:0;
margin:0;
}

.linedtextarea textarea,.linedwrap .codelines .lineno {
font-size:11pt;
font-family:monospace;
line-height:normal!important;
}

.linedtextarea textarea {
padding-right:.3em;
padding-top:.3em;
border:0;
}

.linedwrap .lines {
margin-top:0;
float:left;
overflow:hidden;
border-right:1px solid silver;
margin-right:5px;
}

.linedwrap .codelines {
padding-top:5px;
width:100%;
}

.linedwrap .codelines .lineno {
color:#aaa;
padding-right:.5em;
padding-top:0;
text-align:right;
white-space:nowrap;
width:100%;
}

.linedwrap .codelines .lineno:nth-child(odd) {
background:#eee;
}

.linedwrap .codelines .lineselect {
color:red;
}

.workspace p {
text-align:justify;
}

.workspace {
position:relative;
}

.copy:hover {
cursor:pointer;
background:#ddd;
}

.copy {
color:#006687;
position:absolute;
bottom:0;
right:-2px;
padding:5px;
background:#eee;
margin:10px;
}

.workspace:hover .copy {
display:block;
}

.how-it-works {
width:100%;
height:100%;
background:#333;
}

.clearfix {
clear:both;
}

footer {
padding:10px 20px;
background:#333;
color:#eee;
font-size:.9rem;
}

footer p {
margin:0;
}

.section-title {
background:#007196;
padding:30px 15px;
width:100%;
color:#fff;
text-align:center;
}

.bio {
text-align:center;
}

.fixed .logo {
max-width:80px;
margin-top:-10px;
}

.logo {
margin-top:-15px;
width:100%;
max-width:130px;
margin-right:10px;
}

.resultF {
background:#fff;
border:1px solid silver;
width:100%!important;
min-height:200px;
padding:5px;
font-size:11pt;
font-family:monospace;
line-height:normal!important;
}

p.notif {
font-size:.9em;
text-align:center;
margin:0;
}

.charleft.originalTextareaInfo {
margin:0;
padding:3px;
border-top:1px solid silver;
width:100%!important;
text-align:right;
font-size:.85em;
}

.to-the-top {
position:fixed;
bottom:15px;
right:10px;
width:56px;
height:50px;
transition:all .25s ease;
background:#eee;
border:1px solid #ddd;
display:none;
z-index:1;
}

.to-the-top.fixed {
right:12px;
}

.to-the-top a {
width:100%;
height:100%;
display:block;
text-align:center;
vertical-align:middle;
line-height:45px;
font-size:30px;
color:rgba(46,49,51,0.6);
margin-top:5px;
}

.to-the-top a:hover {
color:#111;
}

.vcenter {
width:100%;
}

section.creators {
position:relative;
}

.pt {
position:absolute;
top:50%;
}

.pb {
margin-top:-50%;
height:100%;
}

section.creators > div {
height:100%;
}

section {
clear:both;
min-height:500px;
padding:30px 0 0;
}

.big-img {
width:100%;
height:200px;
background:#ddd;
margin-bottom:30px;
}

.ad {
	margin-top:10px;
	background:#fff;
	padding:10px;
	text-align:center;
	font-size:30px;
	display:none;
}

.ads_middle {
width: 100%;
margin: 0px auto;
text-align: center;
padding: 0px;
height: 110px;

margin-top:10px;
}

.ads_middle_mobile {
width: 100%;
margin: 0px auto;
text-align: center;
padding: 0px;
height: 70px;

margin-top:10px;
}

.desktop-ad {
      display: block;
}

.mobile-ad {
      display: none;
}

@media only screen and (max-width: 748px) {
  .desktop-ad {
      display: none;
  }

  .mobile-ad {
      display: block;
  }
}

.mt-4 {
margin-top: 1.5rem;
}

.settings {
border-bottom:1px solid silver;
border-left:1px solid silver;
border-right:1px solid silver;
}

.settings_btn {
text-align:center;
}

.settings button.a {
padding:10px;
display:inline-block;
width:100%;
height:100%;
}

.settings {
padding:20px;
}

#settings {
line-height:100%;
vertical-align:middle;
}

.settings form {
height:0;
overflow:hidden;
transition:all .25s ease;
}

.settings.open form {
height:auto;
margin-top:20px;

padding-top:20px;
border-top:1px solid #eee;
}

.btn-convert {
font-size:20px!important;
margin:0 auto!important;
text-align:center!important;
display:block!important;
line-height:100%!important;
vertical-align:middle!important;
width:100%;
padding:10px!important;
}

.btn-clear, .btn-clear-all {
margin:0 auto!important;
text-align:center!important;
display:block!important;
vertical-align:middle!important;
width:100%;
}

/*.btn-sm {
padding:4px 16px;
}*/

.center {
text-align:center;
}

.dropdown-delim {
font-size:20px!important;
display:inline-block!important;
line-height:100%!important;
vertical-align:middle!important;
}

.col-hack-sm button,.col-hack-sm .btn-group,.col-hack-sm a {
width:100%!important;
display:block;
margin:0;
}

.col-hack-sm {
margin-top:25px;
}

.push {
padding:30px;
}

.push .btn {
margin-top:0!important;
}

.push {
margin-top:150px!important;
}

section.maintext {
min-height:0;
max-height:300px;
padding-bottom:0;
padding-top:0;
margin-left:auto;
margin-right:auto;
}

section.delimwrap {
padding-top:0;
}

.uv-bottom-right {
transition:all .25s ease!important;
display:none!important;
}

.uv-bottom-right.fixed {
bottom:110px!important;
}

.form-group {
padding:10px;
margin:0!important;
border-bottom:1px solid #eee;
}

.settings .form-group:nth-child(odd) {
background:#F8F8F8;
}

.lbl p {
font-size:12px;
font-style:italic;
}

.row .block {
display:block;
width:100%!important;
}

.row .btn-group {
width:100%;
}

.btn-group .col-xs-12 {
margin:0;
padding:0;
}

.options label {
font-style:italic;
font-size:10px;
}

.options button {
padding-left:0!important;
padding-right:0!important;
}

.desktop {
display:none;
}

.mobile {
display:inherit;
}

.desktop img {
max-width:768px!important;
}

.mobile img {
max-width:300px!important;
}

p {
color: #6f6f6f;
}

p span{
color: #333;
font-weight: 600;
}

small, .small {
font-size: 90%;
}

.clear15 {
clear:both;
height:15px;
}

.clear30 {
clear:both;
height:30px;
}

.noMargin {
margin:0;
}

ul.navi-bar {
list-style-type: none;
        position: absolute;
    right: 10px;
    top: -4px;
    font-size: 13px;
}

@media (min-width: 768px) {
ul.navi-bar {
    top: 10px;
}
}

ul.navi-bar label {
    float: left;
    margin-right: 15px;
}

li.nav-item {
    float: left;
    margin-right: 10px;
}

li.nav-item.active {
    font-weight: 600;
}

.popup {
width:170px;
background:#333;
border:3px solid #333!important;
transition:all .8s;
padding:10px 20px!important;
color:#fff;
position:fixed;
top:20px;
right:15px;
line-height:1em;
font-size:.9em;
display:none;
}

@media screen and (max-width: 550px) {
.push div {
padding:0!important;
margin:0!important;
}
}

@media screen and (max-width: 768px) {
.row .btn-group {
width:50%;
display:block;
margin:0 auto;
}

.btn-convert {
width:50%;
}

.btn-clear, .btn-clear-all {
width:50%;
}
}