/*---------------------------------------------------------------------
    File Name: style.css
---------------------------------------------------------------------*/

/*---------------------------------------------------------------------
    import Fonts
---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

/*****----------------------------------------
     1) font-family: 'Rajdhani', sans-serif;
     2) font-family: 'Poppins', sans-serif;
----------------------------------------*****/

/*---------------------------------------------------------------------
    import Filespop
---------------------------------------------------------------------*/
@import url(font-awesome.min.css);
/*---------------------------------------------------------------------
    skeleton
---------------------------------------------------------------------1*/

.orange_color {
	 color: #ff0000;
	}
body {
	 color: black;
	 font-size: 14px;
	 font-family: 'poppins', sans-serif;
	 margin: 0px;
   padding: 0px;
	 font-weight: normal;
	}
#popup {
      background-color: #f8f8f8;
      position: absolute;
      display: none;
	  margin:0 auto;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 9999;
    }
    
#popimg {
	width: 100%;
	height: auto;
}

.closeme {
      position: absolute; 
      top: 10px;
      right: 15px;
      cursor: pointer;
    }
 p {
		margin: 0px;
		font-weight: 300;
		font-size: 17px;
		line-height: 30px;
		color: #212222;
	}

a {
	 color: #1E71D5;
	 text-decoration: none;
	 outline: none !important;
	}

a,
.btn {
	 text-decoration: none !important;
	 outline: none !important;
	 -webkit-transition: all .3s ease-in-out;
	 -moz-transition: all .3s ease-in-out;
	 -ms-transition: all .3s ease-in-out;
	 -o-transition: all .3s ease-in-out;
	 transition: all .3s ease-in-out;
	}

#banner {
	 max-width: 100%;
	 height: auto;
	 min-width: 100%;
    min-height: 100%;
	}


:focus {
	 outline: 0;
	}

.btn-custom {
	 margin-top: 20px;
	 background-color: transparent !important;
	 border: 2px solid #ddd;
	 padding: 12px 40px;
	 font-size: 16px;
	}

.lead {
	 font-size: 18px;
	 line-height: 30px;
	 color: #767676;
	 margin: 0;
	 padding: 0;
	}

.form-control:focus {
	 border-color: #ffffff !important;
	 box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
	}


.menu {
	display: inline-flex;
	margin: 0;
}
.carousel_arrows {
	position:absolute;
	 top:40%;
	 left:-1%;
}
.welcome_pics {
	position:relative;
	left:50px;
}
.arrows {
	 width: 40px;
	 height: 50px;
	 background: #fffdfd;
	 opacity: 1;
	 font-size: 30px;
	 color: #a91111;
}
.prev:hover, .next:hover,
.prev:focus, .next:hover {
	background: #43ADEE;
	color: #fff
}

a.prev {
	position: absolute;
	left: 40px;
	top: 25%;
 }
a.next {
	position: absolute;
	left: 431px;
	top: 35%;
}

.fa {
	padding-left:15px;
	color:green;
}

.title_main {
		display: flex;
}
.title_main img {
	max-width: 100%;
    height: auto;
}
.images_corner{
		 display: flex;
		 width:50%;
		 background-color: green;
		 padding: 3% 1% 4% 6%;
}
.images_corner img {
	height: auto;
	display: flex;
}

.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 26px;
	font-size: 17px;
}

.topnav a:hover {
	background-color: green;
	color: black;
}

.topnav a.active {
	background-color: #04AA6D;
	color: white;
}

.topnav .icon {
	display: none;
}
.welcome_title {
	padding-top:60px;
	padding-left:40px;
	width:50%;
}
.welcome_title h1 {
	font-size:40px;
}
.welcome_title h2 {
	font-size:60px;
	padding: 0px;
	margin: 0px;
	font-weight: bold;
}
.welcome_text {
	padding:40px;
 }
.welcome_box {
	 display:inline-block;
	 width:40%;
	 height:40%;
	 vertical-align: top;
}
#srl {
	display:inline;
	 margin-left:200px;
}
#enl {
	display:inline;
}

.button_section {
 padding-left:60px;
 padding-bottom:100px;
}
.button_section a {
	 width: 180px;
	 height: 55px;
	 float: left;
	 background: #000;
	 text-align: center;
	 line-height: 55px;
	 color: #fff;
	 margin-right: 30px;
	 font-weight: 300;
	 font-size: 16px;
}

