@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: myfont-light;
    src: url(../font/Raleway-Light.woff);
}
@font-face {
    font-family: myfont-regular;
    src: url(../font/Raleway-Regular.woff);
}
@font-face {
    font-family: myfont-bold;
    src: url(../font/Raleway-Bold.woff);
}
@font-face {
    font-family: myfont-title;
    src: url(../font/Acme-Regular.woff);
}

::placeholder {
    color: #c5c5c5;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #c5c5c5;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color: #c5c5c5;
}


* {box-sizing: border-box}

html {
 margin:0;
} 

body
{
	font-family: myfont-regular;
	font-size:15px;
	line-height: 20px;
	color:#fff;
	background: #2175D9 url(../pic/signup-bg.png);
	height: 100vh;
	background-size: cover;
	overflow:hidden !important;
}
p
{
	margin:0;
}
img
{
	vertical-align:middle;
}

.container
{
	width: 1200px;
	margin: 0 auto;
}
.clr
{
	clear: both;
}
.cnt
{
	text-align:center;
}

.row
{
	width: 100%;
}
.col2
{
	width: 60%;
	margin: 0% 20%;
	float: left;
	/*background: #ff0000;*/
}

.bg
{
	background: #2175D9 url(../pic/signup-bg.png);
	width: 100%;
	height: 100vh;
	background-size: cover;
}

.cont_log {
    padding: 0;
    background-color: transparent!important;
}


/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 10px 20px !important;
    margin: 12px 0 !important;
    display: inline-block;
    border-left: 1px solid #ccc !important;
	border-bottom: 1px solid #ccc !important;
    box-sizing: border-box;
	background-color: transparent !important;
	color: #fff !important;
	font-size:14px; 
}

input[placeholder]
{
	color: #fff;
}
input[type=checkbox]
{
	background-color: transparent !important;
}

/* Set a style for all buttons */
button {
    background-color: transparent !important;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: 1px solid #eee !important;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background: #fff !important;
	color: #2175D9;
}

/* Extra styles for the cancel button */
.cancelbtntxt {
    width: auto;
    padding: 10px 18px;
    
}
.cancelbtntxt a {
    width: auto;
	text-decoration: none;
	background-color: transparent !important;
	color: white;
}

.cancelbtntxt a:hover {
    width: auto;
	text-decoration: none;
	background-color: white !important;
	color: #2175D9 !important;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}


span.psw {
    float: right;
    padding-top: 6px;
	color :#fff !important;
	font-size:13px;
}
span.psw:hover {
	text-decoration:underline;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: transparent !important;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 0px solid #fff !important;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}


/* Sign Up
------------- */
/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

button:hover {
    opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #474e5d;
    padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}
 
/* The Close Button (x) */
.close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    color: #f1f1f1;
}

.close:hover,
.close:focus {
    color: #f44336;
    cursor: pointer;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*form width */
.firstname-css{
width: 50%; float: left;	
}
.lastname-css{
width: 50%; float: left;	
}
.password-css{
width: 50%; float: left;	
}

.frmerr{
color:#fca92b; font-weight:bold; font-size:13px;		
}
.term-area{
margin-top:15px; width:100%; float:left;	
}

.success-msg{
text-align: center; margin-top:15px; 	
}


/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}


@media screen and (min-device-width:320px) and (max-device-width:767px)
{
	.container
	{
		width:100%;
	}
	.mob_cont 
	{
		width: 95%;
		margin: 0 2.5%;
	}
	.sh_br
	{
		display:none;
	}
	.sh_mob
	{
		display:block;
	}
	.sh_tab
	{
		display: none;
	}
	
	.col2
	{
		width: 100%;
		margin: 0%;
		float: left;
		/*background: #ff0000;*/
	}
/*form width */
.firstname-css{
width: 100%; float: left;	
}
.lastname-css{
width: 100%; float: left;	
}
.password-css{
width: 100%; float: left;	
}
	
}


@media screen and (min-device-width:768px) and (max-device-width:1024px)
{
	.container
	{
		width:100%;
	}
/*form width */
.firstname-css{
width: 100%; float: left;	
}
.lastname-css{
width: 100%; float: left;	
}	
.password-css{
width: 100%; float: left;	
}	
}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {	
body
{
	font-family: myfont-regular;
	font-size:15px;
	line-height: 20px;
	color:#fff;
	background: #2175D9 url(../pic/signup-bg.png);
	min-height: 100vh;
	background-size: cover;
	overflow:auto !important;
}	
.m-height{
margin-top:40px; 		
}
.cont_log h1{
text-align: center;		
}	
.m-center{
text-align: center;			
}	
	span.psw{
	text-align: center; float: none;		
	}	
	.cancelbtntxt{
	width: 100%;	
	}	
	
}


.failure-msg{
	text-align: center !important; color: #fff !important; margin-top:15px; 
}
.success-msg{
	text-align: center !important; color: #fff !important; margin-top:15px; 
}