@charset "utf-8";
/* CSS Document */
/*headline: font-family: 'roboto', sans-serif;
paragraph: font-family: 'playfair display', serif;
*/

.roboto-<uniquifier> {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "width" 100;
}

.playfair-display-<uniquifier> {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* Portfolio Website Colors:
	opera mauve #B4A7A7
	white smoke #9F9292
	brainstem grey #5F5B5B
	dark puce #483A3A
	cocoa brown #312222
*/

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
background-color: #312222;
}
/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
color: #9F9292;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
background-color: #B4A7A7;
color: #fff;
}
/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
  background-image: url("../Images/hamburger.png");
}

/*navbar-brand logo*/
.navbar-brand {
    background-image: url("../Images/SSdesignlogo2.png");
    background-repeat: no-repeat;
    background-size: 50px auto;
    background-position: 6% center;
    padding-left: 70px;
}

/*header banner section*/
#home_banner  {
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
}

/*rem values are relative to the root html element, 1rem=16px*/
#home_banner h1 {
	font-size: 4rem;
	color: #9F9292;
	text-shadow: 2px 1px rgba(71,71,71,0.80);
	position: absolute;
	left: 3%;
	bottom: 7%;
}

/*3 column main section*/
.main h2 {text-align: center;
		  font-weight: 800;}

/* footer section */ 
.footer {text-align: center;
	line-height: 60px;
	background-color: #312222;
	color: #9F9292;
}



/*Media Query Breakpoints*/
/*Small Devices ONLY*/
@media screen and (min-width:375px){
#home_banner h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    
}


/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_banner h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    

/*MEDIUM SIZE ONLY*/
@media (min-width: 768px){
  #home_banner h1 {font-size: 2rem;
               bottom: 5%;
               left: 3%;
              }
  }


/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_banner h1 {
        font-size: 3rem;
        bottom: 5%;
        left: 3%;
        }
}
	
	/*X-LARGE SIZE ONLY*/
@media screen and (min-width:1200px){
    #home_banner h1 {
        font-size: 3rem;
        bottom: 5%;
        left: 3%;
        }
}