<style>
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 20px;
        font-family: Arial, sans-serif;
        background-color: #000000;
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 20px;
        font-family: Arial, sans-serif;
        background-color: #000000;
    }

    .polaroid {
        text-decoration: none; 
        display: inline-block; 
        background-color: black; 
        text-align: center; 
        width: auto; 
        #max-width: 300px; 
        position: relative;
      	padding: 0px;
    }
    .polaroid-video {
        display: block; 
        width: 100%; 
        height: auto;
    }
    .polaroid-text {
        position: absolute;
        bottom: 3;
        width: 100%;
        color: white; 
        font-weight: bold;
      	text-transform: uppercase;
      	font-size: 15px; 
      	 padding: 5px; text-align: center;
      	#width:90%;
		text-shadow: -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black stroke */
    }
    h4{
        font-weight: bold;
 
      	font-size: 27px; 
  }
    .h1text {
        #bottom: 3;
        width: 100%;
        color: white; 
        font-weight: bold;
      	text-transform: uppercase;
      	font-size: 17px; 
      
      	text-align: center;
      	width:90%;
		text-shadow: -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black stroke */
    }
	    .fullversion {
        font-weight: bold;
      	text-transform: uppercase;
      	font-size: 20px; 
		text-shadow: -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black stroke */
    }
        .play-button {
            font-size: 20px;
            color: orange;
            text-decoration: underline;
            font-weight: bold;
            animation: blinker 1s linear infinite;
            cursor: pointer;
            border: 2px solid black;
            padding: 10px 20px;
            display: inline-block;
            border-radius: 10px;
        }

        .thumb-button {
            font-size: 30px;
            #color: red;
            #animation: blinker 1s linear infinite;
            cursor: pointer;
            margin-left: 20px;
          	text-decoration: underline;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }

        .play-button:hover, .thumb-button:hover {
            color: blue;
        }

        .buttons-container {
            display: flex;
            align-items: center;
        }


         .top-bar {
            background-color: black;
            color: white;
            height: 20px;
            width: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .top-bar a {
            color: white;
            text-decoration: none;
        }
        .content {
            margin-top: 30px; /* Adjust for the height of the top bar */
        } 
    h1 {
      	font-size:20px;
      	color:white;
    }
    h2 {
      	font-size:15px;
      	
    }
    .logo {
        margin-bottom: 20px;
    }

    .grid {
        column-width: 280px;
        column-gap: 5px;
        max-width: 1200px;
        width: 100%;
    }

    .grid-item {
        break-inside: avoid;
        margin-bottom: 5px;
        position: relative;
        overflow: hidden;
    }

    .grid-item video {
        width: 100%;
        display: block;
        transition: transform 0.3s, opacity 0.3s;
        opacity: 0;
    }

    .grid-item video.loaded {
        opacity: 1;
    }

    .grid-item:hover video {
        transform: scale(1.05);
    }

    @media (max-width: 600px) {
        .grid-item {
            width: 100%;
        }
    }
  #ip1 {
border-radius: 18px;
background: #600;
padding: 20px;
width: 200px;
height: 15px;
}
#ip2 {
border-radius: 25px;
border: 2px solid #3c3c3c;
padding: 20px;
width: 200px;
height: 15px;
}
#ip3 {
border: 2px solid #1e92c1;
}



    .video-container {
        max-width: 800px;
        width: 100%;
    }

    video {
        width: 100%;
        display: block;
        height: auto;
    }

          #ip1 {
border-radius: 18px;
background: #600;
padding: 20px;
width: 200px;
height: 15px;
}
#ip2 {
border-radius: 25px;
border: 2px solid #3c3c3c;
padding: 20px;
width: 200px;
height: 15px;
}
#ip3 {
border: 2px solid #1e92c1;
}
video {
width: 100%;
height: auto;
}

/* Desktop: Hide the poster */
@media (min-width: 768px) {
video {
background: none;
}
}

a {
 	color: #2E3236;
 	-webkit-transition: all .1s ease-in-out;
 	   -moz-transition: all .1s ease-in-out;
 		-ms-transition: all .1s ease-in-out;
 		 -o-transition: all .1s ease-in-out;
 	        transition: all .1s ease-in-out;
}

/*--------------------------------------------------------------------*/
/* FORM & INPUT STYLES */
/*--------------------------------------------------------------------*/

