@import './bootstrap/v5.3.2/bootstrap.css';

/* Universal selector */
/* Remove all default margins and padding */
* {
    margin:0;
    padding:0;
    /* Temporary borders */
    border:solid 0 #f00;
}

img {
    border : 0;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    width: auto\9; /* ie8 */
}



body {
    background-attachment:fixed;
    background-position:top;
    font-family: 'Roboto', sans-serif;
}


.container {
    text-align: center;
    background-color: #FFF;/*#FFF - white  */
    margin: 0 auto;
    height:auto;
}

.wrapper {
    text-align: center;
    margin:0 auto;
    height:auto;

}

h1 {
    color: #197ECC;
    padding-top:25px;
    padding-bottom:15px;
}


p {
    text-align: justify;
    color: #43464b;
    font-family: 'Roboto', sans-serif !important;
}


/*Bootstrap Overrides*/
.card-title {
    color: #dc3545;
}
.painter-guy-card {
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    border: 1px solid #31648c;
}

.painter-guy-blue {
    color: #31648c;
}

.painter-guy-card-header {
    background: #31648c;
    color: #ffffff;
}

.text-primary {
    color: #000000;
}



.header {
    text-align: center;
    vertical-align: bottom;
    margin-top: 0px;
    border: 0px solid #ECE7E5;
    padding: 0px;
    background-color: #FFF;

}

.phone-top {
    float: right;
    display: block;
    font-size: 1.3em;
    width:auto;
    vertical-align: bottom;
    white-space: nowrap;/* stops phone number hyphen break */
    margin-right: 5em;
    padding:0;
    background-color: #FFF;/*fomerly Red Bar */


}

.phone-top a {
    color:#dc3545;
    text-decoration:none;
}


.phone-top a:hover {
    color:#197ECC;
    text-decoration:none;
}



/* Horizontal Nav Bar Stuff */

/* Add a blue background color to the top navigation */
.topnav {
    overflow: hidden;
    background-color:#31648c;
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #dedede;
    text-align: center;
    padding: 10px 16px;


}

/* Add a red background color to the top navigation-Estimate */
.topnav2 a{
    background-color: red;
    margin: 4px;
    width: 220px;
    color: #FFF;
    font-weight: bold;

}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #197ECC;
    color: #FFF;
}






/* Change the color of Estimate block on hover to green*/
.topnav2 a:hover {
    background-color: #009900;
    color: #FFF;
}



/* Style the links inside the Estimate block */
.topnav2 a {
    float: left;
    display: block;
    color: #FFF;
    text-align: center;
    padding: 6px 5px;
    text-decoration: none;
    font-size: 0.9rem;
    text-shadow: 1px 1px 1px #2D1E00;
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}


.clear-bg {
    background: transparent;
    border: none;
}

.left {
    border: 3px solid #ECE7E5;
    padding:10px 20px;
    box-sizing: border-box;
    margin-top: 30px;
    margin-right: 20px;
    margin-bottom: 10px;
    background-color: white;
}


.right {
    color:white;
    box-sizing: border-box;
    margin-top: 30px;
    padding:10px;
    text-align: center;
    background-color: #D8AF08;/* dark Orange*/

}

.rotcontent {
    background-color: white;
    margin:50px 200px;
}


.right li { padding-bottom: 1.1em; }






/* Google Review Styles Begin*/

.reviews-index {
    background-color: #31648c;
}

.reviews-index h3{
    font-size:30px;
    padding:10px;
}



#rblock1{
    background-color:#fff; /*white*/
    width:auto;
    font-weight:bold;
    font-family: 'Roboto', sans-serif;
    font-size:13px;
    text-align: left;
    padding:10px;
}


#rblock2{

    float:left;
    background-image:url('images/stars.png');

    width:70px;
    height: auto;
}

#rblock3{
    background-color:#FFF; /*white*/
    height: auto;
    text-align:left;

}

#rblock4{
    background-color:#fff; /*white*/
    height: auto;
    text-align:left;
    line-height: 20px;
    font-family: 'Roboto', sans-serif;
    font-size:13px;
    padding:10px;

}


.review-box {
    text-align: center;
   
    height: auto;
    margin: 15px;
    padding: 10px;
    vertical-align: bottom; /* without htis, inline blocks are staggered in Safari*/

}

.review-box p {
    color: #666;
    font-family: 'Roboto', sans-serif;
    font-size:1em;

    line-height:1.3;        /* property is used to specify the space between lines:*/

}

/* Used to style the button on the review section of home page beneath slide show*/
.btn-review {
    text-decoration:none;
    text-align: center;
    vertical-align: middle;
    font: 17px/23px 'Roboto', sans-serif;        /*The first value is the font-size value, and the second value is the line-height value.*/
    padding-top:10px;                                                /* Setting padding-top and bottom the same vertically centers the inline element a Read ore reviews*/
    padding-bottom:10px;
    background-color:#4C93EF;                                                 /* Sets blue color of button "Read More" button's background color*/
    -webkit-border-radius:2px;
    border-radius:2px;
    font-weight: bold;                                        /* Sets text shadow color of  "Read More" font*/
    position:relative;
    margin-top:50px;
}

.btn-review a {
    text-decoration: none;
    color:#fff;                                                               /* Sets font color of  "Read More" button.*/
    font-size: 17px;
    text-shadow: 1px 1px 1px #2D1E00;
}



