/*-------------nothing in this page is selectable*/

body{
-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}


/*-------------remove selection frame from buttons*/
button:focus {
    outline:0;
}
button:hover{
    cursor: pointer;
}
button{
    background-size: contain;
    
 /*   width: fit-content;	*/
    font-size: 4vh;
}
p {
    font-size: 3vh;
}

h1 {
   font-size: 6vh;
}
/*------------------Fonts-------------------------*/
@font-face {
    font-family: "DBSex";
    src: url("../assets/fonts/dbsex06.ttf");   
}

@font-face {
    font-family: "DBSer";
    src: url("../assets/fonts/dbser06.ttf");   
}

@font-face {
    font-family: "DBSexThin";
    src: url("../assets/fonts/dbsex03s.ttf");   
}



@font-face {    
    font-family: "DBHeader";
    src: url("../assets/fonts/dbhex07.ttf");
}

/*------------Animation-loading-------------*/
.loader {
    display: none;
    position: relative;

    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid rgb(0, 152, 129);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;

    

    
  }
  /* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


/*------------------Calibration-----------------------*/
#calibrationIcon{   
    background-color: transparent;
}
/*
#calibrationIcon:hover{
    font-size: 30px;

}*/

.calibrationBtn{
    border-radius: 10px;
    
}
.calibrationBtn:hover{
    border-radius: 0px;
    
}
#initialCalibrationPanel{
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 2;
    grid-row-end: 8;
   
     
    background-color: rgb(245, 245, 245);
    z-index: 10;
    opacity: 1;

    display:table;
    position: relative;

    width: 100%;
    height: 100%;

  

}
.CalibrationHeader{
 /*   font-size: 150%;
 */
    font-family: Calibri !important;/*DBSer;*/
    text-align: center;


  /*  height: 100%;
*/
 
}

