/* HOME */
a{
    text-decoration:none;
}
  .navG{
  min-width:100%;
  }
 .nav-home {
  width: 100%;
  /* height: 100vh; */
display: flex;
  justify-content: space-between;
  margin-bottom: 0rem;
  padding-inline-start: 0;
  margin: 0;
}
@media screen and (max-width: 768px) {
.nav-home {
     width: 100%;
     
  flex-direction: column;
  justify-content: center;
 }

}
.nav-item-home {
display: flex;
background-color: #13191D;
height: 85vh;
width: 33%;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
align-items: center;
/* filter: grayscale(100%); */
}
.nav-item-home-full {
  display: flex;
  background-color: #13191D;
  height: 75vh;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  align-items: center;
  /* filter: grayscale(100%); */
  
  }
  
.nav-item-home .nav-item-home-bg {
height: 100vh;
width: 100%;
display: block;
  position: absolute;
  
}
.nav-item-home:nth-child(1) .nav-item-home-bg {
background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0) 250%), url('https://pavin.es/wp-content/uploads/2022/05/pavimentosPavinBN.jpg') no-repeat center center/cover;
}


.nav-item-home:nth-child(2) .nav-item-home-bg {
background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0) 250%), url('https://pavin.es/wp-content/uploads/2022/02/suelosresina.jpg') no-repeat center bottom/cover;
}
.nav-item-home:nth-child(3) .nav-item-home-bg {
background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0) 250%), url('https://pavin.es/wp-content/uploads/2022/04/reparacion.jpeg') no-repeat right center/cover;
}
.nav-item-home:nth-child(4) .nav-item-home-bg {
 background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0) 250%), url('https://pavin.es/wp-content/uploads/2022/04/senalizacionIndustrial.jpeg') no-repeat center center/cover;
}
.nav-item-home:nth-child(5){
background:#f5f5f5!important;
background-size: 90%;
color:black;
display:none;
}
@media (max-width: 768px) {
.nav-item-home:nth-child(5){
display:flex;

}
}
.nav-item-home:nth-child(5) .nav-item-home-bg{
opacity:.1;
background:#f5f5f5;
background-size: 90%;

}
.nav-item-home:nth-child(5) .nav-item-home-content{
color:#000000;
}
.nav-item-home:nth-child(5) .titleRotate{
color:#000000;
}
.nav-item-home:hover .nav-item-home-bg{
opacity: .7;
}
.nav-item-home:hover{
overflow: none!important;
}

