/* ===== Nipun Paradkar (http://codepen.io/radiantshaw/pen/oLdLRW) ===== */
/* =====          Изменить настройки сайта в браузере              ===== */
#tuning
{
  background: #eeebe7;
  padding: 50px 20px;
  text-align: center;
  height:100%;
}
.rule 
{
  margin: 10px 0;
  border: none;
  height: 1.5px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #c9bbae, #f0f0f0);
  background-image: linear-gradient(left, #f0f0f0, #c9bbae, #f0f0f0);
}
.sel 
{
  font-size: 1rem;
  display: inline-block;
  margin: 3em 2em;
  width: 45rem;
  background-color: transparent;
  position: relative;
  cursor: pointer;
}
.sel::before 
{
  position: absolute;
  content: '\f063';
  font-family: 'FontAwesome';
  font-size: 2em;
  color: #FFF;
  right: 20px;
  top: calc(50% - 0.5em);
}
.sel.active::before 
{
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}
.sel__placeholder 
{
  display: block;
  font-family: 'Pacifico';
  font-size: 2rem;
  color: #838e95;
  padding: 0.2em 0.5em;
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  visibility: visible;
}
.sel__box__options 
{
  display: list-item;
  font-family: 'Pacifico';
  font-size: 1.8rem;
  color: #838e95;
  padding: 0.5em 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.sel.active .sel__placeholder 
{
  visibility: hidden;
}
.sel__placeholder::before 
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.2em 0.5em;
  content: attr(data-placeholder);
  visibility: hidden;
}
.sel.active .sel__placeholder::before 
{
  visibility: visible;
}
.sel__box 
{
  position: absolute;
  top: calc(100% + 4px);
  left: -4px;
  display: none;
  list-style-type: none;
  text-align: left;
  font-size: 1em;
  background-color: #FFF;
  width: calc(100% + 8px);
  box-sizing: border-box;
}
.sel.active .sel__box 
{
  display: block;
  -webkit-animation: fadeInUp 500ms;
          animation: fadeInUp 500ms;
}
.sel__box__options::after 
{
  content: '\f00c';
  font-family: 'FontAwesome';
  font-size: 0.5em;
  margin-left: 5px;
  display: none;
}
.sel__box__options.selected::after 
{
  display: inline;
}
.sel__box__options:hover 
{
  background-color: #ebedef;
}
.sel 
{
  border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}

.sel--PresMode{z-index:4;}
.sel--ModeImg {z-index:3;}
.sel--PhoneImg{z-index:2;}

@-webkit-keyframes fadeInUp 
{
  from 
  {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }
  to 
  {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp 
{
  from 
  {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }
  to 
  {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeOut 
{
  from 
  {
    opacity: 1;
  }
  to 
  {
    opacity: 0;
  }
}
@keyframes fadeOut 
{
  from 
  {
    opacity: 1;
  }
  to 
  {
    opacity: 0;
  }
}

#inpTaping
{
  display:none;
} 

#tole,#tori,#bori,#bole
{
   width:7rem;
   height:7rem;
   position:absolute;
   display:block;
   display:none;
   background-color:transparent;
   background-color:blue;
}
#tole{top:0;left:0;}
#tori{top:0;right:0;}
#bori{bottom:0;right:0;}
#bole{bottom:0;left:0;}