

<style>
        p {
            font-size: 17.3px;
            line-height: 28px !important;
            margin-bottom: 0;
        }
        li, ul {
            font-size: 17px;
            margin-bottom: 0;
            line-height: 28px !important;
            padding-left: 25px;
        }
        a {
            color: black;
            text-decoration: none;
        }
        a:hover {
            color: black;
            text-decoration: none;
        }

        h4 {
            line-height: 40px;
            margin-bottom: 0px; /*  margin-bottom: 15px;    */
        }

        .margin_b10 {
            margin-bottom: 10px;
        }
        .margin_b15 {
            margin-bottom: 15px;
        }
        .ul_lrg {
            font-size: 19px;
            line-height: 32px;
        }
        .ul_minor {
            padding-left: 25px;
        }

        .outer {
            border: 10px;
            border-style: solid;
            border-color: #007bff;
        }

        .product_container {
            background-color: purple !important;
            transition: 0.4s;
            border: 10px;
            border-style: solid;
            border-color: #007bff;
        }
        .product_container:hover {
            background-color: red !important;
            transition: 0.9s;
        }

        .bg {
            min-height: 100vh;
        }
        .bg_img { 
            min-height: 100vh;
            background-image: linear-gradient(rgba(160, 180, 140, 0.4), rgba(60, 200, 140, 0.8)), url("https://martinreilly.com.au/images/other/urban_abstract.jpg");
            background-attachment: fixed;
        }
        .logo {
            position: fixed;    
            width: 85px;   
            height: 80px;
            top: 0; /*  top: -10px;   /*  top: 20px;  */
            top: 0; /*  left: -20px;  /*  left: 20px; */
            z-index: 9999;
            transition: 0.5s;
        }

        .topbar {
            position: sticky;
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: darkorange;
        }
        .topbar2 { 
            width: auto;
            height: 100%;/*  auto;   */
            /*min-height: 50px; */  /*  max-height: 40px;   */
            align-items: center;
            justify-content: center;
         /*   background-color: red;  */
        }
        .topbar3 { z-index: 99999;
            width: auto;
            height: auto;
            min-height: 70px;
            align-items: center;
            justify-content: center;
            padding-left: 2rem;
        }

        .topbtn_hide {
          /*  display: none;    */
            position: relative;
            top: 80px;  /*  top: 221px; */
            left: 20px;
            display: flex;
            flex-direction: column;
        }
        .topbtn_hide:hover {
            display: block !important;
            display: flex;
            flex-direction: column;
        }
        .topbtn_menu {
            position: fixed;
            top: 20px;
            right: 20px;
            display: block;
            width: 60px;
            height: 60px;
            background-color: black;
        }
        .topbtn_menu:hover {
            width: 300px;
            height: 60vh;
        }

        .dd_content {
            display: flex;
            flex-direction: column;
        }

        .ad_left, .ad_right {
            display: none;
        }

        .main_content {
            min-height: calc(100vh - 100px - 70px);
        /*    position:   fixed;      /*  absolute    */
        }

        .full_img {
            width: 100%;    /*  width: auto;    */
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .img_full {
            width: 100%;    /*  width: auto;    */
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .jumbotron {
            background-color: #2E2D88;
            color: white;
        }

        .tab-content {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
        .nav_tabs {
            margin-bottom: 0;
        }

        #showHide {
            display: none;
        }

        .footer {
            width: 100%;
            height: 70px;   /*  margin-top: calc(100vh - 100px - 70px);*/
       /*     max-width: 1140px;*/
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: darkgreen;
        }
        .fcent {
            text-align: center;
            font-size: 16px;
            color: lightgrey;
            margin: 0;
        }



        .margin-0 {
            margin: 0 !important;
        }

        .bold {
            font-weight: 600;
        }
        .txt_shadow {
            text-shadow: 1px 1px 2px white;
        }
        .tr {
            font-family: Verdana, sans-serif;/* trajan_reg; */
        }
        .btntb {
            background-color: red;
            transition: 1.6s; /*margin: 5px;*/
            border-radius: 30px;
        }
        .btntb:hover {
            background-color: purple;
            transition: 0.3s;
        }

        .flex_across {
            display: flex;
            flex-direction: row;
        }
        .flex_down {
            display: flex;
            flex-direction: column;
        }

        .center_center {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .txtalign_left {
            text-align: left;
        }
        .txtalign_center {
            text-align: center;
        }
        .txtalign_right {
            text-align: right;
        }

        input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
        textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
        select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
            border: 0px solid black;
            -webkit-text-fill-color: black;
            -webkit-box-shadow: 0px 0px 4px 2px black;
            transition: background-color 500000s ease-in-out 0s;
        }

        .search_bar {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            height: 50px;
            background-color: white;
            border-radius: 20px;
            border-width: 2px;
            border-style: outset;
            margin-top: 10px;       /*  15px;   */
            margin-bottom: 10px;    /*  5px;    */
            padding-right: 18px;
            padding-left: 18px;
            font-size: 20px;
            color: black;
            box-shadow: 0px 0px 10px 2px black;
        }
        
        .text_input {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-right: 16px;
            padding-left: 16px;
			background-color: lightgrey;
            border-radius: 10px;
            font-size: 17px;
            color: black;
            cursor: text;
            transition: 0.5s;
        }
        .text_input:hover {
            box-shadow: 0 0 3px 3px darkslategrey;
			background-color: white;
            transition: 0.5s;
        }
        .text_input:focus {
			background-color: white;
            transition: 0.5s;
        }
        .text_input_block {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-right: 16px;
            padding-left: 16px;
			background-color: lightgrey;
            border-radius: 10px;
            font-size: 17px;
            color: black;
            cursor: text;
            transition: 0.5s;
        }
        .text_input_block:hover {
            height: 80px;
            box-shadow: 0 0 3px 3px darkslategrey;
			background-color: white;
            transition: 0.5s;
        }
        .text_input_block:focus {
            height: 240px;
			background-color: white;
            transition: 0.5s;
        }

        .xxxs {
            width: 60px !important;
            margin: 10px;
            padding: 5px !important;
            text-align: center;
        } 
        .xxs {
            width: 100px !important;
        } 
        .xs { 
            width: 160px !important; 
            margin: 10px;  
        }
        .s {
            width: 220px !important;
            margin-right: 5px;
            margin-left: 5px;
        }

        .file_input {
            width: 320px;
            height: 48px;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 8px;
			background-color: lightgrey;
            border-radius: 10px;
            font-size: 18px;
            color: black;
            cursor: text;
            transition: 0.5s;
        }
        .file_input:hover {
            box-shadow: 0 0 3px 3px darkslategrey;
			background-color: white;
            transition: 0.5s;
        }
        .file_input:focus {
			background-color: white;
            transition: 0.5s;
        }

        .submit_input {
            width: 120px;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            text-align: center;
            font-size: 17px;
            color: black;
            cursor: pointer;
            transition: 0.5s;
        }
        .submit_input:hover {
            box-shadow: 0 0 3px 3px darkslategrey;
            color: darkslategrey;
        }
        .subm_l {
            width: 200px !important;
        }


        .buy_form {
            position: flex-end;
        }


    .grid_left, .grid_right, .sample_ad, .sample_promote, .ad_h4 {  
        display: none; 
    }

    .datebar {
        width: auto;
    }

    .eachdate {
        width: 40px;
    }

    .social_icon {
        width: 30px;
        height: 30px;
        margin: 5px;
        -webkit-transition: -webkit-transform 2s;
        transition: transform 0.8s;
    }
    .social_icon:hover {	
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        transform: matrix3d(180deg);
        box-shadow: 0px 0px 10px 7px red;
    }
    .social_icon_wide {
        width: 42px;
        height: 30px;
        margin: 5px;
        -webkit-transition: -webkit-transform 2s;
        transition: transform 0.8s;
    }
    .social_icon_wide:hover {	
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        transform: matrix3d(180deg);
        box-shadow: 0px 0px 10px 7px red;
    }

    @media screen and (min-width: 576px) {
        .search_bar {
            max-width: 450px;
        }
        .text_input_xs {
            max-width: 80px;
        }
        .text_input_xs {
            max-width: 160px;
        }
        .text_input_s {
            max-width: 300px;
        }
        .text_input {
            width: 100%;
            max-width: 340px;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 10px;
            padding-right: 16px;
            padding-left: 16px;
			background-color: lightgrey;
            border-radius: 10px;
            font-size: 17px;
            color: black;
            cursor: text;
            transition: 0.5s;
        }
    }


    @media screen and (min-width: 800px) {

        .logo { 
            width: 107px;   
            height: 100px;
        }
        .topbar {
            height: 100px;
        }

        .topbtn_hide {
            position: relative;
            display: none;
            top: 0;
            width: 170px;
            display: flex;
            flex-direction: row;
        }
        .topbtn_hide:hover {
            width: 300px;
            display: flex;
            flex-direction: row;
        }
        .topbtn_menu {
         /*   display: none;    */
            display: flex;
            width: 300px;
            height: 60px;
            position: relative;
            top: 0;
        }
        .topbtn_menu:hover {
            display: flex;
            width: 300px;
            height: 60px !important;
            position: relative;
        }
        .search_bar {
            max-width: 500px;
        }

        .social_icon {
            width: 50px;
            height: 50px;
            margin: 10px;
        }
        .social_icon_wide {
            width: 70px;
            height: 50px;
            margin: 10px;
        }
    }

    @media screen and (min-width: 1200px) {
        .logo {
            top: 20px;
            left: 20px;
            width: 140px;
            height: 139px;
        }
        .logo:hover {
            box-shadow: 0px 0px 14px 5px red;
            transition: 0.6s;
        }
        .topbar {
            height: 100px;
        }
        .search_bar {
            max-width: 600px;
        }

        .text_input_block {
            min-width: 600px;
            width: 100%;
            height: 40px;
            font-size: 18px;
        }
        .text_input_block:hover {
            min-width: 800px;
            height: 80px;
        }
        .text_input_block:focus {
            min-width: 800px;
            height: 240px;
        }

    }

    @media screen and (min-width: 1600px) {
        .logo {
            width: 160px;
            height: 148px;
        }
        .logo:hover {
            box-shadow: 0px 0px 20px 6px red;
            transition: 0.6s;
        }
        .ad_left {
            position: fixed; 
            top: 200px;
            left: 20px;
            display: flex; 
            flex-direction: column;
            align-items: center;
            height: calc(100vh - 100px); 
            width: 200px;
            padding-top: 40px;
        }
        .ad_right {
            position: fixed; 
            top: 100px;
            right: 20px;
            display: flex; 
            flex-direction: column;
            align-items: center;
            height: calc(100vh - 100px); 
            width: 200px;
            padding-top: 60px;
        }
        .sample_ad {
            width: 150px;
            height: 300px;
            background-color: darkorange;
            display:flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 40px;
        }
        .sample_promote {
            width: 160px;
            height: auto;
            background-color: darkorange;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 40px;
        }
        .ad_h4 {
            display: block;
            font-size: 25px;
            font-weight: 600;
            color: black;
            text-shadow: 1px 1px 2px white;
        }
        .search_bar {
            min-width: 700px;
        }
    }

    @media screen and (min-width: 1830px) {
        .ad_left {
            left: 40px;
            width: 240px;
        }
        .ad_right {
            right: 40px;
            width: 240px;
        }
         .sample_promote {
            width: 200px;
        }
    }

</style>








