*{
	color: #212121;
}

a{
	color: #0076BA;
	text-decoration:underline;
}

a:visited{
	color: #9676Ba;
}

.menu{
	display:none;
	z-index: 4000;
	width: auto;
	max-width: 80%;
	height: 100%;
	background-color: #F0F8FF;
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	left: 0;
	padding: 0;
	/*margin-right:-1em;*/
	overflow: auto;
	white-space: nowrap;
	border-right: 1px outset #DAE0E6;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size:1em;
	resize:horizontal;
}

.menu line{
	width:100%;
	padding:0;
	margin:0;
	margin-bottom:0.1em;
	/*margin-top:0.25;*/
	padding-top:0.4em;
	padding-bottom:0.6em;
	display:block;
}

.menu line:hover{
	box-shadow: 0px 2px 7px #373737;
	background: #DAE0E6;
}

.menu line up, down, upSub, downSub{
	font-size:1.1em;
	font-weight:bold;
	color: #373737;
	line-height:1em;
	margin:0;
	cursor: pointer;
	padding:0;
}

.menu line up, down{
	padding-left: 1em;
	padding-right: 1em;
	width: 3em;
}

.menu line upSub, downSub{
	padding-left: 4.6em;
	padding-right: 1em;
	width:6.6em;
}

.menu line up, upSub{
	display:inline-flex;
	vertical-align: 20%;
	padding-bottom:0.4em;
}

.menu line down, downSub{
	display:none;
	vertical-align: -35%;
	padding-top:0.4em;
}

.menu line num, numSubSub{
	display: inline-flex;
	padding:0;
	margin:0;
	color:373737;
}

.menu line num{
	width:1.8em;
}

.menu line menulink, submenulinknosubsub, subsubmenulinknosubsubsub, subsubmenulinknosubsubsubindent{
	display: inline-flex;
	margin:0;
	padding:0;
	padding-right: 1em;
	color: #0076BA;
	text-decoration:underline;
}

.menu line menulink a, submenulinknosubsub a, subsubmenulinknosubsubsub a, subsubmenulinknosubsubsubindent a{
	color: #9676Ba;
	text-decoration:underline;
}

.menu line menulink a:visited, submenulinknosubsub a:visited, subsubmenulinknosubsubsub a:visited, subsubmenulinknosubsubsubindent a:visited{
	color: #0076BA;
}

.menu line submenulinknosubsub{padding-left: 7.3em;}

.menu line subsubmenulinknosubsubsub{padding-left: 9.3em;}

.menu line numSubSub{
	padding-left: 9.3em; 
	width: 11.1em;
	cursor: pointer;
}

.menu line subsubmenulinknosubsubsubindent{padding-left: 12.3em;}

.menu line indent{
	display: inline-flex;
	margin:0;
	padding:0;
	width:1em;
}

#subMenu1, #subMenu2, #subSubMenu1, #subMenu3, #subSubMenu2, #subSubMenu3, #subSubMenu4, #subSubMenu5, #subSubMenu6, #subSubMenu7, #subMenu4, #subSubMenu8, #subSubMenu9, #subSubMenu10, #subSubMenu11{display:none;}

.content{
	font-size: 1.3vw;
	display:inline;
	font-weight:normal;
}

table {
  /*margin:auto;
  margin-top:0;
  margin-bottom:0;
  padding:0;*/
  /*display:list-item;
  list-style-type:none*/
  margin-left:auto; 
    margin-right:auto;
}

table.blank {
  table-layout: auto;
  width: 50%;
  height: 10%;
  border-collapse: collapse;
  margin: auto;
  margin-left: 1.6vw;
}

table.blank th {
  height: 20px;
}

table.heading {
  table-layout: auto;
  width: 100%;
  padding:0;
  margin:0;
}

