@import url('https://fonts.googleapis.com/css?family=Montserrat');

body, html {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}


@media screen and (max-width: 960px) {
	body, html {
		font-size: 13px;
	}
}

section {
	min-height: 100vh;
	padding-top: 8em;
}

section .title {
	margin-bottom: 0.45em;
	color: #000;
	font-weight: 600;
	text-transform: uppercase;
}

section .info {
	color: #000;
	font-size: 0.85em;
}

section .description {
	font-size: 1.0em;
}

h3 {
	margin-bottom: 0.25em;
	font-weight: 600;
	font-size: 1.2em;
}

@media screen and (max-width: 960px) {
	img {
		display: block;
		margin: 5px;
		padding
	}
}

input[type="text"], input[type="email"] {
	height: 4.0em;
	font-size: 0.95em;
	background-color: #f9f9f9;
}

input[type="text"]:focus, input[type="text"]:active,
input[type="email"]:focus, input[type="email"]:active {
	font-size: 0.95em;
	box-shadow: none;
	border: 1px solid #d3d3d3;
	background-color: #fff;
}

.modal {
	z-index: 2000;
}

.word-link {
	text-decoration: none !important;
	border-bottom: 1px dotted #d3d3d3;
}

.appointment-online {
	position: fixed;
	top: 1.5em;
	left: 40%;
	z-index: 2000;
}

.appointment-online a {
	display: block;
	padding: 0.85em;
	text-align: center;
	font-size: 0.85em;
	width: 10em;
	height: 3.25em;
	outline: none;
}

@media screen and (max-width: 480px) {
	.appointment-online {
		position: absolute;
		top: 80%;
		left: 30%;
		z-index: 2000;
	}

	.appointment-online a {
		display: block;
		padding: 0.65em;
		text-align: center;
		font-size: 1.25em;
		width: 9em;
		height: 3em;
		outline: none;
	}
}

@media screen and (min-width: 480px) and (max-width: 960px) {
	.appointment-online {
		position: absolute;
		top: 78%;
		left: 35%;
		z-index: 2000;
	}

	.appointment-online a {
		display: block;
		padding: 0.75em;
		text-align: center;
		font-size: 1.25em;
		width: 10em;
		height: 3.25em;
		outline: none;
	}
}

@media screen and (min-width: 960px) and (max-width: 1400px) {
	.appointment-online {
		position: absolute;
		top: 75%;
		left: 40%;
		z-index: 2000;
	}

	.appointment-online a {
		display: block;
		padding: 1em;
		text-align: center;
		font-size: 1.25em;
		width: 12em;
		height: 4em;
		outline: none;
	}
}

.textarea {
	font-size: 0.95em;
	background-color: #f9f9f9;
}

.textarea:focus, .textarea:active {
	font-size: 0.95em;
	box-shadow: none;
	border: 1px solid #d3d3d3;
	background-color: #fff;
}

.hero-text {
	position: absolute;
	top: 50%;
	left: 19%;
	color: #fff;
}

.hero-text .description {
	font-size: 1.5em;
}

.hero-text h1 {
	font-size: 4em;
	font-weight: 100 !important;
	text-shadow: 1px 2px 2px #666;
}

@media screen and (max-width: 480px) {
	.hero-text {
		position: absolute;
		top: 50%;
		left: 30%;
		color: #fff;
	}

	.hero-text .description {
		font-size: 1em;
	}

	.hero-text h1 {
		font-size: 2em;
		font-weight: 100 !important;
		text-shadow: 1px 2px 3px #666;
	}
}

@media screen and (min-width: 480px) and (max-width: 960px) {
	.hero-text {
		position: absolute;
		top: 50%;
		left: 25%;
		color: #fff;
	}

	.hero-text .description {
		font-size: 1.2em;
	}

	.hero-text h1 {
		font-size: 3em;
		font-weight: 100 !important;
		text-shadow: 1px 2px 3px #666;
	}
}

.top-buffer {
	margin-top: 0.55em;
}

.modal .modal-body {
	font-size: 0.85em;
}

.carousel-item {
	height: 100vh;
	min-height: 300px;
	background: no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

/*
 * Navigation
*/
.navbar {
	font-size: 1.2em;
	min-height: 5em;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.bg-custom {
	background-color: rgba(0, 0, 0, 0.5);
}

.navbar .classic {
	position: absolute;
	top: 0.5em;
}

/*
 * Services
*/
#service .col-lg-3, #services .col-md-3, 
#service .col-sm-12, #service .col-12 {
	text-align: center;
}

#service .service {
	display: inline-block;
	text-align: center;
	border: 1px solid rgb(40, 167, 69);
	width: 7.0em;
	height: 7.0em;
	line-height: 5.0em;
	border-radius: 50%;
	margin-top: 2em;
	white-space: nowrap;
	transition: background-color 1.0s ease-out;
	background-color: rgb(40, 167, 69);
}

#service .service-text {
	font-size: 2.5em;
	padding-top: 0.3em;
}

#service .service-inner-text {
	font-size: 0.65em;
}

