body{
    background-color: hsl(60,7.462686567164193%,86.86274509803921%);
    font-family: cormorant-garamond, serif;
}


#noscroll-div{
    position:fixed;
    width:70%;
    height: 100vh;
    z-index: 4;
   }

/*Home button*/
.homeButtonDiv{
    position: absolute;
    border: 2px solid black;
    width:100px;
    height: 40px;
    top: 10px;;
    left: 2%;
    z-index: 1000;
    font-size: 28px;
    text-align: center;
    
}

#modelPageButton{
    left:150px;
}

#homeButtonText{
    margin: 8% auto;
    text-decoration: none;
    display: block; 
}

#modelButtonText{
    margin: 8% auto;
    text-decoration: none;
    display: block; 
}

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}


#ImageSection{
    height: 40vw;
    max-height: 60vh;
}



.img-div{
    width: 100%;
    height: 60vh;
}

    .displayIMG{
        position: absolute;
        max-width: 100%;
        max-height: 60vh;
        }

    
    
    /*View button ########################################################*/
    #ViewButtonDiv{
        position:relative;
        width:100%;
        height: auto;
        text-align:center;
        z-index:100;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        
    }

    .ViewButton{
        background-color: hsl(60,7.462686567164193%,86.86274509803921%);;
        border-color: rgb(112,112,112);
        font-family: cormorant-garamond, serif;
        width:100px;
        height:40px;

    }

    /*View button ########################################################*/

    #DisclaimerDiv{
        position:relative;
        margin-top: 5vh;
        width:70%;
        left: 15%;
        min-width: 400px;
        z-index: 100;
        text-align:center;
        font-size: 0.9rem;
    }

    #options-div{
        position: absolute;
        right: 0px;
        width: 30%;
        z-index: 0;
    }

    .options-title{
        margin: 20px auto;
        font-size: 60px;
        text-align: center;
    }

    .options-hr{
        border: 2px solid grey;
    }


    #OptionsSection{
        width: 80%;
        height: auto;
        margin: 0% 10%;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
    }

    .SubOptionsTitle{
        margin: 20px auto;
        font-size: 40px;
        text-align: center; 
    }

    .SubOptions-hr{
        border: 2px solid grey;
        width: 60%
    }



    /*paintbutton ########################################################*/
    .PaintButtonDiv{
        position: relative;
        width: 100px;
        height: 140px;
    }
    .PaintCircle{
        border: 1px solid black;
        border-radius: 40px;

        position: absolute;
        width: 80px;
        height: 80px;
        top: 10px;
        left: 9px;
        z-index: 4;
    }

    .PaintButton{
        background-color: transparent;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 40;

    }

    .PaintTitleDiv{
        position: relative;
        margin: 95% 5%;
        height: 90px;
        height: 40px;
        z-index: 5;
        font-size: 20px;
        text-align: center;
    }
    .PaintTitle{
        font-size: 20px;
        text-align: center; 
    }

    /*paint circles ########################################################*/

    #WhitePaintCircle{background:white;}
    #SilverPaintCircle{background: silver;}
    #GreyPaintCircle{background: grey;}
    #GlossBlackPaintCircle{background: black;}
    #MatteBlackPaintCircle{background: rgb(31, 30, 30);}
    #NaraPaintCircle{background: rgb(58, 41, 37);}
    #NauticaBluePaintCircle{background: rgb(28, 39, 90);}
    #ArlesBluePaintCircle{background: rgb(61, 79, 112);}
    #EpsomGreenPaintCircle{background: rgb(6, 43, 8);}
    #KeswickGreenPaintCircle{background: rgb(59, 85, 52);}
    #PhoenixOrangePaintCircle{background: rgb(228, 84, 1);}
    #BorregoYellowPaintCircle{background: rgb(253, 207, 1);}
    #RutlandRedPaintCircle{background: rgb(206, 2, 2);}
    #MontalcinoRedPaintCircle{background: rgb(82, 3, 3);}
    #TanRoofPaintCircle{background: tan;}
    #BrownRoofPaintCircle{background: rgb(80, 47, 32);}
    
    #ColorMatchedPaintCircleRoof{background:white;}
    #ColorMatchedPaintCircleBonnet{background:white;}
    #ColorMatchedPaintCircleWheelArches{background:white;}
    #ColorMatchedPaintCircleHinges{background:white;}
    #ColorMatchedPaintCircleMirrors{background:white;}


    /* Option Buttons ###################################################################################################*/
    .OptionButtonDiv{
        position: relative;
        width: 140px;
        height: 160px;
    }
    .OptionImg{
        position: relative;
        width: 90%;
        content: url("110HardTopFourDoorRenders/Chassis/Black/110HardTopFourDoor_10008.png");
    }

    .OptionButton{
        background-color: transparent;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 40;
    }

    .OptionTitleDiv{
        position: relative;
        height: 100px;
        height: 40px;
        z-index: 5;
        font-size: 20px;
        text-align: center;
    }
    .OptionTitle{
        font-size: 20px;
        text-align: center; 
    }


    /* Sub options  ###################################################################################################*/
    #BlackLugsDiv{
        position: relative;
        width: 140px;
        height: 160px;
        right:auto;
    }

    #SilverLugsDiv{
        position: relative;
        width: 140px;
        height: 160px;
        right:auto;
    }
    

    /*View Divs  ###################################################################################################*/
    #FrontRightCornerDiv{
        position: absolute;
        left:auto;}

    #FrontLeftCornerDiv{
        position: absolute;
        left: -100%;}

    #FrontDiv{
        position: absolute;
        left: -100%;}

    #BackDiv{
        position: absolute;
        left: -100%;}

    #LeftSideDiv{
        position: absolute;
        left: -100%;}

    #RightSideDiv{
        position: absolute;
        left: -100%;}

    #BackRightCornerDiv{
        position: absolute;
        left: -100%;}

        #BackLeftCornerDiv{
            position: absolute;
            left: -100%;}

    /*View Divs ########################################################*/


