@charset "UTF-8";
body{
    font-family: 'Montserrat', sans-serif;
    margin-right:auto;
    margin-left:auto;
}
p{
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	margin: 0 !important;
	 color: #000D4A;
	text-align: left;
	line-height: 32px;
    }
p a{
    text-decoration: none;
	color: #FF9E02;
    } 
p ul li{
    margin-bottom: 20px;
    padding-bottom: 20px;
    } 
h1{
       font-size: 3.5vw;
        font-family: 'Montserrat', sans-serif;
         margin: 0 !important;
	color: #FF9E02;
	font-size: max(50px);
	letter-spacing: -5px;
    } 
h2{
	font-size: 2.5vw;
	font-family: 'Montserrat', sans-serif;
	margin: 0 !important;
	text-align: center;
		 color: #000D4A;
	font-size: max(42px);
	letter-spacing: -3px;
    }
h3{
    margin: 0 !important;
    font-family: 'Montserrat', sans-serif;
	font-size: 2vw;
	text-align: center;
    color: #FF9E02;
	font-size: max(30px);
	padding-bottom: 20px;
    }
h3 a{
    text-decoration: none;
    color: #FFFFFF;
    }
h4{
	font-size: 1vw;
	font-size: max(24px);
	 letter-spacing: -1px;
	margin: 0 !important;
    font-family: 'Montserrat', sans-serif;
	text-align: center;
	 color: #FF9E02;
    }
h5{
    font-size: 1.5vw;
	font-size: max(24px);
        font-family: 'Montserrat', sans-serif;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
	text-align: center;
	line-height: 1.25vw;
    padding-top: 5px;
	padding-bottom: 10px;
    color: #000D4A;
    -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }
h5:hover{
  background-image: linear-gradient(
    -225deg,
    #D8B545 0%,
    #E3D42B 29%,
    #E6C000 67%,
    #D18100 100%
  );
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
    }
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
h6{
	padding-top: 10px;
	font-size: 0.9vw;
	font-size: max(16px);
font-family: 'Roboto', sans-serif;
	margin: 0 !important;
	line-height: 1.55vw;
	 color: #000D4A;
    }
    }
h7{
	font-size: 2vw;
	font-family: 'Montserrat', sans-serif;
	color: #FFFFFF;
	font-size: max(36px);
    }
