/* CSS Document */

h1,h2,h3,h4,h5,h6 {color:#000;}


/* Smartphones ----------- */
@media only screen 
and (max-width : 719px) {
/* Styles */
	
	.arrow_box_left:after , .arrow_box_right:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 30px;
	margin-left: -30px;
	}
	
	.rarrow,.larrow{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 20px 35px 20px;
		border-color: transparent transparent #ffffff transparent;
		position: absolute;
		top: calc(100% - 35px); 
		left: calc(50% - 17px);
	}
}



/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 720px) {
/* Styles */
	
	.arrow_box_left:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #fff;
	border-width: 30px;
	margin-top: -30px;
	}
	
	.arrow_box_right:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: #fff;
	border-width: 30px;
	margin-top: -30px;
	}
	
	.rarrow{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 35px 20px 0;
		border-color: transparent #fff transparent transparent;
		position: absolute; 
		left: calc(100% - 35px); 
		top: calc(50% - 17px);
	}

	.larrow{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 0 20px 35px;
		border-color: transparent transparent transparent #ffffff;
		position: absolute; 
		right: calc(100% - 35px); 
		top: calc(50% - 17px);
	}
}



/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


.arrow_box_left, .arrow_box_right {
	position: relative;
	background: #fff;
	height: 100%;
	}

.row {margin-bottom: 25px;}

.mcontent{padding:10%;}
.mcontent h3{border-left:solid 10px #e5212b; padding-left:15px; font-weight: bold; }

.nmHead1{border-left:solid 10px #e5212b; padding-left:50px; }
.redBarText{display:inline-block; font-size: 1.5em; padding:5px 15px; background-color: #e5212b; color:white;}

.nmBar {text-align: center;}
.nmBar ul{display: inline-block; width:100%; margin: 0; padding 0; zoom:1; *display: inline;}
.nmBar li{ float:left; margin-left:13%; }
.nmBar li:hover{color: #eb1c24;}

ul.hlist{display: inline-block; width:100%; margin: 0; padding 0; zoom:1; *display: inline;}
ul.hlist li{ float:left; margin-left:10%; }
ul.hlist li:hover{color: #eb1c24;}


[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
  display: none;
}

.btnReadmore{ display: block; clear:both; text-align: right;}
.btnReadmore a span{color:#666;}
.btnReadmore a:hover span{color:#e5212b;}


.cbox{position: relative; min-height:150px; padding:0px !important; }



/* about us ----------- */
.usMenu li {border:none; border-right:solid 1px #ccc; text-align: center; margin-top: 25px; padding:2px 15px;}
.usMenu .lastBox{border-right:none !important;}
.usMenu a{ font-size:28px; margin:0px; text-transform: none;}
.usMenu a:link {text-decoration: none; color:#000;}
.usMenu a:hover {text-decoration: none; color:#000; border-bottom:solid 10px #e12229;}
.usMenu a:visited {text-decoration: none; color:#000;}
.usMenu a:active {text-decoration: none; color:#000;}
.usMenu a.active {border-bottom:solid 10px #e12229;}
.redTxt{color:#e12229;}

.runNum{font-size: 30px; text-align: center;}
.rNum{font-size: 36px; font-weight: bold;}

.smTxt{font-size:14px !important;}

.squareBox {position:relative; border:solid 1px #000; width:300px;}
.boxRed, .boxWhite, .boxBlack {overflow: hidden; width: 100%; height:100%;}
.boxRed {color:#fff; background-color: #eb1c24;}
.boxWhite  {color:#000; background-color: #f2f2f2;}
.boxBlack {color:#fff; background-color: #2c3137;}

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  box-sizing: border-box;
  /*border:solid 1px #000;*/
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .sqContent {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

.clearfix {
  clear: both;
  display:block;
}

ul.redBullet {
  list-style: none; /* Remove default bullets */
}

ul.redBullet li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.barRTxt { padding:3px 0px; background-color: #e5212b; color:white;}
.barOTxt { padding:3px 0px; background-color: #ed7225; color:white;}
.barYTxt { padding:3px 0px; background-color: #f49c21; color:white;}

.borderL-red{ border-left: solid 5px #e5212b; padding-left:10px; }

.bgTxtRed {background-color: #e5212b; color:#fff; padding:0px 8px; 0px 8px;}
.bg-red{background-color: #e5212b; }
.boxCenter{ position: absolute;  left: 50%;
	  transform: translate(-50%, -50%);	
}


.border1px {border: solid 1px red;}


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.bgWhite80 {background-color: rgba(255, 255, 255, .8);}

.btnImgOrange{ 
			display: inline-block; padding:10px; padding-bottom:5px; background-color: white; color:#191818;
			overflow: hidden;

			border-radius: 10px 10px 10px 10px;
			-moz-border-radius: 10px 10px 10px 10px;
			-webkit-border-radius: 10px 10px 10px 10px;
			border: 0px solid #000000;

			color: white; text-decoration: none;
			background: rgb(241,115,47);
			background: linear-gradient(90deg, rgba(241,115,47,1) 0%, rgba(185,30,35,1) 100%);

			font-size: 3rem;
			line-height: 3.1rem;
		}

		.btnImgOrange .img-active {display: inline}
		.btnImgOrange .img-hover {display: none;}

		.btnImgOrange:hover .img-active {display: none;}
		.btnImgOrange:hover .img-hover {display: inline;}



		.btnImgOrange:hover { 
			color: white; text-decoration: none;
			background: rgb(185,30,35);
			background: linear-gradient(90deg, rgba(185,30,35,1) 0%, rgba(241,115,47,1) 100%);
		}

.btnImgRed {
    display: inline-block; padding:10px; padding-top:0px; background-color: white; color:#191818;
    overflow: hidden;

    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;

}



.btnImgRed:hover, .btnImgRed.active{
	color:white;
    background: rgb(250,76,86);
background: linear-gradient(133deg, rgba(250,76,86,1) 0%, rgba(253,29,29,1) 50%, rgba(176,9,12,1) 100%);
}
.btnImgRed:hover img, .btnImgRed.active img{filter: brightness(10);}

.btnImgRed {color: black;}


.cover-click{display: inline-block; position: relative;
   border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 0px solid #000000;
}
.cover-click:hover { border:5px solid #ffc600;}

.cover-click .cover-badge {width:30%; height:auto; position:absolute; right:-15px; bottom:35px;}

.EbookCover{position: relative; display: inline-block; margin-bottom: 15px; object-fit: cover;}
.EbookCover:hover {border: #ffba36 4px solid; text-decoration: none;}
.iconEbook {position: absolute; width:40%; height:auto; right:-10px; bottom:10%;}