/* Default CSS */
/* Base Styles */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}
table{width:100%;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;}
caption,th,td{text-align:left;font-weight:normal}
table,td,th{margin:0;padding:0;vertical-align:top}
blockquote:before,blockquote:after,q:before,q:after{content:""}
blockquote,q{quotes:"" ""}
a img{border:none}
img{vertical-align:bottom;}
h1,h2,h3,h4,h5,h6{font-weight:normal;margin:10px 0;line-height:1.2em}
h1{font-size:2em}
h2{font-size:1.3em;font-weight:bold}
h3{font-size:1.3em;font-weight:bold}
h4{font-size:1.2em;font-weight:bold}
h5{font-size:1em;font-weight:bold}
h6{font-size:1em;font-weight:bold}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img{margin:0}
a{color:#00A;text-decoration:none}
a:focus,a:hover{color:#a00;text-decoration:underline}
ul li {margin-left:18px}
body {
  padding: 0;
  margin-top: 0px;
  width: 100%;
  height: 100%;
  /*font-family:Verdana, Arial, Helvetica, sans-serif;*/
  font-family: Arial, Helvetica, sans-serif; 
  font-size: .8em;
  text-align: center;
  line-height: 120%;  
  color: #2f3746;
  /*background: #DCE3E9 url(../images/main.bg.png) repeat-x top;*/
}

p.double_space {margin:0;padding:0; line-height:2em}
/* Main Layout */

#wrapper {
  margin: 0 auto;
  width: 1000px;
  border:1px solid #C0C0C0;
  /*border-top:1px solid #FFFFFF;
  border-bottom:1px solid #2f3746;
  border-left:1px solid #2f3746;
  border-right:1px solid #2f3746;*/
  
  /*border: 1px solid #2f3746;*/
  background: #ffffff;
}

#page-wrapper {
  padding: 0;
  margin: 10px auto;
  width : 1000px;
  text-align: left;
  background: #ffffff;
}

#middle-wrapper {
	padding-left:10px;
	padding-right:10px;
}

#main-content {
	border:1px solid #AAA;
	padding-bottom:30px;
}

