/* ====================================

Basic CSS for the demo

==================================== */
html{

    margin: 0px;
    font-family:arial, helvetica !important; 

}

body{
    background:url(../img/back.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

/*======================================
    Main Box
======================================*/
.BoxContainer{
    display: none
}

.BoxLogin{
    width: 400px;
    height: 251px;

    box-shadow: 0px 0px 5px #888888;

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 1%, #eaeaea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 1%,#eaeaea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 1%,#eaeaea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 1%,#eaeaea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
}

.BoxLogin .FormFields{
    text-align: center;
    padding-top: 90px;
}

.BoxLogin .ForgotFields{
    display:none;
    text-align: center;
    padding-top: 90px;
}

.ForgotFields span{
    font-size: 20px;
    color: #666666;
}

input[type='text'],input[type='password'], input[type='email']
{ 

    width: 218px;
    height: 25px;

    padding-left: 45px;

    border: 1px solid #ccc;
    -moz-border-radius: 2px;
    -webkit-border-radius:2px;
    -o-border-radius:2px;
    -ms-border-radius:2px;
    border-radius:2px;

}



#txtUsername{
    background:url(../img/user.png) no-repeat;
    background-color: white;
}

#txtPassword{
    margin-top: 15px;
    background:url(../img/key.png) no-repeat;
    background-color: white;
}


#txtEmailRecovery{
    margin-top: 15px;
    background:url(../img/email.png) no-repeat;
    background-color: white;
}

.BoxForgotFooter{

    margin-top: 10px;
    width: 400px;
    height: 47px;

    background-color: white;
    box-shadow: 0px 0px 5px #888888;
}

.lblForgot{

    text-align: center;
    padding-top: 15px;
    color: #999999;

    font-size:13px; 
    font-weight:bold;
    
}

.lblForgot span{
    color: #3477b6;
    font-size:14px; 
    cursor: pointer;
}
.lblForgot span:hover{
    text-decoration: underline;
}


.lblLogin{

    display: none;
    text-align: center;
    padding-top: 15px;
    color: #999999;

    font-size:13px; 
    font-weight:bold;
    
}

.lblLogin span{
    color: #3477b6;
    font-size:14px; 
    cursor: pointer;
}
.lblLogin span:hover{
    text-decoration: underline;
}


.avatar{
    position: relative;
    top: 55px;
    border: 3px;
    border-style: solid;
    border-color: white;
    box-shadow: 0px 0px 5px #888888;

}


@media screen and (max-width: 450px) and (max-width: 767px) {

    .BoxContainer{
        width: 100%;
    }

    .avatar{
        top: 10px;
        z-index: 999;
    }

    .BoxLogin{
        position: relative;
        top: -30px;
        width: 100%;
        height: 251px;

    }


    .ForgotFields{

    }

    .BoxForgotFooter{
        position: relative;
        top: -30px;
        margin-top: 10px;
        width: 100%;
        height: 47px;
    }


}


/* Button Login */
#botLogIn{

    position: relative;
    top: -45px;
    left: 95px;

    font-size: 15px;
    color: white;
    border-width: 1px;
    border-color: #3476b5;
    border-radius: 3px;

    padding-top: 7px;
    padding-bottom: 7px;
    width: 75px;

    background: #489fec; /* Old browsers */
    background: -moz-linear-gradient(top,  #489fec 0%, #3478b8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489fec), color-stop(100%,#3478b8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #489fec 0%,#3478b8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #489fec 0%,#3478b8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #489fec 0%,#3478b8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #489fec 0%,#3478b8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489fec', endColorstr='#3478b8',GradientType=0 ); /* IE6-9 */

}

#botLogIn:hover{

    background: #489fec; /* Old browsers */
    background: -moz-linear-gradient(top,  #489fec 0%, #3478b8 67%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489fec), color-stop(67%,#3478b8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #489fec 0%,#3478b8 67%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #489fec 0%,#3478b8 67%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #489fec 0%,#3478b8 67%); /* IE10+ */
    background: linear-gradient(to bottom,  #489fec 0%,#3478b8 67%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489fec', endColorstr='#3478b8',GradientType=0 ); /* IE6-9 */

}

#botLogIn:disabled{

    background: #a1a1a1;
    border-color: #a1a1a1;
}



#botRecovery{

    display: block;
    position: relative;
    top: 8px;
    right: -232px;

    font-size: 15px;
    color: white;
    border-width: 1px;
    border-color: #3476b5;
    border-radius: 3px;

    padding-top: 7px;
    padding-bottom: 7px;
    width: 100px;


    background: #489fec; /* Old browsers */
    background: -moz-linear-gradient(top,  #489fec 0%, #3478b8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489fec), color-stop(100%,#3478b8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #489fec 0%,#3478b8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #489fec 0%,#3478b8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #489fec 0%,#3478b8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #489fec 0%,#3478b8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489fec', endColorstr='#3478b8',GradientType=0 ); /* IE6-9 */
}

