/* RIGHT ALIGNED TEXT LAYOUT */
.caption{
	position:absolute;
	right:30px;
	top:26%;
	color:#fff;
	width:50%;
	z-index:8;
	padding: 5px 10px;
	overflow: hidden;
	padding-right:80px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
	box-sizing: border-box;  
	opacity:0;  /* must be omitted if not using animated captions */
	
}


/* CENTERED TEXT LAYOUT */
.caption-center{
	position:absolute;
	top:40%;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	overflow: hidden;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	
}

div.caption-center span.small,div.caption-center span.big{text-align:center;}
div.caption-center p{text-align:center;} /* center align button */

/* end centered text layout */

span.small{display:block;  width:100%; font-family: 'Roboto', sans-serif; font-size:18px; font-weight:400; color:#fff; line-height:normal;margin-bottom:25px;text-shadow:1px 1px 2px  rgba(0,0,0,0.8);}

span.big{display:block; width:100%; font-family: 'Roboto', sans-serif; font-size:40px; font-weight:600; color:#fff; line-height:normal;margin-bottom:15px;text-shadow:2px 2px 3px  rgba(0,0,0,0.2);padding-left:3.5em;padding-right:3.5em;}

/* USE TO PLACE AN IMAGE TO THE LEFT OF SLIDE TEXT - see humanhap site */
.img-left{
	width:40%;
	z-index:8;
	overflow: hidden;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	}

.img-left img{
position: absolute;	
object-fit: scale-down;
height:300px;
max-width: calc(45% - 80px);
overflow:hidden;
top: 0;
bottom: 0;
margin: auto;
left: 80px;
}
/* end img left */

/*  USE .SLIDE-MODE-CAPTION AND .SLIDE-MODE-INNER WITH 'SLIDE' MODE ONLY */

.slide-mode-caption {
	position:relative;
	display:block;
    bottom:320px;
    color: white;
    left:0;
    padding:0 20px;
    right:0;
    z-index:1;
}
.slide-mode-inner{
	position:absolute;
	display:block;
	width:50%;
	right:30px;
	padding-right:80px;
	height:200px;
	}
/* end slide mode */	

/* media queries */

/* Landscape phone to portrait tablet and phone */	
@media (max-width: 767px) {
	ul.slides li img{min-height:300px;object-fit:cover;}
	div.caption,div.caption-center{width:90%;left:5%;right:5%;top:10%;padding-left:30px;padding-right:30px;background:rgba(0,0,0,0.3);}
	span.big{text-align:center;font-size:25px;margin-left:auto;margin-right:auto;padding-left:0px;padding-right:0px;}
	span.small{text-align:center;font-size:14px;margin-left:auto;margin-right:auto;}
	div.caption p{text-align:center;} /* center align button */
	.slidecontainer{margin-top:0px;}
	
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */

div.caption span.big,div.caption-center span.big{font-size:25px;}
div.caption,div.caption-center{top:5%;}
.img-left img{height:250px;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
div.caption span.big,div.caption-center span.big{font-size:25px;}
.img-left{display:none !important;}
.img-left img{display:none !important;}
div.caption,div.caption-center{top:30%;}
.slidecontainer{margin-top:0px;}
}	 	



/* Animation of Captions fade in and slide up */

.fadeInUp {
    -webkit-animation: fadeInUp 600ms ease-in-out; /* Chrome, Safari, Opera */
    animation: fadeInUp 600ms ease-in-out;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
    }
	50% {
        opacity: 0.5;
        
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

/* Standard syntax */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
	 50% {
        opacity: 0.5;
       
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.animated {
	
    animation-duration: 600ms;
    animation-fill-mode: both;
    -webkit-animation-duration: 600ms;
    -webkit-animation-fill-mode: both
}