#myDIV
 {
  padding-top: 270px;
    position: absolute;
   background-color: #ffffff;
    width: 100%;
  height: 1820px;
  }
.loader {


  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #FF6700;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#bk
{

    border: 1px solid #cdcdcd;
  border-radius:2px;
}

.img-btn img{
  width:70px;
  height:40px;
   border-radius:20px;
}
.img-btn > input{
  display:none
}
.img-btn > img{
  cursor:pointer;
  border:2px solid transparent;
}
.img-btn > input:checked + img{
  border-color: blue;
  border-radius:20px;
}
 .box
{
font-size: 30px;
} 
textarea {
 
    border: 0;


 display: block;
  width: 85%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements

}

  .x
{
color: red;
font-weight: bold;
}
 body {
  font-size: 120%;
   color: black;
}


  #all {
  font-size: 17px;
  color: black;
}

#tpt
{
  color: #505050;
}

.main {
  font-size: 120%;
  color: blue;
}
#result
{
    border-radius: 16px;
  border: 1px solid #ccc!important;
  background-color: #FFFFFF;
  width: 87%;
  padding-left: 2%;

}
#copiar
{
    border-radius: 16px;
    border: 1px solid #ccc!important;
    background-color: #FFFFFF;
    width: 93%;
    padding-left: 2%;
    padding-bottom: 1%;
}



  #pt
  {
    padding-bottom: 1%;
  }
.mystyle
{
  width: 60%;
   padding: 5%;
   padding-top: 1%;
   padding-bottom: 1%;
   border-radius: 16px;
  border: 1px solid #ccc!important;
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
 .mystyle
{
  width: 100%;
  border-radius: 16px;
  border: 1px solid #ccc!important;
}
}