/* CSS Document */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;

}

body, td, th {
	font-family: "Microsoft JhengHei", "Arial", Helvetica, sans-serif;
}

section {
	z-index: -100;
}

article {
	z-index: 0;
}

#menu {
	z-index: 1000;
}

/* background-------------------------------------------------------- */
body {
    background-color: #e3e7ef;

}


.bgimg {
	padding-top: 30px;
	padding-left: -30px;
	z-index:2;
	/*border-bottom: 5px solid #FFFFFF;*/

}

#content {
	border: 0px solid;
	margin: 0px;
	margin-left: 20px;
	margin-right: 20px;
	float: left;
	position: relative;
	line-height: 1.6em;
	font-size: 100%;
	margin-top: -397px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: justify;
	text-justify: inter-ideograph;
}


#pageheader {
	border: 0px solid;
	margin: 0px;
	margin-left: 0px;
	margin-right: 0px;
	float: left;
	position: relative;
	line-height: 1.6em;
	font-size: 100%;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: justify;
	text-justify: inter-ideograph;
}

#content_bg {
	/*background-image: url(../images/page_bg.jpg);*/
	background-size: contain;
	background-color:#CBDFAA;
	background-repeat: no-repeat;
	width: 100%;
	margin: auto;
}
/* Welcome--------------------------------------------------------- */
.welcomehead {
	color: #ed6a00;
	font-size: 170%;
	font-weight: bold;
	clear: both;
	margin-top: 1em;
	text-align: center;
}

.welcomecontent {
	color: #FFFFFF;
	font-size: 100%;
	/*font-weight: bold;*/
	clear: both;
	margin-top: 1em;
	margin-right: 200px;
	margin-left: 200px;
}
.welcomecontent2 {
	color: #FFFFFF;
	font-size: 100%;
	/*font-weight: bold;*/
	/*clear: both;*/
	/*margin-top: 1em;*/
	/*margin-right: 20px;*/
	margin-left: 30px;
}
.contactcontent {
	color: #FFFFFF;
	font-size: 100%;
	/*font-weight: bold;*/
	clear: both;
	margin-top: 1em;
	margin-right: 200px;
	margin-left: 200px;
}
/* headings-------------------------------------------------------- */

hx {
	visibility: hidden;
	height: 50px;
	line-height: normal;
}
head1 {
	
	color:#003bb2;
	font-size: 150%;
	font-weight: bold;
	clear: both;
	margin-top: 2em;
}
h1 {
	color: #11576e;
	font-size: 120%;
	font-weight: bold;
	clear: both;
	margin-top: 1em;
	text-align:left;
}
h2 {
	color: #e1f263;
	font-size: 110%;
	font-weight: bold;
	clear: both;
	margin-top: 2em;
}
/* figures-------------------------------------------------------- */
figure {
	display: table;
	margin-top: 0em;
	margin-left: 0em;
	margin-right: 0em;
}
figcaption {
	display: table-caption;
	caption-side: bottom;
	line-height: 1.2em;
	padding: 0px 0em 0.5em 0em;
	color: #6b4716;
	font-size: 95%;
}

figure.left{
	margin-right: 1em;
}
figure.right{
	margin-left: 1em;
}

/* function buttons-------------------------------------------------------- */
#function {
	margin-top: 1.5em;
	clear: both;
	float: right;
}
.function_button {
	border-radius: 10px;
	background-color: #F8F1C0;
	color: #013CF9;
	border: 1px solid #4CAF50;
	display: inline-block;
	margin: 0 10px 5px 10px;
	padding: 5px;
}
.function_button:hover {
	background-color: #013CF9;
	color: #F8F1C0;
}
/* footer-------------------------------------------------------- */
#footer {
	padding-bottom: 2em;
	clear: both;
	text-align: left;
}
#footer img {
	padding: 10px;
}
#commissioner {
	float: right;
	margin-bottom: 2em;
}
#signature {
	white-space: nowrap;
	text-align: center;
	line-height: 1em;
}
/* common use-------------------------------------------------------- */
.right {
	float: right;
}
.left {
	float: left;
}


