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

/*
( 00 ad 45 )	Green Colour
( 2a 91 d4 )	Bluish-to-navy
( 0c 63 a9 )	Blue
( f6 93 01 )	Orange
( 34 46 5c )	Navy-Grey 02
( 2d 3e 50 )	Navy-Grey 01
( 85 6e 45 )	Brown
( ec e6 c2 )	Very Light-Brown
( a2 3c 2d )	Mehron-Brown

( 78 af 15 )	Green
( 92 c6 3e )	Light-Green
( e7 37 28 )	Redish
( 37 db b9 )	Greenish
( ff 57 78 )	Pinkish

--*/

/* 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,
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,
copyright,
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,
copyright,
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 */
.txt-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 */

body {
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
}

.main-bg {
    background:
      radial-gradient(1100px 560px at 85% -10%, rgba(1,149,210,.28), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(10,110,189,.22), transparent 55%),
      linear-gradient(160deg,#071529 0%,#0b1f3a 55%,#10305a 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* title */
h1 {
    font-size: 3vw;
    color: #ffffff;
    text-align: center;
    padding: 2.5vw 1vw 1vw;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* //title */

.sub-main_csw {
    margin: 1.5vw 16vw;
    margin: 5vw auto;
    max-width: 1067px;
}

.image-style {
    background: url(../admin_login_ahk.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 371px;
}

/* vertical tabs */
.vertical-tab {
    color: #333333;
    display: block;
    margin: auto;
    position: relative;
    float: left;
    /* width: 70%; */
}

.image-style {
    float: left;
    width: 25%;
}

.vertical-tab input[name="sections"] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}

.vertical-tab .section-w3ls {
    display: block;
}

.vertical-tab .section-w3ls label {
    background: #ffffff;
    border-right: 1px solid #dcdcdc;
    cursor: pointer;
    display: block;
    font-size: 17px;
    padding: 33px 20px;
    position: relative;
    width: 189px;
    z-index: 100;
    color: #111111;
    text-align: center;
}

.vertical-tab .section-w3ls article {
    display: none;
    left: 230px;
    min-width: 570px;
    position: absolute;
    top: 0;
}

/* .vertical-tab .section-w3ls article:after {
    background-color: #ffffff;
    bottom: 0;
    content: "";
    display: block;
    left: -229px;
    position: absolute;
    top: 0;
    width: 220px;
    z-index: 1;
} */

.vertical-tab input[name="sections"]:checked+label {
    background: #0a6ebd;
    border-right: 1px solid #000000;
    color: #ffffff;
}

.vertical-tab input[name="sections"]:checked~article {
    display: block;
}

label.icon-left-w3pvt span {
    display: block;
    font-size: 30px;
    margin-bottom: 7.8px;
}

/* //vertical tabs */

/* form style */
.sub-main_csw form {
    background: #ffffff;  /* actual values #ffff */
    padding: 2em;
}

.legend {
    color: #000000;
    font-size: 24px;
    text-align: center;
    margin-bottom: 1.2em;
    font-weight: 400;
}

p.para-style {
    margin-bottom: .8em;
    font-size: 15px;
    letter-spacing: .5px;
    line-height: 1.8;
}

p.para-style-2 {
    font-size: 15px;
    letter-spacing: .5px;
    line-height: 1.8;
    margin-bottom: 2em;
}

p.para-style-2 a {
    color: #075a9c; 
}

.input {
    margin-bottom: 1em;
    padding: 13px 15px;
    border: 1px solid #eeeeee;
    background: #eeeeee;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.input span {
    font-size: 15px;
    color: #464646;
    margin-right: 10px;
}

.input input {
    color: #000000;
    font-size: 14px;
    letter-spacing: 1px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
}

.submit {
    margin: 2.3em auto 0;
    background: #0a6ebd;
    border: none;
    cursor: pointer;
    font-weight: 600;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    display: block;
    color: #ffffff;
    padding: 14px 30px;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 15px;
    letter-spacing: 2px;
    width: 100%;
}

.submit:hover {
    opacity: .8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

a.bottom-text-w3ls {
    color: #757474;
    font-size: 14px;
    display: inherit;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 3.2em;
}

/* //form style */

/* copyright */
.copyright {
    margin-top: 9vw;
    padding-bottom: 1.5vw;
}

.copyright h2 {
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.8;
}

.copyright h2 a {
    color: #ffffff;
    font-weight: bold;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

.copyright h2 a:hover {
    opacity: .8;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
}

/* //copyright */

/* responsive */
@media(max-width: 1080px) {
    h1 {
        font-size: 4vw;
    }
}

@media(max-width: 1050px) {
    .sub-main_csw {
        max-width: 900px;
    }

    .vertical-tab .section-w3ls article {
        min-width: 445px;
    }

    p.para-style-2 {
        font-size: 14px;
        margin-bottom: 1em;
    }

    p.para-style {
        margin-bottom: .7em;
        font-size: 14px;
    }
}

@media(max-width: 900px) {
    .sub-main_csw {
        max-width: 768px;
    }

    .vertical-tab .section-w3ls article {
        min-width: 400px;
        left: 175px;
    }

    .vertical-tab .section-w3ls label {
        width: 134px;
        font-size: 15px;
        padding: 34px 20px;
    }

    h1 {
        font-size: 5vw;
        padding: 4.5vw 1vw 1vw;
    }
}

@media(max-width: 768px) {
    .sub-main_csw {
        max-width: 575px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .image-style {
        float: none;
        width: 100%;
        min-height: 300px;
        order: 2;
    }

    .vertical-tab {
        float: none;
        width: 100%;
    }
}

@media(max-width: 667px) {
    h1 {
        font-size: 6vw;
    }
}

@media(max-width: 640px) {
    .copyright h2 {
        font-size: 14px;
    }
}

@media(max-width: 600px) {
    .sub-main_csw {
        max-width: 500px;
    }

    .vertical-tab .section-w3ls article {
        min-width: 365px;
        left: 135px;
    }

    .vertical-tab .section-w3ls label {
        width: 114px;
        font-size: 15px;
        padding: 31px 10px;
    }

    h1 {
        font-size: 7vw;
    }
}

@media(max-width: 480px) {
    .vertical-tab .section-w3ls article {
        min-width: 291px;
        left: 109px;
    }

    .vertical-tab .section-w3ls label {
        width: 89px;
        font-size: 14px;
        padding: 26.8px 10px;
    }

    .sub-main_csw {
        max-width: 400px;
    }

    .image-style {
        min-height: 220px;
    }

    .sub-main_csw form {
        padding: 1.5em;
    }

    .submit {
        font-size: 14px;
    }

    .input input {
        font-size: 13px;
    }

    p.para-style {
        margin-bottom: .4em;
        font-size: 13px;
    }

    p.para-style-2 {
        font-size: 13px;
    }

    .input {
        padding: 12px 12px;
    }

    a.bottom-text-w3ls {
        margin-top: 3em;
    }

    .last-btn {
        margin: 1em auto 0;
    }

    .copyright h2 {
        font-size: 12px;
    }
}

@media(max-width: 414px) {
    .sub-main_csw {
        max-width: 320px;
    }

    .vertical-tab .section-w3ls article {
        position: static;
    }

    .vertical-tab .section-w3ls label {
        width: 100%;
        font-size: 14px;
        padding: 20px 0;
        border-right: none;
        border-bottom: 1px solid #dcdcdc;
        border-top: 1px solid #dcdcdc;
    }

    .vertical-tab input[name="sections"]:checked+label {
        border-right: none;
        border-bottom: 1px solid #000000;
        border-top: none;
    }

    .image-style {
        min-height: 190px;
    }

    h1 {
        font-size: 1.8em;
        padding: 6.5vw 1vw 3vw;
    }

    .copyright h2 {
        font-size: 13px;
    }

    .last-btn {
        margin: 1.5em auto 0;
    }

    p.para-style {
        margin-bottom: 1em;
    }

    p.para-style-2 {
        margin-bottom: 2em;
    }

}

@media(max-width: 320px) {
    .sub-main_csw {
        max-width: 270px;
    }

    .vertical-tab .section-w3ls article {
        min-width: 270px;
    }
}

/* //responsive */

/*==============================================================
  PERMEATEK LOGIN THEME
==============================================================*/
.pt-brand{text-align:center;padding:3em 1em .2em}
.pt-brand span{display:inline-block;background:#fff;border-radius:10px;padding:12px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pt-brand img{height:44px;width:auto;display:block}
h1{font-size:13px;color:rgba(255,255,255,.75);font-weight:600;letter-spacing:6px;padding:1.2em 1vw 1.4em}

h1{padding-top:1.2em}
.sub-main_csw{margin:1.5em auto 0;max-width:520px;min-height:330px}
.vertical-tab{float:none;width:100%}
.vertical-tab .section-w3ls article{position:static;left:auto;min-width:0;width:100%}
.sub-main_csw form{border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.input{border-radius:4px}
.input:focus-within{border-color:#0a6ebd;background:#fff}
.input span{color:#075a9c}
.submit{border-radius:4px}
.submit:hover{background:#075a9c;opacity:1}
.copyright{margin-top:48px}