/**
Color Codes
------------
brown: #986665;
green: #98cb00;
orange: #cc6733;
blue: #3398cc;
dark-gray: #676767;
light-gray: #999999;
text-gray: #6b6b6b;
*/

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #6b6b6b;
  overflow-x: hidden;
}

a,
button {
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none;
}

hr { 
	background-color: #986665;
    border: 0 none;
    color: #986665;
    height: 2px;
}

p {
  line-height: 1.8;
  margin-bottom: 10px;
  text-align: justify;
}

/**
 * 
 * common classes used throughout
 *
 */

.container-fluid {
  max-width: 1200px;
}

.bg-black-transparent {
  background: url('/img/rgba.php?r=0&g=0&b=0&a=50');
  background: rgba(0, 0, 0, 0.5);
}

.bg-white-transparent {
  background: url('/img/rgba.php?r=255&g=255&b=255&a=80');
  background: rgba(255, 255, 255, 0.8);
}

.bg-green {
  background-color: #98cb00;
}

.bg-orange {
  background-color: #cc6733;
}

.bg-blue {
  background-color: #3398cc;
}

.bg-dark-gray {
  background-color: #676767;
}

.parallax-window {
  min-height: 1200px;
  background: transparent;
}

.text-green {
  color: #98cb00;
}

.text-orange {
  color: #cc6733;
}

.text-blue {
  color: #3398cc;
}

.text-dark-gray {
  color: #676767;
}

.text-gray {
	color: #6b6b6b;
}

.title-small {
  font-size: 1.3rem;
}

/**
 *
 *  Primary Nav section
 *
 */

#divPrimaryNav {
  background-color: #FFF;
  height: 60px;
  height: 80px;
  position: fixed; 
  top: 0; 
  left: 0;
  margin-bottom: 5px;
  width: 100%;
  z-index: 999999999999999999998;
  border-bottom: 2px solid blue;
  padding-bottom: 5px;
}

#divPrimaryNav #name {
	float: left;
	text-align: left;
	padding-left: 20px;
}

#divPrimaryNav #tagline {
	font-family: Brush Script MT, Brush Script Std, cursive;
	padding-left: 30px;
}

#divPrimaryNav #menu {
	font-size: 12pt;
	text-align: right;
	padding-right: 20px;
	padding-top: 10px;
}

#divPrimaryNav #menu a {
	color: #986665;
	cursor: pointer;
}

#divPrimaryNav .navbar {
	padding: 0px;
}

.navbar-collapse.collapse.in {
  display: block!important;
}

.bg-light {
	background: transparent !important;
}


/*
 *
 * All pages (except welcome page) primary content is pushed down
 *
 */
#divAbout,
#divApproaches,
#divContact,
#divIndividualTherapy,
#divResources,
#divServices,
#divWelcome { 
	padding-bottom: 100px;
	padding-top: 100px;
}


/**
 *
 *  Landing/Welcome section
 *
 */

#divWelcome {
	background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
	background: rgba(255,255,255,0.75);
	/*min-height: 750px !important;*/
	position: relative;
	/*display: flex;*/
	align-items: center;
	/*padding-top: 200px;
	padding-top: 100px;*/
	padding-top: 150px;
}

.welcome-container {
  min-height: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.welcome-title {
  margin-bottom: 40px;
}

.welcome-left {
  padding-right: 30px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.welcome-left-col {
  display: flex;
  align-items: center;
}

.welcome-right {
  color: white;
  background-color: #986665;
  background: url('/img/Emotional-Foc-Therapy-for-Couples-768x512.jpg');
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 30px 40px rgba(0,0,0,.1);
  border-radius: 40px;
  padding: 80px 43px 70px;
  height: 100%;
}

/**
 *
 *  About section
 *
 */

#divAbout {
  /*padding-top: 80px;*/
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
}

img#img-about-pic {
	display: none;
	float: left;
	width: 150px;
	height: auto;
}