.button_section a:hover,
.button_section a:focus {
 background: #ff0000 !important;
	 color: #fff;
}

.crater_title {
	 padding:80px 0 20px 80px;
}
.crater_title h3 {
	 font-size: 60px;
	 font-weight: 600;
}
.crater_text {
	 overflow:hidden;
	 width:80%;
	 margin:auto;
}

.crater_text img {
	 padding:0 30px 40px 10px;
	 float:left;
}
.crater_text h4 {
	 margin: 20px;
	 font-size: 25px;
	 font-weight: 400;
}
.crater_text p {
		font-size: 17px;
		padding:0 30px 10px 10px;
		line-height: 30px;
		text-align: justify;
}
.crater_text a {
	 font-weight: 400;
	 color: red;
}
.map-responsive{
    padding-bottom:18%;
    position:relative;
}

.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.cpy {
    text-align: center;
}


.cpy p {
    font-size: 14px;
    padding: 10px 0;
    font-weight: 400;
}

/* what to do section  */
.what_box {
	overflow:hidden;
	width:80%;
	margin:auto;
	padding-top:2px;
	padding-left:20px;
	padding-right:10px;
}
.short_version_img_box {
    text-align:center;
}ma
.short_version_img_box img {
    width:600px;
}

.what_txt_box {
	overflow:hidden;
	padding:5px 20px 20px 20px;
	margin:5px 10px 10px 10px;
}
.what_txt_box h4 {
	margin: 12px;
	font-size:30px;
	letter-spacing:1.2px;
	font-weight: 500;
}

.cpy p a:hover,
.cpy p a:focus {
	color: #e71717;
}

@media only screen and (max-width: 600px) {
 #banner {
	 display: block;
 }
 .gmap_canvas {
	 height:350px;
	 width:500px;
 }
 .arrows {
	 display:none;
 }
 body {
	 margin: 0px;
	 padding: 0px;
 }
}

 .topnav {
	 overflow: hidden;
	 background-color: #43ADEE;
	 text-align: center;
 }
 
@media screen and (max-width: 1100px) {
	 .welcome_text {
    	 padding: 40px;
    	 padding-left:40px;
	 }
	 .welcome_title {
		 padding-left:40px;
	 }
	 .button_section {
		 padding-left: 40px;
	 }
	 

}

@media screen and (max-width: 600px) {
 .topnav a:not(:first-child) {display: none;}
 .topnav a.icon {
		float: right;
		display: block;
		}
 #popup {
      background-color: #f8f8f8;
      position: absolute;
      display: none;
	  margin:0 auto;
	  top: 50%;
	  width:100%;
	  transform: translate(-50%, -50%);
	  z-index: 9999;
    }
    
#popimg {
	width: 100%;
	height: auto;
}