.center {
	margin: auto;
}
.clear {
	clear: both;
}
.nowrap {
	white-space: nowrap;
}
.highlight {
	font-weight: bold;
}

a:link {
    text-decoration: none;
    color: #6d1f1f
}

a:visited {
    text-decoration: none;
    /*color: #7c4c4c;*/
}

a:hover {
    color: #0080aa;
}

a:active {
    text-decoration: underline;
}


a.white:link{color:white;font-size:100%},a.white:hover{color: white;}, a.white:active {color: white;}, a.white:visited {color: white;}



/* background image------------------------------------------------*/



/* menu bar--------------------------------------------------------*/
.menuicon{
	width:20px;
}

#menu {
	border: 0px solid;
	/*background-color:#595959;*/
	/*background-color:#ed6600;*/
	/*background-color:#910900;*/
	background-color:white;
	margin: 0px;
	text-align: left;
	width: 100%;
	height: 20px;
	padding-top: 0px;
	padding-bottom: 30px;
	padding-right: 20px;
	position:fixed;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.1);

	
}

#menu_v {
	border: 0px solid;
	/*background-color:#595959;*/
	/*background-color:#ed6600;*/
	/*background-color:#910900;*/
	background-color:white;
	margin: 0px;
	text-align: left;
	width: 15%;
	height: 20px;
	padding-top: 0px;
	padding-bottom: 30px;
	padding-right: 20px;
	position:fixed;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.1);
	
}



/* common and top level styles ----------------------------------------------------------*/
#navx span {
display: none;
}
#navx, #navx ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#navx {
/* Top Menu bar color--------------------------------------------------------------------------------------*/
background-color:#EF7D00;
border-bottom: 1px solid #333333;
float: left;
margin-left: 0%;
margin-right: 0%;
position: relative;
width: 100%;
z-index:100;
}
#navx ul.subs {
background-color: #EF7D00;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
/*display: none;*/
left: 0;
padding: 2%;
position: absolute;
top: 50px;
width: 95%;
height:0px;
/*opacity: 0.9*/;
visibility: hidden;
opacity: 0;
transition: all 0.5s;
transition-delay: 0.3s;
-webkit-transition-delay: 0.3s; /* Safari */
-webkit-transition: 0.5s; /* Safari */
}

#navx > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#navx li a {
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
/*----------------------------------------------menu bar text color-------------------------------------*/
#navx > li > a {
color: #FFFFFF;
display: block;
font-size: 0.9em;
line-height: 49px;
padding: 0 15px;
/*text-transform: uppercase;*/
}

/*menu mouseover color*/
#navx > li:hover > a, #navx > a:hover, #navx li.active:hover, #navx li.main:hover  {
background-color: #EF7D00;
color: #FFFFFF;

}

/*menu home color*/
#navx li.active > a {
background-color: #70002a;
color: #FFFFFF;

}

#navx li.main > a {
background-color: #00529b;
color: #FFFFFF;
}

#navx li.bar  {
/*background-color: #5b5b5b;*/
color: #ff0072;
font-size: 1.4em;
vertical-align: bottom;

}


/* submenu--------------------------------------------------------------------------------------- */
#navx li:hover ul.subs {
/*display: block;*/
visibility: visible;
opacity: 0.95;
height:300px;
}
#navx ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 80%;
}
#navx ul.subs > li a {
color: #ffffff;
line-height: 40px;
}
#navx ul li a:hover {
color: #000000;
/*color: #F55856;*/
}
#navx ul.subs > li > a {
font-size: 1.3em;
margin-bottom: 10px;
/*text-transform: uppercase;*/
}
#navx ul.subs > li li {
float: none;
padding-left: 8px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#navx ul.subs > li li:hover {
padding-left: 15px;
}

#navx li.icon {display: none; }








