/* A:visited {text-decoration: none; color:black}
A:link {text-decoration: none; color:black} 
A:hover {text-decoration: underline; color: blue;}
A:active {text-decoration: none; color:black} */

/* (A) GALLERY - BIG SCREEN */
#vid-gallery {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 10px;
}
#vid-gallery video {
  width: 100%;
  cursor: pointer;
}
 
/* (B) GALLERY - SMALL SCREEN */
@media screen and (max-width: 1000px) {
  #vid-gallery { grid-template-columns: repeat(2, auto); }
}
@media screen and (max-width: 600px) {
  #vid-gallery { grid-template-columns: auto; }
}

.border {
	font-size: 1.6rem;
	display: grid;
	place-items: center;
	min-height: 200px;
	border: 8px solid;
	padding: 1rem;
}

.full {
	border-image: linear-gradient(45deg, turquoise, greenyellow) 1;
}

.sides {
	border-image: linear-gradient(to left, turquoise, greenyellow) 1 0;
}
.sides-2 {
	border-image: linear-gradient(to bottom, turquoise, greenyellow) 0 1;
}

.linear-repeating {
	border-width: 10px;
	border-image: repeating-linear-gradient(45deg, turquoise, pink 4%) 1;
}

.radial-repeating {
	border-width: 20px;
	border-image: repeating-radial-gradient(
			circle at 10px,
			turquoise,
			pink 2px,
			greenyellow 4px,
			pink 2px
		)
		1;
}

/* border radius example is drawn from this pen: https://codepen.io/shshaw/pen/MqMZGR
I've added a few comments on why we're using certain properties
*/

.full-withradius {
	position: relative;
	background: #fff;

	/*The background extends to the outside edge of the padding. No background is drawn beneath the border.*/
	background-clip: padding-box;

	border: solid 8px transparent;
	border-radius: 0.8rem;

	&:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		margin: -8px; /* same as border width */
		border-radius: inherit; /* inherit container box's radius */
		background: linear-gradient(to left, turquoise, greenyellow);
	}
}

.double {border-style: double;}

.arrow_box {	display: inline-block;	position: relative;	background: red;	width:auto;	height:30px;	top:0;
	left:0;	padding: 0 10px 0 25px;	line-height: 30px;	color: black;	font-size: 20px; font-weight:bold;
	margin-right: 30px;}
	
.arrow_box:after {	left: 100%;	border: solid transparent;	content: " ";	height: 0;	width: 0;
	position: absolute;	pointer-events: none;	border-color: rgba(66, 170, 225, 0);	border-left-color:  red;	border-width: 15px;	top: 50%;	margin-top: -15px;}

.arrow_box:before {	left: 0;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;
	border-color: rgba(66, 170, 225, 0);	border-left-color: light-grey;                                          	border-width: 15px;	top: 50%;	margin-top: -15px;}

.arrow-highlight{  position:relative;  margin:0 0.5em;  padding:5px;}  
.arrow-highlight:before{  content:" ";  z-index:-1;  left:-0.5em;  top:0.1em;  border-width:0.5em;
  border-style:solid;  border-color:red;  position:absolute;  width:calc(100% - 0.5em);  border-left-color:transparent;}

.arrow-highlight:after{  content:" ";  z-index:-1;  right:0;  top:0.1em;  border-width:0.5em;  border-style:solid;
  border-color:red;  position:absolute;  border-top-color:transparent;  border-bottom-color:transparent;
  border-left-color:transparent;  transform:rotate(180deg);   transform-origin:center right;}

/* .arrow-highlight{  position:relative;  margin:0 0.5em;  padding:0 0.2em;}  
.arrow-highlight:before{  content:"";  z-index:-1;  left:-0.5em;  top:0.1em;  border-width:0.5em;
  border-style:solid;  border-color:red;  position:absolute;  width:calc(100% - 0.5em);  border-left-color:transparent;}

.arrow-highlight:after{  content:"";  z-index:-1;  right:0;  top:0.1em;  border-width:0.5em;  border-style:solid;
  border-color:red;  position:absolute;  border-top-color:transparent;  border-bottom-color:transparent;
  border-left-color:transparent;  transform:rotate(180deg);   transform-origin:center right;} */

.changedirection {
	  unicode-bidi: bidi-override;
	  direction: rtl;
	  text-align:left;
	  }
	  
.auto-style_blue_med {	font-size:14pt; color:blue }
.auto-style_blue_small {	font-size:12pt; color:blue }
.auto-style_orange_medium {	font-size:13pt; color:orange}

