*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;

		}

*::selection { 
	background-color: rgba(238,62,44, 0.7);
  	color: white;
}		
		html{
			scroll-behavior: smooth;
		}

		body{
			display: flex;
			flex-direction: column;
			height: 100%;
			width: 100%;
			min-height: 100vh;
		    background-color: #000000;
		    font-family: 'Poppins', sans-serif;
		}

		.fondo{
			position: relative;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			align-items: center;
			top: 0;
			right: 0;
			min-width: 100%; 
			min-height: 100%;
			filter: grayscale(100%);
    		z-index: -5;
		}

		.fondo img{
			object-fit: cover;
			width: 100%;
			height: 100vh;
			max-width: 100%;
		}

		.fondo::before{
			content: '';
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    top: 0;
		    z-index: 2;
		    background-image: linear-gradient(180deg, rgba(0, 0, 0,.5) 0%, rgba(0,0,0, 0) 25%);
			mix-blend-mode: multiply;
		}

		a{
			text-decoration: none;
		}

		strong{
			font-weight: normal;
		}

		nav{
			position: absolute;
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			padding: 40px 40px 0 40px;
			width: 100%;
			z-index: 99;
		}

		nav::before{
			content: '';
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    top: 0;
		    z-index: 2;
		    background-image: linear-gradient(180deg, rgba(0, 0, 0,.2) 0%, rgba(0,0,0, 0) 100%);
			mix-blend-mode: multiply;
		}

		.logo{
			z-index: 3;
			mix-blend-mode: normal !important;
		}

		.logo img{
			width: 100%;
			max-width: 235px;
			mix-blend-mode: normal !important;
		}
		
		.menu-box-icon{
    		padding: 0px 10px; 
    		background-color: transparent;
    		border: 1px solid #ee3e2c;
    		z-index: 99;
    		transition: 1s ease;
		}

		
		.menu-call { 
  			z-index: 99;
			color: #ee3e2c;
			cursor:pointer;
			transition: 0.7s;
			font-size: 28px;
			line-height: 1.3;
			transform: rotate( 0deg );            
    		transition: transform .5s ease;
    		transition-delay: .3s;

  		}

  		.menu-call:hover{
  			transform: rotate( 45deg );            
    		transition: transform .5s ease;
  		}

		.menu-invisible-box{
			position: absolute;
			top: 90px;
  			right: 40px;
  			overflow: hidden;
  			z-index: 99;
		}

  		.menu-box { 
  			position: relative;
  			right: -500px;
			color: white;
  			white-space: nowrap;
  			list-style: none;
  			z-index: 99;
  			opacity: 0;
  			transition: 1s;
  			font-size: 14px;

		}

		.menu-box-show { 
			opacity: 1;
  			right: 0px;
  			transition: 1s;
		}

		.menu-box li{
			display: inline-block;
			padding-left: 10px;

		}

		.menu-box a{ 
  			text-decoration: none;
			color: white;
			transition: 0.7s;

		}

		.menu-box a:hover{
			color:#ee3e2c;
		}

		
		.menu-box li:nth-child(4) a{
  			color: #ee3e2c;
  		}

  		.contenedor-main{
  			position: absolute;
  			display: flex;
  			justify-content: flex-start;
			width: 100%;
			height: 100%;
  			z-index: 4;
  		}

		main{
			display: flex;
			width:55%;
			flex-direction: column;
			justify-content: center;
			padding: 50px 50px 50px 40px;
			background-color: rgba(0, 0, 0, 0.50);
			color: #fff;
		}

		main p{
			font-weight: 200;
			margin: 20px 0;
			word-wrap:break-word;
			z-index: 5;
			
  		}

  		.section-title{
			letter-spacing: 2px;
  			color: #ffffff;
  			font-weight: 700;
  			font-size: 38px;
  			
  			margin-top: 50px; 
			text-align: center;
  			border-left: none;
  			border-top: none;
  			border: 1px solid #ee3e2c;
  			padding: 10px;
  			border-radius: 2px;
  			transition: background-color 0.7s;
  			transition-timing-function: ease-out;
  			z-index: 5;
		}

		.section-title:hover{
  			color: #231f20;
  			border: 1px solid #fff;
  			background-color: #fff;
  		}

		.t-title{
			font-size: 16px;
  			color: #ffffff;
  			font-weight: 700;
  			letter-spacing: 2px;
  			
		}

		p.scroll-down{
			animation: blinker 2s linear infinite;
			font-size: 50px;
			line-height: 25px;
			color: #ee3e2c;
		}
		@keyframes blinker {
		  50% {
		    opacity: 0;
		  }
		}


  		.casas{
  			display: grid;
  			grid-template-rows: auto;
  			grid-template-columns: repeat(4, 1fr);
  			z-index: 98;
  			
  		}

  		.casa{
  			position: relative;
  			display: flex;
  			align-items: flex-end;
  			width: 100%;
  			z-index: 98;
  			cursor: pointer;
  		}

  		.casa img{
  			display: block;
  			object-fit: cover;
  			width: 100%;
  			height: auto;
  			max-width: 100%;
  			max-height: 100%;
  			transition: 1s;
  			z-index: 98;
  		}

  		.casa img:hover{
  			filter: grayscale(100%);
  		}

  		.casa:hover .overlay {
  			opacity: 1;
		}

  		.overlay {
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  height: 100%;
		  width: 100%;
		  opacity: 0;
		  transition: .5s ease;
		  background-color: rgba(0,0,0, .8);
		  z-index: 99;	  
		}

		.text {
		  animation: blinker 2s linear infinite;
		  color: #ee3e2c;
		  font-size: 35px;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  text-align: center;
		}

  		.casa p{
  			color: #fff;
  			position: absolute;
  			margin: 20px 0 0 20px;
  			z-index: 100;
  		}

  		/*.casas{
  			position: relative;
  			display: flex;
  			align-content: flex-start;
  			flex-direction: row;
  			flex-wrap: wrap;


  		}

  		.casa{
  			min-width: 20%;
  			max-width: 50%;
  		}

  		.casa img{
  			display: block;
  			object-fit: cover;
  			width: 100%;
  			height: auto;
  			max-width: 100%;
  			max-height: 100%;
  		}*/



  		footer{
  			position: relative;
  			margin: 40px 0;
  			display: flex;
  			flex: 1;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0px 40px 0 40px;
			width: 100%;
			color: #fff;
			font-size: 12px;
			z-index: 3;
  		}

  		footer::before{
  			content: "";
  			width: 100%;
  			height: 50%;
  			position: fixed;
		    left: 0;
		    bottom:  0;
		    z-index: 1;
			background-image: linear-gradient(0deg, rgba(0, 0, 0,.7) 0%, rgba(0,0,0, 0) 30%);
			mix-blend-mode: multiply;
		}

		footer p, a{
			z-index: 2;
			color: #ffffff;
		}

		footer p{
			font-weight: 100;
		}

		footer ul{
			font-weight: 400;
		}


		.unouno{
			color: rgba(255, 255, 255, 0.4);
			transition: .5s ease;
		}

		.unouno:hover{
			color: rgba(255, 255, 255, 1);
		}

  		footer > .secondary-menu{
  			display: flex;
  			flex-direction: row;
  			color: #ffffff;
  			list-style: none;
  			z-index: 2;
  			
  		}

  		footer > .secondary-menu li a{
  			text-decoration: none;
  			color: white;
  			padding: 0 10px;
  			transition: 0.7s;

  		}

  		footer > .secondary-menu li a:hover{
  			color: #ee3e2c;
  		}

  		footer > .secondary-menu li:nth-child(5) a{
  			color: #ee3e2c;
  		}