.nav-item-home .nav-item-home-content {
 width: 100%;
  color: #fff;
  position: relative;
margin-left: -70px;
opacity: 0;
transition: all 0.3s ease-in-out;
  filter: blur(1px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-item-home-content .home-group-item{
background-color: transparent!important;
font-size: 1em;
font-weight: bolder;
}
.nav-item-home-content .home-group-item:hover{
text-decoration: underline;
cursor: pointer;
}
.nav-item-home .titleRotate{
width: 150%;
height: 0%;
position: absolute;
text-align: left;
top: 45%;
color: white;
font-weight: 900;
font-size: 2em;
white-space: nowrap;
transform: rotate(-90deg);
}

.nav-item-home .nav-item-home-content .title{
 font-size: 1em;
}
.nav-item-home .nav-item-home-content h2 {
width:60%;
font-size: 3em;
font-weight: 900;
line-height: 0.9em;
margin: 0 0 30px;
/* text-shadow: 10px 10px 30px rgba(0, 0, 0, .5); */
border-bottom: 2px solid #f7b92b;
padding-bottom: 30px;
color:white;
}
.nav-item-home .nav-item-home-content h2:hover{
opacity:.5;
}
@media screen and (max-width: 980px) {
.nav-item-home .nav-item-home-content h2 {
  font-size: 25px;
 }
 .nav-item-home .nav-item-home-content .title{
     font-size: 1.3em;
}
.nav-item-home h2{
    top: 30%;
    font-size: 3em;
}
}
.nav-item-home:hover {
width: 150%;
  filter: none;
}
.nav-item-home:hover .nav-item-home-content {
margin-left: 50px;
opacity: 1;
filter: blur(0px);
padding: 20px 0 20px 0;
}
.nav-item-home:hover .titleRotate{
opacity: 0;
}


.nav-home img {
max-width: 100%;
}
.nav-home button {
width:100%;
padding: 15px 30px;
background-color: #f7b92b;
font-weight: 700;
letter-spacing: 1px;
border: 0;
font-size: 1.2rem;
text-transform: uppercase;
cursor: pointer;
border-radius: 3px;
outline: 0;

transition: margin 0.5s ease-in-out, opacity 0.5s ease-in-out, background-color 0.2s ease;
}
.nav-home button:hover {
background-color: #d0a700;
}


@media screen and (max-width: 768px) {
.nav{

 overflow: hidden;
 height: auto;
}
.nav-item-home {
 width: 100%;
 
}
.nav-item-home {
 width: 100%!important;
 overflow: none!important;
 height: auto!important;
	border-left: 0px solid #f7b92b;
}
	.nav-item-home .nav-item-home-bg{
opacity: .7;
}

.nav-item-home .titleRotate{
  transform: rotate(0);
  width: 100%;
  text-align: center;
	display:none;
}
	.nav-item-home .nav-item-home-content {
margin-left: 50px;
opacity: 1;
filter: blur(0px);
padding: 20px 0 20px 0;
}
}

@media screen and (max-width: 768px) {
 .nav-item-home .nav-item-home-bg {
     background-size: cover !important;
     background-position: center center !important;
 height: 100%;
}
button {
 padding: 10px 30px;
 }
}

.transitionDelay{
animation: fade-in 0.3s ease-in forwards;
animation-delay: 0.5s;
}

@keyframes fade-in {
  from {
    transform: translateX(-5em);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/*MENU UX*/
.pluss{
background-color: #f9af06;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    padding: 10px;
    font-size: 1.5em;
    display: none;
    justify-content: center;
    align-items: center;
	border: 1px solid #f9af06;
	color: black;
	transition: all ease 0.3s;
}
.activePlus{
display:flex;
border: 2px solid #ffffff!important;
background-color: transparent!important;
color:white;
transform: rotate(45deg);
}

.menuUx .menu{
	list-style:none;
margin: 0;
padding: 0;
}
.menuUx li{
    margin: 5px 0 5px 0;
}
.menuUx li a{
	color:white!important;
	font-weight: bold;
	font-size:1.3em;
	transition: var(--transition);
}
.menuUx li a:hover{
	opacity: .5;
}
@media (max-width:991px){
.menuUx{
display:none;
}
.menuUx.active{
display:flex;
}
.pluss{
display:flex;
float: right;
}
.subnav{
display:none!important;
}
}

/*END MENU UX*/

/*CALL TO ACTION*/
.call{
height:100%;
min-width:330px;
}

.nav-item-home:hover .call{
    -webkit-animation: 1s ease 0s normal forwards 1 fadein;
    animation: 1s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.call .card-body{
height: 100%;
display:flex;
justify-content: center;
align-items:center;
flex-direction:column;
background: rgba(255,255,255, 1);
/*background: -moz-linear-gradient(right, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%); 
background: -webkit-linear-gradient(right, rgba(255,255,255,1) 60%,rgba(255,255,255,0) 100%); 
background: linear-gradient(to left, rgba(255,255,255,1) 60%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); */

border-radius: 0 25px 25px 0;
/*margin-left: -50px;*/
transition: margin 0.5s ease-in-out, opacity 0.5s ease-in-out, background-color 0.2s ease;

}

.call .card-body button {
width:100%;
padding: 15px 30px;
background-color: #f7b92b;
font-weight: 700;
letter-spacing: 1px;
border: 0;
font-size: 1.2rem;
text-transform: uppercase;
cursor: pointer;
border-radius: 3px;
outline: 0;

transition: margin 0.5s ease-in-out, opacity 0.5s ease-in-out, background-color 0.2s ease;
}
.call .card-body .wpcf7-form p{
border-bottom: none!important;
padding-bottom: 0px!important;
font-size: 1em!important;
font-weight: normal!important;
line-height: 0em!important;
margin: 0!important;
}
.call .card-body .telf{
font-size: 2em;
color:black;
font-weight: 900;
margin-left: 10px;
white-space: nowrap;
}
.call form{
display:inline-flex;
justify-content:center;
align-items:center;
}
.nav-item-home .nav-item-home-content .call .wpcf7-form p{
border-bottom: none!important;
padding-bottom: 0px!important;
font-size: 1em!important;
font-weight: normal!important;
line-height: 0em!important;
margin: 0!important;
}
.call  .wpcf7-tel{
border: none;
height: 50px;
border-radius: 0px 0px 0px 25px;
width: 100%;
padding: 0 20px;
background-color: #f6f6f6;
font-size: 16px;
outline: none;
}
.call .wpcf7-form .wpcf7-text{
margin-bottom: 0px;
}
.call .wpcf7-form input[type="submit"]{

font-size: 15px!important;
display: block;
height: 50px;
width: fit-content;
border: none;
border-radius: 0px 25px 25px 0px;
line-height: 50px;
padding: 0 20px 0 20px;
font-size: 20px;
background-color: #F9AF06;

text-decoration: none;
cursor: pointer;
transition: all .3s ease;
}
@media (max-width:1024px){
.call .card-body{
height:auto;
border-radius: 25px 25px 0 0;
}
}
/*END CALL TO ACTION*/


/* SCROLL DOWN */
#sd-container {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateY(-50%);
}
#sd-container .arrow {
position: relative;
width: 42px;
height: 16px;
opacity: 0;
}
#sd-container .arrow::before, #sd-container .arrow::after {
content: "";
width: 21px;
height: 2px;
background-color: #fff;
border-radius: 2px;
display: inline-block;
}
#sd-container .arrow::before {
transform: rotate(45deg) translateX(25%);
}
#sd-container .arrow::after {
transform: rotate(-45deg) translateX(-25%);
}
#sd-container .arrow:nth-child(1) {
top: -50px;
opacity: 1;
animation: arrow2 1s ease 0s infinite;
}
#sd-container .arrow:nth-child(2) {
top: -25px;
animation: arrow1 1s ease 0.25s infinite;
}
@keyframes arrow1 {
from {
 opacity: 0;
 top: -25px;
}
to {
 opacity: 0;
 top: 0px;
}
50% {
 opacity: 1;
}
}
@keyframes arrow2 {
from {
 opacity: 0;
 top: -35px;
}
to {
 opacity: 0;
 top: -10px;
}
50% {
 opacity: 1;
}
}
@media (max-width:900px){
#sd-container{
display:none;
}
}
/* END SCROLL DOWN */