/* CSS Document */

/*
	font-family: 'Open Sans', sans-serif;
	font-family: 'Noto Serif SC', serif;

*/
/* Main Template body */
body 				{		
							font-family: Arial, Helvetica, sans-serif;
}

/* Main Template Wrapper */
.Wrapper			{		width: 900px;
							margin:10px auto;
							background-color:#FFF;
							padding:0 40px;
	
}

/* Main Template Top DIV */
#Top { }
.YSlogo 			{		float:left;
							padding:10px 0;
							

}
.Address	 		{
							float:right;
							text-align:right;
							padding:10px 0;
							font-size:12px;
							font-weight: bold;							
							
}

/* Main Template Navigation DIV */
.Nav 				{		clear: both;
							overflow: hidden;
							border-top: 1px;
							border-top-color: #999;
							border-top-style: solid;
							border-bottom: 1px;
							border-bottom-color:#999;
							border-bottom-style:solid;
							
}

/* Style the links inside the navigation bar */
.Nav a				{		float: left;
							display: block;
							font-size:12px; 
							font-weight:bold;
							text-align:center;
							text-decoration:none; 
							text-transform:uppercase; 
							padding:10px 10px;
}

/* Add an active class to highlight the current page */
.active {
	background-color: #FFF;
	color: white;
}

/* Hide the link that should open and close the nav on small screens */
.Nav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  							float: left;
  							overflow: hidden;
}

/* Style the dropdown button to fit inside the nav */
.dropdown .dropdownbtn {
							font-size: 12px;
							font-weight:bold;
							text-align:center;
							text-decoration:none; 
							text-transform:uppercase; 
							padding:10px 10px;
							border: none;
							outline: none;
							color: #000;
							background-color: #FFF;
							font-family: inherit;
							margin: 0;
}

.Nav a:hover, .dropdown:hover .dropdownbtn {
  							color:#F00;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
							display: none;
							position: absolute;
							background-color: #CCC;
							min-width: 120px;
							box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
							z-index: 1;
}

.dropdown-content a {		font-size:12px;
							float: none;
							color: black;
							padding: 2px 5px;
							text-decoration: none;
							display: block;
							text-align: left;
}

.dropdown-content a:hover {
  							background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  							display: block;
}

.Nav a:link			{		color:#000;}
.Nav a:visited		{		color:#000;}
.Nav a:active		{		color:#000;}
.Nav a:hover		{		color:#F00;}
.Nav a:focus		{		color:#f00;}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("About us"). Show the link that contains should open and close the nav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 900px) {
  .Nav a, .dropdown .dropdownbtn {
    display: none;
  }
  .Nav a.icon {
    float: left;
    display: block;
  }

  .Nav.responsive {position: relative;}
  .Nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .Nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .Nav.responsive .dropdown {float: none;}
  .Nav.responsive .dropdown-content {position: relative;}
  .Nav.responsive .dropdown .dropdownbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

.Wrapper {
	width: 100%
}

.YSlogo img{
	width: 100%;
}


.Address	{		
	clear: both;
	float: left;
	text-align: left;
	padding: 10px 0;
	font-size: 12px;
	font-weight: bold;					
				
}

.col 				{
							width: 25%;
														
}



}




/* Main Template Container */
#Container			{
							font-family: Arial, Helvetica, sans-serif;
}

.Maincontent 		{		float:left;
							width:900px;
	
}
.Maincontent p 		{
	clear:both;
	text-align:left;
}

.Photo  			{ 		float:right;
							width:230px;
							margin:30px auto;
							padding:20px auto;
}

.img_right			{		float: right;
							padding:20px 0px 10px 10px;
}

.img_left			{		float: left;
							padding:20px 0px 10px 0px;
}

/* Treatment Service div */
#Treatment 			{		text-align: center;
							
}


/* Treatment Service Box div */
.TBox 				{		float:left;
							width:300px;
							padding-top: 5px;
							padding-right: 0px;
							padding-bottom: 5px;
							padding-left: 0px;
}
							
/* Treatment Name */

.Treatment_Name {
	clear:both;
	text-align:left;
}

/* Strait Time div */
#Mediacontent		{ 		
							text-align:center;
}
.Header				{		clear:both;
							text-align:center;
							padding: 5px 0;
}

.Sub_Header			{		clear:both;
							text-align: left;
							padding: 2px 0;
}

.MBox				{
	float:left;
	width:130px;
	height:380px;
	clear: none;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	
}

#Image_Box 			{		float:left;
							width:270px;
							height:270px;
}

#Text_Box			{		float:left;
							width:630px;
							height:270px;
							text-align:left;
							padding: 0 0 0 0;
	
}

.TBox :hover, .MBox :hover	{
	/*  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
							filter: grayscale(100%);
	font-family: Arial, Helvetica, sans-serif;
					
}
/*img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
/*  filter: grayscale(100%);
}


/* Events Photo div */


.col 				{
							/*-ms-flex: 25%; /* IE10 
							flex: 25%;*/
							width: 24%;
							float: left;
							padding: 5px 2px;
								
}

.col img 			{
							width: 100%;
							height: auto;
							display: block;
							margin-top: 5px;
							vertical-align: middle;
}




/* Main Template Foornote DIV */
#Footnote 			{		clear:both;
							padding: 5px 0;
							border-top:1px solid #999;
							font-size:10px;
}