/* font size switch-------------------------------------------------------- */
#size_switch {
	border: 0px solid;
	/*background-color:#595959;*/
	/*background-color:#ed6600;*/
	/*background-color:#910900;*/
	margin: 0px;
	text-align: right;
	color:#ffffff;
	padding-top: 10px;
	padding-bottom: 0px;
	padding-right: 20px;
	
	
}
#normal, #large, #largest {
	margin: 2px 3px 0px 3px;
	display: inline-block;
	width: 23px;
	height: 23px;
	border: 0px solid #808080;
	
	border-radius: 15px;
	text-indent: 3em;
	line-height: 2em;
	overflow: hidden;
}
#normal {
	background-image: url('../images/normal.png');background-color: #bcbcbc;
}
#large {
	background-image: url('../images/large.png');background-color: #bcbcbc;
}
#largest {
	background-image: url('../images/largest.png');background-color: #bcbcbc;
}
#normal:hover, #large:hover, #largest:hover{
	background-color: grey;
	
}

/* lang switch--------------------------------------------------------*/
.lang_switch{
  margin:0px 5px 0px 5px;
  font-size: 13px;
  font-weight: bold;
  color: #bcbcbc;
  vertical-align: text-top;
	text-align: right;
  display: inline-block;

}

.lang_switch a{
  color: #bcbcbc;
}

.lang_switch a:hover{
  color: #c4edff;
}

.lang_switch:hover{
  font-weight: bold;
  color: #e0f6ff;
}

/* text invert*/
.white {
  font-size: 10px;
  font-weight: bold;
  color: white;

}
.white:hover {
  font-size: 10px;
  font-weight: bold;
  color: black;


}

/*move--------------------------------------------------------------*/
.bg_move {
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: red;*/
    position: relative;
    -webkit-animation-name: top_to_down; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-name: top_to_down;
    animation-duration: 1s;
    animation-delay: 0s;
}
.arrow_move {
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: red;*/
    position: relative;
	z-index:50;
    -webkit-animation-name: left_to_right; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    /*animation-name: left_to_right2;*/
    animation-name: left_to_right;
    animation-duration: 1s;
    animation-delay: 0s;
}

.title_move {
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: red;*/
    position: relative;
	z-index:50;
    -webkit-animation-name: top_to_down; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    /*animation-name: left_to_right2;*/
    animation-name: top_to_down;
    animation-duration: 1.5s;
    animation-delay: 0s;
}
.welcome_move {
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: red;*/
    position: relative;
    -webkit-animation-name: left_to_right; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-name: left_to_right;
    animation-duration: 2s;
    animation-delay: 0s;
}
.orange_move {
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: red;*/
    position: relative;
    -webkit-animation-name: left_to_right2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-name: left_to_right2;
    animation-duration: 2s;
    animation-delay: 0s;
}

@-webkit-keyframes top_to_down {
    from   {left:0px; top:-500px;}
    to  {left:0px; top:0px;}

}

@keyframes top_to_down {
    from   {left:0px; top:-500px;}
    to  {left:0px; top:0px;}
}

@-webkit-keyframes down_to_top {
    from   {left:0px; top:1000px;}
    to  {left:0px; top:0px;}

}

@keyframes down_to_top {
    from   {left:0px; top:1000px;}
    to  {left:0px; top:0px;}
}

@-webkit-keyframes left_to_right {
    from   {left:-1000px; top:0px;}
    to  {left:0px; top:0px;}
}

@keyframes left_to_right {
    from   {left:-1000px; top:0px;}
    to  {left:0px; top:0px;}
}

@-webkit-keyframes left_to_right2 {
    from   {left:-1000px; top:0px;}
    to  {left:0px; top:0px;}
}

@keyframes left_to_right2 {
    from   {left:-1000px; top:0px;}
    to  {left:0px; top:0px;}
}


@-webkit-keyframes fadein {
    from   {opacity: 0;}
    to  {opacity: 1;}
}

@keyframes fadein {
    from   {opacity: 0;}
    to  {opacity: 1;}
}

/*move--------------------------------------------------------------*/
.obj_move {
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: red;*/
    position: relative;
    -webkit-animation-name: left_to_right; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-name: left_to_right;
    animation-duration: 2s;
    animation-delay: 1s;
}

@-webkit-keyframes left_to_right {
    from   {left:-1000px; top:0px;}
    to  {left:0px; top:0px;}

}

