/*=======Now online Version1 at bottom you can stop  animation =============   */
/* Table of Contents to organize this is mostly original plus Gym plus Dharma */
/* more notes here LOOK AT 263 or NAVBAR ITEM*/

/*    29-59  	--- iOS Landing Page Fix added from GYM or another Newbie--*/
/**   60-99 	More fudge space to insert something  until 100     */
/**  100-299    Global Styles	 */
/*-  300-331 	TI THIS IS RESPONSIVE 29  Welcome Start  ----------------------------*/
/*   332-419 	TI NAVIGATION changed container from 950 to 1440 DID NOT FIX NAVBAR etc */
/*            	--- --*/
/*   420-499   CAROUSEL IMAGE SLIDER note: transition speed location 430 also in the nav now caption there too..*/
/*   500-588 	-------- Slider Start  TI added padding bottom next   ----------------------------*/
/*   590-677   == HOME PAGE == TI added parallax section document in contents here*/
/*   678-724   -------- Paralax Start  --------*/
/*   725-759   -------- Quotes Start  --------*/
/*   760-949   == BXSLIDER NOT WORKING....added some space TI just tried to insert all of jquery.bxslider.css code */
/*   950-1049  ==== FOOTER and SOCKET change background color here to body maybe just cut if it is body?  =============*/
/*  1050-1089  === ABOUT PAGE includes Breadcrumbs   =============*/
/*  1090-1114  ============= PRICING PAGE =============*/
/*  1115-1149  ============= CONTACT PAGE =============*/
/*  1150-1269  ===== MEDIA QUERIES =============*/
/*  1270-1360  ======= BOOTSTRAP BREAK POINTS and also WAYPOINTS to control ANIMATION */
/*              =============padding============*/
/*              ======= padding*/



/*--- iOS Landing Page Fix --*/
.landing {
  position: relative;
  width: 100%;
  height: 100vh;
  display: table;
  background: #E9ECEF;
  z-index: -1;
}
.home-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.home-inner {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/** More fudge space to insert something  until 100     */

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




























/** Global Styles */

/* Css Imports  
@import url(cp_load.css);
@import url(prettyPhoto.css);
@import url(hover.css);
/** TI added next 2 - Dancing out? this was from ORIG plus Dancing from the massage web*/
. {
	font-family: 'EB Garamond', serif;
}   

.Sansita {
	font-family: 'Sansita Swashed', sans-serif;
}
/*
.Roboto {
	font-family: 'Roboto', sans-serif;
}  */
.Open {
	font-family: 'Open Sans', sans-serif;
}

.Garamond {
	font-family: 'EB Garamond', serif;
}   

.gap {
	clear: both;
	height: 40px;
}
.gap-50 {
	clear: both;
	height: 50px;
}
.gap-100 {
	clear: both;
	height: 100px;
}
.gap-30 {
	clear: both;
	height: 30px;
}
.gap-35 {
	clear: both;
	height: 35px;
}
.gap-45 {
	clear: both;
	height: 45px;
}
.gap-25 {
	clear: both;
	height: 25px;
}
.gap-20 {
	clear: both;
	height: 20px;
}
.gap-clear {
	clear: both;
	height: 10px;
}


/*-- iPhone X Remove Gutters    Ignore W3C Validation error for this style. --*/
html {
   padding: env(safe-area-inset);
}


/*-- Body color background to light pink/purple color to dark blue added overflow  #293346changed from f9f9f9   try it--*/
body {
	overflow-x: hidden;  /* right gutter fix */
   background: #e8e4e4;
   font-family: 'EB Garamond', sans-serif;
   font-size: 1.15rem;
   color: #000033;
}

/*-- Option: Add Extra Bootstrap Column Padding 
[class*="col-"] {
   padding: 1rem;
} --*/

/*-- Remove Blue Browser Outline Around Buttons in Chrome --*/
a:focus,
button:focus {
  outline: 0 !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}

/*-- Pointer Cursor On Links & Buttons --*/
a, .btn, button {
   cursor: pointer!important;
}

/*-- Max-width Container For Elements  TI changed from 1120 TO 1400 ADDED BACKGROUND didnt work
other than navbar, carousel, banner & footer  CHANGED MARGIN 0 AUTO TO 0 0  PADDING 0 .5rem to 0 0 --*/
.wrapper {
	
   max-width: 1800px;
   margin: 0 0;
   padding: 0 0;
   overflow: hidden;
}

/*--  TI took out uppercase 	text-transform: uppercase; changed h1 to EB Garamond ..--*/
h1 {
   font-family: 'EB Garamond', sans-serif;
	text-align: center;
	font-size: 175%;

	letter-spacing: .1rem;
	padding: .6rem 0;
}
/*--  TI  changed from Roboto Condensed.--*/
h2, h3, h4 {
   font-family: 'Sansita', sans-serif;
	text-align: center;

}
h5 {
   font-family: 'Sansita', sans-serif;  /*--  TI  changed from Open Sans 700.--*/
   font-weight: 600;
}
/*-- Make Paragraph 'lead' Class Text Larger--*/
p.lead {
   font-size: 1.1rem;
}
/*-- TI if trouble with p take out next ? had 3px 5px....WTF  
p {
	padding: 3px 5px;
}
-- TI added next */
li {
   color: #000033; 
}
/*-- Remove Link Color/Underline from Phone #s --*/
a {
   color: #293346;
}
a:hover {
   color: #293346;
   text-decoration: none;
}

/*-- Buttons TI took out    text-transform: uppercase; --*/
.btn {
   font-weight: 700;

   border-width: medium;
   padding: .6rem 1.2rem;
   margin: .5rem;
   box-shadow: 0 0 .5rem rgba(0, 0, 0, .08);
   transition: all .3s ease;
   border-radius: 0;
 }
.btn-blue {
   border-color: #53668c;
   background-color: #53668c;
   color: white;
 }
.btn-blue:hover,
.btn-blue:focus  {
   border-color: #2c3b59;
   background-color: #2c3b59;
   color: white;
}

/*-- Background Colors --*/
.bg-blue {
   background-color: rgba(66, 81, 112, .7);
   color: #FFF;
   box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
 }
.bg-clear {
   background-color: rgba(255, 255, 255, .8);
   color: #293346;
   box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}

/*-- Center All Images & Set Max Width --*/
img {
   display: block;
	margin: 0 auto;
   max-width: 100%;
}






















/*-  TI THIS IS RESPONSIVE 29  Welcome Start  ----------------------------*/
.welcome {
	position: relative;
	z-index: 200;
	background: rgba(105,117,89,0.9);
	padding: 48px 68px;
	text-align: center;
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) inset;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) inset;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25) inset;
	margin-top: -75px;
	z-index: 999;
}

