@keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-flicker {
    -webkit-animation: flickerAnimation 4s infinite;
    -moz-animation: flickerAnimation 4s infinite;
    -o-animation: flickerAnimation 4s infinite;
    animation: flickerAnimation 4s infinite;
}


@font-face {
    font-family: raysfont;
    src: url(ARCHITRN.TTF);
}

.myheaders {
    color: #FEE8A3;
    font-size: 25px;
}

@media screen and (max-width: 768px) {
    .gallery .block {
         width: auto !important; 
        height: 250px;
        margin: 20px;
        position: relative;
        overflow: hidden;
        box-shadow: 2px 2px 15px 2px #111;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-size: cover;
    }

    .myheaders {
        color: #FEE8A3;
        font-size: 20px;
    }
}




    .slider {
        height: 100%;
        width: 100%;
        position: relative;
        margin: auto;
    }

        .slider .slide {
            display: none;
            height: 100%;
            width: 100%;
        }

            .slider .slide img {
                height: 100%;
                max-height: 600px !important;
                width: 100%;
                filter: contrast(90%);
                /*            object-fit: cover;*/
            }

            .slider .slide .caption {
                position: absolute;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 22px;
                color: #fff;
                padding: 8px 16px;
                background-color: rgba(0, 0, 0, 0.4);
                border-radius: 4px;
            }

        .slider a.prev,
        .slider a.next {
            position: absolute;
            top: 50%;
            font-size: 30px;
            cursor: pointer;
            user-select: none;
            color: #ffffff;
            padding: 12px;
            text-decoration: none;
            transition: 0.2s;
        }

            .slider a.prev:hover,
            .slider a.next:hover {
                background-color: rgba(0, 0, 0, 0.4);
                border-radius: 3px;
            }

        .slider .next {
            right: 20px;
        }

        .slider .prev {
            left: 20px;
        }

    .show {
        animation: fade 0.5s ease-out;
    }

    @keyframes fade {
        from {
            opacity: 0.5;
        }

        to {
            opacity: 1;
        }
    }




    .gallery img {
        width: 250px;
        height: 250px;
        object-fit: cover;
    }

    .gallerytitle {
    }


    .gallery .card {
        margin: 30px auto;
        width: 250px;
        height: 250px;
        border-radius: 20px;
        box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
        cursor: pointer;
        transition: 0.4s;
    }

        .gallery .card .card_image {
            width: 250px;
            height: 250px;
            border-radius: 40px;
        }

            .gallery .card .card_image img {
                width: 250px;
                height: 250px;
                border-radius: 20px;
                object-fit: cover;
            }

        .gallery .card .card_title {
            text-align: center;
            /*        border-radius: 0px 0px 40px 40px;*/
            font-family: sans-serif;
            font-weight: bold;
            font-size: 22px;
            margin-top: -80px;
            height: 40px;
            box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 40%);
        }

        .gallery .card:hover {
            transform: scale(0.9, 0.9);
            box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), -5px -5px 30px 15px rgba(0,0,0,0.22);
        }

    .gallery .title-white {
        color: white;
    }

    .gallery .title-black {
        color: black;
    }







    ::-webkit-input-placeholder {
        font-style: normal;
    }

    :-moz-placeholder {
        font-style: normal;
    }

    ::-moz-placeholder {
        font-style: normal;
    }

    :-ms-input-placeholder {
        font-style: normal;
    }


    .loading {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 999;
    }

        .loading .boxLoading {
            width: 50px;
            height: 50px;
            margin: auto;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

            .loading .boxLoading::before {
                content: '';
                width: 50px;
                height: 5px;
                background: #fff;
                opacity: 0.1;
                position: absolute;
                top: 59px;
                left: 0;
                border-radius: 50%;
                animation: shadow 0.5s linear infinite;
            }

            .loading .boxLoading::after {
                content: '';
                width: 50px;
                height: 50px;
                background: #FEE8A3;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 3px;
                animation: animate 0.5s linear infinite;
            }

    @keyframes animate {
        17% {
            border-bottom-right-radius: 3px;
        }

        25% {
            transform: translateY(9px) rotate(22.5deg);
        }

        50% {
            transform: translateY(18px) rotate(45deg);
            border-bottom-right-radius: 40px;
        }

        75% {
            transform: translateY(9px) rotate(67.5deg);
        }

        100% {
            transform: translateY(0) rotate(90deg);
        }
    }

    @keyframes shadow {
        0%, 100% {
            transform: scale(1, 1);
        }

        50% {
            transform: scale(1.2, 1);
        }
    }




    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }



    #contact {
        width: 100%;
        height: 100%;
        background-color: #000;
    }

        #contact .section-header {
            text-align: center;
            margin: 0 auto;
            padding: 40px 0;
            font: 300 60px 'Oswald', sans-serif;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 6px;
        }

        #contact .contact-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            max-width: 840px;
        }

        /* Left contact page */
        #contact .form-horizontal {
            /*float: left;*/
            max-width: 400px;
            font-family: 'Lato';
            font-weight: 400;
        }

        #contact .form-control,
        textarea {
            max-width: 400px;
            background-color: #000;
            color: #fff;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        #contact .send-button {
            margin-top: 15px;
            height: 34px;
            width: 100%;
            max-width: 400px;
            overflow: hidden;
            transition: all .2s ease-in-out;
            background-color: #FEE8A3;
        }

        #contact .alt-send-button {
            height: 34px;
            transition: all .2s ease-in-out;
            background-color: #FEE8A3;
        }

        #contact .send-text {
            display: block;
            margin-top: 10px;
            font: 700 12px 'Lato', sans-serif;
            letter-spacing: 2px;
            color: #000;
        }

        #contact .alt-send-button:hover {
            transform: translate3d(0px, -29px, 0px);
        }

        /* Begin Right Contact Page */
        #contact .direct-contact-container {
            max-width: 400px;
        }

        /* Location, Phone, Email Section */
        #contact .contact-list {
            list-style-type: none;
            margin-left: -30px;
            padding-right: 20px;
        }

        #contact .list-item {
            line-height: 4;
            color: #aaa;
        }

        #contact .contact-text {
            font: 300 15px 'Lato', sans-serif;
            letter-spacing: 1.9px;
            color: #bbb;
        }

        #contact .place {
            margin-left: 10px;
        }

        #contact .phone {
            margin-left: 10px;
        }

        #contact .gmail {
            margin-left: 10px;
        }

        #contact .contact-text a {
            color: #bbb;
            text-decoration: none;
            transition-duration: 0.2s;
        }

            #contact .contact-text a:hover {
                color: #fff;
                text-decoration: none;
            }


        /* Social Media Icons */
        #contact .social-media-list {
            position: relative;
            font-size: 22px;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            padding: 0;
        }

            #contact .social-media-list li a {
                color: #fff;
            }

            #contact .social-media-list li {
                position: relative;
                display: inline-block;
                height: 60px;
                width: 60px;
                margin: 10px 3px;
                line-height: 60px;
                border-radius: 50%;
                color: #fff;
                background-color: rgb(27,27,27);
                cursor: pointer;
                transition: all .2s ease-in-out;
            }

                #contact .social-media-list li:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    border-radius: 50%;
                    opacity: 0;
                    box-shadow: 0 0 0 1px #fff;
                    transition: all .2s ease-in-out;
                }

                #contact .social-media-list li:hover {
                    background-color: #fff;
                }

                    #contact .social-media-list li:hover:after {
                        opacity: 1;
                        transform: scale(1.12);
                        transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
                    }

                    #contact .social-media-list li:hover a {
                        color: #000;
                    }

        #contact .copyright {
            font: 200 14px 'Oswald', sans-serif;
            color: #555;
            letter-spacing: 1px;
            margin-top: 50px;
        }

        #contact hr {
            border-color: rgba(255,255,255,.6);
        }

    /* Begin Media Queries*/
    @media screen and (max-width: 850px) {
        #contact .contact-wrapper {
            display: flex;
            flex-direction: column;
        }

        #contact .direct-contact-container, .form-horizontal {
            margin: 0 auto;
        }

        #contact .direct-contact-container {
            margin-top: 60px;
            max-width: 300px;
        }

        #contact .social-media-list li {
            height: 60px;
            width: 60px;
            line-height: 60px;
        }

            #contact .social-media-list li:after {
                width: 60px;
                height: 60px;
                line-height: 60px;
            }
    }

    @media screen and (max-width: 569px) {

        #contact .direct-contact-container, .form-wrapper {
            float: none;
            margin: 0 auto;
        }

        #contact .form-control, textarea {
            margin: 0 auto;
        }


        #contact .name, .email, textarea {
            width: 280px;
        }

        #contact .direct-contact-container {
            margin-top: 60px;
            max-width: 280px;
        }

        #contact .social-media-list {
            left: 0;
        }

            #contact .social-media-list li {
                height: 55px;
                width: 55px;
                line-height: 55px;
                font-size: 2rem;
            }

                #contact .social-media-list li:after {
                    width: 55px;
                    height: 55px;
                    line-height: 55px;
                }
    }


    #shailesh {
        text-align: end;
    }

    @media screen and (max-width: 410px) {
        #contact .send-button {
            width: 99%;
        }

        #shailesh {
            text-align: left;
        }
    }



    .header {
        color: #fff;
        margin: 0;
        font-size: small;
    }

    .image-box {
        position: relative;
        margin: auto;
        overflow: hidden;
    }

        .image-box img {
            max-width: 80%;
        }

    .aboutcol {
        background-color: #FEE8A3;
        color: #000;
    }


    #mainabout .card-text {
        padding-top: 15px;
    }

    #mainabout .card-subtitle {
        padding-top: 10px;
    }

    #mainabout img {
        transition: transform .4s;
    }

        #mainabout img:hover {
            transform: scale(1.2);
            transform-origin: 50% 50%;
        }


    #mainabout {
        background-color: #000 !important;
        color: #fff;
        display: inline-block;
    }

    #myfooter {
        position: relative;
        width: 95%;
        padding: 10px 20px 10px 10px;
        font-size: 20px;
        position: relative;
        color: #FFF;
        background: #000;
    }

        #myfooter:after {
            content: " ";
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            background: #000;
            transform-origin: bottom left;
            -ms-transform: skew(-30deg, 0deg);
            -webkit-transform: skew(-30deg, 0deg);
            transform: skew(-30deg, 0deg);
        }


    .accslide::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    .accslide::-webkit-scrollbar {
        width: 5px;
        background-color: #FEE8A3;
    }

    .accslide::-webkit-scrollbar-thumb {
        background-color: #FEE8A3;
        border: 2px solid #FEE8A3;
    }





    #services {
        background-color: #FEE8A3;
        background-image: url('../img/low-contrast-linen.png');
    }

        #services .container {
            width: 100vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-family: "Montserrat", sans-serif;
        }

        #services .block {
            width: 300px;
            height: 300px;
            margin: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 2px 2px 15px 2px #111;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-position: center;
            background-size: cover;
        }

            #services .block:nth-child(1) {
                background-image: url("../img/renovation.png");
            }

            #services .block:nth-child(2) {
                background-image: url("../img/residential.jfif");
            }

            #services .block:nth-child(3) {
                background-image: url("../img/commercial.jpg");
            }

            #services .block:nth-child(4) {
                background-image: url("../img/industrial.jpg");
            }

            #services .block:nth-child(5) {
                background-image: url("../img/turnkey.jpg");
            }

        #services .overlay {
            z-index: 5;
            width: 80%;
            height: 100%;
            background-color: rgba(139, 135, 135, 0.5);
            transform: rotate(45deg) scaleY(2) scaleX(0);
            transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-left: #fdca40 2px solid;
            border-right: #fdca40 2px solid;
            transform: rotate(45deg) scaleY(2) scaleX(1);
        }

        #services .block:hover .overlay {
            transform: rotate(45deg) scaleY(2) scaleX(0);
        }

        #services .block--text {
            position: absolute;
            top: 25%;
            width: 100%;
            height: 100%;
            padding: 20px;
            color: antiquewhite;
            transform-origin: bottom center;
            transition: all 300ms ease-in;
            z-index: 100;
            opacity: 1;
            transition: all 300ms 200ms ease-in;
        }

        #services .block:hover .block--text {
            opacity: 0;
        }

        #services .text--head {
            text-align: center;
            font-weight: 600;
            letter-spacing: 2px;
            padding-bottom: 15px;
            font-size: 20px;
            text-transform: uppercase;
            color: #fdca40;
        }

        #services .text--quote {
            font-size: 14px;
            line-height: 150%;
        }

        #services .text--person {
            padding-top: 15px;
            position: relative;
            text-align: end;
            color: #fdca40;
        }



    .gallery .block {
        width: 250px;
        height: 250px;
        margin: 20px;
        position: relative;
        overflow: hidden;
        box-shadow: 2px 2px 15px 2px #111;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-size: cover;
    }



    .gallery .overlay {
        z-index: 5;
        width: 80%;
        height: 100%;
        background-color: rgba(83, 83, 83, 0.5);
        transform: rotate(45deg) scaleY(2) scaleX(0);
        transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
        border-left: #fdca40 2px solid;
        border-right: #fdca40 2px solid;
        transform: rotate(45deg) scaleY(2) scaleX(1);
    }

    .gallery .block:hover .overlay {
        transform: rotate(45deg) scaleY(2) scaleX(0);
    }

    .gallery .block--text {
        position: absolute;
        top: 25%;
        width: 100%;
        height: 100%;
        padding: 20px;
        color: antiquewhite;
        transform-origin: bottom center;
        transition: all 300ms ease-in;
        z-index: 100;
        opacity: 1;
        transition: all 300ms 200ms ease-in;
    }

    .gallery .block:hover .block--text {
        opacity: 0;
    }

    .gallery .text--head {
        text-align: center;
        font-weight: 600;
        letter-spacing: 2px;
        padding-bottom: 15px;
        font-size: 20px;
        text-transform: uppercase;
        color: #fdca40;
    }

    .gallery .text--quote {
        font-size: 14px;
        line-height: 150%;
    }

    .gallery .text--person {
        padding-top: 15px;
        position: relative;
        text-align: end;
        color: #fdca40;
    }





    section::before,
    section::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }

    section {
        position: relative;
        background: #2980b9;
    }

    /* Double Diagonal line */

    .ss-style-doublediagonal {
        z-index: 1;
        padding-top: 2em;
        background: #2072a7;
    }

        .ss-style-doublediagonal::before,
        .ss-style-doublediagonal::after {
            top: 0;
            left: -25%;
            z-index: -1;
            width: 150%;
            height: 75%;
            background: inherit;
            -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .ss-style-doublediagonal::before {
            height: 50%;
            background: #4e4e4e;
            -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
            -webkit-transform-origin: 3% 0;
            transform-origin: 3% 0;
        }




    #about {
        background: url(../img/crisp-paper-ruffles.png);
        padding-top: 70px;
        padding-bottom: 90px;
    }



        #about .one h1 {
            text-align: center;
            text-transform: uppercase;
            padding-bottom: 5px;
        }

            #about .one h1:before {
                width: 28px;
                height: 5px;
                display: block;
                content: "";
                position: absolute;
                bottom: 3px;
                left: 50%;
                margin-left: -14px;
                background-color: #FEE8A3;
            }



    .container {
        max-width: 640px;
        /* background-color: aqua; */
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #services .one h1 {
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 5px;
    }

        #services .one h1:before {
            width: 28px;
            height: 5px;
            display: block;
            content: "";
            position: absolute;
            bottom: 3px;
            left: 50%;
            margin-left: -14px;
            background-color: #000;
        }

        #services .one h1:after {
            width: 100px;
            height: 1px;
            display: block;
            content: "";
            position: relative;
            margin-top: 25px;
            left: 50%;
            margin-left: -50px;
            background-color: #000;
        }






    #services h1 {
        position: relative;
        padding: 0;
        margin: 0;
        font-family: raysfont;
        font-weight: 300;
        font-size: 40px;
        color: #080808;
        letter-spacing: 5px;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

        #services h1 span {
            display: block;
            font-size: 0.5em;
            line-height: 1.3;
        }

        #services h1 em {
            font-style: normal;
            font-weight: 600;
        }

    #about .card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #000;
        padding: 50px 100px 50px 50px;
        text-align: justify;
        border-radius: 8px;
        box-shadow: 1px 1px 10px #00000035;
    }

        #about .card .head {
            font-size: 22px;
            font-weight: 700;
            padding-bottom: 8px;
            color: #FEE8A3;
        }

        #about .card .text {
            font-size: 16px;
            color: #fff;
        }

    #about .img img {
        width: 350px;
        border-radius: 8px;
        box-shadow: 1px 1px 10px #00000035;
        z-index: 1;
        transform: translateX(-20%);
        /*    filter: grayscale(100%);*/
        transition: all 200ms ease-in-out;
    }

        #about .img img:hover {
            transform: translate(-20%, -5%) scale(1.02);
            filter: grayscale(0%);
        }


    .elastislide-horizontal {
        padding: 0px !important;
    }





    @media only screen and (min-width: 769px) and (max-width: 3000px) {


        /* LIST */
        ul {
            list-style: none;
        }

        /* FORM */
        input[type="radio"] {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .content {
            height: 100vh;
        }

        label {
            display: block;
            float: left;
            height: 100vh;
            width: 40px !important;
            overflow: hidden;
            background: #000;
            text-align: center;
            font-size: 14px;
            color: #fff;
            border-right: 1px solid #fff;
            line-height: 50px;
            transition: background 300ms ease;
        }

        li:nth-child(even) > input + label {
            background: #000;
        }

            label:hover,
            li:nth-child(even) > input + label:hover {
                background: #000;
                color: #fff;
                cursor: pointer;
            }

        input[type=radio]:checked ~ label {
            background: #000;
            color: #fff;
            border-right: 1px solid #000;
            cursor: default !important;
        }


        /* SLIDES */
        .accslide {
            display: block;
            height: 100%;
            width: 0px;
            /*  padding: 10px 0;*/
            float: left;
            overflow-x: hidden;
            font-sizes: 12px;
            line-height: 1.5;
            transition: all 700ms ease;
        }

            .accslide * {
                /*  padding-left: 10px;*/
            }

            .accslide img {
                /*  margin-top: 10px;*/
            }

        input[type=radio]:not(:checked) ~ label > * {
            padding-left: 7px;
            font-size: 1.2em;
            white-space: nowrap;
            transform: rotate(90deg);
        }

        input[type=radio]:checked ~ label > * {
            display: none;
        }

        li:nth-child(1):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 160px);
        }


        li:nth-child(2):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 160px);
        }

        li:nth-child(3):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 160px);
        }

        li:nth-child(4):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 160px);
        }

        li:nth-child(1):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 200px);
        }

        li:nth-child(2):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 200px);
        }

        li:nth-child(3):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 200px);
        }

        li:nth-child(4):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 200px);
        }

        li:nth-child(5):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 200px);
        }

        li:nth-child(1):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 240px);
        }

        li:nth-child(2):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 240px);
        }

        li:nth-child(3):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 240px);
        }

        li:nth-child(4):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 240px);
        }

        li:nth-child(5):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 240px);
        }

        li:nth-child(6):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 240px);
        }

        li:nth-child(1):nth-last-child(7) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(2):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(3):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(4):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(5):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(6):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(7):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 280px);
        }

        li:nth-child(1):nth-last-child(8) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(2):nth-last-child(7) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(3):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(4):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(5):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(6):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(7):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(8):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }




        .aboutinfo {
            margin: 10% auto auto auto;
        }

        .alert-success {
            background-color: #000 !important;
            border-color: #000 !important;
            color: #21b26e !important;
            padding: 0px !important;
        }

        .alert {
            margin-bottom: 0px !important;
        }


        #og-grid li a img {
            width: 250px;
            height: 250px;
            object-fit: cover;
        }

        .related_photo {
            width: 180px !important;
            height: 150px !important;
            object-fit: cover;
        }
    }


    @media only screen and (min-width: 320px) and (max-width: 768px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */


        .slider .slide img {
            height: 100%;
            max-height: 600px !important;
            width: 100%;
            filter: contrast(90%);
            object-fit: cover;
        }

        /* LIST */
        ul {
            list-style: none;
        }

        /* FORM */
        input[type="radio"] {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .content {
            height: 100vh;
        }

        label {
            display: block;
            float: left;
            height: 100vh;
            width: 20px !important;
            overflow: hidden;
            background: #000;
            text-align: center;
            font-size: 14px;
            color: #fff;
            border-right: 1px solid #fff;
            line-height: 50px;
            transition: background 300ms ease;
        }

        li:nth-child(even) > input + label {
            background: #000;
        }

            label:hover,
            li:nth-child(even) > input + label:hover {
                background: #000;
                color: #fff;
                cursor: pointer;
            }

        input[type=radio]:checked ~ label {
            background: #000;
            color: #fff;
            border-right: 1px solid #000;
            cursor: default !important;
        }


        /* SLIDES */
        .accslide {
            display: block;
            height: 100%;
            width: 0px;
            /*  padding: 10px 0;*/
            float: left;
            overflow-x: hidden;
            font-sizes: 12px;
            line-height: 1.5;
            transition: all 700ms ease;
        }

            .accslide * {
                /*  padding-left: 10px;*/
            }

            .accslide img {
                /*  margin-top: 10px;*/
            }

        input[type=radio]:not(:checked) ~ label > * {
            padding-left: 7px;
            font-size: 0.7em;
            white-space: nowrap;
            transform: rotate(90deg);
        }

        input[type=radio]:checked ~ label > * {
            display: none;
        }

        /*li:nth-child(1):nth-last-child(2) input[type=radio]:checked ~ .accslide {*/
        /*            width: calc(100% - 80px);*/
        /*width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(1) input[type=radio]:checked ~ .accslide {*/
        /*            width: calc(100% - 80px);*/
        /*width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(3) input[type=radio]:checked ~ .accslide {*/
        /*            width: calc(100% - 120px);*/
        /*width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(3):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(3):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(4):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(3):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(4):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(5):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(3):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(4):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(5):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(6):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(7) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(3):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(4):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(5):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(6):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(7):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(1):nth-last-child(8) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(2):nth-last-child(7) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(3):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(4):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(5):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(6):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(7):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }

        li:nth-child(8):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 80px);
        }*/



        li:nth-child(1):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }


        li:nth-child(2):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(4):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(4):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(5):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(4):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(5):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(6):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(7) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(4):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(5):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(6):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(7):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(1):nth-last-child(8) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(2):nth-last-child(7) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(3):nth-last-child(6) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(4):nth-last-child(5) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 320px);
        }

        li:nth-child(5):nth-last-child(4) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(6):nth-last-child(3) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(7):nth-last-child(2) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        li:nth-child(8):nth-last-child(1) input[type=radio]:checked ~ .accslide {
            width: calc(100% - 120px);
        }

        .my-auto {
            margin-top: 20px !important;
        }

        .w-75 {
            width: 100% !important;
        }


        .accslide::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }

        .accslide::-webkit-scrollbar {
            width: 1px;
            background-color: #FEE8A3;
        }

        .accslide::-webkit-scrollbar-thumb {
            background-color: #FEE8A3;
            border: 1px solid #FEE8A3;
        }

        .aboutinfo {
            margin: 1% auto auto auto;
        }

        #about .card {
            padding: 50px 50px 50px 50px;
        }

        #about .container {
            padding: 0px !important;
        }

        #about {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
        }


        .card-body h2 {
            font-size: 20px;
        }

        #about .card .text {
            font-size: 16px;
            color: #fff;
        }

        #about .card .head {
            font-size: 18px;
            font-weight: 700;
            padding-bottom: 8px;
            color: #FEE8A3;
        }

        #about .img img {
            width: 350px;
            border-radius: 8px;
            box-shadow: 1px 1px 10px #00000035;
            z-index: 1;
            margin-left: 20%;
            transform: translateX(-20%);
            /* filter: grayscale(100%); */
            transition: all 200ms ease-in-out;
        }


        #services .container {
            width: auto !important;
        }


        #contact .contact-text {
            font-size: 13px !important;
        }

        .form-group {
            padding-bottom: 10px !important;
        }


        .alert-success {
            background-color: #000 !important;
            border-color: #000 !important;
            color: #21b26e !important;
            padding: 0px !important;
        }

        .alert {
            margin-bottom: 0px !important;
        }




        #og-grid li a img {
            width: 250px;
            height: 250px;
            object-fit: cover;
        }

        .related_photo {
            width: 100px !important;
            height: 70px !important;
            object-fit: cover;
        }

        #slideimg {
            max-height: 210px;
        }


        .slider a.prev, .slider a.next {
            position: absolute;
            top: 30%;
            font-size: 30px;
            cursor: pointer;
            user-select: none;
            color: #ffffff;
            text-decoration: none;
            transition: 0.2s;
        }
    }