.btn-review:hover {
    text-decoration:none;
    background:#c43e6e;
}






/* Used to style the blue button on the servicesblocks*/


.btn {
    display:inline-block;
    text-decoration:none;
    text-align: center;

    font:17px/23px 'Montserrat',Arial,Helvetica,sans-serif;         /*The first value is the font-size value, and the second value is the line-height value.*/
    padding:10px;
    background-color:#4C93EF;                                                 /* Sets blue color of button "Read More" button's background color*/
    -webkit-border-radius:2px;
    border-radius:2px;
    font-weight: bold;                                        /* Sets text shadow color of  "Read More" font*/
    position:relative;
    width:100px;

    margin:10px;
}


.btn a {
    text-decoration: none;
    color:#fff;                                                               /* Sets font color of  "Read More" button.*/
    font-size:17px;
    text-shadow: 1px 1px 1px #2D1E00;
}



.btn:hover {
    text-decoration:none;
    background:#c43e6e;
}


/* Google Review Styles End */




/* C-T-A Styles Begin */

h2{
    font-size: 30px;
    color:white;
    line-height: 50px;

}

h3{
    font-size: 25px;
    color:white;
    line-height: 50px;

}


.banner2 {
    background-color: #0066cc;
    margin-top:25px;
}


.banner2-content {
    width:90%;
    margin:0 auto;
    padding:15px;
    text-align: center;

}

.cta-btn {
    display:inline-block;
    text-decoration:none;
    text-align: center;

    font:17px/23px 'Montserrat',Arial,Helvetica,sans-serif;         /*The first value is the font-size value, and the second value is the line-height value.*/
    padding:10px;
    background-color:red;                                                 /* Sets blue color of button "Read More" button's background color*/
    -webkit-border-radius:2px;
    border-radius:2px;
    font-weight: bold;                                        /* Sets text shadow color of  "Read More" font*/
    position:relative;
    width:250px;

    margin:10px;
}

.cta-btn a {
    text-decoration: none;
    color:#fff;                                                               /* Sets font color of  "Read More" button.*/
    font-size:17px;
    text-shadow: 1px 1px 1px #2D1E00;
}

.cta-btn:hover {
    text-decoration:none;
    background:#009900;
}



/* C-T-A Styles End */










/* Services starts here */

.services{
    margin:0px 100px;

}




.floating-box {

    background-color: #fff;
    display: inline-block;
    width: 240px;
    height: 550px;
    margin-top:15px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom:15px;
    border: 2px solid #ECE7E5;
    padding: 10px;
    vertical-align: bottom; /* without htis, inline blocks are staggered in Safari*/

}





.floating-box h4 {
    color: red;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-size:1.2em;
    font-weight:bold;
    line-height:1.6;        /* property is used to specify the space between lines:*/
    margin-top: 10px;
    margin-bottom: 10px;
}


.floating-box p {
    color: #666;
    font-family: 'Roboto', sans-serif;
    font-size:1em;
    line-height:1.3;        /* property is used to specify the space between lines:*/

}




/* Services ends here */



/* Payment options block begins */


.payment-icons li {
    list-style-type: none;
    padding-bottom:20px;
}


.payment-block {
    text-align: center;
    padding: 30px 0 20px 0;
    background-color: #000000;
}

.payment-footer-block {
    text-align: center;
}

.payment-block h3 {
    color:white;
}


.payment-icons{
    display: inline-block;
    padding-right:30px;
}

.footer-block {
    background: #000000;
}

.footer {
    text-align:center;
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    width:auto;
    vertical-align: bottom;
    white-space: nowrap;/* stops phone number hyphen break */
    margin: 0;
    padding:15px 15px;
    background-color: #000000;
}

.contact-block {
    text-align:center;
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    width:auto;
    vertical-align: bottom;
    white-space: nowrap;/* stops phone number hyphen break */
    margin: 0;
    padding:15px 15px;
    background-color: #000000;
}


.phone-bottom {
    text-align:center;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    width:auto;
    vertical-align: bottom;
    white-space: nowrap;/* stops phone number hyphen break */
    margin: 0;
    padding:5px 15px;
    background-color: #262a35;/*Dark Grey Bar */


}

.phone-bottom a {
    text-decoration:none;
    color:#197ECC;
}


.phone-bottom a:hover   {color:white; background-color:black; text-decoration:none}


.bbb{
    padding-top:50px;
    background-color: #FFF;
    text-align: center;

}



/* Media Q begins here */


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        border:solid 0px #999;
        display: block;
        text-align: left;
    }

}





/* media Q applies when screen is 800px or smaller */
@media only screen and (max-width: 800px) {

    .services{

        margin:0px 0px;

    }


    .floating-box {
        vertical-align: top;
        margin-right: 5px;
        margin-left: 5px;

    }






    h2{
        font-size: 30px !important;
        line-height: 25px !important;


    }

    h3{
        font-size: 18px! important;
    }

    .banner2-content {
        width: auto !important;
    }



    .phone-top {
        padding-top:10px;
        margin-bottom:10px;
    }

    .left {
        background-color:white;
        margin-bottom:2px;
    }


    .right {
        color:white;
        background-color: #D8AF08/* #D8AF08 dark Orange*/
    }
    .right li  { font-weight: bold; }
    .right ul {padding-left:20px; }

    .rotcontent {
        background-color: white;
        margin:1px;
    }
}