body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #f1fafe !important;
	line-height: 250%;
}

.header {
	border-bottom:3px solid #00a1e4;
    background-color: black;
    text-align: center;
    padding: 10px;
}

.bgContainer
{
background-color: #ffffff;
}
.container
{
margin-left:2%;
margin-right:2%;
}

@media all and (min-width: 1200px) 
{
.videoContainer
{
width:70%;
}
}

@media all and (min-width: 1351px) 
{
.videoContainer
{
width:60%;
}
}


.pageTitle
{
background-color: #000000;
min-height:50px;
line-height:50px;
padding-right:2%;
padding-left:2%;
color: #ffffff;
font-size: 14px;

}
.pageTitle .fa
{
	opacity:.5;	
    line-height:50px;
}
.interiorPageTitle {
	border-bottom: 5px solid #00a1e4;
	background-color: #3e3e3e;
	min-height: 35px;
	line-height: 35px;
}
	.interiorPageTitle .fa {
		line-height: 35px;
	}



/*--------------------- breadcrumb ---------------------*/
.MyBreadcrumb {
	margin-top: 10px;
	color: #ccc;
}
#Breadcrumb i {
	color: #ccc;
}
.MyBreadcrumb span {
	font-size: 12pt;
	font-weight: bold;
	color: #00a1e4;
}

.MyBreadcrumb, .MyBreadcrumb span {
	font-size: 12pt;
}
a.MyBreadcrumb:link, a.crumbs:visited {
	text-decoration: none;
	color: white;
}
a.MyBreadcrumb:hover {
	text-decoration: underline;
}

a.MyBreadcrumb:active {
	text-decoration: underline;
}







/*--------------------- tag p ---------------------*/
body, th, td, table, a:link, a:visited, a:hover, input, .CommandButton, .ListControl input[type=radio] + label, .SingleCheckbox input[type=checkbox] + label,p, ul, ol, h1, h2, h3, h4, h5, h6 , a, a p, .contentStyle p, .contentStyle, .contentStyle span {
	line-height: 250%;
	font-family: mdid;
	font-size: 12pt;
	margin: 0;
}

	.contentStyle ul li {
		margin-right: 3%;
		margin-left: 3%;
	}
/*--------------------- tag h1,h2---------------------*/
h1 , h1 a{
	font-size: 13pt !important;
	font-weight: bold;
}

h2 ,h2 a{
	font-size: 12pt !important;
	font-weight: normal !important;
}

h3 , h3 a{
	font-size: 10pt !important;
	font-weight: normal !important;
}

/*--------------------- tag a ---------------------*/
	a, a:active, .contentStyle a, .contentStyle a:active {
		color: #000000;
		text-decoration: none !important;
		-webkit-transition: all .3s ease-in;
		-moz-transition: all .3s ease-in;
		-ms-transition: all .3s ease-in;
		-o-transition: all .3s ease-in;
		transition: all .3s ease-in;
	}

	a:hover {
		color: #00a1e4;
	}


.contentStyle {
	margin-right: 2%;
	margin-left: 2%;
	padding-bottom: 40px;
	min-height: 100%;
	overflow: auto;
}
@media all and (max-width: 500px) {
	.contentStyle {
		margin-right: 20px;
		margin-left: 20px;
	}
		.contentStyle ul li {
			margin-right: 25px;
			margin-left: 25px;
		}
}
/*--------------------- copyright ---------------------*/
.copyRight {
	display: table;
	background-color: #2a2a2a;
	width: 96%;
	padding: 2%;
	border-top: 1px solid #f1fafe;
}

.rb {
	display: table-cell;
	color: #ffffff;
	width: 25%;
	padding: 2%;
	vertical-align:top;
}

.copyrightText {
	background-color: #000000;
	width: 100%;
	min-height: 50px;
	line-height: 130%;
	text-align: center;
	border-top: 1px solid #00a1e4;
}

.copyRight h1 {
	color: white !important;
	font-size:14px !important;
	font-weight:normal !important;
}
.copyRight h2 a {
	color: #adadad !important;
	font-size: 12px !important;
	text-decoration: none !important;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}
.copyRight h2 a:hover {
	color: #00a1e4 !important;
}
@media all and (max-width: 500px)
{
.copyRight
{
display:block;
}
.rb {
display: block;
width:auto;
margin-top:10px;
}
}

/*--------------------- scroll top ---------------------*/

.scrollup {
	width: 66px;
	height: 67px;
	opacity: 0.6;
	position: fixed;
	bottom: 20px;
	right: 10px;
	display: none;
	text-indent: -9999px;
	background: url('../img/uparrow.png') no-repeat;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	z-index:99999999999;
}

	.scrollup:hover {
		bottom: 25px;
		opacity: 1;
	}



