.roco {border-radius: 8px;
}
.spaced td {padding: 8px;}
.spacedless td {padding: 4px;}
.shad {box-shadow: 5px 5px 10px #888888;
}
.middle {padding: 10px;} 

div.res2 {padding: 3px;}
h2 {font-family: georgia,serif;}
li {border-radius: 6px;}


@media only screen and (max-width: 990px) {
div.middle {width:auto;  } 
div.res2 {width: 98%; clear: both; }
.year {color: gold; font-size: 30px; font-weight: bold; text-shadow: black 1px 1px ;} 
h1, h2, .topli {clear: both; }
h1 {font-size: 30px;} 
h2 {text-align: center; max-width: 800px; padding-bottom: 10px; color: #534E95; font-size: 20px; ;width: 100%; text-align: center; margin-left: auto; margin-right: 10px;}
 }
@media only screen and (min-width: 991px) {
div.middle {width:70%; float: right; display: table-cell;}  
h1 {font-size: 44px;}

.year {position: absolute; color: white; font-size: 40px; font-weight: bold; margin-left: 10px; width: 114px; top: 116px; text-align: left; text-shadow: black 1px 1px ;}
h2 {font-size: 30px; font-family: georgia,serif; color: white; text-shadow: black 2px 2px ;  margin-top: 0px; position: absolute; margin-right: 5px; margin-left: 470px; text-align: right; top: 86px; max-width: 500px; width: 70%; }
.top: {minimum-height: 500px;}}
@media only screen and (min-width: 991px) {div.res2 {width: 30%; float: left; display: table-cell;} }