/*

* screenmodel.scss.erb
* ------------------------------------------------------------------------------------------- */

.screen-model {

position: relative;
padding: 25px 25px 40px 25px;
background: #000;
border: solid 2px #a6a6a6;
border-bottom: solid 20px #a6a6a6;
@include border-radius(4px);
@include box-shadow(0px 2px 2px #999);

.inset {
  height: 100%;
  position: relative;
  border: solid 1px #666;
  border-bottom: solid 2px #666;
}

.pos {
  z-index: 99;
  position: absolute;
}

a.pos {
  opacity: 0.1;
  background: $concerto-blue-2;
  $transition: opacity linear .1s, box-shadow linear .1s;
  @include transition($transition);

  &:hover {
    opacity: 0.8;
    $shadow: 0 0 8px $concerto-blue-2; // rgba(82,168,236,.6);
    @include box-shadow($shadow);
    text-decoration: none;
  }
}

.bottom {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;

  .brand {
    color: $gray;
    padding: 8px 40px;
    width: 40%;
    text-transform: uppercase;
    text-align: center;
    background: #000;
    font-size: 1em;
    border-radius: 5000px;
  }
}

&.screens-show {
  max-width: 800px;
  width: 800px;
  margin: 0 auto;
  height: 450px;
  max-height: 450px;
}

}