/* -- custom css for Bootstrap 3.x --*/

/* move special fonts to HTML head for better performance */
/*@import url(http://fonts.googleapis.com/css?family=Voltaire);*/

html,
body {
  height: 100%;
  width: 100%;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 110%;
}

#sec1 table img{
	max-width: 100%;
	height: auto;
}

td img{
	max-width: 100%;
	height: auto;
}

a{
	color:#196BA1;
}
a:hover{
	color: #F55443;
}

/* fix bs3 horizontal scrollbar bug */
.row { margin: 0; padding: 0; }


/* use special fonts in certain elements */
h1,h2,h3,h4,.lead,.btn,.navbar a {
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-weight: 900;
  font-style: normal;
}

h1 {
  font-size:50px;
  margin-bottom:7%;
}

h4 {
  font-size:120%;
	border:2px solid #196BA1;
	display: inline-block;
	padding: 8px 10px 2px 10px;
	text-align: center;
	color: #196BA1;
	border-radius: 5px;
}

/* make images gray */
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.icon-bar {
   background-color:#fff;
}

.scroll-down p{
   color:#196BA1;
}
.scroll-top a {
   color:#666;
}

.scroll-down {
   position:fixed;
   bottom:0%;
   right:49%;
   color:#f9f9f9;
}

.scroll-top {
  background-color:#dbdbdb;
   position:relative;
   bottom:5%;
   right:48%;
}

.vert {
  vertical-align: middle;
  width:100%;
  padding-top:10%;
  text-align:center;
}

.header .btn-lg {
   font-size:28px;
   border-color:#eeeeee;
   padding:15px;
   background-color:transparent;
   color:#ffffff;
}

.header .btn-lg:hover {
   background-color:#eeeeee;
   color:#777777;
}

.navbar a {
  color:#fff;
  font-size:14px;
}

.navbar-bold.affix {
  background-color:#d46054;
}

.navbar-bold {
  background-color:#f68076;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.navbar-bold li a:hover, .navbar-bold li.active {
  background-color:#d46054;
}

    
.header h1 {
  font-size:50px;
  -webkit-text-stroke: 1px rgba(f,f,f,0.1);
  color:#666;
  margin-left:-5px;
  margin-bottom:5px;
  text-transform:uppercase;
}

.header .lead {
  color:#d46054;
  font-size:25px;
}

.header {
  height: 80%;
  background: #196BA1 url('../images/top.jpg') repeat top -80px center fixed;
  background-size:cover;
}

.navbar .container{
	padding: 0px 8px;
}

/* use alt in navbar and header for different color */

.about {
  background: #FFF url('../images/sec1Back.jpg') repeat center center fixed;
}

.alt .lead {
  color: #3B0496;
}

.alt.affix {
  background-color:#FFF;
}

.alt li a:hover, .alt li.active {
  background-color:#D66356;
}



.blurb {
  padding: 60px 0;
  background-color:#fefefe;
}

.blurb .panel {
  background-color:transparent;
}

.bright {
  background: #dbdbdb url('http://www.bootply.com/assets/example/pt_topo.png') repeat center center fixed; 
  color:#777;
}

.service{
  width:19% !important;
  margin:0.5%;
  text-align:center;
  float:left;
}
.service img{
	width:100%;
	height:auto;
  border-radius: 50%;
  background:#FFF;
  margin:1em auto 4em auto;
}

.callout {
  color: #ffffff;
  padding-top:7%;
  padding-bottom:7%;
  height: auto;
  width: 100%;
  background: url('../images/sec3Back.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


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

.service{
  width:30% !important;
  margin:0.5%;
  text-align:center;
  min-height:300px;
  float:left;
}
.service img{
	width:100%;
	height:auto;
  border-radius: 50%;
  background:#FFF;
  margin:1em auto;
}

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

.callout {
  color: #ffffff;
  padding-top:7%;
  height: 190%;
  width: 100%;
  background: url('../images/sec3Back.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
	
}

.whiteBox{
	background: rgba(255,255,255,0.8);
	padding: 1em;
	width: 960px;
	max-width: 100%;
	margin: 10px auto;
	color: #333;
	clear: both;
	box-sizing: border-box;
}
@media screen and (max-width: 640px){
	
	table {
		margin: auto;
	}
	
	#sec3{
		padding: 20px 15px;
	}
	
	.header h1{
		margin-top: 1em;
	}

	th,td{
		display: block;
	}
	p {
		font-size: 3.8vw;
	}
	.about .container .row .text-center{
		text-align: center;
	}
.service{
  width:45% !important;
  margin:2% 2%;
	min-height: auto;
  text-align:center;
  float:none;
	display: inline-block;
  font-size:larger;
}
.service img{
	width:100%;
	height:auto;
  border-radius: 50%;
  background:#FFF;
  margin:0.5em auto;
}
#sec1 p{
	text-align: left;
	}

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

.callout {
  color: #ffffff;
  padding-top:7%;
  height: auto;
  width: 100%;
  background: url('../images/sec3Back.jpg') no-repeat center center fixed; 
  -webkit-background-size: 350%;
  -moz-background-size: 350%;
  -o-background-size: 350%;
  background-size: 350%;
}

.header {
  height: 50%;
  background: #196BA1 url('../images/top.jpg') repeat top center fixed;
  background-size:250%;
}

.header img{
	width:80%;
}
	
}

.featurette {
  background: #196BA1;
  padding: 0px 0;
  color: #ffffff;
}

.featurette-item {
  margin-bottom: 15px;
}

.featurette-item > i {
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: inline-block;
  font-size: 56px;
  width: 140px;
  height: 140px;
  line-height: 136px;
  vertical-align: middle; 
  text-align: center;
}

.featurette-item > i:hover {
  font-size: 68px;
}

.gallery {
  padding: 50px 0;
}

.call-to-action {
  background: #eeeeee;
  padding: 50px 0;
}

.call-to-action .btn {
  margin: 10px;
}

footer {
  padding: 30px 0;
}

/* -- end custom css for Bootstrap 3.x --*/


.navbar{
	border-bottom: 4px solid #196BA1;
	background: #FFF;
	height: 84px;
}
.navbar-header{
	height: 80px;
}
.headerBtn{
	height: 58px;
}
.rightBox, .headerBtn{
	float: right;
	max-width: 70%;
}
.rightBox{
	width: 470px;
	max-width: 70%;
}
input[type=text], textarea{
	border:1px solid #CCC;
	border-radius:5px;
	padding:5px;
	width:100%;
}

th, td{
	padding:2%;
	text-align:left;
	border-bottom: 1px solid #196BA1;
}

.hissu{
	font-size:smaller;
	color:#FFF;
	background:#196BA1;
	padding:5px 10px;
	margin-right:10px;
}

.submit{
	color: #FFF;
	background-color: #2F7E3F;
	padding: 10px 20px;
	margin-right: 10px;
	border: none;
	border-radius: 5px;
	font-size: larger;
}

@media screen and (max-width: 640px){
.navbar{
	height: 64px;
}
.navbar-header, .headerBtn{
	height: 40px;
}
	
	.rightBox{
		float: none;
		width: 100%;
		max-width:100%;
		font-size: 4.2vw;
		clear: both;
	}
	
}

@media screen and (max-width: 540px){
.navbar{
	height: 68px;
}
.navbar-header, .headerBtn{
	height: 44px;
}
	
.navbar .container{
		padding-right: 0px;
	}
	
}

@media screen and (max-width: 400px){
.navbar{
	height: 64px;
}
.navbar-header, .headerBtn{
	height: 40px;
}
	
}