/*!

bootstrap ref
sm 576
md  768
lg  992
xl  1200

colors
dark gray/black 242424
pretty blue   0277BB
mid gray 716e6e
*/

html {
  scroll-behavior: smooth;
}

body {
	font-family: 'Montserrat',Helvetica,Arial;
	color:#242424;
	background:#ffffff;

    font-size: 1.1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media only screen and (max-width: 600px)
{
/*
	body
	{
		background:none;
		background:transparent;
	}

	body:after
	{
		content: url(/wp-content/uploads/bg-starlight.jpg);
		position: fixed;
		height: 100vh;
		right: 0;
		top: 0;
		left: 0;
		z-index: -1;
	}
*/
}

*::-webkit-media-controls-panel
{
  display: none!important;
  -webkit-appearance: none;
}

*::--webkit-media-controls-play-button
{
  display: none!important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button
{
  display: none!important;
  -webkit-appearance: none;
}

.clear
{
	clear:both;
}

img
{
	max-width:100%;
	height:auto;
}

a
{
	color:#0277BB;
	text-decoration:none;
}

a:hover
{
	color:#716e6e;
	text-decoration:none;
}

#main
{
	margin-top:140px;
	min-height:300px;
	padding-bottom:44px;
}

.home #main
{
	margin-top:110px;
}

.bg
{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFFFFF;
    padding: 250px 120px;

}

.single-manufactured-homes #main,
.single-tiny-homes #main
{
	margin-top:120px;
}

section
{
	margin:48px auto;
}

.blue
{
	color:#0277BB;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin:0 auto 18px;
	line-height:1.24;
	padding:0;
	color:#0277BB;
	font-family:'Montserrat';
	font-weight:500;
	text-transform:uppercase;
}

h1
{
	font-size:2.2rem;
	margin:0 auto 24px;
}

h2
{
	font-size:1.8rem;
	color:#716e6e;
}

h3
{
	font-size:1.4rem;
}

h4
{
	font-size:1.2rem;
	color:#716e6e;
}

p+h2,
p+h3
{
	margin-top:44px;
}

.tapbox .inside
{
	text-transform:uppercase;
    transition: all .3s ease-in-out 0s;
	padding:52px 0;
	background:rgba(142, 170, 195, 0.74);
	color:#716e6e;
	font-size:20px;
}

.tapbox.skinny .inside
{
	padding:7px 0;
	font-size:16px;
}

.tapbox:hover .inside
{
	background:rgba(142, 170, 195, 1);
	color:#716e6e;
}

.tapbox.opt2 .inside
{
	background:rgba(155, 186, 213, 0.74);
}

.tapbox.opt2:hover .inside
{
	background:rgba(155, 186, 213, 1);
}

.tapbox.opt3 .inside
{
	background:rgba(211, 227, 238, 0.74);
}

.tapbox.opt3:hover .inside
{
	background:rgba(211, 227, 238, 1);
}

.tapbox.opt4 .inside
{
	background:rgba(226, 237, 240, 0.74);
}

.tapbox.opt4:hover .inside
{
	background:rgba(226, 237, 240, 1);
}

/*--------------------------------------------------------------
# Misc
--------------------------------------------------------------*/

.light-panel
{
	background:#eeeeee;
}

.dark-panel
{
	background:#242424;
	color:#ffffff;
}

.some-fixed-background
{

	background: url(/wp-content/uploads/bg-clouds.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	color:#716e6e;
}

@media only screen and (max-width: 720px)
{
	.some-fixed-background
	{
		background: url(/wp-content/uploads/bg-clouds.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
}

.slider-testimonials
{
	background:#716e6e;
}

.btn, .container-fluid, .entry-img, .navbar, .overlay, .wpcf7 input[type=submit], a, img {
    transition: all .5s ease-in-out 0s;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
bakinput[type="submit" i]
{
    transition: all .5s ease-in-out 0s;

    appearance: auto;
    user-select: none;
    white-space: pre;
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: -internal-light-dark(black, white);
    background-color: #ffb33d;
    box-sizing: border-box;
    padding: 3px 14px;
    border-radius:15px;
    border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(255, 179, 61), rgb(218, 113, 32));
    border-image: initial;
}

input[type="submit" i],
.btn
{
    color: #ffffff !important;
    background: #0277BB !important;
	font-size:1rem;
	text-transform:uppercase;
	font-weight:normal;
	margin-bottom:14px;
	line-height:1.6;
	padding: 0.74rem 1rem 0.5rem;
	border-radius:1px;
    border-width: 0px;
    border-style: outset;
	cursor:pointer;
}

input[type="submit" i]:hover,
.btn:hover
{
    color: #ffffff !important;
    background: #242424 !important;
}

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/

header.site-header
{
	position: fixed;
    right: 0;
    left: 0;
    top:0;
    height:120px;
    padding:2px 0 0;
    z-index: 200;
	background:#ffffff;
	color:#716e6e;
	box-shadow: 0px -2px 24px 1px rgb(0 0 0 / 6%);
}

.site-title img
{
	width:auto;
	height:auto;
	max-height:104px;
}

.site-header .phone
{
    display: inline-block;
    height: 26px;
	line-height:26px;
}

.site-header .phone
{
    background: url(images/phone-icon.png) no-repeat 0 0;
	background-size:contain;
    display: inline-block;
	padding:0px 0px 0px 30px;
}

.site-header .phone a
{
	color:#0277BB;
	font-weight:500;
}

.site-header .btn
{
	margin:0 0 0 8px;
	line-height:1.0;
	padding: 0.74rem 0.5rem 0.64rem;
	font-size:0.9rem;
}

.site-header .btn.fires
{
	background:#d92622 !important;
}

/*--------------------------------------------------------------
# Gravity Forms
--------------------------------------------------------------*/

.gform_wrapper div.validation_error {
    color: #ffb33d !important;
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 25px;
    border-top: 2px solid #ffb33d !important;
    border-bottom: 2px solid #ffb33d !important;
}

.gform_wrapper .validation_message {
    color: #ffb33d !important;
    font-weight: 700;
    letter-spacing: normal;
}

.gform_required_legend
{
	font-size:0.9rem;
	margin:11px 0 18px;
}

.gform_wrapper.gravity-theme .gform_fields
{
    grid-column-gap: 5% !important;
    grid-row-gap: 24px !important;
}


/*--------------------------------------------------------------
# Top panel on home detail pages
--------------------------------------------------------------*/
.showcase
{
	height:40vw;
}

.showcase-overlay
{
	height:100%;
	background:rgba(0,0,0,0.4);
}

.showcase i
{
	font-size:48px;
}

.panelblock
{
	background:#716e6e;
    color: #ffffff;
	padding:44px;
	color:#ffffff;
	margin:80px;
}

.reviewblock
{
	color:#716e6e;
	padding:24px;
	margin:0 0 32px;
}

.review
{
	font-style:italic;
}

.reviewer
{
	margin:18px 0 0 0;
	color:#0277BB;
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card-deck
{
	margin:24px 0 0;
}

.card-deck .card
{
	background:rgba(226, 237, 240, 0.34);
	border:0px;
}

.card-deck .by-author,
.post .by-author
{
	display:none;
}

.card .entry-meta
{
	margin:4px 0 14px;
}


.deck .card
{
	background:#eeeeee;
	border:0;
}

.deck .card img
{
	border-bottom:7px solid #0277BB;
}

.deck .card-footer
{
	padding: 0.24rem 0rem;
	background: transparent;
	border-top:0;
}

.card-img-top
{
	width: 100%;
	height: 20vw;
	object-fit: cover;
}

.card-img-overlay h1,
.card-img-overlay a
{
	color:#ffffff;
}

.single .post .post-thumbnail
{
	margin-bottom:24px;
}

/*--------------------------------------------------------------
# Flip Cards
--------------------------------------------------------------*/
.cards-services .flip-card-front .card-img-overlay
{
/*
	background-color: rgba(0,0,0,0.5);
*/
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 40vh;
  border:0px;
  /*  border: 1px solid #f1f1f1;  */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
/*
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
*/
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
/*
  background-color: #bbb;
  color: black;
*/
}

/* Style the back side */
.flip-card-back {
  background-color: #716e6e;
  color: white;
  transform: rotateY(180deg);
}

/*--------------
*  home details
-----------------*/
/*
#002f4b,#dc4225
Convert HEX to RGBA - http://hex2rgba.devoth.com/
*/
.img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(72,72,72,0.5) 0%, rgba(24,24,24, 0.74) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(24,24,24, 0.74)), color-stop(100%,rgba(72,72,72,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(72,72,72,0.5) 0%,rgba(24,24,24, 0.74) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(72,72,72,0.5) 0%,rgba(24,24,24, 0.74) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(72,72,72,0.5) 0%,rgba(24,24,24, 0.74) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(72,72,72,0.5) 0%,rgba(24,24,24, 0.74) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

/*
*
* ==========================================
* ACCORDION STUFF
* ==========================================
*
*/
/* Horizontal line */
.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}

/*--------------------------------------------------------------
# Overlay / Popup
--------------------------------------------------------------*/
#overlay,
#overlay-content,
.modal {
    z-index: 9999999 !important;
}

.modal-dialog,
.modal-content
{
	z-index:99999;
}

.modal-dialog
{
	max-width: 80%;
}

@media (min-width: 1200px)
{
	.modal-dialog {
		max-width: 900px;
		margin: 1.75rem auto;
	}
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

#overlay-content
{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 18px;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	text-align:center;
	border:6px solid #f9d20c;
	border-radius:4px;
	background:#FFFFFF;
	color:#000000;
	width:98%;
	padding:40px 1%;
	max-width:640px;
}


/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/

table, th, td {
  border: 0px solid #716e6e;
}

table
{
	margin:0 0 24px;
}

th, td {
  padding: 11px;
  text-align: left;
}

th {
  background-color: #716e6e;
  color: white;
}

tr:nth-child(even)
{
	background-color: #f2f4f4;
}

/*--------------------------------------------------------------
# Bullets / list style
--------------------------------------------------------------*/
ul.nobullet
{
	padding:5px 0 0 0;
    list-style-type: none;
}

ul li
{
	margin-bottom:14px;
}

ul.nobullet li
{
    list-style-type: none;
    display:block;
/*
	background:url(images/li-wings.png) no-repeat 2px 2px;
*/
	padding:0px 0 11px 0px;
	margin:0 0 14px 0;

}


/*--------------------------------------------------------------
# Social Media
--------------------------------------------------------------*/
.social-icons
{
	margin: 11px auto 11px;
	padding: 0px 0 0 0;
	font-size:32px;
}
.social-icon
{
	padding-right:11px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-cards
{
	margin:64px 0 0;
}

.footer-cards .card-footer
{
	background:#e7dad2;
	color:#ffffff !important;
	font-size:1.35rem;
	line-height:1;
	text-decoration:none !important;
}

.footer-cards .card:hover .card-footer
{
	background:#045691;
}

.footer-area
{
    margin: 0px auto 0;

	line-height:1.44em;
	font-size:1rem;
	padding:24px 0 24px 0px;
	background:#242424;
	color:#ffffff;
}

.footer-area ul {
	display: block;
	text-align:inherit;
	list-style: none;
	margin: 0 auto;
	padding-left: 0;
}

.footer-area .menu li {
	display:block;
	text-align:inherit;
	position: relative;
	padding:0 0px;
	margin:0 0 3px 0;
}

.footer-area .menu li .nav-link
{
	display:inline-block;
}

.footer-area .menu ul ul{
	margin-left:12px;
}

.footer-area .menu li li:before
{
	color:#716e6e; /* set color to white */
	content:"\2022"; /* /2022 is the numerical unicode for • */
	font-size:1em; /* set the font-size of the bullet if necessary. Make sure to use em or %*/
	padding-right:4px; /* give the bullet some padding from the text Make sure to use em*/
	position:relative;
	top:.1em; /* set the vertical position of the bullet if necessary. Make sure to use em or % */
	font-size:12px;
}

.footer-area a,
.footer-area .menu li a
{
	text-decoration:none;
	color:#ffffff;
}

.footer-area a:hover,
.footer-area .menu li a:hover,
.footer-area .nav-link:hover
{
	color:#0277BB;
}

.footer-area .nav-link,
.footer-copyright .nav-link
{
    padding: 0rem 1rem 0.5rem;
}

.footer-copyright {
	padding:11px 0 20px;
	line-height: 18px;
	font-size:13px;
	color: #716e6e;
	background-color: #ffffff;
	margin:0 0;
}

.footer-copyright a
{
	color:#716e6e;
}

.footer-copyright a:hover
{
	color:#0277BB;
}

.footer-copyright ul
{
	display: block;
	text-align:inherit;
	list-style: none;
	margin: 0px auto;
	padding-left: 0;
}

.footer-copyright .menu li {
	display:inline-block;
	text-align:inherit;
	position: relative;
	padding:0 0px;
	margin:0 0 0px 0;
}

.footer-copyright .logos
{
	text-align:inherit;
	margin-bottom:14px;
}


/*
*  responsive embeds
*/
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* bootstrap large */
@media only screen and (max-width: 992px)
{
	.flex-viewport
	{
		max-height: 300px !important;
	}

	.container
	{
		max-width: 95%;
	}
}

/* bootstrap medium */
@media only screen and (max-width: 768px)
{
	.card-img-top
	{
		height: 50vw;
	}
}

/* bootstrap small */
@media only screen and (max-width: 576px)
{
	.alignright,
	.alignleft
	{
		float:none;
		display:block;
		margin:0 auto 28px;
	}

	.flex-viewport
	{
		max-height: 60vw !important;
	}


}