html,body{
    height:100%;
    margin:0;
    box-sizing: border-box;
    /* A system font stack so things load nice and quick! */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /*font-weight: 400;*/
    font-size: 12px;
    color: var(--black);
    }
    
    .flex-container{
        width:100%;
        min-height:100%;
        display:flex; 
        flex-direction:column; 
        margin:auto; 
        }
        
        .header{
            background-color:#015695;
            height:70px;
            display:flex; 
            flex-direction:row; 
            }

           .header .left{
                /*background-color:#309501;*/
                align-self: center;
                text-align: center;
                flex:0 0 300px;
                margin-left: 3px;
                }

            .header .center{
                /*background-color:#7a9501;*/
                color:white;
                align-self: center;
                text-align: center;
                flex-grow: 1;
                }

            .header .right{
                /*background-color:#309501;*/
                align-self: center;
                text-align: center;
                flex:0 0 300px;
                margin-right: 3px;
                }
            .large-logo {
                display: block;
                }
            .small-logo {
                display: none;
                }
    

        .item p {
            margin: 0 0 5px 0;
            }

        .H-text{
            font-size:calc(8px + 0.6vw);        
            text-align: center;
        }
        
        .main{
            flex-grow:2; 
            display:flex; 
            flex-direction:row;
        }

        .main_limited{
            flex-grow:2; 
            display:flex; 
            flex-direction:row;
        }

        .main_limited_explained{
            flex-grow:2;
            text-align: center; 
            display:none; 
        }

        .left-side{
                /*background-color:red;*/
                align-self:stretch;
                /*flex:0 0 10%;*/
                flex-grow: 1;
            }
    
        .content_1000{
                /*background-color:green;*/
                align-self:stretch;
                flex:0 0 1000px;
                height: calc(100vh - 70px - 35px);
                overflow: auto;
            }
        .content_fullwidth{
            /*background-color:purple;*/
            width: 100%;
            align-self:stretch;
            height: calc(100vh - 70px - 35px);
            }
        
        model-viewer {
            width:  100%;
            height: calc(100vh - 70px - 35px);
            background-color: #454B4F;
            --poster-color: #ffffff00;
          }


        .right-side{
            /*background-color:purple;*/
            align-self:stretch;
            /*flex:0 0 10%;*/
            flex-grow: 1;
        }  

        .footer{
            height:35px;
            background-color:#015695;
            width:100%;
            color:white;
            display:flex; 
            flex-direction:row; 
            }
            .footer .left{
                /*background-color:#309501;*/
                flex:0 0 300px;
                text-align: center;
                font-size: calc(7px + 0.4vw);
                align-self: center;
                }
            .footer .center{
                /*background-color:#7a9501;*/
                color:white;
                flex-grow: 1;
                text-align: center;
                font-size: calc(9px + 0.6vw);
                align-self: center;
                }  
            .footer .right{
                /*background-color:#309501;*/
                flex:0 0 300px;
                text-align: center;
                font-size: calc(7px + 0.4vw);
                /*font-size: 0px;*/
                align-self: center;
                }

        .slider{
            width: 100px;
        }        

        @media only screen and (max-width: 900px) {
            .header .left{
                display: flex;
                justify-content: center;
                flex:0 0 100px;
                }
            .header .center{
                flex-grow: 1;
                }
            .header .right{
                display: flex;
                justify-content: center;
                flex:0 0 100px;
                }   
            .footer .left{
                flex:0 0 30%;
                }
            .footer .center{
                flex-grow: 1;
                }
            .footer .right{
                flex:0 0 30%;
                }   
            .large-logo {
                display: none;
                }
            .small-logo {
                display: block;
                }
            }

            @media only screen and (max-width: 1000px) {
            .content_1000{
                flex:0 0 100%;
                }
            .slider{
                width:50px;
                }
            }
/*
            @media only screen and (max-width: 750px) {
                .content_1000{
                    flex:0 0 500px;
                    }
              }
*/

            @media only screen and (max-width: 550px) {
                div.main_limited {
                  display: none;
                }
                div.main_limited_explained {
                    display: block;
                  }
              }
              
            .Activity{
                display: flex;
                width: 100%;
              }
              
            .ColoringPage{
                display: flex;
                width: 100%;
              }

              

            .img-magnifier-container {
                position:relative;
              }
              
            .mag-img{
              max-width:100%;
            }
            
              .img-magnifier-glass {
                position: absolute;
                border: 3px solid #000;
                border-radius: 50%;
                cursor: none;
                /*Set the size of the magnifier glass:*/
                width: 200px;
                height: 200px;
              }


              .Selections{
                display: flex;
                margin-left: 10px;
              }
              
              .ColoringTools{
                width: 100%;
              }
              
              .ColoringInstructions{
                margin-top: 15px;
                margin-right: 10px;
            }


            #photosphere {margin: 0;
                width: 100%;
                height: 100%;
                }


            .collapsed {display: block;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    }
        .collapsed br {display: none;}