*{
    color:#1d1f22;
    background-color:#ffffff;
    margin:0;
    padding:0;
    font-family:garamond;
}

body{
    overflow:scroll;
    height:100vh;
    min-height:100vh;
    width:100%;
    position:relative;
    background-image:url(bg.png);
    background-repeat:repeat;
}
h2{font-size:20px;}
.content{
    background-image:url(bg.png);
    padding-bottom:40px;
}
.content *{
    background-image:url(bg.png);
}



header{background-color:#f0f2f4;overflow:hidden;padding-bottom:1vw;box-shadow: 0 3px 10px 0 rgba(0,0,0,.2);z-index:99;position:relative;}
.header{margin:auto;width:50%;margin-top:1vw;}

.title{float:left;position:relative}
.title>h1{font-size:30px;margin:auto;text-align:center;background-color:#f0f2f4;}

.navi{margin:auto;margin-top:7px;width:69%;text-align:center;float:right;background-color:#f0f2f4;}
.navi>a:hover{background-color:#c9d2e3;}
#current{background-color:#c9d2e3;}
.menu{
    font-size:18px;
    padding:0 7px 0 7px;
    margin:0 1px 0 1px;
    border:1px outset buttonborder;
    color:buttontext;
    background-color:buttonface;
    text-decoration:none;
}

#promo>video{width:100%;}

@media screen and (min-width: 800px) and (max-width: 1609px){
    .header{width:60%;}
}

@media screen and (min-width: 800px) and (max-width: 1339px){
    .header{width:70%;}
}

@media screen and (min-width: 800px) and (max-width: 1149px){
    .header{width:80%;}
}

@media screen and (min-width: 800px) and (max-width: 1105px){
    .header{width:85%;}
}

@media screen and (min-width: 800px) and (max-width: 945px){
    .header{width:90%;}
    body>div>table{width:80%;}
}

@media screen and (min-width: 800px) and (max-width: 893px){
    .header{width:95%;}
    body>div>table{width:80%;}
}

@media screen and (min-width: 100px) and (max-width: 847px){
    .header{margin-top:2vw;background-color:#f0f2f4;width:100%;}
    .title{margin:auto;width:50%;float:none;white-space:nowrap;}
    .navi{margin:auto;width:50%;float:none;white-space:nowrap;padding-top:7px;padding-bottom:3px;}
    body>div>table{width:90%;}
}

@media screen and (min-width: 100px) and (max-width: 615px){
    footer>div>p>a{font-size:14px;}
}

@media screen and (min-width: 100px) and (max-width: 548px){
    footer>div>p>a{font-size:12px;}
}

@media screen and (min-width: 100px) and (max-width: 482px){
    .footer{padding-bottom:20px;}
    .footer>div>p>a{font-size:14px;}
}


.content{margin:auto;width:70%;}
.content>h2{font-size:27px;;}
.content>p{font-size:19px;margin-top:5px;}

#img1>img{
    height:340px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    margin:10px;
}
#img1{float:left;width:50%;}

#img2>img{
    height:400px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    margin:10px;
}
#img2{float:right;width:40%;}



table{
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
  margin:auto;
}

td, th{
  border: 4px solid #f0f2f4;
  text-align: left;
  padding: 8px;
}

.center{text-align:center;}




.footer{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  background-color:#f1f3f5;
  height:40px;
}
.footer *{background-color:#f1f3f5;}
.footer-content>p{display:inline-block;margin:0 10px 0 10px;}
.footer-content{
    padding-top:10px;
    margin:auto;
    width:95%;
    text-align:center;
}


/* #203d5a */

/* #f0f2f4*/