html,body{
	height:100%;
	margin:0;
	padding:0;
	scroll-behavior:smooth;
}
body{
	background-color:#fff;
	font-family:Tajawal, Verdana;
	font-display:swap; 
	font-size:18px;
	color:#000;
	min-width:300px;
}
a{	
	color:#02607c;
	text-decoration:none;
	word-break:break-word;
}
a:hover{
	color:#025169;
}
li.indent{
	margin-left:20px;
}
.wrapper{
	max-width:1280px;
	margin:0 auto;
	background-color:inherit;
}
.wrapper{
	padding:10px;
}
blockquote{
	font-family:Georgia, "Times New Roman", Times, serif;
  quotes:"\201C""\201D""\2018""\2019";
  margin:0;
  padding:0 10px;
}
blockquote p:before{
	content:open-quote;
} 
blockquote p:after{
	content:close-quote ;
}
blockquote p:before,
blockquote p:after{
	font-weight:bold;
	font-size:30px;
	color:#00A2D1;
	margin:10px;
} 
blockquote p{
  font-style:italic;
	font-size:120%;
}
blockquote div{
	padding:0 10px 10px 0;
	text-align:right;
}
header, footer{
	height:20vh;
}
.logo img{
  max-width:150px;
  max-height:130px;
}
#menu a{
	color:#fff;
	text-decoration:none;
	padding:10px;
}
#menu a:hover{
	background-color:#02607c;
}
#footer{
	background-color:#00A2D1;
	border-top:10px solid #fff;
	padding-top:20px;
}
#footer .wrapper{
	padding-bottom:0;
}
#footer ul{
	margin:0;
	padding:0;
}
#footer ul li{
	list-style-type:none;
	display:inline;
	display:block;
	padding:0 30px 0 0;
}
#footer a{
	color:#000;
}
#footer a:hover{
	color:#02607c;
}
#footer p{
	margin:10px 0;
}
.xs-font{
	font-size:85%;
	border-top:1px solid #02607c;
}
.strip .home-social.wrapper{
	display:flex;
	justify-content:space-evenly;
	padding:0 0 20px 0;
	margin-
	font-size:1.2em;
}
.home-social i{
	font-size:3em;
	padding:20px 0;
}
.home-contact{
	font-size:1.2em;
  align-items:center;
  display:flex;
 	padding:10px 0 20px 15px;
}
.img-wrapper{
  width:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center; 
}
.img-wrapper{ 
  height:350px;
}
#about .img-wrapper{ 
  height:400px;
}
.img-wrapper img.square{
  width:400px;
  height:400px;
}
.img-wrapper img.rectangle{
  width:667px;
  height:400px;
}
.img-wrapper:hover img{
  transform:scale(1.1);
}
img{
  transition:transform 0.75s;
}
nav{
	background-color:#00A2D1;
	padding:10px 0 0 0;
}
nav label {
  float:right;
  margin-top:55px;
  margin-right:20px;
  margin-left:-40px;
}
nav .wrapper{
	padding:0;
}
nav a{
	color:#fff;
}
nav li:hover, 
nav #dropdown a:hover{
	background-color:#00A2D1;
	color:#fff;
}
nav #dropdown{
	max-height:0;
	overflow-y:hidden;
	background-color:#02607c;
}
nav ul{
  list-style:none;
  padding:0;
  margin:0;
  text-align:center;
}
nav ul li{
	margin:0;
}
nav ul li a{
	text-transform:uppercase;
	margin:0;
	padding:10px 0;
	width:100%;
  text-align:left;
}
.social{
  display:flex;
  justify-content:left;
  align-content:center;
  flex-wrap:wrap;
  margin-top:10px;
  border:0;
}
.strip .social{
  margin-left:20px;
}
.social a{
	margin:0 15px 0 0;
}
#footer .social{
  margin-top:0;
  margin-bottom:15px;
}
#dropdown .social a:hover{
	color:#00A2D1;
  background-color:inherit;
}