.welcome h2.main-title {
	color: white;
}

.welcome-txt {
	font-size: 22px;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-weight: 200;
	line-height: 32px;
	margin-bottom: 24px;
	padding-top: 7px;
	max-width: 900px;
	margin: 0 auto;
	margin-bottom: 20px;
}
/*----------------------- Welcome End  ----------------------------*/

/*===== TI NAVIGATION changed container from 950 to 1440 DID NOT FIX NAVBAR
   padding: 0;
   background-color: #cc99ff; was rgba(66, 81, 112, .9)/* #53668c .his suggestion for non-transparent menu   I cut some rem here check his . */
.navbar {
   padding: 0;
   background-color: #cc99ff; /* #53668c (for non-transparent menu TI next line changed from .02*/
   box-shadow: 0 -.5rem .5rem .1rem rgba(0, 0, 0,.6);
   padding: .5rem 0 .3rem;
   font-family: 'EB Garamond', sans-serif;
   font-weight: 900;
	 z-index: 1;
/* TI   text-transform: uppercase;     Better to decide individually lower case in dropdown now and PHONE  changeed max width from 950-*/
}
.navbar .container {
   max-width: 1000px;
}
.navbar-brand img {
   height: 3rem;
}
.svg-inline--fa.fa-bars {
   color: #FFF;
   font-size: 1.7rem;
}
.navbar-nav li {
   padding-right: .5rem;
}
.navbar-nav .nav-link {
   font-size: 1.2rem;
   padding-top: 0rem;
	 padding-right: 6rem;
   color: #000033;
	 line-height: 60%; 
/*  added padding right above color: #F5F5F5;  TI */
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
	color: #f2f2f2!important;
/*   color: #FFF!important;  */
/*  TI changed red it is the item problem with active   border-bottom: .15rem solid #FFF; */
}
.nav-item {
   padding: .5rem .8rem .3rem .8rem;
}
/*  TI Changed ABOVE for the drop down to space better added this didnt work messed up Table of Contents now */
.nav-item.active {
	color: #f2f2f2!important;
}

