<style>
body {font-family: Arial, Verdana; font-size: 12pt;}



#main {
margin: 5px auto;
width: 980px;
border-spacing: 7px 0px;
}


#single {
margin: 5px auto;
width: 717px;
border-spacing: 0px;
}



#text {
vertical-align:top;
border:1px solid gray;
border-radius: 13px 19px;
}



td {font-family: Arial, Verdana; font-size: 12pt}
h1 {font-family: Arial, Verdana; font-size: 14pt; font-weight: bold;  color: #FF0000}
h2 {font-family: Arial, Verdana; font-size: 12pt; font-weight: bold;  color: #FF0000; margin: 10px}
h3 {font-family: Arial, Verdana; font-size: 12pt; font-weight: bold;  color: green; margin: 10px}


a:link { color: #3366CC;text-decoration: none;  font-weight: bold; font-size: 12pt}
a:visited { color: #3366CC;  font-weight: bold; text-decoration: none;}
a:hover { color: #FF0000; text-decoration: none; font-weight: bold;}

a.classbar {font-size: 10pt}
a.classcopy {font-size: 11pt; color: gray; font-weight: bold;}

p { margin: 10px}
p.classb { margin-left: 10px}
p.classbar {margin-left: 10px;margin-bottom: 0px;color: #000000;font-size: 14pt; text-decoration: underline;}
p.classf {margin: 10px;font-size: 14px;}



@media (max-width: 324px)  {
p.classh {color: #000000;font-size:11pt;font-weight:bold;}
}

@media (min-width: 325px) and (max-width: 509px)  {
p.classh {color: #000000;font-size:14pt;}
}

@media (min-width: 510px) and (max-width: 767px)  {
p.classh {color: #000000;font-size:16pt;}
}

@media (min-width: 768px) and (max-width: 819px)  {
p.classh {color: #000000;font-size:12pt;font-weight:bold;}
}

@media (min-width: 820px) and (max-width: 928px)  {
p.classh {color: #000000;font-size:14pt;}
}


@media (min-width: 929px) and (max-width: 1022px)  {
p.classh {color: #000000;font-size:16pt;}
}


@media (min-width: 1023px) {
p.classh {color: #000000;font-size:18pt;}
}

p.classborder {border: double 4px #FF0000; font-size:16pt; font-weight: bold}
p.classs { margin: 5px}
p.classtopic { margin: 5px; font-size: 10pt; font-style: italic; font-weight: bold;  color: green; }
p.classalert {border: 1px solid green;padding: 5px;background: #FFFFCC; font-weight: bold; color: #ffa500; text-align: center; font-size:16pt;}

.block1 { height: 60px; padding: 10px;}


.adv {
    width: 91%;
    padding-left: 10px;
    max-width: 241px;
    max-height: 400px; 
   }

.advn {
    width: 91%;
    padding-left: 10px;
    max-width: 241px;
    max-height: 600px; 
   }

.adv2 {
    margin: 25px auto;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 620px;
    max-height: 320px;
   }

.advup {
    padding-left: 20px;
    max-width: 484px;
   }

.advb {
    width: 320px; 
   }


#primer {height:500px;width:96.5%; max-width:692px; margin-left:10px; border: 1px solid gray; overflow : scroll;}
#bar {height:360px;width:auto; margin-left:10px; border: 1px solid gray; overflow : scroll;}
#bar1 {height:400px;width:auto; margin-left:10px; margin-right:8px; border: 1px solid gray; overflow : scroll;}
#bar2 {height:240px;width:245px; margin-left:10px; border: 1px solid gray; overflow : scroll;}



@media (max-width: 767px) {

#header {
  display: flex;
  justify-content: center;
  margin-top:10px;
  max-width: 767 px;
  text-align: center;
  font-family: Arial, Verdana;
}


#lefthead {
  display: none;
}


#mhead {
  width: 100%;
  max-width: 767px;
  font-family: Arial, Verdana;
}


#righthead {
 display: none;
}



}


@media (min-width: 768px) {

#header {
  display: flex;
  justify-content: center;
  margin-top:10px;
  max-width: 980 px;
  text-align: center;
  font-family: Arial, Verdana;
}


#lefthead {
  float: left;
  width: 23%;
  max-width: 222px;
}


#mhead {
  width: 54%;
  max-width: 536px;
  float: left;
  font-family: Arial, Verdana;
}


#righthead {
  float: left;
  width: 23%;
  max-width: 222px;
}

}



@media (max-width: 767px) {

#full {
display: flex;
flex-direction: column;
width: 100%;
max-width: 767px;
clear: both;
margin: 0 auto;
margin-top:5px;
height: auto !important;
}


#content {
 width: 100%;
 max-width: 767px;
 font-family: Arial, Verdana;
 order:-1
}


#navbar {
  max-width: 265px;
  font-family: Arial, Verdana;
  order: 1
}


#footer {
  width: 100%;
  padding-top: 10px;
  max-width: 767px;
  clear: both;
  text-align: center;
  font-family: Arial, Verdana;
  order:2;
}


}



@media (min-width: 768px) {


#full {
width: 100%;
max-width: 980px;
clear: both;
margin: 0 auto;
margin-top:5px;
height: auto !important;
}



#navbar {
  float: left;
  width: 27%;
  max-width: 265px;
  font-family: Arial, Verdana;
}


#content {
 float: right;
 width: 73%;
 max-width: 715px;
 font-family: Arial, Verdana;
}



#footer {
  width: 100%;
  padding-top: 10px;
  max-width: 980px;
  clear: both;
  text-align: center;
  font-family: Arial, Verdana;
}

}

img {
max-width: 100%;
    height: auto;
}


.videowrap {
  max-width: 640px;
  margin: 10px;
}

.videoblock {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.videoblock iframe, object, embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.absolute-center {
  width: 100%;
  max-width: 555px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}