.common_tab {height:30px;list-style:none; margin:0; padding:0; margin-bottom:20px}
.common_tab li {float:left; margin:0; margin-right:5px; height:30px; padding:0 10px; background:#5af; line-height:30px}
.common_tab li a {color:#00f; text-decoration:underline}
.common_tab li:hover {background:#fa5;}
.common_tab li.selected {background:#fa5; color:#000}
.link { color:#00C; text-decoration:underline }
.link:hover, .link:focus { color:#C00; }
.step_bar_check { background:140px 0 url('../images/check.png') no-repeat; }
.step_bar_arrow { background:140px 0 url('../images/arrow.png') no-repeat; }
.error {color:#f00}
.location_bar {margin-bottom:10px;border:1px solid #999; padding:5px 0; border-width:1px 0}
.padding_horizontal {padding:0 10px}
.padding_vertical {padding:10px 0}
.padding_all {padding:10px}
.fill_blue {background-color: #2573E1}
.fill_blue2 {background-color: #809FFF}
.border_blue {border-color: #2573E1}
.font_white {color:white}
a.font_white:hover {color:white; text-decoration:underline}
.font_bold {font-weight:bold}
.font_italic {font-style:italic}
table .second {background-color: #e7e7e7}
table.body {border-collapse:collapse;width:100%}
table.body tr td { padding:10px 5px; }

table.body2 { border-collapse:collapse;width:100% }
table.body2 tr td { padding:5px; }

table.border {border-collapse:collapse; border:1px solid #999; border-width:1px 0 0 1px }
table.border tr th { padding:10px 5px; border:1px solid #999; border-width:0 1px 1px 0; background: #ccc }
table.border tr td { padding:10px 5px; border:1px solid #999; border-width:0 1px 1px 0}
table.border tr th { font-weight:bold; text-align:center}

.req_field { color: #FF0000; font-weight: bold; }
.style2 {color: #FF0000}
.font_small {font-size:11px}
body.sidebars #middle-wrapper {

  background: url(../images/sidebar-bg.png) no-repeat;
  background-position:bottom;
}

body.sidebar-left #middle-wrapper {
    /*background: url(../images/sidebar-bg-left.png) repeat-y left;*/
}

body.sidebar-right #middle-wrapper {
    /*background: url(../images/sidebar-bg-right.png) repeat-y right;*/
}


#squeeze {
}

#main-content-inner {
  /*padding: 10px 20px;*/
  padding:10px 20px 20px 20px;
  margin: 0; 
  overflow: hidden; /* Fix for collapsible fieldsets in IE */
  width:475px;
}

#main-content-inner .teksti{
border:0px solid black;
text-align:left;
float:none;

}

#middle-wrapper .sidebar-right {
  float: right;
  z-index: 1;
  position: relative;
}

#middle-wrapper .sidebar-left {
  float: left;
  z-index: 1;
  position: relative;
}

.sidebox-left h3, .sidebox-right h3 {
  font-family:tahoma;
  padding: 0px 0px 0px 10px ;
  margin: 0 0 10px 0;
  color:#FFFFFF;
  font-size: 11px;
  line-height: 24px;
  background-color:#FFFFFF;
  background:url(../images/sidebox-h3_new.GIF) repeat-x top left;
  /*background: url(../images/sidebox-h3.png) no-repeat;*/
}
.sidebox-left .subcontent h3, .sidebox-right .subcontent h3 {
  padding: 0px 0px 0px 10px ;
   color:#FFFFFF;
  font-size: 0.9em;
  line-height: 24px;
  background-color:#FFFFFF;
  background:url(../images/sidebox-h3_new2.GIF) repeat-x top left;
  /*background: url(../images/sidebox-h3.png) no-repeat;*/
}
.sidebox-left .subsubcontent, .sidebox-right .subsubcontent{
  padding: 5px 10px 10px 10px ;
  border:1px solid #A1A1A1;
  margin:0 0 10px 0;
  /*background:url(../images/sidebox-contents.GIF) repeat-x top left;*/
  background-color:#DDE2E4;
}

.sidebox-left .subsubcontent table {
    border:1px solid white;
  border-top:1px solid white;
  border-left:1px solid white;
 
}
.sidebox-left .subsubcontent table td{
    border:1px solid white;
  border-top:1px solid white;
  border-left:1px solid white;
 
}

.sidebox-left .subsubcontent2, .sidebox-right .subsubcontent2{
  padding: 5px 10px 10px 10px ;
  margin-bottom:10px;
  border:1px solid #A1A1A1;
  
  /*background:url(../images/sidebox-contents.GIF) repeat-x top left;*/
  background-color:#DDE2E4;
}

.sidebox-left h3 a, .sidebox-right h3 a {
  
  color:#FFFFFF;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 24px;
  
}

.sidebox-left a, .sidebox-right a {
  font-weight: bold;  
}

.sidebox-left, .sidebox-right {
  padding: 0px 10px 0 10px;
  margin: 0px 0px 10px 0px;
}

.sidebox-content {
  margin: 0;
  /*padding:0;*/
  padding: 1px 0px;
  /*background:url(../images/sidebox-contents.GIF) repeat-x top left;*/
   /*  border:1px solid #A1A1A1;
   background-color:#DDE2E4;*/
}

#topboxes {
  padding: 0;
  margin: 0;
  /*background: #c3d9ff url(../images/bb-bg.png) repeat-x top;*/
  overflow: hidden;
}

#topboxes a {
  font-weight: bold;
}

#topboxes a:hover {
  color: #ffffff;
}


#bottomboxes {
  padding: 0;
  margin: 0;
  color: #ffffff;
  background: #111318;
  overflow: hidden;
}

#bottomboxes a {
  color: #cbdeff;
  font-weight: bold;
}

.userbox, .userbox-bottom {
  float: left;
  padding-bottom: 32767px;
  margin-bottom: -32757px;
}

.userbox-inner {
  padding-left:10px;
  padding-right:10px;
}

.userbox-bottom-inner {
  padding: 20px;
  padding-bottom: 32767px;
  margin-bottom: -32767px;
  background: #111318;
}

.width25 {width: 25%;}
.width33 {width: 33.3333%;}
.width50 {width: 50%;}
.width100 {width:100%;}

#footer {
 text-align:left;
 font-size:10px;
 color:#FFFFFF;
  padding: 5px 10px 5px 10px;
  margin: 10px;  
  clear: both;
  background: url(../images/footer.GIF) repeat-x;
background-color: #2573E1;
}
#footer a{
 color:#FFFFFF;
}

#footer a:hover{
 color: #ffffff;
}
/* Header */

#header-wrapper {
  height: 100px;
  background: url(../images/header-bg.png) no-repeat; 
}

