/* Three columns side by side */
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}
img {
	float: left;
	height: 22%;
	width:11%;
	}
#logo{
	height: 35%;
	width: 25%;
	
}	
#log{
	height: 16%;
	width: 12%;
	
}
body {
    background-image: url();
    background-repeat: no-repeat;
}
/* Style buttons */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}


/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

#banner{
	
	 width: 100%;
	 height: 70%;
	 margin-right: 5px;
	 margin-left: 5px;
     background-color:darkgray;
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
.topnav{
	margin-top: 3%;
	margin-right: 
	margin-left: 3%;
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}
.imge{
	width: 30%;
	float: left;
	margin: 1.66%;
}
footer{
	background-color:#091528;
	color: white;
	margin: 5px;
}
.anc{
	color: #82b0ff;
}
hr{
	border-color:  white;
}

$gallery-width: 100%;
$transition-duration: 0.5s;

.m-p-g {
	max-width: $gallery-width;
	margin: 0 auto;
	
	&__thumbs {
		
		&-img {
			margin: 0;
			float: left;
			vertical-align: bottom;
			cursor: pointer;
			z-index: 1;
			position: relative;
			opacity: 0;
			filter: brightness(100%);
			-webkit-tap-highlight-color: rgba(black, 0);
			will-change: opacity, transform;
			transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);
			
			&.active {
				z-index: 50;
			}
			
			&.layout-completed {
				opacity: 1;
			}

			&.hide {
				opacity: 0;
			}
			
			&:hover {
				filter: brightness(110%);
			}
		}
	}
	
	&__fullscreen {
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		background: rgba(black, 0);
		visibility: hidden;
		transition:
			background .25s ease-out,
			visibility .01s $transition-duration linear;
		will-change: background, visibility;
		backface-visibility: hidden;

		&.active {
			transition:
				background .25s ease-out,
				visibility .01s 0s linear;
			visibility: visible;
			background: rgba(black, 0.95);
		}

		&-img {
			pointer-events: none;
			position: absolute;
			transform-origin: left top;
			top: 50%;
			left: 50%;
			max-height: 100vh;
			max-width: 100%;
			visibility: hidden;
			will-change: visibility;
			transition: opacity $transition-duration ease-out;

			&.active {
				visibility: visible;
				opacity: 1 !important;
				transition:
					transform $transition-duration cubic-bezier(0.23, 1, 0.32, 1),
					opacity $transition-duration ease-out;
			}

			&.almost-active {
				opacity: 0;
				transform: translate3d(0,0,0) !important;
			}
		}
	}
	
	&__controls {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 200;
		height: 20vh;
		background: linear-gradient(to top, transparent 0%, rgba(black, 0.55) 100%);
		opacity: 0;
		visibility: hidden;
		transition: all $transition-duration cubic-bezier(0.23, 1, 0.32, 1);
		
		&.active {
			opacity: 1;
			visibility: visible;
		}
		
		&-close,
		&-arrow {
			appearance: none;
			border: none;
			background: none;

			&:focus {
				outline: none;
			}
		}

		&-arrow {
			position: absolute;
			z-index: 1;
			top: 0;
			width: 20%;
			height: 100vh;
			display: flex;
			align-items: center;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(black, 0);
			opacity: 0;
			
			&:hover {
				opacity: 1;
			}
			
			&--prev {
				left: 0;
				padding-left: 3vw;
				justify-content: flex-start;
			}
			
			&--next {
				right: 0;
				padding-right: 3vw;
				justify-content: flex-end;
			}
		}
		
		&-close {
			position: absolute;
			top: 3vh;
			left: 3vw;
			z-index: 5;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(black, 0);
		}
	}

	&__btn {
		$size: 50px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: $size;
		height: $size;
		border-radius: 50%;
		background: rgba(white, 0.07);
		transition: all .25s ease-out;

		&:hover {
			background: rgba(white, 0.15);
		}
	}

	&__alertBox {
		position: fixed;
		z-index: 999;
		max-width: 700px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		padding: 25px;
		border-radius: 3px;
		text-align: center;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
		color: grey;

		h2 {
			color: red;
		}
	}
}

/* DEMO */
body {
	background: #fefefe;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	font-family: 'Roboto Mono';
}

h2 {
	font-weight: 300;
	margin: 4vh 4vw;
	letter-spacing: 3px;
	color: grey;
	text-transform: uppercase;
}

.demo-btn {
	display: inline-block;
	margin: 0 2.5px 4vh 2.5px;
	text-decoration: none;
	color: grey;
	padding: 15px;
	line-height: 1;
	min-width: 140px;
	background: rgba(0,0,0, 0.07);
	border-radius: 6px;
}

.demo-btn:hover {
	background: rgba(0,0,0,0.12);
}

@media (max-width: 640px) {

	.demo-btn {
		min-width: 0;
		font-size: 14px;
	}
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}