@keyframes left_to_right {
    from   {left:-1000px; top:0px;}
    to  {left:0px; top:0px;}


}


/*round corner area-------------------------------------------*/

.round_corner_area{
    border-radius: 10px;
    border: 2px dotted #000000;
    padding: 10px; 
    width: 90%;
     

}


/*table-------------------------------------------------------*/
table {
    border-collapse: collapse;
    width: 100%;

}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2; }
tr:nth-last-child(1){border-bottom: 1px solid #ddd;}

th {
    background-color: black;
    color: white;
}

tr:hover{background-color:#fff8e8}



/*badge--------------------------------------------------------*/
.round_badge {
    display: inline-block;
    color:white;
    font-size:1em;
    font-weight: bold;
    border: 0px solid #ddd;
    border-radius: 0px;
    padding-left: 10px;
    padding-right: 10px;
	margin-bottom:20px;
	background-color:#0a214f;
}

/*image shadow & rotate-------------------------------------------------------*/
.shadow_img {
    display: inline-block;
    border: 0px solid #ddd;

    margin-left:20px;
    margin-right:20px;

	box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4);
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
    transition: 0.3s;
}

.shadow_img:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
    border: 1px solid #ddd;
    transform: rotate(0deg);
}


/*image opacity------------------------------------------------------*/
.img_opacity {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    -webkit-transition: width 2s; /* Safari */
    transition:2s;
}

.img_opacity:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}



/*box_image--------------------------------------------------------*/
.box_img {
    display: inline-block;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-300px;
    margin-left:-80px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}

/*box_image--------------------------------------------------------*/
.box_img_em {
    display: inline-block;
    border: 2px solid #ddd;
    border-radius: 10px;
    margin-right:5px;
    padding: 5px;
    transition: 0.3s;
	width: 250px;
}

.box_img_em:hover {
    /*box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.3);*/
    width:300px
}


.box_img_arrow {
    display: inline-block;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-690px;
    margin-left:100px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.box_img_title {
    display: inline-block;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-720px;
    margin-left:50px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
    max-width: 100%;
    height: auto;
}
.bedc_icac {
    display: inline-block;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-720px;
    margin-left:775px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.front_coog_logos {
    display: inline-block;
    z-index:10;
    text-align: center;
    font-size:0.8em;
    color:#666666;
    width:180px;
    float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-450px;
    margin-left:30px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}

.coog_logos {
    display: inline-block;
    z-index:10;
    text-align: center;
    font-size:0.8em;
    color:#666666;
    width:180px;
    float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:10px;
    margin-left:30px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.ebanner {
    display: inline-block;
	z-index:1;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-652px;
    margin-left:335px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}

.abouttheprogamme{
    color:#000000;
    font-size:1em;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-left:300px;
    margin-right:10px;
    margin-top:-270px;
    padding: 0px;
    transition: 0.3s;
}

.brown_line {
    display: inline-block;
	z-index:2;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-454px;
    margin-left:-20px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.box_img2 {
/*    width:400px;*/
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:10px;

    padding: 5px;
    transition: 0.3s;
}
.box_img_front_round {
	white-space: nowrap;
/*    width:300px; */
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-left:200px;
    margin-right:10px;
    margin-top:-20px;
    padding: 0px;
    transition: 0.3s;
}
.box_img4 {
    width:45%;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:0px;
    padding: 0px;
    transition: 0.3s;
}
.box_img5 {
    width:40%;
    display: inline-block;
    text-align: left;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:0px;
    padding: 0px;
    transition: 0.3s;
}
.box_img6 {
    width:350px;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:10px;

    padding: 5px;
    transition: 0.3s;
}
.box_img7 {
	/*white-space: nowrap;*/
   width:300px;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:10px;
    padding: 0px;
    transition: 0.3s;
}
.box_img8 {
	/*white-space: nowrap;*/
   width:500px;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:10px;
    padding: 0px;
    transition: 0.3s;
}
.box_img9 {
	/*white-space: nowrap;*/
   width:400px;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:10px;
    padding: 0px;
    transition: 0.3s;
}
/*.box_img:hover {
    box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.3);}*/




/*input---------------------------------------------------------------------*/
input[type=text], select {
    border: 1px solid #444444;
    border-radius: 5px;
    margin-right:5px;
    padding: 5px;
    width: 200px;
	
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}
input[type=text]:focus {
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.3);
}


input[type=checkbox] {
    border: 1px solid #444444;
    border-radius: 0px;
    margin-right:0px;
    padding: 5px;
    
	
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}
input[type=checkbox]:focus {
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.3);
}

input[type=radio] {
    border: 1px solid #444444;
    border-radius: 0px;
    margin-right:0px;
    padding: 5px;
    
	
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}
input[type=radio]:focus {
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.3);
}


/*button---------------------------------------------------------*/

.button3d {
    background-color: #e0ffd3; /* Green */
    border: 1px solid #000000;
    border-radius: 12px;
    color: #00000;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


.button_shadow:hover {
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.9),0 17px 50px 0 rgba(0,0,0,0.9);
}


/*button_about---------------------------------------------------*/
.button_about {
  display: inline-block;
  border-radius: 150px;
  background-color: #085751;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 1.2em;
  padding: 10px;
  height: 130px;
  width: 130px;
  line-height: 1.2em;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
  float: left;
}

.button_about_disable {
aria-disabled:true;
  display: inline-block;
  border-radius: 150px;
  background-color:#545454;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 1.2em;
  padding: 10px;
  height: 130px;
  width: 130px;
  line-height: 1.2em;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
  float: left;
}

.button_about span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button_about span:after {
  /*content: '>>';*/
  content:  
  position: absolute;
  opacity: 0;
  top: 44px;
  right: -20px;
  transition: 0.5s;
}

.button_about:hover span {
  padding-right: 25px;
}

.button_about:hover span:after {
  opacity: 1;
  right: 0;
}


.but_remarks{
	font-size:0.5em;
	line-height:90%

}
/* Remarks -----------------------------------------------------------------*/
.remarks{
	font-size:0.9em;
	line-height:80%
	
}

/* Modal Content (image)---------------------------------------------------- */

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 101; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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.9); /* Black w/ opacity */
}