.class_ta A:visited {text-decoration: underline; color:blue}
.class_ta A:link {text-decoration: underline; color:blue}
.class_ta A:hover {text-decoration: underline; color: #C40E03;}

.header_ta {	font-size:24pt; font-weight:bold;  color:blue; text-align:left; line-height:26px }
.header_sub_ta {	font-size:20pt; font-weight:bold;  color:green; text-align:left; line-height:22px }
.div_prospectus {height:451px ; width:720px}

.watermark {position:absolute;left:10px;top:300px;opacity: 0.8;font-size: 40pt;font-weight:bold;width: 100%;color:#fff;text-align:center;z-index: 1000;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);
-webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;}
  
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

table.search {background-color:blue;  border="2"; width="150"; cellpadding="0" ;cellspacing="2";
} 
/* Thanks to  http://www.html.am/html-codes/marquees/css-marquee.cfm */
.marquee { height: 25px;	 overflow: hidden; position: relative; background: yellow; color: black; border: 1px solid brown;}
.marquee p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 20px; text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%); -webkit-transform:translateX(100%);	 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 20s linear infinite; -webkit-animation: scroll-left 20s linear infinite; animation: scroll-left 20s linear infinite;}
/* Move it (define the animation) */
@-moz-keyframes scroll-left { 0%   { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); }}
@-webkit-keyframes scroll-left { 0%   { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); }}
@keyframes scroll-left { 0%   {  -moz-transform: translateX(100%);  -webkit-transform: translateX(100%);  transform: translateX(100%);  } 100% { 
 -moz-transform: translateX(-100%);  -webkit-transform: translateX(-100%); transform: translateX(-100%);  }}

div.pic {  display:inline-block; color: #333; margin-left: 10px; padding: 0px; width: 155px; float: left;}

div.teacherstext { color: black; margin-left 5px;margin-top:10px; padding: 20px; width: 850px; height: 120px; display:inline-block;  }
img.teachers {height:150px; width:130px; margin: 5px; margin-bottom:40px;  float: left;
   padding:0px;
   border:2px solid blue;
}
 iframe {width: 840px; height: 630px; margin-left: 0px; margin-bottom: 20px;}
 
/* .tooltip {     position: relative; display: inline-block; } 
.tooltip .tooltiptext { visibility: hidden; width:220px;background-color:darkmagenta;color: #fff;font-size:18pt; text-align: left;padding: 5px 5px;border-radius: 6px; position: absolute; z-index: 1;top: -30px;left: 115%;}
.tooltip:hover .tooltiptext {visibility: visible;}

.tooltip1 {     position: relative; display: inline-block; } 
.tooltip1 .tooltiptext1 { visibility: hidden; width:220px;background-color:blue;color: #fff;font-size:18pt; text-align: left;padding: 5px 5px;border-radius: 6px; position: absolute; z-index: 1;top: 0px;left: 115%;}
.tooltip1:hover .tooltiptext1 {visibility: visible;}

 */
#backtotop {	cursor : pointer;	display : none;	margin : 0px 0px 0px 600px;	position : fixed;	bottom : 45px;	font-size : 100%;	padding	: 10px;
	width : 100px;	text-align : center;	background-color : #C40E03;		-webkit-border-radius : 8px;	-moz-border-radius : 8px; border-radius : 8px;
	filter : alpha(opacity=40);	-khtml-opacity : 0.6;	-moz-opacity : 0.6;	opacity	: 0.6;	color : #ffffff;	font-weight:bold;	font-size : 14px;	z-index	: 1000;}

#backtotop:hover{	filter : alpha(opacity=90);	-khtml-opacity : 0.9;	-moz-opacity : 0.9;	opacity	: 0.9;}

#backtotop1 {	cursor : pointer;	display : none;	margin : 0px 0px 0px 725px;	position : fixed;	bottom : 45px;	font-size : 100%;
	padding	: 10px;	width : 100px;	text-align : center;	background-color : #000000;	border-radius : 8px;	-webkit-border-radius : 8px;	-moz-border-radius : 8px;
	filter : alpha(opacity=40);	-khtml-opacity : 0.6;	-moz-opacity : 0.6;	opacity	: 0.6;	color : #ffcc00;	font-weight:bold;	font-size : 14px;	z-index	: 1000;}

#backtotop1:hover{	filter : alpha(opacity=90);	-khtml-opacity : 0.9;	-moz-opacity : 0.9;	opacity	: 0.9;}


/* #footer {  width: 900px; height:20px; text-align:center; vertical-align:middle; clear: both; color: #333; background: yellow; margin: 0px 0px 0px 0px; padding: 0px;} */