/* CSS INTEGRADO EN LA PĂGINA HTML */
body {
margin: 0;
padding: 0;
font-family: helvetica, arial;
background-color: black;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: sans-serif !important;
}
main {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#menu-container {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
max-width: 100%;
}
div#header_menu_obra {
display: none;
width: 100%;
text-align: center;
background-color: #dfdad4;
height: 12%;
position:relative;
float:left;
}
.home {
height: 100px;
position: absolute;
margin-top: 20px;
}
div#logo_entreluces_menu{
height:100%;
}
div#logo_entreluces_menu > img {
height: 100%;
}
#menu {
width: 100%;
height: 100%;
/*min-height: 600px;*/
overflow: hidden;
margin: 0 auto;
}
/*
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 25%;
height: 33.33%;
border: 1px solid darkgray;
}
*/
.video-target {
cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
color: white;
text-align: center;
float: left;
width: 25%;
height: 33.33%;
border: 1px solid black;
background-color: #bab5b0;
}
div#titulo_obra {
float: left;
width: 30%;
padding: 3vh 0vh 0vh 3vh;
text-align: left;
background: linear-gradient(to right, #333, transparent);
height: 100%;
font-size: 3vh;
line-height: 3.5vh;
font-family: 'LatoRACAV';
}
.video-target > div {
text-align: center;
width: 100%;
font-weight: bolder;
font-size: 125%;
}
#video-target-5b{
cursor: auto !important;
background-size: contain !important;
background-position: center !important;
color:#000000;
width:50%;
background-color: #dfdad4;
}
div#video-target-5b > img {
height: 100%;
}
#ContenedorManoQR{
display:none;
position:absolute;
bottom:0px;
right: 0;
cursor:pointer;
padding-right: 0px;
z-index: 2;
width:120px;
height:120px;
text-align:right;
}
img#imgHandQr {
max-height: 120px;
}
#racav {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
display: none;
background-color: white;
}
.componente1
{
width:100%;
background-color:red;
}
@media screen and (min-width: 360px) and (orientation: portrait)
{
html, body {
overflow-x: visible;
}
main {
overflow: visible;
}
#menu {
overflow: visible;
}
.home {
display: none;
}
div#header_menu_obra{
display: block;
}
#menu {
overflow: visible;
}
/*
.video-target {
width: 100%;
height: 18%;
background-position-y: center;
}*/
.video-target {
width: 100%;
height: 28%;
background-position-y: bottom;
}
#video-target-5b {
display: none;
}
#ContenedorManoQR {
position: fixed;
}
}
/*
Notas: responsive horizontal
iPad Pro - 1112
large screen - 1031
iPad - 1024
iPhone XR - 896
Galaxy S9 Plus, S8 Plus - 846
Iphone XS - 812
Pixel 3, 3XL - 786
Galaxy S9, Note 8, S8 - 740
iPhone 8 Plus, 7 Plus, 6S Plus - 736
iPhone 6, 7, 8 - 667
*/
@media screen and (max-width:666px) and (orientation: landscape)
{
.video-target {
height: 33.33%;
}
#ContenedorManoQR {
width: 100px;
height: 100px;
}
img#imgHandQr {
max-height: 100%;
}
}
@media screen and (min-width:667px) and (max-width:735px) and (orientation: landscape)
{
.video-target {
height: 33.33%;
}
#ContenedorManoQR {
width: 100px;
height: 100px;
}
img#imgHandQr {
max-height: 100%;
}
}
@media screen and (min-width:736px) and (orientation: landscape)
{
.video-target {
height: 33.33%;
}
#ContenedorManoQR {
width: 100px;
height: 100px;
}
img#imgHandQr {
max-height: 100%;
}
}
@media screen and (min-width:1113px) and (orientation: landscape)
{
.video-target {
height: 33.33%;
}
#ContenedorManoQR {
width: 100px;
height: 100px;
}
img#imgHandQr {
max-height: 100%;
}
}
/*
@media only screen and (orientation: portrait) {
#menu {
padding-left: 1%;
}
.video-target {
background-position-y: bottom;
width: 99%;
height: 48%;
overflow: hidden;
}
#video-target-5 {
display: none;
}
#video-target-5b {
display:none;
}
}
@media screen and (min-width:240px) and (max-width:320px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 25%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 90% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 69% !important;
margin-left: 27% !important;
}
}
@media screen and (min-width:321px) and (max-width:360px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 25%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 90% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 57% !important;
margin-left: 41% !important;
}
}
@media screen and (min-width:360px) and (max-width:414px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 25%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 90% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 57% !important;
margin-left: 41% !important;
}
}
@media screen and (min-width:415px) and (max-width:600px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position-x: left !important;
background-position-y: top !important;
color: white !important;
text-align: center !important;
float: left !important;
width: 25% !important;
height: 33% !important;
border: 1px solid darkgray !important;
}
.menuidiomas10 {
position: absolute !important;
bottom: 82% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 50% !important;
margin-left: 48% !important;
}
}
@media screen and (min-width:601px) and (max-width:800px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position-x: left !important;
background-position-y: top !important;
color: white !important;
text-align: center !important;
float: left !important;
width: 25% !important;
height: 33% !important;
border: 1px solid darkgray !important;
}
.menuidiomas10 {
position: absolute !important;
bottom: 82% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 40% !important;
margin-left: 58% !important;
}
}
@media screen and (min-width:801px) and (max-width:1023px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 25%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 89% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 30% !important;
margin-left: 67% !important;
}
}
@media screen and (min-width:1024px) and (max-width:1081px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 94% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 17% !important;
margin-left: 82% !important;
}
.menuidiomas10 {
position: absolute !important;
bottom: 89% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 20% !important;
margin-left: 77% !important;
}
}
@media screen and (min-width:1082px) and (max-width:1280px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 89% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 19% !important;
margin-left: 80% !important;
}
}
@media screen and (min-width:1281px) and (max-width:1366px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 89% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 15% !important;
margin-left: 84% !important;
}
}
@media screen and (min-width:1367px) and (max-width:1414px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 94% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 15% !important;
margin-left: 84% !important;
}
}
@media screen and (min-width:1415px) and (max-width:1616px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 94% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 15% !important;
margin-left: 84% !important;
}
}
@media screen and (min-width:1617px) and (max-width:1920px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 94% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 13% !important;
margin-left: 86% !important;
}
}
@media screen and (min-width:1921px) and (max-width:2500px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute !important;
bottom: 94% !important;
cursor: pointer !important;
text-align: right !important;
z-index: 2 !important;
width: 13% !important;
margin-left: 86% !important;
}
}
@media screen and (min-width:2501px) and (max-width:2560px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
}
@media screen and (min-width:2561px) and (max-width:3000px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
}
@media screen and (min-width:3001px) and (max-width:3500px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
}
@media screen and (min-width:3501px) and (max-width:3840px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
}
@media screen and (min-width:3841px)
{
#menu-container {
width: 99%;
height: 100%;
margin: 0 auto;
}
#menu {
width: 100%;
height: 100%;
min-height: 600px;
overflow: visible;
margin: 0 auto;
}
.video-target {
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
color: white;
text-align: center;
float: left;
width: 24%;
height: 33%;
border: 1px solid darkgray;
}
.menuidiomas10 {
position: absolute;
bottom: 97%;
cursor: pointer;
text-align: right;
z-index: 2;
width: 12%;
margin-left: 87%;}
}
*/
#lang-change {
height: 100%;
position: absolute;
width: 10%;
right: 0;
top: 0;
margin-right:2%;
}
div#lang-change > a > img {
width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@font-face {
font-family: 'LatoRACAV';
src: url('./fonts/lato/Lato-Bold-RACAV.ttf') format('truetype'),
url('./fonts/lato/Lato-Bold-RACAV.eot') format('embedded-opentype'),
url('./fonts/lato/Lato-Bold-RACAV.woff') format('woff'),
url('./fonts/lato/Lato-Bold-RACAV.woff2') format('woff2'),
url('./fonts/lato/Lato-Bold-RACAV.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*focus-visible*/
*:focus-visible {
outline: 8px solid yellow !important;
}
@supports not selector(:focus-visible) {
*:focus {
/* Fallback for browsers without :focus-visible support */
outline: 8px solid yellow !important;
outline-offset: 8px;
}
}