body {color: #000; margin: 0px; font-family: poppins; 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:20px; top:10px; position:fixed; background-color:rgb(255,255,255,0.8); padding:10px 30px; border-radius:8px;}

.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:42px; height:42px; background-color:rgb(255,255,255,0.8); border-radius:5px; float:left; margin-left:7px;}

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

.top-right a: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:30px; 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;}



/* .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;}


.menu {
  margin: 0;
  width: 180px;
  height:auto;
  transition: all 0.7s;
  position:fixed;
  z-index:1;
  left:20px;
  top:115px;
  display:block;
}


.menu a {
  display:block;
  background-color:rgb(255,255,255,0.8);
  color:#000;
  font-size:12px;
  line-height:20px;
  padding:3px 10px;
  border-radius:7px;
  margin:3px 0px;
  transition: all 0.7s;
  font-weight:400;
  font-size:12px;
}

.sub-menu {
  margin: 0;
  width: 250px;
  height:auto;
  transition: all 0.7s;
  display:none;
  background-color:rgb(34,34,34,0.8);
  border-radius:7px;
}

.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 */




.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;}











/* responsive menu */

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


.responsive-menu-icon {
    display: block;
    cursor: pointer;
    background-color:rgb(34,34,34,0.8);
    width: 70px;
    height: 70px;
    position: fixed;
    left: 0;
    top: 0px;
    padding: 17px 17px;
    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:18px;}

.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-family:poppins;
	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;
}

div.panel a:hover {
   background-color:#000;
}

.btn.active, .btn.active:hover {
	background-color:#1f4399;
	color:#fff;
	font-weight:500;

}

/* accordion */












/* Modal Popup */

#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;
}



#about-ril-modal>div,
#about-met-modal>div,
#about-metropolis-modal>div,
#about-us-modal>div {
  width: 800px;
}

#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: auto;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1f4399;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 30px;
  padding-bottom: 12px;
}

.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: 50px;
  color:#fff;
}

.sidenav-content-holder {
 padding:0px 20px;
}

.sidenav-content-holder a {
  color:#fff;
  font-size:12px;
  margin:0px;
  border:1px solid #4b71cd;
  padding:4px 5px;
  border-radius:6px;
  line-height:15px;
  margin-bottom:3px;
  font-weight: 600;
}

.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 */