/*-------------------MQUERIES----------------------*/

  		@media only screen and (max-width: 1000px) {
  			.logo{
  				width: 50%;

  			}

  			.logo img{
  				width: 100%;

  			}

  			nav{
			padding: 40px;
			width: 100%;
		}

			nav::before{
		    background-image: linear-gradient(180deg, rgba(0, 0, 0,.7) 0%, rgba(0,0,0, 0) 100%);
		    mix-blend-mode: multiply;
			
		}

  		.menu-call { 
			font-size:20px;
			line-height: 1.5;
  		}

  		.menu-invisible-box{
  			right: unset !important;
			position: absolute;
			top: 100px;
			width: 100%;
			margin: auto;
  			overflow: hidden;
  			z-index: 99;
		}

  		/*.menu-box { 
  			position: relative;
  			display: flex;
  			flex-direction: column;
			justify-content: space-around;
			flex-wrap: wrap;
  			right: -350px;
			font-size: 14px;	
			color: white;
  			white-space: wrap;
  			list-style: none;
  			text-align: center;

		}*/

		.menu-box { 
  			position: fixed;
  			height: 100%;
  			max-height: calc(100% - 80px);
  			display: flex;
  			flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
  			right: -350px;
			font-size: 14px;	
			color: white;
  			white-space: wrap;
  			list-style: none;
  			text-align: center;
		}

		.menu-box-show { 
  			right: 0;
  			width: 100%;
			margin: auto;
			background: rgba(0,0,0, .9);

		}

		.menu-box a{ 
  			text-decoration: none;
			color: white;

		}

		.menu-box li{
			list-style: none;
			display: inline-block;
			text-align: center;
			padding: 25px 0;
			border-bottom: 1px solid rgba(238, 62, 44, 0.5);
			width: 50%;
			margin: 0 auto;
		}

		.menu-box li:last-child{
  			border-bottom: none;
  		}

		main{
			width: 100%;
			margin:auto;
			color: #fff;
			text-align: center;
		}

		main p{
			font-size:16px;
			width: 100%;
			margin: auto;
		}


		.section-title{
  			font-size: 28px;
  			margin-bottom: 20px;
		}

  		.casas{
  			display: grid;
  			grid-template-rows: auto;
  			grid-template-columns: repeat(2, 1fr);
  		}

  		

  		footer{
  			position: relative;
			display: flex;
			flex-direction: column-reverse;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			align-items: center;
			text-align: center;
			width: 100%;
			margin: 20px auto 20px auto;
			color: #fff;
			font-size: 16px;
  		}

  		footer > .secondary-menu{
  			display: flex;
  			flex-direction: row;
  			flex-wrap: wrap;
  			justify-content: center;
  			text-align: center;
  			color: #ffffff;
  			list-style: none;
  			margin-bottom: 20px;
  		}
  			
  		}