/*
body {
  text-align: left;
  color: #424F5A; 
  background: #D7D3C8;  
}*/


.tabs { padding: 0; float: none; list-style: none; position: relative; margin: auto; text-align: left; }
.tabs li {    float: left;    display: block;}
.tabs input[type="radio"] {    position: absolute;    display: none;}
.tabs label { display: block; font-size: 95%; cursor: pointer; position: relative; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: #FFF; padding-top: 9px; padding-right: 11px; padding-bottom: 9px; padding-left: 11px; background-image: url(../image/tab_2.png); background-repeat: repeat-x; background-position: center bottom; margin-right: 1px; }
.tabs label:hover { background-image: url(../image/tab_1.png); background-repeat: repeat-x; background-position: center center; }
.tabs .tab-content{ z-index: 2; display: none; overflow: hidden; width: 100%; position: absolute; top: 38px; border-top-width: 2px; border-top-style: solid; border-top-color: #192e90; left: 0px; }
.tabs [name="tabs"]:checked + label { top: 0; background-image: url(../image/tab_1.png); background-repeat: repeat-x; background-position: center center; }
.tabs [name="tabs"]:checked ~ .tab-content {    display: block;}


@media only screen and (max-width: 778px) {
  .tabs {
    width: 100%;
  }
  .tabs li {
    float: none;
    margin-top: 0px;
  }
  .tabs .tab-content {
    position: relative;
    display: block;
    top: 0;
  }
  .tabs label {
    top: 0;
    padding-top: 17px; 
    background: #192E90;       
  }
  .tabs label:hover {  }
}