img#img-profile-pic {
	border-radius: 10px;
	display: block;
	width: 200px;
	height: auto;
}

/*
div#div-about-pic img {
	border-radius: 10px;
}
*/

.about-item {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
}

.about-name {
  font-weight: bold;
}

.about-name {
  width: 330px;
  height: 220px;
  font-size: 2rem;
  padding: 70px 95px;
  display: flex;
  align-items: center;
  text-align: center;
}

.about-description {
  color: #000;
  /*width: calc(100% - 330px);*/
  padding: 20px 45px;
}

.about-description h3 {
  font-weight: bold;
  margin-bottom: 20px;
}


/**
 *
 *  Services section
 *
 */

#divIndividualTherapy {
  /*padding-top: 80px;
  padding-top: 100px;*/
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
}

#divFamilyTherapy {
  padding-top: 80px;
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
}

#divCouplesTherapy {
  padding-top: 80px;
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
}

/*
.divPortfolio {
  padding-top: 80px;
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
}
*/

div#profile-pic img {
	border-radius: 10px;
}

.portfolio-item {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
}

.portfolio-name {
  font-weight: bold;
}

.portfolio-name {
  width: 330px;
  height: 220px;
  font-size: 2rem;
  padding: 70px 95px;
  display: flex;
  align-items: center;
  text-align: center;
}

.portfolio-description {
  color: #000;
  width: calc(100% - 330px);
  padding: 20px 45px;
}

.portfolio-description h3 {
  font-weight: bold;
  margin-bottom: 20px;
}


/* SEE ALSO links for Services */

div.see-also { 
	display: block;
	margin-top: 150px;
	font-size: small;
	float: left;
	position: absolute;
	/*top: 300px;
	left: 850px;*/
	text-align: left;
	width: 330px;
}

div.see-also.left { 
	left: 20px;
	top: 350px;
}

div.see-also.right { 
	left: 860px;
	top: 300px;
}

p.see-also {
	/*color: #986665;*/
	font-size: small;
	font-weight: bold;
}

.see-also a,
.see-also a:visited,
.see-also a:hover,
.see-also a:link {
	/*color: #986665;*/
	cursor: pointer;
    text-decoration: none;
}
.see-also a:hover {
    text-decoration: underline;
}

/* orange text links */
.see-also a.text-orange,
.see-also a.text-orange:visited,
.see-also a.text-orange:hover,
.see-also a.text-orange:link {
	color: #cc6733;
}

/* blue text links */
.see-also a.text-blue,
.see-also a.text-blue:visited,
.see-also a.text-blue:hover,
.see-also a.text-blue:link {
	color: #3398cc;
}

/* gray text links */
.see-also a.text-gray,
.see-also a.text-gray:visited,
.see-also a.text-gray:hover,
.see-also a.text-gray:link {
	color: #6b6b6b;
}


/*
  Approaches section
*/

.divApproaches {
  min-height: 1350px;
  /*padding-top: 80px;*/
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
}

.approaches-item {
  height: auto;
  /*background-color: white;*/

/*  padding: 15px 34px 44px;*/


/*  background-color: #986665;
  background:rgba(152,102,101,0.25);
*/
  color: #000;
  width: 100%;
  max-width: auto;
  min-height: auto;
 }

.approaches-item:last-child {
  margin-right: 0;
}

.approaches-items-container {
  display: flex;
  /*font-size: small;*/
  justify-content: space-between;
  margin-bottom: 130px;
  /*background:rgba(152,102,101,0.25);*/
}

.approaches-item-title {
	font-weight: bold;
	margin-bottom: 5px;
}

.approaches-item-icon {
  margin-bottom: 45px;
  margin-bottom: 5px;
  width: 100%;
  height: 160px;
  height: 20px;
  display: flex;
  display: inline;
  align-items: center;
  justify-content: center;
}

/*
  Contact section
*/

#divContact {
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
  color: #000;
  display: flex;
  /*padding-top: 80px;*/
  /*text-align: center;*/
}