nav [id^=check_drop]{
  display:none;
}
nav #check_drop ~ #dropdown{
  max-height:0px;
  -webkit-transition:max-height 0.3s;
  -moz-transition:max-height 0.3s;
  -ms-transition:max-height 0.3s;
  -o-transition:max-height 0.3s;
  transition:max-height 0.3s;
}
nav #check_drop:checked ~ #dropdown{
  max-height:700px;
  -webkit-transition:max-height 0.7s;
  -moz-transition:max-height 0.7s;
  -ms-transition:max-height 0.7s;
  -o-transition:max-height 0.7s;
  transition:max-height 0.7s;
}
#dropdown .wrapper{
	padding:20px;
}
.fa-bars{
	color:#fff;
}
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths{
  position:relative;
  min-height:1px;
}
.col-xs-5ths{
  width:20%;
  float:left;
}
.stripes .strip:nth-child(even){
	background-color:#02607c;
	color:#fff;
}
.stripes .strip:nth-child(even) a{
	color:#fff;
}
.stripes .strip:nth-child(even) a:hover{
	color:#00A2D1;
}
#home .strip .wrapper,
#products .strip .wrapper{
	padding:0;
	border:0;
}
#home .strip div[class^="col-"],
#products .strip div[class^="col-"]{
	border:0;
}
#home .strip .wrapper div,
#products .strip .wrapper div{
	border-top:0;
	border-bottom:0;
}
h1{
	font-size:3em;
}
h2{
	font-size:2em;
}
h3{
	font-size:1.5em;
}
h1, h2, h3{
	font-family:Bebas Neue, Verdana;
	font-weight:normal;
	margin:20px;
}
form{
	overflow:hidden;
	border-radius:10px;
	padding:10px 15px;
}
form input,
form textarea{
  width:100%;
  padding:10px;
  color:#495057;
	border:1px solid #ccc;
	box-sizing:border-box;
}
form label{
	line-height:200%;
}
form textarea{
	resize:vertical;
	min-height:206px;
  border-radius:4px;
}
form input{
	margin-bottom:10px;
}
form input.btn{
	margin:10px auto 0 auto;
}
blockquote.standout:before{
	content:open-quote ;
	font-weight:bold;
	font-size:30px;
	color:#00A2D1;
	margin:10px;
}
hr{
	background-color:#ccc;
	border:0 none;
	height:1px;
	margin:40px 0;
}
.grid{
  display:grid;
  margin:10px 0 20px 0;
}
.span-2{
	grid-column:span 2;
}
ol.number-indent{
	counter-reset:item;
}
ol.number-indent li{
	display:block;
}
ol.number-indent li:before{
	content:counters(item, ".") ". "; 
	counter-increment:item;
	margin:0 10px 0 0;
}
ol li ul{
	list-style-type:disc;
}
.table-btn{
	width:0;
	min-width:fit-content;
	padding:0 5px;
}
.btn.primary.delete{
	background-color:#ff0000;
	border-color:#ff0000;
}
.table-responsive{
	overflow-x:auto;
}
.table-responsive td{
	white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:25ch;
}
/** cookies **/
.freeprivacypolicy-com---palette-dark .cc-nb-okagree,
.freeprivacypolicy-com---palette-dark .cc-nb-reject,
.freeprivacypolicy-com---palette-dark .cc-cp-foot-save{
	color:#fff !important;
	background-color:#00A2D1 !important;
}
.cc-nb-main-container{
	background-color:#ccc !important;
	padding:30px !important;
}
.freeprivacypolicy-com---palette-dark .cc-nb-title,
.freeprivacypolicy-com---palette-dark .cc-nb-text{
	color:#000 !important;
}
.freeprivacypolicy-com---palette-dark .cc-pc-head-lang select:focus{
	box-shadow:0 0 0 2px #00A2D1 !important;
}
.gap-b{
	margin-bottom:20px;
}
p{
  line-height:170%;
  word-break:break-word;
  margin:20px;
}
.embed-responsive{
	position:relative;
  padding-bottom:56.25%;
  height:0;
}
.embed-responsive iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.embed-responsive.discord{
  height:368px;
}
.hidden-xs{
	display:none!important;
}
.gap-t{
	margin-top:10px;
}
.right{
	text-align:right;
}
.italic{
	font-style:italic;
}
.center,
.center-xs{
	text-align:center;
}
img.responsive{
  display:block;
  max-width:100%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
img.responsive.left{
  display:block;
  max-width:100%;
  height:auto;
  margin-left:0;
  margin-right:0;
}
.panel{
  border:1px solid #00A2D1;
  background-color:#F0F8FF;
  border-radius:10px;
  padding:0 15px;
}
.panel h2{
	margin-left:0;
}
.g-recaptcha{
	margin-top:10px;
}
.g-recaptcha div{
	margin:0 auto;
}
#breadcrumb-outer{
	display:grid;
}
#breadcrumb{
  color:dimgrey;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.break{
	clear:both;
}
.btn{
  text-align:center;
  border-radius:4px;
  border:1px solid #00A2D1;
  background-color:#00A2D1;
  color:#fff;
  margin-left:auto;
  margin-right:auto;
  padding:5px 10px;
  vertical-align:middle;
  line-height:1.3;
  touch-action:manipulation;
  background-image:none;
  white-space:nowrap;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  width:min-content;
  display:block;
  cursor:pointer;
}
.btn:hover{
	filter:brightness(80%);
}
.btn.fixed{
	width:100px;
}
.btn.left{
	margin:0;
}
.stripes .strip:nth-child(even) a.btn{
	background-color:#fff;
	color:#02607c;
}
select,
input{
  padding:5px 10px;
  border-radius:4px;
  border:1px solid #ddd;
}
.form-label{
	margin:auto;
}
input[type="radio"]{
	height:30px;
  vertical-align:middle;
  position:relative;
  top:-3px;
}
ul li,
ol li{
	line-height:170%;
	margin-block-start:1em;
  margin-block-end:1em;
  display:flex;
}
.v-align{
	display:flex;
	align-items:center;
	justify-content:center;
}
#topbtn{
	position:fixed;
  bottom:10px;
  right:10px;
  background-color:#02607c;
  padding:5px;
  border:none;
  border-radius:5px;
  z-index:99999;
}
#topbtn:hover{
  background-color:#02607c;
}
table{
 width:100%;
  max-width:100%;
  text-align:left;
  border-spacing:0;
}
table td,
table th{
  padding:.75rem;
  vertical-align:middle;
  border-bottom:1px solid #dee2e6;
}
.order-xs-first{
	order:2;
}
.order-xs-second{
	order:1;
}
@media (min-width:768px){
	/*************************************************************************************************************************************/
	.order-xs-first{
		order:1;
	}
	.order-xs-second{
		order:2;
	}
	.logo img{
    max-width:345px;
    max-height:300px;
	}
	#footer .logo img{
		max-height:160px;
    max-width:184px;
	}
	#dropdown .wrapper{
		padding:0;
	}
	.social{
	  margin-top:0;
	  padding:0 10px 0 0;
	}
	.social.right{
	  justify-content:right;
	}
	.social a{
		margin-left:15px;
	}
	.strip .social{
	  margin-left:0;
	}
	#footer .social{
		margin-top:10px;
	}
	nav ul{
	  display:flex;
	  text-align:left;
	}
	nav ul li a{
		padding:10px 20px;
		margin:0;
	}
	nav #dropdown{
		padding:0;
	}
	#dropdown nav ul li [id=drop-check],
	#dropdown nav label{
	  display:none;
	}
	nav #check_drop ~ #dropdown{
		max-height:none;
	}
	.home-social{
		font-size:1.5em;
	}
	.home-contact{
		padding:0 20px 30px 20px;
		font-size:1.5em;
	}
	#home .strip .wrapper.home-social{
		padding:0 0 20px 0;
	}
	#footer 
  .col-xs-5ths,
  .col-sm-5ths,
  .col-md-5ths{
		width:20%;
		float:left;
		flex-basis:auto;
		max-width:auto;
  }
	#scroll-container{
	  overflow:hidden;
	  height:19px;
	}
	#scroll-text{
		white-space:nowrap;
	  /* animation properties */
	  -moz-transform:translateX(100%);
	  -webkit-transform:translateX(100%);
	  transform:translateX(100%);
	  -moz-animation:my-animation 15s linear infinite;
	  -webkit-animation:my-animation 15s linear infinite;
	  animation:my-animation 15s linear infinite;
	}
	@keyframes my-animation{
	  from{
	    -moz-transform:translateX(100%);
	    -webkit-transform:translateX(100%);
	    transform:translateX(100%);
	  }
	  to{
	    -moz-transform:translateX(-700px);
	    -webkit-transform:translateX(-700px);
	    transform:translateX(-700px);
	  }
	}
	div.dtsp-verticalContainer{
	    display:flex;
	    flex-direction:row;
	    flex-wrap:wrap;
	    justify-content:flex-start;
	    align-content:flex-start;
	    align-items:flex-start;
	}
	div.dtsp-verticalContainer div.dtsp-verticalPanes{
		flex-basis:0;
	    flex-basis:40%;
	}
	div.dtsp-verticalContainer div.dtsp-verticalPanes,
	div.dtsp-verticalContainer div.dtsp-dataTable{
	    width:100%;
	    flex-grow:0;
	    flex-shrink:0;
	    flex-basis:0;
	}
	div.dtsp-verticalContainer div.dtsp-verticalPanes{
	    flex-grow:1;
	    flex-shrink:0;
	    flex-basis:0;
	}
	div.dtsp-verticalContainer div.dtsp-dataTable{
	    flex-grow:1;
	    flex-shrink:0;
	    flex-basis:60%;
		padding:0 0 0 10px;
	}
	div.dtsp-narrow{
	    flex-direction:row !important;
	}
	div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dataTables_scrollBody div.dtsp-nameCont span.dtsp-pill{
		background-color:transparent;
		margin:0 5px 0 0;
	}
	table.dataTable tbody>tr.selected{
	    background-color:#00A2D1;
	}
	table.dataTable tr,
	div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow button.dtsp-dull{
	    cursor:pointer !important;
	}
	div.dtsp-verticalPanes{
	    margin-right:10px;
	    padding-right:5px;
	}
	div.dtsp-panesContainer button.dtsp-clearAll{
		margin:0;
	}
	div.dtsp-title{
	    margin-right:0px !important;
	    margin-top:8px !important;
	}
	div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes{
	    flex-direction:column;
	    flex-basis:0px;
	}
	div.dtsp-panesContainer{
		margin:0;
	}
	.dataTables_scrollBody{
	    height:100% !important;
	}
	div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dtsp-topRow div.dtsp-searchCont input.dtsp-search{
		padding:0;
		text-transform:uppercase;
	}
	.dtsp-topRow{
    	margin:0 0 10px 0;
		border-bottom:1px solid #00A2D1;
		border-radius:0;
	}
	.dataTables_scrollBody{
	    overflow:hidden !important;
	}
	div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane{
	    flex-basis:0px;
	    border:none;
	    border-top:1px solid #ECEFFF;
	    padding:10px 0;
	}
	div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane tr>th, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane tr>td{
		padding:5px 0;
	}
	.dtsp-name{
	    padding:0 0 0 10px;
	}
	div.dtsp-columns-1{
		max-width:100%;
		min-width:100%;
	}
	.dataTables_paginate{
	    text-align:center;
	    margin:10px;
	}
	.paginate_button{
	    text-align:center;
	    border-radius:4px;
	    border:1px solid #00A2D1;
	    background-color:#00A2D1;
		color:#fff;
	    padding:5px 10px;
	    vertical-align:middle;
	    line-height:1.42857143;
	    touch-action:manipulation;
	    background-image:none;
	    white-space:nowrap;
	    -webkit-user-select:none;
	    -moz-user-select:none;
	    -ms-user-select:none;
	    user-select:none;
	    width:150px;
	    cursor:pointer;
	    margin:0 5px;
	}
	.paginate_button:hover{
		background-color:#02607c;
		color:#fff;
	}
	:focus{
    	outline:none;
	}
	div.dtsp-title,
	.dataTables_info
	 /** behave same as p tag **/{
	    line-height:170%;
	    word-break:break-word;
	    display:block;
	    margin-block-start:1em;
	    margin-block-end:1em;
	    margin-inline-start:0px;
	    margin-inline-end:0px;
	    text-align:center;
	}
	div.dtsp-title{
		margin-left:5px !important;
	}
	div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dataTables_wrapper,
	div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane div.dataTables_wrapper:hover{
		border:none;
	}
	.dataTables_filter{
	    text-align:center;
	    margin-bottom:10px;
	}
	.dataTables_filter input{
	    margin-left:10px;
    	outline:none;
	}
	.dataTable tr:last-child td{
		border:0;
	}
	table.dataTable thead .sorting:before{
		font-family:"Font Awesome 5 Free";
		font-display:swap; 
		top:0;
		left:-5px;
		padding-right:10px;
		content:"\f0a9";
		}
	/************************/
	article{
		flex:1;
	}
	aside{
		width:300px;
		max-width:300px;
		min-width:300px;
	}
	#footer ul li{
		display:inline;
	}
	.visible-xs{
		display:none !important;
	}
	.hidden-xs{
		display:inline-block !important;
	}
	.hidden-sm{
		display:none;
	}
	.center-xs{
		text-align:left;
	}
	.right-sm{
		text-align:right;
	}
}
@media (min-width:992px){
	.hidden-sm{
		display:inline;
	}
	.col-md-5ths{
    width:20%;
    float:left;
  }
	.home-contact{
		padding:30px 20px;
	}
}