@font-face {
	src: url("../../assets/fonts/Roboto/Roboto-Light.ttf");
	font-weight: 	normal;
	font-family: 	RobotoLight;
}
body{
	margin:0;
    background-color: #000 !important;
}
.main {
    height: 100vh;
    position: fixed;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    font-family: "RobotoLight", sans-serif;
}
fieldset {
    display: none;
    width: 607px;
    /*padding: 20px;*/
    border: 0px;
    color: #fff;
    padding-right: 0;
    height: 315px;
    padding-bottom: 0;
    padding: 40px 60px;
}
#apstep_first{
	display:block;
	width: 350px;
	/*padding: 70px 70px;*/
    padding: 40px 60px;
}
.add-post-input{
	width:100%;
	margin:10px -7px;
	height:30px;
	padding:0px 5px;
	border: 3px solid #fff;
	border-radius: 4px;
}
textarea.add_post_description{
	/*width:100%;*/
	margin:10px -7px;
	padding:5px;
	/*border: 3px solid #fff;
	border-radius: 4px;*/
	resize: none;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}
fieldset a {
    width: 100%;
    display: inline-block;
    /*margin-bottom: 30px;*/
    text-decoration: none;
    padding-bottom: 50px;
}
input#fileID {
    display: none;
}
img#addpostImg {
    width: 100%;
}
fieldset#apstep_first a span {
    padding-left: 20px;
    color: #fff;
    position: absolute;
    margin-top: 4px;
    font-size: 18px;
}
a.facebook-upload-img span {
    padding-left: 37px !important;
}
a.instagram-upload-img span {
    padding-left: 26px !important;
}
.main form {
    /*width: 670px;*/
    width: 650px;
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
    transform: translate(-42%, -50%);
    height: 375px;
    padding-top: 10px;
}
fieldset:before {
    content: "";
    position: absolute;
    width: 100%;
    border-top: 1px solid #fff;
    top: 0;
    /*left: -45px;*/
    left: -55px;
}    
fieldset:after {
    content: "";
    position: absolute;
    /*height: 100%;*/
    height:410px;
    border-left: 1px solid #fff;
    /*top: -40px;
    left: 0px;*/
    top: -52px;
    left: 10px;
}
p.field-nr {
    position: absolute;
    /*top: -64px;*/
    top: -70px;
    left: -46px;
    font-size: 20px;
    color: #ccc;
    letter-spacing: 2px;
}
/*span.first-of {
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 16px;
    left: 8px;
}
span.separator {
    font-size: 43px;
    position: absolute;
    left: 18px;
    top: -5px;
}
span.last-of {
    position: absolute;
    right: -46px;
    top: 9px;
}*/
span.first-of {
    color: #cacaca;
    font-size: 20px;
    position: absolute;
    top: 29px;
    left: 3px;
}
span.separator {
    font-size: 30px;
    position: absolute;
    left: 16px;
    top: 22px;
}
span.last-of {
    position: absolute;
    right: -42px;
    top: 29px;
}
/*input.pre_btn {
    position: absolute;
    right: 40px;
    right: 95px;
    top: 40%;
    transform: translate(0%, -100%);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    width: 127px;
    height: 36px;
    text-align: center;
    padding-left: 54px;
    color: #fff;
    font-size: 16px;
    border: 0px;
}*/
input.pre_btn {
    /*position: absolute;*/
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    border: 0px;
}
input.pre_btn1{
    right: 40px;
    top: 13%;
}
/*input.next_btn {
    position: absolute;
    /*right: 40px;*/
    /*right: 95px;
    right: 97px;
    top: 50%;
    transform: translate(0%, -50%);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    width: 127px;
    height: 36px;
    text-align: right;
    color: #fff;
    font-size: 16px;
    border: 0px;
}*/
input.next_btn {
    /*position: absolute;*/
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    border: 0px;
}
.post-uploaded-img {
    /*width: 370px;
    height: 284px;*/
    /*transform: skew(-10deg);*/
    /*width: 370px;*/
    height: 243px;
    transform: skew(0deg);
    /*margin-left: 38px;*/
    border: 2px dotted #fff;
    border-radius: 3px;
    /*margin-top: 5px;*/
    overflow: hidden;
    /*padding-top: 5px;
    padding-bottom: 5px;*/
    width: 100%;
}
div#draggable:before {
    content: "";
    position: absolute;
    left: 0;
    /*width: 5px;*/
    background: #404040;
    bottom: 0;
    top: -1px;
    z-index: 9;
}
/*div#draggable:after {
    content: "";
    position: absolute;
    right: 0;
    width: 5px;
    background: #404040;
    bottom: 0;
    top: -1px;
    z-index: 9;
}*/
input:focus{outline: none;}
fieldset#apstep_third input:focus{border-bottom: 2px solid #a0a0a0;transition: width 2s; -webkit-transition: width 2s;}
img#addpostImg {
    /*width: 426px !important;*/
    /*width:100% !important;
    height: 238px !important;
    transform: skew(0deg);*/
    /*margin-left: -30px;*/
}
input.add-post-input {
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #fff;
    border-radius: 0px;
    width: 100%;
}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  /*top: 15px;*/
  top: 35px;
  bottom: 10px;
  /*left: 20px;*/
  left: 60px;
  font-size: 12px;
  opacity: 1;
  color: #ccc
}
/*.inputText {
 	font-size: 16px;
    width: 94%;
    height: 45px;
    background: transparent;
    border: 0px;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
    color: #fff;
    border-radius: 0;
}*/
.inputText {
    font-size: 16px;
    width: 80%;
    /*height: 50px;*/
    height: 45px;
    background: transparent;
    border: 0px;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.5);
    /*margin-bottom: 25px;*/
    margin-bottom: 40px;
    color: #fff;
    border-radius: 0;
}
.floating-label {
    position: absolute;
    pointer-events: none;
    /*left: 22px;*/
    top: 38px;
    transition: 0.2s ease all;
    font-family: "RobotoLight", sans-serif;
}
.floating-label, .floating-label2, .floating-label3{
    font-size: 18px;
    left: 60px;
}  
input:focus ~ .floating-label2,
input:valid ~ .floating-label2{
  /*top: 85px;*/
  top: 120px;
  bottom: 10px;
  /*left: 20px;*/
  left: 60px;
  font-size: 12px !important;
  opacity: 1;
  color: #ccc
}
.floating-label2 {
    position: absolute;
    pointer-events: none;
    /*left: 22px;*/
    /*top: 109px;*/
    top: 120px;
    transition: 0.2s ease all;
    font-family: "RobotoLight", sans-serif;
}
textarea:focus ~ .floating-label3,
textarea:not(:focus):valid ~ .floating-label3{
  /*top: 155px;*/
  /*top: 160px;*/
  /*top: 190px;*/
  top: 205px;
  bottom: 10px;
  /*left: 22px;*/
  left: 60px;
  font-size: 12px;
  opacity: 1;
  color: #ccc
}
.floating-label3 {
    position: absolute;
    pointer-events: none;
    /*left: 22px;*/
    /*top: 189px;*/
    top: 205px;
    transition: 0.2s ease all;
    font-family: "RobotoLight", sans-serif;
    /*left: 155px;*/
}
textarea.inputText {
    margin-left: 1px;
    padding: 0;
    /*height: 45px;*/
    height: 35px;
}
textarea:focus{outline: none;border-bottom: 2px solid #a0a0a0;transition: width 2s; -webkit-transition: width 2s;}
button.submit_btn {
    /*position: absolute;
    /*bottom: 30px;*/
    bottom: 41px;
    background: transparent;
    /*border: 1px solid #fff;*/
    color: #fff;
    /*padding: 10px 45px;*/
    /*padding: 8px 35px;*/
    font-size: 20px;
    font-family: "RobotoLight", sans-serif;
    /*left: 155px;*/
    border:0;
    border-bottom: 1px solid #ddd;
    padding:0; 
}
/*button.submit_btn:hover {
    background: #fff;
    color: #000;
    transition: all ease 0.8s;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    -o-transition: all ease 0.8s;
}*/
/*button.ap_closebtn {
    position: absolute;
    bottom: 95%;*/
    /*left: 50%;
    -webkit-transform: translate(-50%, 0);
     -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);*/
    /*bottom: 41px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 8px 35px;
    font-size: 16px;
    font-family: "RobotoLight", sans-serif;
}*/
button.ap_closebtn {
    /*position: absolute;*/
    bottom: 95%;
    bottom: 20px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 8px 35px;
    /*font-size: 16px;*/
    font-size: 20px;
    font-family: "RobotoLight", sans-serif;
    border: 0;
    padding: 0;
    border-bottom: 1px solid #ddd;
}
.button-block{
    display: inline-block;
    padding-top: 36px;
}
.button-block input {
    margin-right: 20px;
    border-bottom: 1px solid #ddd;
}
.button-block1 {
    padding-top: 48px;
}
/*button.ap_closebtn:hover {
    background: #fff;
    color: #000;
    /*transition: all ease 0.8s;
    transition: all ease 0.5s;
}*/
button.ap_closebtn:hover, .button-block input:hover, button.submit_btn:hover {border-bottom:1px solid #fff; transition: all ease 0.5s;}
button.ap_closebtn.bb {
    /*margin-left: 20px;*/
    margin-left: 60px;
}
.form-title {
    position: absolute;
    top: -60px;
}
.button-block button {
    margin-right: 20px;
}
@media(max-width: 991px){
    .main form {
        transform: translate(-45%, -50%);
    }
}
@media (max-width: 800px){
    .main form {
        transform: translate(-43%, -50%);
    }
}
@media (max-width: 767px){
    .main form{width: 320px;height: 340px;}
    #apstep_first{width: 255px;}
    fieldset#apstep_first a span {font-size: 15px;}
    fieldset a {padding-bottom: 40px;}
    .main form {transform: translate(-38%, -50%);}
    img#addpostImg {width: 260px !important;height: 200px !important;}
    .post-uploaded-img{width: 200px;height: 175px;}
    #apstep_first {padding: 20px 40px;}
    .form-title{top: -58px;}
    .form-title h3{font-size: 20px;}
    fieldset:after{height: 410px;}
    fieldset{padding: 20px 40px;}
    .button-block{padding-top: 25px;display: table-caption;}
    input.pre_btn, input.next_btn, button.ap_closebtn, button.submit_btn{font-size: 18px;}
    .button-block input{margin-bottom: 10px;}
    .button-block button{margin-bottom: 10px;}
    .inputText {font-size: 15px;width: 40%;}
    .floating-label, .floating-label2, .floating-label3 {font-size: 16px;left: 40px;}
    input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label, input:focus ~ .floating-label2, input:not(:focus):valid ~ .floating-label2, textarea:focus ~ .floating-label3, textarea:not(:focus):valid ~ .floating-label3{left: 40px;}
    .inputText{margin-bottom: 25px;}
    .floating-label2{top: 108px;}
    .floating-label3{top: 178px;}
    input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label{top: 20px;}
    input:focus ~ .floating-label2, input:not(:focus):valid ~ .floating-label2{top: 90px;}
    textarea:focus ~ .floating-label3, textarea:not(:focus):valid ~ .floating-label3{top: 160px;}
    .button-block1 {padding-top: 10px;}
}
@media (max-width: 360px){
    .main form{transform: translate(-34%, -50%);}
    .button-block{padding-top: 35px;}
    .button-block1{padding-top: 10px;}
}
@media(max-width: 350px){
    .main form {transform: translate(-31%, -50%);}
    .main form {width: 290px;}
    #apstep_first{padding: 15px 30px;}
    fieldset#apstep_first a span {font-size: 14px;}
    .post-uploaded-img {width: 190px;}
    fieldset{padding: 15px 30px;}
    .inputText{font-size: 14px;width: 35%;}
    .floating-label, .floating-label2, .floating-label3 {font-size: 15px;left: 30px;}
    input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label, input:focus ~ .floating-label2, input:not(:focus):valid ~ .floating-label2, textarea:focus ~ .floating-label3, textarea:not(:focus):valid ~ .floating-label3{left: 30px;}


}