* {
  box-sizing: border-box;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #ffffff;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 4px;
  margin-bottom: 4px;
  background-color:  #ffffe6;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.mean ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.mean li {
  padding: 4px;
  margin-bottom: 4px;
  background-color:  #ffffe6;
  color:  #00001a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.mean li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 500px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 668px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

@media only screen and (min-width: 390px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  

H1
{
 color:  #cc7a00;
 font-size: 32px;
}

@media(max-width: 500px) {
H1
{
 color: blue;
 font-size: 22px;
}
}

@media(min-width: 100px) and (max-width: 390px){
H1
{
 color: #e6e600;
 font-size: auto;
} 
}

@media(max-width: 320px) {
H1
{
 color: blue;
 font-size: 10px;
} 
}


#table1
{
 border-collapse: collapse;
 width: 100%;
 border-spacing: 1px;
}

#tda
{
 border-style: dotted;
 border-width: 0px;
 border-color: #000000; 
 padding: 5px;
 text-align: center;
 color: #8b4513;
 font-family: arial,helvetica,sans-serif;
 font-size: 18px;
 /* background-color: #f0ffff; */
 background-color: #ffffcc;
 font-style: Courier New;
}



hr.a {
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 2px;
    color: #ff9999;
    background-color: #ffff4d;
    height: 5px;
}

hr.b {
    border-top: 3px dotted #ffff66;
    border-bottom: 3px dotted #ff0066;
}

/* https://codepen.io/ibrahimjabbari/pen/ozinB */

hr.c {
	background-color: #fff;
	border-top: 3px dashed  #4d2800;
}

hr.d { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.d:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

ul.n {
    list-style-image: url('fourpstar.gif');
}

ul.u {
    list-style-image: url('diagn1.gif');
}

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
em
{
 color: blue;
 font-size: 19px;
 font-family: "Times New Roman", Times, serif;
 font-style: normal;
 font-weight: bold;
}

#frame2_intro
{
  font-family: Arial, sans-serif;
  font-size: 20px;
  text-align: left;
  color: Black;
} 

body#page1{background-color: white;}


#frame3_intro
{
  font-family: "Comic Sans MS", cursive, sans-serif; 	 	
  font-size: 15px;
  text-align: left;
  color: Black;
  /* font-weight: bold; */
  font-weight: bold;
  letter-spacing: 2px;
  text-indent: 0px
} 


#frame4_intro
{
  font-family: "Trebuchet MS", Helvetica, sans-serif; 	 	
  font-size: 15px;
  text-align: left;
  color: Black;
  /* font-weight: bold; */
  letter-spacing: 2px;
  text-indent: 0px
} 


#frame5_intro
{
  /* font-family: "Comic Sans MS", cursive, sans-serif; */
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 17px;
  text-align: left;
  color: Black;
  font-weight: bold;
  letter-spacing: 2px;
  text-indent: 0px
}


#frame51_intro
{
  /* font-family: "Comic Sans MS", cursive, sans-serif; */
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 17px;
  text-align: center;
  color: Blue;
  font-weight: bold;
  letter-spacing: 2px;
  text-indent: 0px
}



@media(max-width: 500px) {
#frame51_intro
{
  /* font-family: "Comic Sans MS", cursive, sans-serif; */
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: auto;
  text-align: left;
  color: Green;
  font-weight: bold;
  letter-spacing: 2px;
  text-indent: 0px
}
}

#frame6_intro
{
  font-family: Arial, sans-serif, cursive;
  font-size: 18px;
  text-align: Left;
  /* font-weight: bold; */
  /* color: #990033; */
  color: #000066;
}

#frame7_intro
{
  font-family: courier;
  font-size: 16px;
  text-align: center;
  /* font-weight: bold; */
  color: #800040;
  /* background-color: #ccffe6; */
}

#frame41_intro
{
  font-family: "Trebuchet MS", Helvetica, sans-serif; 	 	
  font-size: 17px;
  text-align: left;
  color: Black;
  /* font-weight: bold; */
  letter-spacing: 2px;
  text-indent: 0px
} 

#frame71_intro
{
  font-family: courier;
  font-size: 22px;
  text-align: Left;
  font-weight: bold;
  color: #800040;
  /* background-color: #ccffe6; */
}


@media(max-width: 1000px) {
#frame712_intro {
  font-family: courier;
  font-size: 18px;
  text-align: Left;
  font-weight: bold;
  color: #800040;
  /* background-color: #ccffe6; */
}
}


@media(min-width: 1000px) {
#frame712_intro {
  font-family: courier;
  font-size: 28px;
  text-align: Left;
  font-weight: bold;
  color: #800040;
  /* background-color: #ccffe6; */
}
}


@media(max-width: 1000px) {
#frame711_intro {
  font-family: courier;
  font-size: 18px;
  text-align: right;
  font-weight: bold;
  color: #800040;
  /* background-color: #ccffe6; */
}
}

@media(min-width: 1000px) {
#frame711_intro {
  font-family: courier;
  font-size: 28px;
  text-align: right;
  font-weight: bold;
  color: #800040;
  /* background-color: #ccffe6; */
}
}

td.b {
    border: 1px solid black;
}


#frame1_intro
{
  font-family: Arial, sans-serif;
  font-size: 32px;
  text-align: center;
  color: #330000;
  /* background-color: #f0ffff; */
} 

#frame11_intro
{
  font-family: Arial, sans-serif;
  font-size: 32px;
  text-align: center;
  color: #330000;
  /* background-color: #f0ffff; */
}

#frame1_tabl
{
 font-family: arial,helvetica,sans-serif;
 font-size: 10px;
 text-align: center;
 color: #8b4513;
 background-color: #f0ffff;
} 

body {
    /* background-color: lightblue; */
    /* background-color:  #ffffcc; */
}

video {
  max-width: 95%;
  height: auto;
}

.vidx video {
  width: 50%;
  height: auto;
}

img {
  width: 23%;
  height: auto;
}


@media(max-width: 600px) {
img {
  width: 100%;
  height: auto;
}
}

@media(min-width: 1000px) {
.imgs img{
  width: 100%;
  height: auto;
}
}

@media(max-width: 1000px) {
.imgs img{
  width: 100%;
}
}

.imgx img {
  width: 60%;
  height: auto;
}


@media only screen
and (min-device-width: 300px)
and (max-device-width: 380px)
{
img {
  width: 16%;
  height: auto;
}
}

@media only screen (min-width: 200px)and (max-width: 300px)
{
img {
  width: 10%;
  height: auto;
}

H1
{
 color: blue;
 font-size: 12px;
}
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  /* height: 300px;*/ /* Should be removed. Only for demonstration */
  height: auto
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media(max-width: 700px){
  .column {
    width: 100%;
    height: auto;
  }
  }