/* General */
body {
    background-color: white;
}

p dl, dt, p, dd, ul, li, td {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 16px;
}

.clear_fix ::after {
    clear: both;
    content: "";
    display: table;
}

/* Hearer General */
.header_container {
    width: 98%;
    margin: auto;
}


.header_search_box ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    float: left;
    margin-left: 5em;
    width: 80%;
}

.header_search_box li input {
    height: 30px; 
    margin-top: -12px;
    font-size: 18px;
}

/* Range Holder In Search */
#h_product_search_container {
    width: 200px;
    float: right;
    overflow: visible;
    position: absolute;
    background: white;
    margin-left: -250px;
    margin-top: 60px;
    z-index: 9 !important;

}

.range_container {
    float: left;
    margin: 1% 2% 4% 8%;
    overflow: hidden;
    position: relative;
    width: 72%;
}

.range_holder {
    border: 1px solid lightgray;
    float: left;
    height: 380px;
    margin: 4px;
    padding: 2px;
    text-align: center;
    width: 230px;
    background: white;
}
.range_holder a {
    border: 0 none;
}
.range_holder_img {
    border: 0 none;
}
.range_holder_img img {
    border: 0 none;
    height: 270px;
    width: 180px;
}
.range_holder_text {
    text-align: center;
}


.product_view_container {
    width: 75%;
    float:  left;
    margin: 0% 3%; 
}

.product_main_image a img {
    border: 0 none;
    width: 320px;
}

.rel_img_container {
    margin: 20px 3px;
    width: 350px;
    overflow: auto;
}

.rel_image {
    float: left;
    margin: 5px;
}

.rel_imgage a {
    border: 0 none;
}

.rel_img_container a img {
    border: 0 none;
}

.left_product_container {
    float: left;
    margin: 0 10px;
    width: 30%;
}

.rel_product_container {
    margin: 20px auto;
    overflow: auto;
    text-align: center;
    width: 75%;
}

.rel_product_title p {
    background-color: #009933;
    color: #FFFFFF;
    font-size: 19px;
}

.right_product_container {
    float: right;
    width: 410px;
    margin-right: 9%;
}

.title_container {
    float: right;
    width: 410px;
    margin-right: 10%;
}

.descript_container {
    float: right;
    margin: 5px 0;
}

.descript_container dd {
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 15px;
    text-align: justify;
}

.rel_holder {
    border: 1px solid lightgray;
    float: left;
    margin: 3px;
    padding: 2px;
    text-align: center;
    width: 120px;
}

.rel_holder a {
    border: 0 none;
}

.rel_holder_img img {
    border: 0 none;
}

.rel_holder_text {
    text-align: center;
}


.contacts_body {
    width: 75%;
    float:  left;
    margin: 0% 1%; 
}

.contacts_body #map_canvas {
    height: 400px;
    width: 500px;
}



/* footer */
.busywear_footer {
    display: table;
    width: 100%;
    padding-top: 40px;
}

.busywear_footer :after{
    content: "";
    clear: both;
    display: table;
}

.footer_container {
    display: table;
    width: 100%;
    margin-top: -40px;
}

.footer_navigation {
    display: table;
    float: right;
    margin: 0px 2%;
}

.footer_navigation ::after {
    content: "";
    clear: both;
    display: table;
}


.footer_navigation ul {
    list-style-type: none;
}

.footer_navigation li {
    float: left;
    display: block;
    margin: 0px 20px;
}

.footer_navigation li a {
    text-decoration: none;
    color: black;
}

.footer_navigation li a:hover {
    color: green;
    text-decoration-line: underline;
}

.footer_copyright {
    background-color: green;
    color: white;
    padding: 5px 0px;
}

.footer_copyright ul {
    text-align: center;
    list-style: none;
    width: 80%;
    margin: auto;
}

.footer_copyright li {
    color: white;
    margin: 5px 10px;
    display: block;
}

.footer_copyright li a {
    text-decoration: none;
    color: white;
    font-size: 13px;
}

.footer_copyright li a:hover {
    color: black;
    font-size: 13px;
}

.page_container {
    overflow: auto;

}




/* Hide the link that should open and close the topnav on small screens */
.main_nav button.icon {
  display: none; 
}



.main_nav ::after {
    content: "";
    clear: both;
    display: table;
}


.main_nav dl {
    display:none;
}


.main_nav dt {
    font-size: 20px;
}

.main_nav dd a{
    text-decoration: none;
    color: black;
}

.main_nav dd a:hover {
    text-decoration: underline;
    color: green;
}


