@media all {

.Fix {position:fixed;top:-222px;}
.Mix {position:absolute;top:-20px;}
.Top {top:200px;}
.Top.Fix  {top:0px;}
#Heading {font-size: 2.5em;margin: 2em 0 1em;text-align:center;}
.tablinks {float:left;color:#ffffff;background:#0c19cf;border-color:#ffffff;transition:0.3s;font-size:17px;}   nav.tab details open summery	{position: fixed;}
.tabcontent {padding:6px 12px;border:1px solid #ccc;border-top: none;}
.bull{list-style-type: none;}}


@media all and (max-width : 899px){
#Search{width: 10em;}
#navbar ul, #navbar li{list-style: none;list-style-position:inside;        margin:0;        padding:0;}
#NavButton {background:#AFCB5A;border:none;position:absolute;top:0;right:0.75em;content:"\2261";font:bold 4em Tahoma;line-height:0.75em;color:#333;z-index:2;}
.Hidden{display: none;}
.side ol {display:flex;list-style: inside none; border: groove thick; border-radius: 20px;max-width: 80%;position: relative; left: 5%;}
main {max-width: 800px;margin: 0 5px;}
h1, h2, h3 {text-align: center;white-space: pre-wrap;max-width:100%;box-sizing: border-box;}
h2{font-size:18px;}
nav.tab{margin:0 2em;overflow:hidden;border:1px solid #ccc;background-color:#0000FF;box-sizing: border-box;}
.tablinks{border:double;padding: 9px 5px;}
.tablinks:hover{background-color:#c04912;transition: 0.8s;}
nav.tab details open	{background-color:#00E034;border:double;transition: 0.8s;}
.box {position: relative; display: table; width: 100%; margin: auto;padding: 5px;box-sizing: border-box;list-style: inside; }
.col {width: 100%;min-width: 100px; white-space: pre-wrap; -webkit-column-rule: 3px double; -moz-column-rule: 3px double;column-rule: 3px double;border-style:double;display: table-cell; padding:0 20px; margin:auto;clear: right;float: left;box-sizing: border-box;}
.BigImg{height: 100px;display:inline-block;border-radius: 5px;cursor: pointer;transition: 0.3s;}
.bodycontent{height: 80px;width: 80px;}
.manyimg{display:inline-block;height:100%;width:100%;}
.index{max-height: 800px;}
}


@media all and (min-width: 900px){
.separator {margin: auto;  width: 10%;border:1px solid #98b1c4; padding: 15px 0; text-align: center;background:inherit;color:inherit;}		
.side a {color:#fff;font:16px Tahoma;  text-align: center; width:130px;text-decoration: none;margin: 10px 0;}
.side li:hover {border-color:#ffffff;color:#ffffff;background:#c04912;}
.side li .separator:hover {  border-color: #000000;color: #000000;background: #ffffff;}	

.side li {color:#fff;display:inline-flex;border:1px solid #98b1c4;border-radius:0 0 3px 3px;box-shadow:3px 3px 10px rgba(0,0,0,.5);height:60px;list-style-type:none;background: #0c19cf;margin: 0 5px 0 0;}
h2, h3 {text-align:center;}
.itab {position:relative;text-align:center;}
nav.tab details {padding: 14px 16px;}
nav.tab details open {background:#AFCB5A;}
nav.tab details:hover {background:#c04912;}
nav.tab{overflow:hidden;}
nav.tab details open, nav.tab details:hover {transition: 0.8s;} 
.tabcontent li {list-style: inside;}    
.box {display: table-row;margin:auto;box-sizing: border-box; padding: 5px 0;}    
.col {display: table-cell;vertical-align:top;margin:auto;box-sizing: border-box;padding:20px; -webkit-column-rule: 3px double; -moz-column-rule: 3px double;column-rule: 3px double;}    
.BigImg {display: inline-block;margin:auto;box-sizing: border-box;max-height: 400px;max-width: 400px;border-radius: 5px;cursor: pointer;transition: 0.3s; }    
.manyimg{text-align:center;margin:auto;box-sizing: border-box;display: block;height:100%;width:100%;max-width: 350px;max-height: 350px;aspect-ratio: 1/1;}
.bodycontent{background-color: white;padding: 10px;text-align: center;}
footer {display:inline-block;max-width:49.9%;float:left;}

}
    
@media all and (max-width: 1250px) and (min-width: 900px){
#logo {left:5em;}
.email{position: absolute; top:0.6em; right:0.6em;}
main {max-width: 1100px;width:auto ;margin-left: 100px;box-sizing: border-box;}
.itab{left:5%;}
.bodycontent{max-width:250px;max-height:250px;}
}
    
@media all and (min-width: 1251px){
#logo {left:10em;}
.email{position: absolute; top:0.6em; right:1.6em;}
main {max-width: 87em;margin: 0 12em;}
.itab{left:18%;}
.bodycontent{max-width:500px;max-height:500px;}
}