/*
Author: W3layout
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 */

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

/* text align center */

.float-rt {
    float: right;
}

/* float right */

.float-lt {
    float: left;
}

/* float left */

.clearfix {
    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 a:hover {
    text-decoration: none;
}

.clearfix {
    clear: both;
}

/* content */

/*
  Responsive form elements
  Flexbox layout
*/

/*/////////////// GLOBAL STYLES ////////////////////*/

body {
    background: url(bg.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;
	font-family: 'Nunito', sans-serif;

    height: 100%;
    background-color: #ffffff;
    background-image: url("overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("bg.jpg");
    background-image: url("overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("bg.jpg");
    background-image: url("overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("bg.jpg");
    background-image: url("overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("bg.jpg");
    background-repeat: repeat,          no-repeat,          no-repeat;
    background-size: 100px 100px, cover,                cover;
    background-position: top left,      center center,      bottom center;
    background-attachment: fixed,           fixed,              fixed;
}

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

/*/////////////// FONT STYLES ////////////////////*/

.content-w3ls {
    max-width: 500px;
    margin: 5em auto;
}

.content-bottom {
    padding: 3em 4em;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 1px 1px 1px 0px;
    margin: 0 1em;
	position: relative; 
    z-index: 1;
}
.content-bottom:after {
    border: 5px solid #fff;
    content: "";
    display: inline-block;
    left: -30px;
    position: absolute;
    right: 30px;
    top: -30px;
    bottom: 30px;
    z-index: -1;
}
h1.title-agile {
    padding: 0.5em 0 0;
    text-transform: capitalize;
    color: #fff;
    font-size: 3.5em;
    text-shadow: 1px 1px 1px #000;
    letter-spacing: 2px;
}
h2 {
    font-size: 25px;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 1em;
}
.field-group label {
    font-size: 15px;
}

/*/////////////// FORM STYLES ////////////////////*/

form .field-group {
    background: transparent;
    display: flex;
    display: flex;
    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 */
    margin: 0 0 12px 0;
}

form .field-group span {
    flex: 1;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    width: 20%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    color: #252525;
    font-size: 1em;
    background: #fff;
    text-align: center;
    line-height: 48px;
    border-width: 1px 1px 1px 1px;
}


form .field-group .wthree-field {
    flex: 3 50%;
    -webkit-box-flex:3 50%;     /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 3 50%;        /* OLD - Firefox 19- */
    -webkit-flex: 3 50%;          /* Chrome */
    -ms-flex: 3 50%;             /* IE 10 */
}

.wthree-field input[type="submit"] {
    background: #03A9F4;
    border: none;
    color: #fff;
    padding: 12px 15px;
    text-transform: uppercase;
	font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.wthree-field input[type="submit"]:hover {
    background: #222;
    color: #fff;
}

.wthree-field input {
	padding: 13px 15px 13px 0;
    font-size: 16px;
	color:#333;
    letter-spacing: 1px;
    border: none;
    border-width: 1px 1px 1px 1px;
    background: #fff;
    box-sizing: border-box;
	font-family: 'Nunito', sans-serif;
    width: 100%;
    outline: none;
}
.account{
	padding: 20px 0;
}
.account p {
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
}
.account p a{
    color: #03A9F4;
}
.account p a:hover{
    color: #fff;
}

.copyright p {
    color: #fff;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 300;
    padding: 0 2em 2em;
    line-height: 24px;
}
.copyright p a {
    color: #fff;
}

/* -- Responsive code -- */
@media screen and (max-width: 1280px) {
    .content-w3ls {
        margin: 4em auto;
    }
}
@media screen and (max-width: 768px) {
    h1.title-agile {
        font-size: 3em;
    }
}
@media screen and (max-width: 667px) {
    h1.title-agile {
        font-size: 2.8em;
    }
    .content-w3ls {
        margin: 3em auto 1em;
    }
}
@media screen and (max-width: 480px) {
    h1.title-agile {
        font-size: 2.7em;
    }
    form .field-group .wthree-field {
        flex: 3 45%;
    }
	.content-bottom:after {
		border: 4px solid #fff;
		left: -15px;
		right: 15px;
		top: -15px;
		bottom: 15px;
	}
	.content-bottom {
		padding: 2em 3em;
	}
}

@media screen and (max-width: 414px) {
    h1.title-agile {
		font-size: 2.2em;
		letter-spacing: 1px;
    }
    form .field-group .wthree-field {
        flex: 3 41%;
    }
	h2 {
		font-size: 22px;
		letter-spacing: 1px;
	}
}

@media screen and (max-width: 384px) {
    .wthree-field input,.wthree-field input[type="submit"] {
        padding: 10px 10px;
    }
	form .field-group span{
		line-height: 40px;
	}
	.content-bottom {
		padding: 2em 2em;
	}
}

@media screen and (max-width: 375px) {
    form .field-group .wthree-field {
        flex: 3 37%;
    }
    .copyright p {
        padding:0 1em 2em;
        letter-spacing: 0px;
		font-size: 15px;
    }
}
@media screen and (max-width: 320px) {
    h1.title-agile {
        font-size: 1.7em;
    }
    .content-bottom {
        padding: 1.5em;
    }
	.content-bottom:after {
		border: 3px solid #fff;
		left: -10px;
		right: 10px;
		top: -10px;
		bottom: 10px;
	}

}

/* -- //Responsive code -- */