* {
    box-sizing: border-box;

}
body{
    margin: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
   // padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    //padding: 15px;
}

.menu ul {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: rgb(245, 245, 245);
    text-align: center;
}
.menu li {
    float: left;
      position: relative;
      width: 25%;
      height: 100%;
}
.menu li a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100px;
    color: rgb(61, 91, 69);
    text-align: center;
    //padding: 14px 16px;
    line-height: 88px;
    text-decoration: none;
    font-size: 14px;
    text-anchor: 10px;
    border-radius: 15px;
}

.menu ul li a:hover {
    background-color: rgb(61, 91, 69);
    color: white;
    border-radius: 15px;
}


/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 320px) {
    /* For tablets: */
    .col-m-0 {width: 0%;}
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}

    .menu li a{font-size:12px;}
    .headText {font-size:14px;}
    #midBodyIntro h1{font-size:20px;}

    #glassimg{height:65px;}
    #glasses div img{height:50px;}
    #glasses{height:425px;}

    #contactimg{height:65px;}
    #contacts div img{height:50px;}
    #contacts{height:240px;}
}
@media only screen and (min-width:500px){
    .col-mm-0 {width: 0%;}
    .col-mm-1 {width: 8.33%;}
    .col-mm-2 {width: 16.66%;}
    .col-mm-3 {width: 25%;}
    .col-mm-4 {width: 33.33%;}
    .col-mm-5 {width: 41.66%;}
    .col-mm-6 {width: 50%;}
    .col-mm-7 {width: 58.33%;}
    .col-mm-8 {width: 66.66%;}
    .col-mm-9 {width: 75%;}
    .col-mm-10 {width: 83.33%;}
    .col-mm-11 {width: 91.66%;}
    .col-mm-12 {width: 100%;}


    .menu li a{font-size:18px;}
    .headText {font-size:16px;}

    #midBodyIntro h1{font-size:24px;}
    #glassimg{height:95px;}s
    #glasses div img{height:75px;}
    #glasses{height:575px;}

    

    #contactimg{height:95px;}
    #contacts div img{height:75px;}
    #contacts{height:300px;}

}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-0 {width: 0%;}
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .menu li a{font-size:22px;}
    .headText {font-size:18px;}
    #midBodyIntro h1{font-size:24px;}
    #glasses div img{height:150px;}
    #glasses{height:750px;}

    #glassimg{height:175px;}
    #glasses div img{height:150px;}
    #glasses{height:800px;}

    #contactimg{height:175px;}
    #contacts div img{height:150px;}
    #contacts{height:450px;}
}
img {
    width: 100%;
    height: auto;
}
#storeFront{
    width:100%;
    height: 500px;
    background-image: url("Images/frontstore.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
}
#glasses{
    width:100%;
    //height: 750px;
    background-image: url("Images/dust_@2X.png");
    //background-color:white;
}
#glasses img{
    width:100%;
    height: 150px;
}
#glassimg{
    //height: 175px;
}
#contacts{
    width:100%;
    //height: 450px;
    background-image: url("Images/husk_@2X.png");
    background-color:white;
}
#contacts img{
    width: 100%;
    height: 150px;
}
#findUs{
    width:100%;
    height: auto;
    background-image: url("Images/escheresque_ste_@2X.png");

}
#storeHours{
    border-radius:15px;
    background-color: rgba(255,255,255,0.8);
    //padding-left:15px;
}
#midBodyIntro{
    background-color: rgba(255,255,255,0.75);
    border-radius: 15px;
    color: rgb(61, 91, 69);
    height: auto;
}

#midBodyIntro h1{
    text-align: center;
}
.row{
    height: auto;
}
#headText{
    background-color:rgba(255,255,255,0.7);
}
#mainButton{
    background-color: orange;
    border-radius: 15px;
    width: 150px;
    height: 50px;
    font-size: calc(10px + 1vw);
}
#mainButton:hover{
    background-color: #ff8c00;
    border-radius: 15px;
    width: 150px;
    height: 50px;
    font-size: calc(12px + 1vw);
}
#header{
    background-image: url("Images/geometry_@2X.png");
}
#floatNav ul{
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
}
#floatNav ul li{
    float: left;
    position: relative;
    width: 25%;
    height: 100%;
}
#floatNav ul li a{
    float;left;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100px;
    color:white;
    text-align: center;
    line-height:25px;
    text-decoration: none;
}
#floatNav ul li a:hover{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100px;
    background-color:rgb(61, 91, 69);
    text-align: center;
    line-height:25px;
    text-decoration: none;
}
#floatNav{
    //display: none;
    font-family: sans-serif;
    background: green;
    padding: 0px;;
    width: 100%;
    z-index: 100000;
    position: fixed;
    //top: 150px;
    margin-left:-100vw;
}