@charset "utf-8";
/* CSS Document */

/*LOADER*/
.content_loading{width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:999; background:var(--soft-black); display:flex; flex-direction:column; justify-content:center; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; transition-delay:0.75s; -webkit-transition-delay:0.75s; will-change:opacity;}
.content_loading.hide{opacity:0; pointer-events:none;}

	/*Logo*/
	.content_loading .logo{width:130px; display:block; position:relative; z-index:10; margin:0 auto; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; will-change:opacity;}
	.content_loading.hide .logo{opacity:0;}

	/*Animation*/
	.content_loading .animation{width:100px; height:100px; position:absolute; top:-57px; left:-9px; bottom:0; right:0; margin:auto; z-index:3; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; will-change:opacity;}
	.content_loading.hide .animation{opacity:0;}

		.content_loading .circle{display:block; height:88px; width:88px; border-radius:50%; background:var(--purple); margin:10px; transition:5s ease-in-out; position:absolute; top:0;}

			@-webkit-keyframes waves {
			  	0% {
			    	transform: scale(1);
			    	opacity: 0.5;
			  	}

				100% {
					transform: scale(3);
				    opacity: 0;
				}
			}

			@keyframes waves {
			  	0% {
			    	transform: scale(1);
			    	opacity: 0.5;
			  	}

				100% {
					transform: scale(3);
				    opacity: 0;
				}
			}

		/*Delay*/
		.content_loading .delay1{animation:waves 6s linear infinite; animation-delay:0.1s;}
		.content_loading .delay2{animation:waves 6s linear 1.5s forwards infinite;}
		.content_loading .delay3{animation:waves 6s linear 3s forwards infinite;}
		.content_loading .delay4{animation: waves 6s linear 4.5s forwards infinite;}

	
/*GENERICS*/

html{width:100%; height:100%}

body{width:100%; height:100%; overflow:hidden; background:var(--soft-black); font-size:1em; font-family: 'Crimson Text', serif; font-weight:400; color:var(--white);  -webkit-font-smoothing: antialiased; /*-webkit-transform: translate3d(0,0,0);  -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0);*/}
body.show{overflow:visible;}


*:focus {outline: none;}

a{color:var(--white); text-decoration:none; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out;}

header, section, article, aside, footer, nav, figure, div, a{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; position:relative;}


/*LAYOUT*/
.row{width:100%; float:left;}

.center_content{width:1000px; margin:0 auto;}


