/**
 * Name: layout.css
 *
 *	-
 *
 *	T.O.C
 *
 *		#General Layout
 *		#Header
 *		#Content
 *		#Footer
 *		#Page Styles
 *		#Index
 *		#About
 *		#Services
 *		#Contact
 *		#Responsive
 */

/* ==========================================================================
   #General Layout
   ========================================================================== */

	#wrap {
		position: relative;
	}
	.fullwidthbanner,
	#preload {visibility: hidden}

	#header h1,
	#header h2{
		font-size: 1px;
	    height: 1px;
	    line-height: 0;
	    margin: 0;
	    padding: 0;
	    text-indent: -9999px;
	}

	.green{
		color:#45ac3b !important;
	}
	.white{
		color:#fff !important;
	}
	.black-bg{
		background-color: #000;
	}
	.divider-line{
		width:100px;
		height:5px;
		border-bottom:4px solid #f7931e;
		margin:10px 0px 15px;
	}
	.read-more{
		font-size:.875rem;
	}
	.border-radius{
		padding:10px 20px;
		box-sizing: border-box;
		border-radius: 8px;
	}
	.border-radius-nopad{
		border-radius: 8px;
	}
	.spacer{
		display:block;
		height:40px;
		xborder:1px solid red;
	}
	.lrg-text{
		font-size:1.25em;
	}
	h3.smaller-title{
		font-size:2.75em;
	}
	/* Video Wrappers */

	.videoWrapper {
	  position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  padding-top: 25px;
	  height: 0;
	  min-height: 350px;
	  box-sizing: border-box;
	}
	.videoWrapper iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}


	/* anchors */

	.anchors{
	    display: block;
	    position: relative;
	    z-index: 5000;
	    visibility: hidden;
	}

/* #Header
   ========================================================================== */

	#header {position:relative;height:116px;box-sizing:border-box;padding:5px 0px 15px;border-top:8px solid #ccc;background-color: #fff}

	#header [class*="span"]{
		xborder:1px solid red;
	}

	#header #header-nav .flex-item{
		flex: 1 1 auto;
		xborder:1px solid red;
	}
	#header #header-nav .flex-item:nth-child(3){
		text-align: right;
	}

	#header #header-nav{
		position: relative;
		display:flex;
		flex-direction:row;
		flex-wrap: nowrap !important;
		justify-content:space-between;
		align-content:center;
		align-items:center;
		xborder:1px solid red;
	}
	#header-nav .flex-menu-item:nth-child(2){
		flex:0 0 20%;
	}
	#header-nav .flex-menu-item:nth-child(2){
		flex:0 0 70%;
	}
	#flags img{
		margin-left:5px;
	}


	/* Logo */

	#logo {
		position: relative;
		z-index: 500;
		display: flex;
		align-self: flex-start;
		xborder:1px solid green
	}

	#logo img { display: block;max-width: 300px;xborder:1px solid black}


	#menu-secondary{
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		margin-top:10px;
		margin-right:10px;
		height:25px;
	}
	#menu-secondary a{
		position: relative;
		font-size:.875em;
		color:#555;
		margin:0px 10px;
	}
	#menu-secondary a:before{
		content:'•';
		position: absolute;
		top:2px;
		left:-13px;
		width:10px;
		height:10px;
		font-size:10px;
		color:#ccc;
	}
	#menu-secondary a:first-child:before{
		content:'';
	}
	#menu-secondary a:last-child{
		margin-right:0px;
	}
	#menu-secondary a:hover,
	#menu-secondary a.current{
		color:#45ac3b;
	}
	#subnav{
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		height:43px;
	}
	#language{
		display: flex;
		flex-wrap: nowrap;
		margin-top:10px;
	}

	/* Menu basics */

	.sf-menu,
	.sf-menu ul {
		padding: 0;
		margin: 0;
		list-style: none;
		position: relative;
		z-index: 100;
		display:flex;
		flex-direction: row;
		justify-content:flex-end;
		float:right;
		xborder:1px solid red;
	}

	.sf-menu > li {
		margin-right: 0;
		xborder:1px solid blue;
	}
	.sf-menu > li a:before{
		content:'•';
		position: absolute;
		top:9px;
		left:10px;
		width:10px;
		height:10px;
		font-size:.675em;
		color:#999;
	}
	.sf-menu > li:first-child a:before{
		content:'';
	}
	.sf-menu > li > a {
		position: relative;
		display: block;
	}

	/* Menu Skin */

	.sf-menu {
		margin-top:10px;
		/*width: 100%;*/
	}

	.sf-menu a {
		display: block;
		font: 1.2em 'Lato', Arial, sans-serif;
		color: #000;
		font-weight: 700;
		text-decoration: none;
	}


	.sf-menu > li > a{
		padding-bottom:0px;
		color: #000;
		text-align: center;
		text-transform: uppercase;
	}
	.sf-menu > li > a span{
		display: inline-block;
		margin: 5px 0px 5px 30px;
		font-size:20px;
		border-bottom:2px solid transparent;
	}
	.sf-menu > li.current > a span {
		color: #000;
		border-bottom:2px solid #45ac3b;
	}

	.sf-menu > li > a:hover span{ color: #45ac3b; }


	/* arrows */

	/* styling for both css and generated arrows */

	.sf-arrows .sf-with-ul:after {
		position: absolute;
		top: 50%;
		right: 0;
		height: 0;
		width: 0;
		/* order of following 3 rules important for fallbacks to work */
		border-top-color: rgba(0, 0, 0, 0.5);
		margin-top: -3px;
		content: "";
	}

	/* Mobile Menu  */

	#mobile-menu {
		position: relative;
		z-index: 20000;
		margin-bottom: 0;
	}

	#mobile-menu li {
		display: block;
		margin: 0;
		background-color:#1c1c1c;
	}

	#mobile-menu > li > ul,
	#mobile-menu > li > ul > li > ul {
		display: none;
		margin-left: 0;
	}

	#mobile-menu li a {
		position: relative;
		display: block;
		padding: 15px 0 15px 10vw;
		border-top: 1px solid #555;
		color: #fff;
		font-size: 1.3em;
		text-align: left;
		text-decoration: none;
	}

	#mobile-menu ul a { padding-left: 45px; }

	#mobile-menu ul li ul a  { padding-left: 65px; }

	#mobile-menu .mobile-menu-submenu-arrow {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 70px;
		border-left: 1px solid #d7d7d7;
		color: #fff;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
	}

	#mobile-menu li a:hover {color:#ccc;background-color: #000}

	#mobile-menu { display: none; }

	/* Mobile menu trigger  */

	#mobile-menu-trigger {
		position: absolute;
		top:0px;
		right:180px;
		display: none;
		font-size:2.3em;
		text-transform: uppercase;
		color: #000;
		z-index: 100000;
		xborder:1px solid red;
	}

