@charset "utf-8";
/* Stylesheet for Connections Marriage/family counceling
   last edited: 05/05/21 
   Created by: Ryan Kleban
*/
   
/* CSS Document */
/*animations to call later*/
@keyframes clientwarn{
	from {color: rgb(233,242,250);}
	to {color:rgb(236,49,52);}
}
* {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
#page-container {
  position: relative;
  min-height: 100vh;
}
main {
  padding: 0px 15px 7px;    /* Footer height */
}
body {
	height: 100vh;
	display: block;
	margin: 0px;
	padding: 0px;
	background:rgb(255,255,255);
	width: 100% !important;
	position: relative;
}
/*header styles*/
header {
	background: rgb(77,101,122);
	padding: 0px;
}
#hamnav label, #hamburger { display: none; } #hamnav ul {
	list-style: none;
	margin: 0px;
}
/*change color to white*/
#hamnav ul a {
	color:rgb(233,241,250);
	
}
#hamnav ul a:visited {
	color: rgb(233,241,250);
}
#fnav ul a{
	color: black;
}
#fnav ul a:visited{
	color: black;
}
#navphoto {
	float: left;
}

#personalphoto, #personalphoto2 {
	display: block;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto	
}

#nonewclients {
	margin: auto;
	width: auto;
	text-align: center;
	
}

#nonewclientsh4{
	width: auto;
	font-size: 16px;
	color: rgb(236,49,52);
	padding: 0px;
	margin-top:0px;
	animation: clientwarn;
	animation-duration: 5s;
	text-decoration: underline; 
}
#indexhead {
	position: relative;
	text-align: center; 
}
#nameandphoto {
	position: relative;
	text-align: center;
	margin: auto;
	padding: auto;
}

#indexname {
	position: absolute;
	width:100%;
	margin: auto;
}
/*increase font size*/
#indexname h2 {
	font-size: 28px;
	margin-top:-15px;
	text-shadow: 0px 0px 3px rgb(255,255,255);
} 
#indexphoto > img{
	border-radius: 50%;
}

#eft, #emdr {
	margin: 10px 0px;
}
#indexsection > h1 {
	text-align: center;
}
#indexsection h1 {
	font-size: 27px;
}

#eft, #emdr, #atstyles {
	border:1px solid rgba(77,101,122,.4);
	border-radius: 15px;
	border-left: none;
	border-right: none;
	background: radial-gradient(rgb(255,255,255),rgba(77,101,122,.3));
}
#emdr h2, #atstyles h2 {
	text-align: center;
}

#eftcontent, #emdrcontent, #atcontent, #about1, #about2 {
	margin: 0px 5px;
	padding: 5px 5px 0px;
}
#about2 {
	clear: both;
}
.officepicture{
	padding:auto;
	margin: auto 2.5px;
	float: left;
	clear: right;
}
.officepicture > img{
	width:100%;
	border-radius: 5px;
}
.serviceheader {
	position: relative;
	text-align: center;
}
.serviceh2 {
	position: absolute;
	top:-10px;
	width:100%;
	margin:auto;
	text-shadow: 0px 0px 3px rgb(255,255,255);
}

#attachmentvideo, #emdrvideo {
	width:100%;
}
#eftcontent p, #emdrcontent p, #atstyles p, section p {
	padding: 0px 6px;
	text-indent: 15px;
	word-break:keep-all;
}
#eftsource {
	list-style: none;
}

.cdatatype {
	font-weight: bold;
}
#ctable tr td{
	padding: 5px 0px;
}
#about1 h1{
	font-size: 28px;
	text-align: center;
}
#about1 h3 {
	text-align: center;
}
#csu {
	font-size: 18px;
}
#ftcol {
	font-size: 12px
}

#educationlist {
	list-style: square inside;
}

.recontent  {
	text-align: center;
	padding-top:1px;
}

