/*
 Theme Name:	Athens Remodeling and Roofing
 Theme URI:     http://www.athensremodelingandroofing.com/
 Description:   Custom Bootstrap 5 theme built upon the SEOteric framework
 Author:        SEOteric
 Author URI:    http://www.seoteric.com
 Template:		FrameWork-v5
 Version:       1
*/

@import url("https://use.typekit.net/uzk5nvi.css");

/*////////////////////////////////////////////////
GENERAL STYLES
///////////////////////////////////////////////*/
body.home {
    background: #FFF;
}
body {
    background: #ebebeb;
    font-size: 1.25rem;
}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary, .btn {
    font-family: 'futura-pt', sans-serif;
    font-weight: 500;
    font-style: normal;
  	font-stretch: normal;
  	letter-spacing: normal;
    
}
a {
    text-decoration: none;
    color: #7cb342;
}
a:hover {
    color: #4B5943;
}

h1, .h1 {
    font-weight: 800;
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-weight: 700;
}
.navbar-brand img {
    max-width: 205px;
    height: auto;
}

/*////////////////////////////////////////////////
BOOTSTRAP OVERRIDES
////////////////////////////////////////////////*/
.navbar {
    z-index: 5;
}
.navbar-dark .navbar-nav .nav-link {
    color: #dedede;
    text-transform: uppercase;
    font-size: 16px;
}
.nav-item {
    margin-left: 16px;
}
.bg-light {
    background-color: #ebebeb !important;
}
.btn {
    text-transform: uppercase;
    color: #FFF;
    border-radius: 0;
    font-size:14px;
    letter-spacing: 0.35px;
    font-weight: 500;
}
.btn-success,
.btn-primary{
    background-color: #7cb342 !important;
    border:0;
}
.btn-success:hover,
.btn-primary:hover{
    background-color: #4B5943 !important;
}
.text-success {
   color: #bcd89f !important; 
}
.btn-group-lg>.btn, 
.btn-lg {
    padding: .75rem 1.5rem;
}
.text-light {
    color: #dedede !important;
}
.border {
    border: 1px solid #d9d9d9!important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url(images/left-arrow-down@2x.png);
}
.accordion-button:not(.collapsed) {
    color: #FFF;
    background-color: #292e2a;
}
.accordion-button:focus {
    box-shadow: none;
}
.accordion-body {
    background: #FFF;
}
/*////////////////////////////////////////////////
HEADER
////////////////////////////////////////////////*/

header, header.sticky, header .navbar-brand img,
header.sticky .navbar-brand img{
    transition: all .3s ease;
}
header .navbar-brand img {
    max-width: 205px;
    height: auto;
}
header.sticky .navbar-brand img {
    max-width: 150px;
    height: auto;
}
.btn.nav-item {
    padding: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #7cb342 !important;   
}
header .btn-outline-light.nav-item:hover a,
.btn-outline-light.nav-item:hover{
    color: #7cb342 !important;
}
header .quote.btn:hover,
.quote.btn .nav-link:hover{
    background-color: #4B5943 !important;
    color: #FFF !important;
}
.phone a:before {
    content: '';
    display: inline-block;
    width: 19px;
    height: 12px;
    background: url(images/icon-phone.svg) no-repeat left center;
    background-size: contain;
}
.quote a:after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 12px;
    background: url(images/icon-arrow.svg) no-repeat right center;
    background-size: contain;    
}
.bg-dark,
.header-dark{
    background-color: #292e2a !important;
}
#page-banner .title {
    z-index: 1;
}
#page-banner .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(43, 46, 42,0.6);
    z-index: 0;
}
#breadcrumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#breadcrumbs li{
    font-size: 14px;
    color: #5e625f;
    font-family: 'ff-tisa-sans-web-pro', sans-serif;
}
#breadcrumbs .item-home {
    text-indent: -9999px;
    margin-right: 0;
}
#breadcrumbs .item-home a {
    background: url(images/house-icon.svg) no-repeat left center;
    display: block;
    width: 40px;
    height: 20px;
}
#breadcrumbs .separator {
    text-indent: -9999px;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(images/icon-awesome-arrow-right.svg) no-repeat left center;
}
#breadcrumbs strong {
    font-weight: normal;
}
/*////////////////////////////////////////////////
HOME PAGE
////////////////////////////////////////////////*/
#heroSlides h1 {
    font-size: 72px;
    font-size: calc(2.5rem + 1.5vw);
}
#heroSlides p {
    font-size: 20px;
}
#heroSlides .carousel-item {
    max-height: 90vh;
}
#heroSlides .carousel-caption {
    position: absolute;
    right: 10%;
    bottom: 5.25rem;
    left: 10%;
    padding-top: 0;
    padding-bottom: 0;
}
#heroSlides .carousel-control-next, 
#heroSlides .carousel-control-prev {
    width: 7%;
}
#heroSlides .carousel-indicators {
    bottom: 25px;
    margin-left: 10%;
    margin-right: 10%;
}
#heroSlides .carousel-indicators .active {
    opacity: 1;
    background-color: #bcd89f;
}
p.promise,
p.inquire{
    position: relative;
    padding-left: 7px;
}
p.promise:before,
p.inquire:before{
    content: '';
    display: inline-block;
    width: 2px;
    height: 34px;
    background: #bcd89f;
    position: absolute;
    left: -4px;
}
p.promise:after,
p.inquire:after{
    content: '';
    display: block;
    width: 152px;
    height: 2px;
    background: #bcd89f;
    position: absolute;
    left: -12px;
    bottom: -3px;
}
p.inquire:before {
    left: 50%;
    top: 24px;
    height: 15px;
}
p.inquire:after {
    width: 167px;
    bottom:auto;
    top: 24px;
    left: 50%;
    transform: translate(-50%, 0px);    
}
#roofing ul,
#remodel ul,
#content ul{
    margin: 40px 0;
    padding: 0;
    column-count: 2;
    list-style-type: none;
}
#roofing ul li,
#remodel ul li,
#content ul li{
    position: relative;
    color: #33691e;
    text-transform: uppercase;
