/* CSS Document */
body{
  /*background-image:url(https://www.vmlearn.online/Images/LeafBG.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
}

.MenuItem{
  font-size:1.4vw;
  cursor:pointer;
  font-weight:bold;	
  align-self: flex-end;
}

.MenuItem:hover{
  color:#429138;
}

.MenuItem2{
  font-size:2.2vw;
  cursor:pointer;
  font-weight:bold;	
}

.MenuItem2:hover{
  color:#429138;
}

.UnderlineGreen{
  border-bottom: 5px solid #4e8d47;
  padding-bottom: 3px;
}

.UnderlineWhite{
  border-bottom: 3px solid #ffffff;
  padding-bottom: 3px;
}

td{
  padding-right:25px;
}

.container {
  position: relative;
}

.AnchorText{
	font-weight:bold;
	font-size:24px;
}

.text-block {
  position: absolute;
  top:10%;
  left: 15%;
  right: 15%;
  background-color:#FFFFFF;
  border:3px solid black;;
  
  padding: 20px;
}

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 85%;
  height: 85%;
  border: 0;
}

input{ 
  width:100%;
  padding:5px;
  border:1px solid black;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

.SeriesButton {
  background-color:#FFF;
  border:thin;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 1vw;
  font-weight:bold;
  margin: 4px 2px;
  width:90%;
  height:auto;
  font-weight:bold;
  border-radius: 6px;
}

.LoginButton {
  border-color: #00682f;
  color: #000000;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  width:180px;
  font-weight:bold;
  border-radius: 6px;
}

.addMore:hover{
  background-color: #ddd;
}

.tooltip-inner { 
  max-width: 350px !important;
}

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  font-size: 18px;
  margin-bottom:0px;
}

.flex-item-1 {
  flex: 25%;
  margin-left:15px;
  margin-right:15px;
  margin-bottom:0px;
}
.flex-item-2, .flex-item-3, .flex-item-4 {
  flex: 25%;
  margin-left:0px;
  margin-right:15px;
  margin-bottom:0px;
}

.flex-item3-1 {
  flex: 33.3%;
  margin-left:15px;
  margin-right:0px;
  margin-bottom:0px;
}
.flex-item3-2 {
  flex: 33.3%;
  margin-left:15px;
  margin-right:15px;
  margin-bottom:0px;
}
.flex-item3-3 {
  flex: 33.3%;
  margin-left:0px;
  margin-right:15px;
  margin-bottom:0px;
}


@media (max-width: 1625px) {
	.CSSMediaShowing{
		background-color:#F00 !important; /*red*/
	}
	
	.flex-container {
	  flex-direction: row;
	  flex-wrap: wrap;
	}

	.flex-item-1, .flex-item-3 {
	  flex: 40%;
	  margin-left:0px;
	  margin-right:15px;
	  margin-bottom:15px;
	}
	.flex-item-2, .flex-item-4 {
	  flex: 40%;
	  margin-left:0px;
	  margin-right:0px;
	  margin-bottom:15px;
	}
  
	.SeriesButton {
	  padding: 5px;
	  font-size: 2vw;
	}
	
	.SeriesText-1, SeriesText-2, SeriesText-3, SeriesText-4{
	  font-size:2vw;
	}
  
	.LoginButton {
	  padding: 5px;
	  font-size: 12px;
	  width:140px;
	  margin-top:15px;
	}

	.IntroSection{
		width:43% !important;
	}
	.VMLearnText{
		margin-top:-32px !important;
		font-size:7.6vw !important;
	}
	.IntroText{
		margin-top:-32px !important;
		font-size:1.4vw !important
	}
}

@media (max-width: 1400px) {
	.CSSMediaShowing{
		background-color:#60F !important; /*blue*/
	}
	
	.IntroSection{
		width:44% !important;
	}
	.VMLearnText{
		margin-top:-22px !important;
		font-size:7vw !important
	}
	.IntroText{
		margin-top:-22px !important;
		font-size:1.7vw !important
	}
}

@media (max-width: 1100px) {
	.CSSMediaShowing{
		background-color:#390 !important; /*green*/
	}
	
	.MenuFlex1{
		display:none !important;
	}
	
	.navbar{
		display:inline !important;
	}
	
	.IntroSection{
		width:45% !important;
	}
	.VMLearnText{
		margin-top:-12px !important;
		font-size:9Uvw !important
	}
	.IntroText{
		margin-top:-12px !important;
		font-size:2vw !important;
		line-height:100% !important;
	}
}

@media (max-width: 900px) {
	.CSSMediaShowing{
		background-color:#90F !important; /*purple*/
	}
	.modal-dialog{
		width:100%;
	}
	.MenuItem2{
		font-size:2.1vw !important;
	}
	
	.IntroSection{
		width:48% !important;
	}
	.VMLearnText{
		margin-top:0px !important;
		font-size:8.2Uvw !important
	}
	.IntroText{
		margin-top:0px !important;
		font-size:2.1vw !important;
		line-height:100% !important;
	}
}

@media (max-width: 650px) {
	.CSSMediaShowing{
		background-color:#FF0 !important; /*yellow*/
	}
	
	.IntroSection{
		width:75% !important;
	}
	.VMLearnText{
		margin-top:0px !important;
		font-size:12.2vw !important
	}
	.IntroText{
		margin-top:0px !important;
		font-size:2.6vw !important;
		line-height:100% !important;
		padding-left:10px !important;
		padding-right:10px !important;
		padding-top:15px !important;
		padding-bottom:15px !important;
	}
	
	.flex-container {
	  flex-direction: column;
	}

	.flex-item-1, .flex-item-2, .flex-item-3, .flex-item-4 {
	  flex: 100%;
	  margin-left:0px;
	  margin-right:0px;
	  margin-bottom:15px;
	  height:350px;
	  min-height:350px;
	  max-height:350px;
	}

	.flex-item3-1, .flex-item3-2, .flex-item3-3 {
	  flex: 100%;
	  margin-left:0px;
	  margin-right:0px;
	  margin-bottom:15px;
	  height:350px;
	  min-height:350px;
	  max-height:350px;
	}
	
	.SeriesButton {
	  padding: 5px;
	  font-size: 3vw;
	}
}



.triangle_down1 {
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 45px solid #8cbd40;;
    font-size: 0;
    line-height: 0;
    float: left;
}
.triangle_down2 {
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 45px solid #7cb439;;
    font-size: 0;
    line-height: 0;
    float: left;
}
.triangle_down3 {
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 45px solid #67a746;;
    font-size: 0;
    line-height: 0;
    float: left;
}




.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   left: 0;
   position: absolute;
   top: 0;
}



.tooltipFav {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltipFav .tooltiptextFav {
  visibility: hidden;
  width: 150px;
  bottom: 80%;
  left: 50%;
  margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size:12px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipFav:hover .tooltiptextFav {
  visibility: visible;
}


/*used to keeep the menu at the top - start and end not currently used*/
/*THIS IS NO LONGER USED - REPLACED WITH BELOW
.sticky-div {
	z-index:5;
	position: relative;
	width:90%;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}
.start {
	height: 0px;
}
.end {
	height: 0px;
}
*/
/*used to keeep the menu
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 90%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}