body {color: #000; margin: 0px; font-family: sans-serif; font-size: 15px; font-weight: 300; line-height: 30px; margin: 0px 0px 0px 0px; }



html {  scroll-behavior: smooth;}



body, html {height:100%;}



strong {font-weight:600;}





a{transition: all 0.5s ease-in 0s; text-decoration:none!important; outline:none; color: #000;}



a:focus, a:active,  a, focus, select {border:0px; outline:none;}



.clear{clear:both;}



p{margin-top:0px; text-align: left;}



img {border:0px;}



form{margin:0px;}



input {outline:none;}



* {box-sizing:border-box; }





/* .map {background-image:url(../images/map.jpg); background-position:left top; background-size:cover; width:100%; height:100%;   } */

.map {background-position:left top; background-size:cover; width:100%; height:100%;  }



.logo {display:inline-block; left:90px; top:20px; position:fixed; /* background-color:rgb(255,255,255,0.8); */ background-color: #222; padding:10px 30px; border-radius:0px 8px 8px 0px;}



.logo a {display:block;}



.logo a img {display:block; width:120px;}



.top-right {display:inline-block; right:20px; top:10px; position:fixed;}

.top-right a {display:inline-block; width:36px; height:36px; background-color:#333333; border-radius:5px; }

.top-right a img {display:block; width:100%; padding:6px; transition: all 0.5s ease-in 0s;}

.top-right a:hover img {padding:0px;}

.top-right a, .top-right .btn {

    margin: 2px;

    display: inline-block;

    width: 36px;

    height: 36px;

    background-color:#333333;

    border-radius: 5px;

    cursor: pointer;

}

.top-right a img, .top-right .btn img

 {

    display: block;

    width: 100%;

    padding: 6px;

    transition: all 0.5s ease-in 0s;

}

.top-right .btn:hover img {padding:0px;}



.compass {display:inline-block; left:10px; bottom:10px; position:fixed; }



.compass a {display:block;}



.compass a img {display:block; width:64px; padding:6px;	transition: all 0.5s ease-in 0s;}



.compass:hover img {padding:0px;} 



.expand {display:inline-block; right:20px; bottom:20px; position:fixed; background-color:rgb(34,34,34,0.8); border-radius:5px;}



.expand a {display:block;}



.expand a img {display:block; width:44px; padding:6px;	transition: all 0.5s ease-in 0s;}



.expand:hover img {padding:1px;} 



.plus-minus {display:block; width:40px; position:fixed; right:20px; top:46%; background-image:url(../images/plus-minus-bg.png); background-size:cover; }



.plus-minus a {display:block; height:45px; }



.plus-minus a img {display:block; width:100%; padding:13px; margin-top:6px; transition: all 0.5s ease-in 0s;}

.plus-minus a:hover img {padding:10px;}







.submenu {display:none;}



.projectlabel{

  color: #fff;

  font-size: 12px;

  display: inline-block;

}





#download-submenu  {display:none; background-color:#333333; position:absolute; width:120px; margin-left:-40px; border-radius:5px; color: #fff;}

#download-submenu a {display:block; padding:10px; background-color:transparent; color: #fff; width:100%; line-height:16px; font-size:13px; margin:0px;  }

#download-submenu a:hover {background-color:#eee; color:#000;}





/* .bottom-links {position:fixed; left: 18px; top: 170px; display: none;}

.bottom-links a {display:inline-block; background-color:rgb(0,0,0,0.7); border-radius:7px; color:#fff; padding:5px 10px 5px 5px; font-size:12px; font-weight:500; line-height:25px; width:auto; text-align:left; float:left; margin:1px; }

.bottom-links a img {float:left; width:25px; margin-right: 0px; margin-left: 3px;}

.bottom-links a span {margin-left: 5px;}

.bottom-links a.dark {background-color:rgb(34,34,34,0.8); border: 2px solid white; padding: 3px 10px 3px 5px;}

.bottom-links .btn2.active, .bottom-links .btn2.active:hover {background-color: #fff; color: #000;} */





/* .bottom-links {position:fixed; left: 18px; top: 170px; display: none;}

.bottom-links a {display:inline-block; background-color:rgb(0,0,0,0.7); border-radius:7px; color:#fff; padding:5px 10px 5px 5px; font-size:12px; font-weight:500; line-height:25px; width:auto; text-align:left; float:left; margin:1px; }

.bottom-links a img {float:left; width:25px; margin-right: 0px; margin-left: 3px;}

.bottom-links a span {margin-left: 5px;}

.bottom-links a.dark {background-color:rgb(34,34,34,0.8); border: 2px solid white; padding: 3px 10px 3px 5px;}

.bottom-links .btn2.active, .bottom-links .btn2.active:hover {background-color: #fff; color: #000;}

.text-span{display: none; opacity: 1;} */

/* .btn2:hover .text-span {display: inline-block;}  */



.bottom-links {position:fixed; left:18px; bottom:75px; display: block;}

.bottom-links a {display:block; background-color:rgb(0,0,0,0.7); width:31px; height:31px; border-radius:10px; color:#fff; padding:3px; font-size:0px; font-weight:500; line-height:25px;  text-align:left;  margin:1px; overflow:hidden; }

.bottom-links a img {float:left; width:25px; margin-right:0px; margin-top:0px;}

.bottom-links a.dark {background-color:rgb(34,34,34,0.8);}

.bottom-links a:hover { font-size:12px; color:#fff; width:auto; padding:3px 12px 3px 3px;}

.bottom-links .btn2.active img, .bottom-links a:hover img { margin-right:5px; }

.bottom-links .btn2.active, .bottom-links .btn2.active:hover {background-color: #fff; color: #000;}

.bottom-links .btn2.active {width:auto; font-size:12px; padding:3px 12px 3px 3px;}







.bottom-links-rut {position:fixed; left: 10px; bottom: 55px; display: none;}

.bottom-links-rut a {display:inline-block; background-color:rgb(0,0,0,0.7); border-radius:7px; color:#fff; padding:5px 10px 5px 5px; font-size:18px; font-weight:500; line-height:25px; width:auto; text-align:left; float:left; margin:1px; }

.bottom-links-rut a img {float:left; width:25px; margin-right: 0px; margin-left: 3px;}

.bottom-links-rut a span {margin-left: 5px;}

.bottom-links-rut a.dark {background-color:rgb(34,34,34,0.8); border: 2px solid white; padding: 3px 10px 3px 5px;}

.bottom-links-rut .btn2.active, .bottom-links-rut .btn2.active:hover {background-color: #fff; color: #000;}





.copyright {position:fixed; right:0px; bottom:0px; color:#fff; font-size:11px; line-height:11px; padding-right:10px; background-color:rgb(0,0,0,0.7); padding:7px 10px; border-radius:10px 0px 0px 0px;}



.copyright a {color:#fff; border-bottom:1px solid #fff;}





#menu {position:fixed; left:20px; top:90px; z-index:1; width:250px; max-height: 420px;

    overflow-y: auto;

    scrollbar-width: none;}





/* 



.menu {

  margin: 0;

  width: 180px;

  height:auto;

  transition: all 0.7s;

  position:fixed;

  z-index:1;

  left:20px;

  top:78px;

  display:block;

}



.menu a {

  display:block;

  background-color:rgb(255,255,255,0.8);

  color:#000;

  font-size:12px;

  line-height:25px;

  padding:3px 10px;

  border-radius:7px;

  margin:3px 0px;

  transition: all 0.7s;

  font-weight:400;

  font-size:12px;

}

*/



 .sub-menu {

  margin-top: 5px;

  /* width: 250px; */

  height:auto;

  transition: all 0.7s;

  display:none;

  background-color:#333333;

  border-radius:7px;

  overflow-y: scroll;

  max-height: 310px;

  }

  

  /* Hide scrollbar for Chrome, Safari and Opera */

  .sub-menu::-webkit-scrollbar {

      display: none;

  }

  

  /* Hide scrollbar for IE, Edge and Firefox */

  .sub-menu {

    -ms-overflow-style: none;  /* IE and Edge */

    scrollbar-width: none;  /* Firefox */

  }



/* .menu-with-sub-menu {

  background-image:url(../images/menu-arrow.png);

  background-repeat:no-repeat;

  background-position:95% center;

}





.menu-with-sub-menu.open {

  background-image:url(../images/menu-arrow2.png);

  background-repeat:no-repeat;

  background-position:95% center;

} */



/* menu */







/* responsive menu */



.responsive-menu-icon { display:none;}





.responsive-menu-icon {

    display: block;

    cursor: pointer;

   /*  background-color:rgb(34,34,34,0.8); */

    background-color: #222;

    width: 70px;

    height: 65px;

    position: fixed;

    left: 0;

    top: 0px;

    padding: 14px 25px;

    box-sizing: border-box;

    z-index: 10000;

    display: block;

    z-index: 1000;

	margin:20px;

	border-radius:8px 0px 0px 8px;

/* 	border-right:1px solid #555; */

}



.bar1, .bar2, .bar3 {

    width: 30px;

    height: 2px;

    background-color: #fff;

    margin: 8px 0;

    transition: 0.4s;

}



.bar2 { width:30px;}



.bar3 { width:30px;}



.change .bar1 {}



.change .bar2 {width: 20px; margin-left:5px;}



.change .bar3 {width: 13px; margin-left:8px;}





/* responsive menu */























/* accordion */



button.accordion {

    color: #fff;

    cursor: pointer;

    padding: 8px 10px;

    width: 100%;

    border: none;

    text-align: left;

    outline: none;

    font-size: 12px;

    transition: 0.4s;

	background-color:transparent;

	font-weight:400;

	border-radius:7px;

}



.course-accordion span {display:block; width:100%; } 



button.accordion.active {

    background-color:transparent;

}



button.accordion:hover {

    background-color:#222;

}



button.accordion:after {

    content: '';

	display:block;

    float: right;

	width:10px;

	height:6px;

	background-image:url(../images/menu-arrow.png);

	background-repeat:no-repeat;

    margin-top: 7px;

	margin-right:5px;

}



button.accordion.active:after {

    content: '';

	display:block;

    float: right;

	width:10px;

	height:6px;

	background-image:url(../images/menu-arrow2.png);

	background-repeat:no-repeat;

    margin-left: 7px;

	margin-right:5px;

}



div.panel {

    padding:0px;

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.2s ease-out;

}



div.panel a {

	display:block;

	font-size:12px;

	line-height:20px;

	padding:5px 10px 5px 25px;

	margin:0px;

	margin:0px 5px;

	border-radius:7px;

	/* background-image:url(../images/location-pointer.png); */

	background-repeat:no-repeat;

	background-size:12px auto;

	background-position:5px center;

	background-color:transparent;

    color:#fff;

}



div.panel a:hover {

   background-color:#000;

}



.btn.active, .btn.active:hover {

	/* background-color:#1f4399; */

    background-color: rgb(255,255,255,0.8);

	color: #000;;

	font-weight:500;



}



/* accordion */

























/* Modal Popup */

#pano-image-modal,

#about-ril-modal,

#about-met-modal,

#about-metropolis-modal,

#about-us-modal,

#key-feature-Modal {

  background-color: rgb(0, 0, 0.0, 0.5)

}







.modal-window {

  position: fixed;

  background-color: rgba(255, 255, 255, 0.25);

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 999;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  transition: all 0.3s;

}



.modal-window:target {

  visibility: visible;

  opacity: 1;

  pointer-events: auto;

}



.modal-window>div {

  width: 400px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  padding: 0;

  color: #000;

  background-color: #fff;

}



.modal-window>div h2 {

  color: #000;

}



.modal-window header {

  font-weight: bold;

}



.modal-window h1 {

  font-size: 150%;

  margin: 0 0 15px;

}



.modal-close {

  color: #fff;

  line-height: 50px;

  font-size: 80%;

  position: absolute;

  right: 0;

  text-align: center;

  top: 0;

  width: 70px;

  text-decoration: none;

}



.modal-close:hover {

  color: black;

}



.modal-window strong {

  font-weight: 600;

}





#pano-image-modal>div,

#about-ril-modal>div,

#about-met-modal>div,

#about-metropolis-modal>div,

#about-us-modal>div {

  width: 80%;

}



#pano-image-modal .modal-close,

#about-ril-modal .modal-close,

#about-met-modal .modal-close,

#about-metropolis-modal .modal-close,

#about-us-modal .modal-close {

  background-color: #1f4399;

  width: 40px;

  height: 40px;

  line-height: 40px;

  color: #fff;

  padding: 0px;

}





#key-feature-Modal>div {

  width: 800px;

}



#key-feature-Modal .modal-close {

  background-color: #1f4399;

  width: 40px;

  height: 40px;

  line-height: 40px;

  color: #fff;

  padding: 0px;

}





/* Modal Popup */









/* sidenav */



.sidenav {

  height: 88%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #222;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 30px;

  

}



.sidenav a {

  padding: 5px 0px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #f1f1f1;

}



.sidenav .closebtn {

  position: absolute;

  top: 0;

  right: 10px;

  font-size: 30px;

  margin-left: 0px;

  color:#fff;

}



.sidenav-content-holder {

 padding:0px 20px;

}



.sidenav-content-holder a {

  color:#fff;

  font-size:14px;

  margin:0px;

  border:1px solid #666;

  padding:8px 7px;

  border-radius:6px;

  line-height:15px;

  margin-bottom:3px;

}



.sidenav-content-holder a:hover {

  border:1px solid #fff;

  font-weight:600;

}



.sidenav-link.active {

  border:1px solid #fff;

  font-weight:600;

}



.sidenav-content-holder h4 {

 color:#fff;

 margin:0px 0px 10px 0px;

 font-weight:500;

 line-height:130%;

}



@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}



/* sidenav */













/* [Object] Modal

 * =============================== */

 

.hline {border-bottom:1px dotted #ccc; display:block; width:100%; height:1px; margin-bottom:20px; }

 

.modal-content-holder {width:100%; height:85%; overflow-y: scroll; display:block; padding-right:20px;}



.modal-content-holder p {font-size:14px; line-height:160%;}



.modal-content-holder h4 {margin-bottom:0px;}

 

.modal {

  opacity: 0;

  visibility: hidden;

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  text-align: left;

  background: rgba(0,0,0, .6);

  transition: opacity .25s ease;

  z-index: 9999;

}



.modal__bg {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  cursor: pointer;

}



.modal-state {

  display: none;

}



.modal-state:checked + .modal {

  opacity: 1;

  visibility: visible;

}



.modal-state:checked + .modal .modal__inner {

  top: 0;

}



.modal__inner {

  transition: top .25s ease;

  position: absolute;

  top: -20%;

  right: 0;

  bottom: 0;

  left: 0;

  width: 90%;

  margin: auto;

  overflow: auto;

  background: #111;

  border-radius: 10px;

  padding: 1em 2em;

  height: 80%;

  color:#fff;

}



.modal__close {

  position: absolute;

  right: 1em;

  top: 1em;

  width: 1.1em;

  height: 1.1em;

  cursor: pointer;

}



.modal__close:after,

.modal__close:before {

  content: '';

  position: absolute;

  width: 2px;

  height: 1.5em;

  background: #999;

  display: block;

  transform: rotate(45deg);

  left: 50%;

  margin: -3px 0 0 -1px;

  top: 0;

}



.modal__close:hover:after,

.modal__close:hover:before {

  background: #fff;

}



.modal__close:before {

  transform: rotate(-45deg);

}



@media screen and (max-width: 768px) {

	

  .modal__inner {

    width: 90%;

    height: 90%;

    box-sizing: border-box;

  }

}