﻿/*----- header / header elements -----------------------------------------*/

/*make logo larger*/
.header .logo img {
    width: 170px;
}

@media (max-width: 991px) {
    .header .logo img {
        width: 125px;
    }
}

@media (max-width: 480px) {
    .header .logo img {
        width: 100px;
    }
}

@media (max-width: 1200px) {
    /*remove padding to allow for all tabs to fit on one line in tablet mode*/
    #nav-bar div.col-md-9 {
        padding-left: 0;
    }
}

article.header-bar {
    display: block;
    float: left;
    width: 100%;
}

.btn-blue {
    background-color: #033363;
    color: #fff;
    margin-top: 15px;
}

    .btn-blue:hover {
        background-color: #6d84b0;
    }

/*text color of navbar elements: navy*/
.header .header-wrapper .primary .navbar .navbar-collapse .nav > li > a {
    color: #003b77;
}

/*breadcrumb box light purple*/
.breadcrumb-box, .breadcrumb, .breadcrumb li a, .breadcrumb li.active {
    background-color: #6c83af;
    color: white;
}

/*float navbar right*/
.header .header-wrapper .primary {
    float: right;
}

.header-two {
    color: white;
}

.header .header-wrapper .primary .navbar .btn-navbar .icon-bar {
    background-color: #6c83af !important;
}

/*----- body -----------------------------------------*/

/*this will disallow line-breaking within text of this class*/
span.avoidwrap {
    display:inline-block;
}

/*color of first heading below blue bar*/
h2.title {
    color: #6d84b0 !important;
}

.title-box h1.title {
    color: #6d84b0;
    padding-top: 0px;
}

/*general text color*/
p, body, .work-description, address div {
    color: #092643;
}

@media (min-width: 1200px) {
    div.container .reduced-width {
        margin-right: 200px;
    }
}


/*formatting blue bar right below nav-bar - currently contains Call To Action*/
div.full-width-box.header-box  {
    background-color:#033363;
    padding-top: 25px;
    padding-bottom: 0px;
    border-top-width: 5px;
    border-top-color: #6d84b0;
}

/*call to action text*/
.header-box p {
    color: white;
    font-family: Arimo, sans-serif;
    font-weight: normal;
    font-size: 17px;
    margin-bottom: 25px;
    margin-right: 5px;
    text-align: right;
}

/*adjust margins on cta depending on page size*/
@media (max-width: 768px) {
    .header-box p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .header-box p {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .header-box p {
        margin-right: 13px;
    }
}

/*call to action link*/
.header-box p a {
    color: #a6bade;
}

.title-box:before {
    background: #42609a;
}

/*class for adding a small amount of padding below an element*/
.bottom-padding-small {
    padding-bottom: 40px;
}

/*----- footer -----------------------------------------*/

/*colors*/
#footer .footer-top {
    background: #e9ecf3;
}

#footer .footer-bottom {
    background: #ecf0f5;
}

/*color of all borders*/
* {
    border-color: #d2d6de;
}

/*footer text color*/
#footer .footer-bottom, #footer p, #footer aside.widget {
    color: #78808f;
}

#footer aside.links a:hover {
    color: #4f5a6e;
}

#footer .sidebar .widget .title-block .title, #footer .sidebar .widget .title-block .title a {
    color: #092643; 
}

#footer .sidebar .widget .title-block .title a:hover {
    text-decoration: none;
    color: #1e4164;
}

.footer-bottom {
    text-align: center;
}

/*footer affiliation logos: padding and sizing*/
.footer-affil {
    padding-top: 3px;
    padding-right: 6px;
    padding-bottom: 10px;
}

#bbb-logo {
    height: 53px;
}

#epa-logo {
    height: 64px;
}

#energystar-logo {
    height: 64px;
    padding-top: 0px;
}

/*stop 3rd column in top-footer from dropping down to the row below*/
@media (max-width: 991px) {
    #footer .sidebar .widget:nth-child(2n+1) {
        clear:initial;
    }
}

/*increase margins for footer-top columns in size lg*/
@media (min-width: 1200px) {
    #footer .sidebar .widget {
        padding-left: 50px;
        padding-right: 50px;
    }
}


/*----- HOME PAGE -----------------------------------------*/