/*    font-size: 14px;*/
    padding: 5px 0 5px 35px;
    line-height: 1.7;
}
#roofing ul li:before,
#remodel ul li:before,
#content ul li:before{
    content: '';
    display: inline-block;
    width: 23px;
    height: 24px;
    position: absolute;
    top: 5px;
    left: 0;
    background: url(images/check-mark.svg) no-repeat left center;
    background-size: contain;
}
/*////////////////////////////////////////////////
FORM STYLES
////////////////////////////////////////////////*/
body .gform_wrapper .ginput_complex .ginput_left input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]), 
body .gform_wrapper .ginput_complex .ginput_right input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]), 
body .gform_wrapper .ginput_complex .ginput_right select, 
body .gform_wrapper .ginput_complex input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]), 
body .gform_wrapper .ginput_complex select,
body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper select, .gform_wrapper textarea{
    border-radius: 0px;
    border: 1px solid #b3b5b9;
    padding: 4px;
}
body .gform_wrapper ul li.gfield {

}
body .gform_wrapper .top_label div.ginput_container {

}

::-webkit-input-placeholder,
.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield select { 
	color: #adadad;
	}
::-moz-placeholder { 
	color: #adadad;
}
:-ms-input-placeholder { 
	color: #adadad;
	}
:-moz-placeholder { 
	 color:#adadad;
	}

body .gform_wrapper .ginput_complex .ginput_left input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]), 
body .gform_wrapper .ginput_complex .ginput_right input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]), 
body .gform_wrapper .ginput_complex .ginput_right select, 
body .gform_wrapper .ginput_complex input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=file]), 
body .gform_wrapper .ginput_complex select,
body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.gform_wrapper select, .gform_wrapper textarea, body .gform_wrapper .top_label div.ginput_container{
    margin-top: 0;
}

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_page_footer input.button, .gform_wrapper .gform_page_footer input[type=submit] {
    width: auto;
    background: #7cb342;
    border: none;
    color: #FFF;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    margin: 0 !important;
    padding: .75rem 3rem;
}
.gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input[type=submit]:hover, .gform_wrapper .gform_page_footer input.button:hover, .gform_wrapper .gform_page_footer input[type=submit]:hover {
    background-color: #4B5943 !important;
}
/*////////////////////////////////////////////////
PAGE STYLES
////////////////////////////////////////////////*/

#content h2 {
    color: #0f2706;
    text-transform: capitalize;
    font-family: 'futura-pt-bold', sans-serif;
    font-weight: 700;
    font-style: normal;
}
#content h5 {
    color: #33691e;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 500;
}
#content p {
    color: #5e625f;
    font-family: 'futura-pt', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}
#content ul {
    margin: 20px 0;
}
/*SIDEBAR STYLES*/


#carousel-testimonials p {
    font-family: 'futura-pt', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    line-height: 32px;
}
#carousel-testimonials .carousel-indicators [data-bs-target] {
    background-color: #858886;
    opacity: 1;
    width: 40px;
    height: 3px;
}
#carousel-testimonials .carousel-indicators .active {
    background-color: #bcd89f;
    height: 4px;
}
#carousel-testimonials li.name {
    font-family: 'futura-pt-bold', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #5e625f;
    font-size: 16px;
}
/*////////////////////////////////////////////////
FOOTER
////////////////////////////////////////////////*/

footer {
    background-color: #0c1409;
}
footer .custom-logo-link img {
    display: block;
    max-width:90%;
    height: auto;
}
footer a {
    color: #dedede;
}

footer a:hover {
    color: #bcd89f;
}
footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

footer .serviceAreas ul {
    column-count: 2;
}

/*////////////////////////////////////////////////
RESPONSIVE
////////////////////////////////////////////////*/
@media (max-width: 576px) {

}

@media only screen and (max-width: 1023px) {
     .container, .container-sm {
        max-width: 100%;
    }    
    #roofing ul,
    #remodel ul{
        column-count: 1;
    }
}

@media screen and (max-width:992px){
    .navbar-collapse {
        position: absolute;
        background: #292e2a;
        top: 90px;
        right: -100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        transition: all 0.3s ease;
        display: block;
        /* z-index: -1; */
        box-shadow: -3px 6px 4px rgb(0 0 0 / 25%);
        opacity: 0;
        z-index: 100;
        width: 90%;
}
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 0%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.show {
        right: -12px;
        opacity: 1;
        transition: all 0.3s ease;
    }
    .nav-item {
        margin: 0 10px 10px 0; 
    }
}
@media screen and (max-width:859px){

    #heroSlides h1 {
        font-size: 5vw;
    }
    #heroSlides p {
        font-size: 14px;
    }
}
@media screen and (max-width:767px){
    header .navbar-brand img,
    header.sticky .navbar-brand img{
        max-width: 135px;
        height: auto;
    }   
    footer .custom-logo-link img {
        margin-left: auto;
        margin-right: auto;
    }    
}
@media screen and (max-width:660px){
    #heroSlides .carousel-item img {
        height: 400px;
        width: auto !important;
    }
}
@media screen and (max-width:479px){
	
}