#site-logo {
  padding: 0px 0 0 20px;
  height: 100px;
  float: left;
  border: 0;
}
#site-lang {
font-size:11px;
	 text-align:right;
	 margin-right:10px; 
}
#site-lang a{
	color:#125CA6;
	text-decoration:none;
}
#site-lang a:hover{
	color:#125CA6;
	
	text-decoration:none;
}

#site-name {
  padding: 17px 0 0 10px;
  margin: 0;
  float: left;
  text-align: right;
}

#site-name a {
  font-size: 54px;
  font-weight:900;
  line-height: 54px;
  color: #ff6c00;
  text-decoration: none;
}

.site-slogan-logo h2 {
  margin-top: -20px;
  padding: 0;
  font-size: 12px;
  line-height: 12px;
  text-align: right;
}


.site-slogan h2 {
  margin-top: 0;
  padding: 0;
  font-size: 12px;
  line-height: 12px;
  text-align: right;
}

#search-box {
  float: right;
  padding: 40px 20px 0 0;
} 

/* Side Menu */

.sidebox-content ul.menu, .sidebox-content ul.menu li {
  position: relative; 
  margin: 0;
  padding: 0;
  list-style-image: none;
  list-style: none;
  list-style-type: none;
}

.sidebox-content ul.menu li {
  padding: 0;
  margin-left: 10px;
  /*background: url(../images/li-bg.png) repeat-x bottom;*/
}

.sidebox-content ul.menu li a {
  display: block;
  padding: 5px 5px 5px 2px;
  font-weight: bold;
}

.sidebox-content ul.menu li a:hover {
  color: #ffffff;
  font-weight: bold;
  /*background: #303948 url(../images/primary-bg.png) repeat-x;*/
  text-decoration:none;
}

.sidebox-content ul.menu li a {
  font-weight: bold;
}

.sidebox-content ul.menu li ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebox-content ul.menu li ul li {
  margin: 0;
  margin-left: 10px;
  padding: 0;
  list-style: none;
  background: url();
}

.sidebox-content ul.menu li ul li a {
  font-weight: normal;
}

.sidebox-content ul.menu li ul li a.active {
  color: #2f3746;
  font-weight: bold;
}

.sidebox-content ul.menu li ul li a.active:hover {
  color: #ffffff;
  font-weight: bold;
}

/* Misc Elements */

.item-list {
  color: #999999;
}

.item-list ul {
  padding: 10px 0;
  margin: 0;
}

.item-list ul li {
  padding: 0 0 5px 5px;
  margin: 0;
  list-style:none;
  font-size: 0.9em;
}

.item-list ul li a {
  font-size: 1.0em;
  font-weight: bold;
}

.sidebox-content .item-list ul {
  padding: 10px 0;
  margin: 0;
}

.submitted {
  font-size: 0.009em;
  color:#FFFFFF;
  display:none;
}
/*
.title, .node-title {
  padding: 0;
  margin: 0;
  font-family:"Franklin Gothic Demi Cond";
  font-size: 2.0em;
  line-height: 1.5em;
   border-bottom:1px dotted #CCCCCC;
}
*/
/*add nanang*/
.content .titlehome{
  font-family: "Times New Roman", Times, serif;
  font-size: 2.0em;
  line-height: 1.5em;
  font-weight: bold;
  border-bottom:1px dotted #CCCCCC;
}
/*-------------------*/
.title a {
  text-decoration: none;
}

