/*
*/
/*--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;
}
.text-center {
text-align: center;
}
/*--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 */
.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-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
background: url(../images/SubestacionZULIA8.jpg)no-repeat center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-attachment: fixed;
text-align: center;
}
a,
p {
font-size: 1em;
}
.w3ls-login {
display: -webkit-flex;
display: -webkit-box;
display: -moz-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
h1 {
font-size: 3.2em;
text-transform: uppercase;
font-weight: 500;
color: #ff9800;
text-shadow: 4px 2px 0px #000000;
letter-spacing: 2px;
margin: 0.5em 1vw 0.3em;
text-align: center;
font-family: 'Eczar', serif;
}
.w3ls-login form {
max-width: 550px;
margin: 0 5vw;
background: #fff;
background: url(../images/dott.png)repeat 0px 0px;
background-size: 2px;
-webkit-background-size: 2px;
-moz-background-size: 2px;
-o-background-size: 2px;
-ms-background-size: 2px;
padding: 3.5vw;
box-sizing: border-box;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: center;
}
.w3ls-login label {
font-size: 14px;
font-weight: 600;
color: #fff;
float: left;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.agile-field-txt {
flex-basis: 100%;
-webkit-flex-basis: 100%;
margin: 2.5em 0 0;
}
.w3ls-login input[type="text"],
.w3ls-login input[type="password"] {
width: 100%;
color: #000;
outline: none;
font-size: 16px;
letter-spacing: 0.5px;
/* line-height: 25px; */
padding: 15px;
box-sizing: border-box;
border: none;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.49);
-webkit-appearance: none;
font-family: 'Source Sans Pro', sans-serif;
background: #fff;
}
.check1 {
text-align: left;
}
label.check {
float: none;
}
.agile_label {
text-align: left;
margin: 10px 0 0;
}
.w3ls-login.w3l-sub {
margin-top: 2em;
flex-basis: 100%;
-webkit-flex-basis: 100%;
}
.w3ls-login input[type=submit] {
color: #000000;
width: 100%;
padding: 0.5em 0;
font-size: 1.1em;
letter-spacing: 2px;
cursor: pointer;
border: none;
outline: none;
background: #FF9800;
font-family: 'Source Sans Pro', sans-serif;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
}
.w3ls-login input[type=submit]:hover {
background: #eee;
color: #000;
}
/* Glow effect */
.ribbon-wrapper {
position: relative;
z-index: 998;
}
.ribbon-front h2 {
background-color: #003c8b;
width: 240px;
position: relative;
font: 20px/50px bold Source Sans Pro, sans-serif;
color: #ffffff;
text-transform: capitalize;
}
@-webkit-keyframes flow {
0% {
left: -20px;
opacity: 0;
}
50% {
left: 100px;
opacity: 0.3;
}
100% {
left: 180px;
opacity: 0;
}
}
@keyframes flow {
0% {
left: -20px;
opacity: 0;
}
50% {
left: 100px;
opacity: 0.3;
}
100% {
left: 180px;
opacity: 0;
}
}
.glow {
background: rgb(255, 255, 255);
width: 40px;
height: 100%;
z-index: 999;
position: absolute;
-webkit-animation: flow 1.5s linear infinite;
-moz-animation: flow 1.5s linear infinite;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
/* IE10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
/* IE6-9 */
border-left: 1px solid #fff;
}
/* //glow effect */
p.agile-bot {
margin-top: 1em;
text-transform: capitalize;
word-spacing: 3px;
font-weight: 400;
color: #fff;
}
p.agile-bot a {
font-size: 1em;
color: #ff9800;
letter-spacing: 1px;
}
/*--copyright--*/
.copy-wthree {
margin: 3em 0 2em;
}
.copy-wthree p {
color: #fff;
font-size: 14.5px;
letter-spacing: 1.5px;
line-height: 1.8;
margin: 0 3vw;
}
.copy-wthree p a {
color: #fbfbfb;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
}
.copy-wthree p a:hover {
color: #ff9800;
}
/*--//copyright--*/
/*--responsive--*/
@media(max-width:1920px) {
h1 {
font-size: 3.5vw;
}
}
@media(max-width:1024px) {
h1 {
font-size: 4.5vw;
}
}
@media(max-width:800px) {
h1 {
font-size: 5vw;
}
}
@media(max-width:640px) {
.ribbon-front h2 {
font-size: 18px;
}
}
@media(max-width:480px) {
h1 {
font-size: 2.5em;
}
.w3ls-login form {
padding: 7.5vw;
}
}
@media(max-width:440px) {
h1 {
font-size: 2.3em;
}
.parent {
display: block;
}
}
@media(max-width:375px) {
h1 {
font-size: 1.8em;
}
.w3ls-login form {
padding: 25px 8px;
}
}
/*--//responsive--*/