#startCalibration{
 /*   font-size: 120%;
 */
    background-color: rgb(0, 152, 129);
    color: white;

  
 /*   font-size: 4vh;*/
 min-height: 8vh
}
#skipCalibration{
 /*   font-size: 4vh;/*80%;*/

   background-color: rgb(206, 206, 206);
 
    min-height: 8vh;
  
    
}
#calibrationContainer{
  /*  position: absolute;
    background-color: #009881;
    width: 100%;
    height: 100%;
    display: none;

    */
    grid-column-start: 1;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 8;
     
    background-color: rgb(245, 245, 245);
    z-index: 10;
    opacity: 1;
    position: absolute;

    display:none;

    height: 100%;
    }
    .calibrationBtnPlay{
    width: 30vh;
    min-height: 12vh;
    position: relative;
    /*left: 40vh;*/
    background-image: url('../assets/graphics/play_icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(160, 160, 170);
        

    }

    .calibrationBtnPause{
        width: 30vh;
        min-height: 12vh;
        position: relative;
       /* right: 40vh;/* 20%;*/
        background-image: url('../assets/graphics/pause.png');
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(160, 160, 170);    
    }

    .calibrationBtnQuestion{
        width: 30vh;
        min-height: 12vh;
        position: relative;
        right: 40vh;/* 20%;*/
        background-image: url('../assets/graphics/pause.png');
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(160, 160, 170);  
        background-image: url('../assets/graphics/pause_icon.png');
      
    }
    .calibrationBtn_Left{
        color: white;
        width: 30vh;
        min-height: 12vh;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(160, 160, 170);    
    }
    .calibrationBtn_Right{
        color: white;
        width: 30vh;
        min-height: 12vh;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(160, 160, 170);  
    }
    .calibrationBtnNext{
        width: 20vh;
    min-height: 8vh;
    position: relative;
    background-image: url('../assets/graphics/next_icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(160, 160, 170);
    }


    .calibrationBtnPrev{
        width: 20vh;
        min-height: 8vh;
        position: relative;
        background-image: url('../assets/graphics/prev_icon.png');
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgb(160, 160, 170);
       
    }



/*----------------Video Players----------------------*/

.multiVideo{
    position: relative;
    right: 0;
    bottom: 0;
   width: 100%;
}

.singleVideo{
    display: none;
    margin: 0 auto;
    width: 100%;
    align-self: center;
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}


  


/* -------------------Containers---------------------------*/


.selectionScene{  
    background-image: url('../assets/graphics/background.png');
   /* display: grid;*/
    display: none;
    grid-gap: 5%;
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
}


.gridcontainer{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /*  grid-gap: 5%;*/

    grid-template-rows: 1fr 2fr 2fr 1fr 1fr 1fr 1fr;
  /*
    grid-template-areas:
      'headerleft header header header centralheader header header header headerright'
      'left leftcenter center center midcenter center center rightcenter right'
      'left leftcenter center center midcenter center center rightcenter right'
      'left leftcenter center center midcenter center center rightcenter right'
      'left leftcenter center center midcenter center center rightcenter right'
      'leftlow leftcenterlow leftcenterlow centerlow midcenterlow centerlow rightcenterlow rightcenterlow rightlow'
      'leftbottom leftbottom leftbottomcenter centerbottom midcenterbottom centerbottom rightbottomcenter rightbottom rightbottom';
  */
}

.videocontainer{
    display: none;
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}


.videocontainer_WLW{
    display: none;
    grid-gap: 1%;
  
   
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   
    
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
    left: 0;
    top: 0;
    
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    
    
    }


/*----------------Button templates -------------------*/
.back_btn{
    background-color: transparent;
    z-index: 102;
    border: none;
    background-image: url("../assets/graphics/goback.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
   /* align-self: center; */
    margin-left: auto;
    }


    
    .backBtnImg{
        width: 100%;
        height: 100%;
    }
    
    .standardButton{    
        font-size: 2vh;

    /*font-size: 4vh;/*100%;*/
        font-family: Calibri !important;/*DBSer;*/
        font-weight: bolder;
        background-image: url("../assets/graphics/background.png");
        background-size: cover;
        background-position: center;
        border: none;
        border-radius: 3px;
    
    }
    .standardButton:hover{
        background-clip: content-box;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        border-color: rgba(255, 255, 255, 0.5);
        border-radius: 0px;
    }
    .selectionButton{
        opacity: 0.9;
        color: black;
        font-family: Calibri !important;/*DBSer;*/
        font-weight: bolder;
        background-image: url("../assets/graphics/background.png");
        background-size: cover;
        background-position: center;
        border-radius: 3px;
        border: solid;
        border-color: rgb(206, 206, 206);
        border-width: 1px;

        font-size: 2.5vh;
    
    }
    .selectionButton:hover{
        opacity: 0.7;
        background-clip: content-box;
        background-color: rgb(255, 255, 255);
        border: none;
        border-color: rgba(255, 255, 255, 0.5);
        border-radius: 0px;
    }




/*--------------Individual Buttons------------------*/
    #fbq_SkipIntro_Btn{
        /*
        grid-area: centerbottom;
        */
        grid-column-start: 3;
        grid-column-end: 8;
        grid-row-start: 7;
        grid-row-end: 8;
    }
    #ggv_SkipIntro_Btn{
        /*
        grid-area: centerbottom;
        */
        grid-column-start: 3;
        grid-column-end: 8;
        grid-row-start: 7;
        grid-row-end: 8;
    }




    #start_Btn2 {
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 6;
        grid-row-end: 7;
    
    }



    #scene_2_Btn1 {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
    
    }
    #scene_2_Btn2 {
        grid-column-start: 4;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
    
    }
    #scene_2_Btn3 {
        grid-column-start: 6;
        grid-column-end: 8;
        grid-row-start: 3;
        grid-row-end: 4;

    }




/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*-------------LANDSCAPE-----------------*/

