*{
  box-sizing: border-box;
}
html,body{
  width: 100%;
  height: 100%;
}
body{
  height: auto;
 /* display: flex;*/
 justify-content: space-between;
  align-items: center;
  flex-direction: column;
  background:  #a5d5f5;
}


#page{
  max-width: 1200px;
min-width:400px;
  background: #F3B27A;
 /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
 border: 5px solid #703300;
  margin: 1em;
}
header{
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 1em;
  background: #a5d5f5;
  height:5.9em
}
#title{
margin-top:25px;
height:2.8em;
  font-size: 2.8em;
  color: #fff;
  font-weight:700;
}


h1{
  font-size: 1.3em;
  font-family: Arial;color:#fff;
}

/*section{
  display: flex;
  flex-direction: column;
  padding: 1em;
  text-align: justify;
}*/


hr{
  margin: 2em;
}


footer{
 
  position:relative;bottom:5px;
  display: flex;
  justify-content: center;
  padding: 0.3em;
  font-size: 1em;
  font-family: Arial;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  background: #974500;
}


.img{
  width: 100%;
  height: auto;
}


@media (max-width: 850px){
  header{
    flex-direction: column;
  }
  
  #title{
   
    margin: 0.5em;
    
  }
}

body {
  padding: 0 2em;
  font-family: Arial, sans-serif;
  color: #024457;
  background:  #F3B27A;;
}


@media screen and (max-width : 900px){

body{
background:#F3B27A;}
#page{
border: 3px solid #703300;
    }

@media screen and (min-width : 900px){

#page{
  max-width: 1200px;
min-width:400px;
  background: #F3B27A;
 
  margin: 1em;
}



h11 {
  font-family: Verdana;
  font-weight: bold;
font-size:1.7 em
  color: #024457;
}
h11 span {
  color: #167F92;
}

.mezera{height:2 em;}