#views-slideshow-form-wrapper .form-item.dependent-options {
  padding-left: 5px;
}

#views-slideshow-form-wrapper .vs-dependent {
  padding-left: 30px;
}

#views_slideshow_controls_text_slideshow-block_1 {
	position:absolute;
	top:50%;            /* adjust as necessary to position your image controls vertically  */ 
    width:100%;           /* other wise use the width of your arrow image*/
	z-index: 5;           /* adjust as needed to keep your image controls "on top" of your slideshow*/
}
.views-slideshow-controls-bottom{
    text-align: center;position: relative;bottom: 41px;z-index: 9;
}
.views-slideshow-pager-field-item {background: #000;width: 15px;height: 15px;overflow: hidden;margin: 2px;border-radius: 50%;display: inline-block;}
.views-slideshow-pager-field-item a{color:#000}
.views-slideshow-controls-bottom .active{background: #ccc !important}
.views-slideshow-controls-bottom .active a{background: #ccc !important;color: #ccc !important}

#views_slideshow_controls_text_slideshow-block_1 a {
	color:#39f;
	display: none;        /* so images are on the same line*/
	height:50px;                   /* your arrow image height*/
	margin:0 10px;                /* to adjust the horizontal spacing of your image controls*/
	outline:none;                     /* disable ghost text outline */
	text-indent: -9999px;         /* hide the default text*/
	width:48px;                         /* your arrow image width*/
}
/* disable ghost text outline */
#views_slideshow_controls_text_slideshow-block_1 a:hover {
	outline:none;
}
/* Add a "previous" arrow image. This image path is relative to the path of the css file. in my case, "MyTheme/images/myimage.png". Upload your images in the right place.*/
#views_slideshow_controls_text_previous_slideshow-block_1 a {
	background: url("../images/arrow-left.png") no-repeat;
    width: 78px;height:104px;
}
/* Add a hover effect*/
#views_slideshow_controls_text_previous_slideshow-block_1 a:hover {
	background: url("../images/arrow-left.png") no-repeat;	width: 78px;height:104px;
}
/* hide the "pause" button text*/
#views_slideshow_controls_text_pause_slideshow-block_1 a {
	display: none;
}
/* add your "next" arrow image */
#views_slideshow_controls_text_next_slideshow-block_1 a {
	background: url("../images/arrow-right.png") no-repeat;
	width: 78px;height:104px;float: right;
}
/* add your "next" hover image */
#views_slideshow_controls_text_next_slideshow-block_1 a:hover {
	background: url("../images/arrow-right.png") no-repeat;
    width: 78px;height:104px;
}
@media (max-width:1366px) {
#views_slideshow_controls_text_slideshow-block_1 {
	position:absolute;
	top:34%;            /* adjust as necessary to position your image controls vertically  */ 
    width:100%;           /* other wise use the width of your arrow image*/
	z-index: 5;           /* adjust as needed to keep your image controls "on top" of your slideshow*/
}    
    
}