/*--------------------- application part ---------------------*/
.appC1, .appC2 {
	display: table-cell;
	vertical-align: top;
}
.appC2 {
	width: 100%;
	vertical-align: middle;
	text-align:center;
}
	.appC2 h2 {
		color: #000000;
		margin-top:20px;
		font-size: 11pt !important;
		font-weight: normal;
		text-align: justify;
	}
	.appC2 h1 {
		color: #000000;
	}

@media all and (max-width: 500px)
{
	.appC1, .appC2 {
		display:block;
		width:100%;
		padding:0 !important;
	}
	.appC1 img
	{
		width:100%;
	}
	.appC2 {
		width: 100%;
		margin-top:20px;
	}
}


/*--------------------- Youtube Loader ---------------------*/
#progress {
	position: fixed;
	z-index: 999999999;
	top: 0;
	left: 0;
	height: 5px;
	background: #00a1e4;
	width: 100px;
}


/*-----------------------Incremental number-------------------------*/
.counterContainer
{
display:table;
width:80%;
text-align:center;
padding-top:50px;
padding-bottom:50px;
}
.counterContainer .c1
{
display:table-cell;
vertical-align:top;
width:20%;
}

@media all and (max-width: 1000px) { .counterContainer { width:100%; } .counterContainer .c1{ width:25%; } }
@media all and (min-width: 1300px) { .counterContainer { width:70%; } .counterContainer .c1{ width:17.5%; } }
.spliterH
{
display:none;
}
.incrementalNumber {
	font-weight: bold;
	color: #00a1e4;
	font-size: 28pt !important;
	line-height:200%
}


.incrementalText h1
{
font-size:10pt !important;
opacity:.7;
line-height:170% !important;
white-space: nowrap;
text-align:center !important;
}
@media all and (max-width: 800px)
{
.spliterV
{
display:none;
}
.spliterH
{
display:block;
padding-top:12px;
}
.counterContainer .c1, .counterContainer
{
width:100%;
display:block;
padding:0;
}
}



/*-----------------------Home-------------------------*/
.myimgdiv {
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
	.myimgdiv img {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		margin-bottom: 20px;
		border-bottom: 1px solid #adadad;
	}
.myimgdiv:hover img {
	-webkit-transform: scale(1.05);
	transform: scale(1.07);
}
.homecenter h2 {
	color: #000000;
	line-height: 250%;
	font-size: 11pt !important;
	margin-top: 15px;
	font-weight: normal;
	text-align: justify;
}
.homecenter h1 {
	font-size: 20px !important;	
	color: #000000;
	line-height: 200% !important;
}
.homecenter {
	width: 25%;
	background-color: white;
	border-radius: 10px;
	display: table-cell;
	padding: 2%;
	border-spacing: 10px;
	text-align: justify;
	vertical-align: top;
	top: 0;
	margin-bottom: 100px;
							height: 600px;
}
@media all and (max-width: 830px) {

	.homecenter {
		width: 80% !important;
		display: block;
		padding: 10%;
		margin: 0;
		margin-bottom: 30px;
		height: auto;
	}
}



/*-----------------------Circles-------------------------*/
.ch-grid a {
	text-decoration: none;
	color: #000000;
}
.ch-grid {
	cursor: default;
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}
.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 130px;
	height: 130px;
	display: inline-block;
	margin: 20px;
}
.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	cursor: pointer;
}

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
}

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #ffffff;
	box-shadow: 0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(0,161, 228, 0.8);

}
.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.ch-info .ch-info-front {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;

}
.ch-info .ch-info-front .fa
{
margin-top:27px;
}
.ch-info .ch-info-back {
	opacity: 0;
	pointer-events: none;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}
.ch-info h3 {
	padding-top: 19pt;
	background-color: transparent;
	font-size: 13pt !important;
}
.descCircle h1 {
	font-size: 11pt !important;
	color: #a9a9a9;
}
.ch-item:hover .ch-info-front {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	background-color: #00a1e4;
	opacity: 0;
} 
.ch-item:hover .ch-info-back {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);	
	opacity: 1;
	pointer-events: auto;
}






/*-----------------------Fix Nav Bar-------------------------*/
.f-nav { /* To fix main menu container */
	z-index: 999;
	position: fixed;
	left: 0;
	top: -50px;
	right: 0;	
	box-shadow: 0 5px 5px -5px #333;
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-ms-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}
#main-menu-container {
}
@media all and (max-width: 500px) {
	.f-nav {
		box-shadow:none;
	}
}

/* ============================================================
  SECTIONS
============================================================ */
.background-app {
	border-top: 2px solid #ffffff;
	background-color: #00a1e4;
	background-image: url('../img/mobileParallex.jpg');
	background-repeat: no-repeat;
	background-position: right;
}