@media screen and (max-width: 47.5em) {
    p dl, dt, p, dd, ul, li, td {
        font-size: 16px;
    }

    .busywear_header ::after {
        clear: both;
        content: "";
        display: table;
    }
    
    .header_container {
        width: 98%;
        margin: auto;
    }
    
    .header_left_logo {
        width: 100%;
        margin: auto;
        float: left;
    }
    
    .header_search_box {
        width: 100%;
        float: left;
        margin:auto;
    }
    
    .header_search_box ul {
        list-style-type: none;
        padding: 0;
        overflow: hidden;
        float: right;
        margin-right: 5%;
        margin-left: 5%;
        width: 90%;
        
    }
    
    .header_search_box li {
        float: left;
        margin: 10px;
        font-size: 20px;
        vertical-align: center;
    }

    #h_product_search_container {
        width: 200px;
        float: right;
        overflow: visible;
        position: absolute;
        background: white;
        margin-left: -250px;
        margin-top: 60px;
        z-index: 9 !important;
    
    }

    /* Footer */
   
    .footer_navigation li {
        float: left;
        display: block;
        margin: 10px 30px;
    }

    /* Navigation */    
   .main_nav button.icon {
    display: block;
    width: 100%;
    margin: 20px 0px;
    padding: 10px;
    background: #274027;
    color: white;
   }

    .main_nav button.icon :hover {
    display: block;
    width: 100%;
    margin: 30px 0px;
    padding: 10px;
    background: darken(#14d021, 10%);
	
    }   

    

    .product_ranges {
        display: none;
    }

    /* Homepage */
    .homepage {
        width: 70%;
        float:  left;
        margin: 0% 10%;
    }

    .homepage ::after {
        content: "";
        clear: both;
        display: table;
    }

    .homepage_body  {
        width: 90%;
        margin: auto; 
        content: "";
    }

    .homepage_image_containder  {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }


    .termsofuse_body
    {
        width: 80%;
        float:  left;
        margin: 0% 9%; 
    }

    .sizeguidepage_container {

        width: 80%;
        float: left;
        margin: 0% 10%;
        overflow: hidden;
    }
    

    .contacts_body {
        width: 80%;
        margin: 0% 9%; 
    }
    
    .contacts_body #map_canvas {
        height: 400px;
        width: 500px;
    }
   
    
    .range_container {
        float: left;
        margin: 1% 10%;
        overflow: hidden;
        position: relative;
        width: 70%;
    }

    .product_view_container {
        width: 80%;
        float:  left;
        margin: 2% 9%; 
    }
    
    .title_container {
        width: 80%;
        margin: 1% 9%;
    }
    
    .left_product_container {
        width: 80%;
        margin: 1% 9%;
    }

    .right_product_container {
        width: 80%;
        margin: 1% 9%;
    }

}


