a {
    text-decoration: none;
}

/*--end reset--*/
body a:hover {
    text-decoration: none;
}

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

body {
	font-family: 'Mukta', sans-serif;
    background-image: linear-gradient(0deg, #3366cc, #003366);
    height:100vh;
}

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

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

.content-w3ls {
    max-width: 500px;
    margin: 6em auto;
}
.links{
    margin-top: -30px;
    transform:translate(0px , 70px);
}
ul.links-unordered-list li.active a {
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 20px;
    color: #fff;
}

.content-bottom {
    padding: 0em 4em;
    margin-top: -20px;
	position: relative; 
    z-index: 1;
}
.logo{
    /*transform:translate(0px , 40px);*/
    margin-top:70px;
    background-color:white;
    width:160px;
    height:160px;
    border:4px solid black;
   border-radius: 200px;
   padding-top:5px;
}

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

form .field-group {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.15);
    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-bottom: 20px;
    padding: 2px 10px 2px 0;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
}

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: #fff;
    background: transparent;
    line-height: 40px;
    text-align: right;
}

ul.list-login {
    margin-top: 1.5em;
    margin-bottom: 1em;
}

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

.wthree-field button.btn {
    background: #fc636b;
    border: none;
    color: #fff;
    padding: 11px 15px;
    text-transform: uppercase;
	font-family: 'Mukta', sans-serif;
    font-size: 16px;
	width:100%;
	margin-top:10px;
    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;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
}


ul.links-unordered-list li {
    display: inline-block;
    margin-right: 10px;
}
ul.links-unordered-list li a {
    font-size: 16px;
    color: #ccc;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 0 5px;
    text-transform: capitalize;
}
.wthree-field input {
    padding: 10px 0 10px 15px;
    font-size: 17px;
    font-weight: 300;
	color:#ddd;
    letter-spacing: 1px;
    border: none;
    background: transparent;
    box-sizing: border-box;
	font-family: 'Mukta', sans-serif;
    width: 100%;
    outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
::-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
::-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}


/* //switch */
.copyright p {

    margin-left: 3%;
    color: #fff;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 300;
    word-spacing: 1px;
    text-transform: capitalize;
}



/* -- Responsive code -- */
@media screen and (max-width: 1280px) {
    .content-w3ls {
        margin: 4em auto;
    }
}
@media screen and (max-width: 1080px) {
    .bottom-grid,.bottom-grid1 {
		margin: 0em 5em;
	}
	.icon span.fa {
		font-size: 50px;
	}
}
@media screen and (max-width: 900px) {
   .bottom-grid, .bottom-grid1 {
		margin: 0em 2em;
	}
}
@media screen and (max-width: 800px) {
	.bottom-grid1 {
		flex-direction: column;
		text-align: center;
	}
	.copyright {
		margin-top: 1em;
	}
}
@media screen and (max-width: 768px) {
	.logo h1 a {
		font-size: 22px;
	}
}
@media screen and (max-width: 668px) {
    
    .content-w3ls {
        margin: 3em auto;
    }
	ul.links-unordered-list li a,.copyright p {
		font-size: 15px;
	}
	ul.links-unordered-list li {
		margin-right: 0px;
	}
	ul.list-login {
		margin-bottom: .5em;
	}
	.icon {
		margin-bottom: 2em;
	}
	.icon span.fa {
		font-size: 40px;
	}
	ul.list-login-bottom li:nth-child(1) a, ul.list-login-bottom li:nth-child(2) a {
		font-size: 14px;
	}
}
@media screen and (max-width: 600px) {
    .copyright p {
        color: #fff;
        letter-spacing: 1px;
    }
}
@media screen and (max-width: 568px) {
    .content-bottom {
        padding: 0em 2.5em;
    }
	.content-w3ls {
		margin: 3em auto 2em;
		max-width: 450px;
	}
}

@media screen and (max-width: 480px) {
	  .logo h1 a {
		font-size: 20px;
	}
}

@media screen and (max-width: 415px) {
    .bottom-grid, .bottom-grid1 {
		flex-direction: column;
		text-align: center;
	}
	.logo {
		margin-bottom: 10px;
	}
	form .field-group {
		padding: 0px 10px 0px 0;
	}
	.wthree-field button.btn {
		font-size: 15px;
	}
	ul.list-login-bottom li:nth-child(1) a, ul.list-login-bottom li:nth-child(2) a {
		font-size: 13px;
	}
	.bottom-grid, .bottom-grid1 {
		margin: 0em 1em;
	}
}

@media screen and (max-width: 384px) {
    .content-bottom {
		padding: 0em 1em;
	}
	.layer {
		padding: 1em 0;
	}
	label.switch {
		padding-left: 2.5em;
	}
}

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

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