/**********************************
GENERAL
***********************************/

html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

body p {
    font-family: Georgia, Times, serif;
    font-size: 110%;
}

div.contentContainerSpecial {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.content{
    width: 650px;   
    font-size: 1.1em;
    margin-top: 50px;
}

.image{
    height: 300px;
    width: 400px;
}

.container{
    margin-top: 1%;
}

.btn{
    margin-top: 1%;
}

.row{
    padding-top: 3%;
}

.center {
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.large {
    font-size: 300%;
}

#emailUs {
    font-size: 156%;
}

.contactIcons{
    float: left;
}

.indexCaro img{
    width: auto;
}

/**********************************
LINKS
***********************************/

a[href^=tel] {
 color: red;
}

a {
    color: #128299;
}

a:hover {
    color: #0033ff;
}

.link {
    color:#0642e5;
}

/**********************************
HEADING
***********************************/
h1 { font-family: Arial, sans-serif;}
h2 { font-family: Arial, sans-serif;}
h3 { font-family: Arial, sans-serif;}
h4 { font-family: Arial, sans-serif;}
h5 { font-family: Arial, sans-serif;}
h6 { font-family: Arial, sans-serif;}

.heading {
    background-color: #0033ff;
    color: white;
}

.topHeader{
    margin-bottom: 5%;
}

#logo {
	position: relative;
	top: -14px;
}

/**********************************
NAVIGATION
***********************************/

.navbar {
	font-size: 1.2em;
}

.navbar-left {
	margin-left: 10%;
}

.navbar-brand {
    max-width: 50%;
}

#phone1 {
	font-size: 200%;
	position: relative;
	left: 40px;
	color: red;

	-webkit-animation: colorChange 1s;
	-moz-animation: colorChange 2s;
}

@-webkit-keyframes colorChange{
	from {color:black;}
	to {color:red;}
}
@-moz-keyframes colorChange{
	from {color:black;}
	to {color:red;}
}

#maintanence {
	font-size: 130%;
	font-family: Arial Black, Gadget, sans-serif;
}

img.border {
    border-width: 5px;
    border-color: Black;
}

a{
	color: #128299;
}

a:hover {
	color: #0033ff;
}

/**********************************
HOME PAGE 
***********************************/
.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

.portImg {
    width: 289px;
    height: 217px;
    border: 2px solid black;
}

.portfolioDisplay{
    padding-left: 4%;
}

#displayImg{
    width: 448px;
    height: 336px;
    margin-top: 40px;
}

.serviceAreas {
    font-size: 90%;
    margin: 0 30px 0 0;
    padding: 0;
    float: left;
}

.testimonial {
    background-color: yellow;
    font-style: italic;
}

.author {
    text-align:left;
    margin-right: 30%;
}

.smallDescription {
    font-size: 1.1em;
}

.CTA {
    font-size: 210%;
    text-decoration: underline;
    color: red;
}

#aboutLogo {
    width: auto;
    height: 300px;
    max-height: 300px;
}

/**********************************
HOME PAGE CAROUSEL
***********************************/

header.carousel {
    height: 50%;
    margin-top: 3%;
}

header.carousel .carousel-inner,
header.carousel .item,
header.carousel .item.active {
    height: 100%;
    width: 100%;
}

header.carousel .fill {
    width:  100%;
    height: 100%;
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat;
}

header.carousel .nofill{
    width:  100%;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

header.carousel h2{
    color: black;
}

/**********************************
ABOUT PAGE
***********************************/

/**********************************
ABOUT PAGE CAROUSEL
***********************************/
.boyscout{
  width: auto;
  height: auto;
  max-width: 450px;
  max-height: 338px;
  margin: 0 auto;
  text-align: center;
}



/**********************************
BRANDS PAGE
***********************************/
.brands{
    font-size: 115%;
    font-family: Georgia, serif;
}

#brandsDisclaimer {
    font-size: 90%;
    margin-top: 5%;
}

#brand{
    max-width:100%;
    margin-top: 5%;
}

/**********************************
404 PAGE
***********************************/

.error-404 {
    font-size: 100px;
}

/**********************************
FOOTER
***********************************/

footer {
    margin: 50px 0;
    max-width: 100%;
}

footer nav{
    width: 100%;
    height: 4em;
    background-color: #297C06;
    text-align: center;
    margin-bottom: 1em;
}

footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

footer nav li {
    margin-top: 1em;
  display: inline-block;
}

footer nav a {
  font-weight: 800;
  padding: 15px 10px;
  color: white;
}

/**********************************
RESPONSIVE STYLES
***********************************/

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}

/***** RESPONSIVE IMAGES ****/

/* mobile */
@media screen and (max-width: 620px) {
  #towa {
    content:url("../images/TOWA-mobile.png");
    width: 100px;
    max-width: 100%;
    height: 102px;
    float: left;
  }
   #tceq {
    content:url("../images/TCEQ-mobile.png");
    width: 100px;
    max-width: 100%;
    height: 102px;
    float: left;
    margin-left: 30%;
  }
}

/*Desktop*/
@media screen and (min-width: 620px) {
  #towa {
    content:url("../images/TOWA.jpg");
    width: 213px;
    max-width: 100%;
    height: 217px;
    float: left;
  }
  #tceq {
    content:url("../images/TCEQ.jpg");
    width: 208px;
    max-width: 100%;
    height: 213px;
    margin-left: 30%;
  }
}

/**********************************
COLORS
***********************************/
.black {
    color: black;
}

.white{
    color: white;
}

.red {
    color: red;
}

.danger {
    color: blue;
}

#emailUs {
    font-size: 156%;
}

.blue {
    color: blue;
}