.renum {
	text-decoration: none;
}
.inlinenum {
	display: inline-block;
}
.inlinenum ul {
	list-style: none;
}
/*insurance & rates*/
#rates h1{
	text-align: center;
	font-size: 27px;
	
}
.insurerates{
	
}
.insurerates h2{
	text-align: center;
	font-size: 22px;
}
/*contact styles */
	#contactinfo {
		margin: auto;
		width: 50%;
		padding-bottom:5px;
	}
	#cinfoh3 {
		text-align: center;
	}
	#cinfo {
		padding:0px;
		margin:auto;
	}
	#ctable {
		margin: auto;
			
	}

	#cmap{
		margin:auto;
		padding: 10px 0px;

	}
footer {
  	position:absolute;
  	bottom: 0;
  	width: 100%;
	background: rgb(255,255,255);
	display: inline-block;
	height: 7px;
}
#fnav {
	margin-bottom: 0px;
}

#fnav ul {
	list-style: none;
	background: rgb(255,255,255); 
}
#fnav li {
	padding: 0px 2px;
}
#fnav a {
	text-decoration: none;
}

footer small {
	color: rgb(103,103,103);
	padding-bottom:8px;
}

/*smartphone styles */
@media screen and (max-width:510px){
/*nav*/
	#navphoto{
		display: none;
	}
	#hamnav {
		width: 100%;
	}
	#hamnav label { 
   		display: inline-block; 
    	color: rgb(0,0,0);
    	font-style: normal;
    	font-size: 1.2em;
    	padding: 10px;

  	}
	#hamnav ul {
		padding-left: 0px;
		width: 200px;
	}
	#hamnav a {
		display: block;
		padding-left: 10px;
		padding-bottom: 3px;
		color: black;
		text-decoration: none;
	}
	#hamnav li a{
		padding-left: 10px;
		padding-bottom: 3px;
	}
	#hamnav a:visited {
		color: black;
	}

  /* Break down menu items into vertical */
  	#hamitems a {
    	box-sizing: border-box;
 	 }

  /* Toggle Show/Hide Menu */
  	#hamitems {
		display: none; 
	}
  	#hamnav input:checked ~ #hamitems { 
		display: block; 
	}
/*main (mobile)*/
/*Client resources page (mobile)*/
	.renum{
		text-decoration: none;
	}
	#indexsection h1 {
		font-size: 20px;
	}
	#indexsection h2 {
		font-size: 18px;
	}
	
	#indexphoto > img{
		width:50%;
	}
	#personalphoto, #personalphoto2 {
		width:50%;
	}
	.officepicture{ 
		width:32%;
	}
 /* client resources */
	.servicephoto {
	padding-top: 5px;
	width:72%;
	margin:auto;
	
}
	.servicephoto1, .servicephoto3{
		padding-top: 5px;
		width:72%;
		margin:auto;
}

	.servicephoto >img, .servicephoto1 >img, .servicephoto3>img{
		width:100%;
		margin:auto;
}

	.attachmenttest {
		color: black;
	}
	.servicevideo {
		width:100%;
		height:250px;
		padding-top:10px;
		margin: auto;
}
	#attachmentvideo,#emdrvideo {
		height:100%;
	}
 /*responsive map size (mobile)*/
	#cmap{
		overflow:hidden;
		padding-bottom: 95%;
		position:relative;
		height:0;
	}
	#cmap iframe {
		left: 0;
		top: 0;
		height: 100%;
		Width: 100%;
		position: absolute;
	}
/*footer (mobile)*/
	footer {
		text-align: center;
		margin-top: 2px;
	}
	footer li{
		display: inline-block;
	}

}
/*tablet styles*/
@media screen and (min-width: 510px) and (max-width:590px){
	#hamnav li {
		font-size: 16px !important
	}
	#navphoto {
		display: none !important;
	}
}
/*Tablet Styles*/
@media screen and (min-width: 510px) and (max-width: 905px) {
/*navigation*/
	header{
		height: 45px;
	}
	#navphoto {
	margin: 3px 0px 2px 5px;
	max-height: 40px;
	}
	#hamnav {
		display: inline-block;
		padding-top: 9px;
	}
	#hamnav ul {
		list-style: none;	
	}
	#hamnav li {
		display: inline;
		padding: 0px 2px 0px 3px;
		font-size: 18px;
	}

	#hamnav a {
		text-decoration: none;
	}
	
	#hamnav a:hover {
		text-shadow: 4px 2px 5px black;
	}
	
	#indexphoto > img{
		width:35%;
	}
	
	#eft{
		width:49.5%;
		float:left;
		margin-left: -2px
	}
	#emdr {
		width: 49.5%;
		float: right;
		margin-right: -2px;
	}
	#atstyles {
	clear: both;
}
/*About me (tablet)*/
	#personalphoto{
		width:30%;
	}
	#personalphoto2 {
		width: 35%;
	}
	.officepicture{
		width: 32%;
	}