/*--- Drop-down Menu TI dont want transparent--*/
.dropdown-menu, .dropdown-item {
   font-size: 1.1rem;
   font-weight: 400!important;
   background-color: #cc99ff; /* #53668C;(for non-transparent menu) */
   border: 0;
   color: #000033;
   text-align: center;
   padding: 0;
	 z-index: 10000;
}
.dropdown-menu {
   /*background-color: #53668C; (was transparent for non-transparent menu) */
	 background-color: #cc99ff;
   margin-top: 0!important;
   border-radius: 0;
   z-index: 10000;
}
.dropdown-menu:hover, .dropdown-item:hover,
.dropdown-menu:focus, .dropdown-item:focus,
.dropdown-toggle:active, .dropdown-toggle:focus {
   color: #000066!important;
   background-color: #cc99ff; /*#53668C (for non-transparent menu) */
}
.dropdown-item {
   padding: .3rem 0!important;
}
.dropdown-item:hover {
   text-decoration: underline;
	 background-color: #cc99ff;
}
.dropdown-submenu > .dropdown-menu {
   width: 100%;
   z-index: 1000;
}
	 /*  TI cut rgba(66, 81, 112, .9); #53668C (for non-transparent menu) */
li.nav-item.dropdown.show ul {
   background-color: #cc99ff; 
   margin-top: .3rem!important;
}
.dropdown.show ul li.dropdown-submenu ul {
   background-color: #cc99ff; /*#53668C (for non-transparent menu) */
   margin-top: 0!important; 
}






/*  420 ====== CAROUSEL IMAGE SLIDER =============*/

.carousel-inner {
   max-height: 38rem!important;
   box-shadow: 0 .65rem .65rem .1rem rgba(0, 0, 0,.15);
}
.carousel-inner img {
   min-width: 100%;
}

/*-- Change Carousel Transition Speed --*/
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
   display: block;
   transition: -webkit-transform 1.2s ease;
   transition: transform 1.2s ease;
   transition: transform 1.2s ease,-webkit-transform 1.2s ease;
}

/*-- Carousel Previous & Next Buttons --*/
.carousel-control-prev,
.carousel-control-next {
   width: 8%;
   cursor: pointer!important;
}
.carousel-control-next {
   padding-right: 3.2rem!important;
}
.carousel-control-prev .svg-inline--fa,
.carousel-control-next .svg-inline--fa {
   position: absolute;
   font-size: 2.5rem!important;
   padding: .2rem .6rem;
   color: #293346;
   background-color: #FFF;
   opacity: .6;
   transition: all .5s ease;
}
.carousel-control-prev .svg-inline--fa:hover,
.carousel-control-next .svg-inline--fa:hover {
   color: #293346;
   background-color: #FFF;
   box-shadow: 0 0 .65rem rgba(0, 0, 0, .15);
   opacity: 1;
   cursor: pointer;
   transition: all .5s ease;
}

/*-- Make Carousel Prev/Next Buttons Visible On Hover --*/
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s linear 1000s, opacity 1000ms;
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
   visibility: visible !important;
   opacity: 1;
   transition: visibility 0s linear 0s, opacity 1000ms;
}

/*-- Carousel Caption --*/
/*TI try changing translateY now 18 works was 25 top 45%* ROW stuff padding in the carosel */
.carousel-caption {
   left: 12%;
   right: 12%;
   position: absolute;
   transform: translateY(-18%);
/*	 transform: translateX(-2%);  TI  next top has no effect? created problems for some */
   top: 45%;
 }
 .carousel-caption.text-left {
    top: 35%;    /*  they were together the same  TI this is 35%------------------*/
 }
 .carousel-caption.text-right {
   top: 35%;    /*  TI this is 35%------------------*/
 }
 .carousel-caption p {
   font-weight: 500;
	 font-size: 12px;
 }

/*  TI Just an experiment-------------
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
*/

