@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-family: 'PT Sans', sans-serif;
}

/*------>>> Animations <<<-----*/
.fade {
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-in;
    -moz-transition: opacity 0.25s ease-in;
    -o-transition: opacity 0.25s ease-in;
    -ms-transition: opacity 0.25s ease-in;
    transition: opacity 0.25s ease-in;
    transition-delay: 0.25s;
  }
  .fade.in{
    opacity: 1;
  }
  
  .animate-switch-container {
    position:relative;
    min-height:30em;
    height:auto;
    display:block;
    width:90%;
    padding:10px;
    overflow:hidden;    
  }
  .intro {
    text-align: center;
    position: relative;
  }


  .intro h2 {
      font-size:2em;
      line-height:1em;
      margin: 0;
  }
  .intro h3 {
      margin:0;
      font-size: 1.3em;
      font-weight:200;
      margin-top: 0.3em;
      color: #aaa;
  }

 .intro .question {
    padding-top:2em;
  }

  .question.end {
    text-align:center;
  }

  .animate-switch{
    padding:10px;
    width: 100%;
  }
  .animate-switch.ng-animate {
    -webkit-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
    position:absolute;
  }

  /* hide leaving slide  */
  /* show */
  .animate-switch.ng-leave{
    left:0;
    opacity:1;
  }
  /* hide */
  .forward .animate-switch.ng-leave.ng-leave-active{
    left:-100%;
    opacity:0;
  }
  .backward .animate-switch.ng-leave.ng-leave-active{
    left: 100%;
    opacity:0;
  }
  /* show entering slide  */
  /* hide */
  .forward .animate-switch.ng-enter {
    left:100%;
    opacity:0;
  }
  .backward .animate-switch.ng-enter {
    left:-100%;
    opacity:0;

  }
  /* show */
  .animate-switch.ng-enter.ng-enter-active {
    left:0;
    opacity:1;
  }
  
  
  /*-----------------------------------*/
  /*------>>> Validation <<<-----------*/
  /*-----------------------------------*/
  
  .form-validation input.ng-invalid-maxlength {
    border:2px solid #D9272D;
  }
  
  
  .length-error {
    color: #D9272D;
    display: block;
    font-size: 12px;
    opacity: .8;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    line-height: 18px;
    padding: 10px 10px 5px 10px;
    margin: -25px 0 20px 0;
    background-color: #E3E3E3;
    border-radius: 0 0 5px 5px;
  }
  
  .input-error {
    border: 2px solid #D9272D !important;
  }
  
  /*-----------------------------------*/
  /*------->>> FORM STYLES <<<---------*/
  /*-----------------------------------*/
  
  .note {
    display: block;
    font-size: 12px;
    opacity: .8;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    line-height: 18px;
  }
  
  .note-input {
    padding: 10px 10px 5px 10px;
    margin: -25px 0 20px 0;
    background-color: #E3E3E3;
    border-radius: 0 0 5px 5px;
  }
  
  .note-input-error, .required-error-banner {
    background-color: rgba(217, 39, 45, 0.5);
  }
  
  /*-----------------------------------*/
  /*----------->>> HELPERS <<<-------------*/
  /*-----------------------------------*/
  
  /*
    Allow angular.js to be loaded in body, hiding cloaked elements until
    templates compile.  The !important is important given that there may be
    other selectors that are more specific or come later and might alter display.
   */
  [ng\:cloak], [ng-cloak], .ng-cloak {
      display: none;
  }

  .radio {
    /* secret sauce to styling radio buttons */
    appearance: none;
    -webkit-appearance: none;
    -mozilla-appearance: none;
    /* Aligning your label text and your radio */
    vertical-align: text-bottom;
  }

  .circle {
    border: 10px solid rgba(35, 76, 152, 0.19);
    border-radius: 100%;
    transition:border-color 0.3s ease-out;
  }
  
  /* radio outer circle */
  .circle:checked {
    border:5px solid #234C98;
  }
  
  /* radio inner negative circle */
  .circle:checked:before {
    content: "";
    height: 10px;
    width: 10px;
    display: block;
  }

  .circle:focus,.circle:hover{
      outline:none;
  }

  .progress{
      width:100%;
      float:left;
      height:10px;
      background:rgba(35, 76, 152, 0.19);
      overflow:hidden;
      position:relative;
      transition:all 0.3s ease-out;
  }

  .progress .bar {
      background:#234C98;
      height:100%;
      position:absolute;
      transition:all 0.3s ease-out;
  }

  .question {

  }

  .question ul {
      margin:0;
      padding:0;
  }

  .question ul li {
      list-style-type: none;
      margin: 13px;
      font-size: 1.1em;
      font-weight: 100;
      line-height: 1em;
  }

  .question ul li label ~ input[type=text] {
    width:15em;
    margin:1em;
    display:block;
    padding:5px;
  }

  .input-error {
    border:2px solid red;
  }

  .question ul li .info-message {
      margin:0;
      font-size:12px;
      color:blue;
      opacity:1;
  }

  .action-holder {
    margin-top: 2em;
    float: left;
    width: 100%;
  }

  .action-holder button {
    padding: 1em 3em;
    font-size: 1em;
    font-weight: 700;
    background: #eee;
    color: #aaa;
    border: 0;
    transition:all 0.3s ease-out;
  }

  .action-holder button:last-child{
    background: #00BA87;
    color: #fff;
  }

  .action-holder button:last-child:disabled{
    background: #aaa;
    color: #303030;
  }

  .form-group {
      width:100%;
      float:left;
  }

  .form-group label {
      width:100%;
      float:left;
      margin: 0.6em 0 0.3em 0;
      font-weight: bold;
      font-size: 1em;
  }
  .form-group input {
      width: 22em;
      float:left;
      padding: 0.5em;
      display: block;
      border: 1px solid #aaa;
  }

  .steps {
    width:100%;
    float:left;
    padding: 0;
  }

  .steps ul {
    margin:0;
    padding:0;
  }

  .steps ul li {
    float:left;
    width:20%;
    list-style-type:none;
    opacity:0.6;
    padding: 10px 0;
    transition:all 0.3s linear;
  }

  .steps ul li.active {
    opacity:1;
    background: #d6ddec;
    color: #234c98;
  }

  .steps ul li .inner-step {
    padding:10px;
    font-size: 0.8em;
  }

  .steps ul li .step {
    margin:0;
    margin-top: -12px;
    font-weight: 700;
  }

  .steps ul li .info {
    padding:0;
    margin:0;
  }

  .agree-check {
    margin-top:1em;
  }

  .agree-check input {
    width:auto;
    float:left;
  }

  .agree-check label {
    float:left;
    width:auto;
    margin:0;
  }