/*/////////////////////////////*/
*{
	/*border: 1px dashed green;*/
}
html,body{
background: #FFFFFF;
}

body {
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
padding: 0;
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
height: 100%;
min-height: 100%;
overflow: hidden;
}


/*iframe to load algorithmic compos*/

.ifInteractive{			
/*border: 1px red solid;*/
position: fixed; 
display: block; 
width: 100vw;
height: 100vh;
min-height: 100%;
min-width: 100%;
left: 0px; top: 0px;
/*pointer-events: auto;*/
}
/*background video (desactivado )*/
#ifBg{
display: none;
}

/*//////////////////////////////////////////////*/
/*/////////////PLAYERS VID-INTERACT/////////////*/
.monocanal{}/*just to identify aspect*/
.interactive{} /*idem*/
.articles{}/*idem*/

.indexBg{
  z-index: 100;
}
.indexFr{
  z-index: -100;
}
/* //////WRAPPER VIDEO IFRAMES (ALL)////////////*/
/*//////////////////////////////////////////////*/

.vimeo-wrapper {
box-sizing: border-box;  
/*border: 4px dashed green;*/

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*  pointer-events: none;*/
overflow: hidden;
/*pointer-events: auto;*/

}

/*//Iframe PLAYER ORIGINAL ASPECT RATIO/////////*/
.vid169{
display: none;
position: absolute;
/*width: 100vw;
height: 56.25vw; 
min-width: 100vw;
min-height:56.25vw;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*border: 1px white solid;*/


}

.vid43{
display: none;
position: absolute;
/*width: 100vw;
height: 75vw; */
/* Given a 16:9 aspect ratio, 9/16*100 =  o en 4:3   3/4 * 100  = ...*/
/*min-width: 100vw;
min-height: 75vw;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*border: 1px red solid;*/
}

/*
https://stackoverflow.com/questions/13474562/how-to-write-a-media-query-in-css
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
*/
@media screen and (max-aspect-ratio: 4/3) {
  .vid43{
    width: 100vw;
    height: 75vw;
   
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  .vid43 {
  	width: 133vh;
    height: 100vh;
    
  }
}

@media screen and (max-aspect-ratio: 16/9) {
  .vid169{
 	width: 100vw;
    height: 56.25vw;
  }
}

@media screen and (min-aspect-ratio: 16/9) {
 .vid169{
 	width: 177vh;
    height: 100vh;
  }
}


/*////////////////////////////*/
/*////////////////////////////*/
/*iframes player BACKGROUN FULLWINDOW*/

#ifBg{
  display: none;
}

/* clases para togglear el aspect ratio de videos de background(out-of-field)*/
.vidBg169{

width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 =  o en 4:3   3/4 * 100  = ...*/
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

.vidBg43{
width: 100vw;
height: 75vw; /* Given a 16:9 aspect ratio, 9/16*100 =  o en 4:3   3/4 * 100  = ...*/
min-height: 100vh;
min-width: 133.33vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77  y en 4:3 4/3 * 100*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}




/*//////////////////////////////////*/
/*///////TEXTS ISSUES IF - WRAPPER//*/
/*//////////////////////////////////*/


.ifTextWrapper{
box-sizing: border-box;
display: block;
position: fixed;
left: 0px; top: 0px; 
width: 100vw; 
height: 100vh;
min-width: 100%; 
min-height: 100%; 
overflow: auto; 
-webkit-overflow-scrolling: touch;
/*border: 2px dashed orange;*/
z-index: 10;
pointer-events: auto;
}

.ifTextClass{
box-sizing: border-box;
width: 100%; 
height: 100%;
min-width: 100%; 
min-height: 100%; 
/*border: 2px dashed green;*/
}