/*
-----------------------------------------------------------------------
	Home Slider CSS
-----------------------------------------------------------------------
*/

.home-slider-area {
	height: 100vh;

	&.slider-default {
		display: flex;
		height: 1080px;
		@media #{$lg-device} {
			height: 850px;
		}
		@media #{$md-device} {
			height: 780px;
		}
		@media #{$sm-device} {
			height: 710px;
		}
		@media #{$xs-device} {
			height: 620px;
		}
		@media #{$xxs-device} {
			height: 500px;
		}
		@media (max-width:461px) {
			height: 540px;
		}
		.slider-content-area {
			margin-top: 328px;
			text-align: center;
			@media #{$lg-device} {
				margin-top: 300px;
			}
			@media #{$md-device} {
				margin-top: 250px;
			}
			@media #{$sm-device} {
				margin-top: 240px;
			}
			@media #{$xs-device} {
				margin-top: 230px;
			}
			@media #{$xxs-device} {
				margin-top: 200px;
			}
			h5 {
				color: $white;
				font-size: 18px;
				font-weight: $font-weight-normal;
				letter-spacing: .411px;
				line-height: 1;
				margin-bottom: 34px;
				text-transform: uppercase;
				@media #{$lg-device} {
					margin-bottom: 22px;
				}
				@media #{$sm-device} {
					font-size: 16px;
					margin-bottom: 15px;
				}
				@media #{$xxs-device} {
					font-size: 14px;
					margin-bottom: 12px;
				}
			}
		    h2 {
		    	color: $white;
				font-size: 90px;
				font-weight: $font-weight-extra-bold;
				letter-spacing: -2.04px;
				line-height: 100px;
				margin: 0 auto 10px;
				max-width: 580px;
				@media #{$xxl-device} {
					font-size: 84px;
					line-height: 94px;
				}
				@media #{$lg-device} {
					font-size: 72px;
					line-height: 84px;
				}
				@media #{$sm-device} {
					font-size: 64px;
					line-height: 72px;
				}
				@media #{$xs-device} {
					font-size: 50px;
					line-height: 1.1;
				}
				@media #{$xxs-device} {
					font-size: 40px;
				}
				span {
					font-weight: $font-weight-light;
				}
		    }
		}
	}

}