@charset "utf-8";
/* CSS Document */

html, body {
	margin:0 auto;
	font-family: 'Roboto', sans-serif;
	line-height: 1.8em;
	color:#4f535e;
}


img {
	display: block;
	margin:0;
}
a, img, div {
	outline: none;
	text-decoration: none;
	border:none;
}
a:focus {
	outline: none;
}


.lightGrey {
	color:#b6b8c1;
}

.blue{
	color:#69748b;
}

.darkGrey {
	color:#4f535e;
}

.yellow {
	color:#fed03f;
}

.offWhite {
	color:#efedf0;
}

.white {
	color:white;
}

h1 {
	font-size: 60px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	text-transform: none;
	margin:15px;
	line-height: 1em;
	text-shadow: 2px 3px 12px rgba(0,0,0,0.38);
}

h2 {
	font-size: 50px;
	font-weight: 900;
	font-family: 'Lato', sans-serif;
	text-transform: none;
	margin:15px;
	line-height: 1em;

}

h3 {
	font-size: 30px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	margin:15px;
	text-shadow: 2px 3px 12px rgba(0,0,0,0.38);
}

h4 {
	font-size: 18px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	margin:15px;
	letter-spacing: 2px;
}

p {
	margin:15px;
	font-size: 16px;
}


img {
	width:100%;
}
.outerContent {
	width:100%;
	max-width: 1330px;
	margin: 0 auto;
}

.alignLeft {
	text-align: left;
}

.innerContent {
	width:100%;
	max-width: 1250px;
	margin: 0 auto;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width:100%;
}

.header {
	width:100%;
	padding: 15px 0;
	background-color: white;
	z-index: 1000;
		 -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888; 
}


.header.sticky {
	position: fixed;
	top:0;
	transition: all 0.4s ease;
	 -webkit-transition: all 0.4s ease;
	padding: 10px 0;



}

.logo {
	width: 100%; 
	max-width: 236px;
	transition: all 0.4s ease;
	 -webkit-transition: all 0.4s ease;
}

.sticky .logo {
	max-width: 180px;
}


.col25 {
	display: flex;
	flex-basis: 25%;
	align-items: center;
	justify-content: center;
}


.col50 {
	display: flex;
	flex-basis: 50%;
	align-items: center;
	justify-content: center;
}


.mobileMenu {
	display: none;
}
.menu-item {
	font-size: 18px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	text-align: center;
	letter-spacing: 2px;
	color:#b6b8c1;
	text-transform: uppercase;
}


.current .menu-item
 {
	color:#69748b;
	text-decoration: underline;
}
.menu-item:hover {
	color:#69748b;
	text-decoration: underline;
}

.phoneNumber {
	font-size: 34px;
	color:#50525d;
	font-weight: 900;
	font-family: 'Lato', sans-serif;
}


#headerSection {
	background-image: url(../images/header-img.jpg); 
	background-repeat: no-repeat;
	padding: 200px 0;
	background-size:100%;
}

.headerContent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:50%;
}


.btn {
	background-color:#fed03f;
	padding: 10px 20px;
	text-transform: uppercase;
	color:white;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	width:fit-content;
	letter-spacing: 2px;
	line-height: 1em;
	cursor: pointer;
	margin: 15px;
}

.btn a {
	color:white;
}

.btn:hover {
	background-color: #69748b;
}

i {
	padding-left: 20px;
}
.colTwoThirds {
	display: flex;
	flex-basis: 66.666%;
	
}

.colThird {
	display: flex;
	
	justify-content: center;
	width:100%;
	max-width: 332px;
	padding: 0 30px;

	
}

.boxDecoration {
	position: relative;
}

.boxDecoration:before {
	display: block;
    content: "";
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
	
	position: absolute;
    left: 0;
    top: 0px;
    border-left-color: #fed03f;
    border-top-color: #fed03f;
  
}



.boxDecoration:after {
	display: block;
    content: "";
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
	
	position: absolute;
    right: 0;
    bottom: 0px;
    border-right-color: #fed03f;
    border-bottom-color: #fed03f;
   
}

.spaceRight {
	padding-right: 50px;
}
.spaceBottom {
	padding-bottom: 50px;
}
.section {
	padding: 100px 0;
}

.innerColumns {
	margin: 0 10px;
}
#whatWeDo {
	background-image: url(../images/whatwedo-bg.jpg);
	background-repeat: no-repeat;
	
}

#whatWeDoContent {
	background-color: white;
	padding: 100px;
}

#whatWeDo h4 {
	margin-top: 25px;
}

.innerColumns p {
	margin: 10px 0;
}

.innerColumns h4 {
	margin: 10px 0;
}

.space {
	width:50px;
}

.owl-carousel .row {
	padding-bottom: 50px;
}
#homes {
	padding-bottom: 0px;
}

#inspiration {
	background-image: url(../images/transitional-cta-bg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}

.col {
	display: flex;
	flex:1;
}

:focus {
	outline: none;
}


