/*----- SLIDER (JQUERY) - PROJECT GALLERY PAGES - SLICK SLIDE -----*/

/*SLIDER - MARGIN BETWEEN EACH IMAGE AND TOP/BOTTOM OF SLIDER*/
.slick-slide {margin: 40px 25px;}

/*SLIDER - .slick-slide img {width: auto;} */
.slick-prev:before,.slick-next:before {color: WHITE;}
.slick-prev, .slick-next {margin: inherit;}

/*SLIDER - MOVEMENT*/
.slick-slide {transition: all ease-in-out .3s; opacity: .2;}

/*SLIDER - IMGS TO LEFT AND RIGHT*/
.slick-active {opacity: 1;}

/*SLIDER - MAIN CENTER IMG*/
.slick-current {opacity: 1;}

/*SLIDER - imgs within slider - make same height*/
.horizontal {height: 80vh;width: auto;}
.vertical {width: auto;max-height: max-content;max-width: 100%;height: 80vh;}

/*SLIDER - change default 'slick' arrows to chevrons*/
.slick-prev::before {content: '<'; font-size: 2.5rem;}
.slick-next::before {content: '>'; font-size: 2.5rem;}
	
/*SLIDER - ARROW COLOR*/	
#slider1 button.slick-next.slick-arrow::before, 
#slider1 button.slick-prev.slick-arrow::before 
	{color: red !important;}	

/*SLIDER - ARROW COLOR*/
#slider2 button.slick-next.slick-arrow::before, 
#slider2 button.slick-prev.slick-arrow::before 
	{color: darkblue !important}
	
/*SLIDER - change arrow clickers left/right spacing-*/
.slick-prev, .slick-next {margin: auto;}

/*SLIDER - MOVES CHEVRONS  (default -arrows)*/
.slider {height: auto; width: auto; margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; }

/*SLIDER - PADDING*/
div.slick-list.draggable {padding: 20px 70px 70px 70px!important;}

/*SLIDER IMGS -LARGE MEDIA SCREEN*//*breakpoint 1024 i-pad vertical*/
@media screen and (max-width:1042px){
.horizontal, .vertical {height: 600px; width: 100% !important;}
	
/*SLIDER - MARGIN BETWEEN EACH IMAGE AND TOP/BOTTOM OF SLIDER*/
.slick-slide {margin: 35px 15px;}

/*SLIDER - PADDING*/
div.slick-list.draggable {padding: 10px!important;}
	
} 
/*END LARGE MEDIA SCREEN FOR SLIDER*/
	
/*NEW IMG DISPLAY - medium images no show on large screen*/
.mediumImg {display: none;}		

		
/*SLIDER IMGS - MD MEDIA SCREEN*//*breakpoint 992*/
@media screen and (max-width:992px){
.responsive .slider, section .center .slider, .topSlider {display: none;}

/*medium images no show on large screen*/
.mediumImg {display: block;}

figure {padding: 0px 5px 25px 5px;}
} 
/* END MEDIUM MEDIA SCREEN FOR SLIDER AND NEW IMG DISPLAY*/