#quadratDivId{
    width: calc(100vw * (890/960));
    height: calc(100vw * (495/960))  !important;
    border: calc(100vw * (1/960)) solid black;
    background-color:#ffffff;

    background-size: cover;

}

#quadratDivId button{
   left:calc(100vw * (720/960));;
    top: calc(100vw * (450/960));
    width: calc(100vw * (100/960));
    height: calc(100vw * (26/960));
    font-size: calc(100vw * (16/960));
}

.quadrat-item-class{
    padding:10px;
   background-color: transparent;
   left: 0 !important;
}




.quadrat-area-image-class{
   
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left:calc(100vw * (0/960));
    top: calc(100vw * (0/960));
    border: none;
    width:calc(100vw * (890/960));
    height:calc(100vw * (495/960));
    box-sizing: border-box;

}


.quadrat-grid-item-class{
  
    box-sizing: border-box;
    display:block;
    position: absolute;
    left:0;
    top:0;
  
    background-size: 50%;
    background-position:center;
    background-repeat: no-repeat;
    
    bborder: dashed calc(100vw * (2/960)) rgb(124, 122, 122);
    bborder-color: rgb(221, 249, 232);

    border: calc(100vw * (2/960)) solid rgb(219, 215, 216);

    bborder-image: repeating-linear-gradient( 45deg, rgb(219, 215, 216), rgb(219, 215, 216) 4%, black 2%, black 10%) 10;

    
   
}

.quad-no-border{
    border: transparent calc(100vw * (2/960)) solid;
    background-image: url("../media/images/quadrat/icons/vft_quadrat_flag_pole.svg");
}


.quadrat-grid-item-anim-class{
    border: solid calc(100vw * (4/960)) white;
    bbackground-image: url("../media/images/quadrat/icons/quadrat_pipes.svg");
  
    background-repeat: no-repeat;
    background-size: contain;
    border:none;
    transform-origin: center;
    pointer-events: none;
}

.quadrat-grid-item-hover-class:hover{
    cursor: pointer;
    background-image: url('../media/images/quadrat/icons/VFT_quadrat_magnify_hover.svg'), url('../media/images/quadrat/icons/vft_quadrat_flag_pole.svg');
}

.quadrat-area-hotspot-class{
    background-image: url('../media/images/quadrat/icons/VFT_quadrat_magnify_white.svg'), url('../media/images/quadrat/icons/vft_quadrat_flag_pole.svg');
}


.quadrat-intro-image-class{
    position: absolute;
    left:calc(100vw * (470/960));
    width:calc(100vw * (400/960));
    top:calc(100vw * (80/960));
    border:calc(100vw * (1/960)) solid black;
    border-radius: calc(100vw * (5/960));
}

.quadrat-intro-text-class{
    position: relative;
    display: block;
    
    width: calc(100vw * (600/960));
   
    margin-top: calc(100vw * (30/960));
    margin-left: calc(100vw * (20/960));
}
.quadrat-center-text-class{
    text-align: center;
}


.quadrat-area-text-class{
    position: relative;
    display: block;
   
    wwidth: calc(100vw * (340/960));
    margin-bottom: calc(100vw * (20/960));
    margin-left: calc(100vw * (20/960));
}

.quadrat-area-text-quad-class{
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
}

.quadrat-main-title-class{
  
        position: absolute;
        display: block;
        width: calc(100vw * (200/960));
        margin-bottom: calc(100vw * (20/960));
        padding: calc(100vw * (5/960));
        color: white;
        z-index: 10000000;
        background-color: black;
  
}

.quadrat-done-list-of-quads-class{
    position: relative;
    display: block;
    width: calc(100vw * (600/960));

}

.quadrat-done-link-class,
.quadrat-area-text-large-class{
    font-size: calc(100vw * (48/960));
    font-weight: bold;
    padding-left: calc(100vw * (60/960));
    line-height: calc(100vw * (52/960));
}

.quadrat-done-link-class{
    display: inline-block;
    padding-left: calc(100vw * (15/960));
    color:white;
}


.quadrat-done-link-class:hover{
    cursor: pointer;
}


.quadrat-done-text-class {
    position: absolute;
    display: block;
   
    top:calc(100vw * (120/960));
    width: calc(100vw * (340/960));
    left:calc(100vw * (200/960));
    line-height: calc(100vw * (52/960));
}
.quadrat-grid-x-axis-label,
.quadrat-grid-y-axis-label{
    color:white;
}

.quadrat-grid-x-axis-label{
    display: block;
    position: absolute;
    top:calc(100vw * (412/960));
    text-align: center;
    font-weight: bold;
    font-size: calc(100vw * (26/960));
}

