.indexheader 
{ 
  width:100%; 
  height:350px; 
  background-color: #478ac9 ;
  /*background-image: linear-gradient(0deg, #441aff 0%, #8676ff 32%, #3424ff 100%);*/
  background-image: url("../layout/header.jpg");
  background-size:100% 350px; 
  transition:1s;
  font-size: 30px;
  color: white;
  font-family: title;
}


@media screen and (max-width:900px)
{  .indexheader {  height: 250px;   background-size:100% 250px;  } }


@media screen and (max-width:600px)
{ .indexheader {  height: 150px; background-size:100% 150px;  } }




.search {
    display: inline-block; 
    position: relative; top:0; left:0;
    margin: 20px 0 0 20px ;
    height: 40px;
    box-sizing: border-box;
    width: 100%!important;
    padding: 0px;


}
  

  div.search input[type=text]{
  height: 40px;
  padding: 10px 20px;
  border: 1px solid grey;
  width: calc(100% - 50px )!important; 
  min-width: 50px!important; 
  max-width: 2000px!important; 
  border-radius:  5px ;
  margin:0;margin-left: 0!important;
}

div.search form {    background:white; }

div.search i {
  display: inline-block;
  height:40 px;
  color: white;
  font-size : 0.9rem;
}












/*-------------------*/
/*    general        */
/*-------------------*/
.home #contentwrapper {border-top:none;}


@font-face {font-family:"topic"; src:url("../fonts/TopicShorooq.ttf");}
@font-face {font-family:"topicLight"; src:url("../fonts/TopicHacenLinerScreen.ttf");}
@font-face {font-family:"adv3"; src:url("../fonts/advertising.ttf");}
@font-face {font-family:"adv4"; src:url("../fonts/AdvertisingBold.ttf");}
@font-face {font-family:"hawi"; src:url("../fonts/Hawi.ttf");}
@font-face {font-family:"droid1"; src:url("../fonts/DroidKufi.ttf");}
@font-face {font-family:"droid2"; src:url("../fonts/DroidKufiBold.ttf");}
@font-face {font-family:"bahig"; src:url("../fonts/bahij-insan.ttf");}
@font-face {font-family:"title"; src:url("../fonts/TitleHacenEgypt.ttf");}



*{	padding:0;
	margin:0; 
	border-style:none; 
	box-sizing:border-box; 
	line-height:1; 
	font-family : droid1;
}
a, a:link, a:visited , a:hover, a:active { color: inherit; text-decoration:none; }



img{	border-style:none;
	max-width:100%; 
	box-sizing:border-box;  }

hr{	border:0;
	border-top:1px solid #aaa ;
	margin:5px 0; }

html,body{ background-color : #eee; color : #444;
	  font-family : droid1,topic,Verdana,sans-serif; 
	
	min-height: 100%;
	
	box-sizing:border-box;
	
	font-size:14pt; 
	line-height:1;}

html{
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	 }



.scrolling-wrapper::-webkit-scrollbar  
{
  width: 6px; height: 6px; 
}
 
.scrolling-wrapper::-webkit-scrollbar-track 
{
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.3);
}
 
.scrolling-wrapper::-webkit-scrollbar-thumb 
{
  background-color: darkgrey;
  outline: 1px solid #ccc;
}


/* -------------------------  organized styling -------------------------- */
.row{ width:100%; display:block; padding:0; margin:0; border:0 ; box-sizing:border-box;overflow:hidden;}
.half{width:49.999%; display:block; float:right;  padding:0; margin:0; border:0 ; box-sizing:border-box;overflow:hidden; }
.quarter{width:24.999%; display:block; float:right;  padding:0; margin:0; border:0 ; box-sizing:border-box; overflow:hidden;}
.quarterthree{width:74.999%; display:block;  float:right;  padding:0; margin:0; border:0 ; box-sizing:border-box; overflow:hidden;}
.third{width:33.333%; display:block; float:right;  padding:0; margin:0; border:0 ; box-sizing:border-box; overflow:hidden;}
.thirdtwo{width:66.666%; display:block; float:right; padding:0; margin:0; border:0 ; box-sizing:border-box;overflow:hidden;}



.fullwidth {display:block;}

@media screen and (max-width: 900px) {
	.half{width:99.999%; } .quarter{width:99.999%; } .quarterthree{width:99.999%; } 
	.third{width:99.999%; } .thirdtwo{width:99.999%; }  	}


.nopad{padding:0;}  .pad5{padding:5px;}  .pad10{padding:10px;}  .pad15{padding:15px;}   .pad20{padding:20px;}  .pad30{padding:30px;} .pad40{padding:40px;}

.nomargin{margin:0;}  .margin5{margin:5px;}  .margin10{margin:10px;}  .margin15{margin:15px;}   .margin20{margin:20px;}   .margin30{margin:30px;}   .margin40{margin:40px;}

.radius5{border-radius: 5px;}  .radius10{border-radius:10px;}  .radius15{border-radius:15px;}   .radius20{border-radius:20px;}  .radius30{border-radius:30px;} .radius50{border-radius:50px;}


.card{ box-shadow :  0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); }
.circle {border-radius: 50% }
.cloud{background-image:url('../bg.png') }

