@media screen and (max-width: 1440px){
.box1{width: 50%!important;}
.container-main {background-position-x: 120%;}
}

@media screen and (max-width: 768px){
.box1{width: 100%!important;margin-left: 0!important;left:0;}
.container-main{height:100%!important;background: #fff!important;}
.list1{height:100%;}
.list1 .list1-l{width:100%!important;box-shadow: 0 0 0 #fff;}
.list1 .list1-l ul{height:90%;}
.list1 .list1-l .login-p2{position: absolute;bottom: 10%;display: table;left: 50%; margin-left: -57px!important;}
.list1 .list1-r{display: none;width: 0!important;}
.container-main.active .card.alt{width:100%!important;}

}

.close{color: #fff;opacity: .8;}
.box1{width: 40%;margin-left:30%;padding: 0;background-color: rgba(0,0,0,0);}
.list1{padding:0;width:100%;display: -webkit-box!important;}
.list1 .list1-l{width:50%;float: left;padding:70px 40px 10px 40px;background: #fff;height: 100%;}
.list1 .list1-l h2{color:#EA7818;text-align: center;text-transform: uppercase;letter-spacing: 1px;margin-bottom: 10%;}
.list1 .list1-l p{text-align: center;}
.list1 .list1-l .login-p1{color:#999;font-size:12px;margin: 5% 0;}
.list1 .list1-l .login-p1 a{color:#EA7818;font-size:12px;}
.list1 .list1-l .login-p2{color:#999;font-size:12px;margin: 0;}
.list1 .list1-r{width:50%;float: right;position:relative;}
.list1 .list1-r .login-img1{width:100%;}
.list1 .list1-r .login-img2{position:absolute;right: 17%;top: 45%;}
.close:hover{color:#999;}

.container-main {position: relative;width: 100%;margin: 0 auto 100px;display: inline-block;background: url(http://img.xorder.com/common/login-img1.png) no-repeat;background-position-x: 100%;height: 450px;}
.container-main.active .card:first-child {background: #f2f2f2;margin: 0 0px;transition: all 400ms ease-in-out 0s;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;}
.container-main.active .card:nth-child(2) {background: #fafafa;margin: 0 0px;}
.container-main.active .card.alt {top: 0;left: 0;width: 60%;height:100%;min-width: 60%;overflow: hidden;}
.container-main.active .card.alt .toggle {position: absolute;top: 40px;right: -70px;box-shadow: none;-webkit-transform: scale(10);transform: scale(10);-webkit-transition: -webkit-transform .3s ease;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease, -webkit-transform .3s ease;}
.container-main.active .card.alt .toggle:before {content: '';}
.container-main.active .card.alt .title,.container-main.active .card.alt .input-container,.container-main.active .card.alt .button-container {left: 0;opacity: 1;visibility: visible;-webkit-transition: .3s ease;transition: .3s ease;}
.container-main.active .card.alt .input-container {
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.container-main.active .card.alt .input-container:nth-child(2) {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
.container-main.active .card.alt .input-container:nth-child(3) {
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
.container-main.active .card.alt .button-container {
-webkit-transition-delay: .7s;
transition-delay: .7s;
}

.card {position: relative;background: #ffffff;border-radius:0;padding: 60px 0 40px 0;box-sizing: border-box;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);-webkit-transition: .3s ease;transition: .3s ease;}
.card .input-container {position: relative;margin-bottom: 10%;width:100%;}
.card .input-container .login-icon{float: right; margin-top: -20px;font-size: 16px;color:#ccc;}
 .card .input-container input {outline: none;z-index: 1;position: relative;background: none;width: 100%;height: 40px;border: 0;color: #212121;font-size: 14px;font-weight: 400;}
.card .input-container input:focus ~ label {color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);}
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {width: 50%;}
.card .input-container input:valid ~ label {color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);}
.card .input-container label {position: absolute;top: 0;left: 0;color: #999;font-size: 14px;font-weight: 300;line-height: 40px;-webkit-transition: 0.2s ease;transition: 0.2s ease;}
.card .input-container .bar {position: absolute;left: 0;bottom: 0;background: #ccc;width: 100%;height: 1px;}
.card .input-container .bar:before, .card .input-container .bar:after {content: '';position: absolute;background: #EA7818;width: 0;height: 2px;-webkit-transition: .2s ease;transition: .2s ease;}
.card .input-container input:focus ~ i:before{color:#EA7818!important;}
.card .input-container .bar:before {left: 50%;}
.card .input-container .bar:after {right: 50%;}
.card .button-container button:active:before, .card .button-container button:focus:before {opacity: 1;-webkit-transform: scale(10);transform: scale(10);}
.card.alt {position: absolute;top: 40px;right: -70px;z-index: 10;width: 140px;height: 140px;background: none;box-shadow: none;padding: 0;-webkit-transition: .3s ease;transition: .3s ease;}
/*.card.alt .toggle {position: relative;background: #fff;width: 140px;height: 140px;border-radius: 100%;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);color: #ffffff;font-size: 58px;line-height: 140px;text-align: center;cursor: pointer;}
.card.alt .toggle:before {content: '\f040';display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-transform: translate(0, 0);transform: translate(0, 0);}*/
.card.alt .input-container,.card.alt .button-container {left: 100px;opacity: 0;visibility: hidden;}
.card.alt .input-container input {color: #666;}
.card.alt .input-container input:focus ~ label {color: #EA7818;}
.card.alt .input-container input:focus ~ .bar:before, .card.alt .input-container input:focus ~ .bar:after {background: #EA7818;}
.card.alt .input-container input:valid ~ label {color: #EA7818;}
.card.alt .input-container label {color: #999;}
.card.alt .input-container .bar {background: #ccc;}
.form2 select{-moz-appearance: none;appearance: none;/*background-image: url("http://img.xorder.com/common/select_icon.png");*/background-repeat: no-repeat;background-position: calc(100% - 7px) 50%;background-size: 6% 17%;border-radius: 3px;padding: 0;}
/* Keyframes */
@-webkit-keyframes buttonFadeInUp {
0% {
  bottom: 30px;
  opacity: 0;
}
}
@keyframes buttonFadeInUp {
0% {
  bottom: 30px;
  opacity: 0;
}
}

.card.alt{display:none;}
.card.alt h1{font-size: 18px;z-index: 9999;position: relative;margin-top: 5%;color: #EA7818;text-align: center;text-transform: uppercase;letter-spacing: 1px;margin-bottom: 4%;}
.form2{padding:0 7% 1% 7%;}
.container-main.active .card.alt .input-container{width: 46%;float: left;margin: 0 2% 5% 2%;}
.form2 .login-p2{position: absolute;color: #999;bottom: 1%;left: 50%;margin-left: -57px;}


.share-btn{width:100%;overflow: hidden;margin:20px auto 30px;position:relative;}
.share-btn h6{font-size: 12px;color: #999;background-color: #fff;width: 40%; margin: 0 auto;z-index: 999;position: relative;text-align: center;}
.share-btn .share-btn-a{overflow: hidden;width:100%;margin-top:10px;}
.share-btn .share-btn-a a{width:45%;border-radius: 50px;height:30px;line-height: 30px;float: left;display: block;margin: 0 2.5%;}
.share-btn .share-btn-a a:first-child{background-color: #3f51b6}
.share-btn .share-btn-a a:last-child{background-color: #48a9f4}
.share-btn .share-btn-a a i{width: 30px;height: 30px;line-height: 30px;text-align: center;border-radius: 50px 0 0 50px;font-size: 18px;color: #fff;padding-left: 8px;}
.share-btn .share-btn-a a span{font-size: 14px;color: #fff;padding-left: 7px;}