/* THEME BUTTON STYLES */
.btn,
.button,
button.button,
.btn[type="submit"],
.button[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #00BCEB;
	border: none;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font: bold 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	margin: 1px 1px 4px 0;
	padding: 8px 9px;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
			box-shadow: none;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
	        transition: all .1s ease-in-out;
}

textarea {
	padding: 15px 20px;
}

input[type="text"], input[type="search"] {
	padding: 8px 9px;
	border: 1px solid #ccc;
	width: 100%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
	        transition: all .1s ease-in-out;
	z-index: 1;
}

input[type="text"]:focus, input[type="search"]:focus {
	outline: none;
	border-color: #00BCEB;
}

::-webkit-input-placeholder {
	color: #96999D;
}

:-moz-placeholder {
	color: #96999D;
}

::-moz-placeholder {
	color: #96999D;
}

:-ms-input-placeholder {
	color: #96999D;
}

.radio input[type="radio"],
input[type="radio"],
.checkbox input[type="checkbox"],
input[type=checkbox] {
	float: left;
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 10px 7px 3px 0;
	line-height: normal;
}

.contact-form .clear-form { clear: both; }

.contact-form select { margin-bottom: 13px; }

.contact-form input[type='radio'],
.contact-form input[type='checkbox'] { float: none; }

.contact-form label.checkbox,
.contact-form label.radio {
	margin: 0px;
	float: none;
	color: #B6B6B6;
	display: inline-block;
	text-transform: none;
	font-size: 13px;
	line-height: 22px;
}

.textwidget input[type='text'],
.textwidget textarea { width: 100% !important; }

/*--------------------------------------------------------------------*/
/*	UI TO TOP */
/*--------------------------------------------------------------------*/
#toTop {
	background: url(/web/20190110084136im_/http://pagefinder.dk/pagefinder_files/assets/images/sprite.png) 15px -79px no-repeat #27292E;
	bottom:0px;
	color: #86888A;
	display:none;
	height:38px;
	position:fixed;
	right:30px;
	text-align: center;
	text-transform: uppercase;
	width:58px;
	-webkit-border-radius: 4px 4px 0px 0px;
	   -moz-border-radius: 4px 4px 0px 0px;
	        border-radius: 4px 4px 0px 0px;
}

#toTop:hover {
	background-color: #00BCEB;
}

/*--------------------------------------------------------------------*/
/*	THEME HEADER & NAVIGATION */
/*--------------------------------------------------------------------*/

/*--------------------------------------------------------------------*/
/*	LOGO & BRANDING */
/*--------------------------------------------------------------------*/
.logo {
	display: inline-block;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}

.logo img {
	float: left;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}

.logo-uploaded {
	max-width: none;
}

.logo_text {
	letter-spacing: -.08em;
	color: #FFF;
	display: inline-block;
	font: bold 36px/27px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		 -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}

.logo img:hover,
.logo_text:hover {
	opacity: .5;
}

/*--------------------------------------------------------------------*/
/*	HERO / MAIN HEADER */
/*--------------------------------------------------------------------*/
#header-container {
	background-color: #2E3236;
	padding: 60px 30px 80px;
}

#page-header h1 {
	color: #FFF;
	padding: 0px 65px;
	text-align: center;
}

#header-container p {
	color: #9EA4AC;
	font-weight: 400;
	font-size: 18px;
	margin-top: 35px;
	margin: 30px 0 0px;
	text-align: center;
	text-decoration: none;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	    -ms-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-name: BeanFadeIn;
	   -moz-animation-name: BeanFadeIn;
	     -o-animation-name: BeanFadeIn;
	        animation-name: BeanFadeIn;
	-webkit-animation-duration: 0.2s;
	   -moz-animation-duration: 0.2s;
	    -ms-animation-duration: 0.2s;
	     -o-animation-duration: 0.2s;
	        animation-duration: 0.2s;
	-webkit-animation-delay: 0.2s;
	   -moz-animation-delay: 0.2s;
	    -ms-animation-delay: 0.2s;
	     -o-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}

#header-container p a {
	color: #FFF;
}

#header-container p a:hover {
	color: #00BCEB;
}

/*--------------------------------------------------------------------*/
/*	THEME ANIMATIONS */
/*--------------------------------------------------------------------*/
/* BASE ANIMATION - ADD TO ANY ANIMATED OBJECTS */
.animated {
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	    -ms-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	    -ms-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
}