.texto-cabecera{
    font-size: 2vw;
    font-size: max(45px);
    color: #FFFFFF;
    font-family: "Arial Black", "Helvetica Neue";
    text-align: left;
    background-color: #FF9E02;
    font-style: normal;
    padding-top: 5px;
    padding-bottom: 5px;
	letter-spacing: -3px;
    opacity: 0.95;
}
.texto-degradado2{
	background: -webkit-linear-gradient(180deg, #787878, #404040);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Montserrat', sans-serif;
}
.texto-degradado3{
	background: -webkit-linear-gradient(180deg, #FEA20D, #B80000);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}
.container{
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}
header{
    z-index: 9999;
	background: #FFFFFF;
	padding-top: 1em;
	padding-bottom: 1em;
	position: relative;
	width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,.05);
}
header::after{ 
    content: '';
    clear: both;
    display: block;
} 
.header-outer {
  position: sticky;
  top: 0px; /* Equal to the height difference between header-outer and header-inner */
}
#logo{
    margin: 0;
    width: 30%;
    margin-left: 5%;
}
#logo img{
    width: 100%;
    height: auto;
}
.site-nav{
	top: 100%;
	right: 0;
	position: absolute;
	background: #343a47;
	clip-path: circle(0px at top right);
	transition: clip-path ease-in-out 1000ms;
	width: 100%;
    height: auto;
    padding-top: .1em;
    padding-bottom: .1em;
}
.site-nav-open{
    clip-path: circle(200% at top right);
    position: relative;
}
.site-nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
} 
.site-nav li{
	border-bottom: 1px solid #E1E1E1;
	margin-top: 1em;
	margin-right: 0.3em;
	margin-left: 0.3em;
	font-size: .8rem;
	padding-bottom: 1em;
} 
.site-nav li:last-child{
    border-bottom: none;
} 
.site-nav a{
	color: #FFFFFF;
	display: block;
	padding: 0em 10% 0em 2%;
	text-decoration: none;
} 
.site-nav a:hover,
.site-nav a:focus{
    color: #FFFFFF;
} 
.site-nav--icon{ 
    display:inline-block;
    font-size: 1em;
    margin-right: 1em;
    width: 1em;
    text-align: right;
    color:#343a47;
}
.menu-toggle{
    padding: 1em;
    position: absolute;
    top: 1.5em;
    right: .5em;    
}
.menu-open .hamburguer{
    transform: translateY(-12px) rotate(45deg);   
}
.menu-open .hamburguer::before{
    opacity: 0;   
}
.menu-open .hamburguer::after{
    transform: translateY(-4px) rotate(-90deg);   
} 
.hamburguer,
.hamburguer::before,
.hamburguer::after{
    content: '';
    display: block;
    background: #FF9E02;
    height: 3px;
    width: 2.50em;
    border-radius: 3px;
    transition: all ease-in-out 700ms;
}
.hamburguer::before{
    transform: translateY(-6px);
}
.hamburguer::after{
    transform: translateY(-15px);
}
#negocio{
	float: left;
	color: #FFFFFF;
	text-shadow: 1px 0 6px #929292;
	background-image: url("../imagenes/reformas.jpg");
	background-position: center top;
	background-size: 100% auto;
	width: 100%;
	height: 0;
	padding-top: 13%;
	padding-bottom: 20%;
	clear: left;
	justify-content: center;
	text-align: center;
    display: flex;
    align-items: center;
}
#texto-contacto{
float: left;
	width: 100%;
	padding-top: 25px;
	padding-bottom: 25px;
}	
#contacto{
	float: left;
	color: #FFFFFF;
	text-shadow: 1px 0 6px #929292;
	background-image: url("../imagenes/instalacion-placas-solares.jpg");
	background-position: center top;
	background-size: 100% auto;
	width: 100%;
	height: 0;
	padding-top: 10%;
	padding-bottom: 15%;
	clear: left;
	justify-content: center;
	text-align: center;
}
#info{
	float: left;
	width: 94%;
	margin-bottom: 20px;
	padding-left: 3%;
	padding-right: 3%;
}
#formulario{
	float: left;
	width: 45%;
	margin-left: 5%;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
#datos{
	float: left;
	width: 40%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-shadow: 0px 0px #E2E2E2;
}
:root {
  --cero: #FFFFFF;  
  --white: #afafaf;
  --red: #D1005C;
  --pure: #474747;  
  --bodyColor: #292a2b;
  --borderFormEls: #999999;
  --bgFormEls: #F3F3F3;
  --bgFormElsFocus: #CBCBCB;
}
a {
  color: inherit;
}
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 100%; 
}
button,
label {
  cursor: pointer;
}
select {
  appearance: none;
}
select::-ms-expand {
  display: none;
}

select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 var(--white);
}
textarea {
  resize: none;
}
.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
  width: 100%;
  line-height: 1.5;
  padding: 15px 10px;
  border: 1px solid var(--borderFormEls);
  color: #888888;
  background: var(--bgFormEls);
  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form textarea {
  height: 170px;
    border: 1px solid #ccc;
	border-radius: 4px;
}

.my-form ::placeholder {
  color: inherit;
  opacity: 1;
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:focus {
  background: var(--bgFormElsFocus);
}

.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
  transform: scale(1.02);
}
.my-form *:required{
  background-repeat: no-repeat;
  background-position: center right 12px;
  background-size: 15px 15px;
}

.my-form *:required {
  background-image: url("../imagenes/asterisco.png");  
}
.my-form .btn-grid {
  position: relative;
  overflow: hidden;
  transition: filter 0.2s;
}

.my-form button:enabled:hover,
.my-form button:focus {
  background: var(--bgFormElsFocus);
}

.my-form button > * {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

.my-form button .back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-110%, -50%);
}