input, textarea, select {
	width:95%;
	border:1px solid #b6b8c1;
	padding: 15px;
	margin: 5px 15px;
   
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	background-color: white;
}

select {
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color:#4f535e;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color:#4f535e;
	
}
::-moz-placeholder { /* Firefox 19+ */
 	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color:#4f535e;
	
}
:-ms-input-placeholder { /* IE 10+ */
 	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color:#4f535e;
}
:-moz-placeholder { /* Firefox 18- */
 	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color:#4f535e;
	
}

#aboutPagi {
	background-color:#f4f4f8;
}

#aboutContent {
	background-color: white;
	padding: 50px;
}

.colHalf {
	display: flex;
	flex-basis: 50%;
}

.aboutUsImg {
	margin-left: -100px;
	flex-basis: 60%;
}

hr {
	border-style: solid;
	color:#b6b8c1;
}

.testimonialBlock {
	padding:30px 50px;
	background-color: #50545f;
	min-height: 518px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.testimonialAuthor {
	font-size: 16px;
	margin-top: 40px!important;
	margin-bottom: 0!important;
}

#nextSteps {
	background-image: url(../images/cta-bg.jpg);
	background-repeat: no-repeat;
	padding: 50px 0;
}
#contact {
	padding: 50px 0;
}

.icon {
	color:#50545f;
	margin: 5px;
}
.icon:hover {
	color:#ffd13f;
}

#footerBar {
	background-color:#50525d;
	padding: 10px 0;
}

.tabletImage {
	display: none;
}

#nextSteps .innerColumns {
	display: flex; 
	flex-direction: column;
}


.stepIcon {
	 width:100%;
	max-width:172px;
	height:100%;
}

#nextSteps .innerContent {
		max-width: 1200px;
}

.alignStart {
	justify-content: flex-start;
}




	#menuToggle
{
  display: block;
  position: relative;
     float: right;
  	padding-left: 20px;
  z-index: 1;
  margin-top: 10px;
  -webkit-user-select: none;
  user-select: none;
}	
	
	#menuToggle  input
	{
	  display: block;
	  width: 38px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
		margin: 0;

	  cursor: pointer;

	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */

	  -webkit-touch-callout: none;
	}

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;

	  background:  #fed03f;
	  border-radius: 3px;

	  z-index: 1;

	 transform-origin: 23px 0px;

	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
	      transform-origin: 57% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #fed03f;
	}

	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}

.mobile_menu {
	display: none;
}


.popuponeHalfColumn {
	display: flex;
	flex-basis: 50%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



.contactFormCommCheckbox {
    position: relative;
    margin-bottom: 20px;
    padding-left: 5px;
    text-align: left;
	padding-top: 30px;
	width:100%;

}
.contactFormCommCheckbox input {
    margin-top: 6px;
}
.contactFormCommCheckbox > div {
    position: absolute;
    margin-left: 40px;
    top: 0;
    font-size: 15px;
    line-height: 15px;
	padding-top: 30px;
}


.formCol {
	display: flex;
	flex-basis: 100%;
}

.formCol2 {
	display: flex;
	flex-basis: 100%;
}

.popupImgSm {
	display: none;
}


#registerPopup {
	width:100%;
	max-width:1400px;
	margin: 0 auto;
	display: flex;
	position: relative;
	flex-wrap: wrap;
}

.textBlock {
	
	background-color: white;
}

.registrationForm {
	padding: 25px 30px;
}

#nextSteps h2 {
	padding-left: 30px;
}

#nextSteps .alignStart {
	padding-left: 30px;
}

.footerCol1 {
	display: flex;
	flex-basis: 55%;
	align-items: center;
	justify-content: center;
}
.footerCol2 {
	display: flex;
	flex-basis: 20%;
	align-items: center;
	justify-content: center;
}

.footerCol3 {
	display: flex;
	flex-basis: 25%;
	align-items: center;
	justify-content: center;
}


@media all and (max-width:2000px) {
	#whatWeDoContent {
		padding: 50px;
	}
}



@media all and (max-width:1919px) {
	.section {
		padding: 75px 0;
	}
	
	#headerSection {
		padding: 100px 0;
	}
}


@media all and (max-width:1679px) {
	h1 {
		font-size:50px
	}
	
	h3 {
		font-size: 25px
	}
	
	h2 {
		font-size:44px;
	}
	h4 {
		font-size: 20px;
	}
	
	.section {
		padding: 50px 0;
	}
	
	#headerSection {
		padding: 50px 0;
	}
	
	#whatWeDoContent {
		padding: 25px 0;
	}
	
	.menu-item {
		font-size: 16px;
	}
	
	.phoneNumber {
		font-size: 28px;
	}
}


