/**
 * 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}

	.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:80px;
		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{
		position:relative;
		display:flex;
		flex-direction:row;
		justify-content:flex-start;
		align-content:center;
		align-items:center;
		width:100%;
	}
	#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 .row{
		position: relative;
		display:flex;
		flex-direction:row;
		justify-content:flex-end;
		align-content:center;
		align-items:center;
		xborder:1px solid red;
	}
	#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: #000;
	}
		
	#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 5.5vw;
		border-top: 1px solid #d7d7d7;
		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:#777}
	
	#mobile-menu { display: none; }
	
	/* Mobile menu trigger  */
				
	#mobile-menu-trigger { 
		position: absolute;
		top:1px;
		right:180px;
		display: none; 
		font-size:2.3em;
		text-transform: uppercase;
		color: #000;
		z-index: 100000;
	}				
	
/* #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-text{
		display: block;
		position: relative;
		padding:60px 50px;
		min-height: 350px;
		box-sizing: border-box;
	}
	.focus-text h4{
		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-text p,
	.subfocus-text-left p,
	.subfocus-text-right p{
		font-size:1.25em;
		font-weight: 300;
		text-align: justify;
	}
	.focus-section ul li,
	ul.fill-circle li{
		margin-bottom: 5px;
	}	
	.focus-text img{
		top:-5px;
		position:absolute;
	}
	.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;
	}

	/* Flex Sections */

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

	.flex-three{
		display:flex;
		align-content: flex-start;
		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-three .flex-item:nth-child(3){
		xborder:1px solid red;
		margin-right: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, #ccc) 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;
  filter: blur(var(--glow-size, 1.2rem));
}

.glowing-border::after {
  z-index: -2;
  inset: -1.5rem;
  background: conic-gradient(from var(--glow-deg), var(--gradient-glow));
  filter: 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;
  }
}


/*********** 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;
	border: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:1280px) {
		#menu { display: none; }
		
		#mobile-menu-trigger { 
			display: inline-block;
			margin:0;
			float:right;
		}	
	}

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

	@media screen and (max-width:980px) {
		.img-align-right{
			float:none;
			margin-left:0px;
		}
		.focus-text{
			padding:60px 20px 20px;
			min-height:auto;
		}
		.focus-text img{
			top:15px;
		}
		.focus-text img.img-float-right{
			right:-2%;
		}
		#footer{
			margin-top: 60px;
		}
	}

	
	@media (max-width: 767px) {
	
		.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: 130px;}
		.callus-now .btn,
		.btn{
			width:100%;
			text-align: center;
		}
		.text-justify{
			text-align: left;
		}
	}	

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

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

		.text-right { text-align: left; }
		.text-center { text-align: left; }  		
		

  	}

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

		#mobile-menu-trigger { 
			display: inline-block;
			margin-right:0px;
			margin:15px 0 0px 0;
		}	
  	}