.my-form button:enabled:hover .back,
.my-form button:focus .back {
  transform: translate(-50%, -50%);
}

.my-form button:enabled:hover .front,
.my-form button:focus .front {
  transform: translateX(110%);
}
.my-form input[type="checkbox"] {
  position: absolute;
  left: -9999px;
}
.my-form input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}

.my-form input[type="checkbox"]:focus + label {
  background: var(--cero);
}

.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
  content: '';
  position: absolute;
}

.my-form input[type="checkbox"] + label::before {
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--white);
}

.my-form input[type="checkbox"]:checked + label::before {
  background: var(--pure);
}

.my-form input[type="checkbox"]:checked + label::after {
  left: 7px;
  top: 7px;
  width: 6px;
  height: 14px;
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
}
input[type=text], input[type=tel], input[type=email] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	color: #888888;
	background-color: #F3F3F3;
}
textarea {
	width: 100%;
	height: 80px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #F3F3F3;
	resize: none;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	color: #888888;
}
input[type=button], input[type=submit], input[type=reset] {
	background-color: #afafaf;;
	border: none;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	margin-top: 6px;
	margin-right: 4px;
	margin-bottom: 4px;
	margin-left: 2px;
	padding-top: 4px;
	padding-right: 32px;
	padding-bottom: 4px;
	padding-left: 32px;
	font-size: 14px;
	float: right;
    font-family: 'Montserrat', sans-serif;
    width: 30%;
}
 
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
	background-color: #909090;
}
input[type=checkbox]{
	height: 18px;
}	
#checkbox {
	width: 100%;
	padding-top: 10px;
}
.texto-checkbox {
	font-size: 12px;
	font-weight: normal;
	color: #999999;
	vertical-align: bottom;
    padding-top: 10px;
}
#presupuesto-bloque {
	width: 100%;
	padding-top: 15px;
}
.texto-checkbox a{
	color: #999999;
	vertical-align: super;
	text-decoration: none;
}
.hide {
    display: none;
}
.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
#frase{
	float: left;
	width: 90%;
	height: auto;
	padding-top: 2rem;
	padding-bottom: 2.5rem;
	padding-right: 5%;
	padding-left: 5%;
	justify-content: center;
	align-items: center;
	text-align: center;
}
#separador{
	width: 30%;
	float: left;
	margin-left: 35%;
	margin-right: 35%;
	border-top: solid 1px #ECECEC;
} 
#servicios{
	width: 100%;
	clear: left;
	float: left;
	margin-top: 3rem;
	margin-bottom: 2rem;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #555555;
}
#integrales{
	width: 24%;
	border-radius: 15px;
	margin-left: 5%;
	float: left;
    transition: all 0.8s ease-in-out;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2);
}
#integrales:hover{
    opacity: 1;
  transform: scale(1.04, 1.04);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
  opacity: 1;
  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	/*box-shadow: 5px 5px 5px #B3B3B3;
	-webkit-box-shadow: 5px 5px 5px #B3B3B3;*/
} 
#integrales img{
	width: 100%;
	height: auto;
		border-radius: 15px;
} 	
#banos{
	width: 24%;
	border-radius: 15px;
	margin-left: 9%;
	margin-right: 9%;
	float: left;
    transition: all 0.8s ease-in-out;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2);
}
#banos:hover{
    opacity: 1;
  transform: scale(1.04, 1.04);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
  opacity: 1;
  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	/*box-shadow: 5px 5px 5px #B3B3B3;
	-webkit-box-shadow: 5px 5px 5px #B3B3B3;*/
} 
#banos img{
	width: 100%;
	height: auto;
		border-radius: 15px;
} 	
#cocinas{
	width: 24%;
	border-radius: 15px;
	margin-right: 5%;
	float: left;
    transition: all 0.8s ease-in-out;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}
