@charset "UTF-8";

:root { 
	--text-light: #6c757d;
	--green: #158364;
	--shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

@font-face {
	font-family: 'Grotesk';
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/HKGroteskPro-Medium.woff2");
}

@font-face {
	font-family: 'Grotesk';
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/HKGroteskPro-Regular.woff2");
}

body { overflow-x: hidden; }

body {
	position: relative;
	font-family: 'Grotesk', serif;
	font-weight: 400;
	background-color: #fff;
	color: #222; }
	
a, a:hover, a:visited, a:active, a:focus, input, input:focus, input:active, textarea, textarea:focus, textarea:active, button:focus, button:active { 
	outline: none;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none; }

.bg-transparent { background-color: transparent; }
.bg-green { background-color: var(--green); }
.text-green { color: var(--green) !important; }
.form-control:focus, .btn:focus { box-shadow: none; }
a:not(.close):not(.navbar-brand) { transition: all .25s ease; }

p, ul { letter-spacing: .05rem; }
ul li { margin-bottom: .5rem; }
.underline { text-decoration: underline; }
.underline:hover { text-decoration: none !important; }

.and::after { 
	content: '&';
	font-size: 80%; }
	
/* Buttons */
.btn-primary { 
	transition: all .2s ease;
	padding: .5625rem 1rem !important;
	color: #fff !important; 
	background-color: var(--green) !important; 
	border: solid 1px var(--green) !important;
	border-radius: .375rem; }

.btn-primary:hover { 
	box-shadow: 0 .25rem .5rem rgba(0,0,0,.15);
	color: #fff !important; 
	background-color: var(--green) !important; 
	border: solid 1px var(--green) !important; }
	
.btn-primary-light { 
	transition: all .2s ease;
	padding: .5625rem 1rem;!important;
	color: var(--green);
	background-color: #fff; 
	border: solid 1px var(--green);
	border-radius: .375rem; }

.btn-primary-light:hover { 
	box-shadow: 0 .25rem .5rem rgba(0,0,0,.15);
	color: #222;
	border: solid 1px #222; }
	
.btn {
	transition: transform .15s ease;
	transform: translateY(0); }
	
.btn:hover { transform: translateY(-4px); }

li { list-style-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-check2-circle mr-1' fill='%23158364' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>"); }


/* Divider */
.divider-wrapper { position: relative; }

.divider-inner {
	overflow: hidden;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto; }

.divider-inner svg {
	transform: scale(2);
	transform-origin: top center; }
	
/* Z-Index */
.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }


/* Flex Center */
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center; }


/* ********************************************************** Content ********************************************************** */


/* Header & Navigation */
header { z-index: 1024; }

nav:not(.footer-links) {
	display: flex;
	justify-content: space-between;
	align-items: center; }

nav ul {
	display: flex;
	align-items: center;
	margin-bottom: 0; }

nav ul li { 
	margin-bottom: 0;
	list-style: none; }
	
.navbar-brand { 
	padding-top: 1rem !important;
	display: flex;
    align-items: center; }

img.brand { 
	width: 57px;
	height: 100px;
	margin-right: 1rem; }

.navbar-brand { 
	font-size: 19px;
	text-transform: uppercase;
	font-family: "Grotesk", serif;
	color: var(--text-light);
	font-weight: 600;
	padding: .5rem;
	transition: all .15s ease; }

.navbar-brand:hover { color: var(--green); }
nav a { transition: all .2s ease; }
nav .bi-arrow-right-short { margin-left: .25rem; }

/*  SVG BG */
.bg-wrapper1 {
	z-index: -1;
	width: 35%;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -5rem; }

.bg-wrapper2 {
	z-index: -1;
	width: 25%;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 12rem;
	margin-left: -5rem; }

.bg-wrapper1-sm { width: 25%; }
.bg-wrapper2-sm { width: 15%; }

.bg-wrapper3 {
	max-width: 7rem;
	width: 100%;
	position: absolute;
	top: 15rem;
	right: 5rem;
	z-index: -1; }
	
.bg-wrapper4 {
	max-width: 7rem;
	width: 100%;
	position: absolute;
	top: 30rem;
	left: 1rem;
	z-index: -1; }


/* Landing */
#landing.video h1, #landing.faq h1, #landing.contact h1 { text-transform: none !important; }

#landing { 
	display: flex;
	align-items: center;
	background-color: transparent;
	margin-top: -2rem;
	padding: 0;
	width: 100%;
	height: calc(95vh - 120px); }

#landing .row { align-items: center; }
	
#landing h1 {
	width: 80%;
	margin-bottom: 0;
	text-transform: uppercase;
	color: var(--green); }
	
