/*

		   hgsgrid_homepage.css
		-------------------------

  This stylesheet has been created by snowbody Cortes for HG Safari Grid (HGS Grid).
  
  It is free of charge for everyone that want to use or modify it for no-profit scopes.
  For profit scopes, please contact me.

  Current version:	00
  
  Version history:
  	00		initial version.
  
*/

		mark {
  			background-color: #00C0C060;
  			color: #FFFFFFFF;
		}
		#myVideo { 
                        position: absolute; 
                        right: 0; 
                        bottom: 0; 
                        min-width: 100%; 
                        min-height: 100%; 
                        width: auto; 
                        height: auto; 
                }
                //To maintain the standard 16:9 aspect ratio
                //This to ensure that your video background adjusts responsively as the window size changes.
                //For screens with a minimum aspect ratio of 16:9, scale the width while keeping the height auto-adjusted. 
                @media (min-aspect-ratio: 16/9) {
  			video {
    				width: 100%;
    				height: auto;
  			}
		}
		//For screens with a maximum aspect ratio of 16:9, auto-adjust the width while maintaining the height at 100%. 
		@media (max-aspect-ratio: 16/9) {
  			video {
    				width: auto;
    				height: 100%;
  			}
		}
		.overVideoLogoContainer {
      			//resize: both;
      			//overflow: auto;
			display: block;
			object-fit: scale-down;
		}
		.overVideoLogoImg {
			display: block;
			//margin-left: auto;
        		//margin-right: auto;
			object-fit: scale-down;
      			object-position: center;
			margin: auto;
			//min-width: 50%;
			width: 40%;	//80%;
			vertical-align: middle;
		}
                .overVideoContent { 
                        position: absolute;
                        top: 0%; 
                        left: 0%; 
			width: 100%;	//80%;
                        //transform: translate(calc(10vw), 0%);
                        //transform: scale(0.5, 0.5); 
                        color: white; /* Ensure text is readable */ 
                        text-align: center;
                     	object-position: center;
                        z-index: 1;
                }
                .overVideoDescription {
    			//font-size: 1.6vw;	//1.3vw;
    			//font-size: calc(100vh/50);
    			//font-size: calc((100vw/64 + 100vh/50)/2);	//OK
    			font-size: calc(100vmin/64);
		}
                .overVideoMenu { 
                        position: absolute;
                        top: 0%; 
                        left: 5%; 
                        transform: translate(0%, 0%); 
                        color: white; /* Ensure text is readable */ 
                        text-align: center; 
                        z-index: 1;
                }
                .overVideoMenu2 { 
                        position: absolute;
                        top: 92%; 
                        left: 0%;	//80%; 
                        transform: translate(0%, 0%); 
                        color: white; /* Ensure text is readable */ 
                        text-align: center; 
                        z-index: 1;
                }
                .overVideoMenu3 { 
                        position: absolute;
                        top: 90%; 
                        left: 5%; 
                        transform: translate(0%, 0%); 
                        color: white; /* Ensure text is readable */ 
                        text-align: center; 
                        z-index: 1;
                }
                .overVideoMenu4 { 
                        position: absolute;
                        top: 0%; 
                        left: 75%; 
                        transform: translate(0%, 0%); 
                        color: white; /* Ensure text is readable */ 
                        text-align: center; 
                        z-index: 1;
                }
                .overVideoMenu5 { 
                        position: absolute;
                        top: 90%; 
                        left: 75%; 
                        transform: translate(0%, 0%); 
                        color: white; /* Ensure text is readable */ 
                        text-align: center; 
                        z-index: 1;
                }
		#postMyVideo { 
                        position: absolute; 
                        top: 100%; 
                        min-width: 80%; 
                        min-height: 80%; 
                        width: 98%; 
                        height: auto; 
                }

		@media screen and (max-width: 600px) {
			/* mobile device in portrait mode */
		}