@media screen and (max-width: 960px) {
	#service .service-text {
		font-size: 1.8em;
	}
	
	#service .service-inner-text {
		font-size: 0.50em;
	}
}

#service .service:hover {
	background-color: rgb(33, 136, 56, 0.5);
	cursor: pointer;
}

#service .services {
	text-align: center;
}

#service .service-description {
	font-size: 0.90em;
}

#service .note {
	font-size: 0.75em;
	font-style: italic;
	text-align: left;
}

#service .pricing {
	font-weight: 800;
}

/*
* Team
*/
#team img {
	width: 100%;
	border-radius: 50%;
	cursor: pointer;
}

@media screen and (min-width: 480px) and (max-width: 960px) {
	#team img {
		width: 50%;
		border-radius: 50%;
		cursor: pointer;
	}

	#team .team-member-name {
	display: block; 
	font-size: 1em; 
	text-align: center; 
	margin-top: 0.50em; 
	}

	#team .team-member-description {
		display: block; 
		font-size: 0.85em; 
		text-align: center; 
		margin-top: 0.50em;
	}
}

#team .team-member-name {
	display: block; 
	font-size: 1em; 
	text-align: center; 
	margin-top: 0.50em; 
}

#team .team-member-description {
	display: block; 
	font-size: 0.85em; 
	text-align: center; 
	margin-top: 0.50em;
}

/*
 * Information
*/
#information #informationModal .modal-body {
	max-height: 80vh;
	overflow-y: scroll;
}

#information .col-lg-6, #information .col-md-6, 
#information .col-sm-6, #information .col-12 {
	text-align: center;
}

#information {
	height: 50vh !important;
}

#information .information {
	display: inline-block;
	text-align: center;
	border: 1px solid rgb(255, 255, 0);
	width: 10em;
	height: 10em;
	line-height: 8em;
	border-radius: 50%;
	margin-top: 2.5em;
	white-space: nowrap;
	transition: background-color 1.0s ease-out;
	background-color: rgb(255, 255, 0);
}

#information .information-text {
	font-size: 2.5em;
	padding-top: 0.3em;
}

#information .information-inner-text {
	font-size: 0.65em;
}

@media screen and (max-width: 960px) {
	#information .information-text {
		font-size: 1.8em;
	}
	
	#information .information-inner-text {
		font-size: 0.50em;
	}
}

#information .information:hover {
	background-color: rgb(255, 255, 102, 0.5);
	cursor: pointer;
}

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

#information .inquiry {
	margin-top: 8em;
}

@media screen and (max-width: 480px) {
	#information .inquiry {
		margin-top: 6em;
	} 
}

/*
 * About
*/
#about {
	background-image: url('../images/storefront.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	color: #fff;
}

#about .about-overlay {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 75vh;
	background-color: rgba(146, 146, 146, 0.3);
}

/*
 * Contact
*/
#contact .google-map {
	display: block;
	width: 100%;
	height: 30em;
}

@media screen and (max-width: 960px) {
	#contact .google-map, #contact .contact-input {
		margin: 2em 0;
	}
}

#contact .error-message {
	display: none;
	margin-top: 0.50em;
	font-size: 0.75em;
}

#contact .bus-hours {
	color: #000;
	font-size: 0.55em;
	text-align: left;
}

/*
 * Footer
*/
footer {
	width: 100%;
	min-height: 25vh;
	background-color: rgba(68, 68, 68, 0.8);
	padding-top: 2.5em;
	font-size: 0.75em;
	text-align:center;
	color: #fff;
}

footer .header {
	font-size: 1.25em;
	font-weight: 700;
}

footer .company {
	margin-left: -1.3em;
	display: block;
	list-style-type: none;
}

footer .t-padding {
	padding-left: 0.7em;
}

footer .t-align {
	text-indent: -1em;
}

footer .d-text {
	line-height: 2.5em;
}

footer .social-media {
	font-size: 1.5em;
	text-align: left;
}

footer .list-social-media {
	display: inline;
	list-style-type: none;
	margin-left: -2.5em;
}

footer .social-media a {
	color: #fff;
	border: 3px solid #4267B2;
	border-radius: 25%;
	padding: 8px 16px;
	background-color: #4267B2;
}

@media screen and (max-width: 768px) {
	footer {
		padding-left: 23%;
	}

	footer .m-top {
		margin-top: 1em;
	}
}

/*
 * Top button
*/
.btn-top {
	position: fixed;
	bottom: 0.8em;
	right: 0.8em;
	width: 2em;
	height: 2em;
	display: none;
	background-color: #d3d3d3;
	cursor: pointer;
	opacity: 0.5;
	border: none;
	border-radius: 20%;
	text-align: center;
	line-height: 37px;
	transition: opacity 1s;
}

.btn-top:active, .btn-top:focus {
	outline:none;
}

.btn-top:hover {
	opacity: 1.0;
	outline: none;
}

.btn-top .arrow {
	border: solid #000;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
}

.btn-top .angle-up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}