@media screen and (orientation: landscape){

    .gridcontainer{
        grid-gap: 0%;
    }
   
    .header{
        /* grid-area: header;  */
         grid-column-start: 1;
          grid-column-end: 10;
          grid-row-start: 1;
          grid-row-end: 2;
      
          width: 100%;
          height: auto;
          z-index: 25;
        }
      

    .content_canvas{
        grid-column-start: 5;
        grid-row-start: 2;
    }
    .canvasImg {
            height: 50vh;
    }

    .standardButton{
        height: 10vh;
        font-size: 3vh;
    }
    .selectionButton{
        height: 15vh;

    }

        .playpauseBtn{
      
        grid-column-start: 5;
        grid-row-start: 4;
        width: 10vh;
        background-image: url("../assets/graphics/background.png");
        opacity: 0.7;
        background-size: cover;
        background-position: center;
        border: none;
        border-radius: 7px;  
        left: 5vh; 
        bottom: 5vh; 
        position: relative;        
       }
    
/*  Start */
    .start_Btn1{
        grid-column-start: 2;
        grid-column-end: 9;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .start_Btn2 {
        grid-column-start: 2;
        grid-column-end: 9;
        grid-row-start: 5;
        grid-row-end: 6;
    }
    .start_Btn3{
        grid-column-start: 2;
        grid-column-end: 9;
        grid-row-start: 6;
        grid-row-end: 7;
    }
/*  Selection Scene*/
    .buttonContainer{
        position: absolute;
        bottom: 0;
      /*  height: 29%;
        width: 100%;*/
        width: 100%;
        height: 27vh;
        opacity: 0.9;
        border: medium solid;
        border-color: rgb(255, 255, 255);
        background-color: rgb(206, 206, 206);
        border-width: 1px;
    
    
        /*
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row-start: 6;
        grid-row-end: 8;
        */
    }
    

    .back_btn
    {
        grid-column-start: 9;
        grid-column-end: 10;
        grid-row-start: 1;
      /*
        grid-area: headerright;
        */
        width: 10vh;
        height: 10vh;
    }
    #back_btn_WLW_videos{
        grid-column-start: 10;
        grid-column-end: 11;
      
    }

    #playpauseBtn_WLW{
      
        width: 20%;
        height: 10%;
        left: 40%;
        top: 60vh;
        opacity: 0.7;

        position: fixed;
         background-repeat: no-repeat;
        background-color: transparent;
        background-position: center;
        border-radius: 7px;
        border: none;
    
    }


    #fbq_Btn1{
        grid-column-start:1;
        grid-column-end: 4;
        grid-row-start: 6;
        grid-row-end: 7;
   /*     width: 100%;
        height: 150%; 
        */   
    }
    #fbq_Btn2{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 6;
        grid-row-end: 7;
     /*   width: 100%;
        height: 150%;  
        */  
    }
    #fbq_Btn3{
        grid-column-start: 7;
        grid-column-end: 10;
        grid-row-start: 6;
        grid-row-end: 7;
     /*   width: 100%;
        height: 150%; 
        */   
    }

    
    #wlw_Btn1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 15;
   /*     height: 150%;*/

    }
    #wlw_Btn2 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 15;
   /*     height: 150%;*/
 
    }
    #wlw_Btn3 {
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 15;
     /*   height: 150%;*/
    }
    #wlw_Btn4 {
        grid-column-start: 7;
        grid-column-end: 9;
        grid-row-start: 15;
    /*    height: 150%; */  
    }
    #wlw_Btn5 {
        grid-column-start: 9;
        grid-column-end: 11;
        grid-row-start: 15;
/*        height: 150%; */
    }
}

@media screen and (orientation: landscape) and (max-width: 1000px)  {




        .videocontainer_WLW{
            grid-gap: 0%;
        }

        #fbq_SkipIntro_Btn{
           
            grid-row-start: 6;
            grid-row-end: 7;
        }
        #ggv_SkipIntro_Btn{
            
            grid-row-start: 6;
            grid-row-end: 7;
        }
}

@media screen and (orientation: landscape) and (max-width: 1200px)  {


        #fbq_SkipIntro_Btn{
            grid-row-start: 5;
            grid-row-end: 6;
        }
        #ggv_SkipIntro_Btn{   
            grid-row-start: 5;
            grid-row-end: 6;
        }
    
}


/* --------------PORTRAIT MODE ------------------ */


