  .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .col-xl-3 {
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
            padding-left: 15px;
            padding-right: 15px;
        }

        .mb-3, .my-3 {
            margin-bottom: 1rem !important;
        }

        a {
            color: #1c1e3a !important;
            text-decoration: none;
        }

        .container.listing.has-square-block .post-block-container .post-block {
            margin-top: 0px !important;
        }


        .post-block {
            margin-top: 0;
            margin-bottom: 25px;
            /* box-shadow: 3px 3px 24px rgb(0 0 0 / 8%);*/
            position: relative;
            overflow: hidden;
            border-radius: 20px;
        }





        /*  .image-container {
            background: #ececec !important;
        }*/

        .image-container {
            /*background: #F9F9F9;*/
            margin-bottom: 0px;
            height: 150px;
            pointer: cursor;
        }

        .image-container {
            position: relative;
            height: 135px;
            width: 100%;
        }

        .post-block .image-container img {
            position: absolute;
            top: 50%;
            left: 50%;
            max-width: 130px;
            max-height: 110px;
            -ms-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
        }

        .title-container {
            text-align: center;
            width: 100%;
            float: left;
        }

        .logo-font {
            text-align: center;
            background: white;
            color: black;
            font-weight: bold;
            letter-spacing: 2px;
            font-family: "Futura";
            border: 2px solid #000;
            text-transform: uppercase;
            border-radius: 20px;
            font-size: 14px;
            padding: 10px;
            letter-spacing: 2px;
            /* width: 100%;
            float: left;*/
            padding-left: 22px;
            padding-right: 22px;
            display: inline-block;
        }


        main.main h2 {
            font-size: 22px;
            margin: 0 0 30px 0;
            padding: 0 0 5px 0;
            font-weight: bold;
            border-bottom: 2px #000 solid;
        }

        *, ::after, ::before {
            box-sizing: border-box;
        }

        .logo {
            float: left;
            margin: 0px;
            padding: 0px;
        }

        header {
            width: 100%;
            background: #fff;
            margin-bottom: 30px;
            padding: 30px;
            padding-bottom: 10px;
            padding-top: 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
        }


        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        img.body-img {
            position: absolute;
            right: 0;
            top: 0;
            z-index: -9;
        }

        .title {
            color: #000;
            font-family: "Futura";
            font-weight: bold;
            letter-spacing: 2px;
            font-size: 24px;
            margin-top: 0px;
            margin-bottom: 30px;
        }


        .user-dropdown {
            display: inline-block;
            margin-top: 8px;
        }

        .dropdown2-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #fff;
            min-width: 200px px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
            z-index: 1;
        }










        .sec-center {
            position: relative;
            max-width: 100%;
            text-align: center;
            z-index: 200;
        }

        [type="checkbox"]:checked,
        [type="checkbox"]:not(:checked) {
            position: absolute;
            left: -9999px;
            opacity: 0;
            pointer-events: none;
        }

        .dark-light:checked + label,
        .dark-light:not(:checked) + label {
            position: fixed;
            top: 40px;
            right: 40px;
            z-index: 20000;
            display: block;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            cursor: pointer;
            transition: all 200ms linear;
            box-shadow: 0 0 25px rgba(255,235,167,.45);
        }

        .dark-light:checked + label {
            transform: rotate(360deg);
        }

            .dark-light:checked + label:after,
            .dark-light:not(:checked) + label:after {
                position: absolute;
                content: '';
                top: 1px;
                left: 1px;
                overflow: hidden;
                z-index: 2;
                display: block;
                border-radius: 50%;
                width: 44px;
                height: 44px;
                background-color: #102770;
                background-image: url('https://assets.codepen.io/1462889/moon.svg');
                background-size: 20px 20px;
                background-repeat: no-repeat;
                background-position: center;
                transition: all 200ms linear;
                opacity: 0;
            }

            .dark-light:checked + label:after {
                opacity: 1;
            }

            .dark-light:checked + label:before,
            .dark-light:not(:checked) + label:before {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                overflow: hidden;
                z-index: 1;
                display: block;
                border-radius: 50%;
                width: 46px;
                height: 46px;
                background-color: #48dbfb;
                background-image: url('https://assets.codepen.io/1462889/sun.svg');
                background-size: 25px 25px;
                background-repeat: no-repeat;
                background-position: center;
                transition: all 200ms linear;
            }

            .dark-light:checked + label:before {
                background-color: #000;
            }

        .light-back {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            background-color: #fff;
            overflow: hidden;
            background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
            background-position: center;
            background-repeat: repeat;
            background-size: 4%;
            height: 100%;
            width: 100%;
            transition: all 200ms linear;
            opacity: 0;
        }

        .dark-light:checked ~ .light-back {
            opacity: 1;
        }

        .dropdown:checked + label,
        .dropdown:not(:checked) + label {
            position: relative;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            font-size: 15px;
            line-height: 2;
            height: 50px;
            transition: all 200ms linear;
            border-radius: 4px;
            width: 335px;
            letter-spacing: 1px;
            display: -webkit-inline-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            -ms-flex-pack: center;
            text-align: center;
            border: none;
           
            cursor: pointer;
            color: #102770;
            box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
        }

        .dark-light:checked ~ .sec-center .for-dropdown {
            background-color: #102770;
         
            box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
        }

        .dropdown:checked + label:before,
        .dropdown:not(:checked) + label:before {
            position: fixed;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 100%;
            z-index: -1;
            cursor: auto;
            pointer-events: none;
        }

        .dropdown:checked + label:before {
            pointer-events: auto;
        }

        .dropdown:not(:checked) + label .uil {
            font-size: 24px;
            margin-left: 10px;
            transition: transform 200ms linear;
        }

        .dropdown:checked + label .uil {
            transform: rotate(180deg);
            font-size: 24px;
            margin-left: 10px;
            transition: transform 200ms linear;
        }

        .section-dropdown {
            position: absolute;
            padding: 5px;
            background-color: #111;
            top: 70px;
            left: 0;
            width: 100%;
            border-radius: 4px;
            display: block;
            box-shadow: 0 14px 35px 0 rgba(9,9,12,0.4);
            z-index: 2;
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px);
            transition: all 200ms linear;
        }

        .dark-light:checked ~ .sec-center .section-dropdown {
            background-color: #fff;
            box-shadow: 0 14px 35px 0 rgba(9,9,12,0.15);
        }

        .dropdown:checked ~ .section-dropdown {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .section-dropdown:before {
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 20px;
            content: '';
            display: block;
            z-index: 1;
        }

        .section-dropdown:after {
            position: absolute;
            top: -7px;
            left: 30px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #111;
            content: '';
            display: block;
            z-index: 2;
            transition: all 200ms linear;
        }

        .dark-light:checked ~ .sec-center .section-dropdown:after {
            border-bottom: 8px solid #fff;
        }



        .dark-light:checked ~ .sec-center .section-dropdown a {
            color: #102770;
        }


        .dark-light:checked ~ .sec-center .section-dropdown a:hover {
         
            background-color: #102770;
        }

        a .uil {
            font-size: 22px;
        }

        .dropdown-sub:checked + label,
        .dropdown-sub:not(:checked) + label {
            position: relative;
            color: #fff;
            transition: all 200ms linear;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            font-size: 15px;
            border-radius: 2px;
            padding: 5px 0;
            padding-left: 20px;
            padding-right: 15px;
            text-align: left;
            text-decoration: none;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            align-items: center;
            justify-content: space-between;
            -ms-flex-pack: distribute;
            cursor: pointer;
        }

            .dropdown-sub:checked + label .uil,
            .dropdown-sub:not(:checked) + label .uil {
                font-size: 22px;
            }

            .dropdown-sub:not(:checked) + label .uil {
                transition: transform 200ms linear;
            }

            .dropdown-sub:checked + label .uil {
                transform: rotate(135deg);
                transition: transform 200ms linear;
            }

         

        .dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub {
            color: #102770;
        }

          

        .section-dropdown-sub {
            position: relative;
            display: block;
            width: 100%;
            pointer-events: none;
            opacity: 0;
            max-height: 0;
            padding-left: 10px;
            padding-right: 3px;
            overflow: hidden;
            transition: all 200ms linear;
        }

        .dropdown-sub:checked ~ .section-dropdown-sub {
            pointer-events: auto;
            opacity: 1;
            max-height: 999px;
        }


         .profile-picture {
            width: 35px;
            height: 35px;
            border-radius: 45px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }



        .section-dropdown-sub a {
            font-size: 14px;
        }

            .section-dropdown-sub a .uil {
                font-size: 20px;
            }

        .logo {
            position: fixed;
            top: 50px;
            left: 40px;
            display: block;
            z-index: 11000000;
            background-color: transparent;
            border-radius: 0;
            padding: 0;
            transition: all 250ms linear;
        }

            .logo:hover {
                background-color: transparent;
            }

            .logo img {
                height: 26px;
                width: auto;
                display: block;
                transition: all 200ms linear;
            }

        .dark-light:checked ~ .logo img {
            filter: brightness(10%);
        }

        @media screen and (max-width: 991px) {
            .logo {
                top: 30px;
                left: 20px;
            }

            .dark-light:checked + label,
            .dark-light:not(:checked) + label {
                top: 20px;
                right: 20px;
            }
        }

        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');



.dropdown:checked ~ .section-dropdown a {
    color: #fff !important;
    width: 100%;
    float: left;
    text-align: left;
    padding: 7px;
    border-bottom: 1px #fff solid;
}
