/* WEB FONT IMPORT ===================================================================================================================================== */ @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900); @import url(//fonts.googleapis.com/css?family=Merriweather:300,400,700,900); @import url(//fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700); /* TEXTO ===================================================================================================================================== */ *{margin:0;padding:0;} body { background: white; font-family: 'Source Sans Pro', sans-serif; color: #fff; overflow-x: hidden; } .content{ margin: 1em 2em; } a{ color:#fff; } /* SLIDES ===================================================================================================================================== */ .bss-slides{ position: relative; display: block; } .bss-slides:focus{ outline: 0; } .bss-slides figure{ position: absolute; top: 0; width: 100%; } .bss-slides figure:first-child{ position: relative; } .bss-slides figure img{ opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bss-slides .bss-show{ z-index: 2; } .bss-slides .bss-show img{ opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; } .bss-slides figcaption{ position: absolute; font-family: 'Source Sans Pro', sans-serif; font:600; font-size: 16px/1.2em; bottom: .75em; left: .01em; padding: .25em; color: #fff; background: #000; background: rgba(0,0,0, .55); border-radius: 0px; opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; } .arranque{ font-weight:700; text-transform:uppercase;} .bss-slides .bss-show figcaption{ z-index: 3; opacity: 1; } .bss-slides figcaption a{ color: #fff; } .bss-next, .bss-prev{ color: #fff; position: absolute; background: #000; background: rgba(0,0,0, 25); top: 50%; z-index: 4; font-size: 2em; margin-top: -1.2em; opacity: .7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bss-next:hover, .bss-prev:hover{ cursor: pointer; opacity: 1; } .bss-next{ right: 0px; padding: 10px 5px 15px 10px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .bss-prev{ left: 0; padding: 10px 10px 15px 5px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .bss-fullscreen{ display: block; width: 32px; height: 32px; background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); -webkit-background-size: contain; background-size: contain; position: absolute; top: 5px; left: 5px; cursor: pointer; opacity: .3; } .bss-fullscreen:hover{ opacity: .8; } :-webkit-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; } :-moz-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; } :-ms-fullscreen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; } :full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; } :-webkit-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; } :-moz-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; } :-ms-fullscreen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); background-size: contain; } :fullscreen .bss-fullscreen{ background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png); -webkit-background-size: contain; background-size: contain; } @media screen and (max-width: 768px){ .bss-slides figcaption{ position: relative; font-size: 13px; bottom: 4px; background: rgba(0,0,0, 100); } .arranque{ font-weight:700; text-transform:uppercase;} }