/* FADE IN -ALL PAGE CONTENT */
.BeanFadeIn {
	-webkit-animation-duration: .7s;
	   -moz-animation-duration: .7s;
	    -ms-animation-duration: .7s;
	     -o-animation-duration: .7s;
	        animation-duration: .7s;
	-webkit-animation-delay: .4s;
	   -moz-animation-delay: .4s;
	    -ms-animation-delay: .4s;
	     -o-animation-delay: .4s;
	        animation-delay: .4s;
	-webkit-animation-name: BeanFadeIn;
	   -moz-animation-name: BeanFadeIn;
	     -o-animation-name: BeanFadeIn;
	        animation-name: BeanFadeIn;
}

.bean-panel.BeanFadeIn {
	-webkit-animation-delay: 0.2s;
	   -moz-animation-delay: 0.2s;
	    -ms-animation-delay: 0.2s;
	     -o-animation-delay: 0.2s;
	        animation-delay: 0.2s;
}

@-webkit-keyframes BeanFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-moz-keyframes BeanFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@-o-keyframes BeanFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes BeanFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* FADE IN FROM THE TOP - HEADER CONTENT */
.BeanFadeDown {
	-webkit-animation-delay: 0.3s;
	   -moz-animation-delay: 0.3s;
	    -ms-animation-delay: 0.3s;
	     -o-animation-delay: 0.3s;
	        animation-delay: 0.3s;
	-webkit-animation-duration: 2.0s;
	   -moz-animation-duration: 2.0s;
	    -ms-animation-duration: 2.0s;
	     -o-animation-duration: 2.0s;
	        animation-duration: 2.0s;
	-webkit-animation-name: BeanFadeDown;
	   -moz-animation-name: BeanFadeDown;
	     -o-animation-name: BeanFadeDown;
	        animation-name: BeanFadeDown;
}

@-webkit-keyframes BeanFadeDown {
	0% { opacity: 0; -webkit-transform: translateY(-30px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-moz-keyframes BeanFadeDown {
	0% { opacity: 0; -moz-transform: translateY(-30px); }
	100% { opacity: 1; -moz-transform: translateY(0); }
}

@-o-keyframes BeanFadeDown {
	0% { opacity: 0; -ms-transform: translateY(-30px); }
	100% { opacity: 1; -ms-transform: translateY(0); }
}

@keyframes BeanFadeDown {
	0% { opacity: 0; transform: translateY(-30px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* BOUNCE IN FROM TOP - HEADER SEARCH */
.BeanBounceUp {
	z-index: 0; /* Changed from -1 to 0 to ensure it's clickable */
	-webkit-animation-name: BeanBounceUp;
	   -moz-animation-name: BeanBounceUp;
	     -o-animation-name: BeanBounceUp;
	        animation-name: BeanBounceUp;
	-webkit-animation-duration: .7s;
	   -moz-animation-duration: .7s;
	    -ms-animation-duration: .7s;
	     -o-animation-duration: .7s;
	        animation-duration: .7s;
	-webkit-animation-delay: 0.5s;
	   -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	     -o-animation-delay: 0.5s;
	        animation-delay: 0.5s;
}

@-webkit-keyframes BeanBounceUp {
	0% { opacity: 0; -webkit-transform: translateY(200px); }
	60% { opacity: 1; -webkit-transform: translateY(-20px); }
	80% { -webkit-transform: translateY(10px); }
	100% { -webkit-transform: translateY(0); }
}

@-moz-keyframes BeanBounceUp {
	0% { opacity: 0; -moz-transform: translateY(180px); }
	60% { opacity: 1; -moz-transform: translateY(-30px); }
	80% { -moz-transform: translateY(10px); }
	100% { -moz-transform: translateY(0); }
}

@-o-keyframes BeanBounceUp {
	0% { opacity: 0; -o-transform: translateY(180px); }
	60% { opacity: 1; -o-transform: translateY(-30px); }
	80% { -o-transform: translateY(10px); }
	100% { -o-transform: translateY(0); }
}

@keyframes BeanBounceUp {
	0% { opacity: 0; transform: translateY(180px); }
	60% { opacity: 1; transform: translateY(-30px); }
	80% { transform: translateY(10px); }
	100% { transform: translateY(0); }
}