@media screen and (orientation: portrait){
    
    /*--------------------Image Content---------------------*/
    .header{
    /* grid-area: header;  */
     grid-column-start: 1;
      grid-column-end: 10;
      grid-row-start: 1;
      grid-row-end: 2;
  
      width: 100%;
      height: auto;
      z-index: 100;
    }
  


    .content_canvas{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 2;
        grid-row-end: 5;
       
    }
    .canvasImg{
        position: relative;
     /*   top: 19vh;    */
        width: 100%;
        height: auto;
        
      
    }
    .selectionButton{
        font-size: 2vh;
    }
    
    .playpauseBtn{
      
        grid-column-start: 5;
        grid-row-start: 4;
        width: 10vh;
        background-image: url("../assets/graphics/background.png");
        opacity: 0.7;
        background-size: cover;
        background-position: center;
        border: none;
        border-radius: 7px;            
       }


    .gridcontainer {
        grid-gap: 1vh;
    }
    .buttonContainer{
        height: 33vh; 
    
    }    
  
    .fbqGrid{
        grid-gap: 1%;
    }
    .videocontainer_WLW{
        grid-gap: 0%;
    }
    .back_btn
    {
        grid-column-start: 9;
        grid-column-end: 10;
        grid-row-start: 1;
      /*
        grid-area: headerright;
        */
        width: 5vh;
        height: 5vh;
    }
/*  Start */
    .start_Btn1{
        grid-column-start: 2;
        grid-column-end: 9;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .start_Btn2 {
        grid-column-start: 2;
        grid-column-end: 9;
        grid-row-start: 5;
        grid-row-end: 6;
    }
    .start_Btn3{
        grid-column-start: 2;
        grid-column-end: 9;
        grid-row-start: 6;
        grid-row-end: 7;
    }


    #playpauseContainer{
        grid-row-start: 6;
        /*
          grid-area: headerright;
          */
        height: auto;
        grid-column-start: 5;
        grid-column-end: 7;
        grid-auto-flow: column;

    }

/*  FBQ */ 
    #fbq_SkipIntro_Btn{

        grid-row-start: 5;
        grid-row-end: 6;
    }
    #ggv_SkipIntro_Btn{

        grid-row-start: 5;
        grid-row-end: 6;
    }

    #fbq_Btn1{
        grid-column-start:1;
        grid-column-end: 10;
        grid-row-start: 4;
        grid-row-end: 5;
    
    }
    #fbq_Btn2{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 5;
        grid-row-end: 6;
     
    }
    #fbq_Btn3{
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 6;
        grid-row-end: 7;
 
    }


/*  WLW */

    #ggv_SkipIntro_Btn {
        grid-row-start: 5;
        grid-row-end: 6;
        grid-column-start: 3;
        grid-column-end: 8;
    }
    #playpauseBtn_WLW{
        width: 10%;
        height: 5%;
        left: 46%;
        opacity: 0.7;

        position: fixed;
         background-repeat: no-repeat;
        background-color: transparent;
        background-position: center;
        border: none;
    }
    #playpauseBtn_FBQ{
        width: 10%;
        height: 5%;
        left: 46%;
        position: fixed;
        top: 49vh;
    }

    #back_btn_WLW_videos{
        grid-column-start: 10;
        grid-column-end: 11;
        grid-row-start: 1;
    /*
        grid-area: headerright;
        */
        width: 5vh;
        height: 5vh;   
    }
    #wlw_Btn1 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 10;
        grid-row-end: 11;
    }
    #wlw_Btn2 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 11;
        height: 5vh;
    }
    #wlw_Btn3 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 12;
        height: 5vh
    }
    #wlw_Btn4 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 13;
        height: 5vh
    }
    #wlw_Btn5 {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 14;
        height: 5vh
    }


}



@media screen and (orientation: portrait) and (max-width: 768px)  {
        .standardButton{
            font-size: 2vh; 
        }
        p {
            font-size: 2vh;
        }
        h1 {
            font-size: 5vh;
        }
       
}

@media screen and (orientation: portrait) and (min-width: 366px) and (max-width: 768px)  {
        
      
   
}