.quadrat-grid-y-axis-label{
    display: block;
    position: absolute;
    left:calc(100vw * (-20/960));
    font-weight: bold;
    font-size: calc(100vw * (26/960));
   
}

.quadrat-grid-y-axis-label span{
    display: table-cell;
    vertical-align: middle;
    
}
.quadrat-zoomed-container{
    display: block;
    width:calc(100vw * (760/960));
    height:calc(100vw * (450/960)) ;
    position: absolute;
    left: calc(100vw * (90/960));
    top: calc(100vw * (35/960));
    bbackground-color: white;
    transform-origin: left top;
    box-sizing: content-box;
    
   
}


.quadrat-zoomed-image{
    display: block;
    background-size: cover;
    background-repeat:"no-repeat"; 
    width:calc(100vw * (450/960));
    height:calc(100vw * (450/960));
    position: absolute;
    left:calc(100vw * (0/960));
    top:calc(100vw * (0/960));
    border:solid black calc(100vw * (1/960));
    border-top-left-radius: calc(100vw * (5/960));
    border-bottom-left-radius: calc(100vw * (5/960));
    overflow: hidden;
}
.quadrat-zoomed-image div{
    transform-origin: left top;
}


.quadrat-zoomed-image img{
    display: block;
    position: absolute;
    width:100%; 
    height:100%;
    max-width: 100%;
    max-height: 100%; 
    z-index: 0;
    left: 0;
    top: 0;
    pointer-events: none;
}




.quadrat-internal-div-zoom-image{
    min-width: 100%;
    min-height: 100%;
    background-size: cover;
}





.quadrat-zoomed-scroll-controls{
    display: block;
    position: absolute;
    width:calc(100vw * (40/960));
   
    left: calc(100vw * (460/960));
    top: calc(100vw * (332/960));
    

   
}

.quadrat-zoomed-image-controls{
    display: block;
    position: absolute;
    background-color: #142318;
    
    width :calc(100vw * (50/960));
    height:calc(100vw * (300/960));
   
    left: calc(100vw * (450/960));
    top: calc(100vw * (0/960));

    padding-left: calc(100vw * (2/960));

    border-top-right-radius: calc(100vw * (5/960));
    border-bottom-right-radius: calc(100vw * (5/960));
}

.quadrat-zoom-Image-zoom-label-class,
.quadrat-zoom-Image-zoom-text-class{
    display: block;
    position: relative;
    width: calc(100vw * (46/960));
    color: white;
    text-align: center;
    font-size: calc(100vw * (14/960));
    line-height: calc(100vw *(32/960));
    top: calc(100vw *(130/960));
    
}

.quadrat-zoom-Image-zoom-label-class{
    font-size: calc(100vw * (16/960));
    top: calc(100vw *(140/960));
}



.quadrat-zoom-Image-fullscreen-button-class,
.quadrat-zoom-In-fullscreen-button-class,
.quadrat-zoom-Out-fullscreen-button-class,
.quadrat-zoom-fullscreen-button-class,
.quadrat-zoom-Image-hotspot-reveal-button-class,
.quadrat-zoom-scroll-up-button-class,
.quadrat-zoom-scroll-left-button-class,
.quadrat-zoom-scroll-right-button-class,
.quadrat-zoom-scroll-down-button-class
{
    display: block;
    position: relative;
    background-size: cover;
    background-color: white;
    width :calc(100vw * (30/960));
    height:calc(100vw * (30/960));
    margin: 0 calc(100vw *(5/960));
    border: solid #999999 1px;
    border-radius: calc(100vw *(2/960));
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;

}

.quadrat-zoom-scroll-up-button-class,
.quadrat-zoom-scroll-left-button-class,
.quadrat-zoom-scroll-right-button-class,
.quadrat-zoom-scroll-down-button-class{
    display: block;
    float: left;
    margin: 0;
}

.quadrat-zoom-Image-fullscreen-button-class:hover,
.quadrat-zoom-In-fullscreen-button-class:hover,
.quadrat-zoom-Out-fullscreen-button-class:hover,
.quadrat-zoom-fullscreen-button-class:hover,
.quadrat-zoom-Image-hotspot-reveal-button-class:hover,
.quadrat-zoom-scroll-up-button-class:hover,
.quadrat-zoom-scroll-left-button-class:hover,
.quadrat-zoom-scroll-right-button-class:hover,
.quadrat-zoom-scroll-down-button-class:hover{
    cursor: pointer;
}