.trans {background: rgba(0, 0, 0, 0.0) }

.centering { display:flex; flex-direction:column;justify-content:center;align-items:center;text-align:center;}


.image{ width:100%; height:auto; overflow:hidden;}





.puttextonimg {  position: relative;  line-height:0.4; over-flow:hidden;}
.textonimg{   width:100%; height:100%; position: absolute;top:0; color:white;  font-size: 18pt; 
background: rgba(0, 0, 0, 0.5);  transition:0.2s; 
display:flex; flex-direction:column;justify-content:center;align-items:center;text-align:center;
}




.indigobutton{ background:indigo; color:white; }


.left {align:left; text-align:left}
.right {align:right;  text-align:right}
.center {align:center; text-align:center; float:center}





.center { align:center; text-align:center;}
.white { color: white;}
.orangeBG { background-color: orange;}



/* text */
p{ color:black; text-align:justify; line-height: 2;}
.blacktext {color:black}
.whitetext {color:white}
.orangetext {color:orange}
.redtext {color:#990000}



/***********************/
/*    table            */
/***********************/


table{border-collapse:collapse; border-spacing:0; width:90%; display:table; border:1px solid #ccc}
table tr{border-bottom:1px solid #ddd} tbody tr:nth-child(even){background-color:#f1f1f1}
table tr:nth-child(odd){background-color:#fff} table tr:nth-child(even){background-color:#f1f1f1}
tbody tr:hover{background-color:#ccc} tr th, tr td{text-align:center}
table td,table th{padding:8px 8px;display:table-cell;text-align:center;vertical-align:top}
table th:first-child,table td:first-child{padding-left:16px}



.table
{
	margin:20px 1px;
	padding:0px;
	border:0px;
	 border-spacing: 0;
	 overflow: auto;
	 width:90%;
     font-family : droid1;

}

/* allow select texzxt from tables */
table , .table{	 
	font-family : droid1;
	-webkit-user-select: text; /* Safari */
    -ms-user-select: text; /* IE 10 and IE 11 */
    user-select: text; /* Standard syntax */}
    
    
.table table
{
	width:90%;
	 border-spacing: 0;
	 border:none;
}


.table td, th
{
	border-spacing: 0;
	border-collapse:collapse;
	border:1px solid #e8e8e8;
}
.table tr:first-child td
{
	background: red; /* Old browsers */
	background: -moz-linear-gradient(top,  #f7f8f9 0%, #eaedf1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f8f9), color-stop(100%,#eaedf1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f7f8f9 0%,#eaedf1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f7f8f9 0%,#eaedf1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f7f8f9 0%,#eaedf1 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f7f8f9 0%,#eaedf1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#eaedf1',GradientType=0 ); /* IE6-9 */
	font:bold 0.8em/26px Tahoma, Geneva, sans-serif;
	font-family : droid1;
	color:#333;
	text-shadow:#fff 1px 1px 0px;
}
.table th
{
	background: #f7f8f9; /* Old browsers */
	background: -moz-linear-gradient(top,  #f7f8f9 0%, #eaedf1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f8f9), color-stop(100%,#eaedf1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f7f8f9 0%,#eaedf1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f7f8f9 0%,#eaedf1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f7f8f9 0%,#eaedf1 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f7f8f9 0%,#eaedf1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#eaedf1',GradientType=0 ); /* IE6-9 */
	font:bold 0.8em/26px Tahoma, Geneva, sans-serif;
	font-family : droid1;
	color:#333;
	text-shadow:#fff 1px 1px 0px;
}
.table td, th { padding:2px 2px 2px 12px;}

.table td { color:#666;
	font:normal 0.8em/26px Tahoma, Geneva, sans-serif;
	font-family : droid1;
	vertical-align:middle;
	padding:2px 2px 2px 12px; }
	
.table tr:nth-child(even){background: #fcfcfc; /* Old browsers */ }

.table tr:nth-child(odd) {background: #f9f9f9; /* Old browsers */ }





/* colors */
.white {background:white; color:black}
.orange {background:orange}
.yellow {background:yellow}
.green {background:green}
.olive {background:olive}
.darkblue{background:#222D62; color:white }
.red{background:#990000; color:white}
.eee {background:#eeeeee}
.ccc {background:#cccccc}
.aaa {background:#aaaaaa}
.gray {background:gray}
.dark{background:#333333; color:white }
.black{background:black; color:white }
.tomato{background:tomato}
.dodgerblue{background:DodgerBlue}
.mediumseagreen{background:mediumseagreen}
.grays {     background-color: #ccc;
  background-image: linear-gradient(45deg, #999999,  #ccc, #999); }

  .success {background:#00C851; color:white}
  
  
  
/* animate */
.moveup { margin-top:10px; margin-bottom:0px; transition: 0.4s; }
.moveup:hover { margin-top:0px ; margin-bottom:10px;}


  
  
  
/*===============  div:imagelink + img + span + /span /div =====*/
.imagelink, .imagelink img {width: 250px;height:250px;overflow: hidden; }
.imagelink {
  outline: 2px solid white; outline-offset: -15px; border:1px solid gray;
    background: white ;
  position: relative;
 
}

.imagelink img { opacity: 0.85;
 transition: 0.5s ease-out;}
.imagelink span {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;    margin: 0 45px;
  text-align: center;
  font-size: 24px;
  color: white;
  transition: 0.3s ease-out;
}

.imagelink:hover img { transform: scale(1.15, 1.15); opacity:1;}

.imagelink:hover span {
  opacity: 0;
}






/* ==========dropdown menu ==========*/
/* The container div - needed to position the dropdown content */
.dropdown { padding:10px 20px;
  position: relative;
  display: inline-block;  }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; }
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px 12px 16px;
  text-decoration: none;
  display: block; transition:0.3s;}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #eee; padding: 12px 32px 12px 0px;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
  background-color : #990000; cursor:pointer;}









/***************/
/*   input     */



button { font-size: 16px; }

.flashBTN{ width:200px; padding:15px;border:solid 1px gray;}


/*=============== input ===========  */
input[type=text], input[type=date],input[type=password], input[type=email], input[type=number], input[type=url],select, textarea 
{  font-size:10pt;  width: calc(100% - 40px)!important; max-width:500px!important;   
   padding: 1px 12px!Important;
   margin: 5px 20px;
   display: inline-block;    border: 1px solid #ccc;    border-radius: 4px;
   box-sizing: border-box; font-family : droid1;}

textarea { padding-top: 6px!Important;}

select:focus {  background-color: #e0e0e0;}

input:focus , select:focus, textarea:focus { border: 1px solid #777;}


input[type=submit] {  width: calc(100% - 40px)!important; max-width:500px!important;    background-color: darkgreen;   color: white;
  padding: 14px 20px;   margin: 5px 20px;   border: none;   border-radius: 4px;   cursor: pointer; font-size:12pt;}

input[type=reset] {  width: calc(100% - 40px); max-width:500px;    background-color: #777;   color: white;
  padding: 14px 20px;   margin: 5px 20px;   border: none;   border-radius: 4px;   cursor: pointer; font-size:12pt;}


input[type=submit]:hover {    background-color: black; color:white; transition:0.3s }

.lable {width: 90%; max-width:500px;   padding: 0 3px;    display: inline-block; box-sizing: border-box; text-align:right; }
.error{ background-color: brown;  color:white; border-width:  0 ;  padding: 0; }




/*=============== button ===========  */

.button {	border:1px solid black!Important;
	background:inherit!Important;
	display:inline-block!Important;
	padding:15px 20px!Important;
	margin: 0 10px!Important;
	vertical-align:middle!Important;
	overflow:hidden!Important;
	text-decoration:none!Important;
	color:inherit!Important; 
	text-align:center!Important;
	cursor:pointer!Important;
	white-space:nowrap!Important;
	transition:0.3s!Important; }
.button:hover { background:black!Important ; color: white!Important;  }



.emptyblackbutton { border:1px solid black!Important;
  display:block!Important;
  padding:5px 0!Important;
  vertical-align:middle!Important;
  text-decoration:none!Important;
  color:black!Important; 
  text-align:center!Important;
  cursor:pointer!Important;
  transition:0.2s!Important; }
.emptyblackbutton:hover { background:black; color: white!Important;}




.buttons {	border:1px solid black;
	background:black;
	display:inline-block;
	padding:8px 20px;
	margin: 0 10px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:white; 
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	transition:0.3s;}
.buttons:hover{ background:black; color: white; }


.eshahbutton {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
  padding: 10px;
  width:60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  font-weight:bold;
  margin: 4px 4px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.eshahbutton:hover {
  background-color: #008CBA;
  color: white;
}





/*=============== completed reading bible submit button ===========  */

 /*//////font awesome//////*/
.fa,.fab,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}

.fa-check-circle:before{content:"\f058"}

.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/../webfonts/fa-solid-900.eot");src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/../webfonts/fa-solid-900.woff2") format("woff2"),url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/../webfonts/fa-solid-900.woff") format("woff"),url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/../webfonts/fa-solid-900.ttf") format("truetype"),url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/../webfonts/fa-solid-900.svg#fontawesome") format("svg")}

.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}



.mybtn-outline {
direction: ltr;
  font-weight: bold;
  background-color: #ffffff;
  border-style: solid;
  border-width: 3px;
  padding: 0;
  outline: 0;
  display: inline-flex!Important;
  overflow: hidden!Important;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.mybtn-outline i, .mybtn-outline span {
  width: 100%!Important;
  display: block!Important;
  padding: 0.7rem!Important;
  margin: 0;
  box-sizing: border-box!Important;
  flex-shrink: 0!Important;
}



.mybtn-outline i {
  margin-left: -100%!Important;
  transition: margin-left 300ms ease-in-out!Important;
}
.mybtn-outline:hover {
  color: #ffffff;
  background-color: #404040;
}
.mybtn-outline:hover i {
  margin-left: 0!Important;
}


.mybtn-outline.button-success {
  color: #4A235A;
  border-color: #4A235A;
}
.mybtn-outline.button-success:hover {
  color: #ffffff;
  background-color: #4A235A;
}
.mybtn-outline.button-success:focus {
  box-shadow: 0 0 0 0.3rem #4A235A;
}

/*=============== END completed reading submit button ===========  */






/*=============== toggle switch button ===========  */
.toogle-switch {
  position: relative!Important;
  display: inline-block!Important;
  width: 40px!Important;
  height: 20px!Important;
}

.toogle-switch input { 
  opacity: 0!Important;
  width: 0!Important;
  height: 0!Important;
}

.toogle-slider {
  position: absolute!Important;
  cursor: pointer!Important;
  top: 0!Important;
  left: 0!Important;
  right: 0!Important;
  bottom: 0!Important;
  background-color: #ccc!Important;
  -webkit-transition: .4s!Important;
  transition: .4s!Important;
}

.toogle-slider:before {
  position: absolute!Important;
  content: "";
  height: 16px!Important;
  width: 16px!Important;
  left: 2px!Important;
  bottom: 2px!Important;
  background-color: white!Important;
  -webkit-transition: .4s!Important;
  transition: .4s!Important;
}

input:checked + .toogle-slider {
  background-color: #2196F3!Important;
}

input:focus + .toogle-slider {
  box-shadow: 0 0 1px #2196F3!Important;
}

input:checked + .toogle-slider:before {
  -webkit-transform: translateX(20px)!Important;
  -ms-transform: translateX(20px)!Important;
  transform: translateX(20px)!Important;
}

/* Rounded sliders */
.toogle-slider.round {
  border-radius: 10px!Important;
}

.toogle-slider.round:before {
  border-radius: 50%!Important;
}




.blackglossyCSSButtonbutton 
{
    /* General  */


    /* Size */
  height: 40px;
  min-width: 160px;
  margin: 0 10px;


    /* Fill */
  background-color: #333;
  background-origin: border-box;
  background-image:  -webkit-gradient(linear,  0% 100%,  0%   0%,  color-stop(0.000, hsla(0.0, 0.0%, 20.0%, 1.00)) , color-stop(0.505, hsla(0.0, 0.0%, 10.0%, 1.00)) , color-stop(0.507, hsla(0.0, 0.0%, 20.0%, 1.00)) , color-stop(1.000, hsla(0.0, 0.0%, 30.0%, 1.00)) ); /* Saf4+, Chrome */
  background-image:  -webkit-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* Chrome 10+, Saf5.1+ */
  background-image:     -moz-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* FF3.6 */
  background-image:      -ms-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* IE10 */
  background-image:       -o-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* Opera 11.10+ */
  background-image:          linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* Standards Compliant */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF4C4C4C, EndColorStr=#FF4C4C4C); /* IE6 to IE9 */
  zoom: 1;


    /* Stroke  */
  border: 0px solid hsla(0.0, 0.0%, 0.0%, 1.00);
  -moz-border-radius: 0px; /* FF1-3.6 */
  -webkit-border-radius: 0px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
  border-radius: 0px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */


    /*  Label  */
  color: hsla(0.0, 0.0%, 100.0%, 1.00);
    font-size: 0.9rem;
  text-align: center;
  text-shadow: 0px -1px 0px hsla(0.0, 0.0%, 0.0%, 1.00);


    /*  Shadow & Inner Shadow */
  box-shadow:0px 1px 2px hsla(0.0, 0.0%, 0.0%, 0.50),inset 0px 1px 0px hsla(0.0, 0.0%, 100.0%, 0.15);


    /*  Opacity  */
  opacity: 1.000;

}







.blackglossyCSSButtonbutton:Hover, 
.blackglossyCSSButtonbutton:active, 
.blackglossyCSSButtonbutton:focus
{
    /* General  */
  cursor: pointer;

    /* Size */



    /* Fill */
  background-color: transparent;
  background-origin: border-box;
  background-image:  -webkit-gradient(linear,  0% 100%,  0%   0%,  color-stop(0.000, hsla(0.0, 0.0%, 25.0%, 1.00)) , color-stop(0.505, hsla(0.0, 0.0%, 15.0%, 1.00)) , color-stop(0.507, hsla(0.0, 0.0%, 25.0%, 1.00)) , color-stop(1.000, hsla(0.0, 0.0%, 35.0%, 1.00)) ); /* Saf4+, Chrome */
  background-image:  -webkit-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* Chrome 10+, Saf5.1+ */
  background-image:     -moz-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* FF3.6 */
  background-image:      -ms-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* IE10 */
  background-image:       -o-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* Opera 11.10+ */
  background-image:          linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* Standards Compliant */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF595959, EndColorStr=#FF595959); /* IE6 to IE9 */
  zoom: 1;


    /* Stroke  */
  border: 0px solid hsla(0.0, 0.0%, 0.0%, 1.00);
  -moz-border-radius: 0px; /* FF1-3.6 */
  -webkit-border-radius: 0px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
  border-radius: 0px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */


    /*  Label  */
  color: hsla(0.0, 0.0%, 100.0%, 1.00);
    font-size: 0.9rem;
  text-align: center;
  text-shadow: 0px -1px 0px hsla(0.0, 0.0%, 0.0%, 1.00);


    /*  Shadow & Inner Shadow */
  box-shadow:0px 1px 2px hsla(0.0, 0.0%, 0.0%, 0.50),inset 0px 1px 0px hsla(0.0, 0.0%, 100.0%, 0.15);


    /*  Opacity  */
  opacity: 1.000;

}

.blackglossyCSSButtonbutton:Active , .glassActive 
{
    /* General  */


    /* Size */
 

    /* Fill */
  background-color: transparent;
  background-origin: border-box;
  background-image:  -webkit-gradient(linear,  0% 100%,  0%   0%,  color-stop(0.000, hsla(0.0, 0.0%, 25.0%, 1.00)) , color-stop(0.505, hsla(0.0, 0.0%, 15.0%, 1.00)) , color-stop(0.507, hsla(0.0, 0.0%, 25.0%, 1.00)) , color-stop(1.000, hsla(0.0, 0.0%, 35.0%, 1.00)) ); /* Saf4+, Chrome */
  background-image:  -webkit-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* Chrome 10+, Saf5.1+ */
  background-image:     -moz-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* FF3.6 */
  background-image:      -ms-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* IE10 */
  background-image:       -o-linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* Opera 11.10+ */
  background-image:          linear-gradient(0deg,  hsla(0.0, 0.0%, 25.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 15.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 25.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 35.0%, 1.00) 100.0% ); /* Standards Compliant */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF595959, EndColorStr=#FF595959); /* IE6 to IE9 */
  zoom: 1;


    /* Stroke  */
  border: 0px solid hsla(0.0, 0.0%, 15.0%, 1.00);
  -moz-border-radius: 0px; /* FF1-3.6 */
  -webkit-border-radius: 0px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
  border-radius: 0px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */


    /*  Label  */
  color: hsla(0.0, 0.0%, 100.0%, 1.00);
    font-size: 0.85rem;
  text-align: center;
  font-weight: 800;
  text-shadow: 0px -1px 0px hsla(0.0, 0.0%, 0.0%, 1.00);


    /*  Shadow & Inner Shadow */
  box-shadow:0px 1px 2px hsla(0.0, 0.0%, 0.0%, 0.25),inset 0px 0px 13px hsla(0.0, 0.0%, 0.0%, 0.75);


    /*  Opacity  */
  opacity: 1.000;

}

.blackglossyCSSButtonbutton[disabled]
{
    /* General  */


    /* Size */
  height: 40px;
  width: 160px;


    /* Fill */
  background-color: transparent;
  background-origin: border-box;
  background-image:  -webkit-gradient(linear,  0% 100%,  0%   0%,  color-stop(0.000, hsla(0.0, 0.0%, 20.0%, 1.00)) , color-stop(0.505, hsla(0.0, 0.0%, 10.0%, 1.00)) , color-stop(0.507, hsla(0.0, 0.0%, 20.0%, 1.00)) , color-stop(1.000, hsla(0.0, 0.0%, 30.0%, 1.00)) ); /* Saf4+, Chrome */
  background-image:  -webkit-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* Chrome 10+, Saf5.1+ */
  background-image:     -moz-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* FF3.6 */
  background-image:      -ms-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* IE10 */
  background-image:       -o-linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* Opera 11.10+ */
  background-image:          linear-gradient(0deg,  hsla(0.0, 0.0%, 20.0%, 1.00) 0.0% , hsla(0.0, 0.0%, 10.0%, 1.00) 50.5% , hsla(0.0, 0.0%, 20.0%, 1.00) 50.7% , hsla(0.0, 0.0%, 30.0%, 1.00) 100.0% ); /* Standards Compliant */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF4C4C4C, EndColorStr=#FF4C4C4C); /* IE6 to IE9 */
  zoom: 1;


    /* Stroke  */
  border: 1px solid hsla(0.0, 0.0%, 0.0%, 1.00);
  -moz-border-radius: 5px; /* FF1-3.6 */
  -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
  border-radius: 5px 5px 5px 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */


    /*  Label  */
  color: hsla(0.0, 0.0%, 100.0%, 0.50);
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  text-shadow: 0px -1px 0px hsla(0.0, 0.0%, 0.0%, 1.00);


    /*  Shadow & Inner Shadow */
  box-shadow:0px 1px 2px hsla(0.0, 0.0%, 0.0%, 0.50),inset 0px 1px 0px hsla(0.0, 0.0%, 100.0%, 0.15);


    /*  Opacity  */
  opacity: 1.000;

}



/* hide arrows in number inputs */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

















/* index */
 /*   items Scroller title */
.index_titles 
{
	display: block;
	font-family:title;
	background-color: #0074d9 ;
	margin: 0;
	padding: 5px 20px; 
	font-size:20pt; color:white; 
	text-align:right; 
	direction: rtl;
	border-right: 10px solid #00308F;
	line-height:1.25; 
}

.index_titles_trans
{
	display: block;
	font-family:title;
	padding: 5px 20px; 
	font-size:20pt; 
	background: white;
	color: #00308F; 
	text-align:right; 
	direction: rtl;
	line-height:1.25; 
}




.main_sections_container
{
	display: grid;
	grid-template-columns: repeat(2, 1fr );
	gap: 5%;
	padding: 5%;
}


.main_sections_container > a > div
{
	max-width: 230px;
	color: #333;
	text-align : center;
	font-size: 12pt; 
	line-height: 1.5;
	border-radius: 10px;
}

.main_sections_container > a > div > img
{
	padding: 20px;
	background: white;
	border-radius: 10px;
	box-shadow :  0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}


.animatemee { -webkit-transition: all .3s;  transition: all .3s; }
.animatemee:hover{
    -webkit-filter:drop-shadow(8px 8px 10px gray);
    -webkit-transform: scale(1.05);
}



@media screen and (min-width: 800px)
{    
	.main_sections_container 
	{ grid-template-columns: repeat(4, 1fr ); }

	.main_sections_container > a > div
	{ font-size: 14pt; }

}






.games_sections_container
{
	display: grid;
	grid-template-columns: repeat(1, 1fr );
	gap: 60px;
	padding: 40px;
}


.games_sections_container > a > div
{
	padding: 90px;

	background: #f1c50e;
	color: black;
	text-align : right;
	font-size: 16px; 
	line-height: 1.5;
	border-radius: 10px;
	box-shadow :  0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	padding: 15px;
}



@media screen and (min-width: 800px)
{    
	.games_sections_container
	{ grid-template-columns: repeat(2, 1fr ); gap: 40px; }

	.games_sections_container > a > div
	{ font-size: 18px; }
}












	@media screen and (max-width: 800px)
	{    
		.sections_2 
		{
		 width: 90%;
		 margin:5%; 
		 font-size: 14px;
		}
	}









	.mainmenu {display: block;width: 100%; float: left;padding: 0; font-size: 0px; margin: 0;box-sizing: border-box;margin-left: 0px;}
	.mainmenu .item 
	{ 	font-size: 18px;
		color: white;
		display:inline-block; 
		width:calc( 50% - 30px ); max-width: 200px;
		height: 150px; 
		border:0; 
		margin : 0 0 20px 20px;
		text-align: center; 
		padding: 10px;  
	}
	.mainmenu a , .mainmenu a:hover , .mainmenu a:active , .mainmenu a:link , .mainmenu a:visited { color:white;  }
	.mainmenu a:hover { filter: brightness(110%); }
	.mainmenu .material-icons { font-size: 48px ; font-weight: 400; margin: 20px; }
	/*a button{ width:40%;color:#fff; text-align: center!important;}*/
	/*a button i { float: left; margin:0 20px;}*/
	
	
	.hh2	{   
    		padding: 20px; 
    		margin: 20px 20px 0 20px;
    		font-size: 24px; 
    		font-weight: bold;
    		color: #444; 
            background : white; 
            background: rgb(255,255,255);
            background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 45%, rgba(255,255,255,1) 100%);

		}
		
	.box2  { background : #ededed ; margin : 0 20px 50px 20px; padding:20px 20px 0 0 ; }	



	.mian_sections_4 { 
		width: 19% ;
		align-self: center;
		display: inline-block; 
		margin:2%; 
		text-align: center;  
		font-size: 16px; 
		line-height: 1.5;
		border-radius: 15px;
		background: white;
		color: black;
		box-shadow :  0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
		padding:30px 15px;
	}

	@media screen and (max-width: 800px)
	{    
		.mian_sections_4 
		{
		 width: 42% ;
		 font-size: 14px;
		}
	}


	.mian_sections_4 span { display: inline-block; border-radius: 5px; font-size: 12px; line-height: 1.5;}




	.sections_2_new_idea { 
		width: 49% ;
		align-self: center;
		text-align: center; 
		vertical-align: middle; 
		display: inline-block; 
		margin:0; 
		font-size: 16px; 
		line-height: 1.5;
		color: black;
		padding:0;
	}

	@media screen and (max-width: 650px)
	{    
		.sections_2_new_idea 
		{
		 width: 100%;
		 font-size: 14px;
		}
	}









	.sections_2 { 
		width: 42% ;
		align-self: center;
		text-align: center;  
		display: inline-block; 
		margin:3%; 
		font-size: 16px; 
		line-height: 1.5;
		border-radius: 15px;
		background: white;
		color: black;
		box-shadow :  0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
		padding:15px;
	}

	@media screen and (max-width: 800px)
	{    
		.sections_2 
		{
		 width: 90%;
		 margin:5%; 
		 font-size: 14px;
		}
	}









main {
  width: 100%;
  height: 100%;
  padding:10px;
  /*background: white;*/
  position: relative;
  overflow: hidden;

}

	main .drag-wrapper {
	  display: grid; 
	  grid-template-columns: repeat(10 , 220px);
	  gap: 10px;
	  padding:10px;
	  width: 100%;
	  white-space: nowrap;
	  overflow: auto;
	  margin-bottom: 0px;
	    
	}

	main .drag-wrapper .drag-item {
	  text-align: right;
	  white-space :normal; /*nowrap*/
	  color: #333;
	  background: white;
	  font-size: 16px;
	  font-weight: 500;
	  line-height:1.5;
	}


	main .drag-wrapper .drag-item a:link ,
	main .drag-wrapper .drag-item a:visited ,
	main .drag-wrapper .drag-item a:hover , 
	main .drag-wrapper .drag-item a:active 
	{
	  text-decoration: none;
	  color: #333;
	}


	main .drag-wrapper .drag-item p {
	  font-size: 14px;
	  color: rgba(62, 65, 79, 0.84);
	  line-height: 1.5;
	  margin-top: 0;
	  text-align: justify;

	}

main .drag-wrapper .drag-item .info {
	  position:absolute; bottom:10px;
	  font-size: 13px;
	  line-height: 1.5;
	  text-align: right;
	}

a.navindexlink:link, a.navindexlink:visited{  
	display: inline-block; 
	padding: 10px 20px;	
	text-decoration:none; 
	color:white; 
	transition: 0.1s;}
a.navindexlink:hover, a.navindexlink:active {  
	text-decoration:none; 
	color:white; 
	background-color:  #990000; }

.articleindex {
	display: block; float:right;
	width:74%; 
background:inherit	;	}





/* END INDEX */








/* footer */
footer { background: #222; margin-top: 0; }
footer a {  color:white; }
footer a:hover { color: orange;  }
footer p {line-height: 2;}
.beforefooter { width:100%; height: 100px; display:block;
background-image: linear-gradient(-8deg,black 50%, transparent 50% ); }

/* angle line before footer*/
.footer-card {   width: 100%; max-width: 100%; margin: 0; }
.footer-card .footer-wrap-image {   position: relative;}
.footer-card .footer-wrap-image img {  width: 100%;  }
.footer-card .footer-wrap-image svg {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 60px; }
.footer-card .footer-wrap-image svg polygon, .footer-card .footer-wrap-image svg path { fill: #34365B; stroke: #34365B;   stroke-width: 0px;}
@media (max-width: 600px) {  .footer-card .footer-wrap-image svg { height: 30px;}  }





/* navbar */
.marcoNavbar 
{ 
      display:block; 
      width:100%;  
      height:auto; 
      font-size: 16px; 
      padding: 10 px;  
      background-color: white ; 
      color:black;  
      z-index:99998;
      position: -webkit-sticky;  
      position: sticky; 
      top: 0; 
      border-bottom:1px solid #eee; 
      -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
}
.marcoNavbar i { font-size: 20px;  }
.marcoNavbar a:link { cursor:pointer; color: black; text-decoration: none; font-size: 16px; }
.marcoNavbar a:visited { cursor:pointer; color: black; text-decoration: none; font-size: 16px; }
.marcoNavbar a:hover { cursor:pointer; color: black; text-decoration: none; font-size: 16px; }







/*  //////////////// mobile side menu (sidenav) /////////   */
.sidenav {
  height: 100%;
  width: 100%; /* width: 90%; max-width: 400px; left: -400px; */
  position: fixed;
  float: right;
  font-size: 15pt;
  z-index: 99999;
  top: 0;
  left: -100%;
  color: #e4e3e4;
  background: radial-gradient(circle, #1a2049 0%, #13162f 100%);
  /*background-color: #333333;*/
  /*background-image: linear-gradient(45deg, darkblue,  #222252);*/
  overflow-x: hidden; /*scroller */
  transition: 0.5s;
  
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.sidenav a {
  background:blcak;
  color: #e4e3e4;
  padding: 8px 30px 8px 10px;
  text-decoration: none;
  transition: 0.3s;
}

.sidenav .sidemenu-list-items a{
  background:blcak;
  color: #e4e3e4;
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  transition: 0.3s;
}


.sidenav a:hover, .sidenav a:active {
  color:black;
  padding: 8px 40px 8px 0px;
  background:#e4e3e4;
}

.sidenav a.closebtn {
  float:left;
  font-size: 50pt;
  position: -webkit-sticky;
  position: sticky;
  top: 0; left: 0;
  background-color:black;
}


a.catlink:link, a.catlink:visited {
	font-family: bahig;
	font-size:16pt;
	font-weight: normal; 
	text-align:right; 
	color:white; 
	text-decoration: none; 
	display: inline-block; 
	float:right; 
	width:100%;  
	border-left:0 solid #222D62;
	border-right: 20px solid #222D62;  
	border-bottom: 1px solid #ddd; 
	padding:2px 8px;
	background-color: #333333; transition: 0.1s; }

a.catlink:hover, a.catlink:active {
	    color: white!important;  background-color: #1A4697;  border-left: 10px solid #1A4697 ;  border-right: 10px solid 	#1A4697; }

.ideascounter{   color: yellow;   font-size: 12pt; }







/* user update box: */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 20% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}




/* The Close Button */
.close {
  float: left;
  padding: 5px;
  margin:-10px;
  height:30px; width:30px;
  color: #fff;
  border-radius: 4px;
  background-color: red;
  font-family : topic,Verdana,sans-serif; 
  font-size: 22px;
  font-weight: bold;
  background:red; 
  opacity: 1;
}

.close:hover,
.close:focus {
  color: #eee;
  opacity: 1;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}


.modal-content h3
{
  margin-top: 30px; background: #eee; border: solid 1px grey; padding: 10px;
}

/* END user update box: */









/*  //////////////// showcat - articlecat ////////// */

.catname {
	width:90%; 
	text-align:center; 
	color: white; 
	border-radius:  15px ; 
	padding:5px;
	background:#333;
}

.catname h3 { margin:0px; }

div.chooseidea { 
	display:inline-block;
	width:85%; 
	margin:3px;
	padding:5px 40px; 
	background-color:#ddd;
	border: 1px solid #aaa;
	border-radius:  15px ;
	text-align:right; 
	color:black; 
	transition:0.1s;   }

div.chooseidea:hover {
	background-color:#ccc; 
	padding:5px 30px 5px 50px; }

.idealink { 	
	text-decoration: none;
	color:black;
		}






/*  ////////////////  article ////////// */


.title_sections
{
  margin: 20px;
  padding: 20px;
  background-color: #990000; 
  color: white ; 
  font-family:title ; 
  font-size: 22px;
  text-align: center;
}


.titletrans { 
  font-family:title;
  width:calc( 100% - 40px);
  margin: 20px;
  padding:20px 5px ; 
  font-size:20pt; 
  text-align:center; 
  border-left: 10px solid #00308F;
  line-height:1.25; 
  }




.titleblue { 
  font-family:title;
  display: block;
  background-color: #0074d9 ;
  margin: 15px;
  margin-top: 20px;
  padding:20px 5px ; 
  font-size:20pt; color:white; 
  text-align:center; 
  border-left: 10px solid #00308F;
  line-height:1.25; 
  }


.titledark { 
  font-family:title;
  display: block;
  background-color: #34363e ;
  margin: 15px;
  margin-top: 20px;
  padding:20px 5px ; 
  font-size:20pt; color:white; 
  text-align:center; 
  border-left: 10px solid #00308F;
  line-height:1.25; 
  }


@media screen and (max-width: 500px)
{
  /*.titleblue { margin: 10px ; width: 100%;}  */
}


.title {
  font-family:title;
  width:90%;
  background-color: #34495E ;
  padding:20px 5px ; 
  font-size:18pt; color:white; 
  text-align:center; 
  border-left: 5px solid #212F3D;
  border-right: 5px solid #212F3D;
  line-height:1.25; 
  border-radius: 15px 15px 0 0;
  margin-bottom: 0!Important;
  }


.maintopic {display:block;}


.topic {
  background:white; 
  display:block;
  width: calc(100% - 31px);
  font-family : droid1;
  color:black;
  font-size:12pt;
  line-height:2;
  padding: 10px 15px;
  text-align:justify;
  margin: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);





  font-family : droid1;
  color:black;
  line-height:2;
  font-size:12pt;
  padding: 15px;
  margin: 15px;
  text-align:justify;
  //border-left: 5px solid #7FDBFF;

}



.topichead {
  background:white; 
  display:block;
  width:90%!Important;
  font-family : droid1;
  color:black;
  font-size:12pt;
  line-height:2;
  padding: 10px 15px;
  text-align:justify;
  border-left: 5px solid #212F3D;
  border-right: 5px solid #212F3D;
  margin-bottom: 0!Important;
  border-radius: 15px 15px 0 0;

}


.title2 {
  font-family:title;
  width:90%;
  /*background-color: #2565AE ;*/
  padding:10px ; 
  font-size:16pt; color:darkblue; 
  text-align:center; 
  /*border-left: 3px solid #212F3D;*/
  /*border-right: 3px solid #212F3D;*/
  /*line-height:1.25; */
  /*border-radius: 10px ;*/
  }


.topic a ,  .topic a:hover ,  .topic a:active ,  .topic a:link {
    text-decoration: none;
}

.morelinks {
  font-family : DroidKufiRegular;
  color:dark;
  line-height:1.3;
  font-size:12pt;
  padding: 10px;
  text-align:justify;
}






/*  ////////////////       widgets      ////////////////  */

.widget
{ 
	display:block; 
	margin : 0; 
	padding: 20px;  
	/*border : 1px solid grey ; */
	/*border-radius : 8px; */ 
 	color: white; 
 }


.widget_red
{	background-image : linear-gradient(90deg, #AE2422, #BF2A24, #DC3427,#C82E24, #AE2422 ); }

.widget_blue 
{ background-image : linear-gradient(90deg, #345077, #445E83, #526C8F,#445E83, #345077 ); }


.widget_titles
{
  display: block;
  padding: 20px;
  background-color: #990000; 
  color: #fff ; 
  font-family:title ; 
  font-size: 22px;
  text-align: center;
  margin-bottom: -10px;
}


.widget_item
{
	display: block;
	height: 80px;
	padding: 0;
	margin-bottom: 10px;
	background-color: white;
	color:#222;
	font-size: 16px;
	font-weight: 600;
	border-right: solid 10px #34363e;
}


.widget-details1 { border-right: 3px solid orange; color:white; padding:0 10px;}



.widget-details2 { border-right: 3px solid #7C93BA; color:white; padding:0 10px;}

.widget-ol {
  margin-right:20px ;
  font-family : DroidKufiRegular;
  font-size:9pt;
  text-align:justify;
  line-height:1.3;
}



.widgetsindex { 
	display: block; 
	float:right;
	width:22%; 
background:inherit} 

.a-widget5 {   display:block;  border: 1px solid #777777;   background: #174074; color: white!important; padding: 5px;  margin:8;  box-shadow: 5px 5px grey; }


.widgetsindex { 
	display: block; float:right;
	width:22%; 
background:inherit} 




@media screen and (max-width:600px){  
	.widgets {width:100%;} 
}