/* -----------------------------------------------------------------------------
// This file contains styles that are specific to the Home Page .
// -----------------------------------------------------------------------------
*/




// main.main-content {
//     position: relative;
//     width: 100%;
//     background: $grey;
//     height: 100%;
// }

.wrapper {
	position: relative;
    overflow: hidden;  
}
	main.main-content {
		position: relative;
	}

.maitrimo-slider {
	margin-top: 30px;
	padding: 0 50px;
	.owl-item {
		.slider-item {
			display: inline-block;
			width: 100%;
			img {
				transition: 1.5s all ease;
				width: initial;
				max-width: 280px;
				margin: initial;
			}
			.slider-image {
			    overflow:hidden;
			    position:relative;
			    display:inline-block;
			    width: 0;		
			    transition: 1.5s all ease;
			}
			h1 {
				// @include abs-pos(45%, 50px, auto, auto);
				margin: auto;
				@include font-size-rem(111px);
				z-index: 1;
				font-weight: bold;
				color: $white;
				transition: 1s all ease;
				transition-duration: 300ms;
				@include opacity(0);
			}
			.slider-bg {
				width: 100%;
				z-index: -1;
				// background-color: transparent;
				transition: 1s all ease;
			}						
		}
		&.active.animation {
			.slider-item {
				h1 {
					@include opacity(1);
				}
				.slider-image {
					width: 100%;
				}
				.slider-bg {
					background-color: $blue;
					transition: 0s all ease;
				}
			}
		}
		&:nth-child(odd) {
			.slider-item {
				text-align: center;
				padding-bottom: 120px;
				// @extend %valign;
				.slider-image {
					float: left;
					margin-right: auto;
				}
				img {
					margin: initial;
					transform: translateX(-100px);
				}
				h1 {
					@include abs-pos(45%, 50px, auto, auto);
					margin: auto;
					z-index: 1;
					font-weight: bold;
					color: $white;
				}
				.slider-bg {
					@include abs-pos(auto, 0, 30px, auto);
					max-width: 914px;
					height: 572px;
					height: 60%;
					overflow: hidden;
					&:before {
						content: '';
					    width: 100%;
					    height: 125%;
					    z-index: 9;
					    position: absolute;
					    top: -50px;
					    left: 0;
					    background: white;
					    transform: skewY(7deg);
					    transition: 1s all ease;
					}
				}			
			}
			&.active.animation {
				.slider-item {
					img {
						transform: translateX(0);
					}
					.slider-bg {
						&:before {
	    					top: -100%;
	    					height: 100%;
						    transform: skewY(0);
						}
					}					
				}

				&.no-animation {
					background-color: red;
					.slider-item {
						img {
							transform: translateX(-100px);
							transition: 0.2s all ease;
						}
						.slider-bg {
							&:before {
							    height: 125%;
							    top: -50px;
							    transform: skewY(7deg);
							    transition: 0.2s all ease;
							}
						}						
					}
				}												
			}			
		}
		&:nth-child(even) {
			.slider-item {
				.slider-image {
					margin-left: auto;
					float: right;
				}				
				img {
					float: right;
					transform: translateX(100px);
				}
				h1, .slider-bg {
					@include abs-pos(0, auto, auto, 0);
				}
				h1 {
					top: 80px;
					left: 50px;
				}
				.slider-bg {
					height: 390px;
					top: 50px;
					&:before {
					    content: '';
					    width: 100%;
					    height: 165%;
					    z-index: 9;
					    position: absolute;
					    top: -110px;
					    left: 0;
					    background: $white;
					    transform: skewY(-7deg);
					    transition: 1s all ease;
					}					

				}
			}
			&.active.animation {
				.slider-item {
					img {
						transform: translateX(0);
					}
					.slider-bg {
						&:before {
	    					top: -120%;
	    					height: 100%;
						    transform: skewY(0);
						}
					}					
				}
				&.no-animation {
					background-color: red;
					.slider-item {
						img {
							transform: translateX(100px);
							transition: 0.2s all ease;
						}
						.slider-bg {
							&:before {
							    height: 125%;
							    top: -50px;
							    transform: skewY(-7deg);
							    transition: 0.2s all ease;
							}
						}						
					}
				}				
			}			
		}		
	}		
}

