:root {
    --color-test : #c0b2b220 ;
    --text-color: #fff ;
    --main-color: #12487d;
    --secondary-color: #000000 ;
    --background-color: #0c3053;
    --background-secondary-color: #5b8ec2;
    --background-third-color: #0c3053 ;
    --highlight-color: #8aa6c2;


    --backgroundLgt-color: #f57d89;
    --secondary-switch: #ff0000;
    

    --font-sizeBIG: 70px;
    --font-size: 30px;
    --font-sizeSMALL: 15px;

    --Content-margin: 5px ;
    --Content-radius: 10px ;
    --Content-height: 2000px ;
    --Content-width: 750px;

    --transition-button: .25s ease-in-out ;

    --main-border: 2px solid;
    --Content-border: 2px dashed;
    --Content-padding: 10px;
    --Body-padding: 100px;
}

#Content {
    display: flex;
    flex-direction: row;
    width: var(--Content-width);
     
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

#Content img {
    margin: 0px;
    padding: 0px;
    height: 200px;
}

#ContainerDiv img {
    margin: 0px;
    padding: 0px;
    height: 800px;
}
 
#ContainerDiv {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 9999;  
    scroll-behavior: unset;
}

#ContainerDiv.Expanded {
    visibility: visible;
    background-color: #00000092;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 9999;  
    overflow: hidden;
   

    cursor: crosshair;
}



#ZoomSensor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    
    height: 900px;
    overflow: hidden; 
    position: relative;
}

#MainZoomImage {
    height: 800px;
    object-fit: contain;
    transition: transform 0.15s ease-out;
    pointer-events: none; 
}

body.Expanded {
    overflow: hidden;
}

#CloseContainerDiv {
    cursor: pointer;
    font-family: "DotoBlack";
    font-size: var(--font-sizeSMALL);
    padding: calc(var(--Content-padding) * 1);
    margin: var(--Content-margin);
    border-top: 3px solid #fff;
    border-left: 3px solid #fff ;
    border-bottom: 3px solid #7d7d7d;
    border-right: 3px solid #7f7d7d ;
    
    color: var(--text-color);
    background-color: #b3b3b3;

    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;

    margin-top: calc(var(--Content-margin) * 4);
    margin-right: calc(var(--Content-margin) * 4);
    transition: 0.1s linear;


}

#CloseContainerDiv:hover {
    background-color: #979797;
    
    border-top: 3px solid #d6d3d3;
    border-left: 3px solid #d6d3d3 ;
    border-bottom: 3px solid #666666;
    border-right: 3px solid #666666 ;

    transition: 0.1s linear;
}







#Content video {
    margin: 0px;
    padding: 0px;
    height: 200px;
}


#ContainerDivVid video {
    margin: 0px;
    padding: 0px;
    height: 800px;
}
 
#ContainerDivVid {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 9999;  
    scroll-behavior: unset;
}

#ContainerDivVid.Expanded {
    visibility: visible;
    background-color: #00000092;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 9999;  
    overflow: hidden;
   

    cursor: crosshair;
}



#ZoomSensorVid {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    
    height: 900px;
    overflow: hidden; 
    position: relative;
}

#MainZoomVid {
    height: 800px;
    object-fit: contain;
    transition: transform 0.15s ease-out;
    pointer-events: none; 
}

body.Expanded {
    overflow: hidden;
}

#CloseContainerDivVid {
    cursor: pointer;
    font-family: "DotoBlack";
    font-size: var(--font-sizeSMALL);
    padding: calc(var(--Content-padding) * 1);
    margin: var(--Content-margin);
    border-top: 3px solid #fff;
    border-left: 3px solid #fff ;
    border-bottom: 3px solid #7d7d7d;
    border-right: 3px solid #7f7d7d ;
    
    color: var(--text-color);
    background-color: #b3b3b3;

    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;

    margin-top: calc(var(--Content-margin) * 4);
    margin-right: calc(var(--Content-margin) * 4);
    transition: 0.1s linear;


}

#CloseContainerDivVid:hover {
    background-color: #979797;
    
    border-top: 3px solid #d6d3d3;
    border-left: 3px solid #d6d3d3 ;
    border-bottom: 3px solid #666666;
    border-right: 3px solid #666666 ;

    transition: 0.1s linear;
}