/*change margin below services section*/
#home-pg {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*color of services bubble*/
div.big-icon.bg {
    background-color: #ecf0f5;
}

.big-icon, .big-icon .icon {
    color: #003e79;
}

/*give margins to art dept's custom icons*/
.big-icon .icon {
    margin-top: 21px;
    margin-right: 30px;
    font-size: 60px;
}

/*customize margins for each icon*/
.icon.icon-lowsloperoofing {
    margin-right: 28px;
}

.icon.icon-steepsloperoofing, .icon.icon-chimney {
    margin-top: 17px;
    margin-right: 27px;
}

.icon.icon-guttersrainware {
    margin-top: 23px;
}

.icon.icon-masonry {
    margin-right: 33px;
}

/*format title of each service bubble*/
div.big-services-box p.title {
    font-size: 18px;
    margin-bottom: 10px;
}

div.big-services-box div.text-small {
    margin-left: 10px;
    margin-right: 10px;
}

/*creating custom top of page banner*/
#home-banner h2 {
    text-align: center;
    margin-top: 50px;
}

#home-banner p {
    margin-left: 65px;
    margin-right: 65px;
    text-align: center;
    font-size: 18px;
}

div.big-services-box p {
    font-size: 18px;
}

/*----- ABOUT PG -----------------------------------------*/

/*change colors of accordions*/
.panel-group .active.panel .panel-heading > .panel-title > a, 
.panel-group .active.panel .panel-heading > .panel-title > a:hover,
.panel-group .panel-default .panel-heading > .panel-title > a:before,
.panel-group .panel-default .panel-heading > .panel-title > a:after {
    background-color: #6d84b0;
}

/*make text wraparound accordions when not in xs size*/
#accordion-box {
    width: 600px;
    float: right;
    display: inline-block;
    padding-left: 30px;
    padding-bottom: 10px;
}

#accordion-box p {
    margin-bottom: 12px;
}

ul.about-bullets {
    padding-left: 30px;
    margin-bottom: 24px;
}


/*----- PRODUCTS PG -----------------------------------------*/

/*remove background and border for logos*/
#product-logos a,
#product-logos-2 a,
#product-logos-3 a {
    border:none;
}

.client {
    background: none;
}

.services-row-2 div.big-services-box {
    margin-bottom: 0px;
}

.simonton {
    margin-top: 18px;
}

.wincore {
    margin-top: 22px;
}

@media (max-width: 768px){
    .simonton,
    .wincore {
        margin-top: 0;
    }

     #product-logos-2 {
        margin-bottom: 0;
    }
}

@media (max-width: 480px){
    .simonton,
    .wincore {
        margin-top: 0;
    }

    #product-logos-2 {
        margin-bottom: 0;
    }
   
}

/*----- PHOTOS PG -----------------------------------------*/

/*set magnifying glass to left align*/
a.work .bg-images {
    text-align: left !important;
}

/*change color of magnifying glass*/
.gallery-images:hover .bg-images i:before, .img-thumbnail:hover .bg-images i:before {
    color: #6d84b0;
}

/*make space between photos and accordion*/
@media (min-width: 768px){
    .col-photos {
        padding-right: 35px;
    }
}




/*----- TESTIMONIALS PG -----------------------------------*/

/*repositioning name under testimonial blockquote*/
.respond-blockquote .name {
    margin-left: 8px;
}

/*resize Name font*/
.respond.respond-blockquote .name strong {
    font-size: 100%;
}

/*change color of solid color blockquotes*/
.bg-info {
    background: #6c83af !important;
}

.border-info{
    border-color: #6c83af !important;
}

/*change color of blockquote carat*/
div.description.border-info::before {
    border-top-color: #6c83af !important;
    color: #6c83af !important;
}

/*change color of blockquote carat*/
.respond .description.border-info:before {
    border-top-color: #6c83af !important;
}

.respond .description.bg-info:before {
    border-top-color: #6c83af !important;
    bottom: -19px;
}

/*change color of blockquote quotes*/
.respond.respond-blockquote.border .border-info blockquote:before, .respond.respond-blockquote.border .border-info blockquote:after {
    color: #6c83af !important;
}

/*change color of text in bordered blockquote*/
div.respond-blockquote.border blockquote {
    color: #092643;
}

