/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/


/* reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* start editing from here */

a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}


/* text align right */

.txt-lt {
    text-align: left;
}


/* text align left */

.text-center {
    text-align: center;
}


/* text align center */

.float-rt {
    float: right;
}


/* float right */

.float-lt {
    float: left;
}


/* float left */

.clear {
    clear: both;
}


/* clear float */

.pos-relative {
    position: relative;
}


/* Position Relative */

.pos-absolute {
    position: absolute;
}


/* Position Absolute */

.vertical-base {
    vertical-align: baseline;
}


/* vertical align baseline */

.vertical-top {
    vertical-align: top;
}


/* vertical align top */

nav.vertical ul li {
    display: block;
}


/* vertical menu */

nav.horizontal ul li {
    display: inline-block;
}


/* horizontal menu */

img {
    max-width: 100%;
}


/*end reset*/


/*--start-body--*/

body {
    background: url(../images/bg.jpg)no-repeat;
    position: relative;
    font-family: Arial, sans-serif;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

h1.title-head {
    text-align: center;
    color: #fff;
    font-size: 2.5em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    word-spacing: 5px;
    margin: 1em 0;
    /*padding-top: 0.5em;*/
}

.login-head {
    margin-bottom: 2em;
}

.content {
    -webkit-box-shadow: 0px 15px 19px 0px rgba(48, 55, 102, 0.62);
    -moz-box-shadow: 0px 15px 19px 0px rgba(48, 55, 102, 0.62);
    box-shadow: 0px 15px 19px 0px rgba(48, 55, 102, 0.62);
}


.right-grid-w3ls ::-webkit-input-placeholder {
    color: #fff;
     font-size: 1.3em
}

.right-grid-w3ls :-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
     font-size: 1.3em
}

.right-grid-w3ls ::-moz-placeholder {
    /* Firefox 19+ */
    color: #eb5fff273;
     font-size: 1.3em
}

.right-grid-w3ls :-ms-input-placeholder {
    color: #fff;
     font-size: 1.3em
}

.right-grid-w3ls {
    background: #eb5273;
    background: #b73737;
    background: #3b74ce;
    color: white;
    position: relative;
    font-size: 1.3em
}

.login-w3l-right {
    width: 48.5%;
    float: left;
    background: #f4e0ae;
    /*background:url(../images/3.jpg) no-repeat center;
	background-size:cover;
	min-height:300px;*/
}

.login-w3l-right h2 {
    color: #a32927;
    font-size: 1.3em;
}

.wthree-left-txt {
    padding: 1.2em 2em 2em;
}

.w3ls-icon {
    border-bottom: 1px solid #fff;
    margin-bottom: 0.5em;
}

.w3ls-icon i {
    color: #3b74ce;
    width: 30px;
    font-size: 1.2em;
    height: 30px;
    background: #fff;
    line-height: 1.9;
    border-radius: 50%;
}

.right-grid-w3ls input[type="text"],
.right-grid-w3ls input[type="password"],
.right-grid-w3ls input[type="email"] {
    width: 80%;
    padding: 1em;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1.3em;
    letter-spacing: 1px;
    background: transparent;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -moz-transition: 0.5s all;
}

.img-grid {
    -webkit-box-shadow: 5px 10px 10px 0px rgba(216, 216, 216, 0.78);
    -moz-box-shadow: 5px 10px 10px 0px rgba(216, 216, 216, 0.78);
    box-shadow: 5px 10px 10px 0px rgba(216, 216, 216, 0.78);
    padding: 1em;
    margin-bottom: 0.5em;
}

.img-grid1 {
    padding: 1em 1em 0;
}

.img-grid img,
.img-grid1 img {
    border: 5px outset #efefef;
    /*border-radius: 50%;*/
    padding: 0.5em;
}

.img-grid h4 {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 600;
}

ul.list {
    margin: 1.8em 0;
}

ul.list li span {
    display: block;
    color: #000;
    font-size: 1em;
}

ul.list li {
    text-transform: capitalize;
    font-size: 1.1em;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    background: #3b74ce;
    width: 32%;
    padding: 0.2em 0;
}

.agileits-main-grid h3 {
    color: #000;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5em;
}

.right-grid-w3ls h3 {
    color: #fff;
     
}

.content {
    background: #fff;
}

.agileits-main-grid {
    width: 60%;
    margin: auto;
}
.daohang {
   width: 60%;
   margin: auto;
}
/*-- login --*/