#landing h2 { margin: 1rem 0; }

#landing p { 
	font-size: 1.25rem;
	color: var(--text-light); }

#landing .typed {
	text-transform: uppercase;
	font-weight: bold;
	color: var(--green); }

	
/* Hero */
#hero { 
	padding: 0;
	display: flex;
	align-items: center; }
	
#hero p { margin-top: 1rem; }

.maine-street {
	border-radius: .5rem;
	max-width: 100%;
	height: auto;
	box-shadow: var(--shadow); }

.jake-inner figcaption {
	color: #ccc;
	font-size: 14px;
	margin-top: .25rem;
	margin-right: .25rem;
	float: right;
	font-family: var(--bs-font-monospace); }

.jake {
	border-radius: 50%;
	box-shadow: var(--shadow);
	max-width: 100%;
	width: 100px;
	height: auto; }


#jake { margin-bottom: 4rem; }
#jake p { font-size: 18px; }

.imdb { 
	display: flex;
	
 }

#maine-web-design { 
	padding-bottom: 4rem;
	background-color: #222; }

#maine-web-design h3 { 
	margin-bottom: 1rem;
	color: #ffffcc; }

.jake-inner {
	margin-top: 4rem;
	margin-bottom: 4rem;
	display: flex;
	justify-content: space-between;
	padding: 2rem;
	width: 75%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	background-color: #222;
	color: #eee; }

#maine-web-design a {
	font-size: inherit;
	font-weight: bold;
	font-family: inherit;
	text-transform: inherit;
	margin: inherit;
	padding: inherit;
	text-decoration: underline;
	color: #ffffcc !important; }
	
.profile { 
	margin-left: 1.5rem;
	width: 135px;
	height: 135px;
	border-radius: 50%; }
	
.jake-inner p { font-size: 1.25rem; }
.jake-inner p:nth-child(odd) { color: #aaa; }
.jake-inner p:nth-child(even) { color: #ddd; }

	
/* ABOUT & SERVICES  */
#about-services { 
	padding: 4rem 2rem;
	background-color: var(--green); }

#about-services .card {
	margin-top: -10rem;
	display: flex;
	justify-content: center;
	box-shadow: 0 1.5rem 4rem rgba(22,28,45,.1);
	background-color: #fff !important;
	border-radius: .5rem; }

#about-services .card-body { padding: 3rem; }	

#about .card {
	border-left: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0; }

#about h1 { color: #222; }
#about p { font-size: 1rem }

#services .card { 
	border-right: none;
	z-index: 2; }

#about-services h2 { 
	margin-bottom: 1rem;
	font-weight: 600;
	color: var(--green); }


/* Focus */
#focus {
	display: flex;
	align-items: center;
	background-color: #fff;
	margin-top: 100px;
	margin-bottom: 100px; }
	
#focus h1 span { color: var(--green); }
#focus p { font-size: 1.25rem; }
	
#focus .counter-wrapper {
	display: flex;
	align-items: center;
	margin-top: 1.5rem; }


/* Quotes */
#quotes { 
	margin-top: 4rem;
    margin-bottom: 4rem; }

#quotes h2 { color: var(--green) }
#quotes p { margin: 0 auto; }
	
.shape {
	pointer-events: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0; }
	
.shape svg {
	width: auto;
	height: 100%;
	transform-origin: center left;
	transform: scale(2); }
	
cite {
	font-size: 80%;
	display: block;
	font-style: italic; }

#slideshow1 {
	background-image: url(../images/index/quotes/quote1-pic.jpg);
	background-size: cover; }
	
#slideshow2 {
	background-image: url(../images/index/quotes/quote2-pic.jpg);
	background-size: cover;
	background-position: bottom; }
	
#slideshow3 {
	background-image: url(../images/index/quotes/quote3-pic.jpg);
	background-size: cover;
	background-position: bottom; }
	
#slideshow1, #slideshow2, #slideshow3 { 
	position: relative;
	height: 315px; }

.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin: auto; }

.mySlides { display: none; }
.mySlides .card-body { position: relative; }

.mySlides .card-text {
	margin-top: 1.5rem;
	padding-right: 1.5rem; }

