.col:hover{opacity: 0.7;}
body{
  background-image:url(backorange.png);
  background-repeat: repeat;
}
table{
  margin:auto;
  max-width:600px;
}
.nav{color:black;}
h4 {
  max-width: 1000px;
  margin: auto;
  padding:10px;
  border-left:10px solid #df7232;
  border-bottom:1px solid #df7232;
}
.TwoColumn{
  display: flex; 
  margin:20px 100px; 
  align-items: center;
}
.updatescroll{
  max-width: 1000px;
  height:200px;
  background-color: #363636;
  color:white;    
  border-radius: 10px;
  border:1px solid #dddddd;  
  overflow: scroll;
  margin:auto;
  padding:20px; 
  
}
.logo{
  background-image: url("BOCSTE_logo_200.png");
  background-repeat: no-repeat;
}
.logo :hover{
  background-image: url("BOCSTE_logo_200W.png");
  background-repeat: no-repeat;
}
.header{
  position: fixed;
  background-color:#df7232; 
  width: 100%;
  height:60px;
  top: 0;
  padding:5px 30px;
  z-index: 10000;
 
 
}
.changebr{
  display :inline;
}
.header a{
  color:black;
  font-size: 1.2em;
  font-weight: bold;
  white-space: nowrap;
}
.header a:hover{
  color:white;
  text-decoration: none;
  
}
.header img:hover{
  opacity: 0.7;

}
.header2{
  position: fixed;
  width: 100%;
  top: 60px;
  z-index: 10000;
  margin:auto;
  background-color: rgb(245, 245, 245); 
}
.menubox{
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  margin:auto;
  max-width: 1000px;
}
.menu{
  text-align: center;  
  margin: auto 50px auto -1px;
  max-width: 200px;
}
.menu2{
  white-space: nowrap;
  text-align: center;  
  margin: auto;
  padding:10px;
  max-width: 1000px;
}
.gray-b{
color:rgb(114, 114, 114);
font-weight:bold;
margin-right: 10px;
margin-left: 15px;
padding:0 5px;
border-left: 10px solid #df7232;

}
.headline{
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  margin:auto;
   margin-bottom: 20px;
  max-width: 1000px;
 background-image: url(backline.png);
}
.container{
  width: 1000px;
  margin-top:30px;  
  padding-top:60px;
    background-color: rgb(255, 254, 254);
 min-height: 100%;
  height:auto;
  padding-bottom:60px;  
}
.head-item{
  background-color: #dddddd;
  border-radius: 10px;
  border:1px solid rgba(26, 26, 26,0.2);
  box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
  -webkit-box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
  -moz-box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
  padding:0;
  margin:auto;
  white-space: nowrap;
  text-align: center;
  width:260px;
  height: 400px;
}
.head-item img:hover{
  opacity: 0.7;
}
.caption{
  max-width: 1000px;
  margin:0 auto 60px auto;
  text-align: left;
  padding: 30px 0;
  border-bottom:1px solid #df7232;
}
.caption a{
  color:#df7232;
}
.caption a:hover{
  color:#6f32df;

}
.noncaption{
  max-width: 1000px;
  margin:0 auto 60px auto;
  text-align: left;
  padding: 30px 0;
}
.noncaption a{
  color:#df7232;
}
.noncaption a:hover{
  color:#6f32df;

}

.normalcenter{
  max-width: 1000px;
  margin:0 auto 20px auto;
  text-align: center;
  padding: 30px 0;
}

.normalcenter img{
  margin:auto;
  background-color: #dddddd;
  border-radius: 10px;
  border:1px solid rgba(26, 26, 26,0.2);
  box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
  -webkit-box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
  -moz-box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
  margin-bottom: 2em;
}


.toblock{
  display:flex;  justify-content: space-evenly; 
}



.middle{
  font-size:1.3em;
  font-weight: 300;
}

