.container {
  max-width: 960px;
}

/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
  
}

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
		
      }
	  
	
	  a { color: #000000 !important; 
	  }
	  a:hover { color: #CCCCCC !important; 
	  }
	  a:visited { color: #CCCCCC !important; 
	  }

	  .bg-color-header { background-color: #ffffff; 
	  } 

	  .py-1 { background-color: #ffffff; 
	  } 

		
	}
		
	  	/* responsive, form small screens, button position */
	  	@media (max-width: 479px) {
	  	    .close-btn {
	    		  position: absolute;
	    		  right: 0;
	    		  top: 0px;
	    		  font-size: 25px;
		  		}
				
			  
				
		  		.bg-header-text {
		  			text-color: white;
		  			padding: 0px;
	  	    }
			
	  	}
	
  	  .social-icon {
	   	font-size: 30px;
	   	display: inline;
	   	float: left;
	   	padding: 6px 20px 0px 0px;
   		}
		

		
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
		#hero {
		  width: 100%;
		  height: 100vh;
		  background: url("../images/puppy.png") top right no-repeat;
		  background-size: cover;
		  position: relative;
		}

		@media (min-width: 992px) {
		  #hero {
		    padding-left: 0px;
			margin-top: -100px;						
		  }
		}

		#hero:before {

		  position: absolute;
		  bottom: 0;
		  top: 0;
		  left: 0;
		  right: 0;
		}

		#hero h1 {
		  margin: 0;
		  font-size: 64px;
		  font-weight: 700;
		  line-height: 100px;
		  color: white;
		  
		}
		
		#hero h2 {
		  color: white;
		  
		}

		#hero p {
		  color: white;
		  margin: 15px 0 0 0;
		  font-size: 26px;
		  line-height: 50px;
		  
		}

		#hero p span {
		  color: white;
		  letter-spacing: 1px;
		}

		@media (max-width: 992px) {
		  #hero {
		    text-align: center;
			margin-top: -100px;
			
		  }
		  #hero h1 {
		    font-size: 40px;
		    line-height: 36px;
  		  	color: white;	
		  }
		  
  		#hero h2 {
  		  color: white;
  		}
		  #hero p {
		    margin-top: 10px;
		    font-size: 20px;
		    line-height: 24px;
  		  	color: white;
			
		  }
		}		
		
		.txt-shadow {
		    text-shadow: 0px 0px 0px #ccc;
		}
		
	  .close-btn {
		  position: absolute;
		  right: 0;
		  top: -35px;
		  font-size: 25px;
		}