﻿body{overflow-x:hidden}
nav{
display: block;
float: left;
width: 100%;
font-size: 16px;
margin-top: 25px;
margin-right: 0;
}
.show-menu{display:none}
nav ul{margin:0;padding:0 ;color:#fff}
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: 1%;
margin-top:20px;color:#fff
}
label,nav input[type=checkbox]{display:none}
nav ul li a{color: white;text-decoration:none;font-size: 14px;}
nav ul li a:hover{
color: white
}
nav ul li a:link,a:visited{color: white;text-decoration:none}
nav ul li a:hover {
color: white;
}
/*Light Box*/
.lightbox-target{position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,0.7);opacity:0;-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;overflow:hidden;z-index:2}
.lightbox-target iframe, .lightbox-target img{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;transition:.5s ease-in-out;z-index:100}
a.lightbox-close{width:100%;height:100%;position:absolute;transition:.5s ease-in-out;opacity:0;top:0;left:0}
.lightbox-target:target{opacity:1;top:0;bottom:0}
.lightbox-target:target img{max-height:100%;max-width:100%}
/*Light Box*/

.header{background-color: rgba(41, 41, 41, 0.81);padding-top: 10px}
.service{margin-top:10%}
.telephone{margin-top: 400px}
.banner{background-color:#292929;background-image: url(locksmithes-pictures/locksmith-cypress-tx.png);background-size:cover;height:730px;}
#phone{color:#da7e03;border-radius: 0px;font-size:20px;margin-top:10%;margin-bottom: 7%;text-decoration:none}
/*#phone:hover{background-color:#292929;width: 27%;height: 30%;border-radius:20px;margin-left:5%;margin-right: 5%;color: #f9b03a;font-size:50px;margin-top: 10%;text-align: center;text-decoration:none}*/
.script{background-color:#292929 ;padding-top:30px;padding-bottom:20px}
.script h1{color:#f9b03a;margin-bottom:20px;margin-top:60px}
.script h2{color:#f9b03a;}
.script h3{color:#f9b03a;}
.script span{color:#f9b03a;font-size: 20px}
.script li{color:white;}
.script p{color:white;}
.parallex{width:100%; height:auto;background: url(locksmithes-pictures/parallex.png) center fixed no-repeat;background-color:rgba(255,255,255,.5);background-size:cover}
form label{opacity: 0; position:absolute;z-index: -1;left:0;right:0}
#form h4{font-size:30px;color:white;padding-bottom:20px;font-style:italic}
#form{
float: left;
width: 80%;
margin-right: 1%;
margin-right: 5px;
background-color: transparent;;padding-top:1%
}
.form-bg{
width: 80%;float:left;
height: 70px;
margin-left: 0%;margin-top:2%;margin-right:1%;
border-bottom: 3px solid #da7e03;border-left:none;border-right:none;border-top:none;
background-color:transparent
;color:white;
font-family:Arial;font-size:25px;
padding-left:1%
}
.comment{width: 80%;float:left;margin-left: 50px;
height: 100px;
margin-left: 0%;margin-top:2%;margin-right:1%;padding-top:3%;
border-bottom: 3px solid #da7e03;border-left:none;border-right:none;border-top:none;
background-color:transparent
;color:white;
font-family:Arial;font-size:25px;
padding-left: 1%}
#apply{
width: 100%;
margin-top: 0px;margin-top:20px;margin-bottom:20px;
}
.submit{width:20%;margin-left:20%;margin-right:40%;border: 2px solid #01102a;height: 40px;background-color:#ffa200;color:#01102a;margin-top:2%;
font-family:Arial;margin-bottom:2%;font-size:25px;}
.parallex2{width:100%; height:auto;background: url(locksmithes-pictures/parallex2.png) center fixed no-repeat;background-color:rgba(255,255,255,.5);background-size:cover}
#footer{width:100%;background-color:transparent;padding-top:20px;line-height:26px;font-size:18px;overflow:hidden;color:white;border-radius:1px;margin-top:0%;}
#footer a{
	text-decoration: none;
	color: inherit;
	line-height: 14px;
}
.socialicon{margin-top:10px;margin-bottom:10px;margin-left:1%}
.pfotter{

	line-height: 30px;
	font-size: 18px
}
.section1footer{width:50%;float:left}
.section2footer{width:50%;float:right;margin-top: 10%;}
/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

#footer{color:#fff;background-color:#0b2828;float:left;width:100%;padding-top:20px;padding-bottom:20px;border-top: solid 5px #fbb316}
.footer1{float:left;width:33%;color:#fff;line-height:30px;padding-left: 30px}
.footer1 h4{font-size:18px;color:#fff;text-transform:none;position:relative}
.footer1 h4:before{content:"";position:absolute;width:40px;height:3px;bottom:-10px;left:0;border-bottom:3px solid #fbb316}
.circle-icon{background-color:rgba(255,255,255,0.30);color:#0b2828;border-radius:50%;text-align:center;vertical-align:middle;padding:8px;transition:.5s;font-size:20px;width:1.8em;margin:5px;font-weight:bold}
.circle-icon:hover{background-color:#fbb316;color:#fff}
#copy-right{font-size:18px;line-height:40px;color:black;background-color:#fbb316;text-align:center;float:left;width:100%}
.brands:hover{box-shadow:2px 2px 2px #666}
body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s;}
body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease;}
[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform;}
[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0);}
[data-aos=fade-up]{transform:translate3d(0,100px,0);}
[data-aos=fade-down]{transform:translate3d(0,-100px,0);}
[data-aos=fade-right]{transform:translate3d(-100px,0,0);}
[data-aos=fade-left]{transform:translate3d(100px,0,0);}
[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform;}
[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1);}
[data-aos=zoom-in]{transform:scale(.6);}
[data-aos=zoom-out]{transform:scale(1.2);}
[data-aos^=slide][data-aos^=slide]{transition-property:transform;}
[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0);}
[data-aos=slide-up]{transform:translate3d(0,100%,0);}
[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform;}
[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg);}
[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0);}
[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg);}
[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0);}
[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg);}
[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0);}
[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg);}
[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0);}