.node {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #a9c9ff;
  /*background: url(../images/node-bg.png) repeat-x bottom;*/
}

.form-text {
  border: 1px solid #4d5b78;
}

.form-submit {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  height: 23px;
  border: 1px outset #000000;
  background: #2f3847;
}

.breadcrumb {
  /*float: left;
  font-weight: bold;*/
  display:none;
}

.block-region {
  padding: 10px;
  border: 2px dashed #333333;
  background:#FFFFFF;
}

.links {
  clear: both;
  font-size: 1.0em;
  font-weight: bold;
}

.more-link a {
  padding: 0 2px;
  font-weight: bold;
  border: 1px solid #2d3644;
  background: #c0d7fd;
}

#search-block-form {
  width: 100%;
  text-align: center;
}

/* Comments */

#comments {
}

#comments .submitted  {
  color: #2d3644;
}

.comment {
  padding: 10px;
  margin-bottom: 10px;
  color: #363636;
  border: 1px solid #2d3644;
  background: #c0d7fd;
}

.indented {
  margin-left: 0px;
}

/* Aggregator */

.feed-url {
  padding: 10px 0;
  font-size: 0.8em;
}

.feed-updated {
  padding: 0 0 10px 0;
  font-size: 0.8em;
}

.feed-item-date {
  font-size: 0.8em;
  color:#999999;
}

.feed-item-body a {
  font-weight: bold;
}

/* Poll */

.poll {
  padding: 5px 0;
}

.poll .bar {
  height: 1.0em;
  background: url(../images/poll-bar.png) repeat-x;
}

.poll .bar .foreground {
  height: 1.0em;
  background: url(../images/poll-foreground.png) repeat-x;
}

.sidebox-content .poll .title {
  font-size: 1.0em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

/* Admin Styles */


div.admin {
}

div.admin .left {
  float: left;
  margin: 0;
  width: 49%;
}

div.admin .right {
  float: left;
  margin: 0;
  width: 49%;
}

/* Primary Links */

#primary-links h2 {
  display:none;
}

#primary-links {
  border-bottom: 3px solid #d9dbde;
}

#primary-links, #primary-links ul {
  padding: 0;
  margin: 0;
  line-height: 30px;
  list-style: none;
  background: url(../images/primary-bg.png) repeat-x;
}

#primary-links a {
  display: block;
  padding: 0 11px 0 0;
  font-weight: bold;
  color: #171c23;
  text-decoration: none;
  background: url(../images/primary-r.png) right top no-repeat;
}

#primary-links li {
  float: left;
  list-style: none;
  padding: 0 0 0 11px;
  background: url(../images/primary-l.png) left top no-repeat;
}

#primary-links li:hover a {
  color: #303a49;
  background: url(../images/primary-hover-r.png) right top no-repeat;
}

#primary-links li:hover {
  background: url(../images/primary-hover-l.png) left top no-repeat;
}

#primary-links li:hover li a, #primary-links li:hover li {
  color: #171c23;
  background: #aebfd8;
}

#primary-links li ul {
  margin-left: -10px;
  position: absolute;
  width: 210px;
  left: -999em;
  border: 3px solid #d9dbde;
  background: #aebfd8;
}

#primary-links li:hover ul, #primary-links li.sfhover ul {
  left: auto;
}

#primary-links li ul li a, #primary-links li ul li {
  padding: 0 0 0 5px;
  margin: 0;
  width: 200px;
  background: #aebfd8;
}

#primary-links li ul li a:hover, #primary-links li ul li:hover {
  color: #ffffff;
  background: #3b475a;
}

/*add nanang- menu header */
ul.menu1 {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:12px;
/*background:url(../images/bg.GIF) repeat-x top left;*/

border:0px solid #000;
margin:5px 0 0 0 ;

padding:0;
}

ul.menu1 li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu1 li a {
float:left;
color:#AECCFF;
text-decoration:none;
height:33px;line-height:33px;
padding:0 20px;
}

ul.menu1 li a:hover,.current {
color:#fff;
/*background:url(../images/bg.GIF) repeat-x top left;*/
}

ul.menu1 .current a {
color:#fff;
/*font-weight:700;*/
}