#cocinas:hover{
    opacity: 1;
		background: #FAFAFA;
  transform: scale(1.04, 1.04);
 box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
  opacity: 1;
  -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	/*box-shadow: 5px 5px 5px #B3B3B3;
	-webkit-box-shadow: 5px 5px 5px #B3B3B3;*/
} 
#cocinas img{
	width: 100%;
		background: #FAFAFA;
	height: auto;
		border-radius: 15px;
} 	
#galeria{
	padding: 5rem 0 7rem;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #000000;
}
#cuerpo{
	width: 80%;
	height: auto;
	padding: 1rem 10%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #000000;
	clear: left;
	font-size: 1em;
	line-height: 3em;
}
#galeria-texto {
    padding-top: 10px;
	float: left;
	width: 50%;
	color: #FFFFFF;
    text-shadow: 1px 0 6px #929292;
}
#texto-opiniones {
	float: left;
	width: 100%;
    text-align: center;
}
#opinion1 {
    padding-top: 10px;
    padding-bottom: 20px;
	float: left;
	width: 22%;
	padding-right: 4%;
	text-align: center;
}
#opinion2 {
    padding-top: 10px;
    padding-bottom: 20px;
	float: left;
	width: 22%;
	padding-right: 4%;
	text-align: center;
}
#opinion3 {
    padding-top: 10px;
    padding-bottom: 20px;
	float: left;
	width: 22%;
	padding-right: 4%;
	text-align: center;
}
#opinion4 {
    padding-top: 10px;
    padding-bottom: 20px;
	float: left;
	width: 22%;
	text-align: center;
}
.rating{
    color: #f3b325;
  font-size: 20px;
  margin: 0 calc(5px / 2);
}
#mision1 {
    margin-top: 60px;
    margin-bottom: 30px;
	float: left;
	width: 22%;
	margin-left: 0%;
}
#mision1-icono{
	width: 100%;
    height: 20px;
    transition:all 1s ease;
}
#mision1-icono img{
	width: 20%;
    height: auto;
    margin-left: 40%;
    margin-right: 40%;
}
#mision2 {
    margin-top: 60px;
    margin-bottom: 30px;
	float: left;
	width: 22%;
	margin-left: 4%;
}
#mision2-icono{
	width: 100%;
    height: 20px;
    transition:all 1s ease;
}
#mision2-icono img{
	width: 20%;
    height: auto;
    margin-left: 40%;
    margin-right: 40%;
}
#mision3 {
    margin-top: 60px;
    margin-bottom: 30px;   
	float: left;
	width: 22%;
	margin-left: 4%;
}
#mision3-icono{
	width: 100%;
    height: 20px;
    transition:all 1s ease;
}
#mision3-icono img{
	width: 20%;
    height: auto;
    margin-left: 40%;
    margin-right: 40%;
}
#mision4 {
    margin-top: 60px;
    margin-bottom: 30px;  
	float: left;
	width: 22%;
	margin-left: 4%;
    margin-right: 0%;
}
#mision4-icono{
	width: 100%;
    height: 20px;
    transition:all 1s ease;
}
#mision4-icono img{
	width: 20%;
    height: auto;
    margin-left: 40%;
    margin-right: 40%;
}
.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}
.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.fade {
    animation-name: fadeInOut;
    animation-duration: 3s;
}     
@keyframes fadeInOut{
        from{opacity: 0;}
        to {opacity: 1;}
    }
.agrandar{
    transition: all 1s ease-in-out;
}
.agrandar:hover{
    transform: scale(1.05);  
}
.oscurecer{
    transition: all 1s ease-in-out;
    opacity:0.6;
}
.oscurecer:hover{
    opacity:1; 
}
.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
.fadeTop1 {
  opacity: 0; 
  transform: translate(0, 15vh);
    -o-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-webkit-transition: all 2s ease;
	transition: all 2.5s ease;    
}
.fadeTop2 {
  opacity: 0; 
  transform: translate(0, 15vh);
    -o-transition: all 2.7s ease;
	-ms-transition: all 2.7s ease;
	-moz-transition: all 2.7s ease;
	-webkit-transition: all 2.7s ease;
	transition: all 2.7s ease;    
}
.fadeTop3 {
  opacity: 0; 
  transform: translate(0, 15vh);
    -o-transition: all 3.4s ease;
	-ms-transition: all 3.4s ease;
	-moz-transition: all 3.4s ease;
	-webkit-transition: all 3.4s ease;
	transition: all 3.4s ease;    
}
.fadeRight {
  opacity: 0;
  transform: translate(40vh, 0vh);
  transition: all 3s;
}
.fadeLeft {
  opacity: 0;
  transform: translate(-40vh, 0vh);
  transition: all 3s;
}
.visible {
  opacity: 1;
  transform: translate(0, 0);
}
.btn-one {
	font-size: 2.25vw;
	font-size: max(24px);
	font-family: 'Montserrat', sans-serif;
	margin-top: 2rem;
	color: #FFF;
	transition: all 0.8s;
	position: relative;
	width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}
