/* CSS Document */

/**************************************
**
** Quick Contact Form
**
***************************************/
/*
	<div id="middle-nav" class="scroll position-relative bg-white">
		<div class="container-fluid position-relative">
			<div id="qc" class="border border-secondary position-absolute">
				<!-- quick contact -->
				<a id="qc-toggle" class="text-center text-secondary" data-toggle="collapse" href="#qc-collapse" role="button" aria-expanded="false" aria-controls="qc-collapse">
					Quick Contact
				</a>
				<div id="qc-collapse" class="collapse border-top border-secondary">
					<form method="post" action="/processLead.php">
						<div class="form-group">
							<label for="qc-phone" class="sr-only">Telephone Number</label>
							<input type="tel" class="form-control form-control-sm" name="phone" id="qc-phone" placeholder="Telephone:" autocomplete="tel" maxlength="16" required>
						</div>
						<button type="submit" id="qc-submit" tabindex="0" class="btn btn-primary btn-block btn-sm btn-secondary">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</div>
*/

#qc {
	width: 100%;
	overflow: hidden;
	position: relative;
}
#qc form {
	padding: 15px;
}
#qc-toggle {
	display: block;
	text-align: center;
	font-weight: bold;
	color: #8f9d9e;
	background-color: #ffffff;
	padding: 10px;
    position: relative;
	z-index: 1;
}
@media (min-width:768px) {
	#qc-toggle {
		padding: 4px;
	}
}
#qc-toggle:hover,
#qc-toggle:focus {
	text-decoration: none;
}
#qc-collapse {
	display: block;
    z-index: 0;
    position: relative;
	background-color: #ffffff;
	transition: transform 0.5s;
	transform: translateY(0);
}
#qc-collapse.collapse {
	display: none; /* mobile */
}
#qc .form-group {
	margin-bottom: 0.5rem;
}
.fc { 
	display:none;
	visibility:hidden;
}
@media (min-width:768px) {
	#qc-collapse.collapse {
		transform: translateY(-100%); /* desktop */
	}
	#qc {
		position: absolute;
		top: 0;
		right: 0;
		transition: top 0.5s ease;
		width: 240px;
	}
	#qc-toggle {
    	border: 1px solid #6c757d !important;
	}
	#qc-collapse {
		border: 1px solid #8b9596;
		border-top: 0;
	}
}


/**************************************
**
** Cooper Specific Overrides
** Boostrap Form Elements
**
***************************************/
#qc textarea {
    min-height: 3em;
}
#qc textarea, 
#qc input {
	margin-bottom: 0;
}
#qc input {
    max-width: none;
	width: 100%;
}
#qc .btn-secondary {
	background-color: #5c6063;
	border-color: #5c6063;
}
@media (min-width:768px) {
	/* where is the button positioned? */
	/* note that this has to be positioned based on top
	   in order for the slide up to work correctly
	*/
	#qc {
		top: 100%; /* effect - bottom: 0 */
		margin-top: -45px; /* effect - bottom: -45px */
	}
}
@media (min-width:1218px) {
	#qc {
		/* for desktop left align with rightmost menu item */
		right: .6em; /* #main-nav a padding .6em */
	}
}
/* SAMPLE: MOVING SLIDE CONTENT OUT FROM BENEATH QUICK BOX */
.home .themify_builder_231_row.module_row_0.module_row {
    padding-right: 10%;
}

/**************************************
**
** Boostrap Styled Form Elements (shorter)
** (default remove .cooper from #qc)
**
***************************************/
#qc input {
	border-color: #ced4da;
	border-radius: .2rem;
}
#qc textarea, 
#qc input {
    padding: .25rem .5rem;
}
#qc select {
	padding: .25rem .5rem;
}
/**************************************
**
** Cooper Styled Form Elements (taller)
** (add .cooper to #qc)
**
***************************************/
#qc.cooper button {
	padding-top: 6px;
	padding-bottom: 6px;
}
#qc.cooper textarea, 
#qc.cooper input {
    padding: .6em;
}
#qc.cooper select {
	padding: .6em;
	height: calc(2.25em + .6em);
}
#qc.cooper input,
#qc.cooper select,
#qc.cooper textarea {
	border-color: #d7d5d5;
	border-radius: 0;
}
#qc.cooper .btn-secondary {
    border-radius: 0;
}