.mySlides img {
	max-width: 100%;
	height: auto;
	margin-top: 2rem; }

.prev, .next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(1.6em + 1.625rem + 2px);
	height: calc(1.6em + 1.625rem + 2px);
	background-color: var(--green);
	box-shadow: 0 0.5rem 1.5rem rgba(22,28,45,.05);
	color: #fff !important;
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin-top: -22px;;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 50%;
	user-select: none; }

.prev { left: -1.5rem; }
.next { right: -1.5rem; }

.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease; }

.myActive, .dot:hover { background-color: #717171; }

.myFade {
	animation-name: fade;
	animation-duration: 1s; }

.stars {
	padding: 1rem 0;
	background-color: #fff;
	overflow: hidden;
	text-align: center;
	position: absolute;
	background-image: url(../images/index/stars.svg);
	background-repeat: no-repeat;
	top: -.6rem;
	left: 0;
	right: 0;
	width: 150px;
	height: 25px;
	margin-left: 1rem;
	z-index: 2; }

@keyframes fade {
	from { opacity: .4; } 
	to { opacity: 1; }
}

	
/* Fair Pricing */
#fair-pricing { 
	background-color: var(--green);
	padding-top: 4rem;
	padding-bottom: 4rem;
    color: #fff; }
	
#fair-pricing h1 { color: #ffffcc; }


#fair-pricing p {
	width: 75%;
	margin: 0 auto;
	color: #fff; }
	
	
/* FAQ Accordion */
#faq { padding: 6rem 0; }
.accordion-item, .accordion-button { background-color: transparent; }

.accordion-button.collapsed { 
	font-weight: 600;
	color: #000; }

.accordion-body { 
	color: #222;
	padding-left: 2rem;
	padding-right: 2rem; }

.accordion-button:focus { 
	border-color: transparent;
	box-shadow: none; }
	
.accordion-button:not(.collapsed) {
	font-weight: 600;
	color: #fff;
	background-color: var(--green); }
	
.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") }


/* Footer */
footer {
	font-size: 1.25rem; 
	text-align: center;
	background-color: #222;
	color: #eee;
	padding-top: 4rem;
	padding-bottom: 4rem; }
	
.footer-links a::before { 
	margin-right: .5rem;
	content: "|"; }
	
.footer-links a:first-child::before { content: ""; }

footer small { display: block; }
footer a:hover { color: #fff; }
.footer-links { margin-top: 1rem; }
footer a { color: #ffffcc; }
	
	
/* Portfolio */
#portfolio { 
	background-color: var(--green);
	padding-top: 4rem;
	padding-bottom: 7rem; }
	
#portfolio .col-12 { margin-top: 3rem; }
#landing.portfolio h2 { color: var(--text-light); }
	
#portfolio .card-title { 
	margin-bottom: .5rem;
	color: var(--green); }

#portfolio .card {
	height: 100%;
	background-color: #eee;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    transition: all .15s ease;
    transform: translateY(0) }

#portfolio .card:hover { transform: translateY(-5px) }

#portfolio .card-text { 
	color: #222;
	font-size: 15px; }