#galeria-texto a{
	text-decoration: none;
	color: #FFF;
}
.btn-one span {
	transition: all 0.8s;
}
.btn-one::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.8s;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(255,255,255,0.9);
	border-bottom-color: rgba(255,255,255,0.9);
	transform: scale(0.1, 1);
    
}
.btn-one:hover span {
	letter-spacing: 2px;
}
.btn-one:hover::before {
	opacity: 1;	
	transform: scale(1.15, 1.15);	
    
}
.btn-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.8s;
	background-color: rgba(255,255,255,0.3);
    
}
.btn-one:hover::after {
	opacity: 0;	
	transform: scale(0.1, 1);
}
footer{
background-image: radial-gradient(ellipse at 50% 100%, #FB6E0C 0%, #FA9E0A 40%);
	float: left;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: #FFF;
	text-align: center;
	margin-top: 40px;
	margin-right: 0%;
	margin-top: 50px;
	padding-bottom: 50px;
	margin-left: 0%;
	height: 300px;
	padding-top: 30px;
	justify-content: center;
	align-items: center;
	text-align: center;
}
#logo-footer{
    border-bottom: 1px solid #FAB74A;
    width: 40%;
	margin-left: 30%;
	margin-right:30%;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 10px;
	padding-bottom: 40px;
    margin-bottom: 20px;
}
#logo-footer img{
   max-width: 200px;
}
#redes{
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-top: 30px;
	margin-bottom: 20px;
}
#texto-legal{
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 40px;
	font-size: 1rem;
	margin-bottom: 0px;
}
#texto-legal a{
	color:#FFFFFF;
    text-decoration: none;
}
#proyecto-reforma1 {
    float: left;
    width: 47%;
    padding-right: 3%;
    margin-bottom: 35px;
    filter: grayscale(70%);
    transition-duration: 1s;
}

