/*
 * Globals
 */

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #555;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  opacity:0.4;
}


#bg-test {
  position: fixed; 
  top: -45%; 
  left: -40%; 
  width: 200%; 
  height: 200%;
}

#bg-test img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  opacity:0.5;
}

.wrapper {margin:0 auto; max-width:960px; text-align:left;}

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}

/*
 * Header
 */
.masthead {
  margin:0 auto;
  padding-top:15px;
  width:90%;
}

.mainhead {
  margin:0 auto;
  padding-top:0;
  width:80%;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-link {
  font-size:20px;
  padding: 20px 20px 0 20px;
  margin-left:26px;
  z-index:9999;
  text-transform: uppercase;
}

.nav-link img {width:200px;}

.nav a { color:#ccc;}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav a:hover, .nav-link a:hover, .nav .nav-link-active {
  color:red;
  border:0px solid #333;
}


.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

.img-center {
  position: fixed;
  top: 44%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.nav-link-active {color:red;}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Cover
 */
.cover {
  padding: 0;
  margin-left:-200px;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}

.inner-div {
  max-width:860px;
  padding: 50px;
  margin: 0 auto;
  margin-top:15px;
  margin-bottom:30px;
  opacity:0.75;
  background:#333;
  min-height:600px;
  height:100%;
}

.inner-gallery img {
  opacity: 1;
  margin:0 auto;
  text-align:center;
  padding: 20px 0 30px 10px;
}

.inner-div h2 {
  font-size:40px;
  color:#666;
}



/*
 * Footer
 */
footer {
  width: 100%;
  text-align: center;
  padding:20px;
} 
 
.fixed {
  position:fixed;
  bottom:0;
} 
 

footer p {
  color:#fff;
}


.clear {clear:both; height:1px;}

@media (max-width: 1366px) {

 #bg-test {
  position: fixed; 
  top: 0%; 
  left: 0%; 
  width: 100%; 
  height: 100%;
}

#bg-test img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  width: 100%;
  opacity:0.7;
} 
  
	.inner-div {
	  padding: 30px;
	  margin: 0 auto;
	  margin-top:15px;
	  margin-bottom:40px;
	}

	.inner-div h2 {
	  font-size:60px;
	  margin-left:-40px;
	  margin-top:-10px;
	  color:#666;
	}  
	
	.inner-div h4 {
	  font-size:18px;
	  font-weight:600;
	}
	
	.inner-div p {
	  font-size:15px;
	}
	
	.nav-link {
	  font-size:20px;
	  padding: 5px;
	  margin-left:30px;
	  height:70px;
	  margin-top:20px;
	}
	
	.nav-link img {
	  width:130px;
	  margin-top:-20px;
	  margin-left:1px;
	}
	
	
	footer {
	  position:relative;
	  font-size:12px;
	  padding:20px;
	}
}

@media (max-width: 1024px) {
  
  	img {width:80%;}
  
	.inner-div {
	  padding: 30px;
	  margin: 0 auto;
	  margin-top:15px;
	  margin-bottom:40px;
	}

	.inner-div h2 {
	  font-size:60px;
	  margin-left:-40px;
	  margin-top:-10px;
	  color:#666;
	}  
	
	.inner-div h4 {
	  font-size:18px;
	  font-weight:600;
	}
	
	.inner-div p {
	  font-size:15px;
	}
	
	.nav-link {
	  font-size:20px;
	  padding: 5px;
	  margin-left:10px;
	  height:70px;
	  margin-top:20px;
	}
	
	.nav-link img {
	  width:70px;
	  margin-top:-20px;
	  margin-left:1px;
	}
	
	footer {
	  position:relative;
	  font-size:12px;
	  padding:20px;
	}
}



@media (max-width: 768px) {
  
  	img {width:80%;}
  
	.inner-div {
	  padding: 30px;
	  margin: 0 auto;
	  margin-top:15px;
	  margin-bottom:40px;
	}

	.inner-div h2 {
	  font-size:60px;
	  margin-left:-40px;
	  margin-top:-10px;
	  color:#666;
	}  
	
	.inner-div h4 {
	  font-size:18px;
	  font-weight:600;
	}
	
	.inner-div p {
	  font-size:15px;
	}
	
	.nav-link {
	  font-size:18px;
	  padding: 5px;
	  margin-left:10px;
	  height:70px;
	  margin-top:20px;
	}
	
	.nav-link img {
	  width:70px;
	  margin-top:-20px;
	  margin-left:1px;
	}
	
	footer {
	  position:relative;
	  font-size:12px;
	  padding:20px;
	}
}


@media (max-width: 414px) {
  
  	img {width:90%;}
  
	 #bg-test {
	  position: center;
	  top: -52%; 
	  left: -50%; 
	  width: 300%; 
	  height: 200%;
	}

	#bg-test img {
	  min-width: 50%;
	  min-height: 50%;
	  opacity:0.7;
	} 
  
	.inner-div {
	  padding: 20px;
	  margin: 0 auto;
	  margin-top:15px;
	  margin-bottom:50px;
	}

	.inner-div h2 {
	  font-size:60px;
	  margin-left:-40px;
	  margin-top:-10px;
	  color:#666;
	}  
	
	.inner-div h4 {
	  font-size:18px;
	  font-weight:600;
	}
	
	.inner-div p {
	  font-size:14px;
	}
	
	.nav-link {
	  font-size:18px;
	  padding: 5px;
	  margin-left:8px;
	  height:20px;
	}
	
	.nav-link img {
	  width:50px;
	  margin-top: 0px;
	  margin-left:-20px;
	}
	

}

@media (max-width: 375px) {
  
  	img {width:95%;}
  
	 #bg-test {
	  position: center;
	  top: -50%; 
	  left: -25%; 
	  width: 220%; 
	  height: 200%;
	}

	#bg-test img {
	  min-width: 50%;
	  min-height: 50%;
	  opacity:0.5;
	} 
  
	.inner-div {
	  padding: 20px;
	  margin: 0 auto;
	  margin-top:25px;
	  margin-bottom:50px;
	}

	.inner-div h2 {
	  font-size:60px;
	  margin-left:-40px;
	  margin-top:-10px;
	  color:#666;
	}  
	
	.inner-div h4 {
	  font-size:18px;
	  font-weight:600;
	}
	
	.inner-div p {
	  font-size:14px;
	}
	
	.nav-link {
	  font-size:17px;
	  padding: 5px;
	  margin-left:8px;
	  height:20px;
	}
	
	.nav-link img {
	  width:50px;
	  margin-top:-10px;
	  margin-left:-20px;
	}
	
	footer {
	  position:relative;
	  font-size:12px;
	  padding:20px;
	}
}