@charset "UTF-8";

/* Main DIV that holds the entire slideShow (one per slideShow) */
.inlineSlideShow{
	display: block;
	width: 100%;
	height: 666px;
	margin: auto;
	opacity: 1;
	/*background: none;*/
	position: relative;
	max-width: 748px;
	margin-top: 20px;
	margin-bottom: 40px;
}
@media (max-width:400px){
    .inlineSlideShow{
	   margin-bottom: 0px;
	   height: 666px;
    }
}
@media (min-width:401px) and (max-width:550px){
    .inlineSlideShow{
	   margin-bottom: 40px;
	   height: 750px;
    }
}
@media (min-width:551px) and (max-width:650px){
    .inlineSlideShow{
	   margin-bottom: 40px;
	   height: 830px;
    }
}
@media (min-width:651px) and (max-width:900px){
    .inlineSlideShow{
	   margin-bottom: 40px;
	   height: 970px;
    }
}
@media (min-width:901px){
    .inlineSlideShow{
	   margin-bottom: 40px;
	   height: 940px;
    }
}
 

.inlineSlideShow  .slideShowHolder{ 
	width:100%;
	height:100%;
	position:absolute;
	/*background: none;*/
}
/* DIV that holds all of the actual slides (there's one slidesHolder per slideShow) */
.inlineSlideShow .slidesHolder{
	width:100%;
	height:100%;
	position:absolute;
	z-index:1000;
	overflow:hidden;
	margin:auto;
	left:0;
	right:0;
}
/* Div that holds each slide and its caption (one for each slide)  */
.inlineSlideShow .slideHolder{
	width:100%;
	height:100%;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
	overflow:hidden;
}
.inlineSlideShow .imageHolder{
	width:100%;
	height:100%;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	top:0;
	overflow:hidden;
}

@media (max-width: 700px) {
    .ss-photocredit {
        color: rgb(137, 138, 141); 
        text-transform:uppercase; 
        font-style:normal;
        font-size:13px; 
        line-height:15px;

    }
}
@media (min-width: 701px) and (max-width: 1100px){
    .ss-photocredit {
        color: rgb(137, 138, 141); 
        text-transform:uppercase; 
        font-style:normal; 
        font-size:14px;
        line-height:15px;
    }
}
@media (min-width: 1101px) {
    .ss-photocredit {
        color: rgb(137, 138, 141); 
        text-transform:uppercase; 
        font-style:normal; 
        font-size:14px;
        line-height:15px;
    }
}

/* Div that holds the captionBar for a slide (one per slide) */
.inlineSlideShow  .captionBarHolder{
	position:absolute;
	width:100%;
	height:25%;
	bottom:0%;
	background-color:#f3f3f3;
	z-index:100;
}
@media (max-width: 770px) {
    .inlineSlideShow .captionText{
        font-size: 17px;
        line-height: 20px;
        text-align: left;
        margin-top: 0px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: "Minion W08";
        font-style:italic;
        color:rgb(51, 51, 51);
        text-align: left;
    }
}
@media (min-width: 771px) and (max-width: 1100px){
    .inlineSlideShow .captionText{
        font-size: 17px;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:16px;
        font-family: "Minion W08";
        font-style:italic;
        color:rgb(51, 51, 51);
        text-align: left;
    }
}
@media (min-width: 1101px){
    .inlineSlideShow .captionText{
        font-size: 17px;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:16px;
        font-family: "Minion W08";
        font-style:italic;
        text-align: left;
        color:rgb(51, 51, 51);
    }
}



@media (max-width: 900px){
    /* One per slide */
    .inlineSlideShow .pageCount{
        font-size: 12px;
        color: white;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 3px;
        top:-66px;
        position:absolute;
        margin:auto;
        left:0;
        right:0;
    }
    .inlineSlideShow .arrowHolder{
        width:100%;
        /*height:6.5%;*/
        /*position:absolute;*/
        z-index:2000;
        margin-bottom:2%;
    }
    .inlineSlideShow  .arrowLeft{
        position:absolute;
        width:auto;
        height:6.5%;
        left:40px;
        right:auto;
        color:black;
        z-index:2000;
    }
    .inlineSlideShow  .arrowRight{
        position:absolute;
        width:auto;
        height:6.5%;
        right:40px;
        left:auto;
        color:black;
        z-index:2001;
    }
}
@media (min-width: 901px){
    /* One per slide */
    .inlineSlideShow .pageCount{
        font-size: 12px;
        color: white;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 3px;
        bottom:17px;
        position:absolute;
        margin:auto;
        left:0;
        right:0;
    }
    .inlineSlideShow .arrowHolder{
        width:100%;
        /*height:14%;*/
        /*position:absolute;*/
        z-index:2000;
        margin-bottom:55%;
    }
    .inlineSlideShow  .arrowLeft{
        position:absolute;
        width:auto;
        height:14%;
        left:-80px;
        right:auto;
        cursor: pointer;
        color:black;
    }
    .inlineSlideShow  .arrowRight{
        position:absolute;
        width:auto;
        height:14%;
        right:-80px;
        left:auto;
        cursor: pointer;
        color:black;
    }
}


.inlineSlideShow .closeBtn{
	position:absolute;
	right:20px;
	top:20px;
	width:30px;
	height:30px;
}
.inlineSlideShow .openBtn{
	position:absolute;
	right:20px;
	bottom:20px;
	
}

/* On top of slidesHolder - holds the arrows and anything else that needs to be on top of slideShow   */