@media only screen and (max-width:1068px){
.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:#292929}
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:#292929;color:#fff}
nav ul li a:link,a:visited{color:white;text-decoration:none}
nav ul li a:hover{color:white}
	.telephone{margin-top: 10px}
}
@media only screen and (max-width:1500px){


.script1{padding-top: 100px}

}



@media only screen and (max-width:500px){

.script h1{margin-top: 100px}
.script1{padding-top: 350px}
.submit{width:98%;margin-left:1%;margin-right:10%;border: 2px solid #01102a;height: 40px;background-color:#ffa200;color:#01102a;margin-top:2%;
font-family:Arial;margin-bottom:2%;font-size:25px;}
	.script1{padding-top: 450px}
}
 .e-mail:before {
                content: attr(data-website) "\0040" attr(data-user);
                unicode-bidi: bidi-override;
                direction: rtl;
            }
.g-recaptcha {float:left;max-width:100%;}
.g-recaptcha * {transform:scale(1);float:left;}

.CUS{
 margin-bottom: 40px;
  padding: 0;
  border-radius: 30px;
}
form.CUS input.subject {
    display: none;
}

.CUS .form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.CUS .form-row p {
    flex: 1;
    margin: 0;
}

.CUS textarea {
    width: 100%;
    font-size: 15px;
    
    box-sizing: border-box;
    border:none;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(156, 156, 156);
    padding: 10px ;
}

.CUS .submit {
    width: 100%;
    font-size: 15px;
	padding-top: 5px;
    box-sizing: border-box;
    border:none;
    background-color: #f9b03a; 
    color: #ffffff;
}

.CUS input,
.CUS select {
    width: 100%;
    font-size: 15px;
     border: none;
    box-sizing: border-box;
    font-weight: normal;
    padding: 10px;
    margin: 5px 0;
       background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);

}
.CUS input::placeholder{
   
    color: rgb(255, 255, 255);

}
.CUS select::placeholder {
   
    color: rgb(255, 255, 255);

}
.CUS textarea::placeholder {
   
    color: rgb(255, 255, 255);

}
.CUS label {
    font-size: 15px;
    display: block;
    margin-top: 10px;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
}

.CUS legend {
    font-size: 25px;
    text-align: left;
    color: #f9b03a;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
}

form.CUS,
.CUS fieldset {
    border: none;
}
@media only screen and (max-width:500px){
    .CUS .form-row {
	
        flex-direction: column;  
        align-items: stretch;    
    }

    .CUS .form-row p {
        flex: 1 0 100%;
        width: 100%;
    }
	  .CUS textarea {
        width: 100%;   /* Same as input p width */
    }
	
 }