#botRecovery:hover{

    background: #489fec; /* Old browsers */
    background: -moz-linear-gradient(top,  #489fec 0%, #3478b8 67%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489fec), color-stop(67%,#3478b8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #489fec 0%,#3478b8 67%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #489fec 0%,#3478b8 67%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #489fec 0%,#3478b8 67%); /* IE10+ */
    background: linear-gradient(to bottom,  #489fec 0%,#3478b8 67%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489fec', endColorstr='#3478b8',GradientType=0 ); /* IE6-9 */

}

#botRecovery:disabled{

    background: #a1a1a1;
    border-color: #a1a1a1;
}


/* Checkbox Remember */
.chkRemember {
    width: 150px;    
    margin: 20px;
    position: relative;
    left: 30px;
}

.chkRemember label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 20px;
    top: 0;
    border-radius: 2px;

    -webkit-box-shadow: inset 0px 0px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 0px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 0px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    background: #fcfff4;

    text-align: center;

}

.chkRemember label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 4px;
    left: 4px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.chkRemember label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.5;
}

.chkRemember input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.chkRemember span{
    position: relative;
    color: #666666;
    font-size: 13px;
    left: 10px;
}




/* Small Boxes Style */

#mpSmallbox{
    position: fixed;
    right: 25px;
    top: 30px;
    z-index: 9999;
}

.mpSmallNotification{
    position: relative;
    font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    width: 300px;
    color: white;
    padding: 10px;
    
    border-radius: 5px;

    border-style: solid;
    border-width: 1px;
    border-color: #8f8f8f;

    background: rgb(244,244,244);
    background: -moz-linear-gradient(top,  rgba(244,244,244,1) 58%, rgba(226,226,226,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(58%,rgba(244,244,244,1)), color-stop(100%,rgba(226,226,226,1)));
    background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 58%,rgba(226,226,226,1) 100%);
    background: -o-linear-gradient(top,  rgba(244,244,244,1) 58%,rgba(226,226,226,1) 100%);
    background: -ms-linear-gradient(top,  rgba(244,244,244,1) 58%,rgba(226,226,226,1) 100%);
    background: linear-gradient(to bottom,  rgba(244,244,244,1) 58%,rgba(226,226,226,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e2e2e2',GradientType=0 );

    -webkit-box-shadow:  0px 5px 20px 5px rgba(0, 0, 0, 0.2);
    box-shadow:  0px 5px 20px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;

    z-index: 99;
}



.mpSNimgContainer{
    float: left;
    padding-right: 10px;
}
.mpSNtextContainer{
    float: left;
    /*width: 170px;*/
}
.withButtons{
    width: 170px;
}
.withNoButtons{
    width: 250px;
}
.withFullWidth{
    width: 300px;
}

.withButtonsNoIMG{
    width: 220px;
}


.mpSNButtons{
    margin-bottom: 5px;
}


.mpSNButtons button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border:1px solid #aba9a9;
    display:inline-block;
    color:#777777;

    font-size:13px;
    font-weight:bold;
    padding:5px 5px;

    text-decoration:none;
    text-shadow:1px 1px 5px #ffffff;

    width: 80px;
}.mpSNButtons button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.mpSNButtons button:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */


.mpSNtitle{
    color: #4d4d4d;
    font-size: 14px;
    font-weight: bold;
}

.mpSNcontent{
    color: #4d4d4d;
    font-size: 14px;
}

.mpSNimg{
    height: 40px;
}

@media screen and (max-width: 450px) and (max-width: 767px) {

    #mpSmallbox{
        position: fixed;
        right: 10px;
        top: 5px;
        width: 97%;
    }
    .mpSmallNotification{
        width: 96%;
    }

    .mpSNimg{
        height: 30px;
    }
    .withButtons{
       width: 142px;
    }

    #botRecovery{

        display: block;
        position: relative;
        top: 8px;
        right: -155px;
        width: 130px;
    }

    /* Checkbox Remember */
    .chkRemember {
        width: 130px;    
        margin-top: 20px;
        position: relative;
        left: 0px;
    }

    .chkRemember label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        left: 10px;
        top: 0;
        border-radius: 2px;

    }
}


/* Small Boxes End */




/* CSS Animations */
@charset "UTF-8";


.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

.animated.fast {
    -webkit-animation-duration: 0.4s;
        -moz-animation-duration: 0.4s;
        -ms-animation-duration: 0.4s;
        -o-animation-duration: 0.4s;
        animation-duration: 0.4s;
}

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
    
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
    
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}