/* #Content
   ========================================================================== */


	#content {
		position: relative;
	}
	#content a{
		font-weight:inherit;
	}
	#flex-other{
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	#flex-other div{
		flex:0 0 24%;
		margin-left:15px;
		margin-bottom: 15px;
	}
	#flex-other div:first-child{
		margin-left:0px;
	}
	@media screen and (max-width:980px){
		#flex-other{
			flex-wrap: wrap;
		}
		#flex-other div{
			flex:0 0 48.5%;
			margin-left:0px;
			margin-bottom:5px;
		}
		#flex-other div:first-child {
		  margin-left:px;
		}
	}

	.module{
		xbackground: no-repeat scroll left top #222222;
		margin-bottom: 15px;
		position: relative;
		xwidth: 400px;
		margin:20px auto 10px;
		xborder-radius: 10px;
		text-align:center;
		display:flex;
		flex-direction: column;
	}
		.module-head{
			padding:10px 20px;
			box-sizing: border-box;
			color:#000;
		}

		.module-content{
			xpadding:20px 20px 0px;
			box-sizing: border-box;
			color:#000;
			font-size:16px;
			xborder:1px solid blue;
		}
		.module a{
			color:#000;
			font-size:16px;
		}
		.module h4{
			text-transform: none;
			line-height: 1.2;
			margin-bottom: 20px;
			font-weight:300;
		}
		.module h5{
			font-size:20px;
			font-weight:400 !important;
		}

	/* Sections */

	.focus-section{
		padding: 60px 0 40px;
		margin: 30px 0 10px;
		background-color:#fff;
		xborder:0px;
		xborder:1px solid red;
	}
	.focus-section-img-right,
	.focus-section-img-left{
		padding: 60px 0 40px;
		margin: 30px 0 10px;
		background-color:#fff;	
	}
	.focus-text{
		display: block;
		position: relative;
		padding:60px 50px;
		min-height: 350px;
		box-sizing: border-box;
	}
	.focus-text-left{
		display: block;
		position: relative;
		padding:60px 50px 60px 0px;
		min-height: 350px;
		box-sizing: border-box;
	}
	.focus-text-no-top-padding{
		display: block;
		position: relative;
		padding:0px 50px 60px;
		min-height: 350px;
		box-sizing: border-box;		
	}
	.focus-text-nopadding{
		display: block;
		position: relative;
		padding:0px 0px 50px;
		min-height: 350px;
		box-sizing: border-box;		
	}
	.focus-text h4,
	.focus-text-left h4,
	.subfocus-text-right h4,
	.subfocus-text-left h4
	{
		line-height: 1;
		position: relative;
	}
	.subfocus-text-right{
		position: relative;
		padding-left:60px;
		box-sizing: border-box;
	}
	.subfocus-text-left{
		position: relative;
		padding-right:60px;
		box-sizing: border-box;
	}
	.focus-section p,
	.focus-section-img-right p,
	.focus-text p,
	.subfocus-text-left p,
	.subfocus-text-right p,
	.focus-text-nopadding p,
	.focus-text-no-top-padding p,
	.focus-text-left p{
		font-size:1.25em;
		font-weight: 300;
		text-align: justify;
	}
	.toggle-item-content p,
	.toggle-item-content ul{
		font-size:1.25em;
	}
	.toggle-item-content ul{
		margin-left: 40px;
	}
	.focus-section ul li,
	.focus-section-img-right ul li,
	ul.fill-circle li,
	.toggle-item-content ul li{
		margin-bottom: 5px;
	}
	.focus-text img,
	.focus-text-left img,
	.focus-text-nopadding img{
		top:-5px;
		position:relative;
	}
	.focus-text img.img-float-right{
		top: -55px;
	}
	.focus-text img.img-float-left{
		top:15px;
		left:-9%;
	}
	.subfocus-text-left .btn,
	.subfocus-text-right .btn{
		margin-top:10px;
		margin-left:20px;
	}
	@media screen and (max-width:1366px){
		.focus-section .flex-two .flex-item:nth-child(1){
			flex:0 0 30%;
		}	
		.focus-section .flex-two  .flex-item:nth-child(2){
			flex:0 0 65%;
		}
		.focus-section-img-right .flex-two  .flex-item:nth-child(1){
			flex:0 0 65%;
		}		
		.focus-section-img-right .flex-two  .flex-item:nth-child(2){
			flex:0 0 30%;
		}
	}


	/* Flex Sections */

	.flex-two{
		display:flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		xborder:1px solid red;
	}

	.flex-three, .flex-testimonial{
		display:flex;
		align-content:flex-start;
		align-items:flex-start;
		width:100%;
		xborder:1px solid orange;
	}

	.flex-four{
		display:flex;
		justify-content: center;
		align-content: center;
		align-items: flex-start;
		width:100%;
		xborder:1px solid orange;
	}	
	.flex-item{
		flex:0 0 50%;
		xborder:1px solid blue;
	}
	.flex-three .flex-item{
		flex:0 0 30%;
		max-width: 350px;
		margin-right:5%;

	}
	.flex-four .flex-item{
		flex:0 0 23%;
		max-width: 250px;
		margin-right:20px;

	}
	.flex-testimonial .flex-item{
		flex:1 1 auto;
		display:block;
		line-height: 1.4;
		margin-bottom: 15px;

	}
	.flex-testimonial .flex-item:nth-child(1){
		flex:0 0 80px;
		margin-right: 15px;
	}
	.flex-testimonial .flex-item:nth-child(2){
		padding-bottom: 20px;
		box-sizing: border-box;
		border-bottom:1px dashed #888;	
	}

	.flex-testimonial .flex-item:nth-child(1) img{
		width:80px;
	}
	.flex-three .flex-item:nth-child(3),
	.flex-four .flex-item:nth-child(4){
		xborder:1px solid red;
		margin-right:0px;
	}

	@media screen and (max-width:1080px){
		.flex-four .flex-item{
			flex: 0 0 25%;
			xborder:1px solid yellow;
		}
	}
	@media screen and (max-width:980px){
		.focus-section{
			padding: 20px 0 40px;
			margin: 30px 0 10px;
			background-color:#fff;
		}	
		.focus-text-no-top-padding{
			padding:30px 0px;
			min-height:1px;
			box-sizing: border-box;		
		}			

		.flex-two,
		.flex-three{
			flex-wrap: wrap;
			flex-direction: column;
			align-content: flex-start;
			align-items: flex-start;
		}

		.flex-three .flex-item{
			flex: 0 0 100%;
			margin-right:0%;
			max-width: 100%;
		}
		.focus-section .row-fluid [class*="flex-item"]{
			display:flex;
			flex: 0 0 100%;
			xborder:1px solid orange;
		}
		.flex-four{
			justify-content:space-between;
		}
		.flex-four{
			flex-wrap: wrap;
		}		
		.flex-four .flex-item{
			flex: 0 0 50%;
			margin-right:0px;
			margin-bottom: 30px;
			max-width:50%;
		}
		.subfocus-text-right,
		.subfocus-text-left,
		.focus-text-left,
		.focus-text-right{
			padding:30px 0px;
		}
		.focus-section-img-left,
		.focus-section-img-right{
			padding: 0px 0 40px;
		}
		.focus-section-img-right .flex-two{
			flex-direction: column-reverse;
			xborder:1px solid blue;
		}
		.subfocus-text-left .btn, 
		.subfocus-text-right .btn {
		  margin-top: 10px;
		  margin-left:0px;
		}
	}

