﻿body{overflow-x:hidden}
.banner{width:100%;height:614px;background-image:url(garage-door-service/garage-door-pasadena-.png) ;background-size: 100% 100%;background-size: cover}
.header{background-color:#003d59;float:left;height:120px;background-size: 100% 100%}
nav{display:block;float:left;width:100%;font-size:16px;margin-top:0;margin-bottom:5px;margin-right:auto;text-align:center;background-color:#003d59}
.show-menu{display:none}
nav ul{margin:0;padding:0}
nav ul li{display:block;float:left;list-style-type:none;padding-top:0;padding-right:2px;padding-left:2px;padding-bottom:0;line-height:32px;border-radius:5px 0 5px 0;margin-left:3%;margin-right:2%;margin-top:5px;text-align:center}
label,nav input[type=checkbox]{display:none}
nav ul li a{color:white;text-decoration:none;font-size:15px;text-align:center}
nav ul li a:hover{color:white;text-align:center}
nav ul li a:link,a:visited{color:white;text-decoration:none;text-align:center}
nav ul li a:hover{color:white;text-align:center}
.logo{float:left;margin-left:10px}
.number{float:right;margin-right:20px}
.services{margin-top:-80px}
.script{margin-top:80px;margin-bottom:80px}
.script span{display: block;color:#003d59;font-size: 20px;font-weight: bold;margin-bottom: 20px}
.script h1{margin-top:10px}
.text{margin-top:10px}
.couponbg{width:100%;height:auto;background:url(garage-door-service/coupon-bg.png) center fixed no-repeat;background-color:rgba(255,255,255,.5);background-size:cover}
.coupon{margin-top:120px}
.formbg{width:100%;height:675px;background:url(garage-door-service/form-bg.png) center fixed no-repeat;background-color:rgba(255,255,255,.5);background-size:cover}
#form h4{font-size:35px;color:white;padding-bottom:20px;font-style:italic;margin-top:30px}
#form{float:left;width:100%;padding-left:2%;padding-top:5px;padding-right:2%;padding-bottom:5px;background-color:rgba(0,61,89,0.79);margin-top:35px}
.form-bg{width:80%;float:left;height:50px;margin-left:0;margin-top:2%;margin-right:1%;border:2px solid white;background-color:transparent;color:#01102a;font-family:Arial;font-size:25px;padding-left:1%}
.request-bg{width:80%;float:left;height:100px;margin-left:0;margin-top:2%;margin-right:1%;padding-top:3%;border:2px solid white;background-color:transparent;color:#01102a;font-family:Arial;font-size:25px;padding-left:1%}

#apply{width:100%;margin-top:0;margin-top:20px;margin-bottom:20px}
#submit{width:50%;margin-left:0;margin-right:45%;border:2px solid white;height:50px;background-color:#003d59;color:white;margin-top:2%;font-family:Arial;margin-bottom:2%;font-size:35px}
/*
.marquee{width:100%;margin-top:20px;margin-bottom:50px;overflow:hidden;white-space:nowrap;box-sizing:border-box;animation:marquee 50s linear infinite;color:#fff}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{0%{text-indent:27.5em}0
100%{text-indent:-105em}
}
*/
.footer{width:100%;background-color:#003d59;padding-top:10px}
.footer h4{background-color:#0d1e32;text-align:center;margin-left:1%;margin-right:1%;margin-top:5px;padding-top:1px;padding-bottom:5px;color:white}
.footer a{line-height:14px;color:white;text-decoration:none}
.section ul{width:35%;line-height:35px;float:left;margin-left:40px;color:white}
.section ul li{text-decoration:none}
.section ul li a{text-decoration:none;color:white}
.section li{list-style-image:url(garage-door-service/sign.png)}
.section ul li a:hover{color:white}
.pfotter{line-height:20px;font-size:15px;color:white;margin-left:20px;text-decoration:none}
.socialicon{margin-top:5px;margin-bottom:10px;margin-left:0.5%}
.copy-social{background-color:#0d1e32;text-align: center ;padding-top: 20px}
.brands{position:relative;overflow:hidden;height:150px;width:100%}

.side-brands{float:left;width:100%; margin-top:2%}

.brand-heading{margin-bottom:3%}

.brands__wrapper img{width:100px; height:auto}

.brands:hover .brands__wrapper,.brands:hover .brands__preWrapper{animation-play-state:paused}

.brands__preWrapper{position:relative;width:100%;height:8.5rem;transform:translateX(0%);animation:scroll1 10s linear infinite;animation-delay:4s;animation-direction:alternate;will-change:transform}

.brands__wrapper{position:absolute;white-space:nowrap;transform:translateX(0%) translateZ(0);animation:scroll2 10s linear infinite;animation-delay:4s;animation-direction:alternate;will-change:transform}

.brands__wrapper>p,.brands__wrapper>img{position:relative;display:inline-block;margin:0 1rem;vertical-align:middle}

.brands__wrapper>p{max-width:15rem;max-height:8.5rem}

@keyframes scroll1{0%{transform:translateX(-0%)}

100%{transform:translateX(100%)}

}

@keyframes scroll2{0%{transform:translateX(0%) translateZ(0)}

100%{transform:translateX(-100%) translateZ(0)}

}


@media only screen and (max-width: 500px)
{.number{float:right;margin-right:0px}
	.banner{width: 98%;margin-top: 0px;padding-top: 0px}
.show-menu{display:block;color:#fff;font-size:18px;font-weight:bold;text-align:center;line-height:40px}
input[type=checkbox]:checked ~ #sub-menu{display:block}
#sub-menu{display:none}
nav{background-color:#0d1e32}
nav ul{margin:0}
nav ul li{border-bottom:solid 1px #da7e03;width:100%;padding:0;margin-top:0}
nav ul li a{display:block;text-align:center;line-height:30px;background-color:#0d1e32;color:#fff}
nav ul li a:link,a:visited{color:white;text-decoration:none}
nav ul li a:hover{color:white}
	.img{width:98%;margin-left: 1%;margin-right: 1%}
}
@media only screen and (max-width: 400px)
{.number{float:right;margin-right:0px;margin-bottom: 2px}
	.banner{width: 98%;margin-top: 0px;padding-top: 0px}
.show-menu{display:block;color:#fff;font-size:18px;font-weight:bold;text-align:center;line-height:40px}
input[type=checkbox]:checked ~ #sub-menu{display:block}
#sub-menu{display:none}
nav{background-color:#0d1e32;margin-top: 0px;margin-bottom: 0px}
nav ul{margin:0}
nav ul li{border-bottom:solid 1px #da7e03;width:100%;padding:0;margin-top:0}
nav ul li a{display:block;text-align:center;line-height:30px;background-color:#0d1e32;color:#fff}
nav ul li a:link,a:visited{color:white;text-decoration:none}
nav ul li a:hover{color:white}
.img{width:98%;margin-left: 1%;margin-right: 1%}
}

@media only screen and (max-width: 982px)
{.number{float:right;margin-right:0px}
	.banner{width: 98%;margin-top: 0px;padding-top: 0px}
.show-menu{display:block;color:#fff;font-size:18px;font-weight:bold;text-align:center;line-height:40px}
input[type=checkbox]:checked ~ #sub-menu{display:block}
#sub-menu{display:none}
nav{background-color:#0d1e32}
nav ul{margin:0}
nav ul li{border-bottom:solid 1px #da7e03;width:100%;padding:0;margin-top:0}
nav ul li a{display:block;text-align:center;line-height:30px;background-color:#0d1e32;color:#fff}
nav ul li a:link,a:visited{color:white;text-decoration:none}
nav ul li a:hover{color:white}
.img{width:98%;margin-left: 1%;margin-right: 1%}
}
@media only screen and (max-width: 770px)
{.hide{display: none;}
.hide-parent{margin-top: 270px;}
}

 form .form-control{margin-top: 10px;padding-top: 8px; padding-bottom: 8px;color: #ffffff;padding-left: 20px;background-color: #003d59; border: none;border-radius: 0;}
.form-control::placeholder{color: rgba(255, 255, 255, .7)}
form.CUS input.subject { display: none; }
 .send{position: relative;
  line-height: 35px;
  width: 100%;
  background:#5fa9ff;
  border: 2px solid #5fa9ff;
  color: rgb(27, 27, 27);
  margin-top: 10px;
  /* border-radius: 10px; */
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 1px;
  overflow: hidden;
  z-index: 1;
  padding: 0px;
  transition: 1S}
.CUS legend {
    font-size: 25px;
    text-align: left;
    color: #ffffff;
    padding-top: 20px;
}