/*     500-   -------- Slider Start  TI added padding bottom next   ----------------------------*/
.main-slider {
	position: relative;
	width: 100%;
	z-index: 9;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
	padding-bottom: 7rem;
}
.main-slider span:after, .main-slider span:before {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0px;
}
.header-slider img {
	width: 100%;
}
.spbg {
	background: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1111;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	display: none !important
}
.slider-text {
	background: rgba(0,0,0,.40);
	border: rgba(255,255,255,.50) solid 1px;
	position: absolute;
	left: 33%;
	right: 33%;
	border-radius: 10px;
	padding: 50px 87px;
	top: 31.5%;
	z-index: 11;
	text-align: center;
}
.slider-text h1 {
	color: #FFF;
	font-size: 36px;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
	margin: 0 0 20px 0;
	padding: 0px;
}
.slider-text p {
	font-size: 16px;
	color: #FFF;
	line-height: 30px;
}
.main-slider .bx-controls-direction {
	position: absolute;
	left: 47%;
	right: 47%;
	bottom: 31.5%;
	z-index: 11;
}
.main-slider .bx-wrapper .bx-controls-direction a {
	text-indent: 0px;
	font-size: 0px;
}
.main-slider .bx-wrapper .bx-prev, .main-slider .bx-wrapper .bx-next {
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	background: none;
	box-shadow: 0 0 2px rgba(0,0,0,.5);
	height: 43px;
	width: 43px;
}
.main-slider .bx-wrapper a.bx-prev:after, .main-slider .bx-wrapper a.bx-next:after {
	content: "";
	color: #FFF;
	font-size: 20px;
	font-family: FontAwesome;
	line-height: 40px;
	padding-left: 16px;
	text-decoration: none;
	float: left;
}
.main-slider .bx-wrapper a.bx-next:after {
	content: "";
}
.main-slider .bx-wrapper .bx-prev:hover, .main-slider .bx-wrapper .bx-next:hover {
	background: rgba(255,255,255,.25)
}
/*----------------------- Slider End  ----------------------------*/

/*    590-    ============= HOME PAGE =============*/

/*-- Home Page Heading --*/
h1.title {
   font-size: 2.5rem;
}

/*-- Blue Border Under Heading --*/
hr.border-blue {
   max-width: 96%;
   margin: 0 auto;
   border-top: .3rem solid #405580;
}

/* Add Border Radius & Shadow to Images --*/
img.round {
   border-radius: .2rem;
   box-shadow: 0 0 .65rem rgba(0, 0, 0, .1);
}

/*-- List Item Box --*/
.list-group {
   box-shadow: 0 0 .65rem rgba(0, 0, 0, .1);
}
.list-group li {
   background-color: #f9f9f9;
   text-align: center;
   padding: .4rem;
   color: #53668C;
   font-size: 1.25rem;
   letter-spacing: .1rem;
}
.list-group .svg-inline--fa {
   font-size: 1.8rem;
   margin-right: .7rem;
   color: #53668C;
}

/*-- Border Around Callout Text & Button --*/
.callout-border {
   border: .15rem solid #405580;
   box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
}
/*----------------------- TI from ORIG Inner Start  ----------------------------*/
.inner #header {
	position: relative;
	top: 0px;
	background: #FFF;
	box-shadow: 3px 0px 5px rgba(0,0,0,.35);
	z-index: 99;
	height:102px;
}
.inner .logo {
	background: none;
	padding: 20px 0px;
}
.inner .navbar-nav > li > a {
	color: #e96f91;
	border-bottom: 4px solid rgba(0,0,0,0);
}
.inner .nav > li > a:hover, .inner .nav > li > a:focus {
	border-bottom: 4px solid #e96f91;
}
.inner-titlebg {
	background-image: url(../images/quote-bg2.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 88;
	padding: 10px 0 0 0;
	width: 100%;   /* TI added changed photo was title-bg.jpg  */
}
.inner-titlebg h2 {
	color: #FFF;
	font-size: 50px;
	font-weight: 200;
	padding-bottom: 10px;
	text-shadow: 2px 0 3px rgba(0,0,0,0.9);
	text-align: center;
}
.inner-titlebg h5 {
	color: #000;
	font-size: 13px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
/*-------- TI Inner End  --------*/

/*  678-     -------- Paralax Start  TI changed first block mb 45 and mt 20  too much--------*/


#paralax {
	background: url(../images/hsparalax1.jpg) 50% 0 no-repeat fixed;
	height: 605px;
	width: 100%;
	background-size: cover;
	padding: 100px 0;
	margin-bottom: 25px;
	margin-top: 0px;
}
#paralax img {
	border: #ebe6de solid 1px;
	box-shadow: 0 0 5px rgba(0,0,0,.70);
}
#paralax h2 {
	font-size: 35px;
	color: #FFF;
	font-weight: 300;
	margin-bottom: 20px;
	line-height: 85%;
}
#paralax p {
	font-size: 14px;
	color: #FFF;
	line-height: 24px;
}
#paralax ul > li {
	font-size: 14px;
	line-height: 26px;
	color: #FFF
}
#paralax ul > li:before {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 14px;
	color: #FFF;
	margin-right: 15px;
}
#paralax button {
	background: none;
	color: #FFF;
	margin-top: 18px;
}
/*============= TI end parallax  =============*/

