$string: 'Open+Sans';
$font-name: $string;
@import url(http://fonts.googleapis.com/css?family=#{$font-name});

$c-1: #A0A0A0;
$c-2: #3D3D3D;
$c-4: #C3C4C6;
$c-5: #7E7E80;

$c-white: #EFEFEF;
$c-blue: #65BFFB;
$c-green: #C5E465;
$c-red: #FE7771;
$c-black: #3A3A3A;

$gradient: linear-gradient(to bottom right, $c-4, $c-5);
$wrist-color: #F1F1F1;
$size: 260px;


/*-----------------------
page Settings
-----------------------*/

.page{
  header{
    text-align: center;
    color: #fff; 
    font-family: str-replace($font-name, '+', ' ');
    width: 100%;
    float: left;
    max-height: 32vh; 
    height: 180px;
    position: relative;
    z-index: 10;
    padding-bottom: 16px;
    background: #FFF;
    color: #393939;

    ul{
      list-style: none;
      clear: both;
      max-width: 200px;
      margin: auto;
      height: 44px;
      display: flex;
      align-items: center; 

      li{
        @include square(20px, red);
        margin: 0 5px;
        display: block;
        float: left;
        cursor: pointer;
        
        &:hover{
          box-shadow: inset 0 0 0 3px rgba(black, .07)
        }

        &[class*="white"]{
          background: $c-white;
        }
        &[class*="blue"]{
          background: $c-blue;          
        }
        &[class*="green"]{
          background: $c-green;          
        }
        &[class*="red"]{
          background: $c-red;          
        }
        &[class*="black"]{
          background: $c-black;          
        }
      }
    }

    input{
      width: calc(100% - 32px);
      max-width: 400px;
      min-height: 44px;
      padding: 0 0;
      appearance: none; 
      border: 0;
      border-bottom: 3px solid #393939;
      transition: transform .2s linear, box-shadow .2s linear,padding .2s linear;

      &:focus{
        outline: none;
        padding: 0 16px;
        box-shadow: inset 0 48px 0 #393939;
        transform: scale(1.1) translateZ(20px);
        color: #fff;
      }
    }
  }
}

body{
  background: #393939;
  @include high();
}
.container{
  perspective: 200px;
  @include centerer();
  margin-top: 100px;
  z-index: 0;
} 


/*
Watch
*/

.applewatch{
  @extend .iwatch;
}

@keyframes focus{
  66%{
    box-shadow: 0 0 10px rgba(#036CE4, .4);
  }
}


@media all and (max-height: 600px){
  .page header{
    left: 0;
    top: 0;
    width: 240px;
    height: 100vh; 
    max-height: 100vh; 
    float: left;
  }
}