li.html { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-code-slash' viewBox='0 0 16 16'><path d='M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z'/></svg>"); }

li.seo { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>"); }

li.javascript { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-code' viewBox='0 0 16 16'><path d='M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z'/></svg>"); }

li.css { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-border-style' viewBox='0 0 16 16'><path d='M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-1zm0 4a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-1zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm8 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-4 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm8 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-4-4a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-1z'/></svg>"); }

li.google { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-google' viewBox='0 0 16 16'><path d='M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z'/></svg>"); }

li.shopping { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-cart3' viewBox='0 0 16 16'><path d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/></svg>"); }

.portfolio-section .col-md-6 { padding: 6rem 4rem; }

a.portfolio img { 
	transition: all .15s ease;
	transform: translateY(0); }

a.portfolio:hover img {	transform: translateY(-5px); }

.portfolio-section h2 {
	opacity: .7;
	margin-top: 2rem; }
	
.portfolio-section h3 {
	font-size: 1.25rem;
	margin: .5rem 0 1rem 0; }
	
.portfolio-section h4 {
	font-size: 1.25rem;
	margin-bottom: 1rem; }


/* Portfolio & Video */
.portfolio-section iframe {
	border-radius: .35rem;
    box-shadow: var(--shadow); }

.bg-eee { 
	background-color: #eee;
	color: #222; }
	
.bg-eee ul { color: #444; }
.portfolio-section .bg-green h1, .portfolio-section .bg-green h2, .portfolio-section .bg-green h3 { color: #fff !important; }
.portfolio-section .bg-green p, .bg-green ul { color: #fff !important; }
	
.portfolio-section.bg-eee h2, .portfolio-section .bg-eee h2, .portfolio-section .bg-eee h3 { color: #000; }
.portfolio-section .bg-eee p, .portfolio-section .bg-eee ul { color: #333; }

.portfolio-section h1 { text-align: left; }
	
.portfolio-section .bg-green { background-color: var(--green); }
.portfolio-section h2 { margin: .5rem 0 0 0; }

.portfolio-section h3:first-of-type:not(.skillset) { 
	opacity: .7;
	font-size: 1rem;
	margin-bottom: 2rem; }
	
.portfolio-section p { font-size: 1.15rem; }
.portfolio-section ul { font-size: 18px; }


li.director { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='16' viewBox='0 0 24 24' width='16' fill='currentColor'><g><rect fill='none' height='16' width='16' x='0'/></g><g><g><g><path d='M4,18v3h3v-3h10v3h3v-6H4V18z M19,10h3v3h-3V10z M2,10h3v3H2V10z M17,13H7V5c0-1.1,0.9-2,2-2h6c1.1,0,2,0.9,2,2V13z'/></g></g></g></svg>"); }

li.producer { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='16' viewBox='0 0 24 24' width='16' fill='currentColor'><path d='M0 0h24v24H0z' fill='none'/><path d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/></svg>"); }


li.editing { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-film' viewBox='0 0 16 16'><path d='M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z'/></svg>"); }

li.video { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-camera-reels' viewBox='0 0 16 16'><path d='M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM1 3a2 2 0 1 0 4 0 2 2 0 0 0-4 0z'/><path d='M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7zm6 8.73V7.27l-3.5 1.555v4.35l3.5 1.556zM1 8v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z'/><path d='M9 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM7 3a2 2 0 1 1 4 0 2 2 0 0 1-4 0z'/></svg>"); }

li.audio { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-mic' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M10 8V3a2 2 0 1 0-4 0v5a2 2 0 1 0 4 0zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z'/></svg>"); }

li.graphics { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-circle-square' viewBox='0 0 16 16'><path d='M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6z'/><path d='M12.93 5h1.57a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1.57a6.953 6.953 0 0 1-1-.22v1.79A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 4h-1.79c.097.324.17.658.22 1z'/></svg>"); }

li.cc { list-style-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-badge-cc' viewBox='0 0 16 16'><path d='M3.708 7.755c0-1.111.488-1.753 1.319-1.753.681 0 1.138.47 1.186 1.107H7.36V7c-.052-1.186-1.024-2-2.342-2C3.414 5 2.5 6.05 2.5 7.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114H6.213c-.048.615-.496 1.05-1.186 1.05-.84 0-1.319-.62-1.319-1.727v-.743zm6.14 0c0-1.111.488-1.753 1.318-1.753.682 0 1.139.47 1.187 1.107H13.5V7c-.053-1.186-1.024-2-2.342-2C9.554 5 8.64 6.05 8.64 7.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.497 1.05-1.187 1.05-.839 0-1.318-.62-1.318-1.727v-.743z'/><path d='M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z'/></svg>"); }


.link-white { 
	color: #eee;
	text-decoration: underline; }
	
.link-white:focus, .link-white:hover { 
	color: #fff;
	text-decoration: none; }

.telly {
	width: 100px;
	height: 103px;
	float: left;
	margin-right: 1rem; }
	
.vid-port-headline {
	text-transform: uppercase;
	font-size: calc(1.375rem + 1.5vw)!important;
	margin: 1rem 0 0 0 !important; }

.vid-port-title {
	color: #ffffcc;
	margin-bottom: .25rem !important;
    font-size: calc(1rem + .6vw) !important; }
	
.vid-port-h4 { 
	font-size: 14px;
	color: #fff; }

.vid-port-img {
	max-width: 100%;
	height: auto;
	border-radius: .5rem; }
	
.vid-port-link .vid-port-img {
	transition: box-shadow .15s ease;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
	
.vid-port-link:hover .vid-port-img { box-shadow: 0 .5rem 1rem rgba(0,0,0,.5); }
	
	
/* Contact */
#contact { color: #fff; }
	
#contact h2 {
	color: var(--green) !important;
	text-align: left; }

#landing.contact {
	margin-top: 0;
	margin-bottom: 2.5rem;
	display: block;
	height: auto; }
	
#landing.contact p { display: flex; }
#landing.contact h2 { color: #ffffcc; }
#contact p { color: #fff; }
form { width: 100%; }

.bi-exclamation-triangle-fill { 
	margin-top: -4px;
    margin-right: .35rem; }


/* Contact Form */
.template-outside { margin: 1rem; }
.quform-input input, .quform-elements .quform-huge.quform-element textarea { width: 100%; }
.quform-group-alignment-left > .quform-group-elements > .quform-group-row > .quform-element:not(.w-100) { width: 49.6%; }
.quform-theme-light-light .quform-element > .quform-spacer > label { font-weight: normal; }


/* ********************************************************** RESPONSIVE ********************************************************** */

@media (max-width: 574px) { 
	.card-deck .card { margin-bottom: 2rem; }
	quotes img { display: none; }
	.form-wrapper { display: block; }
}

@media (min-width: 575px) and (max-width: 767px) {
	#landing { height: auto !important; }
	.jake-inner { padding: 2rem !important; }
}

@media (min-width: 1200px) { 
	.container { max-width: 1140px; }
	
	.landing-inner { 
		width: 50%; 
		margin-left: 5rem; }
}

@media (min-width: 768px) and (max-width: 991px) { 
	/* Navigation */
	.navbar-brand { font-size: 17px; }
	.btn-primary, .btn-primary-light { padding: .5625rem !important }
	nav:not(.footer-links) svg { display: none; }	

	/* Landing */
	#landing { 
		height: auto;
	    padding-bottom: 4rem; }
		
	#landing h1 { margin-top: 4rem; }
	#maine-web-design { width: 100%; }

	.jake-inner {
		padding: 1rem;
		width: 100%; }

	/* About & Services */
	ul.check { padding-left: 1.3em; }
	#about-services .card-body { padding: 1rem; }
	
	/* Focus */
	#focus img { margin-top: 1rem; }
	
	/* Quotes */
	#quotes .card-body { height: 300px; }
	#quotes cite { margin-top: 1rem; }
	
	#slides { 
		margin-top: 12rem;
		margin-right: -5rem;
		max-width: 400px; }
	
	#quotes p, #quotes cite { 	
		padding-left: 2rem;
		padding-right: 2rem !important; }
	
	/* Video */
	.svg-bg-grey, .svg-bg-green {
		background-size: 40%;
		background-position: 12.9% 10%; }
	
	.portfolio-section p { font-size: 16px; }
	.portfolio-section .col-md-6 { padding: 4rem 2rem; }
	
	/* Contact */
	#landing.contact { margin-top: 0; }
	#landing.contact .logo { display: none; }
	.template-outside { margin: 1rem; }
	.quform-input input, .quform-elements .quform-huge.quform-element textarea { width: 100%; }
	.quform-group-alignment-left > .quform-group-elements > .quform-group-row > .quform-element:not(.w-100) { width: 49.6%; }
	.quform-theme-light-light .quform-element > .quform-spacer > label { font-weight: normal; }
	
	#contact .logo { 
		margin-right: auto;
		width: 100px; }
}

@media (max-width: 991px) {
	#slideshow1, #slideshow2, #slideshow3 { display: none; }
	#index-quotes .card-body { padding: 1rem 3rem; }
}

@media (max-width: 767px) { 
	.divider-inner svg { margin-top: 4px; }
	.order1 { order: 1; }
	.order2 { order: 2; }
	p, ul { font-size: 18px !important; }
	.get-started, #quotes .card-text { font-size: 16px !important; }
	
	/* PAGE SVG */
	.bg-wrapper1 {
		margin-top: 2rem;
		margin-right: 0; }
		
	.bg-wrapper2 { 
		margin-top: 12rem;
		margin-left: 0; }
		
	.bg-wrapper3, .bg-wrapper4 { display: none; }

	
	/* Navigation */
	nav {
		align-items: normal; 
		flex-direction: column; }
		
	nav ul { 
		margin-bottom: 1rem;
		justify-content: flex-start;
	    padding-left: 0; }
	
	.navbar-brand { margin-right: 0; }
	.navbar-brand span { font-size: 22px; }
		
	nav ul li { padding: 0 .3rem; }
	nav .btn-primary, nav .btn-primary-light { padding: .5rem .4rem !important; }
	nav svg { display: none; }
		
	/* landing */
	#landing { 
		margin-top: 0;
		flex-direction: column;
		margin-bottom: 6.5rem;
		height: calc(75vh - 120px) }

	#landing h1 { 
		width: 100%;
		margin-top: 1rem;
		margin-bottom: 1rem; }
		
	#hero { 
		padding: 1rem !important;
		margin-top: 0;
		margin-bottom: 3rem; }
		
	#landing img { 
		margin-top: -.5rem;
		width: 75%; }
		
	.get-started { margin-top: 0 !important; }
	
	/* Jake */
	.jake-inner { 
		flex-direction: column;
		padding: 0;
		width: 100%;
		padding: 1rem;
		margin-top: 1rem; }
	
	#maine-web-design .profile { 
		float: none;
		margin-left: 0;
		margin-top: 1rem; }
	
	/* Focus */
	#focus { margin-top: -4px; }
	
	#focus .col-12 { 
		margin-top: 4rem;
		padding-left: 2rem;
		padding-right: 2rem; }
	
	/* About & Services */
	#about-services .card-body { padding: 1.25rem; }
	
	#services { 
		border-left: none;
		border-top: none; }
		
	#about-services .container { padding: 0; }
	#about-services h2 { font-size: 1.5rem; }
	#about-services h3 { font-size: 1.25rem; }
	#services { padding: 0 !important; }
	#about { padding: 0 !important; }
	
	#about .card { 
		border: 1px solid rgba(0,0,0,.125);
		margin-top: 1rem;
		border-top-left-radius: .5rem;
		border-bottom-left-radius: .5rem; }
	
	/* Quotes */
	#slideshow1, #slideshow2, #slideshow3 { display: none; }
	
	#quotes p { 
		margin-bottom: 1rem;
		margin-top: 1rem; }
	
	.mySlides .card-body { 
		margin-top: 1.2rem;
		padding: 1.5rem; }
	
	.mySlides .card { height: 430px; }
	.mySlides .mt-4 { margin-top: 0 !important; }
	.mySlides img { margin-top: 0; }
	
	.slideshow-container {
		padding-left: 1rem;
		padding-right: 1rem; }
	
	.prev, .next {
		width: 30px;
		height: 30px; }
		
	.prev { left: 0; }
	.next { right: 0; }
	
	.stars { 
		top: -2rem;
		margin-left: .4rem; }
	
	/* Fair Pricing */
	#fair-pricing .container { 
		padding-left: 2rem;
		padding-right: 2rem;
		padding-top: 0;
		padding-bottom: 0; }
	
	#fair-pricing p { width: 100%; }
	
	/* Footer */
	footer { margin-top: -4px; }
	footer span:not(#year), footer a { font-size: 80% }
	.footer-links { margin-top: 0; }
	
	/* Portfolio */
	#landing.portfolio { 
		height: auto;
		margin-bottom: 0; }
	
	#portfolio .col-12 {
		margin-top: 1rem;
		padding: 0 1.25rem; }
	
	/* Videos */
	#landing.video {
		height: auto;
		margin-bottom: 2rem; }

	.svg-bg-green, .svg-bg-grey { display: none; }
	.portfolio-section .col-12 { padding: 2rem 1rem; }
	.portfolio-section h1 { margin-top: -2rem; }
	
	/* Contact */
	#landing.contact { 
		margin-bottom: 0;
		height: auto; }
	
	.template-outside { margin: 20px 0; }
	
	#thank-you {
		height: auto;
		padding: 1rem;
		padding: 1rem; }
		
	/* FAQ */
	#faq { padding: 3rem 0; }
	
	#landing.faq { 
		margin-bottom: 0;
		height: auto; }
		
	/* Jake */
	#jake .alert.alert-success.d-flex { flex-direction: column; }
	#jake .alert.alert-success.d-flex svg { margin-bottom: 1rem; }
	#jake .alert.alert-success.d-flex .ms-3 { margin-left: 0 !important; }
	
	/* Contact */
	.template-outside { margin: 20px 0; }
}

@media (max-width: 365px) {
	#landing { height: auto; }
	.navbar-brand span { white-space: normal; }
	#landing h1, main.page h1 { margin-top: 1rem; }
	
	nav .btn-primary, nav .btn-primary-light { 
		border: none !important;
	    background-color: #fff !important;
	    color: var(--green) !important; }
	
	nav ul { 
		align-items: flex-start; }
}