/*  725-     -------- Quotes Start  --------*/
.quote-bg {
	background-image: url(../images/quote-bg.jpg);
	background-size: cover;
	min-height: 280px;
	padding: 50px 0;
	text-align: center;
	color: #FFF;
	font-size: 16px;
	margin-top: 40px;
	margin-bottom: 5px;
}
.quote-bg i {
	font-size: 40px;
	margin-bottom: 17px;
}
.quote-bg p {
	line-height: 24px;
	margin-bottom:20px;
}
.quote-bg img {
	border-radius: 75px;
	border: 2px solid #fff;
	margin-top: 13px;
	height: 72px;
	width: 72px;
	text-align: center;
	margin: 0 auto;
}
.quote-bg .bx-wrapper .bx-controls-direction {
	display: none
}

/*--------TI  Quotes end and the MAIN page ends if I keep that term DID NOT WORK --------*/

/** 760-          BXSLIDER NOT WORKING....added some space TI just tried to insert all of jquery.bxslider.css code */
/** BxSlider v4.0 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2012
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(../images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(../images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 99;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(../images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(../images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}
.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}
/* END BXSLIDER code */
/* 950-     ============= FOOTER change background color here to body maybe just cut if it is body?  =============*/

.footer {
   background-color: #e8e4e4;
   box-shadow: 0 0 .8rem .1rem rgba(0, 0, 0,.08);
}
.footer h3 {
   font-size: 1.5rem;
   text-decoration: underline;
   padding-bottom: 1rem;
}
.footer img { /*-- (logo) --*/
   max-width: 15rem;
   padding-bottom: .5rem;
}
.footer a {
   color: black;
}
.footer p {
   color: black;
}

/*-- Footer Social Icons --*/
.footer ul.social li {
   padding: .5rem .5rem;
}
.footer .svg-inline--fa {
   color: #black;
   font-size: 1.9rem;
   transition: all 0.5s ease 0s;
   box-shadow: 0 0 .15rem rgba(0, 0, 0, .1);
}
.footer .svg-inline--fa:hover {
   color: #7a859a;
}
.footer h3 {
   text-decoration: none;
}

/*-- Footer List Group --*/
.footer .list-group {
   box-shadow: none;
}
.footer .list-group-item {
   border-radius: 0!important;
}
.footer .list-group li {
   background-color: #454545;
   text-align: center;
   padding: .6rem 0 .4rem;
   color: #FFF;
   border: .05rem solid #7c7c7c;
   font-size: 1.25rem;
   letter-spacing: .1rem;
}
.footer .list-group .svg-inline--fa {
   font-size: 1.8rem;
   margin-right: .7rem;
   color: #53668C;
}

/*-- Socket Copyright --*/
.socket {
   background-color: #3c3c3c;
   color: #c1c1c1;
}
.socket a {
   color: #c1c1c1;
}

/*-- Top Scroll Button --*/

.scroll-container {
   width: 2.2rem;
   float: right;
}
.top-scroll svg.svg-inline--fa {
   font-size: 1.6rem!important;
   height: 2.2rem;
   width: 2.5rem;
   color: #293346;
   background-color: white;
   box-shadow: 0 0 .5rem rgba(0, 0, 0, .05);
   transition: all .5s ease;
}
a.top-scroll {
   bottom: 1.2rem;
   position: fixed;
   opacity: .3;
   z-index: 1000;
   display: none;
}
a.top-scroll:hover {
   opacity: .9;
   transition: all .5s ease;
}
 



/* 1050-              ============= ABOUT PAGE =============*/