.aaa {
      background: gray;
     color: #483d8b;

    text-transform: uppercase;
    border: 2px solid transparent;
    width: 100%;
    outline: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1em 0;
    margin: 0.2em;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

 


.bbb {
    background: #fff;
    color: #3b74ce;
    /*font-size: 0.9em;*/
    text-transform: uppercase;
    border: 2px solid transparent;
    width: 100%;
    outline: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    -webkit-appearance: none;
    padding: 1em 0;
    margin: 0.2em;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.bbb:hover {
    background: #f44b89;
     color: #fff;
}




.content.text-center a {
    display: block;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 600;
    color: #fff;
    background: #f44b89;
    padding: 0.8em;
}


/*--alert-close--*/

.content {
    position: relative;
}

.alert-close {
    background: #f44b89 url(../images/into.png) no-repeat 12px 11px;
    cursor: pointer;
    position: absolute;
    right: 11px;
    top: -20px;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}


/*--//alert-close--*/


/*--/copy-right--*/

.copy-right {
    text-align: center;
    margin: 38px 0;
}

.copy-right p {
    color: #fff;
    font-size: 0.9em;
    font-weight: 400;
    letter-spacing: 1px;
}

.copy-right p a {
    color: #fff;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

.copy-right p a:hover {
    color: #3b74ce;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}


/* -- Responsive code -- */

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {
    .right-grid-w3ls input[type="text"],
    .right-grid-w3ls input[type="password"],
    .right-grid-w3ls input[type="email"] {
        width: 77%;
    }
}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1080px) {
    .agileits-main-grid {
        width: 70%;
    }
    .daohang {
   width: 70%;
   
}
}

@media screen and (max-width: 1050px) {
    .agileits-main-grid {
        width: 71%;
    }
        .daohang {
   width: 71%;
   
}
}

@media screen and (max-width: 1024px) {
    .right-grid-w3ls input[type="text"], .right-grid-w3ls input[type="password"], .right-grid-w3ls input[type="email"] {
        width: 76%;
    }
}

@media screen and (max-width: 991px) {
    .agileits-main-grid {
        width: 76%;
    }
          .daohang {
   width: 76%;
   
}
}

@media screen and (max-width: 900px) {
    .agileits-main-grid {
        width: 83%;
    }
          .daohang {
   width: 83%;
   
}
}

@media screen and (max-width: 800px) {
    .agileits-main-grid {
        width: 92%;
    }
          .daohang {
   width: 92%;
   
}
}

@media screen and (max-width: 768px) {
    .agileits-main-grid {
        width: 96%;
    }
          .daohang {
   width: 96%;
   
}
}

@media screen and (max-width: 736px) {
    .right-grid-w3ls input[type="text"], .right-grid-w3ls input[type="password"], .right-grid-w3ls input[type="email"] {
        width: 75%;
    }
}

@media screen and (min-width: 668px) {
    .agileits-main-grid {
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
    }
    .content,
    .right-grid-w3ls {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        width: 20%;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 2em;
        -webkit-box-shadow: 0px 8px 19px 0px rgba(48, 55, 102, 0.62);
        -moz-box-shadow: 0px 8px 19px 0px rgba(48, 55, 102, 0.62);
        box-shadow: 0px 8px 19px 0px rgba(48, 55, 102, 0.62);
        margin: 0 0.5em;
    }
}
@media screen and (max-width: 667px) {

    .content {
        padding: 2em;
    }
    .right-grid-w3ls {
        
        padding: 2em;
    }
    .agileits-main-grid {
        width: 85%;
    }
    .daohang {
   width: 85%;
   
}

}
@media screen and (max-width: 568px) {
    h1.title-head {
        margin-bottom: 1em;
    }
    .agileits-main-grid{
        margin:auto;
    } 
      .daohang {
   
        margin: auto;
    }
}

@media screen and (max-width: 480px) {
    h1.title-head {
         margin-bottom: 1em;
        font-size: 1em;
        letter-spacing: 2px;
    }
    .copy-right p {
        padding: 1em;
    }
}

@media screen and (max-width: 414px) {
    .agileits-main-grid {
        width: 90%;
    }
    .daohang {
        width: 90%;
    }
 
    h1.title-head {
         margin-bottom: 1em;
        font-size: 1em;
    }
}

@media screen and (max-width: 375px) {
    h1.title-head {
        font-size: 1em;
        margin-bottom: 1em;
    }
    .right-grid-w3ls input[type="text"], .right-grid-w3ls input[type="password"], .right-grid-w3ls input[type="email"] {
        width: 74%;
    }
    ul.list li {
        font-size: 1em;
    }
    .content.text-center a {
        padding: 0.5em;
    }
    .right-grid-w3ls input[type="button"]{
        padding: 0.8em 0;
    }
    .copy-right {
        margin: 0px 0 20px;
    }
    .agileits-main-grid {
        margin: 2em auto 1em;
    }
}

@media screen and (max-width: 320px) {
    h1.title-head {
        font-size: 1em;
        letter-spacing: 1px;
        margin: 1em 0 0;
    }
    .content {
        padding: 2em 1.2em;
    }
    .right-grid-w3ls input[type="text"], .right-grid-w3ls input[type="password"], .right-grid-w3ls input[type="email"] {
        width: 66%;
    }
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
    font-size: 1.2em
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   font-size: 1.2em
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   font-size: 1.2em
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
   font-size: 1.2em
}
/* -- //Responsive code -- */


.daohanglan {
    font-size: 14px;
    background: #fff;
    line-height: 36px;
    padding-left: 20px;
    letter-spacing:2px;
    /*margin: 0 0.5em;*/
}

.mp3-play {
    display: inline-block;
    background: url(../images/speaker.png) no-repeat;
    height: 18px;
    width: 18px;
    margin-right: 2px;
    text-decoration: none;
    vertical-align: middle;
    background-position: 0 1px;
    margin-left: 10px;
    cursor: pointer;
}