/* #Footer
   ========================================================================== */

	#footer {
		border-top:10px solid #f0f3f3;
	}
	#footer-middle{
		padding:20px 0px 20px;
		font-size:.875em;
		line-height: 1.8;
		background-color: #f0f3f3;
	}

	#footer-cite {
		padding: 10px 0 0px;
		background-color: #000;
		color: #eee;
		font-size:.775em;
	}
	#footer h4{
		font-size:1em;
		margin-bottom: 10px;
		color:#000;
		font-weight: 600;
	}
	#footer a{
		color:#222;
	}
	#footer ul li{
		list-style-type: none;
	}
	#footer b{
		font-weight: 600;
	}
	.reviews-footer{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.reviews-footer a{
		margin-top: 5px;
	}

/**** GLOW EFFECT ****/

@property --glow-deg {
  syntax: "<angle>";
  inherits: true;
  initial-value: -90deg;
}

/* the colors don't need to be registed */
@property --clr-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}

@property --clr-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: yellow;
}

@property --clr-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: green;
}

@property --clr-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

@property --clr-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: purple;
}

.glowing-border {
  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4),
    var(--clr-5), var(--clr-1);

  margin-block: 4rem;
  padding: 4rem 3rem 3rem;
  max-width: 60ch;

  border: var(--border-width, 8px) solid transparent;
  xborder-left: 0;
  xborder-radius: 0 100vw 100vw 0;
  border-radius: 15px;
  background: linear-gradient(var(--surface, #fff) 0 0) padding-box,
    conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;

  position: relative;
  isolation: isolate;
  animation: glow 20s infinite linear;
}

@keyframes glow {
  100% {
    --glow-deg: 360deg;
  }
}

.glowing-border::before,
.glowing-border::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.glowing-border::before {
  z-index: -1;
  xbackground: var(--surface, canvas);
  background:#ffffff;
  xinset: 0.5rem;
  inset: 0.8rem;
  xscale: 1.2 1;
  xtransform-origin: right;
  border-radius: 10px;
  xfilter: blur(var(--glow-size, 1.2rem));
}

.glowing-border::after {
  z-index: -2;
  inset: -1.5rem;
  xbackground: conic-gradient(from var(--glow-deg), var(--gradient-glow));
  xfilter: blur(var(--glow-size, 1.5rem));
  opacity: var(--glow-intensity, 0.125);
}

.glowing-border.right {
  margin-inline-start: auto;
  border-radius: 50vw;
  border: var(--border-width, 3px) solid transparent;
  xborder-right: 0;

  &::before {
    transform-origin: left;
  }
}

@media screen and (max-width:768px){
	.glowing-border {
		padding: 3rem 1rem 2rem;
	}
}

/*********** FORMS **************/

#payment_form{
	margin:0px auto 80px;
}
.form-fields{
	padding:0px 20px;
	xborder:1px solid blue;
}
.form-fields h3{
	xfont-size:20px;
}
.form-fields .row-fluid{
	margin-bottom:10px;
	xborder:1px solid black;
}
.input100{
	width:100%;
}
.form-fields hr{
	margin:30px 0px;
	xborder:1px solid red;
}
.required{
	font-size:90%;
	color:red;
}
.form-fields .inline label{
	display:inline-block;
	vertical-align: middle !important;
	line-height:2.8;
	margin-bottom: 0px;
	xborder:1px solid red;
}
.form-fields .inline select,
.form-fields .inline input
{
	margin-bottom: 10px;
}
.form-fields .price{
	font-size:26px;
	line-height:1.8;
	color:white;
}
.payment-module{
	color:#fff;
	border-radius:15px;
	background-color:#555;
	box-sizing: border-box;
	padding:30px 30px 10px;
	margin-top: 25px;
}
.buttons{
	margin-top:30px;
}