/*HEADER*/
header{height:100vh; padding:120px 0 0;}

	/*Headings*/
	header .content_headings{z-index:3;}

		header h1{width:130px; height:180px; float:left; background:url(../../img/bg_logo.svg) no-repeat; font-size:0; margin:0 65px 0 0;}

		header h2{width:110px; height:95px; float:right; background:url(../../img/bg_logo_familiares.png) no-repeat; background-size:100% auto; font-size:0; margin:30px 0 0;}

		/*Paragraph*/
		header .content_paragraph{margin:60px 0 0;}
		
			header p{width:700px; float:left; font-size:1.250rem; font-weight:700; line-height:1.6;}
			header p.small{font-weight:600; font-size:1rem; margin:0 0 40px;}

		/*Btn Down*/
		header .btn_down{position:relative; float:left; font-family:'Lato', sans-serif; font-weight:900; font-size:0.875rem; letter-spacing:2px; text-transform:uppercase; padding:20px 0 0 55px; margin:35px 0 0;}

			header .btn_down::before{width:48px; height:56px; position:absolute; top:0; left:0; background:url(../../img/bg_btn.svg) no-repeat; content:'';}

			header .btn_down::after{width:12px; height:10px; position:absolute; top:0; bottom:-20px; left:22px; background:url(../../img/bg_down.svg) no-repeat; content:''; margin:auto; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; will-change:transform;}
			header .btn_down:hover::after{transform:translateY(5px); -webkit-transform:translateY(5px);}

	/*Slider*/
	header .content_slider{width:100%; height:100vh; position:absolute; top:0; left:0; z-index:1;}

		/*Item*/
		header .content_slider .item{width:100%; height:100vh; float:left;}

			header .content_slider .item .center_content{height:100%;}

			/*Dots*/
			header .content_slider .slick-dots{width:60px; position:absolute; top:600px; right:-945px; left:0; margin:auto;}

				header .content_slider .slick-dots li{width:100%; float:left; margin:0 0 10px;}

					header .content_slider .slick-dots button{font-size:0; box-sizing:border-box; padding:0; float:right; border:none; width:20px; height:1px; display:block; background:var(--white); transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out;}

					header .content_slider .slick-dots .slick-active button{width:60px; background:var(--purple);}

			/*Overlay*/
			header .content_slider .item::before{width:100%; height:500px; background-image:linear-gradient(to top, #1a1a1a, rgba(36, 36, 36, 0)); position:absolute; bottom:0; left:0; z-index:2; content:'';}

			/*Information*/
			header .content_information{width:280px; height:50px; position:absolute; right:95px; top:600px; z-index:3;}

				header .content_information span{font-style:italic; letter-spacing:2px; text-align:right; position:relative;}

				header .content_information .name{font-weight:700; margin:0 0 10px;}

				header .content_information .age{font-weight:400;}

					/*Animation*/
					header .content_information span{opacity:0; transform:translateX(25px); -webkit-transform:translateX(25px); transition:all .75s ease-in-out; -webkit-transition:all .75s ease-in-out; will-change:opacity, transform;}

					header .slick-active .content_information span{opacity:1; transform:translateX(0); -webkit-transform:translateX(0);}

						/*Delay*/
						header .content_information .name{transition-delay:0.3s; -webkit-transition-delay:0.3s;}
						header .content_information .age{transition-delay:0.6s; -webkit-transition-delay:0.6s;}

			/*Image*/
			header .content_slider figure{width:100%; height:100vh; position:absolute; top:0; left:0; z-index:1;}

				header .content_slider figure img{display:block; width:100%; height:100%; object-fit:cover;}

				header .content_slider figure .desktop{display:block;}
				header .content_slider figure .mobile{display:none;}

	/*Intro Animations*/

		/*Headings*/
		header h1,
		header h2{position:relative; opacity:0; transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out; will-change:opacity;}

		header.show h1,
		header.show h2{opacity:1; transition-delay:0.5s; -webkit-transition-delay:0.5s;}

		/*Paragraph*/
		header p{position:relative; opacity:0; transform:translateY(50px); -webkit-transform:translateY(50px); transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out; will-change:transform, opacity;}
		header.show p{opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

			/*Delays*/
			header p.small{transition-delay:0.5s; -webkit-transition-delay:0.5s;}
			header p{transition-delay:0.9s; -webkit-transition-delay:0.9s;}

		/*Button*/
		header .btn_down{transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out; opacity:0; will-change:opacity;}
		header.show .btn_down{opacity:1; transition-delay:1.5s; -webkit-transition-delay:1.5s;}

/*TEXT*/
.content_text{height:100vh;}

	.content_text .center_content{height:100%; display:flex; flex-direction:column; justify-content:center;}

		.content_text .center_content h4,
		.content_text .center_content h3{font-size:2.625rem; line-height:1.83;}

		.content_text .center_content h4{font-weight:400;}

		.content_text .center_content h3{font-weight:700; margin:50px 0 0;}

		.content_text .center_content h5{font-weight:400; font-size:1.5rem; margin:30px 0 0;}

	/*Intro Animations*/
	.content_text .center_content h3,
	.content_text .center_content h4,
	.content_text .center_content h5{position:relative; opacity:0; transform:translateY(50px); -webkit-transform:translateY(50px); transition:all .75s ease-in-out; -webkit-transition:all .75s ease-in-out; will-change:opacity, transform;}

	.content_text.show .center_content h3,
	.content_text.show .center_content h4,
	.content_text.show .center_content h5{opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

		/*Delays*/
		.content_text.show .center_content h4{transition-delay:0.3s; -webkit-transition-delay:0.3s;}
		.content_text.show .center_content h3{transition-delay:0.6s; -webkit-transition-delay:0.6s;}
		.content_text.show .center_content h5{transition-delay:0.9s; -webkit-transition-delay:0.9s;}

/*STEPS*/
.content_steps{margin:0 0 120px;}

	.content_steps::before{width:100%; height:440px; position:absolute; bottom:35px; left:0; background-image: linear-gradient(to top, #000000, rgba(36, 36, 36, 0)); content:'';}

	/*Headings*/
	.content_steps h3{font-weight:400; font-size:6.000rem; margin:0 0 15px;}

	.content_steps h4{font-weight:400; font-size:1.125rem; margin:0 0 80px; font-style:italic;}

	/*Steps*/
	.content_steps .steps{width:330px; float:left;}

		.content_steps .steps li{margin:0 0 40px; position:relative;}
		.content_steps .steps li:last-child{margin:0;}

			.content_steps .steps li .number{position:absolute; left:-45px; top:5px; font-weight:400;}

			.content_steps .steps li .text{font-weight:400; line-height:1.3; font-size:1.500rem;}

	/*Phone*/
	.content_steps figure{width:585px; position:relative; top:-30px; float:right;}

	/*Intro Animations*/
		
		/*Headings*/
		.content_steps h3,
		.content_steps h4{position:relative; opacity:0; transform:translateY(50px); -webkit-transform:translateY(50px); transition:all .75s ease-in-out; -webkit-transition:all .75s ease-in-out; will-change:opacity, transform;}

		.content_steps.show h3,
		.content_steps.show h4{opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

			/*Delays*/
			.content_steps.show h3{transition-delay:0.3s; -webkit-transition-delay:0.3s;}
			.content_steps.show h4{transition-delay:0.6s; -webkit-transition-delay:0.6s;}

		/*Steps*/
		.content_steps .steps li{position:relative; opacity:0; transform:translateY(50px); -webkit-transform:translateY(50px); transition:all .75s ease-in-out; -webkit-transition:all .75s ease-in-out; will-change:opacity, transform;}
		.content_steps.show .steps li{opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

			/*Delays*/
			.content_steps .steps li:nth-child(1){transition-delay:0.9s; -webkit-transition-delay:0.9s;}
			.content_steps .steps li:nth-child(2){transition-delay:1.2s; -webkit-transition-delay:1.2s;}
			.content_steps .steps li:nth-child(3){transition-delay:1.5s; -webkit-transition-delay:1.5s;}

		/*Phone*/
		.content_steps figure{opacity:0; transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out; will-change:opacity;}
		.content_steps.show figure{opacity:1; transition-delay:1.8s; -webkit-transition-delay:1.8s;}

/*PHOTO GRID*/
.content_photo_grid{}

	/*Headings*/
	.content_photo_grid h3{font-weight:400; font-size:6.000rem; margin:0 0 15px;}

	.content_photo_grid h4{font-weight:400; font-size:1.125rem; font-style:italic;}

	/*Grid*/
	.content_photo_grid .grid{margin:135px 0 0; position:relative;}

		.content_photo_grid .grid li{width:calc(20% - 3px); height:390px; float:left; margin:0 3px 3px 0;}
		.content_photo_grid .grid li:nth-child(5n){margin:0 0 3px;}

			@media (max-width: 1550px) {
				.content_photo_grid .grid li{width:calc(25% - 3px); height:390px; float:left; margin:0 3px 3px 0;}
				.content_photo_grid .grid li:nth-child(5n){margin:0 3px 3px 0;}
				.content_photo_grid .grid li:nth-child(4n){margin:0 0 3px; width:25%;}
			}

			/*Link*/
			.content_photo_grid .grid li .link{height:100%; position:relative;}

				/*Information*/
				.content_photo_grid .grid li .link .information{position:absolute; bottom:20px; left:0; z-index:2; padding:0 20px;}

					.content_photo_grid .grid li .link .information{color:var(--white);}

					/*Name*/
					.content_photo_grid .grid li .link .information .name{font-weight:400; font-size:1.750rem; line-height:1.15; margin:0 0 5px;}

					/*Ocupation Age*/
					.content_photo_grid .grid li .link .information .ocupation_age{font-weight:400; margin:0 0 10px;}

					/*Button*/
					.content_photo_grid .grid li .link .information .button_download{display:inline-block; width:auto; font-weight:700; font-size:0.875rem; letter-spacing:3px; text-transform:uppercase; padding:0 15px 0 0;}

						.content_photo_grid .grid li .link .information .button_download::before{width:10px; height:10px; position:absolute; top:-3px; bottom:0; right:0; margin:auto; background:url(../../img/bg_arrow.svg) no-repeat; content:'';}

					/*Animation Hover*/
					.content_photo_grid .grid li .link .information span{position:relative; opacity:0; transform:translateY(20px); -webkit-transform:translateY(20px); transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; will-change:opacity, transform;}
					.content_photo_grid .grid li:hover .link .information span{opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

						/*Delay*/
						.content_photo_grid .grid li:hover .link .information .name{transition-delay:0.5s; -webkit-transition-delay:0.5s;}

						.content_photo_grid .grid li:hover .link .information .ocupation_age{transition-delay:0.7s; -webkit-transition-delay:0.7s;}

						.content_photo_grid .grid li:hover .link .information .button_download{transition-delay:0.9s; -webkit-transition-delay:0.9s;}

				/*Image*/
				.content_photo_grid .grid li .link figure{width:100%; height:100%; position:absolute; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; will-change:opacity;}

					.content_photo_grid .grid li .link figure img{display:block; width:100%; height:100%; object-fit:cover;}

					/*Animation Hover*/
					.content_photo_grid .grid li .link figure{transition-delay:0.5s; -webkit-transition-delay:0.5s;}
					.content_photo_grid .grid li:hover .link figure{opacity:0.2; transition-delay:0s; -webkit-transition-delay:0s;}

	/*Intro Animations*/

		/*Headings*/
		.content_photo_grid h3,
		.content_photo_grid h4{position:relative; opacity:0; transform:translateY(50px); -webkit-transform:translateY(50px); transition:all .75s ease-in-out; -webkit-transition:all .75s ease-in-out; will-change:opacity, transform;}

		.content_photo_grid.show h3,
		.content_photo_grid.show h4{opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

			/*Delays*/
			.content_photo_grid.show h3{transition-delay:0.3s; -webkit-transition-delay:0.3s;}
			.content_photo_grid.show h4{transition-delay:0.6s; -webkit-transition-delay:0.6s;}

		/*Grid*/
		.content_photo_grid .grid{opacity:0; transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out; will-change:opacity;}
		.content_photo_grid.show .grid{opacity:1; transition-delay:1s; -webkit-transition-delay:1s;}


/*FOOTER*/
footer{padding:40px 0; text-align:center;}

	footer .fliares{width:110px; height:95px; display:inline-block; background:url(../../img/bg_logo_familiares.png) no-repeat; background-size:100% auto; font-size:0;}

	footer a{display:inline-block; text-align:center; font-family:'Lato', sans-serif; font-size:1.250rem; font-weight:400; letter-spacing:3px; margin:0 0 0 50px; top:50px;}


/*Media Query Ipad General*/
@media (max-width: 1100px) {

	.center_content{width:980px;}

	header{padding:60px 0 0;}

		header .content_slider .slick-dots{right:-920px;}
	
}

/*Media Query Mobile General*/
@media (max-width: 1000px) {

	/*Layout*/
	.center_content{width:100%; float:left; padding:0 25px;}

	/*Header*/
	header{padding:30px 0 0;}
	
		header h1{width:90px; height:125px;}

		header h2{width:70px; height:60px;}

		header .content_paragraph{margin:25px 0;}

		header p{width:100%; font-size:1rem; line-height:1.5;}

		header p.small{margin:0 0 25px;}

		header .content_slider .slick-dots{display:none !important;}

		header .content_slider .item .center_content{display:none;}

			header .content_slider figure .desktop{display:none;}
			header .content_slider figure .mobile{display:block;}

		header .btn_down{float:none; width:165px; height:60px; overflow:hidden; margin:0 auto 0; display:block;}

	/*Text*/
	.content_text .center_content h4, 
	.content_text .center_content h3{font-size:1.750rem; line-height:1.8;}

	/*Steps*/
	.content_steps::before{bottom:0;}

	.content_steps h3{font-size:2.625rem; text-align:center;}

	.content_steps h4{font-size:1rem; padding:0 40px; box-sizing:border-box; text-align:center; font-style:italic;}

	.content_steps .steps{width:100%;}
	
	.content_steps .steps li{text-align:center;}

		.content_steps .steps li .number{position:relative; left:auto; top:auto; width:100%; float:left; margin:0 0 10px;}

			.content_steps .steps li .number span{display:none;}

	.content_steps figure{width:100%; top:auto; height:150px; overflow:hidden; margin:40px 0 0;}

	/*Gallery*/
	.content_photo_grid h3{font-size:2.625rem; text-align:center;}

	.content_photo_grid h4{font-size:1rem; padding:0 40px; box-sizing:border-box; text-align:center; font-style:italic;}

	.content_photo_grid .grid{margin:70px 0 0;}

		.content_photo_grid .grid li{width:calc(33.333% - 3px); height:135px; overflow:hidden;}
		.content_photo_grid .grid li:nth-child(4n){width:calc(33.333% - 3px); margin:0 3px 3px 0;}
			
			.content_photo_grid .grid li:nth-child(3n){margin:0 0 3px; width:33.333%;}

				.content_photo_grid .grid li .link .information{bottom:10px; padding:0 10px;}

				.content_photo_grid .grid li .link .information .name{font-size:1.125rem;}

				.content_photo_grid .grid li .link .information .ocupation_age{font-size:0.875rem; margin:0;}

				.content_photo_grid .grid li .link .information .button_download{display:none;}

	/*Footer*/
	footer{padding:40px 0;}
		
		footer .fliares{width:75px; height:65px; float:left;}

		footer a{font-size:1rem; float:right; margin:0; top:15px;}
	
		
}