@charset "utf-8";
/*headline: font-family 'Playfair Display', serif;
paragraph: font-family: 'Quicksand', san-serif;
*/

/*Muted Sunset:
	bright red: #a94e3f
	maroon: #9a5656
	cream: #f2e8df
	yellow: #f2b263
	turquoise: #337466
	gray: #F3F3F3
*/

/* Background color for navbar and drop down menu */
.navbar-custom, .navbar-custom .dropdown-menu {
	background-color: #337466;
}
/*text color for navbar and dropdown menu */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text, .navbar-custom .navbar-nav .nav-link, .navbar-custom .dropdown-item {
	color: #f2e8df;
}

/* 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: #f2b263;
    color: #337466;
}

/* background and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: rgba(236,240,241,1.00);
    color: #F2CCB6;
}

/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}  

body {font-family: 'Playfair Display', serif;
}
h1, h2, h3, h3, h4, h5, h6 {font-family: 'Quicksand', sans-serif;
}
.navbar-custom {font-family: 'Quicksand', sans-serif;
}

/*navbar-brand logo*/
.navbar-brand {
	background-image: url("../images/cf_logo.png");
	padding-left: 60px;
	background-position: 6% center;
	background-repeat:no-repeat;
	background-size: 40px auto;
}
.navbar-brand {
}

/*header banner section*/
#carousel {
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 8px;
	position: relative;
}

#carousel h1 {
	font-size: 4rem;
	color: #f2e8df;
	text-shadow: 2px 1px rgba(71,71.71,0.68);
	position: absolute;
	left: 3%;
	bottom: 7%;
}

#aboutbanner {
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
}

#aboutbanner h1 {
	color: #f2e8df;
	text-shadow: 2px 1px rgba(71,71,71,0.66);
	position: relative;
	left: 3%;
	bottom: 7%
}

#intro {
	color: #337466;
	position: absolute
}

#portfoliobanner {
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
}

#portfoliobanner h1 {
	color: #f2e8df;
	text-shadow: 2px 1px rgba(71,71,71,0.66);
	font-size: 6em; 
	position: absolute;
	left: 3%;
	bottom: 7%
}

.featurette-divider {
	margin: 3rem 0;
}

.featurette-heading {
	padding-top: 60px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .03rem;
}

/*Media Query Breakpoints*/
/*XSmall Devices Only*/
@media (min-width: 375px){
#carousel h1 {
	font-size: 1rem;
	bottom: 3%;
	left: 3%;
	}
}

/*Small Size Only*/
@media (min-width: 576px){
#carousel h1 {
	font-size: 3rem;
	bottom: 5%;
	left: 3%;
	}
}

/*Medium Size Only*/
@media (min-width: 768px){
#carousel h1 {
	font-size: 3rem;
	bottom: 5%;
	left: 3%;
	}
}

/*Large Size Only*/
@media (min-width: 992px){
#carousel h1 {
	font-size: 4rem;
	bottom: 5%;
	left: 3%;
	}
}

/*3 col main section*/
.main h2 {text-align: center; 
         font-weight: 800;
         font-size: 1.8em;
         color: #913A31;}
.social a {margin: 0;
    display: inline-block;
    text-decoration: none;
    margin-left:10%;
    margin-right:10%;
}

/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 30px;
  width: 40px;
  margin-right: 5px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */


/*footer section*/
footer {text-align: center;
		 line-height: 60px;
		 background-color: #9a5656;
		 color: #f2e8df;
}

.contact-head {
}

@media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }
    .dropdown-menu .dropdown-menu{
        margin-left:0; margin-right: 0;
    }
    .dropdown-menu li{
        position: relative;
    }
    .nav-item .photo_submenu{ 
        display: none;
        position: absolute;
        left:100%; top:30px;
    }

    .dropdown-menu:hover > .photo_submenu {
        display: block;
    }
    
}