/*RED*/
ul.menu1.red{
background-color:#125CA6;
background:url(../images/bg.GIF) repeat-x top left;
}
ul.menu1.red li a:hover, .menu1.red li.current {
background:url(../images/bg2.GIF) repeat-x top left;
background-color:#FF9600;
}

/*nanang - Samuel International*/
#menuhead1 {
background-color:transparent;
	/*background: #333;*/
	float: left;
	list-style: none;
	margin: 20px;
	padding: 0;
	width: 100%;
}
/*---tab-------*/
#tabs_content{border-bottom: 1px dotted #0C70BC;width: 100%; padding-bottom:10px;padding-top:10px; }
#parent_tab{border: solid 1px #FFFFFF;width: 100%; margin-top:10px;}
#tabs {display: block;float: left;width: 100%;}
.panel {border: solid 1px #0C70BC;border-top: none;background-color: #FFFFFF;padding: 10px;width: 454px;overflow: auto;clear: left;}
.tab_bdr{padding: 0px;width: 100%;border: 0px;height: 1px;margin:0px;background: #0C70BC;clear: left;font-size: 0px;}
.tab{font-family:tahoma; FONT-SIZE: 11px;background:url(../images/tab_img.JPG) repeat-x top left;color:#FFFFFF; font-weight:bold;cursor:pointer;border: solid 1px #0C70BC;height:20px;padding-top:3px;margin:0px;width:116px; float:left; text-decoration:none;}
.tab_sel{font-family:tahoma; FONT-SIZE: 11px;background:#FFFFFF;color:#0C70BE;font-weight:bold;cursor:pointer;border: solid 1px #0C70BC;height:20px;padding-top:3px;margin:0px;width:116px; float:left; text-decoration:none;}
/*---lang----*/
#contentd {
	width: 409px; height:60px; font-family:Sans-serif;font-size:11px;display:block; float:right; text-align:right;
	 /*margin-right:100px;*/ }
ul#navaa {	
	top: 10px;
	list-style: none;
	margin: 0;
	padding-left: 235px; }
ul#navaa li {
	margin-left: 10px;
	float: left;  }
ul#navaa li a.active {
   text-decoration:none;
   font-weight:bold;
   color:#3333FF;
	
	
	}
/*-----login page.tpl-----*/
#login_up_box{ width: 420px; font-family:Sans-serif;font-size:11px;display:block; float:right; padding-right:10px;}
#login_up_box a{color:#FF9900; font-weight:bold;}
#login_up_box a:hover{color:#FFFFFF; font-weight:bold;}
#login_header_box{background: #2055A3 url(../images/header_login.gif) no-repeat; height:24px;}
#navlist{
	margin-left: 50px;
	padding-top:5px;
	padding-left: 0px;
	list-style: none;
}
#navlist2{
margin-top:5px;
	text-align:right;
}

