﻿.swiper-container {margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;/* Fix of Webkit flickering */z-index:1;}
.swiper-wrapper {position:relative;width:100%;-webkit-transition-property:-webkit-transform, left, top;-webkit-transition-duration:0s;-webkit-transform:translate3d(0px,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform, left, top;-moz-transition-duration:0s;-moz-transform:translate3d(0px,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform, left, top;-o-transition-duration:0s;-o-transform:translate3d(0px,0,0);-o-transition-timing-function:ease;-o-transform:translate(0px,0px);-ms-transition-property:-ms-transform, left, top;-ms-transition-duration:0s;-ms-transform:translate3d(0px,0,0);-ms-transition-timing-function:ease;transition-property:transform, left, top;transition-duration:0s;transform:translate3d(0px,0,0);transition-timing-function:ease;}
.swiper-free-mode > .swiper-wrapper {-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;margin: 0 auto;}
.swiper-slide { float: left; }
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {-ms-touch-action: pan-y;}
.swiper-wp8-vertical {-ms-touch-action: pan-x;}

/* ====== Your custom styles, here you need to specify container's and slide's sizes, pagination, etc. =====================*/
.swiper-container {background-color: #ccc; height: 475px; width: 100%;}
.blk-slide {background-color: #000;}

.swiper-slide {height: 475px; width: 100%;}
.swiper-slide .item {position: relative;top: 0;left: 0;width: 100%;height: 100%;margin: 0 0 0 0;float:left;}

.swiper-slide-content {max-width: 1140px;height: auto;margin: 0 auto;padding: 0;position: relative;}
.slider-text {display: inline-block; margin:120px 0 20px 80px; max-width: 500px; position: relative; z-index: 500;} /* float: left; padding: 20px; margin-left: 30px; */
.swiper-slide .title {text-align: left;}
.swiper-slide h1 { font-size: 42px; color: #fff; line-height: 44px; font-weight: 100;}
.swiper-slide h2 {font-size: 36px; color: #fff; line-height: 40px; font-weight: 100; margin-bottom: 12px;}
.swiper-slide h3 {font-size: 20px; color: #fff; line-height: 24px; font-weight: 100;}
.swiper-slide h4 {bottom: 0; position: fixed; margin-bottom: 30px; font-size: 26px;color: #fff;line-height: 20px; font-style: italic; letter-spacing: 0.3px;}
.swiper-slide h4 a {color: #fff !important; font-weight: 300;}
.swiper-slide h4 a:hover {color: #ccc !important;}
.swiper-slide .desc {text-align: left;}

.swiper-slide a:link {color: #cccccc; text-decoration:none;} /*grey*/
.swiper-slide a:visited {color: #cccccc; text-decoration:none;} /*grey*/
.swiper-slide a:hover {color: #999999; text-decoration:none;}
.swiper-slide a:active {color: #FF9900; text-decoration:none;}
.swiper-slide .image {position: relative;max-width: 100%;height: 475px;margin: 0 auto;padding: 0;}
.swiper-slide #image1 {position: relative; width: 100%; height: auto; padding: 0; height: 100%; background: url('../images/slider1.jpg') no-repeat center top; border-bottom: #b32216 solid 88px;}
.swiper-slide #image2 {position: relative; width: 100%; height: auto; padding: 0; height: 100%; background: url('../images/slider-training.jpg') no-repeat center top; border-bottom: #b32216 solid 88px;}
.swiper-slide #image3 {position: relative; width: 100%; height: auto; padding: 0; height: 100%; background: url('../images/slider-officers.jpg') no-repeat center top; border-bottom: #b32216 solid 88px;}
/* ========================== Pagination Styles ===================*/
.pagination {position: relative; bottom: 30px; z-index: 200; float:none;text-align: center; }
.swiper-pagination-switch {display: inline-block;width: 12px;height: 12px;border-radius: 8px;background: #fff;margin-right: 8px;opacity: 0.8;cursor: pointer;}
.swiper-visible-switch {background: #aaa;}
.swiper-active-switch {background: #000;}
.swiper-container .arrow-left {background: url('../images/arrows.png') no-repeat left top;position: absolute;left: 10px;top: 50%;margin-top: -15px;width: 17px;height: 30px; text-indent: -9999px;}
.swiper-container .arrow-right {background: url('../images/arrows.png') no-repeat left bottom;position: absolute;right: 20px;top: 50%;margin-top: -15px;width: 17px;height: 30px; text-indent: -9999px;}
/* =========================== For Mobile devices ================================*/
 /*Styles for screen 1100px and lower*/
@media screen and (max-width: 1100px) { }
	 /*Styles for screen 1024px and lower*/
@media screen and (max-width: 1030px) {  
	.swiper-slide h1 {font-size: 36px;}
	.swiper-slide h2 {font-size: 28px; line-height: 36px;}
	.slider-text {background-color: rgba(0, 0, 0, 0.7); border-radius: 0; -webkit-border-radius:0; margin: 0 auto; margin-top: 15%; max-width: 100%; padding: 25px; text-align: center; width: 100%;} /*background-color: rgba(255, 255, 255, 0.9);*/
	.swiper-slide .desc {text-align: center;} /* added 02 25 21 --- updated 05 10 2022 */
	.swiper-slide .title {max-width: 400px; margin-top: 0;}
	.greytitle {color: #fff;}
}

 /*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	.swiper-slide h1 {font-size: 34px; line-height: 34px; margin-top: 0;}
	.swiper-slide h2 {font-size: 24px; line-height: 28px; padding: 0px;}
	.swiper-container {height: 400px;}
	.swiper-slide {height: 400px;}
}
 /*Styles for screen 568px and lower*/
@media screen and (max-width: 568px) { 
}
 /*Styles for screen 480px and lower*/
@media screen and (max-width: 480px) { 
	.slider-text {padding: 18px;} /* changed 02 25 21*/
	.swiper-container {height: 380px;}
	.swiper-slide {height: 380px;}
}
 /*Styles for screen 384px and lower*/
@media screen and (max-width: 384px) { 
	.swiper-slide h1 {margin-bottom: 8px; line-height: 34px;}
	.swiper-slide h4 {font-size: 20px; margin-bottom: 40px;}
}
 /*Styles for screen 320px and lower*/
@media screen and (max-width: 320px) {  
	.slider-text {max-width: 265px;}
	.swiper-slide h4 {font-size: 18px; margin-bottom: 40px;}
}
 /*Styles for screen 240px and lower*/
@media screen and (max-width: 240px) {  
	.slider-text {max-width: 190px; padding: 14px;}
	.swiper-slide h1 {font-size: 28px;}
	.swiper-slide h2 {font-size:20px; line-height: 22px }
}