#divContactForm {
  width: 100%;
  max-width: 680px;
  padding: 45px 45px 30px;
  margin-bottom: 95px;
}

#frmContactForm {
	background: #FFF;
	border: solid 1px #80bdff;
    border-radius: 10px;
}

#frmContactForm .form-control {
	border: none;
	border-bottom: solid 1px #80bdff; 
	max-width: 355px;
	max-width: 100%;
	padding: 15px 10px;
	font-size: 1.1rem;
	margin-bottom: 10px;
	margin-top: 10px;
}

#frmContactForm .form-control:active,
#frmContactForm .form-control:focus {
	border: none;
	border-bottom: solid 1px #80bdff; 
	box-shadow: none;
}

#frmContactForm #contact_message {
	min-height: 100px;
}

/*
.form-control {
  background: transparent;
  border-color: #999999;
  border-color: #80bdff;
  padding: 15px 10px;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
*/

.btn-submit {
  background-color: #999999;
  background-color: #80bdff;    /* full opacity */
  border-radius: 10px;
  color: #986665;
  padding: 12px 30px;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.btn-submit:focus,
.btn-submit:hover {
  background-color: #676767;
  background-color: #6680bdff;  /* 40% opacity */

}

.contact-address-field {
	font-size: small;
	margin-top: 20px;
}

/*
  Resources section
*/

#divResources {
  background: url('/img/rgba.php?r=255&g=255&b=255&a=75') repeat;
  background: rgba(255,255,255,0.75);
  color: #000;
  display: flex;
  font-size: 12pt;
  /*min-height: 400px !important;*/
  /*padding-top: 50px;
  padding-top: 100px;*/
}

/* 
  Footer 
*/
#divFooter {
  background-color: #FFF;
  z-index: 999999999999999999999;
  border-top: 2px solid blue;
  padding-top: 5px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 35px;
}
.copyright-text {
  color: #986665;
  font-size: small;
  text-align: center;
}

.link {
  color: #676767;
}

@media (max-width: 1054px) {
	.contact-item-icon {
		margin-bottom: 15px;
	}
}

@media (max-width: 991px) {
	.contact-items-container {
		flex-direction: column;
	}

	.contact-item {
		width: auto;
		max-width: 680px;
		min-height: 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}

	.contact-item:last-child {
		margin-right: auto;
		margin-bottom: 0;
	}

	.form-group {
		max-width: 100%;
	}
	/*
	#frmContactForm {
		margin-left: auto;
		margin-right: auto;
	}
	*/
}

@media (max-width: 730px) {

	#divPrimaryNav #menu { padding-top: 5px; }
	.bg-light { background-color: #FFF !important; }
	.navbar-nav .nav-link { 
		background-color: #FFF !important;
		border: solid 1px rgba(0,0,0,.1);
		padding: 5px; 
	}

	#divWelcome,
	#divAbout,
	#divIndividualTherapy,
	#divFamilyTherapy,
	#divCouplesTherapy,
	#divApproaches,
	#divContact,
	#divResources {
		background: #FFF !important;
		min-height: auto;
		/*padding-bottom: 0px;
		padding-top: 0px;*/
		text-align: justify;
	}

	.approaches-item-title {
		text-align: left;
	}

	/*#divWelcome { background: #1ACCCCCC !important; }*/
	#divWelcome {
		max-height: 300px;
	}
	
	.portfolio-item {
		flex-direction: column;
	}

	.portfolio-name {
		display: none;
		justify-content: center;
	}

	.portfolio-name,
	.portfolio-description {
		width: 100%;
	}

	.portfolio-description {
		padding: 20px 30px;
	}

	.portfolio-description h3,
	h3.portfolio-description {
		text-align: center;
	}

	#divAbout #div-about-pic {
		display: none;
	}
	
	#divAbout #img-about-pic {
		display: inline;
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
		width: 50px;
		height: auto;
	}

}

/* real small screens no tag line */
@media (max-width: 500px) {
	#divPrimaryNav #tagline { display: none; }
}