﻿/** PLATFORMERS - SITE ENGINE - UI | v1.0.0 **/

/*
UI: Slideshow

*/

.pf-ui-slideshow { overflow: hidden; position: relative; width: 100%; height: auto; /*height: 300px;*/ }
.pf-ui-slideshow--list { overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; height: 100%; }
.pf-ui-slideshow--list li { display: inline; float: left; margin: 0; padding: 0; list-style: none; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }

/*** CONTENT : DEFAULT ***/
.pf-ui-slideshow--slide.default > * { margin: 0; padding: 0; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; min-height: 300px; }

/* Let's have our A tag fill the entire slide */
.pf-ui-slideshow--slide.default a { position: relative; display: block; width: 100%; height: 100%; color: #ffffff; transition: color 0.2s ease-in; }
.pf-ui-slideshow--slide.default a:hover { color: #ef233c; }

/* Position our caption at the bottom right corner of the slide */
.pf-ui-slideshow--slide.default a span.caption { display: inline-block; position: absolute; right: 0; bottom: 0; padding: 0.75em 1.5em; font-size: 1.3em; background: #000000; /* fallback for old browsers */ background: rgba(0, 0, 0, 0.8); }

/*** BUTTONS ***/

/* Vertically center our buttons */
.pf-ui-slideshow--prev,
.pf-ui-slideshow--next { position: absolute; top: 50%; z-index: 100; color: #ffffff; font-size: 4em; line-height: 1; text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); cursor: pointer; visibility: hidden; transform: translateY( -50% ); }
.pf-ui-slideshow--prev { left: 15px; }
.pf-ui-slideshow--next { right: 15px; }
.pf-ui-slideshow--prev.disabled { display: none; }
.pf-ui-slideshow--next.disabled { display: none; }
a.pf-ui-slideshow--prev,
a.pf-ui-slideshow--next { color: #ffffff; }
.pf-ui-slideshow:hover .pf-ui-slideshow--prev,
.pf-ui-slideshow:hover .pf-ui-slideshow--next { visibility: visible; }

/* hide the text links */
.pf-ui-slideshow--prev span,
.pf-ui-slideshow--next span { display: none; }

.pf-ui-slideshow--index { position: absolute; bottom: 1rem; z-index: 100; width: 100%; text-align: center; }
.pf-ui-slideshow--index.disabled { display: none; }
.pf-ui-slideshow--index a { color: #fff; opacity: 0.5; /*cursor: pointer;*/ font-size: 1em; }
.pf-ui-slideshow--index a.active { color: #fff; opacity: 1; }



/*
UI: Cookie Policy Accept
*/
.pf-ui-cookie-policy-accept { z-index:10; }
.pf-ui-cookie-policy-accept.fixed { position: fixed; }
.pf-ui-cookie-policy-accept.fixed.bottom { bottom: 0; }
.pf-ui-cookie-policy-accept.fixed.left { left: 0; }

.pf-ui-cookie-policy-accept--content { }
.pf-ui-cookie-policy-accept.fixed > .pf-ui-cookie-policy-accept--content { padding: 1rem; }

.pf-ui-cookie-policy-accept--content.default .ui.segment { display:flex; align-items:center; }
.pf-ui-cookie-policy-accept--content.default .ui.segment > * { display: inline-block; margin: 0 1rem 0 1rem; }
/*.pf-ui-cookie-policy-accept--content.default .ui.segment > *:not(:last-child) { margin-right: 1em; }*/


@media only screen and (min-width: 768px) { 
    .pf-ui-cookie-policy-accept { /*min-width: 450px;*/ min-width: 32rem; }
}

@media only screen and (max-width: 767px) {
    .pf-ui-cookie-policy-accept { width: 100%; }
    .pf-ui-cookie-policy-accept.fixed > .pf-ui-cookie-policy-accept--content { padding:0; }
    .pf-ui-cookie-policy-accept.fixed > .pf-ui-cookie-policy-accept--content > .ui.segment { border-radius:0; }

    .pf-ui-cookie-policy-accept--content.default .ui.segment { flex-direction:column;}
    .pf-ui-cookie-policy-accept--content.default .ui.segment > * { display: block; width:100%; margin: 0 0 1rem 0; }
    .pf-ui-cookie-policy-accept--content.default .ui.segment > button:last-child { margin: 0; }
}