table.heading th, table.heading td {
  padding:0;
  margin:0;
}
table.button_header{width:50%;}
table.contents {
	table-layout: fixed;
	max-width:98%; !important
	margin:auto;
	margin-left: 3%;
	left:0px;
	padding: 1vw;
	border-collapse: collapse;
	font-size: 1.3vw;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

table.center {
	
	margin-left:auto; 
    margin-right:auto;
	/*margin: auto;
	margin-left: 1.6vw;*/
	padding: 1vw;
	border-collapse: collapse;
	font-size: 1.3vw;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

table.contents th, table.contents td, table.center th, table.center td, table.blank th, table.blank td {
  border: 2px solid #DAE0E6;
  font-weight: normal;
  font-size: 1.3vw;
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

tr.noBorder td {
  border: 0;
}

.video-container {
  /*position: relative;*/
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: #FFFFFF;
  
}

video {
  /* override other styles to make responsive */
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: #FFFFFF;
  z-index: inherit;
  /*visibility: hidden;*/
}

@media only screen and (min-width: 1024px) {
  
  div.section:hover{
		transition-duration: 1s;
		-ms-transform: scale(1.06); /* IE 9 */
		-webkit-transform: scale(1.06); /* Safari 3-8 */
		transform: scale(1.06); 
	}
	
	div.sectionContent:hover{
	transition-duration: 1s;
	-ms-transform: scale(1.005); /* IE 9 */
  	-webkit-transform: scale(1.005); /* Safari 3-8 */
  	transform: scale(1.005); 
}
	
	button:hover .tooltiptext{
  visibility: visible;
}

.video-container {width: 40%;}
/*#fpb3{margin-left:6%;}*/
/*.top{min-height: 23vh;}*/
}
/**/



a:hover {
  background: #DAE0E6;
}

button{
	font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	box-shadow: none;
	margin: 0;
	padding: 0.5vw;
	background: #F0F8FF;
	border-color: #DAE0E6;
	position: relative;
	outline: 0;
	font-size: 0.8em;
}

button .tooltiptext{
  visibility: hidden;
  width: auto;
  /*background-color: black;*/
  box-shadow: 0px 2px 7px #373737;
  background: #DAE0E6;
  text-align: center;
  /*border-radius: 6px;*/
  padding-left: 0.2vw;
  padding-right: 0.2vw;
  padding-bottom: 0.2vw;

  /* Position the tooltip */
  position: absolute;
  width: auto;
  white-space: nowrap;
  top: 112%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

button:hover {
  cursor: pointer;
  transition-duration: 0.4s;
  box-shadow: 0px 2px 7px #373737;
  background: #DAE0E6;
}


button:[data-state='hover'] .tooltiptext{
  visibility: hidden;
}

/*
button:active{
  	box-shadow: 0px 2px 7px #373737;
  	background: #DAE0E6;
}

button:focus{
  	box-shadow: 0px 2px 7px #373737;
  	background: #DAE0E6;
}
*/

th {
	padding-left: 0.5vw;
	padding-right: 0.5vw;
}

div.sectionContent {
  max-width:90%;
  margin: auto;
  padding: 2vw;
  /*border: solid;
  border-radius: 15px;
  border-width: 2px;
  border-color:#D3D3D3;
  border-style: outset;*/
  background-color:#FFFFFF;
  box-shadow: 0px 2px 6px #c8c8c8;
  /*transition-duration: 1s;*/
}

div.code {
	max-width:98%;
	overflow-x: auto;
	white-space: nowrap;
	margin: auto;
	margin-left: 2.5vw;
	padding: 1vw;
	background-color:#DAE0E6;
	box-shadow: 0px 2px 6px #c8c8c8; 
	display: inline-block;
}

div.section {
  max-width:97.8%;
  margin: auto;
  padding: 1vw;
  overflow-x: auto;
  /*border: solid;
  border-radius: 15px;
  border-width: 2px;
  border-color:#D3D3D3;
  border-style: outset;*/
  background-color:#FFFFFF;
  box-shadow: 0px 2px 6px #c8c8c8;
  /*transition-duration: 1s;*/
}

div.section:hover{
	box-shadow: 0px 2px 7px #373737;
}

div.sectionContent:hover{
	box-shadow: 0px 2px 7px #373737;
	transition-duration: 1s;
	/*-ms-transform: scale(1.2); /* IE 9 */
  	/*-webkit-transform: scale(1.2); /* Safari 3-8 */
}

div.gap {
  padding: 1vw;
}

.overflow-dots { 
  display:list-item;
  list-style-type: circle;
  overflow: hidden; 
  /*text-overflow: ellipsis;*/
  white-space: nowrap;
  width: 100%;
}

/* TEXT STYLES */

.verysmall {
	font-size: 0.8vw;
}

.small {
	font-size: 0.9vw;
}

* {
  box-sizing:border-box;
}

.top {
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  left: 50%;
  transform: translate(-50%, 0);
  padding:0;
  padding-top:0.5vw;
  margin:0;
  /*padding-left:0.5vw;
  padding-right:0;
  margin-left:0;*/
  width:100%;
  /*background-color: #F5F5F5;*/
  /*background-color: #5f5f5f;*/
  background-color: #DAE0E6;
  z-index: 1;
}

.left {
  margin-top: 20vh;
  padding:1vw;
  float:left;
  width:50%;
}
.right {
  margin-top: 20vh;
  padding:1vw;
  float:left;
  width:50%;
}
.main {
  margin-top: 15vh;
  padding:1vw;	
  float:left;
  width:100%;
}

brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */
    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

/*p {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}
h1{font-family:Verdana, Arial, Helvetica, sans-serif;color: #000000; text-align:center; font-size: 1.5vw;}
h2{font-family:Verdana, Arial, Helvetica, sans-serif;color: #000000; font-size:18px; font-style:italic;}
h3{font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#006666; font-size: 1vw;}
h4{font-family:Geneva, Arial, Helvetica, sans-serif;color: #000000; text-align:right}
li{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 0.9vw;}
ul{margin-left: 1em; padding-left: 1em;} */

#content1 p {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 1.2vw; color: #5e5e5e;}
h1{font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;color: #ED8B00; text-align:center; font-size: 1.7vw; /*font-style: italic*/}
h2{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;color: #3F51B5; font-size:1.25em; text-align: left; margin: 0; padding:0; margin-bottom: 0.1em;/*float: left; width: 45%; margin-left: 0.6vw; margin-top: 0.1vw; margin-bottom: 0; padding-top:1vw; padding-bottom:1vw;*/}
h3{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-weight: bold;color: #3F51B5; font-size: 1vw;}
h4{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-weight: bold;color: #3F51B5; font-size: 1.4vw;}
h5{font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;color: #ED8B00; text-align:right; font-size: 1.5em; margin: 0; padding:0; /*font-style: italic*/ /*float: left; width: 44%; text-align: right; margin-top: 0.2vw; margin-bottom: 0; padding-top:1vw; padding-bottom:1vw;*/}
h6{font-family: Courier New, sans-serif; font-size: 1.2vw; display:inline;}
h7{font-size: xx-large; line-height: 0.5em; font-weight:bold; padding:0; margin:0.9em;}
.h3content{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-weight: bold; color: #3F51B5; font-size: 1.4vw;}
.h3contentCode{font-family:Courier New, sans-serif;font-weight: bold; color: #3F51B5; font-size: 1.4vw; display:inline;}


.content-smaller1{
	font-size: 1.2vw;
	display:inline;
	font-weight:normal;
}

div.indentplus{
	display: inline-flex;
	margin:0;
	padding:0;
	width:0.4em;
}

div.indentminus{
	display: inline-flex;
	margin:0;
	padding:0;
	width:0.3em;
}

.content-smaller2{
	font-size: 1.1vw;
	display:inline;
	font-weight:normal;
}

.content-smaller3{
	font-size: 1vw;
	display:inline;
	font-weight:normal;
}

.content-smaller4{
	font-size: 0.9vw;
	display:inline;
	font-weight:normal;
}


li{ font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 1vw; text-align:left}
#content-list li{ font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 1.1vw; text-align:left;}
ul{margin-left: 1em; padding-left: 1em;}
ol{margin-left: 1em; padding-left: 1em; }

ol li {font-weight:bold;}

/*
ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}
ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}
*/
/* list-style-image: url('ap_computer_science/images/bullet.png'); */


strong{
	color: #536DFE;
}

body {
	/* background-color: #F5F5F5; */
	background-color: #DAE0E6;
}

.image-container {
  width: 100%
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: transparent;
}

img:hover {width: 50%;}

#compilersgif:hover {width: 80%;}
#java_compilergif:hover {width: 80%;}
#path03:hover {width: 45%;}
#path04a:hover {width: 55%;}
#power {width: 3%;}
#power:hover {width: 5%;}
#power2 {width: 3%;}
#power2:hover {width: 5%;}
#errors:hover {width: 80%;}
#primitive2:hover {width: 45%;}
#bodmas:hover {width: 45%;}
#hamburger {width:30px; height:30px;}
#hamburger:hover {width:30px; height:30px; cursor: pointer; box-shadow: 0px 2px 7px #373737;}
#switch:hover {width: 40%;}
#comment1:hover {width: 25%;}
#comment2:hover {width: 25%;}
#comment3:hover {width: 65%;}
#comment4:hover {width: 60%;}
#comment5:hover {width: 40%;}
#comment6:hover {width: 40%;}
#comment7:hover {width: 45%;}

.headerZoom {
	padding-top: 22%;
	display: none;
}

.headerZoom02 {
	padding-top: 25%;
	display: none;
}

.headerZoom03 {
	padding-top: 90%;
	display: none;
}

.headerZoom04 {
	padding-top: 38%;
	display: none;
}

/*#v1, #v2, #v3 {display: inline;}*/

@media screen and (min-width: 768px) and(max-device-width: 991px) {
	#content-list li{ font-size: 2.6vw;}
	
	.left, .right, .main {
		margin-top: 10vh;
  	}
	
	div.dropdowncontainer {
	margin-top:2vh;
	}
	
	table.button_header {width: 85%;}
	button{font-size: 2vw;}
	h1 {
		font-size: 2.8vw;
	}
	
	h5 {
		font-size: 2.8vw;
	}
	
	h2 {
		font-size: 2.6vw;
		margin-bottom: 0.1vw;
	}
	h3 {
		font-size: 2.6vw;
	}
	h6 {
		font-size: 2.8vw;
	}
	li {
		font-size: 2.2vw;
	}
	.overflow-dots {font-size:1.8vw;}
	.verysmall {
		font-size: 1.6vw;
	}
	.small {
		font-size: 1.8vw;
	}
	.h3content{font-size: 2.8vw;}
	.h3contentCode{font-size: 2.8vw;}
	.content{
		font-size: 2.7vw;
	}
	
	.content-smaller1{
		font-size: 2.6vw;
	}
	
	.content-smaller2{
		font-size: 2.4vw;
	}
	
	.content-smaller3{
		font-size: 2.3vw;
		display:inline;
		font-weight:normal;
	}
	
	.content-smaller4{
		font-size: 2.2vw;
		display:inline;
		font-weight:normal;
	}
	
	img {
    	width: 80%;
    	height: auto;
    	aspect-ratio: attr(width) / attr(height);
	} 
  
  img:hover {
	width: 100%;
	height: auto;
    aspect-ratio: attr(width) / attr(height);
  }
  #path03 {width: 65%;}
  #path04a {width: 75%;}
  #power {width: 5%;}
  #power2 {width: 5%;}
  #primitive1 {width: 100%;}
  #bodmas {width: 100%;}
  #power:hover {width: 7%;}
  #power2:hover {width: 7%;}
  #primitive1:hover {width: 100%;}
  #primitive2:hover {width: 100%;}
  #bodmas:hover {width: 100%;}
  #errors{width: 100%;}
  #errors:hover{width: 100%;}
  #hamburger {width:30px; height:30px;}
  #hamburger:hover {width:30px; height:30px; cursor: pointer; box-shadow: 0px 2px 7px #373737;}
  
  .video-container{width: 80%;}
  
  
  
  #compilersgif{width: 80%;}
  #classes{width: 100%;}
  #java_compilergif{width: 80%;}
  #compilersgif:hover {width: 90%;}
  #java_compilergif:hover {width: 90%;}
  #path03:hover {width: 85%;}
  #path04a:hover {width: 95%;}
  
  table.contents th, table.contents td, table.center th, table.center td {font-size: 2.7vw;}
  table.contents{margin-left: 5%;}
}

@media screen and (max-device-width: 600px) and (orientation: portrait) {
	div.blank_link {font-size: 0.9em;}
	body {
  		margin: 0;
  		padding: 0;
	}
	.left, .right, .main {
		margin-top: 10vh;
		padding-left:0;
		padding-right:0;
  	}
	#zoom_out {visibility:hidden;}
  	#zoom_in {visibility:hidden;}
	table.button_header {width: 99%;}
	button{font-size: 3.5vw;}
	div.sectionContent {
  		max-width:100%;
		padding-top:1em;
	}
	
	div.section {
  		max-width:100%;
		overflow-x: scroll;
	}
	h1 {
		font-size: 4vw;
		padding:0;
		padding-bottom:1vw;
		margin:0;
	}
	h5 {
		font-size: 0.8em;
	}
	h2 {
		font-size: 0.75em;
		margin-bottom: 0.1vw;
	}
	h3 {
		font-size: 3vw;
	}
	h6 {
		font-size: 3.5vw;
	}
	li {
		font-size: 2.6vw;
	}
	.overflow-dots {font-size:2.6vw;}
	#content-list li{font-size: 3.5vw;}
	.verysmall {
		font-size: 2.3vw;
	}
	.small {
		font-size: 2.2vw;
	}
	.left, .right, .main {
		padding:0.1vw;
		width:100%;
  	}
	
	.h3content{font-size: 3.5vw;}
	.h3contentCode{font-size: 3.5vw;}
	.content{
		font-size: 3.4vw;
	}
	
	.content-smaller1{
		font-size: 3.3vw;
	}
	
	.content-smaller2{
		font-size: 3.2vw;
	}
	
	.content-smaller3{
		font-size: 3.1vw;
		display:inline;
		font-weight:normal;
	}
	
	.content-smaller4{
		font-size: 3vw;
		display:inline;
		font-weight:normal;
	}
	
	
	
  img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
  } 
  img:hover {
	width: 100%;
	height: auto;
    aspect-ratio: attr(width) / attr(height);
  }

  #path03 {width: 75%;}
  #path04a {width: 85%;}
  #power {width: 7%;}
  #power2 {width: 7%;}
  #path03:hover {width: 85%;}
  #path04a:hover {width: 95%;}
  #power:hover {width: 9%;}
  #power2:hover {width: 9%;}
  
  .video-container{width: 100%;}
  
  #classes{width: 100%;}
  #errors{width: 100%;}
  #errors:hover{width: 100%;}
  #compilersgif{width: 100%;}
  #java_compilergif{width: 100%;}
  #primitive1{width: 100%;}
  #primitive2{width: 100%;}
  #compilersgif:hover {width: 100%;}
  #java_compilergif:hover {width: 100%;}
  #primitive1:hover{width: 100%;}
  #primitive2:hover{width: 100%;}
  
  #hamburger {width:30px; height:30px;}
  #hamburger:hover {width:30px; height:30px; cursor: pointer; box-shadow: 0px 2px 7px #373737;}
  #comment1 {width: 60%;}
	#comment2 {width: 60%;}
	#comment3 {width: 100%;}
	#comment4 {width: 100%;}
	#comment5 {width: 60%;}
	#comment6 {width: 60%;}
	#comment7 {width: 80%;}
  #comment1:hover {width: 70%;}
	#comment2:hover {width: 70%;}
	#comment3:hover {width: 100%;}
	#comment4:hover {width: 100%;}
	#comment5:hover {width: 70%;}
	#comment6:hover {width: 70%;}
	#comment7:hover {width: 90%;}
  
  table.contents th, table.contents td, table.center th, table.center td {font-size: 3.5vw;}
  table.contents{margin-left: 8%;}
}

@media screen and (max-device-width: 900px) and (orientation: landscape) {	
	#content-list li{ font-size: 2.6vw;}
	.left, .right, .main {
		margin-top: 6em;
  	}
	
	div.dropdowncontainer {
	margin-top:1.4vh;
	}
	

	table.button_header {width: 85%;}
	button{font-size: 2vw;}
	h1 {
		font-size: 2.8vw;
	}
	
	h5 {
		font-size: 2.8vw;
	}
	
	h2 {
		font-size: 2.6vw;
		margin-bottom: 0.1vw;
	}
	h3 {
		font-size: 2.3vw;
	}
	h6 {
		font-size: 2.8vw;
	}
	li {
		font-size: 1.8vw;
	}
	.overflow-dots {font-size:1.8vw;}
	.verysmall {
		font-size: 1.3vw;
	}
	.small {
		font-size: 1.4vw;
	}
	.h3content{font-size: 2.8vw;}
	.h3contentCode{font-size: 2.8vw;}
	.content{
		font-size: 2.7vw;
	}
	
	.content-smaller1{
		font-size: 2.6vw;
	}
	
	.content-smaller2{
		font-size: 2.4vw;
	}
	
	.content-smaller3{
		font-size: 2.3vw;
		display:inline;
		font-weight:normal;
	}
	
	.content-smaller4{
		font-size: 2.2vw;
		display:inline;
		font-weight:normal;
	}
	
	img {
    	width: 80%;
    	height: auto;
    	aspect-ratio: attr(width) / attr(height);
	} 
  
  img:hover {
	width: 100%;
	height: auto;
    aspect-ratio: attr(width) / attr(height);
  }
  #path03 {width: 65%;}
  #path04a {width: 75%;}
  #power {width: 5%;}
  #power2 {width: 5%;}
  #primitive1 {width: 100%;}
  #bodmas {width: 100%;}
  #power:hover {width: 7%;}
  #power2:hover {width: 7%;}
  #primitive1:hover {width: 100%;}
  #primitive2:hover {width: 100%;}
  #bodmas:hover {width: 100%;}
  #errors{width: 100%;}
  #errors:hover{width: 100%;}
  
  .video-container{width: 80%;}
  
  
  #compilersgif{width: 80%;}
  #classes{width: 100%;}
  #java_compilergif{width: 80%;}
  #compilersgif:hover {width: 90%;}
  #java_compilergif:hover {width: 90%;}
  #path03:hover {width: 85%;}
  #path04a:hover {width: 95%;}
  #hamburger {width:30px; height:30px;}
  #hamburger:hover {width:30px; height:30px; cursor: pointer; box-shadow: 0px 2px 7px #373737;}
  
  table.contents th, table.contents td, table.center th, table.center td {font-size: 2.7vw;}
  table.contents{margin-left: 5%;}
}

/*
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	#menu {width:50%; margin:auto;}
	.top {
		height:25vh;
  	}
	
	.left, .right, .main {
		margin-top: 25vh;
  	}
	
	div.dropdowncontainer {
	margin-top:2vh;
	}
	
	#zoom_out {visibility:visible;}
  	#zoom_in {visibility:visible;}
}
*/
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  text-align:center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration:none;
}

/* Position the "next button" to the right */
.next {
  right: 0px;
  border-radius: 3px 0 0 3px;
}
.prev {
  left: 0px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #DAE0E6;
}

/* Caption text */
.text {
  color: black;
  font-size: 15px;
  padding: 8px 12px;
  position: relative;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 12px;
  padding: 8px 12px;
  position: relative;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.1s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.1s;
  animation-name: fade;
  animation-duration: 0.1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* On smaller screens, decrease text size 
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}*/

/*.carousel{
	position: relative;
	height: 600px;
	width: 80%;
	margin: 0 auto;
}

.carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel__video-fluid {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel__track-container {
	background: lightgreen;
	height: 100%;
	position: relative;
}

.carousel__track {
	padding: 0;
	margin: 0;
	list-style: none;
}

.carousel__slide {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.carousel__button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.carousel__button--left {
	left: -40px;
}

.carousel__button--right {
	right: -40px;
}

.carousel__button img {
	width: 8px;
}

.carousel__nav {
	display: flex;
	justify-content: center;
	padding: 10px 0;
}

.carousel__indicator {
	border: 0;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	background: rgba(0, 0, 0, .3);
	margin: 0 12px;
}

.carousel__indicator.current-slide {
	background: rgba(0, 0, 0, .75);
}*/
/*
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
    display: none;
}
*/
/*
audio::-webkit-media-controls,
video::-webkit-media-controls {
    display: none;
}
*/