/* Slider */
.owl-theme .owl-dots, .owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 10px; }

.owl-theme .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent; }
  .owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline; }
    .owl-theme .owl-dots .owl-dot span {
      width: 7px;
      height: 7px;
      margin: 5px 10px;
      background-color: rgba(6, 14, 159, 0.5);
      display: block;
      -webkit-backface-visibility: visible;
      transition: all 0.2s ease;
      border-radius: 30px; }
    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
      background-color: $blue; }



/* Responsive */

@include breakpoint(sm_up) {
	main.main-content {
	    // padding: 40px 67.5px;
	    // padding: 40px 0;
	}
	.maitrimo-slider {
		.owl-item {
			// &:nth-child(odd) {
				.slider-item {
					img {
						max-width: 450px;
					}
				}
			// }						
		}		
	
	}	
}
@include breakpoint(md_up) {
    .wrapper {
        padding-left: 290px;    
    }

	.maitrimo-slider {
		.owl-item {
			&:nth-child(odd) {
				.slider-item {
					padding-bottom: 120px;
					h1 {
						@include abs-pos(45%, 15%, auto, auto);
					}			
					.slider-bg {
						// @include abs-pos(auto, 10%, 30px, auto);
						max-width: 500px;
						height: 428px;
					}
				}				
			}
			&:nth-child(even) {
				.slider-item {
					img {
						max-width: 700px;
					}
				}
			}						
		}		
	
	}	
}

@include breakpoint(lg_up) {
	.maitrimo-slider {
		margin-top: 80px;		
		.owl-item {
			&:nth-child(odd) {
				.slider-item {
					padding-bottom: 120px;
					h1 {
						@include abs-pos(45%, 15%, auto, auto);
					}			
					.slider-bg {
						// @include abs-pos(auto, 10%, 30px, auto);
						max-width: 700px;
						height: 428px;
					}
				}				
			}
			&:nth-child(even) {
				.slider-item {
					img {
						max-width: 800px;
					}
				}
			}				
		}			
	}	
}

/* Responsive */
@include breakpoint(md_down) {
	.maitrimo-slider {
		.owl-item{
			.slider-item {
			    h1 {
			    	@include font-size-rem(101px);			    			    	
			    }
			}			
			&:nth-child(odd){
				.slider-item {
				    padding-top: 120px;
				    padding-bottom: 0;
				    h1 {
					    top: 20px;
					    right: 40px;
				    }
					.slider-bg {
						width: 70%;
						top: 0;
						bottom: auto;
						right: 0;
						&:before {
							height: 128%;
						}
					}
				}
			} 			
			&:nth-child(even){
				.slider-item {
					.slider-bg {
						height: 200px;	
						&:before {
							height: 185%;
						}									
					}
				}
			} 	
		}
	}
}
@include breakpoint(sm_down) {
	.maitrimo-slider {
		padding: 0 0 0 30px;
		.owl-stage-outer {
			width: 100%;
		}
		.owl-item{
			.slider-item {
				padding-top: 90px !important;
				padding-bottom: 60px !important;
			    h1 {
			    	@include font-size-rem(60px);				    	
			    }
			}			
			&:nth-child(odd){
				.slider-item {
					.slider-bg {
						width: 90%;
						height: 100%;
						&:before {
						    height: 145%;
						    top: -25px;							
						}						
					}
				}
			}
			&:nth-child(even){
				.slider-item {
					.slider-bg {
						width: 90%;
						height: 100%;
						top: 0;
						bottom: auto;
						right: 0;						
						&:before {
						    height: 145%;
						    top: -25px;							
						}						
					}
				}
			}				
		}
	}
}
@media (min-width: 1441px)  {
	.maitrimo-slider {
		margin-top: 80px;
		.owl-item {
			.slider-item {
				h1 {
					@include font-size-rem(179px);
				}				
			}
			&:nth-child(odd) {
				.slider-item {
					padding-bottom: 120px;
					img {
						max-width: initial;				
					}
					h1 {
						right: 10%;
						left: auto;
					}
					.slider-bg {
						// @include abs-pos(auto, 0, 50px, auto);
						max-width: 800px;
						height: 450px;
					}
				}
			}
			&:nth-child(even) {
				.slider-item {
					img {
						max-width: 960px;
					}
				}
			}			
		}			
	}	
}