body {
	background-color: #ecf0f1;
	font-family: 'Open Sans', sans-serif;
}

form {
	display: block;
}

label,
input,
textarea {
	display: block;
	min-height: 30px;
	line-height: 30px;
	border: 0;
	text-align: left;
	cursor: pointer;
	border-radius: 5px;
    width: 400px;
}

// extends
.animate {
	transition: all 0.3s;
}

// main styles
.main {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.main-heading {
	line-height: 150%;
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
}

.btn {
	display: block;
	height: 50px;
	line-height: 50px;
	border: 0;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
    font-size: 2rem;
	@extend .animate;

	span {
		font-weight: 600;
		font-size: 14px;
		text-transform: uppercase;
		@extend .animate;

		.fa {
			margin-left: 8px;
			font-size: 18px;
			vertical-align: middle;
		}
	}

	&:not(.btn-outline) {
		background-color: #fff;
		
		span {
			color: #666;
		}
		
		&:hover {
			background-color: #f7f7f7;
		}
	}
	
	&.btn-outline {
		background-color: transparent;
		border: 1px solid #fff;
		
		span {
			color: #fff;
		}
		
		&:hover {
			background-color: #fff;
			
			span {
				color: #666;
			}
		}
	}
}

.popup-trigger {
	width: 175px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 0 25px 0 rgba(0,0,0,.05);
}

	
	.overlay-content {
		width: 100%;
		max-width: 530px;
		margin: 100px auto 0;
		padding: 0 15px;
		color: #fff;
		position: relative;
		z-index: 10;
		@extend .animate;
		
		.overlay-close {
			display: block;
			font-size: 35px;
			cursor: pointer;
			position: absolute;
			top: 0;
			right: 15px;
			@extend .animate;
			
			&:hover {
				opacity: .8;
			}
		}
		
		.blurb {
			margin-top: 35px;
			line-height: 100%;
			font-weight: 600;
			font-size: 18px;
		}
		
		.blurb-tagline {
			display: block;
			margin-top: 10px;
			line-height: 100%;
			font-size: 14px;
		}
		
		.signup-form {
			margin-top: 35px;
			
			label {
				line-height: 100%;
				margin-bottom: 5px;
				font-size: 14px;
			}
			
			input {
				background-color: transparent;
				width: 100%;
				height: 30px;
				margin-bottom: 20px;
				padding: 0 8px;
				border: 1px solid rgba(254,254,254,.3);
				border-radius: 5px;
				@extend .animate;
				
				&:hover,
				&:focus {
					border-color: #fff;
				}
			}
			
			.submit-btn {
				width: 150px;
			}
		}
	}
	

@media (max-width: 600px) {
	
	.overlay .overlay-content {
		margin: 25px auto;
	}
    
    
}


/* General Mobile Form Styling */
body {
  font-family: sans-serif; /* Choose a readable font */
  line-height: 1.5;       /* Improves readability */
  font-size: 16px;
}

/* Form Container (Optional - for layout control) */
.form-container {
  width: 100%;          /* Take full width of the screen */
  max-width: 600px;   /* Limit width on larger screens, prevents stretching too wide */
  margin: 0 auto;       /* Center the form horizontally */
  padding: 20px;         /* Add some padding around the form content */
  background-color: #f8f8f8; /* Light background for visual separation (optional)*/
  font-size: 20px;
}


/* Form Input Styling - Basic Reset & Common Styles */
input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;          /* Take full width of the form container */
  padding: 10px;       /* Add padding inside the input */
  margin-bottom: 15px;    /* Space between inputs */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 4px;     /* Rounded corners */
  box-sizing: border-box;   /* Include padding and border in the width calculation */
  font-size: 16px;       /* Readable font size */
  color: #333;           /* Dark gray text color */
}

/* Button Styling (Optional - customize as needed) */
button {
  background-color: #4CAF50; /* Green background */
  color: white;              /* White text */
  padding: 12px 20px;         /* Padding around the button text */
  border: none;                /* Remove default border */
  border-radius: 4px;          /* Rounded corners */
  cursor: pointer;             /* Change cursor to a pointer on hover */
  font-size: 16px;
}

button:hover {
  background-color: #3e8e41; /* Darker green on hover */
}


/* Specific Input Styling (Optional - for specific needs) */

/* Example:  Password Field styling */
input[type="password"] {
   box-sizing: border-box; /*Important to make the whole input width work */
}



/*  Label Styling (for accessibility and better appearance) */
label {
  display: block;       /* Each label on a new line*/
  font-weight: bold;    /* Make labels stand out*/
  margin-bottom: 5px;   /* Space between label and input*/
  color:#555;           /*Darker gray color for the text */
}

/* Input Group Styling (optional) - For grouping related inputs together */
.form-group {
  margin-bottom: 20px; /* spacing for better layout */
}


/* Responsive Adjustments (Important!) */
@media (max-width: 768px) {
    /* Adjust styles for smaller screens (tablets, phones) */

    .form-container {
      padding: 10px;  /* Reduce padding on smaller screens */
    }

    input[type="text"],
    input[type="email"],
    textarea,
    select {
        font-size: 14px; /* Slightly reduce font size*/
    }

   label{
      font-size: 14px;
   }


}



/*  Error Handling (Important!) */
.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}