@charset "UTF-8";
/* CSS Document */

body,html {font-family: "obvia", sans-serif; color: #463429;}
a {color: #e5b700;text-decoration: none;}
a:hover {color: #b89f30;}
a:focus {color: #b89f30;}
a:visited {color: #b89f30;}

.btn-outline-light {color:#ffffff !important;}
.btn-outline-light:hover {color:#32261b !important; background-color: #ffffff !important}

#floater {
    /* set the width and height of the floater */
    width: auto;
    height: 43px;
	float: right;
	padding: 10px 20px;
	color: #ffffff;
    
    /* set the background image of the floater. */
    /* you can also use background color and borders here */
	background-color: transparent;
	border: none;
    
    /* set the position to fixed so that it stays in place no matter where you scroll */
    position: fixed;
    top: 10;
	right: 0;
    
    /* set the display to block so that the entire graphic is clickable */
    display: block;
    
    /* set the z-index so high it will always be on top */
    z-index: 99999;
	}
		#floater i {font-size: 1.3em;}
		
		.btn {border-radius: 0px; letter-spacing: 1px;}
		
		.header {
			background-color: #a58f7c; background-image: url("../images/Double-R-Carpentry-hero.jpg"); background-size: 100% auto; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;
		}
		.fixed-top {padding: 10px 35px;}
		
		.navbar-brand img {width: 200px; height:auto;}
		.nav-link {color: #ffffff; font-family: "obvia-expanded", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 1px;}
		.nav-item {padding-left: 10px;color: #ffffff;}
		.nav-item a {color: #ffffff;}
		.nav-item a:hover {color: #b89f30;}
		.nav-item a:visted {color: #ffffff;}
		.nav-item a:focus {color: #ffffff;}
			
		.hero {padding: 500px 35px 30px 35px; color: #ffffff;}
		.title {text-transform: uppercase;}
		
		.dropdown-menu {border: none; border-radius: 0px; background: none; background-color: rgba(64, 50, 36, 0.7); padding-top: 0; padding-bottom: 0;color: #ffffff;}
		.dropdown-item {color: #ffffff; font-family: "obvia-expanded", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1px;}
		.dropdown-item:hover {background-color: burlywood;color: #caac27;}
		.dropdown-item:visted {color: #ffffff;}
		.dropdown-item:focus {color: #ffffff;}
		
		.services {background-color: #403224; background-image: url("../images/Double-R-Carpentry-services.jpg"); background-size: 100% auto; padding: 10px 35px; background-position: top center; background-repeat: no-repeat; color:#ffffff;}
		
		.next-steps {background-color: #32261b; color: #ffffff; padding: 60px 10px;}
		.next-steps h1,h3 {text-transform: uppercase; letter-spacing: 1px;}
		
		.footer {
			background-color: #a58f7c; background-image: url("../images/Double-R-Carpentry-hero.jpg"); background-size: 100% auto; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat; color: #ffffff; padding-top: 50px; padding-bottom: 30px;
		}
		
		@media (max-width: 1280px) {
			.hero {padding: 220px 20px 30px 20px; color: #ffffff;}
			.navbar-toggler {margin-top: 50px;}
			.navbar-collapse {margin-top: 50px;}
			.navbar-brand img {width: 100px; height:auto;}
		}
		@media (max-width: 990px) {
			.hero {padding: 170px 10px 30px 10px;}
			.navbar-toggler {margin-top: 50px;}
			.navbar-collapse {background-color: rgba(64, 50, 36, 0.7); margin-top: 10px;}
			.navbar-collapse ul li {padding-left: 10px; padding-right: 10px; text-align: center;}
			.dropdown-menu {background-color: transparent;}
			#floater .btn-outline-light {font-size: 16px;}
			#floater {padding: 10px 10px;}
			#floater i {font-size: 1.1em;}
			.fixed-top {padding: 10px 10px;}
			.navbar-brand {padding-top: 75px;}
			.services {padding: 10px 15px;}
		}


/* COROUSEL Tetimonials Home */

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
}
.carousel-control-prev-icon::after {
   content: "\f100"; /* fa-angle-double-left */
    font-family: FontAwesome;
    font-size: 3rem;
    color: #f9cb00;
}

.carousel-control-next-icon::after {
    content: "\f101"; /* fa-angle-double-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 3rem;
    color: #f9cb00;
}
		
.carousel-control-prev,
.carousel-control-next {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
		
.carousel-caption {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    left: 50%;
    right: auto;
}
		
.carousel-caption,
.carousel-caption h5,
.carousel-caption p {
    color: #463429;
}
		

@media (max-width: 1280px) {
	.carousel-caption h5 {font-size: 18px;}
	.carousel-control-prev-icon::after {font-size: 2rem;}
	.carousel-control-next-icon::after {font-size: 2rem;}
}
	
@media (max-width: 990px) {
	.carousel-item {min-height: 500px !important;}
	.carousel-caption {min-width: 200px !important; margin: 0 auto !important; padding: 0 inherit;}
	.carousel-caption h5 {font-size: 12px !important;}
	.carousel-control-prev-icon::after {font-size: 1.3rem;}
	.carousel-control-next-icon::after {font-size: 1.3rem;}
}

/* HOVER Home */
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background-color: #f9cb00;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 20%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  opacity: 0.2;
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 42px;
	letter-spacing: 1px;
	line-height: 1em;
  background-color: transparent;
	font-weight: 600;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
	text-decoration: none;
}

.hovereffect h2, .hovereffect a {
  color: #FFF;
  margin: 10% 0;
  opacity: 0;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
	text-decoration: none;
	font-family: "obvia-condensed", sans-serif;
}

.hovereffect:hover a, .hovereffect:hover h2 {
  opacity: 1;
  color: #ffffff;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  text-decoration: none;
  
}

@media (max-width: 1280px) {
	.hovereffect h2 {font-size: 32px;}
}
@media (max-width: 997px) {
	.hovereffect h2 {font-size: 28px;}
}
@media (max-width: 747px) {
	.hovereffect h2 {font-size: 21px;}
}

	
/* HEADER Scroll */
nav.fixed-top.scrolled {
    background-color: rgba(75, 71, 69, 0.7) !important;
    transition: background-color 0.3s ease;
}
nav.fixed-top {
    background-color: transparent;
}
		.foot-nav {list-style-type: none;}
		.foot-nav li a:hover {color: #ccc;}
		.foot-dropdown-menu {list-style-type: none;}
		.foot-dropdown-menu li a:hover {background-color: transparent; color: #ccc;}


/* ABOUT */
.header-about {background-color: #a58f7c; background-image: url("../images/Double-R-Bedroom-remodel-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}
.hero-about {padding: 280px 35px 30px 35px; color: #ffffff;}
.content {padding: 100px 20px;}

/* FAQS */
.header-faqs {background-color: #a58f7c; background-image: url("../images/Double-R-Bedroom-Bathrooms-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* CONTACT */
.header-contact {background-color: #a58f7c; background-image: url("../images/Double-R-Bedroom-Decks-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* PORTFOLIO */
.header-portfolio {background-color: #a58f7c; background-image: url("../images/Double-R-Bedroom-Handyman-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* REMODEL */
.header-remodel {background-color: #a58f7c; background-image: url("../images/Double-R-Bedroom-Small-Bathroom-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* ADDITIONS */
.header-additions {background-color: #a58f7c; background-image: url("../images/Double-R-Remodel-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* NEW BUILDS */
.header-newbuilds {background-color: #a58f7c; background-image: url("../images/Double-R-New-Builds-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* OUTDOOR */
.header-outdoor {background-color: #a58f7c; background-image: url("../images/Double-R-Bedroom-Outdoor-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

/* HABDYMAN */
.header-handyman {background-color: #a58f7c; background-image: url("../images/Double-R-Kitchen-Renovations-hero.jpg"); background-size: cover; padding: 10px 35px; background-position: bottom center; background-repeat: no-repeat;}

.foot-logo {width:287px; height:auto;}

@media (max-width: 997px) {
	.foot-logo {width:247px; height:auto;}
}

@media (max-width: 747px) {
	foot-logo {width:207px; height:auto;}
}

/* Temporary until Bootstrap 5 brings these rules back... */

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.fa-quote-left {font-size: 42px; color: #f9cb00;}
.fa-quote-right {font-size: 42px; color: #f9cb00;}
.testimonials {padding: 50px;}

@media (max-width: 997px) {
	.fa-quote-left {font-size: 28px; color: #f9cb00;}
	.fa-quote-right {font-size: 28px; color: #f9cb00;}
}
@media (max-width: 747px) {
	.fa-quote-left {font-size: 18px; color: #f9cb00;}
	.fa-quote-right {font-size: 18px; color: #f9cb00;}
	.testimonials {padding: 0px;}
}