* {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;margin: 0;padding: 0;}
a {  color: #333300;  text-decoration: none;}
img{  width:100%;  height:auto;}
body { margin: 0px;padding: 0px;background: #999967;display: grid;place-items: center;height: 100vh;}
#all { margin: 0 auto;  max-width: 1280px;  min-width: 320px;  width: 100%;  border: 10px solid #a4c2c2;}
#header {  width: 100%;  display: block; float: left;}
#logo {  float: right;   max-width: 300px;  width: 100%;}
.logo {  float: left;  height: 56px;  max-width:412px;}
#navio {  display: inline-block;  max-width: 645px;  padding: 10px 6px;clear: left;  float: left;  }
#bordero {  float: left;  background: #a4c2c2;  width: 100%;  height: 11px;}
.topstrip {  float: left;  background: url(bilder/navistring.jpg) no-repeat top left;  width: 13px;  height: 37px;}
.hbtn1 {  float: left;background: url(bilder/navi1a.jpg) no-repeat top left;  width: 75px;  height: 37px;}
.hbtn2 {  float: left;background: url(bilder/navi2a.jpg) no-repeat top left;  width: 97px;  height: 37px;}
.hbtn3 {  float: left;background: url(bilder/navi3a.jpg) no-repeat top left;  width: 96px;  height: 37px;}
.hbtn4 {  float: left;background: url(bilder/navi4a.jpg) no-repeat top left;  width: 93px;  height: 37px;}
.hbtn5 {  float: left;background: url(bilder/navi5a.jpg) no-repeat top left;  width: 123px;  height: 37px;}
.hbtn2:hover {  background: url(bilder/navi2b.jpg) no-repeat top left;}
.hbtn3:hover {  background: url(bilder/navi3b.jpg) no-repeat top left;}
.hbtn4:hover {  background: url(bilder/navi4b.jpg) no-repeat top left;}
.hbtn5:hover {  background: url(bilder/navi5b.jpg) no-repeat top left;}
.fbtn1 {  float: left;  background: url(bilder/navi6a.jpg) no-repeat top left;  width: 114px;  height: 37px;}
.fbtn2 {  float: left;  background: url(bilder/navi7a.jpg) no-repeat top left;  width: 97px;  height: 37px;}
.fbtn3 {  float: left;  background: url(bilder/navi8a.jpg) no-repeat top left;  width: 123px;  height: 37px;}
.fbtn4 {  float: left;  background: url(bilder/navi9a.jpg) no-repeat top left;  width: 114px;  height: 37px;}
.fbtn5 {  float: left;  background: url(bilder/navi10a.jpg) no-repeat top left;  width: 92px;  height: 37px;}
.fbtn1:hover {  background: url(bilder/navi6b.jpg) no-repeat top left;}
.fbtn2:hover {  background: url(bilder/navi7b.jpg) no-repeat top left;}
.fbtn3:hover {  background: url(bilder/navi8b.jpg) no-repeat top left;}
.fbtn4:hover {  background: url(bilder/navi9b.jpg) no-repeat top left;}
.fbtn5:hover {  background: url(bilder/navi10b.jpg) no-repeat top left;}
#boto table{width:100%;}
#boto table tr{}
#boto table tr th{  text-align: left;  padding-bottom: 10px;}
#boto table tr td{  padding: 2px 0px;}

#boto{display: grid;  grid-template-columns: 46% 46%;  width: 100%;  padding: 5px;  max-width: 980px;  margin: 0 auto;  justify-content: center;  grid-gap: 8%;}
#sun {    width: 100%;}
#content { background: #A4C2C2;padding: 10px;display: grid;place-items: center;grid-template-columns: 60% 40%;  }
#text {  padding-left: 20px;}
#content h1 {   font-family: "Times new roman"; font-size:20px; color: #333301;  padding-left: 6px;text-align: center;  margin: 20px 0; }
#footer {  padding: 10px 5px;  background: #999966;  width: 100%;  min-height: 60px;  display: inline-block;}
#content p{padding-bottom:20px;  font-size: 16px;  line-height: 20px;}


@media only screen and (max-width: 989px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 710px) {
        #logo { height: 100%; max-width: calc(100% + 40px); width: calc(100% + 40px); margin-left: -40px; display: block;   float: none;    background: #a4c2c2;  }
#boto{grid-template-columns: 100%; grid-gap: 0%;}
	#content {      padding: 1px 0 0 0;  display: block;    clear: both;}
}
@media only screen and (max-width: 640px) { 
        body {  display: block;}
        #all {  border: 0px solid #a4c2c2;}
        #sun {padding-bottom:20px;}
        #text {  padding: 20px;}
}