#proyecto-reforma2 {
    float: left;
     width: 47%;
  padding-leftt: 3%;
	margin-bottom: 35px;
   filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma3 {
    float: left;
    width: 47%;
    padding-right: 3%;
    margin-bottom: 35px;
    filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma4 {
    float: left;
     width: 47%;
  padding-leftt: 3%;
	margin-bottom: 35px;
   filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma1 img{
    height: auto;
    width: 100%;
}
#proyecto-reforma2 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma3 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma4 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma1:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma2:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma3:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma4:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma5 {
    float: left;
    width: 47%;
    padding-right: 3%;
	margin-bottom: 35px;
     filter: grayscale(70%);
    transition-duration: 1s;
}

#proyecto-reforma6 {
    float: left;
     width: 47%;
  padding-leftt: 3%;
	margin-bottom: 35px;
   filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma7 {
    float: left;
    width: 47%;
    padding-right: 3%;
	margin-bottom: 35px;
     filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma8 {
    float: left;
     width: 47%;
  padding-leftt: 3%;
	margin-bottom: 35px;
   filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma5 img{
    height: auto;
    width: 100%;
}
#proyecto-reforma6 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma7 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma8 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma5:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma6:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma7:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma8:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma9 {
    float: left;
    width: 47%;
    padding-right: 3%;
	margin-bottom: 35px;
     filter: grayscale(70%);
    transition-duration: 1s;
}

#proyecto-reforma10 {
    float: left;
     width: 47%;
  padding-leftt: 3%;
	margin-bottom: 35px;
   filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma11 {
    float: left;
    width: 47%;
    padding-right: 3%;
	margin-bottom: 35px;
     filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma12 {
    float: left;
     width: 47%;
  padding-leftt: 3%;
	margin-bottom: 35px;
   filter: grayscale(70%);
    transition-duration: 1s;
}
#proyecto-reforma9 img{
    height: auto;
    width: 100%;
}
#proyecto-reforma10 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma11 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma12 img{
 height: auto;
    width: 100%;
}
#proyecto-reforma9:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma10:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma11:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
#proyecto-reforma12:hover{
    opacity: 1;
 -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
    -webkit-filter: none;
    filter: none;
} 
@media (max-width:900px){
h1{
	font-size: 5vw;
	letter-spacing: -3px;
    } 
h2{
	font-size: 4vw;
	letter-spacing: -3px;
    }
h3{
	font-size: 4vw;
    }     
h4{
	font-size: 4vw;
	text-align: center;
    } 
h5{
	font-size: 2.5vw;
    }  
h6{
	font-size: 1.75vw;
    }     
h7{
	font-size: 3vw;
    }
#negocio{
	background-image: url("../imagenes/reformas.jpg");
	padding-top: 21%;
	padding-bottom: 29%;
}    
#frase{
	font-size: 4vw;
}
}     
@media (max-width:640px){
	#proyecto-reforma1 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}

#proyecto-reforma2 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
#proyecto-reforma3 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
#proyecto-reforma4 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
	#proyecto-reforma1:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma2:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma3:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma4:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
	#proyecto-reforma5 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}

#proyecto-reforma6 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
#proyecto-reforma7 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
#proyecto-reforma8 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
	#proyecto-reforma5:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma6:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma7:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma8:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
	#proyecto-reforma9 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}

#proyecto-reforma10 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
#proyecto-reforma11 { width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
#proyecto-reforma12{ width: 90%;
    padding-right: 5%;
padding-left: 5%;
}
	#proyecto-reforma9:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma10:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma11:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