@media screen and (min-width: 48em) {

    /* Header */
    .busywear_header {
        width: 100%;
        display: table;
    }

    .busywear_header ::after {
        clear: both;
        content: "";
        display: table;
    }

    .header_left_logo {
        width: 45%;
        margin: 1em;
        float: left;
    }

    .header_search_box {
        width: 45%;
        margin: 1em;
        float: right;
    }

    .header_search_box ul {
        list-style-type: none;
        padding: 0;
        overflow: hidden;
        float: right;
        margin-right: 10%;
        margin-left: 10%;
    }

    .header_search_box li {
        float: left;
        margin: 10px;
    }

    
    /* Footer */

    .footer_navigation li {
        float: left;
        display: block;
        margin: 0px 20px;
    }

    .main_nav button.icon {
        display: none;
    }


    /* Navigation */    
    .main_nav {
        width: 15%;
        float: left;
        margin: 1%;
        display: block;
    }
    
    .main_nav button.icon {
        display: none; 
    }


    .main_nav dl { display:block; }

    /* Homepage */
    .homepage {
        width: 75%;
        float:  left;
        margin: 0% 1%;
    }

    .homepage ::after {
        content: "";
        clear: both;
        display: table;
    }

    .homepage_body  {
        width: 70%;
        margin: auto; 
        content: "";
    }

    .homepage_image_containder  {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .homepage_random_image  {
        margin: 30px 30px;
        content: "";
    }

    .sizeguidepage_container {

        width: 65%;
        float: left;
        margin: 0% 5%;
    }

    .sizeguide_header h1 {
        width: 100%;
        border-bottom: green 1px solid;
    } 

    .howtomeasure_container {
    
        content: "";
    }

    .howtomeasure_img {
        content: "";
        width: 25%;
        float: left;
        margin: 0% 2%;
    }

    .howtomeasure_explanation {
        float: right;
        width: 65%;
        margin: 5% auto;
    }

    .howtomeasure_explanation table tbody td {
    min-width:  150px;
    padding: 15px; 
    }

    .sizemeasurements_container {
        width: 100%;
        float: left;
        margin-top: 30px;
    }
    
    .measurements_info
    {
        width: 100%;
    }

    .measurements_info table
    {
        width: 100%;
        border: 2px solid gray;
    }

    .measurements_info table td
    {   
        padding: 1%;
    }


    .contacts_body {
        width: 75%;
        float:  left;
        margin: 0% 1%; 
    }

    .contacts_body #map_canvas {
        height: 400px;
        width: 500px;
    }

    .termsofuse_body
    {
        width: 75%;
        float:  left;
        margin: 0% 1%; 
    }

    .page_header_text_box {
        text-align: center;
        font-size: 19px;
    }

    .page_header_text_box p {
        font-size: 19px;
    }

    .lower_header_text_box p {
        font-size: 17px;
        margin: 30px 0 1px;
        text-align: left;
    }

    .text_box {
        margin: 5px auto;
        text-align: justify;
    }

    .text_box a {
        color: #000000;
        text-decoration: none;
    }
    .text_box a:hover {
        text-decoration: underline;
    }

    .text_box ul {
        list-style: none outside none;
    }

    .text_box li {
        text-align: justify;
    }

 
    .range_container {
        float: left;
        margin: 1% 2% 4% 8%;
        overflow: hidden;
        position: relative;
        width: 70%;
    }



    .product_view_container {
        width: 75%;
        float:  left;
        margin: 0% 3%; 
    }
    
    .product_main_image a img {
        border: 0 none;
        width: 320px;
    }
    
    .rel_img_container {
        margin: 20px 3px;
        width: 350px;
        overflow: auto;
    }
    
    .rel_image {
        float: left;
        margin: 5px;
    }
    
    .rel_imgage a {
        border: 0 none;
    }
    
    .rel_img_container a img {
        border: 0 none;
    }
    
    .left_product_container {
        float: left;
        margin: 0 10px;
        width: 30%;
    }
    
    .rel_product_container {
        margin: 20px auto;
        overflow: auto;
        text-align: center;
        width: 75%;
    }
    
    .rel_product_title p {
        background-color: #009933;
        color: #FFFFFF;
        font-size: 19px;
    }
    
    .right_product_container {
        float: right;
        width: 410px;
        margin-right: 9%;
    }
    
    .title_container {
        float: right;
        width: 410px;
        margin-right: 10%;
    }
    
    .descript_container {
        float: right;
        margin: 5px 0;
    }
    
    .descript_container dd {
        font-family: Tahoma,Geneva,sans-serif;
        font-size: 15px;
        text-align: justify;
    }
    
    .rel_holder {
        border: 1px solid lightgray;
        float: left;
        margin: 3px;
        padding: 2px;
        text-align: center;
        width: 120px;
    }
    
    .rel_holder a {
        border: 0 none;
    }
    
    .rel_holder_img img {
        border: 0 none;
    }
    
    .rel_holder_text {
        text-align: center;
    }

    #h_product_result {
        border: 1px solid gray;
        clear: both;
    }
    #h_product_result_img {
        float: left;
    }
    #h_product_result_img img {
        width: 75px;
    }
    #h_product_result_text {
        float: left;
        margin: 0 10px;
        width: 50%;
    }
    #h_product_result_text p {
        text-align: center;
    }
    #actions_available {
        padding-left: 10px;
    }
}


@media screen and (min-width: 90em) {
    .busywear_header {
        max-width: 90em;
        margin:auto;
    }
    
    .busywear_header ::after {
        clear: both;
        content: "";
        display: table;
    }
    
    .header_left_logo {
        width: 68%;
        margin: 10px;
        float: left;
    }
    
    .header_search_box {
        width: 28%;
        margin: 1px 10px;
        float: right;
    }
    
    .header_search_box ul {
        list-style-type: none;
        padding: 0;
        overflow: hidden;
        float: right;
        margin-right: 5%;
        margin-left: 5%;
        width: 90%;
    }
    
    .header_search_box li {
        float: left;
        margin: 10px;
    }

    .footer_container {
      
        max-width: 90em;
        margin:auto;
    }

    .footer_navigation li {
        float: left;
        display: block;
        margin: 0px 20px;
    }

    .page_container {
   
        max-width: 90em;
        margin:auto;
    }


     /* Navigation */    
     .main_nav {
        width: 15%;
    }
    
    .pruduct_ranges {
        display: block;
        
    }
    
    .main_nav button.icon {
        display: none;
    }

    

}