/*
=========================================================
VIMEOVIDEO.CSS
=========================================================
  ____                        _   
 | __ )  ___  _   ___   _____| |_ 
 |  _ \ / _ \| | | \ \ / / _ \ __|
 | |_) | (_) | |_| |\ V /  __/ |_ 
 |____/ \___/ \__,_| \_/ \___|\__|

 * Innehåller CSS för Sitevision-modulen Media, som visar
 * Vimeo-videon på startsidan
 *
 * Skapad av: Mats Stafström
 * Copyright (C) 2023 Bouvet AB
=========================================================
*/

.media-module-with-overlay {
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	background-color: rgba(0,0,0,0.7); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
   position: fixed;
	left: 0;
	top: 0;
}

.media-module-with-overlay .sv-embeddedmedia-container {		
	position: absolute;
   margin: 0;
	top: 50%;
   left: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);	
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
   max-height: 700px;
	max-width: 100%;
	height: clamp(300px,80vh,800px);
	width: clamp(200px,160vh,700px);
   height: 90%;
	overflow: auto;
	padding-top: clamp(0px, 100vh - 440px, 20vh);
}

#btnVideo {
	display: flex;
	justify-content: center;	
	font-weight: 700;
	font-size: 24px;
   min-height: 40px;
   margin: auto;
	max-width: fit-content;  
   border-color:transparent;
   background-color:transparent;
}

.blue-text {
   color: #009ada;
	font-weight: 700;
	font-size: 24px;
   background: url("/imagearchive/Mallbilder/Icons/icon-movie.png") no-repeat;
   padding-left: 40px;
	background-size: 30px;
}

.blue-text:hover {
   text-decoration: underline;
   cursor: pointer;
}

.vimeo-overlay {
	display: none;
	background-color: black;
	z-index: 1;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 50%;
}