#proyecto-reforma12:hover{ -webkit-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
} 
p{
font-size: 17px;
	line-height: 30px;
}    
h1{
font-size: 8vw;
} 
h2{
	font-size: 6vw;
}
h3{
font-size: 6vw;
}
h4{
font-size: 6vw;
margin-bottom: 30px;
}
h5{
	font-size: 5vw;
}
h6{
	font-size: 3.5vw;
	line-height: 4vw;
} 
h7{
	font-size: 5vw;
} 
	#integrales{
	width: 80%;
	margin-left: 10%;
	margin-left: 10%;
	marging-bottom: 50px;
}	
#banos{
	width: 80%;
	margin-left: 10%;
	margin-left: 10%;
	marging-bottom: 50px;
	margin-top: 50px;
}
#cocinas{
	width: 80%;
	margin-left: 10%;
	margin-left: 10%;
	marging-bottom: 50px;
	margin-top: 50px;
}
     #opinion1 {
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
}
#opinion2 {
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
}
#opinion3 {
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
}
#opinion4 {
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
}
#negocio{
	background-image: url(../imagenes/reformas-2.jpg);
	min-height: 150px;
	padding-top: 15%;
	padding-bottom: 34%;
} 
#imagen-formulario {
	display: none;
}
#formulario {
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
} 
input[type=button], input[type=submit], input[type=reset] {
	margin-right: 10%;
    width: 80%;
	margin-left: 10%;
	font-size: 4vw;
		font-size: max(22px);
}  
.btn-one {
	font-size: 7vw;
	width: 84%;
    margin-left: 8%;
    margin-right: 8%;
}    
#frase{
	font-size: 5vw;
	width: 90%;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	padding-right: 5%;
	padding-left: 5%;
}
#servicios{
	margin-top: 1rem;
	margin-bottom: 2rem;
}    
#herencias{
    width: 100%;
	padding-bottom: 25%;
    padding-top: 10%;    
    margin-bottom: 0.5rem;
    margin-left: 0%;
    margin-right: 0%; 
	background-size: cover;
}   
#penalista{
    width: 100%;
	padding-bottom: 25%;
    padding-top: 10%;    
    margin-bottom: 0.5rem;
    margin-left: 0%;
    margin-right: 0%; 
    background-size: cover;
} 
#laboralista{
    width: 100%;
	padding-bottom: 25%;
    padding-top: 10%;    
    margin-bottom: 0.5rem;
    margin-left: 0%;
    margin-right: 0%; 
    background-size: cover;
}
#divorcios{
    width: 100%;
	padding-bottom: 25%;
    padding-top: 10%;    
    margin-bottom: 0.5rem;
    margin-left: 0%;
    margin-right: 0%; 
	background-size: cover;
}   
#extranjeria{
    width: 100%;
	padding-bottom: 25%;
    padding-top: 10%;    
    margin-bottom: 0.5rem;
    margin-left: 0%;
    margin-right: 0%; 
    background-size: cover;
} 
#accidentes{
    width: 100%;
	padding-bottom: 25%;
    padding-top: 10%;    
    margin-bottom: 0.5rem;
    margin-left: 0%;
    margin-right: 0%; 
    background-size: cover;
}    
#galeria-texto {
    padding-top: 30px;
    margin-top: 100px;
	width: 80%;
}    
#mision1 {
	width: 80%;
	margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
}
#mision1-icono{
	width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 30px;
}
#mision1-icono img{
	width: 30%;
    margin-left: 35%;
    margin-right: 35%;
}
#mision2 {
	width: 80%;
	margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
}
#mision2-icono{
	width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 30px;
}
#mision2-icono img{
	width: 30%;
    margin-left: 35%;
    margin-right: 35%;
}
#mision3 {
	width: 80%;
	margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
}
#mision3-icono{
	width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 30px;
}
#mision3-icono img{
	width: 30%;
    margin-left: 35%;
    margin-right: 35%;
}
#mision4 {
	width: 80%;
	margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    padding-bottom: 50px; 
}
#mision4-icono{
	width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    height: 30px;
}
#mision4-icono img{
	width: 30%;
    margin-left: 35%;
    margin-right: 35%;
} 
#nosotros {
	float: left;
	width: 100%;
	padding-right: 0%;
	padding-left: 0%;
	padding-top: 30px;
	padding-bottom: 30px;
}    
}
@media (min-width:768px){
    header{
	background: #FFFFFF;
	padding: 0.35em 0px;
	position: relative;
	width: 100%;
}   
    #logo{
	float: left;
	margin: 0;
	width: 13%;
	max-width: 400px;
	margin-left: 2%;  
    }
    .menu-toggle{
	display: none;
	width: auto;
    } 
     .site-nav{
	height: auto;
	background: transparent;
	float: right;
	text-size: 1rem;
	width: 78%;
	margin-right: 2%;
	margin-top: 0px;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	clip-path: initial;
    } 
    .site-nav ul{
            float:right;
     }    
    .site-nav li{
	display: inline-block;
	border: none;
	text-transform: uppercase;
	margin-right: .5rem;
	margin-left: .5rem;
	font-size: .9rem;
    }
    .site-nav a{
	padding: 0;
	margin-left: 3em;
	color: #343a47;
    position: relative;    
    }
    .site-nav--icon{
        display: none;
    }
    .site-nav a:hover,
    .site-nav a:focus{
        background: transparent;
        color: #FF9E02;
    }
.menu-animation a::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #FF9E02;
	z-index: 1;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s ease-in-out;
	top: 23px;
}
.menu-animation a:hover::before {
  transform: scaleX(1);
}   
#nosotros {
	float: left;
	width: 90%;
	padding-right: 5%;
	padding-left: 5%;
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #FAFAFA;
}
}
#imagen-principal {
    float: left;
    width: 100%;
}
#imagen-principal img{
    height: auto;
    width: 100%;
}