/* --------------------------------- */
/* 0. Webfonts and Icon fonts
 ----------------------------------- */

@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700|Merriweather:400italic,400");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");


/* -------------------------------- 
1. Primary style
-------------------------------- */
*{
  margin:0;
  padding:0;
  border:0;
  outline:none;
  border-radius:0px;
  -webkit-appearance:none;
  -moz-appearance:none;
  -webkit-font-smoothing:antialiased;
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

body{padding:0;margin:0;}

*,::after,::before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

html {
  //font-size:62.5%;
}

body {
  background:#fff;
  font-size:14px;
  font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  color:#fff;
  padding:0;margin:0;
}

a {
  color:#9e1c51;
  text-decoration:none
}

a:hover, a:active, a:focus {
  outline: none!important;
}

img {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
}

h1 {
  font-size:2em;
  margin:.67em 0
}

h2 {
  font-size:1.5em;
  margin:.75em 0
}

h3 {
  font-size:1.17em;
  margin:.83em 0
}

h5 {
  font-size:.83em;
  margin:1.5em 0
}

h6 {
  font-size:.75em;
  margin:1.67em 0
}

ul li {
  list-style: none;
}

input{
  margin-top:40px;
}

.btn {
  position:relative;
  overflow:hidden;
  display:inline-block;
  vertical-align:top;
  color:#34a1c4;
  text-decoration:none;
  font-weight:700;
  border:2px solid #34a1c4;
  padding:1em 5em;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

.btn:hover {
  background:#34a1c4;
  color:#fff;
  padding:1em 5em
}

.btn:after {
  position:absolute;
  content:'\f18e';
  font-family:'FontAwesome';
  font-weight:400;
  right:-3em;
  transition: .4s;
  color:#fff
}

.btn:hover:after {
  right:2em
}

.clear{clear: both;height: 10px;}


.container{
  width: 320px;
  height: auto;
  background: #fff;
}

.container .frame1, .container .frame2, .container .frame3, .container .frame4{
  width: 100%;
  min-height: 400px;
  background: #FFF;
  clear: both;
  text-align: center;

}

.container .frame2, .container .frame3, .container .frame4{display: none;}

.steps{
  width: 100%;
  padding: 24px 74px;
  clear: both;
}
.steps .step{
  width: 36px;
  height: 36px;
  float: left;
}
.steps .st1{
  background-image: url("../imgs/01.png");
}
.steps .st2{
  background-image: url("../imgs/02.png");
}
.steps .st3{
  background-image: url("../imgs/03.png");
}
.steps .st4{
  background-image: url("../imgs/04.png");
}

.steps .stb{background-position: 0 36px;}
.steps .stg{background-position: 0 72px;}
.steps .stw{background-position: 0 0px;}

.steps .sp{
  width: 20px;
  height: 2px;
  background: #ccc;
  margin-top:15px;
  margin-left: 6px;
  margin-right: 6px;
  float: left;
}

.container .title{
  font-family:HelveticaNeue-Bold;
  font-size:15px;
  color:#333333;
  line-height:18px;
  text-align:center;
  margin-top: 30px;
  font-weight: bold;
}

.container .subtitle{
  font-family:HelveticaNeue;
  font-size:15px;
  color:#666666;
  line-height:20px;
  text-align:center;
  margin-top: 10px;

}

.bt1{
  height: 36px;
  font-family:HelveticaNeue-Bold;
  font-size:14px;
  color:#ffffff;
  line-height:36px;
  background:#333333;
  border-radius:6px;
  text-align: center;
  padding:0 50px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  cursor:pointer;
  margin:10px 40px;
}

.bt2{
  height: 36px;
  font-family:HelveticaNeue;
  font-size:14px;
  color:#4a4a4a;
  line-height:36px;
  background:#ccc;
  border-radius:6px;
  text-align: center;
  padding:0 50px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  cursor:pointer;
  margin:10px 40px;
}

.bt1:hover{
  background:#aaa;
}

.container .frame1 .name_file{
  font-family:HelveticaNeue;
  font-size:15px;
  color:#999999;
  line-height:17px;
  text-align:center;
  padding:0 10px;
  overflow: hidden;
}

.container .frame2 .bxslider{
  width: 290px;
}
.container .frame2 .bxslider .frm{
  width: 290px !important;
  height: 290px; 
}
.container .frame2 .bxslider .frm1{background: url(../imgs/frame_01.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm2{background: url(../imgs/frame_02.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm3{background: url(../imgs/frame_03.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm4{background: url(../imgs/frame_04.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm5{background: url(../imgs/frame_05.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm6{background: url(../imgs/frame_06.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm7{background: url(../imgs/frame_07.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm8{background: url(../imgs/frame_08.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm9{background: url(../imgs/frame_09.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm10{background: url(../imgs/frame_10.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm11{background: url(../imgs/frame_11.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm12{background: url(../imgs/frame_12.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm13{background: url(../imgs/frame_13.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm14{background: url(../imgs/frame_14.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm15{background: url(../imgs/frame_15.png) center center;background-size: cover;}
.container .frame2 .bxslider .frm16{background: url(../imgs/frame_16.png) center center;background-size: cover;}

.img_layer{    
  width: 140px;
  height: 140px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  float: right;
  z-index: -1;
  margin-top: 37px;
  margin-right: 50px;
  position: relative;
}

.container .frame3 .preview{
  width: 290px;
  height: 290px;
  margin-top:10px;
  margin-left:15px;
} 

.container .frame3 .preview img{width: 100%;}