.quadrat-zoom-scroll-up-button-class{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_up.svg");
}
.quadrat-zoom-scroll-left-button-class{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_left.svg");
}
.quadrat-zoom-scroll-right-button-class{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_right.svg");
}
.quadrat-zoom-scroll-down-button-class{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_down.svg");
}

.quadrat-zoom-scroll-up-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_up_highlight.svg");
}
.quadrat-zoom-scroll-left-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_left_highlight.svg");
}
.quadrat-zoom-scroll-right-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_right_highlight.svg");
}
.quadrat-zoom-scroll-down-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_down_highlight.svg");
}


.quadrat-zoom-fullscreen-button-class{
    margin-top: calc(100vw *(5/960));
    background-image: url("../media/images/menu_icons/VFT_GlobalNav_fullscreen_expand.svg");
}

.quadrat-zoom-Out-fullscreen-button-class{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_minus.svg");
    margin-bottom: calc(100vw *(5/960));
}
.quadrat-zoom-In-fullscreen-button-class{
   
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_plus.svg");
    margin-top: calc(100vw *(5/960));
}
.quadrat-zoom-Image-hotspot-reveal-button-class{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_fs.svg");
   
}

.quadrat-zoom-Image-fullscreen-button-class{
    background-image: url("../media/images/menu_icons/VFT_GlobalNav_fullscreen_expand.svg");
    margin-bottom: calc(100vw *(5/960));
}



.quadrat-zoom-Out-fullscreen-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_minus_highlighted.svg");
}
.quadrat-zoom-In-fullscreen-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_plus_highlighted.svg");
}

.quadrat-zoom-fullscreen-highlight-button-class,
.quadrat-zoom-fullscreen-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_fullscreen_highlighted.svg");
}

.quadrat-zoom-Image-fullscreen-highlight-button-class,
.quadrat-zoom-Image-fullscreen-button-class:hover{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_fullscreen_highlighted.svg");
}
.quadrat-zoom-Image-hotspot-highlight-reveal-button-class,
.quadrat-zoom-Image-hotspot-reveal-button-class:hover
{
    background-image: url("../media/images/quadrat/icons/vft_quadrat_icon_fs_highlighted.svg");
}


.quadrat-zoomed-info
{
    display: block;
    position: absolute;
    width: calc(100vw * (200/960));
    height: calc(100vw * (300/960));
    left: calc(100vw * (530/960));
    top: calc(100vw * (10/960));
}


.quadrat-finish-button-class,
.quadrat-continue-button-class,
.quadrat-continue-zoom-button-class,
.quadrat-finish-zoom-button-class,
.quadrat-done-button-class,
.quadrat-finish-zoom-button-class{
    position: absolute;
    left:calc(100vw * (20/960));
    top:calc(100vw * (450/960));
}

.quadrat-continue-zoom-button-class,
.quadrat-finish-zoom-button-class
{
    left:calc(100vw * (670/960)) !important;
}

.quadrat-continue-button-class{
    left:calc(100vw * (760/960)) !important;
}

.quadrat-done-button-class{
    left:calc(100vw * (540/960)) !important;
}

.quadrat-download-button-class{
    left:calc(100vw * (760/960)) !important;
}
.quadrat-other-site-button-class{
    left:calc(100vw * (650/960)) !important;
}

.quadrat-finish-button-class{
    top:calc(100vw * (450/960)) !important;
}

.quadrat-white-text{
    color:white;
}

.quadrat-zoomed-finish-text{
    position: absolute;
    left:calc(100vw * (10/960));
    top:calc(100vw * (420/960));
    width:calc(100vw * (860/960));
    text-align: center;
}

.quadrat-zoom-hotspot-class{
    position: absolute;
    display: block;
    width: calc(100vw * (60/960));
    height: calc(100vw * (60/960));
    border-radius: calc(100vw * (2/960));
}
.quadrat-zoom-hotspot-class:hover{
   
    cursor:zoom-in;
    
}



.quadrat-zoom-hotspot-show-class,
.quadrat-zoom-hotspot-class:hover{
    border: white dashed calc(100vw * (2/960));
}

.quadrat-zoom-anim-class{

    background-color: rgba(0, 0, 0, 0.59);
    height:calc(100vw * (493/960)) !important;
    width:calc(100vw * (888/960)) !important;
  /*  animation-name: stretch;
    animation-duration: 0.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;*/
    z-index: 99999;
    
}

@keyframes stretch {
    0% {
        transform: scale(0);
    
    }
    
    100% {
        transform: scale(1);
       
        }
}

