body {margin:0; font-family: 'Barlow Semi Condensed', sans-serif; color: #999;}

body a {color: #999}

*, *::before, *::after {
  box-sizing: border-box;
}

.hero { 
	position: relative; 
	height: 800px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color:red; */
	/* background-image: url('https://placekitten.com/1200/800'); */
	/* background-size: cover; */
	/* opacity: 0.75; */
}

.hero::before {    
      content: "";
      background-image: url("../img/mumbai-warehouse-DM5.jpg");
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.25;
}

.hero p {
	font-size: 2em;
	font-weight: 300;
}	
/* 
.arrow {
  border: solid #999;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 20px;
} */

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.arrow {
  box-sizing: border-box;
  height: 4vw;
  width: 4vw;
  border-style: solid;
  border-color: #999;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
  transition: border-width 150ms ease-in-out;
}

.arrow-wrapper{
	background-color: none; 
	bottom: 80px; 
	position: absolute; 
	height: 50px; 
	width: 100%; 	
	display: flex;
	align-items: center;
	justify-content: center; 
}


	
 @media only screen and (max-device-width: 480px) { 
	.hero {
		height: 550px;
	}
	
	.hero p {
		font-size: 17px;
	}
 
	.arrow {
		height: 6vw;
		width: 6vw;
		border-width: 0px 1px 1px 0px;
	
	}
 .arrow-wrapper{
 	bottom: 50px; 
	}
 }

 
 
 
 
.gallery{
	position: absolute;
	width: 93%;
	max-width: 1200px;
	/* height: 88%; */
	margin: auto;
	left: 0;
	right: 0;
	top: 800px;
	background-color:none;
	/* z-index:1000000000; */
}

.gallery h1 {
	font-weight: 300
	/* text-decoration: underline; */
	/* text-decoration-thickness: 1px; */

}

 @media only screen and (max-device-width: 480px) { 
	.gallery {
		top: 550px;
	}

 }



.header {
	background-color: white;
	height: 65px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.header-content {
	background-color: none;
	position: absolute;
	width: 93%;
	max-width: 1200px;
	margin: auto;
	left: 0;
	right: 0;	
	top: 0px;
	padding: 14px 0px 0px 0px;
	font-size: 2em;
	font-weight: 300;
	z-index:110;
}

.header-content  a {
	text-decoration: none;
	/* color: #888; */
	z-index:110;
}

 @media only screen and (max-device-width: 480px) { 
	.header {
		height: 45px;
	}
 
	.header-content {
		font-size: 17px;
	}	
}

.header-content a:hover {
  background: none;
  color: black;
  cursor: pointer;
}	

.navbar {
  overflow: hidden;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  z-index: 105;
}

.navbar a {
  float: right;
  display: block;
  /* color: #888; */
  text-align: center;
  padding: 14px 0px 0px 16px;
  margin: 0px 5px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 300;
}

.navbar a:hover {
  background: none;
  color: black;
}


.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a {display: none;}
  .navbar a.icon {
	float: right;
	display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive .icon {
	position: absolute;
	right: 0;
	top: 0;
  }
  .navbar.responsive a {
	float: none;
	display: block;
	text-align: left;
  }
}

.post {
	/* margin-bottom: 165px; */
	font-weight: 300;
}

.post-footer {
	position: relative;
	background-color: none;
	/* height: 125px; */
	width: 100%;
	margin-bottom: 60px;
}

.post-footer h1 {
	padding:0px; margin-top:0px; margin-bottom:6px;
	font-weight: 300;
}

.post-footer h3 {
	padding:0px; margin-bottom:0px; margin-top: 6px;
	font-weight: 300;	
}

.post-footer h4 {
	padding:0px; margin-bottom:0px; margin-top: 6px;
	font-size: 16px;
	font-weight: 300;
	line-height:26px;	
}

.post-footer p {
	padding:0px; margin-top:4px; margin-bottom: 0px; font-size: 0.875em;
	font-weight: 300;	
}

.stretchy-wrapper {
	width: 100%;
	/* padding-bottom: 56.25%; /*56.25%;  16:9 */
	padding-bottom: 66.66%; /*56.25%;  16:9 */
	position: relative;
	background-color: #999;
	margin-bottom: 7px;
	/* cursor: pointer; */
}

div.stretchy-wrapper > img {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 0;
}

.stretchy-wrapper a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.stretchy-wrapper a img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.section p {
	padding:0px; 
	margin: 0px;
	font-size: 16px;
	font-weight: 300;
}


/* .about {
	position: relative;
	width: 100%;
	background-color: green;
}

 .headshot{
	padding: 0px;
	position: relative;
	height: 180px;
	width: 25%;
	background-color: red;
	float: left;
	display: inline-block;
	margin-right: 20px;
 }
 
  .bio {
	position: relative;
	display: inline-block;
 } */

 .footer-copyright {
	position: relative;
	bottom: 0px;
	margin: 40px 0px 40px 0px;
	font-weight: 300;
	font-size: 80%;
 }

.post-footer colgroup col {
	width: 100px;
	/*background-color: #f2f2f2;*/

}
 
 table {
   table-layout: auto;
   width: 100%; 

 }
 
th{
	padding: 0px 8px 6px 0px;
 	font-size: 16px;
	font-weight: 300;
	text-align: left;
	vertical-align: top;

	/* border: 1px solid; */
 }
 
 @media only screen and (max-device-width: 480px) { 

	.post-footer colgroup col {
		width:50px;
		/*background-color: blue;*/

	}

	th{
		padding: 0px 0px 0px 0px;
		font-size: 11px;
	}
	.section p {
		font-size: 11px;		
	}
 }
 
 
 
/* The Overlay (background) */
.overlay {
	/* Height & width depends on how you want to reveal the overlay (see JS below) */   
	height: 100%;
	width: 100%;
	display: none;
	position: fixed; /* Stay in place */
	z-index: 200; /* Sit on top */
	left: 0;
	top: 0;
	background-color: rgb(0,0,0); /* Black fallback color */
	background-color: rgba(256,256,256, 1.0); /* Black w/opacity */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
	position: relative;
	top: 25%; /* 25% from the top */
	width: 100%; /* 100% width */
	text-align: center; /* Centered text/links */
	margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
	padding: 20px;
	text-decoration: none;
	font-size: 17px;
	font-weight: 300;
	color: #999;
	display: block; /* Display block instead of inline */
	transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
	.overlay a:hover, .overlay a:focus {
	color: #000;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 40px;
	font-weight: 300;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
	@media screen and (max-height: 450px) {
	.overlay a {font-size: 17px; font-weight:300;}
	.overlay .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
		font-weight: 300;
}
} 

 @media only screen and (max-device-width: 480px) { 
 
	h1 {
		font-size: 120%;
	}	
	
	h3 {
		font-size: 90%;
	}

	.stretchy-wrapper {
	margin-bottom:3px;

}
	
.post-footer {
	margin-bottom: 26px;	
}	
	
	.post-footer h4 {
		font-size: 11px;
		line-height:13px;	
		margin-top: 2px;	
	}
	
	.post-footer h1 {
	margin-bottom:0px;
	}

	
 }
 
  @media only screen and (orientation: landscape)  and (max-device-height: 480px){ 

  	.hero p {
		font-size: 17px;
	}
  
	.header {
		height: 45px;
	}
 
	.header-content {
		font-size: 17px;
	}

 
	h1 {
		font-size: 120%;
	}	
	
	h3 {
		font-size: 90%;
	}

	.stretchy-wrapper {
	margin-bottom:3px;

}
	
.post-footer {
	margin-bottom: 26px;	
}	
	
	.post-footer h4 {
		font-size: 11px;
		line-height:13px;	
		margin-top: 2px;	
	}
	
	.post-footer h1 {
	margin-bottom:0px;
	}

	th{
		padding: 0px 20px 0px 0px;
		font-size: 11px;
	}
	.section p {
		font-size: 11px;		
	}
	
}