.paratext-app {
	background-image: url('../img/AppParallexText.png');
	background-repeat: no-repeat;
	height: 500px;
	position: relative;
	background-size: 20%;
}
.background-web {
	border-top: 2px solid #ffffff;
	background-color: #000000;
	background-image: url('../img/WebParallex.jpg');
	background-repeat: no-repeat;
	background-position: right;
}
.paratext-web {
	background-image: url('../img/WebParallexText.png');
	background-repeat: no-repeat;
	height: 500px;
	position: relative;
	background-size: 20%;
}
@media all and (max-width: 500px) {
	.paratext-app,.paratext-web {
		background-size: 100%;
	}
	.background-app ,.background-web {
		background-size: 100%;
	}
}






/*-----------------------Buttons-------------------------*/
.button {
	background: #3D4C53;
	margin: 20px auto;
	width: 200px;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	text-align: center;
	transition: .2s;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}

	.button p, .button span {
		line-height: 50px;
		margin-bottom: 0;
	}

.btn_master, .btn_slave {
	position: relative;
	float:right;
	background: #00a1e4;
	top: 0;
	left: -100%;
	margin-top: -50px;
	transition: .3s;
	width: 30%;
}

.btn_slave {
	background: #636363;
}

.btnText {
	color: white;
	transition: .3s;
}

.btnText2 .fa {
	font-size: 20pt !important;
	line-height: 50px !important;
}

.btnText2 {
	margin-right: 0px;
	color: #FFF;
}

.button:hover .btn_slave, .button:hover .btn_master { /*When hovering over .button change .btnTwo*/
	left: -70%;
}

.button:hover .btnText { /*When hovering over .button change .btnText*/
	margin-left: 27%;
}

.button:active { /*Clicked and held*/
	box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}

@media all and (max-width: 500px) {
	.button {
		width: 100% !important;
	}
	.btn_master, .btn_slave {
	}
	.lnkbutton{
		width:100%;
	}
}




/*--------------------- alignment ---------------------*/
.left {
	text-align: left;
	font-weight: bold;
}

.right {
	text-align: right;
}

.leftLTR {
	text-align: left;
	direction: ltr;
}

.rightRTL {
	text-align: right;
	direction: rtl;
}


/*--------------------- groupbox ---------------------*/
.borderlinegroup {
	position: relative;
	border: 2px solid #cccccc;
	border-radius: 10px;
	padding-bottom: 30px;
	background-color: #f6f5f5;
	margin-bottom: 40px;
}

.headertitle {
	box-shadow: 0 5px 5px -5px #333;
	font-weight: 400;
	color: #616161;
	font-size: 20px;
	text-align: center;
	margin-left: 15px;
}


.borderlinegroup i {
	font-style: normal;
	background: #fff;
	border: 2px solid #f4f4f4;
	border-radius: 15px;
	position: relative;
	padding: 8px;
	top: -20px;
}

/*--------------------- textbox|drp|checkbox ---------------------*/

.required::after {
	color: red;
	font-size: 14pt;
	font-weight: bold;
	content: ' *';
}



input[type='text'], input[type='password'], textarea {
	border: 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	font-size: 12pt;
	color: #000000;
	background-color: white;
	-webkit-transition: all .55s ease-in;
	-moz-transition: all .55s ease-in;
	-o-transition: all .55s ease-in;
	transition: all .55s ease-in;
	width: 100%;
	outline: none;
	line-height: 100%;
}

	input[type='text']:focus, input[type='password']:focus, textarea:focus {
		outline: none;
		border: 1px solid #00b9ff;
	}

textarea {
	border: 1px solid #cccccc;
}

.ddl {
	line-height: 100% !important;
	outline: none;
	border: 0;
	border: 1px solid #cccccc;
	border-radius: 5px;
	padding: 13px;
	width: 100%;
	background-color: #ffffff;
	font-size: 12pt !important;
}



	.ddl * {
		font-size: 12pt !important;
	}

input[type=radio], input[type=checkbox] {
	display: none;
}


	input[type=radio] + label:before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 8px;
		margin-left: 8px;
		background-color: #fff;
		box-shadow: inset 0px 0px 4px rgba(0, 0, 0, .2);
		border: 1px solid #ccc;
		border-radius: 50%;
		cursor: pointer;
		font-size: 120%;
	}

	input[type=checkbox] + label:before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 8px;
		margin-left: 8px;
		background-color: #fff;
		box-shadow: inset 0px 0px 4px rgba(0, 0, 0, .2);
		border:1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
	}

	input[type=checkbox] + label, input[type=radio] + label {
		
	}

	input[type=radio]:checked + label:before {
		background-color: #00b9ff;
		text-shadow: 0px 0px 3px #000000;
	}

	input[type=checkbox]:checked + label:before {
		content: " \2714"; /* Tick */
		color: #00b9ff;
		background-color: #000;
		text-align: center;
		font-size: 22pt !important;
		line-height: 20px;
		text-indent:-3px;
		text-shadow: 0px 0px 2px #000000;
	}