/*-- Breadcrumbs (all pages other than home page) --*/
.bread-banner {
	width: 100%;
	height: 4.5rem;
   background-color: #DCDCDC;
   color: #394560;
}
.bread-banner a {
   color: #394560;
}
.bread-banner a:hover {
   color: #5e74a0;
}

/*-- Bootstrap Cards (Meet Trainers) --*/
.card {
   box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
   background-color: #f9f9f9;
   border-radius: .5rem;
}
.card-img-top {
   border-radius: .5rem .5rem 0 0;
   box-shadow: 0 .5rem .5rem rgba(0, 0, 0, .05);
}
.card ul.social li {
   padding: .5rem .5rem;
}
.card .svg-inline--fa {
   color: #647597;
   font-size: 1.7rem;
   transition: all 0.5s ease 0s;
   box-shadow: 0 0 .15rem rgba(0, 0, 0, .1);
}
.card .svg-inline--fa:hover {
   color: #293346;
}


/*1090 -         ============= PRICING PAGE =============*/

/*-- Pricing Table --*/
table, tr {
   border: .15rem solid #405580;
}
.thread-green {
   background-color: #405580;
   border-bottom: .15rem solid #405580;
}
thead th, thead td {
   color: white;
   border-top: 0!important;
   border-bottom: 0!important;
   border-right: .1rem solid #9faabf;
}
th, td {
   font-weight: 700;
   color: #405580;
   border-right: .1rem solid #000;
}
td .svg-inline--fa {
   font-size: 1.3rem;;
}

/*  1115 -          ============= CONTACT PAGE =============*/

/*-- Contact Form --*/
.form-group {
   margin-bottom: 1.3rem;
   box-shadow: 0 0 .2rem rgba(0, 0, 0, .05);
}
.form-control {
   background: #f9f9f9;
   border-radius: .1rem;
   border: .15rem solid #7988a6;
   color: #334466!important;
   font-size: 1.1rem;
}
.form-control:focus {
   background: #f5f6f8;
   border: .15rem solid #334466;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
   color: #8E7A6D;
}
input.btn {
   float: right;
}
.controls input:focus,
.controls textarea:focus { /*-- Remove Element Outlines in Contact Form --*/
  outline: 0 !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}




/*  1150-          ===== MEDIA QUERIES =============*/
/*TI first one is from ORIG note: I changed up top to same for titlebg so can cut but here CHANGED TOP TO 0*/
@media (max-width: 1169px) {
/*.home logo, .home .logo {
	margin-bottom: 5px;
	padding: 15px 15px 20px !important;
	background: rgba(95,88,103,.9);
	}
	.sticky logo, .sticky .logo {
	background: none;
	}
*/
.carousel-caption {
   left: 12%;
   right: 12%;
   position: absolute;
   transform: translateY(-8%);
/*	 transform: translateX(-2%);  TI translate Y 18 to 15 */
   top: 45%;
 }
	.inner-titlebg {
	background-size: 100%;
	position: relative;
	z-index: 88;
	padding: 10px 0;
	margin-top: 0px;
 	}
	
	.inner-titlebg h2 {
		font-size: 34px; /* TI cut from 50 */
	}
}


/* Large (lg) devices (desktops, 992px and under) */
@media (max-width: 991.98px) {
   .navbar {
      padding: .25rem 5rem;
   }
   .navbar-nav .nav-link {
      font-size: 1.2rem;
   }
   .navbar-nav .nav-link.active,
   .navbar-nav .nav-link:hover {
      border-bottom: 0;
      text-decoration: underline;
   }
   li.nav-item.dropdown.show ul {
      background-color: transparent;
      margin-top: .3rem!important;
   }
   .dropdown.show ul li.dropdown-submenu ul {
      background-color: transparent;
      margin-top: 0!important; 
   }
   a.dropdown-item {
      text-align: left;
   }
   .carousel-caption h2 {
      font-size: 1.7rem;
   }
	   body {
		 font-size: clamp(100%,1rem + 2vw,24px)
	 }
	 	    h4{
      font-size: 1rem;
   }
	 .dropdown-item {
   padding: .1rem 0!important;
	  line-height: 100%;
}
}