/* ==========================================================================
   #Responsive
   ========================================================================== */

/* #Large Display
   ========================================================================== */

	@media screen and (min-width: 1400px) {

	}



/* #Standard Display
   ========================================================================== */

	@media screen and (max-width: 1400px) {
		.sf-menu > li > a{
			font-size: 1.2em;
		}

	}

/* #Tablet
   ========================================================================== */


	@media screen and (max-width:1180px) {
		#logo img{
			max-width: 230px;
		}
		.sf-menu > li > a span{
			font-size: 16px;
		}
		.sf-menu > li a::before{
			top: 6px;
		}
		#flags{
			display:none;
		}
		.focus-text h4 {
		  margin-bottom: 0px;
		  font-size: 1.6em;
		  line-height:1;
		}
		#content h3 {
		  margin-bottom: 8px;
		  font-size: 2.5em;
		}
	}

	
/* #Mobile (Portrait and Landscape )
   ========================================================================== */

	@media screen and (max-width:1024px) {
		#menu { display: none; }
		#header {height:auto;padding: 5px 0px 5px;}
		#header #header-nav{
			flex-direction: column;
			justify-content: flex-start;
		}
		#header-nav .flex-menu-item{
			flex:0 0 100%;
		}
		.flex-menu-item:nth-child(2){
			flex:0 0 auto !important;
			width:200px;
		}
		.flex-menu-item{
			display:flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
			flex-direction: row;
		}
		#mobile-menu-trigger { 
			display: inline-block;
			right:0px;
			margin:5px 0 0; 
			top:-5px;
			position: relative;
		}
		#subnav{
			margin-left:5px;
			justify-content: flex-start;
		}
		.img-align-right{
			float:none;
			margin-left:0px;
		}
		.focus-section{
			padding:20px 0 40px;
			margin:0px 0 10px;
			xborder:1px solid red;
		}

		.focus-text{
			padding:60px 20px 20px;
			min-height:auto;
			xborder:1px solid blue;
		}
		.focus-text img{
			top:15px;
		}
		.focus-text img.img-float-right{
			right:-2%;
		}

		h3 span{
			display:inline-block;
			xborder:1px solid black;
		}

	}

	
	@media (max-width: 767px) {
		#content h3 {
		  margin-bottom: 8px;
		  font-size: 2rem;
		  xborder:1px solid blue;
		}
		.focus-text {
		    padding: 20px 20px 20px;
		}
	  	.focus-text h4,
	  	.subfocus-text-right h4,
	  	.subfocus-text-left h4,
	  	.headline h4,
		.headline-lrg-notitle h4,
		.headline-lrg-title h4,
		.headline-lrg  h4,
		.focus-text-no-top-padding h4:first-child{
	   		margin-bottom:5px;
	    	font-size: 1.2rem;
	    }
		.form-fields {
		  padding: 0px 0px !important;
		}	
		.payment-module p{
			margin-bottom: 10px !important;
		}    
	    .payment-module img {
		    max-width:90% !important;
		}		
		.row .row { 
			width: auto; 
			padding: 0; 
			margin: 0; 
		}
		
		p.last, 
		h1.last, 
		h2.last, 
		h3.last, 
		h4.last, 
		h5.last, 
		address.last, 
		ul.last, 
		ol.last { margin-bottom: 20px; }
		
		.text-right{ text-align: left; }
		

	}
	
/* #Mobile ( Landscape )
  ========================================================================== */

	@media screen and (max-width: 580px) {
  		#header{
  			padding-top: 15px;
  		}	
  		 #logo img {
		    max-width: 200px;
		  }	
		.callus-now .btn,
		.btn{
			width:100%;
			text-align: center;
		}
		.text-justify{
			text-align: left;
		}
		h4{
			line-height: 1;
		}
		
	}	

/* #Mobile ( Portrait )
  ========================================================================== */
  	@media screen and (max-width: 480px) {

		#content ul li{text-align: left !important;}

		.flex-four{
			flex-wrap: wrap;
		}		
		.flex-four .flex-item{
			flex: 0 0 100%;
			margin-right:0px;
			
			max-width:100%;
		}		
		#mobile-menu-trigger { 
			top:-5px;
		}
  	}

  	@media screen and (max-width: 380px) {

	
  	}