/*override*/
.article .reg-cont .cf {
    margin : 0px !important; 
}

.steps ul li a {
    text-decoration: none;
    font-size: 18px !important;
}

.steps .inner ul {
  padding-left: 0px;
}

.form-group {
  margin-bottom: 0px;
}

.article li {
    margin-bottom: 0px !important;
}

.steps ul {
    font-family: Montreal-medium !important;
}
.submit button i {
  vertical-align: baseline;
}
.submit button:hover {
  background: red !important;
}

.form-signup {
  padding-bottom: 70px !important;
}


.row,
.product [class*="col-"]{
  padding: 0px 1px;
}


@media (min-width: 768px) and (max-width: 979px) {
  .row {
    margin-left: 0px; 
  }
}

@media screen and (max-width: 967px) {
  .product {
      margin-top: 25px;
      margin-bottom: 15px;
  }
}

.submit button {
  width: 50%;
      border: none;
    background-color: #00A3B7;
    text-transform: uppercase;
    font-size: 13px;
    color: #FFF !important;
    padding: 8px 10px;
    margin-bottom: 4px;
    -webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
    -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
    -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
    -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
    transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
}
.steps button:hover {
    background-color: #007789;
}

/*override*/

ul {
  list-style: none;
}

.cf:before, .cf:after {
  content: ' ';
  display: table;
}
.cf:after {
  clear: both;
}

.title {
  padding: 50px 0;
  font: 24px 'Open Sans', sans-serif;
  text-align: center;
}

.inner {
  /*max-width: 820px;*/
  margin: 0 auto;
}

.steps {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f1f0f0;
  padding: 0px;
}

.steps ul {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.steps li {
  float: left;
  width: 20%;
}

.steps a {
  position: relative;
  display: block;
  padding: 20px;
  padding-right: 0 !important;
  /* important overrides media queries */
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  /* color: #aaa; */
  cursor: pointer;
}

.steps a:hover {
  background: #eee;
}

.steps a.active {
  color: #777;
  background-color: #fff;
}

.steps a span:first-child {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 5px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
}


.steps a.active span:first-child {
  color: #fff;
  border-color: #777;
  background-color: #777;
}




.steps a:before,
.steps a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
  border-left: 16px solid transparent;
}

.steps a:before {
  margin-left: 1px;
  border-left-color: #d5d5d5;
}

.steps a:after {
  border-left-color: #f1f0f0;
}

.steps a:hover:after {
  border-left-color: #eee;
}

.steps a.active:after {
  border-left-color: #fff;
}

.steps li:last-child a:before,
.steps li:last-child a:after {
  display: none;
}


.steps a.active.b-pink span:first-child {
  color: #fff;
  border-color: #CC007A;
  background-color: #CC007A;
}

.steps a.active.b-blue span:first-child {
  color: #fff;
  border-color: #17a6bb;
  background-color: #17a6bb;
}

.steps a.active.b-orange span:first-child {
  color: #fff;
  border-color: #F38D2A;
  background-color: #F38D2A;
}


.steps a.b-pink span:first-child {
  border: 2px solid #CC007A;
}

.steps a.b-blue span:first-child {
  border: 2px solid #17a6bb;
}

.steps a.b-orange span:first-child {
  border: 2px solid #F38D2A;
}

.steps ul li a.b-blue {
    color: #17a6bb;
}

.steps ul li a.b-pink {
    color: #CC007A;
}

.steps ul li a.b-orange {
    color: #F38D2A;
}


@media (max-width: 720px) {
  .steps a {
    padding: 15px;
  }

  .steps a:before,
  .steps a:after {
    border-top-width: 26px;
    border-bottom-width: 26px;
    border-left-width: 13px;
  }
}
@media (max-width: 620px) {
  .steps a {
    padding: 10px;
    font-size: 12px;
  }

  .steps a:before,
  .steps a:after {
    border-top-width: 22px;
    border-bottom-width: 22px;
    border-left-width: 11px;
  }
}
@media (max-width: 520px) {
  .steps a {
    padding: 5px;
  }

  .steps a:before,
  .steps a:after {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 8px;
  }

  .steps li a span:first-child {
    display: block;
    margin: 0 auto;
  }

  .steps li a span:last-child {
    display: none;
  }
}




/*input*/
/*
#form-daftar input[type="text"], 
#form-daftar input[type="email"], 
#form-daftar input[type="password"], 
#form-daftar select {
    background-color: #f1f0f0;
}*/

.cosdntainer {
  padding-top: 16px;
}

.reg-cont {
  border: 1px solid #ddd;
  max-width: 880px;
  margin: auto;
}

@media screen and (max-width: 768px) {
    .steps {
        margin-left: 0px !important;
    }
}

input[type="text"]:focus, textarea:focus {
    border:1px solid #66afe9 !important;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}
 
* { box-sizing:border-box; }

/* form starting stylings ------------------------------- */
.group        { 
  position:relative; 
}
/* input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:50%;
  border:none;
  border-bottom:1px solid #757575;
}
 */
#p2 {
  margin-top: 16px ;
}

input:focus     { outline:none; }

/* LABEL ======================================= */
label          {

  text-transform: inherit !important;
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  /*top:10px;*/
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label    {
  /*top:-20px;
  font-size:14px;
  color:#5264AE;*/
}

/* BOTTOM BARS ================================= */
.bar  { position:relative; display:block; width:100%; }
.bar:before, .bar:after   {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100%; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from { background:#5264AE; }
  to  { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background:#5264AE; }
  to  { width:0; background:transparent; }
}
@keyframes inputHighlighter {
  from { background:#5264AE; }
  to  { width:0; background:transparent; }
}