/* Medium (md) TI BUT THIS IS MY PHONE LANDSCAPE TRY BODY CLAMP  devices (tablets, 768px and under) */
@media (max-width: 767.98px) {
   header img {
      max-width: 20rem;
   }
   .navbar {
      padding: .2rem 2rem;
   }
   .navbar-nav .nav-link {
      font-size: 1.1rem;
			line-height: 60%;
   }
   .dropdown-menu, .dropdown-item {
      font-size: 1rem;
    }
   .carousel-caption {
      top:38%;
   }
   .carousel-caption h2 {
      font-size: 1.2rem;
   }
   .btn {
      padding: .45rem 1rem;
   }
   h1.title {
      font-size: 2rem;
   }
   p.lead {
      font-size: 1rem;
   }
   th, td {
      font-size: .7rem;
   }
   td .svg-inline--fa {
      font-size: 1rem;;
   }
	  body {
		 font-size: clamp(100%,.3rem + 1.5vw,22px)
	 }
	 .dropdown-menu:hover, .dropdown-item:hover,
.dropdown-menu:focus, .dropdown-item:focus,
.dropdown-toggle:active, .dropdown-toggle:focus {
   color: #000066!important;
   background-color: #cc99ff; /*#53668C (for non-transparent menu) */
	 line-height: 80%;
}
.dropdown-item {
   padding: .1rem 0!important;
	  line-height: 90%;
}
.dropdown-item:hover {
   text-decoration: underline;
	 background-color: #cc99ff;
	  line-height: 80%;
}
.dropdown-submenu > .dropdown-menu {
   width: 100%;
   z-index: 1000;
	  line-height: 80%;
}
	 /*  TI cut rgba(66, 81, 112, .9); #53668C (for non-transparent menu) */
li.nav-item.dropdown.show ul {
   background-color: #cc99ff; 
   margin-top: .3rem!important;
}
.dropdown.show ul li.dropdown-submenu ul {
   background-color: #cc99ff; /*#53668C (for non-transparent menu) */
   margin-top: 0!important; 
}
}

/* Small (sm) devices (landscape phones, 576px and under)  TI added h4 at bottom mainly for welcome */
@media (max-width: 575.98px) {
   .navbar {
      padding: .2rem .5rem;
   }
   .navbar-nav li {
      border-top: 0;
   }
   .carousel-caption {
      top:32%!important;
   }
   .carousel-caption h2 {
      font-size: 1.3rem;
   }
   .btn {
      padding: .4rem .9rem;
   }
   h1.title {
      font-size: 1.8rem;
   }
   h2 {
      font-size: 1.7rem;
   }
   h3 {
      font-size: 1.6rem;
   }
	    h4{
      font-size: 1.4rem;
   }
	   }
	    h5{
      font-size: 1.1rem;
   }
	  body {
		 font-size: clamp(100%, .3rem + 1vw,20px)
	 }
}

/*  1270  ============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

TI
X-Small	None	0–576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px


=============*/

/*============= WAYPOINTS =============*/

/*-- OPTION: TURN OFF ANIMATION OFF COMPLETELY::
Note: may effect line progress bar with slight delay,
line-progressbar waypoints can be adjusted at bottom of plugins.js.--*/


/* remove this CSS comment to activate

.animated, .os-animation {
  -webkit-animation: none!important;
  -moz-animation: none!important;
  -o-animation: none!important;
  animation: none!important;
  opacity: 1!important;
  -webkit-animation-delay: none !important;
  -moz-animation-delay: none !important;
  animation-delay: none !important;
  }

*/

/*-- OPTION: TURN OFF ANIMATION ON MOBILE::
Note: may effect line progress bar with slight delay,
line-progressbar waypoints can be adjusted at bottom of plugins.js.--*/


/* remove this CSS comment to activate

@media (max-width: 767px) {
	.animated, .os-animation {
	  -webkit-animation: none!important;
	  -moz-animation: none!important;
	  -o-animation: none!important;
	  animation: none!important;
	  opacity: 1!important;
	  -webkit-animation-delay: none !important;
	  -moz-animation-delay: none !important;
	  animation-delay: none !important;
	  }
	}

*/

/*--- Prevent WayPoints from Browser Window Scrolling On Mobile --*/
/* Devices under 768px (md) */
@media (max-width: 767px) {
   .row {
     overflow-x: hidden;
     overflow-y: hidden;
   }
 }
 
/*-- Don't modify waypoints CSS below,
this is required for waypoints to work --*/
.os-animation{
   opacity: 0;
   margin: 0!important;
   max-width: 100%;
}
.os-animation.animated {
   opacity: 1;
}