/* Raleway */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway Thin'), local('Raleway-Thin'), url(./fonts/raleway-v11-latin-100.woff2) format('woff');
  src: local('Raleway Thin'), local('Raleway-Thin'), url(./fonts/raleway-v11-latin-100.woff2) format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(./fonts/raleway-v11-latin-300.woff2) format('woff');
  src: local('Raleway Light'), local('Raleway-Light'), url(./fonts/raleway-v11-latin-300.woff2) format('woff2');
}

/* Onboarding */

div.access_watch_onboarding {
  text-align: center;
}

div.access_watch_onboarding_wrapper {
  display: inline-block;
}

div.access_watch_onboarding_new,
div.access_watch_onboarding_existing {
  width:420px;
  height:240px;
  margin:0 15px 30px;
  padding:60px 30px;
  background: #ffffff;
  float:left;
  border-radius:15px;
  position:relative;
  overflow:hidden;
}

div.access_watch_onboarding_new {
  background: white url(crane.svg) no-repeat bottom right;
  background-size: 200px;
}

div.access_watch_onboarding_existing {
  background: white url(rocket.svg) no-repeat bottom right;
  background-size: 175px;
}

div.access_watch_onboarding h3, div.access_watch_onboarding h4 {
  font-size: 36px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #46396a;
}

div.access_watch_onboarding h3 {
  margin: 60px auto 60px;
  display: block;
  text-align: center;
}

div.access_watch_onboarding h4 {
  margin: 0;
  text-align: left;
}

div.access_watch_onboarding form {
  margin-top: 100px;
}

div.access_watch_onboarding input {
  /*width: 240px;*/
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
  background: #e2e1e6;
  border: none;
  border-radius: 25px;
  font-weight: 300;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  display: block;
  margin: 5px 0;
}

div.access_watch_onboarding input::placeholder,
div.access_watch_onboarding input:placeholder-shown {
    color: #46396a;
    font-style: italic;
    letter-spacing: 1px;
}

div.access_watch_onboarding button {
  color: white;
}

/* Activate */

div.access_watch_activate {
  margin: 10px 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.access_watch_activate form {
    height: 44px;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
    border-radius: 32px;
    padding: 10px;
    background: #46396a;
    color: #fff;
}

.access_watch_activate form p {
    height: 44px;
    line-height: 14px;
    margin: 14px 0 0;
    font-size: 14px;
}

.access_watch_activate button {
    color: #fff;
    margin-right: 20px;
}

/* Btn */

.access_watch .btn {
    padding: 0 20px;
    font-size: 16px;
    position: relative;
    font-weight: 400;
    text-align: center;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    cursor: pointer;
    line-height: 44px;
    border: none;
    float: left;
}

.access_watch .btn.raised {
    -moz-transition: all .1s;
    -o-transition: all .1s;
    -webkit-transition: all .1s;
    transition: all .1s;
    background: #59f
}

.access_watch .btn.raised:active {
    background: #0c7dd8;
    box-shadow: 0 1px 1px #063e6b
}

.access_watch .anim {
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1
}

.access_watch .anim:before {
    position: relative;
    content: '';
    display: block;
    margin-top: 100%
}

.access_watch .anim:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%
}

.access_watch .hoverable:hover > .anim {
    -moz-animation: anim-out .75s;
    -webkit-animation: anim-out .75s;
    animation: anim-out .75s
}

.access_watch .hoverable:hover > .anim:after {
    -moz-animation: anim-out-pseudo .75s;
    -webkit-animation: anim-out-pseudo .75s;
    animation: anim-out-pseudo .75s
}

@-webkit-keyframes anim-out {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-moz-keyframes anim-out {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-ms-keyframes anim-out {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@keyframes anim-out {
    0% {
        width: 0
    }
    100% {
        width: 100%
    }
}

@-webkit-keyframes anim-out-pseudo {
    0% {
        background: rgba(0, 0, 0, 0.25)
    }
    100% {
        background: transparent
    }
}

@-moz-keyframes anim-out-pseudo {
    0% {
        background: rgba(0, 0, 0, 0.25)
    }
    100% {
        background: transparent
    }
}

@-ms-keyframes anim-out-pseudo {
    0% {
        background: rgba(0, 0, 0, 0.25)
    }
    100% {
        background: transparent
    }
}

@keyframes anim-out-pseudo {
    0% {
        background: rgba(0, 0, 0, 0.25)
    }
    100% {
        background: transparent
    }
}