@charset "utf-8";
/* CSS Document */
#csbody {
background-color: #99ccff;
width: 100%;
font: 100%/1.0 "Times New Roman", Times, serif;
color: #e1f0ff;
text-align: center;
margin: 0%;
padding: 0%;
}
#calldata {
background-color: #99ccff;
width: 100%;
font: 100%/1.0 "Times New Roman", Times, serif;
color: #e1f0ff;
text-align: center;
margin: 0%;
padding: 0%;
}
#biodata {
background-color: #99ccff;
width: 100%;
font: 100%/1.0 "Times New Roman", Times, serif;
color: #e1f0ff;
text-align: center;
margin: 0%;
padding: 0%;
color: black;
}
#t_bio.biodiv {background-color:#99ccff}


h1{
font-size: calc(0.28rem + 1.3vw);
font-weight: 500;
float: right;
margin: 0.125vw 0 0.125vw 0;
padding: 0;
}
h2{
font-size: calc(0.4rem + 1.125vw);
font-weight: 500;
text-align: center;
margin: 1.25vw 0 0.25vw 0;
padding: 0vw;
}
h3{
font-size: calc(0.3rem + 1.0vw);
font-weight: 500;
text-align: center;
margin: 0 0.5vw 0 0.5vw;
padding: 0 0.75vw 0 0.75vw;
}
h4{
font-size: calc(0.3rem + 1.0vw);
font-weight: 500;
text-align: center;
margin: 0.5vw 0.75vw 0.25vw 0.75vw;
padding: 0 0.0 0 0.0;
}
h5{
font-size: calc(0.4rem + 1.125vw);
font-weight: 500;
text-align: center;
margin: 1.75vw 0 0 0;
padding: 0vw;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
img {
width: 100%;
margin: 0%;
padding:0%;
opacity: 1;
border-width: 1px;
border-radius: 5px;
}

body {
background-color: #8fc7ff;
background-image: linear-gradient(to top #46a3ff, #99ccff);
width: 100%;
height: auto;
font: 100%/1.0 "Times New Roman", Times, serif;
color: #000000;
text-align: center;
margin: 0%;
padding: 0%;
}
.container{
width: 100%;
height: auto;
margin: 0%;
padding: 0%;
}
.headerContainer{
position: fixed;
top: 0vw;
left: 0vw;
width: 100%;
height: 8vw;
margin: 0;
padding: 0;	
}
.contentContainer{
clear: both;
position: absolute;
top: 8.0vw;
left: 0vw;
width: 78.0%;
height: auto;
margin: 0;
padding: 0;
background-color: #99ccff;
background-image: linear-gradient(#8ec6ff, #8fc7ff);
z-index: -10;
}
.itemContainer{
clear: both;
position: absolute;
top: 8vw;
right: 0vw;
width: 22.0%;
height: auto;
margin: 0;
padding: 0;
background-image: linear-gradient(#8ec6ff, #7cbeff);
z-index: -10;
}
.header{
clear: both;
position: fixed;
top: 0vw;
left: 0vw;
width: 100vw;
height: 8.0vw;
margin: 0;
padding: 0;
background-color: #46a3ff;
background-image: linear-gradient(#2391ff, #8ec6ff);
opacity: 1;
z-index: 1;
}

.imgGif {
position: fixed;
left: 0vw;
top: 0.0vw;
z-index: 1;
width: 15vw;
margin: 0;
padding: 0;
opacity: 1;
}
.imgLogo{
position: fixed;
left: 16.0vw;
top: 0.5vw;
width: 32vw;
margin: 0px;
padding: 0px;
opacity: 1;
z-index: -1;
}
.imgHeader {
  position: fixed;
  right: 0.0vw;
  top: 0.5vw;
  width: 11vw;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.imgItem {
  width: 20vw;
  margin: 0 0.5vw 0 0.5vw;
  padding: 0;
  z-index: 1;
} 
.headerQuote{
  position: fixed;
top: 0.0vw;
right: 0.0vw;
width: 42vw;
font-weight: 100;
text-align: center;
float: right;
color: #000000;
margin: 1.25vw 12.0vw 1.0vw 0;
padding: 0px;
}

.content{
top: 0%;
left: 0%;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
.responsive {
margin: 0.0vw ;
padding: 0.0vw;
float: left;
width: 32.9%;
height: auto;
}
div.gallery {
margin: 0.0vw;
padding: 0.0px;
border: 1px solid F00;
border-radius: 5px;
}
div.gallery img {
width: 90%;
height: auto;
margin: 0.5vw 0 0.5vw 0;
padding: 0;
border-radius: 5px;
}
div.desc {
text-align: center;
margin: 0.5vw;
padding: 0vw;

}

@media only screen and (max-width: 1920px) {
.responsive {
width: 32.9%;
}
}

@media only screen and (max-width: 1440px) {
.responsive {
width: 32.9%;
}
}

@media only screen and (max-width: 1280px) {
.responsive {
width: 32.9%;
}
}

@media only screen and (max-width: 1024px) {
.responsive {
width: 32.9%;
}
}

@media only screen and (max-width: 768px) {
.responsive {
width: 49.9%;
}
}

@media only screen and (max-width: 640px) {
.responsive {
width: 49.9%;
}
}