.modal-content {
    margin: auto;
    display: block;
    height: 70%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}






/* ribbon-------------------------------------------------------- */
.ribbon {
  position: fixed;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 100px; height: 100px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #910900;
  background: linear-gradient(#910900 0%, #dd1002 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 15px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}





/* Tooltip container-------------------------------------------------------- */
.tooltip {
    position: relative;
    display: inline-block;
    padding: 0px;
    /*border: 1px dotted black;  If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow-------------------------------------------------------- */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container----------------------- */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

hr.style1{
	border-top: 1px solid #8c8b8b;
}


hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}


hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}


hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}


hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}


hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.style17:after {
	content: 'Ħħ';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}


hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}


/* responsive rules---------------------------------------------------------- */
@media all and (max-width : 800px) {

/*#pageheader {
	display:none;
	border: 0px solid;
	margin: 0px;
	margin-left: 0px;
	margin-right: 0px;
	float: left;
	position: relative;
	line-height: 1.6em;
	font-size: 100%;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: justify;
	text-justify: inter-ideograph;
}*/


.bgimg {
	display:none;
	padding-top: 30px;
	padding-left: -30px;
	z-index:2;
	/*border-bottom: 5px solid #FFFFFF;*/

}

.box_img_arrow {
    display: none;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-690px;
    margin-left:-35px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.box_img_title {
    display: block;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:100px;
    margin-left:10px;
	width:50%;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}


.bedc_icac {
    display: block;
	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:150px;
    margin-left:-500px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.coog_logos {
    display: block;
    z-index:10;
    text-align: center;
    font-size:0.8em;
    line-height:0.8em;
    color:#666666;
    width:180px;
    float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:0px;
    margin-left:30px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.ebanner {
    display: inline-block;
	z-index:1;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-652px;
    margin-left:335px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}
.brown_line {
    display: none;
	z-index:2;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-454px;
    margin-left:-20px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}

.box_img_front_round {
    white-space: nowrap;
/*  width:300px; */
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    padding: 0px;
    transition: 0.3s;
}

#navx li.bar {
color: #ffd82d;
}


.welcomehead {
	color: #ed6a00;
	font-size: 170%;
	font-weight: bold;
	clear: both;
	margin-top: 1em;
	margin-right: 5px;
	margin-left: 5px;
}

.welcomecontent {
	color: #FFFFFF;
	font-size: 100%;
	/*font-weight: bold;*/
	clear: both;
	margin-top: 1em;
	margin-right: 5px;
	margin-left: 5px;

}
.welcomecontent2 {
	color: #FFFFFF;
	font-size: 100%;
	/*font-weight: bold;*/
	clear: both;
	margin-top: 1em;
	margin-right: 5px;
	margin-left: 5px;

}

.box_img2 {
    width:100%;
    display: inline-block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:10px;

    padding: 5px;
    transition: 0.3s;
}
.box_img {
    display:none;

	z-index:50;
    text-align: center;
	float: left;
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    /*margin-right:5px;*/
    margin-top:-80px;
    /*padding: 5px;*/
    /*transition: 0.3s;*/
}

.box_img3 {
    width:100%;
    display: block;
    text-align: justify;
    vertical-align: text-top;
    color:white;	
    /*border: 1px solid #ddd;*/
    /*border-radius: 10px;*/
    margin-right:5px;
    padding: 5px;
    transition: 0.3s;
}

/* lang switch--------------------------------------------------------*/
.lang_switch{
  position: relative;
  float: none;
  margin:0px 5px 0px 5px;
  font-size: 12px;
  font-weight: bold;
  color: black;
  vertical-align: middle;
  display: block;

}
.lang_switch:hover{
  font-weight: bold;
  color: grey;
}


#size_switch{
/*display:none;*/
}

#normal, #large, #largest {
	margin: 2px 3px 0px 3px;
	display: none;
	width: 23px;
	height: 23px;
	border: 1px solid #808080;
	background: #FFFFFF;
	
	border-radius: 15px;
	text-indent: 3em;
	line-height: 2em;
	overflow: hidden;
}

#navx > li {
float: none;
border-bottom: 0;
margin-bottom: 0;

}



