.login{
    width: 100%;
    height:calc(100% - 85px);
    background-image: url("assets/img/slider2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    .login_box{
        width: 35%;
        position: absolute;
        height:93%;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        padding: 10px 50px;
        background-color: rgba(255, 255, 255, 0.9);
        overflow: hidden;
        box-shadow: 3px 3px 6px 3px #191313;
        .form_2{
            .form-group{
                margin-bottom: 24px;
            }
            .forgot{
                font-size: 15px;
            }
            .btn{
                margin-top: 10px;
            }
        }
        .top_icon{
            width: 100%;
            float: left;
            text-align: center;
            margin-bottom: 0px;
            img{
                width: 15%;
                margin-bottom: 10px;
            }
        }
        h1{
            color:#333;
            margin-bottom: 0;
            font-size: 20px;
            span{
                font-size: 24px;
            }
        }
        h3{
            color:#666;
            font-weight: 400;
            font-size: 18px;
        }
        // form{
        //     .form-control{
        //         height: 50px;
        //         border-radius: 50px;
        //         background-color: #ccc;
        //     }
        //     .form-control:focus{
        //         border-color: #ccc;
        //         box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);
        //     }
        //     .form-control::placeholder{
        //         color:#333;
        //     }
        // }
    }
}
#mandatory{
    background: rgba(0,0,0,.5);
}
.login:before{
    position: absolute;
    width:100%;
    content:"";
    height:100%;
    background-color: rgba(17, 17, 17, 0.8);
    top:0;
    left:0;
}



.modal-dialog{
    max-width: 800px;
    .modal-content{
        .modal-header{

        }
        .modal-body{

            .row {
                height:250px;
                .col{
                    height:100%;
                    float: left;
                }
                .logo{
                    border-right:1px solid #ccc;
                    padding: 2px 25px;
                    text-align: center;
                    img{
                        width:150px;
                    }
                }
                .main_content{
                    float: left;
                    max-width: 100%;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                    .content{
                        padding: 30px;
                        position: absolute;
                        width: 100%;
                        max-width: 100%;
                        .header_fields{
                            font-weight: 700;
                            text-align: center !important;
                        }
                        h2{
                            color:#28a8e0;
                            font-size: 28px;
                        }
                        p{
                            font-size: 22px;
                        }
                        h6{
                            font-size: 18px;
                            color: #28a8e0;
                            // font-style: italic;
                        }
                        .input_left {
                            height: 90px;
                            width: 100%;
                            form{
                                width: 70%;
                                float: left;
                            }
                            .resent{
                                width:30%;
                                float: left;
                                text-align: center;
                                margin-top: 20px;
                                a{
                                    text-decoration: underline;
                                    cursor: pointer;
                                }
                            }
                        }
                        .btn_center {
                            width: 340px;
                            margin: auto;
                        }
                    }
                    .success{
                        text-align: center;
                        img{
                            width: 100px;
                            margin: 20px;
                        }
                        h2{
                            color:green;
                        }
                    }
                }
                .end_success{
                    padding: 30px;
                    .logo{
                        // padding: 75px 25px;
                    }
                }

                .section1{
                    left: 0;
                }
                .section2{
                    left: 100%;
                }
                .section3{
                    left: 100%;
                }
                .section1.section_close{
                    left:-100%;
                }
                .section2.section_open{
                    left:0;
                }
                .section3.section_open{
                    left:0;
                }

                .section_open {
                    /* for chrome and safari*/
                    -webkit-animation-duration: 1s;
                    -webkit-animation-name: sectionin;

                    /*for firefox*/
                    -moz-animation-duration: 1s;
                    -moz-animation-name: sectionin;

                      /* for opera*/
                    -o-animation-duration: 1s;
                    -o-animation-name: sectionin;

                      /* Standard syntax*/
                    animation-duration: 1s;
                    animation-name: sectionin;
                  }


                  @-webkit-keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }

                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }

                  @-moz-keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }

                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }
                  @-o-keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }

                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }
                  @keyframes sectionin {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }

                    to {
                        margin-left: 0%;
                        width: 100%;
                    }
                  }


                  .section_close {
                    /* for chrome and safari*/
                    -webkit-animation-duration: 1s;
                    -webkit-animation-name: sectionout;

                    /*for firefox*/
                    -moz-animation-duration: 1s;
                    -moz-animation-name: sectionout;

                      /* for opera*/
                    -o-animation-duration: 1s;
                    -o-animation-name: sectionout;

                      /* Standard syntax*/
                    animation-duration: 1s;
                    animation-name: sectionout;
                  }


                  @-webkit-keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 80%;
                    }

                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }

                  @-moz-keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 80%;
                    }

                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
                  @-o-keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 100%;
                    }

                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
                  @keyframes sectionout {
                    from {
                        margin-left: 100%;
                        width: 80%;
                    }

                    to {
                        margin-left: 0%;
                        width: 80%;
                    }
                  }
            }
        }
    }
}

@media screen and (max-width: 550px) {
    .login{
        height: calc(100% - 53px);
        margin-top: 53px;
        .login_box{
            width:90%;
            .top_icon{
                img{
                    width: 50px;
                }
            }
            h1{
                span{
                    font-size: 18px;
                }
            }
        }
    }
}