@media all and (max-width:1279px) {
	.colThird {
    padding: 0;
    flex-basis: 33.333%;
    max-width: none;
    width: auto;
	}
	
	#headerSection {
	
		background-image: url(../images/header-1279.jpg);
		padding: 50px 0;
	}
	
	#contact .colThird {
		flex-basis: 20%;
	}
	
	#contact .colTwoThirds {
		flex-basis: 80%;
	}
	
	#footerBar p {
		font-size: 14px;
	}
	
	.headerContent {

	width:80%;
}

	h1 {
		margin: 10px;
	}
	
	h3 {
		margin: 10px;
	}
	.registrationForm .spaceBottom {
		padding-bottom: 10px;
	}
	
	.footerCol1 {
	flex-basis: 60%;
		font-size:14px;
		justify-content: flex-start;
}
.footerCol2 {
	
	flex-basis: 15%;
	
}

.footerCol3 {
	
	flex-basis: 25%;
	
}
	
}


@media all and (max-width:1023px) {
	.colTwoThirds {
		flex-basis: 100%;
	}
	
	.colThird {
		flex-basis: 100%;
		
	}
	
	#whatWeDo .colThird {
		max-width: 400px;
	}
	.colHalf {
		flex-basis: 100%;
	}
	
	#whatWeDo {
		background-image: none;
		background-color: #f4f4f8;
	}
	#whatWeDoContent {
		width:90%;
	}
	
	.aboutUsImg {
		margin: 0 auto;
	}
	
	.testimonialBlock {
		margin: 10px 0;
		min-height: auto;
	}
	#inspiration {
		background-image: none;
	}
	
	.alignLeft {
		text-align: center;
	}
	
	p {
		text-align: center;
		margin: 0 25px 25px 25px;
	}
	
	.spaceRight {
		padding-right: 0;
	}
	h4 {
		text-align: center;
	}
	
	#inspiration .col {
		flex-basis: 100%;
		align-items: center;
		justify-content: center;
		max-width: 540px;
	}
	
	#inspiration .btn {
		margin:10px auto;
		
	}
	
	h2 {
		text-align: center;
	}
	
	#aboutPagi .colHalf {
		justify-content: center;
		align-items: center;
	}
	
	.aboutUsImg {
		margin-top: 15px;
	}
	
	.spaceBottom {
		padding-bottom: 25px;
	}
	#nextSteps .innerColumns {
		align-items: center;
		justify-content: center;
	}
	
	.desktopImage {
		display: none;
	}
	
	.tabletImage {
		display: block;
	}
	
	#nextSteps .innerColumns {
		flex-direction: row;
	}
	
	.stepIcon {
		max-width: 125px;
	}
	
	#nextSteps .colThird {
		justify-content: flex-start;
	}
	
	#nextSteps .innerContent {
		max-width: 600px;
		margin:0 auto;
	}
	
	#nextSteps h4 {
		text-align: left;
	}
	
	.alignStart {
	justify-content: center;
}
	
	#contact .colTwoThirds {
		flex-basis: 100%;
		flex-direction: column;
		align-items: center;
		margin-bottom: 25px;
	}
	
	#contact .colThird {
		flex-basis: 100%;
	}
	#contact .row {
		
	}

	.col50 {
		display: none;
	}
	
	.mobileMenu {
		display: flex;
	}
	
	.col25 {
		flex-basis: 40%;
	}
	.mobileMenu {
		justify-content: flex-end;
		margin-right: 15px;
		flex-basis: 15%;
	}
	
	.mobile_menu {
		width:100%;
		
	}
	
	.menu-item {
		padding: 10px 0;
		background-color: #f4f4f8;
		color:#69748b;
	}
	
	.menu-item:hover {
		text-decoration: none;
		background-color: white;
	}
	
	.current .menu-item {
		text-decoration: none;
		background-color: white;
	}
	.innerColumns p {
		margin-bottom: 25px;
	}
	
		
.popuponeHalfColumn {
	
	flex-basis: 100%;
	
}

	.popupImgLarge {
		display: none;
	}
	
	.popupImgSm {
		display: block;
	}
	
	
	#registerPopup {
		max-width: 768px;
	}
	#nextSteps h2 {
	padding-left: 0px;
}

#nextSteps .alignStart {
	padding-left: 0px;
}
	
	.footerCol1 {
	flex-basis: 100%;
	padding-bottom: 15px;	
    flex-direction: column;	
}
	
.footerCol2 {
	flex-basis: 100%;
	padding-bottom: 15px;
}

.footerCol3 {
	flex-basis: 100%;	
}


}




@media all and (max-width:767px) {
	h4 {
		font-size: 18px;
	}
	
	p {
		font-size: 16px;
	}
}

@media all and (max-width:500px) {
	#headerSection {
		padding: 10px 0;
		background-image: url(../images/header-500.jpg);
	}
	h1 {
		font-size: 40px;
	}
	
	h2 {
		font-size: 34px;
	}
	h3 {
		font-size: 20px;
	}
	.registrationForm {
		padding: 25px;
	}
	.phoneNumber {
		font-size: 18px;
	}
	
	.col25 {
		flex-basis: 30%;
	}
	
	.mobileMenu {
		flex-basis: 10%;
	}
	.phoneNumberColumn
	 {
		flex-basis: 42%;
	}
}