/*Client resources page (tablet) */
	.servicephoto {
		padding-top: 10px;
		width:90%;
		margin:auto;
	
	}
	.servicephoto1 {
		padding-top: 10px;
		width:90%;
		margin:auto;
}
	.servicephoto3 {
		padding-top: 5px;
		width:70%;
		margin: auto;
	}
	.servicephoto >img, .servicephoto1 >img, .servicephoto3>img {
		width:100%;
		margin:auto;
	}
	.servicevideo {
		height: 400px;
		padding: 10px 5px 0px;
		margin: auto;
	}
	#attachmentvideo,#emdrvideo {
		height:80%;
	}
	#emdrvideo {
		padding:10% 0%;
	}
 /*responsive map size*/
	#cmap{
		overflow:hidden;
		padding-bottom: 80%;
		position:relative;
		height:0;
	}
	#cmap iframe {
		left: 0;
		top: 0;
		height: 100%;
		Width: 100%;
		position: absolute;
	}
/*footer (tablet)*/
	footer {
		text-align: center;
	}
	footer li{
		display: inline-block;
	}
	#fnav ul a:hover {
	text-shadow: 2px 2px 2px rgb(144,162,173);
	}

	#myname {
		font-size: 20px;
	}
}
/*labtop & desktop styles */
@media screen and (min-width: 906px) {

/*Top navigation */
	header{
		height: 50px;
	}
	#navphoto {
	margin: 3px 0px 2px 5px;
	max-height: 45px;
	}
	#hamnav {
		display: inline-block;
		padding-top: 8px;
	}
	#hamnav ul {
		list-style: none;	
	}
	#hamnav li {
		display: inline;
		padding: 0px 15px 0px 5px;
		font-size: 23px;
	}

	#hamnav a {
		text-decoration: none;
	}
	
	#hamnav a:hover {
		text-shadow: 4px 2px 5px black;
	}
/* Body (desktop/laptop)*/
	#indexname{
		padding-top:5px;
	}
	#indexphoto > img{
		width:25%;
	}
	#eft{
		width:49.5%;
		float:left;
		margin-left: -2px
	}
	#emdr {
		width: 49.5%;
		float: right;
		margin-right: -2px;
	}
	#atstyles {
		clear: both;
	}
/*about me (desktop)*/
	#personalphoto {
		width: 25%;
	}
	#personalphoto2 {
		width: 30%;
	}
	.officepicture{
		width: 32%;
		padding-left:2px;
	}
 /*Client resources page (desktop)*/
	.servicephoto {
		padding-top: 5px;
		width:50%;
		margin:auto;
	
	}
	.servicephoto1 {
		padding-top: 5px;
		width:72%;
		margin:auto;
	}
	.servicephoto3 {
		padding-top: 5px;
		width:50%;
		margin:auto;
	}
	.servicephoto >img, .servicephoto1 >img, .servicephoto3 >img {
		width:100%;
		margin:auto;
	}
	.servicevideo {
		width:65%;
		height: 400px;
		padding-top:10px;
		margin: auto;
}
	#attachmentvideo,#emdrvideo {
		height:100%;
	}

/*responsive map size (desktop)*/
	#cmap{
		overflow: hidden;
		padding-bottom: 95%;
		position: relative;
		height:0;
	}
	#cmap iframe {
		left: 0;
		top: 0;
		height: 100%;
		Width: 100%;
		position: absolute;
	}
/*footer (desktop/labtop)*/
	Footer {
		text-align: center;
	}
	Footer li {
		display: inline-block;
	}
	#fnav ul a:hover {
	text-shadow: 2px 2px 2px rgb(144,162,173);
}

}
