/*
Description: slider.tpl styles
*/

@media only screen and (min-width: 320px) {
	#masterslider.master-slider {
		margin-left: -30px !important;
		margin-right: -30px !important;
	}
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-layer.ms-caption {
	    left: 15px !important;
	    padding-left: 15px;
	    padding-right: 15px;
	}
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-slide-layers .ms-layer-mask img {
		opacity: 0.3;
	}
	.master-slider [data-id="start"] .ms-layer h2.h1 {
		font-size: 26px;
		line-height: normal;
	}
	#masterslider.master-slider .ms-bullets {
		position: relative;
		bottom: inherit !important;
		bottom: initial !important;
		right: inherit;
		right: initial;
		width: auto !important;
		height: 30px;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 30px;
	}
	#masterslider.master-slider .ms-bullets .ms-bullets-count {
		position: relative;
		right: inherit;
		right: initial;
		display: inline-block;
	}
	#masterslider.master-slider.ms-skin-default .ms-bullets .ms-bullets-count .ms-bullet {
		background-color: rgba(103,103,103,.3);
		width: 9px;
		height: 9px;
		margin: 0 4px !important;
		border-radius: 50%;
		background-image: none;
		
		-webkit-transition: background 1000ms ease-in-out;
		-moz-transition: background 1000ms ease-in-out;
		-ms-transition: background 1000ms ease-in-out;
		-o-transition: background 1000ms ease-in-out;
		transition: background 1000ms ease-in-out;
	}
	#masterslider.master-slider.ms-skin-default .ms-bullets .ms-bullets-count .ms-bullet.ms-bullet-selected {
		background-color: rgba(103,103,103,1);
	}
	#masterslider.master-slider.ms-skin-default .ms-nav-next,
	#masterslider.master-slider.ms-skin-default .ms-nav-prev {
		background-image: none;
	}
	#masterslider.master-slider.ms-skin-default .ms-nav-next:after,
	#masterslider.master-slider.ms-skin-default .ms-nav-prev:after {
		content: '';
		display: block;
		font-size: 36px;
		color: #fff;
		
		font-family: 'christiani' !important;
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		
		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	#masterslider.master-slider.ms-skin-default .ms-nav-next:after {
		content: '\e90e';
	}
	#masterslider.master-slider.ms-skin-default .ms-nav-prev:after {
		content: '\e90e';
		
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	#wrapper #masterslider.master-slider .btn:not(.dropdown-toggle) {
		font-size: 15px;
		font-weight: normal;
	}
}

@media only screen and (min-width: 768px) {
	.master-slider [data-id="start"] .ms-layer h2.h1 {
		font-size: 50px;
	}
}

@media (min-width: 992px) {
	#masterslider.master-slider {
		margin-left: calc(((100vW - 100%) / 2) * (-1)) !important;
	    margin-right: calc(((100vW - 100%) / 2) * (-1)) !important;
	}
	#masterslider.master-slider .ms-inner-controls-cont,
	#masterslider.master-slider .ms-inner-controls-cont .ms-view,
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-mask-frame,
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide,
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-slide-layers {
		max-width: 100% !important;
		width: 100% !important;
	}
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-layer.ms-caption {
	    left: calc((100vW - 970px) / 2) !important;
	}
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-slide-layers .ms-layer-mask img {
		opacity: 1;
	}
	.master-slider [data-id="start"] .ms-layer h2.h1 {
		font-size: 40px;
	}	
}

@media (min-width: 1200px) {
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-layer.ms-caption {
	    left: calc((100vW - 1170px) / 2) !important;
	}
}

@media (min-width: 1300px) {
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-layer.ms-caption {
	    left: calc((100vW - 1245px) / 2) !important;
	}
	.master-slider [data-id="start"] .ms-layer h2.h1 {
		font-size: 50px;
	}	
}

@media (min-width: 1745px) {
	#masterslider.master-slider {
		margin-left: calc(((1745px - 1245px) / 2) * (-1)) !important;
	    margin-right: calc(((1745px - 1245px) / 2) * (-1)) !important;
	}
	#masterslider.master-slider .ms-inner-controls-cont .ms-view .ms-slide .ms-layer.ms-caption {
	    left: calc((1745px - 1245px) / 2) !important;
	}
}