.closeme {
      position: absolute; 
      top: 10px;
      right: 15px;
      cursor: pointer;
    }
}

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

 .topnav.responsive {position: relative;}
 .topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		}
 .topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
		}
	.images_corner {
			padding:0;
			display:block;
			width:100%;
		}
	.images_corner img {
		max-width: 100%;
        height: auto;
	}
	.short_version_img_box img {
        width: 400px;
    }
	#srl {
		display: inline;
		margin-top:4%;
		margin-left:60%;
		position: absolute;
  	    left: 10px;
 		top: 80px;
	}
	#enl {
		display: inline;
		position: absolute;
		margin-top:4%;
  	    left: 70%;
 		top: 80px;
	}

	.welcome_box {
			width:100%;
			padding:5px;
			justify-content: flex-end;
		}
	.welcome_title {
			padding:20px;
	}
	.welcome_title h1 {
			font-size: 26px;
			padding:0px;
	}
	.welcome_title h2 {
		margin:0px;

		line-height: normal;
		padding:0px;
	}
	.welcome_text {
			padding: 4px 4px 20px;
			font-size:17px;
			line-height: 23px;
	}
	.welcome_pics {
		left: 0;
	}
	.crater_title {
	 		padding: 10px 10px 0px 30px;
	 		justify-content: center;
	}
	.crater_text {
		 overflow:hidden;
		 width:100%;
		 margin:auto;
	}
	.crater_text img {
			padding:10px;;
			float:left;
			width:60%;
	}
	.crater_text h4 {
			margin: 5px;
			padding: 0px;
			font-size: 17px;
			line-height: 24px;
			font-style: normal;
			font-weight: 600;
	}
	.crater_text p {
			font-size: 17px !important;
			padding:0 10px 10px 10px !important;
			line-height: 20px !important;
			text-align: justify !important;
	}
	#mars_links {
		font-size:14px;
	}
	.menu {
			display: block;
	}
	.topnav {
			text-align: left;
	}
	.mySlides {
		display:none;
	}
	.about_box {
		padding-top:20px !important;
		padding-bottom: 30px !important;
		padding-left:3px !important;
		padding-right:3px !important;

	}
	.text_header {
		text-align:center !important;
		padding:0 !important;
		height: 30px;
	}
	.text_header h3 {
		font-size:20px !important;
		margin: 10px;
	}
	.about_box p {
		padding: 0px !important;
		font-size: 15px;
		line-height: 23px;
	}
	.links_box {
		padding-left:25px !important;
	}
	.links_box a {
		font-size: 10px;
		line-height: 10px;
	}
	.text_about {
		margin: 12px;
	}
	.text_history {
		margin: 12px !important;
	}
	h2 {
		text-align: center;
	}
	.share_box {
		margin-left: 12px;
	}
	.fact_box {
		margin:5px !important;
		height:auto !important;
		padding-bottom:20px;
	}
	.submenu a {
		font-size: 14px !important;
	}

	.fact_box img {
		height:auto;
		margin-top:0px;
		width:45%;
	}
	.fact_box p {
		font-size: 15px;
		line-height: 23px;
	}

	.panorama_pics {
		margin:1px !important;
		width:100% !important;
	}

	#place_data {
		margin:12px;
		text-align: left;
		font-size: 14px;
	}

	#slideshow1  {
	    float:none !important;
		margin: 0 !important;
		padding: 0px !important;
		left:0px !important;
		width:100% !important;
		height: 364px !important;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	#slideshow1 > div  {
		 position: absolute !important;
		 top: 2px;
		 left: 2px;
		 right: 2px;
		 bottom: 2px;
	}
	#slideshow2  {
		margin: 0 !important;
		padding: 0px !important;
		left:0px !important;
		width:100% !important;
		height: 364px !important;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	#slideshow2 > div  {
		 position: absolute !important;
		 top: 2px;
		 left: 2px;
		 right: 2px;
		 bottom: 2px;
	}
	#slideshow3  {
		margin: 0 !important;
		padding: 0px !important;
		left:0px !important;
		width:100% !important;
		height: 364px !important;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	#slideshow3 > div  {
		 position: absolute !important;
		 top: 2px;
		 left: 2px;
		 right: 2px;
		 bottom: 2px;
	}
	#slideshow4  {
		margin: 0 !important;
		padding: 0px !important;
		left:0px !important;
		width:412px !important;
		height: 364px !important;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
	}
	#slideshow4 > div  {
		 position: absolute !important;
		 top: 2px;
		 left: 2px;
		 right: 2px;
		 bottom: 2px;
	}
	.img_wrapper {
		width:100% !important;
		height: 346px !important;
	}
	
	.movie_container {
		padding: 0 !important;
		margin:5px !important;
	}
	.yt_frame {
		width:100%;
		height:350px;
	}
	.what_box {
		width:100%;
		padding: 0px;
		margin: 0px;
	}
	.what_txt_box {
		overflow:hidden;
		padding:2px;
		text-align: justify;
	}
	.what_txt_box h4 {
		text-align: left;
		font-size: 24px;
		font-weight: 600;
	}
	.what_txt_box p {
		line-height: 23px;
	}
	.history_img {
			width: 100%;
			height: auto;
	}
	.history_boxl {
		float:none !important;
		padding:0;
	}
	.history_boxr {
		float:none !important;
		padding: 0;
	}
}




.text_header {
	text-align:center !important;
	padding:2px;
}
.text_header h3 {
	font-size:30px;
}
.about_box {
		padding:0px 130px 80px 130px;
}
.about_box p {
		text-align: justify;
}
.text_about {
	margin-top:30px;
}
.text_history {
	margin-top:5px;
	margin-left:5px;
	margin-right: 5px;
}
#short_history {
	background-color: #43ADEE;
	width:auto; font-size: 16px;
	margin: 2px 2px;
	padding: 6px;
	border-radius:15px;
	color: white;
}