/*color of names/locations*/
div.respond-blockquote.respond div.name {
    color: #78808f;
}

/*hide p2 initially*/
#testimonials-p2 {
    display: none;
}

/*change font size and style*/
.respond .description {
    font-style: normal;
    line-height: 1.6;
}

.respond .description blockquote {
    font-size: inherit;
}


/*----- WARNING SIGNS -------------------------------------*/

/*change formatting for warning sign bullets section*/
.warning-bullets {
    padding-left: 25px;
    margin-bottom: 0px;
}

.warning-bullets > li {
    margin-bottom: 5px;
}

/*margin below intro text*/
.ws-intro {
    margin-bottom: 30px;
}

/*space between heading and bullets*/
.ws-heading {
    margin-bottom: 15px;
}

/*decrease padding between columns*/
div.work-single div.col-xs-6 {
    padding-left:5px;
    padding-right:0px;    
}

/*Center caption under carousel image*/

.warning-image-caption {
    text-align: center;
}

/*more padding needed for warning sign bullets in xs size*/
@media (max-width: 768px) {
    .ws-container {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 22px;
        margin-left: auto;
        margin-right: auto;
        width: 550px;
    }

    .ws-section {
        width: 550px;
    }
}

/*remove extra padding once screen is too small*/
@media (max-width: 570px) {
    .ws-container {
        padding-left: 10px;
        padding-right: 10px;
        width: initial;
    }

    .ws-section {
        width:initial;
    }
}

/*switch from 3 column layout to 2 at size xs*/


/*----- NEWS PG -----------------------------------------*/

/*change color of date and article type, below post summary*/
.post footer.entry-meta {
    color: #6d84b0;
}

.post footer.entry-meta a {
    color: #6d84b0;
    text-decoration: underline;
}

.post footer.entry-meta a:hover {
    color: #4464a1;
}

/*decrease article title font size*/
.post .entry-title {
    font-size: 20px;
}


/*remove button look from the paginations*/
.pagination-btn {
    background: none;
    border: none;
    padding: 0 0 0 0;
}

/*change colors of pag buttons*/
.pagination > li > span {
    background:#d2d6de; 
}

.pagination > li > span:hover {
    background: #004096;
}

.pagination > .active > span, .pagination > .active > span:hover {
    background: #002f6f;
}

/*hide page 2 initially*/
#news-p2 {
    display: none;
}



/*----- REQUEST A QUOTE -------------------------------------*/

/*form colors*/
.form-box .buttons-box .btn {
    background: #6c83af;
    border-color: #6c83af;
}

/*border color of buttons in form*/
.form-control {
    border-color: #d2d6de;
}

/*and padding*/
.form-box {
    background-color: transparent;
    margin-bottom: 0;
    padding:25px 0 0 0;
}

/*less space between input textboxes on form*/
.selectBox, .form-control {
    margin-bottom: 8px;
}

/*add more bottom margin to last textbox to make room between box and button*/
#description-work {
    margin-bottom: 22px;
}

/*less space between info title and info (ie. between "Address" and "222 3rd St ...")*/
.contact-info .title {
    margin-bottom: 8px;
}

/*more padding for contact info within sidebar*/
.contact-info {
    margin-top: 0px;
    padding-bottom: 15px;
}

#contact-sidebar-left {
    display:none;
}

/*margin inbetween quote form and contact info below for size XS*/
#contact-sidebar-bottom {
    margin-top: 40px;
}

/*add margin for size SM*/
@media (min-width: 768px) {
    #contact-sidebar-bottom {
        margin-top: 80px;
    }
}

@media (min-width: 992px){
    .map-box {
        padding-top: 27px;
    }

    /*more space between contact-sidebar and quote request form*/
    .contact-sidebar {
        padding-left: 60px;
    }

    #contact-sidebar-left {
        display: initial;
    }

    #contact-sidebar-bottom {
        display: none;
    }

    .contact-info {
        margin-top: 28px;
    }
}


@media (min-width: 1200px){
    .map-box {
        padding-top: 7px;
        height: 410px;
    }    
}

ul.faq-bullets {
    list-style: none;
}

ul li.faqBullet::before {
    content: "\2022";
    color: #6d84b0;
    font-weight: bold;
    display: inline-block;
    margin-left: -3em;
}