/* theme styles */
  
  body, textarea, input{
    font-family:'Lekton',"andale mono","monaco","lucida console",sans-serif;
  }
  
  p,h2{
      margin-bottom: 1em;
  }
  
  #mosne a{
      font-size: 13px;
      font-weight: normal;
      color: #444;
      letter-spacing: 2px;
      text-align: center;
  }
    
  
  .box{
      background: #67ABAF;
      border-radius: 4px;
      padding: 30px 10px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      font-size: 13px;
      font-weight: normal;
      margin-bottom: 1em;
      position: relative;
      float: left;
      width: 100%;
  
  }
  
  #main{
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px;
  }
  
  .container{
      padding-bottom: 3em;
      margin: 5px;  
  }
  
  h1,h2,h3,.cc{
      text-align: center;
  }
  
  h1,h2,h3{
       margin: 0.8em 0;

  }
  
  

  
  
  h2{
line-height: 111px;
font-size: 50px;
height: 16px;
  }
  .cc{
      position: relative;
      padding: 1em;
      background: #6AABAE;
      margin-bottom: 1em;
      border-radius: 4px;
      min-height: 145px;
      float: left;
      width: 100%;
     font-size: 13px;     
  }
  
  .cc h2{
      color: white;
  }
  
  
/*

 :hover:before{
      
      content: " (" p.attr(class) ")";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      background: #000;
      color: white;
      border-radius: 4px;
      padding: 4px;
      font-weight: bold;
      font-size: 12px;
      cursor: nw-resize;
  }
  
  */

  
  h2.guess:before{
      content: "auto";
      width: 60px;
      height: 60px;
      font-size: 15px;
      text-align: center;
      color: white;
      line-height: 60px;
      position: absolute;
      left: 50%;
      top: 1em;
      margin-left: -30px;
      background: #FAC58A;  
      border-radius: 30px; 
      color:  #333;  
  }
  
  textarea{
      width: 100%;
      border: 1px solid #aeaeae;
      background: #F78D8D;
      height: 600px;
      font-size: 11px;
      color: white;
      font-weight: bold;
      padding: 3em;
      border-radius: 4px;
      
  }
  
  .info *{
      text-align: center;
  }
  
  h3 em{
      background: #F78D8D;
      color: white;
      border-radius: 4px;
      padding: 5px;
      text-transform: uppercase;
      
  }
  

   
   label,
   input{ 
       width: 100%;
       margin-bottom: 2em;
       float: left;
   }
   
   .st{
       border-bottom: 20px solid white;
   }
   
   
   code{
       background: #F98C8B;
       float: left;
       width: 100%;
       padding: .5em 0;
       word-break: break-all;
       display: none;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       top:0;
       border-radius:4px;
       color: #333;
       padding: 0 2em;
       overflow: hidden;        
  }
  
  code div{ text-align: center; width: 100%; }
  
  
  .cc:hover code,
  .box:hover code{
      display: flex;
      align-items: center;
  }
   
   pre{
       background: #FBC686;
       float: left;
       width: 100%;
       margin-top: 1em;
       padding: 1em 0;
       border-radius: 4px;

   }
   
   /*.nested .row{
       border: 4px solid #64ABB0;
       padding: 1em;
       margin-left: 0;
       border-radius: 4px;   
   }
   
    .nested .box{
       margin-bottom: 0;
    }*/
    
    .aligned .row{
       border: 4px solid #64ABB0;
       margin-bottom: 1em;
       border-radius: 4px;
       padding: 0 2px; 
    }
    
    .aligned .box{
       border: 2px solid #fff;
       margin-bottom: 2px;
       margin-top: 2px;
    }

   
  

/* Portrait tablet to landscape and desktop */
@media (min-width: 1200px)  { 
.b-col-1-5 h2.guess:before{
      content: "1/5";
      }


.b-col-2-5 h2.guess:before{
      content: "2/5";
      }
.b-status{
      background: #E3DABF;  
      }
.b-col-1-3 h2.guess:before{
      content: "1/3";
      }
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 769px) and (max-width: 1199px)  {
.d-col-1-1 h2.guess:before{
      content: "1";
      }
.d-col-1-4 h2.guess:before{
      content: "1/4";
      }

.d-col-3-4 h2.guess:before{
      content: "3/4";
      }
.d-col-1-3 h2.guess:before{
      content: "1/3";
      }
.d-col-1-2 h2.guess:before{
      content: "1/2";
      }
      
.d-status{
      background: #E3DABF;  
      }
}
 
/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 768px) {

.t-col-1-1 h2.guess:before{
      content: "1";
      }
.t-col-2-3 h2.guess:before{
      content: "2/3";
      }
.t-col-1-3 h2.guess:before{
      content: "1/3";
      }

.t-status{
      background: #E3DABF;  
      }


}


 
/* Landscape phones and down */
@media (max-width: 480px) {
    
.m-col-1-1 h2.guess:before{
      content: "1";
      }
.m-col-1-2 h2.guess:before{
      content: "1/2";
      }
.m-status{
      background: #E3DABF;  
      }
}