@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Work+Sans:wght@100;300&display=swap');
    body {
        margin: 0;
    }
    html {
        scroll-behavior: smooth;
    }
    .logo {
        max-height: 15%;
        max-width: 15%;
        margin-top: 2%;
    }
    .openingimage {
        width: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 99%;
    }
    #openingmsgtitle {
        font-family: Work Sans;
        font-size: 50px;
        color: white;
        padding: 5px;
        text-shadow: 1px 2px 4px black;
        /*background-color: rgba(255, 255, 3255, .7);*/
    }
    .VisitShowroom {
        color: white;
        text-decoration: none;
        padding: 5px 15px 5px 15px;
        border: 2px solid white;
        transition: .5s;
    }
    .VisitShowroom:hover {
        -webkit-box-shadow: 0px 0px 15px 5px #FFFFFF; 
        box-shadow: 0px 0px 15px 5px #FFFFFF;
        transition: .5s;
    }
    .menuhr {
        width: 75%;
        border: 1px solid grey;
        background-color: grey;
    }
    .dropdown {
        position: relative;
        display: inline-block;
        margin-left: 2%;
        margin-right: 2%;
    }
    .dropdown-content {
        display: none;
        opacity: 0;
        position: absolute;
        background-color: white;
        min-width: 160px;
        box-shadow: 11px 10px 30px -6px rgba(0,0,0,0.85);
        padding: 0;
        z-index: 1;
        margin-left: -30px;
    }
    .dropdown:hover .dropdown-content {
        display: block;
        visibility: visible;
        opacity: 1;
        transition-delay: 2s;
    }
    .dropdownoption {
        font-family: Open Sans Condensed;
        font-size: 25px;
        line-height: 25px;
        padding: 10px;
        margin: 0;
        background-color: #F0F0F0;
        text-decoration: none;
        color: black;
    }
    .dropdownoption:hover {
        font-weight: bold;
        color: #215E22;
        background-color: white;
        text-decoration: none;
    }
    a {
        text-decoration: none;
    }
    .options {
        text-align: center;
    }
    .menuoption {
        font-family: Open Sans Condensed;
        font-size: 25px;
        margin-left: 2%;
        margin-right: 2%;
        text-align: center;
        text-decoration: none;
        color: #215E22;
        position: relative;
        text-decoration: none;
    }
    .menuoption:hover {
        color: #215E22;
    }
    .menuoption::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #215E22;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }
    .menuoption:hover::before {
        transform: scaleX(1);
    }
    #active {
        font-weight: bold;
        text-decoration: underline;
    }


    #navbar {
        background-color: #E9E9E9;
        position: fixed;
        top: -50px;
        width: 100%;
        display: block;
        transition: top 0.3s;
        border-bottom: 2px solid #808080;
    }
    #navbarlogo {
        width: 50px;
        padding: 5px;
        margin-left: 1%;
    }
    #navbar a {
        font-family: Open Sans Condensed;
        float: right;
        display: block;
        color: black;
        text-align: center;
        padding: 15px;
        text-decoration: none;
        font-size: 25px;
    }
    #navbar a:hover {
        background-color: #D8D8D8;
    }
    section {
        scroll-behavior: smooth;
    }


    .sectiontitle {
        font-family: Work Sans;
        font-size: 45px;
        text-align: center;
        color:black;
    }
    .optionpic {
        width: 50%;
        margin-top: 0px;
    }
    .cabinetdiv {
        display: inline-block;
        vertical-align: top;
        padding-left: 5px;
        padding-right: 5px;
        margin-top: 0px;
        margin-bottom: 20px;
        vertical-align: top;
        width: 15%;
        min-width: 200px;
        text-align: center;
    }
    .cabinetoption {
        font-family: Work Sans;
        font-size: 25px;
        font-weight: bold;
        color: black;
        text-decoration: none;
        text-align: center;
        position: relative;
        text-decoration: none;
    }
    .cabinetoption:hover {
        color: #215E22;
    }
    .cabinetoption::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #215E22;
        transform: scaleX(0);
        transform-origin: top left;
        transition: transform 0.3s ease;
    }
    .cabinetoption:hover::before {
        transform: scaleX(1);
    }
    .smallsectionhr {
        border: 6px solid #215E22;
        background-color: #215E22;
        width: 40%;
        text-align: center;
    }
    .smallsectiontitle {
        font-family: Work Sans;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
    }
    .small-section-description {
        font-family: Work Sans;
        font-size: 25px;
        text-align: center;
        width: 75%;
    }
    .smallsectioninfo {
        font-family: Work Sans;
        font-size: 25px;
        text-align: center;
        color: black;
        text-decoration: none;
        width: 80%;
        line-height: 35px;
    }
    .product-list-container {
    width: 90%;
    }
    .products {
        display: inline-block;
        vertical-align: bottom;
        padding-left: 5px;
        padding-right: 5px;
        margin-top: 0px;
        width: 250px;
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
    }
    .products:hover {
        -webkit-box-shadow: 5px 5px 10px -1px rgba(0,0,0,0.4); 
        box-shadow: 5px 5px 10px -1px rgba(0,0,0,0.4);
    }
    .productpic {
        width: 100%;
        transition: transform .4s; /* Animation */
    }
    .productpic:hover {
        transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }
    .productname {
        font-family: Work Sans;
        font-size: 25px;
        color: black;
    }

    /* Start of top button*/
    #topbtn {
        font-family: Work Sans;
    color: #215E22;
    text-decoration: none;
    padding: 5px 15px 5px 15px;
    border: 2px solid #215E22;
    transition: .5s;
        
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 20px;
        outline: none;
        background-color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
      }
      
      #topbtn:hover {
        background-color: #555;
      }
    /* END of top button*/

    .btm-menu {
        background-color: #808080;
        padding: 15px;
    }
    .endmsg {
        font-family: Work Sans;
        font-weight: bold;
        font-size: 35px;
        text-align: center;
        margin: 0;
        padding-top: 1px;
        padding-bottom: 1px;
        width: 100%;
        background-color: #5C5C5C;
        color: white;
    }
    .menuline {
        position: relative;
        display: flex;
    }
    #menutitle {
        font-family: Work Sans;
        font-size: 30px;
        color: white;
        text-decoration: none;
    }
    #menuinfo {
        font-family: Work Sans;
        font-size: 20px;
        color: white;
        text-decoration: none;
    }
    #menuinfo:hover {
        text-decoration: underline;
    }
    .inmenudiv {
        margin-left: 5%;
    }
    .copyright {
        font-family: Arial;
        color: white;
    }
    .fade {
        opacity: 1;
    }

    .image-option-container-left {
    width: 100%;
    text-align:center;
    }
    .image-option-left {
    display:inline-block;
    width: 30%;
    transition: .5s;
    }
    .image-option-left:hover {
    width: 31%;
    transition:.5s;
    }
    .image-option-content-left {
    vertical-align:top;
    margin-top: 2%;
    display:inline-block;
    width: 30%;
    margin-left: 5%;
    }
    .image-option-hr-left {
    border: 3px solid #215E22;
    background-color: #215E22;
    width: 10%;
    float:left;
    }
    .image-option-title-left {
    font-family: Work Sans;
    font-weight: bold;
    font-size: 25px;
    text-align: left;
    }
    .image-option-description-left {
    font-family: Work Sans;
    font-size: 20px;
    text-align: left;
    }
    .image-option-button-left {
    font-family: Work Sans;
    font-size: 20px;
    color: #215E22;
    text-decoration: none;
    padding: 5px 15px 5px 15px;
    border: 2px solid #215E22;
    transition: .5s;
    float:left;
    }
    .image-option-button-left:hover {
        -webkit-box-shadow: 0px 0px 15px 5px grey; 
        box-shadow: 0px 0px 15px 5px grey;
        transition: .5s;
    }

    .reviews {
        border: 2px solid #E4E4E4;
        border-radius: 10px;
        display: inline-block;
        padding: 15px;
        width: 20%;
        min-width: 300px;
        margin: 10px;
        vertical-align: top;
    }
    .review-name {
        font-family: Work Sans;
        font-family: 30px;
        font-weight: bold;
        margin: 0;
        margin-top: 10px;
    }
    .review-stars {
        color: #F1C40F;
        font-size: 30px;
        margin: 0;
        padding: 0;
    }
    .review-stars-amount {
        font-family: Work Sans;
        font-family: 15px;
        color: grey;
        margin: 0;
    }
    .review-text {
        font-family: Work Sans;
        font-family: 20px;
        width: 90%;
    }
    .review-origin-img {
        width: 10%;
        margin-top: 15px;
    }

    .image-option-container-right {
    width: 100%;
    text-align:center;
    }
    .image-option-right {
    display:inline-block;
    width: 30%;
    transition:.5s;
    }
    .image-option-right:hover {
    width: 31%;
    transition:.5s;
    }
    .image-option-content-right {
    vertical-align:top;
    margin-top: 2%;
    display:inline-block;
    width: 30%;
    margin-right: 5%;
    }
    .image-option-hr-right {
    border: 3px solid #215E22;
    background-color: #215E22;
    width: 10%;
    float:right;
    }
    .image-option-title-right {
    font-family: Work Sans;
    font-weight: bold;
    font-size: 25px;
    text-align: right;
    }
    .image-option-description-right {
    font-family: Work Sans;
    font-size: 20px;
    text-align: right;
    }
    .image-option-button-right {
    font-family: Work Sans;
    font-size: 20px;
    color: #215E22;
    text-decoration: none;
    padding: 5px 15px 5px 15px;
    border: 2px solid #215E22;
    transition: .5s;
    float:right;
    }
    .image-option-button-right:hover {
        -webkit-box-shadow: 0px 0px 15px 5px grey; 
        box-shadow: 0px 0px 15px 5px grey;
        transition: .5s;
    }

    .info-container {
    text-align: center;
    display:inline-block;
    margin: 1%;
    width: 25%;
    -webkit-box-shadow: 0px 0px 15px 1px #B8B8B8; 
    box-shadow: 0px 0px 15px 1px #B8B8B8;
    vertical-align: top;
    transition: .5s;
    }
    .info-container:hover {
    width: 26%;
    transition: .5s;
    }
    .info-icon {
    width: 10%;
    padding-top: 25px;
    }
    .info-description {
    font-family: Work Sans;
    font-size: 1.4vw;
    text-align: center;
    color: black;
    text-decoration: none;
    line-height: 35px;
    }

    /*SLID EIN CSS*/
    .slideanim {
        visibility:hidden;
        visibility:visible\9;/*For old IE browsers IE6-8 */
    }
    .slideanim.slide {                  
        visibility: visible;                  
        animation: slide 1s;
    }
    .slideanim::after {
        /* useful when its child elements are float:left; */
        content: "";
        display: table;
        clear: both;
    }
    @keyframes slide {
        0% {
            opacity: 0;
            transform: translateY(50%);
        } 
        100% {
            opacity: 1;
            transform: translateY(0);
        } 
    }
    /*SLIDE IN CSS - END */

    .row {
        justify-content: center;
        display: -ms-flexbox; /* IE10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE10 */
        flex-wrap: wrap;
        padding: 0 4px;
        margin-bottom: 50px;
      }
      
      /* Create four equal columns that sits next to each other */
      .column {
        -ms-flex: 25%; /* IE10 */
        flex: 25%;
        max-width: 25%;
        padding: 0 4px;
      }
      
      .column img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
      }
      
    /* --- START OF PRODUCTS PAGE START --- */
    .pageHolder { 
    overflow: auto; 
    width: 80%;
    margin: auto;
    } 
    .product-picture-div {
    width: 500px;
    float: left;
    display: inline-block;
    }
    .product-information {
    float: left;
    margin-left: 5%;
    }
    .product-picture {
    width: 100%;
    }
    .product-title {
        font-family: Work Sans;
        font-size: 45px;
    }
    .description {
    font-family: Work Sans;
    font-size: 15px;
    text-decoration: underline;
    line-height: 0;
    }
    .product-description {
    font-family: Work Sans;
    font-size: 20px;
    width: 600px;
    }
    .wood-type {
    font-family: Work Sans;
    font-size: 25px;
    line-height: 5px;
    }
    .wood-type-options {
    font-family: Work Sans;
    font-size: 20px;
    }
    .product-button {
    font-family: Work Sans;
    font-weight: bold;
    font-size: 20px;
    box-shadow: -3px 3px 10px 1px #b5b5b5;
	background-color:transparent;
	border-radius:3px;
	border:5px solid #215e22;
	display:inline-block;
	cursor:pointer;
	color:#215e22;
	padding:10px 31px;
	text-decoration:none;
    }
    .product-button:hover {
    font-size: 21px;
    box-shadow: -5px 4px 10px 1px #999999;
    }
    /* --- END OF PRODUCTS PAGE END --- */

    #back2Top {
        width: 50px;
        line-height: 50px;
        overflow: hidden;
        z-index: 999;
        display: none;
        cursor: pointer;
        -moz-transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
        position: fixed;
        bottom: 50px;
        right: 0;
        background-color: #DDD;
        color: #555;
        text-align: center;
        font-size: 40px;
        text-decoration: none;
    }
    #back2Top:hover {
        background-color: #DDF;
        color: #000;
    }

      /* Responsive layout - makes a two column-layout instead of four columns */
      @media screen and (max-width: 800px) {
        .column {
          -ms-flex: 25%;
          flex: 25%;
          max-width: 25%;
        }
      }
      
      /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .column {
          -ms-flex: 100%;
          flex: 100%;
          max-width: 100%;
        }
      }