#navlist li{
    margin-left:10px;
	
	padding-left: 10px;
	background-image: url(../images/arrow3.gif);
	background-repeat: no-repeat;
	background-position: 0 .4em;
	display:inline;
}
/*tab Market*/
#tabs_content1{border-bottom: 1px dotted #0C70BC;width: 100%; padding-bottom:10px;padding-top:10px; }
#parent_tab1{border: solid 1px #FFFFFF;width: 50px; margin-top:10px;}
#tabs1 {display: block;float: left;width: 200px;}
.panela {border: solid 1px #0C70BC;background-color: #FFFFFF;padding: 10px;width: 178px;overflow: auto;clear: left;}
.tab_bdr1{padding: 0px;width: 100%;border: 0px;height: 1px;margin:0px;background: #0C70BC;clear: left;font-size: 0px;}
.taba{font-family:tahoma; FONT-SIZE: 11px;background:url(../images/tab_market.JPG) repeat-x top left;color:#FFFFFF; font-weight:bold;cursor:pointer;border: solid 1px #0C70BC;height:30px;padding-top:3px;margin:0px;width:47px; float:left; text-decoration:none;}
.tab_sel1{font-family:tahoma; FONT-SIZE: 11px;background:#FFFFFF;color:#0C70BE;font-weight:bold;cursor:pointer;border: solid 1px #0C70BC;height:30px;padding-top:3px;margin:0px;width:47px; float:left; text-decoration:none;}


legend a{

    font-size: 12px;
    
    }
.register a{
	color:#FF9900;
}
.register a:hover{
	color:#5493ff;
}
form, textarea, input { font-size:inherit; font-family: Arial, Helvetica, sans-serif; }
.border_solid { border:1px solid #999 }
.border_solid:focus { border:1px solid #f90;background:#ffc }
.button {background-color: #FF9600; border:2px solid #999; cursor:pointer; padding:2px 10px; font-weight:bold}
.button:hover {background-color: #FFF; border:2px solid #FF9600; color:#000}
hr {background-color:#999; height:1px; border:none;}
.button2 {border:2px solid #fff;color:#fff; background-color: #CC4400; border:none; cursor:pointer; font-weight:bold}
a.button2 {border:2px solid #fff; padding:3px 10px;line-height:25px;}
.button2:focus {color:#fff;text-decoration:underline;background:#C00}
input.button2 { padding:2px 10px}
.button2:hover {color:#fff; text-decoration:underline}
.button2:visited {color:#fff}
.step_bar{ margin:0;padding-left:30px;padding-bottom:20px;padding-top:20px}
.step_bar li {padding-bottom:10px;}
form h2 {
    font: 13px Tahoma, Arial, Helvetica, sans-serif;
	font-weight:bold;
    text-align: center;
    letter-spacing: .25em;
    }

.lbl {
    width: 48%;
    float: left;
    text-align: right;
    line-height: 1.2em;
    margin-bottom: 0.2em;
    }

.npt {
    width: 48%;
    float: right;
    text-align: left;
    line-height: 1.2em;
    margin-bottom: 0.2em;
    }

.npt input {
    width: 8em;
    }

br {
    clear: both;
    }

.clearing {
    font-size: 0;
    clear: both;
    }
.oddeven {
  border-collapse: collapse;

}
.oddeven tr {
  background:#fff;
}
.oddeven tr:nth-child(even) {
   background:#e7e7e7;
}
.oddeven tr td{
  padding: 4px;
}

.oddeven,.clear { counter-reset: line-number; }
.oddeven td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em; }
.clear tr:nth-child(even){
  background:#fff;
}


/* Modal styles */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  /* overflow: auto; */
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  animation: fadeIn 0.5s;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  /* 15% from the top and centered */
  padding: 10px 20px 20px 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 50%;
  /* Could be more or less, depending on screen size */
  animation: slideDown 0.5s;
  opacity: 0.9;
}

.modal-content h1 {
color: #1428A0;
font-weight: bold;
}

.modal-content-title {
padding: 0px 150px;
color: white;
}

.modal-content-choice {
text-align: center;     
}

.modal-content-choice .citizenship {
display: inline-block;
margin: 10px 30px;
}

.citizenship img{
display: block;
width: 140ox;
height: 115px;
text-align: center;

margin: 0px auto 17px auto;
}

.citizenship .button3 {
background-color: #CC4400;
margin-top: 20px;
padding: 6px 50px;
border: none;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}

.citizenship .button3:hover {
text-decoration: underline;
}

.modal-content-wrapper {
text-align: center;
margin-top: 20px;
}

.modal-content-wrapper h2 {
background-color: #1428A0;
padding: 6px 0px;
margin: 20px;
border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

@keyframes fadeIn {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

@keyframes slideDown {
  from {
      transform: translateY(-50px);
      opacity: 0;
  }

  to {
      transform: translateY(0);
      opacity: 1;
  }
}


/* Modal styles */
.image-modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
/* overflow: auto; */
/* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
animation: fadeIn 0.5s;
}

.image-modal-content {
background-color: #fefefe;
  margin: 10% auto;
  /* 15% from the top and centered */
  padding: 10px 20px 20px 20px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 50%;
  /* Could be more or less, depending on screen size */
  animation: slideDown 0.5s;
  opacity: 0.9;
}

.image-modal-content img {
cursor: pointer;
}