@import "../mixins";
@import "../variables";


/*  Main Page / .page-main*/
.page-main{  
}

/* Section / .section*/
.section{
	$wrapper-margin : 96px;
	.content{
		@include clearfix;
		width: 100%;
		padding: 64px 0;
		@media(min-width: 601px){
			min-height: 100%;
		}
		@media(min-width: 801px){
			padding: 0;
			padding-top: 96px; /* Compensación para el header */
		}
		// Fixed title
		.c-title{
			position: absolute;
			top: 110px;
			left: auto;
			right: 16px;
			h2{
				font-weight: 300;
				font-size: 18px;
			}
			@media(min-width: 601px){
				right: 64px;
				top: 96px;
				h2{
					font-size: 32px;
				}
			}
			@media(min-width: 801px){
				position: absolute;
				top: 80px;
				left: 64px;
				h2{
					font-size: 72px;
				}
			}
		}
		// content center
		.c-center{
			width: 100%;
			@media(min-width: 801px){
				/* min-height: 100vh; */
				width: 100%;
//				float: left;
				display: flex;
				align-items: center;
				
//				@media screen and (min-width:0\0) {
//					height: 100vh;
//				}
			}
			@media(min-width: 801px){
				justify-content: center;
			}
			.wrapper{
				
				padding: ($wrapper-margin - 64px) 16px;
				@media(min-width: 601px){
					padding-left: 64px;
					padding-right: 64px;
				}
				@media(min-width: 801px){
					padding-top: $wrapper-margin;
					padding-bottom: $wrapper-margin;
				}
				@media(min-width: 1025px){
					padding-top: $wrapper-margin;
					padding-bottom: $wrapper-margin;
					padding-left: 64px;
					padding-right: 96px;
				}
				.title-desc{
					max-width: 960px;
				}
				
			}
		}
		// Content left
		.c-left{
			width: 100%;
			@media(min-width: 801px){
				/* min-height: 100vh; */
				width: 50%;
				float: left;
				display: flex;
				align-items: center;
			}
			@media(min-width: 801px){
				justify-content: flex-end;
			}
			.wrapper{
				
				padding: ($wrapper-margin - 64px) 16px;
				@media(min-width: 601px){
					padding-left: 64px;
					padding-right: 64px;
				}
				@media(min-width: 801px){
					padding-top: 40px;
					padding-bottom: 40px;
				}
				@media(min-width: 1025px){
					padding-top: 16px;
					padding-bottom: 16px;
					padding-left: 64px;
					padding-right: 96px;
				}
				
			}
		}
		
		// content right
		.c-right{
			width: 100%;
			position: relative;
			@media(min-width: 801px){
				/* min-height: 100vh; */
				width: 50%;
				float: right;
				display: flex;
				align-items: center;
				//justify-content: center;
			}
			.wrapper{
				padding: ($wrapper-margin - 64px) 16px;
				@media(min-width: 601px){
					padding-right: 64px;
					padding-left: 64px;
				}
				@media(min-width: 801px){
					padding-top: 40px;
					padding-bottom: 40px;
				}
				@media(min-width: 1025px){
					padding-top: 16px;
					padding-bottom: 16px;
					padding-right: 64px;
					padding-left: 96px;
				}
			}
			&:before{
				@media(min-width: 801px){
					position: absolute;
					content: "";
					background: $white;
					top: 25vh;
					left: -1px;
					width: 2px;
					height: 50vh;
					transform: rotate(10deg);
				}
			}
		}
		.c-left,
		.c-right{
			.wrapper{
				width: 100%;
				&.fit{
					width: auto;
					max-width: 480px;
					@media(min-width: 801px){
						max-width: 720px;
					}
				}
				max-width: 720px;
			}
		}
		.c-left,
		.c-right,
		.c-center{
			@media(min-width: 801px){
				// IE 11 Hack
				@media screen and (min-width:0\0) {
					height: 100vh;
				}
			}
		}
		
		// title desc
		.title-desc{
			max-width: 480px;
			.logo{
				img{
					height: 64px;
					width: auto;
				}
			}
			h3{
				font-size: 2rem;
			}
			h2 {
				font-size: 3rem;
				font-weight: bold;
			}
			h1, h2, h3, h4 {
				margin-bottom: 0.25em;
			}
			ul, li{
				list-style: circle;
				list-style-position: inside;
			}
			.title{
				h2{
					font-size: 48px;
					line-height: 1;
					font-weight: 300;
					@media(min-width: 601px){
						font-size: 72px;
					}
				}
			}
			.desc{
			}
		}
		
		// Item list
		.item-list{
			li{
				padding-right: 24px;
			}
		}
	}
	// CTA btns
	.cta-btns{
		.btn{
			margin-right: 16px;
		}
	}
	
	// Animation 
	.anim{
		.anim-wrapper{
			overflow: hidden;
			display: block;
		}
		h2{
			transition: 0.6s;
			transition-delay: 0s;
			position: relative;
			transform: translateY(120%);
			transition-timing-function: cubic-bezier(.52, .42, 0, 1.01);
		}
		h3,h4{
			transition: 0.6s;
			transition-delay: 0s;
			position: relative;
			transform: translateY(120%);
			transition-timing-function: cubic-bezier(.52, .42, 0, 1.01);
		}
		p{
			transition: 0.6s;
			transition-delay: 0s;
			position: relative;
			transform: translateY(-120%);
			transition-timing-function: cubic-bezier(.52, .42, 0, 1.01);
		}
		.item-desc{
			h3{
				transform: translateX(-120%);
				position: relative;
				&:before{
					content: "";
					background: $white;
					z-index: 1;
					position: absolute;
					width: 0%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
					transition: left 0.9s, width 0.3s , opacity 0s;
				}
			}
		}
		.cta-btns{
			.anim-wrapper{
				transition: 0.6s;
				display: inline-block;
				opacity: 0;
				transform: scale(1.2);
				transition-timing-function: cubic-bezier(.52, .42, 0, 1.01);
			}
		}
	}
	
	&.active{
		.anim{
			h2{
				transform: none;
				transition-delay: 0.6s;
			}
			h3,h4{
				transform: none;
				transition-delay: 0.8s;
			}
			p{
				transform: none;
				transition-delay: 1.0s;
			}
			.cta-btns{
				.anim-wrapper{
					opacity: 1;
					transform: none;
					transition-delay: 1.2s;
				}
			}
			$begin : 0.6s;
			$param : 0.2;
			@for $i from 1 through 15 {
				.contact-list li.anim:nth-child(#{$i}),
				.item-list li.anim:nth-child(#{$i}){
					.item-desc{
						h3{
							transform: none;
							transition-delay: ($begin - $param) + $i*$param + 0.2s;
							&:before{
								opacity: 1;
								transition: left 0.9s, width 0.3s;
								transition-delay: ($begin - $param) + $i*$param + 0.1s;
								width: 100%;
								left: 100%;
							}
						}
					}
				}
			}
		}
	}
}


// Fullpage.js fix
//.fp-responsive{
//	.fp-auto-height-responsive{
//		.fp-scrollable{
//			height: auto !important;
//		}
//	}
//	
//}