.quadrat-left-text-1-class,
.quadrat-left-text-2-class,
.quadrat-left-text-3-class{
    display: block;
    position: relative;
    left:calc(100vw * (30/960));
    top:calc(100vw * (90/960));
    width:calc(100vw * (200/960));
}
.quadrat-left-text-1-class{
    top:calc(100vw * (10/960));
    width:calc(100vw * (600/960));
}

.quadrat-left-text-2-class{
    top:calc(100vw * (380/960));
    text-align: center;
    font-size: calc(100vw * (48/960));
    font-weight: bold;
    line-height: calc(100vw * (60/960));
    left: calc(100vw * (10/960));
    
}

.quadrat-quad-zoomed-id-class{
    top: calc(100vw * (330/960));
    text-align: center;
    font-size: calc(100vw * (48/960));
    font-weight: bold;
    line-height: calc(100vw * (60/960));
    left: calc(100vw * (600/960));
    color: white;
    position: absolute;
}



.quadrat-extra-info-page-class,
.quadrat-extra-info-front-class{
    display: block;
   
    width:100%;
    height:100%;
    position: relative;
  
   
}

.quadrat-extra-info-page-class{
    left:0;
    top:0;
    background-image: url("../media/images/quadrat/icons/vft_quadrat_book_inside.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.quadrat-extra-info-front-class{
    left:0;
    top:0;
    background-image: url("../media/images/quadrat/icons/vft_quadrat_book.svg");
    background-repeat: no-repeat;
    background-size: contain;
   
}

.quadrat-extra-info-image-class{
    display: inline-block;
    position: relative;
    max-width:calc(100vw * (140/960));
    max-height: calc(100vw * (170/960));
    margin-top: calc(100vw * (20/960));
}

.quadrat-extra-info-name-class{
    display: inline-block;
    position: relative;
    width:100%;
    text-align: center;
    mmargin:10% 0;
}

.quadrat-extra-info-latin-class{
    display: inline-block;
    position: relative;
    width: calc(100vw * (176/960));
    text-align: center;
    font-style: italic;
}

.quadrat-extra-info-front-text-class{

    display: block;
    margin-top: calc(100vw * (200/960));
    text-align: center;
    font-size: calc(100vw * (18/960));
    line-height: calc(100vw * (24/960));
    font-weight: bold;

}

.quadratExtraFrontPageTextId{
    display: inline;
  
    width:calc(100vw * (120/960));
    height:calc(100vw * (80/960));
    
    margin-left:calc(100vw * (20/960));
    margin-top:calc(100vw * (120/960));
   
}


.flip-card {
    background-color: transparent;
   
    perspective: calc(100vw * (1000/960)); /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.7s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container 
  .flip-card:hover .flip-card-inner , */
  
  .flip-card.flip .flip-card-inner{
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
   
    z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
  }
  
  /* Style the back side */
  .flip-card-back {
   
    transform: rotateY(180deg);
  }


.sp{
    left: calc(100vw * (80/960));
    top: calc(100vw * (40/960));
    transform: scale(1.3);
}
.nowt{
    display: none;
}
.spleft{
    left: calc(100vw * (750/960)) !important;

}
.lefth2{
    left: calc(100vw * (20/960));
}

.quadrat-text-box-below{
    position: absolute;
    top:calc(100vw * (494/960));
    display: block;
    height:calc(100vw * (180/960))  !important;
    width:calc(100vw * (770/960))  !important;
    margin-left:calc(100vw * (70/960))  !important;
  

    border: calc(100vw * (1/960)) solid;
    border-top:none;
    padding:calc(100vw * (10/960));
    padding-top:0;

    background-color:#f5f5f5;
    background-color:rgb(245,245,245);

    border-color:#b1b1b1;
    border-color:rgb(177,177,177);
    overflow: scroll;
}

#quadratToolDivId,
#quadratFinishDivId
{
    background-color: rgba(0, 0, 0, 0.59);
    padding-top: calc(100vw *(60/960));
    padding-left: calc(100vw *(130/960));
}

.quadrat-area-image-class{
    overflow:hidden;
}




@media (-ms-high-contrast: active), (forced-colors: active) {
   
    .quadrat-zoom-In-fullscreen-button-class,
    .quadrat-zoom-Out-fullscreen-button-class,
    .quadrat-zoom-Image-hotspot-reveal-button-class,
    .quadrat-zoom-scroll-up-button-class,
    .quadrat-zoom-scroll-left-button-class,
    .quadrat-zoom-scroll-right-button-class,
    .quadrat-zoom-scroll-down-button-class{
	    forced-color-adjust: none;
    }
}