#navx ul.subs {
position: relative;
top: 0;
display: none;
}
#navx li:hover ul.subs {
/*display: none;*/
display:block;
height:280px;
}

#navx li #s1:target + ul.subs {
display: block;
/*display: none;*/}

#navx li #s2:target + ul.subs {
display: block;
/*display: none;*/}

#navx li #s3:target + ul.subs {
display: block;
/*display: none;*/}

#navx li #s4:target + ul.subs {
display: block;
/*display: none;*/
}


#navx ul.subs > li {
display: block;
height:10px;
/*display: none;*/
width: auto;
}

#navx ul.subs > li a {
color: #ffffff;
line-height: 5px;
}

#navx li:not(:first-child) {display: none;}
#navx li.icon {
display: inline-block;
float: right;
z-index:100;
}

#navx.responsive {position: relative;}
#navx.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
#navx.responsive li {
    float: none;
    display: inline;
  }
#navx.responsive li a {
    display: block;
    text-align: left;
  }

.menuicon{
	width:20px;
}

}



/* fix for Chrome on nowrap problem-------------------------------------------------------- */
.chrome_fix {
	font-size: 0.1px;	/* make it very small */
	line-height: 0.1px;
	visibility: hidden;	/* make it not visable */
}



/* for mobile-------------------------------------------------------- */ 
@media only screen and (max-width: 800px) {
	#content {
		padding-left: 5px;
		padding-right: 5px;
	}
	#content_bg {
		width: 100%;
		background-image: none;
		/*background-color: #F9F7E6;*/
		background-size:contain;
	}
	h1 {
		visibility: visible;
		height: auto;
	}
	.mobile_hide {
		display: none;
	}
	figure img {
		width: 100%;
	}
	
	.bg_move,
	.title_move,
	.arrow_move,
	.orange_move {
		position: relative;
		-webkit-animation: none;
		animation: none;
	}
}