body    { background-attachment: fixed; }
a:hover {color:#FFF;}
a {
  background: linear-gradient(0deg, #777, #777) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 350ms;
  --bg-h: 100%;
}
a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}


#w3-main { width:90%;margin-top:60px;margin-left:5%; }
#w3-top .w3-right { font-family: 'Philosopher', sans-serif;}
h1,h2 {font-family: 'Dancing Script', cursive;}
p,h4,h5,h6 { font-family: 'Philosopher', sans-serif;}
div#transbox-background {padding:0;}
div.transbox {margin:0;padding:10px;border: 1px solid black;opacity: 0.7;}
div.transbox h1 {font-weight: bold;color: #ffff00;}
div.transbox p {margin: 10px;font-weight: bold;font-size:20px;color: #ffff00;}
div.transbox span {font-size:xx-large;font-stretch:extra-expanded; }
div#transbox-background:nth-child(odd) {
  -ms-transform: skewX(5deg); /* IE 9 */
  transform: skewX(5deg); /* Standard syntax */
  border-right: 4px solid blue;
  border-left: 4px solid yellow;
  background-color:blue;
}
div#transbox-background {
  -ms-transform: skewX(-5deg); /* IE 9 */
  transform: skewX(-5deg); /* Standard syntax */
  border-right: 4px solid orange;
  border-left: 4px solid green;
  background-color:#87CEEB;
}

.navIcon {
  display: inline-block;
  cursor: pointer;
  width: 40px;padding:10px;
  font-size:36px!important
}

#bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  transition: 0.4s;
}
#bar1 { background-color: blue; }
.bar2 { background-color: yellow; }
.bar3 { background-color: red; }
.change #bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  background-color: orange;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
    background-color: green;
}

#w3-top {  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:12; }
   
#rightFloaty {
  position: -webkit-sticky;
  position: sticky;
  top: 150px;
  width: 30px;
  z-index:10;
 }
.vertical-center { display: table-cell;vertical-align: middle; }
#slideTitle  {color: #FFFF00; z-INDEX: 10; font: 34px 'Dancing Script', cursive;
  height:auto;  }
 #slideTitle1 { color: #FFFF99; }
 #slideTitle2 { color: #FFFF99; }
 #slideTitle3 { color: #FFFF99; }
 #slideTitle4 { color: #FFFF99;  }
 #slideTitle5 { color: #FFFF99;  }
 #slideTitle6 { color: #FFFF99;  }
 #slideTitle7 { color: #FFFF99;  }
 #slideTitle8 { color: #FFFF99;  }
 #slideTitle9 { color: #FFFF99;  }
 #slideTitle10 { color: #FFFF99; }
#goofierLook { margin-top:30px;margin-bottom:30px; }
.slanty { font-style:italic; }

.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;text-align:center;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid yellow;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.select-css option {
	font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}
.w3-main header { padding-top:12px; }
footer { margin-top:22px;background-color:blue; }
footer h4 {text-align:center;font-family: 'Philosopher', sans-serif; }
footer img { padding-left:30px;float:left; }
.w3-center .selecty {display:inline-block;width:inherit;}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}