/*

############################################################################

CSS for Typesetter Responsive Image Section / Responsive Background Section

Author: J. Krausz

Date: 2015-03-15

Version 1.5.3-b1

############################################################################

*/



/* ### 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;

}