.links_box {
	padding-left:70px;
}
.links_box a {
	color: green;
}
.submenu {
	width:100%;
	text-align: center;
	background-color: #43ADEE;
	height: 60px;
}
.submenu a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 20px;
	font-size: 17px;
}
.submenu a:hover {
	background-color: green;
	color: black;
}

.submenu a.active {
	background-color: #04AA6D;
	color: white;
}
#active {
	background-color: #8fc3eb;
}
.sources {
	font-style: oblique;
	font-stretch: semi-expanded;
	font-weight: 400;
}

.fact_box {
	height:300px;
	margin-top:40px;
}
.fact_img {
	float:left;
	 margin:10px;
}

.responsive {
	padding: 0;
	margin: 0;
	float: left;
	width: 24.99999%;
}

/* ids for what to do images */
#slideshow1  {
	float:left;
	margin: 25px auto;
	position: relative;
	width: 566px;
	height: 515px;
	padding: 10px;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow1 > div  {
	 position: absolute;
	 top: 10px;
	 left: 10px;
	 right: 10px;
	 bottom: 10px;
}
#slideshow2  {
		float:left;
		margin: 50px auto;
		position: relative;
		width: 566px;
		height: 515px;
		padding: 10px;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow2 > div  {
	 position: absolute;
	 top: 10px;
	 left: 10px;
	 right: 10px;
	 bottom: 10px;
}
#slideshow3  {
	 float:left;
	 margin: 50px auto;
	 position: relative;
	 width: 566px;
	 height: 515px;
	 padding: 10px;
	 box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow3 > div  {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
}
#slideshow4  {
		float:left;
		margin: 50px auto;
		position: relative;
		width: 566px;
		height: 515px;
		padding: 10px;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow4 > div  {
	 position: absolute;
	 top: 10px;
	 left: 10px;
	 right: 10px;
	 bottom: 10px;
 }

/* for responsive menu */
@media only screen and (max-width: 600px) {
	.responsive {
		width:100%;
		margin:0;
	}
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.movie_container {
	padding-left:150px;
}


/* Gallery display */

.row_gallery {
	padding-top: 1%;
	padding-left: 8%;
	padding-right: 3%;
	left: 40px !important;
}
.row_gallery > .column_gallery {
	padding: 0 2px;
}

.row_gallery:after {
	content: "";
	display: table !important;
	clear: both;
}

/* Create four equal columns that floats next to eachother */
.column_gallery {
	float: left !important;
	width: 15%;
}

@media only screen and (max-width: 600px) {
	.row_gallery {
		padding-left: 20px;
	}
	.column_gallery {
		float: left !important;
		width: 23%;
	}
	.row_gallery > .column_gallery {
		padding: 2px 2px;
	}

}

.caption {
		display: block;
		font-weight: 200;
}

.panorama_pics {
	height:auto;
	margin-left:10px;
	margin-right:auto;
	width:30%;
	display:inline-block;
}
.history_boxl {
	float:left;
	text-align: center;
	padding:10px 10px 0 10px;
}
.history_boxr {
	float:right;
	text-align: center;
	padding:10px 10px 0 10px;
}

/* 360 */
@media screen and (max-width: 360px) {
	.welcome_text {
        text-align: justify;
    }
    .crater_text {
		 overflow:hidden;
		 width:97%;
		 margin:auto;
	}
	.crater_title h3 {
        font-size: 45px;
        font-weight: 600;
	}
	.crater_text img {
		padding:5px;
		width:97%;
		padding-bottom: 15px;
	}
	.crater_text h4 {
		margin: 15px;
		padding: 0px;
		font-size: 15px;
		line-height: 17px;
		font-weight: 500;
	}
	.crater_text p {
		font-size: 17px;
		padding:0 5px 5px 5px !important;
		line-height: 23px !important;
		text-align: justify !important;
	}
	#mars_links {
		font-size:14px;
	}
	.fact_box img {
        width: 95%;
		height: auto;
	}
	.fact_box p {
        font-size: 15px;
        line-height: 23px;
	}
	.what_txt_box p {
        font-size: 15px;
	}

}