/*
############################################################################
CSS for Typesetter Responsive Image Section / Responsive Background Section
Author: J. Krausz
Date: 2015-03-15
Version 1.5.2
############################################################################
*/

/* ### FOCUSED IMAGES ### */
.focuspoint {
position:relative;
overflow:hidden;
}

.focuspoint img {
position:absolute;
left:0;
top:0;
margin:0;
display:block;
width:auto; 
height:auto;
min-width:100%; 
min-height:100%;
max-height:none; 
max-width:none;
}



/* ### SECTION/CONTAINER ### */

.filetype-responsive_image,
.filetype-responsive_background,
.filetype-responsive_image *,
.filetype-responsive_background * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
position:relative;
}

.filetype-responsive_background {
position:absolute!important;
top:0;
left:0;
margin:0!important;
padding:0!important;
width:100%!important;
height:100%!important;
}

.filetype-responsive_image .responsive_image_wrapper,
.filetype-responsive_background .responsive_image_wrapper {
display:block;
position:relative;
overflow:hidden;
padding-top:66.667%;
height:0;
}


/* ### IMAGE CONTAINER ### */

.filetype-responsive_image .focuspoint,
.filetype-responsive_background .focuspoint {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* ### CAPTION ### */

.filetype-responsive_image .responsive_image_caption_wrapper,
.filetype-responsive_background .responsive_image_caption_wrapper {
display:block;
position:absolute;
text-align:center;
top:0;
left:0;
width:100%;
height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;

background:#000; 
background:rgba(0,0,0,0.6);
color:#fff; 
color:rgba(255,255,255,0.85);
}

.filetype-responsive_image .responsive_image_caption_wrapper:before,
.filetype-responsive_background .responsive_image_caption_wrapper:before {
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
width:0;
}

.filetype-responsive_image .responsive_image_caption,
.filetype-responsive_background .responsive_image_caption {
display:inline-block;
vertical-align:middle;
text-align:left;
}


.filetype-responsive_image .responsive_image_caption_wrapper.caption-show-never,
.filetype-responsive_background .responsive_image_caption_wrapper.caption-show-never {
display:none;
}

.filetype-responsive_image .responsive_image_caption_wrapper.caption-show-hover,
.filetype-responsive_background .responsive_image_caption_wrapper.caption-show-hover {
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}

.filetype-responsive_image .responsive_image_caption_wrapper.caption-show-always,
.filetype-responsive_background .responsive_image_caption_wrapper.caption-show-always,
.filetype-responsive_image:hover .responsive_image_caption_wrapper.caption-show-hover,
.filetype-responsive_background:hover .responsive_image_caption_wrapper.caption-show-hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-webkit-opacity:1;
-moz-opacity:1;
opacity:1;
}



/* ### FULL SCREEN ### */

.fullscreen-trigger {
cursor:pointer;
position:absolute;
z-index:30;
top:12px;
right:12px;
width:20px;
height:20px;
text-indent:22px;
white-space:nowrap;
overflow:hidden;
background-color:#000;
background-color:rgba(0,0,0,0.5);
border-radius:3px;
background-image:url(img/fullscreen-trigger.png);
background-position:0 0;
background-repeat:no-repeat;
-webkit-transition:background-color 0.3s;
-moz-transition:background-color 0.3s;
-ms-transition:background-color 0.3s;
-o-transition:background-color 0.3s;
transition:background-color 0.3s;
outline:none!important;
border:none;
}

.fullscreen-trigger:hover {
background-color:rgba(0,0,0,0.9);
background-position:-20px 0;
}

.is-fullscreen .fullscreen-trigger {
background-position:0 -20px;
}

.is-fullscreen .fullscreen-trigger:hover {
background-position:-20px -20px;
}