footer{
  position: fixed;
  background-color:#363636;
  width: 100%;
  height:40px;
  bottom: 0; 
  z-index: 10000;
 text-align: center;
 color:white;
 padding-top: 8px;
}
.month_box{
  margin:0 auto;
  max-width: 600px;
 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.month_box2{
  margin:0 auto 0 6em;
  max-width: 600px;
 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.month{
  padding:6px;
  margin:0px 5px;
  font-weight: 400;
  text-align: left;
}
.month a{
 
  color:#df7232;
}

.month a:hover{
 
  color:#7e1d0c;
}
.pagebox{
  margin:-5px auto 10px auto;
  max-width: 600px;
  display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}
.page a{
  padding:6px;
  margin:0px 5px;
  font-weight: 400;
  color:#df7232;
}
.page a:hover{
 
  color:#7e1d0c;
}
.category_box{
  margin:0 auto;
  max-width: 600px;
  display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
.category{
  padding:6px;
  margin:0px 5px;
  font-weight: 400;
  text-align: left;
}
.category a{
 
  color:#df7232;
}

.category a:hover{
 
  color:#7e1d0c;
}

.blog_area{
  margin:auto;
  max-width: 600px;
  display: block;  
}

.blog_entry{
  margin:20px 0;
  padding:20px 0;
  border-radius: 10px;
  border: 1px solid gray;
}

.blog_title{
  padding:0px 6px;
  margin:0px 10px;
  font-weight: bold;
  text-align: left;
 
}

video{
  max-width: 560px;
  margin:auto;
  
}
.blog_date{
  padding:0 6px;
  margin:0 10px;
  text-align: left;
  color:gray;
}

.blog_date a{
 
  color:gray;
  text-decoration: underline;
}


.blog_body{ 
  text-align: left;
  color: black;
  padding:6px;
  margin:10px;
}
.blog_body a{
 
  color:#df7232;
}

.blog_body a:hover{
 
  color:#7e1d0c;
}
.blog_img{ 
  max-width: 560px;
  margin:auto;
  border: 1px solid rgba(128, 128, 128, 0.295);
}

.blog_cord{ 
  max-width: 560px;
  margin:auto;
  padding:1em;
 background-color: #363636;
 color: white;
 margin-bottom:1em;
}
.pre_blog_cord {
  max-width: 560px;
  content:"html";
  margin:1em auto auto auto;
  color: rgb(212, 212, 212);
  background-color: #636363;
  height:2em;
  padding-top:0.3em;
  padding-left:1em;
}
.pre_blog_cord_CSS {
  max-width: 560px;
  content:"CSS";
  margin:1em auto auto auto;
  color: rgb(212, 212, 212);
  background-color: #636363;
  height:2em;
  padding-top:0.3em;
  padding-left:1em;
}

.cord_tag{
  color:#3351d8;
}
.cord_tag ::before{
  content:"<";
  color:#dddddd
}
.cord_tag::after{
  content:">";
  color:#dddddd
}
.cord_tag_sub{
  color:#4692f7;
}

.cord_tag_sub::after{
  content:"=";
  color:#ffffff;
}
.cord_dq{
  color:#f09f70;
}
.cord_dq ::before{
  content:'"';
}
.cord_dq ::after{
  content:'"';
}
.cord_css_head{
  color:#4692f7;
}
.cord_css_head ::after{
  content:":";
  color:#dddddd
}
.cord_css_body{
  color:#f09f70;
}

.cord_css_body ::after{
  content:";";
  color:#dddddd;
}
.cord_css_maekakko{
  color:#dfa62b;
}
.cord_css_maekakko ::after{
  content:"{";
  color:#dfa62b;
}

.cord_css_atokakko ::before{
  content:"}";

  color:#dfa62b;
}

@media(max-width:1200px){
  img{
    max-width: 800px;
    height: auto;
  }
}
@media(max-width:1000px){
  body{
    max-width: 100%;
  }
  img{
    max-width: 100%;
    height: auto;
  }

  .headline{
    max-width: 100%; margin:auto;
  }
    .head-item{
      background-color: #dddddd;
      border-radius: 10px;
      border:1px solid rgba(26, 26, 26,0.2);
      box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
      -webkit-box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
      -moz-box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 10px 4px;
      padding:0;
      margin:auto;
      white-space: nowrap;
      text-align: center;
      max-width:260px;
      height: auto;
    }
    .menubox{
      display: flex;      
      margin:auto;
      max-width: 100%;
      height:auto;
      text-align: center;
    }
    .menu{
      text-align: center;  
      margin: auto;
      max-width: 70px;
      padding-top: 8px;
    }
    .menu2{
      white-space: nowrap;
      text-align: center;  
      margin: auto;
      padding:10px;
      max-width: 1000px;
    }
    .header{
    
      z-index: 10000;
      font-size: 0.85em;
      margin: auto;
     height:50px;
    }
    .header a{
      
      font-size: 0.85em;
      margin: auto;
    
    }

 
    .header2{
    
    top:50px;
    
      font-size: 0.8em;
    }
   
    body{
      background-image:url(backorange.png);
      background-repeat: repeat;
      
    }
    .container{
      width: 1000px;  
      padding-top:60px;
        background-color: rgb(255, 254, 254);
     min-height: 100%;
      height:auto;
      padding-bottom:60px;  
    }
    table{
      margin:auto;
      max-width:600px;
      font-size: 0.85em;
    }
    .caption{
      max-width: 1000px;
      margin:0 auto 30px auto;
      text-align: left;
      padding: 30px 0;
      border-bottom:1px solid #df7232;
    }
    .noncaption{
      max-width: 1000px;
      margin:0 auto 30px auto;
      text-align: left;
      padding: 30px 0;
    }
    .changebr{
      display :none;
    }

    video{
      max-width: 100%;
      margin:auto;
      
    }
    .blog_img{ 
      max-width: 100%;
      margin:auto;
      border: 1px solid rgba(128, 128, 128, 0.295);
    }
    .blog_cord{ 
      max-width: 100%;
      margin:auto;
     background-color: #363636;
     color: white;
     font-size: 12px;
    }

    .month{
      padding:6px;
      margin:6px 2px;
      font-weight: 400;
      text-align: left;
      font-size: 0.7em;
    }
    .category{
      padding:2px;
      margin:6px 2px;
      font-weight: 400;
      text-align: left;
      font-size: 0.7em;
    }

    .toblock{
      display:block;
      margin:0 auto -10px auto;
      text-align: center;
    }
   
    .updatescroll{
      max-width: 1000px;
      height:200px;
      background-color: #363636;
      color:white;    
      border-radius: 10px;
      border:1px solid #dddddd;  
      overflow: scroll;
      margin:auto;
      padding:20px; 
      font-size: 0.8em;
    }

    .TwoColumn{
  display: block; 
  margin:auto; 
  align-items: center;
  text-align: center;
}
  }